UI設(shè)計(jì)中大屏可視化設(shè)計(jì)尺寸指南

　　大屏可視化的設(shè)計(jì)尺寸定義，一直是很多設(shè)計(jì)師苦惱的一件事，很多時(shí)候大屏出現(xiàn)的問(wèn)題，都是因?yàn)閷?duì)設(shè)計(jì)尺寸沒(méi)有一個(gè)正確的認(rèn)識(shí)導(dǎo)致。
 

　　比如大屏內(nèi)容呈現(xiàn)不全、拉伸、壓縮、字號(hào)小的看不見(jiàn)等等，出現(xiàn)這樣的問(wèn)題就會(huì)浪費(fèi)時(shí)間調(diào)整返工，今天AAA教育郭老師就帶大家來(lái)認(rèn)認(rèn)真真的討論一下大屏的設(shè)計(jì)尺寸。
 

　　大屏的類別及成像
 

　　我們?cè)O(shè)計(jì)的可視化大屏通?？梢苑譃閮深悾阂活愂瞧唇悠粒?6-55寸的液晶顯示屏拼接而成，有一定的縫隙;
 

　　一類是LED屏無(wú)縫隙，是由成千上萬(wàn)個(gè)LED燈構(gòu)成像素點(diǎn)，發(fā)光像素點(diǎn)之間的距離是LED顯示屏的規(guī)格，用P值表示，P值越小成像越優(yōu)秀細(xì)膩，對(duì)大屏類別的了解，有助于計(jì)算設(shè)計(jì)尺寸及比例。
 

　　大屏成像原理幾乎都是投屏，也就是把電腦屏幕通過(guò)有線信號(hào)投放到大屏上，電腦上呈現(xiàn)什么內(nèi)容，大屏上就會(huì)呈現(xiàn)什么內(nèi)容。
 

　　在電腦上的交互操作大屏?xí)竭M(jìn)行，這就是投屏，看下圖所示，電腦上風(fēng)景圖投放到大屏上顯示。

 

　　雖然投屏的原理沒(méi)問(wèn)題，但這樣的展示換成可視化頁(yè)面就會(huì)有問(wèn)題，不知道你會(huì)不會(huì)發(fā)現(xiàn)，后面我們揭曉。
 

　　總結(jié)：
 

　　本章節(jié)只需要記住一句話“電腦上呈現(xiàn)什么內(nèi)容，大屏上就會(huì)呈現(xiàn)什么內(nèi)容”，所以電腦上出現(xiàn)滾條是絕對(duì)不可以的。
 

　　大屏和電腦同比例設(shè)計(jì)
 

　　首先要強(qiáng)調(diào)一點(diǎn)，不可以以大屏的分辨率定義設(shè)計(jì)稿尺寸，當(dāng)大屏的比例和電腦屏幕的比例一樣時(shí)，要結(jié)合電腦屏幕的分辨率來(lái)定設(shè)計(jì)稿尺寸。
 

　　比如電腦屏幕分辨率為1920*1080，那設(shè)計(jì)稿就可以是這個(gè)尺寸，當(dāng)電腦屏幕是3840*2160(4K)屏?xí)r，可以用1920～3840*1080～2160同等比例任意數(shù)值。

 

　　當(dāng)電腦是4k分辨率時(shí)，雖然設(shè)計(jì)稿用1920*1080的設(shè)計(jì)尺寸也可以實(shí)現(xiàn)，但最終在大屏的呈現(xiàn)畫面清晰度不夠高。
 

　　原因是開(kāi)發(fā)人員用1920*1080適配了4k分辨率，這本身就是同比放大關(guān)系，再加上投放中的畫質(zhì)損失就會(huì)更明顯，不過(guò)基本上也是可以接受的范圍內(nèi)。
 

　　雖然畫質(zhì)影響不大，但優(yōu)先級(jí)上更推薦電腦本身的分辨率3840*2160作為設(shè)計(jì)稿尺寸，這樣1比1的呈現(xiàn)最能保證畫面質(zhì)量。
 

　　前端開(kāi)發(fā)上只需要按尺寸固定寫即可，下圖為4k設(shè)計(jì)稿，中間的圖像能相對(duì)更清晰。

 

　　4k設(shè)計(jì)稿(圖片來(lái)源51WORLD)
 

　　大分辨率的設(shè)計(jì)尺寸還有個(gè)優(yōu)勢(shì)就是可以呈現(xiàn)更多的內(nèi)容，同時(shí)在設(shè)計(jì)上的字號(hào)也要相對(duì)更大，比如1920上面16px字號(hào)，3840最好也能做到兩倍左右的放大。
 

　　當(dāng)然也完全可以用1920*1080設(shè)計(jì)尺寸設(shè)計(jì)，最后導(dǎo)出4k尺寸，也就是2倍圖，包括切圖也是導(dǎo)出2倍圖。
 

　　總結(jié)：
 

