如何在WordPress文章或頁面中加入Tab標簽頁

文章拆分成標簽頁顯示，既可以節(jié)約空間，又方便讀者查找自己想要閱讀的內(nèi)容，而且可以使頁面變得整潔清晰。其實，在WordPress中實現(xiàn)這項功能很容易，下文為大家分享了添加標簽頁的具體步驟。

第一步：安裝插件；

首先我們要安裝并啟用“Tabs Shortcode and Widget”插件。該插件安裝啟用后直接可以使用，不需任何設(shè)置。

第二步：設(shè)置標簽頁；

新建文章或頁面，或者是編輯現(xiàn)有文章或頁面，在編輯欄上方你會發(fā)現(xiàn)多了一個按鈕；鼠標點擊該按鈕就會出現(xiàn)Tabs Layout選項；如下圖：

點擊Tabs Layout選項進入Tab設(shè)計界面，第一項是設(shè)置Tab的個數(shù)，在這里你可以選擇滿足您需求的標簽頁個數(shù)，第二項是選擇Tab模式，這里有horizontal、vertical兩種模式可供選擇，之后是標簽頁總名稱，和標簽頁1的名稱，你還可以根據(jù)個人喜好，給標簽頁設(shè)置圖標；最后編輯標簽頁內(nèi)容；具體界面如下圖：

第一個標簽頁編輯結(jié)束后，以同樣的方式完成其余標簽頁的編輯。在整個設(shè)計的過程中，在編輯框右側(cè)都可以看到編輯效果。編輯結(jié)束后，在編輯框最后還有一項自定義選項CSS Class。你可以根據(jù)你的個人愛后，在這里添加CSS類文件，將標簽頁的界面設(shè)置成你喜歡的界面。所有的標簽頁都設(shè)計完成后，點擊對話框頂部或底部的insert按鈕保存設(shè)置并發(fā)布文章或頁面。這個時候打開網(wǎng)頁，你就可以看到你的文章以標簽頁的形式顯示。

接下來給大家介紹的是“Tabs Shortcode and Widget”插件的另一項添加標簽頁的功能——通過插入小工具，在主邊欄添加標簽頁。設(shè)置過程與在文章中添加標簽頁相似，只是插入的位置不同。

具體步驟：

打開儀表盤，選擇外觀菜單下的小工具，選擇添加“OTW Shortcode Widget”于主邊欄。

點擊添加“Tabs Layout”進入標簽頁設(shè)計界面，該界面跟在文章中添加標簽頁的界面完全相同。按照前面編輯文章中標簽頁的方式編輯，結(jié)束后保存編輯并且保存小工具。現(xiàn)在打開之前打開過的網(wǎng)頁，刷新，你會發(fā)現(xiàn)在主邊欄的最下方出現(xiàn)了剛剛編輯好的標簽頁

上述就是添加選卡的全過程，希望對大家有所幫助。謝謝！

您2019豬事順利，心想事成。

前言

Tab 切換是種很常見的網(wǎng)頁呈現(xiàn)形式，不管是PC或者H5都會經(jīng)常看到，今天就為小伙伴們提供多種純CSS Tab 切換的實現(xiàn)方式，同時對比一下那種代碼更方便，更通俗易懂。

3種純CSS方式實現(xiàn)Tab 切換

純CSS實現(xiàn)都面臨2個問題：

1、如何接收點擊事件？

2、如何操作相關(guān)DOM？

checked 偽類實現(xiàn)純 CSS Tab 切換

擁有 checked 屬性的表單元素， <input type="radio"> 或者 <input type="checkbox"> 能夠接收到點擊事件。

知識點:

1、使用 radio 標簽的 :checked 偽類，加上 <label for> 實現(xiàn)純 CSS 捕獲點擊事情

2、使用了 ~ 選擇符對樣式進行控制

