每日分享:4.组件详解——导航

  • 经验类型规范/资料
  • 经验属性原创文章
  • 经验版权署名
766 1 4 2019-10-14

什么是导航?


导航顾名思义,导航就如同目录和地图,为用户提供更清晰的用户体验,能够让用户快速、准确的找到所需内容,起到引导作用。


其实页面中点击后可以跳转到另一界面的所有文字、图片、图标或按钮都可以称为导航。所以它其实包括非常广泛,一个界面中往往有多层级的导航。比如淘宝:

Image title




导航分类


大多数平台设计规范中指的导航包括以下导航类型:底部导航、顶部导航、抽屉式导航、左侧导航、下拉式导航、宫格式导航。

Image title



标签导航(tab bar)


而我们常说的手机端界面中的标签导航(tab bar),即底部导航、顶部导航、抽屉式导航,也是所有导航中最常讨论的部分。下面我们来分析三种导航的特点:


1.MD规范(安卓)的设计中导航主要采用顶部菜单栏、侧边菜单栏。iOS的设计中主要采用底部菜单栏。这是因为安卓手机底部自带三个按键,处于底部的导航容易和这三个按键发生误触。但就现在手机大屏趋势,底部导航更适合单手操作。越来越多的app无论安卓还是iOS端都采用了底部导航栏,两个系统的app界面设计也差别越来越小。但设计师还是需要考量设备的不同,选择最佳导航方式。


2.层级:几种导航可以同时存在同一个界面中。但底部导航的层级最高,常用为一级导航,其中每个 tab 承载了应用的一个维度的功能。进入二级界面后,底部导航是否继续存在,取决于二级界面需要沉浸式体验还是让用户发现、探索新内容。例如淘宝希望用户进入商品列表后继续浏览,则不出现底部导航,让用户沉浸在琳琅满目的购物体验中。而apple store 等app则鼓励用户搜索和发掘新应用,因此二级界面下底部导航的存在方便了用户。


3.底部导航:建议底部图标3-5个。当前选中图标需要与未选中图标区分,明显,还可以加入文字描述。适量加入动画效果,让界面活泼生动。


4.顶部导航:可以多个,但需要保证足够的间距。若分类较多,可以左右滑动拖出其他分类选项(滑动式顶部导航)。样式以文字为主+下方矩形条强调。


5.抽屉导航:抽屉导航的菜单往往打开新开页或弹窗,关闭新开页后返回主界面(抽屉关闭状态)。




 

                                        是不是觉得导航其实很简单!


全部评论:1

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票