　　當(dāng)大屏電腦比例一致，電腦屏幕分辨率為1920*1080時(shí)，設(shè)計(jì)稿為電腦分辨率尺寸大小;
 

　　分辨率為3840*2160時(shí)設(shè)計(jì)稿優(yōu)先級(jí)是3840*2160、1920*1080、之間同比例數(shù)值，當(dāng)小于電腦分辨率時(shí)開(kāi)發(fā)方式要適應(yīng)屏幕大小。
 

　　大屏和電腦不同比例設(shè)計(jì)
 

　　說(shuō)完同比例的大屏電腦設(shè)計(jì)，接下來(lái)說(shuō)不同比例的情況，一般的問(wèn)題都出在了不同比例的設(shè)計(jì)上。
 

　　當(dāng)大屏和電腦屏幕是不同比例時(shí)，牢記一點(diǎn)，一定要保證大屏的展示是正常的，這是必須的。
 

　　分享一個(gè)反例，看下圖，投屏電腦是由兩塊16:9的屏幕組成的32:9比例的顯示屏，大屏大概是20:9的比例。
 

　　現(xiàn)在大屏的內(nèi)容呈現(xiàn)是壓癟狀，尤其餅圖已經(jīng)成橢圓形，問(wèn)題不再開(kāi)發(fā)，而是設(shè)計(jì)。

 

　　反面案例
 

　　原因是設(shè)計(jì)師的設(shè)計(jì)尺寸按32:9設(shè)計(jì)，在電腦上呈現(xiàn)1:1沒(méi)有任何問(wèn)題，投放到大屏上比例壓到20:9，因?yàn)橥斗抨P(guān)系頁(yè)面上所有的元素都會(huì)呈現(xiàn)壓癟狀態(tài)。
 

　　所以開(kāi)篇圖片投放案例，問(wèn)題也出在不同比例的投放上，大屏上的圖片被拉伸變形，視覺(jué)上不會(huì)太明顯，但是可視化圖表的呈現(xiàn)就會(huì)很難受，比如餅圖被壓癟或拉伸。
 

　　改正的方法就是按大屏的比例設(shè)計(jì)，保證大屏的正常呈現(xiàn)，電腦上差點(diǎn)無(wú)關(guān)緊要。
 

　　本案例中兩臺(tái)顯示器組成32:9的屏幕投放并非是最優(yōu)的方案，接下來(lái)用一個(gè)案例來(lái)詳細(xì)解析。
 

　　案例解析
 

　　一個(gè)4*7的拼接大屏，分比率13440*4320，比例為28:9，如何給配置最合適的電腦比例屏幕投屏?

 

　　其實(shí)能找到28:9的最佳，但據(jù)我了解比較困難，我也咨詢很多這方面的公司，沒(méi)有定制顯示器比例的服務(wù)。
 

　　所以就要找最接近的這個(gè)比例的顯示器，在某電商平臺(tái)查了個(gè)遍，最常見(jiàn)的有以下比例顯示器：
 

　　1、16:9(1920*1080)
 

　　2、16:9(3840*2160)3、16:10(1920*1200)4、21:9(3440*1440)
 

　　其實(shí)根據(jù)我們上面的結(jié)論，大分辨率的電腦顯示器擴(kuò)展性更強(qiáng)，所以首先考慮4k大分辨率顯示器，但16:9與28:9相差過(guò)大，如下圖所示：

 

　　這樣的一個(gè)壓縮程度在操作會(huì)存在一些問(wèn)題，例如有交互的大屏，很小的按鈕就會(huì)被壓的很癟，導(dǎo)致點(diǎn)擊的精準(zhǔn)度下降，影響操作體驗(yàn)。
 

　　下圖所示，用兩個(gè)屏幕組合成一個(gè)屏幕稱為32:9的比例，這樣是較為接近28:9，所以最為合適。

 

　　雖然兩個(gè)16:10的顯示器比例為29:9最為接近，但分辨率過(guò)低，沒(méi)有很強(qiáng)的擴(kuò)展性。
 

　　所以前一章節(jié)分享的反例，20:9的大屏用16:9的顯示器更為合適，因?yàn)?6:9更接近大屏的比例。
 

　　雖然理論上了我們可以找到最優(yōu)的方案，但現(xiàn)實(shí)工作中不一樣，例如某個(gè)事業(yè)單位一直都是16:9電腦屏投放28:9的大屏，你非說(shuō)人家這樣不行，得加個(gè)顯示器，沒(méi)必要!
 

　　我們身為設(shè)計(jì)師出于對(duì)產(chǎn)品的負(fù)責(zé)，可以提出建議，但不要去爭(zhēng)論，因?yàn)橛绊懖皇呛艽?，我們把大屏的完美呈現(xiàn)保證好才是最終目的。
 

　　總結(jié)：
 

　　1、要以大屏的比例去定義設(shè)計(jì)稿，保證大屏完美呈現(xiàn)
 

　　2、4k分辨率電腦，優(yōu)先使用大分辨率作為設(shè)計(jì)稿
 

