一.APP设计规范(ios)
————设计稿一般不使用Android的尺寸(因为Android的五花八门)
1. iphone界面的设计尺寸(设计稿默认iphone6)
(1)iphone6 plus设计版[iPhone7 plus](@3x)
分辨率1242x2208px ppi:401 状态栏:60px 导航栏:132px 标签栏:146px
(2)iphone6 plus放大版(@3x)
分辨率1125x2001px ppi:401 状态栏:54px 导航栏:132px 标签栏:146px
(3)iphone6 plus物理版(@3x)
分辨率1080x1920px ppi:401 状态栏:54px 导航栏:132px 标签栏:146px
(4)iphone6 [iPhone7](设计稿默认)(@2x)
分辨率750x1334px ppi:326 状态栏:40px 导航栏:88px 标签栏:98px
(5)iphone5 - 5c -5s(@2x)
分辨率640x1136px ppi326 状态栏:40px 导航栏:88px 标签栏:98px
(6)iphone4 – 4s(@2x)
分辨率640x960px ppi:326 状态栏:40px 导航栏:88px 标签栏:98px
(1)iphone & ipod Touch第一、二、三代(@1x)
分辨率320x480px ppi:163 状态栏:20px 导航栏:44px 标签栏:49px
2. iphone图标设计尺寸
(1)iphone6 plus (@3x)
App store:1024x1024px 程序应用:180x180 主屏幕:152x152 Spotlight搜索:87x87px 标签栏:75x75px 工具栏和导航栏:66x66px
(2)iphone6(@2x)
App store:1024x1024px 程序应用:120x120 主屏幕:152x152 Spotlight搜索:58x58px 标签栏:75x75px 工具栏和导航栏:44x44px
(3)iphone5-5c-5s(@2x)
App store:1024x1024px 程序应用:120x120 主屏幕:152x152 Spotlight搜索:58x58px 标签栏:75x75px 工具栏和导航栏:44x44px
(4)iphone4-4s(@2x)
App store:1024x1024px 程序应用:120x120 主屏幕:114x114 Spotlight搜索:58x58px 标签栏:75x75px 工具栏和导航栏:44x44px
(5)iphone & ipod Touch第一、二、三代(@1x)
App store:1024x1024px 程序应用:120x120 主屏幕:57x57 Spotlight搜索:29x29px 标签栏:38x38px 工具栏和导航栏:30x30px
3. ipad界面设计尺寸
(1)ipad3 – 4 - 5 – 6 – Air – Air2 – mini2
分辨率2048x1536px ppi:264 状态栏:40px 导航栏:88px 标签栏:98px
(2)ipad1 – 2
分辨率1024x768px ppi:132 状态栏:20px 导航栏:44px 标签栏:49px
(2)ipad Mini
分辨率1024x768px ppi:163 状态栏:20px 导航栏:44px 标签栏:49px
4. ipad图标设计尺寸
(1)ipad3 – 4 - 5 – 6 – Air – Air2 – mini2
App store:1024x1024px 程序应用:180x180 主屏幕:144x144 Spotlight搜索:100x100px 标签栏:50x50px 工具栏和导航栏:44x44px
(2)ipad1 – 2
App store:1024x1024px 程序应用:90x90 主屏幕:72x72 Spotlight搜索:50x50px 标签栏:25x25px 工具栏和导航栏:22x22px
(3)ipad Mini
App store:1024x1024px 程序应用:90x90 主屏幕:72x72 Spotlight搜索: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
状态栏:50 px 导航栏:96 px 标签栏:96 px 虚拟键: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 上的字体为:Droid sans fallback ,是谷歌自己的字体,与微软雅黑很像。
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 之间。