关于UI设计中的导航栏(下)

2022-09-271026

上篇文章主要讲了导航栏的作用和样式,下面讲述导航栏中的微交互和导航栏的异同点。

1.导航栏中的微交互

众所周知,导航栏最主要的作用是方便用户随时进行上一步或部分功能的下一步操作,帮助用户不迷路,但有时候,导航栏还能协助用户快速完成任务,以及交互后的内容管理、信息层级重新划分等。

(1)导航栏中的按钮点击交互

当用户与导航栏中的文字/图标按钮产生交互时,不用离开此页面就对内容进行管理并能即时反馈,例如增加、删除、分享等操作,协助用户快速完成任务。

(2)界面上滑,导航栏内容减少

随着界面的向上滑动,大标题、或带搜索功能且占据两行的大尺寸导航栏将恢复至常规尺寸,信息的数量、层级也将重新划分,以弱化导航栏吸引力的方式,减少对用户的干扰。

(3)界面上滑,导航栏内容增加

界面产生上滑交互后,原本常规样式的导航栏会自动增加信息内容。例如美团外卖,首屏上滑至一半时,将特色标签及筛选入口悬浮至导航栏,目的是为了帮助用户快速做出决策。

(4)导航栏与内容区域的信息分割

大多数用分隔线直接分割,但部分产品为了保持界面的干净整洁、减少无关信息的干扰,在无任何交互产生的情况下,导航栏与内容区域的元素间隔较远,利用空间留白自动形成视觉分割,当产生滚动交互后,留白不可控,就会在导航栏下方增加投影、分隔线或毛玻璃效果,进行视觉分割。

2.导航栏的异同点

(1)同一应用中的相同点

导航栏在同一个应用中的高度、位置及其部分属性(字号、图标大小、用色规范)需具备统一性,这也是格式塔心理学中的「一致性」对 UI 设计的硬性要求。即便是大标题样式,那么底部标签栏(主结构、功能)所对应页面的导航栏也会遵循一致性要求。当然,部分只在首页设定大标题样式的应用除外。

还有就是,导航栏必须具备导航的作用,不管什么时候,用户只要一抬头(扫视导航栏)就能清楚知道当前正处于什么位置或流程,这主要从标题(后续会有标题设计的单独文章)信息中快速获取,如果当前页面不设标题,那么用户需要在页面头部某些层级较为突出的关键信息中获取,一旦页面滑动覆盖至关键信息位置,就需要呈现标题给用户指路,避免用户产生疑惑而付出更多的时间、增加理解难度。

(2)不同平台中的差异

这里主要指的是 iOS、Android 两大系统,在同等比例、同宽度前提下,Android(MD 设计规范)系统的标题为左对齐,且容器高度比 iOS 要高;iOS 系统一般只会在大标题样式下让标题左对齐。

另外,Android 一般会在容器底部增加投影,以区分导航栏与内容区域的分割;iOS除了上篇提到的分割元素外,还可以使用高斯模糊且带不透明度的方式来区分,毛玻璃效果的味道。

结语

导航栏几乎是每个界面必定存在的控件,虽然常用,但并不是每个设计师都能将其设计的优秀,需要在基础设计规范、作用之上,赋予其更大的产品价值。“如果逃不掉,那就静下心来享受”,导航栏既然不能轻易删减,那么就把它设计好,或许还能带来意想不到的好处。

以上内容仅作个人学习笔记,如需了解详情可移步到优设网查看@大漠飞鹰CYSJ原文章。

分享
点赞0
打赏
上一篇:浅谈瓶颈期
下一篇:金刚区的设计知识