iOS 规范与 Material Design 哪里不同?官网总结了这几点

2021-11-23    lanlanwork


图片

 

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 哪里不同?官网总结了这几点

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务




日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档