赞助商
立即赞助

用交互经典四原则,帮你做好导航栏设计

UI设计3年前 (2021)发布 流光
3.8K 0 0

在之前我得先提及一书──《简约至上:互式设计四策略》。书基得上是互设计的门必读书籍,非常适合身处项目节中上游的人阅读与学习。

作者 Giles Colborne 书中提出了四令交互设果化的简易策略:合理删除、分层组织、时隐藏巧妙转移。这四策略几乎我设与优化每一页面时的自我指导方针。

参阅了大量的应用,想总结出它是如何运用导航栏来给产品赋能的。竟然巧地发现,再花式的导航栏设计也难逃「四策略」手法。

首先,导航栏作为一个独立控件,它本身就已经是「层组织」策略的一种表现形式。下来来,优秀的产品计是如何运用另外三种策略来计好导航栏的。

合理删除

导航栏不能轻易删除,但凡事没有绝对。什候可以理地删除导航栏呢?

Nike Run Club(简称NRC)是耐克官方的一款跑步记录 APP。既然做产要在户角发,那我们就来复原一要功的户使场景。

你板要求你天出 150 个界设计时候,你怕了,准备跑路,时又不想浪费天任何记录运动会。于是你打开 NRC,你目很明确:认真地跑路,并记录运动。

点击「开始」按钮,当你一旦开始跑步,手机基就不使用,直到跑步结束。

用交互经典四原则,帮你做好导航栏设计

△ NRC在运动状态下的界面删除导航栏

用户记录跑这样一单一事件中,NRC 知道会专注运动,很少存关注其他功能、浏览其他页面的可能性。于 NRC 可以很脆删掉导航栏,返回按钮用了界面中的「结束」按钮替。

滴滴出行在呼叫快车也做了删除导航栏的理。用户一旦发,开始呼叫机,呼叫页面内的所有操作都只聚集在界面下方的一个视觉域内。

用交互经典四原则,帮你做好导航栏设计

△ 滴滴出行在呼叫过程中删除了导航栏

上面两个删除导航栏的示例有么共通点呢?

第,用户在前页事件状态明确,不需要导航标题提醒用户前在什么位,用户也极少可能在前页发生其他事件操作,于是完全可以去除导航标题与内容控件。

二,虽删除返回按钮,但采用很典型的「费茨定律」,就用户误操,也能便捷地撤销正在生的件。反而比循规蹈矩地运用导航栏来承载返回按钮合理许。

用交互经典四原则,帮你做好导航栏设计

△ 费茨定律简易图解

既导航栏内所有的规范元素有取代方案,为什么不删除它呢?正 Giles Colborne 在书中告诉我们的:大胆地删除,但也不要极端到盲目删除。

适时隐藏

隐藏和删除看来分相似,但其不。我们何区分两个技巧呢?

隐藏常见的况,当导航栏的出会打扰用户沉浸体验的障碍时,我们会选择隐藏,例如看视频、浏览图片显示全屏媒体的场景,导航栏反会分散用户的注意力。

用交互经典四原则,帮你做好导航栏设计

△ 显示全屏媒体时需隐藏导航栏

不知道你有没有发现一个细节,在大多数情况下,需要沉浸体验的页面不但会隐藏导航栏,同也会隐藏状栏,导航栏中载有当前页面的标题、导航按钮和内容控件;状栏中会载有间、Wi-Fi 等系统备息。

iOS 在人机交互指南中醒我们,显示全屏媒体时,请考虑暂时隐藏状态栏,但请避免永久隐藏。如果没有状态栏,当户需要查看时间或他设备信息时必须离开应。设计师应该户可使简单的手势重显示隐藏的状态栏。

用交互经典四原则,帮你做好导航栏设计

△ 户可方地查看时间或他设备信息

另情况是前页常注屏内容展现时,我们会隐藏导航栏。

京东在用户搜索品之,头部有三个信息栏,非常冗长。分别是:

  • 导航栏:放搜索框和页内容控件;
  • 局筛选栏:针对局的筛选组件,主要用品排序筛选;
  • 垂直内筛选栏:当所搜索的商品品类的垂直筛选标签。

用交互经典四原则,帮你做好导航栏设计

△ 京东搜索商品后屏幕头部信息栏

用户在搜索品之,向上滑动页面,京东隐藏导航栏和局筛选栏。

一因用户搜索关键词后,滑动页面概率表示已始挑选商品,这时候可以胆猜测用户行,认搜索与排序的重级下降了,搜索结果垂直内筛选的重级升了,便可以只保留下重的操作。

