我們應該常聽到老闆說：要把我們產品設計的越簡單越好！這句話看似沒錯，但時常雙方都會過度誤解 “簡單” 的意義，認為所有產品都應該第一眼就會用，而且畫面就該簡單到不行，但對某些產品，有時候過度的簡化或省略，反而造成不良的體驗，例如需要一目瞭然、方便比較、或有大量資料（ data heavy ）的產品。
那這類產品我們該如何進行設計呢？以下為 WebEngage 的行銷自動化產品設計案例：
簡單介紹一下，WebEngage 是一個營運於孟買與美國的行銷自動化平台，每個月服務超過 38,000 家用戶，接觸超過180萬位使用者，並逐漸在美國與歐洲市場擴展。
無法極簡（Anti-minimalism）
降低複雜性的設計是大家所嚮往的，對消費者端 app 或只進行單純任務的產品較易達到，但當你設計企業級產品時（ data heavy ），你不能任意的閹割功能或簡化複雜卻必要的流程。想想看，如果我們為了增加飛行員的起降體驗，讓座艙中只有一個起降桿， 這樣是合理的嗎？我想應該不是吧！
如上述，我們不想要讓產品走如其他 app 減少功能的方式，而是改善資訊架構及功能優先級判斷的方式，來增加競爭力。
話雖如此，我們在色彩語言的使用上仍然保持輕量化與極簡，因為我們的目標是要讓使用者專注於資訊上，而非使用了什麼顏色。
規劃的流程
在 WebEngage 的另一個團隊給我們產品的 spec 與 wireframes 細節，讓我們更快的進入狀況，並在了解核心功能後，我們開始研究並創造視覺語言。一開始，我們僅針對一些頁面進行討論，最終將建立設計系統（design system）。每個我們規劃的元素，都會變為實際可應用的風格指南，並透過 Sketch 繪製出元件庫。
設計系統（Design System）
針對一個持續成長的產品，我們認為如何因應未來“產品的延展性”以及“客戶所需的擴展性”是非常重要的。我們建構設計系統的方法比較像是 Google Material design 的 guidelines，也因為跟設計師與開發者有關，所以我們準備了有較多細節的文件。
Grid, sans grid
呈現資料數據的儀表板（Dashboard）通常是具有許多資訊的架構，使用嚴謹但無彈性的網格系統（grid）來設計，也許不是一個最好的方法。也因此，我們設計了一套規則，定義每個元素（elements）間的距離（margin）以及各元素排列的方式。
Content Out
有別於一般常見的 box-in 設計方式，這部分我們建議使用 content-out 的設計原則，如同前面提到的，取代傳統網格（grid）的設計方式，我們以 “內容” 做為我們的判斷依據標準。在定義某些特定元素周邊的留白空間後，設計就只需順著圖表、table 與剩餘內容自然而然排列。
補充說明：content-out 指的是以內容為基礎進行排版（content-out 延伸閱讀）
色彩學
當畫面上有大量內容時，就必須慎選顏色。因為 WebEngage 的產品中有大量的表格與圖示來表示不同的狀態，所以我們藉由研究許多相關資料來選出適合資料視覺化的顏色。
Typography
文字排版是設計中最基礎的項目之一。為了符合更廣的用戶，往往會去使用原生字體（Arial ????, Helvetica ????），但現在系統字體（system typeface）的調整項目更加完整，因此可以讓多數瀏覽器或系統跑出我們設計的樣子，如允許調整多種字體粗細等。
行為（Actions）與按鈕（Buttons）的優先級
流程初期，我們做了個決定，先將各種行為與按鈕做了優先級（重要度）的分配，1 是最低，5 是最高。
- 假如優先級是 1，這些功能應該被合併於下拉式選單中
- 假如優先級是 2 或 3， 這些在表格中的行為或按鈕可用icon來代表，hover 會出現提示說明（tooltip）
- 較高優先級的行為可以是純文字的連結或按鈕，這樣可以避免讓使用者猜想這個 icon 代表的功能為何。
另外， 為了不讓資訊重複或多餘，故避免按鈕上同時出現 icon 與文字。
視覺階層（Visual Hierarchy）
我們讓每個元件的改變都有兩種效果，如圖：
滑鼠 hover 時，文字會呈現不同顏色，同時有個背景色。當有兩種效果上的改變，可以降低使用者的認知負擔（辨別狀態的差異或改變）。我們在整個產品中都遵守這個原則，所以相鄰的元件輕易可被區分，以達到視覺階層的效果。
資料視覺化
資料視覺化（Data-visualization）對超過某個程度的資料量時是非常困難的，因為識別性高的顏色很容易被挑光。我們為了解決這個問題，把多種資訊整合呈現於一塊獨立區域之中。
響應式如何考量
通常響應式的概念大多都是在討論如何適應更小的螢幕，但如果產品的特性或目標載體是大螢幕（1280px 以上），我們要思考的就是如何利用多的空間來擺放資訊。
來點梗？
在產品中加入些有趣的梗？我們曾在設計中加入了一些幽默的點子，但最後決定不採納，因為可能會讓資訊失焦。
總結
團隊經過兩個月的努力，我們不只交付了產品的設計，同時也提供了易擴充且可延續的設計系統。這讓我們感到驕傲，且還在不斷的優化改進它。
使用者怎麼說
在使用者（使用者為內部其他團隊）使用我們辛苦的工作與思考後所打造的產品後，對它的評價將是判斷產品是否成功的關鍵績效之一。以下擷取了部分評論：
作者與團隊協助我們設計出一流的 SAAS 產品，不斷的推動以 UI/UX 的觀點重新設計產品的 dashboard。還記得我們剛啟動專案時，首要任務即是建立元件庫幫助我們未來的設計，作者打造了一個全面性的元件庫，讓我們現在只要在短短的幾分鐘內即可設計出新的頁面。
— Arpit Rai, Product, WebEngage
作者與團隊在 UI/UX 的觀點下，對我們的 dashboard 進行改造。我們都對最後成果的品質與設計高標準印象深刻，並相當注重客戶關注事項的細節，最終協助打造出我們自己也相當自豪的產品，客戶也讚譽有加。
— Avlesh Singh, Co-Founder & CEO, WebEngage
延伸閱讀
原文轉載於 – Designing for a data-heavy platform，以獲得作者 Tejas Bhatt 授權翻譯
本文章所屬設計大舌頭與作者所有，未經授權，不得轉載！如需轉載，煩請通知。
