隨著人工智能的不斷發(fā)展和hmi系統(tǒng)技術(shù)的不斷提高，屏幕成為了人與機器交互的主要方式之一。在屏幕的使用上，逐漸向著大屏化、可視化方向發(fā)展。今天就讓faceui為大家介紹大屏ui設(shè)計的幾大方向，數(shù)據(jù)可視化大屏ui設(shè)計技巧。

　　大屏ui設(shè)計的幾大方向

　　1、拼接大屏：大屏幾乎都是拼接屏，UI設(shè)計時不用考慮屏幕縫隙影響內(nèi)容的呈現(xiàn)，內(nèi)容不會丟失，但有可能影響視覺的表現(xiàn)，例如一個很大的人物圖像被縫隙正中“劈成”兩半，或者“劈中”了眼睛，看起來很不舒服，所以設(shè)計時可以建立縫隙位置的參考線避免類似情況發(fā)生。（現(xiàn)在企業(yè)常用的有無縫隙、1.7mm縫隙、3.5mm縫隙、三種拼接大屏，縫隙越小越貴）

　　2、設(shè)計尺寸：拼接的每塊小屏一般是16:9的高清屏，設(shè)計尺寸可以把上下高度設(shè)定為1080px，長度按照拼接屏的數(shù)量比例得出長度的設(shè)計尺寸。例如3乘5的一塊大屏幕，高度3塊屏設(shè)為1080，每塊高就是360，360除9乘16等640，640就是一塊屏幕的長度，640乘5塊屏＝3200最后得出設(shè)計稿尺寸就是：高1080px乘寬3200px。

　　3、視覺設(shè)計：首先了解需求，整合數(shù)據(jù)，分析出主要數(shù)據(jù)次要數(shù)據(jù)、總量數(shù)據(jù)細分?jǐn)?shù)據(jù)、各數(shù)據(jù)的維度等等，通過了解這些可以先設(shè)計出一個布局模版，也可以在紙上畫出來，布局可以在設(shè)計過程中隨時調(diào)整。

　　設(shè)計的風(fēng)格，背景色一般用深色調(diào)，深色調(diào)緊張感強，讓視覺更好的聚焦，大屏暗色調(diào)看上去更柔和舒服不刺眼，也會較省電。

大屏ui設(shè)計（圖片來自網(wǎng)絡(luò)）

　　數(shù)據(jù)可視化大屏ui設(shè)計技巧

　　1、區(qū)分層級

　　可以嘗試使用組件的大小和位置來區(qū)分?jǐn)?shù)據(jù)的層次結(jié)構(gòu)。通過定義信息層級，讓用戶清楚什么是最重要的，在左上角顯示更重要的信息，沿著對角線方向，信息的重要程度應(yīng)該依次減弱，右下角的信息重要性最弱，還可以將信息劃分為不同類別，并在不同的視圖中顯示它們。

　　2、簡單易懂

　　數(shù)據(jù)可視化的真正目的是用一種更方便理解，更簡單的形式來傳達復(fù)雜信息。不要放一些大多數(shù)用戶都難以理解的信息，使用更少的列來顯示信息，刪除冗余內(nèi)容來減少混亂。

　　3、一致性

　　使用一致性布局設(shè)計的數(shù)據(jù)可視化界面看起來更好。為了使界面更容易閱讀，可以在信息組之間使用類似的可視化效果。把相關(guān)的信息放的更近一些，對相關(guān)內(nèi)容進行可視化分組。

　　4、臨近原則

　　在界面中把相近的信息放在一起可以幫助用戶快速理解。把相關(guān)的信息放的更近一些，不要將相關(guān)信息分散在界面上，對相關(guān)內(nèi)容進行可視化分組。

　　5、對齊

　　可視化組件元素需要在視覺上對齊，并保持視覺平衡。將可視化組件元素在視覺上進行對齊，可以將界面組織的更好，嘗試將組件元素進行網(wǎng)格布局設(shè)計，不對齊的界面會給用戶帶來糟糕的體驗。

大屏ui設(shè)計（圖片來自網(wǎng)絡(luò)）

　　6、留白

　　留白是為了讓界面有呼吸感，它使得用戶在使用你的界面時能夠有出喘息的空間。當(dāng)用戶查看需要的信息時，界面中的留白能夠吸引用戶的目光，提升用戶體驗。減少留白會使用戶的界面變得混亂，使用留白能對信息進行可視化分組，留白太少簡直就是在鼓勵你的用戶盡快離開。

　　7、顏色

　　使用有效的配色方案來吸引用戶的注意力，幫助他們輕松地瀏覽信息。仔細選擇顏色，目標(biāo)是使內(nèi)容易于閱讀。使用大對比度來顯示背景上的視覺元素。避免使用低對比度和低效的漸變。

　　8、字體

　　標(biāo)準(zhǔn)字體是可視化界面中的最佳字體，除非有特別的理由，一般不要用其他字體。使用標(biāo)準(zhǔn)字體，因為它們更容易閱讀和掃描。特別和美術(shù)字體可能看起來不錯，但很難理解，避免所有的大寫字母文字，因為它很難閱讀，人類的大腦需要時間來消化它。使用合適的字體大小和風(fēng)格，有效地傳達信息。不要使用影響可讀性的字體。

　　9、數(shù)字排版

　　顯示精度超過要求的數(shù)字使它們難以閱讀和理解。必要時使用整數(shù)，因為長數(shù)字會使用戶混淆，省去不必要的信息，讓用戶能夠容易地比較簡單的差異細節(jié)。

　　10、標(biāo)簽

　　使用能夠快速有效地向用戶傳達所需信息的標(biāo)簽。避免使用帶旋轉(zhuǎn)的標(biāo)簽，因為很難閱讀，盡可能的使用標(biāo)準(zhǔn)的縮寫，避免旋轉(zhuǎn)標(biāo)簽。

　　以上就是faceui為大家介紹的關(guān)于大屏ui設(shè)計的相關(guān)內(nèi)容。用戶對于大屏的喜愛程度在不斷提升，因此這就是要求我們的ui設(shè)計者在大屏ui設(shè)計方面要更多地站在用戶的角度進行思考和設(shè)計。