原創聲明
本文為閱文體驗設計 YUX 成員出品，請尊重原創，轉載請聯繫閱文體驗設計微信公眾號 ( id: YUX_design ) 獲取授權，並註明作者、出處和連結。
前言
我與 Sketch 的結緣源於近四年前設計師 Meng To 發表了一篇比對 Sketch 和 Photoshop 的文章 [1] ，為他在網上預售他的電子書「Design+Code」造勢。當時就毫不猶豫的買下了 Sketch（當時只需要49美金喲）。相比 Photoshop 這樣臃腫的龐然大物，眾所周知的，Sketch 能令設計師充分專注於工具的使用，不需要被軟體本身的性能或功能上的掣肘所牽制，這款針對網際網路設計師使用需求而完善的產品，很大程度提升了我們的工作效率。
索引
Nested Symbol · 1分鐘閱讀
Group Resizing · 5分鐘閱讀
Data Design · 3分鐘閱讀
More Tips · 2分鐘閱讀
隨著 Sketch 產品體量日益增大，逐漸也出現了一些不為大家所熟知的功能和技巧，而這些功能和技巧是能夠幫助解決不少設計工作實際遇到的問題的。接下來且讓我已經迫不及待地想要和設計師朋友們分享這些能實實在在提升我們工作效率的功能和技巧。
Nested Symbol Overrides
沒記錯的話，上一次 Sketch 做出一些喪心病狂地提升效率的事情就是發布了 Symbol 功能，而在這次 Sketch 41版本中更新的「Nested Symbol」功能，很有可能讓你再次提升效率，這般呵護你理應感受的到。
眾所周知的，在項目中，小到單個 icon，大到控制項編組，我們都可以將它們定義為一個 Symbol 的，而若干個 Symbol 堆到一起，就組成了一個 Nested Symbol，新版 Sketch 中我們不僅能對 Nested Symbol 中的文本進行符合頁面場景的修改，而且還能重寫裡面的 Icon Symbol，最典型的實例就是我們在對 Tab Bar 進行繪製的時候。
事先在 Symbol Page 整理好所有的 Tab Icons，在實際設計中輕鬆切換圖標
以閱文作家助手項目為例，在幾大首頁的 Tab Bar 設計使用中，只需在事先花些時間把 Symbol 整理好，在具體應用頁面點選 Tab Bar 編組，右側 Inspector 就會出現「Overrides」設置項，切換 Tab 裡的 icon 簡直 So Easy， 時間成倍節省。這之後再回想起以前搭建出整套的 Tab Bar 的套路，都是淚水。看到我們在設計時的那份從容，就知道我們的99美金沒有白花，要是交給 Adobe，他會看我們一眼麼？
Group Resizing
在更早的 Sketch 39 中，Group Resizing (編組縮放) 這個功能便已在右側的 Inspector 裡亮相，從可設置項來看，主要分為 Stretch (拉伸)、Pin to Corner (固定邊距)、Resize Object (改變圖層尺寸) 和 Float in Place (保持邊距比) 等四個選項。這個功能在進行設計調試和適配不同屏幕時將成為我們的必備良方。
Stretch (拉伸)
選中一個編組後，在 Sketch 界面右側的 Inspector 面板可以看到 Resizing 設置項
Stretch 其實就是 Sketch 對圖層變形設置的默認策略，其實現原理就是當你改變其上層編組的尺寸時，它會按照相應的百分比變化拉伸自己，這樣的結果十有八九會導致變形，所以通常我們會按住「Shift」鍵來讓它們等比縮放。而它現在已經不能滿足我們「偷懶」的需求。
Pin to Corner (固定邊距)
P2C 固定邊距顧名思義就是圖層的尺寸會保持不變，而它到最近的邊的距離也不會隨著編組的變化而變化，當圖層處於編組中到兩邊的距離一致時（即居中），無論怎麼變化編組的尺寸，它都會保持居中。
設計師 Peter Nowell 在文章 [2] 中演示 Pin to Corner
所當我們需要把一張導航欄或 Tab Bar 從 iPhone 7 的尺寸適配到更小或更大的屏幕時，這個功能就派上了用場。
我們將導航欄編組中，除了背景圖層，其他所有的圖層都設置成「Pin to Corner」，這樣在調整整個導航欄寬度的時候，就不需要在事後再去一個個校正圖層的尺寸和位置了。
Resize Object (改變圖層尺寸)
當圖層被設置了 Resize Object 後，它將會隨著編組大小的變化而改變自身的尺寸，目的是保證圖層自己到編組各條邊的邊距不變。
按鈕的文字設置為 Pin to Corner，而整個按鈕在頁面編組中設置為 Resize Object
當我們想要將一個按鈕的開發規則設定為「固定到兩邊的距離」，就可以把按鈕的變形選項設置為「Resize Object」，這樣無論我縮小還是增大屏幕寬度，按鈕到左右兩邊的距離都是固定。
而當該圖層有三條邊都與編組邊緣相切時，它會改變邏輯，變成改變自身到剩下一條邊的距離而保證自己的尺寸不變。
圖中頂部的 Navigation Bar 和底部的 Tab Bar 整體都設置成了「Resize Object」，它們都有三條邊與編組相切，在適配不同屏幕大小，需要改變上下兩個編組的寬度，中間內容保持居中不變 (設置成 Float in Place，具體見下一設置項)，整個屏幕發成尺寸的變化時，它們會保持自己的高度不變而去改變其到剩下一條邊的距離。
Float in Place (保持邊距比)
如果我在調整編組尺寸的時候，既要保持圖層的大小不變，也要改變到邊緣的距離，這個時候， Float in Place 就能很好的解決這個問題了。如果你還能看到上一張 Gif，你可以看到其實頁面底部的 Tab Bar 上面的四個元素就是設置成了「Float in Place」。這個選項可以保證圖層大小不變，但是到兩邊的邊距按照固定的尺寸增減，所以我們也可以稱這個選項為「保持邊距比」。
舉一反三
在這個功能被大家所熟知之後，有機智的開發團隊 (Anima App) 就利用 Group Resizing 特性，開發出了一款叫「Auto Layout (自動布局) 」的插件[3]。只要設置好各個圖層的 Resizing 選項，就可以一鍵生成該頁面在不同機器屏幕尺寸下的設計稿。
在使用這個插件的過程中大家基本上可以再一次加深對 Group Resizing 的這些原理的理解。當我們熟練的了解了這些選項的用法，我們還能玩出更多的花樣來。
在設計聊天氣泡和多圖層按鈕的時侯，調整內容時 Group Resizing 的運用
在設計聊天界面和帶圖標按鈕的後期文案調整中，按照圖片下方的對應選項設置好，即可對對象進行任意修改。對這些選項熟悉之後，相信大家還能玩出更多的花樣來。
Data Design in Sketch
在作家助手2.0的改版中，統計部分用到了大量的圖表元素，原本，這些頁面的繪製將會是一場體力活。誰知道在這個關鍵的節點，德國低調的大神設計師 Ivo Mynttinen 在他的 Blog 發表了一篇關於數據設計的文章——《Designing Data with Sketch[4]》，讀完文章之後，不僅更加佩服 Ivo，也更難以掩飾自己對 Sketch 那份滿滿的要溢出的愛來。接下來，咱們就聊聊 Sketch 在我們設計圖表的時候，能有什麼表現吧。
Import from Numbers
Numbers 中的圖表可以直接右鍵「拷貝為 PDF」，粘貼到 Sketch 中來
一直沒想到 Numbers 和 Excel 裡面的圖表，可以輕鬆的移植到 Sketch 裡，而且還會保持圖層分組和矢量圖形（請原諒我的無知）。了解 Numbers 或者 Excel 操作的同學只需要在這些圖表軟體裡用表格達搭建一套簡單的數據並生成相應的圖形演示，再把這些圖形導出成 PDF，就可以將 PDF 拖拽進 Sketch 文件裡了。而 Numbers 更簡單，只需要右擊生成好的圖形選擇「拷貝為 PDF」，然後在 Sketch 裡粘貼 (command+v )，All Set！接下來就可以在這個基礎上再繼續精細化你的設計了，瞬間省去了大量基礎勞動時間。
Design Graph with Group Resizing
如果大家還沒忘記上面介紹的 Group Resizing 功能，接下來我們能看到它繼續在曲線圖設計裡發光發熱了。
Group Resizing 幫助提升在設計移動端圖表和 PC 端圖表時的效率
通過對這個從 Numbers 拷貝過來的圖形進行細微的調整和設置 (將趨勢圖上的節點設置為「Float in Place」，將 Y 軸上的數值設置成「Pin to Corner」，其他為默認設置) ，就能任性的縮放這個圖表了，無論在移動端抑或是 Web 端，都能做到「收放自如」。
Angular Gradients
在製作餅圖的時候，傳統的方式是通過多個形狀的切割，最終拼湊出想要的效果，這個方法不僅繁瑣，同時也非常不精確不優雅。
利用 Sketch 描邊設置裡面的角度漸變設置項，給餅圖添加多個顏色值，能夠方便快速的得到想要的效果。
Dashed Border
類儀錶盤的設計在國內的 APP 中也越來越常見，以往要實現這個效果，我們採用的方法依舊是對一個圓環進行切割，同樣要面臨成果並不精確的問題。
在 Sketch 裡，可以利用虛線描邊設置達到同樣的效果。首先畫出一個帶描邊的圓形，然後把圓形旋轉45°，再把它做垂直翻轉處理，最後在虛線描邊設置項裡，把間隙設置到儘可能的大，接下來只需要將虛線值調整到想要的效果即可，不僅精確而且快速方便。
More Tips
Collapse Artboards and Groups
在 Sketch 的菜單欄裡其實還隱藏著很多鮮為人知的使用功能。
Collapse Artboards and Groups 一鍵收起所有畫板和編組
當我們鋪完幾十上百個頁面之後，當我們想要整理時，發現左側的圖層列表早已混亂不堪，這時無論是出於要檢索圖層的目的或者是從整潔癖的角度出發，都會叫人抓狂的，做事優雅的我們是無法忍受這樣的局面的。所以當我發現了「Collapse Artboards and Groups」這個被隱藏在深處的功能 ( View - Layer List - CAG ) 之後，生命得到了解放。這個功能會把所有的編組和畫板都摺疊起來，給你呈現一個整潔優雅的圖層列表，頓時很開心？
但是這個功能沒有快捷鍵。
Custom Keyboard Shortcuts
所以我們要自定義快捷鍵，Mac OS 本身提供我們自定義設置快捷鍵的機會。
系統偏好設置 - 鍵盤 - 快捷鍵 - 應用快捷鍵 - 添加
打開系統偏好設置，在鍵盤選項中，有非常簡單的自定義應用快捷鍵的設置方法，只要確定你要設置的快捷鍵沒有衝突，你就可以在 Sketch 裡暢快的使用了。
Combining Shapes Issue
在畫圖標進行合併圖形的時候，說不準什麼時候會出現下圖中的場景，當時我就懵了，我只是想安安靜靜的畫一個小圖標，不要這樣的折磨我吼不吼啊？
最要命的是，不管我們怎麼去調整合併模式，或者乾脆重新畫，都還是這樣的結果（一定是我打開的方式不對）。
其實每個圖形的路徑都是有方向的，錨點都是有順序的，如果兩個圖形的順序不一樣，那指不定什麼時候就會出現一些魔幻現實主義的效果。
遇到這種問題的時候，我們不妨調轉圖形路徑的方向，在菜單欄選擇「Layer」-「Paths」-「Reverse Order」，通常都能解決這個問題。
寫在最後
其實 Sketch 並不完美，比如中文字體排版和導出 PNG 圖片顏色失真，這都是對我們影響很大的「漏洞」，為了彌補這些漏洞我們也許要花費一些額外的時間來達成我們想要的產出。但是 Sketch 可貴的是它真的是一個以網際網路思維（非貶義）導向產生出來的產品，上述那麼多的功能開發出來，不僅是創新，還是對我們網際網路設計師的人文關懷，這是在 Adobe 公司旗下產品中是看不到的（如果不是 Sketch 的壓力，實在看不出 Adobe 會有要開發「XD」這款產品的動機）。現在，我只希望 Sketch 越來越好，我也相信它會越來越好，每年99美金，充值信仰。
Show Notes
0. 題圖為 Sketch 42 Release Image by BohemianCoding
1. Sketch VS Photoshop by Meng To · http://blog.mengto.com/sketch-vs-photoshop/
2. Sketch 39 Resizing: Cheat Sheet by Peter Nowell · https://medium.com/sketch-app-sources/sketch-39-resizing-cheat-sheet-feec0450e7e2
3. Introducing Auto-Layout for Sketch by Anima App · https://medium.com/sketch-app-sources/introducing-auto-layout-for-sketch-24e7b5d068f9
4. Designing Data with Sketch by Ivo Mynttinen · http://ivomynttinen.com/blog/designing-data-with-sketch
本文作者：李益帆 (Mantou)
轉載請向閱文體驗設計微信公眾號 ( id: YUX_design ) 獲取授權，並註明作者、出處和連結。