【产品】使用 Axure 做产品原型设计

1、明确 3W

1）what’s the aim？

明确产品主要是做什么。

2）Who’s the users？

产品的使用者？即用户是谁？考虑这个产品的使用者是哪些用户？是否有群体特征。

3）what’s the function？

产品的核心功能是什么。在了解用户后，考虑用户会有哪些操作，这些操作的流程是什么？明确产品的主要核心功能操作有哪些。列举所有功能点，找出核心。 

2、从 0 到 1 产品设计

CEO 定好产品的方向和模式。

方向决定产品的战略。

方向定位不准，会造成又一层的理解，那么做出来的产品容易跑偏。

模式决定产品的生命力。对于模式，在一个昝新的领域，行业首创，要考虑用户会不会买单，接受度有多高，对于有市场的该如何吸引用户。

对于已经有行业的，该如何建立自己的模式而不同于其他产品，获取用户的关注。 

产品设计第二步：框架和业务逻辑。

产品负责人整理出需求的整个框架和业务逻辑。

框架帮助梳理产品包含哪些模块，每个模块里会有哪些功能。

业务逻辑：

上面也讲述到要从多方面考虑业务逻辑，如果一个产品有多个用户群体，要考虑每个用户群体的特征和功能操作。

产品第三步：

不管你是产品助理，亦或是产品经理，如果你想变得优秀，一定要学会独立思考。

以上思考点也是每个产品经理必做的，因此，在设计前先思考以上，做下设计方案。

画下你的思考框架和页面、业务流程图。

整体的框架可以帮你和团队建立起对产品的认识。页面可以帮助你取舍网页元素布局、说明。

业务流程图帮你和开发梳理产品的核心流程。

在你最好方案后，大家无异议的情况下，就可以着手设计原型了。不要以为方案就是万全的，接下来设计时你也需要去思考：

页面设计流程步骤：

分析每个页面包含的内容，将其整理成模块。

模块划分这个没有一个标准，至今也在不断的思考中。

个人是认为按照展示信息来划分，然后根据展示信息的优先级来进行排版，凸出核心，隐藏有关但不紧要的内容。

分析信息结构：

核心信息、信息模块、信息类型。

如何分析：分析页面包含哪些模块，每个模块内的信息元素有哪些？
 
对于推荐文章：

元素包括图片、文章标题、文章内容推荐。站在用户的角度去考虑，重要点在于：文章标题，文章推荐语。

因此这个模块的设计应该凸出文章标题、简介字体要比标题小，提取文章的图片、吸引用户。

对每一个模块，我们要分析其包含的信息类型。

例如：

推荐文章模块包含信息类型：图片、标题、文章推荐语。数据类型是动态的，时时更新，后台管理员审核推荐，写推荐语。级别非常重要，让用户看到优秀的文章。

用户操作：

分析完模块的信息内容后，就该思考用户会有哪些操作。哪些功能是明显操作的，哪些应该被隐藏起来。这些功能的前置条件是什么？后置条件是什么？这些功能目前很重要吗？

接着上面推荐文章分析。

这个模块用户操作是点击，查看文章详情。

那么如何告诉用户这个可以点击呢？鼠标移入、移出文章、图片有效果显示。跳转到文章详情，在文章详情页面可进行的操作是：用户可以评论、收藏、查看作者名片、查看、回复其他人的评论。

首先要思考，是否所有人都可以进行这些操作，如果可以，以什么样的方式合适。因此设置条件，评论、收藏、查看、回复其他人的评论的前置条件是：登录之后方可评价、收藏、回复。

布局样式：

重要模块及元素都具备了最后就要考虑一下布局样式。

这样做的原型也会很美观，不至于被喷太low。思考点：考虑核心信息的位置、核心信息与操作的位置。布局样式要考虑包含哪些信息元素。

例如：

文章详情页面。

包括：标签、文章标题、发布时间、阅读量、评论量、收藏量、详情、作者名片、评论、文章标签、点赞、分享。

那么我们从用户角度开始考虑，这篇文章主要是哪一类呢？文章质量怎么样呢？看到很爽时，作者是谁，来出来给我看一下。实在是爽爆了，快，大爷给你赞一个。若太不符合胃口，评论过来，一个差评。

因此主要信息布局是这样子的，文章标签，文章标题、评论量、收藏量、详情、作者名片、评论、文章标签、点赞。讲到这里了自己去设想几种布局吧。

要记住用户都是懒的，不要把太多工作交给用户。设计时尽量做减法，减去不必要的功能。好好想一想，这个功能去掉会不会有影响，这个词这样说，会不会给用户带来疑惑。

3、原型设计的流程

开始做原型之前，请先考虑清楚以下几个要素： 

• 做这个原型的目的是什么？ 
• 这个原型的受众是谁？ 
• 这个原型有多大效率帮助我传达设计或测试设计？ 
• 有多少时间做原型？需要什么级别的保真程度？ 

要掌握 Axure，主要应该弄懂四大核心功能： 

• 母版：主要用于制作网页的页头、页尾，可复用性高； 
• 动态面板：核心中的核心，“层”的概念很重要； 
• 图片热区：在一张完整的图片上通过热区，建立交互动作； 
• 函数和变量：局部变量和全局变量的概念以及应用（比如用户登陆效果）。

4、原型测试流程

原型测试是原型设计过程中的关键步骤，是整体流程中主要的里程碑之一。 

