上一篇把咖啡濾紙花完成後，這一篇要來教各位怎麼染色囉！（在台灣送白花好像不太妙，染個色比較保險。）

紙花染色我是參考這一篇 Doodlecraft: Coffee Filter Flower Tutorial!，雖然作法不太一樣。

事前準備

之前做好的咖啡濾紙花
顏料（水彩之類，我用墨水）。
大一點的碟子，裝點水。（要確保花整支泡得下去）
水彩筆
衛生紙或抹布。
曬衣夾。

步驟

1.

手邊沒有水彩，我用鋼筆墨水替代。還好只用到幾滴...

這次我用了色彩雫的月夜、邊緣則是用剩下的月夜＋紅葉調的紫紅色。

2.

如果你想做淺色淡雅的花，下手不要太重啊，顏料加一點點就好。

3.

很豪邁地整支泡下去啦...千萬不要，水浸到花瓣 2/3 的位置就要拿起來了，咖啡濾紙吸水性很強的。

記得，花要頭下腳上拿，讓水從花瓣滴下來，不要讓水流到桿子上，會解體的。垂直甩一甩，把多餘水份甩出來。

4.

拿出你的曬衣夾，頭下腳上把花夾起來。

5.

很多花都不是單一顏色，在花瓣邊緣用不同顏色點綴一下會更特別。

我在原本的碟子裡加了幾滴紅葉調成紫紅色。

6.

把剛剛泡過淺色顏料的花拿過來，用水彩筆在邊緣點幾下。

因為咖啡濾紙吸了水，再加上紫色會有渲染的效果，等乾了之後漸層會變得很自然。

7.

一樣頭下腳上夾起來晾乾它！

可以看到有幾朵花我甚至只泡到花瓣一半的位置，底部仍然保留白色。咖啡濾紙很吸水的，打算讓它自己染漸層色。

完成品

花朵完全乾燥後顏色會變淺。

放陽台一個晚上就乾了，因為我趁老公不在家偷偷趕工，所以丟去浴室用暖風機吹了 1 小時接近半乾，再用吹風機硬是在 2 小時內全數乾燥完畢。

趕時間的話可以拿出吹風機，記得要從桿子往花瓣的方向吹啊！不要直接拿吹風機吹花，會被吹炸給你看。

.
.
.

我的情人節禮物就是這幾支花了嗎？當然不是，花只是填空用的。

宅宅工程師才不會因為收到幾支花就很感動，主體才是重點啊！花是陪襯品。

想知道禮物的主體是什麼嗎？往這邊走喔～（還在寫）
紙花製作請往這邊走～

看到這張圖大概就知道我幹了什麼事吧？

對，因為老公是星戰迷，所以我做了一隊白兵＋ Darth Vader 給他。

本來是想要送 Star Wars Bouquet - Darth Vader | ThinkGeek這束的，可是從美國寄來台灣會卡到春節，來不及了，只好自己動手。

紙模下載

感謝 Star Wars Series — CubefoldPopfold讓人下載免費紙模，這還是我第一次接觸紙模啊！幸好這兩款都很好做。

這款紙模 Darth Vader 的頭盔可以拿下來喔！

白兵一臉蠢萌蠢萌...

紙模列印

之前完全沒接觸過紙模，爬文得知可以去 7-11 列印，選 A4 彩色特殊用紙，印出來就很適合拿來做紙模，但不是每一間 7-11 都有，有些 7-11 的特殊用紙匣放的是普通影印紙。

A4 彩色特殊用紙一張 $15元，也就是說白兵一隻 30 元、Darth Vader 一隻 45 元。

可是我做了 5 隻白兵啊！總共花了 195 元。

印出來的成果很不錯，紙的厚薄也很剛好。

建議用筆刀會比美工刀省力。

網路爬文建議用白膠，我偷懶用了雄獅口紅膠，黏得還算牢，但心理不踏實。第 2 隻之後都改用相片膠...乾得很快也很牢，但相片膠會牽絲，不小心就會在紙模身上粘點黑渣渣...算了，白兵總是要點戰鬥的痕跡，還好不明顯還很自然。

最後...

Darth Vader 是重頭戲啊！所以我留到最後一隻才動工，先把 5 隻白兵完成。

當做完最後一隻的時候，腦力專注力已耗完，不知道當時在想什麼，偷偷玩起白兵疊疊樂...

將紙花染成藍色是為了襯托白兵。

白花加上白兵，白兵會被花吃掉。

.
.
.

最後的包裝我弄得有點慘，已經半夜 1 點了太疲倦動不了腦袋。

.
.
.

我把淺藍色和深藍色的包裝紙順序弄錯了，而且也不是照預期的包裝...

黑武士被深藍色包裝紙吃掉了＝＝

算了，起碼還有模有樣，當初設計就是讓老公收下 Star Wars 情人節花束，拍個照，然後把花束拆了，紙模拿去當居家擺飾。

.
.
.

目前暫時讓它們窩在水波爐上面。

我有注意到這幾天老公出門上班前會去調一下紙模角度、摸摸 Darth Vader 的頭再出門。看來他真的很喜歡今年的情人節禮物。

紙花製作請往這邊走～
想知道怎麼把花染色嗎？教學請往這邊走～

補充：UI/UX 設計師在工作上不會用到 Rails，這是個人學習。（寫程式也不是我的興趣，只是覺得先學起來放...而且學得很痛苦就是了。）非常不適合完全外行的初學者來上這門課，除了打一堆指令碼外，不主動纏著助教問是不會懂「為什麼」，外加初學者嫩到就想問問題都不知道從何問起，只能從背指令開始。

UI/UX 設計師為什麼要來學寫程式，自己要先想清楚啊！

去年年底我就報了這個班：Rails 商務網站 x 即戰力 - 2016 春季班（二班）（三月） by Xdite

聽說 5 小時就賣光了，下一班很多 UI/UX 設計師報名。<<< 這不是重點

重點是，如果你不做課前練習，設計師 100% 掉隊跟不上學習進度！

在做前導作業的時候，光是 Copy Paste 看都看不懂的一串英文就會做到很恐慌。是都跑得動，但也都不懂「為什麼會動」。想說死定了實際上課肯定掉隊。

上課目標就從「做一個會動的網站」大幅降低成「只要搞懂工程師會怎麼做」就好。

嗯...結果好像沒我自己預想得這麼悽慘。

大概是我會寫 RWD、有用過 Fire.app，Susy、Sass 都沾過點水，也被老公高壓灌過 Git 的操作，還被殭屍逼著練英打速度。實際課堂上學習似乎比同學輕鬆一些些。

如果你是連 HTML 和 CSS 都不會的設計師，因為我的關係所以跌坑來學 Rails 的話，恭喜你，這是痛苦的開始。

前導作業一定要寫，每週二與四都有 Rails 新手帶練與指導，請巴住助教不放。

學費很貴，不要浪費，有問題就問！

學習方式

初學者，寫 Rails 的基本常識都不夠，不要想著先搞懂為什麼再來練。和念英文一樣，單字量不足的情況下想寫什麼英文文章？

用肌肉記憶啦！

老公常跟我念這句：「憑妳的知識量，就算我解釋了妳也聽不懂。」

還在 2x1=2、2x2=4 學數學的人，要解釋微積分給他聽，要從哪裡開始講？得花多少時間？

要在短時間內上手某項技術，從最快的情況是直接實作，犯了幾次錯、有了點經驗，心裡有幾個想問「為什麼」的問題，再回過頭找解答補完。

所以先不要問為什麼要這樣做，先照作個會動的東西出來，有了成就感，就有動力繼續下一步，學習效率高很多。

做久就知道為什麼了。

我自己在學 UI/UX 的時候都抱持著這樣的想法：

「我寫得出像 XXX 大神那樣的文章嗎？當然寫不出來啊，那為什麼不照他說的做？」
「幹、XXX 大神說是怎樣就怎樣，我是比他強嗎？沒有啊，那為什麼不聽他的話去做？」
「實際上寫程式的是工程師啊，我自己遇到問題不確定、當然是他說了算，不然聽我這個大外行瞎猜嗎？」

覺得大神好笨怎麼沒想到這點、自以為有小聰明想偷懶抄捷徑，之後都要還債...（過來人經驗）

教寫程式的課這麼多，為什麼報這班？

1.我認識 Xdite。
2.我跟老公吵架。

老公也是寫 Rails 的，請他教寫程式...結果我太新手太犯蠢，被罵到淚奔，說這輩子學不會，氣到我看到開課訊息就掏錢報名下去了。

大學剛畢業的時候，我報過一次坊間教 JS 的電腦補習班，對那位教 JS 的老師印象之糟糕，連照書教都講不好，更別提什麼問問題有解答，老師回的吱吱唔唔。結果只去了一次就大怒不去了。（多年後，該補習班還打電話來問我要不要來網頁設計班當學員，害我在電話裡直接酸那位客服小姐。）

基於上述 2 次印象不佳的經驗，對於 Rails 這堂課，我可以跟你肯定整套課程花了很多心思在規劃，但「學習起來不會太舒服」。短時間內學習一門完全不懂的技術到堪用的程度，想也知道不是什麼太舒服的過程。（就和打卡介苗一樣，痛死了。）

缺點：作業量非常很大、教學進度很快、回家不練習等於浪費錢、完全不知道為什麼會動就把東西做出來了。
優點：有人盯著你去學習、不懂隨時可以抓人問、有人設計好循序漸進的一套課程照做就是了、上完課拿得出實際會動的作品。

我自己給這門 Rails 課的評價是：短時間內學得到大量技術，但過程太痛苦了＝＝"
會動是會動，但不會懂為什麼，熟悉一堆指令碼後就要靠個人額外學習了。

便當

聽說「便當」惹出不少爭議，害我既期待又怕受傷害。

便當看起來普通，但比預期的好吃。附上店家資料上旺廣鳳粵菜燒臘。

有機會要帶老公去吃。

收到太多這類的私訊或 Mail ，問 A 補習班好不好、B 課好不好、C 班好不好的，一併在此回答，自己判斷啊。

因為我自己有開 UI 入門班，這文寫起來很業配，怎麼看都像是在貶低別人、自抬身價。

