美文网首页
IOS及Android学习总结(一)

IOS及Android学习总结(一)

作者: 开心冰激凌 | 来源:发表于2016-06-15 18:00 被阅读0次

来公司有两个多月了,除了正常的工作以外,一有时间,我喜欢多多搜集关于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的数字,字号也是如此。



相关文章

网友评论

      本文标题:IOS及Android学习总结(一)

      本文链接:https://www.haomeiwen.com/subject/ymvhdttx.html