人的注意力是稀缺資源，讓信息去匹配讀者的注意力，顯然優于讓人的注意力去適應信息。根據 NNGroup、UXPin 等設計團體的研究，人眼最常用的兩種掃描模式是「F 型」和「Z 型」：

「F 型」應用最為廣泛，尤其是對于內容豐富的網站

「Z 型」用于那些文字信息少，最后需要強調用戶點擊類的網站

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

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

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

2、合理的信息密度篩選

新手經常會有一個誤區，認為可視化就是把所有的內容全部都展現給用戶看。

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

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

二、多級分析頁面布局
經典駕駛艙布局

將數據分析類型頁面拆解為多個部分，通常為“總 - 分 -分”的結構，多維度地展示數據的全貌，幫助閱讀者發現當前問題。

第一層：數據概覽

內容：整體指標狀況和變化趨勢。

呈現方式：指標卡搭配圖表／表格

在報表首頁頂端直接展現最重要的指標信息的布局，是目前眾多以運營人員為對象的報表系統最喜歡使用的結構，整體數字指標一目了然，近期的數據用圖表／表格在下方體現，如下圖所示：

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

第二層：詳細分析

當閱讀者想進一步了解「存貨」相關的情況，可以點擊第一層指標卡，鉆取到詳細的存貨金額分析，如下圖所示：

第三層：數據詳情

數據明細用來展示單個指標總覽和明細。常用于數據報表細節信息的展示，根據業務訴求可配置文本、列表、可視化圖表等，這里以明細表舉例，如下圖所示：

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

描述清楚模型的作用
關鍵指標計算公式
根據圖表得出結論和建議

2、示例

四、移動端布局
1、背景

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

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

2、解決方案

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

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

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

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

一些細節之處也需要做到統一，例如圖表坐標軸與模塊邊界的間距，各個分類之間的間距等需要細化。

2、合理留白

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

應用在報表中主要體現在模塊不要頂邊，模塊與模塊間要有合理間距，在模塊中圖表的邊線不要頂邊。

私信回復“報表”，可免費體驗企業級報表工具——FineReport

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。