身为 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 效果 –预测企划结果、效果。
可以参考5W2H1E – MBA智库百科 和 一分钟学会企划书撰写！ 这两篇文章，写企划没想像中那麽难，UI设计师要写的也不过把 5W 2H 1E 条列出来的程度就好。
规格书
规格书分成 2 种， Functional Spec 功能规格书、Technical Spec 技术规格书。技术规格书是 RD 在写的，和设计师关系不大，功能规格书才是设计师要注意的目标。
规格书定义出这个案子有哪些要做的事、需包含哪些功能，比如购物车、留言版、会员系统等等，和企划书是完全不同的文件。
很久以前写的旧文 初学者的 Functional Map 可以当成功能规格书的极简化版，UI 设计师不需要到会写完整又详细的功能规格书，但一定要具备整理这份 Map 的能力。
规格书包含 Flow chart 和 UI Flow。Flow chart 为流程图（包含使用者操作情境或功能 Flow）； UI Flow 则特指介面间的操作流程，两者是不同的图表。可参考 流程图 – MBA智库百科 、初学者的 UI Flow
延伸阅读 工作清单：Functional Map、 工作清单：UI Flow
Wireframe
正常的软体开发流程一定包含企划书、规格书，如果不这麽做的通常…咳…总之，到了 Wireframe 阶段应该就是 UI 设计师熟悉的工作了。
Wireframe 一定要写说明文字！
Wireframe 一定要写说明文字！
Wireframe 一定要写说明文字！
很重要所以要说 3 次。（这梗早被玩烂了）
有点像 User Story 但不全是，说明文字要注明该页面上的各种操作、元件变化，参考 各种状态与突发状况，能考虑越週到越好，事前预防总比事后发现有漏要硬塞来的轻鬆。
Wireframe 可以参考 什麽是 Wireframe ?、 为什麽要画3次 Wireframe？ 这两篇文。
延伸阅读 工作清单：Wireframe
Mockup
就是开 Photoshop 或 Sketch 之类绘图软体製作精稿，设计师最熟悉的工作阶段，也最婊 RD 的一步。不要设计得超炫结果实作人员做不出来还怪 RD 学艺不精，看他们砍不砍死你。
和设计师听到「就不能用比 #FFF 更白的颜色吗」同感，对实作技术外行就不要充内行。Mockup 虽说是设计师最熟的文件、却也是问题最多的文件，需熟知各平台规范、Web 框架，才不会搞一堆能看不能用的「个人作品」。
延伸阅读 工作清单：Mockup
切图
切图这工作可能在 F2E 或设计师身上，F2E 的工作刚好踩在各种线上比较万能一些，若是 App 专案会由 UI 切图。曾遇过设计师很高兴的说，切图被他们家 F2E 拿回去做，不再是他负责了…是图切得有多不敷使用导致被 F2E 放弃？
各家平台不同，切图的方式也大不相同。UI 设计师需熟知各家切图方式并用可被轻鬆理解的方式切出合用的图档。
延伸阅读 工作清单：切图
标示文件
当 Mockup 製作完成进入切图阶段后，需要製作一份写明各元素尺寸、位置、色码、透明度、字型、字级、档名等资讯的文件交给 RD，RD 才会知道「数值」多少。别指望他们在没有任何说明的情况下就知道这图片怎麽用、放哪裡、间隔是几 px，有这等神通力谁想当 RD。
这是件非常烦琐又很闷的工作！幸好市面上很多工具可以加快製作过程。试过很多款，我最推荐 标示文件神器：specKing，几乎全自动了，按一按钮就全部算好数值跑完，省事省力。
延伸阅读 哪天想到再补上
UI Kit、UI Pattern、Guideline
这三样是完全不同的文件，常常被混在一起讲，更甚者会连标示文件一起搅进来大乱斗。
UI Kit
Dribbble 上很多设计师会把自己设计的某产品所有元件全部集中在一张图上，这种文件称为「UI Kit」。成套的 UI 元件库概念，只有图、不太会有文字说明，常见于原始档，方便使用。
UI Pattern
刚好夹在 UI Kit 和 Guideline 中间。像 UI Kit 一样用功能或用途分类、并集结元件，但又像 Guideline 说明各个元件要怎麽用（实作上要怎麽运用、不是概念说明）。
UI Pattern 分两种，给实作人员看的就像 Bootstrap 那样；给 UI 设计师看的 Pattern 会像 行动介面设计模式图鑑 这书。
Guideline
拆分某产品系列所会用上的所有元素至最小单位，并分阶层类别，需要大量文字辅助说明该元素的意义和运用规则。需透过审核机制才可变动其内容。公司所有成员都应可透过简单的方式取得此文件，同等于公司的企业识别系统。
延伸阅读 设计规范要点