04月 11, 2013

又是一周过去,宅的日子越过越精炼,连续多日每天读一本书,到了晚上就觉得大脑好像变成了一个卡通形象,就是那种仰面朝天躺在地上四肢无力动弹不得只剩下喘气的小人儿的样子。剩下未读的书不多了,又该补货了诶。来看本周的译文呗,有点长,主要是图多。

这里进入译文。我(英文原文作者)时常和其他设计师讨论到产品愉悦性的话题。在最近的一次聊天中,有人提到这样一个有意思的问题:

我们可以首先专注于提升产品的愉悦性,然后再考虑可用性等其他方面的问题吗?

这个问题立刻让我联想到“形式追随功能”这句话,所以我还是倾向于功能与可用性优先的方式。

不过必须承认,这种通过理性分析入手的“传统”设计思路或多或少会让我们失去一些在创意上实现突破的机会。也许我们可以从“有趣”这个角度展开设计工作,首先聚焦于体验的愉悦性,然后再将整个方案“拉”回到一个约束框架中,使它最终成为一个切实可用的产品?

无论我们的实践方式从哪个角度出发,有一点是无疑的:任何一个成功的设计方案都必须以产品功能的可行、可用、可靠为基础。假设你已经有了一款可用的产品,并且希望为其注入更多能够让用户在情感上为之吸引的元素,那么你应该做些什么呢?应该从何处入手?下面是我的十个建议,希望能够帮你有效的提升网站或应用产品的体验愉悦性。

1.优雅的视觉外观

我们都知道第一印象的重要性。精心雕琢的界面可以在最短时间内给用户带来视觉上的“优雅”冲击。下面这些产品就是通过出色的视觉设计以及对细节的把握给用户留下了可持续的良好印象,从而为长期的愉悦体验奠定了基础。

Your Karma

Your Karma是一款移动wi-fi设备,我最近很钟情于他家的网站。字体的协调搭配,柔和的配色,聪明的图像运用,精巧的细节动效,所有这些要素结合在一起构成了非常优雅的用户界面。

Path

Path的UI在文字、配色、图形元素等方面几乎都体现出了像素级的精准把握,不仅为用户呈现了极佳的细节表现,而且带来了很多具有典范性的使用体验。

Rdio和新版MySpace

Rdio和新版MySpace都采用了扁平化的风格,整体形象明亮清晰,配色、字体和图形元素都非常简约精炼。

相关阅读:移动应用的视觉美学 – 谈三款拥有高收入的应用产品

2.文本

例如表单和链接附近的小注释、按钮标题、404页面注解等等,通常都是在开发流程后期匆匆完成的。实际上,这类文本还是蛮重要的,它们可以在交互流程的细节当中辅助用户更好的完成任务,而且,如果你足够用心,也可以在这些细微之处融入一些个性化的能够提升交互愉悦性的元素。

Flickr

很多网站都会在文本信息的个人化方面下功夫,Flickr在这方面做的很有示范性,非常经典的例如用户每次访问都会看到不同语言的欢迎辞,让人感觉很诙谐甚至是调皮。

Clearleft的404页面

Clearleft将其404页面看做展示网站人格的机会,通过绕口令一样幽默略显恶搞的文案让用户感觉到网站背后真实人类的存在,在出现问题的状况下尽可能降低用户的负面感受。

Funny or Die的邮件共享

Funny or Die在邮件分享表单的错误提示中同样使用了好玩、自嘲风格的文案,和整个网站的主题个性保持一致。

3.个性化

在现实生活中,我们或多或少都体会过人与无生命物体之间的情感关联,譬如你可能会给自己的车起个昵称,或是喜欢把前照灯和保险杠看做是一张笑脸。这类事情想起来是蛮怪的,不过人类就是这样一种乐于建立“关系”的情感化的生物。

在产品中融入个性化的元素,可以有效的填补人与机器之间的沟壑,使用户在更多时候处于一种积极和正面的情感状态下,提升产品体验的愉悦性。

MailChimp

提到MailChimp,我们几乎都会想到他们的吉祥物Freddie猴子。正是这个吉祥物和相关的元素为MailChimp带来了一种让人觉得轻松愉悦的个性。

Gugafit

矢量插画风格的卡通人物、明亮活泼的配色、童稚风格的字体,这些遍布全站的个性化元素帮助Gugafit塑造出一种温暖、健康、充满童趣的产品个性。

推荐阅读:为产品赋予人格 – 情感化设计的组成要素及实践案例

4.有意义的动画效果

我们在现实生活中按动灯的开关时,可以感受到真实的、能让人产生满足感的触感,这种触感会为我们这些“用户”提供反馈,让我们知道交互行为已经完成。

当我们与数码世界及软件界面进行交互时,这种能够让人了解到交互成功完成的反馈则变得尤为重要。由于这些设备通常无法提供真实的触感反馈,所以我们在更多时候所能依赖的就是清晰明确的视觉反馈形式。

下面这些例子中所展示的动画效果在提供视觉反馈和增强体验愉悦性这两方面的表现都很不错。

iPhone的邮件列表刷新

我个人最喜欢的动效来自于iPhone邮件应用中的下拉刷新,首先,它是具有明确的功能性的,用户可以接收到“刷新正在进行当中”的反馈信息;同时,它也很有意思,对真实世界当中的拉伸效果模拟的很到位,我总是喜欢翻来覆去的拉着玩儿。

页内跳转的滚屏动效

如果不进行任何处理,网页中锚点之间的跳转都是在一瞬间很突兀的完成的,浏览者会感到很突然,视觉焦点难以很快的适应新内容。借助一些简单的JavaScritp,我们可以使这类跳转变的更平滑顺畅,避免用户失去方向感。下面的截图来自我的个人站点。

下拉菜单动效

例如Nike和Burton网站当中的下拉菜单可以通过动画效果真正实现“下拉“,而非突然呈现;即确保功能的实现,也提升了界面交互操作过程中的顺畅体验。

5.键鼠交互

我们通常所说的“人机交互”一般会涉及到键盘、鼠标或触屏设备。特别是受到如今多点触屏设备手势操作的启发,在传统桌面端环境中,围绕着鼠标、键盘的操作特性,打造独特、有趣的交互效果——如果运用得当,这也是提升产品体验愉悦性的良好方式。

todaythe12.com

打开todaythe12.com,你会发现使用鼠标与网页交互也是一件很有意思的事情。他们确实将很多很棒的创意融入到了页面的交互体验中,特别是在Projects部分,鼠标悬停在某张图片上所触发的动效非常真实自然,而且充满触感。

Ben The Bodyguard

Ben The Bodyguard将引人入胜的故事情节与简单却精彩的滚屏交互方式良好的整合在一起,带领用户跟随保镖Ben在夜色中穿行在街道上,通过这种互动电影般的方式牢牢的抓住用户的注意力,有效的传递了产品信息。

Adidas滑雪板页面的视差滚动

“视差”效果结合了页面自然滚动与JavaScript定位技术,是目前比较流行的一种设计趋势。越来越多的网站,特别是单页站点开始使用这种技术,因为它确实是一种在视觉上很逼真且具有强烈吸引力的方式。Adidas滑雪板的官方页面就是这方面的一个绝佳案例。

6.幽默

设计中的幽默元素是一种淡化人机界限、引发正面响应的有效方式。幽默,不仅能在人与人的实际交流过程中起到融化坚冰的作用,它同样可以使软件界面更加亲切友好。

MailChimp的链接与评论

每次你登录MailChimp的时候,右上角的吉祥物Freddie都会随机的叨咕一些东西,例如笑话、歌词或是指向某段视频的链接。

Envy实验室

Envy实验室的“关于我们”页面使用带有搞笑注释的照片对他们的设计师与开发人员进行了自嘲般的调侃。这种幽默可以有效的拉近浏览者与网站背后那些真实的人之间的距离。

Yahoo的注册页面

在表单验证失败这样的环节中,幽默元素同样可以发挥它的正面作用。当你在Yahoo注册时,如果为生日选择了未来的某个年份,那么系统真的会在验证信息中问你是否来自未来。(之前还在微博上吐过Yahoo注册的槽,因为密保问题要求我童年最好的朋友的姓氏必须是两个字…译者C7210注)

7.来自现实世界的灵感

又称“拟物化”,在二维的UI环境中使用现实世界当中的物体作为隐喻,使信息与功能更易识别易理解。这种做法在触屏移动平台当中较为盛行,用户可以通过各种手势与目标对象直接交互。

虽然目前市面上对今苹果在拟物化方面的做法有不少负面的声音,不过不可否认的是,对于某些类型的产品,恰当的拟物化设计风格确实可以造就更易懂易用、更生动愉悦的体验。

iBooks的翻页效果

在阅读类的应用中,翻页动效变的越来越常见。其实,在软件界面中,设计师确实可以使用箭头或按钮一类更“数码化”的方式来实现浏览,不过卷边的书页以及左右滑动的手势更能让用户联想到现实当中翻书的感觉,使交互操作更加有趣和吸引人。

