来公司有两个多月了,除了正常的工作以外,一有时间,我喜欢多多搜集关于APP页面设计的相关知识。做到多看,多练习,争取学以致用。经过这段时间的恶补,终于有些眉目了。
Iphone 设计尺寸
分辨率 iOS 状态栏高度 导航栏 标签栏 倍数关系
320x480 Iphone 3Gs 20px 44px 49px 1x
640x960 Iphone 4/4s 40px 88px 98px 2x
640x1136 Iphone 5/5s/5c 40px 88px 98px 2x
750x1334 Iphone 6 40px 88px 98px 2x
1242x2208 Iphone 6 plus 60px 132px 146px 3x
2208x1242 6 plus 横屏尺寸 3x
iOS9使用的西文字体由Helvetica Neue变更为 San Francisco,
iOS9中文字体由此前的黑体-简变更为苹方黑体
关于字体大小的问题
顶部操作栏文字大小 34-38px
标题文字大小 28-34px
正文文字大小 26-30px
辅助性文字大小 20-24px
Tab bar文字大小 20px
Android 设计常用尺寸
屏幕密度 Android 状态栏高度 导航栏 标签栏 倍数关系 标注单位
MDPI (160ppi) 320x480 25px 48px 48px 1x 44x44 dp 132x132 px
HDPI (240ppi) 480x800 37px 72 px 72 px 1.5x 44x44 dp 88x88 px
XHDPI (320ppi) 720x1280 50px 96px 96px 2x 44x44 dp 66x66 px
XXHDPI (480ppi) 1080x1920 75px 144px 144px 3x 44x44 dp 44x44 px
Android开发使用单位
dp:可以保证控制在不同密度的屏幕上按照这个比例单位换算显示相同的效果
sp:为了保证文字在不同密度的屏幕上显示相同的效果
当屏幕密度为MDPI(160ppi)时,1dp=1px 当屏幕密度为MDPI(160ppi)时,1sp=1px
720*1280的布局规范 Font Size
超小号字 12sp 24px
小号字 14sp 28px
中号字 16sp 32px
大号字 18sp 36px
标注:建议标注颜色时,两种色值表达都标上(16进制&RGB)。
安卓设计使用的字体:
在Android 5.0之后,使用的是思源黑体,字体文件有2个名称,“source han sans”和“noto sans CJK”。
思源黑体是Adobe和Google领导开发的开源字体,支持繁简日韩,有7种字体粗细
西文字体:Roboto Android西文默认字体。
图标的点击区域
IOS人机指导手册里推荐的最小可点击元素的尺寸是44*44 point(点),在设备上1 point等于1像素,所以转换成像素就是44*44像素
所有能点击的图片不得小于44px(Retina需要88px)
安卓最小可操作尺寸48dp:这和IOS的最小点击区域性质是一样的,都是考虑到手指点击的灵敏性的问题,设计可点击控件的时候要考虑到这一点。
图标的提交尺寸
IOS系统可以自动把图片裁剪为圆角,所以提交图标的时候,你只需要提交正方形的PNG图片即可。
1024*1024 Retina APP Icon for APP Store(高清屏的APP Store)
512*512 APP Icon for APP Store(普通屏幕的APP Store)
120*120 6的主屏幕尺寸
114*114 5/4s/4的主屏幕图标尺寸
57*57 3GS的主屏幕图标尺寸
58*58 Retina Settings图标尺寸
29*29 Settings图标尺寸
桌面图标 (app icon)
for iPhone6 plus(@3x) : 180 x 180
for iPhone 6/5s/5/4s/4(@2x) : 120 x 120
通常UI交付给开发的资料有:
1. 标注图(以640为宽度尺寸为基准标注)
2. 2x切图(以640为宽度尺寸为基准切图)
3. 3x切图(以1280为宽度尺寸为基准切图)
开发看到这份标注,可以自己用上面的数字乘以1.5得出3x的数字,字号也是如此。