经过到该公司的多次沟通，为其公司网站提供了一个产品改造方案。

下面是改造方案原型的首页界面。

产品原型改造方案的下载：点击到达下载页

就此，最近通过朋友介绍，接受了该公司的兼职邀请，
详细给该产品把把脉，做一下产品的设计改进工作。

该产品过去的基本操作过程如下：

1. 用户付费开通后，通过提交自己的高考分数或估分，首先获得一批推荐的高校列表。
2. 点击每一所高校名称，可以获得推荐的各个专业列表。
3. 点击每一个专业名称，可以查看到专业简单，往年录取分数线，变化趋势图，
该专业全国就业率等信息。

可以通过主要页面截图有个基本了解：点击到达下载页

看似没有多大问题，可产品到用户认识以及实际使用间的距离还是很大。
通过分析，从用户动机的角度出发，产品有如下改进方向：

1. 不能所有界面操作都只有用户付费后才能看到，不是关键部分，产品应该更开放，
用户无需登录就应该能有一些基本的操作感受，加强产品在付费前的引导。
2. 以示范用户的案例说明指出，该用户如何通过该系统一步步得出了最中意的高校和专业，
同时，借助历年的录取分数，还能得到自己成功被录取的可能性到底有多大？
3. 将考生线下实际向老师咨询填报志愿的过程模拟到产品的过程当中，即如下：
a) 首先会问考生的成绩或估分，以大概确定可以报考哪一层次的高校。
b) 通过询问，看考生对哪些专业比较感兴趣，考生主观动力上愿意学。
c）然后对比给出分析结果，哪些高校的哪些专业，考生填报被录取的可能性最大。

针对这些分析结果，最终给出了设计改进意见，详见可边的原型。
设计改进意见，主要针对信息的组织结构和用户的操作过程，并没细化到每一处细节。

由Axure RP制作的原型：填报志愿分析系统1.0

2010年7月13日，给该公司的两位老总直接讲解了这些原由以及用户的操作过程。
两位老总在看后，表现的神情轻松、内心透露着愉悦，感觉产品一下子变“简单”了，
对产品的设计改进意见，以及思路的出发点表示甚为满意，并期望长期能提供合作支持。

NTT DATA应用Axure RP于项目开发后，发现在企画上的质量有所提升，且可以缩短30%的工作期间。因此NTT DATA在2008年将Axure RP与NTT Data公司所使用的其它工具软件，整合成无缝衔接的开发环境，并且在2009预计扩大应用到50个项目。

译注1：需求定义在原文为「要件定义」，包含User Requirement Definition以及Software Requirement Specification)。
译注2：NTT DATA AgileNet于2008年11月成为Axure RP的日本市场代理商。

背景

NTT Data经营策略的概念之一是「开发过程的变革」，讲求系统开发方法，并促成统一开发平台等工作流程标准化作业，致力于质量及生产效率的提升。

做为以上策略的一个环节，NTT DATA引用企业塑模MOYA，将需求定义以后的工作，应用TERASOLUNA框架等统合开发解决方案来处理，以求开发过程可以统一。 (注：MOYA , TERASOLUNA 是NTT DATA公司的软件工具及注册商标)

但过去在需求定义的作法主要是以纸本规划书与客户进行互相确认，无法确认系统实际运作的样貌，容易造成厂商与客户之间的想象落差，导致事后又要再追加功能，必须回头重做，或是系统建立之后被诟病不好使用的情况频繁发生。

这些问题使人了解到，在企划阶段便向客户展示系统实际形态，降低日后工程发生追加条件的可能性，甚至是展示系统的好用性是非常重要的。Axure RP便具备了这样的功能。

创新的开发工作流程

为了解决这些的问题、对客户从必要需求定义功能到系统开发概念的提出，来降低在此后的工程的追加需求的发生，展现系统的"容易使用"的重要性。

具体而言，就是利用NTT DATA公司的软件工程系统，于企划阶段对整体商业需求做定调后，之后利用Axure RP制作出系统原型。以原型展示客户所要求的功能项目，便于买卖双方确认系统的需求。彼此达成共识后，做好的原型就可以提供充分的画面设计信息，对于后续设计开发工程也都可以活用。

新开发流程的作法，是将需求定义的阶段分解为商业需求，功能需求和画面定义。

图：系统开发过程的Axure RP文件成果和新工作流程的对应关系

译注：上图之日文翻译：

