前言

13年底，Intercom 的產(chǎn)品VP Paul Adams 在 Intercom 官博發(fā)表了 一篇博文 。文章講述了網(wǎng)絡(luò)上設(shè)計社區(qū)里普遍存在的一種現(xiàn)象，大意是“許多設(shè)計師在社區(qū)中分享的作品往往是為了炫技，而產(chǎn)品的邏輯通常都經(jīng)不起推敲的，真正優(yōu)秀的設(shè)計應(yīng)該從更高的層面出發(fā)，而不只是做表面上的工作”。

文章發(fā)布后，在 Twitter 、HN 及博客評論下引起了反響。雖然部分內(nèi)容在一些設(shè)計師眼里看起來比較有攻擊性（也就是俗稱“開噴”），甚至還帶有些地圖炮，但是文中關(guān)于“設(shè)計的四個層次” 以及“when..I want to..then I can…”等設(shè)計觀點和方法論都非常值得我們回味并運用到工作當(dāng)中。

文章是2月前Sam推薦給我的，隨后到 twitter 上獲得了作者的授權(quán)，在這里也應(yīng)作者需要，貼上 Intercom 的官博連接：http://blog.intercom.io/ 。

譯文開始，Dribbble 大牛務(wù)必冷靜閱讀。 =D

這些天氣app中，只有一個試圖解決用戶的實際問題

現(xiàn)在的產(chǎn)品設(shè)計和交互設(shè)計界發(fā)生了一些奇怪的事情。一方面有著如 Ryan Singer 和 Julie Zhuo這樣能寫出很贊的文章的人來推動我們設(shè)計水平的發(fā)展。另一方面則是越來越多的人在 dribbble上發(fā)布與交流他們的作品，不過最后結(jié)果是追波上的這些玩意反而使我們的水平倒退了。我寫這篇文章不是在談追波的好壞是非，而是想探討什么才是追波真正的價值。我會將“產(chǎn)品設(shè)計”貫穿始終，尤其是在談到用戶體驗和交互設(shè)計的時候。

“屌爆了！”dribbble就是用這種形式來鼓勵大家炫技

去年我看了不少應(yīng)聘 Facebook 和 Intercom 的 求職者的設(shè)計作品，然后我發(fā)現(xiàn)了一個令人擔(dān)憂的現(xiàn)象。太多的設(shè)計師都在為吸引同行的關(guān)注而做設(shè)計，而不是把心思花在解決實際的工作問題上。這點一直都是廣 告創(chuàng)意領(lǐng)域才有的毛病（比起優(yōu)先解決客戶需求，做酷炫的作品拿個獎攢點人氣似乎更重要），并且，這在產(chǎn)品設(shè)計以及交互設(shè)計的領(lǐng)域越來越突出。

我最近看的許多求職者的產(chǎn)品設(shè)計作品都聚焦在最表層，只關(guān)注于自己做的東西是否足夠的“追波味兒”。所以他們做出來的設(shè)計，好看卻不中用?！巴昝赖?扁平化設(shè)計”，“像素級的精致度”，聽起來很犀利，但往往這些作品都沒有實現(xiàn)產(chǎn)品的真正目的。既沒有解決用戶每天真實遇到的問題，也沒有將完整的業(yè)務(wù)體系 考慮進來。追波上的設(shè)計師們喜歡鉆研界面的輪廓和絢麗的色彩等細(xì)節(jié)，以此交朋結(jié)友，相互點贊和分享?？赐陝e人的作品后，自己跟著興沖沖來一發(fā)。結(jié)果就是大 量的設(shè)計在追波上都長得差不多。不管你做的是社交軟件，金融軟件，電商網(wǎng)站還是天氣應(yīng)用，同樣的風(fēng)格都可以套進去使。你想想，如果給你的眼睛加一層毛玻璃 效果，再看看這些界面，你能說出他們到底有什么不同嗎？

設(shè)計最重要的一步，往往并不會去追求外觀的美

相比之下，優(yōu)秀的求職者通常都附上了他們的思考過程。手繪稿、圖解、利弊、 阻礙、權(quán)衡、解決方案，以及闡明交互和動效的原型。在真實參數(shù)的考量下，描述產(chǎn)品的模塊如何移動和變化，它們的動態(tài)效果又如何呈現(xiàn)。

而糟糕的求職者，只會發(fā)他們的酷炫扁平 PNG 或牛逼線框 PDF 過來。沒有關(guān)于待解決問題的關(guān)鍵點，看不到商業(yè)和技術(shù)層面的限制，也不描述使用場景和上下文聯(lián)系。這些完美的視網(wǎng)膜像素級的 PNG 或許在追波上看起來很贊，但實際上，這些東西卻連基本的設(shè)計價值都難以體現(xiàn)。

這就是為什么追波的許多“ReDesign”類的作品實屬愚蠢。因為許多人做設(shè)計的時候，并不清楚這個產(chǎn)品的淵源，用戶真實的需求，技術(shù)有哪些限制，深層的組織架構(gòu)又如何。

