在视觉界面设计中，差别于艺术作品转达的是设计者自身的情感和寄托，这里关注的重点是转达的行为和信息，也就是目的。而在视觉设计元素中，重点关注的有：颜色、文字、巨细、形状、纹理、情景、位置、动效可以通过以下关系来表达如何整合视觉设计：整体+单体——目的整体代表的是层级，而单体表达的是单个个体所要转达的信息，将单个个体所要转达的信息和层级相整合，配合来告竣最终的目的。

同时可以把上面提到的重点举行分类，将颜色、文字、巨细、形状、纹理放入单元中来思考，而把情景、位置、动效、信息层级列入整体。先从单体的角度，来讨论一下：颜色颜色的选择是一件十分重要的事情，因为由于它的高分辨性，它对于界面的影响比形状、巨细等要高，处于人的视觉关注区的上层。就好比我们在一堆正方形的白屋子中找一座正方形的红屋子，比在一堆正方形的白屋子中找圆形的白屋子要容易的多。使用颜色，要把用户的目的、情况、内容和品牌放在优先的位置，其次才是去思量这个颜色自己。

就好比为什么快餐店如此钟爱红色和黄色，并不是说红色和黄色悦目，而是因为它代表火焰，火焰转达的是一种热烈而紧迫的感受，使得消费者没措施静下心逐步享受，而是越发快速的消费然后走人。在许多商务类的应用中，大多选择蓝色作为主色调，因为蓝色转达的是一种可信赖与沉稳的感受。在界面设计中，单个元素的颜色选择不仅在于元素自身所要转达的信息，更在于它在整个层级中所处的职位。

像下图是IOS中的日历，除了日历自己以外的部门，都是操作控件，这些单个控件，被赋予了红色以后，在白底配景上显得格外突出，转达给用户的是，这都是可以点击的，另外一方面，红色的使用使这些控件所代表的控制层的层级获得提高，可以和内容层发生显着的区分。颜色的使用要制止多而杂，将颜色按主色调、辅助色等做好区分，这里不做进一步扩展，以后再深入探讨。文字文字的属性包罗字体、字号、字的颜色。对于字体，主要思量的是可读性要强，所以对于大部门移动端应用而言，IOS常选择华文黑体或者冬青黑体，尤其是冬青黑体效果最好，Android常选择Noto或则微软雅黑做为中文字体。

因为这几种字体在移动端的显示效果较好，改变字体的巨细不会对文字的识别造成太大的影响。固然有一些气势派头比力特此外应用，好比汹涌新闻APP使用的就是宋体，转达出一种严谨、庄严的感受，因为这是一款专注政治新闻的APP。字号的选择也十分重要，它自己就带有有序的特征，差别巨细的字号体现了差别的层级。巨细巨细这个属性是一个有序而且可以量化的参量 ，差别巨细的元素排布在一起，大的显然有更强的吸引力，好比ios的game center，最重要的”游戏”被中间谁人最大的圆所表现，而与游戏相关的”挑战”处于第二大的圆中，其他几个则处于第三大的圆中。

而量化的例子，好比wifi信号、电池电量这种小icon，巨细这一属性被量化，并和所要代表的寄义精密相连。但巨细的错误运用，会降低其他属性的作用，好比元素太小的时候，该元素的形状属性在用户眼里就发挥不了太大的作用。形状形状相比前面所提到的巨细、颜色，需要用户更高一级的分辨能力，简朴的形状多用于支解，将所要表达的部门和其他的部门相区隔， 好比一个按钮的边框，它为了告诉用户，这是一个可以举行交互的控件，吸引用户点击;好比MD设计中常用的卡片式设计，用一个卡片的形状来包裹特定的内容，保证了卡片内容的整体性，也保证了整体页面的层级，让用户在操作时更容易明白内在的逻辑关系。

