本文为 sketch 钻石党创始人 Wyman.Leung 发表于 UI中国的原创文章，需要转载请先私信联系授权，并保留署名和出处

        近段时间来，我和静电的sketch 设计群都已经超过千人规模，也有很多设计是新人加入到 UI 设计和 sketch 这个大家庭。但是，随之而来的也暴露了很多问题，也是目前 UI 设计行业里一个非常常见的问题，就是很多人虽然已经从事 UI 设计行业，但是他们对 UI 设计的一些很基本的专业知识缺乏最基本的认知。或者说是接受到的是一些错误的认知。我们一个群的管理员也曾不厌其烦得为大家科普，但是很多东西确实不是一句两句话就能解释清楚，也不是一时半会就能轻易理解，所以就有了今天这篇文章。

一名合格的 UI 设计师需要知道的...

1、拟物化（拟真化）和扁平化

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

有兴趣了解更多扁平化好拟物化两种风格的好与坏，可以参考国内知名设计师庞门正道”阿门“的《拟物扁平话题终结者》http://www.ui.cn/detail/35132.html

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 用作其他非文本的元素尺寸、间距等，这样可能在用户放缩系统文字后导致你的布局错误。

详细的单位换算，大家可以参考下表，一定要记住 PPI 这里指的只是“逻辑像素密度”

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 里面，我们可以使用Skala Preview （手机电脑都要安装）和 PS Play（腾讯 IXUS 出品，目前好像停更了，手机安装，使用 Photoshop 的远程功能实现），而 Sketch 我们则使用 Sketch 官方插件 Sketch Mirror（收费，30元）。这类软件通过手机电脑连接到同一个 WiFi 网络，可以直接实时更新或者快速手动更新设计稿的画面到手机，而无需导出图片。但是这类软件对网络环境要求比较高，偶尔会抽风，需要重新启动，甚至重新启动都不太好用，Skala Previw iOS 版本和Sketch Mirror iOS 版本可以用过数据线共享网络，能保证比较稳定。对了，Skala  Preview是 sketch 、Photoshop 、AI 等都通用的一个软件。

Skala Preview 下载：https://bjango.com/mac/skalapreview/

PS Play 下载：http://isux.tencent.com/app/psplay

•web 预览：这是三种方式里面使用难度最高的一种，也是稳定性最好的一种。 Sketch 的话可以通过3.4版本之后推出的Local Sharing（本地预览）功能，比较直接地、自动化地在本地自动搭建一个 Web Sever 环境，同样手机电脑连接相同网络，通过手机访问网页即可，好处是可以任意切换任何画板，速度很快，不过对手机的浏览器有一点要求，在安卓上可以使用360浏览器，开启全屏模式，这样就会隐藏掉地址栏工具栏，实现全屏预览。iOS 的话，可以在iTunes 里面搜索一个叫做 Frameless 的无边框浏览器进行预览。 还有一种方法是，自行使用 tomcat 等软件搭建一个 Web Sever 环境，然后还需要呢...你手动写一个简单的响应式页面，放到你搭建好的 Web Sever 里，然后通过手机访问预览，不过这种方法还需要你导出图片到指定目录，覆盖原来的图片才能更新，或者是你手动更新网页代码里的文件名...是比较复杂的玩法，一般没有点底子的人可能搞不了，如果你能说服你们的程序员或者前端给你搭建这样的环境的话，还是可以考虑的。通过网页预览最好的好处就是，十分的稳定，这里不得不安利一下 Sketch 了，Sketch 这个软件真心每个方面都为 UI 设计师着想，现在我们预览都只需要点一下菜单，然后手机打开浏览器访问就行，更重要的是，它是实时自动更新！！ 

One more thing...

设计师应该是一个有灵魂的职业，我们为世界的一切变得更美好而生。

作为一名合格的UI 设计师，需要掌握的绝对不是会用 Photoshop 或者 sketch 这么简单，设计师是一个知识面要求很广的职业，设计师的灵魂在于你的创造力，而你的创造力源自生活的方方面面。