iPhone的播客(Podcast)应用

很多人指责苹果在其应用当中使用了太多没有必要的拟物化设计,这确实是个有争议的话题,不过最新版的播客应用同样属于此类,例如模拟的胶片盘这样的界面元素从功能角度讲没什么实际意义,但它确实给整个产品体验增加了一层与现实世界的情感关联,让用户觉得这不只是一款冷冰冰的数字程序。

相关阅读:关于扁平化界面风格的设计美学讨论

8.惊喜(彩蛋)

谁不喜欢惊喜呢?礼物和彩蛋一类的概念未必只有对儿童或线下情境适用。有些网站在界面中的一些小角落隐藏着小惊喜,虽然在功能方面没有什么实际作用,却能有效的增添一份乐趣和愉悦,甚至引发用户的好奇心,增强他们的探索欲望。

Google Moon

谷歌月球刚刚发布时曾经有一个彩蛋,当你持续放大直到相当接近月球表面时,你会看到地图被渲染成了奶酪的外观。

Supereight工作室

在Supereight工作室的“关于我们”页面中有一个藏的很深的彩蛋,即使你知道它在哪里也未必能看清——在点击Matt Hamm的照片的一瞬间,照片会切换为星战当中的机器人R2D2,只是一眨眼的功夫(鼠标右键单击会使其持续显示)。完全没有任何功能性的一件事,不过一旦你发现了这个小彩蛋,就会觉得在这个平白无奇的介绍页面背后有真实的人类在用心,哪怕只是和你开一个无害的小玩笑。

iBooks中的隐藏logo

在iBooks的书库界面中,持续下拉整个书架,就会看到搜索栏之上还隐藏着一个苹果的logo。翻翻这个帖子,你会看到当人们刚刚发现这个小细节的时候是怎样开心的一起讨论的;虽然在功能上没有实际意义,但这种细节当中的用心显然可以为产品带来另外一个层面的收获。

9.隐形

隐形不只是超级英雄才有的能力。俗话说,好的设计应该像空气一样;只有不好的设计才会被注意到。这句话不仅针对界面设计,整个产品的交互体验也是如此。

IA Writer

与其他流行的文字处理软件不同,IA Writer的界面极其简单整洁,让用户可以全身心的进入工作状态,将注意力聚焦在文字处理本身,不被任何不必要的功能和界面元素所干扰。

10.使用情境和多设备体验

近年来,移动设备的爆发式增长使得设计师必须越来越多的考虑到用户使用产品时的设备环境。多设备生态圈的局面是挑战,同时也是我们打造跨平台愉悦体验的机遇。

Facebook的移动应用

Facebook的Web端页面和移动应用配合的非常默契,使用户可以随时随地通过不同的设备保持信息同步。我个人觉得,他们的移动应用比起Web页面来说,可以带给用户更聚焦化的产品体验。

Rdio

Rdio的桌面端与移动端体验模式比较相似,但在功能和UI设计方面针对不同平台环境进行了非常细心的处理,用户在不同设备和不同使用情境中都可以得到最优体验。

值得一提的是,当移动端应用处于无网络链接的状态时,唯一的警示方式就是将原本是蓝色的导航栏变为灰色,简单易懂,没有任何模态化的突兀元素。

时代杂志的响应式网站

时代杂志在线版是响应式设计的优秀范例之一。通过这种技术,他们的网站在导航、内容布局等方面可以针对不同尺寸的设备进行相应的调整,使单一的网站可以在不同平台上实现最优的体验。

相关阅读:

什么是响应式Web设计?

响应式网站的产品需求和设计流程详解

总结

对于任何界面来说,保证产品功能和可用性都是最重要的前提;在此基础上,通过情感层面的设计原则和技巧使用户在体验过程中更加愉悦,这是将产品推向成功的重要手段。

本文为大家介绍的这些方法当中,有一部分是非常容易理解和落实的,另外一些则需要结合实际产品的特质进行仔细的规划和实施;同时也希望文中的示例能给各位带来一些更加直观的启发。

译文代表原作者观点。欢迎发表评论,或到译者微博进一步交流探讨。

____________________________________________________________________________________

Tags: ,.
03月 18, 2013

是的,我仍然宅在家中。每天的正经事儿呢基本就是一页一页的啃About Face 3,偶尔摘录一些精彩的片段放到微博上;副业则是看刘老根。熏的我一张嘴就是东北味儿。这就叫语言天赋。

其实很多时候看书的目的不完全是获取信息,引用About Face 3第十章关于“流”的定义:

“一种深层的、近乎完全的融入状态”,通常包括一种温和的沉醉感,能让你对时间的流逝毫无察觉。

其实和玩游戏是一个道理,都是为了让自己进入一个更广袤却又更封闭的虚拟的外世界;只是换了一种比较有建设性的方式罢了,听上去也更加有成就感。那么来看本周译文呗,在话题上与之前关于情感化设计还有行为反馈循环的文章有些契合。大概8点20分左右发。

这里进入译文。37signals的Ryan Singer最近在一篇观察报告中说:“要做一把椅子,你首先需要清楚人们是怎样坐着的。要设计用户界面,你首先需要了解用户的意识与想法。”

为什么这事儿如此重要呢?因为对用户心理与行为规律的充分了解可以帮助我们打造更好的产品体验,让用户更happy,从而吸引他们反复访问和使用产品,提升相关转化率。

那么怎样才能更有效的了解用户的心理呢?我们可以从认知心理学和行为经济学等领域当中借来一些概念作为指导,站在用户体验设计的角度进行诠释,从以下五个方面入手,试着“掌控用户的大脑”。

情绪记忆

回忆一下自己曾经吃过的最棒的饭菜——正是情绪记忆让你在很久之后仍然能够记得当时的香气与味道。类似的,如果你经历过某种生死攸关的状况,那么也正是情绪记忆让你能够身临其境一般的回想起当时的种种情景。人类很容易记住那些与情感密切相关的事物,或是那些让我们某方面情绪得到加剧的事情。

这一点对于我们来说有什么意义呢?作为设计师,我们需要在产品与用户之间建立情感的关联与纽带,让他们记住我们的产品,记住那些带来愉悦感受的美好体验,并乐于将这份体验分享推荐给其他人。

在这一点上,我们需要考虑以下两个关键的设计方法:

控制用户的注意力焦点

以旅游网站simplehoney为例。这种类型的站点中,比较传统的做法是让用户通过各种复杂的搜索表单来计划行程安排,而simplehoney则向用户提供了一系列与搜索目标相关的图片或启发性关键词,引导他们更加轻松和直观的完成计划流程中的各项任务,例如选择酒店以及期望中的出游类型等。

在与用户进行信息互动的第一步(选择酒店类型),simplehoney就通过与用户目标相关的图片直接激发他们的想象,让他们在选择的过程中不断产生对目的地酒店的憧憬,从而在流程的第一步就有效的将用户置于一种积极的情感状态下。

在第二步中,simplehoney询问用户所期望的出游类型。这里同样通过漂亮的图片将用户的注意力集中在了“期望”上面。通过这简单的两步,simplehoney迅速的将用户的想象与期望调动起来,使自己的产品与用户目标产生了强烈的情感关联。

为产品赋予人格

第二个创建情感关联的方法就是为产品赋予人格。不过从某种程度上说,这也是一把双刃剑,举个例子,MailChimp的吉祥物Freddie猴子也许可以讨到一部分用户的欢心,但有些用户却更加钟情于Campaign Monitor那样整洁专业的风格。在这一点上,最重要的是,要对产品的目标用户有一个清晰的认知。

以PhotoJojo为例,打开首页,你大概很快会对他们使用的字体风格产生深刻的印象:有趣,友好,生动直白的向你介绍产品信息。用户可以在很短的时间内判断出这样的品牌风格是否能够引发自己在人格和情感上的共鸣;如果符合,则会乐于继续深入的了解产品。

此外,包括拥有开心/悲伤表情的购物车在内的所有情感化设计元素都构成了PhotoJojo的人格,使它成为一个让用户乐于产生交互行为的产品。用户有可能成为产品的粉丝,甚至是口碑传播者;对于产品和品牌来说,这将是无比宝贵的财富。

推荐阅读:为产品赋予人格 – 情感化设计的组成要素及实践案例

深度与广度处理

对于那些相对复杂的任务流程,例如填写长表单或是在复杂的导航结构中浏览内容,用户所表现出来的行为能力会受到当时心智状态的影响。如果产品使用户产生了困惑与受挫的感觉,他们就会进入“深度优先”的处理模式——这与你弄丢了车钥匙之后的心智状态很类似。在这种状态下,任何目标对你来说都是困难的,想要找到你所寻找的东西几乎是不可能的。

在焦虑或紧张的状态下,一个人能够聚焦注意力的范围是很狭小的,你总会在各种可能的解决方案当中选择最显著的那个,意图尽快减小负面效应发生的可能。

