對(duì)于數(shù)據(jù)類(lèi)頁(yè)面來(lái)說(shuō)，首要注重的應(yīng)該是頁(yè)面信息，其次再是各種功能操作。那么頁(yè)面信息又有什么搭建框架與要點(diǎn)呢？筆者將為我們進(jìn)行分析。

信息才是頁(yè)面的主角，不要讓功能操作喧賓奪主。

而數(shù)據(jù)展示類(lèi)頁(yè)面比較特殊，相較于常規(guī)頁(yè)面信息量更大，設(shè)計(jì)方法與常規(guī)頁(yè)面還是略有不同，總結(jié)了一些設(shè)計(jì)思路，結(jié)合實(shí)例分享一下。

這種頁(yè)面設(shè)計(jì)比較考驗(yàn)產(chǎn)品能力，如果只是擺數(shù)據(jù)就沒(méi)意思了，產(chǎn)品經(jīng)理需要讓數(shù)據(jù)類(lèi)信息清晰易獲取，且簡(jiǎn)單易懂，才能讓用戶用起來(lái)。

一、明確信息點(diǎn)-用戶關(guān)注什么？

注意是用戶的關(guān)注點(diǎn)，不是數(shù)據(jù)項(xiàng)。

數(shù)據(jù)是產(chǎn)品設(shè)計(jì)中的產(chǎn)物，而用戶期望的并不是數(shù)據(jù)，而是獲取最終處理后的信息，也就是用戶的關(guān)注點(diǎn)。所以先整理出用戶的關(guān)注點(diǎn)，不要直接將數(shù)據(jù)項(xiàng)羅列出來(lái)。

一個(gè)頁(yè)面往往承載多類(lèi)信息，建議將信息分類(lèi)梳理，逐步細(xì)化。

1. 明確大類(lèi)信息點(diǎn)

信息是分層級(jí)的，為了避免遺漏，我們先找到大的關(guān)注點(diǎn)，也就是大類(lèi)信息點(diǎn)，然后逐層拆解。

如何明確大類(lèi)信息點(diǎn)？取決于用戶需求和產(chǎn)品目的，也就是用戶需要什么 和你想讓他看到什么？據(jù)此確定功能的關(guān)注點(diǎn)，這一步建議多花時(shí)間想想，否則后續(xù)都是白搭。

直接上例子，這是一個(gè)作業(yè)查閱頁(yè)面-教師查閱學(xué)生們單詞學(xué)習(xí)計(jì)劃的完成情況，這樣一個(gè)頁(yè)面教師的關(guān)注點(diǎn)是：計(jì)劃做沒(méi)做 和 做得怎么樣，也就是計(jì)劃完成情況和單詞掌握情況。

2. 拆解大類(lèi)信息點(diǎn)

大類(lèi)信息點(diǎn)往往是比較籠統(tǒng)的，不具有落地效果，需要進(jìn)一步拆解，用子信息點(diǎn)來(lái)支撐大類(lèi)信息點(diǎn)。

如何拆解？

原則就是尋找能支撐大類(lèi)信息點(diǎn)的子信息點(diǎn)。不同的業(yè)務(wù)會(huì)有不同的拆分維度，但原則是一樣的，拆解成可落地的子信息點(diǎn)。

如下圖，將上述大類(lèi)信息點(diǎn)拆解成子信息點(diǎn)，采用 總體 和 當(dāng)日 作為拆分維度，最終拆解出對(duì)應(yīng)的子信息點(diǎn)。

二、搭建信息面-將信息點(diǎn)組織為有效信息

零散的信息點(diǎn)是無(wú)效的，將信息點(diǎn)有組織地呈現(xiàn)給用戶，才有價(jià)值，也就是信息面。

先說(shuō)一下我所理解的信息面，信息面=能清晰且完整地表達(dá)出信息價(jià)值的信息點(diǎn)組合。

信息點(diǎn)是存在關(guān)聯(lián)的，我們需要明確組織成什么樣的信息面給用戶才是最高效的，在常見(jiàn)的設(shè)計(jì)中，一般可以分為重要信息面和次要信息面。

• 重要信息面：用戶關(guān)注度很高，一般是對(duì)頁(yè)面具有高度概括性，讓用戶可以快速獲取頁(yè)面概況，又或者是特殊關(guān)注的重要信息；
• 次要信息面：用戶關(guān)注度一般，對(duì)概況信息起到詳解或補(bǔ)充的作用，可以全面闡述頁(yè)面信息。

這是常見(jiàn)頁(yè)面的信息面層級(jí)劃分，并不是所有頁(yè)面都這樣，有些頁(yè)面也會(huì)是同等級(jí)的信息面，這個(gè)取決于你的業(yè)務(wù)需求和產(chǎn)品目標(biāo)，可以靈活調(diào)整。

需要注意的是，一個(gè)頁(yè)面可能會(huì)同時(shí)存在多個(gè)同等級(jí)信息面，比如兩個(gè)次要信息面，就是兩個(gè)同等重要但表達(dá)不同內(nèi)容的信息面，這種情況我們就需要根據(jù)業(yè)務(wù)需求，再排列優(yōu)先級(jí)，在設(shè)計(jì)中體現(xiàn)出側(cè)重。

回到上面的例子，搭建起兩個(gè)信息面：重要和次要信息面：

