合格UI设计师必须要知道的事情

合格UI设计师必须要知道的事情

文章来自网络征集

目前UI设计行业里一个非常常见的问题，就是很多人虽然已经从事UI设计行业，但是他们对UI设计的一些很基本的专业知识和理论缺乏认知。或者说是没有规范理论的学习这些基础知识。

合格UI设计师必须要知道的事情

1、拟物化和扁平化

在UI设计领域里，设计风格主要分为两个“拟物化”和“扁平化“。“拟物化”以iOS（6之前版本）和安卓阵营的锤子为代表。它的显著优点是，细节多、有光影、有质感，很大程度上模拟了现实生活中的物品形状、材质、光影效果。扁平化则是以安卓5.0以及若干国产手机ROM为代表，它强调简单、抽象、符号化，去掉了装饰性设计元素，没有明显质感，弱化光影（某些文字资料说扁平化完全没有光影效果，我个人不认同，参考谷歌MD），最核心的设计方法是几何形状和复色方案（稍后介绍）。Google在安卓5.0上使用了全新的Material Design设计，让安卓有了跟苹果一样鲜明的、系统化的设计语言。关于两者的好坏，一直没有定论，我个人认为两者各有特色，可以各成一家，每一种风格都有欣赏的人，每一种都有它最合适的应用场景，设计本身没有好坏，只有是否合适。

2、原色、补色、复色

在了解如何使用颜色之前，我们需要先知道色彩的构成。三原色分为"光三原色（RGB）"和"颜料三原色（CMY）"UI是为电子显示设备设计，所以我们我们这里说的三原色是"光三原色RGB"，我们看到的显示设备上的图像就是由RGB三种颜色的光构成，后续所有概念也是相对于光而言。

•原色：原色有三种，包括红色Red、绿色Green、蓝色Blue，原色的RGB通道其中两个为0。

•补色：由2种等量原色组成的叫做补色，也叫互补色，补色加上另一种原色会呈现白色（饱和度100%的时候），例如红色+绿色=黄色，为蓝色的互补色；绿色+蓝色=青色，为红色的互补色。

•复色：由三种原色组成的颜色叫做复色，一般而言复色相对于原色和补色的饱和度要低。复色的视觉感官上相对于前两者没那么鲜艳扎眼，亮度相对高的复色更加讨好人的眼球，我们看到的颜色绝大部分属于复色。

UI设计相对于平面设计而言，我们并不需要给用户十分鲜艳抢眼的颜色，这样可能会在长时间使用的过程中产生视觉疲劳，我们更需要的是，给用户一个视觉上相对讨人喜欢，并且能在长时间的使用过程中不会轻易产生视觉疲劳，或者延缓视觉疲劳的产生。复色的饱和度相对低，并且复色通过不同的颜色组合，千变万化，给设计的发挥空间很大。复色方案也是扁平化设计的一个精髓。

3、PPI、px、pt、dp、sp的名词解释与单位换算

几乎每一个UI设计师都被这个问题坑过，我也不例外。我曾经无数次不厌其烦地向一些新人解释这个问题，但是后来发现，三言两语没有实践，很难解释清楚。要了解如何换算，首先我们必须要了解几个专业名词：

•PPI：Pixels per Inch，中文为“像素每英寸”，也有很多人直接叫“像素密度”，意思就是在设备的1英寸物理长度上可以显示的独立物理像素。但是需要注意的是，这个是一般情况下我们在手机厂商对手机参数标注的单位。而在安卓系统开发中，它有另外一个意思，就是“逻辑像素密度”。在手机系统中有一个配置文件写了一个参数，告诉系统应该以什么分辨率去显示内容，写的值一般为120、160、360、480、640，分别对应从320P到2K的显示屏。这个“逻辑像素密度”是为了解决超高密度屏幕可以正常显示内容而存在的。（例如有了它就可以把同样是5.5英寸的1080P和2K屏幕显示相同的内容，而这两块屏幕的物理PPI明显是不一样，并且有很大差别的。有试过把2K屏手机改为1080P显示的同学可能就比较好理解，2K里面这个参数值原来是640，当你改为480的时候，它就会以1080P的分辨率渲染，这样可以提高手机运行速度，当然说省电那是扯的）。