在这点上,我个人(英文原文作者)最爱念叨的案例就是旧版的Basecamp。记得有一次我想找一篇自己写过的关于Facebook移动应用的文章,于是试图在页面右上角寻找搜索框,结果完全没找到。然后我上下滚动页面,希望找到搜索功能,却无论如何都找不到。“这可是Basecamp!我敢肯定它是有搜索的!” 我这样对自己说。

经过了很长时间的寻找(给我的感觉像是几个小时)之后,我最终不得不向我们的CTO同学求助。他指着界面顶部一个小小的tab,我发现上面写着“搜索”…点击这个tab,搜索表单便呈现出来。

因为我最初没能在显著和常规的位置找到目标对象,进而产生了挫败感;在接下来的寻找过程中,焦虑进一步加剧,以至于我开始相信该产品真的没有搜索功能,最终没能找到。当然,这决不能成为37Signals在交互设计方面产生失误的借口…

与此相反,“广度优先处理”是我们在开心与放松的时候进入的一种状态。当我们处于正面情绪状态时,大脑的边缘系统会分泌多巴胺,这是一种强有力的神经传递素,能够帮助我们更好的处理信息、生成记忆。

如果我们能够使用户进入积极正面的状态,他们就能更轻松的完成操作任务,并享受整个过程。

在这方面,Google+是个不错的例子,他们通过诸如可爱的小动画效果一类的个性化UI元素让用户在使用过程中产生愉悦,进而激发其探索浏览的主观愿望。

这不是偶然现象。Google+的主设计师Fred Gilbert说:“你大概注意到了,我们用到的各种图形元素,包括logo等等,都经过了一定程度的弱化处理。我们越发认识到,为人们打造体验上乘的产品,这与单纯的制作工具器具之间是有区别的。对于前者,你必须将整个产品的上下文环境都处理的更加友好,更具有亲和力。例如,我们会使用一些有意思的图标,让用户感觉到更轻松自然。”

另外一个经常被提及的案例仍然来自MailChimp,虽然这款产品受到过不少的争议,但不可否认的是,它确实是一款易用的、极具亲和力的,在情感化要素的组合运用方面几乎成为了典范的一款产品,有时你甚至会觉得他们就是为了愉悦我们的大脑而制作了这个东西。

让用户得到愉悦,为他们创造积极正面的体验经历,这会使用户进入良好的心智状态;在这种状态下,他们甚至会忽略掉一些可用性方面的磕磕绊绊。即使在面对问题的时候,他们也会更加倾向于努力解决,而不是立刻放弃你的产品,转投他处。

分解流程

有些交互流程冗长而复杂,需要用户花不少时间来完成。这种情况下,可以试着将整个任务分解为若干步骤,同时在每一步当中给用户即时的反馈,让他们了解到距离全部流程的完成还有多远。

分解不仅可以提升任务的完成率,同时,相比于冗长的大流程来说可以促使用户提交更多的数据内容,而且你也可以有机会在分解出的子任务当中融入更多的乐趣。

分解任务有助于激发出用户内心隐藏的强迫症。将流程分解为片段,同时告诉他们还有多少任务没有完成,这将使用户更倾向于完成全部流程。通常,人们不喜欢将未完成的任务放在那里置之不理,尤其是在他们知道这些小任务是很容易完成的情况下。

LinkedIn在这方面做的比较有代表性。用户注册之后,需要完成个人资料的输入;在这里,LinkedIn将整个流程分为了7个子任务,并在每个步骤当中明确的提示用户当前进展到了哪一步,而且这些任务也是可以跳过的。用户很可能没有时间输入全部资料,但至少可以选择其中一两个步骤来完成,然后暂时跳过其他环节,直接进入使用状态。比起必须完成全部流程来说,这种方式显然更容易使用户上手。

选择的悖论

常言道,有选择就是好的。如今看来真的是这样吗?我们总是要面对非常多的选择,有时看来这甚至是那些有权威的人出于免责的目的而采用的一种手段。

太多的选择有时甚至意味着用户会离开你的站点或是把你的应用从手机中删除。为什么是这样呢?

当面临过多的选择时,我们会担心自己做出错误的决定。有时我们会过于担心得不到好的结果,以至于认为很多不为自己所熟悉的选项注定不会带来好结果,进而忽略掉他们。想想看自己是否有这样的经历:你进入一家餐馆,面对一本厚厚的菜单,纠结了将近10分钟,最后点了那些几乎每次都会点到的东西。

对于产品来说,在任何一个特定的环节里,我们都要仔细考虑提供给用户的选择的数量。很多情况下,较少的选择意味着用户可以更加轻松的做出决定,完成当前的目标任务。

举个例子,用户在Flickr登录之后需要面对总共57个操作选项(包括所有链接在内)。想想看用户登录后通常需要做哪些事情?他们脑子里真的会有50多个目标任务吗?换个角度想,他们现在倒是有了50多个机会去做出错误的选择然后感到焦虑受挫,甚至放弃使用。

旅游网站中的搜索表单通常也是这方面的典型负面案例。ebookers的搜索功能中包含了31个主要选项和6个次要选项,这么多选择不一定是用户真的需要的,而且极大的增加了任务的复杂度。

同样是旅游网站,Skyscanner做的还算好,他们在首页当中提供了10个主要选项和4个次要选项。移除了不必要的选择,也就减少了用户犯错的机会,同时降低了产品的复杂度,最终使用户可以更加轻松愉悦的完成目标任务。

互惠定律

如有有人为你买了杯饮料,你会觉得有必要找机会报答他。这种愿望是人类天性与社交礼节等方面因素的综合产物。

我们可以将这里的饮料替换为徽章、成就等奖励机制,运用到产品当中。在适当的地方将这些小回馈提供给用户,让他们感受到额外收益,从而提升他们的参与度与活跃度。

Codecademy在首页提供了可交互的命令行界面作为引导。用户输入代码后会得到即时的反馈,如果成功完成了小教学任务,还可以得到徽章作为奖励。你完全不需要注册就可以享受到交互式的体验,甚至还能得到徽章,这种感觉很棒,让我很乐于为他们的转化率提升做一点小小的贡献。

这里有一点小原则:不要刻意向用户索取什么,而是要提供机会,让他们愿意主动的对你的产品做出回报。

推荐阅读:设计有效的“用户行为与反馈效应”循环

小结

希望以上这五点可以帮助你更好的了解用户的思维与行为。不妨试着从这些方面入手来改进自己的产品,并对实际的效应保持跟踪。

需要记住的是,这些设计方法并不是要你为产品增加各种华而不实的装饰,我们的最终目的是充分了解用户的目标及行为规律,从而让他们在产品中得到更好的体验;这是通往长久成功的关键。

Tags: ,.
02月 4, 2013

其实我到现在还不清楚哪天正经过年呢,就知道快了,因为公司里的人走掉蛮多了的样子。不,这真的不那么像过年的时节,天气暖和的好像春末夏初,在天台抽烟时甚至会发现成群结队的小飞虫在翩翩起舞。

这都哪跟哪呢。实际上,无论工作还是生活,似乎任何正处于正常进行当中的事情都会让自己产生“过年之后再认真继续”的赶脚,一些需要上手开始做的事也准备“过年假期里再开始搞叭”这样;自己的一些项目、理想中的作品集、一些要读的书、一些想玩的游戏…大体都是这样,其实我眼下把这篇发布出来之后就拿出几个小时把想做的事情猛做一通也不是不可以,但似乎总是想寻找一个大部头的时间;不知是否是拖延症的借口;实际上我不认为自己有这毛病,真的。打住,我们进入今天的正文,关于移动应用的空状态界面设计;虽然文中的示例都是iPhone应用,不过道理应该与平台甚至设备类型无关。(btw,用微信的朋友们可以添加一下Beforweb了呗,点击侧边栏头上第二个图标就会出现二维码)

“空状态”是指移动应用界面在没有内容或数据时呈现出的状态。长久以来,空状态界面一直是被忽视的,因为设计师们通常会将全部精力集中在怎样更好的呈现内容和数据上,只有开发人员才会比较频繁的与这类相对“意外”的状态打交道。也正是因为这样的原因,空状态界面留给用户的印象大体上就是晦涩难懂的文案以及缺乏视觉设计风格。

要想打造完美的整体体验,作为设计师,我们不能放过任何一个用户有可能接触到的界面状态。空状态界面大致包括三种类型:初次使用、用户清空数据、出错。下面,我们就来一同了解一下这三种情境所对应的相关创意要素与注意事项。

1.初次使用

应用在初次加载时留给用户的第一印象是非常重要的。你的一部分用户也许已经通过其他同类产品建立起了心智模型及预期,他们会非常敏感的从一开始就将你的应用与他们已经熟悉的那些进行对比;而另外一些用户可能完全没有同类产品的使用经验,他们就像一张空白的花布,等待着惊喜或失望。无论哪种情况,差劲的第一印象所造成的损害都是很难弥补的。

