几个被滥用的移动端用户体验设计模式

如果你是一名经验丰富的设计师,你大概会同意我的观点:受到别人作品的启发不算是在剽窃别人的设计。现在最好的方法是:利用一些现成的设计模式,在符合设计规范的条件下,确保你使用的模式是你的用户所熟悉的,以此创建可行的界面。

如果你是一名经验丰富的设计师,你大概会同意我的观点:受到别人作品的启发不算是在剽窃别人的设计。现在最好的方法是:利用一些现成的设计模式,在符合设计规范的条件下,确保你使用的模式是你的用户所熟悉的,以此创建可行的界面。

有人会说,盯着设计规范、跟随别人的脚步会抹杀创造力,并且,总有一天,所有的app看上去都会一样。从用户体验的角度,我发现一个不同的问题:习惯去适应这些最好的设计实践可能会让你相信Google、Facebook、Instagram、和你最爱的app永远是对的。你会觉得他们的设计目的和你的一样,你不再去质疑他们了。下面是一些当前(或曾经)被认为是很好的设计模式,但是它们可能没你第一眼认为的那么好。

 

1.隐藏式导航

有很多设计师写关于隐藏式导航的文章,反对这种设计。争论的焦点不在于那个icon本身,而在于把导航藏在icon后这件事上。

对设计师来说,这种解决方案十分的吸引人和方便:你无需担心有限的屏幕大小,只需将整个导航挤进一个可滚动的通常被隐藏起来的叠加图层里。1468299064-5221-a857f819e52d1a22fbfc04bf5a-b

A slide menu is flexible and convenient to use

实验证明,将菜单选项以更可见的方式呈现提升了用户满意度甚至收入。这就是为什么现在的巨头们都把汉堡菜单换掉,把常用的重要的导航按钮放在可见位置。

1468299059-7225-00477ff8f0a88969b0bab5d1ba-b YouTube navigation change annotated by Luke Wroblewski

 

如果你的导航很复杂,隐藏它并不能使体验变得友好。优先展示重要的部分却能。

 

2.图标,到处都是的图标

因为有限的屏幕大小,有些无脑的设计师把页面上能替换的文本标签都换成了图标。图形占用空间小,也无需解释,人们对这些图标毕竟也很熟悉,不是吗?于是所有其他的app都这么干了。

因为有这种想法,app设计师有时会把功能藏在icon后面,而这些图标又很难辨识。你愿意猜吗,举个例子,点击Instagram上的这个icon你可以直接发消息给好友。1468299061-5930-4f07cab0e557e8b1e391625046-b

另外一个例子。假设你从来没有用过谷歌翻译,你觉得这下面的这个图标代表什么功能?1468299063-4950-b125b7a4cfe89a011e063feffd-b假定用户对你抽象的图标很熟悉或者假定他们愿意花额外的时间去探索和学习使用你的产品是一个常识错误。

1468299066-5359-5878978f1c2e1db742480fc355-b Mysterious tab bar on Bloom.fm

1468299068-1547-3eeeaa9aaf61d5ba7211787268-b icon hint in Swarm app

但这不意味着你应该彻底不用图标。用户对很多图标是非常了解的,这些图标大多代表常见的功能比如搜索,播放,邮件,设置等等(但是用户可能还是不确定,比如说,点击一个♥的图标到底会发生什么。)

1468299069-8619-5ac779f6fb3ee7170a4a7ecec9-bSome icons are recognized by the majority of the users and can be considered universal

 

复杂和抽象的功能,应该总是以确切的文字标签来展示。在这种情况下,图标依旧有用。它们可以加强菜单项的探索性,并且他们能增加你产品的触摸体验和个性。

1468299069-4769-ef5b2e0a1f168b48f1c2e6d5d2-b Pixelmator navigation

基础的功能可以很有效的通过图标来表示,但是对于复杂的功能,应该使用文字标签。(如果你还使用图标,记得测试它们的可用性。)

 

3.基于手势的导航

苹果公司在2007年发布iphone的时候,多点触控技术得到了主流市场的关注。用户知道了他们不仅可以单点触摸界面,还能放大、缩小和滑动。

手势操作在设计师当中变得流行起来,许多app围绕手势操作进行了设计。

1468299071-1306-21ee9159953f122189c90acff9-b

Gesture navigation in Clear app

就像隐藏导航和利用图标取代文本标签一样,手势操作有时好像十分吸引设计师,他们期望利用它来节省屏幕空间(“这里不应该是个删除的按钮,用户会左滑或者右滑的。)

