浅谈“交互设计”

对于刚接触“交互设计”这个名词的人,一定还不了解这个词语的意思。我也是,在进入上海顺动工作之前,我对于这个名词和大家一样,都是不太了解。而在之后的学习与研究中,我渐渐地知道了它,也学习着了解它。

简单的说,交互设计是人工制品、环境和系统的行为,以及传达这种行为的外形元素的设计与定义。不像传统的设计学科主要关注形式;而交互设计首先旨在规划和描述事物的行为方式,然后描述传达这种行为的最有效形式。

当我们在使用网站,软件,消费产品,各种服务的时候,使用过程中的感觉就是一种交互体验。随着当代网络和新技术的发展,各种新产品和交互方式越来越多,人们也越来越重视对交互的体验。当计算机系统的用户越来越由普通大众组成的时候,对交互体验的关注也越来越迫切了。

从用户角度来说,交互设计是一种如何让产品易用,有效而让人愉悦的技术,它致力于了解目标用户和他们的期望,了解用户在同产品交互时彼此的行为,了解“人”本身的心理和行为特点,同时,还包括了解各种有效的交互方式,并对它们进行增强和扩充。交互设计还涉及到多个学科,以及和多领域多背景人员的沟通。

那么也就会有人有疑问:交互设计界面设计的区别在哪里?尤其是在理解同软件产品的交互时。人们在界面设计方面已经有了一定的关注。

然而,交互设计更加注重产品和使用者行为上的交互以及交互的过程。界面是一个静态的词,当进行界面设计的时候,我们关心的是界面本身,界面的组件,布局,风格,看它们是否能支撑有效的交互,但是,交互行为是界面约束的源头,当产品的交互行为清清楚楚地定义出来时,对界面的要求也就更加清楚了,界面上的组件是为交互行为服务的,它可以更美,更抽象,更艺术化,但不可以为了任何理由破坏产品的交互行为。从广义上来说,也可以认为界面设计包含交互设计,在这样的情况下,它同时还包含另外的部分例如外观设计平面设计,这些都是可以单独进行研究的更细的分支。

那在了解了“交互设计”的定义之后,我们就可以进一步了解到“交互设计”的几个核心概念了。

第一:交互设计——是指设计行为,偏向于计算机

第二:人机交互——是指人与机器相互信息交换

第三:交互——是一种行为

第四:可用性——是指交互设计的标准

第五:用户体验——是交互设计的目标

第六:UCD——是交互设计的原则与方法

 

由此,我们也可以得出一个重要的结论,那就是交互有三个要素:

人,机器/系统,还有界面

精确描述我们的用户以及用户希望达到的目标,定义几个典型角色,并用故事的形式表达出来。这也是交互设计的核心要素:目标,角色与脚本

当我们了解了这些之后,我们就可以拟订交互设计的理想流程了:

首先创造一些用户,再找出重要的活动。接着找出用户模型,即用户期望如何完成这些活动。然后草拟出初版的设计。接下来我们要一直反复把设计修改得更容易, 直到虚构用户能轻易使用为止。最后,就可以找真人来看着他们试用我们设计的软件

这里,我们要注意“交互设计”时需关注的可用性指标。可用性是一个多因素概念,涉及到容易学习、容易使用、系统的有效性、用户满意,以及把这些因素与实际使用环境联系在一起针对特定目标的评价。

这里就是交互设计的几个可用性指标:

安全性与易学习,容易使用,容差性与有效性,最后还有客户的满意程度。

当然,交互设计还有它的设计原则:

可视性 :功能可性越好,越方便用户发现和了解使用方法

反馈:返回与活动相关的信息,以便用户能够继续下一步操作

限制:在特定时刻显示用户操作,以防误操作

映射:准确表达控制及其效果之间的关系

一致性:保证同一系统的同一功能的表现及操作一致

启发性:充分准确的操作提示

 

