少妇的肉体k8经典,性色欲网站人妻丰满中文久久不卡 http://www.chinatradebeam.com/blog/ zh-cn www.emlog.net 软g产品中,如何减少面跌{Q?/title> <link>http://www.chinatradebeam.com/blog/post-13065.html</link> <description><![CDATA[<section class="sc-jqn0up-2 sc-12cf9wq-0 sc-2p1my8-1 icknLB eUvQDA fiSgCE detail-head"> <div id="8iomsme0qe" class="titleBox"> </div> </section> <section class="sc-jqn0up-2 sc-12cf9wq-0 sc-1o84bjj-0 oaRTx eUvQDA xltLm interest-recommend"> <div id="8iomsme0qe" class="swiper-arrow-next"> </div> </section> <div> <section class="sc-jqn0up-2 sc-12cf9wq-0 sc-x1sw84-0 oaRTx eUvQDA eOjfdL"> <section class="sc-jqn0up-2 ftFyVi"> <div id="8iomsme0qe" class="decorationTitle"> <p>​我们在q行设计的时候,往往遇到以下的场景:</p> </div> </section> <section class="sc-jqn0up-2 ckgUXN imgCon"> <section class="sc-jqn0up-2 oaRTx workShowBox"> <div id="8iomsme0qe" class="sc-x1sw84-1 kEhNjF articleContentWrapper"> <p><img src="https://img.zcool.cn/community/01afe35c452c34a801213f2651bdca.png" width="907" height="553"></p> <p> </p> <p> </p> <p>q就是信息的无限性和手机屏幕的有限性之间的矛盾Q如何把信息合理的展C给用户Q需要我们重新对信息q行l织分类Q信息能更高效有序地被用户认知。在q行信息设计的时候,我们会经帔R?ldquo;扁^化设?rdquo;q个词,在我的理解看来,扁^化设计可以理解ؓQ?ldquo;_交互步骤Q用L(fng)最的步骤完成Q?rdquo;。层U太多了用户׃看不懂;即看得懂,层多了用v来也ȝQ因此:手机上能不蟩转就不蟩转。那我们来看看有没有办法减蟩?hellip;</p> <p> </p> <p><strong>1Q列表型、宫格型入口架构改ؓtab的Ş式,把蟩转页面改为滑动页?/strong></p> <p>当我们的面承蝲信息,q且不展C每个模块二U内容的时候,我们可以采取列表型、宫格型的导航设计,q样可以帮助用户快速的定位到相应的面Q但是每ơ信息获取时Q需要点击蟩转到另外一个页面。当每个模块都需要展CZ部分内容的时候,假如采用列表的导航设计时Q往往׃D面高度q长Q用户需要滑动好几屏q才能浏览完信息Q这样导致信息获取的效率大打折扣。此时我们考虑采用tab的导航方式,把不同类型的内容形式通过tab的Ş式展C出来,q样做可以有两个好处Q?strong>1.用户能快速掌握全局内容cd 2.能快速切换定位目标内容进行信息获?/strong></p> <p> </p> <p> </p> <p><strong>2Q针对用h心\径的优化Q页面中露出内容、便捷入?/strong></p> <p>比如腾讯动OAPPQ旧版本用户在追更、l阅LQ通过点击书架Q然后再ơ点M品进行阅诅R在观察用户行ؓӞ我们发现用户持箋阅读的行为时长远大于览LC品的行ؓ旉Qؓ了让用户最方便地进行追更与持箋阅读Q我们在首页攑և了最q在看的作品Q让用户能快速进行阅读,同时采用横封的Ş式,以保证该栏目不会q高?/p> <p>TIPS:</p> <p><strong>A.采用q个Ҏ(gu)通常要观察用L(fng)行ؓ数据Q分析用L(fng)行ؓ路径Q同时也要与产品沟通确定好优先U与产品{略?/strong></p> <p><strong>B.采用q种方式Ӟ通常都是l合左右滑的手势露出更多的作品?nbsp;</strong></p> <p> </p> <p><img src="https://img.zcool.cn/community/011a615c452d05a801203d22c673ea.png"></p> <p> </p> <p> </p> <p><strong>3Q内Ҏ(gu)性化Q列表内容外露显C?/strong></p> <p>工具内容显性化设计Q能让用h见即所得,快速明的理解到工h提供的核心功能和服务Q也能有效地减少用户与工h提供的核心服务之间的交互步骤和流E,让用户在当前工具的内容区完成与工L(fng)核心交互?/p> <p>比如淘宝APP中,“我的淘宝”面采用了大量内容显性化的设计,用户在当前页面就能快速掌握到核心信息?/p> <p>          </p> <p><img src="https://img.zcool.cn/community/01b8b95c452dbea801213f26cdbf5b.png"></p> <p> </p> <p> </p> <p><strong>4Q先露出一部分Q滑动露出更?/strong></p> <p>在Y轴上Q通过面覆盖的Ş式,我们可以当前面露出一部分信息Q当用户有兴时Q可以通过滑动览更多信息?/p> <p>比如N乐播NQ默认评论只露出标题让用户可以发现有该栏目,当用户上滑时Q采用动效的形式评论页面在当前展开?/p> <p>比如每日优鲜“我的面”Q用h了解当会员有什么权益时Q可以滑动页面展C更多会员信息,无需跌{q入会员权益c?nbsp;</p> <p> </p> <p><img src="https://img.zcool.cn/community/01cda55c452de9a801213f263d8319.gif"></p> <p> </p> <p>每日优鲜</p> <p> </p> <p> </p> <p><strong>5Q页面半覆盖</strong></p> <p>当需要需要承载内容信息时Q我们往往使用“更多”的Ş式蟩转到一个新的页面。那么对?ldquo;更多”Q有没有一个不用蟩转的解决办法呢?我们可以使用面半覆盖的形式Q当点击下拉Ӟ新的内容面展开覆盖当前面。比如虾c音乐的看点面Q点?ldquo;更多分类”Ӟ下拉面半屏覆盖Q展C更多的{选条件。比如优酯频,视频详情,点击介或选集Ӟ新内容从下方滑出半页面覆盖?nbsp;</p> <p> </p> <p><img src="https://img.zcool.cn/community/01c4765c452e3aa801213f26c06051.gif"></p> <p>虄音乐点击更多分类</p> <p> </p> <p> </p> <p><img src="https://img.zcool.cn/community/01f5715c452e3ca801203d22fd74b0.gif"></p> <p>优酷播放늂ȝ?/p> <p> </p> <p> </p> <p><strong>6Q键盘联动,如赶集房屋发布,58创徏?/strong></p> <p>我们可以整合表单的信息字D,同cd的字D进行合qӞ同时l合输入控gQ设计联动式lgQ让用户在表单输入时更加高效Q避免用户频J的跛_跛_相同cd的输入项?/p> <p> </p> <p><img src="https://img.zcool.cn/community/015af25c452ea0a801203d22108e69.gif"></p> <p>赉|优化前控g反复调入跛_</p> <p> </p> <p><img src="https://img.zcool.cn/community/0130ad5c452ec9a801203d227d3b8b.gif"></p> <p>优化后联动式键盘</p> <p> </p> <p> </p> <p> </p> <p><strong>7Q采用Q层,全跌{改ؓ半蟩转(大趋势如此)</strong></p> <p>面对需要展C更多信息或下一步操作需要进行蟩转时Q目前越来越多采用了从下往上Q层的形式Q实C原场景的衔接?/p> <p>比如Q腾讯动漫APP的阅d支付,NOW APP直播间送礼Q淘宝的详情|看参数、添加购物R{都用了层半蟩转的形式 </p> <p><img src="https://img.zcool.cn/community/011c065c452f08a801203d2229e823.png"></p> <p> </p> <p> </p> <p><strong>8QZ轴分层覆盖,同时展现?/strong></p> <p>在同时展C多U内Ҏ(gu)Q假如对于某个内Ҏ(gu)曝光需求,或者是惌用户触达到该内容Q不惛_面内容q长D被忽略或难以扑ֈӞ可以考虑采用面Z轴层U覆盖的形式Q给该内容一个曝光的入口。采用了Z轴层U覆盖的架构形式Q用户主要的操作变ؓ上拉、下拉来阅读信息Q减了点击跌{q一cȝ操作?/p> <p>如豆瓣fmQ豆瓣详情页</p> <p> </p> <p><img src="https://img.zcool.cn/community/018fa25c452f40a801203d229a9eaf.gif"></p> <p> </p> <p>豆瓣详情?/p> <p> </p> <p> </p> <p><strong>9Q利?D TOUCH的处理,在当前页面进行更多信息的预览QiOSQ?/strong></p> <p>压敏屏幕所带来?D Touch 让iPhone 的交互多了一个全新的l度Q交互从不再局限于2Dq面手势Q按压操作得手Z互进入了3D的维度,我们可以不打开 app 或者进入详情页Q也能直接浏览内Ҏ(gu)调用常用功能?/p> <p> </p> <p><strong>10Q用公共元素进行{场动?/strong></p> <p>我们在徏立不同状态之间的动效Ӟ可以查看它们之间是否有Q何公共元素ƈ它们联pv来,通过公共元素的动L建立两个状态之间的联系。这样可以层之间的衔接关联性更大,减少层跌{感?/p> <p>比如APP Store中的Today</p> <p> </p> <p><img src="https://img.zcool.cn/community/0102bc5c452f58a801203d22b76ee8.gif"></p> <p>囄素材来源于网?/p> <p> </p> <p> </p> <p><img src="https://img.zcool.cn/community/0143835c453460a801203d2289c75d.gif"></p> <p>APP Store Today</p> <p> </p> <p> </p> <p><strong>ȝ</strong></p> <p>我们把当前的面可以惌成一个无限拓展的三维世界Q分为X_Y_与Z_在这三个l度上,可以q行无限的拓展。减层U上的蟩转,ȝhQ就是用手D在x轴、y轴、z轴上做是适时的收U与展现?/p> <p> </p> <p><img src="https://img.zcool.cn/community/01a9505c452f72a801213f2625fd16.png"></p> <p>具备x轴、y轴、z轴的三维I间</p> <p> </p> <p> </p> <div>作者:<span id="8iomsme0qe" class="sc-jqn0up-3 gbJRfY" title="腾讯动OTCD">腾讯动OTCD</span><br>链接Qhttps://www.zcool.com.cn/article/ZODYzNjA0.html<br>来源Q站?br>著作权归作者所有。商业{载请联系作者获得授权,非商业{载请注明出处?/div> <p> </p> <p> </p> <p> </p> <p> </p> <div><a href="/blog/content/uploadfile/202411/8ad61732265770.png" target="_blank" rel="noopener"> <p><img src="/blog/content/uploadfile/202411/8ad61732265770.png" alt="" width="1200" height="155"></p> <p>C妙微(www.chinatradebeam.com )是一家专注而深入的界面设计公司Qؓ期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、^面设计,以及相关的Y件开发服务,咨询?sh)话Q?1063334945。我们徏立了一个微信群Q每天分享国内外优秀的设计,有兴请加入一起学?fn)成长,咨询及进请加蓝助微信ben_lanlan</p> </a></div> <div> </div> </div> </section> </section> </section> </div>]]></description> <pubDate>Wed, 12 Mar 2025 10:36:48 +0000</pubDate> <dc:creator>资深UI设计?/dc:creator> <guid>http://www.chinatradebeam.com/blog/post-13065.html</guid> </item> <item> <title>掌握q五个体验设计原则,让品的设计更具优势 http://www.chinatradebeam.com/blog/post-13064.html
 
 

从数个项目中ȝ出的体验设计原则Q包括详l的举例说明

李笑来说q一句话Q审常常ƈ不需要知道原理,但创造美的h必须有方法论Q否则不可能持箋创造。但是很多h总觉得背Ҏ(gu)论是W工夫,高手N不应该根据场上局面随机应变吗Q但事实是,随机应变才是W办法,Ҏ(gu)论和成语典故、数学定理一P是h脑思维中的快捷方式Q?ldquo;聪明?rdquo;之所以能做到随机应变Q是因ؓ他们脑中存有_多方法论Q当遇到事情Ӟq些Ҏ(gu)论像经一样互相连接,l出最优的解决Ҏ(gu)?/p>

 

今天p大家分n设计的方法论——设计原则Q在Ҏ(gu)输出Ӟ可以设计原则作为方案的自检工具Q这样在Ҏ(gu)内审Ӟ面对领导和同事的质疑Q除了说“大厂都是q么做的”q样苍白无力的解释外Q还有更多的设计原则做支撑?/p>

 

一?strong>一致?/strong>

一致性的益处Q对用户来说Q一致性可以降低学?fn)成本,对开发团队来_可以减少错误Q降低品的l护成本Q提高代码和设计的复用率。对企业来说Q一致性意味着产品的不同模块要有相似的外观、感觉和行ؓQ这U特性会被扩展到企业其他产品中(比如Adobe旗下的品都严格保持着相同的标准)Q有利于强化用户对品牌的认知Q徏立品牌忠诚度?/p>

 

一致性的弊端Q很多设计师Ҏ(gu)被这一原则而禁锢,q而成计师h的借口Q设计师有时Z一致性而忽略了特定情境下的用户行ؓ和用模式,所以在设计时不能只x用户的感觉和品牌认知Q要Ҏ(gu)特定场景敢于创新?/p>

 

一致性可以从以下几个l度分析Q?/p>

 

