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

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

誰集合了這些女巫帽子？

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

哇，這看起來才像真實的數據。

要做到這樣，你需要：

1. 在Google Sheets創建一些假的數據
2. 使用該數據在Illustrator創建一個區域折線圖
3. 將圖形的形狀設計成你在Sketch上所看到的樣子

1. 在Google Sheets創建一些假的數據

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

=RAND()*100

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

使用= RAND()* 100來創建你的隨機數

2. 使用該數據在Illustrator創建一個區域折線圖

現在你已經有了一個足夠的隨機數列表，我們打開Illustrator并創建一個畫板，設置成1200 x 600像素：

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

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

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

單擊右鍵，點擊“Type…”

跳轉到Category Axis頁面：

選擇“Category Axis”

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

Tick Marks -> Length: none

現在讓我們添加一些數據趨勢。使用direct selection tool：

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

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

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

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

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

3. 在Sketch設計圖形的形狀

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

哦，我們來設計吧

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

制作一個矩形

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

將矩形后移

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

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

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

添加你想要的填充和描邊

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

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

最小軸線

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

本文翻譯自：

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