简析 iOS 程序图标的设计

程序图标主要作用是为了使该程序更加具象及更容易理解,除了上述的作用外,有更好视觉效果的图标可以提高产品的整体体验和品牌,可引起用户的关注和下载,激发起用户点击的欲望。

表现形态

在有限的空间里表达出相对应的信息,在iOS 程序图标设计中,直观是第一个解决的问题,不应该出现大多繁琐的修饰,当然还要有很好的视觉表现力,使用户可以更容易理解此应用的实际作用,更轻松地辨识此应用。下面来说说几种表现的形态。

图形表现

在只用图形表现应用程序的用途,图形可以很好地吸引用户的眼球,更具象地表现出信息。

文字表述

文字表现是一种非常直观的表现方法,文字应该简洁明了,不繁琐。

图形和文字结合

此形式有很好的表现力之余还可以直接把信息告知用户,因为会有一定的内容,所以在空间布局上要注意疏密,避免繁琐拥挤。

iOS 程序图标特性

iOS系统桌面图标与其他移动系统的图标存在非常大的区别,因为iOS图标有很好的整体性,良好的整体性可以减少用户体验上带来的冲突,所以我们需要保持其中的一些特点,以便程序可以更好融入系统中,带给用户更好的应用体验。

尺寸

在不同设备的iOS系统桌面中,程序图标的尺寸和默认自带的修饰效果会有不同,系统默认自带的修饰效果可以使图标更好保持iOS风格,但很多时候为了实际效果,我们可以要求系统不作部分效果的添加,以便达到我们想要的效果

上传到App Store需要512px X 512px的图片

在iPhone  960px X 640px分辨率中
图标显示尺寸 114px X 114px
20像素的圆角
4像素的90度黑色投影
2像素的90度白色内投影
默认自带的高光

在iPhone  480px X 320px分辨率中
图标显示尺寸 57px X 57px
10像素的圆角
2像素的90度黑色投影
1像素的90度白色内投影
默认自带的高光

在iPad  1024px X 768px分辨率中
图标显示尺寸 72px X 72px
13像素的圆角
2像素的90度黑色投影
1像素的90度白色内投影
默认自带的高光

质感

在iOS中,为表现图标的质感,很多时候都会为其添加一些光感,使其更有质感。光是从上面来的,所以过渡颜色的渐变应该是从上往下的。很多时候为表现iOS系统类似玻璃质感般的感觉,图标底部都会带有一个亮度较高的反光,当然这些都是以我们想要的实际效果而绘制添加。


iOS 程序图标设计的构思

为表达好应用程序的作用,我们可以将应用程序的图标作很多不同视觉效果的处理,以达到更好的视觉享受。不同类型的应用要注意表现的效果,如新闻资讯类的应该简洁一点,使其应用有更好的整洁的感觉,如游戏类可以设计得给用户一种活跃的感觉,如一些日常应用类的我们很多时都会将其拟物化,使用户更直观地感受到其作用,这种方法是我们最常见的。

在这里着重说一下拟物化程序图标,这是非常具象去表现程序用途的方法,但有时候要表现的元素存在几个的时候,在狭小的空间中不一定能放下如此多的元素,所以要分析轻重,轻的可以减少占据位置的比例或者将其去除,重的要多作强调,同时,要找到多样元素中的共性。

我们只需找到共性,就能构想出不错的创意。

在图形的构思上有时我们可以利用iOS图标的圆角制作一些特殊的感觉效果处理,如立体感,这些可以帮助图标有更好的视觉冲击力,更容易获取用户的喜爱与点击。

实践分享

说了这么多,下面我们马上来从零开始构思和绘制精美的iOS应用程序图标。

程序名称:MyRange
平台:iPhone
版本:V0.001
出版商:UEDC
用途:LOMO拍照软件

首先说明的是,设计的方法不是唯一的,构思和绘制的方法也是无限多的,那么马上开始!

想到拍照软件,首先会想起的是相机,那么相对应这个软件的图标可以绘制一个LOMO相机作尝试。

很多时我们为了使绘制的物品视觉效果更好,我们需要一些参照物,这次我用莱卡M9来做参照物。在参照物得基础上,进行更多个性化的处理。

为了视觉效果更好,我想其有一点透视的感觉,那么可以利用iOS图标圆角的特征,形成一种立体的感觉。

之后给图标上色,将各大部分大致的颜色分出来

绘制出各部分的质感,应有的皮质和金属的质感,制造金属的可以添加一点杂色

加强光感,光是从90度向下照的,绘制出该有的反光位和两边的过渡转折位,镜头部分局部细致刻画,最后整体调整,完成!

Advertisements

移动终端中的视觉引导

    在传统网站设计和平面设计中,大量信息的整理规划需要设计者用合理的排版,将信息顺畅的传达给用户,连贯的不间断的视线移动阅读会给人舒适的感觉,反之,视线被引导的满屏幕跳来跳去的,会让用户不知所措,给人乱无章法的感觉,无法更好的接收信息。

    在阅读信息的时候,常常受到周围文字和图像的干扰,并不是那么顺畅,根据人眼视觉心理,会有几种容易引导或者说干扰到视觉移动方向的特点。


     在上左图中,第一眼看到的是不是红色的色块?右图中,是不是感觉红色的色块向前突出,而灰色的色块向后退?这就是视觉心理造成的,波长长的色彩比波长短的色彩更容易被人眼识别,也就是暖色的、鲜艳的比冷色、暗淡的颜色更“跳”一些,当一个页面中,“更跳一些”的元素无章的排列的话,人眼的视线就会跟这这些吸引人的小元素也跳来跳去了,感觉“页面花”就有这个原因,合理的运用这个规则,就可以达到增强信息顺畅的传达的目的。


    人物图片可以锁住用户的目光,牵引用户的视线路径,合理的使用可以烘托气氛,提高访问者的兴趣,留下深刻印象。

     一般人都会有这样的体验,当看到1的时候就想找2在那里,视觉有的数字敏感性,很多设计在需要视线牵引的时候,用数字当标头,使视线在即使色彩丰富的页面中也会合理的跳跃。

移动终端中的视觉路径

     移动终端具有轻便,屏幕小,单屏内容少等特点,表现的空间比WEB 少了很多,但是视觉规则都是相通的,很多在平面,WEB中适用的规则在移动终端中也照常适用。

  左图为IPHONE平台QQ2010界面,视觉通过鲜明彩色的头像图片牵引视线顺势向下。
    右图为IPHONE平台 TIME MOBILE 界面,鲜明红色的title条显示新闻的种类,视线路径在红色标题间快速跳跃,帮助用户更快找到所需要的新闻类型。