如果用户下载了你的应用并完成了注册,那么这几乎可以代表他们已经知道你的产品是做什么用的,但未必清楚具体怎样使用。对于某些类型的应用来说,初次登录之后是没有任何数据内容的,这也正是充分利用界面空间为用户提供新手指引的好机会。你可以告诉用户为什么当前没有内容、怎样创建或获取内容;在这个环节中,不妨试着融入一些能够体现产品个性的情感化元素,这可以使用户进入一种较为轻松的上手状态,引发他们积极正面的情感,同时也能给他们留下不错的第一印象。

看看Buffer、Timehop和Dropbox是怎么做的叭。值得一提的是,Buffer与Dropbox的空状态界面与他们各自的Web端页面(bufferapp.com以及dropbox的登录页)在引导与插图等方面都使用了相同风格的视觉元素,这也体现出了他们的产品与品牌形象在不同平台上的良好一致性。

buffer

Timehop

Dropbox(真的很暖心的赶脚,我喜欢 – 译者C7210)

2.用户清空数据

想想邮件或信息的收件箱,多数时候是满的叭,里面有几百封未读邮件也不奇怪。不过不同类型的用户有着不同的需求和用法,有些人确实会阅读其中的大部分内容。

不管你是哪类用户,其实我们在心里或多或少都会有将“待处理对象”归零的欲望(回想一下你看到App Store图标右上角的待更新应用数量图标时的赶脚)。从这个角度讲,将待处理信息进行归零其实是一种没有太多实际意义但却很容易花费时间精力进行操作的任务,有时人们做这件事只是出于那一点点强迫症。这种时候,不妨给他们一点正面的情绪回馈,在空状态界面中给这些用户一点小小的“回报”。

下面我们来看看Sparrow、Gmail以及iOS原生的邮件客户端在这方面的做法。

当邮件被清空之后,Sparrow会在界面中展示一个传统“收件箱”的图标,下面的标题是“零邮件”,形象、干净、简单,多少可以让人产生一点没有多大实际意义的成就感。

Gmail则在这种最基本的做法之上又进了一步,他们的设计师在空收件箱页面中放了一个微笑着的太阳,通过对人类情绪的模仿,为产品赋予了人格,使用户从情感上感受到愉悦。而且他们在文案的处理上也很贴心:“你当前没有邮件要处理了,开心的享受这一天叭!”

而相比之下,iOS自带的邮件应用就缺乏这方面的积极回馈了,用户在这个空状态界面中很容易产生疑虑:我是否已经真的清空了收件箱,还是我的网络连接有问题?或是别的什么状况导致我看不到收件箱里的其他邮件?任何一点疑虑都会导致认知上的负担,进而影响产品的整体体验。

3.出错

“出错”多数是由网络连接的中断引起的。可以试着在这种情况下提供一些更有用的或是更具亲和力的内容,而不是一堆丑陋的出错信息。让用户在非常规用例中看到你的设计,他们就会感知到当前的状况是在可预计范围之内的,从而放松下来。

接下来我们对比一下Chrome、Opera Mini和Safari这三款浏览器在这方面的表现叭。

Chrome提供了大量的、似乎只有技术人员才看得懂的出错信息;普通用户甚至不会有兴趣花时间在移动设备上阅读这样的内容。

Opera Mini只提供了一个模态对话框一样的控件,整个风格看上去非常生硬,不过文案相对简单易懂了些。

而Safari的处理方式则漂亮了很多,它通过简单直白的语言向用户解释了当前的状况,整个界面的视觉风格似乎是有意在柔化“出错”所带来的负面效应。当发生网络连接问题时,人们很容易产生非常消极的感受,这种情况下,最不该做的就是通过大段晦涩的文字以及生硬的视觉风格来加剧用户的焦虑感。

当然,出错的情况不止会发生在浏览器当中。再次以Gmail的iPhone客户端为例,他们同样使用了情感化的元素来呈现出错信息——一个看上去不那么开心的小云朵——似乎应用自身也很理解用户当前的感受。

相比之下,Instagram和Youtube的反馈方式在态度上略显消极。

总结

其实,无论你的产品是否需要网络连接,或者它根本就不是iOS应用,这当中的一些基本道理都是相通的:留意那些用户无法获取任何内容的状态,给用户某种形式的反馈。我们进一步将本文内容抽象为三条简单的设计原则:

没有数据时,引导用户创建内容

思考目标用户在使用产品时的心理与目标。他们是否会频繁的清空数据?如果是的话,进行相应的设计;你甚至可以准备一些不同的空状态内容来随机展示。

发生错误时,不要让用户进一步焦虑。通过你的设计弱化用户心中的负面感受,降低他们对坏状况的感知。

Tags: ,,,,.
01月 21, 2013

阳光明媚的周六午后,窝在沙发里做做博客,微困。下载了一包“我爱我家”,搁电视里在旁边放着;多少有点不和谐的赶脚。这半年,编辑部的故事、过把瘾、封神榜、西游记、我爱我家轮着来,还真有点欲罢不能了,就差看渴望了。年龄暴露的一览无余。

悄悄打个小广告,最近上了个新博客,Be For Apps,平时有的没的随便写几个字,主要用来从设计的角度记录自己平时试用试玩各种应用过程中的体验感受;一直在其微博上做应用设计点评的Chibi猫同学也会在这里一起念叨,比如这篇“美丽说你这是要干嘛”,欢迎有兴趣的朋友们围观呗。

接下来进入本周译文。所谓“渐进式吸引”,也不是什么前无古人后无来者的新鲜东西,作者将这个概念从一些实践案例中提取出来,归纳为一种产品设计和推广思路,蛮值得参考借鉴的。走起叭。

用户访问你的产品推广页面时可以看到些什么内容?通常也就是功能特色啊截屏啊口碑评价啊这些,外加一个或多个行为召唤(call to action)操作。这类传统的产品介绍页面一般都会面临两个挑战:首先,它必须让潜在用户对你的产品产生足够的兴趣,并进行注册或下载;第二,它需要在一定程度上让这些潜在用户对产品的运作方式及使用方法有一个大致的了解,使他们在正式使用产品的时候更容易上手。

不妨试着将这两方面结合起来,引导潜在用户直接在产品介绍页面中通过某种方式试用产品,让他们逐渐对产品的功能特色及使用方法产生认知,从而激发他们自主的执行下一步动作,例如注册或下载——我(英文原文作者)将这个过程称为“渐进式吸引”。

产品实例

我们来看一个实际案例叭:我设计了一款iPhone上的抽认卡应用,名字叫作Fluent,它的特点就是可以根据用户的实际水平,帮助他们重点记忆那些相对生疏的词汇。用户不需要做复杂的学习目标设置,打开应用就可以开始学习单词。其中的具体原理不在这里多做解释了,这本是一个非常简单易用的产品概念,但它在投放市场后并没有很好的引起用户的关注。(插一句,我们曾经发过这位作者的另外一篇文章,“将产品在移动应用市场中推向成功的十点建议”,他在其中也谈到了推广这款Fluent时遇到的一些问题;非常不错的一篇文章,再次推荐。另外,这种结合自己的产品案例撰写经验心得文章的做法,也不失为一种推广技巧 – 译者C7210)。

为此,我专门制作了一个小站点,用来对Fluent进行介绍和推广。大家可以在下图中看到,这个页面当中没有任何功能介绍或是推广方面的内容,它只是询问用户希望学习哪种语言,包括法语、意大利语、西班牙语和拉丁语。

当用户选择了某种语言,譬如拉丁语,界面会通过动画效果滑入一张卡片,上面写有一个拉丁语的单词,同时在卡片旁边输出很简短的介绍文案,引导用户点击卡片,查看这个单词的解释。

卡片被点击之后会翻转过来,这样用户就可以看到背面的单词解释了。同样,这里也会有提示文案,告诉用户在他们真正记住了这个词之前,系统还会再输出几次,以增强记忆。

用户需要对这个答案是否符合自己的记忆做出确认,即点击“正确”或“错误”;然后一张新的记忆卡会出现,同时,提示文案会告诉用户,如果他对之前那张卡片上的单词记忆有误,那么这个单词会在下一轮复习当中再次出现。

就这样循环下去…用户成功的记住了三个单词之后,就可以看到一个新的界面,标题是“恭喜!你已经走上拉丁语的学习之路了”,下面则是注册表单。

这里有个细节需要注意。你可以看到,我并没有在这个界面里显性的怂恿用户立刻去下载应用,而是提示他们通过创建账户的方式保存之前的学习进度。这样做可以让这些潜在用户了解到之前在试用和学习的过程里花费的时间与精力不是没有意义的——让用户感觉到他们的付出是能产生回馈与回报的,这很重要;这种“替用户考虑”的方式可以更加有效的提升转化率。(相关阅读:表单设计与转化率的提升)

这就是我对“渐进式吸引”这个概念的实践方式——创建一个与自己产品相关的简易Web应用,在首页通过简单直白而符合目标用户核心需求的文案引导他们直接“试用”,在这个过程中“随需随到”的对产品功能特色及使用方式进行简要介绍;在这些潜在用户通过亲身实践对产品产生了渐进式的认知之后,再引导他们进行转化。

