核心功能、操作觀念、實用技巧、資源小補帖
早期制作界面能選擇的工具不多，普遍使用Photoshop或illustrator來制作介面，而隨著越來越多人投入UI設(shè)計領(lǐng)域，現(xiàn)在也開始出現(xiàn)許多很棒的工具，例如：Figma、Adobe XD，以及已經(jīng)在Kickstater集資成功的Subform都持續(xù)且快速的在成長當(dāng)中。
由上至下分別為Figma / Subform / Adob??e XD
而目前相對主流的UI設(shè)計軟體還是發(fā)展更為成熟的Sketch，不管是各種插件及協(xié)作平臺的支援度，或是原型工具的串接上都更為方便，唯一的缺點就是Mac Only ?
我相信已經(jīng)有不少人在自己的工作流程中使用Sketch 作為主力工具，我自己也非常愛用，幾乎已經(jīng)把illustrator 和Photoshop 丟到一邊了??。
Sketch是一款學(xué)習(xí)曲線較低的軟體，非常輕量、上手快速，但我最近發(fā)現(xiàn)有許多初學(xué)者在學(xué)習(xí)或使用Sketch時并沒有活用里頭的功能，所以還無法完全解開Sketch的封印，只是當(dāng)作一般的繪圖工具來使用，這樣其實就會有點可惜，今天我們就來好好聊一聊：如何透過Sketch來提高自己的工作效率。
本篇分為上下兩篇，下篇在這里
本篇適合服用對象：初學(xué)者
高手大大們歡迎留言交流一下自己的小訣竅吧！
Sketch將給各位帶來滿滿的?大~平~臺
不要看Sketch 的介面看起來簡單清爽，其實里面藏了非常多的功能，但有幾個重點是我覺得大家可以善加運用，以便發(fā)揮的Sketch 的最大價值：
1.標志(Symbol)
Symbol可說是Sketch的重點功能之一，它可以有效幫助我們?nèi)ス芾鞺I元件以及做批次同步處理，尤其在在Sketch更新了41版本之后，新增了巢狀標志(Nested-Symbol)的功能，這可以讓我們更快速的更改元件的狀態(tài)、替換Symbol的內(nèi)容物，省去相當(dāng)多頁面切換的時間。
什么地方適合使用Symbol呢?
大致上來說，我認為只要會「重復(fù)使用兩次」以上的元件，就應(yīng)該要被制作成Symbol，原因很簡單：同樣的工作能一次搞定就不要做兩次，而且Symbol配合Resizing的功能(后面會提到)也可以運用在多種版面編排上，在這個原則之下，版面上建議是以模組(Moduler)的思維來規(guī)劃，而不是散落各處有著各種樣式的元件。
我的版面幾乎都是由各種Symbol 所組成，所以基本上如果你有好好管理元件，你的圖層結(jié)構(gòu)大概會像這樣：
是不是干凈且容易閱讀呢？(強迫癥發(fā)作)
語意化的命名原則
那Symbol到底要如何管理才方便呢？尤其是命名上該如何操作呢？我的原則是「語意化命名」，也就是說每個字都是要有意義且容易看懂的，盡量不要出現(xiàn)123或是abc這類無法一眼看出功能的名字，加上Sketch在命名上如果有用一個斜線(/)分隔(Ex:btn/primary/hover)，它會自動幫你創(chuàng)建子層資料夾，所以這樣我們就可以很方便的將我們的Symbol做分類啰！
而我的命名方式大概是像這樣子：
元件類型(Component-Type)/性質(zhì)(property)/狀態(tài)(State)
不過這只是個大方向，你也可以分得更細，甚至是顏色或大小來分都可以，重點是方便好找，命名越精準其實對后續(xù)的程式開發(fā)也會有所幫助。
Note:最初始的狀態(tài)應(yīng)該是什么效果都沒有，通常我會使用Default來做命名
巢狀標志(Nested-Symbol)
正如字面上來看，「巢狀」這兩個字表示它是一層一層往內(nèi)的結(jié)構(gòu)(像洋蔥一樣)，以往我們在編輯Symbol的時候，必須進入Symbol里面去編輯，如果遇到Symbol里面又有Symbol，就要進進出出圖層好多次，有時候都差點要迷路了，而現(xiàn)在我們只需要把Symbol里面的結(jié)構(gòu)建立好，接著跳到最外層使用Overrides就能輕松替換里面的元件，真是有夠方便！
巢狀Symbol 目前也常常被應(yīng)用在以下幾個地方：
替換Tab-bar 里頭icon 的選取/未選取狀態(tài)
表單欄位(Form)文字內(nèi)容的調(diào)整、各種點擊與事件狀態(tài)
列表(Cells)與選單(Menu)的內(nèi)容物替換等等
2.智能縮放(Resizing)
Resizing是在Sketch39版本釋出的功能之一(只有在群組或是Symbol的狀態(tài)可以使用)，它提供四種不同的縮放模式，分別是Stretch(伸展)、Pin to Corner(固定角落)、Resize Object(元件縮放)、Float in place(浮動)，這使得每個元件的彈性變得更大，元件布局調(diào)整更加的快速，簡單來說，就是群組在縮放時能讓組內(nèi)的物件乖乖定位在它該定位的位置不會亂跑。
我們簡單的來看一下Resizing 設(shè)定的特色：
那我們就來看看這些屬性適合用在哪些地方吧！
Stretch (預(yù)設(shè))
最傳統(tǒng)的縮放方式，也是預(yù)設(shè)的縮放方式，群組縮放時內(nèi)容物會跟著變形，元件定位也會跑掉，一般不太建議使用這個設(shè)定。
Pin to Corner(快速鍵: ^+2)
這算是相當(dāng)常用的一個設(shè)定，元件大小在縮放的過程不會改變，而位置則會保持這個元件距離該群組的邊距(以越靠近的那邊為準)，也就是緊緊黏在角落啰，值得注意的是，如果這個物體距離兩邊是相等的話，縮放的過程則會置中。
適合用在表單、文字區(qū)塊、按鈕等各種等等需要貼齊邊緣的地方
Resize Object(快速鍵: ^+3)
這個設(shè)定當(dāng)群組縮放時，該物件與周邊物體的距離不會改變，而本體的寬度與高度則會隨之縮放，不過有個例外，當(dāng)組內(nèi)物件的三個邊都貼齊群組的時候，縮放時高度將不會改變。
適合用在置中的按鈕與文字區(qū)塊
Float in place(快速鍵: ^+4)
這個設(shè)定的話在縮放時群組內(nèi)元件本身大小不會縮放，元件的位置間距會做等比例縮放。
適合用在底部導(dǎo)航(Tabbar)，或是多欄位的控件(Segment Control)、響應(yīng)式表單(Table)等等
3.使用Symbol制作不同狀態(tài)的元件
好的，說了那么多嘴角全泡沫，既然Symbol 那么好用，那我們馬上用它來示范一個簡單的范例，假設(shè)我們今天要做一個待辦清單或記帳之類的東西，我們可以想一下大概會類似像這樣：
我們可以看到有一些內(nèi)部內(nèi)容應(yīng)該是要可被替換的(例如選取框、選取狀態(tài)時的背景、hover 時的背景)，所以這些可替換的元件都要做成Symbol，接著把這些最基本元件的組合起來，再制作成一個Symbol，而Sketch 會自動偵測相同尺寸的Symbol 作為替換元件：
所以我們看利用右邊面板的Overrides 區(qū)域就可以做文字的更改和Symbol 的替換，如果不想顯示文字的話，只要再輸入欄中按下空白鍵文字就不會顯示啰！
所以我們只需要一個Symbol 就能做出不同的狀態(tài)了，是不是很方便呢？
Note:我習(xí)慣把需要被更改的文字圖層命名與排序，因為這會直接影響到Overrides的順序和可辨性
Tips及一些小觀點
善用巢狀Symbol，有時候我們會一時迷失，為了同一種類型的元件做好幾個Symbol，認真思考一下，其實只需要一個大Symbol搭配巢狀結(jié)構(gòu)去替換里面的子Symbol就可以了。
Symbol里面通常不需要再另外有群組(Group)，一方面是能夠保持圖層結(jié)構(gòu)的干凈與易辨性，另一方面Symbol本身就是一個群組的概念，不過有些小例外，像是為了讓幾個距離較遠的物件一起使用Pin To Corner做縮放，這時才有群組的必要。
Symbol里面的文字寬度可以設(shè)定為固定寬度(Fixed)，然后在Resizing設(shè)定為Resize Object，這樣你的文字一來在縮放的過程中會隨著寬度縮放，二來如果有多個文字排列可以保持文字間的留白(Padding)距離。
Symbol時常需要更改的文字，盡量放在圖層(Layer)的最上層，這樣在畫板最外層按下Enter(進入Symbol)之后，再按一次Enter就可以立馬編輯文字了。
如果已經(jīng)確定不會變動的圖層可以把它鎖定(?+Shift+L)，這樣該物件就不會顯示在Overrides上，可以減少視覺干擾(感謝Will Huang補充)
圖層的順序很重要，當(dāng)這個Symbol變得很肥大之后(Symbol里面有Symbol的里面又有Symbol??)，在最外層要編輯的時候就會跑出一長串Overrides的選項，眼睛可能會花掉，所以這邊我的習(xí)慣是：把可替換的Symbol名稱取名為小寫字母，可替換的文字圖層名稱用大寫字母，以方便識別。
這個Part打了好多Symbol，如果我可以把Symbol這個單字做成Symbol就好了?
4.共享樣式(Share Style)
元件樣式
我們可以透過右方檢查器(inspector)來設(shè)定，這邊紀錄下所有關(guān)于這個元件的「樣式」，包含顏色、陰影、透明度、混合模式等等，當(dāng)我們今天使用了某個我們設(shè)定的樣式，之后若要調(diào)整其他套用相同樣式的元件，只要把要修改的部分調(diào)整好，樣式表右方就會出現(xiàn)一個同步(sync)的符號，按下去，其他元件也會一起同步做修改。
這邊要注意一下，只有樣式會被紀錄，所以元件的大小、圓角等設(shè)定都是需要分別調(diào)整的，所以我的習(xí)慣是把樣式設(shè)定好，就建立成Symbol，這樣以后只要進入Symbol做調(diào)整就OK啰！
一般來說，不管是做什么產(chǎn)品，都不太建議太多花花綠綠的顏色，挑一兩種主色，加上輔色與強調(diào)色等等，除了可以有更鮮明的產(chǎn)品形象，管理起來也會容易許多。(當(dāng)然如果你本來就是要做很Fancy的網(wǎng)站之類的就不在此限XD)
當(dāng)然了，最好建立一個容易看懂的命名規(guī)則，不過每個人的習(xí)慣不一樣，我大概會分這幾種：
Primary 主色/ Secondary 次要色/ Accent 強調(diào)色/ Support 輔助色
或者我們也可以參考一下Google 的Material Design 的顏色等級來命名：
顏色類型- 顏色等級- 色號- (輔助說明)
例如：Primary 500 #FF5722 Solid或者是Black 800 Outline
不過這都看個人習(xí)慣和團隊怎么溝通一致的方式，也許不需要這么復(fù)雜，只要方便看得懂就行了～
文字樣式(Text Style)
文字樣式的部分則是要將我們整個專案需要用到的文字先建立一套規(guī)范，從大標題(H1-H6)、小標題(Title)、內(nèi)文(Body)、備注(Caption)等等，每種文字都要另外設(shè)定不同的層級(預(yù)設(shè)、次等、無法選取、主色)，以便應(yīng)用在不同的地方呈現(xiàn)，我的習(xí)慣是透過調(diào)整透明度的方式來設(shè)定，因為這樣不管在什么背景色上看起來都會比較自然。
整理好大概會像這個樣子：
另外需要注意一下文字的行高(Line-height)，如果沒有特別設(shè)定，也就是在Default的狀態(tài)下， Sketch的預(yù)設(shè)值會是1.2倍的行高(會舍去小數(shù)點)，我建議是習(xí)慣自己手動去輸入，這樣除了可以比較精準的控制每個文字段落，也可以避免掉一些不必要的麻煩。
5.快速鍵(ShortCut)
我用滑鼠點習(xí)慣了，為什么要使用快速鍵呢？
理由很很簡單，滑鼠游標是一個朝單點指向的動作，盡管你的視力有2.0，但在一個介面中要快速尋找到你的目標物還是需要一點點的時間，而用鍵盤快速鍵的話連指都不用指，直接命中紅心！
所以每個軟體都有快速鍵，目的不外乎增加使用效率，但許多人剛開始接觸一個軟體時，對于快速鍵都有一點逃避的心理，覺得背那些代號相當(dāng)?shù)耐纯?，或是不愿意去調(diào)整自己的使用習(xí)慣。不過我認為，快速鍵用習(xí)慣了就跟喝水一樣簡單，而且可以有效地加速自己的工作效率。如果身邊有工程師朋友的話，可以去看一下他們使用鍵盤寫Code的方式，就會知道行云流水是什么感覺了XD。
能用鍵盤搞定就不要用滑鼠，能一次解決的事情就不要做兩次。
比較基本的快捷鍵我就暫時不介紹，基本上畫面左上角Insert里面的工具都是滿常用的，這個網(wǎng)站也提供了大部分的快速鍵列表，大家可以慢慢的去熟悉這些快速鍵，這邊主要提一下我經(jīng)常使用的快速鍵：
我常用的快速鍵
進出/切換頁面
畫板(Artboard)間切換Fn+左右方向鍵
頁面(Pages)間切換Fn+上下方向鍵
選取畫板選取畫板中任一元件＋按下Esc
選取全部畫板?+Shift+A
Sketch不同檔案(Tab)間切換?+Tab
顯示所有畫板?+1
顯示實際尺寸?+0
放大至選取對象位置?+2
進入Symbol模式選取Symbol+Enter
跳出Symbol模式?+ESC
簡報模式(展示頁面時按一下滿帥的)?+.
滿版視窗(Full Screen)?+?+F
選取/調(diào)整元件
編輯文字按下文字后按Enter
建立遮罩(Mask)?+?+M
原地復(fù)制圖層?+D
旋轉(zhuǎn)物件?+Shift+R
縮放物件?+K
復(fù)制圖層樣式?+option+C
貼上圖層樣式?+option+V
顏色滴管工具?+C
關(guān)于圖層
重新命名圖層?+R
往上/下移動圖層?+option+上下方向鍵
將圖層移至最上或最下?+option+?上下方向鍵
向下切換圖層Tab
向上切換圖層Shift+Tab
群組圖層?+G
解散群組?+Shift+G
展開圖層中所有子圖層按住option+滑鼠點擊圖層?符號
當(dāng)然你也可以自訂快速鍵
我們可以透過電腦的系統(tǒng)偏好設(shè)定→鍵盤→快速鍵→App快速鍵→新增Sketch快速鍵來做新增，我也提供的自訂快速鍵給大家參考：
注意：名稱要和Sketch選單中的名稱一樣才能設(shè)定成功
6.Sketch小撇步
盡量減少「滑鼠點兩下」的情境，例如編輯文字：選取文字后后直接按Enter、進入Symbol也是按下Enter直接進入。
選取物件之后按鍵盤上的數(shù)字鍵可以調(diào)整透明度(1=10%,0=100%)，快速按下兩個數(shù)字(ex:15=15%)可以更精準的指定到該透明度。
按住?可以直接選取群組內(nèi)的元件。
選取物件后按Command+方向鍵，可以調(diào)整寬度與高度，加上Shift可以一次以10為單位做調(diào)整。
若使用右上角檢查器調(diào)整元件的寬度與高度，按住Option可以以0.1為單位微調(diào)。
按住Option拖曳復(fù)制一個物件后，再次按下?+D將會以等距離復(fù)制一個相同的物件。
縮放物件時建議使用?+K(Scale)來縮放，因為比較不容易因為手動拖移而產(chǎn)生奇怪的小數(shù)點。
右上方檢查器(inspector)有計算機功能，可以再輸入的數(shù)值后使用加減乘除來做數(shù)學(xué)運算，超方便的！
休息片刻，繼續(xù)練功??
由于寫一寫發(fā)現(xiàn)文章有點太長，擔(dān)心大家消化不完，所以分為上下兩篇，下一篇比較著重于一些設(shè)計上的觀念與相關(guān)資源，透過有效運用Sketch將這些觀念落實，相信可以幫助自己和團隊加速開發(fā)效率！
