UX designer 的好朋友：一個讓你「好像」瞬間變專業的 checklist

最近和某個設計師有段有趣的對話，行走江湖那麼久，很多時候我們因為自己多吃了幾年飯而覺得自己很 senior，事實上其他人卻好像完全不是這麼想 … 到底該怎麼定義 senior 與 junior 呢？

許多人認為資深跟資淺的差別是在於腦子是不是比較靈光，比較有創意有想法 … 我卻有不同的想法，憑良心講，很多時候我覺得 junior 比我們這些老人更有創意，因為沒有包袱跟過往經驗的束縛，他們更能提出有意思的 idea，就好像設計師跟凡人的差別從來也不在於設計師比較 creative，而在於設計師能夠將那些創意具體化的實現，而凡人卻無法。

 

既然如此，junior 和 senior 的差別是什麼呢？

過去我會回答「是經驗，差別在於經驗」，這兩個字聽起來很抽象，經過和大量不同 level 與國籍的設計師交流後，我發現造成兩者之間差別的「經驗」，其實是體現於「對於細節的執行程度」。

「你的意思是說 senior 做事情比較仔細，而 junior 比較隨便嗎？」

一個 junior 的同學憤恨不平的說。

 

沒錯，我就是那個意思（沒有要掩飾）！ fancy 的想法人人都有，卻不是每個人都有辦法將這個想法在經過周密的思考後，general 成真正可執行的設計，一個無法將想法 break down 到細節的設計師，恕我直言，你就只是個 PM 而已， 俗語說得好：「少壯不努力，老大當 PM」就是這個道理（毫不意外，每次都要酸一下 PM 就對了）。

「我覺得我自己超仔細的！仔細小天王就是我！」

另一個 junior 已經在一旁暴跳如雷了。

 

很多 PM 也常以為自己的想法超棒，一秒鐘 drive 幾千萬上下 … 但事實證明，這世界上不是只有「你以為」而已。

坊間有太多的演講跟書籍教我們要如何 think big，卻鮮少有人告訴我們該怎麼 dive into details，事實上那卻是最基本，也是最容易用最快的速度讓對方覺得「你真的好專業」的方法，有鑒於每次 internal review 我家小朋友的設計時，我都會重複的拋出一樣的考古題，我特別為他們做了一個 check list，讓他們每次在進行 review 前都先確認自己已經完成了 check list 上所有的項目，而這個 check list 名字，姑且就稱之為「一個讓你 ”好像” 瞬間變專業的 checklist」。

 

分享之前先註明兩件事：

1. 我們家的 UX designer 負責的是 interaction + visual design，所以這些 check list 上的 item 會涵蓋兩者。
2. 這東西真的是給 junior 看的 common sense，身為 senior 的新警察如果覺得沒啥用，麻煩把警棍跟電擊棒收好。

 

在與你的主管或是 stakeholder 進行 design review 之前，請先確定以下所有的 item 都已經完成：

• 如果你只是想討論 concept 而不是完整的設計成品，請用 wireframe
• 開始製作 mockup 之前請先確定這次 review 的目的是什麼？因為一旦你 present 時使用的是擬真的 mockup，所有人都會瞬間開始 dig 所有的細節。確定這次的presentation 真的要使用擬真 mockup 之後，請確定接下來的每一項都有確實完成。
• 所有在 mockup 上的 element 都請保持合理的 margin 和 padding
• 任何很奇怪或是沒有對齊的突兀元素都會讓你的 mockup 看起來很不專業。
• 不要出現無效的連結
• 確認所有的 link 都確實可以點擊，特別是那些跟你 presentation 相關的功能
• 盡可能地 follow 公司制式的 design guideline 和 pattern
• 不會有人覺得在明明已經有這樣的 pattern 的情況下你還硬是要設計一套新的是一件很 cool 的事情，只會被覺得「真是個 junior」。
• mockup 上盡可能使用公司產品中真正會出現的圖片
• 不要使用圖庫裡那些極度美麗的圖片，因為 whatever 上線後根本不會長那樣，你只是在騙自已，很多時候你的 mockup 看起來很乾淨簡潔只是因為用了那些失真的圖片。
• 盡可能地考慮每種 use case，即使是很極端的 case，不要 propose 只給完美 use case 的 solution

 

這裡有幾個可以作為 check 的參考：

