用交互经典四原则,帮你做好导航栏设计<i class="icon-

时间:2020-08-29 10:21:27 来源:

【摘要】 考必过小编为大家整理了关于用交互经典四原则,帮你做好导航栏设计<i class="icon-的信息,希望可以帮助到大家,下面我们就一起来看下用交互经典四原则,帮你做好导航栏设计<i class="icon-的具体内容吧!

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

在这之前我得先提及一本书──《简约至上:交互式设计四策略》。这本书基本算得上是交互设计的入门必读书籍了,非常适合身处项目环节中上游的人员阅读与学习。

作者 Giles Colborne 在书中提出了四个令交互设计成果最大化的简易策略:合理删除、分层组织、适时隐藏和巧妙转移。这四个策略几乎成为我设计与优化每一个页面时的自我指导方针。

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

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

合理删除

导航栏不能轻易删除,但凡事没有绝对。什么时候我们可以合理地删除导航栏呢?

Nike Run Club(下文简称NRC)是耐克官方出品的一款跑步记录 APP。既然做产品要站在用户角度出发,那我们就来复原一下主要功能的用户使用场景。

当你的老板要求你一天出 150 个界面设计的时候,你怕了,准备跑路,同时又不想浪费一天中任何一次记录运动的机会。于是你打开 NRC,你的目的很明确:认真地跑路,并记录运动。

△ 用户可以方便地查看时间或其他设备信息

另一种情况是当前页面非常注重一屏内容展现时,我们会隐藏导航栏。

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

导航栏:放置搜索框和页面内容控件;

全局筛选栏:针对全局的筛选组件,主要用于商品排序筛选;

垂直内容筛选栏:当前所搜索的商品品类的垂直筛选标签。

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

用户在搜索了商品之后,向上滑动页面,京东会隐藏导航栏和全局筛选栏。

一是因为用户搜索关键词后,滑动页面大概率表示已经开始在挑选商品,这时候可以大胆地猜测用户行为,认为搜索与排序的重要级下降了,搜索结果垂直内容筛选的重要级上升了,便可以只保留下重要的操作。

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

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

巧妙转移

基于导航栏层级始终高于页面内容的特性,随着用户划出第一屏,许多 APP 做了重要内容或重要控件转移到导航栏的设计。

豆瓣在影评讨论区,用户上滑页面时,会将当前影片的信息转移到导航栏。其实这种转移很常见,许多内容社区 APP 都有这样的交互设计,比如浏览的公众号文章,再回到顶部试试。方便用户时刻知道自己当前所浏览的内容是关于哪一个主题的。这一类转移是单纯站在用户体验角度的考量。

△ 豆瓣在屏幕滚动后转移影片信息到导航栏

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

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

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

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

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

所以我这里说到的「转移」的目的,其实和 Giles Colborne 在书中讲到的并不十分一致,Giles Colborne 是希望设计师将当前页面低频、冗杂的操作转移到另一个页面中去,而我提到的「转移」反而是产品越注重什么功能,越可以利用导航栏层级的先天优势来实现转移。

总结

合理删除、分层组织、适时隐藏和巧妙转移已经是我做设计和分析界面常用的一个手法,它并不一定是万能的,但是它多多少少可以辅助我们做出更合理的设计。

这篇文章想要告诉大家的是,在平台规范里的导航栏是死板又相对静态的,但在四个策略的辅助下,结合用户的操作手势,也可以将它变得十分灵活,帮助页面实现更好的用户体验。不要被规范限制的太死,转换设计师的角色变成用户,你可以研究出更多好玩的操作。随便打开一个应用,去研究研究,你可能会乐在其中的。

以上就是考必过小编为大家整理的关于用交互经典四原则,帮你做好导航栏设计<i class="icon-的相关信息,想了解更多考试最新资讯可以关注考必过。

上一篇      下一篇
技能类相关推荐 更多>>
饿了么、美团都在用的轻拟物风格,到底是什么?<i class 从零开始设计产品的 10 个 UI/UX 启示 如何做好UI界面的表单设计?收下这篇科普干货!(下)<i 为什么你的设计总是同质化? 如何让你的图标提升一个档次?从这 3 个细节改起<i cl 从饿了么超级会员改版,聊聊背后的产品设计<i class="i 高手出品!2020~2021年UI界面设计趋势 设计师必知的20个幻灯片实用设计技巧
技能类热点专题 更多>>
热点问答
国家公务员考试年龄限制是多少 公务员国考和省考考试内容有什么区别 函授大专学历能不能考公务员 国家公务员考试考点能自己选择吗 新闻学专业能报考2022年公务员考试吗 什么是联合培养研究生 什么是破格录取研究生 什么人不适合读研 研究生报名户口所在地填什么 研究生结业和毕业有什么区别
网站首页 网站地图 返回顶部
考必过移动版 https://m.kaobiguo.net