Seven's Pad

Just another Product Blog site

Posts Tagged ‘原型

设计与表达

leave a comment »

设计与表达

我们在工作中经常强调沟通能力,和产品、开发、测试等不同角色的人需要沟通,和领导、同事需要沟通,沟通是一个双向的过程,而沟通首先需要双方有良好的表达能力。一个产品,她要面向的是最终的用户,用户能否理解这个产品,会用这个产品甚至喜欢上产品,很大程度上取决于设计师对产品的诠释,那么这个核心能力就是设计师的表达能力。
无论是做交互设计还是视觉设计,设计师工作的很大一部分是将业务逻辑通过合适的方式诠释出来,其核心就是需要优秀准确的表达,而表达绝不仅仅局限于表现层的视觉元素,如图标、文字、控件、界面的排版布局,在产品设计的不同阶段表达有不同的体现。
本文试图从以下几个小点来说明表达能力在不同阶段的体现及其重要性。

表现模型(心理模型的表达)

产品的终极目标是为了满足用户的需求,用户需求建立在用户的心理模型之上,表现模型在多大程度上贴近用户心理模型,往往决定了产品有多大程度受到用户的认可。

人们总是倾向于用自己的方式来解释发生的现象,设计师对功能的诠释需要考虑多数用户平时生活的经验和使用习惯,或者对新产品使用的期待,寻找一种最为有效和容易理解的方式来表达。

举个例子,在google earth软件中,点击加号,地球被拉近,离用户距离更近;点击减号,地球被拉远,离用户距离更远,当然你也可以通过鼠标滚轮来控制远近。

设计与表达
图1 google earth 控制视图控件

那么我可以怎么理解加减号和空间距离的对应关系呢?回想一下我们常用的看图软件,点击加号的时候表示放大,点击减号的时候就是缩小当前图片,在这里加号减号和放大缩小形成了对应关系,于是我可以通过之前知识经验来理解google earth这个控件的含义,这种表现模型就是符合用户心理模型的设计。

设计与表达
图2 ACDSee 放大缩小控件

而不同人对同一产品的理解又可能是不同的,正如对哈姆雷特在一千个人心中有一千个不同的形象。在产品设计中,只要我们能保证用户能形成简单、有效的认知模型,那这个表现模型就是合理的。

简化交互(行为的更好表达)

很多时候,我们要面对大量的信息和功能需要传达给用户,但我们不能让界面布满了按钮和信息,我们需要做减法,可能是将用户暂时不用的功能或使用频率较低的功能隐藏起来;也可能是将逻辑上同类的功能进行分组,复用一部分界面;还可能是用一个控件实现多个功能来完成更多的任务。

举一个iphone的例子。我们都知道传统手机都有一个硕大的物理键盘,当用户不需要输入的时候,键盘实际上并没有多大的用处;iphone采用的触摸屏使用虚拟键盘的设计,在用户需要输入的时候才出现键盘,极大地节省了宝贵的屏幕空间,同时对用户任务流的干扰也降到了最低。

设计与表达
图3 Iphone 的虚拟键盘

丰富的反馈(细节的丰富表达)

在人与人的交流中,有时候语言会显得贫乏无力。恋爱中的男女,女人不需要说话,一个眼神就可以让对方心领神会;和陌生人谈话,双手抱在胸前,反映出对方对我产生了威胁,本能地需要寻找保护;在人与人的沟通中,交流介质是丰富和复杂的。
在计算机和人的沟通中,我们所能采用的手段似乎有很大的局限性。我们不能指望计算机开口说话,计算机也理解不了我们复杂的语言和姿势。在软件界面里,常用的就是冷冰冰的一个对话框扔到用户面前,如果文案再设计得不好,用户会有巨大的挫败感,一如windows的错误消息对话框,伴随着恐怖的声音,会让我感觉很失落,同时伴随烦躁情绪产生。

设计与表达
图4 错误信息对话框

