百度商橋

在線咨詢

400-660-9989

uipower@uipower.com

大屏可視化規范總結

發布時間:2021-7-7 15:00:37

數據可視化是一種以圖形描繪密集和復雜信息的表現形式,利用各類圖形化的設計手段將復雜不直觀的數據有邏輯地展現出來。

設計規范的意義有很多,比如:設計規范空考驗設計團隊的實例;減少設計出錯率,提高工作效率;迭代與交接的更為方便等等。本文結合項目,和大家聊聊大屏可視化規范有哪些。

一、設計原則

1.數據轉化要真實準確。

2.信息傳達要明確,清晰的表達重要信息。

3.有條理性的表達內容,使用戶在短時間內獲取更多信息。

4.根據產品的需求,使用不同的元素進行設計(避免過度修飾)。

二、圖表的形式展現

常見的圖表有柱狀圖、折線圖、條形圖、面積圖、儀表盤、餅圖、等等。根據產品的需求,在選擇圖標是要理性,合理利用圖表進行設計。例如:數據的統計、分析、對比、反映數據的差異可使用柱狀圖表示,柱狀圖又分,分組柱狀圖、堆疊柱狀圖、百分比柱狀圖等;數據實時變化可使用折線圖,在折線圖中,數據是遞增還是遞減等一些數據都可以清晰的反映出來;餅圖則將數據轉化為百分比的形式展現,使各項數據清晰易懂,餅圖不適合用于數據量大分類很多的場景。所以數據可視化的第一步就是選擇合適的圖表類型,從而達到最好的效果。

UIPower案列-UIpower
UIPower案列-UIpower

三、屏幕分辨率

最為常見的就是黃金比例16:9 ,也就是1920*1080的分辨率,它是指顯示器的寬高比,是由寬度除以高度所得的比例,根據人體工程學的研究,發現人的視野范圍是長寬為16:9的長方形,所以根據這個黃金比例尺寸設計產品。

遇到較大分辨率可以按照16:9,長寬疊加的方式得到不同比例的拼接屏比例,例如32:9是由兩個16:9拼接屏得到的比例。拼接屏的形式很多,主流的有無縫隙、3.8mm縫隙、3.5mm縫隙、1.8mm縫隙等等,按照基礎要素,根據不同產品需求進行調整即可。

UIPower案列-UIpower

四、字體規范

可視化大屏中,字體優先選擇系統默認字體,也可以選擇蘋方字體、思源黑體。英文字體和數字字體推薦使用:DIN、DIGITAL-7、DIN-PRO、ACENS,特殊字體可將字體打包發給開發進行嵌入程序。正常1080P的情況下,文字要求會比一般的要求大一些,16PX為正文字號,最小字號為14PX。字體顏色采用黑色100%、85%、65%、45%。

五、界面配色

配色上,保證達到信息傳遞、操作指引,凸顯某一個重要信息的目的,主色使用深色為背景色,可減少拼縫帶來的不適感,同時更容易突出主體,視覺效果更好。告警圖配色采用色彩明度與飽和度對比明顯的,突出數據的差異。漸變色的使用需慎重,因為大屏有色差,顯示偏色,所以使用漸變時,應根據大屏反饋的色差進行調整。最后還是向大家推薦使用純色-7、DIN-PRO、ACENS,特殊字體可將字體打包發給開發進行嵌入程序。正常1080P的情況下,文字要求會比一般的要求大一些,16PX為正文字號,最小字號為14PX。字體顏色采用黑色100%、85%、65%、45%。

孟子曰:不以規矩,不能成方圓。規范的約束使我們的生活能夠正常運行,同樣UI設計行業也是如此。正如前言所講,設計規范是否完善,對整個產品起著關鍵性的作用。

最后希望本文能夠幫助到從事這個行業的朋友們。





{转码词},{转码词1},{转码词2},{转码词3}