北京WEB前端培训
在线咨询 电话咨询 校区地址

课程

环境

就业

试听

企业培训

扫码
关注

首页 / 

行业资讯

北京UI设计培训 界面中的颜色选择

时间:2016年08月17日 来源:火星人

关于理论

颜色的基本搭配理论网上已经有太多太多的文章,就不一一举例了,说几个常用的颜色搭配理论。

1.同色深浅/色调统一

北京web前端培训
北京web前端培训

同色深浅搭配或者色调统一配色适合一些需要配色整体统一却不希望像列表一样很无聊的界面。 不适合不同功能内容之间的颜色搭配,会没有重点。

北京web前端培训

同色系(通过改变同一色相的色调深浅,划分页面的层次和模块,表达不同的功能属性)

北京web前端培训

Twitter通过品牌色蓝色的深浅变化区分更多回复,链接,回复区域,功能操作按钮等。

2.同色调搭配

大意是指颜色的灰度值同属一个范围的不同色相搭配

北京web前端培训
北京web前端培训

同色调搭配适合有主导色,有一些特殊地方(如功能入口的图标等)利用同色调搭配配色会灵活出彩的界面。

新浪微博的界面中,主导色为品牌橙色,在发布界面中的功能入口icon的设计上,采用色调统一不同色相的颜色搭配,使得发布界面灵活出彩,增加了界面的趣味性,久而久之可以通过颜色的记忆去影响操作。

北京web前端培训

同色调的情况下,不同色相搭配起来依然会很和谐

Metro界面中,控制各个模块色调一致,利用不同色相划分不同模块,搭配起来和谐并且功能入口清晰。

3.互补色搭配

北京web前端培训
北京web前端培训

互补色在搭配的时候,先要让强烈的对比没有特别刺眼的感觉,可以尝试统一他们的色调09ui工作室涉及的这个脑子界面,很好的利用了互补色的强对比,给人很强的视觉冲击力,但是并不刺眼,就是因为颜色比例以及色调的调和。

4.邻近色搭配

北京web前端培训
北京web前端培训

Clear App不仅用颜色区分了列表信息,让界面新颖活力,并且利用色彩的深浅对to-do事件进行优先级的排序。

不适合不同功能内容之间的颜色搭配,会没有重点。产品设计中的颜色搭配有很多种方式同色系、同色调、一个主色多个辅色、对比色、类似色、中性色、三色对比、邻近色

总结

颜色控制少可以让画面很有设计感,控制好颜色对比的比例可以让画面平衡杆增强

控制好色彩搭配之间的协调度(包括面积、色相色条等),可以利用多色对比搭配出丰富饱满的感觉,模块之间的划分会更加的清晰、精致。

颜色的感受

这里主要是说颜色带给人的感觉,以及颜色的调和。尤其是在产品设计中,和谐配色很重要,除非你是在做运营类的需要短时间传播冲击到用户的设计。

思考演变过程

颜色带给人的心理感受Google已经为我们总结了很多,我来通过几个界面的思考演变过程讲述一下在实际设计过程中的思考。包括颜色,布局,交互体验上的一些推敲。

北京web前端培训

用颜色区分卡片的属性或者说是不同类型的卡片,一个是趣味性,另一个主要是为了结合卡片自身的颜色(增强信任感),调和成与产品本身相符的色调风格。

在收入和支出的颜色选择的时候,我认为收入是一件与工作相关的行为,工作本身带有严谨性,我选择比较有信任严谨一样的蓝色;支出是消费,消费有各种各样的途径,大部分消费都可以换分到吃喝玩乐,那么吃喝玩乐有这一种欢乐的意味,我选择了紫色偏粉色,代表吃喝玩乐的一种欢快的感觉。

在收支详情的界面中,所有收支的文字描述用产品的主色调深紫色去展示,不对阅读信息进行过多的干扰,每一笔详情的消费,对应一个色彩丰富的icon,识别度高,可以很容易的区分开没一笔消费去向,并且提高了界面的趣味性。