明知道我有自己的班還扔其他單位的開課訊息問意見的人真不知道在想什麼，想從我口中得到什麼答案？

判斷條件

初學者想當 UI/UX 設計師，想報名課程加快學習腳步沒什麼不好，但你想報的課程，是 UI 課，還是「視覺設計課」？

教 UI 的課有沒有教互動？

課程名稱寫著「UI 班」結果完全沒提到互動這部份，或者對方跟你說「UI 和 UX 一樣」、「UI 和 UX 差不多」的要考慮一下。這單位不懂什麼是 UI、也不知道什麼是 UX。

UI/UX 設計師要懂的「互動」不是 jQuery 之類的程式碼，而是講「使用者的行為」，輸入、輸出，操作流程、頁面狀態等等。說教 UI 結果拿網頁技術充當「互動」、不提使用者的，要想清楚再報名啊。

前端技術

UI 和前端業界大多拆成 2 個職務，UI 會的前端技術精不到哪去、也不需要太精，甚至完全不會也沒關係。反之 F2E 寫程式是另一個世界。

HTML、CSS、RWD 會寫有加分，但不會寫也不會怎樣。JS、jQuery 讓專業的 F2E 們去處理。

教 APP、Web 的 UI 班，課程內容包含 Flash 的不要去

先想想現在業界還有沒有在用 Flash，以及這項技術未來發展趨勢如何吧。

Flash？看 iPhone、iPad 支不支援啊～

Adobe 自己都放棄 Flash了...

教軟體操作不等於教你 UI

UI 包含視覺和互動 2 個部份，軟體操作只是讓你會使用「工具」而已。腦袋裡的想法才是重點，工具僅僅幫助你把想法表達出來。各種軟體都有優缺點，並沒有優劣，所以在諸多考量下自己做取捨吧。

教 Illustrator 的軟體操作課

雖然這套軟體主打平面印刷用，還是很多人拿它來設計介面，各有擁護者和優缺點，挑你有興趣的學吧。（我自己是 Photoshop 派，業界主流畫 UI 用 Photoshop。）

教 Sketch 的軟體操作課

這個看個人取捨，不是什麼好或不好的條件。但我建議想從 0 開始學起的初學者，不要（因為比較潮）一出手就碰 Sketch。

Sketch 是 UI 設計師常用的繪圖軟體之一沒錯，但 Photoshop 才是世界通用，初學者把時間投資在 Photoshop 上會比投在 Sketch 上收獲更多。而且 Sketch 只能活在 MAC 平台，不支援 Windows。

UX 班要教「研究方法」

你可以把研究方法當成「做實驗」，沒教你怎麼做實驗的 UX 班不是 UX 班。

真正的 UX 設計師，要學一大堆研究方法。可以參考設計的方法：100個分析難題，跟成功商品取經，讓設計更棒、更好的有效方法一書（書名很爛，就算照這些方法跑也不一定會成功好嗎）。BTW，想走 UX 這條路，這本書必買。

從目錄就可以看到一堆研究方法的名字，像 A∕B測試、腦力激盪組織圖、卡片分類法、眼球追蹤、意象看板、狩野分析、心智圖...等。

這些才叫「研究方法」，怎麼樣研究、分析使用者或產品。如果標榜 UX 班卻沒教你「研究方法」，都在講介面設計，那還是改名字叫 UI 設計班吧。

雖然我覺得市面上絕大多數的 UI/UX 課程其實都是「視覺設計師養成班」。

學技術前先想清楚自己未來的方向

前端歸前端，網頁程式技術學一學出來你會變成 F2E 不是 UI 設計師。
幾套軟體操作學一學、不知道什麼是互動，你會變成視覺設計師或平面設計師，不會變成 UI 設計師。
Flash 學一學...會跑去遊戲業或廣告業！資訊業很少用 Flash了。

延伸閱讀：如何挑選研討會或課程講座

之後我不回答任何類似「XXX課程好不好、推不推」的問題。
問這問題根本想害我得罪人＝＝

我看了這個新聞：直擊！魏應充兄弟跪求鑽轎　白沙屯媽閃開。

頓時好奇了起來，媽祖娘娘是怎麼指示抬轎人不給魏應充兄弟鑽的？

如果是抬轎人的自主行為，就和媽祖無關。如果是媽祖指示...她怎麼指示的？不太理解。

感謝朋友們說明

球球：「控制的是轎子中間前面那根"頭籤"，頭籤會壓轎夫的肩膀指示方向。」
Daphne：「[東森新聞HD]白沙媽祖繞境「感應指示」神轎班遶境路線 by 東森新聞 CH51」

（影片1:12左右）媽祖娘娘常突發奇想到處跑、沒有既定的路程沒有事先的規劃，扛轎辛苦加倍。
（影片1:23左右）2001 年媽祖帶著上千人橫渡濁水溪，全數平安通過。

以下是嘴砲

完整看完影片後，覺得媽祖娘娘不愧是神，但某些 PM 或 Boss 更神。

人家是神明、是魔法少女，才能在沒有事前規劃或預定行程的情況下衝了，有廣大神通力保佑信徒全程平安。一般凡人咧？

把上述影片「媽祖娘娘」替換成公司老闆或 PM，你會覺得比什麼鬼片都可怕，但現實生活三天兩頭就上演。他們也很愛突發奇想、沒有事先的規劃，卻又沒有神力。只要前頭帶隊的出包、後面員工都跟著跳水。

如果作業用 BGM 剛好在放閃靈的元千歲-暮沉武德殿(民謠版) ，真的會跟著含淚大吼「萬劫不復～萬劫不復～萬劫不復～」。

這時候 UI/UX 講什麼易用性、使用者都沒用，產品策略方向不對就是燒錢打水漂。身為小螺絲、有經濟壓力的基層員工能怎麼辦？

拒用頂新集團下的所有製品啦幹！

收到一封 Mail，其中提到幾個關於設計流程和 Prototype 的問題。

UI設計流程:Wireframe->低保真Prototyple->Mockup->高保真Prototyple
這樣的流程是對的嗎?

根據上過課的學員回應、以及自身經驗，目前業界的情況大多是 UI 設計師收到「開工啦」的通知，然後就從 Wireframe 開始下手。使用者怎麼操作、有哪些功能、使用者和客戶的需求是什麼往往靠 PM 簡單口述。

Wireframe 為什麼會長這樣？在 Wireframe 之前還有哪些事要做？

全部都靠通靈。

所以執行專案期間都在改來改去，撐到最後一天總是可以結案就解脫了嘛，再開始下個改來改去的輪迴。

開發流程

基本上我自己在開發產品的流程大致上不會脫離這張圖太遠。

User Story
Functional Map
Flow Chart
UI Flow
Wireframe
Mockup
Prototype

使用者要什麼？ > 從需求中整理出功能 > 使用者怎麼操作這些功能？ > 操作的過程需要哪些頁面？ > 頁面要放什麼內容/元件？怎麼被操作？ > 使用者看到的頁面長什麼樣子？

各家有各家的作法，沒有標準或正確一定要這樣做的流程，但我在做自己的玩具時都會這樣幹。

有 UX 團隊的大公司會把上述流程拆的更細，還會做使用者研究之類；一人 UI/UX 通包的小型團隊...這 7 項是最低一定要產出的文件，依個人想偷懶的慘痛經驗，再刪除精簡化就會在執行專案的過程中漏東漏西，之後補洞反而花更多時間和心力。

1. User Story

功能怎麼來的？從「使用者要什麼」或「客戶預期使用者想要什麼」開始。
依使用者的身份不同，想要的功能也會不同，完成的任務不一樣嘛。

比如「Blog」：

我是讀者，我要看到這位作者寫的所有文章。
我是作者，我要撰寫並發佈文章。
我是平台提供商，我要看到所有會員身份和繳費狀態。

這三種身份對「Blog」這項產品的需求和預期完全不同。

2. Functional Map

寫了 User Story，才會知道有哪些大小功能要做。針對不同使用者的需求，從故事中挑出功能。使用者的身份不同往往影響他們能使用的功能，整理歸納出共通和差異處。

3. Flow Chart

當開發者知道使用者想要什麼、也有了功能，才有辦法思考「使用者怎麼操作功能完成他的任務或達到目的」。

UI 設計師常說：「配合使用者的習慣與行為來設計操作流程」。就是在這一階段規劃。如果跳過 Flow Chart，只要產品功能複雜起來，你家的 RD 就會抱著頭哀嚎了。

4. UI Flow

知道使用者會怎麼操作一項功能時，才有辦法規劃操作動線。UI Flow 指的是頁面與頁面之間的操作流程，使用者想完成任務會經過多少頁面之類。

有另一位讀者傳訊問道，為什麼我之前的文章說不要用圖片版的 UI Flow、要用文字版的呢？

首先，這是雞生蛋蛋生雞的問題。如果這個專案從零開始，把 Flow Chart 規劃完後接著做 UI Flow，這時候哪來的圖片版可以串 Flow？連 Wireframe 都還沒開始畫哩！

第二，當你的產品頁面一多的時候...也不用太多，20頁，用圖片串出一個 UI Flow ，這個 Flow 圖表尺寸有多大張？誰有那個心力在一張大圖上用手掌工具來回移動看頁面走向？

第三，很多人做圖片版的 UI Flow 時，線條連接的是「頁面」和「頁面」，這時候你也只知道「喔～這一頁的下一頁會到這裡」，但你完全不會知道為什麼會到這一頁。要點哪裡、或是發生什麼事所以跑到這裡來？猜猜看啊～

要靠猜猜看才會看懂的文件看它（寫它）幹嘛？不要浪費時間啊。

文字版的 UI Flow 我拿來當「目錄」用，對照 Wireframe 的編號，找圖看細節的時候快。
圖片版的 UI Flow 我會用在「優化」舊產品的操作時使用，連接線會從「元件到頁面」，而不是「頁面到頁面」，並在圖片和線條旁邊寫上文字說明，才會知道哪個步驟可以省略或修改得更易於使用。

5. Wireframe

