雷火平台-中国知名电竞赛事平台

聯(lián)系我們 face+ 關(guān)于 服務(wù) 案例
首頁(yè) 案例 服務(wù) 關(guān)于 face+

大屏ui設(shè)計(jì),新手小白必備設(shè)計(jì)手冊(cè)

Time: 2020-02-27

大屏ui設(shè)計(jì)與普通ui設(shè)計(jì)是有一定差別的,因?yàn)榇笃琳故驹O(shè)備面積較大,對(duì)人的視覺(jué)影響也不一樣,所以它的ui設(shè)計(jì)也是有技巧的,下面我們跟隨小編一起來(lái)了解一下大屏ui設(shè)計(jì)的相關(guān)資料吧。

大屏ui設(shè)計(jì)技巧:

一、區(qū)分層級(jí)

一個(gè)非常常見(jiàn)的錯(cuò)誤就是設(shè)計(jì)師沒(méi)有對(duì)信息區(qū)分層級(jí),所有的內(nèi)容看起來(lái)都一樣重要??梢試L試使用組件的大小和位置來(lái)區(qū)分?jǐn)?shù)據(jù)的層次結(jié)構(gòu)。通過(guò)定義信息層級(jí),讓用戶清楚什么是最重要的,

在左上角顯示更重要的信息,沿著對(duì)角線方向,信息的重要程度應(yīng)該依次減弱,右下角的信息重要性最弱,還可以將信息劃分為不同類別,并在不同的視圖中顯示它們。


大屏ui設(shè)計(jì)_374847501.png

(圖片來(lái)自網(wǎng)絡(luò))

二、簡(jiǎn)單易懂

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

三、一致性

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

四、臨近原則

ui界面設(shè)計(jì)時(shí)把相近的信息放在一起可以幫助用戶快速理解。把相關(guān)的信息放的更近一些,不要將相關(guān)信息分散在界面上,對(duì)相關(guān)內(nèi)容進(jìn)行可視化分組。

五、對(duì)齊

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

六、留白

留白是為了讓界面有呼吸感,它使得用戶在使用你的界面時(shí)能夠有出喘息的空間。當(dāng)用戶查看需要的信息時(shí),界面中的留白能夠吸引用戶的目光,提升用戶體驗(yàn)。減少留白會(huì)使用戶的界面變得混亂,使用留白能對(duì)信息進(jìn)行可視化分組,但是如果留白太少,簡(jiǎn)直就是在鼓勵(lì)你的用戶盡快離開(kāi)。


大屏ui設(shè)計(jì)_3748471104.png

(圖片來(lái)自網(wǎng)絡(luò))

七、顏色

使用有效的配色方案來(lái)吸引用戶的注意力,幫助他們輕松地瀏覽信息。仔細(xì)選擇顏色,目標(biāo)是使內(nèi)容易于閱讀。使用大對(duì)比度來(lái)顯示背景上的視覺(jué)元素。避免使用低對(duì)比度和低效的漸變,背景色一般用深色調(diào),深色調(diào)緊張感強(qiáng),讓視覺(jué)更好的聚焦,大屏暗色調(diào)看上去更柔和舒服不刺眼,也會(huì)較省電。

八、字體

標(biāo)準(zhǔn)字體是可視化界面中的最佳字體,除非有特別的理由,一般不要用其他字體。使用標(biāo)準(zhǔn)字體,因?yàn)樗鼈兏菀组喿x和掃描。特別和美術(shù)字體可能看起來(lái)不錯(cuò),但很難理解,避免所有的大寫(xiě)字母文字,因?yàn)樗茈y閱讀,人類的大腦需要時(shí)間來(lái)消化它。使用合適的字體大小和風(fēng)格,有效地傳達(dá)信息,不要使用影響可讀性的字體。

其實(shí)大屏ui設(shè)計(jì)還是非常有技巧性的,因此只要掌握好了大屏的ui設(shè)計(jì)技巧以后,就算是新手小白設(shè)計(jì)師也可以獨(dú)立完成大屏的ui設(shè)計(jì)工作哦!


合作咨詢

上海(總部)

上海市浦東新區(qū)郭守敬路498號(hào)22號(hào)樓
021-61057328
service@faceui.com

辦公地址地圖

北京

北京市東城區(qū)后永康17號(hào)A座
010-64015620
service@faceui.com

辦公地址地圖

成都

四川省成都市錦江區(qū)東大街牛王廟段100號(hào)
028-62790929
service@faceui.com

辦公地址地圖
首頁(yè) | 案例 | 服務(wù) | 關(guān)于 | face+ | 智見(jiàn)

Copyright ? 2009-2022 FaceUI design. All rights reserved


滬ICP備13044459號(hào)-5

上海辦公地點(diǎn)地圖
北京辦公地點(diǎn)地圖
深圳辦公地點(diǎn)地圖
在微信中搜索faceui
或保存二維碼在微信中打開(kāi)