設計追波風!值得每個設計師閱讀思考的深度剖析文 - 優設網 - UISDC

設計追波風!值得每個設計師閱讀思考的深度剖析文

2015/02/13 23721評論區

the-dribbblisation-of-design-1

編者按:這篇博文來自國外,一經發表即掀起設計圈的一陣轟動,文章言辭雖激烈但一針見血,戳痛處也不忘給干貨,現在騰訊的Wellso同學把它翻譯過來,Dribbble 大牛務必冷靜閱讀。

前言

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

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

文章是2月前Sam推薦給我的,隨后到 twitter 上獲得了作者的授權,在這里也應作者需要,貼上 Intercom 的官博連接: 。

譯文開始,Dribbble 大牛務必冷靜閱讀。 =D

提醒,搭配此文閱讀效果更佳:《重磅推薦!如何設計傳單才不會被人隨手扔掉?》

設計追波風

[ISUX轉譯]設計追波風

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

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

“屌爆了!”Dribbble就是用這種形式來鼓勵人人炫技

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

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

[ISUX轉譯]設計追波風

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

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

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

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

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

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

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

[ISUX轉譯]設計追波風

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

在使命和愿景之后的,則是產品的架構。不是指技術層面上的器械,而是產品內各部分之間彼此的關聯,是一個總體的系統。我在 Facebook 上班的第一天早上,Chris Cox(產品VP)做了一個絕妙的演講 。下面的聽眾來自公司各個部分, Chris 侃侃而談,然后著重論述產品的架構,以及它是如何與公司的目標關聯的。

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

[ISUX轉譯]設計追波風

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

[ISUX轉譯]設計追波風

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

云南体彩网一旦你明確產品清晰的使命、愿景和架構,你就可以開始思考其它的細節。只要用戶殺青了目標,他們就會開心、滿足,并獲得造詣感。你產品的服務為用戶提供了哪些方便,又存在著哪些瑕疵。

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

思考一下設計的四個層面

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

[ISUX轉譯]設計追波風

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

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

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

[ISUX轉譯]設計追波風

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

云南体彩网這就是有人說牛逼設計師應該學學代碼的原因之一。無論你贊同與否,設計師切實其實需要通過探討系統中組件之間的聯系去界說問題和尋求解決方案,而不是通過摳像素來做這個事。實現可交互的原型,當真實操作中弗成避免地反饋出設計時被忽視的問題和沒有預先想到的狀況時,他們就可以對此進行細節調劑。在真實的交互中去感受,往往能令你對你設計的產品有更好的理解。

設計師代碼指南:

  1. 《給設計師們的代碼指南!HTML與CSS簡介(一)》
  2. 《給設計師們的代碼指南!代碼里的圖層(二)》
  3. 《給設計師們的代碼指南!定位與結構(三)》

我們做設計時采取的方法體系

在 Intercom,我們用 來進行產品設計。我們把每一個設計問題置于一個方法體系中,聚焦于引發問題的事件或者場景,念頭和預期,以及期望目標:

當_____的時候,我盤算_____,這樣我就可以_____。

云南体彩网舉個栗子:當重要的用戶注冊的時候,我們需要被告知,這樣我就可以和他們開始對話。

這給我們理清了思路。我們可以將這個方法使用到設計任務中,從而考慮優先級。這確保我們始終能思考設計的四個層面。我們可以知道系統里的哪些組件是這個工作的一部分,明白產品內分歧模塊的相互關系和促成這些關系的需要互動。在達到視覺設計之前,我們可以自上而下地從目標、架構,到交互這個順序來進行設計。

云南体彩网在使用這個方法的同時, 我們正在建立一個式樣庫,來贊助我們達到設計工作的系統性。我們將會通過運用式樣庫的代碼而不是用Photoshop來進行更多的設計。雖說這一過程并不完美,但我們會反復改進。

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

更新

為了回復這里和twitter等地的評論,我寫了一篇新文章 ——?。

云南体彩网一些朋友在Twitter和HN上認為我將視覺設計和體驗設計弄混了,我并不贊同。我認為,你無法在沒有考慮交互和系統的情況下,來做一個產品的視覺設計。我們并不是在畫圖,我們不只是設計海報或道標而已。

【想成為解決問題的設計師?來看實戰項目!】

什么樣的海報設計能讓人停住腳步?
《設計易容術!如何設計一張高品位高水準的海報(二)》

瞬間提高瀏覽量的設計心理學是怎樣的?
《超實用的設計心理學!怎么用隱喻設計引導用戶?》

讓設計真真正正為問題服務!
《秒變專業范兒!如何避免設計中有廉價的感覺》

原文地址:

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
“優設網7daer.cn“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.7daer.cn/book/
設計微博:擁有粉絲量90萬的人氣微博 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.7daer.cn
官方微信:想在手機上、被窩里獲取設計教程和各種意想不到的”福利”嗎?添加優設哥微信號:youshege

chat-yinliu-pic

優設大課堂

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址:http://www.7daer.cn/the-dribbblisation-of-design

發表評論 加載中....

評論加載中....

uisdc

云南体彩网評論區都快餓癟了,看看我期盼的小眼神...

您還沒有登錄

優設啟用更平安省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
云南体彩网 2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里