2015-2-15 藍(lán)藍(lán)設(shè)計(jì)的小編
藍(lán)藍(lán)設(shè)計(jì)( www.teruid.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
每一個(gè)扁平化界面設(shè)計(jì),都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
很好的一篇文章,藍(lán)藍(lán)推薦給大家。
許多設(shè)計(jì)師在社區(qū)中分享的作品往往是為了炫技,而產(chǎn)品的邏輯通常都經(jīng)不起推敲的,真正優(yōu)秀的設(shè)計(jì)應(yīng)該從更高的層面出發(fā),而不只是做表面上的工作。
13年底,Intercom 的產(chǎn)品VP Paul Adams 在 Intercom 官博發(fā)表了 一篇博文 。文章講述了網(wǎng)絡(luò)上設(shè)計(jì)社區(qū)里普遍存在的一種現(xiàn)象,大意是“許多設(shè)計(jì)師在社區(qū)中分享的作品往往是為了炫技,而產(chǎn)品的邏輯通常都經(jīng)不起推敲的,真正優(yōu)秀的設(shè)計(jì)應(yīng)該從更高的層面出發(fā),而不只是做表面上的工作”。
文章發(fā)布后,在 Twitter 、HN 及博客評(píng)論下引起了反響。雖然部分內(nèi)容在一些設(shè)計(jì)師眼里看起來比較有攻擊性(也就是俗稱“開噴”),甚至還帶有些地圖炮,但是文中關(guān)于“設(shè)計(jì)的四個(gè)層次”以及“when..I want to..then I can…”等設(shè)計(jì)觀點(diǎn)和方法論都非常值得我們回味并運(yùn)用到工作當(dāng)中。
文章是2月前Sam推薦給我的,隨后到 twitter 上獲得了作者的授權(quán),在這里也應(yīng)作者需要,貼上 Intercom 的官博連接:http://blog.intercom.io/ 。
譯文開始,Dribbble 大牛務(wù)必冷靜閱讀。 =D
__________________以下為譯文正文__________________
現(xiàn)在的產(chǎn)品設(shè)計(jì)和交互設(shè)計(jì)界發(fā)生了一些奇怪的事情。一方面有著如 Ryan Singer 和 Julie Zhuo 這樣能寫出很贊的文章的人來推動(dòng)我們?cè)O(shè)計(jì)水平的發(fā)展。另一方面則是越來越多的人在 dribbble 上發(fā)布與交流他們的作品,不過最后結(jié)果是追波上的這些玩意反而使我們的水平倒退了。 我寫這篇文章不是在談追波的好壞是非,而是想探討什么才是追波真正的價(jià)值。我會(huì)將“產(chǎn)品設(shè)計(jì)”貫穿始終,尤其是在談到用戶體驗(yàn)和交互設(shè)計(jì)的時(shí)候。
去年我看了不少應(yīng)聘 Facebook 和 Intercom 的求職者的設(shè)計(jì)作品,然后我發(fā)現(xiàn)了一個(gè)令人擔(dān)憂的現(xiàn)象。太多的設(shè)計(jì)師都在為吸引同行的關(guān)注而做設(shè)計(jì),而不是把心思花在解決實(shí)際的工作問題上。這點(diǎn)一直都是廣告創(chuàng)意領(lǐng)域才有的毛病(比起優(yōu)先解決客戶需求,做酷炫的作品拿個(gè)獎(jiǎng)攢點(diǎn)人氣似乎更重要),并且,這在產(chǎn)品設(shè)計(jì)以及交互設(shè)計(jì)的領(lǐng)域越來越突出。
我最近看的許多求職者的產(chǎn)品設(shè)計(jì)作品都聚焦在最表層,只關(guān)注于自己做的東西是否足夠的“追波味兒”。所以他們做出來的設(shè)計(jì),好看卻不中用。“完美的扁平化設(shè)計(jì)”,“像素級(jí)的精致度”,聽起來很犀利,但往往這些作品都沒有實(shí)現(xiàn)產(chǎn)品的真正目的。既沒有解決用戶每天真實(shí)遇到的問題,也沒有將完整的業(yè)務(wù)體系考慮進(jìn)來。追波上的設(shè)計(jì)師們喜歡鉆研界面的輪廓和絢麗的色彩等細(xì)節(jié),以此交朋結(jié)友,相互點(diǎn)贊和分享??赐陝e人的作品后,自己跟著興沖沖來一發(fā)。結(jié)果就是大量的設(shè)計(jì)在追波上都長得差不多。不管你做的是社交軟件,金融軟件,電商網(wǎng)站還是天氣應(yīng)用,同樣的風(fēng)格都可以套進(jìn)去使。你想想,如果給你的眼睛加一層毛玻璃效果,再看看這些界面,你能說出他們到底有什么不同嗎?
相比之下,優(yōu)秀的求職者通常都附上了他們的思考過程。手繪稿、圖解、利弊、 阻礙、權(quán)衡、解決方案,以及闡明交互和動(dòng)效的原型。在真實(shí)參數(shù)的考量下,描述產(chǎn)品的模塊如何移動(dòng)和變化,它們的動(dòng)態(tài)效果又如何呈現(xiàn)。
而糟糕的求職者,只會(huì)發(fā)他們的酷炫扁平 PNG 或牛逼線框 PDF 過來。沒有關(guān)于待解決問題的關(guān)鍵點(diǎn),看不到商業(yè)和技術(shù)層面的限制,也不描述使用場(chǎng)景和上下文聯(lián)系。這些完美的視網(wǎng)膜像素級(jí)的 PNG 或許在追波上看起來很贊,但實(shí)際上,這些東西卻連基本的設(shè)計(jì)價(jià)值都難以體現(xiàn)。
這就是為什么追波的許多“ReDesign”類的作品實(shí)屬愚蠢。因?yàn)樵S多人做設(shè)計(jì)的時(shí)候,并不清楚這個(gè)產(chǎn)品的淵源,用戶真實(shí)的需求,技術(shù)有哪些限制,深層的組織架構(gòu)又如何。
如果產(chǎn)品設(shè)計(jì)是在一個(gè)具體的約束中為用戶解決問題,這些自稱為產(chǎn)品/用戶體驗(yàn)設(shè)計(jì)師的人實(shí)際上就是個(gè)美工而已。設(shè)計(jì)師應(yīng)當(dāng)是藝術(shù)家,是造型師,創(chuàng)造美麗事物是一項(xiàng)偉大的工程,而不是像這樣悶著腦袋亂畫。
從廣泛的構(gòu)思到像素級(jí)的細(xì)節(jié),設(shè)計(jì)師應(yīng)該始終思考公司的使命、愿景和產(chǎn)品架構(gòu)。他們?cè)谠O(shè)計(jì)中所做的每件事都需經(jīng)歷這個(gè)過程。
設(shè)計(jì)始于公司最頂層的使命,其次是公司的愿景。在一個(gè)沒有清晰和可執(zhí)行的使命與愿景的團(tuán)隊(duì)中,很難開展設(shè)計(jì)。不要低估這個(gè)問題的重要性,如果你所在的公司缺少清晰的使命,那就將締造它作為你工作的一部分。
在使命和愿景之后的,則是產(chǎn)品的架構(gòu)。不是指技術(shù)層面上的東西,而是產(chǎn)品內(nèi)各部分之間彼此的關(guān)聯(lián),是一個(gè)總體的系統(tǒng)。我在 Facebook 上班的第一天早上,Chris Cox(產(chǎn)品VP)做了一個(gè)絕妙的演講 (你可以點(diǎn)開感受一下) 。下面的聽眾來自公司各個(gè)部門, Chris 侃侃而談,然后著重闡述產(chǎn)品的架構(gòu),以及它是如何與公司的目標(biāo)關(guān)聯(lián)的。
對(duì) Facebook 來說,架構(gòu)里有聯(lián)系人、好友、興趣點(diǎn),上至世界名牌下到街邊小店,還有一個(gè)能夠顯示所有這些事物關(guān)系的示意圖。這是一個(gè)非常清晰簡潔的產(chǎn)品,直擊目標(biāo)需求點(diǎn)。以我的經(jīng)驗(yàn)來說,在沒有一個(gè)清晰明了的構(gòu)架想法前是很難在這團(tuán)雜七雜八的玩意下做出一個(gè)超贊的設(shè)計(jì)的。在很多情況下,就像這個(gè)項(xiàng)目一樣,作為設(shè)計(jì)師應(yīng)該去解決問題并改進(jìn)架構(gòu)。比如談到Facebook跳轉(zhuǎn)其他應(yīng)用的時(shí)候,我通常會(huì)在白板上畫些類似這樣的概念圖:
產(chǎn)品的架構(gòu)不是信息堆砌,它不是一個(gè)頁面連著這個(gè)那個(gè)模塊和空間,或者一堆死板的演示告訴你點(diǎn)這里是干嘛的,一個(gè)交互原型通常就可以很好地處理這些信息。一個(gè)更深層次的表達(dá)方式,這就是產(chǎn)品的架構(gòu)圖。它能表現(xiàn)出各個(gè)模塊在整體系統(tǒng)中所處的位置以及它們的聯(lián)系。而在intercom我們是用這種方式進(jìn)行架構(gòu)設(shè)計(jì)的:
我甚至沒有印象在追波上有看到過類似上圖這種表述設(shè)計(jì)思路的架構(gòu)圖。很少能看到設(shè)計(jì)師講述他的作品如何匹配需求目標(biāo),如何驅(qū)使產(chǎn)品的視野向前,或是在整個(gè)架構(gòu)中發(fā)揮了什么作用等等,以呈現(xiàn)這些設(shè)計(jì)的重要度。這應(yīng)當(dāng)是設(shè)計(jì)的基本,而非特例。
一旦你明確產(chǎn)品清晰的使命、愿景和架構(gòu),你就可以開始思考其它的細(xì)節(jié)。只要用戶達(dá)成了目標(biāo),他們就會(huì)開心、滿足,并獲得成就感。你產(chǎn)品的服務(wù)為用戶提供了哪些便利,又存在著哪些瑕疵。
這些粗糙的草圖遠(yuǎn)遠(yuǎn)要比追波上那堆PNG要重要得多。從產(chǎn)品創(chuàng)立伊始到成品的推出,在這一套程序當(dāng)中,PSD文件和PNG圖片是我認(rèn)為最不吸引人也是最無用的材料。更為重要的是設(shè)計(jì)中如何權(quán)衡輕重做出取舍的思考和討論的過程,比如產(chǎn)品的優(yōu)缺點(diǎn)考量,如何將設(shè)計(jì)匹配公司的愿景,抑或是解決產(chǎn)品的架構(gòu)問題。所有這些白板草圖,手繪稿,甚至在餐巾紙后面勾勾畫畫的解決方案才是設(shè)計(jì)者應(yīng)該發(fā)布在追波上的,我更希望看到這些。就連 產(chǎn)品敘述文檔 都比單單一個(gè)蒼白的PNG或者PDF文檔來的重要。
設(shè)計(jì)是一個(gè)多層面的過程。以我的經(jīng)驗(yàn)而言,如何依次經(jīng)過這幾個(gè)層面來思考是有一個(gè)最佳順序的。最簡單的一種就是回想一下這四個(gè)層面:
我看見一個(gè)又一個(gè)的設(shè)計(jì)師單單專注于第四個(gè)層面而完全忽視了其他因素,這樣自下而上的方式做出來的設(shè)計(jì)當(dāng)然不如至上而下。如果其他三個(gè)層面的問題還沒有解決好,那么諸如柵格、字體、色彩、美感等方面的深入都是無用功。許多設(shè)計(jì)師說他們這樣考慮過而沒有付諸行動(dòng),是因?yàn)橛袝r(shí)候只是覺得畫一些好看的圖片,和把自己掩埋在像素中比處理一些復(fù)雜的商業(yè)決策和人際關(guān)系要更加有趣。只關(guān)注第四個(gè)層面的因素,這無傷大雅,但這只是畫畫而不是設(shè)計(jì)。這樣的話,你是一個(gè)數(shù)字藝術(shù)家,但并不是一個(gè)設(shè)計(jì)師。
網(wǎng)絡(luò)的發(fā)明將帶來自工業(yè)革命以來最大的社會(huì)變更。網(wǎng)絡(luò)滲透到每一個(gè)角落,它在我們的家里,在我們的辦公場(chǎng)所,當(dāng)我們熟睡的時(shí)候在床頭,在我們的口袋中走到哪里跟到哪里。網(wǎng)絡(luò)隨時(shí)隨地與我們同在。并逐漸來到我們的車?yán)?,衣服上,進(jìn)入到我們所擁有的一切,還被用來檢測(cè)我們的健康。到2020年為止,或更早,所有的業(yè)務(wù)都會(huì)基于網(wǎng)絡(luò)而存在。正如 Charles Eames 曾經(jīng)說過,“最終一切都會(huì)相互連接起來”:
靜態(tài)網(wǎng)頁設(shè)計(jì)是一個(gè)在垂死邊緣的職業(yè)。隨著移動(dòng)技術(shù)驚人的發(fā)展,不同的API、SDK涌現(xiàn),以及平臺(tái)與產(chǎn)品之間開放的合作關(guān)系,這一切描繪出了一個(gè)無比清晰的未來,那時(shí)我們都將參與到系統(tǒng)化的設(shè)計(jì)中。將滿是線框圖的PDF作為交付品這樣的情況即將逝去,Photoshop也已經(jīng)是一個(gè)衰落中的設(shè)計(jì)工具。推動(dòng)我們水平進(jìn)步的設(shè)計(jì)師們,往往沉浸在手繪稿、白板稿和原型工具上(Quartz Composer, After Effects, Keynote, CSS/HTML)。
這就是有人說牛逼設(shè)計(jì)師應(yīng)該學(xué)學(xué)代碼的原因之一。無論你贊同與否,設(shè)計(jì)師的確需要通過探討系統(tǒng)中組件之間的聯(lián)系去定義問題和尋求解決方案,而不是通過摳像素來做這個(gè)事。實(shí)現(xiàn)可交互的原型,當(dāng)真實(shí)操作中不可避免地反饋出設(shè)計(jì)時(shí)被忽視的問題和沒有預(yù)先想到的狀況時(shí),他們就可以對(duì)此進(jìn)行細(xì)節(jié)調(diào)整。在真實(shí)的交互中去感受,往往能令你對(duì)你設(shè)計(jì)的產(chǎn)品有更好的理解。
在 Intercom,我們用 Clay Christensen(哈佛商學(xué)院教授)法 來進(jìn)行產(chǎn)品設(shè)計(jì)。我們把每一個(gè)設(shè)計(jì)問題置于一個(gè)方法體系中,聚焦于引發(fā)問題的事件或者場(chǎng)景,動(dòng)機(jī)和預(yù)期,以及期望目標(biāo):
當(dāng)_____的時(shí)候,我打算_____,這樣我就可以_____。
舉個(gè)栗子:當(dāng)重要的用戶注冊(cè)的時(shí)候,我們需要被告知,這樣我就可以和他們開始對(duì)話。
這給我們理清了思路。我們可以將這個(gè)方法使用到設(shè)計(jì)任務(wù)中,從而考慮優(yōu)先級(jí)。這確保我們始終能思考設(shè)計(jì)的四個(gè)層面。我們可以知道系統(tǒng)里的哪些組件是這個(gè)工作的一部分,明白產(chǎn)品內(nèi)不同模塊的相互關(guān)系和促成這些關(guān)系的必要互動(dòng)。在達(dá)到視覺設(shè)計(jì)之前,我們可以自上而下地從目標(biāo)、架構(gòu),到交互這個(gè)順序來進(jìn)行設(shè)計(jì)。
在使用這個(gè)方法的同時(shí), 我們正在建立一個(gè)式樣庫,來幫助我們達(dá)到設(shè)計(jì)工作的系統(tǒng)性。我們將會(huì)通過運(yùn)用式樣庫的代碼而不是用Photoshop來進(jìn)行更多的設(shè)計(jì)。雖說這一過程并不完美,但我們會(huì)反復(fù)改進(jìn)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.teruid.com