其它实践案例

相比于传统的产品介绍方式,“渐进式吸引”可以使访问者立刻进入“用户”角色,直接试用产品,而无需首先注册登录或是花时间了解足够多的产品信息。接下来我们再看两个相关的实例,然后简单探讨一下怎样在你的产品中运用这种方式。

首先来看Netvibes,他们鼓励匿名访问者直接尝试着创建订制化的新闻面板,在这个过程中一点点的进行提示帮助,使访问者在实际操作的过程中逐渐了解该产品。当他们进行了一定程度的订制化操作之后,Netvibes会提醒访问者创建帐户,藉此保存之前的设定。

对于已经对产品功能及操作方式有了一定程度了解的潜在用户来说,更加容易做出转化为正式用户的决定。

再来看另外一个例子。Pandora会直接向访客询问他们喜欢的音乐艺术家或风格,并根据他们的输入创建一个电台,播放这些访客喜欢的音乐,这个过程完全不需要访客进行登录注册。相比于创建一个产品介绍推广页面,向访客天花乱坠的描述产品的强大功能,然后撺掇他们注册登录,Pandora只是简单的与访客进行了一次关键的互动,但实际转化效果却是传统方式无法比拟的。

通过“渐进式吸引”推广你的产品

也许你已经开始琢磨能否运用这种方式推广自己的产品了。开始之前,最好先问自己两个问题:

产品的核心功能是什么?

有哪些功能相对复杂,需要花时间向潜在用户进行解释说明?

Pandora有很多功能,不过最核心最基础的还是为用户播放推荐曲目,所以他们通过渐进式吸引将这一点直接推到了访客面前,让他们在最短的时间内了解到产品的核心价值;而其他方面的功能则随着访客转化为用户而逐渐围绕着核心价值体现出来。

而对于Fluent来说,最大的障碍在于怎样让潜在用户理解学习单词的流程,理解系统向他们输出单词的频率与其记忆程度之间的关联。通过渐进式吸引,让潜在用户直接进入角色,在学习过程中理解产品的功能,这比通过文字和图片内容向他们解释产品机制要有效的多。

Tags: ,,.
01月 14, 2013

周五抽烟时我说,心里的感觉就像是一个时代结束了。一位同事说,只是又到了开始翻开新的一页的时候而已。是的,的确是这样。

现在耳边放着Radiohead在不插电专辑中翻唱的Wish You Were Here,不知这是一种淡定还是麻木,亦或是大脑自作主张的帮助我屏蔽掉了心中的某些感觉,让我只需安静的处于这一切的现场而忘乎所以。

想到另外一位同事所说:“我真的只想安安心心的做做设计,做自己喜欢的这些东西”…到这里我几乎不知该怎样才能继续写下去了…我有幸能和你们一起度过一段值得珍惜和回忆的时光,我永远不会忘记;我们对得起“设计师”这个头衔,而他们不是。

今天开始在微博里对苟延残喘着的每一天做留念,可我甚至不知道自己是在纪念些什么混账东西。一想到这些就无法停下,这简直要了我的命,接下来还是进入本周译文的正文叭=)

即将上线(coming soon)”页面是互联网当中一个相对较新的概念,过去很长一段时间里,每当有新产品新业务准备就绪时,今天还什么都没有,转天它就突然出现在线上了。

如今,互联网及移动应用领域的营销推广策略发生了一些转变,要想将产品有效的推入市场,我们通常需要做足“预热”工作。这也正是“即将上线”页面的由来。

你可以在网络上找到很多这方面的优秀设计案例;而今天我(英文原文作者)希望能够和大家一起更深入一步的对“即将上线”页面的设计原则及重要创意要素进行了解和分析。

惊叹效应

在我看来,无法产生惊叹效应的“即将上线”页面是没有任何意义的。如果你无法在设计当中融入任何的“惊叹元素”,那么干脆不要把它放到线上了,因为这件事情的全部意义就在于在产品发布之前尽量吸引潜在用户的目光、让他们产生兴趣,而不是让他们在看到实际产品之前就已经觉得这东西索然无味了。

当然,这里最难的恐怕就是如何对“惊叹效应”这个概念进行的定义了。坦诚的讲,关于这一点,我无意也无法在这里给出既精确又具有普遍实用性的说法,只能建议各位根据自己产品的实际情况进行分析,提炼出最能代表产品核心价值的元素,并通过能在最短时间内唤起潜在用户的需求与情感共鸣的方式将其融入到页面设计当中。

什么东西即将上线?

既然是“即将上线”页面,那么就必须让访问者明明白白的了解到究竟是什么东西即将上线,对叭?看上去像是废话,但至少我自己就见识过很多在这方面差强人意的页面,我能感觉到他们在努力说服我留下邮箱以便在产品推出时收到提醒,可就是看不出他们即将推出的到底是什么东西。

所以,一条显而易见的基本原则:如果你想让人们有所期望,那么一定要让他们知道即将上线的产品是什么。

可以试着在这里运用一些技巧,通过有趣的方式向访问者透露出一部分关于产品的重要信息,同时又在一定程度上保持神秘色彩,引发他们的好奇。

不过,记得不要透露太多的信息,否则人们会感觉到自己已经了解了全部,从而失去好奇与期待。所以,在“信息”与“好奇心”之间,有一个微妙的平衡点需要我们根据实际情况去衡量和判断。

关于“有趣”,有一个比较常用的设计技巧,就是通过大号文字来呈现内容,这样既能避免形式上的单调,又可以让访问者在短时间内获取信息。当然,大号文字必然会导致页面空间上的紧张,所以需要对信息进行必要的提炼。

倒计时或完成度

我个人比较喜欢这个概念,因为它们形式简单,容易识别,用户可以很轻松的理解信息,对产品当前的状态产生认知。在实现方式上,也有各种非常成熟的前端插件供开发者们选择。

不过这个概念(特别是“倒计时”)会对产品设计开发进程的灵活性造成影响。一旦在“即将上线”页面中使用了这个元素,你的产品就必须在倒计时结束时立刻上线,不能提早,也不能拖延,否则不仅这个设计元素会失去它的意义,更重要的是你的潜在用户会感到被愚弄,从而丧失对产品的信任感。

邮件订阅

邮件订阅是有效的在线推广方式。如今,人们在桌面端和移动端都有多种多样的交流方式,不过传统的电子邮件依然是非常重要的沟通手段。

试着在“即将上线”页面中放置一个订阅通知邮件的表单;如果你目前透露出的产品信息已经能够吸引到足够多的潜在用户,那么你很有可能通过这种方式进一步将潜在的忠实用户提取出来,并且在产品上线及将来的迭代更新时向这部分用户发送通知。

折扣及奖励

对于某些类型的产品,可以考虑在“即将上线”页面中向潜在用户提供一定程度的折扣或奖励。特别是一些概念较新的工具和服务,或是涉及传统线下产品的状况更加适用。

你可以向订阅了通知邮件的用户提供折扣,这是一石二鸟的做法——即增加了订阅率,又通过一定的“好处”促使这些访问者在产品发布之后能够成为真正的用户。

当然,你需要就这种方案与需求方或客户进行充分的评估,确保在产品初期的市场策略中存在折扣空间。

品牌元素

这是很基本的一点,不过在目前讨论的话题当中还是有必要提及一下。我们一般不会忘记在“即将上线”页面中放上公司的logo,但是页面的气质、配色方案以及细节当中的元素风格也要注意和公司、产品及品牌形象的整体保持一致。

SEO

“即将上线”页面本质上是很短命的,不过考虑SEO方面的问题还是有必要的。

由于内容确实有限,所以我们可以从前端开发的角度尽量语义化的对页面代码进行优化。记得使用不同层级的标签(1到6)来输出页面标题、副标题、口号和描述一类。

当然,从现实的角度讲,我们并不能指望一个简单的“即将上线”页面可以被搜索引擎推到首页;很多时候,我们在这方面所做的努力其实是为了让域名和站点在预热阶段做好充分准备,以便在产品真正发布之后能够立刻应对挑战。

博客

我们在这里将“即将上线”的概念扩展一下,让它不止限于一个简单的页面。如果有条件,你可以尝试为即将推出的产品建立一个博客,使整个预热站点更加具有吸引力。

坦诚的讲,要使潜在用户自主的产生再次访问“即将上线”页面的愿望,这几乎是一件不大可能的事情;通过博客,你可以不断的为他们提供内容更新,让他们有机会去持续而深入的了解他们感兴趣的产品。

当然,这种方式需要付出的努力还是蛮多的,另外对相关资源的需求也更大。如果你准备使用现有的博客系统或是CMS(内容管理系统),那么最好自己动手对主题模板进行订制,让博客的视觉风格与“即将上线”页面保持一致。

Tags: ,,,.
01月 5, 2013

