搜索框到底应该放在哪里?

翻译:琳 审校:穆卡  |  UXRen翻译组 #316 译文

 

在大多数App中,搜索框一般都位于屏幕的顶部。在社交平台类app中,比如Facebook、Instagram、LinkedIn,甚至是Snapchat,搜索框几乎都是位于主页的顶部。在出行类app上,也同样如此。

也许你已经注意到,常年都在顶部的Uber搜索框已经下移了。

 

搜索框为什么会被这样放置?

苹果并不建议搜索栏在APP界面的顶部,人机交互指南也不建议搜索栏持续显示在页面上。

如果你去搜索“为什么搜索栏要位于界面的顶部?”,Quora上关于这个问题的讨论会马上映入眼帘,其中高票回答是这样解释的:

用户已经被训练得预期在界面的顶部有一个搜索框(如果需要搜索的话),设计师打破这个常规就要自担风险。

但是,Lyft的一名产品设计师大胆打破了这个常规。

注意到持握手机的不同手型了吗?这是“意识设计”的一个绝佳案例。

 

Lyft采用了一种不同的方式来放置搜索框。他们用浮层的方式将其放置在屏幕的中下部,而非悬浮在顶部。这个简单的改变使得几乎100%的用户方便触达。

虽然我们不常反思,但是位于顶部的搜索栏总是很难点击到。特别是对于那些手更小或者手指不那么灵活的用户来说,由于屏幕顶部离手指很远,费劲巴拉地向上够触实在是令人恼火。

你可以回想下你用过的大多数App,会发现它们的主要信息都位于屏幕中部或偏下的区域。导航的标签栏(tab bars)、社交平台发布的帖子、消息类应用的键盘等都位于屏幕中易触达的区域,这都是例证。

Lyft的搜索栏不在最顶部,但它也不是在底部,它在一个拇指最适合点击的地方。

https://medium.com/@Draward/mobile-reachability-rules-of-thumb-ce37dd0cd3ad

 

就像你看到的这张2015年的一份报表,将近一半(49%)的用户通常是单手操作手机。正如那个每年都会流行的惊奇段子中所说,人们就是那样操作手机的。Lyft的设计让你丝毫不用伸直拇指就能轻松触达搜索框,它就在最合适的位置。

https://medium.com/@Draward/mobile-reachability-rules-of-thumb-ce37dd0cd3ad

 

再看来自同一个研究的另一张报表:一半的搜索框都在可触达区域以外。Lyft的搜索栏就在大拇指的正下方,图表中绿色区域(舒适区)。

 

设计师们能从中学到什么?

回顾你的UI分析,做几场用户访谈,观察一下界面上的那些用户最常交互的元素。在出行类App上,用户最频繁操作的就是搜索框。在社交媒体app上,用户最常操作的可能是发布照片或点赞按钮。在购物类App上,则很可能是商品。

请确保你界面中最常交互的元素位于最容易触达的位置。

不要害怕打破既有模式,总有人要去做第一个吃螃蟹的人。即使你想让你的UI符合常规,但你也要关注使用的舒适性。

请考虑一下使用你界面的用户,他们可能拥有不同大小和年龄的手,以及人口统计数据。扪心自问:“我的体验设计是否适用于不同能力的用户,并被他们所了解吗?”

最后,不要钻牛角尖。形式多变,新的设计师也会加入你的阵营。还记得iOS6中的拟物风格吗?拥抱变化,不要推开它。

 

原文来源:https://uxdesign.cc/what-every-product-designer-should-take-away-from-lyfts-new-ui-742c9668b067(Theo Strauss,2018.07.10)
版权声明:该文章在UXRen公众号(cnUXRen)首发后方可转载,转载时请注明出处及译者、审校者信息,如有违背,UXRen社区保留侵权追责的权力。

6+
  • 宝珠

 

1 条回复

  1. 头像 匿名说道:

    新版高德地图的搜索框在屏幕下方,感觉比百度地图的方便多了。

发表评论

电子邮件地址不会被公开。