How to write UX Guideline | 建立產品的一致性
當公司的設計團隊同時進行多個產品的介面設計時，產品內部與產品之間的「一致性」，往往是重要的考量，因為這不僅影響了使用者操作上的流暢度，也影響了客戶對於公司品牌感受的一致性。
最近公司正在發展一個大型專案，許多的設計師和開發團隊皆投入在其中，不同的畫面與功能，往往由不同的設計師和團隊負責，溝通成本也因此提高許多，總是有開不完的會在等著我們（哭
過去雖然已經有建立過所有產品的大方向Guideline，但是因為歷史有些悠久， 而且偏向單一元件(Component)的行為定義，並無法滿足現在新產品的情境，為了確保產品內部介面上的一致性、提升溝通效率，讓設計師和開發團隊可以有統一的參考資訊，我們決定開始著手建立新版的「UX Guideline」。
何謂 UX Guideline?
Guideline可分成很多層面，除了顏色、樣式、互動效果等偏向視覺面向的Style Guideline，這次想談的 UX Guideline 則是偏向情境、行為和流程(UI Flow)的原則定義。
會特別如此區分開來，事實上也與公司團隊的角色分工有關，對我們來說 UX Designer 較著重 UX Guideline 的部分，Visual Designer 則是以 Style Guideline為主，但兩種Guildeline其實是相輔相成且密不可分的關係。
哪些物件需要建立 UX Guideline呢？
當我們在規劃建立UX Guideline時，會發現UI上有眾多的元素，每個畫面都有許多不同的功能，而究竟哪些東西需要建立成Guideline呢？最直接的標準就是有 跨頁面重複出現的UI元件 (Component)，如表格、搜尋欄、Pagination、Filter、Drawer 等等，另外就是具有相同目標的UI行為，譬如說同樣是點選連結/按鈕以獲得更多的資訊，是要將內容在當前頁面顯示、開新的分頁亦或新視窗等，也會需要制定一定的原則。
UX Guideline 包含哪些內容？
UX Guideline 主要的溝通對象除了設計部門的成員們外，另外一個對象就是前端工程師，因此其另一目標是做為通用的UI 規格書(UI Spec)，讓前端工程師瞭解如何使用各個元件，以及這些元件應該提供的功能。為了確保 UX Guideline 內容的完整性，我歸納其主要應包含以下幾點內容，並以“Pagination” 這個元件為例子來說明：
- 使用時機與目的：說明此元件在何情況下需要被使用，以及其主要的功能、帶給使用者的價值為何。
以Pagination為例，並不是每個頁面都有設置分頁的需求，因此定義Pagination的使用時機和目的為：當一個表格或頁面超過50筆資料時，需要提供分頁功能，讓多筆資料依序陳列於不同頁面，使用者可以透過前後頁切換、指定頁面、調整每頁筆數之方式，來閱讀和查找資訊。
- 情境與樣式：有時一個元件可能針對不同的情境需求，以不同的功能和樣式來呈現，這部分特別需要和 Style Guideline 搭配參照。
可依照元件出現的位置來定義，如 1.當Pagination出現在Widget裡時，並不需要複雜的Pagination，只要提供Basic Pagination的樣式即可。2. 當Pagination出現在整頁畫面或表格上時，需採用Advanced Pagination的樣式。
- 行為和流程：這部分屬於細節的UI Spec內容，需要較詳細地規範使用者和元件的互動行為，包含如何觸發元件、行為後續流程、特殊狀況、Error handling等。
列舉可能的狀況和相對應的UI呈現方式，例如：1.當使用者在第一頁或最後一頁時，前或後頁切換的功能應相對應無法使用。2.當使用者調整每頁顯示的項目數量、調整Filter或進行搜尋後，需重新跳轉到第一頁。3.當使用者輸入確切的頁面時，需輸入完畢並按下enter後才會觸發頁面轉換。
以上是我自己建立 UX Guideline 時的小整理，但詳細的內容和架構還是可以依照自己的情況來定義，譬如說根據 Guideline的「受眾是誰」、「想達到的溝通目標為何」等等來做調整喔！
以上就是我個人的小小經驗談，希望對大家有幫助，喜歡的話就拍個手吧！如果你單純喜歡這篇文章，請幫我拍手1-10下。
如果你喜歡UX/UI經驗分享的主題，請幫我拍手10-30下。
如果你喜歡我的文章，希望看到更多其他的分享內容，請幫我拍30-50下！謝謝你的鼓勵，有什麼想法和問題也歡迎在下面留言討論唷:)
