浅谈UI设计师有哪些应该会写的文件

【 tulaoshi.com - 平面设计 】

身为 UI 设计师，工作内容不是只有做 PSD 和切图，只会这两样的叫美工。基本一位合格的UI设计师必须要具备撰写文件的能力，文件最低限度需包含：企划书、规格书、Wireframe、Mockup、切图、标示文件、UI Kit、UI Pattern、Guideline。

小学时的作文「我的志愿」想当作家，当作家好啊不用出门就有钱赚，看这思想多单纯多懒惰结果现在变成设计师，只能把写作当兴趣了。

设计师在工作流程上会需要产出各种文件，请当成存证信函在写，反正文件基本功能就是存证和沟通用。不管什么文件都有几个共通的要点：

不需口头说明就能看懂。

有多详细写多细，避免使用「等等」(etc)这类词汇。

版本控管。

我不是在上位的主管阶，自始至今我都是第一线基层人员，就只分享第一线要做哪些事、具备什么素养、懂哪些事。其他的等我爬上去经历过了再说。

企划书

这是 Planner 的工作，但 UI 设计师一定要具备 5W 2H 1E 的基本能力。

What 什么 企划的目的、内容。

Who 谁 企划相关人员。

Where 何处 企划实施场所。

When 何时 企划的时间。

Why 为什么 企划缘由、前景。

How 如何 企划的方法和运转实施。

How much 多少 企划预算。

Effect 效果 预测企划结果、效果。

规格书

规格书分成 2 种， Functional Spec 功能规格书、Technical Spec 技术规格书。技术规格书是 RD 在写的，和设计师关系不大，功能规格书才是设计师要注意的目标。

规格书定义出这个案子有哪些要做的事、需包含哪些功能，比如购物车、留言版、会员系统等等，和企划书是完全不同的文件。

很久以前写的旧文初学者的 Functional Map可以当成功能规格书的极简化版，UI 设计师不需要到会写完整又详细的功能规格书，但一定要具备整理这份 Map 的能力。

规格书包含 Flow chart 和 UI Flow。Flow chart 为流程图(包含用户操作情境或功能 Flow); UI Flow 则特指接口间的操作流程，两者是不同的图表。

Wireframe

正常的软件开发流程一定包含企划书、规格书，如果不这么做的通常咳总之，到了 Wireframe 阶段应该就是 UI 设计师熟悉的工作了。

Wireframe 一定要写说明文字!

Wireframe 一定要写说明文字!

Wireframe 一定要写说明文字!

很重要所以要说 3 次。(这梗早被玩烂了)

有点像 User Story 但不全是，说明文字要注明该页面上的各种操作、组件变化，参考各种状态与突发状况，能考虑越周到越好，事前预防总比事后发现有漏要硬塞来的轻松。

Wireframe 可以参考什么是 Wireframe ?、为什么要画3次 Wireframe?这两篇文。

延伸阅读工作清单：Wireframe

Mockup

就是开 Photoshop 或 Sketch 之类绘图软件制作精稿，设计师最熟悉的会话，也最婊 RD 的一步。不要设计得超炫结果实作人员做不出来还怪 RD 学艺不精，看他们砍不砍死你。

和设计师听到「就不能用比 #FFF 更白的颜色吗」同感，对实作技术外行就不要充内行。Mockup 虽说是设计师最熟的文件、却也是问题最多的文件，需熟知各平台规范、Web 框架，才不会搞一堆能看不能用的「个人作品」。