在这个界面上第一眼看上去,你会发现视线快速的被橙色文字扑获,然后不自觉的在橙色的文字间跳跃,仔细看这几段文字确是并不十分重要的新闻日期信息…..  相对主要信息新闻标题被忽略了,用户会迟疑一下重新找到白色被忽略的新闻标题,造成了视线路径的混乱和信息传达的不顺畅。

    大块的清爽颜色作标题条,吸引用户视线,带来亲和的感觉,主内容区用小区域色块或者有色文字去牵引视线,极其珍惜谨慎的使用icon和有色文字,达到用户一眼从头看到底, 飞流直下三千尺的顺畅感觉,得到没有多余干扰的舒适体验。

    在设计过程中,产品经理提出“XX链接很重要需要强调,能不能加粗变红?”“颜色单调,要丰富的颜色搭配”等意见, 经过沟通后否定了这些意见,在设计排版中信息的顺畅传达才是最重要和最基本的要求,再丰富再漂亮的图片处理排版布局干扰信息的顺畅传达也是不可取的,特别是在终端小屏幕的情况,相比PC大屏幕,每一个元素和文字的处理都会很大影响整屏给人的大的感觉,影响视线的正常移动。

    举几个例子关于在移动终端设计中所注意的视线移动问题,移动终端设计跟PC端设计有很多相通的地方,特别是在高端机型和大屏幕机型上, 希望这些在WEB、 平面设计中的经验能够大量用在移动终端设备上,指导我们做出更多更好用户体验的产品。

转载自Tencent WSD Blog

Mobile app视觉传达的魅力

时下移动开放平台众多,苹果、谷歌、微软、诺基亚都有自己的移动开发平台,想让自己的产品在众多的开放平台中留住用户,只靠品牌是不够的,产品用户体验比品牌更重要。我们可以充分的利用移动设备的特性,运用视觉传达的表现方式,去创造具有优秀的用户体验的app应用软件。

在如今这个智能手机时代,大屏幕高分辨率触摸屏的智能手机在市场上即将呈现普及的趋势。智能手机意味着会有许许多多的app应用软件,大屏幕高分辨率触摸屏意味着可以展现色彩丰富、漂亮华丽的视觉界面。这个时代赋予了视觉传达设计领域新的机遇和广阔的应用设计空间。视觉传达的应用环境不仅仅是平面、网站、广告、企业VI设计这类传统的媒介,还涵盖软件的产品视觉传达设计。关于视觉传达,学术界给的定义是:视觉传达是人与人之间利用“看”的形式所进行的交流,是通过视觉语言进行表达传播的方式。

那么视觉传达可以通过哪些方面去表现,能够提升app应用软件的用户体验呢?

视觉传达—“排版与形式美”

排版与形式美的法则主要有齐一与参差、对称与平衡、比例与尺度、黄金分割律、主从与重点、过渡与照应、稳定与轻巧、节奏与韵律、渗透与层次、质感与肌理、调和与对比、多样与统一等。优秀的软件界面,能够充分的利用了界面排版的形式美法则,把图形、文字、色彩、线条,按照一定的平面构成规律组合起来,能够给用户一种界面形式上的美感。
在众多的app阅读软件中,当大多数订阅软件都是采用纯文本方式去排版设计时,有的阅读器大胆的尝试了视觉化的排版形式美法则去设计产品主界面,并取得了很好的市场反馈。

例图一所示的软件The Pulse阅读器界面。界面主体的标签模块设计整齐一致,是同一形式的连续和重复,运用了形式美的齐一与参差的设计法则。界面模块中的内容与标题的设计上,采用了半透明的色块效果处理,将内容和文字标题融合在一起,运用了渗透与层次的设计法则。这些排版与形式美法则的运用让用户界面的信息更加丰富多彩、让用户更容易阅读和喜爱,提高了软件界面的用户体验感受。

如图二所示的foodspotting软件、Trip Journal旅行期刊软件界面。设计中运用了主从与重点的形式美设计法则,重点的设计了精美图片的表现方式,让界面中富有设计亮点,提升了界面的视觉效果。
从以上的分析中,可以发现在软件界面设计中,适当的运用排版与形式美法则,能够提升产品的用户体验。

视觉传达—“艺术与装饰性”

装饰性泛指设计作品的一种特殊性质。装饰性的设计作品往往在形式上规范明显,渗透着装饰手法,给人以优雅修饰之感。
构思立意是界面设计的第一步,当设计师的界面设计主题构思明确后,界面布局和表现形式等则成为界面设计的核心,怎样才能达到界面意新、形美、变化而又统一,并具有审美情趣呢?设计师可以使用文字、图形、色彩、肌理等界面装饰元素,采用拟物、夸张、比喻、象征等手法来设计界面。
当然,不同类型软件的界面,具有不同方式的装饰形式。设计师需要充分的发掘与软件相关联的装饰元素,适当的运用这些元素去设计,可以提示软件的用户体验。

如图三所示的Awesome Note Lite的界面,主界面的设计运用了笔记本和便签这两个与软件功能特性相关联的装饰元素,形象直观的表现了软件的功能特性,而且界面整体视觉效果非常生动美观。第二个待办事项列表的界面设计,没有采用传统的横条陈列的方式,而是采用在背板上贴标签的方式去形象的表现,记事的类型也采用不同色彩和纹理的设计样式进行区分,界面整体给人一种优雅装饰的感觉。软件界面中装饰元素的运用,让界面中信息的视觉传达方式更加灵活,界面的视觉设计更加生动,使用户的体验感受更富有情趣。

如图四所示的Trip Journal旅行期刊软件界面。 界面设计运用了旅行相关的装饰元素:风景和动物的风景场景,作为界面背景图案,赋予界面一种旅行的情感因素,给用户营造出一种旅行的意境体验。
在Mobile app软件界面设计中,虽然界面设计空间有限,但是装饰元素的运用给有限的界面空间赋予一种活力,因此界面设计中适当的运用装饰元素进行界面是很有必要的。通过装饰元素的运用,赋予界面一种艺术情感,形成软件界面特有的视觉风格设计样式,提升软件界面的情感化表达和用户的体验感受。

视觉传达—“趣味与独创性”

界面设计的趣味性,主要是指形式美的一种情境,是一种活泼性的视觉设计语言。界面充满趣味性,能够使信息传达如虎添翼,起到了画龙点睛的功效,从而更吸引人、打动人。那么,趣味性在界面设计中怎么表现呢?我们可以界面设计的图形表述去体现,从生活中发现趣味性的元素,然后运用到界面设计中来。

