Material design 和 iOS 10 手机交互上的相同和区别

https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/

https://material.io/guidelines/material-design/introduction.html

1、结构

两家叫法不同，大体上都是4个栏，顶部状态栏。状态栏下是放带有页面名称的一栏。底部的导航栏。位置不甚明确的工具栏。

一级nav bar 都在页面底部，通常3-5个，和iOS10 一样。超过5个可以考虑抽屉导航。这点和我以前的认知很不一样。

2、bottom sheet   VS   action sheet 、 activity views

材料设计的bottom sheet分两种，一种是常见的modal bottom sheet，一种是整合为页面一部分的persistent bottom sheet（就像字面意思一样，一直都显示）。

这个modal bottom sheet里的内容可以是列表式的，也可以是矩阵式的。包含的内容可以是按钮、文本，甚至是链接，可以直接链接到其他APP，不用跳转到别的APP。

modal bottom sheet里的列表太长的时候可以显示部分，使用上下滚动的方式看到更多内容。action sheet 不具有这个功能，activity views可以左右滑动显示更多。并且不支持连接到其他app。modal bottom sheet支持下滑收起，另外两者不支持。modal bottom sheet 可使用的样式更多样化一些，可发挥的空间也更大。

3、button

材料设计里按钮样式比较多，有图标按钮（FAB也是一种图标按钮）、常规的矩形按钮、文字按钮，三者对应不同的深度。iOS 规范中不含有常规的矩形按钮。

4、alert/dialog

材料的dialog包含的范围更广一些，样式也不止alert一种形式，还包括simple dialogs 和confirmation dialogs。样式上除了小弹框的形式，也有全屏的形式。并且在text需要多行的情况下，替代simply menu。

材料dialog中的alert的两个按钮采用右对齐的方式，iOS的alert使用左右均分居中的方式。

5、选择控件

材料会使用dropdown box的形式，iOS在手机不推荐使用dropdown或者叫popover。iOS的通常采用滚动选择控件picker,picker不一定在屏幕的最下方。材料也有选择时间的picker，往往是以dialog的形式出现，选择的方式也有自己的特色。

6、cards & views

材料的cards 使用场景很多。分有投影圆角和没有投影圆角两种。前者适合每个卡片包含的内容比较多，比较详细，或者卡片之间内容不同的情况。没有投影和圆角效果的cards适合单卡展示的内容比较少，并且以预览为主的列表。

cards和dialog样式上的区别是，深度不同，dialog更高一些是24dp，cards在没被选中的状态下是2dp，选中是8dp。text button的位置不同，dialogs靠右，cards靠左（图标button不一定靠左）。

cards的形式和内容可以很灵活，可以是图、文字、图标等等内容，也不一定都要大小一样。

iOS也定义了不同类型内容的样式，比如图片推荐使用矩阵的view，表格有tables，大段的文字推荐text views等，并没有像材料这样具体的定义。