好文分享：從使用者到APP頁面設計準則

berylgobby

文、Cho Chih-Yuan



原文網址

洞察使用者旅程是連結視覺設計與設計準則的關鍵

因為不能公開客戶的頁面，所以拿網路上的wireframe kit來舉例示意

從企劃拿到提案，順完wireframe之後，常常是有百來張的APP頁面需要進視覺設計，視覺設計師常常就認份的一頁一頁的刻UI，然後，而從上次的專案中，我們團隊整理出比較簡單有系統的製作方式，分享給大家參考。

把類似的頁面整理在一起，我們將客戶的135頁APP頁面，整理成13類，感覺起來處理13類的頁面，就比要做135的APP簡單許多。

但是13類還是太多了，我們再從這13類中再分類，重新排列後發現可以整理成使用者旅程不同階段的形式，從使用者發現APP→閱讀理解→學習試用→使用功能分成四個階段，從使用者陌生到熟悉的狀態過程來排序這13類的頁面。(每個APP功能不同，分出來的大類也不一定相定，你可以自行排排看你的APP)

當理解使用者在這個階段的狀況之後，就可以定義這個階段的Design Principle，例如:當使用者在剛發現這個APP的了解階段，對這個APP還不熟悉，還在摸索，所以這階段的目的就是要讓使用者覺得這個APP與我有關、可以簡單使用，使用者才會進入下一階段，頁面使用轉換率才會提高。

上一層的階段設計準則存在的目的是為了協助完成下一層的頁面設計準則，就和主管存在的意義是在協助員工完成工作一樣，所以只想作威作福顯示自己好棒棒的主管其實沒有存在價值。(咦?) 從階段的Design Principle當中，就可以拆解出每一類頁面的設計準則，例如沒有資訊空白的頁面，就應該引導使用者到可以發現資訊的頁面，不要停止體驗在這個頁面。

於是Design Principle就不只是元件的一致，而且有頁面類型的一致性，將來若是有新增的頁面，有這份設計準則，設計師自己、或是交接的設計師也不會把類似的頁面而做出不一致的頁面出來。

►推薦課程：App開發趨勢與應用、APP上架實務、iOS APP開發設計、Android APP開發設計

---

不只是建立頁面的關聯性，更是建立自己工作與知識的關聯性

下次碰到類似的專案時，請先不要埋頭苦幹辛苦的刻GUI

Don’t Work Hard, Work Smart. 簡化你的任務，找出頁面在使用者哪個階段，與使用者的關聯性是什麼。

理解使用者所在的階段後，再來設定設計要達到的目標。

知道每個種類的目標之後，再進行頁面視覺設計。

其實這個思考邏輯和我上一篇文章是一樣的，有興趣可以參考這篇設計思考怎麼改變世界。

重要的不是知識，重要的是怎麼運用知識到工作當中，甚至，從工作當中整理出屬於自己的知識。

文章轉載自「medium」，已取得作者授權同意，原文為：從使用者到APP頁面設計準則




官方網站：https://www.lccnet.com.tw
痞客邦Blog：http://lccnetvip.pixnet.net/blog
FB粉絲團：https://www.facebook.com/lccnetzone
菜鳥救星：https://www.facebook.com/greensn0w