<div class="container"> 
 <input class="nav1" id="li1" type="radio" name="nav"> 
 <input class="nav2" id="li2" type="radio" name="nav"> 
 <ul class='nav'> 
 <li class='active'><label for="li1">tab1</label></li> 
 <li><label for="li2">tab2</label></li> 
 </ul> 
 <div class="content"> 
 <div class="content1 default">tab1 內(nèi)容:123456</div> 
 <div class="content2">tab2 內(nèi)容:abcdefgkijkl</div> 
 </div> 
</div>

添加樣式

.container *{ 
 padding: 0; 
 margin: 0; 
} 
.container { 
 position: relative; 
 width: 400px; 
 margin: 50px auto; 
} 
.container input { 
 display: none; 
} 
.nav { 
 position: relative; 
 overflow: hidden; 
} 
.nav li { 
 width: 200px; 
 float: left; 
 text-align: center; 
 background: #ddd; 
 list-style: none; 
} 
.nav li label { 
 display: block; 
 width: 200px; 
 line-height: 36px; 
 font-size: 18px; 
 cursor: pointer; 
} 
.content { 
 position: relative; 
 overflow: hidden; 
 width: 400px; 
 height: 100px; 
 border: 1px solid #999; 
 box-sizing: border-box; 
 padding: 10px; 
} 
.content1, 
.content2 { 
 display: none; 
 width: 100%; 
 height: 100%; 
} 
.nav1:checked ~ .nav li { 
 background: #ddd; 
 color: #000; 
} 
.nav1:checked ~ .nav li:first-child { 
 background: #ff7300; 
 color: #fff; 
} 
.nav2:checked ~ .nav li { 
 background: #ddd; 
 color: #000; 
} 
.nav2:checked ~ .nav li:last-child { 
 background: #ff7300; 
 color: #fff; 
} 
.nav1:checked ~ .content > div { 
 display: none; 
} 
.nav1:checked ~ .content > div:first-child { 
 display: block; 
} 
.nav2:checked ~ .content > div { 
 display: none; 
} 
.nav2:checked ~ .content > div:last-child { 
 display: block; 
} 
.nav li.active { 
 background: #ff7300; 
 color: #fff; 
} 
.content .default { 
 display: block; 
}

target 偽類實現(xiàn)純 CSS Tab 切換

知識點:

1、要使用 :target 偽元素，需要 HTML 錨點，以及錨點對應(yīng)的 HTML 片段

2、核心是使用 :target 偽類接收點擊事件

3、通過兄弟選擇符 ~ 控制樣式

<div class="container"> 
 <div id="content1" class="active">tab 1內(nèi)容:123456</div> 
 <div id="content2">tab 2內(nèi)容:abcdefgkijkl</div> 
 
 <ul class='nav'> 
 <li class="active"><a href="#content1">tab1</a></li> 
 <li><a href="#content2">tab2</a></li> 
 </ul> 
 
 <div class="wrap"></div> 
</div>

添加樣式

.container *{ 
 padding: 0; 
 margin: 0; 
} 
.container { 
 position: relative; 
 width: 400px; 
 margin: 50px auto; 
} 
 
.nav { 
 position: relative; 
 overflow: hidden; 
} 
 
li { 
 width: 200px; 
 float: left; 
 text-align: center; 
 background: #ddd; 
 list-style: none; 
} 
 
li a { 
 display: block; 
 width: 200px; 
 line-height: 36px; 
 font-size: 18px; 
 cursor: pointer; 
 text-decoration: none; 
 color: #000; 
} 
 
#content1, 
#content2 { 
 position: absolute; 
 overflow: hidden; 
 top: 36px; 
 width: 400px; 
 height: 100px; 
 border: 1px solid #999; 
 box-sizing: border-box; 
 padding: 10px; 
} 
 
#content1, 
#content2 { 
 display: none; 
 width: 100%; 
 background: #fff; 
} 
 
#content1:target, 
#content2:target { 
 display: block; 
} 
 
#content1.active { 
 display: block; 
} 
 
