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

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

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

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

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

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

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

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

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

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

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

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

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

如何才能讓數(shù)據(jù)展現(xiàn)在產(chǎn)品中呈現(xiàn)美的感覺，我?guī)缀鮿?dòng)用了我所有的美學(xué)能力和設(shè)計(jì)技巧。最終探索出了以下幾個(gè)解決方法。

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

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

1.界面的擁擠雜亂

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

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

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

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

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

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

如何解決？

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

靈活取舍

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

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

1. 誰(shuí)得了第一名？
2. 自己是第幾名？

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

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

版式多變

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

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

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

分納層級(jí)

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

動(dòng)畫表現(xiàn)

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

就目前而言，國(guó)內(nèi)產(chǎn)品基本上是調(diào)用國(guó)外已有開發(fā)出的效果展現(xiàn)，所以在可操作性上往往不能和產(chǎn)品功能完全適應(yīng)，基本上還是屬于簡(jiǎn)單的效果利用，沒(méi)有真正的讓整個(gè)數(shù)據(jù)以動(dòng)態(tài)圖形表格的形式呈現(xiàn)。但是動(dòng)態(tài)圖形表格將是未來(lái)產(chǎn)品數(shù)據(jù)的展現(xiàn)突破口，因?yàn)閭鹘y(tǒng)的文字表格已經(jīng)不能滿足用戶的需要，無(wú)論設(shè)計(jì)師如何排版，隨著個(gè)人數(shù)據(jù)的細(xì)化，他們都需要更個(gè)性，更動(dòng)態(tài)，更具有交互性的方式來(lái)體現(xiàn)自身在虛擬世界的數(shù)據(jù)價(jià)值。在這一點(diǎn)上，可以說(shuō)，程序的開發(fā)與設(shè)計(jì)是一體兩面，不可分割的。

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

作者：王沛/Ada Wong，自由人，獨(dú)立設(shè)計(jì)師

本文由 @Ada Wong 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。