(如您查看內(nèi)容有缺失硬猫,請(qǐng)戳原文地址:艾藝信息)
追波上的設(shè)計(jì)師們喜歡鉆研界面的輪廓和絢麗的色彩等細(xì)節(jié),以此交朋結(jié)友对途,相互點(diǎn)贊和分享赦邻。看完別人的作品后实檀,自己跟著興沖沖來一發(fā)惶洲。結(jié)果就是大量的設(shè)計(jì)在追波上都長得差不多。不管你做的是社交軟件膳犹,金融軟件恬吕,電商網(wǎng)站還是天氣應(yīng)用,同樣的風(fēng)格都可以套進(jìn)去使须床。你想想铐料,如果給你的眼睛加一層毛玻璃效果,再看看這些界面豺旬,你能說出他們到底有什么不同嗎钠惩?
設(shè)計(jì)最重要的一步,并不會(huì)去追求外觀的美
相比之下族阅,優(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)得封。
產(chǎn)品設(shè)計(jì)總是與使命拷呆,愿景以及架構(gòu)息息相關(guān)
設(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)嚼松。盡量多在白板上畫些類似這樣的概念圖:
產(chǎn)品的架構(gòu)不是信息堆砌坷牛,它不是一個(gè)頁面連著這個(gè)那個(gè)模塊和空間,或者一堆死板的演示告訴你點(diǎn)這里是干嘛的蹂楣,一個(gè)交互原型通常就可以很好地處理這些信息反浓。一個(gè)更深層次的表達(dá)方式雷则,這就是產(chǎn)品的架構(gòu)圖度迂。它能表現(xiàn)出各個(gè)模塊在整體系統(tǒng)中所處的位置以及它們的聯(lián)系腊凶。
一旦你明確產(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圖片是最不吸引人也是最無用的材料。
更為重要的是設(shè)計(jì)中如何權(quán)衡輕重做出取舍的思考和討論的過程减江,比如產(chǎn)品的優(yōu)缺點(diǎn)考量染突,如何將設(shè)計(jì)匹配公司的愿景,抑或是解決產(chǎn)品的架構(gòu)問題您市。所有這些白板草圖觉痛,手繪稿,甚至在餐巾紙后面勾勾畫畫的解決方案才是設(shè)計(jì)者應(yīng)該分享的茵休。就連產(chǎn)品敘述文檔 都比單單一個(gè)蒼白的PNG或者PDF文檔來的重要薪棒。
思考一下設(shè)計(jì)的四個(gè)層面
設(shè)計(jì)是一個(gè)多層面的過程。如何依次經(jīng)過這幾個(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ì)師阎毅。
設(shè)計(jì)系統(tǒng)越來越重要,因?yàn)榫W(wǎng)絡(luò)無處不在
網(wǎng)絡(luò)的發(fā)明將帶來自工業(yè)革命以來最大的社會(huì)變更点弯。網(wǎng)絡(luò)滲透到每一個(gè)角落扇调,它在我們的家里,在我們的辦公場(chǎng)所抢肛,當(dāng)我們熟睡的時(shí)候在床頭肃拜,在我們的口袋中走到哪里跟到哪里痴腌。網(wǎng)絡(luò)隨時(shí)隨地與我們同在。并逐漸來到我們的車?yán)锶剂欤路鲜看希M(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)品有更好的理解纠炮。
我們做設(shè)計(jì)時(shí)采用的方法體系
把每一個(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)。