7種大屏設計與布局思路,你不知道就虧了


“數據可視化在本質上是直接給到用戶探索分析的結果而不是讓用戶感受分析過程”

在現今數據驅動的時代,可視化已逐漸成為數據分析的主要途徑,可視化大屏的廣泛使用便應運而生。很多公司及政務機構,常利用大屏的手段展現其實力或演示業務,可視化的效果能讓觀者更快速的理解結果並直觀的看到數據展現。因此,可視化大屏的優勢顯而易見。

那么一個完整的數據的可視化,是如何完成的呢?

包括以下4個步驟:

1. 確定數據可視化的主題

2. 提煉可視化主題的數據

3. 根據數據關系確定圖表

4. 進行可視化布局及設計

前面三步做的再好,布局做不好,功虧一簣!(划重點!!) 

由此可見可視化布局及設計的重要性。

如何做好可視化設計的頁面布局呢?

我們要遵循以下三個原則:

(1)聚焦

設計者應該通過適當的排版布局,將用戶的注意力集中到可視化結果中最重要的區域,從而將重要的數據信息凸顯出來,抓住用戶的注意力,提升用戶信息解讀的效率。

(2)平衡

要合理的利用可視化的設計空間,在確保重要信息位於可視化空間視覺中心的情況下,保證整個頁面的不同元素在空間位置上處於平衡,提升設計美感。

(3)簡潔

在可視化整體布局中,要突出重點,避免過於復雜或影響數據呈現效果的冗余元素。

基於這三點精髓,再去着手設計與布局,方能收獲好的結果。

小億在這里已經整理出了7種大屏的設計與布局思路,同大家一起分享。

我們先按尺寸將大屏的類型歸結為三大類:標准大屏、超大屏、異性屏,再對每類大屏的幾種布局方式進行分類展示:

l 標准大屏

¡ 常規布局

¡ 左右布局

l 超大屏

¡ 均等布局

¡ 故事布局

¡ 君臣布局

l 異性屏

¡ 縱向布局

¡ 繁星布局

一、標准大屏

類型定義:分辨率1920*1080,比例16:9 

布局思路×2:

1. 常規布局

(1)布局要點:左中右。中間為主要指標,占據頁面較大面積;左右兩邊為次要指標,面積較小,較集中,展現指標數量較多

(2)應用場景:多數適用。如教育、房地產、政務等行業的數據分析展示,需要展示多項指標,並突出某些關鍵指標時適用

(3)優勢:清晰展現較多的指標,主次分明

 

2.左右布局

(1)布局要點:重點區域擴大,左或右放置少量指標,不易展示大量指標

(2)應用場景:常用於地圖展示、三維模型展示,將重點區域擴大。如智慧園區、智慧工廠、智慧城市等

(3)優勢:能夠展現更多的圖像區域,三維模型的立體感更強

 

二、超大屏

類型定義:比例16:9 ,面積更大,標准屏拼接或延展而來

布局思路×3:

1. 均等布局

(1)布局要點:按照1:1:1平均分配每一塊的展示區域

(2)應用場景:常用於展示平級指標

(3)優勢:無明顯主次區分的指標需要展現時,划分區域,在視覺上不會過多干擾,平級展現時適用

 

2.故事布局

(1)布局要點:沒有明顯的分割區域

(2)應用場景:常用於講述一個完成的故事線

(3)優勢:數據連貫性強,當指標間有關聯關系時,可以有邏輯地遞進去展現

 

3.君臣布局

(1)布局要點:中間大,兩邊小。中間為主要指標,占據頁面較大面積,通常放置三維大圖;左右兩邊為次要指標,面積較小,較集中,展現指標較多

(2)應用場景:需要展示多項指標,並突出某些關鍵指標或三維圖像時適用

(3)優勢:圖像更大更清晰立體,指標主次分明

 

三、異形屏

類型定義:比例不是16:9 

布局思路×2:

1. 縱向布局

(1)布局要點:由於屏幕的原因,將頁面分割為上中下部分,中間區域較大,上下較小,重點突出中間區域

(2)應用場景:在一些特殊的展會上使用

(3)優勢:很好的適配特殊場景下的屏幕,主次分明,突出重點

 

2.繁星布局

(1)布局要點:布局較為隨意,滿

屏都是各種各樣的指標,盡可能多地展現

(2)應用場景:常用於日常運維、監管人員使用

(3)優勢:展現指標多而全面

以上,就是小億為大家帶來的七種大屏設計與布局的思路。其實,大屏的設計是一個新興的設計學科,它同於APP頁面的設計,都需要考慮使用場景,再去確定布局方式,卻不同於網頁設計,需要結合它獨有的特征,定義布局設計流程及規范。大家學到了嗎?

上面介紹的這些布局中炫酷的大屏是怎樣制作的呢,想必一定會有人產生好奇。在這里,小億就向大家推薦這個好用的數據可視化平台——酷屏。

酷屏是億信華辰自主研發的新一代數據可視化產品,可靈活、快捷地制作各類交互式常規屏和大屏可視化,內置百余種炫酷組件和3D特效,讓數據“躍然屏上”,得到更形象、更直觀的可視化呈現。

對於設計和布局方面,酷屏的一個重要優勢就在於:能夠真正達到設計走多遠,展現就能到多遠的境界。方便開發和實施人員快捷的完成頁面需求並最終得到好的展現。任何類型的用戶想要達到的頁面效果及布局都可以使用酷屏分析快捷地制作實現。

我們的酷屏市場上現已有很多易用的模板,且配有完善的“保姆級”社區學習文檔,上手簡單,完全不會做的同學也可以直接套用模板。總之,讓你分分鍾get炫酷大屏!

想要了解更多酷屏的功能和用法嗎,想要嘗試運用不同的設計與布局思路作出適合於你的炫酷大屏嗎?快來我們的官網免費體驗SaaS版酷屏吧~


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM