静电
管理员
管理员
  • UID1
  • 发帖数890
  • 威望22804点
  • 社区居民
  • 最爱沙发
  • 忠实会员
  • 喜欢达人
  • 优秀斑竹
  • 原创写手
阅读:2958回复:3

[教程]不知道这些事,你还是个合格的UI设计师吗?

楼主#
更多 发布于:2016-05-28 16:12
静电说:作为国内人气超高的Sketch交流群-sketch钻石党的创始人,Wyman.Leung同样致力于推广Sketch在国内的普及。本文提到了许多UI设计师必知必会的知识点,也有很多可以深入探讨的问题,比如静电之前一直认为PT这个单位是磅,但经过我们的实验,却发现其实苹果没有在任何地方提到过这个单位,那xcode中到底用的是什么度量单位呢,这确实是一个值得深入研究的话题。那么我在这里就不废话了,看看Wyman.Leung的这篇文章吧!

本文原题目《老生常谈:关于合格 UI 设计师需要知道的那些事儿》,转载后演绎为《不知道这些事,你还是个合格的UI设计师吗?》
作者:Wyman.Leung
授权状态:本文经作者授权静Design发布,未经作者授权,请勿转载


近段时间来,我和静电的sketch设计群都已经超过千人规模(Sketch钻石党Q群:105403797,静Design交流群:490810141),也有很多设计是新人加入到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




图片:640.jpg


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

•原色:原色有三种,包括红色 Red、绿色 Green、蓝色 Blue,原色的 RGB通道其中两个为0。
•补色:由2种等量原色组成的叫做补色,也叫互补色,补色加上另一种原色会呈现白色(饱和度100%的时候),例如红色+绿色=黄色,为蓝色的互补色;绿色+蓝色=青色,为红色的互补色。
•复色:由三种原色组成的颜色叫做复色,一般而言复色相对于原色和补色的饱和度要低。复色的视觉感官上相对于前两者没那么鲜艳扎眼,亮度相对高的复色更加讨好人的眼球,我们看到的颜色绝大部分属于复色。

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

图片:640_003.jpg


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

•PPIPixels 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是“逻辑像素密度”而不是“物理像素密度”

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

•ptPoint,中文翻译应该为”点“,这个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。

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

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

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

图片:640_002.jpg



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这么简单,设计师是一个知识面要求很广的职业,设计师的灵魂在于你的创造力,而你的创造力源自生活的方方面面。
lgx1992831
VIP读者
VIP读者
  • UID4085
  • 发帖数7
  • 威望123点
沙发#
发布于:2016-06-06 18:26
真棒!!!
萌萌哒杰宝宝
VIP读者
VIP读者
  • UID6798
  • 发帖数8
  • 威望270点
  • 社区居民
板凳#
发布于:2016-07-04 17:56
收了去
sketch_joy
Sketch新手
Sketch新手
  • UID7944
  • 发帖数1
  • 威望25点
地板#
发布于:2016-09-07 14:09
红色+绿色=黄色?
红色+绿色=黄色?
游客

返回顶部