以原型设计为基础分析可视化内容设计

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

一、什么是原型设计?

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

  以下结合个人对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。

时间: 2024-09-18 21:34:40

以原型设计为基础分析可视化内容设计的相关文章

.NET应用架构设计—面向对象分析与设计四色原型模式(彩色建模、领域无关模型)(概念版)

阅读目录: 1.背景介绍 2.问自己,UML对你来说有意义吗?它帮助过你对系统进行分析.建模吗? 3.一直以来其实我们被一个缝隙隔开了,使我们对OOAD遥不可及 4.四色原型模式填补这个历史缝隙,让我们真的看见OOAD的希望 5.在四色原型上运用彩色建模增强视觉冲击力 6.通过四色原型模式建模出领域无关模型 7.结束语:建模时你可以不考虑具体实现,但是建模者要懂技术实现 1.背景介绍 至今我都清楚的记得我第一次被面试官问起什么叫"建模"技术时的情景,那是好几年前的事情了,当时是胸有成竹

快速设计专题:营销类节日专题设计案例分析

文章描述:快速制作专题!利用颜色查找快速制造大感觉. 当接到一个紧急需求的时候,设计师脑子里一定在抱怨不爽了.因为设计要用"赶出来"的话,是很难有优秀的作品的.但有时候不得不面对现实,需求方急着要,我们也只能加快速度设计.把脑子里有的设计形式全都翻出来,全用在页面上. 有时候可能会有意想不到的结果!有时候又会出现那种连自己都不愿意承认是自己做的尴尬处境. 这种快速设计没有经过前期的精细推敲,总有站不住脚的地方,但是时间有限,能达到一眼望去,让各位爷能心里感叹一声"哇"

视觉设计:不断进步的文本设计内容设计

文字正在流行起来         近些年博客.搜索及各类社会化平台逐渐成为热门应用,我们用文字传递信息:         网站普遍进入了改版的高峰期,新版面信息的呈现比以往更清晰直观,这是一种对文字/内容的尊重:         运用文字对网页"注入情感",使得交互的过程更为亲切:          设计上,文字的特征也变得明显起来了,设计师更愿意把文字当做设计的切入点,强调文字本身的样式是否美观,页面文字排布是否到位等等-         以前有人说在互联网的下一个阶段,文字将以一个

网站设计:分析5°专场视觉设计

这个主题是2012年下半年的一次内部分享,迟迟未形成文章,马上过年了赶紧整理起来,顺便给视觉设计师们拜年了!!!我自己内心的一个呼唤,明年脱离"苦逼"二字-- 网站的专场设计,应该算是网页视觉设计师的必修课,应该也算是最基本功.她所需要的设计理论都是最基本,但同时也是最重要的.设计理论版本多如牛毛,我这里仅仅整理5个方面来分析网页专场设计的一些方法,本人并非大师或资深,欢迎各式拍砖. 设计理论每人都会或多或少的知道一些,但是我们作品是给谁看的,我们的真正用户是谁,用户的特性是什么,每个

解析基于栅格的网站设计案例分析

如今,Grid-based(基于栅格的)网页设计已相当普遍,这意味着网页布局混乱的日子就要终结.尽管还无法用肉眼分辨,但我们的确是步入了有序和结构化的时代.栅格布局整体趋于匀称,通常会使网页更加整洁美观.同时,栅格框架已经成为现代所有网站功能实现的基础,这都要归功于它为终端用户提供了完美不失真的设计体验. 一般来说,栅格仅仅是水平线和垂直线隔出来的特定空间,它似乎很难承载任何设计元素,所以大部分设计师会根据路径描绘出几何特性.我们已然看惯画廊.博客.以及新闻相关网站中那些干净利落的栅格,但其实只

几款适合设计师的交互内容设计工具

  这里所指的交互内容(不包括游戏)主要为以下几类: --交互杂志及交互式电子书: 美国的连线杂志<Wired>,科技新时代<POPULAR SCIENCE>于2010年便推 出了ipad端的交互杂志,时尚传媒集团旗下的多种杂志以及ELLE也相继推出了多款iPad交互杂志. --品牌展示及产品指南: 在appstore上可以看到大量的品牌app,从时尚.美容到汽车,各大品牌相继推出了互动性很强的品牌推介及产品指南app. --互动童书及多媒体漫画: 平板电脑由于操作简单,不需要太多

excel-把设计稿里的内容做成手机版的页面

问题描述 把设计稿里的内容做成手机版的页面 把设计稿里的内容做成手机版的页面,使用Excel里的图片,把排版做出来 解决方案 可以用axure做原型设计

《算法设计与分析》一一导读

前言 算法是计算的灵魂(spirit of computing),而算法设计与分析的基础知识是计算机科学的基石.算法设计与分析的知识内容很丰富,可以从不同视角进行组织与阐述.一种视角是关注经典的算法问题,如排序.选择.查找.图遍历等:另一种视角是关注经典的算法设计策略,包括分治.贪心.动态规划等.本书的组织兼顾问题与策略两种视角.首先按照经典的算法设计策略,将书中的主体内容分为遍历.分治.贪心.动态规划4个部分.其次在每个部分之内,又围绕经典的算法问题来阐述该部分所着重讨论的策略. 本书集中讨论

《算法设计与分析》一一第3章 线性表的遍历

第3章 线性表的遍历 线性表是一种简单又广泛使用的数据结构.线性表中所有的元素组成线性序列.除头尾之外的每个元素都有唯一的前驱和后继:头元素只有后继,没有前驱,而尾元素只有前驱,没有后继.线性表的特征决定了我们很容易从头至尾依次扫描其中的每一个元素,而这一简单的遍历过程可以解决很多重要的算法问题. 线性表的遍历是在算法的简单性与高效性之间的一种权衡.基于线性表遍历的算法往往原理简单.易于实现和维护:但是其效率往往较低,有较大的提升空间.以线性表遍历为基础,我们可以进行更复杂的算法设计,例如,以遍