目前Mobile app软件界面多是单一化与概念化的大同小异,人云亦云。想要出奇制胜,设计师必须要做到独创性。敢于思考,敢于别出心裁,敢于独树一帜,在软件界面设计中多一点个性而少一些共性,多一点独创性而少一点一般性,形成软件界面独有的视觉气质,才可能赢得用户的青睐。
移动端的用户界面在开放的市场环境下,众多的爱好者开发者,开动脑筋,思维灵活,已经上线很多趣味性的独创性的软件。很多趣味性、独创性软件的设计思路都是来源于生活。把生活中的趣味性的元素运用到界面设计中,是一种提升软件界面的用户体验的思维方法。例如:

如图五所示是Hipstamatic拍照软件。第一个主界面的设计中,整体界面的设计模拟成卡片相机的感觉,拍照的图像捕捉区设计在中心偏上;拍照的按钮的设计用了一个突起的黄色按钮,闪光灯开关按钮采用黄色凹进的设计,当启用闪光灯时,界面的闪光灯变亮。这些设计点,都比较拟物化,把生活中真实的卡片相机的视觉感觉运用到了软件的界面中。使用此款拍照软件的用户,在使用过程中会感觉很有趣味性,很多用户非常享受这种视觉设计带来的体验乐趣!来源于生活的界面设计变得有趣。

如图六所示Pocketbooth软件的界面。此界面的设计来源于生活中商场里的照片亭。用户使用软件时,有种把商场里的照片亭装进口袋的感觉,可以随时随地可以使用商场里的照片亭进行快速拍照。这种来源于生活的界面设计,看起来更加形象和生动。
因此,设计师要善于从生活中发现有趣的设计元素,并运用这些元素,让界面设计更加富有趣味性和独创性,进而来提升软件界面的用户体验。

视觉传达是为现代商业信息设计服务的艺术。在Mobile app的视觉界面设计中,设计师需要充分合理的运用视觉传达设计的排版与形式美、艺术与装饰性、趣味与独创性的表现手法,去发现软件产品界面设计的创新点,去提升软件产品界面设计的标准,提高Mobile app软件的用户体验。

转载自”百度MUX”

The iPhone Tab Bar Lessons From Reality

Instacall

Over the last couple of years, the iPhone has greatly popularized the tab bar navigational model for mobile handsets. Apple has put together a design rationale for the tab bar in their Human Interface Guidelines (HIG) along with lots and lots of other information — they do however leave some question unanswered. Having worked with interaction and graphical design for iPhone applications during the last couple of years I’ve managed to pick up some lessons the hard way, and in this post I would like to share my thoughts on a couple of do’s and don’ts.

在过去的几年中,iPhone成功的使得Tab Bar标签栏导航方式在移动设备上流行起来。Apple将tab bar和其它许多的设计原则整合到了他们的人机交互指南(HIG)中——但有些疑问他们从来没有回答。在过去的几年中我一直从事交互与图形设计,在这篇文章中我将分享一些我的想法有关什么是该做的,什么是不该做的。

Lesson 1: The magic number is five魔法数字是5

This hardly is news to anyone with a bit of insight into iPhone design. Since the screen width of an iPhone is 320 dots (1 dots = 1 or 2 pixels), Apple designed the standard tab bar to contain no more then five tabs to be able to maintain visible iconography and readable copy.

这对从事iPhone设计的人来说不是新鲜事。自从iPhone的屏幕宽度为320点(dots)开始(1点=2象素),Apple设计了标准的tab bar不能超过5个tab,每个tab包含其图标与可读的文字。

What happens after five? Well, there is of course a way to work around this by resorting to the “More” functionality built into the standard tab bar. But, I would suggest avoiding the “More” tab as far as you can. Why? Well…

5个之后会如何呢?当然,我们可以采用使用"More"标签的方式放进标准的tab bar。但是我还是推荐尽可能的去避免"More"标签。为什么呢?

  • First of all, you constantly lose an extra tab
    首先,你自然会损失掉一个tab
  • You put the burden on the users to remember what is hidden beneath the “More” tab. This becomes especially troublesome if the number of items in the “More” view exceeds 5, since the cognitive load can become to overwhelming for a user to handle (more on cognitive load)
    你将记录"More"标签下功能的这个重担交给了用户。如果你的"More"下面的内容达到5个时,问题更加突出,这些加重了用户的认知负荷能力
  • Testing has revealed that most users don’t know about or the meaning of the “More” feature, and simply doesn’t bother using it (Source: Tapworthy — Designing Great iPhone Apps by Josh Clark)
    一些测试表明用户根本不知道"More"功能的用途,而且根本不会影响用户

However, when you are working with perspectives, data sorting and categorization (e.g. like in the iPod), the “More” tab makes more sense then it otherwise should as long as you let the user edit the preferred tabs. Just remember that editing the preferred tabs is the behavior of a somewhat advanced user.

当然,当你在各种视图下工作、数据排序以及分类时(例如iPod),使用"More"标签的方式来替代让用户自定义标签会更合理一些。因为自定义标签的这种行为在某些情况下只适用于高级用户。

Lesson 2: Ask the users询问用户的意见

This should hopefully be covered much earlier in your design process, but the categorization and classification of the activities that the tabs represent should cohere to at least the overall perception of your targeted audience. While doing this kind of research and testing, keep in mind “Lesson 1″ and explore if the activities could be categorized into five segments. If not? Ask yourself if you really should use the tab bar as the navigational model.

这种方式在你的设计过程中会非常有帮助,但标签的分类和级别应该更接近于你目标用户群的想法。当我们做这种研究测试时,记得事实1中提到的内容,不断思考所有的内容是否能分类到五个标签之中。如果不行,请问自己是不是非得用tab bar作为导航方式呢?

Lesson 3: Put a lot of time on icons and copy花多的时间在图标和文字上

