聊聊UI界面中导航设计:UI组件

释放双眼,带上耳机,听听看~!

在UI界面中,导航就跟现实世界中的地图差不多,展示着已经存在的地理位置(界面功能),与到达该位置的路径(导航层级)。

聊聊UI界面中导航设计:UI组件

TOB导航应用场景

顶部栏导航

顶部栏导航根据导航层次及功能承载量多寡主要分为以下三类,一类是常在网页中应用到的仅一级导航展示,该类型常应用于面向TOC消费者的web端产品,功能简单、层级浅。

聊聊UI界面中导航设计:UI组件

图为站酷

第二类基本都面向商家端的TOB客户的web端产品中,呈两栏导航展示,应用于功能数量不多,且重要度都较高,或者为快捷操作等。

聊聊UI界面中导航设计:UI组件

图为禅道(互联网产品设计测试平台)

聊聊UI界面中导航设计:UI组件

图为微信公众平台

第三类导航多应用于拥有多个面向TOB的产品,属于平台型,承载大量服务,所以往往还有搜索及分类。以上两类主要应用于单一产品的功能导航。像阿里云、腾讯云、百度云等等官网都采用第三类。

聊聊UI界面中导航设计:UI组件

图为腾讯云

侧边栏导航

侧边栏导航与顶部导航类似,都属于一级导航,也会根据功能层级数量有不同的呈现样式。相对于顶部栏导航,视觉所占比例更重,操作更加便捷。一般为tob产品的常用导航类型。

聊聊UI界面中导航设计:UI组件

当功能仅两级时应用

聊聊UI界面中导航设计:UI组件

当功能为三级时应用

聊聊UI界面中导航设计:UI组件

当功能很多时应用

分段导航/标签页

侧边栏导航与顶部导航属于一级导航样式,分段导航在web端多叫标签页,多应用于二级或次级导航样式,且分段内容具备关联性的快捷操作。

聊聊UI界面中导航设计:UI组件

根据不同的展现层级,标签页的UI样式有以下几类,注:不同UI样式并无明确的层级区分,设计师在设计过程中可自行通过色彩、背景填充、位置关系来区分分段导航的视觉优先级。

聊聊UI界面中导航设计:UI组件

图片来源antdesign

树结构导航

其实在上面说过的一级导航样式也有树逻辑(由树干到分支),这里说的树结构导航应用于更加复杂的树逻辑场景(树干和分支都很多),在tob产品中常用于城市园区物业管理场景中。

聊聊UI界面中导航设计:UI组件

TOC导航应用场景

toc产品大家在日常手机使用中就见过不少类型,这里简单的描述一下。

常用一级导航主要为标签式导航和舵式导航,标签式导航的优点是固定在底部(IOS)或顶部(安卓),可以进行快捷操作,缺点是会占据一定的垂直空间,在以前的小屏幕手机中对于信息咨询类的产品会有比较大的影响。

聊聊UI界面中导航设计:UI组件

所以有时也会采用抽屉式导航(最早应用于安卓)来收纳功能,目前市面上的产品很少应用侧边栏导航了,因为侧边栏导航多了一次交互点击,且位置离拇指的操作区域较远,收纳在侧边栏的功能会减少用户的点击行为。

聊聊UI界面中导航设计:UI组件

舵式导航常用来重点突出某一个功能或某个快捷操作,目前在充电产品中比较常见。

聊聊UI界面中导航设计:UI组件

小桔充电小程序

分段导航、下拉菜单式导航可以放在一起说,分段导航最早应用于IOS,下拉菜单导航最早应用于安卓4.0,经过时间的演变,分段导航UI不局限于方框,下拉菜单导航不局限于下拉。功能和交互几乎一致,展现形式有细微差别。

聊聊UI界面中导航设计:UI组件

现在的控件应用

聊聊UI界面中导航设计:UI组件

早期的控件应用

聊聊UI界面中导航设计:UI组件

目前下拉的应用

列表式导航,主要用于辅助主导航的二级导航,或者多信息的罗列展示,特点是空间利用率较高,展示内容更多。

聊聊UI界面中导航设计:UI组件

宫格式导航,目前各大APP常用的金刚区、一些工具类产品(米家、美图秀秀等)都应用了宫格式的导航,金刚区的业务目的是流量分发,工具类产品的目的是作为快捷入口。

聊聊UI界面中导航设计:UI组件

卡片式导航,卡片式导航多应用于视频内容、咨询内容、图片内容的缩略展示,通过图片或GIF的视觉效果来吸引用户目光,引导用户发生点击行为。

聊聊UI界面中导航设计:UI组件

综上所述,导航的目的是基于已有功能的路径引导或快捷操作,但是不局限于以上的表现形式,以满足功能需求的前提下去思考更适用的导航样式设计,才是我们设计师的价值体现。

给TA买糖
共{{data.count}}人
人已赞赏
产品设计

WEB端PM出圈设计移动端产品思考

2020-8-28 15:13:45

产品设计

如何创建顾客体验地图?

2020-8-28 20:45:54

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索