新闻资讯
导航栏也甭想逃出 “交互设计四策略”的手掌心
01.合理删除
导航栏不能轻易删除,但凡事没有绝对。什么时候我们可以合理地删除导航栏呢?
Nike Run Club(下文简称NRC)是耐克官方出品的一款跑步记录APP。既然做产品要站在用户角度出发,那我们就来复原一下主要功能的用户使用场景。
当你的老板要求你一天出150个界面设计的时候,你怕了,你准备跑路,同时又不想浪费一天中任何一次记录运动的机会。于是你打开NRC,你的目的很明确:认真地跑路,并记录运动。
点击“开始”按钮,当你一旦开始跑步,手机基本就不再使用了。直到跑步结束。
在用户记录跑步这样一个单一事件中,NRC知道你会专注运动,很少存在关注其他功能、浏览其他页面的可能性。于是NRC可以很干脆地删掉导航栏。而返回按钮用了界面中的“结束”按钮代替。
滴滴出行在呼叫快车时也做了删除导航栏的处理。用户一旦发单,开始呼叫司机时,呼叫页面内的所有操作都只聚集在界面下方的一个视觉区域内。
上面两个删除导航栏的示例有什么共通点呢?总结一下:
第一是用户在当前页面的事件状态明确,不需要导航标题提醒用户当前在什么位置,用户也极少可能在当前页面发生其他事件操作。于是完全可以去除导航标题与内容控件;
第二,虽然删除了返回按钮,但都采用了很典型的“费茨定律”,就算用户误操作,也能便捷地撤销正在发生的事件。反而这比循规蹈矩地运用导航栏来承载返回按钮合理了许多。(篇幅原因,费茨定律在以后的文章中再详解,有兴趣可以先自行查阅资料。费茨定律其中一条定律法则是:当目标大小一定时,起点离目标中心的距离越近,所花费的时间越短;距离越远,所花时间越长。)
既然导航栏内所有的规范元素都有可取代方案,为什么不删除它呢?正如Giles Colborne在书中告诉我们的:大胆地删除。(但也不要极端到盲目删除...)
02.适时隐藏
隐藏最常见的情况是,当导航栏的出现会成为打扰用户沉浸体验的障碍时,我们会选择隐藏,例如看视频、浏览图片等显示全屏媒体的场景,有导航栏反而会分散用户的注意力。
不知道你有没有发现到一个细节:在大多数情况下,需要沉浸体验的页面不但会隐藏导航栏,同时也会隐藏状态栏,导航栏中载有当前页面的标题、导航按钮和内容控件;状态栏中会载有时间、Wi-Fi等系统设备信息。
另一种情况是当前页面非常注重一屏内容展现时,我们会隐藏导航栏。
京东在用户搜索了商品之后,头部有三个信息栏,非常冗长。分别是:1.导航栏:放置搜索框和页面内容控件;2.全局筛选栏:针对全局的筛选组件,主要用于商品排序筛选;3.垂直内容筛选栏:当前所搜索的商品品类的垂直筛选标签。
用户在搜索了商品之后,向上滑动页面,京东会隐藏导航栏和全局筛选栏。
一是因为用户搜索关键词后,滑动页面大概率表示已经开始在挑选商品,这时候可以大胆地猜测用户行为,认为搜索与排序的重要级下降了,搜索结果垂直内容筛选的重要级上升了,便可以只保留下重要的操作。
二是可以让内容区域高度增加,隐藏顶部两个栏目区域可以大致增加一个商品位的提前露出,增大了商品触达用户的可能性。这不就是UI设计为商业目标赋能的一个案例吗!
03.巧妙转移
豆瓣在影评讨论区,用户上滑页面时,会将当前影片的信息转移到导航栏。其实这种转移很常见,许多内容社区APP都有这样的交互设计,方便用户时刻知道自己当前所浏览的内容是关于哪一个主题的。这一类转移是单纯站在用户体验角度的考量。
京东在店铺首页上滑页面时,会将“关注”按钮转移到导航栏,方便用户在浏览的过程中可以随时收藏店铺,增加了用户对品牌店铺的关注度和复购的可能性。京东靠自营模式发家,近几年来开始慢慢重视B2C市场,在这个小小的关注按钮上,是不是可以算略显端倪呢?虽然我不能非常肯定,可能提高用户收藏操作只是为了辅助京东更好地进行营销权重划分,不过“关注”按钮的转移,确实能为B2C业务的渗透提供一份助力。
所以我这里说到的“转移”的目的其实和Giles Colborne在书中讲到的并不十分一致,Giles Colborne是希望设计师将当前页面低频、冗杂的操作转移到另一个页面中去,而我提到的“转移”反而是:产品越注重什么功能,越可以利用导航栏层级的先天优势来实现转移。
04.总结
这篇文章想要告诉大家的是,在平台规范里的导航栏是死板又相对静态的,但在四个策略的辅助下,结合用户的操作手势,也可以将它变得十分灵活,帮助页面实现更好的用户体验。不要被规范限制的太死,转换设计师的角色变成用户,你可以研究出更多好玩的操作。随便打开一个应用,去研究研究,你可能会乐在其中的。
回复列表