• 圖片的形狀：當圖片是動態生成的時候，我的 mockup 在放了 長=寬、長>寬、長<寬 的圖片是什麼樣子？
• 字數和產品數量：當文字或產品數量是動態生成的時候，最多跟最少的數量限制是多少？
• Responsive design
• 尚未進行任何設定時，這個產品 by default 的 experience 是怎樣？
• 當產品是要靠動態生成 content 時，沒有 content 的 experience 是怎樣？
• 第一次使用這個產品的用戶的 experience 是怎樣？

確定你已經盡可能地思考過所有的 error handling，無論是用哪種工具，確認你的文件有著非常有組織，任何人都能一目了然的 flow。有些時候你就是無法站在所有 stakeholder 面前 present 你的設計理念，他們很有機會會用 email 的方式拿到你的設計，確定你的設計在那個時候他們還是看得懂。

 

真的不需要做出超級擬真的 prototype

Prototype 只是一個幫助溝通的工具，如果你真的做不出來就不要做，不需要花很多時間在上面，那種時候只需要做一些靜態的 mockup 然後描述清楚你想要的 interaction 就可以了。

如果你想要在 mockup 上放 icon 或是插畫，double confirm 你是不是真的需要他們！

icon 和插畫在 UI 上是被拿來幫助人們更了解這個功能的含義，這世界上沒有比直接用文字寫出來更好的方法，如果你 icon 的存在沒有辦法幫助 user 辨識，請不要放。

這裏有個錯誤的案例：

 

在這個案例裡，基本上甚至沒人注意到那些 categories 旁邊有放 icon，user 也無法只透過那些 icon 了解它的含意。因此，一旦你擁有使用 icon 或是插畫的慾望，請先確定你的情況有沒有符合以下的情境：

• 空間很有限實在放不下文字，必須得用一些比較小的 icon 來表現。
• 這是一個通用的 icon，完全不需要提示的情況下大家都能了解那是什麼（像是 download 的 icon）
• 文字實在太多了，有些比較重要的部分需要用插圖來吸引人注意。

 

不管是 icon 還是插畫都是用來直接傳遞 key message，不管這個 icon 畫得有多麼漂亮，只要 user 無法立刻知道他的意思，那它就 fail 了。確定非用 icon 不可之後，這裏有一些設計 icon 時需要注意的小技巧：

• icon 必須要清楚簡潔，不要放一大堆不相關的元素在裡面，即使很漂亮也不行。

在這個案例裡，key message 是「資料分析」，即使 A1 這個 icon 比較漂亮也比較完整，但是其實光看到 A2，user 就已經能夠抓住含義了，筆電的圖在此處的存在實在沒什麼必要，反而會有點失焦。

在這個案例裡，即使這三個 icon 的意圖都是要傳達用戶可以透過電腦做某些事情，但是當這三個 icon 放在一起的時候，你會發現電腦的存在真的很重複，試著把不斷重複/相關度較低的元素刪掉，將重點 focus 在這些 icon 之間跟彼此不一樣的 metaphor。

–

• 如果你需要需要一整個 set 的 icon 或是插畫，確保這些 icon 彼此之間的 style 是一致的，這裏有一個不好的案例：

很明顯的，最右邊那個 icon 完全不是同個家族的，不管他被設計的有多漂亮，都會讓人瞬間有種「真的很不專業」的感覺。

–

• 一旦大部份的人都無法一眼看出你設計的 icon 是什麼意思，那就意味著這個 icon 真的不 work，別再掙扎，用文字就行了！這裏有一個不好的案例：

毫無疑問的，紅色框框裡面那個 icon 我到現在都不知道是什麼意思？是鋼筋水泥的鳥瞰圖嗎？

–

以上是我目前能想到的一些幫助 junior 工作的小撇步，如果能夠養成習慣在 present 設計前先 walk through 一遍這個 check list，present 過程中再適時的夾雜幾個感覺很高大上的英文單字（但是英文的數量要控制好，量太大會有反效果可能會被討厭）… 保證可以讓人瞬間有一種「這個人好像很 senior 耶」的感覺。

然而如果你皺著眉，說這個 check list 好長，有沒有更精簡的版本？唔，那你可能比較適合去當 PM。

–

本文章已獲得作者 Kit Lin 授權，原文：UX designer的好朋友：一個讓你「好像」瞬間變專業的 checklist。

 

本文章所屬設計大舌頭與作者所有，未經授權，不得轉載！如需轉載，煩請通知。