A couple of points to keep in mind regarding the iconography and copywriting:一些用于图标设计及文案设计的点子:

  • Make sure that the iconography and copy actually depicts the underlying activities of the tabs. Nothing is more frustrating than remembering that an application contains a certain functionality, but not being able to determine under what tab you will find it.
    确定图标和文案能真实的标签这些标签下所要进行的行为。最让人闹火的事情莫过于明明知道程序中有一个功能,但却不知道在哪个tab下面
  • Avoid creating distracting stimulus through semantic interference, e.g. by having a paintbrush icon with the copy “Reports” underneath it. This is also known as picture-word interference
    避免一些语义上无关的设计,例如一个笔刷的图标但下面却写着“报表”。可参见 picture word interference
  • If you are creating yet another “Favorites” tab, don’t try to reinvent the star icon or the word “Favorites”. Since recognition is less expensive than recall, you should help your users minimize their cognitive load (Jacob Nielsens Ten Usability Heuristics).
    如果你要创建另一个“我的收藏”的标签,不用试着重新设计星形图标或改变文字“我的收藏”(Favorites)。虽然重新识别一个事物的成本低于回忆事物,但是我们应该帮助用户减少认知负荷(Jacob Nielsens Ten Usability Heuristics)
  • Avoid recurring words in your copy. For example, imagine that you create a tab bar containing three tabs where the labels read “My Books”, “My Magazines” and “My CDs”. According to the Stroop Effect the meaning of the words is extracted even when participants try not to processes them (i.e. it will be almost impossible for your users to help themselves from reading “My” on every single tab).
    避免出现重复的文字。例如,想象你需要创建“我的图书”“我的杂志”“我的CD”这样的情况。根据Stroop effect(斯特鲁普效应)的解释用户会主动忽略掉这些文字。
  • Visually and metaphorically distinguish the iconography so that users immediately knows which tab to tap, instead of having to waste precious time over thinking “Do I find settings beneath the wrench or the cog wheel?”.
    让图标设计得有含义及易于识别这样用户能立即知道该点哪个tab,避免让用户考虑例如“到底是扳手呢?还是在齿轮表示设置呢?”
  • If you have a hard time creating an icon depicting the underlying functionality of a tab, try looking at the content layout of the view it represents for inspiration to create visual cues for your users.
    如果你在设计图标的时候遇到一些问题,不妨进这一层下面的内容去看看下面的布局以及内容是否能激发你的灵感。
  • Again, this is a matter of both heuristics and field-testing. Ask the users to get to know their way of reasoning! “What do you think this face icon represent?” “What do you expect to find beneath a tab called ‘Finder’?” “Does it make sense to you that the icon is a face, and the copy is ‘Finder’?”

重申,实地测试和探索非常重要。问问用户他们的理解方式!“你们认为这个脸部图标表示什么?”“你们觉得应该在什么样tab下可以找到Finder”“你觉得图标是脸,而文字写着Finder,这样说得通吗?”

 

Figure 1Figure 1 — Left: NUUS 24 uses similar icons, Middle: Spotify uses a house icon with the copy “What’s new”, Right: Vimeo uses a copy containing “My Videos” and “My Stuff”

左: NUUS 24 使用了相似的图标, 中: Spotify 使用了房子图标和 “What’s new”的文字, Right: Vimeo 重复使用文字 “My Videos” 和 “My Stuff”

Lesson 4: Avoid changing tabs automatically避免自动改变tab

This is a big re-occurring discussion in many of the app projects I have been involved in. In my opinion, you should never change tab from a non-tab-bar navigational action! I know that you might find yourself in a situation where this seems to be the only way to solve some weird information architectural corner case, but try your best to avoid it! Why?

这是在我从事的很多项目中经常争论的问题。我的想法是,如果不是用户主动直接的在Tab上发生交互行为,永远不要改变Tab!我知道你们有可能在一些情况上发现这是唯一能解决一些奇怪的信息架构问题的方式,但是请还是主动去避免!为什么呢?

  • You are breaking the users sense of control by doing something that to them is unexpected. When a user taps on a table view item they are in 9 out of 10 cases expecting the outcome to be: a) a right to left view transition or b) a bottom to top modal view transition.
    你在尝试打断用户所期望的控制行为。举例当用户点击一个表视图(Table View)的时候,他们永远期待二种结果:a)新视图从右向左滑进,b)新视图从下向上滑进。他们同样不希望在Tab Bar上发生他们预想不到的变化
  • You break the natural back tracing that users are most accustomed to on an iPhone. If they have not noticed the subtle change of tab in the tab bar, you will have a situation of momentary confusion once they start looking for the back button in the navigation bar.
    你在扰乱用户早已习惯的iPhone“返回”交互习惯。如果他们没有注意到Tab已经改变,他们有可能以为到了下一级,试图找“返回”按钮
Lesson 5: Don’t make tabs exclusive不要在Tab上做限制

Don’t make tabs restricted to a certain type of users (e.g. registered members) if you don’t provide an easy way for the users to get access to it. You will probably create a lot of unnecessary frustration since every first time use of the app will produce x number of frustrating taps (where x represents the number of tabs you chose restrict). This is likely not in line with the overall experience you are trying to design for.

如果你没有提供更好的方式让用户访问某些内容,不用让Tab设计具备限制性(如只针对注册用户)。让用户点击后才发现这些内容不可用时,这会让他们非常苦恼。

Figure 2

Figure 2 — Hemnet (a popular Swedish application for finding real estates) restricts the two middle tabs for registered members. First it tells you that you need to register, but no information is given where to do so.

Hemnet 应用中当你点击某个Tab时,提示你必须登录

Lesson 6: Customize, but beware小心使用自定义Tab

After a couple of iPhone projects where the information architecture has nailed the tab bar as the most fitting navigational model again and again, designers tend to get bored. Speaking as a designer myself: when designers get bored, shit will happen. One way of fixing this urge for change is sometimes to walk down the path of customizing the tab bar.

当越来越多的iPhone应用使用Tab Bar来展示信息架构的时候,设计师已经开始觉得无趣。设计师自己都知道,当设计师自己觉得无趣时,坏情况可能发生。一种方式就是为了避免设计上的无趣,开始自定义Tab Bar。

Now, I’m all for customizing, because it creates personality, memorability, and boosted brand experience. But, along with something that sounds this incredible comes of course a couple of important things to keep in mind.

现在,我也是常常自定义Tab,因为能有个性,好记忆,而且有更好的品牌体验。但是有一些重要的事情必须牢记于心。

  • It takes time, and sometimes it takes a lot of time. From a developers perspective, customizing the tab bar (the one thing that manages the whole navigational stack of your application) means completely re-writing code that otherwise comes for free.
    需花时候,而且有时候要花大量的时间。从开发人员角度来说,自定义Tab Bar 意味着完全重写代码。
  • There is actually a really good reason why Apple picked the hues for the background of the tab bar and the tool bar; it distinctly separates the visual appearance between levels of navigation. Keep this in mind while creating your own color schemas.
    Apple设计Tab Bar和Tool Bar的颜色色调时是有一定理由的;它能很好的区别外观和导航的级别。将这种思想带到你的色彩设计之中。
  • Sometimes developers and designers forget the fact that if you tap an active tab in a tab bar, you should automatically be taken to the top of the navigation stack or that when you have an ongoing phone call you have to accommodate for the double height status bar. Don’t forget to implement all the functionality that is expected from a standard tab bar.
    有时候开发者和设计师总是忘了当点击一个Tab时,顶部的导航条显示了当前位置,同时如果有电话打入,系统的状态栏会变成双倍高度。别忘了设计这些情况。
  • Some applications uses the custom design pattern with a multiple-layered tab bar (e.g. Twitter for iPhone). If you are considering this approach, be humble enough to realize that you are going to confuse a lot of your users.
    有些应用使用一些自定的设计模式来应对具有共享视图的Tab Bar(如Twitter for iPhone)。如果你也考虑这种方式,那注意你有可能让你的用户产生疑惑。

