設計教程

sketch教程—原子化設計及Symbol解析

3996

一、Symbol是什么？

百度了一下翻譯，symbol翻譯是符號，標志，記號的意思；然后個人理解就是它是一個特殊的組，可以被多個頁面復用，在一個中修改，其他頁面全部自動跟隨改變（適用于批量修改頁面）如果熟悉Axure的同學應該比較容易理解了，它的功能和Axure中“母版”的功能類似，但是它的應用和內(nèi)在邏輯在某種程度上比Axure的母版更方便，同時這個symbol功能和曾經(jīng)很火的flash里的symbol功能也很相似，flash里symbol也被稱為元件，所以也有很多設計師稱呼sketch里symbol為元件，一個特殊的元件。

同時，剛開始認知symbol這個功能時，我發(fā)現(xiàn)也有點類似ps里的智能對象，ps智能對象復制一個，在該頁面中雙擊進入智能對象里，任意改動智能對象里的元素，該頁面中其他復制的智能對象都會跟隨改變，但是注意，ps里的智能對象只適用于該頁面，意思是如果新建另一個畫板，把這個智能對象拖進去，再點擊進入智能對象修改，則另一個畫板的智能對象不會改變，而sketch里的symbol則不一樣，首先你要明白，sketch是對標adobe旗下的矢量軟件AI的，所以sketch也是一款矢量軟件，這里它的symbol功能則就擁有ps智能對象部分功能，但是，symbol的變化是所有畫板中相同symbol都跟隨變化，是跨越畫板的，而ps只是在同一個畫板中適用，同時symbol還有很多ps里的智能對象不具備的優(yōu)點，這點一定搞清楚。

從上圖ps和sketch對比可以看出，ps智能對象在同一個畫板中改變一個，其他才會跟隨變化，而sketch改變一個symbol，其他畫板則是全部跟隨變化，同時，右則紅線標注中則是symbol完全不同意ps智能對象的地方，多個面板中的symbol文本內(nèi)容，可以通過右側直接修改，同時如果這個symbol有多個樣式，則有也可以通過右側有一個symbol下拉菜單選擇，這里就牽扯到后面要講的symbol套嵌symbol功能了。

二、Symbol的使用場景？

首先要了解上面所說的Symbol特性：能被重復引用，能批量修改并生效到所有頁面。產(chǎn)品中部分元素經(jīng)常會重復出現(xiàn)在多個頁面中，例如菜單、搜索框、登錄頭像等，我們可以提取出來將其創(chuàng)建為Symbol，并應用到以下常見場景當中去。

? ? ? ?1、產(chǎn)品設計中需要制作多個頁面，每個頁面都要用到相同的控件，例如相同的搜索按鈕。

解決方法：傳統(tǒng)方式是復制粘貼，而sketch里則是先創(chuàng)建好symbol，然后在每個頁面中復用symbol

? ? ? ?2、頁面某個控件樣式有變化，涉及多個頁面的改動，例如搜索按鈕底色變化。

解決方法：傳統(tǒng)是每個頁面修改一遍，改到吐血。

而Symbol的用法是直接在Symbol中進行修改，所有頁面同步生效。

? ? ? ?3、可以提供一份最新的完整的視覺設計規(guī)范

解決方法：傳統(tǒng)處理方式是先制作頁面后，再從頁面中提取規(guī)范內(nèi)容，形成規(guī)范文檔，如果頁面有了新的規(guī)范，則需要更新到設計規(guī)范中去，最后的結果往往是更新不及時。

而sketch里的Symbol庫本身就是一份設計規(guī)范文檔，維護Symbol=維護規(guī)范文檔，還能同步更新所有頁面。

三、Symbol的具體用法

重點來了，其實很多類似教程都有說到或者解釋到symbol是什么，以及用途，怎么用，但是很多又講述的很零散，所以這里我要把symbol和symbol的套嵌這些概念實物化，我們應該都學習過物理生物學科，可以把symbol理解為一個最小基礎單位——原子，而symbol套嵌而成的symbol則是原子組成的分子，套嵌的symbol組合在一起組成了構成生物的組織器官，這些組織器官組合就成為了一個完成的人（產(chǎn)品app）。

上圖直觀操作可以看出創(chuàng)建symbol之后，可以在頁面二、三里任意復用，而且進入symbol里修改symbol的文本或者樣式，其他頁面全部跟隨改變。

上圖以常見的app中的用戶列表分析，可以直觀的看出單個的控件（常見的小圖標，小標簽、頭像等等）轉化而成的symbol則可以歸類為整個產(chǎn)品的原子，而頭像和加v標簽這一組和職稱小火苗這一組則構成了一個個分子，底部顏色卡片也可以算是原子，也可以算是分子，（功能簡單的列表卡片等等會出現(xiàn)原子就是分子的現(xiàn)象）；最后一個一個分子組成組織（一個用戶列表卡片）

