在
數據可視化的一系列產品當中,有一種兼具數據讀取、展示,UI設計及視覺設計于一體的酷炫產品——可視化大屏,這種可視化產品的設計對視覺傳達具有較高的要求。然而多數人在面對這一產品的需求時往往會因多種因素感到無力下手,那么今天小億就貢獻出一部獨門秘籍,也就是可視化大屏的布局理念,相信大家在看過之后一定能設計出自己滿意的樣式啦。
一、需求梳理
首先在設計的初始我們需要先對到手的需求進行梳理,將即將展示的繁雜數據進行類別及層級的結構劃分。這一環是相當重要的,在這個時候的梳理過程就是在搭建初級的布局框架了,我們將最重要的數據和次級數據逐一排列開來,然后各類數據大概的表達方式也有一個初步的理解就即將進入下一步。

二、數據圖表展示規劃
在初步的框架梳理之后,接下來的工作是對各組數據量身安排一類表達方式,這就好比有很多的玩偶在等著咱們給他們逐一的搭配好服裝一樣,合理的設計數據組的表達方式可以大大提高整體的美觀程度,也有利于布局的劃分排列,對于整體視覺呈現加分不少。但是一定要記得,不同的數據有各自不同的表達方式,千萬不要張冠李戴哦。
三、頁面布局
將所有的圖表模塊都進行初步的整理過之后,就可以開始進入頁面布局的階段了。在進行頁面布局時需要注意的是,依靠前面的層級劃分來進行布局,整體視覺最為重要的部分一般拿來展示核心數據,下面我們來看一個布局的例子:

在整體數據有大約三個層級的情況下,可以優先使用延中間軸對稱的布局方式來進行,將核心數據設置在中心位置,然后二級和三級數據依次往兩邊排列開來,這種布局手法比較適合聚焦觀看者的視覺,在第一時間就接觸到你想要展示的最重要的數據,然后隨著數據的延伸進而觀察下一層級的模塊。
但如果遇到數據展示的模塊不是很多,而且大的層級關系很簡單,比如只有兩個數據級別的時候又應該怎么辦呢,不要怕,我將用下面的例子來講解:

而數據較少的情況下,可以增加中心區域核心數據的范圍,擴大視覺聚焦的空間,然后再將二級模塊分列兩邊,這樣的布局簡單明了、結構清晰很適合展示優先級很高的核心數據的排版布局。
還有一類區別于以上兩種,那就是上下分割的布局樣式,這種適合于核心數據的成組展示,或者涉及到有大塊數據地圖的展示需求,將大塊的數據組填充整個畫面的上大部分,而后再將二級小模塊列在畫布下方。

最后就是相對特別一點的左右布局的方式了,在進行系統數據展示或有3D展示需求的時候,一般會用到這一類,將核心內容占據畫布左側大部分區域,而后根據數據模塊的關聯性和重要層級來依次向右排列,這樣的做法相對符合觀察者的查看習慣,有很好的人機工程學理念基礎。

以上給大家分享了一些可視化大屏布局的基本思路,但是在設計過程中還是要依據實際的展示需求來靈活發揮,只要保證數據展示的層級不會太雜太亂,畫面的布局符合視覺規律,相信是一定能夠設計出很棒的可視化大屏的。
(部分內容來源網絡,如有侵權請聯系刪除)