「教程乾貨」- 手把手10招製作美觀並可維護的數據圖表，第10條驚著了

大概需要 3 - 5 分鐘閱讀

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

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

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

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

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

除非你用樣式實現！瞧：

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

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

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

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

4.圖表元素與標籤成組

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

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

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

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

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

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

Sketch 39 加了Resizing屬性（譯者註：[教程乾貨] 我敢打賭你不知道Sketch 39的響應式新玩法 - 響應式系列二 - Sketch 中文教程 - 知乎專欄）可以支持響應式拖拽。

默認情況下，組內的每個元素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！——親生散點圖！

原文地址（需要梯子）：https://medium.com/ux-power-tools/10-tips-for-beautiful-maintainable-charts-in-sketch-gif-warning-60e74e24403a#.8swos0mrz

原作者（需要梯子）：Jon Moore

譯者：Sketch 素材網 ?? 關注微博，乾貨推送