　　3、使用最接近大屏分辨率的電腦屏幕比例投放
 

　　大屏設(shè)計(jì)稿分辨率的計(jì)算
 

　　拼接的每塊小屏一般是16:9的高清屏，設(shè)計(jì)尺寸可以把上下高度設(shè)定為1080px或更大的高度，我們以1080px為例，寬高按照拼接屏的數(shù)量比例算出設(shè)計(jì)尺寸。
 

　　例如3乘5的一塊大屏幕，高度3塊屏設(shè)為1080，每塊高就是360，360除9乘16等640，640就是一塊屏幕的長(zhǎng)度，640乘5塊屏=3200最后得出設(shè)計(jì)稿尺寸就是：高1080px乘寬3200px

 

　　重要知識(shí)點(diǎn)解析
 

　　下面要講的非常重要，就是大屏的字號(hào)使用問(wèn)題，因?yàn)樽痔?hào)返工是一件非?？植赖氖?經(jīng)驗(yàn)之談)，可能需要改樣式，甚至重新設(shè)計(jì)都不為過(guò)。
 

　　我們都知道大屏的開(kāi)發(fā)本身就是基于web端，網(wǎng)頁(yè)中最小字號(hào)為12px，但這個(gè)字號(hào)在大屏中會(huì)顯的很小。
 

　　因?yàn)榇笃帘旧砗艽?，觀者需要站在較遠(yuǎn)地方才能看全貌，所以在字號(hào)上最好能相對(duì)大一點(diǎn)。
 

　　當(dāng)然也是針對(duì)重要信息的文字，一些圖表刻度尺的數(shù)值，裝飾性的文字，小一些沒(méi)有關(guān)系。
 

　　當(dāng)大屏的比例較大時(shí)，字號(hào)也應(yīng)該相應(yīng)加大，看下圖：

 

　　當(dāng)大屏比例更寬時(shí)，觀者就需要站在更靠后的位置，近大遠(yuǎn)小，字號(hào)和有些小元素需要相應(yīng)加大，當(dāng)然這需要根據(jù)實(shí)際場(chǎng)景而定。
 

　　我一直認(rèn)為大屏設(shè)計(jì)，設(shè)計(jì)師需要去現(xiàn)場(chǎng)查看使用場(chǎng)景，考察觀看位置，定義字號(hào)大小的運(yùn)用;
 

　　考察室內(nèi)環(huán)境，當(dāng)室內(nèi)的光線較強(qiáng)或較弱，需要用不同的顏色明度飽和度去嘗試;
 

　　清楚了解大屏偏色情況，不同的品牌呈現(xiàn)的色調(diào)往往也是不一樣的，這樣最終才能營(yíng)造一個(gè)相對(duì)舒適的大屏使用環(huán)境。
 

　　總結(jié)：
 

　　1、大屏設(shè)計(jì)字號(hào)要相對(duì)使用大字號(hào)
 

　　2、當(dāng)大屏比例更大時(shí)，要相應(yīng)的調(diào)整字號(hào)
 

　　3、設(shè)計(jì)師對(duì)大屏的本身和使用環(huán)境考察
 

　　大屏的分屏設(shè)計(jì)
 

　　分屏是大屏很常見(jiàn)的展示方式，分屏方式一般有兩種，一種是通過(guò)平板電腦軟件控制分屏，在可視化的呈現(xiàn)領(lǐng)域中很少用到。

 

　　平板電腦軟件控制大屏分屏
 

　　另一種方式與我們?cè)O(shè)計(jì)相關(guān)，是通過(guò)多個(gè)信號(hào)源控制大屏分屏，一個(gè)信號(hào)源連接一臺(tái)電腦，所以在設(shè)計(jì)時(shí)，一臺(tái)電腦的顯示器就是一個(gè)設(shè)計(jì)稿。
 

　　這種情況通常出現(xiàn)在非常寬的大屏上，太寬的大屏就不太適用于多個(gè)電腦屏幕組成投屏，如下圖由6個(gè)信號(hào)源組成的大屏。

 

　　總結(jié)：
 

　　每個(gè)信號(hào)源對(duì)應(yīng)一張?jiān)O(shè)計(jì)稿，n個(gè)信號(hào)源就是n張?jiān)O(shè)計(jì)稿。
 

　　大屏的設(shè)計(jì)是一個(gè)新興的設(shè)計(jì)學(xué)科，它同于APP設(shè)計(jì)，都需要考慮使用場(chǎng)景，不同于網(wǎng)頁(yè)設(shè)計(jì)，需要結(jié)合它獨(dú)有的特征，定義設(shè)計(jì)流程及規(guī)范。
 

　　最后，相信認(rèn)真看完以上文章的你，對(duì)大屏的設(shè)計(jì)尺寸會(huì)有一個(gè)更深刻的認(rèn)識(shí)，并且當(dāng)遇到類似問(wèn)題，也能夠迎刃而解。因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請(qǐng)?jiān)L問(wèn)AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。