數(shù)據(jù)可視化模塊六設(shè)計數(shù)據(jù)可視化大屏CONTENTS01.布局?jǐn)?shù)據(jù)可視化大屏03.美化數(shù)據(jù)可視化大屏

02.制作數(shù)據(jù)可視化大屏目

錄教學(xué)目標(biāo)

1.熟悉頁面布局的原則與常見分類；2.了解數(shù)據(jù)可視化大屏的三大區(qū)域；3.掌握頁面配色優(yōu)化的方法；4.掌握顯示單位優(yōu)化的方法。知識目標(biāo)1.能完成數(shù)據(jù)大屏設(shè)計需求分析與布局類型梳理；2.能完成數(shù)據(jù)大屏頁面內(nèi)容布局；3.能完成關(guān)鍵指標(biāo)區(qū)、重點信息展示區(qū)與篩選區(qū)切片的制作；4.能夠完成大屏配色、顯示單位與頁面細(xì)節(jié)等的優(yōu)化。能力目標(biāo)素質(zhì)目標(biāo)1.具備良好的職業(yè)道德，確保數(shù)據(jù)的安全性和隱私性；2.具備高度的責(zé)任心，確保大屏展示的數(shù)據(jù)準(zhǔn)確無誤；3.具備強大的自學(xué)能力，能夠持續(xù)跟蹤行業(yè)動態(tài)，學(xué)習(xí)并掌握新技術(shù)。項目導(dǎo)覽任務(wù)一布局?jǐn)?shù)據(jù)可視化大屏任務(wù)實施PART01活動1分析數(shù)據(jù)大屏設(shè)計需求步驟1-步驟4確定標(biāo)題區(qū)位置標(biāo)題區(qū)位于頁面上方居中的位置，吸引觀眾的注意力，成為整個大屏的核心焦點，為后續(xù)的數(shù)據(jù)展示奠定基礎(chǔ)。確定關(guān)鍵指標(biāo)區(qū)位置關(guān)鍵指標(biāo)區(qū)位于標(biāo)題下方、頁面右側(cè)的位置。方便觀眾快速獲取最為重要的業(yè)績和業(yè)績達(dá)成率等數(shù)據(jù)信息。確定篩選區(qū)位置篩選區(qū)位于標(biāo)題下方、頁面左側(cè)的位置。在視覺上與標(biāo)題和關(guān)鍵指標(biāo)區(qū)形成了平衡，增加了數(shù)據(jù)大屏的交互性和實用性。重點信息展示區(qū)位于關(guān)鍵指標(biāo)區(qū)域篩選區(qū)下方的位置。全面且有條理地呈現(xiàn)業(yè)績的周變化趨勢、不同店鋪的業(yè)績、客單量、客單價等詳細(xì)內(nèi)容，保證了信息的清晰呈現(xiàn)。確定重點信息展示區(qū)位置03010204活動2梳理數(shù)據(jù)大屏布局類型步驟1-步驟4重點信息展示區(qū)位于關(guān)鍵指標(biāo)區(qū)域篩選區(qū)下方的位置。使得重點信息展示區(qū)在承接上方關(guān)鍵數(shù)據(jù)和篩選操作的同時，能充分利用頁面空間，保證了信息的清晰呈現(xiàn)。確定重點信息展示區(qū)位置標(biāo)題區(qū)位于頁面上方居中的位置。能確保標(biāo)題在第一時間吸引觀眾的注意力，成為整個大屏的核心焦點，為后續(xù)的數(shù)據(jù)展示奠定基礎(chǔ)。確定標(biāo)題區(qū)位置關(guān)鍵指標(biāo)區(qū)位于標(biāo)題下方、頁面右側(cè)的位置。方便觀眾快速獲取最為重要的業(yè)績和業(yè)績達(dá)成率等數(shù)據(jù)信息。確定關(guān)鍵指標(biāo)區(qū)位置篩選區(qū)位于標(biāo)題下方、頁面左側(cè)的位置。在視覺上與標(biāo)題和關(guān)鍵指標(biāo)區(qū)形成了平衡，便于用戶直觀、便捷地進行操作。確定篩選區(qū)位置活動3布局?jǐn)?shù)據(jù)大屏頁面內(nèi)容步驟1：頁面背景設(shè)計在“可視化”窗格中點擊“設(shè)置報表頁的格式”按鈕進入頁面格式設(shè)置界面，點擊“畫布背景”，設(shè)置背景色為“灰色，10%”?；顒?布局?jǐn)?shù)據(jù)大屏頁面內(nèi)容步驟2：標(biāo)題設(shè)計在“插入”選項卡中，點擊“文本框”按鈕，在畫布中添加一個文本框，拖至畫布最上方位置，在文本框中輸入“業(yè)績看板”，選擇合適的字體，并將字體大小設(shè)置為18號，顏色設(shè)置為白色。，可以為標(biāo)題添加背景色與陰影效果?；顒?布局?jǐn)?shù)據(jù)大屏頁面內(nèi)容步驟3：關(guān)鍵指標(biāo)區(qū)和篩選區(qū)布局設(shè)計在“插入”選項卡中，點擊“形狀”按鈕，選擇矩形，將矩形拖至畫布左上方標(biāo)題下方位置，調(diào)整其大小為：高度100，寬度350。將設(shè)置好的矩形復(fù)制3次，再調(diào)整右側(cè)兩個矩形的寬度為246。接下來，選中4個矩形，橫向排列，在“格式”選項卡中點擊“對齊”按鈕，依次選擇“頂端對齊”“橫向分布”?；顒?布局?jǐn)?shù)據(jù)大屏頁面內(nèi)容步驟4：重點數(shù)據(jù)信息展示區(qū)布局設(shè)計將需要展示的其他重點數(shù)據(jù)圖也使用矩形工具確定位置，調(diào)整矩形的大小、位置以及對齊方式，完成數(shù)據(jù)大屏布局的效果。PART02知識內(nèi)容一、頁面布局的原則主次分明原則在布局中，要明確區(qū)分主要信息和次要信息。將核心數(shù)據(jù)和關(guān)鍵指標(biāo)放置在顯眼的位置，使用較大的字體、醒目的顏色和突出的圖表形式來呈現(xiàn)，確保觀眾能夠在第一時間獲取到最重要的內(nèi)容。通過這種主次分明的布局，能夠引導(dǎo)觀眾的注意力，使他們快速抓住重點，同時又能在需要時獲取更詳細(xì)的信息。一、頁面布局的原則簡潔清晰原則避免過度復(fù)雜和混亂的布局，保持整體的簡潔性和清晰度。圖表和數(shù)據(jù)的排列應(yīng)該有規(guī)律。每個元素之間要有空間間隔，避免視覺上的擁擠和混淆。使用簡潔明了的圖表類型和標(biāo)簽，減少不必要的裝飾和特效。確保數(shù)據(jù)標(biāo)簽和單位清晰可見，讓觀眾能夠輕松理解數(shù)據(jù)所表達(dá)的含義，而不會被復(fù)雜的布局分散注意力。一、頁面布局的原則平衡對稱原則在大屏布局中，追求視覺上的平衡和對稱可以增強整體的美感和穩(wěn)定性。可以將重要程度相當(dāng)?shù)男畔⒎謩e放置在屏幕的左右兩側(cè)或上下兩端，使畫面呈現(xiàn)出均衡的效果。這樣的布局不僅能夠使大屏看起來更加美觀，還能幫助觀眾更有效地對比和分析相關(guān)數(shù)據(jù)。一、頁面布局的原則流程引導(dǎo)原則在根據(jù)數(shù)據(jù)的邏輯關(guān)系和展示的目的，合理安排布局，引導(dǎo)觀眾的視線按照特定的流程進行移動?？梢酝ㄟ^使用箭頭、線條或者顏色的漸變等方式，將不同的數(shù)據(jù)元素連接起來，形成一個有順序的視覺路徑。這樣的布局能夠幫助觀眾更好地理解數(shù)據(jù)之間的關(guān)系和整體的故事性。二、頁面布局常見分類中心聚焦布局這種布局將最重要的數(shù)據(jù)或核心內(nèi)容放置在屏幕的中心位置，形成視覺焦點。周圍環(huán)繞著次要的信息和輔助元素。中心區(qū)域通常采用較大、更醒目的圖表和數(shù)據(jù)展示，如一個占據(jù)較大面積的動態(tài)柱狀圖來展示主要業(yè)務(wù)的關(guān)鍵指標(biāo)。而周邊的信息可能是相關(guān)的細(xì)節(jié)數(shù)據(jù)、解釋說明文字或者較小的輔助圖表。這種布局能夠迅速吸引觀眾的注意力到核心信息上，然后再引導(dǎo)他們關(guān)注周邊的補充內(nèi)容，有助于突出重點和建立層次結(jié)構(gòu)。二、頁面布局常見分類分屏布局分屏布局將大屏劃分為多個獨立的區(qū)域，每個區(qū)域展示不同主題或類型的數(shù)據(jù)。每個分屏區(qū)域都有相對獨立的內(nèi)容和重點，可以根據(jù)數(shù)據(jù)的性質(zhì)和重要性進行靈活分配。分屏布局使得不同類型的數(shù)據(jù)能夠清晰區(qū)分，避免了信息的混亂和重疊，觀眾可以根據(jù)自己的關(guān)注重點快速定位到相應(yīng)的區(qū)域進行查看和分析。二、頁面布局常見分類分層布局分層布局按照數(shù)據(jù)的重要性和優(yōu)先級，將內(nèi)容分層展