身为 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

拆分某产品系列所会用上的所有元素至最小单位，并分阶层类别，需要大量文字辅助说明该元素的意义和运用规则。需透过审核机制才可变动其内容。公司所有成员都应可透过简单的方式取得此文件，同等于公司的企业识别系统。

延伸阅读：设计规范要点

附最新书单推荐：

来说一下第2排的4 本书的心得：设计的方法、设计的心理学、设计思考改造世界、字型散步。前三本算是理论类，阅读顺序上我会建议设计的方法先看，这本比较实技一点；设计的心 理学能补充设计的方法一书中没提到的部份并深入介绍；设计思考改造世界就是给中阶或资深的设计师进修用的了。

设计的方法

光是第下列 11 条误区就很有一读的价值，玻璃心的设计师就不要买这本了，会被打脸打得很惨。

• 误区一：设计是艺术的兄弟姐妹
• 误区二：创意是存在的
• 误区三：与众不同即为好
• 误区四：必须寻找灵感
• 误区五：才华非常重要
• 误区六：设计是一种生活方式
• 误区七：自我表达很重要
• 误区八：设计师比客户聪慧
• 误区九：设计师是受众
• 误区十：奖项的价值
• 误区十一：创意人士不应被规则束缚

书中提到工作上会遇到的困难和解决之道，如果被我推坑去看 Burn Your Portfolio 过的，可以映证两位作者的相似看法。

初起步的设计师很推入手这本，先建立起正确的态度和观念，打下基础才不容易被带歪。对设计的理解、什么是「设计」、要怎么做设计、如何活用各种设计方法、可能遇到什么样的困难、该如何解决等等。

设计的心理学

重量级经典巨作，Norman 的书被许多顶尖的设计学院指定为必读书籍。我买的是 2014 出的改版，据作者说法：「我修改了些什么？也不太多，只是将整本书全改了一遍。」且他特地挑了不会退流行的例子，是本设计师必买且仔细阅读的教科书。

他用了非常多的实例叙述人类是一种矛盾的生物、而且口嫌体正直。可以用什么方式找到使用者真正的需求而不是被他们的言语骗了。

对于不知道设计师脑袋该装些什么思维逻辑、要用什么角度看世界的新手而言，读过这本会有种「付出代价偷看一眼真理之门」的感觉。

虽然这本书对实作技术没什么太大帮助，不会跟你说这边要怎么做、那边怎么改，就是本「练品味」的书。每年最好固定重看这本一次，得到的感触会大不相同。

设计思考改造世界

经典的重量级巨作，极不推荐新手看！尤其看完就开始喊口号的家伙…脑袋清楚知道自己在干嘛、业界在干嘛、公司在干嘛的中阶设计师来看这本比较不会祸害同事。

一样，这是本每年都要重看一次的书，随着和「设计无表面上直接关连」领域的经验和知识增加，对书中提到的内容体认也会完全不同。

这本书讲得非常美好世界大同，现实业界完全不是这么回事，搞不清楚状况的家伙看这本会盲目跟从书中的作法，回头把项目团队搞得鸡飞狗跳。所以非常不推等级没到的人来看这本，别说拿这本垫基础，没被自己脑补带歪掉就万幸了。

请对项目流程、项目管理、软件开发、团队合作、公司营运、业界动态、信息发展等都有了粗浅的认知再来研读。（不要问我为什么这么偏激，身边就有活生生的例子。）

字型散步

这本书里有很多「敏感」照片，所以中国大概不会出简中版。

许多设计师对「中文字体」的认知其实很不足，学校不会教得那么细，做网页和 App 的碍于种种因素又只会用到内建字，就不太会把点数投资到字体字型上。（对、我在说我。）

字型散步非常适合当成设计师的闲书来看，虽然书中专业知识不少，但文笔和图多的情况下阅读起来很轻松不吃力，适合配下午茶晒个太阳慢慢看。

看完对中文字体的认识有更深的理解，同时会更珍惜台湾这片土地和文化。字体演进不是神说有光就有光啊！

地址：字型散步：日常生活的中文字型学

原文地址：blog.akanelee.me

作者：@Akane_Lee