Figure 3

Figure 3 — In Twitter for iPhone, the multiple-layered tab bar easily get confusing since it redefines the back functionality. Tapping on the table cell saying “651 favorites” take the user to the favorites view. But since it’s also a tab, the back button in navigation bar takes you to the previous level of the multiple-layered tab bar.

在Twitter for iPhone中,这种多层Tab很容易让人困惑。当点了第一屏中的"651 favorites"后,进入了"favorites"视图,如中图所示,再点Back按钮,在第三屏中还是处于同一等级下的Tab,这时图标变成了"More"

Summary总结

The tab bar is the one thing that is constantly going to be the face of your application to guide the users as they navigate your application. Don’t underestimate the time you need to put into creating a flawless tab bar experience. These lessons are in no way rules, but hopefully an eye opener!

tab bar是你导航应用的主要方式。不要低估了设计一个完美的tab bar体验所要花的时间。这些总结中并没有绝对的规则,但希望能让你开启思路。

原文出处significantpixels.com翻译 Experience10.com

中企动力产品用户体验团队招募UE/UI/前端开发工程师


爱互联网,爱信息时代,爱创造,也爱花花绿绿的互联网应用,相信好产品改变世界,觉得人生无处不体验,我们是产品人,我们是优秀用户体验的缔造者,中企动力产品用户体验团队期待你的加入:
graphic, design icon 用户体验工程师(UE):
User Experience Engineer

职位职责:

  1. 用户研究,了解目标用户群分类、特征、行为模式、体验目的及习惯;
  2. 配合产品团队确立产品性格、功能、可用性、内容,引导产品创新,参与前瞻性产品的产品设计;
  3. 负责公司产品的用户体验规划及交互设计,配合UI设计师进行界面设计及质量把控;
  4. 配合进行角色、情景、原型、图形设计,推动开发设计实现;
  5. 主导产品可用性测试,确保产品良好体验;
  6. 优化产品用户体验,对上线产品用户体验进行跟踪,制定优化方案;
  7. 制定内部设计标准和操作流程。

职位要求:

  1. 熟悉互联网市场运作,对互联网产品用户体验有深刻理解,专科以上学历,工业设计、心理学和计算机相关专业;
  2. 具有优秀的用户行为分析、产品设计能力;对软件人机交互设计具有深入的认识和理解 ;
  3. 从事UE方面实际工作经验2年以上,热爱UE行业,理解UCD设计精神,对交互设计有较深的理解和大量的实践案例;
  4. 对交互设计过程有深入的了解,可以独立完成用户体验的整个设计过程;熟悉用户体验研究过程和方法 (用户研究、交互设计、可用性测试等方面);
  5. 思路开阔清晰,思维敏捷,快速接收新鲜事物,具有良好的文档撰写基础;
  6. 善于表达和沟通,强调团队合作,能够在产品和技术间找到最佳平衡点;
  7. 有一定视觉设计和XHTML/CSS等相关岗位的技术和技能, 有电子商务和网建方面的经验优先;
  8. 具有移动产品用户体验经验或有研究者优先。

design icon 用户界面设计师(UI):
User Interface Designer

职位职责:

  1. 根据项目需求进行图形用户界面设计,包括整体界面方案设计,主题方案设计、图标设计,配色以及界面细节的处理等;
  2. 界面输出,将GUI图形化界面输出为开发可用资源,并参与原型制作的界面输出。

职位要求:

  1. 要求较好的美术功底,美术及相关专业大专以上学历;熟练使用各种绘图软件;
  2. 熟悉UI设计理论,对产品流程、用户流程、软件表现策划及用户需求有一定理解;
  3. 具有很好的沟通理解能力,能够将用户的需求快速转化成合理的界面原型;
  4. 具有敏锐的洞察力,较强的造型能力和图形质感表现能力;对色彩、整体风格、图标设计、flash动画设计有良好的认知;
  5. 具有一定的html/CSS代码能力,能构建出界面基础布局;
  6. 性格开朗,良好的团队协作精神,思维敏捷。

blueprint, design icon 前端开发工程师:
Web Front-End Engineer

职位职责:

  1. 负责公司产品前端开发及评测工作;
  2. 参与制定前端相关标准与规范;
  3. 功能模拟实现与原型制作;
  4. 参与公司产品前端页面重构、SEO优化等工作。

职位要求:

  1. 精通各种Web前端技术,XHTML/XML/CSS/Javascript/ActionScript等(JS和AS之一即可);
  2. 深刻理解Web标准,对可用性、可访问性等相关知识有实际的了解和实践经验;
  3. 熟练运用常见框架,如YUI、Jquery等优先考虑;
  4. 至少精通一门非Web前端脚本的语言(如Java/PHP/C++),并有项目经验;
  5. 个性乐观开朗,逻辑性强,善于和各种背景的人合作;
  6. 可应对工作压力,有解决问题、钻研新技术的兴趣和能力;
  7. 计算机、数学、自动化等相关专业本科以上学历优先;
  8. 熟悉移动产品前端开发者优先。

工作地点:北京 ,待遇视具体能力水平而定
任职部门:总部 – 产品部
请简历至:xuyajun@300.cn,并附上相关作品

公司简介:

中企动力成立于1999年,是香港联合交易所上市公司中国数码信息有限公司旗下的一家大型股份制高新技术企业集团。自成立以来,中企动力始终致力于为中国的成长型企业提供信息化服务,在国内开创了以运营模式实现企业信息化的先河。

基于对成长型企业的特点和其信息化需求的深刻理解,中企动力的"信息化运营"模式已成功为30余万家企业提供了全方位,多层面的信息化解决方案。

伴随着中国经济的蓬勃向前和企业信息化的推进,中企动力的发展极为迅速,现已在全国设立了70余家直属分支机构,员工总数逾6000人,拥有研发及运营工程师1200余人,成为规模庞大、实力雄厚的信息化运营商。

