【墙外干货】那些年你膜拜过的设计范例也许都是错的

发布者: 轶名     时间:2016-10-20

   如果你是位有经验的设计师,你可能会同意,在 UI 设计的领域中,受到他人的启发并不能与窃取创意画上等号,而是共同研究什麽才是最佳实践、使用设计模板(Design Patterns)、遵守设计准则、透过模板确保你的用户可以熟悉如何操作你所设计出的使用者介面。


   有人说,一味遵守设计准则、以及跟随他人脚步,是在扼杀创意,而且到最后,所有的 App 看起来都一样。从 UX 的角度,我则看到不一样的问题。当你开始导入某些设计模式之后,可能会让你觉得 Google/Facebook/Instagram/其他你喜欢的 App 就是对的,他们的设计目标就是你的目标,你也从未质疑。以下我们就会列出一些你可能会觉得是最佳的设计模式,而其实并没有你所想得那麽好。


隐藏的导览(Navigation)

   我猜至少有五十几万篇讨论过汉堡选单(hamburger menu)的文章,绝大多数都是设计师写的,为此争论不休。如果你都没有读过,不妨读个其中一两篇,但简言之,问题不是在这个汉堡选单的图示本身,而是关于这个设计把导览行为隐藏到图标之后。

具有弹性而且方便使用的侧边选单


   对设计师而言,汉堡选单这套解决方案既诱人且便利:你再也不用担心萤幕尺寸的限制,只要把整个导览行为都塞到一个可以卷动、预设隐藏的选单中即可。


   不过,实验显示,把各种功能选项直接显示出来,是更能够增加使用者互动、让用户满意、以及获得营收的做法。因此,现在所有 App 市场的大玩家都从原本的汉堡选单设计,转往让功能更直接可视的方向移动。

Luke Wroblewski 重新设计的 YouTube 导览方式。


   如果你的 App 的导览行为很复杂,把导览隐藏起来,并不会让你的设计对移动端用户更友善。反之,你应该挑选最重要的功能,显示出来。


图标,没完没了的图标

   因为萤幕尺寸限制,造成很多人不经大脑思考,就尽可能的使用图标(icon)代替文字以节省空间。在画面中使用图像既可使用较少的空间,也不需要多国语文翻译,而且人们都习惯图标了,对吧?此外,其他所有 App,也都这麽做。


   因为心中有这样的假设,不少 App 设计师便把许多功能隐藏在其实难以理解的图标之后。比方说,在头几次用 Instagram 的时候,你有办法看懂,其实你可以使用这个图标传送讯息给其他用户吗?



或,假如你从来没有用过 Google 翻译,你觉得按下这个按钮,会出现怎样的功能?



假设用户都很熟悉这些抽象的符号,或假设他们愿意花时间探索、了解这些抽象符号的功能,都是常见的错误。


Bloom.fm App 中的迷之 Tab Bar


   如果你设计了一个图标,还觉得用户看不懂,得加上一个浮动的文字说明,就代表你的设计真的有问题。就算你是 Foursquare,然后用户一定得学会这个功能,一样是个问题。

Swarm App 中的图示提示文字


   这不代表你就不应该使用图标。毕竟,也有不少用户已经清楚理解的图标,这些图标绝大多数代表各种常用功能,包括搜寻、播放影片、email、设定…等等。(但其实用户也可能不太能确定这些图标的功能,比方说,当他按下爱心图标的时候,就不见得知道到底会发生什麽事情。)


一些绝大多数用户都可以轻易辨识的图示


   在设计复杂并且抽象的功能时,便应该要搭配适当的文字说明。在这类的状况中,图标仍然有其用途,图标可以加强用户在选单中辨识这些功能,并且呈现出你的 App 的独特风格。

Pixelmator 的导览选单


   用图标可以有效代表不少基本功能,但是当功能複杂时,使用文字说明会更有用。(而且,当你用了图标,一定要做过使用性测试才行。)


手势操作

   苹果 2007 年推出 iPhone 之后,主流便开始注意多点触控,用户也学会除了单点屏幕之外,还可以使用多指缩放、及横画等手势。


   于是手势操作在设计师之间便流行起来,不少 App 中也做了手势操作的设计实验。


Clear app 裡头的手势操作


   就像把导览行为隐藏起来、或是用图标取代文字一样,设计中加上手势操作相当诱人,因为可以节省画面空间。(在画面上就不需要放置删除按钮了,只要用户用手指向左、或向右滑动即可。)

首先,我们知道各种手势其实都是被隐藏起来的行为。人们需要费力额外记忆。就像汉堡选单的例子:愈是把功能被隐藏起来,愈少人就会使用这些功能。


   此外,手势操作跟滥用图标有一样的问题:有些手势比较常用,像单指点选、缩放以及卷动等等,反之,有些複杂的手势,用户便必须就不同的 App 额外学习。


   很不幸地,绝大多数的手势操作,并没有在不同 App 之间统一 ——在触控介面的设计中,这还是一块很新的领域。就算是单指横画,在不同的邮件 App 中,也有不同的行为。