如果產(chǎn)品設(shè)計是在一個具體的約束中為用戶解決問題，這些自稱為產(chǎn)品/用戶體驗設(shè)計師的人實際上就是個美工而已。設(shè)計師應(yīng)當(dāng)是藝術(shù)家，是造型師，創(chuàng)造美麗事物是一項偉大的工程，而不是像這樣悶著腦袋亂畫。

產(chǎn)品設(shè)計總是與使命，愿景以及架構(gòu)息息相關(guān)

從廣泛的構(gòu)思到像素級的細(xì)節(jié)，設(shè)計師應(yīng)該始終思考公司的使命、愿景和產(chǎn)品架構(gòu)。他們在設(shè)計中所做的每件事都需經(jīng)歷這個過程。

設(shè)計始于公司最頂層的使命，其次是公司的愿景。在一個沒有清晰和可執(zhí)行的使命與愿景的團隊中，很難開展設(shè)計。不要低估這個問題的重要性，如果你所在的公司缺少清晰的使命，那就將締造它作為你工作的一部分。

在使命和愿景之后的，則是產(chǎn)品的架構(gòu)。不是指技術(shù)層面上的東西，而是產(chǎn)品內(nèi)各部分之間彼此的關(guān)聯(lián)，是一個總體的系統(tǒng)。我在 Facebook 上班的第一天早上，Chris Cox（產(chǎn)品VP）做了一個絕妙的演講 （你可以點開感受一下） 。下面的聽眾來自公司各個部門， Chris 侃侃而談，然后著重闡述產(chǎn)品的架構(gòu)，以及它是如何與公司的目標(biāo)關(guān)聯(lián)的。

對 Facebook 來說，架構(gòu)里有聯(lián)系人、好友、興趣點，上至世界名牌下到街邊小店，還 有一個能夠顯示所有這些事物關(guān)系的示意圖。這是一個非常清晰簡潔的產(chǎn)品，直擊目標(biāo)需求點。以我的經(jīng)驗來說，在沒有一個清晰明了的構(gòu)架想法前是很難在這團雜 七雜八的玩意下做出一個超贊的設(shè)計的。在很多情況下，就像這個項目一樣，作為設(shè)計師應(yīng)該去解決問題并改進架構(gòu)。比如談到Facebook跳轉(zhuǎn)其他應(yīng)用的時候，我通常會在白板上畫些類似這樣的概念圖：

產(chǎn)品的架構(gòu)不是信息堆砌，它不是一個頁面連著這個那個模塊和空間，或者一堆死板的演示告訴你點這里是干嘛的，一個交互原型通常就可以很好地處理這些信息。一個更深層次的表達方式，這就是產(chǎn)品的架構(gòu)圖。它能表現(xiàn)出各個模塊在整體系統(tǒng)中所處的位置以及它們的聯(lián)系。而在intercom我們是用這種方式進行架構(gòu)設(shè)計的：

我甚至沒有印象在追波上有看到過類似上圖這種表述設(shè)計思路的架構(gòu)圖。很少能看到設(shè)計師講述他的作品如何匹配需求目標(biāo)，如何驅(qū)使產(chǎn)品的視野向前，或是在整個架構(gòu)中發(fā)揮了什么作用等等，以呈現(xiàn)這些設(shè)計的重要度。這應(yīng)當(dāng)是設(shè)計的基本，而非特例。

一旦你明確產(chǎn)品清晰的使命、愿景和架構(gòu)，你就可以開始思考其它的細(xì)節(jié)。只要用戶達成了目標(biāo)，他們就會開心、滿足，并獲得成就感。你產(chǎn)品的服務(wù)為用戶提供了哪些便利，又存在著哪些瑕疵。

這些粗糙的草圖遠(yuǎn)遠(yuǎn)要比追波上那堆PNG要重要得多。從產(chǎn)品創(chuàng)立伊始到成品的推出，在這一套程序當(dāng)中，PSD文件和PNG圖 片是我認(rèn)為最不吸引人也是最無用的材料。更為重要的是設(shè)計中如何權(quán)衡輕重做出取舍的思考和討論的過程，比如產(chǎn)品的優(yōu)缺點考量，如何將設(shè)計匹配公司的愿景， 抑或是解決產(chǎn)品的架構(gòu)問題。所有這些白板草圖，手繪稿，甚至在餐巾紙后面勾勾畫畫的解決方案才是設(shè)計者應(yīng)該發(fā)布在追波上的，我更希望看到這些。就連 產(chǎn)品敘述文檔 都比單單一個蒼白的PNG或者PDF文檔來的重要。

思考一下設(shè)計的四個層面

設(shè)計是一個多層面的過程。以我的經(jīng)驗而言，如何依次經(jīng)過這幾個層面來思考是有一個最佳順序的。最簡單的一種就是回想一下這四個層面： 