有畫 Wireframe 不代表工程師就看得懂這要幹嘛，光看臉皺成一團的表情你也不知道他是踢到腳指還是吃到酸梅。文字說明才是 Wireframe 的重點，包含觸發、回饋、狀態變化等等。

一開網頁就自動出現廣告、還是開啟網頁後等個3秒才出現廣告？
廣告出現10秒自動消失，還是要按(X)按鈕？
網頁停止30秒沒有操作要不要出現廣告？

工程師只會照你寫的去做、不會照你想的去做。工程師不是神也不是蛔蟲，他們是一般人，沒有他心通這種神力，溝通上肯定會有認知落差，所以話要講清楚，設計師的常識不等於工程師的知識。

Flow Chart、UI Flow、Wireframe 這三份文件寫到一半改來改去是正常現象，多少都會圖畫一畫發現什麼東西漏掉回頭補上。怎麼可能一次到位啊...

6. Mockup

視覺稿...照 Grid 和 Guideline 做吧，之後還有切圖和標示文件要弄。

好處是切圖和標示文件都有外掛工具可以代勞，甚至設計師只要顧好原始檔、切圖和標示文件都用 Avocode或 Zeplin解決。

壞處是，如果不太知道技術限制，做出來的東西工程師不能用就算了，他們還白挨設計師的罵。

「為什麼你做出來的東西和我畫的差了幾px？」
「拜託！RWD 不可能完全和你畫的一模一樣好不好？」
「是你能力不夠還是偷懶？我的圖畫得出來為什麼你做不出來？」
「幹...」

7. Prototype

那位讀者問另外問了關於 Prototype 的問題：

高保真Prototyple是在切圖給RD之後製作，那做出來的用意是在RD程式還沒完成前再次確定操作上有無任何問題嗎?
那高保真Prototyple就是跟成品長的一樣還可以操作囉??

做 Prototype 的目的通常是測試和驗證，不管是給使用者操作看看、觀察使用者操作狀況做使用者測試；還是工程師套完程式上線前先測看看有沒有蟲或哪邊爆炸了。所以它一定要可以被操作，不能被實際操作是要怎麼測試？腦內補完？

Prototype 要可以被操作！
Prototype 要可以被操作！
Prototype 要可以被操作！

不能被操作的都不是 Prototype。

Wireframe 可以做 Prototype，低保真原型。
Mockup 可以做 Prototype，高保真原型。
切圖叫工程師寫程式套版做一個，高保真原型。

我自己大多做完 Mockup 後才會出 Prototype 測試。
因為，Wireframe 做的低保真原型一般使用者看不懂也沒感覺，沒辦法做使用者測試 =_=

Wireframe 做的 Prototype 頂多內部測試吧，但內部測試常常不太准，工程師和設計師的思維和一般人不一樣，測一測重點常常歪掉...

以下是廣告宣傳

如果你對上述 UI 設計流程有興趣，我會在課堂上詳細講解，並帶學員完整跑一遍流程，實際動手寫課堂練習。

歡迎公司派人來受訓。課堂上會講到不少專案流程和團隊合作的技巧，絕對可以感受到來上課的同事脫胎換骨突然升了好幾個等級似的（喂）。

更詳細的課程資訊請見高雄－6月份 UI 設計師入門班

我買了 Simon Ng 寫的 iOS 9 App程式設計實力超進化實戰攻略 (Beginning iOS 9 Programming with Swift)，學習怎麼用 Xcode 和 Swift 做 App。

這本書非常推薦設計師和完全不懂程式的初學者購買，前幾章都在講 Xcode 的 GUI 操作和實例，跟著範例自己做個會動的頁面出來很有成就感，能學到很多。

UI 設計師要懂 Auto Layout

我跟著書裡第 5 章範例做的 Auto Layout 練習，有置中的標題、置中的按鈕，和底部偏右方對齊的文字。

左，iPhone 4s ，標題和 Hello World 按鈕置中，但畫面長度不夠下方文字沒有顯示。
中，iPhone 5s ，標題和 Hello World 按鈕置中，下方文字置右，一切正常。
右，iPhone 6s ，標題偏左、按鈕偏左、文字位置也跑掉了。

UI 設計師都知道要給工程師的標示文件上需要寫明尺寸、間距等等，iOS 可以給座標。但在不同手機尺寸下，給座標就會出現上圖那樣的情況。

先來解決不同尺寸下元件位置會跑掉的問題，就要使用 Auto Layout 啦。（暫時跳過 Portrait 和 Landscape 的畫面變化，以及 Universal App。）

對齊與定位

其實看到這 2 個工具大概就猜得出工程師會怎麼設定 Auto Layout 了吧。（雖然工程師都寫 Code 直接處理，但拿 GUI 出來講總是比較容易被看懂。）

Align：對齊。建立一個對齊的約束條件，ex 元件置中對齊。
Pin：定位。建立間距約束條件，ex 元件上、右、下、左的間距。

所以設計師出標示文件給工程師的時候，需要寫明對齊方式和定位。比如 A 和 B 之間距離多少？置中還是置左？某元件如果要固定在左下角是不是要標明距離左和下的數值...等等

實例

因為尺寸不同所以版面跑位的情況，可以透過設定 Auto Layout 解決。設好後 Storyboard 會出現幾條輔助線。

標題

不管螢幕尺寸變化，標題都希望要置中，且距離頂端的位置要固定。

按鈕

按鈕設為「水平對齊」、「垂直對齊」。這樣不管在哪種螢幕尺寸下它都在正中間。

文字

文字設定距離右邊和距離底部的尺寸，不管螢幕尺寸變化，這行文字都會固定在右下角。

ma...這就產生一個新的問題，比如 avocode 和 zeplin 這類不用設計師出標示文件的好用外掛，如何讓工程師知道在不同螢幕尺寸下，各元件的位置呢？設計師哪有這麼勤勞針對各種螢幕尺寸出一堆原始檔。

看是要拼一定點另外寫份標示文件，或是乾脆放手讓工程師處理掉了吧。

延伸思考

Auto Layout 不只能處理各種螢幕尺寸下元件位置的版面問題，Portrait 和 Landscape （手機轉橫或轉直）間的切換也可以用它來處理，甚至 Universal App（iPhone 和 iPad 同一支 app 程式），iPhone 和 iPad 之間的 Responsive 也可以透過 Auto Layout 搞定。

嗯，這就來討論下 1. 為什麼 Landscape 要用 Auto Layout，2. 為什麼 Universal App 要用 Auto Layout。

為什麼 Landscape 要用 Auto Layout

從使用者的操作，簡單分成 2 種可能性。

1.手機轉橫是為了看更大的畫面，比如 Safari。
2.手機轉橫會觸發不同的功能。（可參考舊文：Portrait 和 Landscape，談螢幕方向）

如果是為了看更大的畫面，功能元件幾乎相同，用 Auto Layout 我覺得很方便省事。

如果會觸發不同功能甚至換個介面，那用 Auto Layout 想幹嘛？當然是刻個新的 UI 啊！

為什麼 Universal App 要用 Auto Layout。

同上方的理由，iPad 的介面和 iPhone 的介面會完全一樣嗎？iPad 螢幕比 iPhone 大那麼多，操作情境、功能複雜度不會一樣。

而且，在開啟 App 時就判定 App 被裝在哪種裝置上，讀取 iPad 或 iPhone 的程式碼，都比用 Auto Layout 乾脆實在啊。

.
.
.

Auto Layout 入門教學一文說明介紹 Xcode Auto Layout 設定方式、詳細操作等，可以去看這個網頁喔！

週日上課時有學員問起我最近有沒有推薦的書，Blog 很久沒更新、也超久沒看到書籍分享了。
（呃...去年太忙，今年也很忙，剛買 PS4 卯起來打 FF 零式，正被劇情折騰。）
好書很多，不知道從哪裡下手，先分享下我書櫃長什麼樣子好了。

看過覺得不那麼重要的或講太淺的被我放去其它書櫃了，這邊擺的是我喜歡、比較常拿出來複習的部份。

之前在群裡有分享過照片...被碎念一頓，說很亂都不整理，看是照顏色或是照身高排都好，怎麼排成這樣。個人習慣照書籍內容整理，所以書櫃看起來很亂...幹、看書的人是我，我能快速找到想看的那本書就好了啊！

底下特別標出來的為必買。

UI/UX類

設計的方法：100個分析難題，跟成功商品取經，讓設計更棒、更好的有效方法
微互動
About Face 4

視覺設計、品牌、創業思維類

為什麼他接的案子比我多？：設計業界潛規則，讓你接案上班都無往不利
好LOGO，如何想？如何做？：品牌的設計必修課！做出讓人一眼愛上、再看記住的好品牌+好識別

（台灣的書名是在比長的嗎？書名越長賣越好？）

字體設計、其他相關

初學者

這幾本都很淺，是入門書。

別做天兵設計

UI 新手、剛轉行、不知道 UI 工作流程為何的可以看這本。

User-Centered Design使用者導向設計

講 UX 工作流程入門書。不知道現在口號老愛喊使用者在使用三小的可以看這本。然後就知道很多人習慣喊「使用者為重」跟幾百年前喊「反清復明」一樣，喊喊而已，不會跑研究方法的啦。

為什麼他接的案子比我多？

不只設計師，我覺得剛畢業的職場新鮮人都可以看這本，講很多和專業無關、但踩到雷要怎麼處理的實用技巧與心態建立。

這樣 O 那樣 X 馬上學會好設計 (1)

適合非本科、換跑道的設計師看。剛畢業的本科生也該看一下...

UI 入門班的 QA 時間，有學員問「User Story 和 Customer Journey Map 有什麼不同？」順便把 Persona 和 Scenario 混在一起...

Persona （人物誌）
Scenario （情境故事法）
User Story（使用者故事）
Customer Journey Map （使用者旅程地圖）

Persona （人物誌）

產品使用者的典型人物原型。將這些使用者的共同點如生活狀況、目標、行為等層面集結成一位虛擬人物。之後產品開發將依此人物當做設計目標。

Scenario （情境故事法）

從使用者的觀點探討產品的使用狀況，敘述一位使用者在什麼情境下使用產品、怎麼使用等等。