1、交互行Z致?/strong>Q交互行Z致性又包括操作方式Q控Ӟ控g位置{。拿最q做的项目D例,「{到银行卡」和「信用卡q款」虽两个不同功能Q但量使模块内控gQ控件位|及操作方式保持l一?/p>

 

2、视觉表C致?/strong>Q包括风|色彩Q文字,图标Q图片等。风格和色彩的统一比较Ҏ(gu)理解Q这里详l说一下图标和囄如何保持l一?/p>

 

图标的统一性:

1Q一ƾ品在各个q_上的图标要一?/p>

2Q多ƾ品在一个^C的图标之间的风格或规范要一?/p>

3Q一ƾ品的每个图标的风根{细节、体量感上要一?/p>

 

如何做到每个图标风格Q细节,体量感上的统一Q?/strong>

1Q保持图标的复杂E度或简U程度统一

2Q不使用潦草、手l的造型Q几何Ş更容易达到统一

3Q保持图标的l度l一Q二l?三维Q?/p>

4Q保持图标阴影、渐变等样式l一或均无样?/p>

5Q保持图标颜色或图标背景的颜色统一

6Q保持图标的寸和比例统一Q体量感Q?/p>

7Q保持图标线的粗l统一

8Q保持图标圆角大统一

 

如何做到囄的一致性:

1Q图片的处理方式一_寸比例Q圆角,投媄Q?/p>

2Q图片的风格一_囄风格是否保持l一视品属性而定Q像淘宝q样的电(sh)商^台想要保持图片风格的l一性简直要了店家的命,但是囄的处理方式可以做到统一Q比如淘宝的商品囑֤部分是灰色背景等?/p>

 

3、文案的一致?/strong>Q文案的人称Q风g持一_|易云音乐的文案都是用的W二人称Q且h很强的趣x?/p>

二?strong>优先U?/strong>

优先U可以从以下几个l度分析Q?/p>

 

1、功能优先Q把握核心需求,H出亮点功能Q拿最q做的项目D例:转̎主页面功能优先最高的是「{到银行卡」「微转̎」,所以在面布局、所占比重上q两个功能,同时上滑时两个按钮变冻l在面剙Q方便用户快捷用?/p>

 

2、内容优先Q内容分U,H出核心内容。拿最q做的项目D例:代金券详情页Q根据用户用卡券的场景Q以及数据分析得出的内容优先U对内容q行布局与设计。将优先U最高的代金怺l码攑֜用户视线最先触辄位置Q当用户上滑Ӟ底部出现全局动的按钮,可快速显CZl码?/p>

 

再比如,转̎后的状态页面,用户最兛_的内Ҏ(gu)转̎后的状态及转̎金额Q其ơ是收款方信息以及{账备注,信息进行整理、归cR隐藏、删减,避免不重要信息对用户获取重要信息时的q扰。点ȝ头可查看更详l的转̎信息Q最后的面设计如下Q?/p>

 

3、交互优先Q主要\径清晎ͼ减少q扰和分支。如下{账流E中Q根据用h一步骤的目的与使用场景q行信息呈现Q该出现的时候出玎ͼ不该出现旉藏,分步骤进行,使{账这一主\径清晰明了,减少其他信息对用L(fng)q扰?/p>

 

4、视觉优先Q重要的视觉信息W一眼看刎ͼ主要ơ要信息有所区分。如微信钱包面Q收付款和钱包的视觉优先U明N于下方的腾讯服务。美团首上方虽都是功能按钮Q通过图标的体量、大、位|拉开彼此层Q突出展C「扫一扫」「付?gu)Ƅ」「红?卡券」「骑单R」这些功能,很好的引g用户视线Q完成品目标和用户目标?/p>

 

三?strong>易读?/strong>

易读性可以从以下几个l度分析Q?/p>

 

1、用用戯a而不是开发者语aQ脓(chung)q生zd际而不是学术概c?/strong>?是改版前的页面,面的核心目的是通过图表、止鼾次数、分贝向用户传达止鼾器的止鼾效果Q呈现方式不直观Q且用户对分贝ƈ没有切的概念,图二分贝y妙的转化成蜜蜂的声音Q增Z易读性,在这里蜜蜂的声音是用户语言Q分贝即开发语a?/p>

 

2、符合用戯知与心智Qgl约定俗成概c?/strong>Ҏ(gu)的首席设计师乔纳?middot;艑ּ_“好的设计无需认知门槛”Q好的设计不需要Q何指C用户就知道如何操作。如下图Ҏ(gu)pȝ的亮度设|,向上滑动是提高亮度,向下滑动是降低亮度,而不是向下是提高Q向上是降低?/p>

 

再比如,Ҏ(gu)我们的正常认知,下一步应该在叻I上一步在左?/p>

 

3、保持简z,不给用户造成困扰与疑惑?/strong>q是拿之前做的项目D例:微{账不同于普通的银行卡{账,需要给用户q行解释说明Q改版前的说明直接将大段的解释文字展C给用户Q可L差Q改版后大D늚解释转化?个直观的步骤Q对用户来说更容易理解?/p>

四?strong>定w?/strong>

定w性可以从以下几个l度分析Q?/p>

 

1、操作前可预?/strong>Q有预防用户出错的措施,关键操作有确认提C,及早消除误操作。如?输入转̎金额时提前告知用户银行卡余额Q避免余额不用户重复输入Q图2提前告知用户提取的金额是50的倍数Q避免用户出错?/p>

 

 

分期q款Ӟ提前告知用户一个̎单周期只能申请一ơ分期,且在用户二次认的弹出框再次提示?/p>

 

 

2、操作中有反?/strong>Q给用户明确的错误信息,q协助用h便从错误中恢复工作。如在分期金额输入错误时及时告诉用户出错的原因?/p>

 

 

3、操作后可撤?/strong>Q允许用h消错误操作,如macpȝ垃圾׃「放回原处」功能:

 

 

微信对话中的「撤回」功能,q些都体Cpȝ的容错性?/p>

 

五?strong>可控?/strong>

可控性可以从以下几个l度分析Q?/p>

 

1、记忆及预测用户行ؓQ帮助用户做些事情,减轻用户记忆负担?/strong>如macpȝ的密码管理可以帮助用戯住常用的账户密码Q?/p>

邮g中,输入收g人的姓,软g能自动检索出该姓下曾出现q的所有用L(fng)邮g地址?/p>

 

2、对操作l予及时反馈Q用戯了解操作是否已生?/strong>Q用户在界面上的M操作Q不论是单击、滚动还是按下键盘,或者操作状态变化,界面应及时给出反馈?/p>

 

3、将操作状态或q度昄出来Q用戯了解当前pȝ状况Q如让用户实时了解货物的物流信息Q会减轻用户{待的烦w感Q同时增加可控感?/p>

 

4、用h楚知道自己当前在哪里Q退路在哪里Q可以去哪里Q如分页控gp明确的告诉用戯己在哪,退路在哪,q能d?/p>

 

 

 

5、提供适时帮助、必要的信息提示Q如最常见的功能引?/p>

 

 

回顾Q?/p>

 

一、一致?/strong>

1、交互行Z致性:操作Q控Ӟ位置?/p>

2、视觉表C致性:风格Q色彩,文字Q图标,囄?/p>

3、文案措辞一致性:提示语,功能按钮{?/p>

 

二、优先

1、功能优先Q把握核心需求,H出亮点功能?/p>

2、内容优先Q内容分U,H出核心内容?/p>

3、交互优先Q主要\径清晎ͼ减少q扰和分支?/p>

4、视觉优先Q重要的视觉信息W一眼看刎ͼ主要ơ要信息有所区分?/p>

 

三、易L?/strong>

1、用用戯a而不是开发者语aQ脓(chung)q生zd际而不是学术概?/p>

2、符合用戯知与心智Qgl约定俗成概c?/p>

3、保持简z,不给用户造成困扰与疑惑?/p>

 

四、容错?/strong>

1、操作前可预知:有预防用户出错的措施Q关键操作有认提示Q及早消除误操作?/p>

2、操作有反馈Q给用户明确的错误信息,q协助用h便从错误中恢复工作?/p>

3、操作后可撤销Q允许用h销错误操作?/p>

 

 

五、可控?/strong>

1、记忆及预测用户行ؓQ帮助用户做些事情,减轻用户记忆负担?/p>

2、对操作l予及时反馈Q用戯了解操作是否生效?/p>

3、将操作状态或q度昄出来Q用戯了解当前pȝ状况?/p>

4、用h楚知道自己当前在哪里Q退路在哪里Q可以去哪里?/p>

5、提供适时帮助、必要的信息提示?/p>

 

-希望此文对你有一点帮?/p>

 

 

作者:

C妙微(www.chinatradebeam.com )是一家专注而深入的界面设计公司Qؓ期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、^面设计,以及相关的Y件开发服务,咨询?sh)话Q?1063334945。我们徏立了一个微信群Q每天分享国内外优秀的设计,有兴请加入一起学?fn)成长,咨询及进请加蓝助微信ben_lanlan

 

 

 

 

]]>
Wed, 12 Mar 2025 10:26:34 +0000 资深UI设计?/dc:creator> http://www.chinatradebeam.com/blog/post-13064.html
企业产品中的字体q有q么多学问? http://www.chinatradebeam.com/blog/post-13063.html
 
 

文字是界面中最核心的元素,是品传辄用户的主要内容,它的承蝲体即是字体。全?2,736字,阅读旉U?5分钟?/p>

 

前半部分从字体的最基本属性(字族、字受字重、大写{)说vQ熟(zhn)字体的那些特征Q了解字体在界面中的作用Q以及ios与androidpȝ字体的用规范?/p>

 

 

 

字体是界面设计的基石

字体是排版中最重要的元素,对用L(fng)阅读体验有着臛_重要的作用。一般来_设计师需要了解的字体通常有中文字体和西文字体两种。西文字体由来已久,从最早的|马字体到现在苹果手Z的SF-UI字体Q经历了许多设计上的变革。而中文字体的发展q没有西文字体那么顺利,数量上也q远落后于其他字体。但中国设计正在崛vQ我们也看到来多的设计团队和设计师加入字体设计的队伍Q数量上正在呈指数别增加?/p>

 

 

设计是一门非怸谨的学科Q里面蕴含了很多道理Q就q最基础的字体选择和排版,都经q了近千年的发展和演变Q有非常多的专业知识。像q面设计一P在UI设计中字体的使用也有相应的规范,设计师应懂得q些基础知识Q才能将字体己所用?/p>

本篇׃我们常用的设计YӞsketch、Figma、P hotoshopQ字W面板开始,来聊聊有兛_体与排版应用斚w的知识?/p>

 

 

 

 

 

 

 

 

Font  中文译?ldquo;字型”Q是指字的粗l、宽度和样式Q是一套具有同样风格和寸的字形。例?ldquo;Regular_16pt_SF-UI”?/p>

Typeface  中文译?ldquo;字体”Q是指一整套的字形,一个或多个字型的多寸的集合,例如“SF-UI”里有不同_细QRegular、Blod、LightQ和不同宽度Q?2pt?4pt?0ptQ?/p>

Glyph  中文译?ldquo;字Ş”Q是指单个字的Ş体或是字体的骨骼?同一字可以有不同的字形,而不影响其表辄意思,例如汉字中的「o」字Q第三笔可以是一Ҏ(gu)一撇, 最末两W可以作「ㄗ」或「マ(yu)」?/p>

Font和Typeface常常被؜淆用,其实可以q样理解Q前者指一U设计,后者指具体的品?/p>

 

 

 

1.1  族类 GenericFamily

族类是不同字体cdQ例如阿里巴巴普惠体、方正新书宋、站酷酷黑体{?/p>

 

 

而这些众多字体又可分为「衬U体」和「无衬线体」?/p>

 

 

 

1.1.1  衬线?/strong>

宋体是衬线体,特点是W画开始和末端的地斚w有额外的装饰Q且W画的粗l有所不同。在传统的正文印刷中Q普遍认U字体能带来更加的可L。常见的衬线体有宋体、Times New Roman、Georgia{?/p>

衬线体一般在APP中比较少见,文字阅读cdpU衬U体Q例如「单诅R,大标题用的是「華h宋體」、正文内容用的是「苹?U细」而英文用的是「XCross Traditional Bold?/p>

 

 

   

1.1.2 黑体

 黑体是无衬线字体Q特Ҏ(gu)W画没有额外的装饎ͼ且笔ȝ_细差不多。相比严肃的衬线体,单干净的无衬线体给ZU休闲轻杄感觉。因此大多数App都是使用黑体作ؓ默认字体。如冬青黑体、思源黑体、Myriad{?/p>

 

 

 

1.2  字族 FontFamily

一个族cd含不同的字体Q然而一个字体又可能有好几种字族。如果电(sh)脑安装了HelveticaQ在Sketch字体选择器中会发现超q?0多个前缀是Helvetica的字族。这是ؓ了协助h们在不同的用场景下表达合适的意思?/p>

 

 

 

基本字族包括l体、标准、粗体、斜体,值得注意的是Q斜体字常用在引用文本上Q代?ldquo;本段文字引用的是另一个著?rdquo;的含义?/p>

例如Q?strong>“若我们能以满怀新鲜的眼去观照日常Q?ldquo;设计”的意义定会超技术的层面Qؓ我们的生z观和h生观注入力量?/em>”Q引自原研哉的《设计中的设计》)

 

 

1.3  X-heightQX字高Q?/strong>

在西文字体中Qx高度是指字母的基本高度,是基线和主U之间的距离。它指一个字体中写字母的x高度Q在C字体设计领域Qx高度代表了一个字体的设计因素Q因此在一些场合字母x本nq不完全{于x字高?/p>

 

 

除了字母a、c、e、m、n、o{高度一Pq有一些小写字母的字高都比x字高要大Qƈ分ؓ两类Q一是含有升部的字母Q字母笔d有向上部分,如字母b、d、hQ另一cL含有降部的字母,字母的笔d下超q了基线Q如字母g、p、q?/p>

 

 

1.4  字号 Font-size

字号是字体大小Q通常在网늫使用px作ؓ字号的单位。移动端兴v后,ios字体单位是ptQAndroid是sp?/p>

以iosZQ正文字号不应小?1ptQ这h能被正常阅读Q徏议在14-18pt之间。在使用较大的字体来获得更好的易L的同时Q我们也应相应地减小字体的字重,考虑Light、ThinQ因重的字体会太q醒目,影响其他内容的显C效果?/p>

 

 

当字体大ؓ12-18ptӞ使用RegularQ?strong>18-24ptӞ使用LightQ?strong>24-32pt,使用ThinQ当字体大小过32ptӞ使用Ultralight?/p>

字号大小军_了信息的层和主ơ关p,合理有序的字可|能让界面信息清晰易诅R层ơ分明;相反Q糟p无序的字号使用会让界面混ؕ不堪Q媄响阅M验?/p>

 

 

 

1.4.1 设计中的最字?/strong>

我们都知道在界面设计中最字号不能低?0pxQ那是因为,正常情况下,在手ȝ?0cm左右Q用视角计公式,我们能识别到的最低的文字大小为h= 2*30·tan(0.3/2) ≈ 0.157cm Q拿我们l常使用iPhone7的尺?334×750Z。iPhone7的dpi?24Q也是一英寸上显C?24个像素,1英寸?.54cmQ那?.157cm=324*(0.157/2.54cm)= 20px?/p>

 

 

1.4.2 字号的基数关p?/strong>

我们在做设计Ӟ字号的单位最好用一个基C为倍增Q如2????0  或????2。但其实我们在做Ud端设计时Q单位需要遵循偶数原则,因ؓ开发中的单位是以一倍图的基数来q行计算。那么其实在制定字体规范中,使用2为单位会D字号q多Q且2号字体的差异化不大。所以在字号斚w我们使用4作ؓ单位是比较合适的Q一是适配后在@2x跟@3x不会出现半像素,二是使用4为单位,能满_体大的均衡?/p>

 

 

1.5  字重 FontWeight

WeightQ中文翻译ؓ“字重”Q是指字体笔ȝ_细Q字体中很重要一个概念,不同字重传递出来视觉感受完全不一栗一般在字体家族名后面注名Thin、Light、Regular、Blod、Black、Heavy{。不同的字体厂商划分字重各有不同Q例如「苹斏V字体就?U不同的字重?/p>

 

 

一般都有细体、正常、粗体三U基本字族。在应用场景上,通常「细体」多用于大号字体;「正常」用于正文内容;「粗体」表C强调,多用于标题;

 

 

1.5.1  两种字重属?/strong>

d重:传递出ȝ放松的视觉感受,帔R合粗的字重用,在一些辅助信息,说明文案时候用;

重字重:视觉感受庄重Q很重要Q常用在重点的文字,面大标题,数字Q引D动操作点上等Q?/p>

例如癑ֺ|盘「发现」页q了Regular、Medium、Semibold三种字重以拉开信息层次Ҏ(gu)Q?/p>

 

 

 

需要注意的?/strong>Q在q行界面设计Ӟ不要用Y件自带的文本加粗Q它不仅破坏了字体本w的感Q还改变了文字原本的字宽Q小字体下会模糊不清Q合理的方式是用字体本w的字重来控制粗l?/p>

 

 

 

1.5.2  注意细体的字体

字重细的字体要谨慎使用。如果你设计的文本是装饰性倒还好,如果是需要用戯清晰阅读的,p特别慎重Q能不用׃用,否则在部分低分L率的手机屏幕上看h会非常糟p?/p>

 

 

 

1.6  字色 FontColor

字色x字对应的颜色Q不做过多解释。需要大家注意的?q离U黑色和U灰Ԍ

U黑色就像没有生命力的深渊,能吞噬所有细节,使用户陷入冷冰冰的极端情l中。纯黑色q会与白色生强烈的Ҏ(gu)度,看久了就会感觉疲劻I让用户生焦虑情l?/p>

 

 

q有是真实世界中是不存在纯黑色的。尝试在色彩中加入一些色相,q样׃会让面看上L气沉沉的。例如iospȝ「设|」页面背景色是加入了白色的低饱和度蓝色Q看上去柔和自然?/p>

 

 

 

1.7  字符样式 FontStyle

除了以上几个最常用的文字属性外Q还有几个用频率比较低的字体设|。例如带下划U的、删除线的文本。「下划线文本」一般出现在「文字按钮」或带链接的|址Q而「删除线文本」一般会出现在商品橱H的Ch(hun)、原?/p>

 

 

例如「CCtalk」的评Ch(hun)和原L(fng)区分Q原L(fng)删除文本Q「微信读书」文章底?ldquo;加入书架 随时阅读”是带链接的下划U文本?/p>

 

 

 

1.8  字符选项 Text options

Ps和Sketch都有文字Q字W)选项一栏,主要针对西文字母大小写格式变换的讄。最常见有默认大写、全部大写、全部小写和型大写字母QPs里面q有「上标」和「下标」?/p>

 

 

默认大小写:x常大写格式QY件不做干预;

全部大写Q?/strong>如果输入的是写字母Q选择q个选项QY件会强制把小写改为大写;

全部写Q?/strong>如果输入的是大写字母Q或者只是首字母大写Q选择q个选项QY件会强制把所大写改ؓ写Q?/p>

型大写字母Q?/strong>q个选项比较Ҏ(gu)Q所?ldquo;型大写”是Q在字号一L(fng)情况下,与小写字母一样高Q外形与大写字母保持一致?/p>

 

 

1.8.1  注意英文大写

U大写的字母文本本n不太适合大篇q阅读,会加大阅读障,用的时候注意要额外拉开字母之间的字间距Q提升可L?/p>

 

 

 

1.9  全角与半?Full-width and half-width

全角是指一个字W占用两个标准字W的位置。中文字W、全角的英文字符、国标GB2312-1980中的囑ŞW号、特D符号都是全角字W。半角是指一个字W占用一个标准字W的位置?/p>

通常情况下,英文字母、数字、符L(fng)都是半角字符。半角和全角主要是针Ҏ(gu)点符h说的Q因为正常情况下没有打全角英文的需求?/p>

 

 

 

在设计作品时也一定要记得中文搭配全角W号Q英文用半角符受否则会出现诸如“你好.”或?ldquo;t h a n k s?rdquo;q样的错误。可按键?ldquo;capslock”键切换全角和半角。这个小知识点虽焉常基Q却也是设计中经常出错的地方?/p>

 

 

 

 

 

众所周知QiOS和Android两大阵营都有各自的设计系l,要作出符合^台规范的设计Q设计师应熟dq_的设计规则。因为本以讲字体ؓ主,我们来看看iOS和Android各自字体的规范是什么样的?/p>

 

 

 

2.1  ios字体规范

 

2.1.1 可用字体

在iOSpȝ规范中,中文字体是「苹斏V字体。英文字体是「San Francisco」也U「SF-UI」,英文q有另外一个衬U体「NewYork」。除了在iOS和Mac OS上,q单独ؓWatch OS单独对字体进行了调整Q命名ؓ San Francisco Compact?/p>

 

 

 

2.1.2  字体讄

因ؓ在英文字体下Q字体环境比较复杂,Z让字体在M地方看v来都最佻IҎ(gu)官方针对不同字号开发了两套「SF-UI Text」和「SF-UI Pro」字体,而每套字体下面又分ؓTextQ文本模式)与DisplayQ展C模式)两种属性,Text只有6个字重,而Display则有9个字重?/p>

 

 

q么多类型的字体我们该怎么用呢Qios的徏议是Q在字号于20ptӞ使用SF-UI TextQ大于或{于20ptӞ则用SF-UI Display。这需要我们在界面设计时手动切换?/p>

 

 

对于「NewYork」,于20点的文本使用号Q?0?5点之间的文本使用中号Q?6?3点之间的文本使用大号Q?4Ҏ(gu)更大的文本用特大号?/p>

Ҏ(gu)字体提供?个字重供设计开发者用。所以从iOS11开始,ios使用Semibold中粗体、大字号作ؓ界面的标题变的更为流行v来,较ؓ明显的有 iOS 中的一些原生APPQ比如App Store、Apple Music...

 

 

 

在ios中,默认字体单位是「pt」,正文字号不应于11ptQ徏议在15-18pt之间。在使用较大的字体来获得更好的易L同Ӟ也应该相应地减小字体的字重,因ؓq重的字体会太过醒目厚重Q媄响其他内容的昄效果?/p>

 

iOS更全面的文字讄

动态类型可以通过让读者选择他们喜欢的文本大来提供额外的灵zL,除了标准的动态类型大之外,iOSpȝqؓ有阅d字体的需求的用户提供了许多字号上的调_可在pȝ字体昄大小讄Q?/p>

 

 

 iOS“昄与亮?rdquo;下设|「文字大」模?/p>

 

 

  

「苹斏V和「SF-UI」字体可在iOS规范|站免费下蝲

 

  |址Q?a target="_blank" rel="noopener">https://developer.apple.com/fonts/

 

 

 

 

 

2.2  android字体规范

 

2.2.1  可用字体

在Android讑֤中,Android始祖GoogleZ更好的追求视觉效果,联合了Adobe设计发布了「思源黑体?Noto)来作Z文默认字体,「Roboto」ؓ英文字体?/p>

 

 

2.2.2  字体cd

思源黑体Q英文名为「NotoSans CJK」。该字体不仅仅在字Ş上更易于在屏q阅读,q且拥有7U字重,充分满了设计的要求?/p>

 

 

英文「Roboto」字体,只有6个字重,视觉语言与思源黑体Noto保持一致。该字体h“C?rdquo;?ldquo;qxqh”的气质,是「Material Design」设计风g的推荐字体?/p>

 

 

 

2.2.3  字体讄

Material Design字体规范Q字体类型比例支持的十三U样式的l合。它包含可重用的文本cdQ每U类别都有预期的应用E序和含义?/p>

 

 

注:Web览器根据根元素大小计算REMQ根em大小Q?C|络览器的默认gؓ16pxQ因此{换ؓSP_SIZE / 16 = rem?/p>

 

△Material Design设计cd比例。(字母间距gSketch兼容。)

 

 

值得注意的是Q在安卓的字体单位中Q不再以pxQpt作ؓ单位而是l一的用了spQ换方式是Q?/p>

px = sp*ppi/160  Qsp = px / (ppi / 160) 

 

 

以iPhone7ZQ尺寸是750x1334Q密?26ppi 来换,那么Android?dp = 1 * 326/160 ≈ 2px

「思源黑体」和「Roboto」字体可在GoogleFonts免费下蝲Qƈ且可以商用?/p>

 

 

|址Q?a target="_blank" rel="noopener">http://www.googlefonts.cn/

 

 

2.3  话题扩展

值得一提的是,来多的手机厂商,Z能够强化自n的品牌Ş象,推出了定制款的字体?/p>

 

比如米的「小c_亭」:

 

 

 

 

OPPO的「OPPO Sans」:

 

 

 

三星的「SamsungOne」:

 

 

 

03  字体基础知识结

正如开头所_文字是界面中最核心的元素,字体作ؓ基本语言Q是设计中体现品牌很重要一点,字体选择非常重要Q字体也是设计中占比Q约 80%Q最大的内容Q所以我们一定要熟练掌握Q接下来从文字行高、字间距、行间距{说P围绕字体排版l箋聊?/p>

 

 

 

 

 

 

 

设计中,好的排版能让用户愉快地阅读,而不好的排版则会l用户带来糟p的阅读体验。因此排版的潜在重要性不容忽视?/p>

 

 

无论是在西方国家q是亚洲国家Q大部分Z的阅M(fn)惯都是从左到叟뀂这U阅L式已lgl了几百q_因此如无Ҏ(gu)需求,你应该你的文本左对齐,q样W合Z一贯的阅读?fn)惯Q阿拉伯地区除外Q。h~Z耐性,在阅读过E中更似是一U远q不定的跌「扫视」。枯燥的文字如果没有l过M排版处理Q会让读者瞬间失去阅ȝ兴趣Q除非非M可。所以通过改进文字内容的结构和排版来提高阅L乃臟뀌诱L」,是一件十分必要的事情?/p>

 

 

 

 

 

 

 

4.1  字间距与字偶间距

字间距,英文名ؓ“spacing”Q即字符间的距离Q事实上他是字符囑Ş外边界框的尺寸和字符在方框中的位|的距离?/p>

 

 

字偶间距Q英文名?ldquo;Kerning”Q也叫做“字距调整”Q是在字间距的基上,为实C同字Ӟ一对字W)可以有不同字间距的调整倹{我们都知道Q不同的字母外Ş不同Q所以只有同L(fng)字间距是不协调的。例如,“NA”间是标准的字间距Q?ldquo;WA”׃W和A的Ş状可以重叠,所以需要负字偶间距才能辑ֈ协调一致的外观?/p>

 

 

在大D落文字排版Ӟ我们一般不需要更改字间距和字偉距,因ؓ字体设计师已l对他们做过了最优处理。在对一l字W单独设计时Q就需要考虑字偶间距Q以辑ֈ更协调的视觉效果。ȝ来说Q字可,字距应当相对大Q行高也应该相对大。反之亦然?/p>

 

西文字间距还分ؓQ?strong>比例字体和等宽字?/strong>

比例字体Q根据字W外形特点设|不同字宽的字体Q得字体外形协调,可读性更好;

{宽字体Q每个字W设|相同字宽的字体Q字W间距较大,它们l常被用于显C机代码CZQ?/p>

 

 

 

 

 

4.2  字间距的三种形式

标准间距Q即默认的字间距Q字与字之间的距M大也不小Q在设计中要Ҏ(gu)不同的字可|不同的字间距来排版Q往往需要我们根据字受字重的不同动态调节间距参敎ͼ避免千篇一律用Y仉认间距?/p>

 

 

紧凑间距Q字与字之间的距d里羃q,在字W工具里?ldquo;字间?rdquo;数gؓ负数Q一般在-5%~-30%不等Q通常用在标题中?/p>

 

 

宽松间距Q与紧凑型间距相反,字与字之间间距向外扩大,在字W工具里?ldquo;字间?rdquo;数gؓ正数Q一般在5%~30%不等Q通常用在正文中?/p>

 

提示Q字间距虽然有以上三UŞ式,但是在实际工作中也要具体问题具体分析Q例如有些中文字体本w?ldquo;外边?rdquo;的距d比较大,如果再加大字间距Q就会显得过于分散?/p>

 

 

4.3  西文词距

在西文阅LQ视觉上的自然界限是「词距」而不是「字距」。如果排版时需要进行例如「两端对齐」的行内间距调整Q中文直接可以动「字距」,把调整量均匀地放到每个字间里Q而西文却是动「词距」,只能把调整量加到词距里,而单词内部的字距依然是保持字体设计师预设的原始字距,q是保证西文易读性的关键所在?/p>

 

 

 

4.4  标点避头?/strong>

在古代,书籍排版可以做到字间距恒定,原因是古代不存在「标炏V,也就没有「标炚w头尾」导致的U种问题。而现代汉语存在标点符P有的标点不能攑֜行首(如逗号、顿受句L(fng))Q有的不能放在行?引号、前括号{?。处理方式叫做「优先推出式」标炚w头尾Q通过本行内的标点宽度进行挤压后Q腾ZI间l本来排不到的逗号Q确保了字间距的恒定Q篇q限Ӟ本文暂不谈文字编排具体调整方法)。更详细的介l可UL字体设计与排印网?Type is Beautiful 了解?/p>

 

 

 

4.5  文本?/strong>

在设计Y件中Q我们在d文本Ӟ׃创徏一个文本区域,例如Sketch中文本区域有三种cdQ自动宽度、自动高度、固定尺寸,而「固定尺寸」可配合「设|文字层垂直寚w方式」用?/p>

 

 

4.6  寚w方式

文本的对齐方向有左、中、右三种寚w方式。文本对齐的标准是基于文本区域的边界军_的,只有讄固定的文本区域对齐才有意义?/p>

 

 

 

4.7  行高

行高或行距是文字排版的基参数Q也是排版品质的先决要素之一。行高是一行文本垂直方向的高度Q这个高度和字高无关Q文字内Ҏ(gu)q_中,如下图所C:

 

 

 

4.8  英文行高

英文的行高指的是一行英文的基线与下一行英文的基线之间的距,基线QbaselineQ是英文字体l构中的概念Q在css里文字的元素都是按基U来寚w的。西文基本行高是字号?.2倍左叻I字体有上伔RQascenderQ和下g部(descenderQ可来创造行间空隙?/p>

 

 

  

4.9  中文行高

中文的结构属于方块字没有基线Q所以中文的行高指的是一行中文的最底部与下一行中文最底部之间的距R中文因为字W密实且高度一_所以一般行高需要更大,Ҏ(gu)不同用户人群Q儿童、年Mh、老年人)以及使用环境Q可辑ֈ1.5~2倍甚x大?/p>

 

提示Q不是标题、正文还是注释文字,行高都不易过大或q小Q会D阅读困难。ȝ来说Q字可大行高应该越,字号小行高应该大?/p>

 

 

4.10  行长

在《中文排版需求》里Q明写明了q项基本要求Q?/p>

2.3.5 版心设计的注意事:「一行的行长应ؓ文字寸的整数倍,各行的位|尽可能头尾寚w。?/em>

「一行的行长应ؓ文字寸的整数倍」,q一基本的、理所应当的需求看似简单,但是在实际操作中Q却往往׃单位换算{各个原因没有得到实现。对于后半句提到的「头֯齐」,另文讨论,但显然也和本文相兟뀂正因ؓ设计师想实现「头֯齐」才会盲目地用Y件的「两端对齐」功能,大家可以看看w边的印刷品Q注意看一下每D늚最后一行间距是不是l一Q就可以知道设计师有没有按照q个原则排版?/p>

 

 

中文的一个字占两个字W,英文一个字占一个字W。正文的行长通常?0?0个字W之间。在行长较宽的区域(例如桌面Q中Q包含最?20个字W的较长行将需要将行高增大。行长过长易L就会变差,读者阅LҎ(gu)串行Q造成阅读困难。合理的行长使用户在行间跌{时感到轻快和愉?zhn)Q反之则会阅读成ؓ一U负担?/p>

 

 

 

4.11  行间?/strong>

行距是指临近两行之间的距R合适的行距让用户阅读舒服,阅读效率也高Q行距太紧凑会让内容挤成一团,实现无法正常阅读Q行距太宽松会让内容松散Q生了我们通常意义上的“x”Q阻断了行的视线QPhotoshop中默认行距是1.2倍的字号Q例如字h30pxQ那么将行距设ؓ36px和默?ldquo;自动”的效果一致?.2倍的行距对中文排版来说通常q小Q合适的行间距通常?.5?倍之间。文本字体越,两行之间的行间距应该大Q确保字与行呼吸的空间?/p>

 

 

4.12  英文行间?/strong>

英文的行间距指的是一行英文的底部U与下一行英文的剙U之间的距离。可以简单的理解?ldquo;行与行之间的距离”。另外英文文字底部和剙都有对应的专有名词,英文剙的那条叫“升部U?rdquo;Q底部那条叫“降部U?rdquo;?/p>

 

 

 

4.13中文行间?/strong>

中文的行间距比较好理解了,是指一行文字的最底部与下一行文字的最剙之间的距R即行与行之间的距离?/p>

 

 

 

4.14  D间?/strong>

D间距:D落与段落之间的距离Q可保持面节奏Q与字体、行高相互关联?/p>

Z证文章易L,正文D间距,可以单地取一个空行(也就是一个行高)Q这是比较常规也比较合适的做法。D个例子:字号12Q行高设?0Q段间距 = 行高 + 行间距。行间距大Q段间距p大;行间距越,D间距就小Q行距与D间距成正比。段落之间首行之间间距应该大于段内的间距Q这时候就应该增加D间距,使得文本的阅M验得到进一步的提升?/p>

 

 

 

 

 

 

在Q何一个设计中都需要把各个元素q行分Q分清主ơ,q样才能更好地抓住重炏Vؓ了能分清各元素的LQ就需要用到CRAP原则。这四个原则分别是对比、重复、对齐、亲密性?/p>

 

 

 

5.1  Ҏ(gu)  Contrast  Q?/strong>增强效果、组l信息)

Ҏ(gu)的基本作用是H出重点Q增加可L?/strong>。附加作用是有效增强视觉效果Q打破^淡,吸引读者注?/strong>?/p>

一些界面排版؜乱,可读性非常差Q用L(fng)视线不知道集中在哪,Dq种情况的发生都是因为界面内容对比不明显造成。在同一个视觉区域内的逻辑不同的元素应该有所区别Q以避免视觉上的怼Q这样就可以有效的分清主ơ,Z使主要元素更H出Q次要元素更弱化Q可以尽量它们的颜Ԍ字体、大,留白不同?strong>如果两个元素不尽相同Q那p他们截然不同?/strong>比如Q用?4 号字」和?5 号字」进行对比,差异很不明显,而用?4号字」和?4 号字」,差异明昑־多,一眼就能看到大L(fng)字体?/p>

 

 

在这点上Q?ldquo;微信M”的列表页做得非常好Q它通过标题与描q的字体_细、大、颜色进行对比,把最有用的信息直观地呈现在用户面前标题是吸引用户x的关键,作者和评分只是l用户一U参考,不v军_性作用。因此,如果没有Ҏ(gu)原则Q标题和描述的字体同L(fng)l、大,你就会发现视UL会情不自的被评分所q扰?/p>

 

 

 

5.1.1  大小Ҏ(gu)

Z区分文字、图片、图标等元素的重要性,通常采用寸的大来做对比。例如文章的正副标题Q副标题一般用来解释主标题的内容,因此副标题的文字应该通过大小和颜色调整变成次U,让用户阅L分清L?/p>

 

 

 

5.1.2  颜色Ҏ(gu)

在排版中Q首先要产生Ҏ(gu)效果的就是背景和文字。文字与背景如果在颜色上很接q,那么׃Ҏ(gu)区分开来吸引用h意力Q一般来_Z?fn)惯白纸黑字Q也是因ZhcL书写需求以来Ş成的Q,即白色背景和黑色文字。也有黑U白字,例如现在APP都在做的DarkMode暗色模式Q但其实暗色背景搭配色文字q不适合大量阅读。当然这也是Z配合用户使用场景Q在夜晚光线较暗的环境下Q深色模式或许更利于阅读。「冷知识Q暗色模式其实就是厂商ؓ了解决电(sh)池耗电(sh)量而出的计{,只是换了个噱头而已」MQ不设计中使用黑白、红lѝ蓝黄哪一U配Ԍ一定要注意文字和背景的Ҏ(gu)是否清晰便于阅读?/p>

 

 

 

 

5.2  重复 Repeated  Q?/strong>l一有秩序)

重复是保持整齐的重要准则。既包括字体、字L(fng)重复Q也包括颜色、风格的重复。对于新人来_要时ȝ讎ͼ量l一字体、字受颜色等一pd元素Q在l一的基上,扑և需要强调的部分Q进行更?/strong>Q通过Ҏ(gu)原则q行强化?/p>

 

如果相同内容Q如标题Q属于同一U逻辑关系Q则应该使他们的字体、颜艌Ӏ留白尽量保持一致。这样可以增加内容的条理性,q加计的l一性。在重复原则下,用户会因觉惯性l选招设计U烦Q根据重复性设计线索顺场地览下去?/p>

 

 

 

重复不是单一的机械式的元素重复,我们可以理解为用l一的重复元素塑造一个新的元素。当然这是在保留基本的元素时所塑造出来的高度l一性的画面Q从而增强我们所惌的设计效果?/p>

 

5.3  寚w  Alignment   Q?/strong>l一而有条理Q?  

 

在页面设计上每一元素都应该与面上的另一个元素存在某U视觉联p,q样才能建立清晰的结构。Q何元素内容在在版面上都应该尽量上下左叛_齐,对于设计Ch来说Q最好严格遵循一U对齐方式,不然׃D混ؕQ实在不行,臛_保证在同一内容版块中遵循一U对齐方式。方法也很简单,是扑ֈ一条明的寚wU,q用它来寚w?/p>

 

 

                                                                                                                     

寚w包括左对齐、居中对齐、右寚w 3 U方式?/p>

左对齐:面中的元素以左基线寚w。左寚w是最常见的对齐方式,z大方,利于阅读Q?/p>

居中寚wQ页面中的元素以中基U对齐。居中对齐给ZU严肃与正式感,不过也会有呆板的感觉Q?/p>

叛_齐:面中的元素以右基线寚w。相对少见的寚w方式Q给ZUh为干预的感觉Q加Z形式感,降低了阅L率;

 

 

 

5.4  亲密? Proximity  Q?/strong>实现l织性)

亲密性是实现视觉逻辑化的W一步,它是?strong>关系近的内容,在视觉上应该靠得近Q反之,关系疏q的内容Q在视觉上应该越q?/strong>单的来讲是要把画面中的元素分类Q把每一个分cd成一个视觉单位,而不是众多的孤立的元素。这有助于组l信息,减少混ؕQؓ读者提供清晰的l构?/p>

 

那做好亲密性有哪些Ҏ(gu)呢,U以为有以下几点Q?/p>

 

留白Q?/strong>留白是设计中通用的万金a原则Q通过留白建立距离关系q行内容区分Q?/p>

左图歌曲面和歌曲名信息间隔比每首歌曲上下间距还大,D用户的视U流呈垂直方向?/p>

 

 

 

分割Q?/strong>单来说就是分l,建立l合关系。常见的形式有线条分Ԍ卡片分割{;

 

 

 

色相Q?/strong>通过颜色的对比,不同颜色的信息会暗示q是同一cR常见的日历行程是通过不同颜色来区分时间和具体事项?/p>

 

 

 

方向Q?/strong>不同的排版方式也可以很好的区分信息;

 

 

 

 

 

 

 

 “信噪?rdquo;QSignal-to-Noise RatioQ原本是用在声音和图像领域的概念。在互联|品中?“信噪?rdquo;概念借用C用户体验。合理的信噪比可改善与用L(fng)交流。加大信号可以将有用的信息快速准的传达l用P减少噪音q信号脱颖而出?/p>

 

从hZ互角度,我们应该删除与Q务不相关的内Ҏ(gu)设计元素?strong>你甚臛_以将高信噪比的目标与极简M联系h。但?ldquo;信号”?ldquo;噪音”的确切含义会有所不同Q一个h的信号可能是对另一个h的干扎ͼ因此Q?strong>用户界面的信噪比有低有高Q取决于具体的用户和具体的Q?/strong>。在用户界面中,信噪比所涉及?ldquo;信息”可以是Q何内容,包括文本内容Q视觉元素或动画{?strong>Z提高设计传达信息的效率ƈ帮助用户完成dQ需要提高信噪比?/p>

 

 

用户始终喜欢清晰、简单、自然、好用的设计和品。但需要注意的是,除了交流必要信息之外Q我们还希望界面在视觉上具备吸引力,以唤L(fng)L(fng)某些情感?strong>有了额外的目标(比如品牌宣传、业务目标等Q,应该以合理的信噪比ؓ目标Q而不是以l对的方式排除所?ldquo;无关”的信息?/strong>

例如iOS6到iOS7图标拟物到扁q_改变Q让用户可以更快速准的获取到有效信息。而这一q程Q就是典型的攑֤“信号”?/p>

 

q有虄音乐的驾驶模?/p>

我们都知道,在开车的时候操作手机是非常危险的。在40km/h的速度下,看手?U,相当于盲驶了35c뀂但有些情况下又不得不操作手机,比如紧急来甉|者导航出?hellip;…q时Q驾驶模式的界面显得尤为重要了Q让用户能够快速准的识别信息q进行操作,可以大大提高行R的安全性?/p>

 

 

在界面中无论是何U分割方?分割Uѝ卡片阴影、分割色?Q过于浓重的表现都会影响有效信息的获取,成ؓ界面中的“噪音”Q因此我们应该让它们l一炏VE一Ҏ(gu)降低表现Q或者干脆不?留白分割)?/p>

 

 

 

 

 

 

囄率就是页面中囄面积的所占比。在面设计中,除了文字之外Q通常都会加入囄或是插图{视觉直观性的内容。这U文字和囄所占的比率Q对于页面的整体效果和其内容的易L会产生巨大的媄响。当Ӟ除图片本w外Q我们也可以通过填充底色Q图形叠底等方式来提高界面中的图版率?/p>

 

囄率高低的区别Q?/strong>同样的设计风gQ图版率高的面会给Z热闹而活跃的感觉Q反之图版率低的面则会传达出沉E뀁安静的效果。提高图版率可以z跃版面Q优化版面的视觉度。但完全没有文字的版面也会显得空z,反而会削弱版面的视觉度?/p>

 

 

在没有图像素材的情况下想要呈现出高图版率Q可以通过以下几种方式来实玎ͼ

1、通过填充面底色Q取得与提高囄率相似的效果Q从而改变页面所呈现出来的视觉效果;

2、如果素材图像尺寸小Q可以通过色块的g伸或是图像的重复来组l页面结构,同样可以提高囄率;

3、利用排版的节奏感以及蟩跃率Q文字和囄的蟩跃率Q是指版面中最大标题和最大的图与最正文字体和囄大小之间的比率)让无的版面充满zdQ富有节奏的设计也能间接优化面的图版率Q?/p>

4、增加页面中的图形也可以改善囄率低的问题。无论是数字、序受图标,甚至是视觉处理后的标题文字,都能提高面的视觉度Qƈl用L(fng)下活跃生动的印象Q?/p>

5、如果页面中没有囄和插图,那么通过Ҏ(gu)字及光色的处理Q也可以起到提高囄率的作用Q?/p>

 

 

上面的例子中Q对于标题文字都q行了视觉加工,起到了整体页面的装饰效果。借助对这U文字大、颜艌ӀŞ状的灉|q用Q来H出面的重点,避免视觉上的单调感?nbsp;

 

 

 

 

 

 

 

 

 

8.1  文字在代码中的实?/strong>

 

在开发落地的q程中,文字排版的开发实现是很重要的一个环节,也是l常让设计师和开发小哥哥头疼不已的地斏V字体和排版在实Cl常会出现偏差,主要原因在于开发的标注方式和设计Y件不一致。因此理解文字开发的实现方式Q细节问题的解决Ҏ(gu)臛_重要。在Android中,文字开发工作是通过一个叫TextView控g来实现的Q主要承担文本显C的dQQ何APP都不可避免的会用到它。TextView常用属性如下图Q?/p>

 

 

 

 

8.2  字体字重对应的font-weight?/strong>

在前文聊q,每种字体都对应有好几U字重(Regular、Normal、Medium、Light Q,在给开发的 UI 设计E中Q我们给的字体标注通常?PingFangSC-Regular?em>PingFangSC-Medium?em>PingFangSC-BoldQƈ不会直接l开?font-weight 的倹{虽然这需要开发去熟记Q但作ؓ设计师了解它们的对应关系Q可以更畅的和开发沟通?/p>

 

在W3C Fonts节章的规范标准中有给具体数|100?00Q:

q些有序排列中的每个|对应字体的字重。其大致W合下列通用重量名称Q?/p>

  • 100 - Thin

  • 200 - Extra Light (Ultra Light)

  • 300 - Light

  • 400 - Normal

  • 500 - Medium

  • 600 - Semi Bold (Demi Bold)

  • 700 - Bold

  • 800 - Extra Bold (Ultra Bold)

  • 900 - Black (Heavy)

     

当然Qƈ不是每一U字体都有这么多字重Q那遇到有些字体只有2?U字重,该怎么对应font-weight 值呢QW3C Fonts也给Z解决Ҏ(gu)Q例如字重和400大致W合会归ؓRegular、Book、RomanQ和700大致W合会归ؓBold。若一个重量所指定的字形不存在Q则应当使用相近重量的字形。通常Q较重的重量会映到更重的字形、较ȝ重量会映到更轻的字形。下图所C:灰色表示该重量的字Ş不存在、用的是相q重量的字Ş?/p>

 

?只包?00?00?00重量字Ş的字体家族的对应字重

 

?只包?00?00重量字Ş的字体家族的对应字重

 

 

8.3  文本框行高的问题

我们都知道在设计的时候,可能字体使用?4ptQ但其实字体本n占用的距L包含了升部及降部区域的,q样导致其占用I间大于24ptQ而变成了33pt。每个字体都有相应设定的「字高」比例,可以通过sketch选中字体后的height值来q行查看。线高越大,问题p大。下面的CZ昄文本框之间的距离讄?2px。如你所见,即你将所有垂直间距都讄为相同的|它们在视觉上也远大于32px?/p>

 

?虽然标注出来的参数都是一样大Q但视觉上间距却是不一L(fng)

 

 

 

 

8.4  Leading-TrimQ数字排版的未来

d六月QMicrosoft Design赞助了一个新的css规范Q称为「Leading-Trim」。这个cssҎ(gu)能很好的解决上面q个问题?/p>

 

 

 

 

我们常用的UI设计工具Q例如Figma和SketchQ似乎已l采用了「half-leading」模式ƈ以此方式渲染文本。因此,我们在设计工具和览器中都遇Cq个问题?/p>

 

设计斚w的解x法相对容易:你可以忽略边界框Q而直接根据文本的大写高度和基U来量I间。这是一个手动过E,因ؓ大多数设计工h有上限高度和基线的参照目标,管设计师将一切努力我们的设计看h更好Q但是,如果采用q种Ҏ(gu)Q开发h员仍仅在CSS中实现边界框间距。因此,它们会出现随机的间距倹{?/p>

 

Z~解此随机性问题,开发h员可以在CSS中以负边?ldquo;裁剪”文本框。但是负边距需要手动确定,q且是特定于字体的,因此?ldquo;随机?rdquo;。Q何字体,览器,操作pȝ或语a环境的更攚w不可避免地D你不心讄边距。此外,该技术通常不是良好的编码实践,q且可能D意外的副作用?/p>

 

 

8.4.1  Leading-Trim新规?/strong>

Leading-trim是CSS工作l正在引入的新CSS属性。顾名思义Q它?yu)像文本框剪刀一样工作。你只需使用两行CSSQ就可以从你选择的参考点中修剪掉所有多余的I间?/p>

 

 

代码CZQ?/p>

h1 {

text-edge: cap alphabetic;

leading-trim: both;

}

 

上面的示例首先用text-edgeQ也是新属性)来告诉浏览器Q所需的文本边~是大写高度和字母基Uѝ然后,从两侧修剪多余部分。请注意Q采用修剪仅会媄响文本框。它不会切断其中的文本。这两行单的CSS创徏了一个干净的文本框。这可以帮助你获得更准确的间距ƈ创徏更好的视觉层ơ?/p>

 

 

使用后再来对比一下:

 

△用新规范Ҏ(gu)发现Q右图文字上下间距舒服多了,也更合理?/p>

 

 

8.4.2  Leading-Trim修复寚w问题

借助Leading-TrimQ可以解军_APP上看到的所有奇怪的寚w问题。例如,即文字位于文本框内Q你的文本也不L在容器中垂直居中?/p>

 

 

默认行高中保留的多余I间会导致文本不L在文本框中居中。?strong>Leading-Trim修剪Q就可以很省心的使文本垂直居中?/p>

 

 

 

原因是每U字体的设计也不同。它h自己的默认行高,q且其中的文本可以具有不同的大小和基U位|,q不都是水^居中寚w的。因此,有时即字体大小Q行高和文本框位|保持不变,更改字体也会改变文本的对齐方式,如下例所C,文字很明显没有对齐?/p>

 

 

在第二个CZ中,你可以看到Leading-Trim如何防止q种情况q文本完美寚w?/p>

 

 

 

 

8.4.3  一致性和工作程的改q?/strong>

Leading-trim修整出了间距和对齐更准确的范围。它在徏?strong>_?/em>间距pȝQؓ设计准确性和一致性以及高效的设计到开发交接铺q道路方面发挥着关键作用?/p>

 

拥有间距pȝ有很多好处。设计师可以更快地确定间距,开发h员可以设|相应的间距变量以消除代码中的随机间距倹{但是目前,即我们讄了间距系l,׃文本框中的额外空_对于文本元素来说也不是很准确。如果我们尝试忽略设计中的边界框q在代码?ldquo;裁剪”文本框,则会遇到那些手的解x法问题?/p>

 

▛_用于文本元素且没有Leading-trim修剪的间距系l?/p>

 

借助领先的文字间隔系l,从设计到开发的交接q程也将更加畅Q因为开发h员将能够建立完全相同的系l,q且避免在布局错误上花费大量时间。最重要的是Q领先的微调间距pȝ帮助我们提供用户信赖和喜欢的外观更观的品?/p>

 

 

8.5  设计中修Ҏ(gu)字行高的Ҏ(gu)

上面我们介绍了利用Leading-trim修剪字高的先q方法,但是q个新CSS的规范还在编写中Q还未世界范围的推进Q不q有「微软」团队的扶持怿国际化也不会太远了?/p>

 

在这之前Q我们想要尽可能的解军_W多出的间距问题Q就需要在设计软g里手动修改了Q手动把文字行高与客L(fng)pȝ默认行高保持一_从而给出准的文字间距。开发在实现的时候iOS使用pȝ默认行高QAndroidpȝL文字上下padding?/p>

q种方式虽会p不少旉Q但也最_Q你可以据此讄出最观合理的间距,而不用担心上U稿的还原度问题Q也便于我们后期的页面校对和调整?/p>

 

▛_Sketch中修Ҏ(gu)字高?/p>

 

8.6  什么是Ҏ(gu)适配

文字Ҏ(gu)适配一般涉及的是宽度适配Q?/strong>宽度适配普遍使用的是间距适配Q即定好左右边距,中间Ҏ(gu)拉伸。这U方式可以做到较好的适配Q也是做快速常用的适配Ҏ(gu)?/p>

 

8.7  标注工具

设计师将设计文g交付开发之前,应站在程序员的角度着惻I做好前期沟通,提供他们开发所需要的资源。设计文件的标注可以使用Sketch插g或直接上传「蓝湖」,拿Sketch插g「Sketch Measure」ؓ例,它是一Ƒ֍分智能的标注插gQ主要功能包含两大块Q标注和规范?/p>

 

 

工具栏汇合了Measure所有功能的快捷工具Q永q置于画布顶层,有了它就不用再频J通过菜单栏去使用功能?/p>

 

 

做好规范后,点击「导范」一键自动生成Html面Q浏览器打开面点击其中M元素都可以查看其属性和间距Q还包括代码样式Q交l开发开发工E师后,不用沟通都能看明白?/p>

 

△Sketch Measure导出标注的网늕?/p>

 

 

 

 

产品功能开发完成后Q对产品对功能,视觉和交互操作进行测试和验收Q确保品的可用性。一般在功能模块验收完成后,可以开始具体的视觉设计验收Q这也是׃要设计师负责的模块,主要验收颜色、字体、图形、间距、控件和I状态等?/p>

 

因本文主讲字体与排版Q就拿这部分来说Q需要检视的有Q?/p>

字体Q是否用的^台默认字体,如果是内|字体检查字体显C有没问题;

字号Q导航栏、栏目名U、分c页{、tab{字号大是否符合规范;

字重Q标题和正文字重是否正确Q粗体用的是哪一U,是MediumQ还是SemiBoldQ?/p>

字色Q标题、正文、注释、提C等文字颜色Q?/p>

字间距:查中文间距和英文间距Q段落文字标Ҏ(gu)无避头尾Q?/p>

行间距:D落文字行间距,有没有出现多余的行高 Q?/p>

......

在检视过E中如发现问题,截图标示问题所在,q出h视报告?/p>

 

?视觉视表CZ

 

视觉设计的验收要q求l节上的完美Q因计上的细节是很容易被挑错的,同时需要耐性和l心Q要有像素的视角,只有q样才能完美的还原设计稿?/p>

 

 

 

写在最?/strong>

原本只是想结合工作积累,写一字体应用知识ȝQ没成想l自己挖了一坑,涉及的知识点真是多,很多地方都可以单独拿出来再另写一。另外其实在工作中,也徏议大家对自己的经验进行ȝQ对关键信息q行提炼加以沉淀(wn)Q一斚w能让自己的知识更加牢固,另一斚w也可以帮助后来者学?fn)成ѝ字体与排版基础分享到q里Q希望对大家有所帮助。因为篇q较长,几经修改Q有l节不正的地方Q欢q留a矫正Q感谢阅诅R?/p>

 

 

参考文献:

《W3C-CSS字体规范标准?/p>

《从「行长ؓ字号的整数倍」说赗?/p>

《Leading-Trim: The Future of Digital Typesetting?/p>

《关于UI设计中字体应用的q货?/p>

《字体与排版?/p>

《深度剖析Baseline设计原理?/p>

 

 

]]> Wed, 12 Mar 2025 10:23:45 +0000 资深UI设计?/dc:creator> http://www.chinatradebeam.com/blog/post-13063.html 企业产品中的色彩如何应用Q?/title> <link>http://www.chinatradebeam.com/blog/post-13062.html</link> <description><![CDATA[<section class="sc-jqn0up-2 sc-12cf9wq-0 sc-2p1my8-1 icknLB eUvQDA fiSgCE detail-head"> <div id="8iomsme0qe" class="titleBox"> </div> </section> <section class="sc-jqn0up-2 sc-12cf9wq-0 sc-1o84bjj-0 oaRTx eUvQDA xltLm interest-recommend"> <div id="8iomsme0qe" class="swiper-arrow-next"> </div> </section> <div> <section class="sc-jqn0up-2 sc-12cf9wq-0 sc-x1sw84-0 oaRTx eUvQDA eOjfdL"> <section class="sc-jqn0up-2 ftFyVi"> <div id="8iomsme0qe" class="decorationTitle"> <p>色彩是设计中最兯现力和感染力的因素。全?7,955字,阅读旉U?5分钟?/p> </div> </section> <section class="sc-jqn0up-2 ckgUXN imgCon"> <section class="sc-jqn0up-2 oaRTx workShowBox"> <div id="8iomsme0qe" class="sc-x1sw84-1 kEhNjF articleContentWrapper"> <p><img title="" src="https://img.zcool.cn/community/01af925fcd5a3511013fdcc7656d07.png" alt=""></p> <p>色彩是媄响用h单和最重要的一个因素。研I表明,Z只需90U就能对一U品做Z意识的判断,而其中高?0%以上的判断仅Z颜色。因此,选择合适的颜色对于改进产品的{换率和提高品的可用性是非常有用的。在没有文字的场景中Q颜色的搭配非常重要。如何配色可以设计感更强,如何配色更好看,哪些配色不好看,解决q些问题需要学?fn)色彩理论?/p> <p> </p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/0116de5fcd5abc11013ee04d75d3cd.png" alt=""></p> <p>我们w处在一个多彩的世界中,物体的不同颜Ԍ会让我们产生不同的情l。色彩,卛_从物体反到人的眼睛所引v的一U视觉心里感受,按字面含义上理解可分和彩。「色」是指h对进入眼睛的光传臛_脑时所产生的感觉,「彩」则指多色的意思,是h对光变化的理解。色彩的基本理论虽然老生常谈Q但在UI设计中具体怎么q用Q还有关于色彩的性格和含义,都是我们需要了解的。因此在学习(fn)UI配色之前我们先来了解色彩的基知识?/p> <p> </p> <p><strong>1.1色彩常识</strong></p> <p><strong>原色</strong></p> <p>所有的色彩都源?ldquo;U黄?rdquo;三种原色Q很多h误以Z原色?ldquo;U绿?rdquo;Q其实不是。红l蓝是显CZ的三原色Q计机屏幕的显C是色光三原ԌUredQ绿greenQ蓝blueQ即RGBl成的,每一个像素的颜色都用三原色值来昄Q与术上的三原色不一栗原色是其他颜色调配不出来的。把原色怺混合Q可以调和出其他U颜艌Ӏ?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01638a5fcd5ad011013ee04d24cd3d.png" alt=""></p> <p> </p> <p>虽然 RGB 在显C备上表现良好Q但q不够h性化。因Zh们判断颜Ԍ往往是通过Q这是什么颜Ԍ是不是太艳了Q是太亮了还是太暗了Q这L(fng)感官l度Q而很N过U绿蓝的亮度层d断。所以h们后来基?RGB 衍生Z HSB 模式?HSL 模式?/p> <p>印刷三原色ؓ青(Cyan)、品U(Magenta)、黄QYellow)。是减色模式Q؜合ؓqԌq不能生黑Q所以在印刷时加上黑色a墨,才能产生U正的黑Q就是CMYK颜色模式?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/0113655fcd5ada11013fdcc7cbba31.png" alt=""></p> <p> </p> <p> </p> <p><strong>间色</strong></p> <p>又叫“二次?rdquo;。它是由三原色两两؜合调配出来的颜色。红与黄调配出橙Ԍ黄与蓝调配出l色Q红与蓝调配出Ԍ、绿、三种颜色又叫“三间?rdquo;。在调配Ӟ׃原色在䆾量多上有所不同Q所以能产生丰富的间色变化?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01aa0f5fcd5ae711013ee04dbcd07f.png" alt=""></p> <p> </p> <p> </p> <p><strong>复色</strong></p> <p>也叫“复合?rdquo;。复色是用原色与间色相调或用间色与间色相调而成?ldquo;三次?rdquo;复色是最丰富的色彩家族,千变万化Q丰富异常,复色包括了除原色和间色以外的所有颜艌Ӏ例如,黄色与橙色؜合得到橙黄,U色与色؜合得到U?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01b0525fcd5af011013fdcc72bfd0a.png" alt=""></p> <p> </p> <p> </p> <p><strong>h?/strong></p> <p>最后由三种原色、三U间色和六种复色l成的系l就UCؓ十二色环Q从紫色至黄lؓ冯Q黄色至紫色为暖艌Ӏ冷色o惛_天空、vz、冰雪等Q生寒冗理智、宁静等感觉Q暖色则令h联想到太队뀁火焰、热血{,产生温暖、热烈、危险等感觉?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/0192f35fcd5afa11013fdcc7035c08.png" alt=""></p> <p> </p> <p> </p> <p>虽然可以用「冷」、「暖」色pL划分色彩Q但配色的变化却又千U万U。借着色彩的组合方式,从「非常冷」到「凉爽」到「暖和」再到「炎热」都可以用不同的配色l来表现色彩的印象?/p> <p> </p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01b1425fcd5b0611013ee04d1c54de.png" alt=""></p> <p> </p> <p>不同的色轮由不同的h发明Q他们对于色彩的见解不一P因此创徏出来的色轮用途也不一栗比如:伊顿色轮又被UC为美术三原色Q是由颜料的三原色؜合叠加而成QRGB色轮主要q用于电(sh)脑、手机、^板等一pdU技产品QRGB的三原色是光的三原色QCMYK色轮主要用于印刷领域?/p> <p> </p> <p><strong>1.2色彩三属?/strong></p> <p>丰富多样的颜色可以分成两大类Q即有彩色系和无彩色pR彩色系的颜色具有三个基本特征:色相、明度和饱和度,在色彩学上被UCؓ色彩三大要素或色彩三属性?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01b68a5fcd5b1a11013ee04dd6f0b5.png" alt=""></p> <p> </p> <p> </p> <p><strong>色相QHueQ?/strong></p> <p>色相是自然状态下的色彩,是色彩的相貌。简a之,色环上没有改变明暗的色彩。色相是色彩的首要特征,是区别各U不同色彩的标准。例如红、橙、黄、绿、青、蓝、是其中不同的基本色相。黑色是没有色相的中性色。不同的色相在hg的差异是色相本n对应光的波长不同而造成的。红色L长最长,紫色的L长最短?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/012b635fcd5b2711013fdcc759ad15.png" alt=""></p> <p> </p> <p><strong> </strong></p> <p><strong>饱和度(SaturationQ?/strong></p> <p>饱和度是色彩的纯度,他表C颜色中所含有色成分的比例。增加饱和度Q色彩会变得更强烈、鲜艳生动;降低饱和度,颜色中灰色成分越大,色彩会变得暗淡乏呟뀂当一U颜色掺入黑、白或其他色彩时Q纯度就产生了变化,当掺入的颜色辑ֈ很大的比例时Qh的眼睛就无法感知出来了?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/0126875fcd5b3411013fdcc7d0c627.png" alt=""></p> <p> </p> <p>饱和度ؓ0 的颜色ؓ无彩Ԍ是黑、白、灰。数D大,颜色中的灰色少Q颜色越鲜艳。饱和度高的地方lh感觉靠近Q而饱和度低的地方则给人的感觉很遥q。高饱和度和低饱和度的色彩都lh坚硬的感觉?/p> <p> </p> <p><strong>明度QBrightnessQ?/strong></p> <p>明度Q指色彩的明暗度Q反应的是色彩的深浅变化。以自然界ؓ例,一些物体在早晨和晚上的色彩不同。如?wi)木和山脉,早晨色调;傍晚因ؓ光线减少了,色调变得偏暗。距光源近的物体,明度高Q反之,则明度越暗?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/0191f15fcd5b3d11013fdcc70e6d45.png" alt=""></p> <p> </p> <p> </p> <p>明度在UI设计中扮演重要的角色Q明度运用得好,可以实现好的Ҏ(gu)效果。明度达?00%Ӟ色彩׃变成白色Q黑白模式下Q;明度?%Ӟ׃变成黑色。色彩的明度变化往往会媄响到U度Q例如蓝色加入黑色以后明度降低了Q同时纯度也降低了;如果蓝色加入白色则明度提高了Q纯度却降低了?/p> <p> </p> <p><strong>1.3色彩的搭?/strong></p> <p>完整的UI配色应包含主艌Ӏ辅助色和中灰色。主色通常与品牌色一_辅助色一般选择与主色色调一致且能拉开层次的颜Ԍ色选择与主色相对立的互补色。下面我们来学习(fn)几种常见的配色方案?/p> <p><strong>单色 </strong></p> <p>单色是指某个色彩的明度变化,卛_色彩上叠?0%-90%白色或黑色得到的一l颜艌Ӏ单色搭配由于彼此之间色彩相同,因此能和谐共处,但因较ؓ朴素也就不容易引人注目,而且会给ZU单调的感觉。单色配色在色彩变化上也适合长时间阅读,颜色波动较少Q比较适合沉浸式交互的界面设计?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01f31a5fcd5b5011013ee04da00bbc.png" alt=""></p> <p> </p> <p> </p> <p>虄音乐是单色搭配的最好例子,它将主色色用在主要功能入口、标{栏图标{所有界面的关键元素上,lh非常_致和统一的视觉体验?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/0168e15fcd5b7e11013fdcc7ec17ea.png" alt=""></p> <p> </p> <p>如若惌在色彩变化上融入一点微妙的变化Q可以尝试在色环中选用两侧相近的颜Ԍq样色彩层次丰富了而统一感也不会变,UC?ldquo;邻近色配?rdquo;?/p> <p> </p> <p><strong>邻近?/strong></p> <p>是指在色相环中相?c)两种颜色Q在色相环上相距60°Q或者相隔五六个C的两艌Ӏ它可以在同一个色调中建立起丰富的质感和层ơ,优点是阳光、活泹{稳定、和谐但不单调,理所当然UCؓ最安全的配色法则。邻q色色相相近Q冷暖性质相近Q传递的情感也较为相伹{例如,U色Q黄色和色是一l邻q色。邻q色表现的情感多为温和稳定,没有太大的视觉冲凅R?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/0137ed5fcd5b9a11013ee04dd10e52.png" alt=""></p> <p> </p> <p> </p> <p>颜相机的主色是_色Q将粉色和色作助色Q既能信息区分又和谐l一?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/010f8a5fcd5bae11013ee04df7b691.png" alt=""></p> <p> </p> <p> </p> <p><strong>互补?/strong></p> <p>互补色是指在色相环上对立Q?80°Q的两个颜色Q色相环上夹角呈C条直U,例如黄色和艌Ӏ橙色和蓝色、红色和l色{。互补色有着非常强烈的对比度Q在颜色饱和度很高时Q可以生许多十分强烈的视觉效果Q就会ɘq两U颜色都昑־更加鲜明Q也视觉冲d强度提升臛_倹{这c配色Ş式优~点和对比色很相伹{常lh一U潮、刺Ȁ、兴奋的感觉Q?strong>把互补色攑֜一P会给人强烈的排斥感,搭配不好会很山寨?/strong></p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/0160275fcd5bc111013fdcc7422fe6.png" alt=""></p> <p> </p> <p> </p> <p>Airbnb的主色ؓU色Q界面设计中使用主色的互补色「墨lѝ作Z色调Q给人清晰、高效简z的感觉?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01f29d5fcd5bdd11013ee04d159d24.png" alt=""></p> <p> </p> <p> </p> <p><strong>分裂互补?/strong></p> <p>分裂互补色是指寻找三U颜Ԍ其中两种互ؓ邻近Ԍ另一U与它们形成互补Ԍ例如黄色和蓝艌Ӏ洋U。这U搭配既能保持互补色强烈的对比及视觉上的味性,又能让颜色变得柔和?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/0104de5fcd5c0111013ee04d4a5742.png" alt=""></p> <p> </p> <p> </p> <p>36Kr蓝色作ZԌ互补色黄色作助色用在图标、标{上Q再选择黄色的邻q色U色作ؓ另一辅助Ԍ用在不同的信息上Q有助于用户区分产品信息?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/016ff45fcd5bf611013fdcc7142426.png" alt=""></p> <p> </p> <p> </p> <p><strong>Ҏ(gu)?/strong></p> <p>指在色环上相?20°?80°之间的两U颜Ԍ也是两种可以明显区分的色彩,包括颜色三要素的Ҏ(gu)、冷暖对比,彩色和消色的Ҏ(gu){。对比色能色彩效果表现更明显,形式多样Q极富表现力。需要注意的是,互补色一定是Ҏ(gu)Ԍ但是Ҏ(gu)色不一定是互补艌Ӏ因为对比色的范围更大,包括的要素更多,如冷暖对比、明度对比、纯度对比等。这c配色Ş式优Ҏ(gu)视觉冲击力强烈、富有蟩跃性、突出、点~能力强,比如常用作画面中的点~Ԍ或与M固有色成Ҏ(gu)关系的背景色Q用于突Z体。缺Ҏ(gu)大面U用比较难把控?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/0185e25fcd5c1011013fdcc7c73614.png" alt=""></p> <p> </p> <p>马蜂H的主色是黄ԌҎ(gu)色蓝色作色用在标{、小图标上,U色作ؓ色用在h(hun)格等信息上?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/0191e95fcd5c2511013ee04d3ad835.png" alt=""></p> <p> </p> <p>Ҏ(gu)色也不单U是两个颜色之间的对比,而是色调之间的对比!<strong>Ҏ(gu)色还包括Q补色对比、色相对比、明度对比、饱和度Ҏ(gu)、冷暖对?/strong>Q饱和度高Ҏ(gu)强烈,明度反差大Ҏ(gu)强烈?/p> <p> </p> <p><strong>四元色搭?/strong></p> <p>四元色搭配在色环上Ş成了一个矩形,使用不是一对而是两对互补艌Ӏ将其中的一个颜色作ZԌ其余颜色作ؓ辅色q行搭配可以得出不错的效果?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01c6b55fcd5c3711013fdcc77e4869.png" alt=""></p> <p> </p> <p>四元色是比较难以q的颜Ԍ不过搭配好了会非常出彩。不信可以自q用感受一下,其是用其中一个颜色作ZԌ其他的三个颜色作助色的时候?/p> <p> </p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01adf15fcd5c5111013ee04d740c54.gif" alt=""></p> <p> </p> <p> </p> <p><strong>1.4色彩和光源关p?/strong></p> <p>了解了色彩的基本知识Q下面说说色彩和光源的关pR如果想描绘好对象的色彩Q那么就必须了解对象的固有色、光源色、环境色及它们之间的关系和变化?/p> <p><strong>固有?/strong></p> <p>即物体本w的颜色。是指在光源条g下物体占dC的色彩,如红色的|子、绿色的植物{。物体的固有色ƈ不存在,在绘画过E中Z观察方便l常引入“固有?rdquo;q一概念。从实际斚w来看Q即使日光也是在不停地变化中Q何况Q何物体的色彩不仅受到投照光的影响Q还会受到周围环境中各种反射光的影响。所以物体色q不是固定不变的?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/0126a65fcd5c6811013fdcc71202a4.png" alt=""></p> <p> </p> <p> </p> <p><strong>光源?/strong></p> <p>物体只有在光源的照亮下才能观察到它们的色彩。光源有自然光(太阳、天光)和h造光Q灯Q,q些光源都各自具有不同的颜色。太阛_是偏黄色暖色光,月光是偏青的冯光,阴天则更多的是蓝灰色的天光,普通灯光是偏黄色的暖色光。光源的颜色对物体的颜色影响很大Q想象一下一个置于红色光源照下的蓝色物体会是什么颜艌Ӏ?/p> <p> </p> <p><strong>环境?/strong></p> <p>物体周围环境的颜色就是环境色。环境色对物体的影响非常大,如在U色背景下的白色物体Q由于光源打到红色背景上的背景反光也会“?rdquo;到白色物体上Q因此白色物体的部分表面会蒙上一层EU色的色彩。所以,设计师在用电(sh)脑作图时也需要考虑q想象环境色的媄响?/p> <p> </p> <p><strong>1.5色彩I间</strong></p> <p><strong>Lab</strong></p> <p>Lab的全U是<strong>CIELAB</strong>Q有时候也写成<strong>CIE L*a*b*?/strong>最H出的特Ҏ(gu)它的生理Ҏ(gu),一是它包括人眼所看到的所有颜Ԍ是目前ؓ止色域最宽的色彩I间Q二是跟人眼一P首先看到的是明暗Q其ơ是色彩Q可以用数字化的方式描述人的视觉感应Q在计算觉中q泛应用?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/0171585fcd6c9311013ee04dbc8816.png" alt=""></p> <p> </p> <p> LAB颜色I间中,L表示亮度Q取值[0-100]对应[U黑—U白]QA颜色表示从绿色到U色的范_取值[-128—+127]对应[l?mdash;z红]QB表示从蓝色到黄色的范_取值[-128—+127]对应[?黄]Q正是暖Ԍ负是冯。Lab颜色I间中亮度和颜色是分开的, L通道没有颜色Qa通道和b通道只有颜色。不像在RGB颜色I间中,R通道、G通道、B通道每一个既包含有明度又包含有颜艌Ӏ?/p> <p>在表达色彩范围上Q最全的是Lab模式Q其ơ是RGB模式Q最H的是CMYK模式Q,它I补了RGB色彩模型和CMYK色彩模式色彩分布不均的不뀂也是说Lab模式所定义的色彩最多,且与光线及设备无养Iq且处理速度与RGB模式同样快,比CMYK模式快数倍?/p> <p><strong> </strong></p> <p><strong>Hsb</strong></p> <p> HSB ?HSV 是同一个东西,只是名称不同。在Photoshop拾色器上可以看到每个颜色都有一lHSB|H表示色相、S表示U度、B表示明度。色相gؓ0?60度,卛_Q纯度和明度gؓ0?00%Q因此,了解HSB模式的原理,p了解色彩的本质?/p> <p>当我们需要调配同色系色彩Q保持色怸变,只需要改变纯度和明度卛_。如下图所C的3U同色系l色Q他们的色相QH152Q都一_仅在U度和明度上有所变化?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01e4d55fcd5c9211013fdcc7d31744.png" alt=""></p> <p> </p> <p>当色相和U度都ؓ0Ӟ色彩UCؓ中性色Q也UCؓ灰度Ԍ即黑白灰。其中,C是单指某一U颜Ԍ而是一pd从黑到白的过渡色?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01046e5fcd5c9a11013ee04df5f061.png" alt=""></p> <p> </p> <p>灰度色多用于文字Q通常一个应用中的文字不应超q?U灰度色。深黑用于标题、正文等主要文字Q浅黑或q用于辅助、提C性文字;灰用于用、失效等状态文字;U白用于p按钮文字?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/0107f25fcd5cc111013fdcc72ea64f.png" alt=""></p> <p> </p> <p>此外Q灰度色׃没有M色相Q始l沉着冷静Q减对内容的视觉干扎ͼ因此常用于界面背景色Q例如MOO音乐的界面设计?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/012c1d5fcd5cca11013fdcc78cdfe0.png" alt=""></p> <p> </p> <p><strong> </strong></p> <p><strong>Hsl</strong></p> <p>HSL色彩模式是工业界的另一U颜色标准,是通过对色?H)、饱和度(S)、亮?L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各L(fng)颜色的。在原理和表CQHSL ?HSB 中的 HQ色相) 完全一_但二者的 SQ饱和度Q不一P L ?B Q明?Q也不一栗?/p> <p>取一个颜色试试看Q先选一个颜?#0688F9Q放?“HSL Color Picker”Q显C?HSL 数gؓQH(208), S(95), L(50)Q但是我们放?Sketch 里面看一下,昄?HSB 数gؓQH(208), S(98), B(98) ?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/018f3a5fcd5ce211013ee04d15f39f.png" alt=""></p> <p> </p> <p>HSL的H代表的是人眼所能感知的颜色范围Q这些颜色分布在一个^面的色相环上Q取D围是0°?60°的圆心角Q每个角度可以代表一U颜艌Ӏ色相值的意义在于Q我们可以在不改变光感的情况下,通过旋{色相环来改变颜色。在实际应用中,我们需要记住色相环上的六大主色Q用作基本参照:360°/0°U?0°黄?20°lѝ?80°青?40°蓝?00°z红Q它们在色相环上按照60°圆心角的间隔排列?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01babc5fcd5ceb11013ee04dfa1028.png" alt=""></p> <p> </p> <p> </p> <p><strong>HSL相比RGB的优?/strong></p> <p>我们来做一个基于HSL的调色实c你可不可以快速说?ldquo;hU?rdquo;所对应的RGB色|如果再加一Ҏ(gu)色进去,把亮度提高一点,色值又是多?x那应该是一个介于洋U和U色之间的,性感娇艳的颜艌Ӏ我们可以假定它在色相环H上的角度?30°左右Q饱和度较高Q亮度适中Q看看那是什么颜Ԍ</p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01f00c5fcd5cf511013ee04db50442.png" alt=""></p> <p> </p> <p>em...我们惌的颜色应该再接近U色一点,让我们把色相QHQ?20°?50°Q现在好多了?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/0153695fcd5cfb11013fdcc7335da4.png" alt=""></p> <p> </p> <p>通过改变色相值HQ我们实C色相从洋U向hU的偏移?大感觉接q了Q但q是略微有点灰暗Q我们可以通过增加饱和度(SQ?15%Q让q个颜色变得更鲜z,看v来更亮丽?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/012f325fcd5d0311013fdcc7127047.png" alt=""></p> <p> </p> <p>感觉q是差点Qv红是属于少女的颜色Q应当再嫩一炏V通透一点,不会q么强烈。那可以通过增加亮度LQ?10%试试看,嗯,q才是我们想要的颜色?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01d8ef5fcd5d0c11013fdcc70accac.png" alt=""></p> <p> </p> <p>同理Q如果想加点色q去Q?再亮一点,我们通过心算大致可以确定色相环的相位和亮度倹{在q里Q我们需要让H增加20°QL增加5%?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01ac395fcd5d1211013ee04da348c5.png" alt=""></p> <p> </p> <p>在用HSL调色的过E中Q不需要了解复杂的色光混合原理Q这是一个自然的、感性的、易于理解的q程。相比之下,RGB调色方式昑־非常W拙复杂、难以理解,而HSL是多么的友好?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01c4195fcd5d1c11013ee04d9813d7.png" alt=""></p> <p> </p> <p>需要提醒一下的是,CSS 代码里支持的?HSLQ而不?HSB。如果和前端Ҏ(gu)ӞUI l到的是 HSB 的色|那么最l落地的颜色效果会与设计E有出入。Photoshop中的Hex和RGB颜色可以直接在CSS文g中用,但是Photoshop中的HSB模式颜色和HSL是不同的?/p> <p><strong> </strong></p> <p><strong>Yuv</strong></p> <p>YUVQ是一U颜色编码方法。常使用在各个媄像处理组件中?YUV在对照片或媄片编码时Q考虑Chcȝ感知能力Q允?dng)R低色度的带宽。Y表示明亮度(Luminance或LumaQ,也就是灰度|U(Cb)表示色度QChrominanceQ;V(Cr)表示度QChromaQ;通常UV一hq媄像色彩和饱和度,用于指定像素的颜艌Ӏ?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/018cbd5fcd5d3011013fdcc781f80e.png" alt=""></p> <p> </p> <p>采用YUV色彩I间的重要性是它的亮度信号Y和色度信号U、V是分ȝ。如果只有Y信号分量而没有U、V信号分量Q那么这栯C的囑փ是黑白灰度囑փQ回想一下小时候看的黑白电(sh)视)。彩色电(sh)视采用YUVI间正是Z用亮度信号Y解决彩色?sh)视Z黑白?sh)视机的兼容问题Q黑白?sh)视Z能接收彩色电(sh)视信受?/p> <p> </p> <p> </p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/0146455fcd5d6011013ee04dbabc7f.png" alt=""></p> <p>色彩心理学是术知识学习(fn)中非帔R要的一部分。他所研究的是色彩通过对h视觉上的刺激Q而引发h情感和感官上的变化,通过日常生活中h们对应用色彩的经验积累而归UxȝZhcd色彩心理上的预期感受。在生活中,色彩心理学对Z寚w色的认知有很大的影响。ؓ什么交通信L(fng)用红色表C停止通行而不是绿色呢Qؓ什么大多快店用红色或黄色作ؓ品牌的主Ԍq都是色彩心理学的相关知识?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/0129375fcd5d7a11013ee04d647ae6.png" alt=""></p> <p> </p> <p>虽然U、蓝是受到最普遍喜爱的颜Ԍ通过对App Store应用行颜色分类l计得知Q。但q不意味着q一准则可以套用在所有品上。品的属性是什么,用户定位是什么,要传辄产品气质是什么等{,q些都是选择应用图标的颜色时需要考虑的问题。世界上W一间Airbnb戉K是在一条叫Rausch street的街上诞生的Q因此Airbnb的主色被命名为「Rausch」的温暖颜色。在挑选主色调的时候,4名设计师前往世界13个城市,只ؓ了更好地理解Airbnb的理念:热情、能量和自信Q这正是Rausch要传递的信息。除?Rausch 以外QAirbnb q有其它?ji)种颜色Q包?Kazan、Beach、Tirol、Foggy {等Q它们也都是?Airbnb 的社道命名的?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01a99f5fcd5d8811013ee04da29a3e.png" alt=""></p> <p> </p> <p>下面来讲解每一U颜色都各自带有什么样的性格Q只有理解了颜色的性格才能正确的用它们?/p> <p><strong> </strong></p> <p><strong>黑色</strong></p> <p>黑色代表着品质、高端、时、低调、权威、严肃、稳重,是一U充满质感的颜色。它是所有色彩中最有力量的Q能很快吸引用户的注意力。作ZU无彩色Q能让它和其他色彩百搭,黑色+金黄Ԍlh一U奢华精致的感觉Q黑?银灰Ԍ则给ZU成熟稳重的感觉Q黑?U色Q给ZU时潮的感觉。因此黑色是一U永q流行的主要色彩?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/017d665fcd5d9511013ee04d7c0c9e.png" alt=""></p> <p> </p> <p> </p> <p><strong>白色</strong></p> <p>白色代表着U洁、简单、纯真、朴素、信仅R开放、雅_白色常常被认为是“无色”Q即不是色彩。单一使用白色通常不会引vM情感Q但是当白色与其他颜色配合用时Q白色能很好的衬托,大量的留白让其他元素脱颖而出。在界面设计中,作ؓ无彩色的白色Q常用于背景Ԍ~和各种颜色的冲H,以衬托其他色彩,提高画面明度Q提高文字可L?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01cfc05fcd5db411013fdcc717c862.png" alt=""></p> <p> </p> <p> </p> <p><strong>灰色</strong></p> <p>灰色是代表着睿智、老实、执着、严肃、压抑、沉E뀂介于黑色和白色之间Q也属于无彩Ԍ没有色相也没有纯度,只有明度的变化。它和Q何颜色都能很好的搭配Q也常常用于背景色或用于H出其他彩色。灰色不像黑色那么坚刺|他更有弹性,它比黑色更有深层ơ的力量。因此在画面中,很少出现U黑Q基本都是用q色来代替黑色Q也可以用浅灰色来代替白艌Ӏ?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01da065fcd5dc811013ee04d0dbe60.png" alt=""></p> <p> </p> <p> </p> <p><strong>U色</strong></p> <p>U色代表着喜庆、热情、欢乐、斗志、奔放、自信,是一U充满能量的颜色。这是最醒目和强势的颜色Q一d卌得全场的xQ甚臌引v一些生理反应,例如心蟩呼吸加快{。红色最能烘托气氛,在中国传l节日里都用热闹的U色来装饎ͼ因此也就不难理解每逢佳节各大电(sh)商应用活动页一片红Qؓ的就是发冲动Q引人消贏V同时红色也代表了警C、告诫。所以在界面设计中常用红色的文字和按钮来警示用户慎重操作?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01cf935fcd5dcc11013fdcc71810b4.png" alt=""></p> <p> </p> <p> </p> <p><strong>色</strong></p> <p>色代表着温暖、欢乐、辉煌、健店阳光、年轅R华丽,是一U充满朝气的颜色。橙色ƈ不像U色那样咄咄ghQ而且它烘托出的活跃气氛没有危险的感觉Q反而是一U友好。因此越来越多的应用避开常见的红色和蓝色Q而选择色的原因?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/0151115fcd5ddd11013ee04d1655c1.png" alt=""></p> <p> </p> <p> </p> <p><strong>黄色</strong></p> <p>黄色代表着信心、青春、聪明、尊c辉煌、时,是一U充满活力的颜色。黄色是明度极高的颜Ԍ光亮的色调使它在众多图标阵列中昑־ؓH出。尽在警示效果上没有红色那么明昑֒强烈Q但是还是能lh很醒目和危险的感觉(例如道\警示牌)。同时因于明亮,也是一U非帔R以运用的颜色Q性格不稳定常有偏差,和别的颜色配合用易失去本来的性格。不q黄+黑的搭配很流行,例如站酷和美团外卖?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01c4235fcd5dde11013ee04d500ccd.png" alt=""></p> <p> </p> <p> </p> <p><strong>l色</strong></p> <p>l色代表着健康、生命、青春、宁静、自然、和q뀁安全、舒适,是一U充满希望的颜色。绿色给人无限的安全感,当情l低落与消极时看一些绿Ԍ能缓解我们焦w的情A。绿色在生活中被q泛q用Q如安全出口的颜色就是绿Ԍ但绿色的饱和度要适当控制Q如高饱和度的绿色也会o人兴奋,引v注意?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01fd585fcd5dec11013fdcc731bd53.png" alt=""></p> <p> </p> <p> </p> <p><strong>青色</strong></p> <p>青色代表着坚强、古朴、活泹{清爽、柔和、优雅、希望,是一U充满灵动的颜色。青色是一U介?/p> <p>l色与蓝色之间的颜色Q如果无法界定一U颜色是蓝色q是l色Ӟq个颜色可以被UCؓ青色。豆瓣的主色调是青色Q很W合豆瓣清新的气质Q带l用h静的感受?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01b9945fcd5dfb11013ee04d3a56e0.png" alt=""></p> <p> </p> <p> </p> <p><strong>蓝色</strong></p> <p>蓝色代表着冷静、科技、灵性、自由、放松、未来、理智、纯净、商务,是一U充满理性的颜色。蓝色是天空的颜Ԍ是大L(fng)颜色。在色彩心理学的试中发玎ͼ几乎没有人对蓝色反感。纯净的蓝色通常让h联想到vz和天空Q可以抚q_心的伤口Q让人的内心感到q_Q有助于人的头脑变得冷静。例如twitter的主色调是蓝Ԍ在社交应用里蓝色是一U很安全的颜Ԍ高纯度的颜色传递了信赖、年d沟通的氛围?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/013da55fcd5e0f11013ee04d91d848.png" alt=""></p> <p> </p> <p> </p> <p><strong>紫色</strong></p> <p>紫色代表着高贵、浪漫、优雅、性感、幸q、梦qR时、创造性,是一U充满神U的颜色。是孩子和有创造力的h十分喜欢的颜艌Ӏ色的光L最短,在自然界中较?yu)见刎ͼ所以被引申征高늚色彩。色的明度在所有有彩色的颜色中是最低的。与不同的颜色结合会展现厨不同的风格特色。+_常用于x化的品调性,黄色是色的Ҏ(gu)艌Ӏ?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01c7fe5fcd5e2111013ee04d5d2dc8.png" alt=""></p> <p> </p> <p> </p> <p> </p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/0163ad5fcd5e4a11013ee04d01eb08.png" alt=""></p> <p>当我们讨彩的时候,聊的更多的是色彩的搭配。虽然有些设计师认ؓ有些色彩是一些纯_的学上的选择Q但是实际上Q色彩对于用L(fng)心理和行为的影响相对更深Q最l会反映在用户体验和行ؓ反馈上?/p> <p>当然Q色彩理论是一个相对复杂的主题。从用户体验的角度上来说Q色彩所涉及到的q不是配色方案这一个维度。通常Q我们聊得最多的是不同色彩所产生的心理效应,以及多色彩搭配时Q相互之间的影响和可讉K性上的问题。设计师可以色彩更好地q用到设计中Q而无需重新考虑整个q程。一旦设计师掌握了基知识Q色彩理Z最有意义的部分之一是学习(fn)更多意想不到的色彩融入他们的设计中?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/0154015fcd5e5411013fdcc7692ca5.jpg" alt=""></p> <p> </p> <p> </p> <p><strong>3.1 色彩心理学和用户体验紧密兌</strong></p> <p>界面颜色的情感媄响不容忽视。尽有些颜色在Ui设计中是“通用?rdquo;Q例如,黑色Q白色和灰色Q实际上几乎所有好的设计中都用了其中的至一U)Q但它们l合使用的颜色可能会对体验设计生巨大媄响。当Ӟ颜色的用方式也会对颜色的感知生巨大媄响。以蓝色ZQ在U的布局当中Q大面积使用蓝色作ؓ主色调,和在大面U白底上使用很小的一抹蓝色用来强?CTA按钮Q所带来体验是截然不同的?/p> <p> </p> <p><strong>3.2.1 重文化差异</strong></p> <p>人类对于色彩都有着共通的认知Q但不同国家对于色彩赋予了不同的含义。红色在中国象征着喜庆、胦富和爱情Q而在西方国家被赋予了血、牺牌Ӏ暴力和Ȁq的文化意义Q贬义的味道更重一些。而白色与U色相反Q白色在中国代表了死亡、反动和投降Q以白色Z的设计常怼被视之ؓq于「素」,认ؓ不够吉利。而西方国家却认ؓ白色高雅、纯z和q运Q因此要Ҏ(gu)不同的文化背景,使用不同的色彩,才能更好地降低被误解的风险?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01ad485fcd5e7311013fdcc75198c4.png" alt=""></p> <p> </p> <p>另外一斚wQ随着CMq动的普及,白色也拥有了更加C的特征。在日本Q白色甚臛_当地文化l合Qg伸出更加l腻独特的精特质,随着日本战后设计领域的发展和崛vQ白色在q一地区的含义则更加丰厚。原研哉在《白》一书当中,针对白色的含义和特征q行了非常深入的探讨Q之后的《Subtle》一书当中,虽是围绕U来探讨微妙的体验,但是也没提及白色本w的特征?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/0149fc5fcd5e9e11013fdcc7d78b85.png" alt=""></p> <p> </p> <p>例如股票交易市场Q在国际股票市场通常是绿涨红跌,q是因ؓU色在西方国家代表着财政赤字Q绿色代表着财富Q而在中国正好相反是红涨绿跌,q是因ؓ在中国红色象征着财富?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01fb6d5fcd5eb111013ee04dc70487.png" alt=""></p> <p> </p> <p> </p> <p>设计师必L据品的目标受众来审视其调色板的文化含义Q这一点很重要。如果品要面向全球受众Q请保在用的颜色和图像之间取得^衡,以防止负面的文化内涵。如果品主要只针对特定文化Q则设计师可以不用太兛_所选调色板在其他文化中可能产生的媄响?/p> <p> </p> <p><strong>3.2.2 历史寚w色的影响</strong></p> <p>旉变化对于配色所带来的媄响不仅仅如此。比如中日两国在色彩使用上,q存在一个非常典型的差异Q历史上日本在一个很长的周期内是作ؓ中国的属国所存在的,q也使得中国自古以来崇尚饱和度较高的正色Q而日本则大多使用饱和度偏低的间色Q这一特征可以从两国的传统色上体现出来Q?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/012ba45fcd5edb11013ee04dd9c9e3.png" alt=""></p> <p> </p> <p>?中国传统?/p> <p> </p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01c6055fcd5ee211013fdcc7c16dd6.png" alt=""></p> <p> </p> <p>?日本传统?/p> <p><strong> </strong></p> <p><strong>3.2.3 性别误区</strong></p> <p>或许天生如此Q女性不喜欢灰色、棕色和色。她们钟p艌Ӏ色和l色。而男性不喜欢紫色、棕色和色。男性喜Ƣ蓝艌Ӏ绿色和黑色。只要记住,当你的品目标用L(fng)是男性时Q选择能传辄性气概的色彩Q想象下你把q动cd用的界面使用x色彩,l果可想而知?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/018ed15fcd5ef011013fdcc7ab69d7.png" alt=""></p> <p> </p> <p>?男女最喜欢的颜?/p> <p> </p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01b90b5fcd5eff11013ee04d2ae099.png" alt=""></p> <p> </p> <p>?男女最不喜Ƣ的颜色</p> <p><strong> </strong></p> <p><strong>3.3 针对色盲用户体的设?/strong></p> <p>你有没有惌你的APP 使用人群中会有视力障者?</p> <p>当h们谈盲时Q他们通常指的是不能感知某些色彩?大约8Q的h和0.5Q的x?zhn)有不同程度的色?mdash;—他们在识别部分或者全部颜色时有困难。面对如此庞大的Ҏ(gu)受众Q设计师理应x他们的需求?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/019ac15fcd5f2111013fdcc77c919e.png" alt=""></p> <p> </p> <p>?正常人和U绿色盲看到的相同色?/p> <p> </p> <p>因ؓ色盲有多重表现Ş式,例如U绿色盲Q蓝黄色盲和单色色盲。所以运用多L(fng)视觉U烦来连接你APP 的重要状态是很重要的。绝不要仅仅依靠色彩来表C系l状态?相反Q应使用元素Q如W画Q指C符Q图案,U理或文本)来描q操作和内容。需要注意的是不要单认盲就是简单的分不清红l,色盲用户对色彩的感受差异不仅仅是单独某种的问题,是某些范围色光的敏感E度问题?/p> <p> </p> <p>有趣的事实:Facebook的标志和不怎么讨喜的蓝色配色是Ҏ(gu)挑选的。因为FB创始人马?middot;扎克伯格是红l色Ԍ他对蓝色的识别是最好的。他曾说q,“蓝色是我生命中最丰富的颜Ԍ我几乎可以看见这世上所有的蓝色?rdquo;</p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01d8415fcd5f2d11013fdcc7b4a1aa.png" alt=""></p> <p> </p> <p>?facebook</p> <p> </p> <p>Photoshop有非常实用的工具来帮助模拟色Ԍ在「视图」的「校栯|」菜单内选中可以用了。这个功能让设计师可以看到在色盲用户的眼中你的界面是什么样子的?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/0111395fcd5f4311013fdcc746c762.png" alt=""></p> <p> </p> <p>?pinterest登陆늺l色盲视?/p> <p> </p> <p>下面以点状图信息囑ŞZQ来说明如何盲用户优化信息图Q?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01c5e95fcd5f4d11013ee04dde3783.png" alt=""></p> <p> </p> <p>优化采用了这样一些手D:1.调整配色Q将色盲人士Ҏ(gu)h的红、绿、橙色换为红、蓝、黄艌Ӏ?.调整明度Q图中几个颜色在明度上差异更明显?.Z同元素赋予不同Ş状。所有用点元素的信息图Q都可以参考这U解x式?/p> <p>在实际设计过E中Q我们需要在<strong>观和友好之间进行权?/strong>。我们也可以采用一?strong>交互</strong>手段Q避免同一界面中元素太多太q杂q问题?/p> <p> </p> <p><strong>3.4 行势对色彩的影响</strong></p> <p>q是更长l度上的变化Q在短时间以内,行色的势变化Q对于用色也也同样存在媄响。这U媄响在时尚行业有着非常直接的体玎ͼ而在|页和UI设计行业Q同样存在。比?020q的潘通年度流行色是「经典蓝」(Classic BlueQ,也就明白了ؓ什么iphone12今年的主打色是蓝色了?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/014c685fcd5f6111013fdcc79226ed.png" alt=""></p> <p> </p> <p>所以,当你在设计的时候,如果你的目标用户体有着清晰的地域或者性别偏向Q你可以有目的地利用q些知识来规避设计陷阱,更好地发挥色彩本w的功能和优ѝ如果受众广泛,则可以尽量用通用性更强的色彩来进行设计?/p> <p> </p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/0190ca5fcd5f6911013ee04d861bbf.png" alt=""></p> <p> </p> <p><strong>你知道世界上最受欢q的颜色是什么吗Q?/strong></p> <p>是否存在一U色彩,是不分性别文化Q大安会喜Ƣ的呢?实有h通过大规模的调研和探索找C一U世界上最受欢q的色彩Q马?dng)斯l(Marrs GreenQ。来自全世界100多个国家3万多人响应号召完成了q项投票Qƈ且最l选取出来的一Ƅ艌Ӏ?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/016a3c5fcd5f7611013fdcc767033d.png" alt=""></p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/013b6e5fcd5fac11013ee04dcf696f.png" alt=""></p> <p><strong>4.1色彩的应?/strong></p> <p>对于色彩的记忆度要高于Ş态,即一个Appl用L(fng)下深d象的往往是界面的色彩。例如说到支付宝Q我们可能想不v它的首页长什么样子,标签栏图标是那些Q但能马上记起它的界面主色是蓝色。因此运用好色彩对UI设计十分重要Q它能直观的呈现产品的气质和性格Q能有效的帮助用L(fng)l和阅读信息Q与界面设计产生联系和记忆。好的配色往往依靠设计师审、感觉搭配出来,但合理的颜色搭配必定存在合理的配色规律和配色Ҏ(gu)论的支撑Q下面结合相x例ؓ大家讲解色彩q用的几个技巧?/p> <p> </p> <p><strong>4.1.1 不得触碰的禁?/strong></p> <p>分析研究了很多优U设计作品Q发C们在用色的时候有一部分区域是不会用的Q也是我们常说?ldquo;配色区”。当Ӟq里?ldquo;区”是带双引号带的,q没有什么绝对的区Q只是说q些颜色不易控制Q在q基色都没有N好之前,量碰?/p> <p>配色区大概分ؓq三U:三角形禁区、矩形禁区、扇形禁区(U色为禁区)Q如下图Q?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/0109f95fcd5fba11013fdcc7f0a979.png" alt=""></p> <p> </p> <p>l合看来Q不是那种区Q右下角区域的颜色是很少用的。毕竟他们又脏又深,当然什么颜色都能驾驭的大师L(fng)q?/p> <p> </p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01766b5fcd5fc811013ee04d1588bc.png" alt=""></p> <p> </p> <p>在界面设计中Q一般主色和辅助色都集中在右上角Q次要的和不可点的颜色都集中在中中上方,而文字信息和背景色则集中在左侧,右下角禁区是我们要重炚w开的对象?/p> <p> </p> <p><strong>4.1.2 色调一?/strong></p> <p>在App设计之前应先定界面的主色调Q主色将占据界面中很大的比例Q通常是品牌色Q而辅助色、点~艌Ӏ背景色{都应以主色调ؓ基准来搭配,q样才能保证App整体色调的一致。色调一致的界面Q能带给用户始终如一的视觉体验。例如马蜂窝黄Ԍ品牌Ԍ作ؓ主色Q以及从主色搭配出的蓝色Q对比色Q诏IApp始终?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/018a065fcd5fe311013ee04de2eb3e.png" alt=""></p> <p> </p> <p> </p> <p><strong>4.1.3 60-30-10原则</strong></p> <p>60% 30% 10%的原则,是达到色彩^衡的最x例。在60%的空间用主Ԍ可以q用到导航栏、按钮、图标等关键的元素中Q之成为整个App的视觉焦点和色彩关系Q?0%的空间用辅助色Q可以^衡过多的主色而造成的视觉疲劻I最后剩?0%的空间ؓ点缀Ԍ可以用在一些不太重要的元素又需要区分的时候?:3:1原则构徏了一U丰富的色彩层次Q让界面看上d谐、^衡和不杂乱?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01c5205fcd5ff211013fdcc775493a.png" alt=""></p> <p> </p> <p> </p> <p>哔哩哔哩粉色运用到늭、标{栏、按钮、入口图标等上,蓝色的辅助色用在角标、图标上Q还有黄艌Ӏ红色用在一些小图标、小标签上,L非常清晰明了?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/012ed15fcd600311013ee04d56cb69.png" alt=""></p> <p> </p> <p> </p> <p><strong>4.1.4 色不q三</strong></p> <p>l常很多大神在网上说配色不要过三种Ԍ其实是「色不过三」原则,卛_一个页面中不要使用过3U颜色搭配,q也和上面说?ldquo;60-30-10原则”cMQ即一个主艌Ӏ一个辅助色和一个点~艌Ӏ但在实际UI设计中,q于产品的需要可能会使用更多数量的色彩,但切C可超q?U色相(注意不是7U色|Q每个色相还可以q用光和度、明度的变化分解Z富的色彩搭配?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01cd0c5fcd601511013ee04d06debd.png" alt=""></p> <p> </p> <p> </p> <p>团外卖的首?0个功能入口大图标的背景用?U不同的色彩Q每U色彩又包含一U低饱和度色彩进行彩色渐变,但ƈ没有昑־杂ؕQ而是呈现一U年L的律动感。这是因里虽然用了9U不同的色彩Q但仔细观察发现只用了3U色彩,其他6U则是从前者邻q色中提取出来的搭配Q再它们错落放|,呈现Z富多彩的色彩搭配Q整体和谐统一?/p> <p> </p> <p><strong>4.1.5 q离U黑色和U灰?/strong></p> <p>黑色像没有生命力的深渊Q用户陷入冷冷的负面情l中。远ȝ黑色和纯灰色Q是因ؓ它们不存在于现实世界里。尝试在U黑和纯C加入一些色调,会让界面看上L柔和自然。另外,U黑色还会与白色产生强烈的对比度Q看久了会人疲劻I让用户生焦虑的情A。MONO的导航栏q不是深黑色Q而是加入了蓝色的低饱和度蓝黑Ԍ它的界面背景也是加入了蓝色的的浅Ԍq样׃会让界面看上L气沉沉的?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/0117e35fcd603011013ee04d134cc5.png" alt=""></p> <p> </p> <p> </p> <p><strong>4.1.6 遵@色彩心理?/strong></p> <p>前文我们已经了解q各U色彩的心理学知识,是Z我们在进行App设计时提供依据。这些色彩都是源于hcd大自然最原始的感受,蓝色的天I、绿色的草地、黄色的沙漠{等Q自然的色彩Q对于我们来说是司空见惯的,但其中却蕴含着丰富的美感,q达C和谐l一。网易云音乐使用U色作ؓ主色Q这U热情奔攄颜色传递出一U充满能量、自信的气质?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/0121f05fcd603d11013ee04d68e026.png" alt=""></p> <p> </p> <p> </p> <p><strong>4.1.7 良好的可L?/strong></p> <p>良好的可L在界面设计中能为用h供主ơ分明、层ơ清晰的阅读体验Q而一个可L差的界面则会成为用h览的障碍。那如何保界面h良好的可L呢Q这需要在界面设计中注意色彩搭配的Ҏ(gu)Q如在浅色背景上使用p文字Q在p背景上用浅色文字,使用高对比的度的亮色展示重要的元素,用低Ҏ(gu)度的色来体现需要弱化和ơ要的内宏V例如苹果Music的主要功能入口,标签栏图标、按钮等都是用了高纯度的U色Q与其他元素从Ş成鲜明对比,pq色的辅助文字都有着清晰的可L?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01d2755fcd604b11013fdcc773c52e.png" alt=""></p> <p> </p> <p> </p> <p><strong>4.1.8 从大自然中获得灵?/strong></p> <p>配色中尽量用大众熟(zhn)的色彩Q如自然界中Z常见的色彩等。从大自然中获取的配色灵感可以你的设计更加切合用户的审,非常自然。而艺术是对自然的直接反映Q是非常宝贵的资源,值得好好利用。我们可以搜集各U与自然风光相关的图片,从中提取色彩q用到设计中Q这些几q完的搭配呈现出来的和谐美感能瞬间打动人心。天气应用Marline是一个很好的例子Q它的界面背景渐变就参考大自然的变化,随着不同旉D呈现出清晨、日出、正午、日落、深夜、雨天等渐变Ԍ打开应用卛_起了用户的快乐情l?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/010ab55fcd605d11013ee04d1ddc50.png" alt=""></p> <p> </p> <p> </p> <p><strong>4.1.9 UX颜色与品牌相匚w</strong></p> <p>品牌价值在创徏调色板中发挥关键作用Q但是它们不是唯一重要的因素,行业规范也是关键。用与品牌主要竞争产品几乎相同的配色方案不׃U好Ҏ(gu)。配色在品牌视觉中所发挥的作用是不言而喻的,但是Q色彩本w的内涵和情l特质ƈ不是全部。比如一个行业当中,很多产品都用了蓝色Q那么你的品l用蓝Ԍ可以让用h快「识别出」你所属的领域Q但是本w也存在让hh的风险。如果你惌在视觉上脱颖而出Q可以试着使用不同的色彩?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01f71a5fcd606911013fdcc760d41a.png" alt=""></p> <p> </p> <p>△中国区或美国区Q红色和蓝色都是最行的颜艌Ӏ?/p> <p> </p> <p>在进行品牌设计的时候,选择配色的第一步,始终是了解各U颜色或者色相的气质和情感属性。然后,在具体设计的时候,再进一步根据品牌的气质和需求,再在色相的基上调整明暗和饱和度。也可以打破常规创造出与众不同的配色方案?/p> <p> </p> <p><strong>4.1.10从强调色入手</strong></p> <p>惌让配色方案更加突出,在设计中d色可能是最Ҏ(gu)入手的地斏VD个例子,一个律师咨询的App可能会用传l的蓝色作ؓ基础配色Q但是,如果能够加入柠檬l作为强调色Q会昑־独特很多?/p> <p> </p> <p><strong>4.1.11h色对比搭?/strong></p> <p>hҎ(gu)色是自然q的规律,可以在设计中大量使用Q这L(fng)配色会作品非常的出彩,同时不显单调Q让用户感觉舒服q_。而且q种搭配Ҏ(gu)基本没有啥缺点,使用在设计中Q技巧性比较多Q对设计的细L受要求比较高Q需要多l习(fn)?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01d0f15fcd608011013ee04d0a7991.png" alt=""></p> <p> </p> <p> </p> <p><strong>4.1.12黑白色搭配不q时</strong></p> <p>黑色是所有中性色中最L(fng)Q而白色是最常用的背景顏艌Ӏ黑色是一个很好的选择Q有U高端和永恒的感觉,而白色可以带l用戶自由,宽敞和透氣的感觉。如上所qͼ黑色和白色也是最大的比Ԍ如果合理的用黑色配合白Ԍ會营造出一U优雅的氛圍?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01a3995fcd608811013fdcc73f905b.png" alt=""></p> <p> </p> <p><strong> </strong></p> <p><strong>4.1.12 Z互色?/strong></p> <p><strong>交互色彩在执行过E中必须清晰且在界面中保持一致?/strong>号召性用语必ȝ对于背景h_的对比度Qƈ且相对于其他lg必须h_的视觉权重,以便用户可以L识别它们。Nike健n应用中,「开始」按钮以高饱和度的柠檬绿作ؓ主色Q从背景中脱引而出?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/0103cf5fcd609c11013fdcc7eb6454.png" alt=""></p> <p> </p> <p>但是Q交互色彩ƈ不L以最具饱和度或最亮ؓ特征Q而是通过色调、Ş状、大或Ҏ(gu)度,从屏q上脱颖而出。因此,交互色彩的有效性将Z用户识别交互区域和执行Q务的速度来衡量。同Ӟơ要功能权重要更轻,q在视觉上更接近信息元素。如上图Nike Training界面中,“讄”?ldquo;声音”按钮只用单的白色Q减dL钮的q扰Q也避免了页面中出现多个Z互按钮?/p> <p> </p> <p><strong>4.1.13 保证良好的可L?/strong></p> <p>可读性是M设计中的重要因素。你的颜色应该清晰易读,其是在处理文字时。因此对比度对视觉效果对影响非常关键,Ҏ(gu)度过,׃使得界面出现灰蒙蒙对效果。清晰的Ҏ(gu)度,一般会采用色彩的两极,黑纸白字或白UR字。而在彩色背景上要让内Ҏ(gu)晰可见,需要搭配纯白或高明度的文字Q避免灰色文字。也要注意避免彩色背景上搭配互补色和明度接近的文字,因ؓq两U搭配会产生一U?ldquo;震颤效应”Q发出光晕的视觉效果?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01f4175fcd60aa11013fdcc7222c63.png" alt=""></p> <p> </p> <p> </p> <p><strong>4.1.14 UI中的阴媄</strong></p> <p>没有完全U黑的阴影,阴媄的颜色是会受到物体本w固有色的媄响,一定要避免使用U黑Ԍ#000000Q,使用不太q灰色Q效果会更好。对于有颜色的元素,好的做法是ؓ阴媄讑֮与元素相同的颜色Qƈ使其更暗一些?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/010b2a5fcd60c811013fdcc7dbfb5c.png" alt=""></p> <p> </p> <p>如果是有颜色的元素,q且它处在黑暗的背景下,一般情况下Q是不徏议用阴q。但是如果你一定要用,把阴影透明度调到小?0%及以下,q且颜色跟随主色调来。比如按钮ؓl色Q则可以为按钮设定一个更ql色阴媄Qƈ加上于10%的透明度数倹{如下图Q左侧的按钮阴媄很自Ӟ右侧的则有一层模p发光的效果Q显得不够漂亮?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/0187895fcd60d811013fdcc7333c9c.png" alt=""></p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01bbea5fcd60e611013ee04d389298.png" alt=""></p> <p> </p> <p><strong>Z么「超链接文字」要用蓝Ԍ</strong></p> <p>单说Q因为在最早期的网站页面中Q蓝色能呈现最高的Ҏ(gu)度?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01be2b5fcd60f111013ee04d64d9aa.png" alt=""></p> <p> </p> <p><strong>Tim Berners-Lee——web 的主要开创者,被认为是最早用蓝色链接的h?/strong></p> <p>一个很早期?web 览?MosaicQ用的是q色背景和黑色文字。那时候,能用的非黑色、最q文字颜色Q就是蓝艌Ӏ所以,让超链接文字H出昄Q同时保证可L,选定了蓝艌Ӏ此后超链接文字都用蓝色的传l沿用至今?/p> <p> </p> <p><strong>4.2 app设计中的色彩搭配</strong></p> <p>App的色彩搭配能直观、快速的反馈到用L(fng)大脑中Ş成记忆思维。好的色彩搭配可以加q户对产品的印象;明确界面的视觉层ơ,让用户分清主ơ信息;同时q能l用戯心?zhn)目的视觉享受。那么,在UI设计时该如何q行色彩搭配呢?我们可以从App中都包含了那些色彩开始,通常一个App中包含了主色、辅助色、点~艌Ӏ背景色q?c,下面׃微信MZq行详细的讲解(个h角度Q?/p> <p> </p> <p><strong>4.2.1 主色</strong></p> <p>主色是指在配色中处于dC的色彩,l用L(fng)W一眼印象,通常是品的品牌艌Ӏ在App设计中,主色一般占有色相色彩的60%的比例。这里指的是60%的界面都使用到的主色比例Q而不是用面U(因ؓ通常一个界面中使用面积最大的是背景色Q。还有就是背景色多ؓ灰色或白色Q它们都属于无色相色彩,因此不涉及到配色q程中。我们看到微信读书的W一印象Q就可以判断它的主色Ԍq也是它的品牌色。在标签栏、按钮、图标、注册登陆全都用了q种U净的主Ԍ使界面看上去非常和谐一致?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/013e535fcd610711013ee04dddc913.png" alt=""></p> <p> </p> <p> </p> <p><strong>4.2.2 辅助?/strong></p> <p>辅助色与主色相辅相成Q辅助色的功能是帮助主色建立更完整的形象Q界面丰富_ֽhQ避免画面过于单一。通常Q主色的邻近艌Ӏ互补色、分散互补色和三角对立色都可以成ZU的辅助色Q但注意辅助色不宜过多,否则׃使界面看上去花哨分散了主题。根?:3:1原则Q辅助色可以占有色相色彩?0%或更ؓ宜?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/0166d45fcd611011013ee04d04c1a3.png" alt=""></p> <p> </p> <p>在微信读书中Q绿艌Ӏ橙艌Ӏ梅U、蓝紫色是除了主色以外用最多的颜色Q它们都是辅助色Q主要用于功能图标和栏目分类上。虽然辅助色看v来有点多Q但其实都是从主色的邻近色和Ҏ(gu)Ԍ及其邻近Ԍ中提取出来的搭配Q而且只用在页面中很少的地方,q种搭配技巧既可以丰富色彩的搭配,传递出q轻z跃的品气质,又保证了整体搭配的和谐统一?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/018bdc5fcd611a11013ee04d003b2f.png" alt=""></p> <p> </p> <p> </p> <p><strong>4.2.3 点缀?/strong></p> <p>点缀色是除了主色和辅助色以外的另一U色彩,通常体现在细节上。其作用是,当页面中主色和辅助色不能满关键信息的提C时Q就需要点~色来吸引用户眼球Q还有就是利用点~色来q画面的冷暖色调。点~色通常都是分散的,使用面积,颜色非常昄Q能与主色Ş成强烈的Ҏ(gu)。一般点~色是主色的互补色。在微信M中,使用了香槟金、梅U和U色作ؓ点缀艌Ӏ香槟金用在文章分n按钮上,梅红色用在点赞图标上Q强调其Ҏ(gu)性,U色用在通知及退出登录提醒上Q用于警C?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01eec25fcd612411013ee04d22de6c.png" alt=""></p> <p> </p> <p> </p> <p>来康庯三种点缀色与主色之间存在什么样的关p,在色相(HQ上Q?U点~色ؓ邻近Ԍ与主色ؓ互补Ԍ在明度(BQ上Q?U点~色均为高明度色彩Qv到强提醒的作用。这U强Ҏ(gu)的互补色的点~色可以快速引L(fng)h意力?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01c0705fcd613e11013fdcc78b8727.png" alt=""></p> <p> </p> <p> </p> <p><strong>4.2.4 背景?/strong></p> <p>背景色就比较好理解了Q通常Z衬托内容Q大多数App都是用浅灰色作ؓ背景Ԍ以白色作景色的对比色Q来区分视觉层次。徏议是可以Ҏ(gu)前景色来提取背景Ԍ其调亮或变暗,q样可以让界面色调更加统一。在微信M中背景色是偏蓝色调的灰Ԍ而不是纯灰色Q背景对比色是在白色里加入了蓝色色相Q而不是纯白色Q整体对比较柔和Q给人清爽通透的感觉?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/010da25fcd614e11013fdcc7b9677a.png" alt=""></p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01be905fcd615611013fdcc79241ef.png" alt=""></p> <p> </p> <p> 支付?Alipay Design 团队提出q一个配色原则:</p> <blockquote>以同色系配色Z|多色搭配?/blockquote> <blockquote>同色pMؓl一的色相,使用中可以加深品牌色的感知,可以让界面更有层ơ,同时可以让界面保持色彩上的一致性;׃业务的多样化Q我们需要多色搭配ؓ辅;多色的辅助颜Ԍ也可UC为功能色Q可讑֮不同的Q务属性和情感表达Q再搭配中性色黑白灎ͼ赋予更多的变化和层次。两U配色通过L、用比例,可灵z运用在业务的各个场景中Q具有非常好的g展性?/blockquote> <p><strong> </strong></p> <p><strong>4.3 qh的渐变色</strong></p> <p>不同于单一色彩Q渐变色不属于Q何色彩,它营造出千变万化的视觉效果,却又不会增加视觉负担。相较于单一的色彩,渐变色的复合性质让它在界面设计中h更强的视觉冲dQ有助于快速抢占视Uѝ如今,q种独一无二的色彩正逐渐成ؓ一U潮,I其原因是目前大量的扁^风格造成UI设计的严重同质化Qh们需要追求更加个性的视觉语言来满x益增长的设计需求。下面我们来了解几种常见的渐变的使用技巧?/p> <p> </p> <p><strong>4.3.1 色相、饱和度、明度的渐变</strong></p> <p>色相QHQ渐变是指由一U色彩向另一U色彩的q渡Q这U渐变因跨度大生的视觉效果非常明显Q饱和度QSQ渐变是指同一U色彩不同纯度的q度Q其产生的视觉效果比较和谐单调;明度QBQ渐变是同一U色彩不同明暗的q度Q这U渐变的视觉效果lh一U沉静的氛围?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/0138a75fcd616c11013ee04d83a4a7.png" alt=""></p> <p> </p> <p> </p> <p><strong>4.3.2 渐变的表现Ş?/strong></p> <p>在界面设计中l常看多各种各样的渐变表现方式,使用最多的有以下几U:</p> <p><strong>水^渐变</strong></p> <p>q个很好理解Q是指角度ؓ0的线性渐变,是最行的渐变Ş式。界面设计中多用在导航栏、进度条、按钮等元素上,能让画面变得_致而通透。例如京东用橙U渐变的设计语言贯穿整个AppQ从应用图标到导航栏、按钮、标{,全部都运用了q种q色到色的过渡。仔l观察发现在很多标{上都用了水^渐变设计手法Q产品看v来更q轻化?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/0100a65fcd617e11013fdcc78445ec.png" alt=""></p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/014dbf5fcd618611013fdcc784ca33.png" alt=""></p> <p> </p> <p>在水qx变中Q通常把轻Q亮Q的色彩攑֜左边Q重Q暗Q的色彩攑֜双Q这L(fng)左向右的方向感刚好与人的览?fn)惯保持一致。而反q来׃与h的浏览视U相(zhn),应避免?/p> <p> </p> <p><strong>垂直渐变</strong></p> <p>卌度ؓ90°的线性渐变,它通常被用在正方Ş或竖条Ş的元素上Q如注册登陆,个h中心头部{。垂直渐变中上下两种色彩的深变化会产生截然不同的视觉效果,上浅下深会让lh一U凸L(fng)立体感,而上׃会lh一U凹陷下ȝI间感。例如「纪늢谗的背景是采用了单色相和多色相的垂直渐变作ؓ游戏背景Q在让整个画面丰富的同时又不会太抢夺M的色彩,使画面显得清新透气而不沉闷?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/0102305fcd619c11013ee04dcc0121.png" alt=""></p> <p> </p> <p> </p> <p><strong>角度渐变</strong></p> <p>角度渐变通常有对角渐变和多角度渐变。有角度的渐变相比水q_垂直渐变Q它的用场景更q,如图标背ѝ启动页、注册登录页、标{。想让界面更加绚丽、动感和qhQ这时候我们可以考虑多组渐变搭配使用?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01771b5fcd61ab11013fdcc7eb6505.png" alt=""></p> <p> </p> <p> </p> <p><strong>色块渐变</strong></p> <p>渐变的颜色不只可以运用在一个色块上Q还可以q用在一l色块上。设计师q用一l近似性色彩,每个菜单项清晰区分开Q让界面q在一个频率上Q这L(fng)画面更有节奏感和舒适性。不同于qx的渐变,色块渐变不再是单U的背景装饰Q在某些地方q具有一定的功能性,比如使用不同的色块来分割的列表样式。Clear Todos是一ƾ日怓Q务清单的APPQ它抛弃了传l的列表样式Q用了一pd色块来作为列表的分割Q非常漂亮和_致?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01b4795fcd61b511013ee04d707118.png" alt=""></p> <p> </p> <p> </p> <p><strong>径向渐变</strong></p> <p>是指色彩以圆心向四周扩散的渐变,是一U模拟光源照的视觉效果Q因此光源是整个画面的视觉焦点,关键元素放在光源中心就会成Z角。通常被运用到大背景上Q如启动c引导页{。Solar天气应用的背景就是径向渐变,光源扩散的效果营造出一U梦q般的美感?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/016e445fcd61c311013fdcc71c3701.png" alt=""></p> <p> </p> <p> </p> <p><strong>4.3.3 和谐的渐变色</strong></p> <p>渐变色是׃个色彩走向另一个色彩的q程Q有着qh的视觉效果。如果你仔细观察两种色彩的过渡关p,׃发现不是每次都会得到满意的效果,例如U绿渐变很p糕Q因为它们两者是互ؓ对立的色彩,但是如果加入黄色的过渡色׃好很多。原因是当两U色彩之间超q?0度就会导致其渐变色看上去不太和谐自然Q只有控制在90度之内才会生美妙的变化。如何改善超q?0度的两种色相的渐变呢Q这时候可以在两色之间加入q渡色进行调和。例如当从黄色到蓝色渐变Ӟ可以加入色作渡才能呈现完的视觉效果?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/018fc05fcd61d111013ee04d6feac4.png" alt=""></p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01dcc05fcd61d911013fdcc7893ddf.png" alt=""></p> <p> </p> <p>在搭配渐变色Ӟ量只改变其色相QHQ、饱和度QSQ、明度(BQ中的一,q样才能创造出和谐的渐变色Ҏ(gu)?/p> <p> </p> <p> </p> <p> </p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/013c905fcd620711013fdcc714ac77.png" alt=""></p> <p>调色板帮助我们在设计目中徏立色彩规范、提高工作效率。通过上文对色彩基知识的学?fn),接下来ؓ大家介绍几种单易用的创徏调色板的技巧,以及Materia design配色Ҏ(gu)和配色网站推荐?/p> <p> </p> <p><strong>5.1 从设计作品收集色?/strong></p> <p>打开dribbbleQ每一q作品预览页左下角都有一份自动生成的配色板,很多同学可能不知道这个配色文件是可以下蝲的。将调色板保存到本地Qؓ自己在创作时提供灉|。在ps里的操作步骤是:点击“H口—色板”Q然后在色板的属性面板右上角打开“导入色板”Q蝲入刚下蝲的色彩文件即可?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01c6be5fcd622211013fdcc7d347bb.png" alt=""></p> <p> </p> <p>它也有颜色搜索工P输入或选择颜色值即可搜索相关配色的设计作品?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01be555fcd623011013ee04dfa50d3.png" alt=""></p> <p> </p> <p> </p> <p><strong>5.2 从图片取?/strong></p> <p>q种Ҏ(gu)也很常用Q不需要Q何插Ӟ丢一张图片到PsQ然后将囄「马赛克」处理下可得到一l配艌Ӏ例如,我们需要一l同色系的绿Ԍ在网上(unsplash?00px{专业图片网站)找一张树(wi)叶的囄Q接着图片在Ps中打开Q进?ldquo;滤镜—像素?mdash;马赛?rdquo;Q在打开的窗口里调节单元格大即可?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/0102915fcd623f11013fdcc7c23486.png" alt=""></p> <p> </p> <p>同时Q徏议^时多L集好看的摄媄囄和优U的配色方案,看的多了q道什么是好的什么是Low的配ԌҎ(gu)升审也有很大帮助?/p> <p> </p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/019ec35fcd626211013ee04de49f2c.png" alt=""></p> <p> </p> <p>△pinterestL</p> <p><strong> </strong></p> <p><strong>5.3 自定义色块叠?/strong></p> <p>该方法稍微复杂一点,CZ步骤如下Q第一步绘制一个正方Ş做底板,填充一个颜?5354F0Q第二步分别在正方Ş的上和下1/3处叠?0%的白色和黑色Q第三步分别在正方Ş中和?/3处叠?0%?0%的U色#DF56FAQ最后改变U色囑ֱ的؜合模式ؓ叠加卛_得到一l蓝紫色色调的调色板?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01571d5fcd626c11013fdcc71e886d.png" alt=""></p> <p> </p> <p> </p> <p><strong>5.4 色彩pȝ</strong></p> <p><strong>5.4.1 Materia design调色?/strong></p> <p>Materia design从生zd景中提炼?9个充满活力的色彩Q旨在和谐地协同工作Q可用于开发品牌调色板。Materia design提供了一整套调色板,从原色开始,延出其他许多色彩,q些色彩和谐相处Q可用于产品设计的品牌色。基色的饱和度是500QGoogle以此作ؓ产品应用的主色调Q可以再选择一U辅助色Qƈ在主色的基础上进行饱和度Q明度变化,构成一套配色方案?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/018a475fcd627f11013fdcc713dff9.png" alt=""></p> <p> </p> <p>如果上面的色板不能满你的需求,你可以选择一个主ԌMateria design调色板生成工具会Z生成完整的色ѝ?/p> <p> </p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01e3795fcd629311013fdcc7b246f6.gif" alt=""></p> <p> </p> <p> </p> <p><strong>5.4.2主色和强调色</strong></p> <p>在色彩选取Ӟ需要先明确品牌色在界面中的使用场景及范围。在基础色板中选择主色Q徏议选择饱和度ؓ500的基色作ZԌҎ(gu)设计需要在主色的基上增??U不同饱和度、明度的色彩建立层次感,再选择一U强调色H出重要内容或操作,例如FAB的背景色?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/0185965fcd629c11013fdcc7b973b5.png" alt=""></p> <p> </p> <p> </p> <p><strong>5.4.3 ?背景上的文?/strong></p> <p>Materia design通过文本的不透明度徏立在不同背景上的深浅Ҏ(gu)Q对于浅色背景上黑色文字Q主文字不透明?7%Q次要文字不透明?0%Q禁用文字不透明?8%Q而黑色背景上的白色文字正好相反;彩色背景上的白色文字不透明?00%Q分割线不透明?2%。Ant Design也定义了一套用于界面文字、背景、分割线的中性色Q在落地的时候同样也是按照透明度的方式实现的?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01d2f45fcd62aa11013fdcc780c472.png" alt=""></p> <p> </p> <p> </p> <p><strong>5.4.4 背景</strong></p> <p>Z提高应用之间的一致性和阅读的可L,背景色根据设计需要选择选择U白色或饱和度依ơؓ50?00?00的灰艌Ӏ?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01ee665fcd62b711013ee04d9ac6f4.png" alt=""></p> <p> </p> <p> </p> <p><strong>5.5 配色工具推荐</strong></p> <p>颜色是一个很难掌握的概念-因ؓ有无限多U可能的颜色l合Q对于很多设计师来说q是一件蛮困难的事Qؓ了让设计配色变得Ҏ(gu)些,下面推荐几个常用的配色网站,希望能帮助大家在日常工作中节省更多的旉?/p> <p> </p> <p><strong>Adobe Color</strong></p> <p>Adobe Color是一个基于网l的应用E序和创意社区,提供免费的色彩主题,q且?Adobe 相应的Y件中也提供了扩展E序Q比如我们常用的 Photoshop ?Illustrator?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01c5b85fcd62ce11013ee04d57733c.png" alt=""></p> <p> </p> <p>?a target="_blank" rel="noopener">https://color.adobe.com/</a></p> <p>Adobe Color 通过拖拽色轮或输入自定义色|可以创造出Z怼、互补、三原色、正方Ş{不同色彩规则的配色Ҏ(gu)。除此之外,q支?CMYK、RGB、HSV 多种色彩模式的配色调整。用法很单,点击颜色块上的小三角定基础Ԍ׃自动生成5个基于你所选色彩规则的配色Ҏ(gu)Q拖动下方的颜色条时相应的也会改变配色方案。如果没有灵感可以通过剙Dq入“探烦”,q里为我们提供了很多提取好的颜色和图片,有的是摄׃品,有的是设计作品,上方的轮播图提供的一些格外的内容Q比如潘通流行色、Adobe C֌和手机端?APP {等Q非常的实用?/p> <p> </p> <p><strong>Eva Design System</strong></p> <p>Eva Design System 是一个基于深度学?fn)算法的配色|站。适用于给我们的品或品牌生成一个系l的配色Ҏ(gu)。右上角可以切换色模式和深色模式的Ҏ(gu)?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/011f5e5fcd62e111013fdcc7a02642.png" alt=""></p> <p> </p> <p>?a target="_blank" rel="noopener">https://colors.eva.design/</a></p> <p> </p> <p><strong>Colorhunt</strong></p> <p>Color Hunt是由设计师Gal Shir创徏的开放调色板集合Q每天更C富的配色Ҏ(gu)。颜色卡片下方可以看到更新的旉和喜Ƣh数。鼠标?zhn)在M色块上显C颜色|点击颜色卡进入详情页可下载和分nQ惊喜的是还可以d到chrome览器,方便随时随地使用?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01e76e5fcd62f011013fdcc7381f34.png" alt=""></p> <p> </p> <p>?a target="_blank" rel="noopener">https://colorhunt.co/</a></p> <p><strong> </strong></p> <p><strong>Grabient</strong></p> <p>Grabient 一个非常漂亮且实用的渐变配色网站,支持 CSS 样式代码复制?60度渐变旋转、自由增加或删除渐变颜色{功能。设计师可以在色块下方自由添加和调整渐变的色pR以及线性渐变方向?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/0109c85fcd630011013fdcc73f318a.png" alt=""></p> <p> </p> <p>?a target="_blank" rel="noopener">https://www.grabient.com/</a></p> <p> </p> <p>当然Q以上这些配色工具只是ؓ我们提供方便的,而不是主导我们的Q所以在使用配色工具的时候最好是要有一定的理论基础作ؓ支撑Q让你的配色有理有据Q切忌生搬硬套?/p> <p> </p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/0105125fcd630f11013ee04d844a56.png" alt=""></p> <p> </p> <p>对于新手设计师来_颜色少容易把控画面。色彩层U越_Q就容易达到整体色彩^衡,掌握好色彩的功能划分必然会让你的配色q程保持思\清晰从而提高效率?/p> <p> </p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/019de35fcd631b11013fdcc7753cdf.png" alt=""></p> <p> </p> <p>同时Q不是 2C q是 2BQ很多大公司都构Z自己的设计系l。如果你惛_?fn)别人是如何q行配色布局的,最快的方式是研究他们的设计源文g?/p> <p> </p> <p><strong>5.6 关于色彩I间配置(附加内容)</strong></p> <p>设计软g使用 sRGB 作ؓ色彩I间的默认配|,而不要采用未理Q?Sketch 中默认是未管理)Q若团队协作h前保持色彩空间配|的l一性。如果有需要针对广色域色彩I间做项目,可以单独讄该项目文的色彩I间?Display P3 或?Adobe RGB?/p> <p> </p> <p><strong>Macpȝ色彩I间配置</strong></p> <p>所?macOS 用户都在pȝ偏好讑֮的显C器颜色讑֮当中换用 <em>sRGB IEC61966-2.1 </em>q个校色Ҏ(gu)Q可以极大改善系l显C效能。如果有外接昄器,也徏议用外接的默认选项Q默认选项一般可以发挥出该显C器的最大色彩性能?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01d2755fcd633811013fdcc7391297.png" alt=""></p> <p> </p> <p> </p> <p><strong>Sketch色彩I间配置</strong></p> <p>Sketch默认颜色配置是Unmanaged「非托管」, 我们可以在「偏好设|」中?Sketch 指定默认的色彩空间配|,如此一来每ơ新计文将会默认采用我们的讄作ؓ默认的色彩空_不用每次新徏文都单独设|一ơ?/p> <p>讄Ҏ(gu)QSketch → 偏好讄(Preferences) → 通用(General) → 颜色描述文g(Color Profile)Q修改下拉框选择器的内容?em> sRGB IEC61996-2.1</em>。(其他设计软g讄Ҏ(gu)cMQ?/p> <p> </p> <p><img title="" src="https://img.zcool.cn/community/01e06e5fcd634311013fdcc743e342.png" alt=""></p> <p> </p> <p>如果要更改已有的文档为sRGB色彩配置Q可以通过文g——更改颜色配置Q在弹出的对话窗里对文gq行色彩I间的更改即可?/p> <p> </p> <p><strong>写在最?/strong></p> <p>其实无论是色彩理是配色方法,最本质的东西就那些Q更多的q是需要设计师在日后的工作中不断的摸烦和积累。这文章全部写下来耗费了不时_声BBQ其实每都是)Q抱歉内容确实有点多Q但其实已经是收着点写了。就像大?wi)一P有很多分枝不断生长,需要了解很多细分出来的深度知识。这也是写这cL章的乐趣Q通过不断的查阅资料,把过d多模p的概念摸清楚了。果然学透一个知识点的最好方式就是把它讲出来才能真正己所有。关于色彩的知识先分享到q里Q希望对大家有所帮助Q文中有不严谨或错误的地方,Ƣ迎大家指正Q一起学?fn)成ѝ?/p> <p> </p> <p>参考文献:</p> <p><a target="_blank" rel="noopener">q些更细致的色彩知识Q能让你的设计体验更?/a></p> <p><a target="_blank" rel="noopener">色生心中Qh性化的HSL模型</a></p> <p><a target="_blank" rel="noopener">面向色盲人士友好的设计解x?/a></p> <p>《高UUI设计师之路?/p> <p><a target="_blank" rel="noopener">Material Design颜色pȝ</a></p> <p> </p> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap"> <div id="8iomsme0qe" class="photoInformationContent"> <div id="8iomsme0qe" class="sc-1gq6zpr-5 kXfcdz pictureBox"> <div id="8iomsme0qe" class="imgbox"> </div> </div> </div> </section> <p> </p> <div>作者:<span id="8iomsme0qe" class="sc-jqn0up-3 gbJRfY" title="印迹_">印迹_</span><br>链接Qhttps://www.zcool.com.cn/article/ZMTIwMjM5Ng==.html<br>来源Q站?br>著作权归作者所有。商业{载请联系作者获得授权,非商业{载请注明出处?/div> <p> </p> <p> </p> <div><a href="/blog/content/uploadfile/202411/8ad61732265770.png" target="_blank" rel="noopener"> <p><img src="/blog/content/uploadfile/202411/8ad61732265770.png" alt="" width="1200" height="155"></p> <p>C妙微(www.chinatradebeam.com )是一家专注而深入的界面设计公司Qؓ期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、^面设计,以及相关的Y件开发服务,咨询?sh)话Q?1063334945。我们徏立了一个微信群Q每天分享国内外优秀的设计,有兴请加入一起学?fn)成长,咨询及进请加蓝助微信ben_lanlan</p> </a></div> <div> </div> <p> </p> </div> </section> </section> </section> </div>]]></description> <pubDate>Wed, 12 Mar 2025 10:20:35 +0000</pubDate> <dc:creator>资深UI设计?/dc:creator> <guid>http://www.chinatradebeam.com/blog/post-13062.html</guid> </item> <item> <title>极简M|UI设计 http://www.chinatradebeam.com/blog/post-13061.html

 

 
 
 
 
极简M|UI设计
 
 
极简M|UI设计
 
 
极简M|UI设计
 
 
极简M|UI设计
 
 
极简M|UI设计
 
 
极简M|UI设计
 
作者:

C妙微(www.chinatradebeam.com )是一家专注而深入的界面设计公司Qؓ期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、^面设计,以及相关的Y件开发服务,咨询?sh)话Q?1063334945。我们徏立了一个微信群Q每天分享国内外优秀的设计,有兴请加入一起学?fn)成长,咨询及进请加蓝助微信ben_lanlan

 
]]>
Tue, 11 Mar 2025 10:37:24 +0000 资深UI设计?/dc:creator> http://www.chinatradebeam.com/blog/post-13061.html
ȷavԴ| þ99Ʒþþþ| Ļ| ҹ³³³ҹҹۺƵŷ| þþƷһ| þ޾Ʒһ| ߤŮֲ| 2018| þùɫavѹۿ| chineseavvideoxxxxʵ | þþƷavDz18| þþƷavӰ| ޾ƷĻ| Ʒһ| þþƷ| AVվ| ywҹƷƵ| ϰ庬Ļٿҧ߳Ƶ| ŷղþ99| avѵƬ| þþþŮaaƬ| ŷһŵ˸| Сѧվ | ҹƷþþþþþ | ޾Ʒþҹһ | лgayƬվwww| ʧ| һҹ h| ٶͷǿ| ѺӰ| ߹ۿ| ŷպ޾Ʒһ| ޾Ʒþþþ| ŷִִëƬˮ| ӲִֽȥˬAƬ| 츾׾ƷƵ| պaƬaaƬ| ˾Ʒþþþ| һһˬƵ| 峤ͦĻɶ| ٶͷǿ|