中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)讀：大屏可視化，是指一些復(fù)雜、抽象的數(shù)據(jù)，通過可視的簡(jiǎn)單理解的方式展示出來，更加形象地表達(dá)內(nèi)在的信息與規(guī)律，讓數(shù)據(jù)更高效、更容易懂。本文作者圍繞大屏可視化的設(shè)計(jì)，進(jìn)行三個(gè)維度的分析，希望對(duì)你有幫助。

說起大屏可視化，很多人都知道是啥？

真正的大屏其實(shí)包含很多東西，簡(jiǎn)單的理解就是一些復(fù)雜、抽象的數(shù)據(jù)通過可視的簡(jiǎn)單理解的方式展示出來，更加形象的表達(dá)內(nèi)在的信息與規(guī)律，讓數(shù)據(jù)更高效、更容易懂。更容易懂很多數(shù)據(jù)的含義。但這要研究其中的數(shù)據(jù)的需求以及邏輯。根據(jù)本人的一些理解幫助大家更好的了解大數(shù)據(jù)可視化的設(shè)計(jì)。

做大屏設(shè)計(jì)其實(shí)有口訣：3定1量3選3調(diào)優(yōu)。

• 3定：定需求，定指標(biāo)、定粒度；
• 1量：量大屏；
• 3選：選圖表、選風(fēng)格、選布局；
• 3調(diào)優(yōu)：UI調(diào)優(yōu)、開發(fā)、測(cè)試之后調(diào)優(yōu)。

記得這口訣。下面給大家詳細(xì)講解。

一、設(shè)計(jì)大屏的原則

1. 確定業(yè)務(wù)需求

大屏的展示都是基于業(yè)務(wù)的需求，不是簡(jiǎn)單的排數(shù)據(jù)，展示數(shù)據(jù)。所有的大屏都是基于業(yè)務(wù)這一基礎(chǔ)上展示。

明確，大屏都是基于業(yè)務(wù)。數(shù)據(jù)的展示給相關(guān)人員全局的了解數(shù)據(jù)帶來的價(jià)值從而達(dá)到增效。如果脫離了這一訴求，展示的數(shù)據(jù)就一無所用。

了解相關(guān)人員的業(yè)務(wù)需求是根本。例如：

• 對(duì)于設(shè)備而言相關(guān)人員想知道設(shè)備的運(yùn)轉(zhuǎn)是否正常、設(shè)備損耗多少、設(shè)備何時(shí)要修理、設(shè)備是否故障等；
• 對(duì)于事故而言相關(guān)人員想知道事故發(fā)生了多少、哪里發(fā)生事故、事故有沒有減少、事故損失多少等等
• ……

知道了業(yè)務(wù)需求，我們才能幫助相關(guān)人員真正意義上的解決問題。才能更好的確定知道，知道數(shù)據(jù)要如何展示。

2. 設(shè)計(jì)框架后細(xì)節(jié)

我們知道大屏很大，大到設(shè)計(jì)者不知道都不知道讓人怎么看，胡亂設(shè)計(jì)的大屏不能幫助相關(guān)人員解決問題。所以設(shè)計(jì)大屏的時(shí)候我們要把握好方向，定好框架，展示內(nèi)容要有主次之分，使用者才有聚焦點(diǎn)。才知道那些是核心數(shù)據(jù)，那些是輔助數(shù)據(jù)。那些是要進(jìn)入二三級(jí)界面。這都是需要設(shè)計(jì)者好好斟酌。

二、設(shè)計(jì)邏輯

還是上面所說的3定1量3選3調(diào)優(yōu)，對(duì)這幾個(gè)詳細(xì)講解：

1. 定需求，定指標(biāo)、定粒度

1）定需求、定指標(biāo)

