用户体验设计

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

0
登录或者登记去做吧。

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

有人会说,盯着设计规范、跟随别人的脚步会抹杀创造力,并且,总有一天,所有的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

UI、UX,傻傻分不清楚?来一份设计师分工指南
如何写一份出色的交互设计文档,给程序员以美的享受?