原型设计

原型是产品可视化的展示，包括了产品的信息架构、功有、内容、交互方式。目前业务普遍菜用了Axure作为原型设计工具。产品或交互人员通过对信息架构的梳理，确认界面内容区的划分，并通过交互方式呈现功能点。

原型分为线框图、低保真图、高保值图。不管哪种呈现方式，都需要设计交互功能，“使原型活起来。

不能设计交互的，要采用注释的方式。

原型使用对象是产品、开发、前端、设计、测试、运营等相关人员。

中小型公司的原型一般结合流程图被产品经理写入需求文档，作为需求描述一部分。

而在大公司，交互设计师通常将原型图写入交互设计说明书，定义产品原型的相关要求。

原型设计规范

快速迭代的公司，要求产品上线时问题越快解决越好，甚至是开发完测试一下直接上线，所以很多缺少原型的规范。
优点：原型设计人员可以自由把握原型的设计，尽可能输出更多想法
缺点：需求团队默契度高。这种情形中小公司较多。

大型多部门的公司制度完善，对于原型设计有一定的规范要求，原型设计人员必须按照要求完成原型。
优点：既便人员流动，交接人也可以根据统一的规范标准立刻读懂原型，方便写交互文档。
缺点：周期长，影响产品迭代。

一般原型设计规范：
产品的内容框架：产品功能的信息架构、流程判断的信息架构、带注解的线框图、过渡页面、带算法的页面、页面流程图（Axure8.0的页面快照）、多入口流程图、具体模块图、多方协作图、动画效果等。

如果需要定义原型规范，请总结以上要点。建议原型规范不需要定义的太死板，但原型具有的细节注解（如字符限制、跳动指向、操作动作类型、浏览器兼容性等）需在交互说明书或者产品需求文档内交代清楚。

页面流程图

定义：顾名思义，页面流程图是页面之间流转关系的示例图。
该图属于宏观层面的全局规划，不需要有每个页面的布局、细节要求。

部分产品页面的层级过深，采用信息架构的方式呈现。

优点：快速从框架上了解业务的流程关系；相关人员了解工作量情况；聚集业务的行为路径

工具：Axure、PPT、 Visio

【如何画，举例：某众筹项目移动侧】
一、业务流程图：点击流程图上的线框图，可以进入相应的页面或流程

图一：简洁流程图

二、页面流程图：点击相关的页面，可进入对应的页面。

页面流程图

三、页面快照与页面：在流程图上，点页面快照或线框图，进入相应的页（比如登录页）

登录页

产品信息架构图

定义：有时也称为站点地图，强调内容、功能的结构、导航系统的设计、是产品的骨架。

该图展示产品的内容归类或功能集合，需要罗列每个页面的细节内容或功能点形成结构化（有层次、有类别性）。该图也是技术人员创建数据结构的辅助文件。

优点：快速全面的了解产品业务框架；相关人员了解工作量情况；相对Web产品，更适用于移动客户端产品。

工具：Axure、PPT、Visio、xmind等

【举例：京东众筹】

信息架构图

产品交互设计

交互说明文档（DRD），主要交付给前端、设计师、开发、测试等人员，根据需求大小难易程度，灵活撰写。

注意点：文档起辅助作用，要面对面交流；沟通后持续完善；模板不一；无需纠结模板，把需要和细节阅明清楚即可。

内容：信息架构图、页面流程图、页面细节图、交互相关规范等。

优点：宏观上明细业务信息架构及页面流转怀脱史，从微观上设计用户交互行为。

勿写：
1、视觉规格规范
2、市场需求
3、功参实现方案
4、相关文案

工具：Word或Indesign

【举例：XXX众筹平台】

1、概述
1.1设计概述
为XX产品页面或全站页面进行交互设计

1.2 设计原则
参考设计规范

1.3 术语解释
描述该文档需要解释的术语名词
...

2、交付物
页面流程图、信息架构图地址：
http://xxx/..

3、内容范围界定
本文档对“xxx众筹”产品的页面构建进行说明。
主要涵盖了：首页、第三方认证、授权登录页、手机号注册页、...等12个页面

首版如有遗漏，将在后期迭代补充。

