IOS及Android学习总结(一)

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




最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,921评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,635评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,393评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,836评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,833评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,685评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,043评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,694评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,671评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,424评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,027评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2 343

推荐阅读更多精彩内容