UI 设计需要写的文件

根据 Akane Lee 的文章，整理总结了我自己在工作中需要写的所有文件，以及使用那些工具去完成。

原则条件：尽可能详细的编写这些文件，能够使对接人员可以很轻松看懂的状况。一定要做好版本控制！

1. 企划书

工具：Evernote
当前公司几乎没有企划书，只有设计需求。所以根据设计需求整理出具体需要企划内容，提炼需求可以加深对项目的了解。一般接到项目会习惯性在项目开始的时候建一个项目笔记，项目的资料收集和整理都在其中完成。

What 什麼 –企划的目的、内容。
Why 為什麼 –企划缘由、前景。
How 如何 –企划的方法和运转实施。
How much 多少 –企划预算。
When 何时 –企划的时间。
Who 谁 –企划相关人员。
Where 何处 –企划实施场所。
Effect 效果 –预测企划结果、效果。

2. 规格书

工具：Processon
根据设计需求文档，整理出 Flow chart（流程图）和 UI Flow （界面间的操作流程）。使用思维导图/流程图工具整理，导出为 jpg 图片。
使用了很多思维导图和流程图工具，有受限于 mac 系统（MindNode），也有美观度不够（Xmind）。目前可能只有 processon 能够解决两者需求，且不受限与系统。虽然到目前导出的图片有问题，但还算可以接受（processon 的社交功能一直没看懂）。

3. Wireframe

工具：纸、笔、Axure
Axure 可以清晰展示产品结构，快速完成产品的原型以及简单的交互。后期有修改一定要回到 Wireframe 中。
先在纸上绘制简易的 Wireframe ，讨论完成后，绘制出精细的纸质 Wireframe 。最后在电脑上使用 Axure 完成电子稿，配上详细的说明文字，注明该页面上的各种操作、元件变化，考虑越周到越好。

IMG_1694.JPG

uistencils 上提供了很全的 UI 纸上原型模板下载，用的时候打印出来即可，方便快捷。

4. Mockup

工具：Photoshop
wireframe 完成后，严格按照其内容绘制 Mockup。

Mockup

5. Prototype

使用工具：Demoo/Flinto/Hype
简单的页面跳转使用 demoo 或者 Flinto 就够了，特殊的动态效果使用 Hype 制作。

effect

图中为动态效果展示，并非 Prototype，Prototype 必须要可操作。

6. 切图与标注

工具：Zeplin
自从 zeplin 出 window 版本后，切图和标识都轻松很多，视觉稿绘制完成后，直接生成到 zeplin 中，发送给 RD 即可，无需多余文件。元素信息在 zeplin 中都可以看到各元素尺寸、位置、色码、透明度、字型、字级、档名等。不同状态的情况备注说明！

Zeplin

7. UI Kit

把设计中的所有元件集中在一张图片上，这种文件是 Mockup 的一部分。在设计过程中一步步完善，作为单独的文件方便使用。

UI Kit

8. Guideline

工具：Photoshop
参考谷歌的设计规范：Material Design
Mockup 完成后，拆分所有元素到最小单位，分成对应类别，配以大量文字辅助，说明元素的意义和运用规则。

参考文章：UI设计师应该要会写的文件

个人笔记，仅供参考，欢迎讨论。
END