最后,交互设计的范围正在扩大,已经不仅仅是软件产品,仔细观察我们身边的一切事物,还有人,都在无时不刻地与我们“交互”。因此,努力地观察、体验和感受生活,提升个人素养,拓展视野,并以此来运用于设计,应用于生活,贡献于社会。这样的交互设计师才能取得更大的成就!

 

软件界面设计的三个基本规则

对于新进UI界面设计界的新人们来说,入门真的很难,但是了解了它的三个基本规则之后,就是找到了入门的诀窍。

UI对于产品起着至关重要的作用,因为用户最先接触到的东西就是UI,一般的用户对于这个界面上的视觉效果和软件的操作方式是最关心的。

随着全球的科技的不断发展,手机的功能则越来越强大,基于手机系统的相关软件应运而生,手机设计的人性化已不仅仅局限于手机硬件的外观,手机的软件系统已成为用户直接操作和应用的主体,它应以美观实用、操作便捷为用户所青睐。用户界面设计的规范性显得尤为重要。

不管界面的风格有多变,但是它们所要遵循的规则基本还是相同的。

第一:界面的元素要有一定的规范性

手机软件运行于手机操作系统的软件环境,界面的设计应该是基于这个应用平台的整体风格,这样有利于产品外观的整合。

1.界面的色彩及风格与系统界面统一

软件界面的总体色彩应该接近和类似系统界面的总体色调,例如:系统色调以红色为主,我们的软件界面的默认色彩最好与之吻合,若使用与之大相径庭的色彩,比如天蓝、柠檬黄,色彩的强烈变化会影响用户的使用情绪,假想你买了一款从外观到系统界面都很满意的手机,操作的时候突然发现内置的应用软件和系统界面不统一,你会有何感想呢?第一感觉不好的东西我们的用户还会去用它吗?所以我们要知道手机的外观和系统界面已经是由手机制造商根据用户审美习惯定制的,它应该有他们的审美群体,我们要给这款手机做软件就应该有效地利用制造商基于此款手机的审美特征,以赢得喜爱此款手机的用户,使他们对系统界面的肯定和喜爱有效的转移到我们的产品上来。当然合理地结合系统界面进行设计还包括图标、按钮的风格及在不同操作状态下的视觉效果。

不仅仅是手机的界面是这样,一般的软件也是这样的。通常界面设计都按Windows界面的规范来设计,即包含"菜单条、工具栏、工具厢、状态栏、滚动条、右键快捷菜单"的标准格式,可以说:界面遵循规范化的程度越高,则易用性相应的就越好。

2.操作流程的系统化

手机用户的操作习惯是基于系统的,我们的界面设计在操作流程的安排上,也得遵循系统的规范性,让用户达到可以使用手机就会使用我们的软件,简化用户操作流程!

3.界面色彩的个性化设置

色彩影响一个人的情绪,不同的色彩会让人产生不同的心理效应,反之不同的心理状态所能接受的色彩也是不同的,不断变化的事物才能引起人的注意,界面设计的色彩个性化,目的就是用色彩的变换来协调用户的心理,让用户对软件产品时常保持一种新鲜度,它是通过用户根据自己的需要来改变默认的系统设置,选择一种自己满意的个性化设置,达到软件产品与用户之间的协调性。在众多的软件产品中都涉及到了界面的换肤技术,在手机的软件界面设计过程中,应用这一个性设置可以更大的提升软件的魅力,满足用户的多方面需要!在具体操作实现的过程中,色彩的搭配显得尤为重要,要考虑图标色彩与换肤色彩的色彩反差和效果的统一,以不至于造成花、乱的界面效果。

第二:易用性

每个按钮的名称都应该易懂,用词要准确,并且要与这个界面上的其他按钮有所区别,最好达到用户不使用帮助就能够知道该界面的功能并进行相关的操作。

第三:帮助设施

要提供详尽而可靠的帮助文档,在用户使用产生迷惑的时候能自行寻找解决的办法。它的位置应当出现在一般系统都出现的地方,不可随意改变方位,否则会让用户不易找到。

 

UI界面设计------界面设计不存在美工

