你真的會用 Sketch?

ps. 不討論插件,插件太多了,只説 Sketch 本身的功能。也不是教程,沒有講具體怎麼用的,一個應用組件庫的思路。

Sketch 有兩個提升效率的功能:Style、Symbol。這兩個功能可以約等於 “為什麼要用 sketch” 的理由,出乎意料的是有些UI設計師在用 sketch 的時候不會用這兩個功能,僅僅把 sketch 當作一個 “比PS簡單易學” 的軟件來用。

開始設計頁面前要先確定主題色、文本樣式、線粗、投影樣式這類設計規範,根據交互將所有頁面中涉及的內容拆分為組件(輸入框、下拉列表等)這些大家應該都是知道的。

設計規範和組件除了作為輸出產物和規範對接其他崗位和作為設計組的統一標準,還可以應用到 Sketch 中,從技術的角度提升工作效率,把時間從一些重複機械性的操作中解放出來。

這裏的“設計規範”和“組件”對應的就是就是 Style 和 Symbol,不僅可在 Sketch 文檔中使用,還可以單獨保存為【Template】 ,將需要的 Symbol 變成公用的組件庫,這個模板同時連接到多個文檔中使用,相當於多個文檔共用一份 Symbol,只需要維護這個模板文檔即可同步更新所有的文檔(原來可是要把 Symbol 複製到每個文檔內,手動更新同步的)。

01 命名

由於”前面”不規範,給再強的功能也白搭,跑不起來,我打算從添加第一個元素起要注意的地方開始講了!這個都要被講爛了~

十分重要,Style、Symbol、Layout、Artboard 都要自己寫名稱,能不能快速找到目標就看命名是否規範了,不然找東西都要可多時間了,看不了、不能忍。

Sketch 的名稱可以用英文符號【/】分級,命名儘量是看到名稱就知道它長啥樣的,還要保證團隊成員知道你寫的啥。

舉個例子,投影樣式名稱第一級就可以用 “shadow”,投影還分為頂部導航欄、底部導航欄、卡片的投影,其中導航欄的投影顏色、大小、距離是一樣的,只是上下相反,那就可以這樣命名:

在實際應用中會根據【/】分級顯示。

Symbol、Layout、Artboard 等也是一樣要按層級名好名稱(凡事要寫名稱的就要規範)。Symbol的名稱不用説,在替換 Symbol 的時候命名不規範根本找不到,尤其是使用 Template 這種外置 Symbol 時;Layout 、Artboard 的名稱主要是輸出(導出圖片、推送到Zeplin)的時候會根據【 / 】分類或創建文檔夾,還有一個使用場景是在需要從多個畫板中選中某個類型的圖層時,從畫板中選反而不如從圖層中直接選方便,如過名稱不規範是沒法兒這樣玩的。

所以,名稱一定要規範!有些地方雖然不能當時看到有什麼好處,但是養成這個習慣是沒有壞處的,萬一後面發現個新插件需要規範命名那是打算重新回來改?

02 建好樣式表

把 UI 規範裏的顏色添加到色板,文本按照顏色、大小、行距字距、對齊方式等組合好添加到 Style (命名怎麼命別忘了),要用到的底色、分隔線樣式都添加好。

確保你後面添加的所有元素樣式都是用的樣式表中,別畫一個元素就加了個新樣式。為什麼?要是你想把所有頁面底色從 A 改成 B ,只需要把樣式中的顏色改了就行,所有用到這個底色的位置都會自動更新。

03 先準備基礎組件

為什麼是基礎組件呢?因為還有嵌套的組件。

基礎組件是指輸入框、按鈕、下拉列表等等內容少而單一的組件,基礎組件可以拿去組合成複雜的組件,複雜的組件還可以組合成非常複雜組件(無限嵌套),不過UI設計中不建議嵌那麼多級,跑起來慢、會把自己嵌懵、別人也看不懂,一般基礎組件再嵌一層接着就用到頁面裏了。

還有一種類型的基礎組件,是用來方便管理和統一相似組件的。卡片、列表常常會有很多差不多的表親,可能是同一個列表狀態不一樣,也可能是列表不同的人看到會顯示得不一樣,這個時候就把他們都有的元素拎出來變成一個基礎組件 Symbol A。