关于手势操作,首先需要了解的是,它们总是处于隐藏状态。用户需要记住这些操作。

另外,手势操作和图标有着相同的问题:多数用户对常见的如点击,放大,滑动操作比较了解,但同样有一些操作需要被探索和学习。

不幸的是,大部分手势在app之间并不标准和统一,它在交互设计领域还是一个新的东西。像滑动这样一个简单的手势在各种邮件app当中操作起来都可能是不一样的。

1468299072-4892-c909cb0afd0206ceb82b8897d9-b Swiping an email to the right reveals the Mark as Unread option in Apple Mail

1468299073-1675-fbd91b823619d44b8beedf04b1-b The same gesture archives the mail in Mailbox

想象一下,晃动你的设备可能同时代表撤销(在iOS中)和发送反馈(在谷歌地图中)。

别忘了,手势操作是一种隐藏的操作,它需要用户端的大量努力才可以被记住。如果你是Tinder,你也许可以告诉全球的用户向右滑代表什么,但只有当它是你的app当中必要的一个理念时才能这么干。

 

4.新手引导时用的覆盖图

新手引导,这是一个最近很火的UX话题,它出现在用户第一次使用app的时候。在多数情况下,它意味着向用户展示一些教程来解释界面。1468299075-5460-2c1d29c240e38afd75cb0b2a29-b Coach marks in dcovery app

 

为什么这是一个糟糕的解决方案?因为很多用户会跳过你的介绍;他们就像立马使用这个app。就算他们注意到了你的教程,他们通常也会在教程关闭后忘得一干二净(尤其是屏幕上到处都是信息的时候)最后一点:在界面上添加教程不会让你的产品变得更易用。记住这句话:1468299075-8897-f72591ba78cbbb5257d6700b3d-b A user interface is like a joke. If you have to explain it, it's not that good.

新手引导可以用其他多种更为有效的方式设计。举个例子,Slack,用第一屏创建了一些文本。这些文本简单介绍了slack,告诉用户他们所能带来的好处,而不是告诉他们页面和功能。1468299076-5141-168a2bdb372dffbb897d13dc52-bDuolingo没有解释app是怎样运作的:用户被鼓励站队并且做一个快速的测试(没有登录也可以)。这样做是因为在实践当中人们学得最好。另外,这种方法以更加吸引人的方式展现了产品的价值。1468299077-3476-ea7f252dc6debc31a697f2ada1-b记得我说的在mailbox和apple mail当中滑动操作是有多不同吗?它们这种新颖的新手引导运作的方式是这样的:用户在使用app之前获得了一个学习每个手势的机会。1468299078-3638-707ab9a3e57f8f0ed808ff36b4-b在你半透明的图层上设计引导表示之前,停下来想想第一次使用产品的用户应该是什么样的体验。专注在文本的描述上。在多数情况下,总有更友好的方式来迎接你的用户。

 

5.有创意但不直观的空白状态

空白状态是很容易被没有经验的设计师忽略的东西。它在app整体的用户体验当中可以起到非常重要的作用。

有时设计师把错误和空白界面不当回事,而实际上这里面大有可为。

以Google Photos的这个空白界面举个例子:
1468299079-9257-53af2a28d57b7e7fb3a15161c5-b

Empty state screen in Google Photos

第一眼看上去,很不错,对吧?依据设计规范设计的图层上有一个很精美的图形。

第二眼再看,发现,有些不和谐的地方:

  • 为什么在没有收藏的情况下有这么一个显眼的搜索按钮?你会在什么也没有的情况下搜索吗?
  • 第二个很显眼的元素,图像,显然是没法点击的(尽管很多人会尝试点击)。
  • 文字提示里告诉我应该去顶部寻找加号按钮,这让人感到很别扭。为什么提示当中没有加号按钮?这就像是在说“请点击“继续”按钮来继续”一样。

 

这个空白的界面实际上没有帮助用户理解这个情境:

  • 收藏是什么?为什么他们有用?
  • 为什么我一个收藏也没有?
  • 对此我能做些什么?

 

当谈到创造力的时候,有时少即是多。下方的空白界面就做的很好1468299080-4523-63d29f46edec05aba86174c24d-b

Empty state in Lootsy

别忘了空白页面的设计(类似web上的404页面)不仅仅是关于视觉美感和品牌形象。它们在可用性方面同样扮演重要角色。让它们变得更加直观。

 

质疑一切