.active ~ .nav li:first-child { 
 background: #ff7300; 
 color: #fff; 
} 
 
#content1:target ~ .nav li { 
 background: #ddd; 
 color: #000; 
} 
#content1:target ~ .nav li:first-child { 
 background: #ff7300; 
 color: #fff; 
} 
 
#content2:target ~ .nav li { 
 background: #ddd; 
 color: #000; 
} 
#content2:target ~ .nav li:last-child { 
 background: #ff7300; 
 color: #fff; 
} 
 
.wrap { 
 position: absolute; 
 overflow: hidden; 
 top: 36px; 
 width: 400px; 
 height: 100px; 
 border: 1px solid #999; 
 box-sizing: border-box; 
}

focus-within 來實現(xiàn) tab 切換功能

:focus-within 它表示一個元素獲得焦點，或該元素的后代元素獲得焦點。

重點：它或它的后代獲得焦點。

這也就意味著，它或它的后代獲得焦點，都可以觸發(fā) :focus-within。

知識點

1、這個屬性有點類似 Javascript 的事件冒泡，從可獲焦元素開始一直冒泡到根元素 html，都可以接收觸發(fā) :focus-within 事件

2、本例子的思路就是通過獲焦態(tài)來控制其他選擇器，以及最重要的是利用了父級的 :not(:focus-within) 來設(shè)置默認樣式

<div class="container"> 
 <div class="nav-box"> 
 <button class="nav1">tab1</button> 
 <button class="nav2">tab2</button> 
 <div class="content-box"> 
 <div class="content1"> 
 content-1 
 </div> 
 <div class="content2"> 
 content-2 
 </div> 
 </div> 
 </div> 
</div>

添加樣式

.container { 
 width: 300px; 
 margin: 50px auto; 
 padding: 10px; 
 boder: 1px solid #ddd; 
} 
 
.nav-box { 
 font-size: 0; 
} 
 
button { 
 width: 150px; 
 height: 40px; 
 box-sizing: border-box; 
 outline: none; 
 background: #fff; 
 border: 1px solid #ddd; 
 font-size: 18px; 
 cursor: pointer; 
} 
 
button:focus-within { 
 color: #fff; 
 background: #ff7300; 
} 
 
.content-box { 
 font-size: 24px; 
 border: 1px solid #ddd; 
 height: 100px; 
} 
.content-box div { 
 display: none; 
} 
 
.nav-box:not(:focus-within) .nav1 { 
 color: #fff; 
 background: #ff7300; 
} 
.nav-box:not(:focus-within) .content1 { 
 display: block; 
} 
 
.nav1:focus-within ~ .content-box .content1 { 
 display: block; 
} 
 
.nav2:focus-within ~ .content-box .content2 { 
 display: block; 
}

3種純CSS方式實現(xiàn)Tab 切換

這個效果就很差一些，因為，在tab失去焦點時，就會復(fù)原，回到tab1上面，并不推薦這種方式來實現(xiàn)。小編推薦第一種:checked實現(xiàn)方式，更容易理解。

公告

喜歡小編的點擊關(guān)注，了解更多知識！

源碼地址和源文件下載請點擊下方“了解更多”

年以來，隨著疫情方面的數(shù)據(jù)逐漸增多，一些互聯(lián)網(wǎng)公司也紛紛發(fā)布一些可視化的數(shù)據(jù)產(chǎn)品服務(wù)，讓用戶可以實時并直觀了解最新情況，可謂一個便民利器。而本文，則通過丁香醫(yī)生、以及騰訊新聞推出的“疫情實時動態(tài)”可視化服務(wù)，總結(jié)分享其中運用到的一些常見的數(shù)據(jù)可視化經(jīng)驗。

閱讀指南：

（1）受眾人群：初級產(chǎn)品經(jīng)理

（2）閱讀收獲

產(chǎn)品分析的方法論實例，包括用戶體驗五要素、馬斯洛需求理論等；
數(shù)據(jù)可視化的基本技巧和遵循原則。