人类社会逐步向非物质社会迈进,互联网信息产业已经走入我们的生活。在这样一个非物质社会中,网站与软件这些非物质产品再也不象过去那样紧紧靠技术就能处于不败之地。工业设计开始关注非物质产品。但是在国内依然普遍存在这样一个称呼“美工”。“工”的意思就是没有思想紧紧靠体力工作的人。这是一个很愚昧的做法,愚昧在于称呼职员美工的企业没有意识到界面与交互设计能给他们带来的巨大经济效益,另一方面愚昧在于被称为美工的人不知道自己应该做什么,以为自己的工作就是每天给界面与网站勾边描图。

本文主要讲述一套比较科学的设计流程来讲述UI界面设计属于工业设计的范畴,是一个科学的设计过程,理性的商业运作模式。而不是单纯的美术描边。

UI的本意是user interface也就是用户与界面的关系。他包括交互设计,用户研究,与界面设计三个部分。本文主要讲述用户研究与界面设计的过程。

一个通用消费类软件界面的设计大体可分为五个步骤:

1.需求阶段

2.分析设计阶段

3.调研验证阶段

4.方案改进阶段

5.用户验证反馈阶段

 

需求阶段

软件产品依然属于工业产品的范畴。依然离不开3W的考虑(Who,where,why.)也就是使用者,使用环境,使用方式的需求分析。所以在设计一个软件产品之前我们应该明确什么人用(用户的年龄,性别,爱好,收入,教育程度等)。什么地方用(在办公室/家庭/厂房车间/公共场所)。如何用(鼠标键盘/遥控器/触摸屏)。上面的任何一个元素改变结果都会有相应的改变

除此之外在需求阶段同类竞争产品也是我们必须了解的。同类产品比我们提前问世,我们要比他作的更好才有存在的价值。那么单纯的从界面美学考虑说哪个好哪个不好是没有一个很客观的评价标准的。我们只能说哪个更合适,更合适于我们的最终用户的就是最好的。如何判定最合适于用户呢,后面我会介绍用户调研。

 

分析设计阶段

通过分析上面的需求,我们进入设计阶段。也就是方案形成阶段。我们设计出几套不同风格的界面用于被选。首先我们应该制作一个体现用户定位的词语坐标。例如我们为25岁左右的白领男性制作家居娱乐软件。对于这类用户我们分析得到的词汇有:品质,精美,高档,高雅,男性,时尚,cool,,个性,亲和,放松等。分析这些词汇的时候我们会发现有些词是绝对必须体现的,例如:品质,精美,高档,时尚。但有些词是相互矛盾的,必须放弃一些,例如:亲和,放松与cool,个性与等。所以我们画出一个坐标,上面是我们必须用的品质,精美,高档,时尚。左边是贴近用户心理的词汇:亲和,放松,人性化。右边是体现用户外在形象的词汇:cool,个性,工业化。然后我们开始搜集相呼应的图片,放在坐标的不同点上。这样根据不同作标点的风格,我们设计出数套不同风格的界面。

 

调研验证阶段

几套风格必须保证在同等的设计制作水平上,不能明显看出差异,这样才能得到用户客观的反馈。

测试阶段开始前我们应该对测试的具体细节进行清楚的分析描述.

 

例如:

数据收集方式:厅堂测试/模拟家居/办公室。

测试时间:X年X月X日X日

测试区域:北京、广州、天津

测试对象:某消费软件界定市场用户。主要特征为:

 

对电脑的硬件配置以及相关的性能指标比较了解,电脑应用水平较高;

电脑使用经历一年以上;

家庭购买电脑时品牌和机型的主要决策者

年龄:X-X岁;

年龄在X岁以上的被访者文化程度为大专及以上;

个人月收入X以上或家庭月收入X元及以上

 

样品

五套软件界面

样本量:X个,实际完成X个

调研阶段需要从以下几个问题出发:

用户对各套方案的第一印象

用户对各套方案的综合印象

用户对各套方案的单独评价

选出最喜欢的

选出其次喜欢的