二是可以让内容域高度增加,隐藏顶部个栏目域可以大致增加一个商品位的提前露出,增大了商品触达用户的可能性。这不就是 UI 设商业目标赋能的一案例吗?

用交互经典四原则,帮你做好导航栏设计

△ 隐藏导航栏,增加了屏幕利用率

巧妙转移

基于导航栏层级始终高于页面内的特性,随用户划出第一屏,许多 APP 了重内或重控件转移到导航栏的设。

豆瓣在评讨论,用户上滑页面,会将当前片的息转移导航栏。其实这种转移常见,许多内容社 APP 都有这的交互计,比如浏览的公众号文章,再回顶部。方便用户刻知道当前所浏览的内容是关于哪一个主题的。这一类转移是纯站在用户体验角度的考量。

用交互经典四原则,帮你做好导航栏设计

△ 豆瓣在屏幕滚动后转移片息导航栏

但如果你仔细观察,有一类转移却是综合了户体验与产目标的共同抉择。如果你再稍微了解一点该产背后的故事,甚至可你洞悉到,为了巩固产的调性和目标,PM 和 UI 们在页面设计时做了多细枝末节的引导。

知乎在用户浏览前问题时上滑动页,也会像瓣样,将前问题标题转移到导航栏上,与此时会将「写回答」操作也转移到导航栏。标题转移是出于用户体验,和大多数内容社区做法大小异;而「写回答」按钮转移,正符合知乎想要打造个内容交流社区品调性,他们希望刺激用户进问答互动,多输出 UGC 内容,希望用「写回答」按钮转移进步激发用户创作内容可能性。

用交互经典四原则,帮你做好导航栏设计

△ 知乎转移「写回答」让用户更便地进问答互动

京东在店铺首页上滑页面时,将「关注」按钮转移到导航栏,方便用户在浏览的程中以随时收藏店铺,增加用户对品牌店铺的关注度和复购的能。京东靠自营模式家,近几年来开始慢慢重视 B2C 市场,在个小小的关注按钮上,是不是以略显端倪呢?虽我不能非常肯定,能提高用户收藏操只是为辅助京东更地进行营销权重划分,不「关注」按钮的转移,确能为 B2C 业务的渗透提供一份助力。

用交互经典四原则,帮你做好导航栏设计

△ 京东转移「关注」让用户更方便地收藏店铺

所以我这里到的「转移」的目的,其实 Giles Colborne 书中讲到的并不十分一致,Giles Colborne 希望设师将当页面低频、冗杂的操作转移到另一页面中去,我提到的「转移」反产品越注重什么功能,越可以利用导航栏层级的先天优势实转移。

总结

合理删除、分层组织、时隐藏巧妙转移已我设分析界面常用的一手法,它并不一万能的,但它多多少少可以辅我们出合理的设。

这篇文章想要告诉大家的是,在规范的导航栏是死板相对静的,但在四个策略的辅助下,结用户的操作势,也可以将它变得十灵活,帮助页面实现更好的用户体验。不要被规范限制的死,转换计的角色变成用户,你可以研究出更多好玩的操作。随便开一个应用,去研究研究,你可能会在其中的。

注作者微信公众号:「UCD耍」

用交互经典四原则,帮你做好导航栏设计

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

如何定义组件库 UI 设计组件库(UI KIT),直译过来就是用户界面成套元件。我们日常工作中所构建的组件库,一般是把所有界面...
sketch
如何处理线上图片文件,降低服务器流量成本呢?本文作者基于自己的工作经验展开分析,希望对你有帮助。图片,对于界面来说是...
UI
合理的移动导航设计能够尽可能地减少摩擦,引导用户去他们要去的地方。 这篇文章汇总了移动端导航设计最常见的样式、要注意...
交互设计
在设计移动端APP的时候,最重要的一点是确保界面和交互足够有用又清晰直观。如果这两个基本的特征都无法达成,用户是没有足够...
App设计
后台系统中,存在大量的组件,合理的应用是做出良好产品的基本功。 本文梳理了常见的「选择」和「输入」,也算是自己长时间...
UI组件
这是我知乎上时间线出现得比较多的一个问题,也是新手转行过程中最关注的事情之一。过去一直没有系统回答这方面的疑问,所以...
UI
作为一名在互联网行业摸爬滚打好多年的一位 UI 设计师,也在团队里带过众多 UI 设计师和实习生,所以深刻认识到无论于团队还...
UI
iOS 基本界面元素包括三大类,分别是 Bars(栏)、Views(视图)、Controls(控件)。上一篇文章分享了 Bars(栏),今天给大...
iOS 设计