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等,并没有像材料这样具体的定义。