2013年的第一篇,也不知道是不是有什么可以庆贺和纪念的。这个假期没少下雪,印象里在1号之后就没见过太阳的样子了;倒是这样夜晚的时候灯光昏黄的吹吹空调听听B.B.King,还真有那么点迷离。

假期中间回去金山海边爸妈家,温度更低,风雪更大,这种季节没什么人还会到海边溜达了,沙滩上原本那些摩天轮和海盗船一类的娱乐设施也都拆除掉了,彻头彻尾的肃杀荒凉。有意思的是在家里翻箱倒柜找到几本1997至2000年间买的杂志,比如Music Heaven啊通俗歌曲啊这些;拍了照片放到微博上,立刻有朋友评论说我完全暴露了年龄,哈。

这次选取了Computer Arts官网当中的一篇小文章。CA,国内叫做“数码艺术”,记得没错的话我是从2006年3月开始购买的,那阵子算是刚刚进入Web这个行当叭,看什么都新鲜,发现这本杂志之后简直就忘乎所以了,无论是内容还是杂志本身的排版设计都让我无法自拔…不过到了09年之后就不怎么买了,感觉它变了…怎么变的我也说不上,总之不再那么爱了。倒是偶尔会在RSS订阅里发现一点可以读读的小文章,所以这次也算是纪念自己曾经对CA的爱叭。十条设计贴士,帮你塑造更好的iOS应用整体体验

btw,其实这次的图标我不是很喜欢,冷冰冰的赶脚,不过其他几个备选的还没这个顺眼呢。

1.以规则为基础进行创新

苹果的人机界面设计规范给人的感觉有点像枯燥的技术手册,但它绝不是那种可有可无的产品说明书。通读之后你会发现,这套规范当中涵盖的主题非常全面,上至产品方向,下至界面元素的细节,所有这些“规则”都有助于你从基础层面上更好的理解iOS应用设计的方法和原理。只有充分的了解平台特性,对自由发挥的空间及局限有清晰的认知,我们才能更合理更有效的落实创新思维。

2.正确的使用界面元素

人机界面设计规范当中的“iOS用户界面元素使用规范”一章为你详细的介绍了应该在何时何处如何使用各种类型的原生界面元素,包括导航栏(navigation bar)、标签栏(tab bar)、列表、按钮等等。要使产品在最基础的层面上符合用户的认知、降低学习成本,我们必须吃透这些原生界面元素的使用原理及相关的设计模式。

3.考虑设备的特性、局限及使用环境

设计iOS应用与设计网站有所不同,我们需要考虑的因素有很多,包括移动设备自身的功能特性、显示屏的规格局限以及特定的上下文使用环境等。用户在使用移动设备的时候,可能身在户外,或是呆在室内,这类具体情况会对人机交互的会话进程产生相应的影响。在对产品概念及设计方案进行测试验证时,要尽量将原型部署到实际设备当中,在最贴近实际应用场景的环境当中进行操作。

4.订制化的应用图标

应用图标对于产品能否给用户留下良好的第一印象起着至关重要的作用,而且通常情况下我们要考虑的不只是一两个尺寸的图标。iOS人机界面设计规范中的“图标的订制化及图片创建规范”一章详细的列出了使用在不同场景及设备状况下的图标规格,另外,你还可以在这里找到很多关于创建图标及相关图片资源的设计规范及建议。

5.考虑不同的屏幕定向

用户在执行调转屏幕定向的操作时,通常已经在预期当中做好深入探索内容的准备了。所以,对于具有内容获取及编辑功能的应用产品来说,特别需要考虑在不同的屏幕定向方式下提供不同的内容操作模式。另外,不同的定向方式也会产生持机方式转变的问题,例如从单手变为双手,所以相关交互模式的切换也是我们需要同时考虑的问题。

6.触摸,而不是点击

移动应用的界面设计应该以设备特有的输入方式作为基石。iPhone和iPad是典型的电容触屏设备,用户只需通过手指进行“直接操纵”,而无需借助任何外部输入设备。然而,手指的接触面要比鼠标光标的尺寸大很多,而且用户在执行操作时是无法看到手指下面的内容的,所以对于某些尺寸很小的交互元素来说,需要将实际的可触击区域扩大到其可视边界之外。类似这样的限制因素都是我们在设计过程中需要时刻考虑到的。

7.隐形的网格

iOS人机界面设计规范建议,界面中的可交互元素在宽度或高度上不要小于44像素(约1/4英寸或7毫米),否则很难保证用户能够准确的辨识并触击。另外,在移动应用的上下文环境中,足够大的按钮不仅便于操作,而且可以让用户维持必要的注意力,避免被周围的环境所干扰。与Web设计中的网格系统类似,在iOS应用界面设计过程中,可以试着采用单元规格为44像素的网格作为参考来规划界面元素的布局。

8.保持专注

移动应用产品要专注在首要目标与核心任务上,在一两件事情上做到最好,而不是以一般水平同时做很多件事。对于非游戏类应用来说,简短、流畅、能够在最短时间内不受干扰完成任务的体验是最重要的,切莫把效率型和实用型的产品做成沉浸型。

9.界面元素的伸缩性

可伸缩的界面元素的背景图片制作方法有些类似于Fireworks中的九宫图方式。如果你需要实现一个圆角矩形按钮,并且希望它在任何尺寸规格下都可以保持相同的圆角半径,那么必须使用弹性视图(stretchable view)进行创建;系统会使用图片中间的部分作为“伸缩”的背景,而四个圆角保持不变。

10.理论基础

当你第一次读到iOS界面设计规范当中的“用户界面原则”一章时,多半缺乏耐心的略读过去,因为这章看上去稍显理论化了一些,好像布道一样。不过我还是建议各位花些时间认真阅读这部分内容,你会发现这里都是实打实的设计建议,例如保持界面设计的一致性、为用户的操作提供反馈等。

Tags: ,,,,,.
01月 4, 2013

今天下了好大的雪。上海这地方要积雪不是很容易,印象里只有2008年初的那次;更多时候即使漫天飞扬着雪花,最终还是好像下了场雨一样的到处是水。

所以每到冬天的这种时日,就会想到小时候在北方的样子。高三那年入冬之后,喜欢在每个周六的晚上花一个小时左右的时间在外面骑车或是溜达,而且每逢这种时候只听枪花的Use Your Illustion 1,最后在听到Dead Horse或是Coma的时候回到家;若是遇到雪天,则必定是Metallica的黑专辑。走在积雪上面,路上没什么人和车,夜晚很黑,但雪被路灯映照的很白很亮,那样的情景在当时觉得好像做梦一样,如今回想起来却好像可以伸手抓住一样,有种温暖的感觉。

说着说着还有点入神了;此时此刻是现实当中上海的晚间,外面依旧飘着雪,落在地上蛮尴尬的化去了。打住叭,来看这周的译文。原文作者总结了过去一年当中在一些项目的可用性测试里得到的经验收获,虽然有些东西看上去像是老生常谈,但经过实践检验之后所提炼出的要点也许正是我们平时自认为精通但很容易忽略掉的;至少我自己是这样的赶脚。走着叭。

2012年里,我(英文原文作者)在TH_NK里大约花费了50个小时用于可用性测试,其余的时间则主要用来进行实际的设计工作,或是与客户、开发者、分析人员等进行沟通。在这些可用性测试当中,经过对被测者行为的观察以及与他们面对面的交流,我对一些一直以来虽有所了解、但在实际工作中却时常会忽视掉的设计原则有了更加贴近实践的认知,另外也发现了一些从前没有想到过的问题。时值岁末,我将这些经过实践验证的设计要点作以小结并分享给各位,希望能够为大伙来年的工作带来一定参考和借鉴的价值。

1.你不是你的用户

扪心自问,我们真的很容易忘记一件重要的事情:用户并不会按照我们设想的方式去行事。作为产品和设计方面的从业者,我们对自己的产品和服务太了如指掌了,对产品的功能逻辑及设计方案太心知肚明了;即使是作为第三方咨询顾问一类的角色,你也很容易把事情考虑的过于理所当然,认为“外界”的人能非常清楚的理解你所要表达的东西。

而事实上,多数用户在实际上手使用之前,并没有和产品产生长久的关联;对于我们来说很显而易见的东西在用户看来很可能需要一定的辅助才能理解并正确操作。交互模式是否符合直觉,是否能够保持足够的一致性以符合用户逐渐建立起来的心智模型,用户界面是否会在必要的环节提供足够有效的辅助引导,这些都是我们在为核心功能打造设计方案的同时必须考虑到的问题。

相关阅读:具有引导性的移动应用界面设计模式

2.导航至首页

在很多场可用性测试当中,我们都观察到,其实会通过点击页头logo回到首页的被测者很少;多数人都试图通过点击浏览器上的后退按钮来实现这个目标。虽然对于设计师来说,将logo链接至网站首页的做法是一种早已被普遍接受的规范,但事实上普通用户对这一点的认知似乎并不是那么的根深蒂固。

3.通过下拉列表选择国家