对各方案的色彩,文字,图形等分别打分。

结论出来以后请所有用户说出最受欢迎方案的优缺点。

所有这些都需要用图形表达出来,直观科学。

 

方案改进阶段

经过用户调研,我们得到目标用户最喜欢的方案。而且了解到用户为什么喜欢,还有什么遗憾等,这样我们就可以进行下一步修改了。这时候我们可以把精力投入到一个方案上(这里指不能换皮肤的应用软件或游戏的界面)将方案做到细致精美

 

用户验证阶段

改正以后的方案,我们可以将他推向市场。但是设计并没有结束。我们还需要用户反馈,好的设计师应该在产品上市以后去站柜台。零距离接触最终用户,看看用户真正使用时的感想。为以后的升级版本积累经验资料

经过上面设计过程的描述,大家可以清楚的发现,界面UI设计是一个非常科学的推导公式,他有设计师对艺术的理解感悟,但绝对不是仅仅表现设计师个人的绘画。所以我们一再强调这个工作过程是设计过程。UI界面设计不存在美工。

 

对UI设计的流程探讨

确认目标用户

在软件设计过程中,需求设计角色会确定软件的目标用户,获取最终用户和直接用户的需求。

用户交互要考虑到目标用户的不同引起的交互设计重点的不同。

例如:对于科学用户和对于电脑入门用户的设计重点就不同。

 

采集目标用户的习惯交互方式

不同类型的目标用户有不同的交互习惯。这种习惯的交互方式往往来源于其原有的针对现实的交互流程、已有软件工具的交互流程。

当然还要在此基础上通过调研分析找到用户希望达到的交互效果,并且以流程确认下来。

 

提示和引导用户

软件是用户的工具。因此应该由用户来操作和控制软件。软件响应用户的动作和设定的规则。

对于用户交互的结果和反馈,提示用户结果和反馈信息,引导用户进行用户需要的下一步操作。

 

一致性原则

 

设计目标一致

软件中往往存在多个组成部分(组件、元素)。不同组成部分之间的交互设计目标需要一致。

例如:如果以电脑操作初级用户作为目标用户,以简化界面逻辑为设计目标,那么该目标需要贯彻软件(软件包)整体,而不是局部。

元素外观一致

交互元素的外观往往影响用户的交互效果。同一个(类)软件采用一致风格的外观,对于保持用户焦点,改进交互效果有很大帮助。遗憾的是如何确认元素外观一致没有特别统一的衡量方法。因此需要对目标用户进行调查取得反馈。

交互行为一致

在交互模型中,不同类型的元素用户触发其对应的行为事件后,其交互行为需要一致。

例如:所有需要用户确认操作的对话框都至少包含确认和放弃两个按钮

对于交互行为一致性原则比较极端的理念是相同类型的交互元素所引起的行为事件相同。但是我们可以看到这个理念虽然在大部分情况下正确,但是的确有相反的例子证明不按照这个理念设计,会更加简化用户操作流程。

可用性原则

可理解

软件要为用户使用,用户必须可以理解软件各元素对应的功能。

如果不能为用户理解,那么需要提供一种非破坏性的途径,使得用户可以通过对该元素的操作,理解其对应的功能。

例如:删除操作元素。用户可以点击删除操作按钮,提示用户如何删除操作或者是否确认删除操作,用户可以更加详细的理解该元素对应的功能,同时可以取消该操作

可达到

用户是交互的中心,交互元素对应用户需要的功能。因此交互元素必须可以被用户控制。

用户可以用诸如键盘、鼠标之类的交互设备通过移动和触发已有的交互元素达到其它在此之前不可见或者不可交互的交互元素。

要注意的是交互的次数会影响可达到的效果。当一个功能被深深隐藏(一般来说超过4层)那么用户达到该元素的几率就大大降低了。

可达到的效果也同界面设计有关。过于复杂的界面会影响可达到的效果。(参考简单导向原则)

可控制

软件的交互流程,用户可以控制。

功能的执行流程,用户可以控制。

