IAMUE
Axure实践第二讲
—如何有效的在工作中引入原型
·页面枝干
·添枝加叶
·画龙点睛
在近期的产品需求开发过程中，我们产品小组正式且大量的将原型开发工作投入常规的需求分析工作中，原型的开发对于我们在产品初期的调研、构建都提供了很好的指导。接下来就让本文带你领略：产品与原型的一节课。
一、功能结构图（页面枝干）
1. 切入点是功能结构图（自顶向下）
从大的方向上去划分几个大的模块类型，适用于业务功能较为单一且业务逻辑处理流程较为简单，如在做市商系统构建的过程中
（一）将做市商划分为两个大的类型：期权做市商、期货做市商；
（二）根据经验，将功能划分为配置管理、查询功能。
（三）随后根据《需求申请书》中的内容，将各个功能点归纳到上述大的模块下。
优势：可复用性强，基本思路与模板思路一致，提取可用的用户需求模型，就可以快速的规划功能结构图。
劣势：由于划分是按照模板进行划分，所以功能的名称以及分类可能并不会体现出精细化，更多的是一种泛义上的定义。
2. 切入点是详细功能（自底向上）
由细小的功能，去分类和划分，这样工作可以一开始就从用户的《需求申请书》进行入手。
（一）将《需求申请书》通读后，将可以整理出的功能点，整理为功能点列表；
（二）将功能列表进行分类整理，这个时候可以采用Visio工具或者思维导图工具对上述的功能列表进行分类，分组。
（三）分组的过程可以更加定制化一点，相关联的功能可以尝试有机的组合，而不是通过原有的相似性进行划分，强调的是功能模块之间的关联。
优势：可以自由的去关联功能，不局限于传统的导航形式，可以体现功能模块间的内部关联。
劣势：不太容易把握导航设计的级别，分类太细致，可能会引起导航的深度太深，从而在使用上增加操作路径。
样例：
图例1-1 （采用自顶向下方式绘制）
完成功能结构图以后，基本上页面以一种怎样的导航形式展示，以一种怎样的关系进行页面关联，应该就可以了然于胸。
设计导航结构原型，两种设计方式：（横向导航、左侧导航），这两种方式符合现代的阅读习惯，所以常见的导航栏设计都来自于这两种：
图例1-2 横向导航
图例1-3 左侧导航
当然也有很多情况，出现二级导航时两者进行混合使用，这里就不再详细描述。
Axure技巧时间：
页面布局的一些常用的小技巧：
1. 使用页面的居中功能，可以使界面看起来更加整齐；
2. 在页面功能中定义自己的样式，如所有页面统一的背景色，这个不是太建议使用，可以将居中作为模板纳入。
3. 为了不影响UI后期的颜色调配，可以开启黑白颜色模式作为交付产物，如下图1-4和图1-5：
图例1-4 无彩色交付原型
图例1-5 彩色原型
二、核心数据信息化（添枝加叶）
页面导航完成后，聚焦页面展示的内容，这个才是页面的核心内容，主要内容源来源可以取自于需求分析的结论，目前的业务系统主要数据源大多数采用表格、表单进行组织，也有部分采用数据可视化技术，对数据展示进行优化，以下对于这两部分的内容进行讲解：
1. 表格、表单
通过表格展示（图1-6）的数据列，可以根据需求调研结果或者需求申请书中进行概括，基本就是要确定页面展示的数据列，筛选输入表单。
确定内容后，随后确定使用的控件，基本就是“输入框”、“下拉窗格”、“多选窗格”、“单选框/复选框”、按钮这些基础控件。
而表格内容，则是设定表头，列表中的内容后，使用表格方式进行展示即可。早期的Web开发中，基本只有数据，所以表格给人的第一感觉就是excel一般的压抑，全部都是文字，而随着移动端的崛起，表格被赋予了新的生命力，图文混排（图1-7）这种形式得到了很大程度上的推广。
图例1-6 图文混排的样板
图例1-7 图文混排的样板
另外，利用图文混排将列表的的布局通常可以以九宫格的状态进行组织：
图例1-8 列表
图例1-9 九宫格
2. 数据可视化表达
原有的数据表示方式通过表格表示，一方面是页面的篇幅会比较长，另一方面，无法直观的辨别数据的趋势以及某些流程的进展，所以除了专业化的业务数据是给专业人士进行计算分析外，引入了“Dashboard”的概念，对数据的展示形式进行改进，常见的有折线图、饼图。目前可以支持的主要就是这两种类型的图表，网络上有制作好的图表原型Axhub Charts，有兴趣的同事可以去看一下。
https://axhub.im/pro/3320ad07d6897b89/#g=1&p=about
目前据小道消息，Axure正在引入E-charts的支持，相信将来可以引入更多的图表，这个大家可以静候佳音。
另外一种制作图表的方式就是通过Axure中提供的一些简单形状去构建，这里主要说明就是折线图和柱状图。效果如下：
图例1-10 折线图
使用手绘的方式处理图表，实际上比粘贴一个图片更加美观，而且可以自由的去定义一些交互。缺点就是可能需要花点时间。
Axure技巧时间：
控件使用的一些常用的小技巧：
1. 定义一套控件模板，可以通过拖动的方式快速的引入好看的样式；
2. 将模板定义到工作空间的控件中，更加灵活，但是不能导出；
3. 布局的对齐可以借助参考线、对齐功能，这个功能还是非常重要，不再依赖智能对齐线和目测对齐。
4. 页面内的字体和文字大小采用一个统一的样式，可以让页面更加整齐划一。
5. Axure原生控件的表格不是太好用，所以建议不再使用该控件。
三、增加交互（画龙点睛）
随着移动端的兴起，交互变成一个炙手可热的词汇，因为人机交互忽然变得无处不在，不在只是存在于上班时，所以用户不能容忍生活中用着手机中优质的交互，但是工作中却要忍受一个糟糕的系统。
对于是否在原型中构建交互，因为目前的原型复用的几率很低，所以如果花很大力气去构建复杂的交互，最后在前端工程师那里得到了否定的答案，确实是一件让人很不开心的一件事情；但是我个人认为交互还是要去做一部分工作的，因为这一部分正是“画龙点睛”的一笔，其实属于一个产品经理的时间其实就是这里。需求和界面都是“用户”拍板的，其实可以糅合自己思想的地方很小，如果真的想提升对于交互的理解，还是一定要去尝试做一个完整的交互原型。因为只有做出来才能真正了解到：这种方式确实是合适、美观、实用的。如果只是停留在想法阶段，那么请一定在原型中做标记说明，毕竟灵感转瞬即逝。
有交互的原型也可以在与前端工程师进行沟通的时候，并不是那么乏味的停留在两个人的脑海（还可能有差异）中，而是生动的展现在两个人的视野（达成一致）中。
这里，我将交互分为两种：
1. 大型交互
大型交互可以理解为面包屑导航、对话框、提示语、文案、页面切换方式，总之这些用户显而易见的人机交互部分都可以称之为大型的交互动作。
这些动作其实还可以归纳为一句话：XX情况下执行XX动作，得到XX结果，也就是千言万语的表达就是要通过一个动作完成表达。
Axure技巧时间：
控件使用的一些常用的小技巧：
1. 页面切换方式，采用两种方式：第一种：建立共有母版的方式，这在页面切换时，除了轻微闪烁，效果也很好；第二种：通过引入动态面板实现。
2. 条件的认定不可以识别中文，所以尽可能用英文。
3. 为了更好的控制元件，一定要对元件进行命名和分组，这样在制作交互动作的时候，可以快速的选择到元件。
2. 微交互
微交互其实是我个人定义了这样一个名词，因为没有找到专业的名词，在PPT动画创作中，有一部分设计师为了让作品更加的贴近真实，做的一些交互动作。
这部分交互动作大部分在网页中可能并不适用，但是如果在原型中引入这个概念，可能也会成为点睛之笔。这些在很多前端框架中已经做了集成，比如交互错误的提示，不再采用之前那种弹窗提示，多数开发者，转而采用在样式表中加入交互，以达到一种轻量级的提示方式。
Axure技巧时间：
控件使用的一些常用的小技巧：
1. 微交互控件建议根据自己的经验做一些元件集成工作，因为制作会比较花费时间；
随后的工作就是根据需求和原型，与用户进行确认后，进入后续的工作，总而言之，原型最大的作用，实际上就是连接了用需的文字和用户的想象，对于需求工作的查漏补缺也是提供了一个操作实体。如果原型工作安排的开发时间并不是太充足，那么一定记得以标注的形式将你想到的想法记录在模型旁边，毕竟灵感转瞬即逝。
最后为大家准备的是最近流行的一种编写产品需求的方式“Axure产品需求”：
http://www.pmdaniu.com/storage/11401/5c54bff80e4bdad034860976de104dbf-7376/start.html#g=1&p=首页
这个方式充分肯定了Axure的工具特性，以及当前工作没有特定局限的形式，即使是一个很简单的工具，用的好了依旧不会束缚你的想象力，希望大家能够不囿于工具的简陋，充分放飞自己的想法。