再把基礎組件 Symbol A 和其他的元素建成一個嵌套的 Symbol B、C、D… 現在如果要把他們的標題都放大一丟丟的時候,改 Symbol A 的標題的文本就可以了,他會自動應用到 Symbol B、C、D以及使用了他們的頁面(如果是改的 Template,還會應用到連接了這個 Template 的 文檔,很厲害吧!)

Symbol 中的每個元素在頁面應用時像都可以替換圖片、更改文本,嵌在裏面的 Symbol 跟子級 Symbol 中的元素也可以被更改。所以我們做好一個組件後,應用在頁面裏時可以將他們改成不同的內容模擬真實頁面。更改內容不改變其屬性。

組件中的圖層名稱按照數據類型命名,比如“圖片、標題、簡介” 這樣在頁面中更改內容的時候才知道哪個是哪個(一頓瞎找真的不能忍!)。然後按照內容梗概頻率排序,比如“移除”兩個字不會變就放最底下一層,左側 checkbox 可以改可以不改放倒數第二層,依次類推。

Tips

創建組件的時候,圖標我會畫完後導出、再把導出的圖片拖進 sketch,直接拖進來的圖片可以給更改顏色、也可以在頁面中替換圖標圖片;還有一種方法是將每個圖標(指可以編輯的圖標)都做出一個 Symbol ,也可以在頁面中替換圖標。

圖片會用矩形圖案填充,可以才有圓角,拖進去的圖片是沒有 Radius 屬性的,而且不能要改變圖片的寬高比。

04 組件的適配

不論現在需不需要做不同尺寸的設計稿,做組件的都要時候順手選上對的適配方式,組件的意義就是可以應用在不同的場景裏。

如果組件內容元素和樣式一樣,但尺寸不一樣之要設置一下元素的適配方式就可以啦,不需要分別做兩個組件;而組件中任何一個元素樣式不一樣了就不適合使用適配方式,因為根本就不叫適配了,就是兩個組件。

不設置 Resizing 時是元素和間距是按比例縮放(文本字號不會,文本框會)。大方框是設置四周哪邊要固定的(固定邊距),Fix 是設置是否需要固定元素本身的寬或高(不能改變大小),四周固定和元素寬高固定不能同時被選中。多個元素都選擇了四周固定的話,sketch會處理成固定邊距和間距,內容尺寸按原來所佔的比例縮放。

適配方式也可以嵌套,元素、組件、組都可以單獨設置適配方式,這個不一一例舉怎麼組合了,多嘗試。

Tips

文本的寬度需要設置為最大寬度,即組件寬度減去邊距,在組件的寬度有變化時才會按照預期的方式顯示。(右側文本的三個點不會自動處理,還是得手填)

05 組件的應用

建議將組件庫單獨導出為模板,做頁面的時候調用,這樣不同的文檔也能保持組件一致(又回憶起手動同步的痛苦…)。

導出就 File > Save as Template,選擇位置保存,模板的文檔長得跟普通的文檔一樣,取個好區分的名字。

添加和應用 File > Add as Library,勾選上你們的組件庫模板,以後替換 Symbol 的時候就能選組件庫裏的 Symbol 了。

06 同步和更新

當然是得去組件庫模板文檔裏更改,保存更改後,應用了組件庫組件的文檔右上角會提示 【Library Update Available】,點擊打開會告訴你哪些 Symbol 改了,原來和現在的樣子,要不要更新。

小結

這些都比較基礎的東西,也沒啥乾貨,但是希望都能注意到這些小東西,不要把時間浪費在“統一”上。

關鍵詞:Sketch

相關推薦:

Material Theme Editor 主題編輯器

在Sketch中創建設計系統 C

Google 推出了一款 Sketch 插件,幫你更好地設計 Material Design 風格應用

全新組件庫 WireframeKit for Sketch - Impart 上架

Google I/O 宣佈設計更新!你的 Android App 可能會變成這樣……

Material Design 2018,更新內容總結

Google I/O 大會之後,Material Design 發生了這些變化

我們拿到了InVision Studio 的內測資格,設計師們關心的都在這裏

想法結合工具,讓你的效率翻十倍

交互設計師文檔形式的轉變趨勢