設計追波風

 　　前言

　　13年底，Intercom 的產品VP Paul Adams 在 Intercom 官博發表了 一篇博文 。文章講述了網絡上設計社區裡普遍存在的一種現象，大意是“許多設計師在社區中分享的作品往往是為了炫技，而產品的邏輯通常都經不起推敲的，真正優秀的設計應該從更高的層面出發，而不只是做表面上的工作”。

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

　　設計追波風

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

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

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

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

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

　　設計最重要的一步，往往並不會去追求外觀的美

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

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

　　這就是為什麼追波的許多“ReDesign”類的作品實屬愚蠢。因為許多人做設計的時候，並不清楚這個產品的淵源，用戶真實的需求，技術有哪些限制，深層的組織架構又如何。

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

　　產品設計總是與使命，願景以及架構息息相關

　　從廣泛的構思到像素級的細節，設計師應該始終思考公司的使命、願景和產品架構。他們在設計中所做的每件事都需經歷這個過程。

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

　　在使命和願景之後的，則是產品的架構。不是指技術層面上的東西，而是產品內各部分之間彼此的關聯，是一個總體的系統。我在 Facebook 上班的第一天早上，Chris Cox(產品VP)做了一個絕妙的演講 (你可以點開感受一下) 。下面的聽眾來自公司各個部門， Chris 侃侃而談，然後著重闡述產品的架構，以及它是如何與公司的目標關聯的。

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

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

　　我甚至沒有印象在追波上有看到過類似上圖這種表述設計思路的架構圖。很少能看到設計師講述他的作品如何匹配需求目標，如何驅使產品的視野向前，或是在整個架構中發揮了什麼作用等等，以呈現這些設計的重要度。這應當是設計的基本，而非特例。

　　一旦你明確產品清晰的使命、願景和架構，你就可以開始思考其它的細節。只要用戶達成了目標，他們就會開心、滿足，並獲得成就感。你產品的服務為用戶提供了哪些便利，又存在著哪些瑕疵。

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

　　思考一下設計的四個層面

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

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

　　設計系統越來越重要，因為網絡無處不在

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

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

　　這就是有人說牛逼設計師應該學學代碼的原因之一。無論你贊同與否，設計師的確需要通過探討系統中組件之間的聯系去定義問