當你在努力刻 UI 圖的時候，腦海裡浮現的畫面是什麼樣子的呢？

是不是專注在頁面細節上呀？

有沒有畫著畫著，總覺得自己好像漏掉什麼了的感覺？

我想跟你分享我的經驗，讓你 4 步驟擁有更專業的全局視角來做UI設計。

第一步，純UI。

當你努力刻 UI 圖的時候，腦海裡浮現的畫面是單純的 UI 畫面嗎？

如果你腦海裡只有這個畫面，那很容易漏東西喔！

因為單純的一張「UI 頁面」，其實只是張靜態圖片，

但使用者的操作是動態的呀！會有前一步、後一步，他在這個頁面上做了哪些動作？

當你專注在細節上，動作就容易被遺忘，很容易沉浸在靜態頁面裡而忘記頁面的變化。

第二步：UI＋手指。

為了避免我們把UI當成純靜態圖片在設計，剛開始可以先練習在腦海裡加上一根手指。

這隻手指代表使用者的操作，提醒你 UI 是可以動的，和使用者之間有互動的。

使用者點了哪裡觸發、畫面因此給他回饋有了變化。

前一步是什麼、後一步點哪裡？使用者怎麼到這一頁的，又在這一頁上有多少地方可以戳？

在腦海裡加上一根手指在介面上操作，就能讓自己記得把「互動」考慮進去
。

第三步：UI＋手指＋人物背影

你知道什麼是越肩視角嗎？就是站在主角背後，越過他肩膀看到前方的景色。

你可以想像的出來，看到一根手指操作介面的同時，也能看到這個人的背影嗎？

畢竟是在自己腦海裡想像，不用受到現實物理的攝影機角度限制，完全可以像電影「全面啟動」那樣多角度折疊空間你說是吧？

在這個步驟透過人物背影，你會代入 Persona 的概念，也就是人物誌。

需要什麼元件來幫助她完成任務呢？她喜歡或是習慣看到什麼？

你覺得這個人物的背影是男是女？年輕人還是老人？學生還是上班族？

光是一個背影就能包含很多人物資訊你說是吧！

不同使用者的操作和習慣完全不同，這也是我為什麼會推薦你可以透過UI＋手指＋人物背影的方式，邊畫 UI 邊留意使用者是誰。

第四步：UI＋手指＋人物背影＋街景

對！這個步驟就在講情境了。

使用者在不同場景使用同個 APP 的心態和方式都不太一樣，我們是不是能加上「街景」來思考使用者的情境呢？

使用者在這個情境下怎麼和操作這個介面？

這個介面要怎麼和使用者互動？

甚至使用者在這個情境裡，會受到哪些人事物的影響而分心呢？

舉個例子，這張照片，你覺得是什麼樣的人物、站在什麼地方呢？

看起來是女性，年輕人，也許是學生，或是背包客，是夏天的歐美國家街頭。

這時候她會怎麼操作地圖導航APP？和在餐廳邊吃飯邊查詢的方式一樣嗎？

如果你能從第一步前進到第四步，恭喜你，你思考UI設計的方式肯定變廣變深了！

• 第一步：純UI
• 第二步：UI＋1 根手指
• 第三步：UI＋手指＋人物背影
• 第四步：UI＋手指＋人物背影＋街景。

到了第四步，你就擁有更專業的全局視角來做 UI，像呼吸一樣自然地站在使用者的角度來思考唷！。