所有分类
  • 所有分类
  • 未分类
UI色彩那些事(上)

UI色彩那些事(上)

学画的时候老师常说一幅作品的组成需要形体与色彩,同样的产品页面也一样,整体的视觉风格由框架布局、色彩和文字构成。人们对色彩的敏感程度高于形状,色彩能在第一时间吸引人们注意力,也是最容易被人们记住的元素,在UI设计中也非常...

学画的时候老师常说一幅作品的组成需要形体与色彩,同样的产品页面也一样,整体的视觉风格由框架布局、色彩和文字构成。人们对色彩的敏感程度高于形状,色彩能在第一时间吸引人们注意力,也是最容易被人们记住的元素,在UI设计中也非常重要,更是逐渐形成了一些色彩的使用规范、技巧与惯用颜色。

有页面显得生硬、细节不到位,很多时候可能是颜色的问题,比如分割线颜色如果过重,就会对页面内容产生干扰,影响阅读。


那么下面我们就从品牌色、中性色、功能色、辅助色这四个方面来分析一下,UI设计中的色彩使用吧。



品牌色


品牌色是表现公司文化、产品特色,体现品牌性的重要视觉元素,是人们脑海中的强烈记忆点,比如提到支付宝,会想到蓝色,提到网易云音乐,则会想到红色。


品牌色的使用让产品保持自身的品牌性与统一性,于竞品也是一种区分,作为产品的主题色,被广泛运用。在按钮、顶部导航、图标、缺省图、开屏页、背景图等中都需要使用到。


·按钮

按钮在页面中需要用户点击发生交互行为,所以通常也都使用品牌色以引起用户注意。



·背景

顶部导航、标题栏、个人中心等页面的页头,也常使用品牌色。


值得注意的是,现在越来越多的产品,选择“素白”的轻量化设计,让用户更加关注内容本身,逐渐减少了大面积的主题色使用。如在新版淘宝中,就取消了页面头部标志性的橙色,改为使用白色。


同样的哔哩哔哩减少了页面中对品牌色的使用,不过为了照顾用户的视觉习惯,也给了用户自己选择的权利,可以继续选择使用品牌色的模式。



·图标

图标也是品牌色的主要使用区,尤其是底部tab图标,大多数产品的选中状态都为产品品牌色。


金刚区图标则有两种趋势,多色或单色,各有其优点。多色让页面更加丰富,让每个图标的内容更容易被识别,特点更加鲜明,是电商类产品普遍使用的方案。


而单色则让页面更加统一,排除过多视觉干扰,通过图形形状来区分内容。



·缺省图

缺省图在产品为空状态或是发生错误时起到安抚用户情绪,美化和填充页面的作用,而品牌色的使用,让产品的整体视觉更加统一、成体系。



·开屏页

开屏页大面积的品牌色使用,是强化品牌视觉的重要窗口,容易留下深刻印象,用户打开产品的一瞬间,就能感受到颜色带来的熟悉感。当然开屏页也还有许多不同形式,在设计的时候,需要根据产品所处阶段,当前需求以选择适合的形式。具体可参考 开屏页设计,看这篇就够了




中性色 


品牌色是页面中代表产品特色、个性的部分,中性色则是通用的基础的部分,普通但却重要,也是设计中不能忽视的一环,主要用于背景、分割、文字等。


· 背景

页面使用中性色作为背景,让用户更专注于内容,提升使用和阅读体验。



· 分割

页面中的分割分为面性分割和线性分割,通过分割以明确内容模块之前的亲疏关系,让用户更容易理解页面页面层级,更好地浏览内容。

面性分割通常是与页面背景的结合,多用于模块与模块之间的分割,可以理解为在背景上放置不容内容模块,而模块之间的间距距离漏出的底层背景其实就是面性分割,所以面性分割的色值多与产品的背景色是保持一致的。


线性分割的分割感比面性分割的小,常用于模块中的内容分割,颜色选择应该尽量柔和,使用过深的颜色会使其成为页面中的“噪音”,导致阅读的舒适度下降,影响用户对信息的获取。



·文字

文字也是中性色的势力范围,大部分的内容性文字都使用中性色,根据其重要程度对应不同的色值,比如标题文字、主要内容、次要内容、失效文字等,由深至浅。


常用的色值如 #333333、#666666、#999999、#CCCCCC,深色模式下则相反。


PS:考虑到深色模式(Dark Mode)的适配,也可以直接使用一个固定色值,然后调整其透明度以区分层级。这样后期标注会更加方便,且文字与背景不容易出现相融的情况。如下图中不仅文字是调整透明度为层级区分,边框、分割线、背景等中性色,都可以通过透明度的调节来确定色值。




划重点 


· 品牌色是表现公司文化、产品特色,体现品牌性的重要视觉元素,常使用与按钮、背景、图标、缺省图、开屏页等。

· 为了让用户能更好的关注内容本身,“素白”的轻量化设计逐渐减少了大面积的主题色使用。不过照顾用户的视觉习惯,也可以给了用户自己选择的权利。

· 中性色可以直接使用一个固定色值,然后调整其透明度以区分层级。


参考引文

http://1t.click/aGbn《一篇吃透 Dark Mode ,搞定“暗黑/深色”适配》



海盐社Q3招新,回复数字【2】查看


本文来自:海盐社    作者:焱小玖

原文链接:http://www.uiya.cn/16294.html,转载请注明出处。

0
分享海报

评论0

没有账号? 注册  忘记密码?