重要信息面是是全班信息面，次要信息面是個(gè)人信息面，在后續(xù)的設(shè)計(jì)中，要利用整理好的這份信息框架，讓信息點(diǎn)支撐起全班信息面和個(gè)人信息面，這對(duì)用戶來(lái)說(shuō)才是一組有效信息，而不是雜亂無(wú)章的信息噪點(diǎn)。

三、確定數(shù)據(jù)項(xiàng)-建立信息點(diǎn)和數(shù)據(jù)項(xiàng)的關(guān)聯(lián)性

從信息點(diǎn)整理出了信息面，那么信息點(diǎn)又從哪里來(lái)呢？

一開(kāi)始也有說(shuō)，數(shù)據(jù)只是產(chǎn)品設(shè)計(jì)的產(chǎn)物，并不是用戶想要的，但我們終須從數(shù)據(jù)出發(fā)，將其轉(zhuǎn)化為信息點(diǎn)，這就需要我們建立起數(shù)據(jù)和信息點(diǎn)的關(guān)聯(lián)。

要做的就是，確定什么數(shù)據(jù)項(xiàng)能代表這個(gè)信息點(diǎn)。

如下圖，產(chǎn)品經(jīng)理根據(jù)對(duì)業(yè)務(wù)的理解，確定各信息點(diǎn)的對(duì)應(yīng)數(shù)據(jù)項(xiàng)，這樣就完整地將原始數(shù)據(jù)轉(zhuǎn)化為可讀的信息點(diǎn)了，最終再搭建為易讀的信息面。

四、設(shè)計(jì)頁(yè)面-將信息框架落地到頁(yè)面上

最后一步，有了整理好的信息框架，接下來(lái)該如何落地到頁(yè)面上？

根據(jù)自己的設(shè)計(jì)經(jīng)驗(yàn)，有以下幾個(gè)方法論分享一下，目的只有一個(gè)：讓用戶高效獲取到想要的信息。

1. 信息有結(jié)構(gòu)，就像寫(xiě)文章一樣

好的頁(yè)面信息就像寫(xiě)文章一樣，是有類(lèi)似于“總分總”或者“總分”結(jié)構(gòu)的，讀者可以很自然地讀懂這篇文章。

頁(yè)面就是文章，信息就是文字，頁(yè)面信息怎么鋪就是文章結(jié)構(gòu)，“總分總”還是“總分”結(jié)構(gòu)好，看你對(duì)業(yè)務(wù)和用戶習(xí)慣的理解。

前面我們梳理了一份信息框架，接下來(lái)就開(kāi)始轉(zhuǎn)化為實(shí)際頁(yè)面：

• 首先，將全班信息面（重要信息面）放在了頂部，作為整頁(yè)信息的概況；
• 然后，將個(gè)人信息面（次要信息面）放在了下面的卡片中，作為概括信息的詳解，但沒(méi)有將原始的次要信息（右圖）冰冷地?cái)[給用戶，而是進(jìn)一步提煉了用戶想要的信息，所以在左圖中你很少看到數(shù)字，更多的是可視化圖表和重點(diǎn)關(guān)注用戶名稱(chēng)，這樣可以讓用戶更高效地獲取信息；
• 最后，將又臭又長(zhǎng)又啰嗦的表單放在了二級(jí)頁(yè)面，讓那些少數(shù)具有高階數(shù)據(jù)需求的用戶也可以獲取到最全面的信息。

不知道你有沒(méi)有看出來(lái)，我在用“總分”結(jié)構(gòu)呈現(xiàn)這個(gè)頁(yè)面，將信息從一個(gè)點(diǎn)逐漸拆給用戶，類(lèi)似于金字塔結(jié)構(gòu)。

一個(gè)好的頁(yè)面一定是有結(jié)構(gòu)的，將梳理好的信息面有結(jié)構(gòu)地鋪在頁(yè)面上，這樣就完成了從數(shù)據(jù)項(xiàng)->信息點(diǎn)->信息面->實(shí)際頁(yè)面的完整流程！

2. 數(shù)據(jù)可視化，不要直接擺數(shù)據(jù)

字不如表，表不如圖，是亙古不變的的道理，從原始數(shù)據(jù)里去獲取信息是很累的事情，可以嘗試通過(guò)可視化圖表來(lái)呈現(xiàn)數(shù)據(jù)，比如解決上述例子中的個(gè)人信息面-學(xué)生掌握詞量的信息呈現(xiàn)問(wèn)題，用下圖所示這種類(lèi)似于成績(jī)分布圖，可以讓用戶快速獲取到班內(nèi)學(xué)生的掌握詞量分布，這是用數(shù)據(jù)項(xiàng)很難傳達(dá)出來(lái)的。

要善于使用可視化圖表，盡量避免讓用戶自行處理復(fù)雜難懂的數(shù)據(jù)項(xiàng)。

五、最后，總結(jié)一下

數(shù)據(jù)類(lèi)頁(yè)面設(shè)計(jì)方法：

1. 明確信息點(diǎn)，找到用戶關(guān)注什么，從大到小逐層細(xì)化；
2. 搭建信息面，將信息點(diǎn)組織為信息面，使其成為有效信息；
3. 確定數(shù)據(jù)項(xiàng)，建立信息點(diǎn)和數(shù)據(jù)項(xiàng)之間的關(guān)聯(lián)；
4. 設(shè)計(jì)頁(yè)面，將整理好的信息框架有結(jié)構(gòu)、可視化地落地到頁(yè)面上。

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

題圖來(lái)自Unsplash，基于CC0協(xié)議。