《UI》界面设计如何配色

作者: 视觉笔记糕小糕 | 来源:发表于2018-03-16 11:15 被阅读903次

    1.界面使用品牌色,可强化品牌曝光度

    当下手机APP层出不穷,数不胜数;大家都熟知每家公司每个产品或品牌,想要树立认知度需提前设立自身品牌色,形成视觉印象,无论在APP,网站,Logo,VIS中保持色调一致更易彰显品牌特色和强化品牌的曝光度。

    多处突出品牌色

    2.界面使用基础辅助色  

    如灰白黑等,为简化设计,突出界面内容,达到有效的传播。

    注意:因颜色数量有限,大公司先入为主,如蓝色的支付宝,绿色的微信,红色的京东,橙色的淘宝等,故有时通过品牌色难以被想起,不如根据产品内容调性决策。与海报广告视觉设计不同,UI界面是需长久被使用,内容结构简单明了易于操作才是首要。

    黑白灰的基础色

    3.善于控制界面中的颜色数量

    注意:一个界面的颜色最好不超过3种,可选择同色系之间微弱调整,通过渐变邻近色选择;电商首页不同色彩的icon时,选择同一个色相内不同色系,保证视觉统一,尤其注意颜色视觉上是否和谐不跳跃,个别性突出化。

    多彩搭配

    4.不同状态下配色技巧

    界面是用于操作帮助用户完成任务,过程会牵涉各个状态按钮提示等。例如按钮的不可点击状态/可点击状态/点击中状态等,采用相同颜色的不同透明度作为区分。

    如红色是警示,绿色代表通过,保持和日常习惯一致的提示色彩减少用户误操作。

    5.界面中字体颜色的选择

    常规字体颜色多用#222222  #333333  #666666  #999999,根据界面内容主次层级设置不同字号大小颜色的差异性,让界面视觉上清晰整洁,不含含糊糊模棱两可。

    注意:一般界面设计大家多避免使用#000000的纯黑色,属于约定俗成的默契,但感性的设计更多是实际情况而定,例如最新版IOS11便使用纯黑色字体,所以本位所说大部分属于经验主义内容,仍需要我们打破常规进行创新。

    但实际工作中无法肆意妄为做界面,则需要在日常练习中不断尝试各种概念稿,改版界面,让想法无拘束放飞,在实际项目中加入的微创新,都是来源于日常的不断积累和思考。

    IOS11风格界面

    6.文字字体的排版

    文字字体常规大小为10,12,13,14,15,17(在375px1倍图情况下的尺寸)

    文字无论大小颜色区分,都是对文字信息层级的区分,保证界面内容的可读性,主题明确。但一界面不宜使用过多颜色大小的字体,在设计初始应设定标题,内容,导航,次级导航,提示字符等常规字体样式,才能使界面视觉更统一。

    很多设计师都会遇到设计中总是犹豫不定,为了1像素1间距纠结半天,结果看起来却无差别,花费时间界面却无提升?

    其实有些结论看似简单,似乎读了便会做得出惊艳界面,实际上手操作时发现,仍然不知如何选择,每页每个元素都纠结字号,颜色,间距的大小,导致大道理都懂却仍做不好的后果。

    UI界面在设计技法层简单易学,无非打字画框画线便可,个人感受做界面学会设定规范,整理组件,一个项目做完5页确认大概风格后,此时需要明确的设计各个元件的规范。例如:导航栏icon尺寸,功能性icon尺寸,文字标题,内容,标签,二级文字,边距等,设定形成组件,往后页面会减少无休止的纠结及混乱。

    sketch组件归类命名

    而界面真正难度在于思考整体布局入口,内容表达请否清晰,以及icon绘制(整齐统一的icon会主导性影响整个界面,这也是分辨设计能力高低所在),和界面空白页配图小插画的设计,icon和插画非一日功夫练成,最易体现界面细节精致度。所以在UI界面中我们要学分取舍,安置自己的精力,懂得轻重缓急减少不必要的纠结,把精力安排在真正需要技法的内容上。

    同时UI界面一定要学会使用插件和组件,例如sketch中的symbol,sketch measure,程序化批量处理重复繁琐的常规工作。

    我是糕小糕,正所谓:书宜杂读,业宜精钻;希望整理的对你有用。

     你知道吗,你的赞,会让我欣喜若狂

    相关文章

      网友评论

      本文标题:《UI》界面设计如何配色

      本文链接:https://www.haomeiwen.com/subject/osxlqftx.html