产品原型的诞生

一.产品原型

    产品原型是用线条、图形描绘出的产品框架，是综合考虑产品目标、功能需求场景、用户体验等因素，对产品的各版块、界面和元素进行的合理性排序过程。也是产品上市或发布前，经过详细设计的产品模型，产品原型所涉及的材料、部件、功能等必须与最终产品一致。

1.手绘纸上原型（草图）

手绘原型是记录设计想法，用于前期设计交流。

优势：·快速构建    ·轻松修改     ·不需要特殊的技术

    于是，图形设计师、需求人员、可用性专家，甚至客户都能够帮助建立原型、操作他们。由于草图的非正式性，多使用原型设计的前期论证阶段（功能设计可行性），个人也比较喜欢先画草图（纸上推演）再使用原型软件设计原型（完善）。

 

2.线框图

    线框图是由图形设计软件制作而成，最常用的软件是Axure RP，相对手绘原型，线框图更加清晰和整洁，也适用于正式场合的PPT形式宣讲。线框图还可以是功能页面结构的视觉呈现，传达页面的布局以及功能元素定义，将产品需求以线框结构的方式展示出来，让产品需求更加规整的直观展现。一般以黑白灰的形式来表示。

3.高保真原型

    高保真原型是真实的模拟产品最终的视觉效果、交互效果和用户体验感受，在视觉、交互和用户体验上非常接近真实的产品，原型中甚至包含产品的细节、真实的交互、UI等等。高保真原型=线框图+交互逻辑+视觉+用户体验。

二.什么是交互设计？

    简单的说，交互设计是人工制品、环境和系统的行为，以及传达这种行为的外形元素的设计与定义。交互是两个实体之间的事务，通常涉及信息的交换，也可以包括实物或服务的交换。交互设计师的工作就是创建这些交互的方式。

 

1.交互的分类：·实物交互    ·界面交互

2.交互设计做的事：·翻译工作    ·帮助对话

    交互设计的出发点在于研究人和物交流时，人的心理模式和行为模式，并在此研究基础上，设计产品的可提供的交互方式，来满足人对使用产品的需求。通过形式（按钮、输入框）、颜色等等方式来帮助人和机器对话，机器同样通过声音、灯光、动画来响应用户的行为。

 

3.两种交互设计方法

·以用户为中心的设计（UCD）    ·以活动为中心的设计（ACD）

    以用户为中心的设计（UCD）要求设计师必须了解用户需求，进而指导设计。它的核心理念是：用户最清楚他们需要什么样的产品或服务。设计师的参与是为了帮助用户实现其目标。随着交互设计的发展以用户为中心的设计思想往往目标宏大，而可操作性则受到时间、预算和任务规模限制，且往往还忽视了人的主观能动性和对技术的适应能力，一味的强调“机器适应人”。

以用户活动为中心的设计（ACD）是把用户要做的“事”或是用户活动作为重点关注对象，它使得设计人员能够集中精力处理事情本身，因此它更适合于复杂的设计项目。

所以两者可以相互结合，有主有次，主次分明，以项目情况为准。

 

4.交互设计流程

流程： 

     1. 用户研究——了解用户的活动及目的；

     2. 需求分析——定义活动中的行为与问题，定义设计的目标；

     3. 交互流程——设计方案，反复精化；

     4. 设计完善——确认设计方案对用户活动的影响。

三.项目背景

项目名称：湛江市人社局劳动力分析及预警平台

项目背景：这是一个大数据分析平台，主要针对几个主题数据进行展示，要求2016年9月20日完成。

客户的展示环境：大屏展示

大屏特点：

     1) 面积巨大

     2) 深色背景

     3) 很少操作

     4) 空间局限

     5) 单独主题

四.设计实践

1.确定项目简明流程：

     1) 分析需求文档，了解业务目标、用户需求、功能需求列表

     2) 设计原型，明确信息架构、页面信息布局

     3) 评审原型，最终选定一个原型方案

     4) 开始视觉设计，关注色彩、风格、情感因素等

     5) 评审通过后开始开发及测试

2.定义需求 —— 用户研究

    重点就是要挖掘用户的真实需求，过滤不合理的需求。在做用户调研时，不要只听用户说什么就听什么，要追问用户，直到得出真正的答案。