似乎人们已经习惯了使用对话框,而对话框成为了一个标准。Cooper在《about face 3》里面谈到了非模态视觉反馈(RVMF),其实就是通过视觉手段来提供及时和更加丰富的反馈信息,而不用通过对话框来打断用户的操作流。在这方面,游戏软件做得不错。比如帝国时代,伴随文明的升级,建筑和士兵的图标会更大,同时也会更华丽;当战争发生的时候,会有烟雾,火光,显示建筑物的损毁状态,直到倒塌。简言之,游戏里提供了丰富的模拟现实的视觉以及听觉等多个通道的反馈,带给用户的体验真实而细腻。

其实,再想多一些,随着计算机技术的发展,人机交互已远远不局限于视觉这一个维度,人们需要丰富自然的反馈,仅仅视觉一个纬度的反馈是不够的。Wii的流行,触摸屏的广泛应用都反映了人们在不断追求自然交互方式领域的进步,也许未来会有更多更丰富的反馈方式来实现人和计算机的交流,我们和计算机之间的交流、通过计算机和人之间的交流将会有更多的通道,而不是通过对话框。

文案有多重要(产品特质的表达)

文案设计是产品设计中不可缺少的一环,是产品传达信息的重要手段。文案设计的好坏有时候对产品会产生巨大的影响。
来看一个新闻标题:

三大全国性交易市场布局渝中

这个标题有两种理解方式,从而容易让用户误解。

再看一个QQ空间的例子:

设计与表达
图5 QQ空间商城首页

“装扮首页”是装扮我的空间首页呢,还是装扮的首页?

我们还看到在一些SNS网站有一些颇具个性的文案,活跃了网站的气氛,也带给用户一些乐趣。看一个白社会的例子。他可以根据用户群体的特征和时间信息等生成一些和用户能产生共鸣的文案,勾引用户去写点什么。

设计与表达
图6 白社会写心情提示

在google mail的垃圾邮件列表里,如果你一封垃圾邮件都没有,会显示如下文字:

设计与表达

可以看到,好的文案设计反映着产品的特质,文案的风格应该尽量保持一致并符合产品的用户群特征。例如开发软件提示应该尽可能清晰、准确,像“太棒了”这类口语化的文字用在这里就不合适。

综上,表达能力可以体现在对用户需求的理解,对产品交互行为的优化,也可以体现在提供用户更加丰富和自然的反馈和独特、优秀的文案设计等等,表达这一理念贯穿了整个设计过程的始末。

对设计师来说,准确和清晰的表达能力是一项基本的能力,也是一项非常重要的素质,在产品设计的每个阶段都需要注意表达的合理性,表达不仅仅是关于排版布局那么简单。

本文出自Tencent CDC Blog

Advertisements

Written by sevenpad

06/14/2010 at 6:14 下午

发表在 产品相关

Tagged with , , ,

非原型 不设计

leave a comment »

非原型 不设计

在风起云涌的互联网浪潮中,产品迭代的速度越来越快。随着用户需求的激增,也不断带来了对设计师能力要求的提高。初入交互设计领域几年来,明显发现可视化的内容远比文档的更易于被用户(以至我们的客户)所接受,就像用户研究项目中常说的一句话:“用户怎么说的,并不代表他们怎么想。”今天以“原型设计”为基点,与大家展开几点做简要的分析。

一、什么是原型设计?

首先,让我们看看在体验设计的过程中的“原型设计”。

以下结合个人对UCD理解和项目经验,梳理和简化的传统体验设计的流程。(流程是每个群体的工作方式,好像我们的长相,很难完全一样,并且时常改变,不能盖棺定论。)

非原型 不设计

简而言之,传统的原型设计往往是定位于概念设计或整个设计流程初期的一个过程。随着项目大小、时间周期等,UED人员往往会根据需求确定纸原型、低保真原型、高保真原型等不同质量的内容作为输出。具体来讲可以将原型划分为3类:

非原型 不设计

