萬盛學電腦網

您现在的位置: 萬盛學電腦網 >> 程式設計 >  >> 網頁製作 >> 互動設計

Sketch效率倍增:6個實用技巧讓設計流程飛起來

注意:文中部分需用到插件,建議先安裝Sketch Toolbox(優秀插件管理工具),並確保Sketch為最新版(目前3.2.2)。

一、自動等距複製元素

按住Alt拖拽可複製,但大量重複任務手動操作太耗時。典型需求:將元素複製多次並等距排列。Sketch提供便捷方式:先Alt+拖拽複製一次並參考動態間距值放置,再用Cmd+D重複複製,每次新元素與前一個間距保持首次手動設定值。按住Cmd連按D直到達到所需數量。

提示:若Cmd+D無法自動等距複製,請到偏好設置「Layers」下取消勾選「offset pasted & duplicated objects」。

二、圖層智能排序

設計類似Dropbox的文件列表,默認按上傳日期排序,需演示按字母排序時,手動拖拽圖層重排太痛苦。用Sketch Mate插件加速:

  1. 打開Sketch Toolbox搜尋「Sketch Mate」安裝
  2. 選中所有需排序的群組(每個列表項對應一個名為「File」的群組)
  3. 選單Plugin > Sketch Mate > Sort > Sort Layers
  4. 彈窗選「Text(A > Z)」,再選擇以哪個文本物件為標準排序
  5. 點擊OK,列表瞬間完成重排

也可嘗試其他排序方式。

三、圖層與Artboard批量重命名

良好圖層結構是優秀設計稿標誌,但重命名枯燥耗時。Renameit插件拯救你:

  1. Sketch Toolbox搜尋「Renameit」安裝
  2. 選中圖層或Artboard(至少兩個),按Ctrl+Cmd+R喚出對話框
  3. 輸入「前綴+參數」:%N數字(如「icon %N」→icon 1, icon 2...)、%W寬度(自動獲取實際寬度)、%H高度

四、動態按鈕:告別手動調整寬度

複製按鈕並設置不同標題,需根據標題長度調整寬度,重複性強且需精確。Dynamic Button插件專為此生,我個人最愛插件。

  1. Sketch Toolbox搜尋「Dynamic Button」安裝
  2. 新建文本物件輸入按鈕標題,選中按Cmd+J,文本與自動生成背景形狀打包成「Flex Button」群組,文本圖層自動重命名為「0:0:0:0」(四數字分別代表上右下左邊距)
  3. 按需求修改數值,如上下12、左右20,重命名為「12:20:12:20」,再按Cmd+J背景自動調整尺寸
  4. 後續修改標題或複製新按鈕修改文案,選中文本按Cmd+J背景自動適應新尺寸

五、Symbol嵌套變通技巧

Sketch尚未正式支持Symbol嵌套,但可用技巧實現(使用時小心):

  1. 選中Symbol A,右側檢查器設為「No Symbol」恢復為普通群組/物件
  2. 左側圖層列表將A移入Symbol B
  3. 保持A選中,右側檢查器重新設為原「Symbol A」

編輯帶彈出層介面時極有用:初始介面整體創建為父級Symbol,包含各控件子級Symbol,複製整個Artboard設計浮層樣式。初始介面元素變化時,含浮層Artboard自動更新,無需手動移開浮層重複勞動。

六、Artboard根據內容自動調整尺寸

Sketch的Artboard體系助全局總覽設計方案,區別於競品。需頻繁在Artboard增減內容時,若能自動調整尺寸多好?Sketch Mate再立功:確保已安裝。當內容超過Artboard尺寸無法看到更多條目時,按Ctrl+Shift+A,Artboard精確根據現有內容實際高度重新調整尺寸,就這麼簡單。

copyright © 萬盛學電腦網 all rights reserved