那些提高效率但不為人知的Sketch 冷知識

2021-02-08 美學博主

工作中發現,雖然僅使用Sketch 基礎功能也能很好的勝任設計工作,但是如果能掌握一些實用的小技巧則會讓你的工作更加輕鬆。所以從本期開始,會陸續寫一些關於 sketch 方面鮮為人知的小知識,可能會包括快捷操作,組件,庫,實用插件等等,希望這系列的文章能拋磚引玉,對大家有所啟發。

既然是冷知識,往往很難系統化的去梳理,可能會比較零散,所以大家看到感興趣的小技巧最好去動手試下,應該就能很快明白了。

每個人都有自己的使用習慣,套路,所以很難知道我寫的對你來說是冷還是熱。我只是把我自己從第一次使用 sketch 到現在的過程中,覺得是比較冷門但又很實用的小技巧分享出來。所以,學到了就點個讚,老司機們就請見諒吧。

一、在屬性欄中快捷修改對象屬性

平時大家在修改對象時,可以選擇對象並直接進行縮放,其結果往往容易出現偏差,比如小數像素,沒有對齊等等,直接在右側屬性欄通過數值來操作會方便很多。

1. 滑鼠、Shift、Option實現快速修改

主界面中的右側的屬性欄中可以單擊屬性值以快速遞增或遞減該值(注意要把滑鼠放在文字的上下方位內,出現左右箭頭才可以快速修改)。如果按住 Shift鍵,Sketch 將相應地將值遞增或遞減10倍,按住 Option鍵會將其增加/減少十分之一。

2. 屬性欄還能支持組合修改

支持簡單數學公式,支持樣式單位L(中心點左對齊)R(中心點居右)C(中心點居中)M(中心點居中)T(中心點置頂)B(中心點底部對齊),支持圓角快速自定義(格式是X;Y;N;M,順序是左上-右上-右下-左下),能幫助快速精確調整,是不是很高級?

△ 數字+功能組合操作

△ 簡單數學公式計算

△ 圓角快捷設置

二、圖層操作上的小技巧

在剛開始使用 sketch 時,經常會發生誤操作,比如移錯圖層。比如你一開始選擇到了某個圖層,移動的時候還是把圖層組給移動了,很頭疼。所以在多圖層堆疊時,有幾個快捷鍵技巧挺實用。

當圖層深埋在一堆文件夾中時,可以直接按住 command+滑鼠左鍵,可以快速選擇組內的圖層。

按住 Option,就會只選擇完全位於某個圖形區域內的圖層,避免誤選。(舉個例子,在一個有底部背景大圖上移動界面元素,但是又不想選中底部大圖,除了用鎖定圖層的方法解決這個問題,按 Option 也能很方便的解決)

△ 多圖層堆疊的情況

△ 多選且不想移動某些元素

同時按住 option+command 可以做到單獨移動圖層,滑鼠焦點可以不在被選圖層上,如果不按這2個快捷鍵組合,在元素區域外是沒法移動的,當在界面中有大量圖層時,也可以避免誤操作到其他圖層。(筆者強烈推薦,這個組合鍵經常用到,對於解決選擇移動問題非常有幫助)

如果有重疊圖層,尤其是上層把下層遮住時,要直接選擇它會比較麻煩,此時可以選擇最上層圖層右鍵選擇想要的圖層,結合前面提到的快捷鍵進行移動或者修改操作。

對齊圖層:Control-Command-V 垂直方向上的等分;Control-Command-H 水平方向上的等分,這個快捷鍵非常常用,比每次點擊右上角的對齊工具要方便很多。

調整圖層:對圖層放大縮小是一個經常需要用到的操作,但是如果某些圖層帶有圖層樣式,比如描邊,投影,圓角這些,在直接縮放時並不能同時縮放,比如長寬各為50px且描邊為10px的形狀改為長寬100px的形狀時,其描邊還是為10px。那怎麼解決這個問題呢?

其實 sketch 是有2種縮放形式,一種是直接縮放,不改變元素樣式只修改基本屬性大小;另一種是變換縮放,可以同時縮放基本屬性以及樣式屬性。操作方式是從菜單中選擇「 圖層」>「變換」>「縮放… 」(或按Command-K),這個對 symbol 也有效果。

三、圖層約束技巧

首先看看什麼是圖層約束,直接看圖吧,圖層約束能做到下面這種效果:

在做界面適配的時候是不是很方便,那具體如何做到呢?

