從文章的題目可以看出來乌庶，這里筆者想要解決的是設(shè)計(jì)過程中怎樣更高效的出圖、并與上下游合作的問題。在開頭我們可以先用5W2H簡(jiǎn)單看一下解決這個(gè)問題的必要性。
靈魂拷問
這樣做的原因（Why）
面對(duì)同事交接過來卧斟，有時(shí)候未經(jīng)整理的symbol殴边、圖層，大家也都想大聲吶喊說“Don’t make me think”珍语。其實(shí)這個(gè)問題的實(shí)質(zhì)是：什么樣的心理模型能夠幫助大家形成關(guān)于sketch文件結(jié)構(gòu)的統(tǒng)一認(rèn)識(shí)锤岸，更好地讓它為自己、為大家所用廊酣。既然注意到這個(gè)問題能耻，我就希望能夠解決它赏枚。
目的是什么（What）
對(duì)自己：提高創(chuàng)意思考之外亡驰，具體落地成圖的效率
對(duì)大家：提高上下游協(xié)作的效率（不因?yàn)槲臋n質(zhì)量影響大家的革命友誼）
形成更專業(yè)的設(shè)計(jì)文檔，保證出圖質(zhì)量
負(fù)責(zé)人是誰（Who）
可以是設(shè)計(jì)團(tuán)隊(duì)中的任何一名成員饿幅；是誰來具體執(zhí)行并不重要凡辱，重要的是大家能夠在統(tǒng)一文件格式和規(guī)范這一目標(biāo)上達(dá)成一致。
什么時(shí)機(jī)最合適（When）
任何時(shí)刻栗恩，對(duì)別人交接給你的文檔感到抓狂透乾？感覺自己的頁面結(jié)構(gòu)不太整潔又不知道該如何入手？意識(shí)到問題的存在磕秤，那事情已經(jīng)完成了一半啦乳乌。
從哪里入手（Where）
尚在設(shè)計(jì)進(jìn)行中的文檔、亦或是完全新建一個(gè)文檔市咆，甚至設(shè)計(jì)已經(jīng)實(shí)施了汉操，你想整理一遍，也不是不可以蒙兰。把它作為一個(gè)規(guī)范來整理磷瘤，從命名開始，例如 “Wireframe template v1.0”. （筆者從事的是交互設(shè)計(jì)這一階段的工作搜变，具體內(nèi)容會(huì)更多地以線框圖為導(dǎo)向）
怎么做（How）
Emmm…問得好采缚，文章的剩余部分將給出答案
做到什么程度，產(chǎn)出如何（How much）
我們也可以建立一個(gè)MVP模型挠他，立足自己當(dāng)下的情境扳抽，設(shè)立好目標(biāo)，慢慢的改善/迭代設(shè)計(jì)文檔殖侵。筆者這里介紹的方法也很難說是最好摔蓝，但在實(shí)際運(yùn)用過程中確實(shí)能夠幫助自己更好地利用sketch提供的功能，達(dá)到文檔簡(jiǎn)潔易讀的目的愉耙。站在我們這個(gè)崗位的角度贮尉，最明顯的產(chǎn)出就是：改圖成本下降；溝通成本下降朴沿；同事滿意度提升猜谚；如果你是筆者這樣的強(qiáng)迫癥败砂、整理癖，那還會(huì)有一點(diǎn)：日常工作中停下來打量打量整潔有序的文件魏铅，美滋滋（嘻嘻）昌犹。
這樣一看，似乎系統(tǒng)性地整理文檔還是很有必要的览芳，下面是筆者建議的流程斜姥。
具體實(shí)施
1-層級(jí)和分類：建立清晰的文檔結(jié)構(gòu)
1.1 文檔內(nèi)容
Sketch文檔是按照Pages-Artboards這樣的層級(jí)去構(gòu)建的挎狸，頁面-Pages是所有界面-Artboards的容器袄琳，這一思路想必來源于紙面原型。
目前我們將Pages分為：1）線框圖-Wireframes体箕；2）頁面流程圖-Flows悟泵；3）組件-Symbol杈笔；4）垃圾箱-Trash can
1）頁面中，我們將繪制具體界面糕非，2）頁面中蒙具，我們會(huì)梳理流程與標(biāo)注并輸出。
1.2 外部資源（library）
Sketch Library能夠幫助大家對(duì)組件庫的Symbol隨取隨用朽肥，且能在組件庫更新時(shí)一鍵同步禁筏，對(duì)于加速原型圖的繪制至關(guān)重要。
一個(gè)針對(duì)線框圖繪制的library可以分為以下幾類（分開而不是合并衡招，更多是考慮到它們各自的使用頻次）：
? ? 1-通用icon庫（中性風(fēng)格的icon一套）
? ? 2-通用顏色庫（個(gè)人癖好篱昔，在繪制線框圖時(shí)黑白灰都用有限的幾種…）
? ? 3-輸出物格式與標(biāo)注系統(tǒng)（版式、標(biāo)注格式等）
? ? 4-組件庫
Library與Symbol的使用蚁吝，也值得細(xì)細(xì)道來旱爆，筆者將另外起稿一篇文章探討其中的細(xì)節(jié)。
2-由整體到局部窘茁，繪制具體頁面
2.1 區(qū)分模塊
像在白板上劃分區(qū)域一樣怀伦，按照主要流程劃分繪圖區(qū)。
2.2 界面命名-聚焦用戶目標(biāo)
我們習(xí)慣于將所有界面設(shè)置為Symbol山林，而在流程圖中放入它們的instance房待，從此自動(dòng)更新，一勞永逸驼抹。但如果流程圖順序改變呢桑孩？往往需要替換界面，這時(shí)如果界面數(shù)量眾多框冀，它們的命名就變得至關(guān)重要流椒。
這里我通常采用這樣的結(jié)構(gòu)：Screens/Module-name/task。(使用斜杠后明也，在Symbol中同一層級(jí)的頁面將被自動(dòng)歸類）
2.3 建立格柵系統(tǒng)（可選）
格柵的使用取決于個(gè)人的工作習(xí)慣宣虾，筆者是會(huì)在設(shè)計(jì)較大屏幕（平板-web）時(shí)惯裕，通過格柵幫助自己快速布局和定位。
8px vs 10px
Medium上的設(shè)計(jì)師都在推薦與Material Design類似的8px格柵系統(tǒng)绣硝，但據(jù)我了解蜻势，對(duì)于習(xí)慣于IOS的許多設(shè)計(jì)師來說，5px或者10px為一單元似乎更符合大家長(zhǎng)期以來的認(rèn)知鹉胖。
Nudge it (Nudg.it)
如果使用8px格柵握玛，記得使用Nudge it 插件來重設(shè)一下Sketch的移動(dòng)單位。
2.4 塊 - 點(diǎn)線面
新建完界面后甫菠，可以從深淺不同的色塊+組件名開始挠铲，構(gòu)建每個(gè)界面的整體布局。先想清楚界面優(yōu)先級(jí)淑蔚，再逐漸細(xì)化市殷。
2.5 分組和排序 （4±1條法則）
繪制完界面細(xì)節(jié)愕撰，對(duì)界面組件進(jìn)行好分組后（可以盡量將分組維持在3-5個(gè)）刹衫，下一步可以借鑒Material Design中類比物理世界的思考方式(Elevation - Material Design)，按照距離遠(yuǎn)近檢查群組的排序搞挣。做好這一步带迟，能夠很快幫助其他人理解界面結(jié)構(gòu)和內(nèi)容。
關(guān)于工作記憶囱桨，George A Miller的7±2實(shí)際上并不準(zhǔn)確仓犬，Baddeley（1986）等人進(jìn)行大量研究，表明這個(gè)數(shù)字其實(shí)是“4”——《設(shè)計(jì)師要懂心理學(xué)》
3-輸出
繪制完具體界面舍肠，就可以整理輸出物了搀继。這里我們要做到的是：1-流程按照功能優(yōu)先級(jí)劃分主次；2-流程圖有來有往翠语，有開始有結(jié)果叽躯；3-標(biāo)注盡量齊全。
總結(jié)
很榮幸大家讀到這里肌括，其實(shí)這里所運(yùn)用的也不過是設(shè)計(jì)/心理學(xué)領(lǐng)域的通用法則点骑。在專注于幫產(chǎn)品用戶解決問題的同時(shí)，也可以花時(shí)間關(guān)注一下自己的需求谍夭、身邊人的需求：對(duì)于我們每天投入大部分時(shí)間與之交互的文檔黑滴，也可以做一下設(shè)計(jì)優(yōu)化。
希望能夠有所幫助紧索。
