UI设计规范.docx

UI设计规范.docx

《UI设计规范.docx》由会员分享，可在线阅读，更多相关《UI设计规范.docx（8页珍藏版）》请在冰豆网上搜索。

UI设计规范

一.APP设计规范（ios）

————设计稿一般不使用Android的尺寸（因为Android的五花八门）

1.iphone界面的设计尺寸（设计稿默认iphone6）

（1）iphone6plus设计版[iPhone7plus]（@3x）

分辨率1242x2208pxppi:

401状态栏：

60px导航栏：

132px标签栏：

146px

（2）iphone6plus放大版（@3x）

分辨率1125x2001pxppi:

401状态栏：

54px导航栏：

132px标签栏：

146px

（3）iphone6plus物理版（@3x）

分辨率1080x1920pxppi:

401状态栏：

54px导航栏：

132px标签栏：

146px

（4）iphone6[iPhone7]（设计稿默认）（@2x）

分辨率750x1334pxppi:

326状态栏：

40px导航栏：

88px标签栏：

98px

（5）iphone5-5c-5s（@2x）

分辨率640x1136pxppi326状态栏：

40px导航栏：

88px标签栏：

98px

（6）iphone4–4s（@2x）

分辨率640x960pxppi:

326状态栏：

40px导航栏：

88px标签栏：

98px

（1）iphone&ipodTouch第一、二、三代（@1x）

分辨率320x480pxppi:

163状态栏：

20px导航栏：

44px标签栏：

49px

2.iphone图标设计尺寸

（1）iphone6plus（@3x）

Appstore：

1024x1024px程序应用：

180x180主屏幕：

152x152Spotlight搜索：

87x87px标签栏：

75x75px工具栏和导航栏：

66x66px

（2）iphone6（@2x）

Appstore：

1024x1024px程序应用：

120x120主屏幕：

152x152Spotlight搜索：

58x58px标签栏：

75x75px工具栏和导航栏：

44x44px

（3）iphone5-5c-5s（@2x）

Appstore：

1024x1024px程序应用：

120x120主屏幕：

152x152Spotlight搜索：

58x58px标签栏：

75x75px工具栏和导航栏：

44x44px

（4）iphone4-4s（@2x）

Appstore：

1024x1024px程序应用：

120x120主屏幕：

114x114Spotlight搜索：

58x58px标签栏：

75x75px工具栏和导航栏：

44x44px

（5）iphone&ipodTouch第一、二、三代（@1x）

Appstore：

1024x1024px程序应用：

120x120主屏幕：

57x57Spotlight搜索：

29x29px标签栏：

38x38px工具栏和导航栏：

30x30px

3.ipad界面设计尺寸

（1）ipad3–4-5–6–Air–Air2–mini2

分辨率2048x1536pxppi:

264状态栏：

40px导航栏：

88px标签栏：

98px

（2）ipad1–2

分辨率1024x768pxppi:

132状态栏：

20px导航栏：

44px标签栏：

49px

（2）ipadMini

分辨率1024x768pxppi:

163状态栏：

20px导航栏：

44px标签栏：

49px

4.ipad图标设计尺寸

（1）ipad3–4-5–6–Air–Air2–mini2

Appstore：

1024x1024px程序应用：

180x180主屏幕：

144x144Spotlight搜索：

100x100px标签栏：

50x50px工具栏和导航栏：

44x44px

（2）ipad1–2

Appstore：

1024x1024px程序应用：

90x90主屏幕：

72x72Spotlight搜索：

50x50px标签栏：

25x25px工具栏和导航栏：

22x22px

（3）ipadMini

Appstore：

1024x1024px程序应用：

90x90主屏幕：

72x72Spotlight搜索：

50x50px标签栏：

25x25px工具栏和导航栏：

22x22px

5.ios字体大小规范

iPhone上的字体英文为：

HelveticaNeue至于中文，Mac下用的是黑体-简，Win下则为华文黑体，所有字体要用双数字号。

字体舒适度

（1）长文本

可接受：

26px见小值：

30px舒适值：

32px-34px

（2）短文本

可接受：

28px见小值：

30px舒适值：

32px

（3）注释

可接受：

24px见小值：

24px舒适值：

28px

二.App设计规范（Android）

————Android采用的单位为dp

————一般很少使用andrid尺寸作为设计稿

1.Android界面设计尺寸

android的尺寸众多，一般使用分辨率为720x1280的尺寸设计。

这个尺寸720x1280中显示完美，在1080x1920中看起来也比较清晰

（1）屏幕尺寸：

720x1280

状态栏：

50px导航栏：

96px标签栏：

96px虚拟键：

96px

这个尺寸是万用形的

2.Android图标设计尺寸

（1）屏幕尺寸：

320x480px（mdpi）

启动图标：

48x48px操作栏图标：

32x32px上下文图标：

16x16px系统通知图标：

24x24px最细画笔：

不小于2px

（2）屏幕尺寸：

480x800px—480x854px—540x960px（hdpi）

启动图标：

72x72px操作栏图标：

48x48px上下文图标：

24x24px系统通知图标：

36x36px最细画笔：

不小于3px

（3）屏幕尺寸：

720x1280px（xhdpi）

启动图标：

108x108px操作栏图标：

72x72px上下文图标：

36x36px系统通知图标：

54x54px最细画笔：

不小于5px

（4）屏幕尺寸：

1080x1920px（xxhdpi）

启动图标：

144x144px操作栏图标：

96x96px上下文图标：

48x48px系统通知图标：

72x72px最细画笔：

不小于6px

3.Android字体大小规范

Android上的字体为：

Droidsansfallback，是谷歌自己的字体，与微软雅黑很像。

480*800字体舒适度（高分辨率）

（1）长文本

可接受：

21px见小值：

24px舒适值：

27px

（2）短文本

可接受：

21px见小值：

24px舒适值：

27px

（3）注释

可接受：

18px见小值：

18px舒适值：

21px

320*480字体舒适度（低分辨率）

（1）长文本

可接受：

14px见小值：

16px舒适值：

18-20px

（2）短文本

可接受：

14px见小值：

14px舒适值：

18px

（3）注释

可接受：

12px见小值：

12px舒适值：

14-16px

三.网页设计规范（web）

————网页设计规范比较自由

————网页有字体的规范

1.宽度控制

Fierfox和Opear当内容不超出页面高度时将不会显示滚动条

（1）IE6.0：

宽度减少[21]

（2）Firefox：

宽度减少[19]

（3）Opear：

宽度减少[23]

2.尺寸规范

（1）常见尺寸：

●1024x768（常用尺寸）

●1366x768

●1280x800

●1280x1024

●1440x900

●1600x900

●1920x1080

一般网站宽为996px；国内网站大部分还是以1000个像素为界限，因超过1000像素适合在大屏幕上浏览，小屏幕会显得拥挤。

国内尺寸设置比较保守，这样可以保证大部分用户舒适的浏览网页

3.字体规范

（1）常用字体:

中文：

宋体、微软雅黑、黑体

（2）字号:

网页正文/导航字体：

12px-18px之间

网页正文/导航字体（英文）：

10px-16px之间

标题文字：

18px-32px之间（双数）

网页正文/导航字体：

12px-18px之间