編者按：如何形成自己的設(shè)計(jì)方法，建立交付物的衡量標(biāo)準(zhǔn)，優(yōu)化協(xié)同模式。在這篇文章里，你可以看到一個(gè)阿里專業(yè)設(shè)計(jì)師是如何進(jìn)行自我提升的。

鴻影：如果2015對(duì)我來說尚處于用戶體驗(yàn)設(shè)計(jì)的職場(chǎng)入門階段，2016的核心則是開始撕下初級(jí)與新人標(biāo)簽的進(jìn)階修煉。4月份的2016 S1開始的時(shí)候，我給自己設(shè)定了包括形成個(gè)人設(shè)計(jì)方法論與應(yīng)用案例等一系列目標(biāo)，如今S1結(jié)束，也是時(shí)候?qū)@段時(shí)間的進(jìn)階修煉來一個(gè)總結(jié)回顧了。

形成自己的設(shè)計(jì)方法

在公司內(nèi)部經(jīng)常會(huì)有一些跨部門的UED分享活動(dòng)，聽下來個(gè)人最明顯的一點(diǎn)感觸就是，這些來分享的設(shè)計(jì)師普遍有著一套自己思考總結(jié)出來的設(shè)計(jì)方法論，并且有成功應(yīng)用案例支撐。

也許有人會(huì)有疑惑，現(xiàn)在關(guān)于設(shè)計(jì)方法的輪子到處都是，網(wǎng)上隨便一搜就能找到某某大廠某某大牛的設(shè)計(jì)方法分享，直接拿來用就好了，為什么還要費(fèi)心費(fèi)力自己造輪子呢？

在我自己的設(shè)計(jì)方法還沒有完全成型時(shí)，我一度很迷信于網(wǎng)上別人的各種設(shè)計(jì)方法的分享，并試圖在自己的項(xiàng)目里加以運(yùn)用，但結(jié)果卻差強(qiáng)人意：設(shè)計(jì)推導(dǎo)的過程看似洋洋灑灑專業(yè)性十足，拿出來給別人一看一講就發(fā)現(xiàn)漏洞百出；有時(shí)為了套方法而套方法，體驗(yàn)地圖一類的輸出物看似有模有樣，最后項(xiàng)目做完了才發(fā)現(xiàn)設(shè)計(jì)方案時(shí)基本沒用到……雖然自己用的都是別人經(jīng)過驗(yàn)證的設(shè)計(jì)方法，但卻沒有理解透這些方法的應(yīng)用場(chǎng)景與局限所在，也不清楚哪些環(huán)節(jié)其實(shí)并非必要存在，自然也讓實(shí)際的應(yīng)用效果大打折扣。而靠自己思考、沉淀和交流改進(jìn)出來的設(shè)計(jì)方法，理解和運(yùn)用起來則要透徹順手很多。

在很長(zhǎng)一段時(shí)間里面，網(wǎng)頁中的背景圖片元素，一直都生活在CSS、JS甚至視頻的陰影當(dāng)中，它的“參與感”并不強(qiáng)烈。不過隨著審美和用戶需求的逐步變化，背景圖片在網(wǎng)頁裝飾上，開始發(fā)揮著越來越重要的作用。

當(dāng)然，從總體上來看，變化并不明顯，但是在絕大多數(shù)的情況下，背景圖片開始作為主要的視覺驅(qū)動(dòng)力而存在。

傳統(tǒng)意義上的背景主要是使用圖片，近幾年開始流行視頻背景了。而這些主要還是集中在網(wǎng)站的頁頭、Banner等位置，大多用來歡迎用戶，推薦內(nèi)容。許多網(wǎng)站都采取了相似的策略，讓用戶有所期待。

隨著動(dòng)效的流行，現(xiàn)在越來越多的設(shè)計(jì)師開始試圖將CSS3、HTML5和JS等技術(shù)融入到背景設(shè)計(jì)中來，尋求全新的解決方案。事實(shí)上，現(xiàn)在已經(jīng)有四種不同類型的動(dòng)態(tài)背景設(shè)計(jì)方案，它們風(fēng)格都非常符合時(shí)下流行的趨勢(shì)，且都具備不俗的發(fā)展?jié)摿?，今天我們聊聊這四種風(fēng)格前衛(wèi)大氣的背景設(shè)計(jì)。

動(dòng)效能講述故事。和圖片不同，動(dòng)效能夠呈現(xiàn)變化的過程，講述一段簡(jiǎn)短而有趣的故事，能夠同你進(jìn)行對(duì)話：“嘿，你該看這個(gè)按鈕了”或者“哦耶！你剛剛完成了一個(gè)操作！”不過，動(dòng)效的目標(biāo)并不是單純的娛樂用戶，而是幫助用戶了解交互的效果和界面中發(fā)生的變化，讓用戶更為有效地使用你的APP。Zurb 有一句話很好的解釋了這一點(diǎn)：