别误解了我的意思:设计的模式和好的设计方法还是你的朋友。记住,尽管产品间和用户间是不一样的:一种解决办法可能适用于一种产品但不一定适合你的产品。它并不是时时适用的。另外,你没法知道为什么某种产品会以某一种方式设计。

做你自己的思考、设计和研究。

权衡,测试,验证——只要它看起来更加合理,不用担心没有遵守设计规范。

原文:https://medium.com/@kollinz/misused-mobile-ux-patterns-84d2b6930570#.56a28as20

原文作者:Zoltan Kollin

From:Medium

大致翻译:几小毛
链接:https://zhuanlan.zhihu.com/p/21562131

原创文章,作者:Tinadmin,如若转载,请注明出处:https://www.iamue.com/16248/

(0)
TinadminTinadmin
上一篇 2016-07-11 23:17
下一篇 2016-07-12 13:30

相关推荐

  • 讯飞输入法 Smartisan 定制版功能交互一览

    #交互学堂# #讯飞输入法# #smartisanOS# 基于 Smartisan OS 的设计语言深度定制了讯飞输入法,界面简洁优雅,还能保留讯飞输入法用户的使用习惯, 识别准确率高达 97% 的讯飞语音,让输入更高效 点击下载   讯飞输入…

    2016-10-31
  • 设计者说:用户体验这个故事要怎么讲才有逼格?

    设计者说:用户体验这个故事要怎么讲才有逼格? “ 故事也许是人类最早的叙事方法。大多数人在童年时,故事用来引导他们的行为,了解历史文化和培养社会认同感。”-From Wikipedia 1.什么是故事(WHAT) 在讨论如何打…

    2015-11-17
  • 2017年即将流行的9大UX设计趋势

    用户体验设计在即将到来的2017年会有怎样的发展呢?我们不妨通过回顾2016年UX领域的变化来展望未来一年用户体验领域的发展趋势。 1. 可用性是UX设计的重心 设计模式依然很重要。越来越多的设计师开始依赖强健而完善…

    2017-02-08
  • [自译]移动UX设计:怎么做一个优秀的Notification?

    原文链接:Mobile UX Design: What Makes a Good Notification? 原文作者:Nick Babich 移动UX设计:怎么做一个优秀的Notification? 你有没有关注过,一天当中会从各种日常app收到多少的通知和警告消息?这其中又有…

    2016-07-15
  • [自译]强大的省略号-为什么三个小点表达如此丰富

    原文链接:The Mighty Ellipsis - How 3 little dots can say so much 原文作者:John Saito 每当我告诉人们省略号(...)是最让人惊奇的字符时,大多数人都像看疯子一样看我。在你给我打上这个标签之前,让我试着…

    2016-10-09
  • 2016用户体验行业调查报告

    2016年4月起, CDC通过腾讯问卷调查平台对1580名从事用户体验行业的从业人员进行在线调查,系统全面地分析了用户体验行业的整体情况,发布《2016年用户体验行 业调查报告》。本次调查对象包括视觉设计、交互设计、…

    2016-07-07
  • 电子书阅读APP原型设计解析

    我是比较喜欢纸质书的,一本好书,我总愿意买本纸质书,放在家里可以随意翻看,或一遍,或多遍,偶尔也会当花瓶放着。 阅读纸质书是视觉,听觉,触觉,嗅觉的享受,甚至连带着回忆都是美好的。 柔和不刺眼的纸张带…

    2015-06-11
  • UED设计流程与原则

    UED设计流程在各个公司之间可能存在不同,国内的设计师在知乎社区上讨论了各自公司(包括腾讯、百度等)的UED设计原则、流程等,其中的经验值得读者借鉴。 来自腾讯的交互设计师eviliu强调设计流程主要考虑两方面的问…

    交互设计 2015-04-20
  • 快来感受一下美帝的体验创新之旅

    追逐着2014年最后一天的时光尾巴,MUX五位同学加入了IXDC美国体验创新之旅,从北京跨国太平洋来到旧金山(San Francisco),深入参访硅谷多家互联网创新企业,交流和感悟体验创新。 8 ▲先来张大合照,三十多人,我…

    2015-01-20
  • 应该追踪哪些UX指标?

    原文链接:Which UX Metrics Should You Be Tracking? 原文作者:Zack Rutherford 从根本上而言,用户体验是主观的。 我们可以通过检测UX的影响,通过用户对产品的接触(例如页面浏览量,站点停留时间等),和转化…

    2016-05-31