UI 设计需要写的文件

144
作者 _阿布_
2016.08.09 16:13* 字数 957

根据 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 的社交功能一直没看懂)。


Login process

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

设计