會(huì)說話又好看的圖表，學(xué)會(huì)這條經(jīng)驗(yàn)，你也能做到！

【圖表插件】會(huì)說話又好看的圖表，學(xué)會(huì)這條經(jīng)驗(yàn)，你也能做到！

日常生活與工作之中，我們難免會(huì)碰到各種各樣的數(shù)據(jù)。比如說，工作上的一些數(shù)據(jù)匯報(bào)、銷售業(yè)績(jī)的成果展示啦，生活?yuàn)蕵分幸矔?huì)或多或少的碰到這些和數(shù)據(jù)有關(guān)的東西。數(shù)據(jù)，簡(jiǎn)單來說就是一系列數(shù)字、文字的組合。這些純文本，我們看起來不僅比較枯燥乏味，大腦對(duì)純文本的處理速度也是相對(duì)較慢。于是，圖表出現(xiàn)了。

圖表的出現(xiàn)極大地提高了數(shù)據(jù)的可讀性，因?yàn)?，相較于純文本而言，我們大腦處理圖形信息的速度要快上很多。那你會(huì)制作圖表么，還是說，做出來的圖表讓自己都不忍直視呢？又是不是特別羨慕別人制作出來的圖表又好看又仿佛會(huì)說話一樣呢？看了今天這篇經(jīng)驗(yàn)分享，你也一樣能夠輕松設(shè)計(jì)出來會(huì)說話又好看的圖表！

工具介紹篇：3分鐘輕松上手的圖表制作工具

人人秀H5頁(yè)面制作工具——圖表插件

產(chǎn)品功能介紹-圖表插件

圖表是數(shù)據(jù)的直觀展現(xiàn)形式，圖表功能似乎并不起眼，但實(shí)則是各種會(huì)議中必不可少的功能之一。

企業(yè)年會(huì)中的報(bào)表、新品發(fā)布時(shí)的數(shù)據(jù)、銷售總結(jié)中的成果，這些統(tǒng)統(tǒng)都需要圖表功能的支持。

服務(wù)優(yōu)勢(shì)：

1、多種圖表類型

人人秀圖表插件內(nèi)置多種圖表類型，可以繪制柱狀圖、條形圖、曲線圖、餅圖和面積圖五種類型的圖表，涵蓋絕大多數(shù)使用場(chǎng)景，無須擔(dān)心找不到合適的圖表類型。

2、多維度數(shù)據(jù)

在人人秀圖表中，可以制作多個(gè)維度的數(shù)據(jù)，使用堆疊、標(biāo)簽或者普通方式進(jìn)行排列，表現(xiàn)更直觀、功能更多樣。

H5頁(yè)面——圖表制作流程：

1、打開人人秀H5頁(yè)面制作工具官網(wǎng)

2、進(jìn)入模板商店——功能類目選擇“圖表”，選擇您喜歡的圖表模板，點(diǎn)擊并使用?；蛘哌M(jìn)入產(chǎn)品中心——H5活動(dòng)營(yíng)銷找到“圖表插件”，點(diǎn)擊進(jìn)入，然后立即制作。

3、在彈出頁(yè)面，點(diǎn)擊使用，便能進(jìn)入H5頁(yè)面-圖表插件的制作頁(yè)面之中。

4、在圖表制作編輯頁(yè)面的左側(cè)可以選擇圖表各部分頁(yè)面進(jìn)行添加各式內(nèi)容。

5、在圖表制作編輯頁(yè)面的右側(cè)還可以對(duì)圖表進(jìn)行背景、圖片、文字、互動(dòng)等個(gè)人性化編輯。

6、如果您覺得這些自己設(shè)計(jì)起來比較費(fèi)事，可以找一款自己滿意的圖表模板直接替換其中的內(nèi)容，又或者找人人秀客服提出您的需求喲。

7、在一系列個(gè)性化設(shè)置操作完畢之后，您便可以將你制作出來的H5頁(yè)面-圖表發(fā)送給您身邊的小伙伴展示自己的超一流的圖表制作功底！

圖表設(shè)計(jì)篇：如何讓你的圖表會(huì)說話？

折線圖，曲線圖，餅圖，環(huán)狀圖，條狀圖，雷達(dá)圖，地圖等可以說是我們目前最常見的圖表樣式了。具體到每種圖表適用于表現(xiàn)什么類型的數(shù)據(jù)我這里就不多說了，數(shù)學(xué)老師應(yīng)該都說過，今天主要來說圖表設(shè)計(jì)。

我們可以從以下四個(gè)維度來剖析圖表設(shè)計(jì)：可讀性，一致性，視覺層級(jí)和美觀性。

一、可讀性

圖表設(shè)計(jì)的初衷就是為了讓用戶浩如煙海的數(shù)據(jù)中解脫出來，圖表需要幫助用戶更好的”讀取”數(shù)據(jù)，所以在這里我將可讀性放在圖表設(shè)計(jì)的首要位置。

