從UCloud控制檯，看B端產品體驗設計

讓用戶熟悉的控制檯

您據說過平均臉的概念嗎？人類學家弗朗西斯•高爾頓（Francis Galton）偶然發現，將許多的人像合成後，看起來會比任何一張更友善。越是對一張臉感受熟悉，那麼在認知過程當中大腦所需的處理資源就越少， 也就越沒有負擔，容易親近。

圖片來源：http://faceresearch.org/

隨着公司業務的不斷髮展，UCloud的產品已經跨過了單純知足用戶功能需求的階段，用戶對於控制檯使用體驗上的要求在不斷提升。正如大部分B端產品同樣，雲產品控制檯的本質是一種工具。工具的意義在於幫助用戶達到最終想要的結果，無關乎流量、使用時長，甚至用戶粘性。所以，在視覺上須要減小對於用戶的負擔和干擾。體驗良好的控制檯UI就如同平均的臉,圍繞這一想法，咱們在設計過程當中重點關注了三個層面的問題，儘可能在視覺上作到簡單、熟悉。

色彩

國人受文化和習慣的影響，更適應淺色的界面。在總體色彩上咱們選擇了以白色爲主的設計。但因爲色彩比較淡，在測試過程當中，一些用戶會產生視覺疲勞的問題，咱們又專門對文字和背景顏色的對比度進行了優化。

優化後的版本 優化前的版本

在總體配色較淺的基礎上，爲了更加美觀，咱們還對核心操做按鈕等位置進行了優化，使用了高飽和度的品牌色。就比如平均的臉只耐看，第二性徵強的臉更吸引人。高飽和度的按鈕就好像女性的長睫毛、男性的高鼻樑同樣，可以提高界面的吸引力。也幫助這些高頻操做更容易被辨識。

佈局

在佈局方面，因爲雲計算產品的展現內容較多，各產品的操做邏輯也不相同，老版本上用戶可能須要對每一個產品獨立進行學習，形成了額外的學習成本。新版借鑑了用戶熟悉的標籤、卡片（畫框）和文件路徑等概念，儘可能將全部產品的操做方式歸入到同一體系內。

以雲主機頁面爲例，全部功能均可以保持相同的頁面體結構，且每一個頁面的交互方式都是一致的。

過程當中也經歷了反覆的測試與迭代。例如在標籤設計的過程當中，本來標籤頭部和主體內容的背景是分離的。但在測試中發現，有些用戶沒法將分離的頭部和內容聯繫起來，故在後續方案中作了調整。

內容

內容的展現上，咱們也圍繞減輕認知負擔作了有許多優化和定義。以文字來講，或許你們據說過前兩年的一則趣聞：咱們在學生時代都曾爲印刷得密密麻麻的試卷而頭疼過，而杭州的一所小學，在某次五年級的數學考試中放大了試卷的字號和行距，學生的考試成績也隨之提升了。

圖片來源：http://news.sina.com.cn/s/wh/2017-11-23/doc-ifypathz5329709.shtml

溫馨的字體和間距比例可以減小大腦在加工信息時的負擔，在美國甚至有專門的國家標準（ANSI/HFS 100-1988）。但文字也不是越大越好，訪問UCloud控制檯的終端屏幕分辨率並不高，很大一部分還處於720P的水準，但這些用戶仍但願可以在一屏內顯示更多的數據。爲了迴應用戶需求，兼顧閱讀體驗，咱們制定了本身的字體規範。

其它

除了總體的色彩、佈局和內容外，咱們還對許多細節和超過60個控件進行了更新。例如，老版本的時間選擇控件須要分開選擇起始和結束時間，時間選擇上也不夠靈活。同時每次選擇完成後須要點擊三次確認按鈕。新版本中優化了這一問題。

讓同事輕鬆的控制檯

在設計領域有許多以用戶爲中心作設計（UCD——User Centered Design）的方法論，但對如何服務商業目標鮮有考慮。如同一篇很棒的設計文章中說的同樣，UCD和BCD（Business Centered Design / 以商業爲中心的設計）彷佛是矛盾的兩個方向。就好像技術出衆，但少有問津的產品家常便飯。而設計出色，叫好不叫座的產品也很多。不兼顧體驗與商業的設計很難成功。

