核心功能、操作觀念、實(shí)用技巧、資源小補(bǔ)帖
關(guān)于上集
上一篇文章我們提到了制作Symbol 的方法和一些快速鍵的運(yùn)用等等，不知道對(duì)于大家有沒有幫助呢？還沒看過的的朋友可以點(diǎn)下面的連結(jié)前往上篇：
如何透過Sketch提高設(shè)計(jì)工作效率(上)
核心功能、操作觀念、實(shí)用技巧、資源小補(bǔ)帖medium.com
而這一篇就來聊一下一些做UI的小觀念與分享一些Sketch 的相關(guān)資源吧！
7.插件(Plugin)
插件的支援是Sketch相當(dāng)重要的賣點(diǎn)之一，強(qiáng)大的社群資源以及眾多開發(fā)者不斷的投入之下，Sketch插件目前呈現(xiàn)一個(gè)百花齊放的狀態(tài)，不時(shí)有新玩意釋出，雖然想用Sketch原生的武功打天下也不無不可，但是好好的運(yùn)用這些插件，相信我～你的工作效率就會(huì)像開了加速器一般呢！
我們可以利用一個(gè)叫做Toolbox的工具來快速安裝以及管理插件，這邊我也推薦一下幾個(gè)我常用的插件：
https://www.invisionapp.com/craft
Craft： Craft是Invision這個(gè)線上協(xié)作平臺(tái)所推出的一插件，它是由許多功能集成的套件，除了可以快速復(fù)制縱向與橫向的物件排列、還可以產(chǎn)生許多資料內(nèi)容方便編排、快速同步畫板到invision 、自訂自己的素材庫等等，未來也將推出更完整的制作動(dòng)態(tài)原型的功能，所以我非?？春眠@款插件之后的發(fā)展，有興趣的朋友也可以上Craft的網(wǎng)站了解更多。
Runner：正如他的官網(wǎng)說描述：Run Everything，這個(gè)插件可以幫助你快速的去你想去的地方，不管是開啟檔案、去某個(gè)畫板或圖層、新增Symbol等等，總之就是可以可以省下我們找東西的時(shí)間，我覺得相當(dāng)?shù)姆奖恪?/p>
Icon Font：這個(gè)插件內(nèi)建許多icon可以立即使用，包含font-awesome以及material icons等等，而且可以使用「編輯文字」的方式來調(diào)整樣式(這個(gè)icon本身就是一個(gè)字體)，所以可以讓我們?cè)诔跗谂虐鏁r(shí)快速放入一些icon示意內(nèi)容，不過比較精細(xì)的icon我建議還是自己畫，畢竟畫一個(gè)容易識(shí)別且符合情境的icon也是UI設(shè)計(jì)師的任務(wù)之一，這個(gè)工具只是幫助我們放一些通用型icon ，讓開發(fā)端可以先從font-awesome之類的平臺(tái)先抓來替代，我們畫的圖之后再補(bǔ)上就可以啰！
Rename it：不知道你有沒有遇過這樣的經(jīng)驗(yàn)，同一個(gè)物件復(fù)制了好多個(gè)，檔案名稱的最后就會(huì)有無限個(gè)”xxx copy”，這時(shí)候我們就需要這個(gè)命名小工具來做一次性的命名處理，把相同類型的元件重新命名或加上編號(hào)，這個(gè)插件還提供了各種變數(shù)，讓你更靈活的去調(diào)整你的命名規(guī)則。
Magic Mirror：這個(gè)插件做展示圖的時(shí)候的非常的方便，它可以相當(dāng)輕易的把Artboard投影鏡射到你所選取的形狀圖層上，因此在制作有透視或是各種角度的Mockup都很好用，只不過這款插件若要取得較高畫質(zhì)的鏡射是需要付費(fèi)購買Pro版本的哦！
https://abynim.github.io/UserFlows/
User Flow：以前要在Sketch中畫整個(gè)產(chǎn)品介面的流程圖也是一個(gè)滿痛苦的事情，雖然現(xiàn)在有些工具像是Prott，可以讓你使用平臺(tái)串連頁面之后產(chǎn)出整個(gè)介面的Flow，但大部分還是會(huì)在Sketch先完成Flow再去做原型，所以這個(gè)工具就是讓你更方便的產(chǎn)出頁面連接的線，甚至還可以增加一些不同狀態(tài)的邏輯判斷呢～
Git Sketch：對(duì)于設(shè)計(jì)師來說，版本控管一直是一個(gè)很頭大的問題，以往都透過修改檔案命名來辨別(v1,v2,v..100)，但是隨著時(shí)間一長(zhǎng)檔案會(huì)越來越多甚至覆蓋掉過去的版本，因此這個(gè)插件也導(dǎo)入了程式的版本控制(Git)的方式，讓設(shè)計(jì)師用簡(jiǎn)單的插件就能做好版本管理，每天下班就是按下Commit，收工！
https://ozzik.github.io/Slicer/
Slicer：我切！這個(gè)切圖插件除了可以快速幫你導(dǎo)出不同倍率的圖案之外，連不同裝置的后綴都幫你加好了，匯出后也會(huì)幫你分資料夾收好，匯出的icon也可以保留背景透明度，是個(gè)非常實(shí)用的插件。
8.制圖時(shí)的觀念與方向
做好圖層命名，好的命名習(xí)慣有幾個(gè)好處：
1.直覺好找、搜尋容易(不管是自己看或是和同事協(xié)作都是好棒棒！)
2.幫助自己厘清自己到底做了什么東西，有時(shí)候設(shè)計(jì)很多頁面時(shí)會(huì)做到頭昏腦脹，這時(shí)在命名的過程常常就會(huì)發(fā)現(xiàn)一些不必要或可以合并的元件，順便保持圖層結(jié)構(gòu)的干凈。
3.串接原型工具(Prototype Tools)時(shí)可以省去不少時(shí)間，因?yàn)樵S多工具的運(yùn)作規(guī)則都會(huì)根據(jù)命名而有所影響。
了解各種裝置的限制
隨著時(shí)代演進(jìn)，現(xiàn)在介面的載體越來越多元，在UI設(shè)計(jì)上的考量也要越仔細(xì)，我們要知道我們的畫面在不同裝置間會(huì)如何呈現(xiàn)，例如做網(wǎng)頁的話我們必須要了解網(wǎng)格系統(tǒng)(Grid System)以及流體布局(Fluid-Layout)基本概念，手機(jī)版網(wǎng)頁是否要乘載所有的資訊？如果是做手機(jī)App介面的話也要知道iOS和Android的使用邏輯與習(xí)慣，另外建議一定要搭配Sketch Mirror在手機(jī)上查看細(xì)節(jié)和字體大小，因?yàn)樵陔娔X上做圖和眼睛真正在看手機(jī)的距離是不同的，所以每個(gè)裝置的規(guī)范或限制都必須要去了解。
http://www.alleywatch.com/2013/05/what-are-grid-systems-and-why-you-need-to-know-about-them/
建立專案的視覺規(guī)范(Style Guide)
正如前面所提到的，不管是建立Symbol或Share Style都是在加速我們的效率，而更重要的是經(jīng)由這個(gè)過程來建立一套視覺規(guī)范，這不僅能幫助我們厘清我們整個(gè)產(chǎn)品的色彩模式、文字、元件結(jié)構(gòu)等等，對(duì)于程式開發(fā)以及團(tuán)隊(duì)其他成員來說也能有更一致的溝通畫面。有些人可能會(huì)覺得整理或制作這些規(guī)范有點(diǎn)花時(shí)間，不過我個(gè)人是認(rèn)為「溝通成本」遠(yuǎn)大于「制作成本」，前期的資料建立越完整，后期反覆修改調(diào)整的機(jī)會(huì)越小。
盡量減少檔案的大小
雖然說Sketch 是個(gè)輕量級(jí)軟體，但常常可能一個(gè)專案會(huì)越做越大，遇過一些朋友把所有Artboard 放在同一個(gè)Page，這其實(shí)會(huì)造成軟體運(yùn)作上不順暢，我的建議是把Page 依照專案的功能做分類，除了可以讓管理更方便，也減少一點(diǎn)軟體運(yùn)算的時(shí)間。
再來就是盡量不要用Background Blur，這也是一個(gè)非常吃資源的效果，可以先把效果關(guān)閉，等到需要輸出時(shí)再打開就可以了。
最后記得時(shí)常檢查圖層，刪除不必要的圖層，減少占用系統(tǒng)空間。
9.關(guān)于協(xié)作工具
不管是和團(tuán)隊(duì)里的哪一個(gè)成員溝通，專案經(jīng)理、設(shè)計(jì)師、老板或是工程師，我們都希望用最少的時(shí)間做最有效率的溝通，而市面上已經(jīng)有不少的平臺(tái)或工具可以幫助我們降低溝通成本，下面這些是比較常見的工具：
導(dǎo)出與標(biāo)注工具
Sketch Measure / zeplin
原型制作/溝通平臺(tái)
invision / Mravel / Prott
不過這部分青菜蘿卜各有所好，大家可以去試用看看感受一下這些平臺(tái)的特色，沒有最好的工具，只有最適合當(dāng)下專案或團(tuán)隊(duì)習(xí)慣的工具。
10.Sketch資源小補(bǔ)帖
最后我來提供一些Sketch 的相關(guān)資源，但資源實(shí)在太多了，所以我就列舉一些我常使用的給大家參考：
臺(tái)灣
中國
Sketch.im/UI中國/學(xué)UI網(wǎng)
國外
Sketchrepo/Sketchappsources/UI8/Sketch App Rocks
另外推薦一個(gè)Chrome的插件Muz.li，讓你每天都有新的靈感可以發(fā)現(xiàn)！
總結(jié)
規(guī)劃很重要，雖然設(shè)計(jì)師是一個(gè)相對(duì)視覺化與感性的職業(yè)，但對(duì)介面設(shè)計(jì)師來說，理性的邏輯思維也是很重要的，UI設(shè)計(jì)是一個(gè)牽一發(fā)動(dòng)全身的過程，你絕對(duì)不會(huì)想在設(shè)計(jì)了100個(gè)頁面之后，為了改一個(gè)按鈕的顏色，手動(dòng)重復(fù)調(diào)整十幾二十個(gè)頁面對(duì)吧？我們的生命應(yīng)該浪費(fèi)在更美好的地方才是～
最后陳腔濫調(diào)一下：「工具是死的，人是活的。」其實(shí)做UI的重點(diǎn)不外乎就是「效率」與「細(xì)心」，產(chǎn)出快、品質(zhì)又好其實(shí)是一件相當(dāng)不容易的事，我們應(yīng)該更專注在設(shè)計(jì)本身，而不是被工具限制，所以建立一套良好的使用邏輯與習(xí)慣，相信不管在提升制圖的速度上或是與別人協(xié)作時(shí)都能夠如魚得水，事倍功半！
以上內(nèi)容都是我的一點(diǎn)經(jīng)驗(yàn)之談(參雜許多個(gè)人習(xí)慣XD)，希望可以幫助到想學(xué)習(xí)Sketch的人，有任何指教或需要改正的地方請(qǐng)隨時(shí)留言給我，如果喜歡這篇文章的話也歡迎幫我點(diǎn)個(gè)喜歡或者分享給其他正在學(xué)習(xí)Sketch中的朋友，同時(shí)也歡迎大家多多交流自己使用的工具或小訣竅啰！
文章來自一位臺(tái)灣不錯(cuò)的設(shè)計(jì)師～～
