網頁設計 ? 視覺設計 ? 學會這21個Sketch實用技巧,讓你設計省時省力

學會這21個Sketch實用技巧,讓你設計省時省力

發表于: 視覺設計. 評論
贊助商鏈接

Sketch之所以受 UI 設計師們歡迎,主要是它擁有非常多的實用功能,不僅方便,而且大大加快設計師繪制 UI 的速度,比如之前小編介紹的《學會組件UI設計,5分鐘快速修改100多個界面》就是最實用的技巧之一,而今天主要分享一些新人不會知道的 Sketch 技巧教程(其實很多人也不知道卻非常實用),共幾分鐘時間學習這些技巧,讓你在實戰中節省 N 小時。

1. 縮放大小

??用 Scale 工具縮放

理由:樣式屬性如邊框厚度、圓角大小、陰影大小等,會等比例的縮放

? 手動拖拽縮放

理由:樣式屬性保持不變,不會等比例的縮放

2. 縮放大小

??像素值均為整數

理由:輸出切圖時像素清晰

技巧:自動像素取整方法:Arrange → Round to Pixel

? 像素值出現小數點

理由:輸出切圖時像素模糊

3. 在路徑正中間添加錨點

??按住 Shift 鍵,精準添加

理由:精準、無需微調其坐標數值

技巧:在兩點之間添加新的錨點時按住 shift 鍵,便會得到兩點間的錨點

? 估算中間位置添加

理由:不精準,需要手動微調其坐標數值

4. 繪制環形進度條

??繪制描邊圓形,將“Gap”設置為直徑*π,調整“Dash”數值改變進度

理由:可靈活調整進度

? 繪制描邊圓形,用剪裁工具進行裁切

理由:不能靈活調整進度

5. 復制旋轉

??使用“旋轉副本”批量復制旋轉

理由:可批量設置復制數量、靈活調整縮放尺寸

技巧:繪制一個矢量圖形,Layer → Paths → Rotate Copies (圖層-路徑-旋轉副本),然后按自己需要選擇副本數量,就可以得到復制旋轉的效果了

? 手動多次復制圖形,調整其位置角度

理由:不能批量設置復制數量、靈活調整縮放尺寸

6. 文本寬度

??文本框長度設成 Fixed 模式(最大寬度)

理由:方便RD了解文本最長寬度是多少

技巧:建議在設計稿中展示超出長度截斷的情況

??文本框長度設成 Auto 模式

理由:RD不知道文本最長寬度是多少

7. 分割線條

??通過 Inner Shadows 屬性實現分割線

理由:調整分割線時,只影響單個容器,更靈活

技巧:設置內陰影的漸變為零,只需要一邊的方向為負數即可

??通過 Line 對象實現分割線

理由:調整分割線時,會同時影響到上下兩個模塊

8. 模塊間隔

??通過間距留白,實現模塊間隔

理由:通過調整單個模塊的位置,靈活調整間距

??通過填充色塊,實現模塊間隔

理由:調整間隔色塊時,會同時影響到上下兩個模塊

9. 文字環繞效果

??建立路徑,生成文字路徑環繞效果

理由:可靈活調整路徑及文字樣式

技巧:新建一段文體以及一段路徑,選中文本,Text → Text on Path,把文本移至路徑旁邊即可

??單獨調整每個文字的角度

理由:不能靈活調整路徑及文字樣式,過于費力

10. 圖層編組

??圖層進行合理的編組和命名

理由①:方便自己尋找特定模塊、圖層、歷史版本

理由②:方便團隊其他設計師的再次編輯和利用

??圖層隨意擺放,命名亂七八糟

理由①:不利于自己尋找特定模塊、圖層、歷史版本

理由②:不利于團隊其他設計師的再次編輯和利用

11. 輸出SVG矢量圖標

??合并成單層形狀,盡量簡化

技巧①:如果有兩個以上圖形,或者有布爾關系的圖形,請對圖形合并并且擴展

技巧②:將描邊轉化為閉合圖形