知道業(yè)主的訴求，將業(yè)主的訴求提煉成指標(biāo)，比如，在停車監(jiān)控系統(tǒng)中，業(yè)主想知道停車的時(shí)長(zhǎng)、空車的數(shù)量、外部來的車輛有多少、車輛都停在哪里、哪里有違停等，可以提煉出指標(biāo)：停車場(chǎng)空位數(shù)、外來車輛數(shù)、內(nèi)部車輛數(shù)、車輛區(qū)域熱力圖、車輛違停數(shù)、熱點(diǎn)停車區(qū)域、熱點(diǎn)違停區(qū)域等。提煉了這些指標(biāo)我們就能大概知道大屏需要顯示哪些內(nèi)容，屏幕會(huì)分為哪幾塊。

2）定粒度

粒度講白了就是用比較好的維度講解指標(biāo)，很多產(chǎn)品小伙伴整理完關(guān)鍵指標(biāo)之后無法準(zhǔn)確的表明自己的意圖，同時(shí)不能給業(yè)主展示他們想要的數(shù)據(jù)，展示的圖形讓迷惑或者云里霧里，很大原因就是維度把握不準(zhǔn)確或者指標(biāo)定義不明確（如何更好運(yùn)用圖形可以看3.2）。

2. 量大屏

量大屏不是真正意義上去尺子量，而是要提前知道電腦的分辨率，很多大屏由于面積過大，所以需要需要多個(gè)電腦或者信號(hào)源進(jìn)行適配，設(shè)計(jì)的分辨率很容易不滿足實(shí)際場(chǎng)景，展示效果也不好，單純靠標(biāo)準(zhǔn)的大屏設(shè)計(jì)很可能不滿足現(xiàn)場(chǎng)需求，所以設(shè)計(jì)前了解物理大屏寬比、大屏的整體分辨率很重要。

不同大屏簡(jiǎn)單介紹：

1）Led屏幕

點(diǎn)間距不同：

p3點(diǎn)與點(diǎn)之間的距離是3毫米，p4點(diǎn)與點(diǎn)之間的距離是4毫米。

清晰度不同：

P后面那個(gè)數(shù)字越小，代表兩個(gè)燈珠之間的距離越小，清晰度越高，相對(duì)應(yīng)，價(jià)格也會(huì)高，因?yàn)槊科椒降南袼攸c(diǎn)P3比P4多很多，成像效果好。

最佳可視距離不同：

點(diǎn)間距P3（3mm）的顯示屏，它的最佳可視距離是3.5~10米，點(diǎn)間距P4（4mm）的顯示屏，它的最佳可視距離是5~13.5米?？梢愿鶕?jù)自己的實(shí)際情況，選擇最適合的型號(hào)。

2）拼接屏

拼接的每塊小屏一般是16:9的高清屏，設(shè)計(jì)尺寸可以把上下高度設(shè)定為1080px，長(zhǎng)度按照拼接屏的數(shù)量比例得出長(zhǎng)度的設(shè)計(jì)尺寸。例如3乘5的一塊大屏幕，高度3塊屏設(shè)為1080，每塊高就是360，360除9乘16等640，640就是一塊屏幕的長(zhǎng)度，640乘5塊屏＝3200最后得出設(shè)計(jì)稿尺寸就是：高1080px乘寬3200px

現(xiàn)在企業(yè)常用的有無縫隙、1.7mm縫隙、3.5mm縫隙、三種拼接大屏，縫隙越小越貴。

另外大屏設(shè)計(jì)還有一個(gè)比較重要的問題就是注意拼接屏之間的縫隙，設(shè)計(jì)時(shí)千萬不能跨屏設(shè)計(jì)，不然很影響美觀。

3）控制端

目前企業(yè)用的最多的控制端為ipad控制，需要在ipad上制作出控制端頁面，一般尺寸為2048*1536，控制端大多數(shù)為按鈕操作，頁面盡量簡(jiǎn)單明了。

注意：

• 要以大屏的比例去定義設(shè)計(jì)稿，保證大屏完美呈現(xiàn)
• 4k分辨率電腦，優(yōu)先使用大分辨率作為設(shè)計(jì)稿
• 使用最接近大屏分辨率的電腦屏幕比例投放

3. 選圖表、選風(fēng)格、選布局

1）選圖表

