IOS UI尺寸规范

广州/UI设计师/7年前/4416浏览
IOS UI尺寸规范

看后感,很基础的知识点,为了自己加强记忆,就记录下来了。

IOS设备分辨率及栏高度

主流的IOS设备有iPhone 6/7、iPhone 6/7 Plus、iPhone 5/SE、iPad/iPad mini、iPad Pro这5种,在屏幕分辨率、栏高度,还是在应用图标,设计师提交给开发人员的切片大小,前者始终是后者的1.5倍,并且分别以@3x和@2x在文件名结尾命名。

号外:要记着这么一大堆数字确实不容易,我分享一个傻方法。

第一步:拿起你的苹果设备,打开个常见的APP(如微信),全屏截图。

第二步:把截屏下来的APP图片发到电脑上。

第三步:图片用PS打开,看下图片信息,在拉辅助线量一下,什么状态栏高度,导航栏/工具栏高度,标签栏高度就清清楚楚了。

不过建议硬记住750X1334 px,为什么?因为有人问你,你一个都不知道显得你很不专业吧!(一般找工作,人事会问你尺寸的问题,有备无患)

当然现在网络时代,不知道问度娘,度娘告诉你。



IOS应用图标尺寸

最大尺寸是1024X1024 px,方便系统自动适配到其他各个应用场景。缩放图片可能会失真,为了高保,设计师可以设计以下几个尺寸的图标:120x120px、80X80px、58X58px



IOS功能图标尺寸

独立出现在应用界面中的按钮,2px宽的线框绘制成的图标。在导航栏和工具栏使用同样的尺寸,44X44 px,建议不小于这个尺寸。在标签栏上的图标是50X50 px,建议不超过96X64px。(@3x图标是3 px宽线框)



IOS文本规范

34px:用于导航栏标题和导航栏左右两侧的文本按钮,工具栏文本按钮、设置列表文本、警告框标题、短信聊天视图的气泡文本以及表格视图的文本标题,通常都使用粗体和黑体来突出信息的重要性。

 

30px:用于文本标题、正文。

 

28px:该字号在iOS原生应用中很少出现,在其他应用中通常用于副标题、正文、段落文本。

 

26px:非常常用的字号,用于副标题、辅助性或提示文本。

 

24px:在界面中显示偏小,副标题、辅助文本。


22px:用于标签栏字段或辅助性文本。


46
Report
|
112
Share
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
一大波可爱小动物
Homepage recommendation
大家都在看
Log in