可用性测试是一个庞大的话题，测试方法有一对一或者远程测试，难点是从测试中得到有质量的成功。 

测试结果取决于测试者，务必招募到合适的人。要找到合适的人，需要对测试者制定一系列的筛选标准，比如一个社交产品绝对不可能找一个连电子邮件都没有的人来测试。 

测试时长可以是一个小时左右，足以测试5个到6个左右的关键场景，并列出一些观察结果和关键问题，例如：
 
• 用户如何开始任务的？（是搜索还是浏览？） 
• 他先做了什么，再做了什么？ 
• 他如何做出最终决定的？ 
• 他们是否领会了设计意图？有什么操作困难？ 

关于记录测试结果，可以结合定性和定量两种方式，做一张计分表，用1-5的程度来表示；同时定性地记录用户的一些表达，尽可能地原话记录。

提高画原型图水准的方法：

• 比例 
• 布局 
• 大小 
• 关联 
• 颜色 
• 布局，这方面没什么特别深奥的理论来告诉大家，我一般会借鉴其他同类网站的布局，将功能，模块化先画好的大的方块。

就好像我们在画素描的时候，会先将静物的轮廓画出，再描绘细节。

在原型制作的时候也是一样：过快的进入细节，会让你的视野变窄。常用的一些像栅格化，黄金分割都是不错的布局工具。 
• 大小，大小能让一段文字或是一张图片，甚至是一个区域，达到突出的效果，吸引用户的视线。

可以将要重点突出，弱化其他的信息。

我想将流程提示与下面的操作区别开，产生层次感。在汽车信息部分，突出了车主的汽车品牌名称，抓住眼球，将更改车辆放到右侧，将其弱化。

• 关联，我们发现当信息堆在一起时，会分辨不出他们的之间的关系，而且有些毫无关系的信息放在一起，会让人感觉非常的莫名其妙。

做产品就需要具备一定的归纳与总结能力，相信这点大家都不会含糊的。

这个世界有种东西叫留白，留白就能很好给你关联或不关的视觉感受。

将有关联的东西凑近，另外一组离他们远一点，效果立竿见影，这种张弛的感觉，会让你的原型美观不少的。 

• 颜色，颜色一样可以达到突出重点的目的，但是控制颜色也是件技术活儿， 控制不当就会“花”。

5、用户体验五要素

战略层

网站的范围基本上是由网站的战略层（strategy）所决定的。

这些战略不仅仅包括了经营者想从网站得到什么，还包括了用户想从网站得到什么。就我们的网上书店的例子而言，一些战略目标是显而易见的：用户想要买书，我们想要卖出它们。另一些目标可能并不是那么容易说清楚的。

范围层

结构层确定网站各种特性和功能的最合适的组合方式，而这些特性和功能就构成了网站的范围层（scope）。

有些卖书的网站提供了一个功能，使用户可以保存之前的邮寄地址，这样他们可以再次使用它。这个功能——或任何一个功能——是否应该成为网站的功能之一，就属于范围层要解决的问题。

结构层

与框架层相比更抽象的是结构层（structure），框架则是结构的具体表达方式。

框架层确定了我们的结账页面上交互元素的位置；而结构层则用来设计用户如何到达某个页面，并且在他们做完事情之后能去什么地方。

框架层定义了导航条上各项的排列方式，允许用户可以浏览书籍的不同类别；结构层则确定哪些类别应该出现在那里。

框架层

在表现层之下是网站的框架层（skeleton）：按钮、表格、照片和文本区域的位置。框架层用于优化设计布局，以达到这些元素的最大效果和效率——使你在需要的时候，能记得标识并找到购物车的按钮。

表现层

在表现层（surface），你看到的是一系列的网页，有图片和文字组成。一些图片是可以点击的，从而执行某种功能。例如把你带到购物车里去。一些图片就只是图片，比如一本书的封面或网站自己的标志。

国内设计/素材站
 
http://www.zcool.com.cn/ 站酷 
http://www.68design.net/ 设计师联盟 
http://www.sucaitianxia.com/ 素材天下 
http://www.52design.com 我爱设计网 
http://www.chinavisual.com/视觉中国 
http://down.chinavisual.com/ 下吧素材网 
http://sc.chinaz.com/psd/ 站长素材 
http://www.tooopen.com/psd/ 素材公社 
http://www.sccnn.com/ 素材中国 
http://www.cyzg.com/ 创意中国 
http://www.sharelogo.cn/ 标志设计

UI 设计网址 

http://www.chinaui.com/ 优艾网 
http://www.uiimg.com/ UI图-UI设计网 
http://www.uisheji.com/ UI设计网 
http://www.uimaker.com/ UI制造 
http://www.worldui.com/ UI设计网 
http://fanggeben.com/ 方格本 
http://www.cnpsd.net/mobile/ 手机界面

国外设计/素材站 

http://www.deviantart.com/ 艺术与应用 
http://www.webinspeer.com/酷站欣赏 
http://coolhomepages.com/最好的网页设计酷站欣赏 
http://www.bestcssdesign.com/ 最佳的网页设计 
http://subtlepatterns.com/ 背景纹理素材 
http://logopond.com/ LOGO设计 
http://thedesigninspiration.com/设计灵感 
http://reeoo.com/ 酷站欣赏 
http://www.tungtt.com/ 酷站欣赏 
http://www.iicns.com/ IOS应用图标

文章来源: blog.csdn.net，作者：简一商业，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/liwei16611/article/details/89318358