header_v1.7.40

UI的设计规范总结

1年前发布

原创文章 / UI / 资讯
Ann_sxm 原创,如需商业用途或转载请与Ann_sxm联系,谢谢配合。

之前看了凤尾竹老师写的《术与道》这本书,收获很多,把UI设计的规范,以及适配的原理那些都讲的非常好,对于刚入门的UI设计师帮助是很大的,所以,我也结合了老师的这本书以及站酷和知乎的资料做了一些总结,也喜欢能够对大家有帮助,互相探讨共同进步

还记得去年的这个时候刚接触UI的时候,第一次和程序做项目,对于UI一点概念都没有,对于手机的设计规范和适配问题一点都不了解,当时觉得明明很合适的图片呀,为什么放上去不是大了就是小了(哭笑),真的很头疼,又没有人告诉我到底应该怎么做,于是就上网查资料,可是网上的资料又不全,走了很多弯路。上个月看到凤尾竹老师的书,觉得收获蛮大的,于是就结合了老师的书以及站酷,知乎和百度的资料做了一些规范类的总结,一是为了给自己整理一个清晰的思路,二也希望能给刚像我一样刚入门的设计师一点帮助,大家一起努力,共同进步。   

  

一.UI的相关概念

UI:用户界面(user interface) 

WUI:网页设计师(Web User Interface)

GUI: 图形用户界面设计(Graphics User Interface)

UE: 用户体验(User Experience)

UED : 用户体验设计(User Experience Design)

UCD: 以用户为中心的设计(User Centered Design)

APP开发流程

1.产品经理  2.交互设计,视觉设计,用户体验  3.开发  4.测试  5运营

智能手机的屏幕:

1.英寸:表示屏幕斜对角线的长度(手机常见的屏幕尺寸有3.5英寸,4.3英寸,4.7英寸和5.5英寸)

2.像素:像素是图像的一个基本的采样单位,它不是一个确定的物理量,因为像素点的物理大小是不确定的,它是一个抽象的概念。

