Pete Holmes的蝙蝠俠可不是本文的一部分

作為一個UI設(shè)計師，我需要用看起來很真實的圖表創(chuàng)建儀表板。我經(jīng)常無法為我的設(shè)計獲得真實數(shù)據(jù)，所以我往往傾向于Illustrator，使用鋼筆工具和組合區(qū)域折線圖。它通常看起來就像這么一堆：

誰集合了這些女巫帽子？

我想向你展示如何使用、和做出下面這樣的圖表：

哇，這看起來才像真實的數(shù)據(jù)。

要做到這樣，你需要：

1. 在Google Sheets創(chuàng)建一些假的數(shù)據(jù)
2. 使用該數(shù)據(jù)在Illustrator創(chuàng)建一個區(qū)域折線圖
3. 將圖形的形狀設(shè)計成你在Sketch上所看到的樣子

1. 在Google Sheets創(chuàng)建一些假的數(shù)據(jù)

制作隨機(jī)數(shù)，打開google drive的電子表格，將這個函數(shù)輸入空單元格中：

=RAND()*100

將會輸出像83.20這樣的數(shù)字。當(dāng)我們在設(shè)計郵件指標(biāo)可視化時，我的同事Kirill Popov幫忙給我演示了這個函數(shù)。若要制造更多隨機(jī)數(shù)，你可以點擊此單元格并拖動它，直到你有了足夠的隨機(jī)數(shù)字來作為你的圖表數(shù)據(jù)點：

使用= RAND()* 100來創(chuàng)建你的隨機(jī)數(shù)

2. 使用該數(shù)據(jù)在Illustrator創(chuàng)建一個區(qū)域折線圖

現(xiàn)在你已經(jīng)有了一個足夠的隨機(jī)數(shù)列表，我們打開Illustrator并創(chuàng)建一個畫板，設(shè)置成1200 x 600像素：

接下來，使用area graph tool這個：

將其拖成畫板大小的大約90%左右，你將獲得一個窗口來插入數(shù)據(jù)。從前面創(chuàng)建的表格中復(fù)制你的數(shù)據(jù)粘貼在illustrator中并單擊check mark看看會有什么結(jié)果。

讓我們刪除底部多余的刻度線將圖表清理一下。在圖表上單擊右鍵并從右鍵菜單中點擊Type…：

單擊右鍵，點擊“Type…”

跳轉(zhuǎn)到Category Axis頁面：

選擇“Category Axis”

設(shè)置類別軸刻度線的長度為None并點擊OK：

Tick Marks -> Length: none

現(xiàn)在讓我們添加一些數(shù)據(jù)趨勢。使用direct selection tool：

用它來選擇圖表，而非軸：

使用直接選取工具，單擊并從外面拖動圖表，上到包括完整山峰高度的圖表中部下到圖表的山谷深處。不要選擇圖表的底部。一旦你選中了合適的圖表范圍就可以使用縮放工具垂直壓縮圖像的部分。

我建議最后一步多做幾次，這樣你就可以顯示一些數(shù)據(jù)的趨勢。像這樣：

在我們把這個放到Sketch之前，讓我們把圖形的描邊刪除。選擇我們要處理的圖形并且刪除描邊：

使用direct selection tool，選擇圖形而不是軸線，并將其復(fù)制。我們要打開Sketch給圖形設(shè)計潤色。

3. 在Sketch設(shè)計圖形的形狀

打開Sketch，創(chuàng)建一個新文檔并插入一個畫板，設(shè)置成大約1220 x 530像素。從Illustrator將你的圖形粘貼過來你就可以看到這個圖：

哦，我們來設(shè)計吧

設(shè)計這個圖，要通過制作一個比此圖小大概5像素的矩形。這將在后面成為切斷了側(cè)面和底部描邊的遮罩：

制作一個矩形

我把上面的矩形加上稍微不透明填充，這樣你就可以清楚看見我們要剪除的邊和底部區(qū)域。移動矩形圖層到圖形背后：

將矩形后移

同時選擇圖像和矩形并單擊mask按鈕:

使用矩形來掩蓋圖像的邊緣

現(xiàn)在讓我們添加一些設(shè)計。選擇圖像（不是遮罩）并應(yīng)用2 px綠色描邊和40%不透明的綠色填充：

添加你想要的填充和描邊

你會注意到側(cè)面和底部的描邊被剪除了。這樣圖像看起來很現(xiàn)代。

最后，添加一些網(wǎng)格線。讓第一條線位于圖像的底部，約40 px。然后點擊command+D直到漂亮的水平線到達(dá)你的圖像頂部。集合所有的線，將它們置于圖像的背面并讓線條的顏色能夠讓人看到又并不顯眼。我原本設(shè)置我的第一條線是1 px描邊#CCCCCC顏色。當(dāng)我組合所有線條時，我將它的不透明度設(shè)置為20%：

最小軸線

你可以在基于你想顯示的數(shù)據(jù)/時間關(guān)系的軸線上放置你想要的任何數(shù)字。就醬，請快樂地制作圖表吧！

本文翻譯自：

推薦閱讀：超實用！四個方法幫你搞定數(shù)據(jù)可視化界面設(shè)計（附神器）