一、前言

1.1 概念

首先，需要先簡單澄清下數(shù)據(jù)可視化的基本概念。數(shù)據(jù)可視化，實質(zhì)上是把一些概要信息（數(shù)據(jù)、關(guān)鍵內(nèi)容），并結(jié)合動靜態(tài)的圖像視頻等形式進行展示，從而清晰傳遞核心信息。較為注重視覺層面的觸達。

所以我們需要在數(shù)據(jù)之中挖掘一些重要的價值信息，并以一個可觀的方式呈現(xiàn)。而“重要”的定義是十分明顯的，核心數(shù)據(jù)、用戶感興趣、有決策意義，都可稱之為重要。

1.2 動因

根據(jù)馬斯洛五層次需求理論，那么數(shù)據(jù)可視化在其中屬于什么層次的需求？

受疫情影響，生命安全成了最重要的社會需求。那么滿足大眾對這方面的廣泛需求，推出這樣的數(shù)據(jù)可視化產(chǎn)品是十分有必要，滿足用戶對疫情情況、資訊信息、醫(yī)療信息等方面的獲取，從而保障自己基本的需求。

1.3 基本情況

（1）脈絡(luò)

初始，丁香醫(yī)生率先推出一個H5的可視化頁面，匯總披露病例數(shù)據(jù)。隨后，一些大廠也開始陸續(xù)推出，包括頭條、騰訊等等。

而為什么大家都紛紛推出這樣的數(shù)據(jù)服務(wù)，從戰(zhàn)略層來說：一是做好企業(yè)責任，滿足用戶的知情需求；其二是滿足自己的平臺用戶，并吸引流量，這都是拉新、促活的寶貴方式。

而展示的信息，主要包括每日的新增、累計病例數(shù)，各地區(qū)的病例分布，以及疫情新聞、醫(yī)學(xué)知識等方面的內(nèi)容。

（2）價值

用戶：主要滿足3類用戶：大眾用戶、政企用戶和患者用戶。其中主要是前2者。大眾用戶是指像我們普遍受此前疫情影響生活、工作等方面的大眾群體。政企用戶是指政府和企業(yè)機構(gòu)，同樣受此次疫情影響，對機構(gòu)的運作肯定也是有影響的，他們需要基于此做合適的決策，保障企業(yè)和員工的安全。患者用戶是指受此次疫情傳播切身影響到的用戶，包括確診、疑似、接觸、被動隔離等，這類用戶對醫(yī)學(xué)信息的獲取會更為迫切。
需求：面對3類不同的用戶，主要是滿足2大類需求，分布是資訊信息和醫(yī)療信息的獲取。其中資訊信息包括疫情信息、政府信息、權(quán)威報道等。醫(yī)療信息包括醫(yī)學(xué)知識、醫(yī)院信息、醫(yī)學(xué)服務(wù)等。

而接下來，也將依據(jù)用戶體驗五要素中的范圍層、框架層、表現(xiàn)層，分別對這個疫情數(shù)據(jù)可視化的產(chǎn)品服務(wù)進行分析。

二、范圍層

范圍層的定義是決定這樣的產(chǎn)品服務(wù)需要提供什么范圍內(nèi)的功能服務(wù)，什么是不做的。以及要做的數(shù)據(jù)指標，哪些是關(guān)鍵的，哪些是次要的。所以我們可以羅列一下這樣數(shù)據(jù)可視化產(chǎn)品，基于用戶的需求是需要準備什么樣的數(shù)據(jù)指標。

2.1 范圍確認

上圖摘自國家衛(wèi)健委某日的全日數(shù)據(jù)，在制作可視化的時候，需要考慮數(shù)據(jù)源的出處以及能提供什么樣的指標及口徑。