Customer Journey Map （使用者旅程地圖）

敘述某位使用者和產品或服務互動時所產生的行為、感受、感知和心境，包含正面、負面、中性時刻。分成各個階段呈現，且各階段可接受個別評估和改善。

（上述介紹截自設計的方法一書。）

會發現 3 種文件關注的點不一樣，往往 3 份文件是一起製作或接連進行。

Persona：使用者是「誰」、什麼樣的人。
Scenario：使用者在什麼情況下使用產品、怎麼使用。
Customer Journey Map：使用者在和產品進行互動時產生什麼樣的情感、能被評估改善。

必需先知道使用者是誰，才能預估他的操作行為，並從和產品之間的互動得知使用者的情感，加以評估改善。這 3 項是研究方法，分析探討使用者的方法。

User Story（使用者故事）

敏捷開發常常會使用 User Story 當做溝通工具。有經驗的都知道，專案開發過程中最大的問題都不是技術，而是溝通。

台灣的業主大部份都會先提出幾個功能，腦補使用者有多讚美他想到這些功能，幻想使用者用得順手又愛死了的情況。然後叫開發人員把腦海中的妄想做出來。但現實和妄想完全是兩碼子事。

User Story 可以幫助團隊認清現實，從使用者需要什麼、他會怎麼操作開始，從中找出功能。也就是先有使用者才來想功能，此時開發出的功能比較不會淪為腦補自爽。

（但使用者是誰呢？請用 Persona。）
（使用者會什麼情況下、怎麼操作產品呢？請用 Scenario。）
（他在互動的過程中感覺到什麼呢？請用 Customer Journey Map。）

User Story 和 Customer Journey Map 都使用「故事線」當主幹，畢竟都採取「從使用者的行為找出關鍵點」的概念。但兩者關注的部份完全不同。User Story 目的在從使用者的操作行為裡找到各種功能、並排出優先順序；而 Customer Journey Map 則是關心使用者在各階段互動的情感並想辦法改良、提升滿意度。

使用者的身份會影響操作方式和欲完成的任務。User Story 需同時考慮不同身份的使用者。例如叫計程車的服務，這項服務的使用者身份可能有下列數種：

乘客
司機
後台管理員

乘客關心乘車品質、收費、服務、效率等等。
司機在意是否能快速載客等等。
後台著重在數據與報表、會員資料等等。

Customer Journey Map 只會告訴你使用者因為什麼原因所以覺得不高興，無法提供讓使用者高興的解法。User Story 可以探討使用者想要什麼功能、重要的先開發、達成團隊共識，卻沒辦法確定這樣做下去後使用者是否滿意。

但從許許多多的「方法」來看，先熟悉使用者想要什麼再來開發，會比先有功能再來幻想使用者有多愛用來得實際。

http://vote.ly.g0v.tw/

這是學弟做的網站，完全沒想到當年可愛溫柔的學弟在 20 年後變得如此驃悍（喂）。雖然這個站仍有許多要修改的部份，但最重要的表決立場能讓民眾一眼看穿立委在媒體上表現的和他在面對法案的態度是否一致。

立委投票指南的功能非常多且雜，先講最重要也最迫切的部份，2016 立委改選。

2016 立委候選人

你可以點這個網址進入立委投票指南: 2016~2020候選人網頁。

比如說，現在最熱門的就是中正萬華選區，閃靈主唱林昶佐和國民黨林郁方。

那我們就進到立委投票指南: 2016~2020候選人網頁，選擇台北市。

然後選「萬華區、中正區」。

就可以看到這次選舉，這兩區的選民有哪些候選人可以投票

除了林郁方外，其他候選人都未擔任過立委，所以沒有過去紀錄，那我們就點進林郁方的表決立場來看看他贊成什麼法案、又反對什麼法案。

立委投票指南:林郁方第8屆的表決立場

從圖中可以很清楚看到林郁方反對的法案有…

反對：2008年度大學不得調漲學雜費：1次反對：停建核四：3次反對：刪除紅十字總會為特定獎補助對象：1次反對：刪除軍公教18%、總統國務機要費等預算：1次反對：反媒體壟斷：1次反對：如失業率未降低，首長減薪50%：1次反對：將「刪除核四預算」列入院會議程討論：1次反對：暫緩電價調漲：1次反對：每月330度以下用戶電價不調漲：1次反對：限制中資：1次

我們同樣可以在林郁方的個人頁面找到他當年提出的政見內容。

甚至，連林郁方的財產都看得到，不過這要他有申報才有。（陽光法案）

立委的財產資訊超重要的，如果他名下有大筆房產，你覺得他會支持打房嗎？同理，他如果大量投資某股票，那與該股票相關的立法不就…（好萊塢電影有很多利益被觸動殺了不少人的片。）

補充：

立委投票指南: 2016~2020候選人當然有候選人政見，咱們來看一下林郁方這次選舉提了什麼樣的政見出來。

（20160106 補充：刪除因個人偏見與對法案理解不夠的部份，很抱歉。）

表決立場是很重要的一項資訊，候選人贊成、否定過什麼法案，拿來和他的政見一比對，就知道這傢伙在說謊還是真心為人民做事了。

最後

其實我從小受到的教育也是「政治很髒小孩子不懂事不要亂碰」，然後看著長輩拿政論節目配飯滿口胡說八道。自從當上 UI、嫁給 RD 開始學會怎麼思考、什麼是邏輯，知道什麼是合理性和可行性後…發現一堆靠北，這樣也行喔？的狀況。

舉個例子：

「支持乾淨選風，絕對不買票、不宴客、不抹黑。」

這也算政見？不是身為一個人基本的誠信問題嗎？追求自己沒有的東西是人類的天性…

「重視各國華僑，爭取台商支持中華民國。」

怎麼做？執行的方法呢？你以為現在是 PM 的功能許願時間啊？

「立法懲罰製造族群衝突以及歧視其他族群之言行。」

族群衝突和歧視其他族群之言行的定義是什麼？（參考圖書館戰爭。）「支持林郁方就是支持馬英九」算嗎？

套回到工作上就是：

「週休二日是員工福利。」為什麼勞基法規定本來就該有的卻變成員工福利？「重視每位同仁的時間。」怎麼個重視法？上班打卡下班自由，沒做完不准走。「所有文件包含規格書等等都要寫清楚。」什麼程度叫清楚？規格書寫這張圖可以咻～從左邊飛到右邊就是清楚？

如果職場上遇到這些事肯定一堆人翻桌不幹了，怎麼候選人提這種政見大家卻吞得下去啊？集體斯德哥爾摩症？

舉了很多例子

為了對得起學弟的熱忱和努力，我打了這篇文，希望上述舉的例子能幫助各位思考自己的一票要投給誰。並能有更直接現實的手段說服長輩不要繼續藍藍路…

立委投票指南資料量非常龐大且複雜，有些內容不那麼方便民眾一點知道這位立委在搞什麼鬼，但起碼有個查詢的地點，是個起步。

如果有人跟你鬼扯什麼「這是民間做的啦、資料造假啦、騙人的啦」，立委投票指南的資料來源全部都是政府單位。參考立委投票指南:資料來源。不過表決立場中標籤的功能由一般民眾參與，非政府單位資料。所以並非所有表決和法案都會呈現在頁面上。希望讓民眾能簡單比對資訊，搞清楚自己選出來的立委在幹嘛，而不是透過媒體看人作秀。（所以才要反反媒體壟斷？）

最後的最後

