這篇是承接之前所寫的文章，如果沒看過建議可以稍微瀏覽一下，會比較知道全貌。
UX 1: UX Design Process & User Research、
UX 2: Competitive Analysis & Persona、
UX 3: Define Problem & Ideating、
UX 4: Feature Prioritization
Sketching & Testing
Sketch是在整個UX流程的第三階段，Placement & Layout Design，去面試UX Designer時，很常都會被要求立刻畫出一個Sketch，可以用下面的小範例練習一下，最後你就能完整個畫出Visual Alphabet。
1. 準備紙跟筆，按照我下面打的幾個項目去練習這些圖，用簡單的線條表現即可
2. 點(Points)、線(Lines)、角度(Angles)、圓弧(Arcs)、螺旋(Spirals) 、圈(Loops)、橢圓(Ovals)、眼睛(Eyes)、三角形(Trangles)、矩形(Rectangles)、房屋(Houses)、雲(Clouds)
在UX Design內，你可以用這些形狀畫出任何你想要的設計，下面也是我隨意畫的啦。
當你要開始畫Sketch的時候，記得要把user flow時時刻刻拿出來對照，因為它能夠幫助你專注在每一個使用者需要下決定和完成的步驟。這邊提一下Screen Flow，和user flow非常類似，主要是每個步驟都透過一個最低保真度的原型(Wireframe)來展示。
接下來，你可以透過以下的步驟來嘗試畫畫看你的screen flow：
1. 準備紙筆
2. 打開之前畫的user flow 作為畫sketch的引導
3. 每一個user flow都畫一個sketch
4. 在每個screen下面加一小段的文字去解釋它
這邊有幾個在畫sketch時的小技巧：
1. 給自己設定一個10分鐘限制，並在有效的時間盡可能的多畫sketch
2. 不管是行動版或是網頁版本，都要幫你的產品畫sketch
3. 越簡單清楚越好
每一個紙上的sketch都可以拿來做測試，而且測試越早做會越好，即Paper Prototypes，就是你手畫的設計介面。下面這個也是我畫的範例，我用的產品是SketchyNotebook，專門用來畫產品原型的，它有很多不同的墊板和筆記本可以畫，我覺得蠻好用的。
Paper prototypes 有幾個好處：
1. 能夠快速的integrate，丟棄一個你不要的sketch只會花你兩分鐘，而不是兩小時去改寫code
2. 省成本，只需紙、筆，如果以真的想要搞得很複雜，可以去買一些貼紙之類的輔助工具
3. 能夠及早測試，還記得UX Design Process的流程嗎？我們現在是停留在placement & Layout
Discovery & Research >
Synthesizing Research & Design Strategy >
Placement & Layout Design >
Execution>
Usability Test
畫完paper prototypes後，可以開始準備測試了，大致上也會跟著以下的步驟走：
1. 招募測試的使用者
2. 找一個安靜的地方來自己測試
3. 重新的排列原型，並確保畫面的流暢度像真的可以使用的產品
4. 測試過程中記得錄音或錄影
5. 把第一個screen flow 放在測試者的面前
6. 請他完成這個task
下面這是我自己畫的paper prototype
想知道更清楚過程，可以看這個Example of Usability Test With Paper Prototypes來更清楚知道怎麼做paper prototypes的test，蠻推薦看這個影片，(小女孩超可愛的)，用文字說明可能沒辦法那麼清楚。
測試結束後，盡量快點重聽、做筆記和寫下insights，insights要包含：
觀察 (Observations)： 你看到聽到什麼？有什麼讓你很驚訝的？
洞見 (Insights)：從觀察中主要學習到什麼？
建議的設計 (Design Recommendations)：這些洞見要如何放到設計內？
往下繼續 (Moving Forward)：有什麼議題或主題是需要進一步探討的？
做完test後，應該會知道有哪些地方需要做改善，選擇能夠代表用戶痛點的screens，並重新畫能夠針對這個痛點的screens。如果想要讓sketch能夠有互動性，可以去用Marvel app，是免費的，能夠快速利用草圖做出原型。
Information Architecture
進到這個進度後，了解要如何引導使用者使用或如何呈現資訊、內容與功能，就是Information Architecture (IA) ，讓使用者知道如何做可以達到他想要的目標。
而IA的主要呈現方式不是wireframe或prototypes，而是透過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，在教育界很有名，人類運用知識從記憶到創造的一個分級。
來源：Google Search
3. Sitemap，如何去組織和架構你的網站內容或是應用內容，也是利用diagram的方式，開頭總是最重要的首頁，例如，把臉書app打開，會發現先進入首頁，接著最下面那欄有news feed, friends, messenger, notification, more，這些是在homepage底下的subcategory。
此外，Sitemap和user flow是不同的東西，是表達頁面之間不同分級的關係，而user flow是展示用戶如何在網站上完成其目標所需要的步驟、過程。再舉個例子，大家都有去逛百貨公司的經驗，通常都會有一個大型的平面圖展示哪區是賣什麼的，那種大的平面圖就是sitemap。
來源：Google Search
為什麼要做sitemap呢？
1. 顯示應該要如何建構網站或app
2. 理解應該要創造什麼樣子的內容和這些內容應該要被放在哪裡
3. 釐清不同頁面之間的關係
4. 提供清楚的架構，讓你知道從哪裡開始和發展
5. 實際得列出你之後會如何發展產品
知道如何sitemap作用和如何閱讀後，那該如何畫出sitemap咧？有兩個方式
Reverse engineer an existing product
如同字面上的意思，根據現有的sitemap去做改善，可以參照以下的步驟來練習：
1. 設定5分鐘時間
2. 用手機去找一個網站
3. 截圖後，自己嘗試的去畫出目前的sitemap
4. 重新思考，哪裏需要被改善
例如，這是我下載BBC的app，自己嘗試畫出的sitemap，簡陋版本
Create one from scratch
至於這個方法會需要用到一種方式叫做card sorting的方法，這我下一篇會寫Card Sorting & Navigation，會更清楚的細寫如何用card sorting做出sitemap。
希望目前的東西對大家都有幫助哦，有任何想交流的都可以去我的臉書來交流Ian Weng或是Linkedin
如果想要了解更多，可以看以下的文章：
BoxesandArrows
IA Institute
General Assembly
ianwengblog 