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 的教程,显然是不建议直接拿来用。
在不同的场景,寻找最适合的方案才是上策。
原文地址:体验进阶(公众号)
作者:设计师ZoeYZ
转载请注明:学UI网》iOS 规范与 Material Design 哪里不同?官网总结了这几点
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务