4、模块的详细说明
（以订单详情页举例）
4.1 订单详情页
![订单详情页](https://img.haomeiwen.com/i10650660/0187e6f9633c91fd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
a. 在本页描述项目方案时，不能超过20个字符（含标点符号），超过的字符用...表示，并且有“详细”按钮，点击详细按钮后，在本页显示剩余内容。总共不超过40个字符。
b.限制2~4个汉字，非汉字，提示“请输入汉字”。提示语在该页面提示超过2秒后消失。
c.13位数字，非数字，提示“请输入数字“。数字不等于13位，提示“请输入13位手机号码“。
......

注：如果公司没有细分交互设计师岗，而由产品经理承担，则无需单独出交互设计说明并入prd即可。

移动端手势

• 手势一

  
  image.png

• 手势二

  
  image.png

常见布局

• PC
  待续

*移动端
待续

页面导航

• 结构性导航：全局导航、局部导航
• 关联性导航：内联、面包屑、步骤、辅助、页面、页码、快速、友情、锚点、标签云等导航
• 实用性导航：

详情待续

视觉设计

1、 IOS\Windows\Android官方设计规范

2、 UI规范

UI规范

【常用的网站设计规范参考】
<<常用的网站设计规范参考>> 可百度

【相在知识】

• IPhone界面尺寸

• IPhone图标尺寸

• IPad设计尺寸

• IPad图标尺寸

• Android SDK模拟机尺寸

• Android 图标尺寸

• Android 安卓系统dpi/sp/px换算表

• 主流浏览器界面参与

  
  image.png

• 系统分辩率设计

  
  image.png

• 网页宽度与首屏宽度
  安全宽度：1002px，可建议最大的宽度：1258px
  在Windows XP常见的分辩率1024768下，我们除掉任务栏，浏览器菜单栏及状态栏后剩下的网页首屏高度平均值是584。
  在Window 7常见分辩率1440900下我们除掉任务栏，浏览器菜单以及状态栏后剩下的网页首屏高度平均值是716。
  综合分辩率及浏览器下的统计数据：
  windowsXp首屏大小580px，
  windows7 首屏大小710px。

首屏内容

用户体验（UX)

【目标】
可用性、易用性、满意度、价值度、可信度、可实现性、可识别性
【定义】
指人们对使用或期望的产品、系统或服务的感觉与反应。它可以分为使用前体验、使用中体验、使用后体验。在产品设计中，用户体验要结合各方面不同利益，平衡产品元素：包括UI、交互、功能、逻辑、售后等等。通过“可用性、易用性、可实现性、可识别性”的提高，增加用户的满意度和信任度，最终提升用户的价值度。
用户体验为设计目标用户为起点，进行满意度与概念设计、用户功能需求设计、交互设计等等过程，最终形成用户产品反馈和报告，进行新一轮产品设计优化。

【用户体验要素】

image.png

• 战略层--目标和用户需求
  网站的基本范围由战略层决定。这些战略不仅包括了经营者想从网站得到什么，还包括了用户想从网站得到什么。知道企业与用户双方对网站的期许和目标，有助于用户体验各方面战略的制定。

• 范围层--功能规格和内容说明
  带着“我们想要什么“，”我们的用户想要什么”的明确认识，我们就能弄清楚如何去满意所有这些战略目标，当你把用户需求和网站目标转变为网站应该提供的给用户什么样的内容和功能时，战略就变成了范围。

• 结构层--交互设计与信想架构
  在收集好用户需求并将其排列好优先级之后，我们对于最终用户会包括什么样的特性已经有了清楚的图像。然而，这些需求并没有说明如何将分散的片段组成一个整体。这就是范围层的上一层：为产品创造一个概念结构。

• 框架层--界面设计和导航设计
  进一步提供信息架构内容，确定详细的界面外观、导航和信息设计，例如按钮、表格、照片和文本区域的位置，框架层用于优化设计布局，以达到这些元素的最大效果和效率。

• 表现层--视觉设计
  在这个五层的顶端，把注意力转移到用户会注意的到的那些方面。视觉设计这里，内容、功能和美学设计汇集在一起产生一个最终的视觉设计。这将满意其他层次的所有需求。

设计技巧

（待续）