<address id="v1fhz"></address>

    <sub id="v1fhz"></sub>

      <sub id="v1fhz"></sub>

                  <address id="v1fhz"></address>
                    15年網站建設經驗,網站案例超過800例,海南網站建設專家、網絡推廣營銷顧問

                    大屏可視化 設計尺寸 高級指南

                    海南建站中心 165次

                    深度解析大屏可視化設計尺寸定義1

                    前言

                    大屏可視化的設計尺寸定義,一直是很多設計師苦惱的一件事,很多時候大屏出現的問題,都是因為對設計尺寸沒有一個正確的認識導致。

                    比如大屏內容呈現不全、拉伸、壓縮、字號小的看不見等等,出現這樣的問題就會浪費時間調整返工,本期我們就來認認真真的討論一下大屏的設計尺寸。


                     大屏的類別及成像 

                    我們設計的可視化大屏通??梢苑譃閮深悾阂活愂瞧唇悠?,由46-55寸的液晶顯示屏拼接而成,有一定的縫隙;

                    一類是LED屏無縫隙,是由成千上萬個LED燈構成像素點,發光像素點之間的距離是LED顯示屏的規格,用P值表示,P值越小成像越優秀細膩,對大屏類別的了解,有助于計算設計尺寸及比例。

                    大屏成像原理幾乎都是投屏,也就是把電腦屏幕通過有線信號投放到大屏上,電腦上呈現什么內容,大屏上就會呈現什么內容。

                    在電腦上的交互操作大屏會同步進行,這就是投屏,看下圖所示,電腦上風景圖投放到大屏上顯示。

                    雖然投屏的原理沒問題,但這樣的展示換成可視化頁面就會有問題,不知道你會不會發現,后面我們揭曉。

                    3046055.jpg


                    總結:


                    本章節只需要記住一句話“電腦上呈現什么內容,大屏上就會呈現什么內容”,所以電腦上出現滾條是絕對不可以的。


                     大屏和電腦同比例設計 


                    首先要強調一點,不可以以大屏的分辨率定義設計稿尺寸,當大屏的比例和電腦屏幕的比例一樣時,要結合電腦屏幕的分辨率來定設計稿尺寸。

                    3046056.png

                    比如電腦屏幕分辨率為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設計,都需要考慮使用場景,不同于網頁設計,需要結合它獨有的特征,定義設計流程及規范。


                    最后,相信認真看完以上文章的你,對大屏的設計尺寸會有一個更深刻的認識,并且當遇到類似問題,也能夠迎刃而解。


                    二維碼

                    上一篇:web可視化大屏展示技術的2大主要的作用?

                    下一篇:沒有了!

                    开云注册入口-(中国)首页 <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>