交互设计学习_1_iOS与Andriod的设计规范

交互设计学习_1_iOS与Andriod的设计规范_第1张图片
交互设计学习_1_iOS与Andriod的设计规范_第2张图片

同款App的iOS版本与Android版本界面对比:

网易云音乐,ios版的页面布局采用标签导航;android版页面布局为抽屉导航+顶部分段式标签导航;为什么这样设计呢?答案是两个平台不同的UI设计规范;

交互设计学习_1_iOS与Andriod的设计规范_第3张图片

同样,知乎的iOS版采用页眉为操作栏,页脚为标签导航栏。android版为抽屉导航+顶部应用bar;

交互设计学习_1_iOS与Andriod的设计规范_第4张图片
如下是iOS平台设计规范,页眉一般为导航栏,页脚为标签栏或工具栏;
交互设计学习_1_iOS与Andriod的设计规范_第5张图片
交互设计学习_1_iOS与Andriod的设计规范_第6张图片
交互设计学习_1_iOS与Andriod的设计规范_第7张图片
交互设计学习_1_iOS与Andriod的设计规范_第8张图片
交互设计学习_1_iOS与Andriod的设计规范_第9张图片
交互设计学习_1_iOS与Andriod的设计规范_第10张图片
交互设计学习_1_iOS与Andriod的设计规范_第11张图片
交互设计学习_1_iOS与Andriod的设计规范_第12张图片
交互设计学习_1_iOS与Andriod的设计规范_第13张图片
android 4.0的时候推出了Action bar
交互设计学习_1_iOS与Andriod的设计规范_第14张图片
总体上Action功能比较重,既可以跳转页面,也可以做其他操作。
交互设计学习_1_iOS与Andriod的设计规范_第15张图片
交互设计学习_1_iOS与Andriod的设计规范_第16张图片
当action bar无法容纳太多的操作按钮时,可以考虑将操作区放在底部;同时页面导航可以放在actionbar下方;
交互设计学习_1_iOS与Andriod的设计规范_第17张图片
总结:android4.0 action bar的四种应用方式:
交互设计学习_1_iOS与Andriod的设计规范_第18张图片
android 5.0就是在扁平化成了二维UI后在加了个图层的概念来实现前后层UI展示;
交互设计学习_1_iOS与Andriod的设计规范_第19张图片


经典的抽屉导航诞生了~

交互设计学习_1_iOS与Andriod的设计规范_第20张图片
actionbar改名为App Bar,首页最左侧为抽屉导航入口。


交互设计学习_1_iOS与Andriod的设计规范_第21张图片
实际的应用如知乎
交互设计学习_1_iOS与Andriod的设计规范_第22张图片

再来近距离看下action bar和App bar的区别;

交互设计学习_1_iOS与Andriod的设计规范_第23张图片
页面导航上的区别
交互设计学习_1_iOS与Andriod的设计规范_第24张图片
交互设计学习_1_iOS与Andriod的设计规范_第25张图片
使用抽屉导航实现主导航下子导航页面切换的示例
交互设计学习_1_iOS与Andriod的设计规范_第26张图片
交互设计学习_1_iOS与Andriod的设计规范_第27张图片
交互设计学习_1_iOS与Andriod的设计规范_第28张图片
交互设计学习_1_iOS与Andriod的设计规范_第29张图片
交互设计学习_1_iOS与Andriod的设计规范_第30张图片
交互设计学习_1_iOS与Andriod的设计规范_第31张图片
交互设计学习_1_iOS与Andriod的设计规范_第32张图片
交互设计学习_1_iOS与Andriod的设计规范_第33张图片
交互设计学习_1_iOS与Andriod的设计规范_第34张图片
交互设计学习_1_iOS与Andriod的设计规范_第35张图片

你可能感兴趣的:(交互设计学习_1_iOS与Andriod的设计规范)