我们曾经对一个面向全球的在线零售网站的支付环节进行过可用性测试,从中我们发现,在选择国家的时候,很少有用户懂得通过首字母快捷键来快速定位国家选项在下拉列表当中的位置,然后通过上下箭头按键进行调整并敲击回车或空格键来完成选择。绝大多数的用户仍然是使用鼠标将列表点开,上下寻找并点击选取。

其实下拉列表易用性的问题(特别是那些所包含的选项超过了7个的列表)早就引发过广泛的争论,使用快捷键进行操作的方案也是为了解决这方面的问题而孕育而生的,但在现实当中我们仍然发现有那么多的用户实际上并不了解这种重要的导航操作。

Christian Holst在重新设计国家列表一文中介绍过一种蛮有意思的解决方案,虽然我们还没有对这种方案进行过量化的测试,不过至少它看上去确实比传统的下拉列表方式要好用。

4.拖放

虽然对于我们这些“专家级”的用户来说,拖放是一种很直白、很酷的交互方式,但在可用性测试当中我们发现,很多人根本无法意识到这种操作方法的存在。如果你的产品核心功能在很大程度上依赖于这类操作方式,那么所面对的风险也许会很大。

如果确实要采用这样的交互模式来实现功能互动,那么要确保在界面当中为用户提供足够明显和易懂的操作提示,另外最好考虑提供某种相对传统替代方案,使用户在没有意识到拖拽方式的情况下依旧可以通过他所能了解的操作方法完成目标。

依赖于某种“高级”操作方法才能实现重要功能的产品,总会在某种程度上将一部分用户拒之门外。追求更酷更出彩的交互设计模式,还是追求产品功能的易懂易用,很多时候这是个需要根据实际目标进行权衡的问题。

相关阅读:iOS Wow 体验 – 交互模型与创新的产品概念

5.安全性

在之前提到的对某在线零售网站进行的可用性测试当中,我们发现用户对于“安全性”的态度是有所不同的。某些被测者愿意提交任何信息,而另外一些则非常谨慎,他们必须在充分相信该网站之后才会提交个人信息。所以,在网站的全局体验,特别是支付环节当中充分体现服务的安全可信是非常重要的。

在这方面,亚马逊有一些非常经典的实践方法,例如登录按钮上的“使用安全服务器登录”文案。这些小细节可以潜移默化的提升产品在可信度方面的表现,使服务更加符合用户对于安全性的期望。

其实安全性的重要程度是不言而喻的,我们在测试中体会最深的实际上是这类细节元素对于增强用户安全感所起到的作用。

6.使用合理的默认值

与用户输入息息相关的表单是提升转化率的重要交互元素(推荐阅读:表单设计与转化率的提升)。在很多时候,表单对于产品整体体验的提升也是非常关键的:完成目标的过程当中所需要的用户输入越少,体验越流畅。所以,在必须由用户完成输入的环节当中提供足够合理的默认值就变的非常重要了。

另外,使用提示文案作为文本框的默认占位文字也是一种不错的实践方式。传统的标题label虽然在可读性方面没什么问题,但毕竟还是需要用户首先阅读它,然后再到相应的文本框当中进行输入;而这种方法可以让用户只聚焦于一个对象。

相关阅读:一个文本框搞定信用卡相关信息的输入

7.基础

多数测试流程都表现出了一个共同之处,那就是用户会在简单和基础的操作当中产生愉悦的感受。确实,如果连最基本的可用性易用性都没法保证,那么片面追求炫酷复杂的交互模式显然是南辕北辙的。

我们这些业内人士花了太多时间来研究和使用各种网站服务,我们过于精通那些相对高级的交互方式了,以至于忘记了其实对于多数普通用户来说,很多操作方法并没那么简单;在他们看来,网站和移动应用仍然是一类能够带来迷惑的东西。如果你的目标用户当中确实包括这类人群,那么最稳妥的方式就是使用那些能够让多数人立刻上手的、已经经过时间验证的基础设计模式,以增大他们完成目标任务的几率,提升产品的体验满意度。

8.设计你的内容

对于某些类型的网站和应用来说,内容就是用户前来访问的关键目的所在。这里所说的内容包括文字、媒体文件以及任何可以支撑起核心任务的信息构成。要打造引人入胜的产品体验,内容本身同样是需要精心设计的。

同样的内容,输出到不同的页面框架当中,最终的视觉效果也会具有很大的差异,也许有些页面看上去非常精干,而另外一些则显得缺乏凝聚力。在设计内容时,要确保其自身具有良好的语义化结构,标题清晰,段落明确,层次分明,只有在这个基础上才能有效的根据整体页面环境设计出更易读、更具适应性的内容。

Gather Content是一款很棒的内容编辑工具,你可以参考他们在信息管理、组织和呈现方面的一些做法。

9.最小化的思想

试着在单位时间周期当中尽力做好一件事,而不是面面俱到。将全部力量集中在足够验证你们想法的最小产品形态上,排斥掉有可能产生杂音或牵扯团队精力的非重要元素。

就像我们前面提到的拖放操作的例子,如果你在可用性测试当中发现多数用户根本不了解某种类型的操作方式,而这种方式又不是完成目标任务所真正必须的,那么不妨砍掉它。与其在这些方面花费设计与开发的资源,还不如把精力放在更加重要的事情上,让产品对目标用户当中的大多数更易用。

推荐阅读:

精益创业 – 用户体验设计的新包装

最小化可用性设计

10.正确的工具,正确的方向

作为UX圈子里的人,我们当中的多数都很着迷于各种设计工具及新技术。你时常可以看到一些设计师纯粹只是为了用一种工具而用用一种工具。学习新技术与新工具是需要花费很多时间与精力的,我个人认为,当你准备尝试某种新东西之前,至少要确保自己不是为了用它而用它。

我们的工作归根结底不是为了制作交付物,而是作为产品流程的一个环节尽力将项目朝着目标方向去推动。问问自己“我们现在做的事情对整个产品和业务来说能带来怎样的价值?”,如果没法准确的回答,那么也许应该停下来思考一下了。

坦诚的讲,其实50个小时的可用性测试并不算很多,不过即使时间再少、量再小,它能给产品人员及设计师们带来的意义和价值也是不容低估的。尽量抽些时间,向一些目标用户展示你们当前的产出,听听他们对你们的产品概念及设计方案的想法和反应,看看你们当前在做的事情是否在正确的轨道上——你往往可以从可用性测试当中了解到很多之前没有发现的潜在问题,或是挖掘出之前根本无法意料到的重要需求。

Tags: ,,.
12月 25, 2012

似乎真的没发生什么,也就是玛雅人过了个年。本周的更新如约和大家见面,视觉方面的一篇悠悠闲闲的小文章,关于扁平化与拟物化风格的讨论。

我个人对这方面的话题是蛮关注的,偶尔在微博上弱弱的念叨两句,也会有不少朋友来发表各自的看法,确实是大家都蛮关心的设计问题。另外最近看到不少文章观点也都是围绕这些展开的,其中有些比较公允务实,有些则比较偏颇;所谓偏颇,也就是片面表达某种风格一定比某种风格更好,以及好在哪里。说真的,都有一定的道理,都能看出发表论调的设计师的思考和激情。

有人说了你怎么这么没节操呢,你到底觉得哪种好呢?我要说的是叭,在我看来这个事情里的的确确不应该存在哪个强于哪个的争议,因为它根本就不是个非黑即白非美即丑泾渭分明的问题;脱离了实际产品的上下文环境,脱离了产品功能与目标用户群类型之间的关联,所谓好与不好的命题压根就不成立。

说的具体些,远的不讲,单说Beforweb这边的视觉风格,除了每篇文章的图标以外,可以说是彻彻底底的扁平化了(当然,细心的朋友可以在侧边栏标题背景底部发现类似阴影效果的1像素边框,这个不算数…),但如果有人说我是扁平风格的卫道者的话,我会很不开心,因为我只是在自己觉得合适的地方使用这种风格而已。我喜欢iOS里很多拟物拟真风格的界面,最典型的包括语音备忘录、iBooks、iPad里的日历等等,它们的界面让我觉得亲切自然,让我可以在冰冷的电子设备当中找到现实生活的真实感,就这么简单。

下面这些截图来自我平常自娱自乐时会用到的一些音乐方面的iOS或OS X应用。它们的功能的确非常棒,我着实在这些东西上花掉不少钱,但如果它们的界面没有采用如此逼真的拟物化设计,如果他们只是干巴巴的功能和数据陈列或是Metro风,我是绝不会在它们身上花半毛钱的。

之前看到过一句话,大意是,Metro风格让人看到未来,而拟物化则让人感觉像是回到家里一样。说的挺不错的;人不可能一直呆在家里,也无法始终飘逸洒脱的在外面寻求新鲜与未来感。我喜欢听真人使用真实乐器演奏的音乐,但这不妨碍我偶尔听听电子的东西。