感恩學弟，讚嘆學弟。(雙手合十）

立委投票指南立委投票指南: 2016~2020候選人

20160106 補充：這是篇我用個人立場＋偏見的文章，對法案與實際政見等等理解不夠深入，已刪除錯誤的段落，敬請見諒。

文件這回事我一直有種「永遠寫不完」的感覺，尤其是 Wireframe，把 Wireframe 當成幾個框框幾個圈圈加幾條線就搞定的文件，這樣的難度和隨手畫個井字遊戲有什麼不同？只要會畫圈圈叉叉直線橫線就能畫 Wireframe？

[翻譯] 如何修正壞 UI一文中有提到 5 種狀態。事實上我覺得 Z 大提出的第 6 種狀態也該被納入考量。

理想狀態（Ideal State）
空白狀態（Empty State）
極限狀態（Maximum State）<<<< 第 6 種狀態
錯誤狀態（Error State）
局部資料狀態（Partial State）
載入中狀態（Loading State）

每個頁面在 Wireframe 階段都必須考慮這 6 種狀態，好，那狀態考慮完了也設計好了，要怎麼和專案成員溝通，確保他們都知道該頁面在各種狀態下的變化？

（其它 5 種狀態詳細介紹請去看 [翻譯] 如何修正壞 UI。）

極限狀態（Maximum State）

數據最大值、最小值時，頁面怎麼顯示。

「狀態」指的不是一個頁面，而是「事物或對象因時間所變化的性質或處境」。所以同一個頁面裡只要能被「觸發」的都必需考慮「狀態」。觸發又分手動觸發、系統觸發，詳細介紹可以看「微互動」一書。（數值不是只有數字。）

例 1

最容易理解的例子比如「未讀訊息」的數值，這個數值為「系統觸發」。

如果 1 筆未讀也沒有，可以當成是「空白狀態」，當未讀訊息超過 999 筆時，提示未讀的數字要如何顯示？不能無限位數下去吧？

（圖片出處：http://minkara.carview.co.jp/userid/1352267/blog/33741244/）

例 2

文章列表屬於系統觸發，需要考慮極限值。可以想做是「標題幾行」、「內文幾字」，超過多少數值後要變「…」？需要考慮所有欄位如時間、標題、作者名稱、作者照片、回應等都逼到極大值、和所有的欄位字數都是最小值時，版面如何呈現。

比如 BBC News的頁面，可以看得出來中間那篇文如果再多幾個字會十分接近這個區塊可容納的內容上限。

文章列表類的最小值可能是「1 個字的標題」，不過目前考慮到點擊率，標題有越來越長的流行趨勢。

例 3

列表頁也是，沒有半個項目就是空白狀態，但如果有幾百幾千條項目呢？不可能在一個頁面裡全部列出來吧？

像是 Google 查詢，不可能一頁讀入 11,180,000,000 項結果。

所以在一定筆數（超過極限值）後換下一頁。

那個「極限值」由誰決定？UI？RD？PM？

例 4

同樣是列表頁，Dribbble 不再使用分頁的作法。改版後，列表畫面的讀取狀態分為 2 種，一種是「自動載入」、另一種是「手動載入」。

當使用者持續捲動列表時，Dribbble 會自動載入作品資訊。（感謝 Agatha 協助，我實在截不到這顆 Loading more 的 icon。）

現在很流行在列表頁做上「自動載入」的功能，我非常討厭這種作法，這會導致使用者怎麼捲捲捲捲捲，永遠看不到 Footer 的資訊。如果沒有處理好，使用者點擊列表頁進入詳細資料頁，再 Back 回前頁時，就不知道清單看到哪個部份了。

比如 PChome線上購物，就是捲捲捲捲捲捲捲捲捲捲捲捲也捲不到 Footer 的例子。

同樣是無限自動載入 9gag.com乾脆把 Footer 做到側邊欄去了。

可能因為自動載入永遠看不到 Footer 的關係，Dribbble 當列表頁呈現 96 幅作品後，就會出現這顆按鈕，手動點擊讀取更多作品。使用者一直往下捲捲捲，捲個幾次還是有機會看到 Footer 的資訊。

如何告訴 RD 頁面的各種狀態？

問題來了，「自動載入」和「手動載入」的觸發條件是什麼？規則是什麼？由誰定義這個規則？

這也是平面設計和介面設計最大的差別：觸發。

使用者可以戳戳看手機 APP 介面，看有什麼反應，戳了會動耶～使用者可以戳戳看貼在牆上的海報，看有什麼反應，戳了有洞耶～

（再把 UI 設計當成平面設計試試，我會叫你去戳海報。）

點擊什麼元件、觸發什麼功能、系統怎麼回應、最後畫面如何呈現？這是 UI 設計師的工作。如果你有完整看完 [翻譯] 如何修正壞 UI這篇文，就會發現 Prototype 沒有辦法完整告訴 RD 「狀態」這件事。

如果一個頁面有 6 種（視狀況或多或少）狀態，扔可操作的 Prototype 給 RD 叫他照刻一個。表示 RD 每個頁面都要不停嘗試亂按才會知道這個頁面有哪些狀態…怎麼可能每種狀態都試得到？就跟玩多重結局的戀愛遊戲一樣啊，沒看攻略本你怎麼知道單一角色有幾條路線要跑？完美大結局要符合哪些條件才能得到 CG 圖？

同樣的道理，一個 App 有幾個頁面？一個頁面有多少元件？當元件被觸發時會有什麼樣的回饋？Prototype 不能一眼看出元件所有狀態，Mockup 也不行，得回到 Wireframe 上，不止說明文字需包含觸發條件、回饋，必要時各種狀態都得畫出來標示在理想狀態旁。

新的問題就出現了…市面上目前沒有一款 Wireframe 工具適合拿來寫說明文字的，我還是先用手繪稿頂著加減看吧。

最近 FB 上常看到有人分享這篇 UI & UX 差別是什麼，看圖大整理，這篇文有一半的圖都有問題啊，根本不是 UI…除非它指的是視覺設計。

介面設計必須考慮 輸入、輸出、運作內容這三項，但幾乎所有的圖片都沒有提到怎麼輸入、輸出什麼、運作內容的規則。

UX 包含 UI，很難切開來講，但硬要分細的話，UX 講的是使用者感覺到什麼。UI 著重在互動和操作的媒介上。

倒過來的蕃茄醬瓶

英文原文底下留言就有人寫了，蕃茄醬瓶倒過來就是 UX？還是UI啊！

開口朝上的蕃茄醬瓶 = UI （開口朝上的蕃茄醬瓶）將導致蕃茄醬倒不乾淨使用者覺得很浪費不好用＝ UX

開口朝下的蕃茄醬瓶 = UI （開口朝下的蕃茄醬瓶）讓使用者覺得可以用光所有蕃茄醬很方便＝ UX

瓶子本身是 UI，是使用蕃茄醬的媒介。UX 是使用者的體驗、是種感覺，不會是實體。

UI 和 UX 有什麼不同？

WHAT’S THE DIFFERENCE BETWEEN UI AND UX?

左右兩邊講的都是 UI，不是 UX。

左半邊的圖講創意和視覺、顏色怎麼用，看起來比較像視覺設計。

右半邊的圖提到網站要怎麼表現，像使用者如何互動、第一個點擊、內容架構、網站地圖等等…這些全部都是 UI 設計師的工作。

如果標題改成左邊是視覺設計、右邊是 UI 設計，會更貼切。

以圖中的調酒來看…所有材料全部放在一起搖一搖的過程是 UI 。什麼樣的使用者會喜歡這杯酒、這杯酒給人什麼樣的體驗才是 UX。

UX 設計師和 UI 設計師有什麼不同？

[INFOGRAPHIC] THE DIFFERENCE BETWEEN UX DESIGNERS AND UI DESIGNERS

這張圖根本是 UX+UI設計師 V.S 視覺設計師，右圖完全沒提到 UI 設計師該考慮的「互動」，左圖也沒有提到互動這一塊…

UX 不是 UI

UX is not UI

這張圖講的不清不楚，原文也沒有多解釋。如果照標題寫的…左邊其實是「視覺設計」，不是 UI 設計。

UX 和 UI 有什麼不同？

What’s the Difference Between UX and UI Design?

UX 畫 Wireframe 給 UI 設計版面和視覺和品牌？光看圖問題超大，若從原文看起來，UI 設計這只剩下視覺設計這部份而已，互動這一塊被拿去給 UX 做了…

結論

仔細一張張看完 UI & UX 差別是什麼，看圖大整理裡面列的圖片，發現其實大部份人對於「UI 設計要做什麼」也不清不楚，就連外國號稱專業的 UI/UX 設計公司也不例外。（台灣？啥？）

這張被 Conversion Lab 說是「分法有點奇怪」的圖，其實它是全文中最清楚的一張，也是唯一提到 UI 設計師需要思考「輸入」、「輸出」。其他的圖根本把視覺設計當成介面設計了。

T-Shirt: UX is Not UI

如果視覺設計＝ UI 設計，那還要劃分一個 UI 設計的領域出來做什麼？因為比較潮嗎？

（BTW，3、8、9、10 這 4 張圖沒有錯誤。）

後補

20160202 這篇文引發一串討論，先講講找到的資料和我所認知的。

我對 UI 的認知

UI＝介面(N)，必需包含輸入、輸出、運作內容，可以互動才可被稱為 UI。(wiki)

UI 設計＝設計(V) 介面(N) 這件事。

Dan Saffer（神人，寫過很多書，微互動作者）在 Is UX design considered industrial design?問答裡提到：

「UI design is a combination of interaction and visual design.」（UI 設計是互動設計和視覺設計的組合。）

Dan Saffer 也在 What’s the difference between UI and UX design?問答裡提到：

「UX 包含產品或服務的整體經驗，而且也包含UI。UI 由視覺設計（外觀和感覺）和互動設計（如何運作）組成。」

不管是 UI 本身、或是 UI 設計，都要包含互動設計和視覺設計。所以我認知的 UI Designer 需要同時擁有兩方面的技能，視覺設計和互動設計。

可被操作的才叫 UI，只有純視覺那層皮、沒有互動的不是 UI，是 VD。視覺只是介面的其中一個部份，並不能把視覺當成介面，會動的才能被叫做介面。就像妹妹是女的，不代表女的都是妹妹一樣…（醒醒吧你沒有妹妹）

Google 職缺

爬了下 Google 開出的職缺，找不到 UI Designer，看到比較多的是 User Experience Researcher、Interaction Designer 和 Visual Designer 。

從職缺中摘錄我覺得最能表現這個職位在做什麼的部份。（要求團隊合作那種各角色通用的就不提了）

User Experience Researcher：You have a hybrid passion for quantitative (statistical logs analysis, clustering, outlier detection) and qualitative (user interviews, surveys, research) research.

Interaction Designer：creating user flows and wireframes to building user interface mockups and prototypes.

Visual Designer：At Google, Visual Designers weave iconography, typography, color, space and texture

看起來 User Experience Researcher 在做使用者調查、訪談等研究，Interaction Designer 在做的是我認知的 UI 設計互動部份。Visual Designer 就是我認知 UI 設計的視覺部份。

當團隊人多的時候，職務就可以被細分，UI 設計會被切分給 Visual Designer（職稱可能是 UI Designer)，以及 Interaction Designer 兩個部份，依公司分工不同而定。做的事情就是那些，看職稱了。當公司沒人的時候，UI Designer 就是視覺和互動都要做。

UX 也可能分成 UX 研究員和 UX 設計師。UX 研究員做使用者研究，UX 設計師在做互動設計師的工作。（研究和設計最大的差別在於一邊著重發現、另一邊著重創造。）

回到上方的本文，如果用 Dan Saffer 所說的「UI 由視覺設計（外觀和感覺）和互動設計（如何運作）組成」來看，UI 設計如果只提到視覺、沒提到互動；UX 應該要包使用者包互動包介面卻只提了一小部份，我就會覺得圖片是錯誤的。

20160204 補充

Do Visual Design and Interface Design have a similar job objective?

Dan Saffer：

By interface design, do you mean “interaction design?” If so, the roles are different. Interaction designers are responsible for the functionality of a product, while visual designers are responsible for the look and feel of a (2D) product. As an example, an interaction designer would say that a button goes on a screen and what it does, and the visual designer would determine what the button looks like and its position on the screen. Sometimes, the two roles are done by the same person.

If you are talking about the difference between interface design and visual design, well, interface design is composed of interaction design and visual design, so in a sense they do have a similar objective: communicating the functionality of a product to a user. Of course, visual design has a lot more aspects to it, like branding, identity, and various forms of communication design, such as posters, books, packaging, etc.

. . .

這篇拿了不少 Dan Saffer的文當實證，再跳針我也不知道怎麼回應了。