在iOS中，在目前最高分辨率的iPhone6 Plus里，手机首先会把实际的物理分辨率2208x1242（489PPI）乘以0.87压缩到1920x1080（1080P）渲染，然后再以1080P的渲染分辨率除以2.69英寸（iPhone6 Plus屏幕宽度），得到401PPI的“逻辑像素密度”，所以我们最终在官方资料里看到的iPhone6 Plus的PPI是“逻辑像素密度”而不是“物理像素密度”。

•px：Pixel，中文全称”图像元素“，简称”像素“，为显示设备的显示单位，也是我们图像设计的基本单位。我们设计的图像上的1个像素点，在显示设备上占用一个RGB显示单元。

•pt：Point，中文翻译应该为”点“，这个pt并非平面印刷的”磅“单位，而是和dp、sp（详见后面解释）一样，是一个相对单位（没有绝对的值，就算在物理尺寸上也没有绝对的值，换算值取决于屏幕尺寸和系统逻辑像素密度），无关设备物理尺寸。根据研究，人的手指点击屏幕的时候触碰面积大概是7-10mm，而物理单位上大约5.26pt=1mm（1pt≈0.19mm），44pt大约相当于8mm。pt单位用于iOS的UI设计，基于@1x（iPhone3GS）1pt=1px；基于@2x（iPhone4-iPhone6S）1pt=2px；基于@3x（iPhone6Plus）1pt=3px。

•dp：Device Independent Pixels，中文全称”设备独立像素“（也可译为”设备无关像素“，单词Independent有独立自主或者不相关的意思），也简称dip。正如其英文字面意思一样，它是一个“无关设备物理尺寸的单位”。原理和pt基本一致，用于安卓系统UI设计，一般用作长度单位，也可以用作字体单位，但是一般不建议这么用，具体下面的sp会解释。要注意的是，决定它换算比例的是上面一开始所说的“逻辑像素密度”，而不是屏幕的物理PPI密度。这个一定要注意，否则你会无尽的陷入这个陷阱中。不要再问441PPI的小米手机用哪个尺寸设计，546PPI的魅族MX4PRO用哪个尺寸设计这种问题了。重要的事情将三遍：dp是无关设备物理尺寸的单位！dp是无关设备物理尺寸的单位！dp是无关设备物理尺寸的单位！

•sp：Scaled Pixels，中文全称“可放缩像素”，这个单位的换算方式完全跟dp一样，这个单位跟dp最大的区别是，它一般用于文字的字号或者与文字相关的地方。它是一个可以放缩的单位，会根据系统设定，按照一定比例放大或者缩小，例如安卓系统中一般会有文字显示大小，可以选择常规、较大、特大等。这时候如果你用的单位是sp的话就按照比例放大，如果你用的单位是dp ,那么放大将对其无效。根据以前程序员同事给我的意见，一般情况下文字都选用sp为单位，其他则使用dp为单位，并且不建议用dp作为文字字号，除非你十分肯定，你并不希望这个文字可以被放大。同样不建议把sp用作其他非文本的元素尺寸、间距等，这样可能在用户放缩系统文字后导致你的布局错误。

4、UI设计的基本原则

•KISS原则，英文Keep it simple , stupid!（从简原则）的缩写。KISS原则由著名剧作家David Mamet（大卫•马梅）提出的电影理论，后而延伸至设计领域，从字面意思我们可以大概地知道，KISS的原则旨在用最简单的设计去达到目的。没有任何多余的装饰，也没有任何多余的步骤，用最简单的方式和最短的操作路径完成目标，这就是KISSS原则。是的，也许你发现了，它不就是设计师偷懒想出来的借口嘛！确实，它也有另一个名字，叫做“懒人原则”，谁不喜欢并且习惯用最简单的方式完成工作呢？但是实际上，KISS原则在设计过程中，设计师往往需要投入大量的精力去打磨，找到一个最合适并且最简单的功能，简单的东西往往最难以得到。所以，KISS原则并不等于设计师偷懒，其实是设计师为用户偷懒。

•UCD原则，英文User-centered Design的缩写，中文意思为“以用户为中心的设计”。

这里引用一段网络上关于UCD的描述：

