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

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

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

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

相关推荐

  • 泛滥的移动产品设计模式

    如果你是一名移动产品设计师,你可能会同意这样的观点:参考借鉴别人的设计不算抄袭。这不仅是最佳的练习方法,也是一种设计模式,而且还符合业界主流的设计趋势,同时还能确保在用户熟悉的模式下来创建可用性的界…

    2016-10-18
  • 应该追踪哪些UX指标?

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

    2016-05-31
  • [自译]移动UX设计:怎么做一个优秀的Notification?

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

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

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

    2016-10-31
  • 用户体验设计中最容易犯的六种错

    【文章摘要】用户体验设计需要你作出艰难的决定,成为优秀的设计师并不容易,你需要从错误中不断汲取经验教训,成就自己。人们总是犯着类似的错误,新的思路听起来很不错,但是并不足以成为用户体验设计的标准,但…

    2015-11-05
  • 淘宝UED的设计流程

    国内知名 UED 团队的设计流程是怎样的? 淘宝 UED 的设计流程图 <img src="https://pic4.zhimg.com/75bcc954c5e1695eeeeb1710eb62c947_b.jpg" data-rawwidth="4000" data-rawheight="1678" clas…

    2016-06-01
  • UI、UX,傻傻分不清楚?来一份设计师分工指南

    设计是一个相当广义而模糊的术语。当有人说“我是一个设计师”时,你很难知道他每天做些什么。

    2016-07-12
  • 腾讯产品经理告诉你,怎么“设计”用户体验

    2014年5月,我在腾讯内部转岗,开始从事产品相关的工作,我RTX资料中的“职位”一栏后面的内容变成了“产品策划”,这标志着我之前4年交互设计师工作经历的正式结束。 毕业后的这几年,从前端工程师转到交互设计,再由…

    2015-11-16
  • 【视频】你不可不知的UXD(用户体验设计)简史

    “如果你想理解今天,就必须先研究昨天”--- Pearl Buck 伟大的设计是永恒的,但这并不意味着要忽视它的历史。请查看以下短片来了解UX设计的发源。(演示内容由设计平台UXPin完成) 视频地址: Youtube:http://t.cn/…

    2015-09-22
  • 将After Effects整合到用户体验工作流程里去。

    A UX WORKFLOW 网页设计过渡和动画,像视差滚动,隐藏导航,刷卡,拉来刷新,转换或真的任何UI过渡,高级动态原型在After Effects中进行设计。在这篇文章中,我们将介绍如何适应动效应到您的工作流程UX工作流程,我…

    2015-06-23