今天自己念叨的有点多了,我们还是进入译文的正文叭。作者从扁平化风格出发,慢慢引出了相对“公允”的看法,我个人觉得比那些单纯强调某种风格的文章要有点意思。走着。

如今,关于“扁平化”与“拟物化”孰优孰劣的争论在圈子里此起彼伏的。我(英文原文作者)个人总是会被极简设计所吸引,所以扁平化的界面设计风格确实是我的菜。

什么是扁平化设计

在实际当中,“扁平化设计”一词所指的是抛弃那些已经流行多年的渐变、阴影、高光等拟真视觉效果,从而打造出一种看上去更“平”的界面。

Layervault的设计师Allen Grinshtein曾经在HackerNews的一篇文章当中说:

“长久以来,网站的界面风格似乎都在遵从着同一种设计美学,大家都在用斜面、渐变、阴影一类的效果来突出界面元素的质感。对于设计师们来说,制作这类‘可爱’的元素简直变成了行规甚至是荣誉。不过对于我们,以及为数不多的其他一些设计师来说,这种惯用的方式并非一定正确。”

去Layervault看上几眼,四处转转,你会发现他们所追求的这种于简约当中体现出的视觉美感。看到我们一直以来习惯了的那些视觉风格正在越来越多的网站和移动应用产品中被潜移默化的颠覆着,也是蛮有意思的事情。下面是其他一些例子:

Squarespace

新版的Squarespace几乎完全采用了扁平化的视觉风格,只在一些细节当中使用了相对传统的方式突出了重要的交互元素。试用一下你就会发现,其实他们的产品在功能逻辑上还是蛮复杂的,但这一切都隐含在简约直白的界面背后,你真的可以从中隐约感受到其设计团队付出的心血。

相关阅读:简洁至上的Web设计 – 创意要素及设计技巧

Facebook

另外一个大家所熟悉的例子就是Facebook了。

“Facebook是扁平化界面设计的绝佳案例。除了几个主要的动作按钮当中使用了轻微的斜面效果以外,其他界面元素全部采用扁平风格。鉴于他们多年来在这方面一直保持着这样的特色,至少我们可以说这种设计风格对于Facebook来说是完全适用的。” – Ian Storm Taylor(Segment.io)

Rdio

Rdio最新版本的网站及产品界面中都采用了很彻底的最小化、扁平化的设计风格,你很难找到使用了阴影、渐变等效果的界面元素。

相关阅读:最小化可用性设计

Nest

我曾经作为前端工程师参与过Nest的网站开发,现在依然记得他们的设计师对扁平风格的热情追求。在他们的网站中,实际的产品及相关的应用环境照片作为“真实”元素融入到扁平风格的媒介载体(网站本身)当中,虚实结合,让访问者可以很容易的将注意力聚焦在产品上,而不会被网站界面上的视觉元素所干扰。

Beforweb

本小站乱入…译者C7210注

对拟物化的逆袭

正如20世纪建筑界当中的极简主义运动,扁平化设计风格的逐渐兴起也可以被看作是对多年以来过度设计、过度雕琢的界面风格的逆袭;尤其是最近一段时间,苹果一直以来的拟物风格被诟病的蛮犀利的。

Wikipedia对拟物化(“仿制品”、“Skeuomorph”)的定义是:

原有物件中某些必需的形式在新的设计中已不再必要,但新设计仍模仿旧有形式,以使新的外观让人感觉熟悉和亲切。

举个例子,我们通常会为界面当中的按钮添加渐变和投影效果,因为现实当中的按钮就是具有这些视觉特征的,即使这些效果对于界面元素的功能来说没有任何实际意义。又譬如有些天气方面的应用会使用温度计的形式来展示气温;在现实世界中,这种实体的存在是必需的,而在应用软件当中,温度计的形象则纯粹是装饰性的。

日历应用当中皮革质地的设计元素是必需的吗?如果按钮上不使用3D质感,用户是否还知道它们可以被点击?有多少装饰性的元素是真正必要的?

“在现实生活中,当按钮被按下时,你可以清楚的感受到它的弹性,但在桌面设备或移动设备的显示屏上,你无法感觉到这种物理回馈。看上去是实体的东西却无法让人感受到实体本该具有的反馈效应,至少对我来说这是一种很蹩脚的、不符合预期的体验。” – Allan Yu (svpply / eBay)

形式服务于功能

20世纪建筑界的极简主义运动当中提出了一些著名的口号,包括“形式服务于功能(form follows function)”、“少即是多(less is more)”等等,直到今天我们依然会谈到这些。此外,我个人非常喜欢米开朗基罗在被问到他是怎样创作大卫雕像时回答的:

“很简单。我只要凿去多余的石头,留下有用的。”

对于界面设计来说,也是同样的道理;37signals的家伙们在这方面的本事是有目共睹的。要在实际当中卓有成效的实现扁平化风格的设计美学,作为设计师,我们本质上最需要关注的是产品功能如何运作,而不仅仅是考虑视觉呈现方面的问题。

扁平还是拟物?只是个选择的问题

至少我没有见到任何研究报告表明拟物风格的按钮会带来更多的点击量。的确,有足够多的理论和实践结论可以证明在视觉上能产生更强对比效果的交互元素可以更好的引起用户的注意,但我相信,在某些上下文环境中,一个扁平化的橘色按钮所带来的对比效应会高于具有凸起质感的按钮。所以,上下文,也就是具体产品的具体界面环境,是这里的一个关键要素。我们来看看其他设计师的一些看法:

“这件事和时装时尚有些类似。当某种风格被全面普及之后,作为设计师,要想脱颖而出,你就得反其道而行之。” – Cemre Güngör (Branch)

“如果有人告诉你‘拟物化是不好的设计’,这就相当于在说‘紫色是丑陋的颜色’,没有任何意义。” – Sacha Greif

“为什么要在没有任何实际证据的情况下贬低某种设计风格,同时抬高另外一种?忽略产品的实际功能与整体体验而单纯追求某种设计风格,这并不是一件令人兴奋和愉悦的事。” – Geoff Steams (YouTube)

设计的好坏不是“美学”可以决定的

对设计风格的选取最终还是要取决于具体产品的实际情况。在我个人看来,相比于拟物化而言,扁平风格的一个优势就在于它可以更加简单直接的将信息和事物的工作方式展示出来,减少认知障碍的产生。

无论采用怎样的风格,优秀的界面设计都需要遵从一些共通的设计原则:

一致性

通过具有一致性的设计模式及视觉风格,为用户建立起完整一致的心智模型,使产品更加易用,提升整体体验。

对比

通过对配色、尺寸和布局的调整,使可点击的界面元素在视觉上与其他元素形成鲜明的对比。

布局

可以尝试使用960gs一类的网格布局为界面设定视觉规范,使用户的视线可以跟随内容本身所界定出的路径自然的移动,增强界面的视觉平衡。

层级化

最重要的东西要比相对次要的东西更容易被看到。关于这个话题我可以写一整篇文章出来,简单的说,就是在界面设计中着重突出那些与核心功能与常见用例相关的交互元素,而将其他操作元素置于次要位置,这可以使界面得到最有针对性的优化和简化。

“我个人的经验是,无论扁平化还是拟物化都没什么所谓,最重要的是界面能够让用户在最短的时间内清楚的识别出信息和功能的层级关系,并且很容易的知道接下来应该做什么。” – Caroline Keem

目标用户

不同类型的用户所青睐的界面风格也有所不同。建筑、设计、时尚等领域的用户可以更好的拥抱扁平化风格,而其他更加“普通”的用户则更容易接受相对传统的拟物化界面。

反馈

当点击行为发生时,要立刻向用户提供清晰明确的视觉反馈。动画过渡效果就是一种比较常见的反馈方式,例如在用户执行操作后,使用旋转图标提示用户系统正在进行响应。

推荐阅读:为用户的成功操作提供正面反馈

降低“摩擦力”

无论采用怎样的视觉风格,都要使界面尽量简化,减少用户完成目标所需执行的操作,打造更加流畅的交互体验。任何一点障碍或额外的步骤都会提高操作成本,增加功能的复杂度,进而降低转化率。

相关阅读:表单设计与转化率的提升

鼓励探索

了解目标用户有可能对产品进行哪些方面的探索。一旦他们习惯了产品的界面与基础功能,并开始向“高级用户”的阶段进发时,要为他们的探索和学习行为进行必要的指引与“奖励”回馈。

原型

无论风格如何,界面形式都取决于实际的功能。好的设计方案离不开产品前期的规划工作,特别是通过草图或线框原型进行的探索。识别出最核心的用例需求,使用原型不断尝试和验证,为接下来的界面设计工作打下坚实的基础。

“扁平化风格的逐渐盛行固然有它的道理,但本质上它只是设计美学当中的一种;与仿古、高光、金属质感、木质等视觉效果相同,对视觉风格的选择必须以良好的信息架构及交互模式为基础。” – Mike Cuesta (carecloud)

Tags: ,,.

Welcome to DoNews Blog. This is your first post. Edit or delete it, then start blogging!