如果确实无法提供控制,则用能为目标用户理解的方式提示用户。

 

上面的文章提到了UI设计的原则,并且对此做出了一些所谓的定义。大家要明白,本人对UI设计的研究时间不长,这些原则只是个人体会。

 

用户界面设计的技巧

对大多数人来说,用户界面就是软件本身。所以,掌握用户界面设计的技巧与技术是让软件走向市场的最直观因素。原文来源于http://WWW.ambysoft.com/userInterfaceDesign.Pdf

 

对于应用软件来说,一个基本现实就是:用户界面是面向用户的。用户需要的是开发者开发的应用软件满足其需求,并且易于使用。太多的开发者自以为是艺术天才,他们不去尽力遵循用户界面设计标准,或花精力使得产品好用;相反,他们错误地认为编写更灵巧的代码或是使用一套确实有趣的颜色方案才是重要的事。Constantine(1995)指出,好的用户界面使得人们不用阅读用户手册或接受培训就能使用应用软件。
界面设计的重要性有这么几个原因:首先,用户界面越直观,就越易用,越易用就越便宜。因为界面越好,培训用户就越容易,降低丁培训成本;界面越出色,用户就越少求助,降低了客户支持成本。其次,界面越出色,用户就喜欢使用,增强了开发者工作的满意度

一、用户界面设计的技巧与技术

本节所包含的用户界面设计技巧将有助于提高面向对象界面的设计。

l、一致,一致,还是——致。你能做的最重要的事情就是保证用户界面运作的一致性。对于列表框来说,如果双击其中的项,使得某些事件发生,那么双击任何其它列表框中的项,都应该有同样的事件发生。所有窗口按钮的位置要一致,标签和讯息的措辞要一致,颜色方案要一致。用户界面的—致性使得在用户对于界面运作建立起精确的心理模型,从而降低培训和支持成本。

2,建立标准并遵循之。在应用软件中保持一致的唯一途径就是建立设计标准并加以遵循。最好的办法是采取一套行业标准,对自身特殊的需要加以补充。已有的行业标准,如IBM标准(1993)与Microsoft标准(1995),通常可满足95%到99%的需要。采用行业标准,只需利用已有的成果,也使你的应用软件看起来或感觉上更象用户已购买或建立的其它应用软件。应当在定义基础构造阶段就建立用户界面设计标准(Atablet,1998)。
3、阐明规则。用户要知道怎么使用你为他们开发的软件。软件运作的一致性表明,规则你只需解释一遍。这比一步步详细讲解如何使用应用软件每个特性要容易得多。

4、同时支持生手和熟手。图书馆目录符号对图书馆系统的一般用户来说,也许就够用了,但对熟手用户,如图书管理员,很可能就没有那么有效了。图书管理员是受过专门训练,能够使用复杂的查询系统找到信息,因此,应当考虑建立一套查询界面以满足他们的独特需要。

5、界面间切换很重要。如果从一个屏幕转换到另一屏幕很困难,用户会很快灰心并放弃。当屏幕流程与用户想完成的工作流程相符,此软件对用户才有意义。由于不同用户工作方式不同,应用软件需要有足够的灵活以支持他们不同的方式。在建模阶段,界面流程图可用来模拟屏幕之间的流程。

6、界面上的布局很重要。在西方,人们是自左而右,从上而下阅读,基于人们的习惯,屏幕的组织也应当是自左而右,从上而下。屏幕小部件的布局也应以用户熟悉的方式进行。

7、讯息和标签措辞要适当。屏幕上显示的文本是用户主要的信息源。如果文本措辞很糟,用户的理解就会很糟。要使用完整的措辞和句子,而不要用缩写和代码,使文本易于理解。讯息措辞要积极,显示用户处于控制之中,并提示如何正确使用软件。如,下面哪一条讯息更吸引人: “你输入了错误信息”还是“帐号应为8位数”?此外,讯息措辞要一致,在屏幕上显示的位置要一致。尽管这样的讯息“须输入名字”和“应输入帐号”分别来说措辞上没问题,放在一起就不一致了。根据第一条讯息的措辞,第二条讯息更好的措辞应当是“须输入帐号”,这就使得两条讯息措辞一致了。

