輕松10招，教你用Sketch繪制美觀可維護的數據圖

編者按：今天這篇好文，@Alpha_Lynnn?手把手教你用Skecth 生成數據圖的坐標軸、實現數據節點、制作波峰波谷，繪制散點圖等等，都是動圖演示，簡單易懂，趕緊來學。

不瞞你說，我可是設計過很多圖表的人了。甚至我都覺得該拿個數據科學榮譽博士學位~或者，至少在胳膊上紋一個對數散點圖什么的。

「圖表」是數據產品重要的一環，可以優雅地展示可視化信息。我對于「如何」以及「何時」使用它們，有著非常強烈的看法，不過，這塊還是改日再聊~

今天我想跟你們聊聊圖表設計，如何使得它們不僅好看，更重要的是，便于維護。雜亂的圖表絕對能閃瞎你的好眼，而且很多看起來都像是95版PPT做出來的，每次我都覺得特別Old School。

1. 用「復用樣式」生成坐標軸

如果你正在設計一款含有大量圖表的產品，客戶突然說“坐標軸貌似用虛線比實線更好一些~”，聽到這你恨不得大嘴巴抽自己，按時回家又沒戲了。

除非你用樣式實現！瞧：

2. 用「Symbol」實現數據節點

Symbol的妙用自然不必多說了，一換全換，我覺得我奶奶都能干這事兒。

3. 用通用的命名規則以快速找到你需要的元素

假設你的圖表里有很多個數據節點，你可以用Rename it（插件）批量將圖層名修改為“Data Points”。這樣你分分鐘就能搜到，然后快速全選它們。我都不好意思告訴你這能節省你多少時間。

4. 圖表元素與標簽成組

特別是在柱狀圖或條形圖的情況下，將圖表元素與標簽成組是更合理的做法，維護起來更直觀、方便。

5. 點與點成組，線與線成組，便于重新定位

這么做的好處自然不言而喻了。聽上去簡單，但我下了好多圖表素材，里面的線或點都直接散落在側欄中就像是公園里跑丟的小貓小狗~

6. 利用「平均分布」打理好你的數據節點

說真格的，做線性走勢圖一般都挺苦的。但當我發現可以將錨點平均分布時，我濕潤了。

7. 為每個元素設置好Resizing的規則

Sketch 39 加了Resizing屬性，默認情況下，組內的每個元素Resizing屬性為「Stretch」（拉伸）。但如果你想更改該圖表的尺寸，內容元素就會因此而變形。

在這介紹一些基本規則，但只有你親自試了，才能讓圖表怎么拉都不怕拉：

• 如果你在做走勢圖，那么靠近邊緣的兩個節點應設置為「Pin to corner」，這樣它們能固定住。而內部的所有節點應設置為「Float in place」，這樣它們會隨著整個圖表的拉伸而等比移動且不失真。
• 圖表內部區域（刨除首尾2個）的數據也需要設為「Float in place」，道理同上。
• 坐標軸可以設置為「Stretch」或「Resize object」都行，但我還是習慣于后者。

8. 使用cmd+k縮放，確保等比

如果你想改圖表尺寸，最好用cmd+k來實現。而不是選中圖表然后shift+拖拽手柄。這樣能使比例和大小更精確，包括文字也是。

9. 用「Mirrored」（對稱曲線）來制作波峰波谷

用「鋼筆」工具，按住shift，將鼠標沿水平方向劃動...還是看圖吧！

10. 使用「鉛筆」制作散點圖！

這一條絕對是我的得意技，一周前我才琢磨出這招~

當時我正在做一個散點圖，但一點一點的拖動復制實在太煩了。然而急中生智的我想出此招，簡直了~

首先你用「鉛筆」亂畫一氣，別斌著。

畫爽了之后，給這堆線條加個描邊，還得設置成超大間隙的虛線。

Boom！——親生散點圖！

都掌握了嗎？覺得自己有數據科學家的潛質嗎？去向老板請求加薪吧！萬一實現了呢~

「超實用的信息圖設計指南」

1. 誕生過程：《一幅熱門信息圖誕生的前世今生》
2. 進階版：《經驗分享：熱門有趣的信息圖是怎樣誕生的？》
3. 實戰方法：《經驗分享！超贊的靜態信息圖設計方法》

原文地址：medium

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量180萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com