继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

作为一名合格的ui设计师,你需要了解的事情

FAMI2U
关注TA
已关注
手记 24
粉丝 58
获赞 773

目前 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 网络,可以直接实时更新或者快速手动更新设计稿的画面到手机,而无需导出图片。

打开App,阅读手记
10人推荐
发表评论
随时随地看视频慕课网APP