8、了解小部件。为恰当的任务使用恰当的小部件,首先可以帮助增强应用软件的一致性,可能使得应用软件很容易构造。学会如何正确使用小部件的唯一途径是阅读和理解你们所采用的用户界面标准及准则。

9、对其它软件不盲从。除非你知道一个应用软件是遵循了你们的用户界面标准和和准则,否则你绝不能认定它做的都是对的。尽管看看人家怎么做,从中获得些主意是不错的想法,但在懂得怎样区分用户界面设计的好坏之前,你得留神。太多的开发者错误地模仿其它应用软件的用户界面,而那些界面却设计得很糟。

10、颜色使用要适当。使用颜色要谨慎。如果使用了,也要使用指示符。问题就在于有些用户可能是色盲一一如果在屏幕上使用了颜色来突出显示某些东西,假若想让色盲的用户注意到,那么需要做些另外的工作来突出它,如在其旁边显示一个符号。颜色的使用也得一致,以使整个应用软件有同样的观感。此外,在不同平台上,色彩的表现不尽人意一一在一个系统上看上去很好,在另一个系统上常常看上去很糟。展示会上我们经常听到展示者这样说: “在我家中的机器上看上去可是很好的呀。”

11、遵循对比原则。打算在应用软件中使用颜色,要确保屏幕的可读性。最好的方法是遵循对比原则:在浅色背景上使用深色文字,在深色背景上使用浅色文字。蓝色文字以白色为背景很容易读,但以红色为背景很难辨认。问题出在蓝色与红色之间没有足够反差,而蓝色与白色之间则反差很大

12、字体使用要适当。老式英语字体可能在莎士比亚的剧本封面看上去很合适,但在屏幕上却很难认。要用那些可读性好的字体,如serif或Times Roman。此外,字体的使用要一致。节俭、有效地使用两、三种字体的屏幕看上去远胜于使用五、六种字体的屏幕。要记住每次改变了字体的大小、风格(粗体、斜体、下划线,……)、样式或颜色,都是在使用不同的字体。

13、灰掉而不是移走。在某些时刻,用户经常只能访问应用软件的某些功能。在删除一个对象之前,要先选中它,由此加深用户的心理模型,软件应当用删除按钮及(或)菜单项去做一些事。按钮应当移去还是灰掉?灰掉它,决不能移走!当用户不该使用时就灰掉它,可使用户对如何使用应用软件建立精确的心理模型。如果仅仅移走一个小部件或菜单项,而不是灰掉它,用户很难建立精确的心理模型,因为用户只知道当前可用的,而不知道什么是不可用的。

4、使用非破坏性的缺省按钮。通常每个屏幕定义一个缺省按钮,如果用户按了回车键调用此按钮。问题是有时用户会意外敲击回车键,结果激活了缺省按钮。缺省按钮决不能有潜在的破坏性,如删除或保存(也许用户根本不想保存)。

15、区域排列。当屏幕有多个编辑区域,要以视觉效果和效率来组织这些区域。如图1所示,编辑区域左对齐是最好的方法。换句话说,要使编辑区域左边界在一条直线上且上下排列。与之相应的标签则应右对齐,置于编辑区域旁。这是屏幕上组织区域的一个整洁有效的方式。

16、数据对齐要适当。对一列列的数据,通常的作法是整浮点数右对齐,字符串左对齐。
17、屏幕不能拥挤。拥挤的屏幕让人难以理解,因而难以使用。实验结果(Mayhew,1992年)显示屏幕总体盖度不应超过40%,而分组中屏幕盖度不应超过62%。

18、有效组合。逻辑上关联的项目在屏幕上应当加以组合,以显示其关联性。反之,任何相互之间毫不相关的项目应当分隔开。在项目集合间用间隔对其进行分组/或用方框也同样可做到这一点。