提到圖表，大家腦海里浮現(xiàn)的，通常是柱狀圖、餅圖、趨勢(shì)圖等等，沒有把握數(shù)據(jù)的關(guān)聯(lián)性經(jīng)常會(huì)導(dǎo)致圖表的誤用。

圖表的作用，是幫助我們更好地看懂?dāng)?shù)據(jù)。選擇什么圖表，需要回答的首要問題是『我有什么數(shù)據(jù)，需要用圖表做什么』，而不是 『圖表長(zhǎng)成什么樣』 。因此我們從數(shù)據(jù)出發(fā)，從功能角度對(duì)圖表進(jìn)行分類。找出指標(biāo)里的數(shù)據(jù)主要集中在什么范圍、有啥關(guān)聯(lián)性、兩者之間有啥差異、表現(xiàn)出怎樣的規(guī)律等。

（引用網(wǎng)圖）

2）選風(fēng)格

不同顏色、不同搭配，給與觀看者不一樣的感受，大屏色彩的搭配很有講究，也有一定規(guī)律，大屏一般是主打科技炫酷的，多以深藍(lán)色的主調(diào)，各個(gè)背景、統(tǒng)計(jì)圖等多用深色，讓界面更有科技感，一下子就被吸引。（ps：更多風(fēng)格設(shè)計(jì)可以百度下情緒板的學(xué)習(xí)，本文就不多講解）

3）定布局

設(shè)計(jì)布局設(shè)置，要顯示關(guān)鍵的指標(biāo)信息，展示主次，讓使用者能過直觀理解數(shù)據(jù)背后的意義。市面常見的布局：

(中心環(huán)繞)

(左右分布)

（上下分布）

布局根據(jù)實(shí)際的大屏進(jìn)行設(shè)計(jì)，不能硬生生套用模板。

4. UI調(diào)優(yōu)、開發(fā)、測(cè)試之后調(diào)優(yōu)

1）ui設(shè)計(jì)調(diào)優(yōu)

ui設(shè)計(jì)調(diào)優(yōu)分為兩步，第一是確定可視化的酷炫效果，大屏的硬件配置有著很大不同,如果硬件配置不夠的情況下要求酷炫的效果可能造成卡頓甚至崩潰的情況，這是需要提前溝通的。

第二步是，是要與UI不斷的試稿，溝通，不斷的修改溝通，定好布局、圖表、關(guān)鍵元素、結(jié)構(gòu)。不斷的重復(fù)試錯(cuò)，嘗試修改，很多時(shí)候，設(shè)計(jì)出來的投放到大屏的效果不好，所以不斷溝通確認(rèn)是很重要的。很多時(shí)候開發(fā)出來的DEMO需要反復(fù)調(diào)優(yōu)。

2）開發(fā)調(diào)優(yōu)

開發(fā)調(diào)優(yōu)主要是針對(duì)前端展示、設(shè)計(jì)處理；

前端的話很多前端無法用樣式寫出動(dòng)效、，一般需要設(shè)計(jì)人員提供切圖。例如邊框、圖表等，設(shè)計(jì)人員要給于切圖。才能讓開發(fā)進(jìn)行設(shè)計(jì)調(diào)優(yōu)。

設(shè)計(jì)處理需要把原始數(shù)據(jù)進(jìn)行處理，將雜亂無章的數(shù)據(jù)處理成有價(jià)值的數(shù)據(jù)，這需要數(shù)據(jù)處理人員的介入。數(shù)據(jù)處理的邏輯如下：

3）測(cè)試調(diào)優(yōu)

測(cè)試調(diào)優(yōu)，是投放到大屏上進(jìn)行測(cè)試調(diào)優(yōu)，主要有視覺上跟性能上的調(diào)優(yōu)。

視覺上，看大屏的字體、效果、圖表是不是根預(yù)先設(shè)計(jì)的一樣；

性能上，看動(dòng)畫是不是流暢、數(shù)據(jù)是不是有問題，跳轉(zhuǎn)是不是有卡頓等。

只有經(jīng)過測(cè)試調(diào)優(yōu)過的大屏系統(tǒng)，才能真正的運(yùn)用到市場(chǎng)。

