產(chǎn)品經(jīng)理-Sketch進(jìn)階教程最詳細(xì)的Symbol使用說明書

Sketch進(jìn)階教程最詳細(xì)的Symbol使用說

明書Sketch是一款輕量的設(shè)計(jì)工具，特別適合有條件（Macbook）的交互設(shè)計(jì)師選用，提高自己的審美能力，裝配更有逼格的作品。自從Sketch3更新Symbol以來，Sketch已經(jīng)向最初工具看齊，還能配合Principle無縫達(dá)致交互效果。本文將詳細(xì)介紹Sketch用于原型設(shè)計(jì)的核心功能—一Symbol的正確打開方式。友情提示：適用于有一定堅(jiān)實(shí)基礎(chǔ)的Sketch用戶。網(wǎng)上關(guān)于Symbol的用法教程也有不少，但或多或少存在的一些問題，列舉如下：所以，想用借此文章整理一下，目標(biāo)是：讓大家熟練掌握Symbol用法，具體運(yùn)用到項(xiàng)目投資當(dāng)中去，提高交互設(shè)計(jì)效率。（1）Symbol是什么？Symbol譯作“符號(hào)”，它是一種特定的組，能被多個(gè)頁面重復(fù)引用，在Symbol中修改樣式，其他頁面也會(huì)同時(shí)被修改。如果熟悉Axure的同學(xué)應(yīng)該比較容易理解了，對(duì)，它的功能和Axure中“母版”的功能類似，但是它上如的應(yīng)用某種程度上為比Axure的母版更方便。（2）Symbol應(yīng)該怎么用？注意上面所說的Symbol特性：能被重復(fù)引用，能批量修改并生效到所有頁面。產(chǎn)品中部分元素經(jīng)常會(huì)重復(fù)出現(xiàn)在多個(gè)頁面部分中，例如菜單、搜索框、登錄頭像等，出我們可以提取出來將其創(chuàng)建為Symbol，并應(yīng)用到以下兩種常見場(chǎng)景當(dāng)中去。場(chǎng)景1：交互設(shè)計(jì)需要制作多個(gè)頁面，每個(gè)網(wǎng)址都也要用到相同的控件，例如相同的菜單。傳統(tǒng)處理方式：復(fù)制粘貼，效率低Symbol用法：用Symbol代替復(fù)制粘貼，先創(chuàng)建好Symbol,再在每個(gè)頁面復(fù)用Symbol。場(chǎng)景2：頁面某個(gè)控件樣式有變化，牽涉多個(gè)頁面的改動(dòng)，例如菜單底色轉(zhuǎn)折。傳統(tǒng)處理方式：每個(gè)網(wǎng)頁修改一遍，改到吐血。（真實(shí)項(xiàng)目經(jīng)歷：由于一個(gè)菜單變化，使用PS的視覺設(shè)計(jì)師把所有手上100多個(gè)頁面全部調(diào)整一遍）Symbol用法：在Symbol中進(jìn)行修改，所有頁面同步生效。想象一下，如果Axure沒有母版功能，效率值下降多少？場(chǎng)景3：提供一份最新的完整的視覺設(shè)計(jì)規(guī)范傳統(tǒng)處理方式：先制作頁面后，再從頁面中提取規(guī)范文句，形成規(guī)范文檔，如果頁面有了新的規(guī)范，則要過來更新到設(shè)計(jì)規(guī)范中去，最后的結(jié)果往往是更新不不斷更新及時(shí)。

Symbol用法：Symbol庫本身就是一份設(shè)計(jì)規(guī)范文檔，維護(hù)Symbol二維護(hù)規(guī)范文檔，還能同步更新所有頁面。以一個(gè)資料卡為例，具體介紹在Sketch怎么創(chuàng)建、維護(hù)、應(yīng)用Symbol，體驗(yàn)Symbol的強(qiáng)大功能。小雨資料卡夜雨小雨資料卡夜雨(1)創(chuàng)建一個(gè)Symbol我們首先以最小單位來創(chuàng)建一個(gè)Symbol,例如頭像，先在畫布上畫好頭像，然后右鍵點(diǎn)擊圖案，選擇正0@土05丫1^01,在自動(dòng)播放的框中輸入Symbol的名稱即可。需要注意的是：Symbol的名稱輸入有講究，盡量使用英文縮寫，如果你在符號(hào)名中加入了斜杠“/"，Sketch須要將它視為組的分隔標(biāo)志，分組能方便地復(fù)用Symbol(后面詳述)，且符號(hào)符號(hào)始終可按照字母順序排列，而不是創(chuàng)建時(shí)間，方便維護(hù)Symbol。為了方便講解，第一個(gè)Symbol的命名為“頭像/Q版頭像”，分在“頭像”組，其他Symbol的創(chuàng)建同理。創(chuàng)建完成后，得到下圖所示的基礎(chǔ)Symbol庫，其中各Symbol的命名規(guī)范如下：頭像0文字夜雨小雨交互設(shè)計(jì)師（2）復(fù)用一個(gè)Symbol如圖所示，把創(chuàng)建好的Symbol組合成一個(gè)資料卡，就完成了Symbol的復(fù)用，使用相同的方式，可以在多個(gè)頁面復(fù)用。