“我們?cè)O(shè)計(jì)的不再僅僅只是靜態(tài)的界面，實(shí)際上，我們所設(shè)計(jì)的是用戶從界面獲得內(nèi)容的過程?！?

動(dòng)效廣泛運(yùn)用于網(wǎng)頁內(nèi)容和背景當(dāng)中，用來強(qiáng)化功能，提升美感：它會(huì)直接影響用戶的行為，引導(dǎo)用戶注意到特定的內(nèi)容，呈現(xiàn)狀態(tài)，幫助用戶找到他們想要的內(nèi)容，達(dá)成目標(biāo)。想要借助動(dòng)效提升用戶體驗(yàn)，可以參考下面的指引來進(jìn)行優(yōu)化：

進(jìn)入2016年后，我們會(huì)發(fā)現(xiàn)行業(yè)在體驗(yàn)設(shè)計(jì)上出現(xiàn)了很多新的元素，從我們平時(shí)經(jīng)常瀏覽的設(shè)計(jì)社區(qū)中，這些新元素出現(xiàn)的頻率越來越高，比如彩色投影、雙色調(diào)漸變?cè)O(shè)計(jì)等，我們也慢慢開始接受這些新變化，并且逐步應(yīng)用到我們的產(chǎn)品中。這篇文章的初衷是希望能更系統(tǒng)更全面地梳理出一份流行趨勢(shì)的分析，能對(duì)我們平時(shí)的工作能產(chǎn)生一定的指導(dǎo)作用。

一、使用模糊背景

模糊背景和iOS毛玻璃效果非常的相似，也符合時(shí)下流行的扁平化和現(xiàn)代風(fēng)的設(shè)計(jì)，設(shè)計(jì)效果十分的賞心悅目，可以很好的和幽靈按鈕以及時(shí)下流行的元素搭配起來，提升用戶體驗(yàn)。

以淘寶電影為例，采用的是虛化電影海報(bào)作為背景，這樣做的好處是每一個(gè)頁面的頭部效果都不一樣，這樣的排版視覺效果更佳，同樣也突出電影信息等主要內(nèi)容。從設(shè)計(jì)的角度來看，這也很容易實(shí)現(xiàn)，讓內(nèi)容模塊變的清晰，同時(shí)可以規(guī)避復(fù)雜的設(shè)計(jì)，還可以降低設(shè)計(jì)成本，花最少的時(shí)間達(dá)到最大的效果。

從今年4月份開始，我被安排負(fù)責(zé)一個(gè)直播項(xiàng)目，設(shè)計(jì)之路可謂曲奇坎坷，難得的設(shè)計(jì)經(jīng)驗(yàn)讓我對(duì)交互設(shè)計(jì)本身有了一些新的認(rèn)識(shí)。結(jié)合自身的感悟，我自認(rèn)為交互設(shè)計(jì)師除了專業(yè)能力的要求外，還應(yīng)該具備以下素質(zhì)：

1，業(yè)務(wù)深度帶來業(yè)務(wù)驅(qū)動(dòng)力

在工作之初，我認(rèn)為無論負(fù)責(zé)什么項(xiàng)目，交互設(shè)計(jì)都是一種解決復(fù)雜問題的能力，從設(shè)計(jì)分析到設(shè)計(jì)產(chǎn)出是具有絕對(duì)的普適應(yīng)；而且隨著設(shè)計(jì)能力的提升，經(jīng)驗(yàn)的積累，這種普適性更加凸顯；這一層我并不否認(rèn)，但交互設(shè)計(jì)師只聚焦于普適性可能永遠(yuǎn)都處于門外漢的水準(zhǔn)；有機(jī)會(huì)專門負(fù)責(zé)直播項(xiàng)目，讓我不得不接觸和使用各種直播App，不得不和很多專門做直播的人合作，在這過程中，讓我對(duì)于直播業(yè)務(wù)有了深入了解。

舉個(gè)栗子，比如設(shè)計(jì)一個(gè)直播的發(fā)布流程。

乍一看許多APP的布局并不復(fù)雜，感覺換成自己也能設(shè)計(jì)出來，但是當(dāng)你真的開始著手設(shè)計(jì)這么一個(gè)APP的原型的時(shí)候，會(huì)發(fā)現(xiàn)事情并不是那么簡(jiǎn)單?？粗鴦e人已經(jīng)設(shè)計(jì)完成的設(shè)計(jì)可能覺得不難，可是當(dāng)自己動(dòng)手的時(shí)候，在特定的元素的選取和設(shè)計(jì)上很容易陷入困局，這個(gè)時(shí)候才明白它的難點(diǎn)并不在于工作量的多少，設(shè)計(jì)者常常深陷于細(xì)節(jié)構(gòu)建的囹圄，這才是它的困難之處。即使是元素與元素之間的分隔方式，都能隨隨便便用一整篇文章來進(jìn)行探討。

