「 Sketch超實用教程 」圖層上的優雅技巧

「 Sketch超實用教程 」圖層上的優雅技巧

(1) 快速選擇圖層

當多個元素被編組之後,想要快速選擇組內的元素,按住 Command鍵不放,滑鼠點選該元素,即可快速選中指定元素。

「 Sketch超實用教程 」圖層上的優雅技巧

(2)智慧選擇

當很多元素疊在一起的時候,只想選中其中的某個,如果直接框選,很容易選到不想選中的元素,此時按住option不放,拉取滑鼠框選元素,最終只有元素的範圍全部被框選中才會被選中。

「 Sketch超實用教程 」圖層上的優雅技巧

(3)快速選擇下層圖層

如果有重疊圖層,上層把下層遮住時,要直接選擇它會比較麻煩,此時可以選擇最上層圖層右鍵選擇想要的圖層。

「 Sketch超實用教程 」圖層上的優雅技巧

(4)放大/縮小圖層

Sketch有2種縮放形式,一種是直接縮放,不改變元素樣式只修改基本屬性大小,直接在檢查器裡修改尺寸即可,但這種修改對於元素的樣式是無法同步變化的(如描邊,投影,圓角等);另一種是變換縮放,可以同時縮放基本屬性以及樣式屬性。操作方式是從選單中選擇「 圖層」>「變換」>「縮放… 」(或按Command + K),變換縮放對Symbol元件也有效。

「 Sketch超實用教程 」圖層上的優雅技巧

(5)元素旋轉

有三個方法可以在Sketch裡旋轉元素,第一個是在檢查器裡輸入角度旋轉:

「 Sketch超實用教程 」圖層上的優雅技巧

第二個方法是在工具欄上點選旋轉選項進行旋轉,優點是選擇後可以在畫面上任何位置對物件進行旋轉。

「 Sketch超實用教程 」圖層上的優雅技巧

第三個方法是選中某元素後,按住Command鍵並拖動物件其中一個邊角控制柄即可旋轉。

「 Sketch超實用教程 」圖層上的優雅技巧

(5)Symbol元件

元件化介面中所使用的元素是Sketch中最能提升效率的方式,同一個介面出現的相同內容都可以考慮做成元件,方便後期直接呼叫。在Symbol中修改樣式,其他頁面也會同時被修改,跟Axure中的“母版”類似。下面舉例說明Symbol的使用:在網站中,頂部的導航欄是比較通用的部分,這部分可以考慮做成一個Symbol元件,全選需要製作成元件的元素,點選工具欄上的“建立元件”即可快速生成一個可複用元件。

「 Sketch超實用教程 」圖層上的優雅技巧

之後可以在左上角工具欄上,選擇直接置入元件:

「 Sketch超實用教程 」圖層上的優雅技巧

(6)圖層約束

在右側的元素檢查器,可以找到約束設定(Resizing),根據需要設定子元素與父元素之間的關係(注意:圖層約束必須是建立在編組的圖層中,如果沒有組的概念,則無法使用圖層約束),之後即可高效做原型適配。

「 Sketch超實用教程 」圖層上的優雅技巧

產品經理Glen,騰訊、迅雷、華為工作經歷,感興趣可以關注下公眾號Glen,我們可以一起學習進步。