會說話又好看的圖表，學會這條經(jīng)驗，你也能做到！

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

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

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

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

人人秀H5頁面制作工具——圖表插件

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

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

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

服務優(yōu)勢：

1、多種圖表類型

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

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

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

H5頁面——圖表制作流程：

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

2、進入模板商店——功能類目選擇“圖表”，選擇您喜歡的圖表模板，點擊并使用。或者進入產(chǎn)品中心——H5活動營銷找到“圖表插件”，點擊進入，然后立即制作。

3、在彈出頁面，點擊使用，便能進入H5頁面-圖表插件的制作頁面之中。

4、在圖表制作編輯頁面的左側可以選擇圖表各部分頁面進行添加各式內容。

5、在圖表制作編輯頁面的右側還可以對圖表進行背景、圖片、文字、互動等個人性化編輯。

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

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

圖表設計篇：如何讓你的圖表會說話？

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

我們可以從以下四個維度來剖析圖表設計：可讀性，一致性，視覺層級和美觀性。

一、可讀性

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

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

1、配色

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

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

那是因為有的界面內容過少，為了使界面看起來不那么單調，我們會使用深色背景。因為界面內容本身就少，用戶一眼就能看完，所以深色背景對可讀性影響不大。但是我們要記住，當數(shù)據(jù)過多的時候，必須使用淺色背景。

2、文字

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

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

上面說到了用戶瀏覽習慣，接下來再給大家分享另一個容易被我們忽視用戶瀏覽習慣。我們在設計餅狀圖的時候，份額最大的部分應該放置在12點鐘方向，因為用戶都習慣從12點鐘的位置開始瀏覽。其余的部分按從大到小依次排，順時針逆時針都可以。

3、群組

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

二、一致性

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

三、視覺層級

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

四、美觀性

其實如果一個圖表可以滿足以上的三個條件已經(jīng)可以說是相當不錯了，但是我們要更進一步，從美觀性的角度再對圖表進行提升。好的圖表應該是具有美感的，最好具備有趣，獨特等要素。這樣才可以吸引用戶的注意力，讓他們想看個究竟。看到特別出彩的圖表樣式，用戶甚至會去分享。虎撲做的“數(shù)讀NBA”就是一個非常好的例子。

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

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