例如產品經理但願儘可能減小研發和設計的投入，快速拼搭一個有品質保障的MVP（最小可行產品）進行市場驗證。若是新的控制檯UI框架可以讓設計、前端和產品的同事使用起來更輕鬆、高效，就能夠快速且持續地縮短產品開發週期，抓住稍縱即逝的商業機會並下降研發成本。

爲了兼顧商業考量，咱們在提高體驗的基礎上，引入了原子設計的概念。並配合實際狀況，作了必定調整。UCloud的控制檯UI框架分爲了四個層次，依次爲：原子、組件、模塊和頁面。

原子

原子層包含有顏色、字體、陰影、間距等基本樣式。拿顏色舉例來講，設計過程當中嚴格限制顏色的使用，全部顏色不以具體色值定義，而使用有限的顏色代號。如此一來，全部頁面元素使用統一而規範的顏色代號，須要對色彩進行調整時，僅須要改變代號對應的色值便可，無需分別替換修改。

組件

組件層顧名思義，是各種組件的集合。爲了適應公司內部的組織架構，加強靈活性，咱們將組件分爲通用組件和業務組件兩類。因爲雲計算產品五花八門，時常須要用到一些特殊組件。而公司用戶體驗中心（UEC）資源有限，若是全部組件都須要UEC設計和測試，會對產品開發和上線的時間產生影響。故對於特定產品的特殊組件，能夠交給該產品團隊自行設計，待有更多使用場景且打磨優化後再歸入通用組件中，交給UEC統一維護和管理。

同時在組件設計的過程當中，咱們重點考慮了組件的通用性問題。好比文本組件，看似無需專門設計，但除了原子層的樣式定義外，咱們還對於文本的換行邏輯、隱藏邏輯、最大行數等作了定義。這一考量可以讓組件的使用者沒必要糾結於展現效果的問題，將精力放在業務自己上。在多語言適配的工做中也能夠大幅節省開發成本。

模塊

模塊便是前文中提到的卡片。是基於實際使用場景產生的組件的集合。這些集合包裹在擁有統一規範和標準的卡片內，有相同的展現邏輯。

頁面

即爲整合後的頁面。全部頁面的結構是一致的，可分爲全局導航、頁內導航和容器視圖三個部分。容器便是卡片的容器。

Sketch插件

配合原子化設計概念，爲了方便設計師和產品經理的使用，咱們還提供了一套基於sketch的插件工具，並按期與規範以及前端代碼同步。

UI框架、平衡與利他

基於上述思想，通過屢次的迭代與改進，全新的UCloud控制檯UI框架已日臻完善。該框架是一個二合一的系統。既是一套成體系的視覺和交互設計規範，又是一套基於React的前端開發組件庫。

UCloud控制檯UI框架是平衡了體驗設計和商業後的天然結果。它可以適配各類功能和使用場景，不因內容變化而產生額外的適配工做。設計師和產品經理都能獨立拼裝出高質量的頁面，也便於開發者的開發和維護。該設計規範符合用戶的理解，操做線性、儘可能減小邏輯分支，提供了良好的視覺感覺和操做體驗。也收穫了用戶的好評。

而對於內部開發效率的提高一樣顯著，交互、視覺、前端都免去了大量的重複性消耗。

過程當中，咱們也深入感覺到了利他思考的重要性。「Deep experts hate nothing more than politicking」——這是體驗設計專家Jakob Nielsen對於B端產品用戶的評價。若是要給B端產品用戶（特別是技術產品用戶）畫像，那麼這句話必定是用戶畫像的核心。B端設計是利他的。利他便是利己。

寫在最後

UCloud控制檯UI框架並非一蹴而就的，也經歷了許多困難與反覆，在此須要特別感謝前端團隊的付出，這一項目也是雙方共同努力的結果。

微信公衆號 「雲計算總動員」 分享雲計算領域的技術洞見、行業資訊以及一切你想知道的相關訊息。歡迎提問&求關注 o(////▽////)q~若有其餘問題須要諮詢，歡迎添加運營小妹微信Likekids，感謝你們支持！