1. 圖層縮放固定邊距

在元素屬性欄,可以找到約束設置,根據需要設置子元素與父元素之間的關係(注意事項:圖層約束必須是建立在圖層組中,如果沒有組的概念,則無法使用圖層約束;子父級關係是指參照關係,比如下圖中白色塊相對於底部的藍色塊,白色就是子級,藍色就是父級,而對 resizing 的設置其實就是設置子級)

△ 子父級關係

△ Apple官方組件關於圖層約束的設置

2. symbol內容自動適應

在輸入項裡有光標的情況下,能自動根據內容長短改變位置。

四、圖形操作技巧

旋轉是需要經常用到的操作,在 sketch 中也是有很多方式可以實現圖層旋轉,需要看情況來使用。

通過屬性欄的角度設置直接設置圓角值,在旋轉角度很明確的時候很方便。

通過工具欄上的旋轉選項進行旋轉,優點是選擇後可以在畫面上任何位置對對象進行旋轉。

直接通過快捷鍵實現旋轉,按住 command鍵並拖動對象其中一個控制柄即可旋轉,這個快捷操作,在需要多頻次調整旋轉時,會很實用。

另外,補充一點旋轉以外的小知識,在做變換的時候,comand鍵也很有用。它可以讓對象變換隻從一個方向上調整。

五、蒙版技巧

在 sketch 中的蒙版功能很強大,不光對圖層可以使用蒙版,對圖層組也可以使用,但在蒙版組內,新建任何圖層或者圖層組都會被自動蒙版,有時候反而會成為麻煩。

有2種辦法可以解除蒙版:

把圖層或組拖出蒙版組之外,但是這樣會破壞元素結構;直接選擇想要解除的圖層,右鍵忽略底層蒙版即可,這樣做的好處是,可以不會破壞對象組織結構。

在 sketch 中有2種形式的蒙版,一種是基於圖形,另一種是基於透明度來實現的,常用漸變來做圖片漸隱效果。這2個都很常用,就不過多贅述。

六、sketch文件壓縮

在源文件中使用很多高清圖後,往往會讓整個 sketch 文件變的很大,一是傳輸不方便,另一個也會導致文件卡頓,反應慢。此時可以使用圖層-圖片-最小尺寸來對文件進行快速壓縮。

七、批量替換顏色

在進行多頁面多畫板修改顏色時,在不是 symbol 的情況下,修改起來會很費時間。其實 sketch 內置了批量修改顏色功能,只是可能用的人不多。

具體操作為:編輯——查找並替換顏色(option+command+F),需要注意顏色透明度,根據實際需要判斷是否勾選。

△ 圖片來源:sketch官網

八、快捷切換視圖

設計過程中,需要經常切換不同視圖來查看設計內容,簡直超高頻的使用需求!所以對於這些快捷鍵必須要在這裡提一句:

Command +1 完整展示頁面裡的所有內容,適合全局展示,查看一致性。

Command +2 將選中的元素放大到合適屏幕的尺寸,這個視圖有一個妙用就是可以把複製的元素直接複製到當前元素的中間,這個特性非常實用,自己試過就知道了,肯定會有用到的地方。

Command +3 將選中的元素顯示在屏幕中央。

Command + 0 以實際像素模式預覽頁面,即在100%大小下看設計效果。

九、圖層對齊

圖層對齊也是經常要用到的操作。直接與對象對齊的話,Sketch 會將圖層對齊到所有選定對象的最外層。但要將圖層與特定對象對齊,怎麼操作呢?

比如想讓下圖中兩個元素以正方形為參照物進行居中,那應該先使用圖層列表中的鎖定按鈕或使用 Shift-Command-L 鎖定該圖層,然後再執行對齊操作即可。

十、設置sketch形狀默認值

剛開始使用 sketch 時,新建矩形,每次都會自帶描邊,然後再手動關閉描邊,很麻煩。這個默認值能改嗎?當然可以。

操作:首先建一個不帶描邊的矩形,然後選擇 layer-style-set style as default (這個功能以前是放在 Edit 裡的,更新後合併到了 style 中)。搞定,下次再新建形狀時就會以你剛設置的樣式作為默認值了。

另外再多說一句,文章中所提到的小技巧,一定要自己動手去試試啊,要不然看過了你也還是用不到,不信?那就試試看。

