Alice

手机端设计通常要么参考 iOS 规范,要么参考 Material Design 规范。究竟哪个设计规范更好,这个很难说得清。用 iOS 的规范的直接好处是,大多设计师及领导们都用 iPhone,用 iOS 规范设计审稿方便。然而 iPhone 在国内实际市占不到 10%,从用户量级来看,和 Android 出自一家的 Material Design,更加贴近广大群众的习惯。不过从提供的资料和文档来看,Material Design 提供的细节规范、尺寸能资料,比 iOS 详细齐全。Material Design 的官网上甚至有一篇文章,教你如何通过十个步骤,把 iOS 规范的设计稿,改成 Android 规范,简直不要太贴心。

今天就来以这篇「iOS 转Material Design 官方教程」为基础,说对比一下这两个设计规范的差异。

图片

 

1.  屏幕尺寸

图片

iOS 规范没有特别规定的屏幕尺寸,因为不同尺寸的 iPhone 宽度不同。

图片

以前常用的是 iPhone 8 的 375×667,后来常用的是 iPhone 11 Pro / X 的 375×812

但是 Material Design 的屏幕尺寸就很明确,一直都是 360×640,看起来就让强迫症很舒适的数字。

 

2. 手势指示条

图片

iPhone 的底部都是统一的手势指示条,而 Android 手机底部可能是三个导航按钮,也可能是手势指示条,甚至可能什么都没有。

Material design 的示意图上,通常底部没有任何东西,所以设计稿也可以简单点,手势条和导航按钮都不用放。

 

3.  状态栏

图片

iOS 的状态栏很高的,如果改成 Material Design 就会窄很多。

上面是比较简单的展示形式,下面是 Material Desgin 官网的示意图,高度是 24:

图片

 

4.  底导航

图片

iOS 的底导航比 Material Design 更高,给手势条留出的位置更高,而且常用磨砂玻璃做背景。

而下图是 Material Design 官网给出的底导航尺寸,字号规定是 12,非常清晰了吧:

图片

 

5. 下拉浮层

图片

iOS 使用很多 Action Sheet,而 Material Design 则较少使用这类浮层,较多使用页面。

当然,Material Design 也是有类似浮层的,叫做 Bottom Sheets,只是一般只作为菜单使用:

图片

 

6.  页签

图片

iOS 规范的页签是上图左侧这种拟物风格的,而 Material Design 的页签是上图右侧这种简单的线条风格。

下图是 Material Design 官网给出的尺寸规范,推荐字号是 14:

图片

 

7. 表单

图片

iOS 和 Material Design 的表单还是有挺多差异的,例如:

  • iOS 的表单项之间有分割线,而 Material Design 没有。
  • iOS 的表单项之间右侧一般放置箭头,Material Design 则可能是图标。
  • iOS 的文本框都是简单的下划线,Material Design 可能是矩形框也可能是下划线。
  • ……

内容太多不一一举例了,还是自己去看规范比较好。

 

8. 样式

图片

iOS 喜欢用浅色大阴影,而 Material Design 一般用比较细的深色阴影。

两边的复选框也不一样,iOS 喜欢全部用圆形,而 Material 则严格遵照复选框应该是方形的心理习惯。

 

对比

图片

对比一下两边的差异,看看有多不同。

 

总结

大部分公司为了节约成本,并不会为手机端搞两套设计,通常是两个平台规范都要综合考虑。

所以 Material Design 这把 iOS 规范直接改成 Material Design 的教程,显然是不建议直接拿来用。

在不同的场景,寻找最适合的方案才是上策。

不过要说设计资料,还是 Material Design 提供得比较丰富,适合新人学习借鉴,例如我给大家准备了几个 Material Design 的组件方便下载,关注公众号,后台回复【MD组件】:

图片

 

原文地址:体验进阶(公众号)

作者:设计师ZoeYZ

转载请注明:学UI网 » iOS 规范与 Material Design 哪里不同?官网总结了这几点

登录收藏
 
你可能喜欢的:
业务想大多全,用户要精准简,首页设计该如何破局?业务想大多全,用户要精准简,首页设计该如何破局?
最近访谈了海外用户,总结几点意外收获最近访谈了海外用户,总结几点意外收获
案例锦囊|交互设计中「情感化」设计优秀案例(二)案例锦囊|交互设计中「情感化」设计优秀案例(二)
这个练习虽然已经不错了,但我觉得还可以有以下几点能优化!这个练习虽然已经不错了,但我觉得还可以有以下几点能优化!
如何高效地进行网页设计?重点关注这些要素如何高效地进行网页设计?重点关注这些要素
工作经验| B 端产品组件设计细节及经验分享(三)工作经验| B 端产品组件设计细节及经验分享(三)
作品集别用这几个设计目标了,太老套作品集别用这几个设计目标了,太老套
项目总结|红包设计测试,驱动裂变数翻三倍项目总结|红包设计测试,驱动裂变数翻三倍
设计师如何高效沟通需求设计师如何高效沟通需求
如何基于业务思考设计B端的IP活动如何基于业务思考设计B端的IP活动