3.分辨率:分辨率是屏幕像素的数量,一般用屏宽像素乘以屏高像素来表示。每个像素点发出不同颜色的光,就构成了我们所看到的画面。(例如:iPhone 7 手机的屏幕分辨率是750*1334,就表示它的屏幕是由750列和1334行像素点排列组成的。

4.网点密度DPI(Dot Per Inch),用于描述印刷品的打印精度。

5.像素密度PPI(Pixel Per Inch),用来表示屏幕每英寸像素点数量。显示屏幕的PPI数值越高,画面看起来就越细腻。


二.iOS系统适配

物理分辨率,逻辑分辨率,像素倍率,视网膜屏幕

物理分辨率:是硬件所支持的分辨率

逻辑分辨率:是软件所支持的分辨率

像素倍率:逻辑分辨率乘以一个倍率就得到物理分辨率,这个倍率就是像素倍率

(以iPhone 6 为例,逻辑分辨率为375*667,像素倍率为@2x,得到物理分辨率为750*1334.)

视网膜屏幕:手机屏幕距离你的眼睛10~12英寸时,它的分辨率只要达到300PPI(每英寸300个像素点)以上,你的眼睛就无法分辨出像素点了,这样的屏幕别称为“视网膜屏幕”

3cc259098e2da801214550f8f684.jpg

   (例如iPhone 6 的屏幕分辨率为750*1334,带入公式PPI=c54a59098e3fa801214550851b2a.jpg=326>300,符合视网膜屏幕的特征。iPhone3GS以下的都不符合视网膜屏幕的特征)

iPhone 6 Plus的屏幕:逻辑分辨率用414*736,像素倍率为3@x,最终的物理分辨率为1242*2208,此时PPI为401,(为了维持iOS系统UI元素显示统一,PPI需要达到461,此时设备内存消耗较大,电池消耗较大,所以把PPI改为了401)。最终软件输出1242*2208的分辨率,而硬件只能支持1080*1920的分辨率,这样导致像素无法绝对对齐(但是由于iPhone 6 Plus的PPI非常高,所以这种像素不对齐对普通的用户影响并不大。

iOS作图流程

步奏:按750*1334的做设计稿,除了图片以外所有的设计元素用矢量图来做,图片使用智能对象,方便放大和缩小。输出@2x和@3x的切图以及设计稿的标注图。(@3x的标注图默认为是@2x的1.5倍,给开发人员说好,就不需要再重新标注了,用cutterman切出来的@3x的图片是被自动放大到它的1.5倍的。)

 97525909972ca801214550207b10.jpg 


三.安卓系统的适配

像素独立密度(DIPDP

在安卓系统的平台设计中我们引入了一个新的标注概念, 叫密度独立像素(Density Independent Pixels),可简称为DIP或DP。在iOS设备上我们用PPI来描述屏幕像素密度,在安卓设备上我们用DPI来描述像素密度。例如:1英寸屏幕里有160个像素,这个屏幕的像素密度就是160DPI,在安卓系统中规定以160DPI为基准,1DP=1PX,如果像素密度是320DPI,1DP=2PX,以此类推。

852b5909971ea801214550b36dc7.jpg

          

安卓作图流程

根据热门手机分辨率的统计,我们只需要考虑HDPI,XHDPI,XXHDPI,XXXHDPI这四种常见的像素密度,我们选择XHDPI(720*1280)作为设计稿的大小(取中间值方便上下适配),除了图片以外所有的设计元素用矢量图来做,图片使用智能对象,方便放大和缩小。在这个设计稿上做标注,并输基于XHDPI的@2x的切图,放大后的@3x的切图,以及相应的控件的点九图。(注意:文字单位用SP,非文字标注用DP)

点九图

点九是一种特殊的png图片,只适用于安卓平台的应用开发里,文件扩展名为9.png。我们都知道在安卓平台上有多种不同的分辨率,很多控件的切图文件在被放大拉伸后,边角会模糊失真,所以我们在安卓平台上使用了点九png技术,可以将图片横向纵向同时进行拉伸,以实现在多种分辨率下完美的显示效果。从中我们也可以理解为什么叫“点九PNG”,其实相当于把一张png图分成了9个部分(九宫格),分别为4个角,4条边,以及一个中间区域,4个角是不做拉伸的,所以还能一直保持圆角的清晰状态,而2条水 平边和垂直边分别只做水平和垂直拉伸,所以不会出现边会被拉粗的情况,只有中间用黑线指定的区域做拉伸。结果是图片不会走样。

点九的图片一般用在需要拉伸的地方,比如说聊天程序的对话框,以及一些控件之类的,但是要记住,点九的图片只能被拉伸,不能被缩小。

 

四.命名规则

(界面或者功能)+(控件名)+(状态)+(补充描述)

 

登录界面的命名方式:

login_bg.png(登录背景)   login_logo.png(登录Logo)

login_input.png(输入框)   login_input_pre.png(登录框选中状态)

login_btn.png(登录按钮)   login_btn_pre.png(登录按钮选中状态)

 

按钮的命名方式:

btn_xxx.png(按钮默认)

btn_xxx_pre.png(按钮选中状态)

btn_xxx_disable.png(按钮不可点状态)

 

常见控件名称如下:

icon(图标)   img(图片)        list(列表)     sign(标记)      menu(菜单)

bar(栏)     statusbar(状态栏) navibar(导航栏) tabbar(标签栏)   toolbar(工具栏)

radio(单选框) checkbook(复选框)  bg(背景)     switch(切换开关)  slider(滑动器)       

 

五.字体

iOS

iOS 8系统中的字体,中文字体为“华文黑体”,英文和数字字体为”Helvetica”。在实际设计过程中,设计师使用的中文字体为“黑体-简”或“Heiti SC”,英文字体为“Helvetica Neue”。这是与iOS系统字体的实际效果最接近的。

iOS 9系统中文字字体为”苹方”,英文和数字字体为“San Francisco”.

(注意:在APP设计时字体号一定要为偶数,且不要小于22px.)

 

安卓

安卓的系统文字,中文的字体为 ”Droid Sans Fallback”,英文字体为”Droid Sans”。

安卓4.X的系统字体,中文为”Droid Sans Fallback”,英文字体为”Roboto“。

安卓5.0的系统字体,中文为”思源黑体“,英文字体为”Roboto”。

(在iOS系统中用px标注文字,在安卓系统中用sp标注文字,在设计稿(720*1280)这个尺寸下,2px=1dp=1sp)

设计时在各个位置使用的字号都不同,以720*1280为例

1. 36px:用于顶部导航栏栏目名称,背景为灰白色时,文字使用深灰色(#333333),背景为其他颜色是文字使用白色(#ffffff)

2. 30px: 用于标题文字或大按钮文字,颜色使用(#333333)

3. 28px:用于主要文字,正文和小按钮文字,颜色使用(#333333)

4. 24px: 用于辅助性文字时,颜色使用(#666666),用于提示性文字时,颜色使用(#999999)。

5. 22px:用于底部标签栏文字时颜色使用(#666666),用于正文中次要文字时颜色使用(#cccccc).

6. 18px:用于提示文字,如底部标签栏上购物车图标上的数字,或者对话图标上的消息数字,颜色使用白色(#ffffff).

 

六.iOS的设计规范

图标设计

iOS图标圆角参考表:

899659098e83a8012145508288bf.jpg

由于iOS应用图标是由系统统一切的圆角,所以设计的时候我们只需要直接出方形图标即可。

1. App图标:指手机上的应用图标。

2. App Store图标:是指上传至应用商店的应用图标。

3. 标签栏图标:指底部标签栏上的图标

4. 导航栏/工具栏图标:指分布导航栏上的功能图标

5. 设置图标:指在列表式的表格视图中左侧功能图标

6. Web Clip 图标:指你的web小程序或网站的一个可以直接放在桌面上的图标

d73d59098e8ba8012145500b9573.jpg

 

界面设计

iPhone的界面尺寸

722c59098e92a801214550aa655d.jpg

iPhone的不同机型的图标尺寸参数

cc6259098e97a801214550ff413d.jpg

 

七.安卓的设计规范

图标设计

安卓图标圆角参考表:

7d4e59098e9ea8012145507dbade.jpg

 

不同于iOS的统一的设计规格,安卓是一个开放的系统,各家公司的手机都可以自定义安卓系统,所以会出现各种尺寸规格的屏幕。为了简化设计并兼容更多的手机屏幕,安卓系统平台对屏幕进行了区分。按屏幕的像素密度划分为低密度屏幕(LDPI),中密度屏幕(MDPI),高密度屏幕(HDPI),超高密度屏幕(XHDPI),超超高密度屏幕(XXHDPI)以及超超超高密度屏幕(XXXHDPI)

1. App图标:指手机上的应用图标,在安卓系统里面也叫Launcher图标,不同于iOS系统的是,安卓系统并不提供统一的切圆角的功能,因此我们给程序员的图片必须是带圆角的。

2. 操作栏图标:是指运用在导航栏或着工具栏上的图标,它们代表了用户在应用程序中最重要的操作。

3. 情境图标:指应用程序中使用小图标凸显操作,并表示特定项目状态。

4. 通知图标:指如果应用程序产生通知,要提供一个收到新通知时可以显示在状态栏的图标,情景图标必须是白色。

1f3c59098ea6a801214550a9c22a.jpg

 

界面设计

07dd59098eaba8012145503f9c5d.jpg

以720*1080为设计稿,状态栏50px,导航栏96px,主菜单栏96px。

(安卓为了在界面上区分于iOS,安卓4.0开始提出一套HOLO的UI设计风格,一些APP最新版本都采用这一风格,这一风格明显的变化就是将下方的主菜单栏移到了导航栏下面,这样的方法就解决了很多手机去除实体按键以后屏幕出现双底栏的尴尬情景。)

 

八.颜色的使用

UI中颜色的基本使用

全局色

1. 中性色:灰度色

由于它的H值和S值没有发生变化,所以我们只观察B值,B值分别为B20, B40, B60, B80, B90, B94, B100.

2. 主色:(使用场景:顶部的导航栏,按钮和各种控件设置)

3. 辅助色a:(辅助按钮和各种控件设计)

4. 辅助色b:(一些用户名称和链接文字的颜色)

背景用色

1. 背景颜色a: 纯白色(H0 S0 B100  #ffffff)

使用场景:列表单背景和对话框。

2. 背景颜色b:浅白色(H0 S0 B98  #fafafa)

使用场景:顶部导航栏和底部标签栏。

3. 背景颜色b:浅白色(H0 S0 B94  #f0f0f0)

  使用场景:首页背景和页内背景。

分割线用色

1. 分割线a:灰色(H0 S0 B90  #e6e6e6)

使用场景:浅白色背景的分割线。

2. 分割线b:灰色(H0 S0 B94  #f0f0f0)

使用场景:纯白色背景的分割线。

文字用色

1. 文字a:纯白色(H0 S0 B100  #ffffff)

使用场景:主色和辅助色按钮的文字。

2. 文字b:中灰色(H0 S0 B80  #cccccc)

使用场景:失效辅助性文字。

3. 文字c:深灰色(H0 S0 B60  #999999)

使用场景:提示性文字。

4. 文字d: 浅黑色(H0 S0 B40  #666666)

使用场景:辅助和默认状态的文字。

5. 文字e:深黑色(H0 S0 B20  #333333)

使用场景:标题正文等主要文字。

图标用色

1. 图标a:纯白色(H0 S0 B100  #ffffff)

使用场景:颜色背景上的图标。

2. 图标b:中灰色(H0 S0 B80  #cccccc)

使用场景:工具栏上的操作图标。

 

颜色的四种模式

1. RGB模式:R表示红色,G表示绿色,B表示蓝色。共能组成256*256*256种颜色。

(#后面的数字是16进制,表示RGB的数值,R:215(10进制)=d7(16进制),G:255(10进制)=ff(16进制),B:38(10进制)=26(16进制)。。。。。。16进制的代码颜色以0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,共16位组成)

2. HSB模式:H(Hues)表示色相,S(Saturation)表示饱和度,B(Brightness)表示亮度。

3. CMYK模式:C(Cyan)表示青色,M(Magenta)表示品红色,Y(Yellow)表示黄色,

         K(Black)表示黑色。

4. Lab模式:L(Luminosity)表示亮度,a表示从红色至绿色范围的颜色分量,b表示从黄色至蓝色范围的颜色分量。

补充:

RGB是光的三原色(区别色彩的三原色:红,黄,蓝),是一种发光的色彩模式,在黑暗的屋子里面我们任然能看到它。

CMYK是色的三原色,是由RGB的颜色两两相加得到的,是一种反光的色彩模式,我们只能通过光照射到物体上然后再反射到眼睛中,才能看的见。

做一个印刷品是,先用RGB的模式去做,做完以后再转CMYK就好了,做的时候打开工作中的CMYK模式。

RGB是加色模式,都为最大值时,颜色为白色,CMYK是减色模式,都为最大值时,颜色是黑色。

溢色:是指RGB能显示出来,CMYK不能显示出来。



30
    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功