我看見一個又一個的設(shè)計師單單專注于第四個層面而完全忽視了其他因素，這樣自下而上的方式做出來的設(shè)計當(dāng)然不如至上而下。如果其他三個層面的問題還 沒有解決好，那么諸如柵格、字體、色彩、美感等方面的深入都是無用功。許多設(shè)計師說他們這樣考慮過而沒有付諸行動，是因為有時候只是覺得畫一些好看的圖 片，和把自己掩埋在像素中比處理一些復(fù)雜的商業(yè)決策和人際關(guān)系要更加有趣。只關(guān)注第四個層面的因素，這無傷大雅，但這只是畫畫而不是設(shè)計。這樣的話，你是 一個數(shù)字藝術(shù)家，但并不是一個設(shè)計師。

設(shè)計系統(tǒng)越來越重要，因為網(wǎng)絡(luò)無處不在

網(wǎng)絡(luò)的發(fā)明將帶來自工業(yè)革命以來最大的社會變更。網(wǎng)絡(luò)滲透到每一個角落，它在我們的家里，在我們的辦公場所，當(dāng)我們熟睡的時候在床頭，在我們的口袋 中走到哪里跟到哪里。網(wǎng)絡(luò)隨時隨地與我們同在。并逐漸來到我們的車?yán)?，衣服上，進入到我們所擁有的一切，還被用來檢測我們的健康。到2020年為止，或更早，所有的業(yè)務(wù)都會基于網(wǎng)絡(luò)而存在。正如 Charles Eames 曾經(jīng)說過，“最終一切都會相互連接起來”：

靜態(tài)網(wǎng)頁設(shè)計是一個在垂死邊緣的職業(yè)。隨著移動技術(shù)驚人的發(fā)展，不同的API、SDK涌現(xiàn)，以及平臺與產(chǎn)品之間開放的合作關(guān)系，這一切描繪出了一個無比清晰的未來，那時我們都將參與到系統(tǒng)化的設(shè)計中。將滿是線框圖的PDF作為交付品這樣的情況即將逝去，Photoshop也已經(jīng)是一個衰落中的設(shè)計工具。推動我們水平進步的設(shè)計師們，往往沉浸在手繪稿、白板稿和原型工具上（Quartz Composer, After Effects, Keynote, CSS/HTML）。

這就是有人說牛逼設(shè)計師應(yīng)該學(xué)學(xué)代碼的原因之一。無論你贊同與否，設(shè)計師的確需要通過探討系統(tǒng)中組件之間的聯(lián)系去定義問題和尋求解決方案，而不是通 過摳像素來做這個事。實現(xiàn)可交互的原型，當(dāng)真實操作中不可避免地反饋出設(shè)計時被忽視的問題和沒有預(yù)先想到的狀況時，他們就可以對此進行細(xì)節(jié)調(diào)整。在真實的 交互中去感受，往往能令你對你設(shè)計的產(chǎn)品有更好的理解。

我們做設(shè)計時采用的方法體系

在 Intercom，我們用 Clay Christensen（哈佛商學(xué)院教授）法 來進行產(chǎn)品設(shè)計。我們把每一個設(shè)計問題置于一個方法體系中，聚焦于引發(fā)問題的事件或者場景，動機和預(yù)期，以及期望目標(biāo)：

當(dāng)_____的時候，我打算_____，這樣我就可以_____。

舉個栗子：當(dāng)重要的用戶注冊的時候，我們需要被告知，這樣我就可以和他們開始對話。

這給我們理清了思路。我們可以將這個方法使用到設(shè)計任務(wù)中，從而考慮優(yōu)先級。這確保我們始終能思考設(shè)計的四個層面。我們可以知道系統(tǒng)里的哪些組件是 這個工作的一部分，明白產(chǎn)品內(nèi)不同模塊的相互關(guān)系和促成這些關(guān)系的必要互動。在達到視覺設(shè)計之前，我們可以自上而下地從目標(biāo)、架構(gòu)，到交互這個順序來進行 設(shè)計。

在使用這個方法的同時, 我們正在建立一個式樣庫，來幫助我們達到設(shè)計工作的系統(tǒng)性。我們將會通過運用式樣庫的代碼而不是用Photoshop來進行更多的設(shè)計。雖說這一過程并不完美，但我們會反復(fù)改進。

我想了解在讀完這個以后你對于如何工作這方面有什么共鳴，請在下方評論。

更新

為了回復(fù)這里和twitter等地的評論，我寫了一篇新文章——如何篩選一個設(shè)計師。

一些朋友在Twitter和HN上認(rèn)為我將視覺設(shè)計和體驗設(shè)計弄混了，我并不贊同。我認(rèn)為，你無法在沒有考慮交互和系統(tǒng)的情況下，來做一個產(chǎn)品的視覺設(shè)計。我們并不是在畫圖，我們不只是設(shè)計海報或道標(biāo)而已。