【衡量一个好的以用户为中心的产品设计，可以有以下几个维度：产品在特定使用环境下为特定用户用于特定用途时所具有的有效性（Effectiveness）、效率（Efficiency）和用户主观满意度（Satisfaction）,延伸开来还包括对特定用户而言，产品的易学程度、对用户的吸引程度、用户在体验产品前后的整体心理感受等。】

UI设计师其实并不是一个只会用Photoshop的美工，我们设计的出发点并不在于它有多好看，设计的最终目的是为了好用，而且是让用户觉得好用。要成为一名优秀的UI设计师，我们必须先摒弃一个理念：我喜欢的设计就是好的设计。因为我们的设计是为广泛的用户服务，而非为自己服务。设计的最终目的一定是得到大多数用户的认可，为用户提供最合理最好用的设计，好用远比好看重要。好看只是锦上添花，好用才是最终目的。正因如此，优秀的UI设计师，除了掌握过硬的设计技能之外，还需要有广泛的科学认知，为我们的设计服务，为用户服务。

除了这两条之外，还有一致性原则、准确性原则、布局合理化原则、系统操作合理性原则、系统响应时间原则等五大原则，详情可以百度相关资料了解。

5、采用什么尺寸去进行设计？

在通过上面的了解之后，我们可以知道，我们手机显示内容的时候并非用像素为单位去显示呈现内容（不是说渲染问题），而是pt、dp这类的相对单位，通过系统的设定重新计算出应该渲染的内容，所以我们设计的时候就应该以pt、dp这样的单位去设计。但是随之而来的问题是，设计软件里面的单位一般有mm、inch、px这类具体的单位，UI设计显然不会使用mm这类的单位，我们选用的是px，所以在设计之前我们需要找一个方便pt、dp与px进行换算的尺寸（参考第三点后的表格）。在第三点最后的表里我们可以看到，在@1x、MDPI的时候1pt/dp=1px，在@2x、XHDPI的时候1pt/dp=2px，显然相对于0.5、3这些会更加容易换算。所以，我们设计的时候一般选用一倍或者两倍图去设计，例如iOS我们可以选用320x568（iPhone5）或者375x667（iPhone6）的尺寸设计，而安卓我们则可以选择360x480或者720x1280（720P）进行设计。选用哪个尺寸我们可以考虑下自己手中的测试设备，方便我们进行测试。

另外多说几句，我个人是更建议采用2倍的图进行设计，因为这样画布更大，我们设计的时候会相对容易一点，特别是采用Photoshop进行设计，2倍图是相对合适后期进行多版本适配的，而且在安卓阵营中，如果没有专门做多版本适配的话，720P的两倍图是最合适的（分辨率不太低，体积也不太大，向上向下兼容效果相对好）。当然，如果你选用了2倍图进行设计，那么输出的时候就应该注意一下，例如在Sketch里面输出@1x的话，需要在检查器的输出设置里设置为0.5x，输出@2x的话则需要设置为1x，输出@3x则是设置1.5x，这个参数是相对于你的画板而言的。此外需要注意的就是，如果你使用Photoshop设计的话，标注的时候就需要注意，如果是用二倍图设计，标注的时候就需要把数值除以2，或者在标注插件里面设置为2倍图进行标注，而Sketch的话，你只需要在Sketch Measure插件里设置一下就可以。其实我们如果对单位换算和规范足够熟悉的话，我们使用什么尺寸去设计都是没有问题的，如果你是使用Sketch的话，你可以输出任意尺寸的资源。

6、如何进行真机预览？

真机预览主要有三种途径：图片预览、插件预览、搭建web预览

•图片预览：这是最简单的，也是最原始的方式，就是把设计好的界面效果图导出，然后传输到手机上，利用手机自带的图库或者其他看图软件预览，人人都可以这么做，简单粗暴，但是缺点是：每次更新设计都需要重新传，不是那么的方便。

•插件预览：在Photoshop里面，我们可以使用PS Play（腾讯IXUS出品，目前好像停更了，手机安装，使用Photoshop的远程功能实现），而Sketch我们则使用Sketch官方插件Sketch Mirror（收费，30元）。这类软件通过手机电脑连接到同一个WiFi网络，可以直接实时更新或者快速手动更新设计稿的画面到手机，而无需导出图片。