UI Kit 是什麼?
在進入軟體介面主題前，必須先一起了解我們所處的環境，現今的軟體生態，已經告別開發門檻高、盒裝軟體為主的時代，從個人、團隊到企業都可以在網路、雲端商城銷售自己開發的軟體，目前毫無疑問已進入軟體開發百家爭鳴的時代了。
根據 Apple 的 App Store 的統計，從 2008 年 到 2016 年，他們已經為消費者提供了超過 200 萬個 App 應用程式，累計下載次數超過了 1，300 億次。單就 2015 年到 2016 年間，就增加了 50 萬個 App，平均一天的產量超過 1，300 個，下載量也是歷年的最高，達到 300 億次。
在當前高量產的軟體供需環境中，開發者跟設計者為因應現況而產生了一些作業程序， UI Kit 便是其中一項。以下的內容，將會從 What、Why、How 等 3 個層面，與大家分享。
什麼是 UI Kit
UI Kit 之於介面設計師，就像 Framework(框架)之於軟體開發者。談到這裡，非工程師或非設計師的讀者或許會覺得這是一篇艱深的技術文章，不用擔心，以下的說明將會以淺顯易懂的方式，讓各位讀者或有心想接觸軟體介面的人，都能夠理解。
工程師在開發一套軟體時，有時會需要一些 特定的模組或程式等，為了避免每次都要重新編寫，可能會使用已經設計好且可以公開運用的程式套件（其來源可能是由個人、團隊、或專門的軟體公司所提供的免費或付費軟體套件），讓開發者可以節省許多時間與成本，專注在開發產品上。相對來說，UI Kit 就是一個可以提供介面設計師運用的套件組 (User Interface kit)，是視覺化的產物。舉例來說，一般人比較容易理解的物件，如：網頁上或 App 介面中常見的按鈕(Buttons)、 輸入框(Inputs)、 頭像(Avatar)、 複選框 (Check box)、選單(Menu) 等，一般都會包含在 UI Kit 的內容裡。
UI Kit 的設計重點
UI Kit 裡的物件，如：以上所提到的按鈕、 輸入框、複選框、選單等，不只是需要把它們畫出來，然後設計美美的就可以了，因為美感是設計師的責任，但卻不是設計的最終目的，主要是因為介面扮演了軟體與使用者最直接接觸的角色，使用者透過介面，執行所需要完成的事情，而如何把幕後工程師辛苦製作的功能完善呈現，也是 UI Kit 的重要功能所在。
所以 UI Kit，除了把物件都設計好、整理好， 讓設計師可以擷取需要的物件使用之外，還要根據不同產品與不同特性，給予一些通用型的規範或特殊型的規範。舉例來說：通用型的規範就像是「按鈕」在一般狀態時，要讓使用者看得出來它是一個可以點按的物件， 同時，還要可以感受出在操作過程中的變 化，所以除了一般按鈕的型態，還需要設計當按鈕被游標滑過(Hover)、以及被按下去 (Active)的樣式(如下圖)，有的可能還需要停留在被選按的狀態(Selected)、或者曾經被按過(Visited)的樣式。
顏色之於 UI Kit 的重要性
另外，UI Kit 在顏色上的使用也是很重要的環節，顏色除了要讓視覺豐富之外，還包含了使用者心理認知的分析，而且使用者對於產品的印象，很大一部分也跟顏色有關。在現代比較流行的介面設計中，顏色的使用已趨向簡練，不太會使用過多的顏色在文字或區塊上來提示強弱程度或類別。以風格來說， 也從早期較擬真的圖像設計、注重材質感的手法，轉向更單純的平面色塊、簡單的陰影層次或純粹線條的方式，為的是讓使用者可以專注在系統的內容資訊，不會被太多額外的元素干擾或造成視覺疲乏，也更容易引導到需要操作的行為上。
顏色的心理認知，可以透過下面的圖來簡單的 了解(如下圖)，圖中兩排各 5 個案鈕，這 5 個按鈕分別代表不同意思。在確認色彩代表的意思之前，先進行一個小測驗，請先把下排有文字的那一行按鈕都遮住，體會一下顏色給予你的感覺，再把剛遮住的部分露出來，看看按鈕上的文字描述，是否符合顏色給你的感受， 如果符合的話，就代表你對顏色的認知跟設計文字是一致，但如果沒有的話，而且大多數人都覺得不該如此安排，就代表這個設計還有調整的空間。
為了讓使用者可以更順利操作，介面常透過顏色作為引導，引導的方式可以從一般人平常的生活經驗，或從以往的介面，並且已經讓使用者習慣成自然的顏色體驗中分析出來。
綠色在一般日常生活中，可能會聯想到交通號誌紅綠燈的綠燈，所以比較直覺連結到 Success 順利的、成功的、可通過的，因此對應到軟體介面，表示已完成的打勾圖案也 常常使用綠色表示。
紅色在現實生活中也代表著強烈警告、危險等，所以在軟體介面中常用來做為 警告 Alarm 或錯誤 Error 的顏色。
橘黃色介於中間，沒有紅色這麼強烈，但也有警示的意味，所以作為也經常會當 作提醒 Warning 的用色。
藍色常用於主要操控項，是主色(Primary Color)的顏色，主要原因是，在一些軟體介面中，藍色常作為儲存、確認等主要操控按鈕的顏色。而作為資訊 Info 代表色的淺藍色，是因為 Information 的定位比較中性，不是引導使用者要執行的主操控項，也不是警告或提醒，所以在顏色選擇上會挑選較不具有特殊指示性意涵的色彩，比 Primary 降低一點強度，同時也跟紅、黃、 綠等色做出區隔。
實際色彩應用-Pinterest
目前軟體介面在顏色使用上已更加簡化，可能只有主色跟一個輔助色，例如：Pinterest 是一個圖片資料蒐集整合服務，在色彩安排上， 就是以紅色為主，灰色為輔的系統，在這個情況下，紅色就跳脫警告、錯誤等意涵，而是品牌主色。此外，使用紅色也同時可以加深消費者對於品牌的印象。
UI Kit 的使用法則
UI Kit 之於軟體產品，類似企業識別系統 (Corporate Identity System，CIS)之於企業的關係，企業識別系統裡的視覺部分，除了包含制定企業標誌(logo)、標準字、標準色、輔助色等等之外，其他各種與企業有關的事務用品或宣傳用品，如：戶外招牌、文宣及事務用品製作物、行銷活動的視覺產物等，都需要統一的規範讓應用物能夠符合企 業的品牌精神和維持一致性，同時也必須考量可依照不同需求而靈活調整。
UI Kit 的產生也是如此，不只是為了把物件先做好方便套用，也會需要制定使用規範， 並且根據不同的需求，發展出具有彈性也兼顧一致性的使用法則。
這一陣子，叡揚資訊的前端設計團隊也開始著手建立 UI Kit，我們將他命名為Vital UI Kit （http://www.vitaluikit.com）並開源提供社群利用，以系統性軟體為主要的設計方向，目前有的產品以及專案也開始導入這一套 kit。我們也將在下一期的論壇，繼續為大家分享在介面設計上，尤其功能比較龐大複雜的產品，為什麼會需要使用 UI Kit， 以及該如何使用它。