ios 去掉底部状态栏_总结 | 苹果iOS系统的界面规范。

0b5dfe774717d0921859b9b60e7380bc.png

现在,人和什么相处的时间最多?

唯一且正确的答案只有一个那就是手机。除了睡觉,其他时间手机概不离手,而且睁开眼第一时间找的也是“我手机呢?”

ff29d79b31fa0c2bbc65a0baaaf9f545.png

大家都知道手机采用的:一个是苹果的iOS系统,另一个就是谷歌公司的安卓系统。华为的鸿蒙系统虽然早就上线,但是还没有真正运用在手机移动端上,小阿在这里期待着,希望有一天也能写“华为‘鸿蒙系统’的界面尺寸规范。”

这两者之间有一个明显的区别就是iOS系统是非开源的,简单来说就是不能别随意改动的,连图标都是必须带圆角的,对交互设计师很友好的。

c18ca32c6d5ca77a2edeb058139a74a8.png

安卓系统就是开源的,界面可以随意改动,尺寸也没有特别的规范,图标、尺寸成千上万种,根据手机品牌不同,形状也不同,对于交互设计稍微有那么些许不友好。

f09e48373d7ff00ae679d6ba0f8f187d.png

今天我们的主题就是探讨iOS的界面规范。首先苹果分为两种尺寸,一种是中码比如6s、7、8等,这种我们一般切图命名为@2X。还有一种就是Plus版本,这种一般切图命名为@3X。

edc287dc62c591eda8c044c27b09de62.png

苹果6s 的尺寸750px * 1334px,6s Plus的尺寸就是1242px * 2208 px。两者之间的关系就是1.5倍,怎么说呢,就是6s之类的手机想要变成Plus,我们设计师稍微想要偷懒一下设计,只需要整体扩大1.5倍,比如图标。

fdf4d1e9b1a863e2d95fcb504006e256.png

来分析一下界面的尺寸规范:

首先是状态栏,就是信号电池栏的高度为40px。导航栏部分,就是“设置”栏高度为88px。

4f2938e5810b9f283dd4c82485a34150.png

而下边的底部栏(导航栏)高度则为98px。

841c11ecea4bfdd4d42d444bcd1d78c3.png

注意这三种尺寸是规定比较死的。我们做开发遇到Plus版把以上尺寸等比例扩大1.5倍就可以了。剩下的中间空白部分,我们就可以任意填充内容,Banner或者图标?

☆ 关于图标部分

8fcedd56563f6255dd4ed141106df4dd.png

苹果的图标极具有美感,完全符合栅格黄金比例,所以看起来十分协调。因为都是使用的网格进行规范化设计,所以一整套图标都保持着高统一性。

b4343e6bb165f5a01ab270a38fca6c88.png

整个点击图标最小不能小于44px,一般大小为58px,圆角为12px,但是我们习惯取为整数60px,就会非常的标准。为什么一定有最小的控制呢?因为我们手指有一个触碰面呀~低于上述的宽度,就可能碰不到。一定要非常注意用户的使用感受哦。

☆ 关于分割线部分

2746eea2fe34f4021d8d6d7b3fcb484a.png

注意分割线不是一条线,是一个宽度为1px的矩形,而且颜色多为灰色。

☆ 关于板块与板块之间

eede4513978cab0f36cf3c101a7f1ec3.png

板块与板块之间的灰色条间隔是30-70之间,一般来说取整数。iOS系统采取了70 px,有利于减轻用户的阅读负担。列表的高度一般高于88 px,列表与列表之间的距离是10px-30px,太小会有碰撞。作为UI设计师,这一点是要考虑的是吧?

☆ 关于列表中的尺寸规范以及字体要求

8f5d55dfde3256ae681864b00c3fa860.png

☆ 关于左右间隔的安全区域

fe895d21f07117abd4d6760047dfabee.png

这个安全区域又称之为留白边距,iOS的原生态页面【设置】页面的边距是30px,根据不同产品有不同的调整,宽度一般在16px--30px浮动,最大的特点就是数值全是偶数。

☆ 关于切换按钮的尺寸

7c4ad22db1131056b8b517922f9a3952.png

a0611a05e78186f0a70d8595a9c7c014.png

☆ 关于字体

e0e7af9291d057766d561c111d52d3c4.png

iOS系统的字体是苹方字体,字体的颜色和粗细也大有讲究,标题等文字就是粗体,一些说明文字等就是浅色非加粗体。常常用文字的粗细体来区分重要信息和次要信息,进行信息层级的划分。字体颜色很少采用纯黑色,一般用的是深灰色和浅灰色。

f66dcc438a0c415fb05e146f3b25ec6d.png

主标题的字体大小设置一般是32-36左右,加粗居中。列表中的文字就要小一些,字体大小为30,不会加粗。辅助性字体大小一般24-26。说明文字一般不会小于22,最小设置为20,再小就看不到啦。另外需要注意的一点是所有的字号设置都必须为偶数,上下级内容字号极差关系为2-4号。

关于苹果界面的小部分尺寸规范就介绍到这里,下期再做安卓界面的尺寸介绍。

作为UI设计师,一定要具体掌握界面的大小尺寸来适应美学观点,让人感觉协调舒适,能在有效的范围内极快吸引用户的注意力。

注:本文部分内容来自微信公众号“阿多比设计学院”,首发链接:https://mp.weixin.qq.com/s?,如需转载请务必获得授权并标明出处。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值