圖表的可讀性主要注意以下三點(diǎn)。配色，文字和群組。

1、配色

圖表的配色這里主要來說背景色，一般來說，圖表的背景色我們可以分為深色和淺色。淺色背景的圖表更有利于用戶閱讀，可以有效的提高數(shù)據(jù)的可讀性。

可能有人會(huì)問了，既然淺色背景更有利于閱讀，那么我們就可以直接下結(jié)論了“圖表背景一律使用淺色”，為什么還要考慮深色呢？

那是因?yàn)橛械慕缑鎯?nèi)容過少，為了使界面看起來不那么單調(diào)，我們會(huì)使用深色背景。因?yàn)榻缑鎯?nèi)容本身就少，用戶一眼就能看完，所以深色背景對(duì)可讀性影響不大。但是我們要記住，當(dāng)數(shù)據(jù)過多的時(shí)候，必須使用淺色背景。

2、文字

對(duì)于信息的讀取，圖表可以快速但是無法做到準(zhǔn)確，這就是圖表要輔以文字說明的意義所在。

文字的可讀性主要體現(xiàn)在字體(襯線字體和非襯線字體)，字號(hào)，配色和排版。以排版為例，用戶的閱讀習(xí)慣是從左往右，從上往下，也是我們常說的Z型閱讀模式。這種模式下，左對(duì)齊的文字排布就非常有利，用戶可以無意識(shí)的回到段落左端，開始新一行的閱讀。而居中和左對(duì)齊使得段落每一行左端的位置都不一樣，用戶每次都要有意識(shí)的尋找開始位置，閱讀起來會(huì)很累。

上面說到了用戶瀏覽習(xí)慣，接下來再給大家分享另一個(gè)容易被我們忽視用戶瀏覽習(xí)慣。我們?cè)谠O(shè)計(jì)餅狀圖的時(shí)候，份額最大的部分應(yīng)該放置在12點(diǎn)鐘方向，因?yàn)橛脩舳剂?xí)慣從12點(diǎn)鐘的位置開始瀏覽。其余的部分按從大到小依次排，順時(shí)針逆時(shí)針都可以。

3、群組

群組的設(shè)計(jì)理念跟卡片式設(shè)計(jì)相類似，都是對(duì)信息進(jìn)行分割讓用戶更容易消化。以轉(zhuǎn)賬功能為例，對(duì)于收款人信息，我們可以使用左邊的列表樣式逐條展示，其實(shí)這樣做問題也不大，而且還省事。但是這種展示方式屬于毫無主次的陳鋪出所有信息，用戶無法明確優(yōu)先級(jí)。那么我們可以對(duì)信息進(jìn)行分組整合，將收款人姓名，賬號(hào)，開戶行整合到一起，還通過使用icon來幫助用戶快速定位重點(diǎn)信息，提升閱讀速度。

二、一致性

一款產(chǎn)品中所出現(xiàn)的圖表肯定不止一種，為了消除不同類型圖表給用戶帶來的認(rèn)知負(fù)擔(dān)，我們可以通過給圖表添加相同的設(shè)計(jì)元素來建立圖表的一致性原則。這些相同的設(shè)計(jì)元素可以是背景色，排版，標(biāo)題樣式等。

三、視覺層級(jí)

不同的數(shù)據(jù)有不同的重要程度，我們可以通過配色，群組，字體，間距等手法來使圖表的視覺層次分開，有助于用戶對(duì)于數(shù)據(jù)的輕重緩急有一個(gè)直觀的判斷。比于淺色，深色背景更能吸引用戶的注意力。

四、美觀性

其實(shí)如果一個(gè)圖表可以滿足以上的三個(gè)條件已經(jīng)可以說是相當(dāng)不錯(cuò)了，但是我們要更進(jìn)一步，從美觀性的角度再對(duì)圖表進(jìn)行提升。好的圖表應(yīng)該是具有美感的，最好具備有趣，獨(dú)特等要素。這樣才可以吸引用戶的注意力，讓他們想看個(gè)究竟?？吹教貏e出彩的圖表樣式，用戶甚至?xí)シ窒?。虎撲做?/span>“數(shù)讀NBA”就是一個(gè)非常好的例子。

掌握了以上這條關(guān)于圖表制作與設(shè)計(jì)的經(jīng)驗(yàn)分享，相信您一定能夠信手拈來般輕松制作出會(huì)說話又好看的圖表?？靵硎褂?/span>人人秀H5頁(yè)面制作工具制作高端大氣上檔次的圖表試試您新學(xué)到的技術(shù)吧！

人人秀原創(chuàng)文章，如若轉(zhuǎn)載請(qǐng)注明出處：http://bydok.cn/content-tubiaozzgh