從中可以看出，大致可以劃分兩類關(guān)鍵數(shù)據(jù)：一個是病例的數(shù)據(jù)，一個是輔助性的數(shù)據(jù)。我們需要從中挑出其適合展示同時也是用戶需要關(guān)心的數(shù)據(jù)。

通常做這種可視化產(chǎn)品，總結(jié)性的數(shù)據(jù)是十分關(guān)鍵的。而基于用戶的關(guān)注點，每日新增、累計，就是其中的關(guān)鍵。

另外，基于“時間”和“地區(qū)”，代表了數(shù)據(jù)的“屬性”。而屬性則反應(yīng)了這個數(shù)據(jù)可以以什么樣的特點進行展現(xiàn)。而“時間”和“地區(qū)”是，最適合以數(shù)據(jù)趨勢和數(shù)據(jù)分布的兩種主要數(shù)據(jù)可視化表達形式。

2.2 主次確認

從下表可以看出，3家平臺的數(shù)據(jù)指標在展示上是比較一致的，核心指標都一一羅列展示。

其中在時間的“小時”級別，以及“解除醫(yī)學(xué)觀察”等細分指標都不做展示，我認為主要出于以下目的：

小時：各地數(shù)據(jù)更新時間不一致，無法保證的小時級別的統(tǒng)一更新。所以在時效性無法保障的前提下，不做過于實時的展示是合理的；
解除醫(yī)學(xué)觀察：類似追蹤到密切接觸者、解除醫(yī)學(xué)觀察這樣的指標太大，且邊界有不確定性，用戶對其感知不會太深，所以不展示存在較大不確定性的指標同樣也是相對合理的；

三、框架層

框架層的定義是指根據(jù)要做的功能范圍，應(yīng)該確定如何正確布局和設(shè)計，可以簡單理解為PPT的排版一樣，以什么樣的方式來排列展現(xiàn)這些元素。

3.1 布局

首先，我們需要先看看上文提及到的幾類數(shù)據(jù)指標，重新分類一下,并標記相應(yīng)的優(yōu)先級。

顯然按照合理的布局應(yīng)該是：

從數(shù)據(jù)指標來看，確診、疑似、治愈、死亡這4個是關(guān)鍵指標，而累計要較新增重要些。
從時間和地域上看，中國整體數(shù)據(jù)、各省市數(shù)據(jù)、全球各國數(shù)據(jù)這3類為關(guān)鍵指標。而由于目標用戶主要為國內(nèi)廣大用戶，那么按照優(yōu)先級排序應(yīng)以全國到各省市，再到全球各國，這樣的順序排列。

3.2 可視化方案

大致的布局是已經(jīng)清晰了，那么接下來就需要基于數(shù)據(jù)類型采用合理的可視化展示形式。

前面也提過，由于是時間和地區(qū)下的各類數(shù)據(jù)，基于這樣的屬性，是可以做趨勢、地域、列表等分布的展示方式。支持趨勢的圖形則主要為折線、柱狀圖，支持地域分布類型則為地圖，而列表則為常規(guī)的類報表方式等。

其中，由于時間跨度較長和地區(qū)明細較多，如果使用柱狀圖，則會顯得橫軸較長，所以在有限的手機屏幕尺寸下，是不適宜展示的。

趨勢：由于時間跨度較長和地區(qū)明細較多，如果使用柱狀圖，則會顯得橫軸較長，所以在有限的手機屏幕尺寸下，是不適宜展示的。
地圖：地圖的可視化有很多，比如像基礎(chǔ)的echats組件，就支持各類2D、3D圖形。但是在這里我們需要考慮的是，用戶主要打開的應(yīng)用設(shè)備是手機。那么手機的設(shè)備性能一定程度上限制了可視化的效果呈現(xiàn)。先忽略開發(fā)成本，過于酷炫的效果，會導(dǎo)致頁面加載、渲染十分久，這在體驗上十分不劃算的。

（Echarts部分地圖特性截圖）

所以在這里，更傾向于采用粗一些的2D省級行政地圖形式，開發(fā)周期短，且滿足最基本需求。