国际权威机构IDC报告显示,中企动力已连续六年获得中国IT外包服务市场本土企业第一名,与国际IT服务巨头IBM、HP共居中国IT外包服务市场前三位,并于2007年位列IT外包服务市场榜首,谱写了中国本土品牌奋斗、超越的精彩篇章。

电子商务网站收银流程设计基本指引

1. 收银流程必须完全线性
(Your Checkout Process Should Be Completely Linear)


要点:一个步骤中嵌套另一个步骤的做法会让用户感觉迷茫和恐惧,因为它和用户完成付款时线性操作的心理模型不一致。

在这些网站中,沃尔玛和Zappos都是采用非线性的收银流程。两者都是在其付款流程中了嵌套另一个分支流程。 比如,让用户在另一个页面中设置“首选送货地址”(沃尔玛)或“创建新账户”(Zappos), 然后再回到原来的页面继续付款。 下面是沃尔玛的操作流程截图,点击图片可查看完整的流程。

Non-linear in Fundamental Guidelines Of E-Commerce Checkout Design

幸运的是,要让收银过程变得线性非常简单。比如在完成了“创建您的账户”分支流程后,永远不要重新定位到先前的页面和流程中,而是采用直接引导用户进行下一步操作的方式来替代。

记住最关键的一点是,大部分的用户在付款时的心理模型是线性的操作。如果同一个页面看到两次,通常会认为这个网站故障了,或者自己哪里做错了。

2. 对表单输入域添加说明
(Add Descriptions To Form Field Labels)

要点:如果没有说明,许多表单输入域的标签含义很模糊。

大部分的受访者都对理解某些表单输入域的文案有困难。甚至有一位受访者因为不理解文案的意思,不知道该填写什么来完成表单,而放弃了这次购买。因此,对每一个输入域,给出明确的操作提示很重要。

下图(A)是让人迷茫的HobbyTron网站的表单,受访者不得不猜测“first”这项到底是什么意思:

Descriptions-to-form-field-labels-1 in Fundamental Guidelines Of E-Commerce Checkout Design

下图(B)是Apple网页上的表单,大部分的受访者在“Area code”这项中填写邮编(这里应该填写的是手机号码的区号,+86 021之类的):

Descriptions-to-form-field-labels-2 in Fundamental Guidelines Of E-Commerce Checkout Design

在输入域的边上加上简短的说明和示例能很好地解决该问题。由于并不是所有的用户都需要额外的帮助,你可以使用一个“这是什么?”的链接将操作说明隐藏起来,或者采用字体变小、颜色变淡等方式降低视觉上的干扰。

下面这个例子显示,文案下方的说明在帮助用户理解表单内容方面效果显著。

Descriptions-to-form-field-labels-3 in Fundamental Guidelines Of E-Commerce Checkout Design

即使是表达很明确的输入域,比如邮箱地址,也会有人问你为什么要填写这些信息,你打算拿来干什么用。说明文字也能对这些内容进行解释。

最后一点,所有需要用户拿着一张纸,或者一张银行卡参照着填写的内容,给一个图片示例可以帮助用户更好地理解(比如,在一张信用卡的图片上圈出来哪里能找到有效年月)。

3. 避免使用情境化的词语,比如“继续”
(Avoid Contextual Words Like “Continue”)

要点:情境化的词语,比如“继续”的含义就非常的模糊,会让用户感到迷惑。

试着从用户的角度想一下,购物车里出现一个按钮叫做“继续”,可能有两种意思:继续购物,回到网站挑选另一个商品;继续付款,选好了全部想买的商品准备付款。

还有一个例子是“返回” 。返回上一页?返回到搜索结果?还是其他哪个地方?这些情境化的词语的含义会随着页面内容而改变。

比如下面这个例子,HobbyTron网站上的一个收货确认页面。大部分的受访者点击了“继续”按钮以为是继续付款;但实际上点击后是返回网站继续挑选商品(跳出了付款流程)。受访者在这里并不想继续购物,而是想完成付款。

Continue-shopping in Fundamental Guidelines Of E-Commerce Checkout Design

这个例子充分地说明了情境化的语句是怎么迷惑用户的。 粗略估计,半数受访者由于这些情境化的词语至少走错了一步。.因此,最好使用那些含义明了的词组,比如“立即付款”,“添加商品”等。

4. 加强敏感信息的视觉效果
(Visually Reinforce All Sensitive Fields On The Payment Page)

要点:如果银行卡的卡号输入域没有强化其安全保护,用户可能会犹豫要不要输入(不管实际上是不是已经保障了安全)。

大部分的受访者直到输入信用卡的卡号时,才考虑到安全的问题。同一个页面上,有安全图标、徽章或者文字的部分,受访者会说这里提供了更安全的保障,但是其余的部分就说不上来了。技术上来说,这两部分完全没区别。绝大部分的用户并不了解专业的技术细节,他们只是凭直觉去了解你的网站。

下面是简单的例子,展现了银行卡号输入域如何在视觉上体现安全感。注意底色、锁的图片、以及GeoTrust的徽章。

Visually-secured-checkout-design in Fundamental Guidelines Of E-Commerce Checkout Design

对银行卡的卡号输入域进行视觉上的处理,比如边框、背景、表示安全的图标和徽章等,能增加用户的安全感。

译者注:让用户感觉不到的安全保护,对用户来说,就是没有进行保护。


5. 不要在表单中使用“确定”按钮
(Don’t Use An “Apply” Button In Your Form)

要点:用户不理解表单里面的“确定”是什么意思。

一半以上的受访者对表单中单独的“确定”按钮感到迷惑,比如确认送货方式的按钮。这些按钮要么是容易忘了点击,要么就是与表单提交的按钮混淆。

下面是新蛋的例子,只有一半的受访者在填写了邮编后,又去点击了“GO”。

Newegg-apply in Fundamental Guidelines Of E-Commerce Checkout Design

“确定”按钮常会与整个表单的提交按钮混淆,导致用户无法继续付款流程,比如下图。还有是在点击后通常会刷新同一个页面,用户会感到迷惑,以为网站异常。

Apply-buttoin in Fundamental Guidelines Of E-Commerce Checkout Design

如果你真的想在进入下一步操作前,让用户添加一些增值内容,最好使用可以自动触发局部页面更新的AJAX控件,而不是采用按钮触发的形式。

译者注:特别容易出现在选择送货方式和使用电子优惠券的时候。还有些表单会有“保存”之类的按钮。和之前的情境化词语一样,有的时候含义模糊。同时,这类按钮又不能真的推进交易,没有实际的作用,只是暂时保存输入的内容。因此,除非真的有必要,越少越好。


