UI設計師有哪些應該會寫的文件？

 　　身為 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 出的改版，據作者說法：「我修改了些什麼?也不太多，只是將整本書全改了一遍。」且他特地挑了不會退流行的例子，是本設計師必買且仔細閱讀的教科書。

　　他用了非常多的實例敘述人類是一種矛盾的生物、而且口嫌體正直。可以用什麼方式找到使用者真正的需求而不是被他們的言語騙了。

　　對於不知道設計師腦袋該裝些什麼思維邏輯、要用什麼角度看世界的新手而言，讀過這本會有種「付出代價偷看一眼真理之門」的感覺。

　　雖然這本書對實作技術沒什麼太大幫助，不會跟你說這邊要怎麼做、那邊怎麼改，就是本「練品味」的書。每年最好固定重看這本一次，得到的感觸會大不相同。

　　設計思考改造世界

　　經典的重量級巨作，極不推薦新手看!尤其看完就開始喊口號的家伙…腦袋清楚知道自己在干嘛、業界在干嘛、公司在干嘛的中階設計師來看這本比較不會禍害同事。

　　一樣，這是本每年都要重看一次的書，隨著和「設計無表面上直接關連」領域的經驗和知識增加，對書中提到的內容體認也會完全不同。

　　這本書講得非常美好世界大同，現實業界完全不是這麼回事，搞不清楚狀況的家伙看這本會盲目跟從書中的作法，回頭把項目團隊搞得