开启左侧

10、用户体验设计之导航

[复制链接]
1954 3
词条 - 导航
导航是引导用户访问网站的栏目、菜单、在线帮助、分类等布局结构等形式的总称。
与标签、链接、回收站等许多经典的名词一样,界面设计中的「导航」一词也是借用了现实生活中的概念。导航就像是高速公路上的路牌,告诉人们现在所处的位置,以及如何到达下一个目标。
导航需要解决的问题:
1) 标示当前位置
2) 清楚标示退出
3) 支持取消和重做
4) 可以使用超链接




案例 - Android 4.0 设计规范中的几种典型导航极其优缺点
1. 下拉式导航(Spinner)
下拉式导航通常在界面的左上角,显示当前的状态,点击后会出现一个下拉菜单。
优点:
在屏幕上的位置比较明显;
既显示当前所在位置,又提供跳转到其他页面的方式。
缺点:
通常在屏幕左上角,是单手操作的死角。
spinners_actionbar.png




2. 列表式导航(List)
列表式导航很简单,就是内容的纵向排列。它还有一种变种就是网格列表(Grid List)。
优点:
所有信息显而易见;
比较容易图文结合,更加直观。
缺点:
一屏能容纳的信息有限;
重点不够突出。
gridview_vertical.png




3. Tab 式导航
Tab 式导航通常在顶栏下面。可以通过点击或滑动的方式来切换。Tab 又有固定式和滚动式两种。
优点:
手势切换方便。
缺点:
只有 3-4 个 Tab 可见;
无法快速定位到离当前页较远的 Tab。
tabs_standard.png
tabs_stacked.png




4. Drawer 导航
Drawer 是 Google 最近比较推崇的一种导航。Gmail,Google+,Google Play Music 等拳头产品悉数采用了这种导航。Drawer 类似于侧边栏导航,可以通过从屏幕左侧边缘滑动呼出。
优点:
常驻左上角,可以在任何次级页面很方便地呼出;
占用屏幕空间很小。
缺点:
可见性较差;
首次使用较难理解。
navigation_drawer_overview.png




(By 姜魁)
———————
欢迎转载,转载请发邮件致 mb@brixd.com 联系文章作者,并请注明出处和链接,也欢迎大家投稿。
企业 App 研究网址:mb.brixd.com

举报

回复

3 个评论

liusay    发表于 2014-11-18 14:15:28  | 显示全部楼层
学习了
konrad    发表于 2015-3-26 11:05:29  | 显示全部楼层
经验之谈 谢谢
mable0405    发表于 2015-12-22 14:34:23  | 显示全部楼层
学习了,谢谢
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

图文热点

更多

社区学堂

更多

客服中心

关于我们
关于我们
友情链接
联系我们
帮助中心
网友中心
购买须知
支付方式
服务支持
资源下载
售后服务
定制流程
关注我们
官方微博
官方空间
官方微信
快速回复 返回顶部 返回列表