6. 根据信用卡的卡面印刷方式展现有效期输入项
(Format Field For Expiration Date Exactly As It Appears On Credit Card)

要点:信用卡的有效期输入项有时候让人很头痛,特别是在它和卡面的印刷格式不一致的时候。

有些网站使用的是月份的名称,有些使用的是数字加上月份的名称,有些则是全部用数字。哪一种最好?最好的方式是采用与用户看到的卡面印刷格式一致的输入格式,最大限度地减少输入时的混淆和失误(也就是只输入数字)。

下面列出了四种输入方式,其中D只显示月份的名字,没有数字,是最难输入的。

Credit-card-expiration-fields in Fundamental Guidelines Of E-Commerce Checkout Design

输入月份最好的方式是全部使用数字,并且前补0,比如3月用“03”表示。这样他们看起来和信用卡卡面上印刷的完全一致。

输入年份最好的方式是使用两位数字,与信用卡卡面印刷格式相匹配,比如14代表2014。

你还可以在月和年之间用斜杠(/)分隔。

在上面的例子中受访者对“03 – March” 这样的格式能够接受,但是 “March – 03”就不行了。包含月份的名称没什么大问题,但也要与卡面的格式匹配才行。

7. 使用单栏的表单
(Use Only One Column For Form Fields)

要点:用户对两栏的表单之间的关系很难理解,尽量避免使用。

有一半的受访者在两栏表单的输入中遇到困难,典型问题的是者两个:一是两栏的其中之一被忽略了;二是填写的那部分其实和用户无关,往往导致验证错误。

译者注:我经常因为后一种情况报错,纠结啊。

下面是Perfume网站的登录页:

Shipping-information in Fundamental Guidelines Of E-Commerce Checkout Design

还有一个PetSmart网站的例子。这里的问题是右栏的第二步,“输入信用卡的验证码”,容易被忽略,导致提交表单时报错。

Step2-payment in Fundamental Guidelines Of E-Commerce Checkout Design

我们的建议是使用单栏的结构。没有一个受访者在单栏的表单中遇到上面的问题。

8. 将账单地址默认为收货地址
(Use Shipping Address As Billing Address By Default)

要点:大部分用户选择直接送货到家,所以要求用户分别输入收货地址和账单地址并不合理。.

用户通常直接订货到家,因此,你应该默认使用同一个收货地址和账单地址。可以使用“复制地址”按钮,或使用单选框来实现默认选项, 并提供用户分别设置地址的选项。

Apple网站上的“Copy shipping address”按钮:

Shipping-address-2-checkout-process in Fundamental Guidelines Of E-Commerce Checkout Design

单选项的形式:

Billing in Fundamental Guidelines Of E-Commerce Checkout Design

译者注:中国这个情况比较少,略过。


9. 使用明显的错误提示
(Use Clear Error Indications)

要点:用户常常忽略的错误信息,导致他们无法继续。

但是一半以上的受访者在测试中无法找到网站上的错误提示。当用户在填写表单时遇到问题,可能是他们放弃购物的最重要原因。当用户失败了超过一次,他们就很可能会离开网站(不管是网站的故障,还是用户自己的失误)。

下面是缺乏明显的错误提示的例子:

在American Apparel的网站上,顶部的黄色区域事实上显示的是一个错误提示,内容是手机号输入不合法:

Clear-error-indication-a in Fundamental Guidelines Of E-Commerce Checkout Design

在沃尔玛的网站上,这两个红色的箭头(在“Ship to home” 和“Site-to-store”前面的)实际上是错误标记:

Clear-error-indication-b in Fundamental Guidelines Of E-Commerce Checkout Design

在PetSmart的网站上,红色的“State/Province” 看上去根本不想一个错误标记,更像是样式特别的文案,很不明显:

Clear-error-indication-c in Fundamental Guidelines Of E-Commerce Checkout Design

在Perfume.com的网站上,红色的输入项表示错误:

Clear-error-indication-d in Fundamental Guidelines Of E-Commerce Checkout Design

除非是放在靠近相关位置的地方,否则错误提示很容易被受访者忽视。很多网站现在的错误提示都是放在页面顶端,而不是错误发生的地方。如果错误提示不是在靠近错误的位置上,这些错误信息很难被理解。有些受访者发现页面上没有明显的报错,于是重新提交了一次,导致同一个页面不停的显示同一个错误。

如果用户没有注意到,或者不理解错误提示的内容,他们就不能解决错误并继续支付流程。在这种情况下用户放弃购物是必然的。所以你需要在错误提示的设计和文案上花费大量的时间和精力。

译者注:难以想象的,很多很多的时间和精力。

必要保证你网站的错误提示:

  • 是符合情境的(比如说不是在页面顶部,而是在错误位置上)
  • 是明确简洁的
  • 是明显的、容易注意到的(提供强烈的反差,以及使用箭头等视觉要素)

10. 注册账户是可选项
(Registration Should Be Optional)

要点:用户对必须注册一个账户非常抵触。

用户不喜欢额外注册新账户。这在我们的测试过程中显而易见,因为每一个受访者都在强制他们注册时感到受挫,30%的受访者甚至最终放弃了这次购买。

导致这种受挫的原因有很多:

首先,用户已经有无数个用户名与密码要记住了,所以并不想为了买一两个商品创建一个全新的账户。

Account-registration-optional-1 in Fundamental Guidelines Of E-Commerce Checkout Design

另外,40%的受访者不希望收到垃圾推销邮件,有些人在注册过程中明确拒绝了接收newsletter。对这些用户来说有一个强烈的“账户=Newsletter”的心理模型,用一位受访者自己的话来说,“一旦我注册了账户,就要永远与垃圾邮件作伴了”。

此外,有些用户不喜欢自己的个人信息被网站保存。还有,很多用户不明白为什么必须要先有一个账户,才能买东西,因为在线下购物从来不需要用户预先注册什么东西。

如果你想通过一种不强制的手段,又想得到更多的注册用户,可以考虑在他们完成购物后询问他们。“想要拥有注册账户吗?输入密码后立即开通”。你可以将邮箱作为用户名,并通过订单信息来补全账户信息。这样用户不需要被迫创建新账户,而是在购物完成后轻松愉快地完成。(记住一定要向用户解释拥有一个注册账户的好处)。

11. 不要索求非必要的信息
(Don’t Require Seemingly Unnecessary Information)

要点:当用户被要求填写不必要的个人信息时,他们会感觉自己的隐私被侵犯了。

你还在向用户索要电话号码吗,一个受访者就在测试中抱怨说,“看,为什么他们要我的电话号码呢?他们要来有什么用?他们更不不需要它!”每个受访者,或多或少地都对网站要求填写较多个人信息这件事有抱怨。

