產品設計中，如何優雅地呈現數據的展現形式？

如今的產品設計已然不是圖形表達，而是如何做好數據表達。

本文內容所討論的是關於在產品設計中設計師應該如何表現數據的展現形式。儘管數據展現並非是所有行業領域的設計重點，但在特定範圍里，如：行業經濟數據，體育博彩數據，棋牌競技數據，交通里程數據，個人成就數據等等，其內容是整個產品中不可或缺的一部分。

該如何將各個維度的數據恰如其分的表達出來，會成為設計師的工作重點，這比單獨的圖形版式更加複雜。特別是在用戶的體驗感上，數字與圖形相比，本身就具有一定的違和感。因此，設計師需要有更強大的設計構造能力，在數據中尋求美與優雅的體現。

未來的人是完全數據化的人

無論人文主義怎樣反感將人的特性統一在數據當中，都不能阻止社會向數據化的方向發展。在過去，人們所關注的重點，往往是具體的事物和外在的表現力。

而現在人們所關注的重點則成為各個維度的精確數據，通過數據展現自己的社會優勢將從金錢這一個方向衍生到生活中衣食住行的所有層面，所以人們會樂此不疲的查看誰獲得了步行量第一的冠軍，誰擁有了更多的購物積分，誰的保險累計金最高……儘管這其中很多內容是不具備購買力的虛擬產品，但數據帶給人的榮譽感會因此變得真實可信，也變得似乎很容易就能彼此競爭和超越。

如果我們仔細觀察這幾年的產品功能發布，就會發現，產品的數據的表現已經往極度細化的方向發展，凡是能夠滿足一個用戶自身具備優勢的表現點，都會產生相應的與其他用戶相比較的數據。所以如今的產品設計已然不是圖形表達，而是如何做好數據表達。

數值表達與設計的矛盾

設計的本質是數值，這一點我在其他文章里陳述過，但我需要強調的是，設計是數值的外在呈現，但它決不是數值的直接表現。

舉一個簡單的例子：一個優雅的圓形，在程序的數值中是半徑80PX，所以用戶能夠看到圓形的形態，但這並不代表需要把80PX這個數值直白的寫在界面中。因為無論設計師如何排列這個「80PX」都沒有圓形本身所具備的優雅，因為數字是冷冰冰的，並且只有10個不同的形態（0，1，2，3，4，5，6，7，8，9）。

這就能夠解釋為什麼當大量的數值擺放在界面中時，界面只能夠採取最簡單的表格形式，這並非是設計師不想用更好的設計排版，而是數值本身的組合形態決定了它們的表現力不可能像圖像那樣充滿多元化的個性。所以越是需要展現具體數值的界面往往就越丑，這就是數值表達與設計的矛盾。

我的客戶時常把這種難題甩給我，問為什麼界面看起來不漂亮，我的回答只有一個:「數值組合不是圖形排版，信息傳遞的準確性才是數值組合的第一目標，而不是美觀。」

「那我不管，我就要它好看！」

如何才能讓數據展現在產品中呈現美的感覺，我幾乎動用了我所有的美學能力和設計技巧。最終探索出了以下幾個解決方法。

數據表現在界面中常見的幾個問題

我先說下數據表現在界面中通常會出現的幾個問題：

1.界面的擁擠雜亂

數據表格顯得擁擠有多種原因，但總體原因往往是產品經理在策劃中不懂取捨造成的，特別是在數據展現上求大求全，似乎要將用戶的全部數據信息都陳列擺上才能顯得產品的專業，這完全是一個誤區。事實上從產品功能而言，用戶的接受度往往是單項選擇，同時在界面中具備好幾個功能的數據表現，會讓用戶看不到數據的重點在哪裡。

2.過於展現數據的精確度

在某些產品中，為了表現其專業度和優勢，有的會將數值精確顯示在小數點後兩位，有的會將數據的位數增加在6-8位，這種做法並非完全不可行，特別是在棋牌競技類數據中，用戶的得分往往由多位數組成。然而面對移動平台硬體，這種多位數的展現形式很容易因為屏幕大小的改變而出現弊端，比如：數字擺放不下，出現表格破損。

3.數據表現的展現手法單一

關於數據中的動態表格呈現往往與程序員的水平有密切關係，這需要設計師根據動態表格的呈現提交確切的設計數值，包括顏色、各個數據的間隔規範等等。動態表格由於程序的控制，可以有很多元化的表現手法，比如：圓形、線形、塊狀形等等……這些都是數據與圖形的結合方式，也是最能發揮設計師用途的表現形式。然而這部分表格的呈現通常比較單一化，一方面是設計師對表格的設計無法提交確切的數值規範，另一方面也在於程序對表格的開發能力有限，短平快的研發周期讓多數產品只願調用現有的效果模板，這樣在表現上必然會受到局限。