• 开発プロセス：开发流程。
• ユースケース図など：Use case 用例图。
• ユースケース記述：使用状況敘述
• プロトタイプをベースとした用件の抽出：以原型基礎的用件抽出。
• ステップ：Step步驟
• フロー：Flow流程
• エラー：Error錯誤
• 発注者ビューガイドライン：outsourcer's view guideline 发包者的需求说明文件，包括画面需求，业务流程等。 (参考 http://www.atmarkit.co.jp/aig/04biz/cview.html)
• プロトタイプに対する「使いやすさ」の評価：對系統原型的「使用方便性」的評價

新工作流程的效益

过去的企划虽然也采用原型设计的方式，但因制作上并不容易，往往造成项目开发负荷太大。NTT DATA导入Axure RP之后，可以很省力的方式产生原型。

因为Axure RP具有以下三大优点：
1. 拥有丰富的画面制作特殊设计功能，可以不需要技术上的背景，便能制作系统雏型。
2. 不需要程序设计的导入，便能够制作近似于系统成品的动态原型。
3. 可以Word样版功能为基础，自动生成系统功能书，节省撰写功能规划书的成本。

在2008年度的几个项目导入结果发现，上游企画文件进入审查作业时，可被发现的错误数量增加了，然而后续开发阶段的追加功能的情况则减少。在系统需求定义质量有所提升的同时，更实现了30%的项目期程的缩减。

这些效益都是因为在企划阶段就可以展现可互动的系统原型，使整体开发在上游阶段就能确认、评估系统的使用性，产出的系统也更加贴近用戶的需求。

本文摘要翻译自NTT Data公司新闻稿。原文出处：http://www.nttdata.co.jp/release/2008/101500.html

淘宝面试的最后一个环节，是请应聘者向面试官提问，使面试官有机会解答应聘者对公司、团队以及工作等等方面的疑问。在我面试过的设计师当中，大约有三分之一会问我：“淘宝的设计流程是怎么样的？”我不是很了解问这个问题的人为什么会有如此高的比例。也许这是一个“安全”的问题，不会对面试有什么危害；也许目前设计师在工作中普遍碰到“流程”问题或“没有流程”的问题；也许这个话题涉及各家公司的“机密”，确实无从找到相关的资料。

总而言之，虽然来面试淘宝的设计师人数有限，但我斗胆假设：目前国内所有网页设计师中的三分之一想了解更多关于“设计流程”方面的知识，而我们也不认为这是什么“机密”的话题(我了解的各公司设计过程都八九不离十，名称不同，本质上是一样的)。所以，就在此简单介绍一下淘宝UED的设计流程，期望对这三分之一的设计师有所帮助。

Step1：原型（Prototype）

设计的第一个阶段，我们称之为原型设计，主要是设计产品的功能、用户流程、信息架构、交互细节、页面元素等等。如果你觉得听上去这些概念都比较悬的话，我就用大白话来说：原型设计，就是完全不管产品长得好不好看，只把它要做的事情和怎么做这些事情想清楚，把它怎么和用户交互想清楚，而且把所有这些都画出来，让人可以直观地看到。

至于怎么画出来，那就随你了。用纸笔画，用白板水笔画，用Photoshop画，用Visio画，或者像我们一样用Axure画，都可以。只要把上面提到的这些都事无巨细地表达出来。

在原型的交付物（Delivery，也就是某个阶段的产出物）中，最重要也最常见的就是线框图（Wireframe），这玩意儿不用多解释了，看下面这张图就明白：

在画线框图的时候，要把握好细节的刻画程度。有些东西只要画个框就行了，而有些东西需要把文案都设计好。以免你的老板或是需求方揪住角落里的广告banner该有多大这种问题与你纠缠不休，而忽视了最重要的页面主体部分。

此外，还要牢记：原型就是用来让人改的。它存在的价值就体现在被修改了几次，被更新了几次，以及它的下一步被少改了几次。

Step2：模型（Mock-up）

在原型被大家接受之后，就该关心产品长得好不好看了。我们以“模型”这个词来统称该步骤的交付物。和原型相比，它关注于产品的视觉设计，包括色彩、风格、图示、插图等等。

要清楚的是，这不是一步由“美工”来“美化”的工作。视觉设计师需要对原型设计有深刻的理解，对交互设计和尚未进行的HTML/CSS/JS的Code都要有充分的了解。如果不能从全局的角度来做视觉设计，则只能是做做把水晶效果改成金属效果这样的“自娱自乐”，而对产品本身没有任何有价值的帮助。如果原型说：“在这个页面上，A比B重要。”，那他的脑子里就要有十七八种可以表现“A比B重要”的视觉语言可供选择。这是对设计模型的视觉设计师的基本要求。

