超實用!UI設計師有哪些應該會寫的文件?(附最新書單)

@Akane_Lee ：身為 UI 設計師，工作內容不是只有做 PSD 和切圖，只會這兩樣的叫美工。基本一位合格的UI設計師必須要具備撰寫文件的能力，文件最低限度需包含：企劃書、規格書、Wireframe、Mockup、切圖、標示文件、UI Kit、UI Pattern、Guideline >>>

小學時的作文「我的志願」想當作家，當作家好啊不用出門就有錢賺，看這思想多單純多懶惰…結果現在變成設計師，只能把寫作當興趣了。

設計師在工作流程上會需要產出各種文件，請當成存證信函在寫，反正文件基本功能就是存證和溝通用。不管什麼文件都有幾個共通的要點：

我不是在上位的主管階，自始至今我都是第一線基層人員，就只分享第一線要做哪些事、具備什麼素養、懂哪些事。其他的等我爬上去經歷過了再說。

企劃書

這是 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 框架，才不會搞一堆能看不能用的「個人作品」。

切圖

切圖這工作可能在 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

【優設投稿：[e-mail]】