但用户已经有了一个邮箱地址,又在购物过程中向用户索要电话号码,是让受访者最反感的。用户的逻辑是,你既然有一种方式可以联系到我了,为什么还要另一种?

Unnecessary in Fundamental Guidelines Of E-Commerce Checkout Design
Apple的购物流程截图

如果的确需要这些信息,至少解释清楚为什么。你觉得理所应当的事情,用户并不这么看。他们已经受够了网络购物的各种糟糕体验,尤其是垃圾邮件和骚扰电话。

我们的受访者都比较宽容大度,一旦网站解释清楚为什么需要这些信息,都能表示理解。这里有个诀窍,不要把对原因的描述藏在链接背后,直接在页面上写出来。事实上,当我们告知受访者预留电话号码能使网站在送货遇到问题时及时联系到他们后,都很乐意留下电话号码。 越是昂贵的订单越是如此,当购买了一台笔记本电脑后,用户很希望你能主动联系他们。

但这里有个大前提,你要求用户输入这些信息是为了帮助用户更好地完成购物过程。当网站中有些部分是可选的,用户通常不会在这类信息上花力气。因此,将必填和选填的部分明确划分也非常重要的。

如何快速解除用户防备?——浅谈可用性测试中沟通的技巧

一般来说,在产品的设计和开发过程中,不同阶段会使用到不同的用户研究方法。比如,在产品正式发布之前,通常会进行可用性测试。可用性测试,是指让一群有代表性的用户尝试对产品进行典型操作,同时观察员和开发人员在一旁观察、聆听、记录。该产品可能是一个网站、软件,或其他任何产品,它可能已经做好,也可能尚未成型。
对于一个典型的可用行测试,我们可以:
1. 通过观察用户在使用产品过程中出现的一些问题,发现产品的可用性问题
2. 从测试参与者的表现收集定量数据
3. 确定该产品的用户满意度

但是,由于用户会被请到公司的体验室进行测试,陌生的地方和任务式的测试方式,往往会给用户造成陌生、不自在的感觉,小心翼翼,如履薄冰。他们的心情,也许就像图中一样:

也许用户不会将紧张、不安的情绪表露出来,但是如果在测试中任务无法完成,用户会更可能将问题归咎于自己,而不是产品的缺点。为了让用户尽可能快的进入测试状态,主动发现和报告问题,给出更有价值的反馈意见,我们在沟通过程中可以使用一些小技巧,快速解除用户的心理防备。

环境准备
在用户到来之前,可以做一些准备工作:比如,将体验室布置得温馨一些,让用户有在家里的感觉;桌上准备些水、小零食之类,可以请刚刚赶到的用户先喝点水,休息一下。

热身
就像运动之前需要进行热身活动调动身体的能量一样,可用性测试之前也需要热身,主持人需要熟悉用户,并尽力调动用户的积极性。

可以从用户的基本情况开始,引入到使用习惯,多让用户回忆起自己平时的使用场景。这个过程中尽量使用口语化的对话,比如“您平时有什么兴趣爱好?”“平时使用过哪些类似的软件?”“在使用的时候,有没有出现过一些问题?”等等。

在询问和对话的过程中,一方面主持人可以对用户有初步的了解,另一方面用户开始跟主持人交流,有助于缓解、消除陌生感。“话匣子”一打开,用户就容易将想法表达出来,在实际测试过程中有助于主持人追问用户的行为和思路。

观察
在测试开始后,主持人除了主导测试的进行,还要随时注意用户的表情、肢体动作和言论。

比如:当用户不停的皱眉、咬唇时,表示他们对操作没有信心;当用户瞪大眼睛查看时,表示他们对界面存在困惑等等。同样,用户会有多种表情、动作表明他们的紧张,比如每完成一个动作就立刻把鼠标松开,等待下一步指令;在操作过程中不时偏过脸来看主持人的表情,或不时询问主持人自己操作是否正确;反复说自己对操作不熟悉,可能完不成任务等等。

提示这不是在考用户
用户面对着设备和主持人,做着任务测试,很容易在心理上将其与考试、考察等词汇关联起来,并且产生紧张的情绪。这时,主持人要做的是尽量向用户提示:我们请你来,不是为了考你,而是请你来帮助我们找出产品中的问题。在用语上,尽量避免使用“请您来进行测试”这样的字眼,改为“请您来体验一下我们的产品”会使用户更容易接受、更放松,有助于快速建立起彼此的信任关系。

提示的次数因用户心理素质水平的不同而不同:对于比较开朗、愿意交流、本来就不紧张的用户,在测试刚开始的时候,请用户尽可能按照自己平常的状态使用就可以了。对于比较拘谨的用户,除了测试开始时的提示,还要随时注意用户的情绪,随时帮助他们舒缓心理压力。比如当用户在测试过程中第一次出现问题,表现得不知道该怎么办的时候,可以请用户放松,向他们说明这是我们产品做得不够好的地方,而不是用户的问题。或者当用户因为不能完成任务而有挫败感的时候,请用户不要把责任归咎于自己,强调这是产品本身的问题。

及时鼓励
在测试过程中,如果用户给出好的意见和建议,应当及时鼓励夸奖,让用户觉得自己的价值得到了认同。如果用户在给出意见的时候吞吞吐吐,欲言又止,应当鼓励用户大胆得讲出来,即使给出的意见并没有什么新意,我们也应该对用户表示感谢,强调这些意见给了我们改进的机会。

用户的心理防备逐渐解除,在适当的时候我们还可以故意吊起用户的好奇心,使用户想知道、想了解我们的产品是如何实现功能的,从而在测试时能更专注。

复述用户的话
用户对产品的专业术语知道的有限,所以不知道的名词都会用自己常用的词语指代。这时,主持人不一定能完全理解用户所表达的意思,当然,也不能凭空猜测用户的意思。为了验证,主持人可以按照自己的理解复述一遍用户的话,如果用户表示赞同,就代表理解正确;如果用户不赞同,通常都会再重复一遍,并且叙述地更清楚明了。

需要注意的是,复述最好还是使用用户熟悉的词语,避免使用专业名词,更不要试图纠正用户的语句,否则容易让用户感到自己说错话,会更加小心翼翼,好不容易打开的“话匣子”有可能因此关闭。

综上所述,测试之前应当充分热身,测试中时刻照顾到用户的情绪,给出积极引导和及时反馈,才能迅速与用户建立起良好的相互关系。最后,当用户离开体验室的时候,感觉会是轻松舒适的。