身為 UI 設計師，工作內容不是只有做 PSD 和切圖，只會這兩樣的叫美工?；疽晃缓细竦腢I設計師必須要具備撰寫文件的能力，文件最低限度需包含：企劃書、規(guī)格書、Wireframe、 Mockup、切圖、標示文件、UI Kit、UI Pattern、Guideline。

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

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

• 不需口頭說明就能看懂。
• 有多詳細寫多細，避免使用「等等」（etc）這類詞匯。
• 版本控管。

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

企劃書

這是 Planner 的工作，但 UI 設計師一定要具備 5W 2H 1E 的基本能力。

• What ?什么—— 企劃的目的、內容。
• Who ?誰—— 企劃相關人員。
• Where ?何處 —— 企劃實施場所。
• When ?何時 —— 企劃的時間。
• Why ?為什么 —— 企劃緣由、前景。
• How ?如何 —— 企劃的方法和運轉實施。
• How much ?多少 —— 企劃預算。
• Effect ?效果 —— 預測企劃結果、效果。

可以參考5W2H1E – MBA智庫百科?和?一分鐘學會企劃書撰寫！這兩篇文章，寫企劃沒想象中那么難，UI設計師要寫的也不過把 5W 2H 1E 條列出來的程度就好。

規(guī)格書

規(guī)格書分成 2 種， Functional Spec 功能規(guī)格書、Technical Spec 技術規(guī)格書。技術規(guī)格書是 RD 在寫的，和設計師關系不大，功能規(guī)格書才是設計師要注意的目標。

規(guī)格書定義出這個案子有哪些要做的事、需包含哪些功能，比如購物車、留言版、會員系統(tǒng)等等，和企劃書是完全不同的文件。

很久以前寫的舊文?初學者的 Functional Map?可以當成功能規(guī)格書的極簡化版，UI 設計師不需要到會寫完整又詳細的功能規(guī)格書，但一定要具備整理這份 Map 的能力。

規(guī)格書包含 Flow chart 和 UI Flow。Flow chart 為流程圖（包含用戶操作情境或功能 Flow）； UI Flow 則特指接口間的操作流程，兩者是不同的圖表?？蓞⒖?流程圖 – MBA智庫百科?、初學者的 UI Flow

延伸閱讀?工作清單：Functional Map、?工作清單：UI Flow

Wireframe

正常的軟件開發(fā)流程一定包含企劃書、規(guī)格書，如果不這么做的通?！取傊搅?Wireframe 階段應該就是 UI 設計師熟悉的工作了。

Wireframe 一定要寫說明文字！

Wireframe 一定要寫說明文字！

Wireframe 一定要寫說明文字！

很重要所以要說 3 次。（這梗早被玩爛了）

有點像 User Story 但不全是，說明文字要注明該頁面上的各種操作、組件變化，參考?各種狀態(tài)與突發(fā)狀況，能考慮越周到越好，事前預防總比事后發(fā)現有漏要硬塞來的輕松。

Wireframe 可以參考?什么是 Wireframe ?、?為什么要畫3次 Wireframe？?這兩篇文。

延伸閱讀?工作清單：Wireframe

Mockup

就是開 Photoshop 或 Sketch 之類繪圖軟件制作精稿，設計師最熟悉的會話，也最婊 RD 的一步。不要設計得超炫結果實作人員做不出來還怪 RD 學藝不精，看他們砍不砍死你。

和設計師聽到「就不能用比 #FFF 更白的顏色嗎」同感，對實作技術外行就不要充內行。Mockup 雖說是設計師最熟的文件、卻也是問題最多的文件，需熟知各平臺規(guī)范、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

拆分某產品系列所會用上的所有元素至最小單位，并分階層類別，需要大量文字輔助說明該元素的意義和運用規(guī)則。需透過審核機制才可變動其內容。公司所有成員都應可透過簡單的方式取得此文件，同等于公司的企業(yè)識別系統(tǒng)。

延伸閱讀：設計規(guī)范要點

附最新書單推薦：

來說一下第2排的4 本書的心得：設計的方法、設計的心理學、設計思考改造世界、字型散步。前三本算是理論類，閱讀順序上我會建議設計的方法先看，這本比較實技一點；設計的心 理學能補充設計的方法一書中沒提到的部份并深入介紹；設計思考改造世界就是給中階或資深的設計師進修用的了。

設計的方法

光是第下列 11 條誤區(qū)就很有一讀的價值，玻璃心的設計師就不要買這本了，會被打臉打得很慘。

• 誤區(qū)一：設計是藝術的兄弟姐妹
• 誤區(qū)二：創(chuàng)意是存在的
• 誤區(qū)三：與眾不同即為好
• 誤區(qū)四：必須尋找靈感
• 誤區(qū)五：才華非常重要
• 誤區(qū)六：設計是一種生活方式
• 誤區(qū)七：自我表達很重要
• 誤區(qū)八：設計師比客戶聰慧
• 誤區(qū)九：設計師是受眾
• 誤區(qū)十：獎項的價值
• 誤區(qū)十一：創(chuàng)意人士不應被規(guī)則束縛

書中提到工作上會遇到的困難和解決之道，如果被我推坑去看?Burn Your Portfolio?過的，可以映證兩位作者的相似看法。

初起步的設計師很推入手這本，先建立起正確的態(tài)度和觀念，打下基礎才不容易被帶歪。對設計的理解、什么是「設計」、要怎么做設計、如何活用各種設計方法、可能遇到什么樣的困難、該如何解決等等。

設計的心理學

重量級經典巨作，Norman 的書被許多頂尖的設計學院指定為必讀書籍。我買的是 2014 出的改版，據作者說法：「我修改了些什么？也不太多，只是將整本書全改了一遍?！骨宜氐靥袅瞬粫肆餍械睦?，是本設計師必買且仔細閱讀的教科書。

他用了非常多的實例敘述人類是一種矛盾的生物、而且口嫌體正直?？梢杂檬裁捶绞秸业绞褂谜哒嬲男枨蠖皇潜凰麄兊难哉Z騙了。

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

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

設計思考改造世界

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

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

這本書講得非常美好世界大同，現實業(yè)界完全不是這么回事，搞不清楚狀況的家伙看這本會盲目跟從書中的作法，回頭把項目團隊搞得雞飛狗跳。所以非常不推等級沒到的人來看這本，別說拿這本墊基礎，沒被自己腦補帶歪掉就萬幸了。

請對項目流程、項目管理、軟件開發(fā)、團隊合作、公司營運、業(yè)界動態(tài)、信息發(fā)展等都有了粗淺的認知再來研讀。（不要問我為什么這么偏激，身邊就有活生生的例子。）

字型散步

這本書里有很多「敏感」照片，所以中國大概不會出簡中版。

許多設計師對「中文字體」的認知其實很不足，學校不會教得那么細，做網頁和 App 的礙于種種因素又只會用到內建字，就不太會把點數投資到字體字型上。（對、我在說我。）

字型散步非常適合當成設計師的閑書來看，雖然書中專業(yè)知識不少，但文筆和圖多的情況下閱讀起來很輕松不吃力，適合配下午茶曬個太陽慢慢看。

看完對中文字體的認識有更深的理解，同時會更珍惜臺灣這片土地和文化。字體演進不是神說有光就有光??！

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

原文地址：blog.akanelee.me

作者：@Akane_Lee