人的注意力是稀缺資源，讓信息去匹配讀者的注意力，顯然優(yōu)于讓人的注意力去適應(yīng)信息。根據(jù) NNGroup、UXPin 等設(shè)計(jì)團(tuán)體的研究，人眼最常用的兩種掃描模式是「F 型」和「Z 型」：

「F 型」應(yīng)用最為廣泛，尤其是對(duì)于內(nèi)容豐富的網(wǎng)站

「Z 型」用于那些文字信息少，最后需要強(qiáng)調(diào)用戶點(diǎn)擊類的網(wǎng)站

人眼掃描模式幫我們確定了我們布局設(shè)計(jì)的原則。但落實(shí)到駕駛艙、多級(jí)分析頁(yè)面、BI分析報(bào)告、移動(dòng)端這些常用的報(bào)表上，有沒有詳細(xì)的布局參考呢？請(qǐng)接著往下看：

一、駕駛艙布局
1、推薦的布局分布圖

主：核心業(yè)務(wù)指標(biāo)安排在中間位置、占較大面積，多為動(dòng)態(tài)效果豐富的地圖
次：次要指標(biāo)位于屏幕兩側(cè)，多為各類圖表
輔：輔助分析的內(nèi)容，可以通過(guò)鉆取聯(lián)動(dòng)、輪播顯示
一般把有關(guān)聯(lián)的指標(biāo)讓其相鄰或靠近，把圖表類型相近的指標(biāo)放一起，這樣能減少觀者認(rèn)知上的負(fù)擔(dān)并提高信息傳遞的效率。

2、合理的信息密度篩選

新手經(jīng)常會(huì)有一個(gè)誤區(qū)，認(rèn)為可視化就是把所有的內(nèi)容全部都展現(xiàn)給用戶看。

但是一個(gè)好的可視化應(yīng)當(dāng)要砍掉大部分內(nèi)容，只保留最需要的，這樣才有利于向用戶清晰地?cái)⑹隹梢暬适隆?/p>

信息篩選前后對(duì)比效果如下圖所示：

二、多級(jí)分析頁(yè)面布局
經(jīng)典駕駛艙布局

將數(shù)據(jù)分析類型頁(yè)面拆解為多個(gè)部分，通常為“總 - 分 -分”的結(jié)構(gòu)，多維度地展示數(shù)據(jù)的全貌，幫助閱讀者發(fā)現(xiàn)當(dāng)前問(wèn)題。

第一層：數(shù)據(jù)概覽

內(nèi)容：整體指標(biāo)狀況和變化趨勢(shì)。

呈現(xiàn)方式：指標(biāo)卡搭配圖表／表格

在報(bào)表首頁(yè)頂端直接展現(xiàn)最重要的指標(biāo)信息的布局，是目前眾多以運(yùn)營(yíng)人員為對(duì)象的報(bào)表系統(tǒng)最喜歡使用的結(jié)構(gòu)，整體數(shù)字指標(biāo)一目了然，近期的數(shù)據(jù)用圖表／表格在下方體現(xiàn)，如下圖所示：

優(yōu)點(diǎn)：這種報(bào)表可以讓閱讀者在幾秒內(nèi)把握全局?jǐn)?shù)據(jù)，是一種在閱讀報(bào)表方面時(shí)間投入產(chǎn)出比很高的方式。在每個(gè)指標(biāo)上還可以進(jìn)行鉆取，對(duì)于感興趣的數(shù)據(jù)指標(biāo)主題，閱讀者可以通過(guò)鉆取來(lái)了解其詳細(xì)內(nèi)容。這種方式不僅能降低切換成本，而且不會(huì)給閱讀者的思維造成“顛簸感”。

第二層：詳細(xì)分析

當(dāng)閱讀者想進(jìn)一步了解「存貨」相關(guān)的情況，可以點(diǎn)擊第一層指標(biāo)卡，鉆取到詳細(xì)的存貨金額分析，如下圖所示：

第三層：數(shù)據(jù)詳情

數(shù)據(jù)明細(xì)用來(lái)展示單個(gè)指標(biāo)總覽和明細(xì)。常用于數(shù)據(jù)報(bào)表細(xì)節(jié)信息的展示，根據(jù)業(yè)務(wù)訴求可配置文本、列表、可視化圖表等，這里以明細(xì)表舉例，如下圖所示：

三、BI分析報(bào)告布局
1、布局原則

描述清楚模型的作用
關(guān)鍵指標(biāo)計(jì)算公式
根據(jù)圖表得出結(jié)論和建議

2、示例

四、移動(dòng)端布局
1、背景

移動(dòng)端報(bào)表有著隨時(shí)隨地、迅速獲取的特性，然而大部分報(bào)表工程師之前還只接觸過(guò)PC端報(bào)表的制作，對(duì)移動(dòng)端報(bào)表該怎么設(shè)計(jì)卻無(wú)從下手。

對(duì)于用戶來(lái)說(shuō)，移動(dòng)端屏幕小，可承載的內(nèi)容少，所以布局設(shè)計(jì)上要能快速傳達(dá)關(guān)鍵信息，要醒目、顯眼。

2、解決方案

借助 FineReport 軟件，運(yùn)用 App 的設(shè)計(jì)思路，布局設(shè)計(jì)思路如下：

篇幅較長(zhǎng)，具體布局設(shè)計(jì)可參考：移動(dòng)端布局

五、其他注意事項(xiàng)
1、間距相等

涉及到各模塊標(biāo)題與模塊邊界的間距、模塊與模塊之間的間距模塊與整個(gè)大頁(yè)面額間距，這幾個(gè)重要地方要做到統(tǒng)一一致，確保布局的規(guī)整性。

一些細(xì)節(jié)之處也需要做到統(tǒng)一，例如圖表坐標(biāo)軸與模塊邊界的間距，各個(gè)分類之間的間距等需要細(xì)化。

2、合理留白

在版式設(shè)計(jì)中空白運(yùn)用的好壞，直接影響其版面的視覺傳達(dá)效果。留白的運(yùn)用是增強(qiáng)視覺傳達(dá)效果，提高作品的訴求力，賦予作品版面審美價(jià)值的一種重要構(gòu)成技術(shù)。

應(yīng)用在報(bào)表中主要體現(xiàn)在模塊不要頂邊，模塊與模塊間要有合理間距，在模塊中圖表的邊線不要頂邊。

私信回復(fù)“報(bào)表”，可免費(fèi)體驗(yàn)企業(yè)級(jí)報(bào)表工具——FineReport

總結(jié)

以上是生活随笔為你收集整理的驾驶舱、移动端、分析报告，这几个可视化布局思路，拿来就能用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。