UIKit設計: 以 Vital CRM 為例
叡揚資訊在 2011 推出雲端客戶關係管理服務 Vital CRM，歷經 7 年發展，在市場上已擁有廣大客群，介面設計與功能服務也隨科技發展、趨勢愈發多元化、人性化和智能化。行動裝置尚未興起時，Vital CRM 著重於桌機版發展，然而，近年來行動裝置迅速崛起，不僅改變人們的行為，「即時性」也成為使用者殷切期待必要需求;再者，當時 UI 未專業化，畫面呈現與體驗較不理想，未能與其他 Vital 雲端家族產品達成品牌識別統一。因此，為提供使用者更快捷、方便的操作體驗，我們透過導入 UX 思維，改良並提升 Vital CRM 介面及操作行為，期待透過一連串緊密結合的好「體驗」，讓使用者獲得更便捷、更優質的服務內容。
開始與構思
在規劃產品之前，下列事項是必要的，做得愈完整對產品開發愈有幫助，精準命中使用者痛點，也讓產品愈發無可取代。
● 資料蒐集:首先需要了解使用者真正需求，可藉由「市場調查」和「面對面訪談」等方式蒐集資訊，其中「面對面訪談」可觀察並記錄訪談者的操作行為及遇到的問題，相較於「電訪」或「問券」，開發者可以更明確知道訪談者對產品的感受。開發者也可透過客服接收的回饋、業務第一線接觸的資訊、教育訓練時面對客戶的狀況來獲得使用者回饋。
● 分析數據:資料蒐集完，面對許多數據、資料和使用者期待，相關的資料歸納與分析數據是設計產品前必做的功課之一，開發者可利用 GA (Google Analytics) 得到基本數據來分析使用者，例如:使用者年齡區間、電腦螢幕解析度、作業系統、瀏覽器版本等各種資料，顯示出使用者特性，藉此開發者可得出目標客群喜好，並對此產出相應的設計內容。透過分析數據，也可讓我們得知現行產品的狀況，並推測新的可能。以 Vital CRM 來說，數據揭示使用者操作桌機版本的人數最為眾多，手機用戶僅佔 4%，由此可見，並非用戶皆不使用手機，而可能是 Vital CRM 畫面對於適應性設計仍較不完善。
● 競爭者分析:知己知彼的「競爭者分析」更是不可或缺，開發者可廣蒐同類型產品，分別就強弱項、特色、功能、介面設計、收費等不同的維度來比較，得出產品必須維持的特點及尚待加強的功能，作為規劃產品日後發展方向的依據。
介面規劃與設計
綜合上述調查分析結果，開發者便可開始規劃產品內容，其中功能地圖(Functional Map) 及介面流程圖(UI Flow)皆是讓開發者能釐清思緒的好工具，藉由這兩項工具也讓開發者與客戶或 PM 間溝通更明瞭、快速。
當開發者盤點好頁面內容及流程，就進到草稿繪製階段，草稿分為兩種形式:手繪及電腦繪圖，前者為設計初期快速產出的方式，因為一開始會嘗試各種可能性，手繪修改容易，便於討論;後者較為精緻，適用於討論更細節的流程或功能，藉此方式也讓無法想像畫面的人更為理解，降低資訊不對稱狀況產生。而在草稿繪製階段中，開發者透過密集討論並迅速產出設計稿，印證功能地圖與介面流程圖內容，此階段的設計圖無需添加多餘裝飾，如插圖，僅就流程與功能探討即可，也盡可能在此階段將不合理、不夠人性化之處予以修正，此時修正成本相較設計完畢後發現問題仍較低，更重要的是目前科技發展迅速，必須預留未來擴充的地方，讓使用者在未來仍可以無縫接軌，持續享有優質服務體驗。
以 Vital CRM 規劃介面改版為例，我們先為這次改版定義大方向規範，期望在改版時能完成的目標包含模組化、設計的一致性及重用性、隨時隨地都可以新增資料等。確立目標後，我們開始檢視與了解舊系統的架構，歸納出 Vital CRM 畫面由七個區塊組成: Logo、選單、快捷列、搜尋、提示與通知、快速新增、主要內容(圖 1)，接著將每個區塊拆解分析，保留優點並改善缺點。如「選單」區塊中，因呈現水平狀，不符合 Vital 雲端家族系列模式且選單結構無層級較不方便，而最重要的是當未來功能越來越多時，會讓多出的選單沒地方放，造成版面混亂。而「快捷列」被切割成上下兩部分，分別為瀏覽紀錄及標籤列，高度不足、寬度無法調整以致於可視範圍過小，使用者體驗較差。我們依照此次的改版目標探討搜尋的操作模式、通知的醒目程度是否符合需求。
統整上述分析結果，我們開始繪製草稿，規劃大架構，並訂定區塊相對位置，再精緻化內容設計(圖 2)，左側欄位規劃成選單，同一個區塊內含主選單、個人專區、通知、設定、幫助等功能，並利用不同設計達成分群，而頭像 Avatar 與通知 Badge 的圓角設計，讓使用者視線更集中於圓心，聚焦內容資訊;右側欄位作為快捷列，不再分上下，改以 Tab 形式切換頁面，並提供拖拉方式調整區塊寬度，擴大可見範圍。左右區塊皆可收合，爭取中間主要內容範圍最大化。
此次 Vital CRM 改版，重點之一的適應性設計 (RWD)，除讓電腦網頁會跟隨不同解析度產生相應版面設計外，規劃手機 App 時，會先進行手機設計的研究(圖 3)，當手機螢幕越做越大，單以大拇指使用的操作範圍有限，除非利用雙手，否則有些螢幕邊角是不易觸及的，因此，針對上述研究結果，我們得出了以下設計(圖 4):將主選單及較重要操控項置於下方，快速新增按鈕被安排在下方導航列正中間，讓使用者能輕鬆點選並快速新增，而畫面上方則放入 Logo、店點切換區及搜尋。
針對介面風格設計，近年我們規劃並陸續著手將 Vital 雲端家族產品做一致性改版設計，在過程中依據經驗盤點出 Vital UI Kit 的介面設計規範，如制定頭像尺寸大小、選單與子選單之間的高度、按鈕的顏色尺寸等，使 Vital 雲端家族系列產品就算介面顏色不同，卻擁有一制性的設計脈絡。(圖 5)
綜合上述，我們相信在此次改版後，Vital CRM 將成為世界上數一數二兼具美觀與人性化的系統解決方案，持續提供使用者優良的服務體驗!(圖 6)