移动端设计尺寸小结
总结出来,以后用的时候直接查看,会继续补充完整
Android 规范
1.尺寸
常见尺寸:mdpi(320*480) : hdpi(480*800) : xhdpi(720*1280) : xxhdpi(1080*1920)=1:1.5:2:3:4
设计尺寸:xhdpi(720*1280)
注:以下以720*1280总结各尺寸
2.界面布局尺寸
状态栏:H=50px
导航栏与操作栏与标签栏:H=96px
内容区域:H=1038px
两侧间距:24px
列表:一行98px 二行134 三行168px
3.图标
启动图标:96px\48dp
导航图标:64px\32dp(图形区域48px)
底部图标:96px\48dp
小图标与小场景:32px\16dp(图形区域24px)
通知图标:48px\24dp(图形区域44px)
4.文字
英文字体:Roboto 中文字体:Noto
在界面中的文字分为三个层级,主文、副文、提示文案等
在白色的背景下,字体的颜色层次其实就是黑、深灰、灰色
字号大小分别是24px 28px 32px 40px 64px
颜色分别是54% 87% 87% 87% 54%(透明度)
背景色#EEEEEE 分割线浅#E5E5E5 分割线深#CCCCCC
文本大小舒适值:
长文本:40px 下线:32px
短文本:40px 下线:32px
注释:32px 下线:26px
5.标注:所有设计尺寸除以2交给工程师
6.切图4套 :1倍(720*1280为基准) 1.5倍 除以1.5 除以2
IOS 规范
1.尺寸
常见尺寸:640*960 640*1136 750*1334 1242*2208(1080*1920)
设计尺寸:750*1334
2.界面布局尺寸
(1)750*1334时
状态栏:H=40px
导航栏与工具栏:H=88px
标签栏tab bar:98px
两侧间距:24px
列表:88px
(2)1242*2208时
状态栏Status Bar:H=60px
导航栏Navigation Bar与工具栏tool bar:H=132px
标签栏tab bar:147px
两侧间距:36px
列表:132px
3.图标
@2X
最小点击范围44px
导航栏图标:44px
底部图标:50px(最大96*64)
设置图标:58px
@3X
最小点击范围66px
导航栏图标:66px
底部图标:75px(最大144*96)
设置图标:87px
1024*1024 Retina APP Icon for APP Store(高清屏的APP Store)
512*512 APP Icon for APP Store(普通屏幕的APP Store)
120*120 6的主屏幕尺寸
180*180 6plus的主屏幕尺寸
114*114 5/4s/4的主屏幕图标尺寸
57*57 3GS的主屏幕图标尺寸
58*58 Retina Settings图标尺寸
29*29 Settings图标尺寸
4.文字
英文字体:Helvetica Neue 中文字体:冬青
关于字体大小的问题
顶部操作栏文字大小 34-38px
标题文字大小 28-34px
正文文字大小 26-30px
辅助性文字大小 20-24px
Tab bar文字大小 20px
在界面中的文字分为三个层级,主文、副文、提示文案等
在白色的背景下,字体的颜色层次其实就是黑、深灰、灰色
字号大小分别是32px 26px 20px
颜色分别是#999999 #666666#333333
背景色#EEEEEE 分割线浅#E5E5E5 分割线深#CCCCCC
文本大小舒适值:
长文本:32~34px 下线:26px
短文本:32px 下线:28px
注释:28px 下线:24px
5.标注:以750*1334设计尺寸标注交给工程师
6.切图3套 :@1X(750*1334图标的基础上除以1.5倍) @2X(750*1334) @3X(750*1334图标的基础上乘以1.5倍)
命名规范
导航栏:Nav 按钮常态:nor 搜索:search 返回:back
主菜单栏:Tab 按钮选中:sel 个人资料:profile 刷新:refresh
背景:bg 按钮按下:down 用户:user 删除:delete
按钮:btn 图标:icon 弹出:pop 编辑:adit
举例:nav-bg nav-btw-nor nav-btn-sel







































