產(chǎn)品設(shè)計(jì)中,如何優(yōu)雅地呈現(xiàn)數(shù)據(jù)的展現(xiàn)形式?

3 評(píng)論 15823 瀏覽 47 收藏 14 分鐘

如今的產(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)載。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 微信運(yùn)動(dòng)的名字不是只顯示四個(gè)字呀。

    回復(fù)
    1. 對(duì)于中小屏幕手機(jī),只顯示用戶名的前四個(gè)字

      來(lái)自上海 回復(fù)
  2. mark 3q

    來(lái)自上海 回復(fù)