傳統(tǒng)的分隔方式

在UI界面中，最傳統(tǒng)也是最常見的分隔方式用的是線，將視覺上或者內(nèi)容上需要區(qū)分的內(nèi)容用橫向或者縱向的細(xì)線區(qū)分開來，它幫助用戶了解頁面的層次結(jié)構(gòu)，賦予頁面內(nèi)容以組織性。

啟動(dòng)頁、空狀態(tài)、動(dòng)畫反饋、框架界面… 今天提到的這4種狀態(tài)，都是容易被忽視，而又能讓移動(dòng)App 脫穎而出的細(xì)節(jié)。如何做好這4個(gè)細(xì)節(jié)的用戶體驗(yàn)設(shè)計(jì)？今天這篇好文總結(jié)了關(guān)鍵的幾個(gè)原則。

啟動(dòng)頁

當(dāng)用戶打開 app 時(shí)，最不能做的事情就是讓他們等待。但是如果 app 的初始設(shè)置非常耗時(shí)，又不可能優(yōu)化該怎么辦？你不得不讓用戶等。如果他們?cè)敢獾龋愕弥廊绾?nbsp;吸引他們。啟動(dòng)頁解決了等待的問題，讓你有一個(gè)簡(jiǎn)潔有力的窗口來吸引用戶。

文本框是設(shè)計(jì)工作中常見的組件之一，無論是PC還是無線，大多僅是樣式上的不同，它們的交互行為上是可以相互參照的。本文想從這一簡(jiǎn)單的組件出發(fā)，讓大家看到交互設(shè)計(jì)師在工作中的邏輯思考方法，從而達(dá)到見微知著的直觀感受。

先來做個(gè)設(shè)計(jì)需求吧！

這個(gè)設(shè)計(jì)需求是：我們需要用戶填寫活動(dòng)的名稱。

第一反應(yīng)，這個(gè)是用來收集信息的，需要用戶填寫內(nèi)容，并提交給系統(tǒng)，應(yīng)該使用文本框。

然后大筆一揮，設(shè)計(jì)如下圖：

團(tuán)隊(duì)每周例會(huì)都有專業(yè)分享環(huán)節(jié)，快輪到我的時(shí)候，我問大家想聽什么設(shè)計(jì)專業(yè)話題。我心里想著這些話題：交互設(shè)計(jì)進(jìn)階，設(shè)計(jì)與商業(yè)，設(shè)計(jì)視野拓展，設(shè)計(jì)推動(dòng)力，設(shè)計(jì)創(chuàng)新，設(shè)計(jì)新動(dòng)力等，想著大家對(duì)哪個(gè)話題感興趣，我就準(zhǔn)備好并好好講。結(jié)果，大家一致要求我講，如何成為網(wǎng)紅。。。

我當(dāng)然不是網(wǎng)紅，不過我知道大家開玩笑之余想聽什么，所以我分享了這個(gè)話題，專業(yè)文章寫作經(jīng)驗(yàn)，給團(tuán)隊(duì)分享一下自己寫設(shè)計(jì)專業(yè)文章的經(jīng)驗(yàn)和故事。

從2012年3月開始到現(xiàn)在，我已經(jīng)保持寫作習(xí)慣4年半，寫作內(nèi)容有60%是設(shè)計(jì)專業(yè)文章，20%是職業(yè)發(fā)展文章，20%是隨筆旅游類文章，一大部分發(fā)布出來了，一小部分自己留著讀。在這次分享中，除了設(shè)計(jì)專業(yè)文章，我也講了一些職業(yè)發(fā)展、隨筆旅游類文章的寫作經(jīng)驗(yàn)。

編者按：什么是設(shè)計(jì)提案？設(shè)計(jì)提案怎么做？如何組織設(shè)計(jì)提案？如何增強(qiáng)提案的說服力？設(shè)計(jì)提案要注意哪些點(diǎn)？今天@南宮若沁 這篇全面系統(tǒng)的文章，幫你徹底搞懂這些問題。

什么是設(shè)計(jì)提案？

設(shè)計(jì)提案，簡(jiǎn)言之就是基于現(xiàn)狀，針對(duì)存在的問題提出設(shè)計(jì)的解決方案。目的是為了與業(yè)務(wù)方達(dá)成共識(shí)，在后續(xù)的工作中互相支持，促進(jìn)最后的項(xiàng)目落地。

在商業(yè)設(shè)計(jì)中，常見于設(shè)計(jì)團(tuán)隊(duì)將自主驅(qū)動(dòng)的設(shè)計(jì)方案“賣”給業(yè)務(wù)方，獲得認(rèn)可，并提供相關(guān)技術(shù)合作，達(dá)成共贏。