● 纸原型:顾名思义,就是画在文档纸、白板上的设计原型、示意图。便于修改和绘制,不便于保存和展示。因此想有效的利用纸原型,我们就需要注意纸原型的承载。
● 低保真原型:通常是基于现有的界面或系统,通过电脑进行一定的加工后的设计稿,示意更加明确,能够包含设计的交互和反馈,美观、效果等欠佳。可以理解为介于纸面原型和高保真原型之间的输出的统称,往往也可以作为需求设计稿输出。
● 高保真原型:属于原型设计的终极武器。包括产品演示Demo或概念设计展示。视觉上与实际产品等效,体验上也与真实产品接近。而为了达到完整的效果,很大程度上就要求交互设计师对视觉审美的能力。只有从视觉、体验两方面同时打动客户,在能最终赢得客户的信赖。

在我们不断按图索骥的去设计原型时,会不会发现有时原型并没有起到它的作用呢?又或者会不会发现抽不出时间做原型?做出的原型只用于展示特性和效果,没能物尽其用?下面,让我们进一步看看,如何将原型设计结合在体验设计过程中。

二、Why & How?

我们热爱动手、创新,也喜欢评论、思考。而在实践中往往是如下情况:

非原型 不设计

回头看看,我们多数时候输出的低保真设计稿,传递的信息是完全可以通过上图的纸面原型去表达的,而纸面原型所花费的时间和成本可能只有一半或更少。放眼整个产品设计过程,一个导航、对话框、窗口,也依然可行。试着在“需求讨论”的时候,去用手讨论,动上几笔可能就能帮我们在很短的时间内梳理清楚交互设计所需的“流程、布局、控件”等等。而且在画图过程中,还能以较低的门槛(可能需要另一只笔)就能让所有人参与其中,创造很多附加信息和价值。而或许更好的是,通过绘制白板的过程,你可以更清晰的传递出窗口的布局和逻辑;而通过在真实介质是低成本的交流,将会更容易打动你的产品经理和客户。在创建纸原型时,仅需要注意几点:

● 试着同时准备2支笔,让更多人参与设计
● 试着准备一支红笔,在讨论结束时,把所有内容进行梳理和总结
● 记得给白板拍照,或在输出之前保留好绘图纸

如果你有丰富大胆的想象力和一定的手绘基础,甚至可以将整个设计过程通过手绘的形式记录和展示,现在类似的产品宣传也随处可见,比如著名的宝马轿车。再顺便推荐一本关于视觉化思考的书《The Back Of The Napkin》与各位共勉。

上面我们只看到了天平的一端,我称之为“敏捷化原型”,就是鼓励大家在最初的设计时,动嘴的同时勤动手。大胆的把笔交给产品经理和团队的其他人,来帮助设计师完善和丰富你的稿件,这样才能激发和节省更多的时间去产生Idea。 更进一步说,甚至在专业能力和环境允许的情况下,完全可以采用在需求开始时由设计师与团队一起进行纸面原型的绘制,之后由产品经理给出相关的设计稿或低保真原型。

在天平的另一端,是应当走向“精细化原型”时代。尽可能的将设计创意完善并融入到真实的场景中,不论是软件界面还是Web体验,都可以真实点击和拖拽。通过高保真原型的输出,用户更容易被整个产品而不是某个图案或体验特性所吸引。这不仅有助于单一方案的认可机会,还可以从侧面树立起设计师的专业形象,提升客户的认可,甚至可以大胆的提出流程的假设:“以原型为中心的设计”。

非原型 不设计

三、动手做原型设计

以下推荐并简单分析几个原型设计的途径。

前面说的纸面原型,最基础的就是需要纸和笔,我们可以简单快捷的描绘出一个窗口面板,从中点击弹出一个对话框,进行设置并保存,在旁边补充出对应的出错和分之流程。另外,为了解决不易保存的缺陷,除了自己亲自动笔,再推荐几款软件作为纸原型的输出。

1. Balsamiq Mockups 演示地址

