想知道甚麼是UI Guildline嗎？
當看到一個產品，
有10種字型、15種字體、
繽紛的配色、和各種大小的按鈕時，
你就知道了。
10種字型、15種字體、和各種大小的按鈕，確實有點誇張，實際上在進行數位產品開發的時候，不統一的字型、字體和按鈕配色，倒是蠻容易發生的。
為什麼這麼說？
因為一套產品的開發，通常都不只一位設計師，以過往遊戲開發來說，團隊內常常有5位以上的設計師，甚至還會有外包團隊。這時候，如果沒有一套所謂的「UI Guildline」，來進行規範的話，「字型、字體的不統一」真的是蠻常見的狀況，加上還有風格的問題，就會更加的凌亂。
還記得小時候第一次接觸「UI Guildline」概念的東西，應該就是在大學時期寫的報告了。那時候教授嚴格要求「字型、字體與間距」，當時為了弄出指定的報告格式，也是花了不少時間去調整。即便教授有那樣的限制，但是最後同學弄出來的報告的格式，還是天差地遠。
第二次接觸「UI Guildline」的時期，那就是當兵，當時負責的業務就是要弄「公文」，正式的公文限制也是要求的非常多，只要有一個地方不對，很容易被長官退件。還好，我對於使用Office還算熟悉，弄出一個公版來使用，也不算太難，因此有很多長官都會請我去幫忙弄格式，導致我的軍旅生涯，過得還算不錯。
不管是學校的報告格式，或是官方的公文規格，其實一個重點，就是提供「一致化的標準」，目的在於「方便溝通」。想像一下，如果教授沒有限定格式，那同學交出來的報告是不是會更加千奇百怪。而公家機關的公文，如果沒有一定的規範、統一的格式，那要如何同時和成千上萬的人溝通？
但是出社會後，陸續參與一些產品的開發。後來被派去參與一款產品的試用，當時的產品正在進行上市前的準備，但是卻發現，有許多風格不統一的介面、樣式不統一的字型，以及大小不一致的字體，雖然有提出這個問題，也許是因為上線在即，就沒有進行修正，當然之後也就不了了之。這時期的我，也還不明白「一致化的標準」的重要性。
隨著參與的專案越來越多，也更有機會可以主導專案時，才意識到，為什麼會出現這樣的狀況。
舉一個最簡單的例子，延續之前提到「系統提示訊息」，如下圖所示，請問關閉這個提示訊息視窗的按鈕，應該要叫什麼？是「確認」、「確定」還是「關閉」？又好像都可以，對吧。因為這三個用語都很常見，因此出現任何一個感覺都沒問題，因此當多人開發的時候，你就會發現，這些用語不斷的交錯出現，並沒有統一的使用方式。常常都是當下的「感覺」來決定。
後來，在專案進行的初期，我都會提醒團隊，務必要進行「UI Guildline」的制定，規範統一使用的「字體、字型、間距與配色」，另外，為了避免製作同樣的物件，例如：按鈕、提示訊息視窗、選單…等，也要有統一的規格，甚至連按鈕的「圓角」，也都要有規範，如下圖。如果沒有事前說好的話，那又會變得如何？
按鈕的「配色」也會是需要考慮的部分。因為「按鈕」是在介面設計時，很重要的「引導」，其他還有「警示」及「行動呼籲」的功能，因此顏色的搭配及使用，就變得相當重要。
以airbnb來說，整個網頁最顯眼的，是不是就是中間上面的那顆「紅色的搜尋按鈕」，這顆按鈕也搭配airbnb logo的主題色。
接下來，在其他頁面中，最重要的按鈕，都是使用相同的「配色」。
但是，實際進行產品設計的時候，往往會掉入一個陷阱，總是覺得「A按鈕有很重要的資訊」、「B按鈕一定要讓用戶看到」、「C按鈕最希望用戶點擊」，於是「A按鈕是綠色」、「B按鈕是紅色」、「C按鈕是藍色」，整個畫面花花綠綠，最後就失去焦點，因為每個都是重點。
因此，在設計 UI Guildline的用意，就是要讓設計師在針對UI設計時，有一個統一的準則。
除了上述提到的「字體、字型、間距、顏色、按鈕樣式」等，還有很多可以去思考的部分。
接下來想提一個比較少人會注意到的地方，那就是「流程」。
為什麼說「流程」呢？有些時候，「介面的操作流程」上，也需要適度的規範。
雖然剛剛有提到「確認」、「確定」和「關閉」，三種按鈕的樣式。也是可以進行使用上的規範，如下：
「確認」按鈕：當用戶操作時，檢查輸入的資料有誤時使用。
「確定」按鈕：當用戶操作時，檢查操作動作有不法時使用。
「關閉」按鈕：當用戶操作時，發生系統異常或例外狀況時使用。
另外，如果提示訊息視窗內有複數按鈕的話，也需要進行設計，如下圖，因為「是、否」及「確認、取消」等，也都有各自適合使用的時機，若沒有事前進行使用時機的定義，這類型的按鈕組合也會變得相當凌亂。
如果和先前提到的「系統提示訊息」搭配，就可以做下表的組合，這樣當成員在擴充「提示訊息」時，就有一個規範去指定「訊息提示視窗的按鈕樣式」，在溝通上也會減少許多的誤會。
| SysErrCode | 內容 | 用戶端顯示 | 按鈕樣式 | 點擊按鈕後的動作處理 |
| 1001 | 登入帳號不存在 | 您輸入的帳號與密碼不相符。 | A | 關閉提示訊息視窗。 |
| 1002 | 登入密碼錯誤 | 您輸入的帳號與密碼不相符。 | A | 關閉提示訊息視窗。 |
| 3001 | 註冊時的IP不合法 | 您所在的地區無法註冊。 | C | 關閉網頁。 |
| 3002 | 註冊帳號格式不正確 | 您輸入的帳號格式不符。 | B | 關閉提示訊息視窗。 |
| 3003 | 註冊密碼格式不正確 | 您輸入的密碼格式不符。 | B | 關閉提示訊息視窗。 |
| 3004 | 註冊帳號已存在 | 您輸入的帳號已存在。 | B | 關閉提示訊息視窗。 |
| 3005 | token 已失效 | 系統發生異常。(3005) | B | 回到首頁。 |
接著，需要定義的內容，就是「點擊按鈕後的動作處理」，簡單列舉下列幾種：
(1) 直接關閉提示訊息視窗，頁面不進行任何處理。
(2) 關閉提示訊息視窗，頁面進行重新整理。
(3) 關閉提示訊息視窗的同時，也關閉網頁。
(4) 關閉提示訊息視窗後，畫面導回首頁。
(5) 關閉提示訊息視窗後，畫面導回登入頁。
隨著不同的產品需求，也會有相對應的處理動作，例如APP類型的，就不是關閉網頁，而是關閉APP，或是重啟APP，或是重新下載…等，請依據實際需求進行設計吧。
在產品開發過程中，雖然有「系統規格書」或「產品規格書」來定義功能需求，但是還需要一份「介面的設計規範」及「介面的操作規範」，讓團隊成員在「介面的視覺及互動設計上」有所依循，而這份文件，就叫做「UI Guildline」。
搞懂UI Guildline，讓你的產品不再出現10種字型、15種字體、和各種配色按鈕的窘境。
《如果覺得這邊文章有幫到你，歡迎請我喝杯咖啡》
——–
大家好，我是 數位產品開發教練 – 陳俊聖/廣三/HeroMi
17年數位產品開發經驗。經手至少80個大小專案。
擅長解決與工程師的溝通問題，幫你建構工程思維。
如果有任何想法，歡迎留言或發信給我，希望可以幫到你
我的信箱：info@hero-mi.com
歡迎加入粉絲團：數位產品開發教練 – 陳俊聖/廣三/HeroMi
*本站所有文章未經授權，請勿任意利用、引用、轉載，但是歡迎按讚、訂閱、分享。
留言