而庞大的形状自己就带有转达寄义的作用 ，像一小我私家像形状的ICON，为的是见告用户，这个ICON可以跳转到小我私家用户页面;而像许多应用的专属图标，都市有特定形状的标示物，好比twitter的鸟、github的猫、tumblr的字母t以及youtube的播放开关。合理的运用形状可以转达富厚的信息以及划分条理。纹理纹理的运用虽然在扁平化大行其道的今天显得尤为低调，但它所能转达的能供性还是很是强大的 ，能供性在《设计心理学》这本书中是这样被界说的——事物所感知到的及其实际的属性，主要是那些能决议事物可能如何使用的基本属性。也就是说，我们认为这个工具能做什么。

好比一个外貌带有橡胶纹理，一般人都市以为这是一个可以抓握的工具，好比一个按钮带有阴影而显得凸出于自己的界面，似乎是在告诉用户这是一个可以点击的控件。顺便谈谈拟物化的设计，它显然已经不太盛行了，因为科技产物不停融入大家的生活，不需要再通过拟物的方式，用户就可以很好的明白这个科技产物是如何操作的，这时推广扁平化设计不仅提高了用户的操作效率，而且让信息和内容可以越发高效的转达。

但随着AR、VR逐渐登上舞台，使用这更高维度的特性，拟物化设计也许可以通过一种新的方式重归人们视野。讨论完了单体的部门，下面来讨论一下整体层面上，如何整合视觉设计：情景情景是视觉界面设计元素的其中之一，思量的是用户正处于一个怎样的情况来操作你的产物，只有把这个维度也纳入思考，设计的产物才越发贴近用户越发真实全面。举一个可能和界面不太相关的例子，之前看过一篇关于uber设计的反思，提到了一个关于上海的问题，因为上海的高架桥特别多，Uber匹配用户和司机是通过距离来匹配的，这就发生了一个问题，车在高架上人在高架下，可能此时他们的距离很短，但实际司秘密把车开到用户身边需要泯灭的时间可能远比这距离多的多。

这就是没有思量好实际情景的例子。再举一个和界面设计相关的，好比ios下的拨号及通话界面，每一个按钮的设计得都很是的大，占据了整个界面大部门的位置，这主要是思量到在打电话或则接听电话时，人们可能处于一个比力急切的情况，以及所处的情况也千差万别，为了保证用户可以快速的找到接听的按键或快速的拔打号码，按钮设计的大尺寸就可以明白了。位置这里的位置指的是各个单体元素的相对位置，位置的思考往往和这几个因素精密相关：操作习惯视觉习惯单体元素关系产物逻辑操作习惯指的是用户手指操作的区域，单手或双手以及左手和右手时的操作习惯都是纷歧样的，但也有共通的特点，就是操作屏幕下部的元素要比操作屏幕上部的元素要容易的多。视觉习惯指的是对于大部门人而言的阅读浏览习惯，像下图是浏览网页时的浏览路径，出现的是F型的轨迹，而移动端由于屏幕尺寸比力小，一般都是L型的浏览轨迹。

单体元素关系指的是各个元素内在的联系，好比常见的标签栏上的元素、内容区的元素、导航栏的元素就很自然的分成了3个差别的部门，各个部门中的元素因为代表的功效或者所转达的寄义而有了相通的点。而像其他的单体元素的组合和联系也与之类似。

产物逻辑指的是因为产物需求的界说或产物逻辑的需要，将特定的元素摆设在了特定的位置，好比为了告竣商业目的，将顶部区域设置为吸引人注意的banner区。动效动效的作用有许多，它比静态的页面拥有富厚的内在，可以转达信息、表达差别部件之间的关系、吸引注意、缓和差别模式之间的过渡以及确认下令效果等。好比动态的Loading动画缓和了用户等候的焦虑心理，并见告用户正在举行加载。而借用特定形象的设计，可以转达品牌文化，像有些应用就借着loading动效的设计融合了自己的品牌logo，到达了品牌logo露出的效果。

另有像差别界面切换时的滑进滑出的动效，不仅在视觉上让用户更好明白这些页面是怎么来的，不会以为突兀，而且在逻辑上解释了这些页面的层级关系。

本文来源：开云app-www.henansenbo.com