16/03/14

一些滥用的交互设计

今天翻译的这篇文章,简单探讨了汉堡菜单、图标使用、引导浮层和空状态界面这些常见的设计模式的问题,作者的想法非常熟悉,观照这些设计模式,似乎无一不是早已存在于我脑袋里的某处了。

记得第一次实习的时候,做一款应用市场,我这个菜鸟坚持要用汉堡菜单,和当时公司的CTO讨论过这个问题。CTO是360出身,对于交互设计,不知道在哪儿看到句“所见即所得”,就引以为自己做开发时和设计师争辩的原则,这挺搞笑的。但是他告诉我,用汉堡菜单,子项的点击率会低不少,让我第一次有了数据驱动设计的概念。(怪不得360长得永远那么丑却那么流行)

从Medium上找文章来翻译还挺轻松的,不用再费力去找各种个人博客了,虽然这些Medium博主我也不知道是谁谁谁。

++译文++

如果你是个经验丰富的设计师,你可能认同随意采用一些别人的UI模式并不会让用户觉得开心。好的实践研究、设计模式病遵循设计规范,确保使用用户熟悉的设计模式去创造可用性的界面。

有人说依照设计规范、追随别人的设计会扼杀创造力,有一天APP会趋同化。从用户体验的视角我看到了不同的问题。习惯于模仿好的设计,可能会让你觉得谷歌、Facebook、Instagram或者任意一款你喜欢的APP总是对的,它们的设计目标和你相同,你却没能认真思考过。以下是一些被认为是好的或者曾经被认为是好的设计方法,并不像你第一眼看上去的时候那么好。

1.隐藏导航栏

滑出菜单灵活而方便

 

至少有数十万篇文章探讨过汉堡菜单,这些文章大多是设计师写的。如果你没有看过,那就去看一两篇,简而言之,并不是指汉堡图标本身,而是关于将导航栏隐藏在一个图标后这样的设计。

这个解决方案对于设计师来说十分诱人和方便:不必担心屏幕尺寸的限制,将你的导航都放在这么一个可滑动的默认隐藏的地方。

然而,实验表明,将菜单选项暴露出来对增加关注、用户满意度和营收会更有效。这就是为什么现在所有的大公司都用一种总是可见的导航方式替代了汉堡菜单。

Youtube的导航变了

 

如果你的导航比较复杂,隐藏并不会让它变得更友好。确立优先级才是关键。

 2.随处可见的图标

受限于屏幕尺寸,将所有的标签文字替换成图标似乎想都不用想。图标只占用很小的地方,不用刻意解释,人们总会熟悉这些图标的,是吧?其他APP都这么做。

当心里面这么想着,APP设计师们有时就会将一些重要的功能隐藏在一些不容易知道具体含义的图标里。你想得到么,在Instagram里点击这个奇怪的图标居然可以直接发送信息?

 

或者,假设你之前从来没有用过Google Translate,你觉得下面这个图标是什么功能?

 

这是个常见的错误:假设你的用户既熟悉这些抽象的图标又肯花时间去弄明白它们的含义。

Bloom.fm让人困惑的底栏

 

如果你为了让设计的图标更好用而加上标签说明,那你就错了。即便你是Foursquare,你的用户到底会学习使用,你也不应该这样做。

Swarm的图标隐藏提示

 

并不是说完全不能用图标。下面有很多用户很熟悉的图标,大多表示一些寻常的功能比如搜索、播放视频、电子邮件、设置等。(用户可能依然不确定这个爱心图标是什么意思)

一些图标已经被大众所熟知,所以多多考虑下它们吧

 

复杂抽象的功能,总应该伴随适当的文字标签展示。在一些例子里,图标仍然是可用的,它们可以提升菜单条目的可发现性,给你的APP增加些个性。

基础功能可以有效地用图标呈现,但是更复杂的应该加上些文字标签。(用图标一定要测试它们的可用性)

3.手势导航

2007年iPhone发布的时候,多点触控技术变成了主流,用户不仅仅可以点击屏幕,还可以缩放并且滑动屏幕。

手势操作在设计师中间变得流行起来,许多APP采用了这种方法。

Clear里的手势操作

 

和隐藏导航、用图标代替文字标签一样,手势操作对于设计师来说好像节约了许多屏幕空间。(“这不应该有一个删除按钮,用户仅需向左或向右一滑,然后点击删除就行”)