上圖演示：雙擊任意一個symbol控件進入symbol面板可以看到，（這里我為了清晰展示，對我認為的原子、分子、組織進行了標明和歸納整理，如果不歸納整理，點擊symbol面板會是所有元素都散亂的鋪在頁面中），原子都是一個個小的控件symbol，然后小控件組合成一列，如“交互設計師”這個控件和后面三個小火苗可以組合成一列，這樣打成一個組，創(chuàng)建symbol，就是一個分子了，這也就是symbol套嵌symbol而組成分子，分子再次創(chuàng)建symbol，把“加v的頭像”和“昵稱”、“交互設計”、“小火苗”這樣的分子（比較簡單的也可以是原子組成組織），擺列在背景顏色卡片上組成組織，這樣在以后的產(chǎn)品制作中就可以直接復用組織，在對symbol創(chuàng)建命名時，需要注意的是：Symbol的名稱輸入有講究，盡量使用英文名稱，如果你在符號名中加入了斜杠 “ / ”，Sketch 會將它視為組的分隔標志，分組能方便地復用Symbol（后面詳述），且符號始終會按照字母順序排列，而不是創(chuàng)建時間，方便維護Symbol。

為了方便講解，小的控件Symbol的命名為“用戶列表/原子組/昵稱欄/昵稱”，分為四個層級，在“用戶列表”這個組織里，下一層級是原子組、分子組、組織，最后細分到原子組/昵稱欄/昵稱、分子組/等級欄、組織組/列表一等等。

創(chuàng)建完成后，得到下圖所示的基礎Symbol庫，其中各Symbol的命名規(guī)范如下：

①用戶列表/原子組/昵稱欄/昵稱、用戶列表用戶列表/原子組//等級欄/職稱、用戶列表/原子組/等級欄/火苗/紅色、用戶列表/原子組/等級欄/火苗/灰色、用戶列表/原子組/等級欄/火苗/無、用戶列表/原子組/頭像/加v/黃色、用戶列表/原子組/頭像/加v/紅色、用戶列表/原子組/頭像/加v/藍色、

用戶列表/原子組/按鈕/關注、用戶列表/原子組/頭像/男士、用戶列表/頭像/男士、用戶列表/原子組/背景板/黃色、用戶列表/原子組/背景板/藍色

②用戶列表/分子組/等級欄、用戶列表/分子組/頭像

③用戶列表/組織組/列表一、用戶列表/組織組/列表二

? ? ? symbol的核心功能-復用-修改：

上圖簡單演示了，symbol的復用，以及symbol套嵌symbol 的方式，這一點也是sketch里symbol的核心功能。

嵌套Symbol有兩種復用方式，第一種同單個Symbol的方式，直接調(diào)用整個用戶列表卡片symbol即可，或者替換整個用戶列表卡片也行

第二種方式即是嵌套Symbol復用的核心，如下圖所示，選中一個嵌套Symbol后，軟件右側出現(xiàn)了Overrides，里面包括多個下拉選項，這些選項實際上是由單個Symbol（原子）組成，可以通過下拉選項切換為其他單個Symbol。

如果Symbol屬于文本類，那么可以在右側相應文本的地方替換為自己輸入的文字即可，可以滿足同一個菜單樣式，不同菜單名稱的情況。

四、Symbol的注意事項

同一組的Symbol尺寸應保持一致，如果尺寸不一致，替換后樣式會出現(xiàn)問題；

在畫步上畫任意形狀圖形（矩形或者其他），都可以直接替換為Symbol，并且沿用Symbol的樣式

關于symbol命名一定要注意區(qū)分好，盡量用英文命名，而且注意“/”的使用是劃分為一個小組。

五、關于Sketch里的Libraries

Libraries翻譯過來就是圖書館的意思，如果想要把做好的symbol控件在sketch里其他文檔里用，就是當你做另一產(chǎn)品是要用到symbol時，你必須把這個symbol控件先儲存為sketch文件到桌面上，然后把這個文件拖到sketch——preferences，進入Libraries里，點擊下面小齒輪按鈕，找到sketch里的Libraries儲存文件夾，把剛保存的symbol文件拖到這個Libraries儲存文件夾（你放在桌面上那天誤刪或者出錯，那么這個symbol文件就找不到了，在其他文檔也就沒法用了，這個Libraries儲存文件夾類似一個保險柜），然后從Libraries儲存文件夾里找到剛剛加入進入的symbol文件，把這個symbol文件再拖到sketch的Libraries面板列表中，這樣就可以在以后做其他產(chǎn)品時調(diào)用這個創(chuàng)建的symbol文件。

sketch里的preferences選項

點擊preferences選項會進入到該面板中

? ? ? 下圖完整展示具體操作：

六、Sketch里的樣式共享—APPEARANCE

APPEARANCE翻譯是“外觀、外貌、樣式”，在sketch里主要功能是文本，圖像的樣式共享，首先創(chuàng)建你需要的標題、正文文本樣式，選中之后，在右側APPEARANCE下拉菜單中選擇創(chuàng)建新的樣式，之后在其他頁面就可以隨時在右側APPEARANCE下拉菜單中找到之前創(chuàng)建的文本或者圖形樣式了，直接點擊拷貝復用，這個功能和sketch里的拷貝樣式差不多，拷貝樣式快捷鍵是Command+Option+C & Command+Option+V （拷貝樣式）；和ps里的復制圖層樣式類似。