UI设计中配色设计攻略
不知道有没有小伙伴跟我一样在做页面配色时会很痛苦呢,很多时候都是凭感觉去配色。最近研究了一下配色方法,今天我就针对UI设计中配色设计攻略进行简单的说明,希望能帮助到一部分小伙伴。
有个有趣的研究成果 —— “七秒钟定律”:人们在挑选商品和服务时 ,只需要 7 秒钟就可以确定是否感兴趣,而在这短暂的 7 秒钟内,色彩的作用占到了 67%。
一个设计作品呈现在用户面前,最先进入眼帘的就是产品的视觉表现,而色彩在其中起到了很大的作用。那么具体到实际项目中该怎样配色呢 ?
1.色彩基础知识
相信大家都知道,UI 色彩使用的是 RGB 模式,但是拾色器主要的选色原理遵循的是 HSB 模式,也就是色相(H)、饱和度(S)、明度(B)。
一个正确的选色过程是先确定出色相(H),然后再在这个色相维度下选出饱和度(S)和明度(B)。
选取色相时就要用到色相环这个熟悉的朋友了,每种颜色都有自己的色彩情绪。
2.UI设计中的色彩选择
在众多的 UI 设计规范中,色彩一般分为:
主色:产品的核心色彩,品牌色
辅色:丰富页面视觉和传达效果的次要颜色
2.1 主色的选择
主色是一个产品的品牌色,比如像淘宝的橙色、美团的黄色等。
怎么确定一个产品的主色呢?可以从以下几点考虑:1、产品属性 2、行业属性 3、用户人群。
常见的APP主色应用:
1.绿色:主要集中在社交、学习教育、效率办公等领域。
如:微信、豆瓣、爱奇艺、QQ 音乐、网易云课堂、 BOSS 直聘、拉钩招聘。
为什么这些产品喜欢使用绿色呢?
绿色是中性色彩,没有明显的冷暖倾向,相对柔和,适合覆盖用户群体广泛的应用程序,且无论学习办公还是社交软件中的界面都需要长时间阅读,相比红黄等色彩,柔和的绿色更为适合。
2.蓝色:更多集中在工具类产品。
如:百度、QQ浏览器、酷狗音乐、知乎、贝壳找房、钉钉、支付宝
蓝色几乎成了工具类办公类产品的品牌色,为什么呢?
作为工具类产品(含办公类)产品,效率是他们所看重的,而蓝色是冷色系色彩能够让用户更加冷静,高效的完成任务。
3.红橙色:基本集中在电商类产品中。
如:淘宝、拼多多、京东
为什么电商类产品喜欢用暖色调呢?
暖色调给人温暖、活跃、欢快的气氛,符合用户购物时的状态,能够刺激用户的购买欲。
2.2 辅助色的选择
辅助色是丰富产品的次要颜色, 除了品牌传达外,具有更强的实用性。
选择辅助色时可以有以下2个方法:
1、依据色相环配色:两个颜色在色相环中角度越大,视觉差异越大,对比越强。所以在配色时,越需要被突出的颜色,可以在色环中离主色越远,越不需要被突出的颜色靠的越近。
如携程,UI设计中配色设计攻略https://www.aaa-cg.com.cn/ui/2583.html?gpfAPP主色是蓝色,去支付按钮是需要被重点突出的颜色,使用了主色的互补色橙色, 让我们一眼就能看见并产生强烈的点击欲望。
2、根据实际场景选择
比如通知、提醒、取消用红色;确认、同意用绿色、蓝色;收藏、打分、评价用橙黄色。都是已经在用户心智中建立了标准的用色类型,跟着常规方法来做,是没有其它思路的情况下最简单、最安全的辅助色选择方式。
3.UI设计页面中的色彩应用
3.1 主色占比大,色彩丰富度高
主色作为顶部标题栏或其它重要模块中的背景色进行大面积应用,
适合场景:需要加深用户对品牌的认知和辨识度,同时产品中包含大量功能点,需要用丰富的色彩来吸引用户关注,如 hello bike。
3.2 主色占比大,色彩丰富度低
这类配色主色占比大,尽量使用主题色,很少使用其他颜色。
适合场景:比较适用于图片内容丰富的题材中,或者是相对正式、品牌感强的产品,如拉勾、酷狗音乐。
3.3 主色占比小,色彩丰富度高
适用场景:需要突出自身带有的服务和功能,留出更多的空间在内容模块的展示上,如大众点评。
3.4 主色占比小,色彩丰富度低
适合场景:产品服务相对单一,需要用户更加注重内容本身,会尽力避免给予用户过多的干扰。如新浪微博。
总结
每次配色时,我们都需要对使用哪种配色方案做出规划,然后再动手执行。设计时做到有理有据,这样后面的工作就会轻松很多了。
UI设计中配色设计攻略相关推荐
- UI设计中首页设计指南
一款好的APP产品,其首页设计不仅能清晰展示产品核心功能.特点,有着较好的用户体验,还能展示公司的品牌形象,提升用户品牌认知度.今天我就针对UI设计中首页设计指南进行简单的说明. APP首页设计至关重 ...
- 纯干货 | UI界面中按钮设计可临摹编辑素材!
按钮是UI界面中最常见的交互元素之一,所以,如果要创建一个稳固的互动且积极有效的用户体验,需要设计好按钮元素.今天我们将搜集整理一些网页app上常见的按钮类型,了解这些不同的按钮设计方法. Viro媒 ...
- android弹窗设计,想印:UI设计中弹窗设计的五条基本原则
原标题:想印:UI设计中弹窗设计的五条基本原则 :当你将弹窗设计及使用得恰到好处时,它们就会是非常有效的用户界面元素.它们能帮助用户快速且便捷地达成目标.然而当错误使用时,弹窗却会困扰你的用户.学会如 ...
- UI设计中异常状态设计总结
当用户停留任何一个界面,进行任何一个操作都可能发生异常状态.如果接到每个需求都去制定一次异常状态,这样的后果可能会使得产品的不同模块.不同流程,异常状态都不一致.全局规范性被破坏,同时设计师的效率也降 ...
- UI设计中图标设计的有几大原则
本文由:"学设计上兔课网"原创,图片素材来自网络,仅供学习分享 UI设计中图标设计的有几大原则?一款简练的图标比起同样大小的文字符号,可以表达更多的意义,根据界面的需要,控制图标的 ...
- UI设计中标签设计总结
在UI设计中,标签的特征跟生活中的标签也很相似,用以标注内容分类或内容要点,方便用户快速定位自己需要的内容目标.标签还有满足用户的隐形需求的作用,当用户在犹豫是否要进行下一步操作的时候,标签在一定程度 ...
- UI设计中按钮设计指南
一天,领导丢过来个需求,要求改一下页面上的一个按钮.我想了想,按钮简单啊,很快就画好发过去了,没想到被领导打回来说不行! 我看着自己做的按钮,一脸茫然,这个按钮饱满诱人还亮晶晶的,怎么就不行了呢? 是 ...
- UI设计中连笔设计怎么做出高级感?|优漫动游
把文字与文字之间的部分笔画连接起来,是字体设计中很常用的一个技巧,使用得当可以增加字体的设计感.整体感和美感,在标题设计中最常用到.不过对于零基础学ui设计的新人来说,想要灵活的使用这个技巧还是需要有 ...
- Ui设计中LOGO设计指南
字体LOGO设计就是为了保持简单.纯字体外观是各行各业的流行选择,尤其是科技,媒体,时尚和食品.今天我就针对UI设计中LOGO设计指南进行简单的说明. 什么是字体标志?这是一种LOGO设计,仅包含以字 ...
最新文章
- R语言ggplot2可视化:自定义设置X轴上的时间间隔(中断、以年为单位),使用scale_x_date()自定义设置坐标轴间隔和标签、添加标题、副标题、题注信息
- JavaScript(一)——快速入门
- 云原生的五大趋势,K8s安卓化位列其一
- CSocket文件传输 分段传输的关键代码
- 云原生视频时代已开启,华为云准备好了
- python执行过程
- Python入门(一)-打开世界之Hello World
- MySql 免费数据库管理工具
- Redhat8: SCTP: type= 5 errno= <0x5e> Socket type not supported
- [FOI2020WC模拟]看上去很简单
- [摘录]第二部分 战略决策(1)
- python实现问卷网的自动填写详解
- 美图秀秀自动化测试工程师笔试面试
- c语言rewind函数作用,C 文件 rewind() 函数
- STM8驱动0.96寸OLED(12864液晶屏)
- 刺激战场测试fps软件,腾讯手游助手玩刺激战场怎样设置显示帧数?
- 跨数据中心场景下,kafka集群部署模式
- 常用的web服务器软件整理
- 小心!手机这样充电被1秒窃取信息!
- C/C++ 求逆序对数
热门文章
- [转]一个纸杯的测试用例
- buuctf——(SUCTF2019)SignIn
- mysql中根据部门名称生成部门简称(根据某一列的关键字在另一列生成特定值)
- GSM移动通信系统的A3A8加密算法源码
- Python 正则表达式里的单行s和多行m模式
- 推荐系统-模型(一):召回模型【协同过滤类: ItemCF/UserCF】【Embedding类】【Dssm/双塔/word2vec】【图类召回算法 (Deepwalk、EGES)】
- Visual Studio 2019 及更低版本中 Microsoft C++ 编译器对 C++ ISO 标准支持情况
- kafka record(s) for xxxxxx: 30043 ms has passed since last append异常
- CSS三大布局之“定位”的使用场景 要懂得学以致用
- FLUENT-UDF日记-15-DEFINE_PROFILE