另外，需求的分析过程中，要根据用户反馈的意见确定需求的优先级别。

                                     图：考虑用户意见的5个因素

 

3.定义需求 —— 用户访谈

    通过用户访谈，记录用户意见，并针对用户的意见进行整理和分析。

 

用户访谈记录整理（部分）：

我们提问1：对于这个系统，你们最想了解的是哪方面的数据？

客户回答1：全市劳动力总量（各县市区分布情况）、已就业人数、未就业人数以及失业率。

设计处理1：重点突出这些方面的数据。

 

我们提问2：就业失业人员的行业分布，你们是想了解它的什么样信息呢？了解来有什么用的？

客户回答2：就业的行业分布可以让我们了解就业的情况，哪个行业比较热门。那么我们就可以引导求职者和毕            业生，告诉他们什么行业太火了，工资却偏低，大家可以尝试选择其他行业，或者推荐到一些冷门            却工资高的行业。

设计处理2：增加需求缺口、供给缺口TOP10职业排行，突出职业名称及缺口数。

结合用户访谈记录，整理分析出用户需求表。

                            图：湛江市人社局劳动力分析与预警系统需求点

4.原型设计 —— 信息归类

    产品需求确定后，不要着急设计原型，应该先对信息进行归类，信息归类与组织是一个产品的基础，符合现实场景使用逻辑，满足商业需求将有效信息合理编排，才能给以用户流畅清晰的体验。一般我们会使用卡片分类法来做信息归类：

    卡片分类法具体操作是邀请用户“把类似的东西放在一起”（把标有产品元素的标签提供志愿者进行阅读理解并分类），这种方法在产品设计的初级阶段可以容易获取用户对产品内容的期望，为信息架构的搭建提供依据。对现有产品迭代改良时，卡片分类还可以检验架构的合理性。

卡片分类还可以具体分为：

开放式：

（用户完全自行确定分类的组数和卡片数），优势在于提供更加丰富的分类结果，但也容易造成结果不可控。

封闭式：

先将导航架构设计好，再由用户分别归类卡片，结构有限可控，一般是对信息设计的结果进行验证之用。

5.原型设计 —— 信息架构

    信息架构设计是为了从最根本上决定一款产品可以解决什么问题，由哪些部分组成，之间的逻辑关系是什么，通俗的讲就是一个产品可以用来做什么。表达信息结构最好的方法是脑图，可以使用mindmanager等脑图软件（如下图为湛江市人社局劳动力分析及预警平台的信息架构图）。

6.确定页面的大致布局并安排页面信息主次关系及表现形式

    根据信息的架构的内容确定页面的大致的布局（信息布局上需要将重要的信息放于用户视角容易触及的地方，例如屏幕中央位置处。）

    湛江市人社局劳动力分析及预警平台中客户最想了解的板块内容是劳动力分析情况，所以我们将这部分内容放置在大屏幕的中间醒目位置，用户使用这个系统能第一时间看到这部分的内容。

   通过对客户的访谈，我们了解到平台各部分内容的重要程度，对此我们进行了页面信息主次关系及表现形式的梳理（考虑用户认知能力和行为习惯，将信息以简单易懂的方式呈现。）

 

7.确定界面布局

    梳理出主次关系及表现形式后，我们将内容放置于页面各大版块中，分别手绘了页面元素布局版和表现形式展示版两个产品原型。

                                     上图：页面信息元素的布局

                                     上图：具体表现形式的展示

8.用原型工具画出线框图，添加交互效果

    线框原型的目标在于清楚的表达平台的设计理念和功能的执行逻辑，所以我认为能够达到这个目标的原型都是合格的，在原型中加入色彩和交互效果的目的是让产品设计师与其他环节的技术人员的沟通更加顺畅。（下图是湛江市人社局劳动力分析及预警平台的线框图）

 

9.UI设计师出最终效果图

    UI设计师根据原型将平台页面做视觉美化，根据客户的企业文化及系统本身的性质来重新设计颜色和调整细节，最终设计出好用、易用且适合客户使用的平台。

 

最后，我们顺利在9月20日之前完成了设计稿并提交给客户，得到客户的一致肯定。