夜雨夜雨 交互設(shè)計(jì)師有讀者看到這里估計(jì)已經(jīng)忍不住了：這有個(gè)卵用，跟復(fù)制粘貼還不是一個(gè)鳥樣，別急，見證奇跡的時(shí)刻馬上到了。如果要將Q版資料卡海外版化成美女版資料卡，還用上面的方式組合一遍？如果只替換頭像/背景呢？這個(gè)時(shí)候，我們要用到但此所提及的Symbol分組了。夜雨夜雨 交互設(shè)計(jì)師右鍵選中頭像后，依次選中“ReplaceWith”一“頭像”一“美女頭像”即可，從下圖也可以看出，利用“/”規(guī)范命名后，Symbol自動(dòng)分好組了，更方便進(jìn)行復(fù)用替換操作。PEHLiyerPascfrHeDu由值第Lock3PEHLiyerPascfrHeDu由值第Lock3呷H血L^TtrSpfSWldFaroeStyle-已小羊亡型:Allribnlra岡期5VQg"Tr?nvAgrrrD?udiIrbm^mhcU5?idCrgiralSize(3)維護(hù)Symbol在頁面雙擊任意Symbol,或者點(diǎn)擊pages下方的Symbols,可以進(jìn)入Symbols頁面，在里面對(duì)Symbol進(jìn)行更改即可，所有更改會(huì)生效在復(fù)用的頁面用。

隨著Sketch3941兩次重大的版本更新，Symbol新增嵌套功能，變得更加強(qiáng)大了，還是用此類的資料卡例子，來看看怎么實(shí)現(xiàn)資料卡的整體替換，局部替換。(1)制作嵌套Symbol把制作好的資料卡需要進(jìn)行組合不好選取(GroupSlection)，里面包括多個(gè)Symbol，如圖所示。

“c2ri*cnc：iHx)ucRecisnglc用bjrdtdUMGroupSelectionungroioR&nanneCreateSymbolLockLayersHideLayers“c2ri*cnc：iHx)ucRecisnglc用bjrdtdUMGroupSelectionungroioR&nanneCreateSymbolLockLayersHideLayersTi■石nsfarniPickLaver ?ReofareWilli ?JTa0?:R'9latc」「■3勃U1口11川40<JIlli」lLilCWcopyPasteHereDuplicateViII11.1DeleteForwardBackvk'ardCopySty他Pa?teStyleVVIIt11f■■symbc?用米洋辨-氈雨比呂CopyCSSAt:ribute^CopySVGCodeAlignLeftAlignHori￡ontailyAlignRightAlign飛pAlignVerticallyAlignBottomDijtrrbuWHofiscntaliyDistributevert.callyD&tachfromSymbolSertoOriginalS7e組合完成后，針對(duì)資料卡Group,生成一個(gè)Symbol,命名為資料卡/Q版，資料卡美女版本同理。

資料卡㈤版CreatenewSymbol資料卡㈤版The^elcc'edlay電話willbereplacedbyasirgleayer.AnewSymbolwillbecreaiedhyoindocumtmLWhenevertulsSymbolIsedit&d,allitslayersw'llupdatetoreHecT口心chang&e.(2)復(fù)用嵌套Symbol嵌套Symbol有兩種復(fù)用方式，第一種同單個(gè)Symbol的方式，直接替換整塊資料卡即可。第二種方式才是嵌套Symbol復(fù)用的核心，如圖所示，選中一個(gè)嵌套Symbol后，軟件右側(cè)出現(xiàn)了Overrides,里面包括多個(gè)下拉選項(xiàng)，這些選項(xiàng)實(shí)際上是由某類Sy