這篇文章承接之前所寫的文章，建議可以由第一篇開始閱讀，較能了解 UX 的全貌。
Sketch 是在整個 UX 流程的第三階段 – Placement & Layout Design，去面試 UX Designer 時，很常都會被要求立刻畫出一個 Sketch，可以用下面的小範例練習一下，最後你就能完整個畫出 Visual Alphabet。
在 UX Design 內，你可以用這些形狀畫出任何你想要的設計，下面也是我隨意畫的啦。
當你要開始畫 Sketch 的時候，記得要把 user flow 時時刻刻拿出來對照，因為它能夠幫助你專注在每一個使用者需要下決定和完成的步驟。這邊提一下 Screen Flow，和 user flow 非常類似，主要是每個步驟都透過一個最低保真度的原型 (Wireframe) 來展示。
接下來，你可以透過以下的步驟來嘗試畫畫看你的 screen flow：
這邊有幾個在畫 sketch 時的小技巧：
每一個紙上的 sketch 都可以拿來做測試，而且測試越早做會越好，即 Paper Prototypes，就是你手畫的設計介面。下面這個也是我畫的範例，我用的產品是 SketchyNotebook，專門用來畫產品原型的，它有很多不同的墊板和筆記本可以畫，我覺得蠻好用的。
Paper prototypes 有幾個好處：
Discovery & Research > Synthesizing Research & Design Strategy > Placement & Layout Design > Execution> Usability Test
畫完 paper prototypes 後，可以開始準備測試了，大致上也會跟著以下的步驟走：
下面這是我自己畫的 paper prototype：
想知道更清楚過程，可以看這個 Example of Usability Test With Paper Prototypes 來更清楚知道怎麼做 paper prototypes 的 test，蠻推薦看這個影片（小女孩超可愛的），用文字說明可能沒辦法那麼清楚。
測試結束後，盡量快點重聽、做筆記和寫下 insights，insights 要包含：
做完 test 後，應該會知道有哪些地方需要做改善，選擇能夠代表用戶痛點的 screens，並重新畫能夠針對這個痛點的 screens。如果想要讓 sketch 能夠有互動性，可以去用 Marvel app，是免費的，能夠快速利用草圖做出原型。
進到這個進度後，了解要如何引導使用者使用或如何呈現資訊、內容與功能，就是 Information Architecture (IA)，讓使用者知道如何做可以達到他想要的目標。
而 IA 的主要呈現方式不是 wireframe 或 prototype，而是透過 spreadsheet 或 diagram，可以看下面的範例圖：
如果想要更好地理解 IA，可以透過更仔細的去觀察實體世界，舉機場為例子：地圖和標誌非常的重要，因為能夠幫助旅客快速的找到搭機地點或是領行李，但如果這兩者很不清楚，則會讓整個機場秩序大亂、旅客找不到地點、延遲上飛機、延遲飛行等。
Frog Design 的這個機場標誌例子，我就覺得非常的清楚，見 Wayfinding and Signing Guidelines for Airport Terminals，在過去，人們總會以為跟方向有關的設計，最好就是把所有的路徑都呈現出來；不過越是複雜的方向、路徑問題，最好用越簡單的方式呈現會更好。我舉這個例子可能看似和 UX 沒什麼關係，但是它所呈現資訊的方式，卻和 UX 的精神是不謀而合的，越好的設計，是越能夠讓人出於直覺來使用。
那在做 IA 的時候，有以下幾個工具會用到：
1. User flow，見 UX 3: Define Problem & Ideating 裡面之前有寫過
2. Taxonomy，是人們展示如何分級、展示資訊的，下面這個是知名 Bloom 的 taxonomy，在教育界很有名，人類運用知識從記憶到創造的一個分級。
3. Sitemap，如何去組織和架構你的網站內容或是應用內容，也是利用 diagram 的方式，開頭總是最重要的首頁，例如，把臉書 app 打開，會發現先進入首頁，接著最下面那欄有 news feed, friends, messenger, notification, more，這些是在 homepage 底下的 subcategory。
此外，Sitemap 和 user flow 是不同的東西，Sitemap 是表達頁面之間不同分級的關係，而 user flow 是展示用戶如何在網站上完成其目標所需要的步驟、過程。再舉個例子，大家都有去逛百貨公司的經驗，通常都會有一個大型的平面圖展示哪區是賣什麼的，那種大的平面圖就是 sitemap。
為什麼要做 sitemap 呢？
有兩個方式：
如同字面上的意思，根據現有的 sitemap 去做改善，可以參照以下的步驟來練習：
例如，這是我下載 BBC 的 app，自己嘗試畫出的 sitemap，簡陋版本
至於這個方法會需要用到一種方式叫做 card sorting 的方法，這我下一篇會寫 Card Sorting & Navigation，會更清楚的細寫如何用 card sorting 做出 sitemap。
希望目前的東西對大家都有幫助哦！有任何想交流的都可以去我的臉書來交流 Ian Weng 或是 Linkedin。
如果想要了解更多，可以看以下的文章：
本文章已獲得作者 Ian Weng 授權，原文：UX 5: Sketching & Testing & Information Architecture，出處： IANWENG9。
本文章所屬設計大舌頭與作者所有，未經授權，不得轉載！如需轉載，煩請通知。