3.3 平臺分析

（1）匯總數(shù)據(jù)

相同點：

從布局上，3家都采用“整體數(shù)據(jù)+地圖分布”的結(jié)合布局，清晰傳達全國一天的整體數(shù)據(jù)；
從數(shù)據(jù)時效性上，都清晰明確數(shù)據(jù)的更新時間，從而保證與官方的一致性；
從整體數(shù)據(jù)上，都以“標題、人數(shù)、較昨日”3個字段，展示整體數(shù)據(jù)的主要信息；
統(tǒng)一以地圖分布展示全國各省的分布，并以同一色系的深淺表達各省的數(shù)據(jù)發(fā)展情況，而圖標的比例尺隨著數(shù)據(jù)的增加也會發(fā)生變化。

差異點：

丁香醫(yī)生在匯總數(shù)據(jù)中間穿插了此次疫情的一些基本信息，占據(jù)了一些空間。對于前期疫情爆發(fā)，有利于做信息普及，但到了中、后期，用戶已經(jīng)十分感知這方面的信息，優(yōu)先級已經(jīng)沒有那么重要，其實完全可以作為一個hover進行信息展示。
整體數(shù)據(jù)上，基本展示4、5個核心指標，但在“標題”、“較昨日XX”和“具體數(shù)值”的排版上有所不同，而更是把標題放在2個指標之間。

評價：正常應(yīng)遵循“標題+具體數(shù)值+較昨日變化”這樣的排列比較合適，上下順序先從標題了解該指標的含義，居中放大具體數(shù)值，突出關(guān)鍵信息，其次顯示較昨日變化對比，感知變化情況。

（2）各指標趨勢

相同點：

基于新增和累計兩個維度，都展示了確診、疑似、死亡和治愈等指標的數(shù)據(jù)趨勢；
數(shù)據(jù)內(nèi)涵和數(shù)值接近的指標，都做合并在同一折線圖中，這樣使得頁面簡潔，且便于數(shù)據(jù)之間做比對、關(guān)聯(lián)。比如新增確診和新增疑似，2者的數(shù)據(jù)內(nèi)涵相對接近，且數(shù)值是比較接近，都是千級單位。那么這樣的折線展示兩者關(guān)聯(lián)關(guān)系，又不會因為展示其他不相關(guān)又懸殊的指標造成誤解。

差異點：

丁香醫(yī)生在展示的指標較多一些，且增加了死亡率和治愈率等百分比類型的指標。
和騰訊新聞的版式比較接近，且使用了不同的色系進行分類表達。而丁香醫(yī)生主要以左右滑動的交互收縮形式展示。減少空間，但降低了其他圖表的漏出。
丁香醫(yī)生突出了湖北和非湖北的數(shù)據(jù)，這樣的好處可以比較全國和非湖北，側(cè)面表達目前的疫情傳播困難程度主要在湖北，其他地區(qū)相較輕一些，實際比全國的平均值更低，緩輕心理壓力（這就是可視化的魅力）。

（3）國內(nèi)各省市分布

相同點：統(tǒng)一以常規(guī)列表分布展示國內(nèi)各省市的疫情數(shù)據(jù)情況，并集中以地區(qū)、確診、死亡、治愈等字段。

差異點：

和騰訊新聞有明確的標題進行布局區(qū)分，顯示國內(nèi)疫情數(shù)據(jù)。而丁香醫(yī)生沒有明確展示，與上面版塊的邊界過于混淆。
和騰訊新聞較丁香醫(yī)生額外增加“新增確診”指標，并且以差異色值顯示。
列表默認展開當前省份的各市數(shù)據(jù)，而和騰訊新聞伸縮展開按鈕默認統(tǒng)一在右側(cè)，與丁香醫(yī)生顯示左側(cè)不同，較為符合移動端產(chǎn)品交互習(xí)慣。
有趣的是，優(yōu)先展示當前用戶地理位置所在省份的數(shù)據(jù)展示，再以累計確診人數(shù)進行順序排列。而騰訊新聞和丁香新聞統(tǒng)一以累計確診人數(shù)多少排列。

