暢快高效！超實(shí)用的設(shè)計(jì)工作流程+神器推薦

@魔力大熊：做設(shè)計(jì)的時(shí)間越久，就越意識(shí)一個(gè)好的、可執(zhí)行性高的標(biāo)準(zhǔn)工作流真的能幫你節(jié)省非常多的時(shí)間，從繁瑣的日常設(shè)計(jì)中解放出來，才能成為真♂REAL 設(shè)計(jì)師。大熊自己總結(jié)了一套行之有效的方法，這里無保留分享給你。

每一個(gè)外省進(jìn)城務(wù)工的設(shè)計(jì)師（們） 曾經(jīng)都一直信奉這句箴言：

只要我切的圖夠快，寂寞就追不上我。

可是擺京不相信眼淚，不管你切@2x、@3x圖的手速有多快，如果核心產(chǎn)品邏輯沒理清，后期創(chuàng)意執(zhí)行不到位，收尾細(xì)節(jié)考慮不周全，一樣在比稿（自查）時(shí)被K掉重做，到最后只能默默啜泣把妝哭花，浪費(fèi)寶貴時(shí)間。

做設(shè)計(jì)的時(shí)間越久，就越意識(shí)一個(gè)好的、可執(zhí)行性高的標(biāo)準(zhǔn)工作流真的能幫你節(jié)省非常多的時(shí)間，從繁瑣的日常設(shè)計(jì)中解放出來，才能成為真♂REAL 設(shè)計(jì)師。大熊自己總結(jié)了一套行之有效的方法，這里無保留分享給你：

三大步驟，絕大部分日常的設(shè)計(jì)需求，都可以用這套流程過一遍；至于無命題式的自由創(chuàng)造，則無需拘束在這幾個(gè)步驟里面。工作流是拿來提高效率的，而不是限制想象力。

一、靈感和原型

除非是天賦迥異，否則誰也不能保證拿到創(chuàng)作命題就來靈感。因此，在工作生活中積累一個(gè)「靈感庫」非常重要。