三、常見問題

1. 顯示不佳的各個(gè)問題

• 顯示拉升/壓縮
• 顯示不清晰

對(duì)于拉升/壓縮。一般情況下，前端只需要對(duì)設(shè)計(jì)稿還原就好，可以預(yù)先配置 meta 避免自動(dòng)縮放拉伸。較多采用用rem布局。也有可能是視頻擴(kuò)展器問題，在實(shí)際調(diào)優(yōu)的情況下了解壓縮比例，然后矯正。

對(duì)于顯示不清晰，我們要知道1個(gè)是色彩問題、一個(gè)是分辨率問題。

色彩問題是因?yàn)橥斗胚^程中會(huì)存在色差，要將在設(shè)計(jì)稿中不斷的在大屏上進(jìn)行投放，了解實(shí)際與設(shè)計(jì)的差異，才能解決。

分辨率問題，我們要知道大屏投放要經(jīng)過4個(gè)分辨率，從顯卡到矩陣、到大屏設(shè)計(jì)分辨率、到實(shí)際分辨率。盡量做到設(shè)計(jì)稿的與實(shí)際的物理比例一致，在電腦的播放的比例與大屏一致。

2. 如何選圖表(常用圖表)

1）柱形圖

應(yīng)用場(chǎng)景：分類數(shù)據(jù)比較

2）條形圖

應(yīng)用場(chǎng)景：數(shù)據(jù)比較（類別名稱可以更長(zhǎng)，因?yàn)閅軸上有更多空間）

3）折線圖

應(yīng)用場(chǎng)景：數(shù)據(jù)量隨時(shí)間變化的趨勢(shì)，系列趨勢(shì)的比較

4）面

積圖

應(yīng)用場(chǎng)景：序列比，時(shí)間趨勢(shì)比

5）餅形圖

餅圖廣泛用于各個(gè)領(lǐng)域，以表示不同類別的比例并通過弧線比較各種類別。

應(yīng)用場(chǎng)景：序列比率，序列大小比較（玫瑰圖）

6）散點(diǎn)圖

散點(diǎn)圖在直角坐標(biāo)系上以點(diǎn)的形式顯示了兩個(gè)變量。點(diǎn)的位置由變量的值確定。通過觀察數(shù)據(jù)點(diǎn)的分布，我們可以推斷出變量之間的相關(guān)性。

制作散點(diǎn)圖需要大量數(shù)據(jù)，否則相關(guān)性不明顯。

應(yīng)用場(chǎng)景：關(guān)聯(lián)分析，數(shù)據(jù)分發(fā)

7）氣泡圖

氣泡圖是多元圖表，是散點(diǎn)圖的變體。除了由X軸和Y軸表示的變量的值外，每個(gè)氣泡的面積代表第三個(gè)值。

我們應(yīng)該注意，氣泡的大小是有限的，氣泡太多會(huì)使圖表難以閱讀。

應(yīng)用場(chǎng)景：分類數(shù)據(jù)比較，相關(guān)分析

8）儀表

數(shù)據(jù)可視化大屏設(shè)計(jì)中的儀表是一種實(shí)體化圖表。標(biāo)尺代表度量，指針代表尺寸，指針角度代表值。它可以直觀地表示指標(biāo)的進(jìn)度或?qū)嶋H情況。

應(yīng)用場(chǎng)景：時(shí)鐘，比例顯示

9）雷達(dá)圖

雷達(dá)圖用于比較多個(gè)量化變量，例如查看哪些變量具有相似的值，或者是否存在極限值。它們還有助于觀察數(shù)據(jù)集中哪些變量具有較高或較低的值。雷達(dá)圖適用于演示工作績(jī)效。

雷達(dá)圖還具有堆積的柱形樣式，可用于分類和系列之間的雙向比較，同時(shí)還代表比例。

應(yīng)用場(chǎng)景：尺寸分析，系列比較，系列權(quán)重分析。

10）樹狀圖

