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

北京UI设计培训 界面中的颜色选择时间：2016年08月17日 来源：火星人关于理论颜色的基本搭配理论网上已经有太多太多的文章，就不一一举例了，说几个常用的颜色搭配理论。1.同色深浅/色调统一同色深浅搭配或者色调统一配色适合一些需要配色整体统一却不希望像列表一样很无聊的界面。 不适合不同功能内容之间的颜色搭配，会没有重点。同色系（通过改变同一色相的色调深浅，划分页面的层次和模块，表达不同的功能属性）Twitter通过品牌色蓝色的深浅变化区分更多回复，链接，回复区域，功能操作按钮等。2.同色调搭配大意是指颜色的灰度值同属一个范围的不同色相搭配同色调搭配适合有主导色，有一些特殊地方（如功能入口的图标等）利用同色调搭配配色会灵活出彩的界面。新浪微博的界面中，主导色为品牌橙色，在发布界面中的功能入口icon的设计上，采用色调统一不同色相的颜色搭配，使得发布界面灵活出彩，增加了界面的趣味性，久而久之可以通过颜色的记忆去影响操作。同色调的情况下，不同色相搭配起来依然会很和谐Metro界面中，控制各个模块色调一致，利用不同色相划分不同模块，搭配起来和谐并且功能入口清晰。3.互补色搭配互补色在搭配的时候，先要让强烈的对比没有特别刺眼的感觉，可以尝试统一他们的色调09ui工作室涉及的这个脑子界面，很好的利用了互补色的强对比，给人很强的视觉冲击力，但是并不刺眼，就是因为颜色比例以及色调的调和。4.邻近色搭配Clear App不仅用颜色区分了列表信息，让界面新颖活力，并且利用色彩的深浅对to-do事件进行优先级的排序。不适合不同功能内容之间的颜色搭配，会没有重点。产品设计中的颜色搭配有很多种方式同色系、同色调、一个主色多个辅色、对比色、类似色、中性色、三色对比、邻近色总结颜色控制少可以让画面很有设计感，控制好颜色对比的比例可以让画面平衡杆增强控制好色彩搭配之间的协调度（包括面积、色相色条等），可以利用多色对比搭配出丰富饱满的感觉，模块之间的划分会更加的清晰、精致。颜色的感受这里主要是说颜色带给人的感觉，以及颜色的调和。尤其是在产品设计中，和谐配色很重要，除非你是在做运营类的需要短时间传播冲击到用户的设计。思考演变过程颜色带给人的心理感受Google已经为我们总结了很多，我来通过几个界面的思考演变过程讲述一下在实际设计过程中的思考。包括颜色，布局，交互体验上的一些推敲。用颜色区分卡片的属性或者说是不同类型的卡片，一个是趣味性，另一个主要是为了结合卡片自身的颜色（增强信任感），调和成与产品本身相符的色调风格。在收入和支出的颜色选择的时候，我认为收入是一件与工作相关的行为，工作本身带有严谨性，我选择比较有信任严谨一样的蓝色；支出是消费，消费有各种各样的途径，大部分消费都可以换分到吃喝玩乐，那么吃喝玩乐有这一种欢乐的意味，我选择了紫色偏粉色，代表吃喝玩乐的一种欢快的感觉。在收支详情的界面中，所有收支的文字描述用产品的主色调深紫色去展示，不对阅读信息进行过多的干扰，每一笔详情的消费，对应一个色彩丰富的icon，识别度高，可以很容易的区分开没一笔消费去向，并且提高了界面的趣味性。这里主要是一个同色系配色的表现手法，整体色调为蓝色调，重点突出的颜色为目前最明显的蓝色，用它来标示当前正在调整的某一个弦轴，以及重点操作吉他正面反面的切换，标志音的位置。在保证画面平衡，操作体验没有不适的情况下，尽量去尝试一些布局，这样会发现一个又一个新大陆。例如此例子当中的还原现实，统一风格用插画的方式去表现吉他握持的方式，在正常的右手拨弦的演奏方式握持的时候，选择第一张界面的展示方式，去调节每一个对应的弦轴，自动感知音调的高低，当然你也可以切换成正面展示，给用户另一种选择，这个还原现实就是考虑到本身用户体验，我看了一些吉他调音的软件，他们在这里的展示方式没有采用竖版，导致很多时候我们需要去判断弦轴的位置。邻近色的配色，画面会非常统一，颜色倾向很明显，给用户持久性的心理感受。我设计了一个插画系的公车。当时也是发现每次等车的时候还需要等多久，或者大概什么时候会到，我什么时候出门这个问题，然后市面上有很多软件做了这件事，但是他们确实很无聊，没有把这个产品玩起来，我想把它们做的有意思一点，于是就diy了这个app主界面-等车过程，用一些感觉通透的颜色，采用全屏布局，并且给它涉及了交互动画，把整个等车过程模拟了出来，索然是练习作，但是依然是一次脑洞的开发。邻近色的配色，主色调为蓝色，为了丰富界面，加入了它的邻近色-紫色。这两种颜色都属于冷色，蓝色本身有一种清爽冰凉的感觉，并且蓝色跟科技有关，那么我们的空调属于一个机器，一个科研产品，再加上蓝色的清爽属性用于空调，所有最终定了蓝色的主色调，希望在炎热的夏天带给用户清爽的感觉，配合简约的界面，将这种感觉再次传达给用户。想这个需求的时候，也是发现自