大屏可視化的大屏的可大屏設計尺寸定義，一直是展示很多設計師苦惱的一件事，很(′?ω?`)多時(shí)候大屏出現的何設問(wèn)題，都是計們因為對設計尺寸沒(méi)有一個(gè)正確的認識導致??。比如大屏內容呈現(xian)不全、設計視化拉伸、通常壓縮、可分(fen)字號小的為兩看不見(jiàn)等等，出現這樣的大屏的可ヽ(′▽?zhuān)?ノ大屏問(wèn)題就會(huì )浪費時(shí)間調整返工，本期我們就來(lái)認認(ren)真真的展示討論一下大屏的設計尺寸。
大屏??的何設類(lèi)別及成像大屏成像原理幾乎都是投屏，也就是把電腦屏幕通過(guò)有線(xiàn)信號投放到大屏上，電腦上呈現什么內容，大屏上就會(huì )呈現什么內容。
在電腦上的交(′ω｀)互操作大屏會(huì )同步進(jìn)行，這就是投屏，看下圖所示，電腦上風(fēng)??景圖投放到大屏上顯示。
雖然投屏的原理沒(méi)問(wèn)題，但這樣的展示換成可視化頁(yè)面就會(huì )有問(wèn)題，不知道你會(huì )不(bu)會(huì )發(fā)現，后面我們揭曉。
首先要強調一點(diǎn)，不可以以大屏的分辨率定義設計稿尺寸，當大屏的比例和電腦┐(′?｀)┌屏幕的比例一樣時(shí)，要(???)結合電腦屏幕的分辨率來(lái)定設計稿尺寸。
比如電腦屏幕分辨率為1920*1080，那設??計稿就可以是這個(gè)尺寸，當電腦屏幕是3840*2160（4K）屏時(shí)，可以用192(O_O)0～3840*1080～2160同等比例任意數值。
當電腦是4k分辨率時(shí)，雖然設(//ω//)計稿用1920*1080的設計??尺寸也可以實(shí)現，但最終在大屏的呈現畫(huà)面清晰度不夠高(╬?益?)。
原因是開(kāi)發(fā)人員用1920*1080適配了4k分辨率，這本身就是同比放大關(guān)??系，再加上投放中的畫(huà)質(zhì)損失就會(huì )更明顯，不過(guò)基??本上也是可以接受的范圍內。
雖然畫(huà)質(zhì)影響不大，但優(yōu)先級上更推薦電腦本身的分辨率3840*2160作ヾ(′▽?zhuān)??為設計稿尺寸，這樣1比1的呈現最能保證畫(huà)面質(zhì)量。
前端開(kāi)發(fā)上只需要按尺寸固定寫(xiě)即可，下圖為4k設計稿，中間的圖像能相對更清晰。
4k設計稿（圖片來(lái)源51WORLD）
大分辨率的設計尺寸還有個(gè)優(yōu)勢就是可以呈現更多的內容，同時(shí)在設計上的字號也要相對更大，比如1920上面16px字號，3840最好也能做到兩倍左右的放大。
當然也完全可以用1920*1080設計尺寸設計，最后導出4k尺寸，也就是2倍圖，包括切圖也是導出2倍圖。
總結：
當大屏電腦比例一致，電腦屏幕分辨率為1920*1080時(shí)，設計稿為電腦分辨率尺寸大??；分??辨率為3840*2160時(shí)設計稿優(yōu)先級是3840*2160、1920*1080、之間同比例數值，當小于電腦分辨率時(shí)開(kāi)發(fā)方式要適應屏幕大小。
大屏和電腦不同比例設計(′_｀)說(shuō)完同比例的大(da)屏電腦設計，接下來(lái)說(shuō)不同比例的情況，一般的問(wèn)題都出在了不同比例的(╬?益?)設計上。當大屏和電腦屏幕是不同比例時(shí)，牢記一點(diǎn)，一定要保證大屏的展示是正常的，這是必須的。??
分享一個(gè)反例，看下圖，投屏電腦是由兩塊16:9的屏幕組成的3??2:9比例的顯示屏，大屏大概是20:9的比例。
現在大屏的??內容呈現是壓癟狀，尤其餅圖已經(jīng)成橢圓形，問(wèn)題不再開(kāi)發(fā)，而是設計。
反面案例
原因是設計師的設計尺寸按32:9設計，在電腦上呈現1:1沒(méi)有任何問(wèn)題，投??放到大屏上比例壓到20:9，因為投放關(guān)系頁(yè)面上所有的元素都會(huì )呈現壓??癟狀(zhuang)態(tài)。
所以開(kāi)篇圖片投放案例，問(wèn)題也出在不同比例的( ?° ?? ?°)投放上，大屏上的圖(╬?益?)片被拉伸變形，視覺(jué)上不會(huì )太明顯，但是可視化圖表的呈現就會(huì )很難受，比如餅圖被壓癟或拉伸。
改正的方法??就是?按大屏的比例設計，保證大屏的正常呈現，電腦上差點(diǎn)無(wú)關(guān)緊要。
本案例中(′?｀)兩臺顯示器組成32:9的屏幕投放并非是最優(yōu)的方案，接下來(lái)用一個(gè)案例來(lái)詳細解析。
案例解析一個(gè)4*7的拼接大屏，分比率13440*4320，??比例為28:9，如何給配置最合適的電腦比例屏幕??投屏？
其實(shí)能找到28:9的最佳，但??據我了解比較困難，我也咨詢(xún)很多這方ヾ(′ω｀)?面的公司，沒(méi)有定制顯示器ヽ(′▽?zhuān)?ノ比例的服(′ω｀)務(wù)。
所以就要找最接(╯‵□′)╯近的這個(gè)比例的顯示器，在某電??商平臺查了個(gè)遍，最常見(jiàn)的有以下比例顯示器：
16:9（1920*1080）16:9（3840*21??60）16:10（1920*1200）21:9（(′?ω?`)3440*1440）其實(shí)根據我們上面的結論，大分(fen)辨率的電腦顯示器擴展性更強，所以首先考慮4k大分辨率顯示器，但16:9與28:9相差過(guò)大，如下圖(╯°□°)╯所示：
這(′?｀*)樣的一個(gè)壓縮程度在操作會(huì )存在一些問(wèn)題(ti)，例如有交互的大屏，很小的按鈕就會(huì )被壓的很癟，導致點(diǎn)擊的精準度下降，影響操作體驗。
下圖所示，用兩個(gè)??屏幕組合成一個(gè)屏幕稱(chēng)為32:9的比例，這樣是較為接近28:9，所以最(zui)為合適。
雖然兩個(gè)16:10的顯示器比例為29:9最為接近，但分辨率過(guò)低，沒(méi)有很強的擴展性。
所以前一章節分享的反例，20:9的大屏用16(′?｀*):9的顯示器??更為合適，因為16:9更接近大屏的比例。
雖然理論上了我們可以找到最優(yōu)的方案，但現實(shí)工作中不一樣，例如某個(gè)事業(yè)單位一直都是16:9電腦屏投放28:9的大屏，你(′；ω；`)非說(shuō)人家這樣不行，得加個(gè)顯示器，沒(méi)必要！
我們身為設計師出于對產(chǎn)品的負責，可以提出建議，但不要去爭論，因為影響不是很大，我們把大屏的完美呈現保證好才是最終目的。
總結：
要以大屏的比例去定義設計稿，保證大屏完美呈現；4k分辨率電腦，優(yōu)先使用大分辨率作為設計稿；使用最接近大屏分ヽ(′▽?zhuān)?ノ辨率的電腦屏幕比(′?_?`)例投放。重要知識點(diǎn)解析下面要講的非常重要，就是大屏的字號使用問(wèn)題，因為字號返工是一件非?？植赖氖拢ń?jīng)驗之談），可能需要改樣式，甚至重(zhong)新設計都不為過(guò)。
我??們都知道大屏的開(kāi)發(fā)本身就是基于we(′?ω?`)b端，(′?ω?`)網(wǎng)頁(yè)中最小字號為12px，但這個(gè)字號在大屏中會(huì )顯的很小。因為大屏本身很大，觀(guān)者需要站在較遠地方才能看全貌，所以在字號上最好能相對大一點(diǎn)。
當然也是針對重要信息的文字，一些圖表刻度尺的數值，裝飾性??的文字，小一些沒(méi)有關(guān)系。
當大屏的比例較大時(shí)，字??號也應該相應加大，看下圖：
當大屏比例更寬(′ω｀)時(shí)，觀(guān)者就需要站在更靠后的位置，近大遠小，字號和有些小元素需要相應加大，當然這需要根據實(shí)際場(chǎng)景而定。
我一直認為大屏設計，設計師需要去現場(chǎng)查看使用場(chǎng)景，考察觀(guān)看位??置，定義字號大??小的運用；考察室內環(huán)境，當室內的光線(xiàn)較強或較弱，需要用不同的顏色明度飽和度去嘗試；清楚了解大屏偏色情況，不同的??品牌ヽ(′?｀)ノ呈現的色調往往也是不一樣的，這樣最終才能營(yíng)造一個(gè)相對舒適的大屏使用環(huán)境。總??結：
大屏設計字號要相對使用大字號；當大屏比例更大(da)時(shí)，要相應的調??整字號；設計師對大屏的本身和使用環(huán)境考察。大屏的分屏設計分屏是大屏很常見(jiàn)的展示方式，分屏方式一般有兩種，一種是通過(guò)平板電腦軟件控制分屏，在可視化的呈現領(lǐng)域中很??少用到。
平板電腦軟件控制大屏分屏
另一種方式??與我們設計相關(guān)，是(′▽?zhuān)?)通過(guò)多個(gè)信號源控制大屏分屏，一個(gè)信號源連接一臺電腦，所以在設計時(shí)，一臺電腦的顯示器就是一個(gè)設計稿。
這種情況通常出現在非常寬的大屏上，太寬的大屏就不太適用于多個(gè)電腦屏幕組成投屏，如(????)下圖由(you)6個(gè)信號源組成的大屏。
圖片來(lái)源https://??www.finereport.com/
大屏(?_?;)的設計是一個(gè)新興的設計學(xué)科，它同于A(yíng)PP設計，都需要考慮使用場(chǎng)景，不同于網(wǎng)頁(yè)設計，需要結合它??獨有的特征，定義設計流程及規范。