網路上對於 UI 和 UX 的謬談這篇留言數量頗多，其中一則留言我另開這篇文來回答。

這張圖是 Dan Saffer 畫的，指的是 UX 包含那些範圍，可以看到並沒有「UI」的圓圈。

他說：「UX 包含產品或服務的整體經驗，而且也包含UI。UI 由視覺設計（外觀和感覺）和互動設計（如何運作）組成。」

可以得知 UI 在互動設計和視覺設計交錯的那個區塊。

既然 UI 設計由視覺設計和互動設計組成。組成代表的是兩者必需同時存在。你不會說「水是 H2O 組成，所以 H2 是水，O 也是水。」

介面必須包含輸入、輸出、運作內容，可以互動才可被稱為 UI，也就是說不能動的通通不能被當成 UI。就像你不會說電影海報是 UI、大潤發 DM 是 UI 一樣，它們是視覺設計或平面設計。

動畫是不是 UI？當然不是，使用者怎麼操作動畫？一定要包含輸入、輸出、運作內容這三點，才可被稱為 UI。(會動不是指畫面元素會動這件事，而且能不能和使用者互動。）

例子

留言中提到 10 個情況，問決策過程，依本文的概念該由誰來處理。

（先假設一切完美、沒有 GGYY 的客戶或主管、沒有時程壓力、沒有技術限制、沒有外在干擾。開發團隊至少包含 PM、RD、UX Researcher、Interaction Designer、Visual Designer 等等，且所有人都有一定程度的實務經驗、知道如何跨領域相互支援、團隊合作和溝通上無問題。)

有個大前提：團隊合作並不是某人說了算，而是某個職務上的人做了這樣的提議後，專案成員皆同意、共同負責。當在大家都同意的情況下，產品失敗不會是其中一個人的責任。

關於 UI 設計的職責劃分可以參考：What are the differences between UX, Interaction, UI and graphic/visual designers? Are these distinctions helpful or damaging to our field?

滑鼠移過購物車圖示，要滑出一個迷你購物車，誰來決定迷你購物車內是否要放產品照片、應付金額的文字尺寸要不要加大?

要不要放產品照片這件事，得先看客戶資料端有沒有照片資料。可能 RD 可能 PM 要去把資料找出來。

畫 Wireframe 的是誰？他要決定畫面包含哪些內容、各種頁面狀態，Interaction Designer。

應付金額的文字尺寸要不要加大?

Interaction Designer 只會處理內容（文字、圖片、聲音、影片）和使用者之間的互動關係，至於內容長什麼樣是 VD 的工作。

PS. 內容：就是文字、圖片、聲音、影片。和文字(是不是今天寒流來)、圖片(是貓還是狗)、影片(是卡通還是電影)無關。

為什麼要加大呢？可能是 UX Researcher 發現目前版本能有改善的空間，找 VD 處理。

UX Researcher 做的是「發現」，他只能告訴你問題出在哪，但沒辦法直接告訴你問題要怎麼解決。解決問題是「創造」，歸設計師思考。思考出解法再交給 UX Researcher 驗證。

承上，誰來決定迷你購物車是整塊從上往下滑入，還是裡面的項目是一條一條從畫面外淡入飛入?

Interaction Designer 必須考慮所有和使用者有關的互動行為，產出 Wireframe 給 RD 和 VD 。

補充：有專門處理動畫的職務。Motion Designer - Jobs - Google Design

滑鼠點擊選擇折價券，會跳出一個「會員現有的折價券清單」的 modal，決定這個 modal 是要選擇折價券之後自動關掉，還是要點選「我已選擇完成」之後才關掉的人是誰?

畫 Wireframe 的那個人決定，Interaction Designer 。

UX Researcher 驗證這個作法會不會讓使用者跑光。

承上，決定這個 modal 在電腦上要多寬，「我已選擇完成」的按鈕要在 modal 的右下角、左下角還是中間的是?

在電腦上要多寬和按鈕位置是是 VD 的工作。但決定這個畫面上要不要有 modal 、有按鈕，是 Interaction Designer 。

Do Visual Design and Interface Design have a similar job objective?

會員購物明細中，地址、收件人、電話、手機、備註、商品明細、折扣明細……等各種項目的顯示順序。

Interaction Designer 畫 Wireframe 時提出，但不代表 VD 不能改。改完會不會被 UX Researcher 測一測說有問題…不知道。

某按鈕上的文字常常被使用者誤解點錯，讓客服電話接不完，決定按鈕上的文字要怎麼寫的人是?

PM 或 Planner。

不，我開玩笑的。

常常被誤點就是 UX Researcher 的工作，既然他已經知道問題出在文字上，就得提出建議給實作人員。可能兩者會配合多測幾組文字，看看使用者的反應以找出較好的那組文字。

可能另外有專人負責文案，如果沒有特定的人，只好看 Wireframe 誰畫誰處理了。（Interaction Designer：「又是我！？」）

補充：Google 有專門寫文案的職務。 UX Writer - Jobs - Google Design

承上，要改善系統流程，避免誤點了之後發生無法挽回的事，提出新流程規畫的人是?

提出新流程規劃＝舊有問題待解決，UX Researcher 必須找出舊版的問題出在哪，給 Interaction Designer 建議，共同討論新作法。

UX Researcher 會告訴 Interaction Designer 使用者的操作習慣、容易出錯的部份、為什麼出錯。至於怎麼修改是 Interaction Designer 的工作。

改完再給 UX Researcher 驗證…

某一線上型錄頁面中有一個 Download 按鈕，點擊之後會把檔案下載到本機。決定按鈕上的圖示要用一朵雲+向下的箭頭，還是磁片的人是?

VD。

如果被 UX Researcher 測出使用者看不明白就會被打回重做。

某一線上型錄頁面中已經有一紅、一黃、一藍的按鈕，現在要再增加一個功能與其他顆完全相異的按鈕，決定新的按鈕要用什麼顏色的人是?

和視覺有關的都找 VD。

至於新的顏色能不能讓使用者看得懂，UX Researcher 要去測。

執行某動作之前有一段說明文字，「避免有人沒看說明，要先等待 5 秒才會跑出執行按鈕」，決定「」內操作流程的人是?

Interaction Designer。至於 5 秒會不會太久、或這樣作法會不會讓使用者抓狂…UX 要去測。

. . .

上線前會有 UX Researcher 把關品質的，不然沒辦法證明這樣子的設計能給使用者良好的體驗。上線前先測一下，總比上線後被使用者罵來得好。（快和頭皮屑一樣多的研究方法就是為了各種情況、階段的測試和驗證而生，種類繁複應有盡有…）

但一個產品或服務給人使用的體驗不好，絕對不只是 UX 的錯，整個團隊都有份。程式寫太爛常常崩潰會失去使用者的信用啊！程式穩定和與設計師們無關對吧。要知道整個專案成員都在執行「讓產品給使用者更好的體驗」這項任務。

團隊合作不是把自己手上的事情做完扔出去就沒事了。要去看看其他專案成員在做什麼，拿到自己給出的檔案後接下來會怎麼處理，自己有沒有可能配合對方做微調讓雙方都好做事。

先不管是不是我亂嘴砲胡扯，起碼跨領域多懂一點、讓工作順利，多學一點總是好的。

補充：

Jobs - Google Design

Google 分工的很細，有些職務如 Filmmaker、Industrial Designer，我就不熟悉這個領域的工作內容了。

這是篇紙花 DIY 的教學文。

打算在 2016 年情人節手做給老公的禮物。剛好今年情人節是春節連假最後一天，為了瞞著老公趕工，勢必得在過年前全部做完，一月場的課上完我就開始動手製作。但因為 ²⁄₁就收到老公送的禮物了（也太早），逼的我不得不在 ²⁄₂當天趕完。