相關焦點

  • 為什麼淘寶總在生產冷知識?
    淘寶「盛產」冷知識,是因為越來越多人把逛淘寶當作一種生活方式。這些奇怪的現象背後,卻有著一個無法迴避的真相——以95後為代表的Z世代正在長大,他們越來越願意通過消費的方式展示自己的個性、志趣和審美了。「打不打折是次要的,畢竟那是成年人追求的東西。
  • 用了這9個最強大的Sketch插件,工作效率提高了一倍!
    它可以自動生成製作高保真原型圖時所需要的文本信息和圖片信息,顯著提升設計效率。No.2 Runner網址:http://sketchrunner.com/在Mac系統上,大家都喜歡用Spotlight來搜索/啟動相應的程序/文件,我們把這類工具叫做啟動器。
  • 我的世界:五個不為人知的冷知識 最後一個90%的玩家不知道
    遊戲發行至今大概有9年了,在遊戲裡有著不少的冷知識,有些就連老玩家也不知道,我們一起來看看吧!1. 巖漿對於玩家來說是致命的,在沒有抗火附魔或藥水時的情況下貿然接觸巖漿基本都會喪命,然而當玩家躺在床上時,巖漿並不能對玩家造成傷害。2. 毒馬鈴薯是在玩家收成馬鈴薯時有機率出現的一種農作物,玩家若是食用毒馬鈴薯便會中毒10秒左右,一般沒有玩家會吃。
  • 傾囊相授 Sketch 使用的小技巧
    如果把做界面比作削蘋果,那麼PS是一把斧頭,sketch則是水果刀,斧頭能做很多事情但是對於削蘋果這件事情來說,卻很麻煩,不如水果刀好用。而且 sketch 學習成本很低,基本一兩天就能上手,加上它非常開放,支持第三方插件,這就出現了很多各式各樣的插件,方便了設計師的使用,提高了設計師的工作效率。
  • 冷知識來襲,快來熱一熱!
    MC除了一些擺在明面上的東西之外,還有很多細節是隱藏在了遊戲內不為人知,一般我們將其稱為冷知識,而今天我們就聊一聊,關於MC的冷知識。我的世界第一個名稱我的世界這款遊戲有過很多個名字,它的正式名字叫做minecraft,這個是已經板上釘釘,敲定好的名字,而國內的翻譯卻是由很多種,比如說《當個創世神》《麥塊》《我的世界》等等。
  • 劍與遠徵冷知識,公會哥布林能打死,金幣箱子收益翻倍有技巧
    凡是遊戲都會有一些未在遊戲當中提及的規則或知識,我們稱之為隱性規則和遊戲冷知識。劍與遠徵也有一些不為人知的冷知識,有的冷知識有利於推關,有的冷知識有利於獲得資源,冷知識都玩家們靠著經驗一步步發掘出來的,非常有用。公會哥布林血量是有上限的,貧窮限制了我們的想像,打哥布林的時候每打完一個階段他的血量上限就會增加一倍多,越往後打,增加越多。
  • 利用Zeplin從設計圖自動生成CSS,提高前端樣式開發效率
    有了它,利用Zeplin從設計圖自動生成CSS,提高前端樣式開發效率,降低前端樣式入門門檻,像我一樣的開發小白,學習前端開發的門檻又降低了1釐米。Zeplin工作流可以從sketch非常方便導入到zeplin,安裝插件之後,你可以在plugins-zeplin插件找到對應的導入方法。無縫導入,對sketch用戶非常方便。
  • 關於對焦的那些冷知識
    知道了這個原理,大家在購買器材的時候也能比較深刻的理解為什麼廠家要宣稱自己的新機型是「XX個十字對焦點」,畢竟這樣的配置還是能提高垂直方向的追焦成功率的。相機的對焦性能難道不是在它出廠的時候就決定好了嗎?
  • 靜電的設計教室:APP設計利器Sketch教程(03)-插件助你一臂之力
    恩,你錯了,因為你忽略掉了一件東西—插件.插件是讓sketch保持強大的獨門絕技,很多軟體看起來不支持的功能,通過插件都可以實現,大大提高工作效率.下面,靜電來介紹下sketch常用的,受大家歡迎的插件。
  • 關於日本,那些有趣的冷知識
    日本對於大家來說是既熟悉又陌生的,對它的了解影響一般來自於一些影視作品,今天我為大家介紹一些大家所不知道的冷知識。
  • 王者被動冷知識你知道嗎?
    今日就讓我們來盤點一下那些在排位局冷門英雄的被動吧。王者冷知識小百科弈星弈星的被動是在自身受到傷害時,觸發之後,免疫所有傷害並且提升30%移速,持續時間1秒,而身邊會出現的兩個棋子能增加弈星的傷害。傷害提高5%,但這個被動傷害最多提高40%。蘇烈蘇烈的被動是在瀕臨死亡時被動會觸發恢復百分之70的最大生命值,同時蘇烈就會陷入虛弱狀態持續時間4.5秒,而身邊會出現烽火臺,隊友可以通過觸碰烽火臺給自己與蘇烈增加回血,在三盞烽火臺都被點亮時會立即結束虛弱。
  • 《我的世界》:冷知識之魷魚篇
    > 我的世界之冷知識 大神攻略在《我的世界》,由於地圖無限大,可以容納世間萬物,所以裡面會有很多冷知識不被玩家所知。在《魔噠我的世界之冷知識》系列節目中,主播魔噠將集中為大家解讀我的世界中的冷知識,那些新老玩家都可能不知道的秘密將被揭曉,尤其對新手來說,該系列節目值得學習牢記,以達到掃盲的目的,這樣在遊戲中就可以遊刃有餘了!話不多說,我們通過一組動圖看看本期節目都揭秘了魷魚的哪些冷知識。
  • 一篇文章教你看懂Photoshop和Sketch
    寫在前面:最近有做UI的朋友問我sketch和ps到底有什麼區別?是不是sketch可以代替PS了呢?這篇文章深度為大家講解這兩種軟體的區別和做UI設計的優劣!第二來說說設計界新晉新星:sketch相比於ps來說,sketch的功能確實真的不是很多,但是確實能夠滿足對於那些單純做UI的同學來說,設計app,web,出圖切圖是完全足夠的!關鍵點三呢,也是sketch對於其他軟體的一個優勢,豐富的插件庫,sketch的插件對於軟體本身來說就是如虎添翼的感覺,讓你的設計效率達到非一般的感覺!
  • 《饑荒》聯機版冷知識科普 冷知識一覽
    導 讀 《饑荒》聯機版中一些冷知識大家都知道嗎,今天小編就為大家分享《饑荒》聯機版冷知識科普,一起來看看吧。 饑荒聯機版冷知識科普 當你用螢光果依次點亮小夜燈,當月潮漸漸升起,為你的女神戴上蜂后的寶冠...
  • Sketch 69 軟體介紹及安裝
    它的安裝包僅僅只有20多M,相比PS等軟體,sketch在安裝方面要更加方便快捷。當然正式因為他的小巧玲瓏,也註定sketch的功能相對PS等軟體要弱一些,但是它目前具備的功能完全可以滿足目前大部分UI設計的工作。綜合來看對於UI設計而言,尤其對於設計APP/WEB,以及出圖切圖等工作而言,sketch是非常實用的工具之一 。
  • 《我的世界》你絕對不知道的四大冷知識!
    大家好,這裡是正在琢磨《我的世界》冷知識的方塊菌~
  • 實用網站 | 提高效率的五大功能性網站/插件
    這篇實用貼推薦的網站/插件能讓你高水平網上衝浪,充分利用網際網路資源,效率翻倍!「一個工具箱」 集結了 337 個好用的在線工具,其中包括:【WiFi二維碼生成器】將WiFi的名稱和密碼生成二維碼,朋友/家人/客人就可以通過手機掃描二維碼快速連接網絡。再也不用一遍遍重複複雜的WiFi密碼啦。
  • sketch插件下載連結大全
    昨天的微信連結:設計師推薦Sketch插件sketch官網:https://www.sketchapp.com/sketch中文網:http://www.sketchcn.com/8、Sketch Notebookhttp://marcosvid.al/sketch-notebook/
  • 好玩又實用的冷知識!夢魘與劫有著不為人知的秘密!
    也許這些冷知識有些大家都知道或是看過,但是還是有一些對大家有幫助的內容及小知識。
  • 好工具 效率過高閒跑了設計師的 Sketch+Zeplin 組合拳
    實例一:效率過高閒跑了設計師的 Sketch+Zeplin 組合拳Sketch 是光芒四射的互動設計新星,打出道起就豔壓一姐 Photoshop,迅速上位,但長期只支持 Mac 平臺,在普適性上大打折扣,畢竟很多開發人員是不用 Mac 的,更習慣接受PSD文檔作為設計稿,而 Sketch 偏偏就不能生成 PSD,所以用 Sketch 做第一設計工具的設計師就因為無法和