評價：

考慮排序、篩選的展示邏輯，一般從大到小。
移動端頁面因為便于依據(jù)當前用戶的地理位置，可以采用個性化的手段做一些差異顯示，這樣在保證整體數(shù)據(jù)展示的過程也優(yōu)先展示用戶接近的數(shù)據(jù)信息，體驗更佳。

（4）海外各國分布

展示方式如國內(nèi)疫情一致，這里不多說。而唯一不同的是，丁香醫(yī)生在全球各國的基礎(chǔ)做了“洲”單位的分類。這樣的好處是，分類顯得更有層次性，了解某個范圍內(nèi)的地區(qū)更有顯著性。

四、表現(xiàn)層

表現(xiàn)層所關(guān)注的，是頁面各個元素組件的形狀、色彩和大小比例搭配。同時數(shù)據(jù)可視化十分重視圖形色彩的表達，一個好的視覺設(shè)計，能夠為數(shù)據(jù)的信息傳遞起到十分重要的作用。

4.1 匯總數(shù)據(jù)

從上圖可以看出，3家平臺都展示了4個關(guān)鍵指標“確診”、“疑似”、“死亡”和“治愈”，以及在色彩選擇上，盡管有具體色值的差別，但是理念是都較為接近的。

確診：首先疫情確診人數(shù)，本身是一個起提醒警示作用的數(shù)據(jù)含義，所以采用偏紅色的表達是合理的，而丁香醫(yī)生和騰訊新聞則保持了這個理念。
疑似：疑似的指標內(nèi)涵也是有一定的警醒作用，但是由于較“確診”的程度輕些，那么采用黃粽色系，可以相對和緩一些，而這3家在這方面是保持一致的；
死亡：這個指標內(nèi)涵本質(zhì)上是一個嚴肅悲傷的事情，大家可以留意在一些關(guān)于“死亡”的場合，都會著裝嚴肅內(nèi)斂，甚至幾乎統(tǒng)一黑色色系。所以，這樣的指標在色彩上選擇偏暗深色系是比較合理的；
治愈：治愈本身代表由壞轉(zhuǎn)向好的意義，那么用一種代表陽光、希望的色彩是恰到好處的，所以采用偏綠色的色彩；

4.2 地圖分布

地圖分布通常是以顏色深淺代表數(shù)據(jù)的“密集程度”，那么就要確定2個關(guān)鍵的地方，1個是色系，另外1個是合理的刻度比例。前者根據(jù)數(shù)據(jù)內(nèi)涵確定合適的色系進行表達，后者是做色系的層次區(qū)分。

丁香醫(yī)生：相對開放一些，采用深紅色系，直面表達此次傳播疫情的危險程度；
：3者中相對更為克制一些，采用和緩一點的黃棕色，同時刻度較多，所以會顯得深色區(qū)不多，這樣在展示哪些地區(qū)更嚴重一些會顯得沒那么突出；
騰訊新聞：偏淡紅色系，表達的危險信息要弱一些，處于3家平臺的中間，既不“激進”也不過于“保守”。

4.3 折線趨勢

對比色：折線圖通常最多展示4種數(shù)據(jù)，但大多數(shù)只會展示2-3種，極少放4種。而折線圖有2種以上的時候，就需要采用2種以上的獨立色系來展示，這樣的好處是比較好區(qū)分。但有些產(chǎn)品會采用同樣的色系下2種深淺顏色，在屏幕十分大的情況下是合適的，但是在手機端有限的空間情況下，還是建議使用2種不同色系。從上圖可以看出，除外，其余兩家基本是采用了明顯的區(qū)分。
數(shù)據(jù)節(jié)點：很多時候為了便于用戶知道每個橫軸刻度對應(yīng)的節(jié)點位置，都會標記一個“圓點”在上面，這樣好處是便于較快對應(yīng)上位置。但是，當橫軸的刻度過于密集的時候，這種展示是不適合的，因為過于密集顯得頁面不夠簡潔，且沒有重點。顯然這3家平臺都是有這樣的問題。而最好的方式，只需要在當前一天顯示節(jié)點及顯示具體數(shù)值，這樣會更清晰可觀，也便于輔助閱讀。