Apple Mail 中,往右横画,会出现「标记成未读」选项


在 Mailbox app 中,向右横画,则会变成封存(archive)邮件


   甚至,当你摇晃手机的时候,也会有不一样的行为。在 iOS 上摇晃手机代表还原上一动(Undo),但是在 Google Map 中,则是发送意见反馈。


   千万别忘了,手势是被隐藏的操作行为,而且用户要花上不少心力记忆。如果你是 Tinder 的话,你大概有办法可以教育全世界往右滑动是什么意思,但前提是:这个手势操作,是你的 App 的设计概念的核心。


使用覆盖提示当作首次使用说明

   首次使用说明(Onboarding)是 UX 话题的热门,代表的是用户与你的 App 的第一次接触。在许多例子中,首次使用说明通常代表的是在你的原本的介面上,加上一层覆盖提示(overlay),解释每个功能的用途。

Discovery app 中的覆盖提示


   为什么这是一种很糟糕的解决方案?因为绝大多数的用户都会略过这些介绍提示,他们只想马上开始使用你的 App。而且就算他们注意到了这些说明,他们只要一把这一层覆盖提示关掉,也就马上什么都忘记了(特别是画面中塞满一大堆资讯的状况下)。另外,加上各种标记,也不会让你的介面变得更直觉。


你要记得:

「 UI 就跟笑话一样:需要解释的笑话不是好笑话,需要解释的 UI 也不是好 UI。」


   首次使用说明可以用很多种不同的方法,变得对用户而言更有用。比方说,打开 Slack 看到的第一个画面,就在建立情境:他们做了简单的自我简介,主要强调使用这个 App 可以带来什么好处,代替用来说明功能的画面。



   另外一种更具互动、亲近用户的方式,则是使用渐进式的首次使用说明。在 Duolingo 裡并没有解释这套 App 如何运作,打开 App 之后,用户就马上就选好的语言进行一段简短的语言测验(甚至用户都还不需要注册帐号),因为让人们学习的最好的方法,就是从做中学。而且,直接揭露这套 App 的价值所在,也是更有效加深用户印象的方法。



还记得在 Mailbox 裡头,横画手势与 Apple Mail 不一样吗?他们也使用了渐进式的说明:用户在实际开始使用 App 之前,首先要实际操作过一遍这些手势。



在你开始在半透明的覆盖画面上,设计各种箭头标记之前,请先停下来思考用户在第一次使用你的 App 时,到底应该要有怎样的体验。我们要聚焦在情境上。在绝大多数状况下,一定会有比覆盖提示更好的方法,可以用来欢迎你的新用户。


充满创意但是违反直觉的空资料画面

   缺少经验的设计师往往会忽视空资料画面,不过,空资料画面会是营造整体 App 的使用经验的重要一环。


   有些设计师,会把错误讯息或是空资料的状态,当做是一张可以尽情发挥创意的空白画布。

我们来瞧瞧 Google 相簿的空资料画面:


Google 相簿的空资料画面


第一眼看下去,很不错,对吧?妥当安排的版面编排、加上说明文字,上面还有漂亮的图片。


我们再看一眼,就发现了一些奇怪的事情:

* 为何在没有照片收藏(collection)的时候,下方会有一个这么突出的搜寻按钮?你为什麽会想要在空无一物中搜寻?

* 第二突出的画面元素,则是上方一大张显然不能按的图片。(不过有些人可能会去按按看)

* 提示文字说,我应该去看看画面上方的 + 号,真是有够糟糕,为什么不把「加入」按钮就直接放在提示文字裡头呢?这段文字简直就像「请按继续按钮继续」一样荒唐。


这样的空资料画面,显然无法让用户了解当下的情境:

* 什么是收藏(collection)?收藏为什么有用?

* 为什么我什么收藏都没有?

* 我该对此做些什么?(如果我一定得做些什麽的话)

当我们讲到创意的时候,少即是多。下面这个空资料画面的范例则在有用这个面向表现非常出色。(我们姑且先忽略「请按下方按钮」这段话)


   请别忘了,空资料画面(或网站的 404 页面)并不只是一个发挥视觉美感或品牌个性的地方。空资料画面在 App 的可用性上也扮演了重要的角色。请让他们变得更直觉。


质问一切

   请不要误解:各种设计模式与最佳实践,仍然是你的好朋友。但你记住每个 App 的用户都是不同的,某套设计在某个 App 可能成功,但是在你的 App 中可能会失败。没有什么设计可以放诸四海皆准。而且,你始终无法搞清楚为什么某个 App 之前会用那种方式设计。 


   你要自己思考,你要做自己的设计,你要做自己的研究。


   测量、测试、检验。而且,当你发现你的想法有道理的话,也不需要畏惧违反既有的准则。



End


译者:zonble
(文章来源网络,如果侵权联系删除)