对于手势操作来说,最大的特点就是它总是隐藏起来的。用户需要去记住它们,正如汉堡菜单:如果你隐藏了一个选项,几乎就没有用户会去使用它。

而且,手势操作和使用图标一样:大多数用户明白,像点击、缩放、滑动这些操作,并不是所有的APP都适用。

不幸的是,很多手势操作既不标准又不在APP之间通用——这仍然是一个界面触控设计的新领域。一个简单的手势操作比如滑动一个电子邮件在不通的电子邮件APP里会有所不同。

Apple Mail中向右滑动显示“标记为未读”的操作

MailBox里同样的操作

 

也可以想想摇晃设备在iOS里表示撤销,而在Google Maps里表示发送反馈。

不要忘记手势操作是需要记忆的隐藏的操作,它需要用户耗费比较大的努力去熟悉。你一旦开始用手势操作,那就需要让它们统一起来——如果这对于你的APP来说是一个很关键的组成。

4.载入时的浮层提示

载入页面,最近比较火的设计话题,指的是一个APP在首次被使用的时候,出现在APP上的信息浮层。在许多例子中,这个简单的方法展示解释页面的引导提示:

Dixcovery里的帮助浮层

 

为什么这是一个不好的方案?因为许多用户都会跳过引导,他们会直接开始使用APP,就算他们看了引导信息,点击关闭后也会直接忘掉它到底说了些什么。(特别是这个屏幕上塞满了各种信息的时候)。并且,在你的界面上加入这样的标记一点也不直观。请记住:

在用户界面上,如果你必须添加解释,那就是设计得不够好

 

引导的流程可以用其它方法设计得更友好。比如Slack,在首屏展示一些内容,只是简单地介绍它们自己,展示理念而不是展示屏幕和功能。

一个更具交互性的方式是渐进式的引导。多邻国不解释它是怎么用的,用户可以直接跳过,做一个选择语言的快速测试(甚至不需要注册),最好的学习就是去做。并且可以用一个更引人入胜的方式去展示APP的价值。

记得Mailbox和Apple Mail中手势操作的区别吗?他们的渐进式引导是这样工作的:用户在真实使用这款APP之前必须按照引导尝试每一种手势操作:

在设计你的半透明引导标记页面之前,停下来想一想用户初次使用的体验会是怎样的。聚焦上下文情境,在大多数的情况下,这是一个欢迎用户的更好的方法。

5.创造性并且直观的空状态

空状态常常被经验不足的设计师所忽略,然而,它们在APP整体体验中是至关重要的一环。

有时设计师将错误消息和空状态看作一个有机会去做一些创意型活动的空白画布。

比如Google Photos的空状态页面:

Google Photos里的控状态

 

第一眼,看起来不错吧?好的布局不仅又一个漂亮的图案,还要具备引导性。

再看一眼,好像有点奇怪:

  • 这都没有东西,为啥又一个大大的搜索按钮?在啥都没有里搜索?
  • 第二重要的元素,这个图片显然是不能按的(虽然可能会尝试下)
  • 提示文字说我应该寻找“+”,这太尴尬了。为什么这个提示按钮里没有个加号按钮呢?这就像是说“点击继续按钮继续”

上面这个空白状态根本不能帮用户理解情境:

  • Collection是啥?有什么用?
  • 为什么我一点都没有?
  • 我能做什么关于这个的事(如果我能做的话)?

当谈到创意型的时候,少即是多。下面这个空白页面就做得非常不错。(让我们忽略这句“现在点击下面这个按钮”的描述)

Lootsy里的空状态

 

不要忘了空界面(就像WEB里的404界面一样),它不仅仅是视觉或者品牌标示。它们在增强可用性上又更重要的作用,直观点吧。

 最后:质疑一切

不要误会我:设计模式和好的设计实践仍然是你的好伙伴,但记住不同的APP的用户是不一样的:一种解决方案可能在一个APP里很完美但是却并不适用于你的,它不是一个普适性的东西。并且,你可能从来不知道为什么一个APP会这样设计。

独立思考,好好设计,认真研究。

测量、测试、验证——只要有意义,不要害怕违背规则。

++作者/原文信息++

From Medium.com
Misused mobile UX patterns
Zoltan Kollin
Translated by Purron

相关文章

评论 (0)

还没有任何评论

发表评论 Leave a comment :