樹狀圖是一種以樹狀結(jié)構(gòu)形式顯示層次結(jié)構(gòu)的直觀方法，可以清楚地顯示層次結(jié)構(gòu)的關(guān)系。

應(yīng)用場(chǎng)景：層次顯示，過程顯示

11）矩形樹圖

矩形樹形圖適合于呈現(xiàn)具有層次關(guān)系的數(shù)據(jù)，可以直觀地反映相同級(jí)別之間的比較。與傳統(tǒng)的樹形結(jié)構(gòu)圖相比，矩形樹形圖更加有效地利用了空間，并具有顯示比例的功能。

矩形樹圖適用于顯示具有權(quán)重關(guān)系的層次結(jié)構(gòu)。如果不需要反映比例，則框架圖可能更清晰。

應(yīng)用場(chǎng)景：加權(quán)樹數(shù)據(jù)，樹數(shù)據(jù)比例

12）漏斗圖

漏斗圖顯示每個(gè)階段的比例，并直觀地反映每個(gè)模塊的大小。適合比較排名。

同時(shí)，漏斗圖也可用于比較。我們水平排列多個(gè)漏斗圖，數(shù)據(jù)對(duì)比也非常清晰。

應(yīng)用場(chǎng)景：數(shù)據(jù)排名，比率，標(biāo)準(zhǔn)值比較

13）詞云圖

詞云是文本數(shù)據(jù)的直觀表示。它是由詞匯組成的云狀彩色圖形。它用于顯示大量文本數(shù)據(jù)，并可以快速幫助用戶感知最突出的文本。

詞云圖需要大量數(shù)據(jù)，數(shù)據(jù)的鑒別度比較大，否則效果不明顯。而且它不適合進(jìn)行準(zhǔn)確的分析。

應(yīng)用場(chǎng)景：關(guān)鍵詞搜索

14）甘特圖

甘特圖直觀地顯示了任務(wù)的時(shí)間安排，實(shí)際進(jìn)度以及與需求的比較。因此，管理人員可以輕松地了解任務(wù)（項(xiàng)目）的進(jìn)度。

應(yīng)用場(chǎng)景：項(xiàng)目進(jìn)度，狀態(tài)隨時(shí)間變化，項(xiàng)目過程

15）地圖

該圖分為三種類型：區(qū)域圖，點(diǎn)地圖和流向圖。

區(qū)域地圖：

區(qū)域地圖是一種使用顏色表示地圖分區(qū)上一定范圍的值分布的地圖。

應(yīng)用場(chǎng)景：數(shù)據(jù)比較和分發(fā)

點(diǎn)地圖：

點(diǎn)地圖是通過在地理背景上繪制相同大小的點(diǎn)來表示數(shù)據(jù)的地理分布的方法。

點(diǎn)的分布使你很容易掌握數(shù)據(jù)的整體分布，但是當(dāng)你需要觀察單個(gè)特定數(shù)據(jù)時(shí)，它不適合使用。

應(yīng)用場(chǎng)景：數(shù)據(jù)分發(fā)

但是，如果用氣泡替換該點(diǎn)，則該點(diǎn)地圖不僅可以顯示分布，而且可以粗略地比較每個(gè)區(qū)域中數(shù)據(jù)的大小。

流向圖：

流向圖顯示流出區(qū)域和流入?yún)^(qū)域之間的交互數(shù)據(jù)。通常用連接空間要素的幾何重心的線表示。線條的寬度或顏色表示流量值。

流向圖有助于說明地理遷移的分布，動(dòng)態(tài)流線的使用可減少視覺混亂。

應(yīng)用場(chǎng)景：數(shù)據(jù)流，分布和比較

16）熱圖

熱圖用于指示地理區(qū)域中每個(gè)點(diǎn)的權(quán)重。除了將地圖作為背景圖層之外，你還可以使用其他圖像。熱圖中的顏色通常是指密度。

應(yīng)用場(chǎng)景：區(qū)域訪問，熱量分布，各種事物的分布。

本文由 @narode 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自?Unsplash，基于 CC0 協(xié)議