如果妳想倒追工程師，可以試試看這個禮物。(追不到我不負責啊！）

教學分成 3 篇，總工時約12~15 hr，材料費不到 500 元。

參考這篇 Michella Marie: White Paper Peonies Tutorial做的紙花。

材料

咖啡濾紙
綠鐵絲最好，竹籤或竹筷、吸管之類也行。
花藝用綠色膠帶。拉開會變黏那種。

工具

剪刀
圓規
訂書機，沒有也沒差。
錐子，用圓規戳也行。

步驟

1.

icolor 買的咖啡濾紙，一大包 49 元。

2.

2 張咖啡濾紙可以產出 2 大 2 小共 4 個圓。大圓 4.75 cm、小圓 3.75 cm。

原文說一朵花要用到 4 大 4 小去拼，我用了 3 大 3 小效果也不錯。

為了省事，一次會同時剪 6 張咖啡濾紙，整疊用訂書機釘 2 個釘，防止散開。等一下要剪也比較好剪。

（圓的尺寸不一定，大圓和小圓差 1cm 左右即可。我有做過 6cm 和 5cm 的。）

3.

剪開後，不用太在意圓剪得不整齊，差不多就好了。等等剪花瓣和組裝時完全看不出來。

4.

拿出你的綠鐵絲。

（因為我用家裡剩下的竹籤，組裝成一束的時候就後悔了，不能彎曲…）

5.

事先將花藝用紙膠帶剪起來放，長的 2 條、短的 4 條。短的約 3 指寬、長的 4 指寬。

6.

把大圓疊在一起，對折，半圓。

再對折一次，1/4圓。

7.

¹⁄₄圓再對折一次。

紙會變得很厚不好折，我們只是要取折痕，不用很精準，可以一小瓣一小瓣折。

8.

對折第 4 次。會變成扇子型。要用力壓一下，讓折痕出現。

9.

朝折痕剪個小三角凹槽出來。不用太整齊隨變剪剪就好，等等組裝後看不出來。

10.

每一瓣再剪 2 刀讓它變尖，一樣隨便剪剪。

11.

再剪 2 刀讓花瓣變圓一點。隨便剪剪，不要太整齊啊～

12.

小圓重複一次對折、剪花瓣的步驟。

花瓣就準備好了，很簡單吧？不用對得太齊大概剪剪效果比較好喔～

組裝

13.

拿錐子在圓心鑽個洞，沒錐子可以用圓規或刀片，小心不要捅過頭。

14.

拿出一張小圓，穿剛剛打的洞。

長的綠膠帶大約壓住一點小圓底部，開始綑。

只有第一個小圓、和最後一個大圓用長膠帶，其他圓用短膠帶就夠了。

15.

綑完第一個小圓會變成這樣。捆的時候不用太介意花瓣糾結、折痕有沒有對齊的問題，等等 6 個圓全捆上後看不出來。

第 2 片小圓會綑在比第 1 片小圓低一點點的位置，以此類推。

16.

捆完 3 片小圓會變成這樣。注意越靠中心的花瓣要越高。圓和圓之間捆的位置不能重疊，但段差也不要太大。

17.

把第一片大圓也裝上去。

因為大圓比小圓尺寸多了 1cm，綑綁的位置要離小圓有一點點距離。自己大概抓一下感覺。

完成

做完啦！很簡單吧！。

如果剪的時候不把花瓣剪尖，做成圓弧的感覺，最後的成品會長這樣，別有另一番風情。

多做幾種尺寸和花瓣形狀，就可以湊成一束花啦～

. . .

你說我情人節禮物送一束自製的白花？當然沒那麼簡單啊，還沒染色呢！

況且收禮物的是阿宅工程師，一束紙花才不是他們的愛，主體才是重點啊…最後成品亮相時，老公整個呆住說不出話來，感動得不輕的樣子。

很明顯他非常喜歡這個禮物，之後的日子早上起床、晚上睡前都會看到他跑去摸兩下、調調角度什麼的，讓送禮物的我很高興呢～

想知道怎麼把花染色嗎？教學請往這邊走～花只是填空用的，主體其實要往這邊走喔～

上一篇把咖啡濾紙花完成後，這一篇要來教各位怎麼染色囉！（在台灣送白花好像不太妙，染個色比較保險。）

紙花染色我是參考這一篇 Doodlecraft: Coffee Filter Flower Tutorial!，雖然作法不太一樣。

事前準備

之前做好的咖啡濾紙花
顏料（水彩之類，我用墨水）。
大一點的碟子，裝點水。（要確保花整支泡得下去）
水彩筆
衛生紙或抹布。
曬衣夾。

步驟

1.

手邊沒有水彩，我用鋼筆墨水替代。還好只用到幾滴…

這次我用了色彩雫的月夜、邊緣則是用剩下的月夜＋紅葉調的紫紅色。

2.

如果你想做淺色淡雅的花，下手不要太重啊，顏料加一點點就好。

3.

很豪邁地整支泡下去啦…千萬不要，水浸到花瓣 ²⁄₃的位置就要拿起來了，咖啡濾紙吸水性很強的。

記得，花要頭下腳上拿，讓水從花瓣滴下來，不要讓水流到桿子上，會解體的。垂直甩一甩，把多餘水份甩出來。

4.

拿出你的曬衣夾，頭下腳上把花夾起來。

5.

很多花都不是單一顏色，在花瓣邊緣用不同顏色點綴一下會更特別。

我在原本的碟子裡加了幾滴紅葉調成紫紅色。

6.

把剛剛泡過淺色顏料的花拿過來，用水彩筆在邊緣點幾下。

因為咖啡濾紙吸了水，再加上紫色會有渲染的效果，等乾了之後漸層會變得很自然。

7.

一樣頭下腳上夾起來晾乾它！

可以看到有幾朵花我甚至只泡到花瓣一半的位置，底部仍然保留白色。咖啡濾紙很吸水的，打算讓它自己染漸層色。

完成品

花朵完全乾燥後顏色會變淺。

放陽台一個晚上就乾了，因為我趁老公不在家偷偷趕工，所以丟去浴室用暖風機吹了 1 小時接近半乾，再用吹風機硬是在 2 小時內全數乾燥完畢。

趕時間的話可以拿出吹風機，記得要從桿子往花瓣的方向吹啊！不要直接拿吹風機吹花，會被吹炸給你看。

. . .

我的情人節禮物就是這幾支花了嗎？當然不是，花只是填空用的。

宅宅工程師才不會因為收到幾支花就很感動，主體才是重點啊！花是陪襯品。

想知道禮物的主體是什麼嗎？往這邊走喔～紙花製作請往這邊走～

看到這張圖大概就知道我幹了什麼事吧？

對，因為老公是星戰迷，所以我做了一隊白兵＋ Darth Vader 給他。

本來是想要送 Star Wars Bouquet - Darth Vader | ThinkGeek這束的，可是從美國寄來台灣會卡到春節，來不及了，只好自己動手。

紙模下載

感謝 Star Wars Series — CubefoldPopfold讓人下載免費紙模，這還是我第一次接觸紙模啊！幸好這兩款都很好做。

這款紙模 Darth Vader 的頭盔可以拿下來喔！

白兵一臉蠢萌蠢萌…

紙模列印

A4 彩色特殊用紙一張 $15元，也就是說白兵一隻 30 元、Darth Vader 一隻 45 元。

可是我做了 5 隻白兵啊！總共花了 195 元。

印出來的成果很不錯，紙的厚薄也很剛好。

建議用筆刀會比美工刀省力。

網路爬文建議用白膠，我偷懶用了雄獅口紅膠，黏得還算牢，但心理不踏實。第 2 隻之後都改用相片膠…乾得很快也很牢，但相片膠會牽絲，不小心就會在紙模身上粘點黑渣渣…算了，白兵總是要點戰鬥的痕跡，還好不明顯還很自然。

最後…

Darth Vader 是重頭戲啊！所以我留到最後一隻才動工，先把 5 隻白兵完成。

當做完最後一隻的時候，腦力專注力已耗完，不知道當時在想什麼，偷偷玩起白兵疊疊樂…

將紙花染成藍色是為了襯托白兵。

白花加上白兵，白兵會被花吃掉。

. . .

最後的包裝我弄得有點慘，已經半夜 1 點了太疲倦動不了腦袋。

. . .

我把淺藍色和深藍色的包裝紙順序弄錯了，而且也不是照預期的包裝…

黑武士被深藍色包裝紙吃掉了＝＝

算了，起碼還有模有樣，當初設計就是讓老公收下 Star Wars 情人節花束，拍個照，然後把花束拆了，紙模拿去當居家擺飾。

. . .

目前暫時讓它們窩在水波爐上面。

我有注意到這幾天老公出門上班前會去調一下紙模角度、摸摸 Darth Vader 的頭再出門。看來他真的很喜歡今年的情人節禮物。

紙花製作請往這邊走～想知道怎麼把花染色嗎？教學請往這邊走～

補充：UI/UX 設計師在工作上不會用到 Rails，這是個人學習。（寫程式也不是我的興趣，只是覺得先學起來放…而且學得很痛苦就是了。）非常不適合完全外行的初學者來上這門課，除了打一堆指令碼外，不主動纏著助教問是不會懂「為什麼」，外加初學者嫩到就想問問題都不知道從何問起，只能從背指令開始。

UI/UX 設計師為什麼要來學寫程式，自己要先想清楚啊！

去年年底我就報了這個班：Rails 商務網站 x 即戰力 - 2016 春季班（二班）（三月） by Xdite

聽說 5 小時就賣光了，下一班很多 UI/UX 設計師報名。<<< 這不是重點

重點是，如果你不做課前練習，設計師 100% 掉隊跟不上學習進度！

上課目標就從「做一個會動的網站」大幅降低成「只要搞懂工程師會怎麼做」就好。

嗯…結果好像沒我自己預想得這麼悽慘。

如果你是連 HTML 和 CSS 都不會的設計師，因為我的關係所以跌坑來學 Rails 的話，恭喜你，這是痛苦的開始。

前導作業一定要寫，每週二與四都有 Rails 新手帶練與指導，請巴住助教不放。

學費很貴，不要浪費，有問題就問！

學習方式

初學者，寫 Rails 的基本常識都不夠，不要想著先搞懂為什麼再來練。和念英文一樣，單字量不足的情況下想寫什麼英文文章？

用肌肉記憶啦！

老公常跟我念這句：「憑妳的知識量，就算我解釋了妳也聽不懂。」

還在 2x1=2、2x2=4 學數學的人，要解釋微積分給他聽，要從哪裡開始講？得花多少時間？

要在短時間內上手某項技術，從最快的情況是直接實作，犯了幾次錯、有了點經驗，心裡有幾個想問「為什麼」的問題，再回過頭找解答補完。

所以先不要問為什麼要這樣做，先照作個會動的東西出來，有了成就感，就有動力繼續下一步，學習效率高很多。

做久就知道為什麼了。

我自己在學 UI/UX 的時候都抱持著這樣的想法：

「我寫得出像 XXX 大神那樣的文章嗎？當然寫不出來啊，那為什麼不照他說的做？」「幹、XXX 大神說是怎樣就怎樣，我是比他強嗎？沒有啊，那為什麼不聽他的話去做？」「實際上寫程式的是工程師啊，我自己遇到問題不確定、當然是他說了算，不然聽我這個大外行瞎猜嗎？」

覺得大神好笨怎麼沒想到這點、自以為有小聰明想偷懶抄捷徑，之後都要還債…（過來人經驗）

教寫程式的課這麼多，為什麼報這班？

我跟老公吵架。

老公也是寫 Rails 的，請他教寫程式…結果我太新手太犯蠢，被罵到淚奔，說這輩子學不會，氣到我看到開課訊息就掏錢報名下去了。

缺點：作業量非常很大、教學進度很快、回家不練習等於浪費錢、完全不知道為什麼會動就把東西做出來了。
優點：有人盯著你去學習、不懂隨時可以抓人問、有人設計好循序漸進的一套課程照做就是了、上完課拿得出實際會動的作品。
缺點：雖然你用貼指令貼完一整套會動的東西，你還是不知道為什麼會動。

我自己給這門 Rails 課的評價是：短時間內學得到大量技術，但過程太痛苦了＝＝” 會動是會動，但不會懂為什麼，熟悉一堆指令碼後就要靠個人額外學習了。

便當

聽說「便當」惹出不少爭議，害我既期待又怕受傷害。

便當看起來普通，但比預期的好吃。附上店家資料上旺廣鳳粵菜燒臘。

收到太多這類的私訊或 Mail ，問 A 補習班好不好、B 課好不好、C 班好不好的，一併在此回答，自己判斷啊。

因為我自己有開 UI 入門班，這文寫起來很業配，怎麼看都像是在貶低別人、自抬身價。

明知道我有自己的班還扔其他單位的開課訊息問意見的人真不知道在想什麼，想從我口中得到什麼答案？

判斷條件

初學者想當 UI/UX 設計師，想報名課程加快學習腳步沒什麼不好，但你想報的課程，是 UI 課，還是「視覺設計課」？

教 UI 的課有沒有教互動？

前端技術

UI 和前端業界大多拆成 2 個職務，UI 會的前端技術精不到哪去、也不需要太精，甚至完全不會也沒關係。反之 F2E 寫程式是另一個世界。

HTML、CSS、RWD 會寫有加分，但不會寫也不會怎樣。JS、jQuery 讓專業的 F2E 們去處理。

教 APP、Web 的 UI 班，課程內容包含 Flash 的不要去

先想想現在業界還有沒有在用 Flash，以及這項技術未來發展趨勢如何吧。

Flash？看 iPhone、iPad 支不支援啊～

Adobe 自己都放棄 Flash了…

教軟體操作不等於教你 UI

教 Illustrator 的軟體操作課

教 Sketch 的軟體操作課

這個看個人取捨，不是什麼好或不好的條件。但我建議想從 0 開始學起的初學者，不要（因為比較潮）一出手就碰 Sketch。

UX 班要教「研究方法」

你可以把研究方法當成「做實驗」，沒教你怎麼做實驗的 UX 班不是 UX 班。

從目錄就可以看到一堆研究方法的名字，像 A∕B測試、腦力激盪組織圖、卡片分類法、眼球追蹤、意象看板、狩野分析、心智圖…等。

這些才叫「研究方法」，怎麼樣研究、分析使用者或產品。如果標榜 UX 班卻沒教你「研究方法」，都在講介面設計，那還是改名字叫 UI 設計班吧。

雖然我覺得市面上絕大多數的 UI/UX 課程其實都是「視覺設計師養成班」。

學技術前先想清楚自己未來的方向

前端歸前端，網頁程式技術學一學出來你會變成 F2E 不是 UI 設計師。
幾套軟體操作學一學、不知道什麼是互動，你會變成視覺設計師或平面設計師，不會變成 UI 設計師。
Flash 學一學…會跑去遊戲業或廣告業！資訊業很少用 Flash了。

延伸閱讀：如何挑選研討會或課程講座

之後我不回答任何類似「XXX課程好不好、推不推」的問題。問這問題根本想害我得罪人＝＝

我看了這個新聞：直擊！魏應充兄弟跪求鑽轎　白沙屯媽閃開。

頓時好奇了起來，媽祖娘娘是怎麼指示抬轎人不給魏應充兄弟鑽的？

如果是抬轎人的自主行為，就和媽祖無關。如果是媽祖指示…她怎麼指示的？不太理解。

感謝朋友們說明

球球：「控制的是轎子中間前面那根”頭籤”，頭籤會壓轎夫的肩膀指示方向。」 Daphne：「[東森新聞HD]白沙媽祖繞境「感應指示」神轎班遶境路線 by 東森新聞 CH51」

（影片1:12左右）媽祖娘娘常突發奇想到處跑、沒有既定的路程沒有事先的規劃，扛轎辛苦加倍。（影片1:23左右）2001 年媽祖帶著上千人橫渡濁水溪，全數平安通過。

以下是嘴砲

完整看完影片後，覺得媽祖娘娘不愧是神，但某些 PM 或 Boss 更神。

人家是神明、是魔法少女，才能在沒有事前規劃或預定行程的情況下衝了，有廣大神通力保佑信徒全程平安。一般凡人咧？

如果作業用 BGM 剛好在放閃靈的元千歲-暮沉武德殿(民謠版) ，真的會跟著含淚大吼「萬劫不復～萬劫不復～萬劫不復～」。

這時候 UI/UX 講什麼易用性、使用者都沒用，產品策略方向不對就是燒錢打水漂。身為小螺絲、有經濟壓力的基層員工能怎麼辦？

拒用頂新集團下的所有製品啦幹！

收到一封 Mail，其中提到幾個關於設計流程和 Prototype 的問題。

UI設計流程:Wireframe->低保真Prototyple->Mockup->高保真Prototyple 這樣的流程是對的嗎?

Wireframe 為什麼會長這樣？在 Wireframe 之前還有哪些事要做？

全部都靠通靈。

所以執行專案期間都在改來改去，撐到最後一天總是可以結案就解脫了嘛，再開始下個改來改去的輪迴。

開發流程

基本上我自己在開發產品的流程大致上不會脫離這張圖太遠。

User Story
Functional Map
Flow Chart
UI Flow
Wireframe
Mockup
Prototype

各家有各家的作法，沒有標準或正確一定要這樣做的流程，但我在做自己的玩具時都會這樣幹。

有 UX 團隊的大公司會把上述流程拆的更細，還會做使用者研究之類；一人 UI/UX 通包的小型團隊…這 7 項是最低一定要產出的文件，依個人想偷懶的慘痛經驗，再刪除精簡化就會在執行專案的過程中漏東漏西，之後補洞反而花更多時間和心力。

1. User Story

功能怎麼來的？從「使用者要什麼」或「客戶預期使用者想要什麼」開始。依使用者的身份不同，想要的功能也會不同，完成的任務不一樣嘛。

比如「Blog」：

我是讀者，我要看到這位作者寫的所有文章。我是作者，我要撰寫並發佈文章。我是平台提供商，我要看到所有會員身份和繳費狀態。

這三種身份對「Blog」這項產品的需求和預期完全不同。

2. Functional Map

3. Flow Chart

當開發者知道使用者想要什麼、也有了功能，才有辦法思考「使用者怎麼操作功能完成他的任務或達到目的」。

4. UI Flow

知道使用者會怎麼操作一項功能時，才有辦法規劃操作動線。UI Flow 指的是頁面與頁面之間的操作流程，使用者想完成任務會經過多少頁面之類。

有另一位讀者傳訊問道，為什麼我之前的文章說不要用圖片版的 UI Flow、要用文字版的呢？

第二，當你的產品頁面一多的時候…也不用太多，20頁，用圖片串出一個 UI Flow ，這個 Flow 圖表尺寸有多大張？誰有那個心力在一張大圖上用手掌工具來回移動看頁面走向？

要靠猜猜看才會看懂的文件看它（寫它）幹嘛？不要浪費時間啊。

文字版的 UI Flow 我拿來當「目錄」用，對照 Wireframe 的編號，找圖看細節的時候快。圖片版的 UI Flow 我會用在「優化」舊產品的操作時使用，連接線會從「元件到頁面」，而不是「頁面到頁面」，並在圖片和線條旁邊寫上文字說明，才會知道哪個步驟可以省略或修改得更易於使用。

5. Wireframe

一開網頁就自動出現廣告、還是開啟網頁後等個3秒才出現廣告？廣告出現10秒自動消失，還是要按(X)按鈕？網頁停止30秒沒有操作要不要出現廣告？

Flow Chart、UI Flow、Wireframe 這三份文件寫到一半發現什麼東西漏掉回頭補上是正常現象，不可能一次到位。

6. Mockup

視覺稿…照 Grid 和 Guideline 做吧，之後還有切圖和標示文件要弄。

好處是切圖和標示文件都有外掛工具可以代勞，甚至設計師只要顧好原始檔、切圖和標示文件都用 Avocode或 Zeplin解決。

壞處是，如果不太知道技術限制，做出來的東西工程師不能用就算了，他們還白挨設計師的罵。

「為什麼你做出來的東西和我畫的差了幾px？」「拜託！RWD 不可能完全和你畫的一模一樣好不好？」「是你能力不夠還是偷懶？我的圖畫得出來為什麼你做不出來？」「幹…」

7. Prototype

那位讀者問另外問了關於 Prototype 的問題：

高保真Prototyple是在切圖給RD之後製作，那做出來的用意是在RD程式還沒完成前再次確定操作上有無任何問題嗎? 那高保真Prototyple就是跟成品長的一樣還可以操作囉??

Prototype 要可以被操作！ Prototype 要可以被操作！ Prototype 要可以被操作！

不能被操作的都不是 Prototype。

Wireframe 可以做 Prototype，低保真原型。 Mockup 可以做 Prototype，高保真原型。切圖叫工程師寫程式套版做一個，高保真原型。

我自己大多做完 Mockup 後才會出 Prototype 測試。因為，Wireframe 做的低保真原型一般使用者看不懂也沒感覺，沒辦法做使用者測試 =_=

Wireframe 做的 Prototype 頂多內部測試吧，但內部測試常常不太准，工程師和設計師的思維和一般人不一樣，測一測重點常常歪掉…

補充說明

另一位讀者看了本文後若有所感，傳訊跟我討論了下。

今天也和老闆談了是否要有 Functional Map 和 UI Flow 等等這些流程，讓我們在前面討論的時候就可以釐清，而不是在視覺稿才修改增減，他也直言我們沒有那麼多時間無法照這樣流程，真的很無力…

沒有那麼多時間無法照這樣流程？當然啊，因為要把時間留在後面改來改去嘛～～～～～

時間總是要花的，看是花在前期規劃還是後期補洞而已。說沒時間無法照流程的是根本沒流程可以照吧。

想逼走員工、降低團隊士氣，盡量亂改沒關係，反正大家都知道亂改的那個人連自己要什麼都不知道只好胡亂張嘴下指令。

以下是廣告宣傳

如果你對上述 UI 設計流程有興趣，我會在課堂上詳細講解，並帶學員完整跑一遍流程，實際動手寫課堂練習。

歡迎公司派人來受訓。課堂上會講到不少專案流程和團隊合作的技巧，絕對可以感受到來上課的同事脫胎換骨突然升了好幾個等級似的（喂）。

更詳細的課程資訊請見高雄－6月份 UI 設計師入門班