19、在操作焦点处打开窗口。当用户双击一个对象显示其编辑/详情屏幕,用户的注意力亦集中于此。因而在此处而不是其它地方打开窗口才有意义。

20、弹出菜单不应是唯一的功能来源。如果主要功能被隐藏起来,用户就不能学会怎样使用软件。开发人员最让人灰心的作法是滥用弹出菜单,也称作上下文相关菜单。一种使用鼠标的典型方法,是用来显示一个隐藏的弹出菜单,提供针对当前工作的屏幕区域特定功能的访问。

 

二、原型建立及技巧

(一)建立原型

建立原型是一种迭代分析技术,在此过程中用户参与建立屏幕及报表的实体模型。原型的目的是展示应用软件用户界面的可能设计。图2所示为原型建立的步骤。

●确定用户需求。原型的开发取决于用户需求,需求决定了系统必须支持的业务对象。可以通过面谈及在建模阶段(如CRC类职责协作图)、用例和类图建模阶段收集需求。

●建立原型。用原型工具或高级语言开发用户所需的屏幕及报表。此阶段最有益的忠告是不要花大量时间去写“好”代码,因为在对原型作了评估之后,你很可能丢弃这些代码。

●评估原型。一个版本的原型建立后需要进行评估。主要目的是核实原型是否满足用户需求。评估时要确定三个基本结果:原型成功之处、失败之处及遗漏之处。对原型作了评估后会发现,有的部分要丢弃,有的部分要修改,甚至要添加全新的部分。

●确定是否完成。当评估过程中不再有新的需求,或只有少量无关紧要的需求时,原型建立过程就可结束。

 

软件界面设计的系列应用

在越来越多的软件除了在界面设计上力求完美、精致,更在除了软件界面之外的其它应用上追求统一。下面为大家展示的是一个软件在界面设计之外的设计,希望能够给各位一些启示。

界面设计 软件界面设计 软件界面制作

 

软件界面制作 界面设计 软件界面设计

 

什么样的图标更具有可用性

作为WIMP(Window/Icon/Menu/Pointing Device)界面设计的关键部分,图标在人机交互设计中无所不在。随着人们对审美、时尚、趣味的不断追求,图标设计也不断花样翻新
,越来越多精美、新颖、富有创造力和想像力的图标充斥着我们的视界。可是,从可用性的角度讲,并不是越花哨的图标越被用户所接受,图标的可用性要回到它的基本功用去思考。

图标的功用在于建立起计算机世界与真实世界的一种隐喻,或者映射关系。用户通过这种隐喻,自动地理解图标背后的意义,跨越了语言的界限。但是,如果这种映射关系不能被用户轻松并且准确地理解,那么这种图标就不应是好的图标。因此,图标的设计应该遵守以下的原则。

图标的可用性原则一:图标指向的映射关系应该尽可能的直接、简单。

可能与我们的直觉相反,一些研究显示图标界面与文本界面的比较中,并没有体现出明显的优越性,一个主要原因就是文字和意义的映射是直接的,而图标与意义的映射却不一定是直接和明显的。

在坏的图标设计中,用户需要花费几秒钟甚至更长的时间去猜测图标代表的意义,而且还很可能猜错,错误的理解导致错误的操作,错误的操作导致糟糕的结果,这决不是美妙的用户体验,即便从美学角度讲那个图标可能是上佳的艺术作品。

“直接”的意思是:不要绕弯。图标展现的视觉表象与其背后的意义只需要很短的意义路径即可连结。譬如对于“剪切”操作,使用“在文稿上打×”的图标形象比“剪刀”的图标形象更易理解,因为前者与剪切操作有更短的意义路径,尽管“剪刀”图标显得更加生动活泼。

认知心理学家提出过一个激活扩散模型,就是在人的知识和概念体系中,当一个概念被加工或受到刺激时,该概念结点就产生激活,然后激活与该结点直接相连的多个连结,并继续向四周扩散。与当前概念在概念网络上的连结关系决定了其被激活的强度。这种连结关系取决于人的知识体系的组织架构(即两个概念是否属于同一类别)和概念同时出现或使用的频率。

