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

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

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

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

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

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

2、合理的信息密度篩選

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

但是一個好的可視化應(yīng)當(dāng)要砍掉大部分內(nèi)容，只保留最需要的，這樣才有利于向用戶清晰地敘述可視化故事。

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

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

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

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

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

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

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

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

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

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

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

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

三、BI分析報告布局
1、布局原則

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

2、示例

四、移動端布局
1、背景

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

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

2、解決方案

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

篇幅較長，具體布局設(shè)計可參考：移動端布局

五、其他注意事項
1、間距相等

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

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

2、合理留白

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

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

私信回復(fù)“報表”，可免費體驗企業(yè)級報表工具——FineReport

總結(jié)

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

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