交互设计学习_2_移动产品模式设计之导航

在信息架构设计环节中需要设计产品的页面导航,常见的一级导航有标签导航、分段式导航、抽屉导航、舵式导航;二级导航有列表导航、轮播导航、宫格导航;

平时在竞品分析中可以多看些优秀的产品,留意其导航模式,是否符合其产品需求;


交互设计学习_2_移动产品模式设计之导航_第1张图片
交互设计学习_2_移动产品模式设计之导航_第2张图片
交互设计学习_2_移动产品模式设计之导航_第3张图片
交互设计学习_2_移动产品模式设计之导航_第4张图片
导航设计不是乱用的,得按照具体的使用场景来决定的~
交互设计学习_2_移动产品模式设计之导航_第5张图片
如果展示给用户的功能模块少于5个且重要性平级,则建议使用标签导航
交互设计学习_2_移动产品模式设计之导航_第6张图片
交互设计学习_2_移动产品模式设计之导航_第7张图片
Android 4.0版本下,为了不与底部软键盘隔离,标签导航放在页面上方
交互设计学习_2_移动产品模式设计之导航_第8张图片
当导航页面过多,大于5个时,可以做成滚动式标签导航;
交互设计学习_2_移动产品模式设计之导航_第9张图片
标签式导航的缺点,占空间
交互设计学习_2_移动产品模式设计之导航_第10张图片
分段式导航,节省页面空间
交互设计学习_2_移动产品模式设计之导航_第11张图片
交互设计学习_2_移动产品模式设计之导航_第12张图片
但不宜过多
交互设计学习_2_移动产品模式设计之导航_第13张图片
舵式导航
交互设计学习_2_移动产品模式设计之导航_第14张图片
抽屉式导航在于隐藏非核心功能
交互设计学习_2_移动产品模式设计之导航_第15张图片
交互设计学习_2_移动产品模式设计之导航_第16张图片
交互设计学习_2_移动产品模式设计之导航_第17张图片
交互设计学习_2_移动产品模式设计之导航_第18张图片
交互设计学习_2_移动产品模式设计之导航_第19张图片
交互设计学习_2_移动产品模式设计之导航_第20张图片
交互设计学习_2_移动产品模式设计之导航_第21张图片
交互设计学习_2_移动产品模式设计之导航_第22张图片
交互设计学习_2_移动产品模式设计之导航_第23张图片
交互设计学习_2_移动产品模式设计之导航_第24张图片
交互设计学习_2_移动产品模式设计之导航_第25张图片
交互设计学习_2_移动产品模式设计之导航_第26张图片

你可能感兴趣的:(交互设计学习_2_移动产品模式设计之导航)