更高一些的要求，才是视觉设计的“原始功能”。“到底是选水晶效果还是金属效果？”，“这个按钮选什么颜色好？”等等。这一类的思考和选择，应着眼于产品的气质、品牌等等，在各种产品间保持一定的统一，在用户心里打下视觉的烙印。其实要做到这一点是很难的，特别是还要满足上一点的要求。一般来说，如果能90%的把交互设计的成果和品牌形象表达出来，已经是很好的结果了。从我自己来说，就常常很郁闷不能用好的视觉语言来表达自己在原型设计中的想法，总是做完模型就打个七折:(

更更高的要求，有些问题用交互设计是很难解决的，这时就需要一个有创造能力的视觉师，可以从视觉设计的角度来创造性地解决问题（一时还没想出好的例子，想出来再补上）。

总的来说，模型设计是件非常困难的事情。它的工具是感性的，但设计过程又要求非常理性，必须在各种约束条件中解决问题。而目前能从较高的角度来来看“视觉设计”的人还不多，大多还停留在“效果”、“风格”等表面议题上。个人以为在“Web标准”和“用户体验”之后，视觉设计是Web设计专业化运动的第三波，市场的需求已经存在，只差有人推动一下。

模型的设计一般来说都是用Photoshop了，下是是个例子（与原型的例子对应）：

Step3：展示版本（Demo）

这步我就不多说了，Demo就是按照原型和模型用xHTML/CSS/JavaScript等等前端技术实现出来，以便后端的开发工程师可以接手编码。这个过程让小马、正淳专门起个新帖来详细介绍吧。只提一点，前端开发在有些公司是不放在设计团队的，而我们认为前端开发从很大程度上来说是对用户体验的提升和保证，开发只是它的一个手段和形式。所以就把这块工作一直留在我们团队，现在看起来这样很棒：）

把上述原型、模型转为xHTML/CSS之后就是这个页面了：

http://favorite.taobao.com/collect_list——-g,nrxwy2lumhgozsvz2cq3tk6w64-.htm

Step 0.5 / 1.5 / 2.5 / 3.5

居然还有半个半个的步骤？是的，这是我们的用户研究过程。在各个阶段的前后，我们会根据具体情况选择是否投入精力到用户研究上。用户研究的形式也很自由：给会员打个电话，旺旺上随便找人聊聊，到公司来做可用性测试，到会员家中访谈……怎么方便怎么实用就怎么做。我们还没有精力放在太多的“学术”性质的理论研究上，对研究方法也是不拘一格，“能抓老鼠”就行。关键的关键，研究的结果如何表现到产品上，如何吸收单个用户的意见来服务所有用户。

在这一点上，我们做得还很不够，积累也很薄，需要向同行们多多学习，也请大家多多指点。

最后……

关于流程，要注意：

1. 设计流程的目标，在于保证“无论谁来做这个产品的设计，都能达到80分”；
2. “100分”的完美作品，很有可能没有遵循流程，而是天才地融合了创新、传承和执行力的作品；
3. “流程”这种东西，只有与环境相匹配才能带来正面的作用。

以上是我们UED团队目前的设计流程，也许你也发现了，它和大多数公司的设计流程是差不多的。我们也在不断地修改和发展这个体系，有不足的地方也请大家多指教。如果你借鉴了我们的流程，在工作中发现有什么问题，也请回来告诉我们，谢谢大家！

台湾房仲业的领导品牌信义房屋，在2007年进行网站改版项目，以采用先进的网站策划软件-Axure RP进行网站策划及网站原型设计，来加强网站的流畅性以及易用度。

以Axure RP进行网站策划，于项目初期快速确认网站介面与动线设计

透过Axure RP设计出来的网站原型，协助项目团队加速网站介面与功能规格的确认，在有限项目时间内开发完成网站，最后更以整体交互性、便利性荣获2007年Click! Awards 金手指奖的年度大奖-「最佳网站」。

为了让网站用户体验可以兼顾友善与创新，信义房屋以「iSearch」为核心概念，采用Web 2.0网站风格及AJAX技术，将房屋对象信息结合电子地图，推出混搭式地图(Mash up)搜寻功能，让网站访客透过直觉式的电子地图，更有效率地浏览各种房屋信息，享受更轻松方便的找屋看屋网络经验。

Web 2.0风格网站挑战传统企划方式

将AJAX技术应用于网站介面上，对网站使用者来说是便利的，但对网站策划人员及技术开发人员则是一项挑战。传统的网站策划方式与工具，不管采用Word / PowerPoint 或Visio，都会遭遇介面精致度呈现不足，无法验证交互设计流畅度的问题，往往要等到网站开发完成之后，才能发掘问题，进行大幅的修改与调整。

在有限的项目时程里，为了避免浪费人力与时间在网站的修改调整，并确保展现优质的用户体验设计，因此信义房屋网站项目团队采用了Axure RP，进行本次网站改版项目的网站架构/动线/介面设计与规划。

以Axure RP设计各种创新搜寻介面

房屋中介网站提供给访客最重要的信息，除了房屋对象搜寻以及条列查询结果外，访客也很在意房屋相关地理信息与周遭环境。因此，信义房屋网站同时混搭「地图搜寻」，结合AJAX技术，使网站使用者轻松操作各种创新搜寻介面。

包括「Flash捷运搜寻」、「AJAX筛选搜寻」、「电子地图整合搜寻」，网页呈现上充分利用电子地图介面，让房屋方位、环境或屋况影像等多媒体信息，都能在地图上完整揭露，细部信息通通一览无疑。

Axure RP Prototype易于模拟AJAX效果

以「AJAX筛选搜寻」为例，下图左侧是采用Axure RP绘制的网页线框图(wireframe)，下图右侧则是实际开发出来的网页介面。

Axure RP能自动将设计完成的线框图(wireframe)输出为HTML Prototype，操作鼠标就可以在Prototype上点出各项房屋筛选条件的选单，不需要设计许多个页面来呈现多种筛选条件。换句话说，想要表现网站的交互特性，只要靠着Axure RP Prototype一页就可以抵上Powerpoint / Visio的10几页了。


借着检视网站原型，在项目初期找出设计问题

再以「电子地图整合搜寻」为例，下图左侧是采用Axure RP绘制的网页线框图(wireframe)，下图右侧则是实际开发出来的网页画面。

Axure RP可以将对象查询结果与电子地图整合的设计方式，输出成Prototype，放在浏览器上，来体验未来完成后的操作经验与动线，以及结合地图之后的交互方式。

以此例，经过Prototype设计后，发现对象列表页的长度可能会造成使用者在观看地图与对象文字数据时的不便，最后将列表对象数量调整到配合计算机屏幕及地图的高度。 这个问题如果仅透过Powerpoint/Visio所设计的wireframe，恐怕要到开发完成放到浏览器上才会发现，到时候再修改就得耗费更多时间人力了。

Axure RP的网站Prototype画面	实际网页画面
对象列表页	物件列表页
对象详细数据	对象详细数据
地图展开页	地图展开页

Axure RP带来项目实质效益，提升网站用户体验

信义「iSearch」所提供的五大创新功能，兼顾人性及Web2.0概念，不仅是买卖房屋者最便利的搜寻工具，也能够大大降低在线看屋障碍，提升看屋亲和力与娱乐性，让在线看屋更普及，房仲业的服务更有效率。

创造出这么棒的网站经验设计，还获得金手指奖的肯定，其背后是整个跨领域专业团队的努力，而Axure RP则在团队与工作流程中扮演网站介面设计，定义需求，确认规格，提早检视用户体验的角色。

在网站应用与设计日益受重视的现在，相信Axure RP将持续协助网站策划人员或项目经理，为了创造更美好的网站用户体验而做出贡献。

Axure RP Pro 是一套整合六大功能的网站策划软件-架构图/线框图/流程图/交互式计/原型设计/规格文件，比PowerPoint或Visio更适合网站策划工作。Axure RP 可以让应用网站策划人员或网站功能介面设计师，更快速且更简易的建立Web AP和Website的wireframe、流程图、prototype和规格。

Axure RP Pro已成为成功设计Web/AP的重要工具，许多专业人士包括美国Fortune 1000大企业，到专业的商业分析师(Business Analyst)、信息架构师(Information Architect)、优使性专家(Usability Expert)、产品经理与 IT 顾问皆广为使用。

Axure RP Pro是Axure Software Solution Inc.所开发完成，在台湾则由悠识数位(UserXper.com)顾问有限公司独家代理。