【作者 | 王沛/Ada Wang】

【編輯 | 蒸糕】

如今的產(chǎn)品設(shè)計已然不是圖形表達(dá)，而是如何做好數(shù)據(jù)表達(dá)。

本文內(nèi)容所討論的是關(guān)于在產(chǎn)品設(shè)計中設(shè)計師應(yīng)該如何表現(xiàn)數(shù)據(jù)的展現(xiàn)形式。盡管數(shù)據(jù)展現(xiàn)并非是所有行業(yè)領(lǐng)域的設(shè)計重點，但在特定范圍里，如：行業(yè)經(jīng)濟(jì)數(shù)據(jù)，體育博彩數(shù)據(jù)，棋牌競技數(shù)據(jù)，交通里程數(shù)據(jù)，個人成就數(shù)據(jù)等等，其內(nèi)容是整個產(chǎn)品中不可或缺的一部分。

該如何將各個維度的數(shù)據(jù)恰如其分的表達(dá)出來，會成為設(shè)計師的工作重點，這比單獨的圖形版式更加復(fù)雜。特別是在用戶的體驗感上，數(shù)字與圖形相比，本身就具有一定的違和感。因此，設(shè)計師需要有更強(qiáng)大的設(shè)計構(gòu)造能力，在數(shù)據(jù)中尋求美與優(yōu)雅的體現(xiàn)。

未來的人是完全數(shù)據(jù)化的人

無論人文主義怎樣反感將人的特性統(tǒng)一在數(shù)據(jù)當(dāng)中，都不能阻止社會向數(shù)據(jù)化的方向發(fā)展。在過去，人們所關(guān)注的重點，往往是具體的事物和外在的表現(xiàn)力。

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

如果我們仔細(xì)觀察這幾年的產(chǎn)品功能發(fā)布，就會發(fā)現(xiàn)，產(chǎn)品的數(shù)據(jù)的表現(xiàn)已經(jīng)往極度細(xì)化的方向發(fā)展，凡是能夠滿足一個用戶自身具備優(yōu)勢的表現(xiàn)點，都會產(chǎn)生相應(yīng)的與其他用戶相比較的數(shù)據(jù)。所以如今的產(chǎn)品設(shè)計已然不是圖形表達(dá)，而是如何做好數(shù)據(jù)表達(dá)。

數(shù)值表達(dá)與設(shè)計的矛盾

設(shè)計的本質(zhì)是數(shù)值，這一點我在其他文章里陳述過，但我需要強(qiáng)調(diào)的是，設(shè)計是數(shù)值的外在呈現(xiàn)，但它決不是數(shù)值的直接表現(xiàn)。

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

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

我的客戶時常把這種難題甩給我，問為什么界面看起來不漂亮，我的回答只有一個:“數(shù)值組合不是圖形排版，信息傳遞的準(zhǔn)確性才是數(shù)值組合的第一目標(biāo)，而不是美觀。”

“那我不管，我就要它好看！”

如何才能讓數(shù)據(jù)展現(xiàn)在產(chǎn)品中呈現(xiàn)美的感覺，我?guī)缀鮿佑昧宋宜械拿缹W(xué)能力和設(shè)計技巧。最終探索出了以下幾個解決方法。

數(shù)據(jù)表現(xiàn)在界面中常見的幾個問題

我先說下數(shù)據(jù)表現(xiàn)在界面中通常會出現(xiàn)的幾個問題：

1.界面的擁擠雜亂

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

2.過于展現(xiàn)數(shù)據(jù)的精確度

在某些產(chǎn)品中，為了表現(xiàn)其專業(yè)度和優(yōu)勢，有的會將數(shù)值精確顯示在小數(shù)點后兩位，有的會將數(shù)據(jù)的位數(shù)增加在6-8位，這種做法并非完全不可行，特別是在棋牌競技類數(shù)據(jù)中，用戶的得分往往由多位數(shù)組成。然而面對移動平臺硬件，這種多位數(shù)的展現(xiàn)形式很容易因為屏幕大小的改變而出現(xiàn)弊端，比如：數(shù)字?jǐn)[放不下，出現(xiàn)表格破損。

3.數(shù)據(jù)表現(xiàn)的展現(xiàn)手法單一

關(guān)于數(shù)據(jù)中的動態(tài)表格呈現(xiàn)往往與程序員的水平有密切關(guān)系，這需要設(shè)計師根據(jù)動態(tài)表格的呈現(xiàn)提交確切的設(shè)計數(shù)值，包括顏色、各個數(shù)據(jù)的間隔規(guī)范等等。動態(tài)表格由于程序的控制，可以有很多元化的表現(xiàn)手法，比如：圓形、線形、塊狀形等等……這些都是數(shù)據(jù)與圖形的結(jié)合方式，也是最能發(fā)揮設(shè)計師用途的表現(xiàn)形式。然而這部分表格的呈現(xiàn)通常比較單一化，一方面是設(shè)計師對表格的設(shè)計無法提交確切的數(shù)值規(guī)范，另一方面也在于程序?qū)Ρ砀竦拈_發(fā)能力有限，短平快的研發(fā)周期讓多數(shù)產(chǎn)品只愿調(diào)用現(xiàn)有的效果模板，這樣在表現(xiàn)上必然會受到局限。

比如：赤兔和微信運(yùn)用所用的就是動態(tài)圖形表格，在程序上屬于比較簡單的。

如何解決？

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

靈活取舍

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

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

誰得了第一名？自己是第幾名？

至于其他人，用戶并不關(guān)心，所以其他人的名字是否顯示完全不是一件重要的事情。

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

版式多變

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

比如：在這款競技平臺中，將用戶數(shù)據(jù)采用豎版排列是非常聰明的做法，并且用顏色區(qū)分主次關(guān)系。

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

分納層級

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

動畫表現(xiàn)

動畫表現(xiàn)主要運(yùn)用在動態(tài)圖形表格上，一般用來表達(dá)用戶自身的數(shù)據(jù)，這種動態(tài)展現(xiàn)能大大增加用戶的好感度及自我成就的滿足感。但動態(tài)圖形表格對設(shè)計以及程序的要求要遠(yuǎn)大于普通的文字表格。

比如：Clue作為一款女性生理周期的數(shù)據(jù)產(chǎn)品，其動態(tài)圖形表格的數(shù)據(jù)整理還能帶有用戶的主觀交互體驗，就遠(yuǎn)比只能作為觀摩的動態(tài)圖形表格要好。有興趣者自行查閱，以便了解文字表格，動態(tài)圖形表格與帶有交互的動態(tài)圖形表格之間的差別。就目前而言，國內(nèi)產(chǎn)品基本上是調(diào)用國外已有開發(fā)出的效果展現(xiàn)，所以在可操作性上往往不能和產(chǎn)品功能完全適應(yīng)，基本上還是屬于簡單的效果利用，沒有真正的讓整個數(shù)據(jù)以動態(tài)圖形表格的形式呈現(xiàn)。但是動態(tài)圖形表格將是未來產(chǎn)品數(shù)據(jù)的展現(xiàn)突破口，因為傳統(tǒng)的文字表格已經(jīng)不能滿足用戶的需要，無論設(shè)計師如何排版，隨著個人數(shù)據(jù)的細(xì)化，他們都需要更個性，更動態(tài)，更具有交互性的方式來體現(xiàn)自身在虛擬世界的數(shù)據(jù)價值。在這一點上，可以說，程序的開發(fā)與設(shè)計是一體兩面，不可分割的。