菜单

Lyft 的新界面设计带给设计师的启示

来自:花火译文小组 阅读数:97 2019/09/09

Jul 10,2018 阅读时长4分钟 

作者:Theo Strauss

翻译:田晓青、高蓝光

审校:joyking、Dong Cong




大多数App中搜索框都处在屏幕的顶部,例如Facebook, Instagram, LinkedIn以及Snapchat(一款“阅后即焚”的照片分享应用)这类社交平台搜索框几乎存在于每一个页面的顶部。同样在各种打车软件中搜索框也都在页面顶部。


可以看到Uber将搜索框从顶部栏上移到了顶部栏下方的位置。


为什么这么设计呢?苹果公司设计规范并不建议将搜索框放在页面的顶部,人机交互指南里也指出不应该将搜索框放置于页面顶部。


如果你去查找为什么搜索框会在页面顶部,Quora(美国网络问答社区)上就会弹出一个关于这个问题的帖子,帖子中写道“用户已经习惯了搜索框存在于页面顶部,这是设计师自食其果的一种惯例”。


Lyft的设计师则勇敢的改变了这种设计,这是值得赞扬的。


注意到拿着模型的各种不同的手了吗?一个意识设计的完美案例。


Lyft采用了一种不同的搜索框设计。他们将搜索框放置在页面中下方,这样的设计几乎让所有的用户都容易使用搜索框。



虽然我们不经常去考虑这个问题,但搜索框存在于顶部的确很难被用户触达。尤其是手小或手指使用不灵活的用户,向上伸手是很烦人的,因为屏幕顶部对于他们的手指来说真的很远。


如果你观察大部分的应用程序,你会发现页面的主要内容集中在中间或者中下部分。例如导航标签栏、社交媒体上的贴子,或者是输入文本时候的键盘等都保证了它们在一个可触及的位置。


Lyft应用的搜索栏不在顶部,也不在底部,而是处于一个对拇指友好的位置。


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


可以从这张来自2015的图看出,大约有一半的手机用户是单手操作的。而且,这些情况会每年重复一次,人们就是这样操作的。Lyft应用不会让你把拇指伸得太长;它的搜索栏位于最佳位置。


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


看看来自同一项研究的这张图,图中一半的搜索栏都在“超出可触达”的区域。相反,Lyft的搜索栏就包含在图中绿色区域(可触达范围)中。



设计师能从中学到什么


查看界面分析,进行用户访谈,查看界面中用户交互最频繁的元素。在交通应用程序中,最频繁的通常是搜索栏。在社交媒体应用中,可能是相册或者“点赞”按钮。在购物应用程序中,可能是商品信息展示。


确保界面中与用户交互最频繁的元素处于用户最容易触达的位置。


不要害怕打破常规,这事情早晚得有人先做。尽管你想让你的界面对用户来说是熟悉的,但是也要让用户用起来是舒服的。


考虑手的不同大小和年龄对界面的体验和你所迎合的一些统计学数据。问问自己,“我的体验是否能够让不同的用户适应?”


最后,不要太恋旧。改变风格,新设计师可能会加入你的公司。还记得iOS 6中的3D元素吗?拥抱变化,不要抗拒它们。



原文https://uxdesign.cc/what-every-product-designer-should-take-away-from-lyfts-new-ui-742c9668b067


感谢阅读,以上内容由花火译文小组翻译,转载请注明出处!

花火公众号

关注花火公众号

回到顶部