这是一款帮助你最快速、直观的绘制用户界面原型的软件。其中包括了75个现成的控件,并且可以轻松的以颇具亲和力的手绘风格完成界面框架的设计。上手非常容易,可以进行反复编辑并支持调整图层和控件状态,是不可多得的纸面原型绘制软件。不过真的只能取代纸面原型,不易表现交互过程和效果,对中文的支持也比较差。

2. Microsoft Expression Blend + SketchFlow

非原型 不设计

Microsoft Expression Blend 包含一组新功能,它们专门设计为让用户更轻松快速地创建、传达和审阅交互式应用程序及交互式内容的原型。这组功能称为 SketchFlow。它是实际的 Windows Presentation Foundation (WPF) 或 Microsoft Silverlight 应用程序。您可以生成原型项目,运行它,然后在原型中进行浏览(即使您只有原型的初始草图)。

SketchFlow和Balsamiq Mockups相比,不仅可以绘制出具有亲和力的手绘原型,更可以实现交互所需的响应和效果,使得低保真原型赋予了高保真的内涵,算是给人意外的惊喜。不过由于短期内MS Silverlight技术的普及率较低,可能大家上手成本较高,可以作为长期关注和研究的方法。

同时,为了便于在低保真模型上梳理产品逻辑和流程,Visio和Mind Manger也是不错的选择。对于原型设计(主要适用于低保真原型),大家都很熟悉的Axure,最新官方版本5.6,访问官网>>

能够很快实现页面的跳转和变化,完成流程性的演示。并推荐大家与产品经理一起来使用。然而,身为设计师,怎能满足于只输出低保真原型作为讨论素材呢?

当大家深谙如何基于纸面原型的讨论,又可以放心大胆的将手中的枪交给热心的产品经理去进行低保真原型的设计,在这种如此理想的情况下,我们不得不花费心思在如何实现我们的“大绝”—高保真原型上。谈到高保真原型,其实还是非常需要实力和锻炼的。此时,不得不祭出设计师的最爱,Adobe 公司的Flash Platform:Flash CS4,Flex/Flash Builder,Flash Player和Adobe AIR。

非原型 不设计

关于Flash的学习,结合Action Script 3.0、XML和Adobe的AIR技术,可以很完整、逼真的实现我们想要的任何界面效果,学习过程不再赘述。从Adobe的产品线发展不难看出,最终原型制作的最高境界就是可以和实际产品相结合,让设计师的输出和开发人员能够直接结合,使原型得以100%保真。对于客户端的原型,大可通过VC去动手写写程序代码,或者在Win7下用Blend接口,便能大大降低“这个效果做不了”的尴尬。

3.UIDesigner

说到高保真原型,不能不提的是CDC出品的原型制作秘密武器UIDesigner,这本是CDC专用武器,现在已经分享给大家了。UIDesigner能让你轻松实现丰富的各种交互效果,基本可以控制到Windows标准空间所包含的所有属性,但这一切不需要你有任何编程能力基础。感兴趣的朋友可以到 http://cdc.tencent.com/?p=424 了解一下。

而对于网页产品,只要设计师能主动提高动手能力,通过使用HTML甚至Ajax、jquery等也能很快实现网页产品的高保真模型,也需要随着互联网技术的发展不断学习,与时俱进。

总而言之,平时多动手,战时少流汗(客户不满意、老板不满意,换谁都要浑身冒冷汗……)。在设计过程中,还可以通过设计公用组件不断提高效率,不断发掘新的、好的原型设计方法。将整个设计过程与原型设计相结合,总结起来有以下几点好处:

● 最真实进行设计传达,并影响整个团队(开发、产品经理、用户)
● 树立设计师的专业影响力(用实力说话,用产品说服别人)
● 技不压身,扩宽专业知识领域有助于向更高层次的发展:-)

与大家共勉,希望对各位平时的工作有所帮助,Thx。

本文出自Tencent CDC Blog

Written by sevenpad

06/14/2010 at 5:31 下午

发表在 产品相关

Tagged with ,