人們?cè)谀抢锔哒勯熣撝鞖夂挽`感之類的東西，而我卻象首飾匠打金鎖鏈那樣精心的勞動(dòng)著，把一個(gè)個(gè)小環(huán)非常合適地連接起來。 ——海涅

這里安利一款叫Inboard的應(yīng)用，你可以很方便的用它管理圖片素材，更棒的是只要在上面登陸你自己的Dribbble帳號(hào)，它會(huì)自動(dòng)將你Like過的設(shè)計(jì)作品都同步下來，在本地也能輕松查看。

如果你早先用過Pixa或者Ember這樣的素材管理工具，上手是分分鐘的事情。

「圖為 Inboard 2」

有經(jīng)驗(yàn)的設(shè)計(jì)師不會(huì)臨陣磨槍，那是剛?cè)腴T的新手才犯的錯(cuò)誤。然而「太陽底下無新事」，讓我們看看2006年 NASA 再版的設(shè)計(jì)指南：

「圖為 NASA 2006年上線的設(shè)計(jì)指南」

從字體規(guī)范到各個(gè)場(chǎng)景的應(yīng)用（封面、網(wǎng)頁、小冊(cè)子、運(yùn)輸工具的外觀、航天飛機(jī)的噴涂）全部囊括在內(nèi)，且大部分內(nèi)容都遵循2005年就已發(fā)布的版本做追加和修改。

10多年前的規(guī)范到如今都沒有什么大的變化，這意味著按照現(xiàn)有的人機(jī)交互范式，最常用的組件永遠(yuǎn)都是那么幾樣（不論 Mobile App還是 Web App）。

• Navs
• ButtonGroups
• Pagination
• Media
• Form
• ListGroups
• ContentWrapper

這對(duì)你意味著什么？

意味著你并不需要一切「從頭來過」。

你所要設(shè)計(jì)的「新」東西， 其實(shí)前人在10多年前就設(shè)計(jì)過各種風(fēng)格和交互樣式，并且還出過「規(guī)范」。所以，投入設(shè)計(jì)工作前，請(qǐng)務(wù)必做好這三件事：

1. 前人是否做過類似的設(shè)計(jì)（不論風(fēng)格有沒有過時(shí)），檢查你的「靈感庫」并羅列出來；
2. 刪去所有修飾元素，將內(nèi)容重組，并且使其貼合你現(xiàn)有產(chǎn)品的設(shè)計(jì)風(fēng)格，作為備選方案（是的沒有打錯(cuò)，就是備選方案）；
3. 再想想其他的實(shí)現(xiàn)方案，可能只是一個(gè)微小的點(diǎn)，也足以讓你打破原有的設(shè)計(jì)思路。論證其可行性并完善，作為主方案。

大熊在今日頭條工作時(shí)，勇哥（前財(cái)新產(chǎn)品設(shè)計(jì)主管）常提起他和胡舒立共事的細(xì)節(jié)，印象很深的一點(diǎn)是他說，當(dāng)你想到一個(gè)絕妙的設(shè)計(jì)點(diǎn)子時(shí)，不要急著出方案，而是將它小心翼翼的放在心里，作為備選方案，然后再想下一個(gè)。

這是因?yàn)椋O(shè)計(jì)永遠(yuǎn)有更精妙的，而你要確保你每一次的設(shè)計(jì)，從視覺風(fēng)格到交互體驗(yàn)，都在你的水準(zhǔn)線以上。所以無論何時(shí)，都要留個(gè)備選方案，哪怕出不了彩，也能保證設(shè)計(jì)質(zhì)量。（雖然備選方案最后經(jīng)常被棄用）

此外，Pinterest，Pttrns，Reeoo等都是靈感扎堆的地方，特別是跨界設(shè)計(jì)往往容易把思路打開，做GUI設(shè)計(jì)不一定只看界面設(shè)計(jì)，有時(shí)候一副攝影作品（Unsplash有多好用我就不多說了）都能給你帶來無限靈感，比如：

「圖為 haobtc landingpage 頭圖的靈感來源」

最方便的原型工具依然是你身邊的紙筆。

大熊在用的是Moleskine和Evernote的合作款，偶爾產(chǎn)生的新想法、草圖都可以記錄在內(nèi)，并且同步到 Evernote，非常方便。

「圖為 haobtc 開發(fā)中的公告系統(tǒng)界面手稿」

提到原型工具，去年是它們爆發(fā)的一年，今年目測(cè)依然會(huì)繼續(xù)。

Origami、Pixate、Framer.js、Form、Invision、Principle、Marvel各有各的側(cè)重點(diǎn)（Pixate 與 Form 都已被 Google 收購），如果你是JavaScript好手，毫無疑問Framer.js是最合適的工具，代碼級(jí)細(xì)粒度的調(diào)試能保證最后的效果和設(shè)計(jì)原型別無二致。

而如果產(chǎn)品中使用了 Pop Animation（Facebook 開源） 這樣的動(dòng)畫框架，那么 Origami 當(dāng)之無愧是最佳選擇。

然而除卻上面這些，不得不提的卻是 Keynote，因?yàn)檎Q生之初 Keynote 就使用了OS X 內(nèi)置的 Quartz 圖形技術(shù)，拿它做動(dòng)態(tài)交互居然出人意料的流暢，這也難怪有這么多設(shè)計(jì)師偶爾也拿它做原型動(dòng)畫，Apple WWDC 2014 甚至專門演示了內(nèi)部團(tuán)隊(duì)用 Keynote 制作 App 原型的過程。

「圖為大熊早期練習(xí) keynote 時(shí)制作的動(dòng)效，學(xué)習(xí)門檻非常低」

不過，最讓大熊期待的還是 Silver Flows （已被 Invision 收購，并入Craft 2.0套件），直接在 Sketch中完成頁面之間的鏈接跳轉(zhuǎn)，原生的轉(zhuǎn)場(chǎng)動(dòng)畫，可實(shí)時(shí)編輯的輸入框，還有嵌入 Webview，這些都在手機(jī)上實(shí)時(shí)預(yù)覽，簡直亦可賽艇。

希望早日推出正式版本，比Adobe XD用起來效率高應(yīng)該是肯定的。

二、設(shè)計(jì)與改進(jìn)

有了原型（不管是畫在紙上的還是用Axure這樣的工具輸出）后就進(jìn)入真正的設(shè)計(jì)階段，這時(shí)就要細(xì)細(xì)考量：

• 字體
• 字符間距
• 用色規(guī)范
• 組件的擺放對(duì)比
• 多屏的適配
• 動(dòng)效

至于 GUI 界面設(shè)計(jì)的利器，當(dāng)然要提 Sketch。它幾乎成了現(xiàn)在設(shè)計(jì)師的標(biāo)配，一方面門檻很低、體積輕巧，相比Adobe家族的一票設(shè)計(jì)軟件，上手要容易的多；另一方面軟件的種種特性都為Web和App設(shè)計(jì)量身定做，輸出CSS、模塊化的設(shè)計(jì)組件、都讓設(shè)計(jì)和后期開發(fā)減去許多溝通成本。

然而，設(shè)計(jì)并不能拘泥于工具。絕沒有「用 Sketch 就比用 PS 的技高一籌」的說法，說出這種話的設(shè)計(jì)師，其自身能力往往也很一般。

工具沒有最完美，只有最合適。

Sketch 在互聯(lián)網(wǎng)設(shè)計(jì)圈流行開以后，經(jīng)歷了很長時(shí)間的停滯期（3.X 版本），由于遲遲沒有新的 feature 跟進(jìn)，受到很多人的抱怨，大熊也是其中一員。后來發(fā)現(xiàn)一家叫 Serif 的英國工作室推出了 Affinity Photo 和 Affinity Designer 兩款設(shè)計(jì)套件，極快的響應(yīng)速度和高兼容性馬上就吸引了很多設(shè)計(jì)師的目光。大家迅速轉(zhuǎn)移陣地，這兩款設(shè)計(jì)軟件也流行開來，還斬獲了Apple Design Award 和 2015 年度 Mac App。

在這之后 Sketch 也隨即開始了一系列的版本更新，修復(fù)了許多舊 Bug，看的出 Bohemian 團(tuán)隊(duì)充滿危機(jī)意識(shí)。

設(shè)計(jì)工具的選擇已經(jīng)上升到黨派戰(zhàn)爭，完全可以另起一篇好好討論，這里篇幅有限，不再展開。

接著要說說初步設(shè)計(jì)完成后，如何改進(jìn)的問題。

一稿過就跟 One take 一樣，偶爾會(huì)發(fā)生，從未尋常過。

--大熊

設(shè)計(jì)幾乎一定是要改的，既然做了設(shè)計(jì)師，就要做好心理準(zhǔn)備。大熊以前很抗拒改稿，辛辛苦苦做的設(shè)計(jì)說改就改，那么多晚都白熬了，心里肯定不爽。

但是后來卻意識(shí)到，改才是常態(tài)，好設(shè)計(jì)真的（幾乎）都是改出來的。比如今日頭條內(nèi)部創(chuàng)業(yè)做了一款產(chǎn)品叫時(shí)光相冊(cè)，非常好的產(chǎn)品，初期設(shè)定界面時(shí)，大熊單單就相冊(cè)的展示頁做了16種不同的版式，最終和產(chǎn)品負(fù)責(zé)人從中挑選了最合適的展示方式：

「圖為部分時(shí)光相冊(cè)早期界面樣式探索。 」

只有比較的過程中，你才更容易發(fā)現(xiàn)原來設(shè)計(jì)中不合理的地方，逐一剔除刪改，最后留下來的一定是經(jīng)過多層考慮最合適的設(shè)計(jì)。

這款產(chǎn)品現(xiàn)在早已和我沒有關(guān)系，但當(dāng)時(shí)沈振宇提到的一個(gè)觀點(diǎn)，我一直都非常認(rèn)同：設(shè)計(jì)師們對(duì)美的東西有天然的偏好，所以你看他們的設(shè)計(jì)稿，一張張都無比美幻。而實(shí)際上， 產(chǎn)品的內(nèi)容是用戶創(chuàng)造的，用戶不是藝術(shù)家，他們的相冊(cè)里放的都是日常的瑣碎，試想拿這樣的照片替換設(shè)計(jì)稿中的占位圖，設(shè)計(jì)還有原先那么美嗎？

回過頭去看 dribbble 上的首推設(shè)計(jì)作品，無一不講究氛圍，基調(diào)的拿捏。放在那個(gè)場(chǎng)景里是無可挑剔的，但落到實(shí)際的產(chǎn)品上，卻不太經(jīng)得起推敲。

有一位叫 Tobias 的設(shè)計(jì)師在 Medium發(fā)表了類似的文章，觀點(diǎn)之一就是 dribbble 上的作品從未真正的「解決」過問題，值得一讀。

譯文版本：《設(shè)計(jì)追波風(fēng)！值得每個(gè)設(shè)計(jì)師閱讀思考的深度剖析文》

此外，改進(jìn)要盡可能面面俱到，不起眼的小改動(dòng)，卻往往能讓整個(gè)界面變得不一樣。

比如一個(gè)創(chuàng)業(yè)朋友正在開發(fā)他們的 App，心急火燎的找大熊改進(jìn)界面的設(shè)計(jì)，其中一個(gè)界面改版是這樣的：

「左側(cè)為改版前，右側(cè)為大熊改版后」

看起來變化很大，實(shí)際上只作幾處改動(dòng)：

• 調(diào)整了字重、大小和間距；
• 強(qiáng)化原來的卡片設(shè)計(jì)的層級(jí)；
• 強(qiáng)化了主色和輔助色；
• 調(diào)整了組件的擺放位置；

自己做的設(shè)計(jì)也一樣，多次改動(dòng)后可能面目全非，跟初版差距很大。有心里落差很正常，但只要最后的結(jié)果是變好的，那么這樣的改動(dòng)就很值得。（不過也要記得做好備份，改完10版最后用回第一版是高頻事件）

另外順便提一下 Luke Wroblewski，這哥們從2001年開始十多年筆耕不輟，職業(yè)生涯一直都游走在用研和人機(jī)交互間，產(chǎn)出了很多高質(zhì)量的文章。國內(nèi)許多設(shè)計(jì)團(tuán)隊(duì)在做設(shè)計(jì)決策時(shí)，都直接或間接參考過他提供的數(shù)據(jù)和結(jié)論，在交互設(shè)計(jì)界影響力可見一斑。

如果說 LittleBigDetails 是收集「讓人會(huì)心一笑的設(shè)計(jì)細(xì)節(jié)」，那么 Luke 對(duì)于設(shè)計(jì)的觀察就是回歸理性，一切用數(shù)據(jù)說話。

「圖為Apple Watch 推出時(shí)，Luke發(fā)表的一篇關(guān)于用戶使用電子設(shè)備習(xí)慣的一篇文章」

三、交付與實(shí)現(xiàn)

任何事都沒有表面看起來那么簡單。 ——墨菲定律

如果是你沒有接觸過的開發(fā)領(lǐng)域，比如 iOS 應(yīng)用的開發(fā)，必須要學(xué)習(xí) Obj-C 或 Swift 語言，那么通常來說，將標(biāo)注的清清楚楚，完完整整的設(shè)計(jì)指南（Design Guide）、素材（Assets）和交互流程 交付給研發(fā)工程師，任務(wù)到這里就可以告一段落了。

在沒有神器 Zeplin 之前，大熊通過 Sketch Measure 這款插件來標(biāo)注設(shè)計(jì)圖。

每張視覺稿都對(duì)應(yīng)3張頁面，兩張頁面分別解釋橫向布局和縱向布局，一張頁面解釋視覺樣式，包括字體、字號(hào)、行高，字間距等等。即便有插件的幫助，可標(biāo)注依然只能手動(dòng)。

所以設(shè)計(jì)師最痛苦的事情就是設(shè)計(jì)過稿了以后，桌面放上一壺水，眼睛瞇成一條縫，連續(xù)標(biāo)上兩三天（如果有幾十個(gè)頁面，這是再正常不過了）。

「圖為 haobtc 內(nèi)部項(xiàng)目原設(shè)計(jì)」

重復(fù)的勞動(dòng)應(yīng)該讓機(jī)器來做，所以我們有了 Zeplin，由以色列 Startupbootcamp 和 YC 孵化出來的一個(gè)項(xiàng)目，徹底解放了設(shè)計(jì)師的雙手。不光解決了所有標(biāo)注的問題，真正做到WYSIWYG，還生成了Guidline，自動(dòng)整理了設(shè)計(jì)中所用到的字體（Fontbook）和顏色（Color Palette）。

美中不足的是，在我們實(shí)際使用過程中，發(fā)現(xiàn)Zeplin 不能準(zhǔn)確的識(shí)別元素的邊距，經(jīng)常有0.1-0.5pt 的誤差，值得慶幸的是 Zeplin正在努力解決這個(gè)問題，相信后續(xù)的版本會(huì)得到修正。總的來說，使用 Zeplin能節(jié)約團(tuán)隊(duì)的開發(fā)時(shí)間，沒有理由不推薦。

「圖為 Zeplin 操作面板」

「圖為 Zeplin 設(shè)計(jì)指南」

對(duì)于你不甚了解的領(lǐng)域，比如從未寫過一行 Obj-C 的代碼。能盡可能做到保證設(shè)計(jì)組件結(jié)構(gòu)清晰，同時(shí)站在工程師和產(chǎn)品經(jīng)理的角度思考問題，那么作為一個(gè)設(shè)計(jì)師，到這里交付給研發(fā)工程師是可以理解的。

但如果你同時(shí)也略為熟悉這個(gè)領(lǐng)域，比如 Web 端的開發(fā)，HTML 和 CSS 都寫的簡煉干脆，那么最好將完整的頁面（以合理的 Dom 結(jié)構(gòu)和語言標(biāo)簽）一并寫好并交付給研發(fā)工程師。為什么設(shè)計(jì)師最好要寫代碼？原因非常簡單：

1. 讓研發(fā)工程師調(diào)試界面是非常痛苦的事情，他們對(duì)這件事并沒有好感；
2. 人力資源有限的情況下，研發(fā)工程師（通常）會(huì)將絕大部分精力花在業(yè)務(wù)邏輯代碼等事情上，以實(shí)現(xiàn)資源的最優(yōu)配置，界面按照設(shè)計(jì)還原的優(yōu)先級(jí)是滯后的，除非強(qiáng)制要求。
3. 大部分人對(duì)設(shè)計(jì)的感知停留在「感覺這個(gè)比那個(gè)看起來舒服，但說不出來為什么」，也只有設(shè)計(jì)師把情愿把時(shí)間花在無窮無盡的像素級(jí)對(duì)比和排版上，并以此為樂。

這樣一來雙方都開心，效率也提高了。

但是，大熊并不鼓吹現(xiàn)在流行的 Full Stack Designer （這里特指在設(shè)計(jì)的同時(shí)，分配很多精力在業(yè)務(wù)邏輯的代碼上）這種說法，這樣往往兩者都做不好。早期之所以有 Web Master（包括建站、數(shù)據(jù)庫、后臺(tái)、前端界面、設(shè)計(jì)，都一手包辦的人），是因?yàn)樵诋?dāng)時(shí)的環(huán)境下，Web 開發(fā)遠(yuǎn)沒有像今天這么復(fù)雜：

「圖為Apple 20年前的官網(wǎng)。 」

在那個(gè)時(shí)期，許多網(wǎng)站都像是簡單的（以及符合當(dāng)時(shí)審美）圖文編排的 Blog，附上一堆超鏈接，并沒有如今這么復(fù)雜的后臺(tái)業(yè)務(wù)邏輯和網(wǎng)絡(luò)環(huán)境。

但如今再去言必提及 Full Stack，實(shí)在是有點(diǎn)不客觀。比起前者，Multi Stack 這個(gè)詞更符合現(xiàn)在的實(shí)際情況。

設(shè)計(jì)領(lǐng)域已經(jīng)非常細(xì)分了：界面設(shè)計(jì)、人機(jī)交互、三維骨骼、原畫、場(chǎng)景、粒子特效、HUD設(shè)計(jì)、動(dòng)作鏡頭（有興趣可以去看@光學(xué)核心 個(gè)人制作的動(dòng)作鏡頭，頂級(jí)的分鏡水準(zhǔn)，無可挑剔的節(jié)奏感和打擊感，中間花了多少時(shí)間反復(fù)揣摩和練習(xí)恐怕無人能知。）

每一項(xiàng)都必須花上可怕的時(shí)間才能達(dá)到單個(gè)領(lǐng)域里專家的水準(zhǔn)，所以當(dāng)有設(shè)計(jì)師遑論樣樣精通時(shí)，實(shí)際上是樣樣稀松，單個(gè)拎出，都上不了臺(tái)面。

正因如此，對(duì)自己不熟知的專業(yè)領(lǐng)域要尊重，才能有好的心態(tài)去學(xué)習(xí)和進(jìn)步，先有一技之長，才能多處開花。

最后再安利 Hammer 這款工具來提高你的效率，這簡直又是一枚神器。

Auto Reload（類似Hot-Reload）、Html Includes、Clever path，支持SCSS/SASS...毫不夸張的說，它幫助大熊節(jié)約了至少20%寫頁面花費(fèi)的工作時(shí)間。當(dāng)然，也有一些其他的工具，比如 Codekit 也能做類似的事情，最好根據(jù)自身的需求去選擇。

「圖為 Hammer 的界面。 」

最后，希望大家都能找到設(shè)計(jì)的樂趣，做出好玩有意義的東西出來，保持學(xué)習(xí)的激情。

大熊的 dribbble：Raymond Wong?? Github：rayston92 (rayston92) · GitHub

歡迎關(guān)注大熊的微信公眾號(hào)：大熊撥清波。

【優(yōu)設(shè)精品職場(chǎng)經(jīng)驗(yàn)合集】

總監(jiān)過來人的經(jīng)驗(yàn)分享！
《總監(jiān)必備技！聊聊如何做好設(shè)計(jì)師管理？》

如何管理兩種不同類型的設(shè)計(jì)師？
《總監(jiān)修煉之路！如何管理才氣型/實(shí)干型的設(shè)計(jì)師？》

人氣超旺的職場(chǎng)真相揭秘！
《這才是真相！為什么中國的甲方都不愿意為設(shè)計(jì)付出高額費(fèi)用？》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量112萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com