例如在人的知识和概念架构中,在纸质文稿上写字和在电脑上写字都属于撰写文档的类别,那么当“在文稿上打×”的图标形象出现时,被试就会快速地联想到在电脑上进行剪切操作。而“剪刀”的视觉形象最易归属到“衣服裁剪”或“手工劳动”这样的类别中去,因此映射关系具有教长的路径和较弱的连结强度。因此在图标设计中,设计师应该仔细考虑或者直接去调查用户的知识体系,找到最短的概念连结。

图标的可用性原则二:每个图标指向的映射关系应该是唯一的。

这个原则的意思就是,不要让图标产生歧义。想像一下,一个“飞旋的车轮”图标,它代表了什么?也许设计者的本意,是要用车轮的移动来象征电脑中文件的移动操作。可是,用户也许猜测出了其他十几种对应关系,比如一款3D赛车游戏。这个原则其实还有一个推论原则:

不要使用过于复杂的图标。

因为图标的视觉元素越多,那么其意义指向的可能性就越多,用户越有可能从各种各样的角度去解读,那么该图标的可用性就可能越差。

图标的可用性原则三:同一个图标系列中,最好使用相同的映射模式。

在真实世界与计算机世界(或网络世界)的对应中,存在很多种映射模式。笔者粗粗地归纳下,可以发现这样几种映射模式:外观映射、功能映射、语词(字母)映射、部分指代映射和综合映射。在同一个系列图标中,用户极易对图标形成某种固定的映射模式,如果突然出现了另一种模式的映射,用户可能仍将延用先前形成的思维定势进行理解,从而出现理解困难或理解偏差。

图标的可用性原则四:最好使用简短文字做为图标的冗余编码。

在信息传播的过程中,增加信息的冗余度是保证信息传输的可靠性的最有效的方法。在人机交互设计中,最常见的冗余编码就是红绿灯,即每个颜色皆对应位置,使得在人口中占具相当比例的色盲人群也可以通过灯的位置来接收是否可以通行的信息。图标设计也需要增加冗余编码,以保证绝大多数的人都能够快速、准确地理解图标的含义。一个很好的例子出现在手机主菜单的设计中,下面看两种常见的手机主菜单的设计:

 图标设计 界面设计 icon设计

 

icon设计 图标设计 界面设计

 

图二、阿尔卡特OT-C825的主菜单


在图一中的图标都在下方加注了简单的文字,和图标一起形成冗余编码。这样即使用户是第一次使用该手机,也能避免图标选择错误。而图二的图标没有将文字直接标注在图标下方,而是在只有选中某个图标的情况下,在屏幕上方显示文字标注,这样无疑增加了用户操作的负担。尽管某些图标,用户很容易理解其含义,比如图二中第二行第一个“相机”图标,用户很容易清楚这是指拍照功能;但有些图标,在没有文字标注的情况下,还是令人费解,比如图二中第四行第一个“礼品盒”图标。因此,笔者认为,在大多数情况下,给图标加注文字是比较好的选择。

最后,我要说明的是,图标设计中的可用性原则与图标的美学考虑在实践中可能存在矛盾,这时候权衡两者是必须的。好的可用性可以让用户更方便地使用产品,而漂亮、时尚或者富有情趣的外观设计可以给用户带来喜悦感等良好的心理体验。很难说哪一方理所应当地取得主导地位,更理想的状态是交互设计师和视觉(外观)设计师进行良好的沟通和合作,求得双赢的设计方案。

 


Page 5 of 7
  服务地区:上海 江苏 浙江 安徽 山东 福建 广东 江西 杭州 苏州 北京 深圳 广州 天津 大连 无锡 香港 台湾 新加坡 日本 美国 英国 法国 德国 意大利  
 
导航: 多媒体设计开发   软件界面设计   手机界面设计   网站设计   图标设计   VI设计   角色及短片设计