以上就是此次疫情數(shù)據(jù)下，在可視化應(yīng)用上的一些體驗總結(jié)，3家都遵循了一些基本原則，同時也有各自的一些風(fēng)格。而數(shù)據(jù)可視化的應(yīng)用需要兼顧不同的因素，達到最佳效果。

一個理想的可視化設(shè)計流程，需要經(jīng)歷“數(shù)據(jù)指標的范圍篩選、頁面的布局抉擇、可視化的視覺設(shè)計“等關(guān)鍵步驟。

五、總結(jié)

選擇數(shù)據(jù)，需確保數(shù)據(jù)的準確性、穩(wěn)定性和易讀性；
進行可視化設(shè)計前，需要了解主要用戶使用的設(shè)備類型，以及開發(fā)的主程序，切勿過于追求視覺效果，畢竟設(shè)備性能之間、APP和手機網(wǎng)頁之間，都是有較大的性能差別的；
數(shù)據(jù)的內(nèi)涵和屬性確定了可適用的展示方式，比如地理信息適用使用地圖，占比分布適宜使用餅狀圖等；
數(shù)據(jù)可視化的核心，是需要明確展示的目的和主題，同時需要分清主要和次要關(guān)鍵信息；
數(shù)據(jù)可視化的布局本質(zhì)上就是講好一個“故事”，所以是故事就要有先后順序、遞進關(guān)系；
每個元素組件，兼顧數(shù)據(jù)及數(shù)據(jù)之間背后的邏輯、關(guān)聯(lián)關(guān)系；
數(shù)據(jù)的羅列展示要整齊劃一，一般遵循從大到小、從外到里的原則。
視覺是數(shù)據(jù)可視化的一大利器，善用有利于合理化的展示，其中圖表的設(shè)計、色彩的搭配至關(guān)重要。

3家平臺地址：

丁香醫(yī)生：https://ncov.dxy.cn/ncovh5/view/pneumonia

：https://i.snssdk.com/ugc/hotboard_fe/hot_list/template/hot_list/forum_tab.html?activeWidget=1&city_code=440300&city_name=%E6%B7%B1%E5%9C%B3&tt_from=weixin&utm_source=weixin&utm_medium=toutiao_ios&utm_campaign=client_share&wxshare_count=1

騰訊新聞：https://news.qq.com/zt2020/page/feiyan.htm?devid=EB886059-83CA-4F1F-AB3A-B64FCD87D7F7&qimei=eb886059-83ca-4f1f-ab3a-b64fcd87d7f7

作者：A.D，數(shù)據(jù)產(chǎn)品一枚；公眾號：吾某

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

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

在線咨詢

上一篇：只用1個div，你能用CSS繪制：正3、4、5、6、7、8邊形嗎？
下一篇：大話后端開發(fā)的技巧大集合

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

如何在WordPress文章或頁面中加入Tab標簽頁

前言

checked 偽類實現(xiàn)純 CSS Tab 切換

target 偽類實現(xiàn)純 CSS Tab 切換

focus-within 來實現(xiàn) tab 切換功能

公告

一、前言

1.1 概念

1.2 動因

1.3 基本情況

二、范圍層

2.1 范圍確認

2.2 主次確認

三、框架層

3.1 布局

3.2 可視化方案

3.3 平臺分析

四、表現(xiàn)層

4.1 匯總數(shù)據(jù)

4.2 地圖分布

4.3 折線趨勢

五、總結(jié)

您的項目需求