??圖層多、沒有合并形狀

理由:生成圖標時代碼中會生成多個path,導致圖層錯位

12. 輸出透明底圖標

??勾選 Export group contents only

理由:在選中切刀圖層的狀態下,勾選后只導出切刀圖層所在組以內元素,透明底

??不勾選

理由:不勾選,切圖會連同背景色一起輸出

13. 快速調整不透明度

??通過數字鍵,快速調整不透明度

理由:數值精準、效率高

技巧:選中元素,然后按數字鍵即可直接設置其不透明度,例如“1”代表10%,“5”代表50%,“9”代表90%,“75”代表75%

??鼠標拖拽,調整不透明度

理由:數值不精準、效率低

14. 快速設置圓角

??一次性設置,由分號隔開

理由:一次性設置,效率高

技巧:在右側面板的“半徑 (Radius)”中輸入一組四個數字,由分號隔開,分別代表左上角、右上角、右下角、左下角的半徑值,例如“20;10;5;0”

??依次選中每個點,調整圓角

理由:每個點單獨設置,效率低

15. 快速組內單選

??按 cmd 鍵可直接選中組內元素

理由:更快捷方便

技巧:無需到圖層列表中尋找,按住 cmd 鍵,同時用鼠標直接指向該元素,即可“穿透”分組,直接選中元素

??雙擊編組,再選中組內元素

理由:需啪啪啪雙擊多次

16. 快速吸取顏色

??按 conrtol c 快速吸取屏幕上的顏色

理由:更快捷方便

??點擊顏色面板 → 點擊吸管工具

理由:需點擊多次

17. 屬性欄的“加減乘除”運算

??直接在屬性欄輸入計算式

理由:更快捷方便

技巧:提供有“ ”,“-”,“*”,“/”的運算編輯,如333*2,按回車鍵即可變成數值666

??點打開計算器算

理由:需切換外部計算器工具,再復制黏貼數值回來,比較麻煩

18. 圖形默認屬性

??直自定義圖形默認屬性,一勞永逸

理由:設置適合自己的常用圖形默認屬性

技巧:新建一個自己常用的矩形樣式,然后選擇 Layer → Style → Set as Default Style,下次再新建形狀時就會以你剛設置的樣式作為默認值了

??每次新建時,手動調整圖形屬性

理由:新建形狀時,每次都會自帶描邊。但畫UI時并不需要到處都有灰邊。每次手動刪除描邊很麻煩

19. 快速復制樣式

??快捷鍵 Alt ? C、Alt ? V

理由:更快捷方便

??選中對象1右鍵復制樣式、對象2右鍵黏貼樣式

理由:需點擊多次,較麻煩

20. 快速折疊所有畫板

??View → Layer List → Collapse All Groups

理由:一次性快速收起所有畫板,方便快捷

??一個個手動點擊收起畫板

理由:需點擊多次,較麻煩

21. 智能縮放

??使用Resizing功能,響應式調整元素

理由:當改變編組尺寸時,其中包含的元素將不再被簡單粗暴的拉伸,以至形狀及布局結構被徹底破壞,而是會有規則的縮放、位移,或保持尺寸及位置恒定

這21個 Sketch 技巧在設計實戰中是經常會用到,也希望對新人有所幫助~ ?? ? ?? thanks for watching

可能有不對的地方或更好的方法~? 歡迎留言或私信一起討論。

作者:大秘密mimi
個人主頁:https://damimi.zcool.com.cn/

推薦:查看最受歡迎的 301 個設計網站 → http://hao.shejidaren.com
交流:結交更多有才華的設計師?請加入UI設計QQ群,與50000名設計師交流設計。
贊助商鏈接
贊助商鏈接
設計達人微信交流社區:shejidaren888
喜歡這篇文章嗎?歡迎分享到你的微博、QQ群,并關注我們的微博,謝謝支持。
版權:除非注明,本站文章均為原創文章,轉載請聯系我們授權,否則禁止轉載。