原文地址：網際網路設計幫（公眾號）
作者：吳星辰
前言
大屏可視化的設計尺寸定義，一直是很多設計師苦惱的一件事，很多時候大屏出現的問題，都是因為對設計尺寸沒有一個正確的認識導致。
比如大屏內容呈現不全、拉伸、壓縮、字號小的看不見等等，出現這樣的問題就會浪費時間調整返工，本期我們就來認認真真的討論一下大屏的設計尺寸。
大屏的類別及成像
我們設計的可視化大屏通常可以分為兩類：一類是拼接屏，由46-55寸的液晶顯示屏拼接而成，有一定的縫隙；
一類是LED屏無縫隙，是由成千上萬個LED燈構成像素點，發光像素點之間的距離是LED顯示屏的規格，用P值表示，P值越小成像越優秀細膩，對大屏類別的了解，有助於計算設計尺寸及比例。
大屏成像原理幾乎都是投屏，也就是把電腦屏幕通過有線信號投放到大屏上，電腦上呈現什麼內容，大屏上就會呈現什麼內容。
在電腦上的交互操作大屏會同步進行，這就是投屏，看下圖所示，電腦上風景圖投放到大屏上顯示。
雖然投屏的原理沒問題，但這樣的展示換成可視化頁面就會有問題，不知道你會不會發現，後面我們揭曉。
總結：
本章節只需要記住一句話「電腦上呈現什麼內容，大屏上就會呈現什麼內容」，所以電腦上出現滾條是絕對不可以的。
大屏和電腦同比例設計
首先要強調一點，不可以以大屏的解析度定義設計稿尺寸，當大屏的比例和電腦屏幕的比例一樣時，要結合電腦屏幕的解析度來定設計稿尺寸。
比如電腦屏幕解析度為1920*1080，那設計稿就可以是這個尺寸，當電腦屏幕是3840*2160（4K）屏時，可以用1920～3840*1080～2160同等比例任意數值。
當電腦是4k解析度時，雖然設計稿用1920*1080的設計尺寸也可以實現，但最終在大屏的呈現畫面清晰度不夠高。
原因是開發人員用1920*1080適配了4k解析度，這本身就是同比放大關係，再加上投放中的畫質損失就會更明顯，不過基本上也是可以接受的範圍內。
雖然畫質影響不大，但優先級上更推薦電腦本身的解析度3840*2160作為設計稿尺寸，這樣1比1的呈現最能保證畫面質量。
前端開發上只需要按尺寸固定寫即可，下圖為4k設計稿，中間的圖像能相對更清晰。
4k設計稿（圖片來源51WORLD）
大解析度的設計尺寸還有個優勢就是可以呈現更多的內容，同時在設計上的字號也要相對更大，比如1920上面16px字號，3840最好也能做到兩倍左右的放大。
當然也完全可以用1920*1080設計尺寸設計，最後導出4k尺寸，也就是2倍圖，包括切圖也是導出2倍圖。
總結：
當大屏電腦比例一致，電腦屏幕解析度為1920*1080時，設計稿為電腦解析度尺寸大小；
解析度為3840*2160時設計稿優先級是3840*2160、1920*1080、之間同比例數值，當小於電腦解析度時開發方式要適應屏幕大小。
大屏和電腦不同比例設計
說完同比例的大屏電腦設計，接下來說不同比例的情況，一般的問題都出在了不同比例的設計上。
當大屏和電腦屏幕是不同比例時，牢記一點，一定要保證大屏的展示是正常的，這是必須的。
分享一個反例，看下圖，投屏電腦是由兩塊16:9的屏幕組成的32:9比例的顯示屏，大屏大概是20:9的比例。
現在大屏的內容呈現是壓癟狀，尤其餅圖已經成橢圓形，問題不再開發，而是設計。
反面案例
原因是設計師的設計尺寸按32:9設計，在電腦上呈現1:1沒有任何問題，投放到大屏上比例壓到20:9，因為投放關係頁面上所有的元素都會呈現壓癟狀態。
所以開篇圖片投放案例，問題也出在不同比例的投放上，大屏上的圖片被拉伸變形，視覺上不會太明顯，但是可視化圖表的呈現就會很難受，比如餅圖被壓癟或拉伸。
改正的方法就是按大屏的比例設計，保證大屏的正常呈現，電腦上差點無關緊要。
本案例中兩臺顯示器組成32:9的屏幕投放並非是最優的方案，接下來用一個案例來詳細解析。
案例解析
一個4*7的拼接大屏，分比率13440*4320，比例為28:9，如何給配置最合適的電腦比例屏幕投屏？
其實能找到28:9的最佳，但據我了解比較困難，我也諮詢很多這方面的公司，沒有定製顯示器比例的服務。
所以就要找最接近的這個比例的顯示器，在某電商平臺查了個遍，最常見的有以下比例顯示器：
1、16:9（1920*1080）
2、16:9（3840*2160）
3、16:10（1920*1200）
4、21:9（3440*1440）
其實根據我們上面的結論，大解析度的電腦顯示器擴展性更強，所以首先考慮4k大解析度顯示器，但16:9與28:9相差過大，如下圖所示：
這樣的一個壓縮程度在操作會存在一些問題，例如有交互的大屏，很小的按鈕就會被壓的很癟，導致點擊的精準度下降，影響操作體驗。
下圖所示，用兩個屏幕組合成一個屏幕稱為32:9的比例，這樣是較為接近28:9，所以最為合適。
雖然兩個16:10的顯示器比例為29:9最為接近，但解析度過低，沒有很強的擴展性。
所以前一章節分享的反例，20:9的大屏用16:9的顯示器更為合適，因為16:9更接近大屏的比例。
雖然理論上了我們可以找到最優的方案，但現實工作中不一樣，例如某個事業單位一直都是16:9電腦屏投放28:9的大屏，你非說人家這樣不行，得加個顯示器，沒必要！
我們身為設計師出於對產品的負責，可以提出建議，但不要去爭論，因為影響不是很大，我們把大屏的完美呈現保證好才是最終目的。
總結：
1、要以大屏的比例去定義設計稿，保證大屏完美呈現
2、4k解析度電腦，優先使用大解析度作為設計稿
3、使用最接近大屏解析度的電腦屏幕比例投放
重要知識點解析
下面要講的非常重要，就是大屏的字號使用問題，因為字號返工是一件非常恐怖的事（經驗之談），可能需要改樣式，甚至重新設計都不為過。
我們都知道大屏的開發本身就是基於web端，網頁中最小字號為12px，但這個字號在大屏中會顯的很小。
因為大屏本身很大，觀者需要站在較遠地方才能看全貌，所以在字號上最好能相對大一點。
當然也是針對重要信息的文字，一些圖表刻度尺的數值，裝飾性的文字，小一些沒有關係。
當大屏的比例較大時，字號也應該相應加大，看下圖：
當大屏比例更寬時，觀者就需要站在更靠後的位置，近大遠小，字號和有些小元素需要相應加大，當然這需要根據實際場景而定。
我一直認為大屏設計，設計師需要去現場查看使用場景，考察觀看位置，定義字號大小的運用；
考察室內環境，當室內的光線較強或較弱，需要用不同的顏色明度飽和度去嘗試；
清楚了解大屏偏色情況，不同的品牌呈現的色調往往也是不一樣的，這樣最終才能營造一個相對舒適的大屏使用環境。
總結：
1、大屏設計字號要相對使用大字號
2、當大屏比例更大時，要相應的調整字號
3、設計師對大屏的本身和使用環境考察
大屏的分屏設計
分屏是大屏很常見的展示方式，分屏方式一般有兩種，一種是通過平板電腦軟體控制分屏，在可視化的呈現領域中很少用到。
平板電腦軟體控制大屏分屏
另一種方式與我們設計相關，是通過多個信號源控制大屏分屏，一個信號源連接一臺電腦，所以在設計時，一臺電腦的顯示器就是一個設計稿。
這種情況通常出現在非常寬的大屏上，太寬的大屏就不太適用於多個電腦屏幕組成投屏，如下圖由6個信號源組成的大屏。
圖片來源https://www.finereport.com/
總結：
每個信號源對應一張設計稿，n個信號源就是n張設計稿。
後語
大屏的設計是一個新興的設計學科，它同於APP設計，都需要考慮使用場景，不同於網頁設計，需要結合它獨有的特徵，定義設計流程及規範。
最後，相信認真看完以上文章的你，對大屏的設計尺寸會有一個更深刻的認識，並且當遇到類似問題，也能夠迎刃而解。
可愛的你請把可愛的我設為「星標」。
領取前面兩本書中案例PSD源文件