比如：赤兔和微信運用所用的就是動態圖形表格，在程序上屬於比較簡單的。

如何解決？

那麼究竟要如何解決這些問題呢？總體的原則是靈活取捨，版式多變，分納層級，動畫表現。

靈活取捨

現在做產品最忌諱的就是高大全，如今的商業生態，產品都需要寄居在整個生態圈中才能生存，所以用戶並不需要高大全的產品出現，他們需要的是能夠解決特定問題的產品，所以數據的呈現也是如此，舉一個簡單的例子：微信運動。

微信運動的主要數據就只有一個，步行數。二級數據是用戶排名，三級數據是點贊數。這三個數據的層級關係十分清晰。為了突出步行數，產品經理取捨了用戶名的顯示，微信運用的用戶名只顯示前四個字。這是非常符合用戶體驗和人性的做法，因為用戶在這個界面功能里只有兩個關注點：

誰得了第一名？

自己是第幾名？

至於其他人，用戶並不關心，所以其他人的名字是否顯示完全不是一件重要的事情。

產品數據的第一表現力是用戶自己。凡是非自己的數據信息，從人性的角度而言，都可以做一定的取捨。因此當產品經理苦惱用戶不能看到其他人的簽名和歷史數據該怎麼辦時？作為設計師，我會明確的告訴他，用戶並不關心別人的簽名和歷史數據，他們只願意看自己和第一名之間的差距。這意味著很多與排行榜相關的界面設計都可以做到數據展現的簡化，以突出最重要的部分。

版式多變

在數據展現設計中，表格的展現方式需要做到靈活多變，這種靈活包括：數字、文字、數字與文字的排列關係；數字和文字在表格中的位置；數字與文字大小的關係；不同顏色帶來的主次關係，可操作的表格交互；表格分欄的行數與列數；不同類型表格的穿插；表格的隱藏於顯現等等……這其中還要儘可能增加數據間的視覺間隙，以避免用戶對數據的繁瑣感受。

比如：在這款競技平台中，將用戶數據採用豎版排列是非常聰明的做法，並且用顏色區分主次關係。

從設計的角度講，用戶對數字的敏感度與好感度3位數是最適合的，如果到達4位數，則好感度會逐步降低，超過6位數不僅界面設計感會大幅度下降，對用戶而言，識別成本也會隨之增加，如果大量的6位數以上的數據呈現出列表的形式，除非是特定的行業數據和專業人士的使用，對於一般屬性的用戶而言，幾乎是沒有太多耐心去閱讀的。

分納層級

然而在產品實際設計中，確實也會面臨著數據無法簡化處理的難題，特別是某些國際上已經通行的標準數據展現，比如棋牌競技類的計分模式，整個產品不得不按照多位數的方式呈現，那麼用戶要如何才能知道自己的優勢呢？除了特定首要的個人展示外，將用戶分為各個層級也是很重要的。根據數據劃分區域，根據區域劃分層級，根據層級提供不同的版式設計，用顏色、徽章等圖形將用戶區分開，而不是僅僅看誰的數字更長，以此讓用戶了解他們彼此之間的重點信息。

動畫表現

動畫表現主要運用在動態圖形表格上，一般用來表達用戶自身的數據，這種動態展現能大大增加用戶的好感度及自我成就的滿足感。但動態圖形表格對設計以及程序的要求要遠大於普通的文字表格。

就目前而言，國內產品基本上是調用國外已有開發出的效果展現，所以在可操作性上往往不能和產品功能完全適應，基本上還是屬於簡單的效果利用，沒有真正的讓整個數據以動態圖形表格的形式呈現。但是動態圖形表格將是未來產品數據的展現突破口，因為傳統的文字表格已經不能滿足用戶的需要，無論設計師如何排版，隨著個人數據的細化，他們都需要更個性，更動態，更具有交互性的方式來體現自身在虛擬世界的數據價值。在這一點上，可以說，程序的開發與設計是一體兩面，不可分割的。

比如：Clue作為一款女性生理周期的數據產品，其動態圖形表格的數據整理還能帶有用戶的主觀交互體驗，就遠比只能作為觀摩的動態圖形表格要好。有興趣者自行查閱，以便了解文字表格，動態圖形表格與帶有交互的動態圖形表格之間的差別。

作者：王沛/Ada Wong，自由人，獨立設計師

本文由 @Ada Wong 原創發佈於人人都是產品經理。未經許可，禁止轉載。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！