北京web前端培训

这里主要是一个同色系配色的表现手法,整体色调为蓝色调,重点突出的颜色为目前最明显的蓝色,用它来标示当前正在调整的某一个弦轴,以及重点操作吉他正面反面的切换,标志音的位置。

在保证画面平衡,操作体验没有不适的情况下,尽量去尝试一些布局,这样会发现一个又一个新大陆。例如此例子当中的还原现实,统一风格用插画的方式去表现吉他握持的方式,在正常的右手拨弦的演奏方式握持的时候,选择第一张界面的展示方式,去调节每一个对应的弦轴,自动感知音调的高低,当然你也可以切换成正面展示,给用户另一种选择,这个还原现实就是考虑到本身用户体验,我看了一些吉他调音的软件,他们在这里的展示方式没有采用竖版,导致很多时候我们需要去判断弦轴的位置。

北京web前端培训

邻近色的配色,画面会非常统一,颜色倾向很明显,给用户持久性的心理感受。

我设计了一个插画系的公车。当时也是发现每次等车的时候还需要等多久,或者大概什么时候会到,我什么时候出门这个问题,然后市面上有很多软件做了这件事,但是他们确实很无聊,没有把这个产品玩起来,我想把它们做的有意思一点,于是就diy了这个app主界面-等车过程,用一些感觉通透的颜色,采用全屏布局,并且给它涉及了交互动画,把整个等车过程模拟了出来,索然是练习作,但是依然是一次脑洞的开发。

北京web前端培训

邻近色的配色,主色调为蓝色,为了丰富界面,加入了它的邻近色-紫色。这两种颜色都属于冷色,蓝色本身有一种清爽冰凉的感觉,并且蓝色跟科技有关,那么我们的空调属于一个机器,一个科研产品,再加上蓝色的清爽属性用于空调,所有最终定了蓝色的主色调,希望在炎热的夏天带给用户清爽的感觉,配合简约的界面,将这种感觉再次传达给用户。

想这个需求的时候,也是发现自己平时在用空调的时候,很多时候找不到遥控器在哪里,但是手机这个东西却几乎不离身,那么用手机去控制怎么样呢,也就是现在的智能家居,我想着去统一所有只能家居的app风格,用一个软件控制家里的所有设备,他们都有这优美的线条插画,细腻的动效切换以及简约的功能布局,像这个空调界面一样,没有过多的设计修饰,留下了最简洁的功能。

北京web前端培训

采用多色搭配划分模块的方式去展示不同类型菜谱的入口,颜色选择上一定要有依据支撑,并且保证他们有相同的色调,这样可以控制在色相很多的时候依然觉得界面非常的和谐,没有特别冲突的感觉。

早餐我认为早餐应该是绿色健康清淡的,所以选择了一个清色系的渐变配合荷包蛋的icon;午餐我认为应该是吃饱,各种营养齐全的,橙色有一种增加人食欲的性格,像麦当劳肯德基他们的墙纸大多都是红色和橙色;

晚餐我觉得是一天工作日后吃饭,比较浪漫的时刻,因此我选择了具有浪漫气氛的紫粉色渐变加牛排的icon;

小吃的颜色选择上我选择了一个比较中性的蓝色,因为蓝色也有健康安全的感觉,表示我们产品里的小吃都是健康的,安全的一种做法,icon上则选择了大受欢迎的薯条

玩出趣味,但是也要注意界面里支撑的灵魂。



原文链接地址:http://www.xueui.cn/experience/app-experience/color-selection-in-the-interface.html
感谢@Dea_n的分享

关键词:北京UI设计培训,北京UI培训,UI设计培训,UI交互设计,火星人UI培训

热门课程推荐  点击查看全部课程

北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
北京UI培训
  • 14年教育品牌
  • 课程不断更新
  • 签订就业协议
  • 项目案例讲解
  • O2O教学模式

北京火星人科技文化发展中心版权所有 Copyright & copy 2002-2016 2ds.cn, All Rights Reserved 京ICP备 10216795号