如何為創(chuàng)意插上理性的翅膀,滴滴設(shè)計(jì)師和你一起回顧春節(jié)地圖小車 icon 換裝的設(shè)計(jì)全過程。
前言
新年剛過,元宵即臨,開工的小伙伴都身著新衣,領(lǐng)了紅包,是否還記得春節(jié)時(shí)載著你走門串戶的舞獅小車呢?
我們作為舞獅 icon 的設(shè)計(jì)師,在此將設(shè)計(jì)過程梳理成文,揭秘舞獅 icon 的誕生過程。文章分為兩部分:
地圖小車換裝回顧
滴滴出行 App 中除了常規(guī)地圖小車,類似春節(jié)舞獅的 icon 換裝設(shè)計(jì)已經(jīng)做過很多次了。在重大節(jié)日或發(fā)生熱點(diǎn)新聞時(shí),通過icon 換裝的形式來配合運(yùn)營活動(dòng)烘托活動(dòng)氣氛。
圣誕節(jié)的時(shí)候,小車變成了圣誕老人,駕著馴鹿雪橇帶著滿滿的禮物飛奔在地圖上;奧運(yùn)會(huì)火炬?zhèn)鬟f的時(shí)候,小車成了高舉火炬奔跑的火炬手,傳遞著奧運(yùn)精神;北京市7月暴雨的那天,小車成了一艘艘小船,幫助需要出行的人們航行在城市道路上……
今年的春節(jié) icon 設(shè)計(jì)就是文章開頭看到的舞獅了。做了多次的換裝設(shè)計(jì)后積累了一些方法和經(jīng)驗(yàn),現(xiàn)在借新年伊始大吉大利的時(shí)機(jī),以本次春節(jié)舞獅設(shè)計(jì)為例,和大家一起聊聊一個(gè)換裝 icon 設(shè)計(jì)是怎樣一步步煉成的。
地圖小車換裝設(shè)計(jì)全流程
換裝 icon 的設(shè)計(jì)過程分為7個(gè)階段,是不斷地發(fā)散、聚合、再發(fā)散的過程。
首先從活動(dòng)運(yùn)營方接到需求,分析審核需求是否存在不合理或難以產(chǎn)出設(shè)計(jì)的部分。通過這一步,為后續(xù)設(shè)計(jì)的順利執(zhí)行奠定基礎(chǔ),前期的需求分析溝通也能讓項(xiàng)目的上下游快速達(dá)成一致,避免后續(xù)產(chǎn)生疑問導(dǎo)致設(shè)計(jì)的反復(fù)影響進(jìn)度。
需求確定后,根據(jù)活動(dòng)主題發(fā)散關(guān)聯(lián)元素,進(jìn)行頭腦風(fēng)暴尋找創(chuàng)意點(diǎn),這也是整個(gè)階段里最瘋狂的部分。發(fā)散的目的是增大創(chuàng)意的可能性,正如萊納斯·鮑林所說,「為了有個(gè)好主意,必須要先有很多想法?!?/p>
然后結(jié)合設(shè)計(jì)的最終輸出環(huán)境,明確執(zhí)行挑戰(zhàn)有哪些,將發(fā)散的創(chuàng)意點(diǎn)一一通過這些挑戰(zhàn)進(jìn)行篩選,決策設(shè)計(jì)方案方向。隨后就是細(xì)化方案反復(fù)推敲,達(dá)到高質(zhì)量的輸出標(biāo)準(zhǔn)。
由于滴滴出行多業(yè)務(wù)形態(tài)的模式,設(shè)計(jì)方案需從一個(gè)方案延展至多條業(yè)務(wù)線,并保障所有業(yè)務(wù)線方案既整體統(tǒng)一又符合業(yè)務(wù)特性。方案確定后輸出切圖元素,推動(dòng)落地發(fā)布上線,并進(jìn)行跟蹤反饋。
整個(gè)設(shè)計(jì)的過程就是發(fā)散和聚合的規(guī)律交替,每個(gè)重復(fù)的過程與前一次相比都會(huì)更聚焦,也更關(guān)注細(xì)節(jié)。在發(fā)散階段,新選擇會(huì)出現(xiàn),在聚合階段則恰恰相反,要淘汰選項(xiàng)保留最合適的選擇。這種設(shè)計(jì)流程可普遍適用于創(chuàng)意類的設(shè)計(jì)需求。
接下來就對(duì)7個(gè)階段一一詳細(xì)介紹。
1. 分析活動(dòng)需求
換裝設(shè)計(jì)需求通常是由市場(chǎng)運(yùn)營活動(dòng)或?qū)嵤聼狳c(diǎn)活動(dòng)發(fā)起,希望通過 icon 烘托活動(dòng)氣氛,吸引用戶關(guān)注。曾經(jīng)也由設(shè)計(jì)師發(fā)起過換裝需求,目的是通過 icon 的視覺變化營造節(jié)日氣氛,增加產(chǎn)品的情感化表達(dá)拉近與用戶的距離。
但很快我們發(fā)現(xiàn),純視覺的 icon 變化在產(chǎn)品使用中是斷層的,強(qiáng)烈吸引了用戶注意,沒有活動(dòng)解釋,沒有后續(xù)操作,且不能為用戶帶來實(shí)際收益,這反而引發(fā)一些用戶的疑惑,也讓我們思考如何體現(xiàn)換裝設(shè)計(jì)的價(jià)值,于是制定了需求審核標(biāo)準(zhǔn)。
首先,需求要有多維度的運(yùn)營活動(dòng)背景,icon
換裝作為線上展示的活動(dòng)部分,通常還會(huì)有運(yùn)營對(duì)話框,運(yùn)營卡片等對(duì)活動(dòng)進(jìn)行解釋,引導(dǎo)用戶操作。其次,設(shè)計(jì)需求的執(zhí)行性強(qiáng),不破壞地圖小車本身的功能屬性。第三,活動(dòng)均為正向情緒的表達(dá),并為用戶普遍認(rèn)知事件。只有需求滿足了這三點(diǎn)才可進(jìn)行下一步。
換裝需求分為4類,熱點(diǎn)類、天氣類、節(jié)日類、商業(yè)類。每一類對(duì)設(shè)計(jì)的要求也不太一樣。
時(shí)事熱點(diǎn)類,要求設(shè)計(jì)師能夠快速產(chǎn)出設(shè)計(jì)方案,精準(zhǔn)匹配新聞發(fā)生的時(shí)間段。
天氣類需求在時(shí)間上具有不確定性,比如不確定今年的初雪是哪一天,要結(jié)合運(yùn)營策略提前準(zhǔn)備預(yù)案,避免臨時(shí)設(shè)計(jì)時(shí)間不足。
節(jié)日類需求時(shí)間固定,且較常規(guī),可根據(jù)運(yùn)營活動(dòng)排期提前2-3周準(zhǔn)備。本次春節(jié)舞獅 icon 設(shè)計(jì),就屬于節(jié)日類換裝設(shè)計(jì)。
商業(yè)類是商業(yè)合作往來,具有直接的商業(yè)收益,但商業(yè)需求要和滴滴的品牌氣質(zhì)高度契合才可。
2. 尋找最佳創(chuàng)意
這一步是整個(gè)設(shè)計(jì)流程最關(guān)鍵的步驟,我們希望用戶看到換裝 icon 時(shí)能夠快速感知其代表的活動(dòng)寓意。
從活動(dòng)主題出發(fā),不斷在網(wǎng)絡(luò)上和腦海中搜集提煉春節(jié)相關(guān)的關(guān)鍵元素,發(fā)散搜集需要多反復(fù)幾次,查找資料并和身邊的朋友交流溝通,盡可能全面多角度的進(jìn)行列舉,然后對(duì)其分類整理。此次我們搜集與整理了這些關(guān)鍵元素:
立體物體:燈籠、壽桃、元寶、祥云、葫蘆、布老虎、財(cái)神、門神、龍、鳳凰、生肖、年獸、舞獅、壽星、魚。
平面物體:對(duì)聯(lián)、福字、年畫、賀卡、窗花、臉譜。
代表顏色:紅色、金色。
裝飾紋樣:傳統(tǒng)花紋、象征符號(hào)、祥云。
不同類別的關(guān)鍵元素之間還可以進(jìn)行關(guān)聯(lián)組合,比如金色帶傳統(tǒng)花紋的元寶。
3. 明確執(zhí)行挑戰(zhàn)
進(jìn)行了需求分析,和廣泛的創(chuàng)意發(fā)散后,接下來就是要梳理設(shè)計(jì)的限制與挑戰(zhàn),從而對(duì)發(fā)散的創(chuàng)意元素進(jìn)行聚合收斂。經(jīng)過了多次地圖小車的換裝設(shè)計(jì),設(shè)計(jì)團(tuán)隊(duì)總結(jié)出了以下幾點(diǎn)設(shè)計(jì)挑戰(zhàn):尺寸限制、視角限制、要求認(rèn)知的普適性、要求可擴(kuò)展性。
表現(xiàn)面積小,小車圖標(biāo)尺寸大約只有88*48 px
小車圖標(biāo)設(shè)計(jì)最大的難點(diǎn)就是尺寸過小,通常常規(guī)功能性圖標(biāo)的大小約為40*40 px,而滴滴小車則是要在大約兩個(gè)功能性圖標(biāo)大小的面積里,畫出一個(gè)充滿細(xì)節(jié)的寫實(shí) icon,要保證清晰地表達(dá)出小車的形象、光影以及配飾細(xì)節(jié)等內(nèi)容。
例如繪制代駕 icon 中具有體積光感的眼睛細(xì)節(jié),就要求僅使用4個(gè)像素表達(dá)出來,許多優(yōu)秀的創(chuàng)意靈感,可能都會(huì)因?yàn)槊娣e過小的原因而被放棄。
小車圖標(biāo)需要俯視展示,并表明方向
因地圖為俯視視角,地圖上的小車也需要俯視展示。同時(shí)地圖上的小車要求保障用戶識(shí)別真實(shí)車輛的行進(jìn)方向和實(shí)時(shí)狀態(tài),所以圖標(biāo)設(shè)計(jì)要能夠分清頭尾,以指明前進(jìn)方向。
有時(shí)候 icon 俯視角度太難以表現(xiàn)其內(nèi)容,我們也會(huì)嘗試做成正面平視角度,并將360度旋轉(zhuǎn)方向去掉,改為地圖上平移前進(jìn),但這樣對(duì)用戶的習(xí)慣認(rèn)知有所影響,所以不到非必要條件不會(huì)采取這種方式。
圖標(biāo)的意象要符合認(rèn)知
以此次春節(jié)小車變裝為例,小車形象要凸顯春節(jié)氣息,并表達(dá)準(zhǔn)確、符合大眾認(rèn)知,不會(huì)產(chǎn)生錯(cuò)誤聯(lián)想或地區(qū)差異化矛盾。此外如果 icon 的意象本身和交通工具有所結(jié)合就更好了。
能夠支持六個(gè)業(yè)務(wù)線的差異化設(shè)計(jì)
滴滴出行是一個(gè)集合多業(yè)務(wù)形態(tài)的產(chǎn)品,比如注重效率的快車、出租車、小巴,注重服務(wù)和品質(zhì)的專車、豪華車等。這些業(yè)務(wù)線的小車圖標(biāo)在表現(xiàn)形式上是相近的,但傳達(dá)特性上又要傳達(dá)差異性。在做圖標(biāo)換裝設(shè)計(jì)時(shí),會(huì)先選擇一個(gè)業(yè)務(wù)線快車為基準(zhǔn),做出通用方案后再延展至所有業(yè)務(wù)線上,因此方案的可擴(kuò)展性就成了挑戰(zhàn)之一。
明確了設(shè)計(jì)挑戰(zhàn)后,結(jié)合以上限制與挑戰(zhàn),對(duì)上一步的廣泛創(chuàng)意方向進(jìn)行篩選。此次春節(jié)小車的設(shè)計(jì)要大眾認(rèn)同、直白明確顯而易見、可執(zhí)行可表現(xiàn),最終選擇了傳統(tǒng)花紋噴漆、車頂張貼福字、春節(jié)舞獅舞龍這幾種初步創(chuàng)意方向。
4. 決策設(shè)計(jì)方向
明確了執(zhí)行條件,有了初步的創(chuàng)意,接下來就要快速出草圖、出方案,建立評(píng)價(jià)標(biāo)準(zhǔn)決策創(chuàng)意的可行性,篩選出最終的設(shè)計(jì)方向。
畫草圖的過程就是將信息化的創(chuàng)意轉(zhuǎn)化為圖示的視覺設(shè)計(jì)的過程,而草圖的潛力在于從紙面經(jīng)過眼睛到大腦,然后返回紙面的信息循環(huán)之中。理論上信息通過循環(huán)的次數(shù)越多,變化的機(jī)遇也越多,隨機(jī)記錄、表達(dá)、討論設(shè)計(jì)構(gòu)思意向的草圖,能夠最大限度地解除方案構(gòu)思思維的表達(dá)束縛。經(jīng)過草圖的嘗試后,進(jìn)一步產(chǎn)出方案進(jìn)行評(píng)估與快速測(cè)試。
對(duì)方案的評(píng)估主要有3個(gè)維度:圖像清晰、表意直觀、氛圍營造。在團(tuán)隊(duì)內(nèi)部對(duì)待選方案從以上維度進(jìn)行打分評(píng)估。其中花紋方案在尺寸中無法清楚看到車身上的細(xì)節(jié);福字方案在氛圍營造上比較保守;舞龍方案因?yàn)楹投宋绻?jié)龍舟感覺相似,不能明確節(jié)日氛圍;舞獅方案總體上更符合標(biāo)準(zhǔn),且更具氛圍感與情感化。
除了以上幾個(gè)維度的評(píng)估,針對(duì)幾個(gè)方案,還在公司展開小范圍調(diào)查,舞獅也是更多非設(shè)計(jì)同事更喜歡的一個(gè)方案。綜合專業(yè)性的評(píng)估和快速的用戶測(cè)試,最終春節(jié)小車的設(shè)計(jì)方向?yàn)槲瑾{主題。
5. 深化設(shè)計(jì)細(xì)節(jié)
通過上面幾步已經(jīng)可以得到一個(gè)可靠的初步設(shè)計(jì)方案,現(xiàn)在就要從形態(tài)、光影、材質(zhì)、顏色四個(gè)方向進(jìn)行細(xì)化,完善其視覺表達(dá)。
形態(tài)
icon 形態(tài)上采用提取與重構(gòu)的設(shè)計(jì)方法,提取具有代表性的物體特征,轉(zhuǎn)化為視覺元素,將其不斷組合改善,重新塑造為新的設(shè)計(jì)。
此次視覺化的過程中,提取了舞獅頭部、舞獅步伐、面部表情、春節(jié)元素等,將元素不斷融合調(diào)整,要做到形態(tài)即整體協(xié)調(diào)又豐富生動(dòng)。舞獅的腳雖然小到看不清,但仔細(xì)看仍是有著功夫步在里面的。另外舞獅的背上增加了春節(jié)祝福文字,使
icon 更具趣味性,并且無論舞獅以正反方向前進(jìn)的時(shí)候 icon 中都有了能夠閱讀的視覺內(nèi)容,這也是此次方案的一個(gè)亮點(diǎn)了。
因地圖上常會(huì)出現(xiàn)多輛小車相互疊壓的狀態(tài),需要 icon 形態(tài)還是保持在一個(gè)塊狀的幾個(gè)形體中,即保持 icon 自身的整體性,也方便車輛之間進(jìn)行區(qū)分,保障界面的舒適性。
地圖 icon 采用俯視角度最合理,但俯視視角下很多事物識(shí)別難度加大,所以此次舞獅 icon 將正視的獅頭與俯視的身體結(jié)合,既保障了認(rèn)知度,還保持了俯視角度的功能性。這樣不同角度的形態(tài)組合,對(duì)不適合純俯視的元素非常適用。
光影
因 icon
是頂視圖且會(huì)360旋轉(zhuǎn),所以光影表現(xiàn)以頂視光為主,這樣多輛車不同角度的出現(xiàn)在界面中時(shí),光源仍是統(tǒng)一的。另外 icon
和地圖之間會(huì)有淡淡的一圈陰影,讓 icon 和地圖有所區(qū)分,但又和諧的停留在地圖上,這些陰影的深淺大小只能靠一遍遍嘗試才能找到最佳程度。
顏色
icon 本身尺寸較小,又有多個(gè) icon 疊壓的情況,所以需盡量保障 icon 在一個(gè)顏色體系內(nèi),顏色統(tǒng)一可以直觀的保障 icon 的整體感。一個(gè)主色搭配輔助色表現(xiàn)活動(dòng)氣氛,拿捏好顏色比例,做到整體不花哨即可。
材質(zhì)
地圖小車一直采用立體寫實(shí)的手法來表現(xiàn),通過玻璃反光,車頂高光,漸變肌理等帶給用戶真實(shí)感,從而對(duì)界面中的車輛信息感受到真實(shí)可信賴。頂視光源下要表現(xiàn)icon的立體感和材質(zhì)感是考驗(yàn)技法的,需要細(xì)致觀察和耐心打磨。
完成這一步后,就得到了一個(gè)以快車為基礎(chǔ)的通用方案,其它業(yè)務(wù)線的方案基調(diào)也就奠定了。
6. 延展設(shè)計(jì)方案
經(jīng)過與各業(yè)務(wù)線的協(xié)商溝通,此次確定六個(gè)業(yè)務(wù)線推出春節(jié)換裝設(shè)計(jì),因業(yè)務(wù)線都集中于一個(gè)應(yīng)用中,就要求地圖換裝 icon 既能夠保持整體風(fēng)格統(tǒng)一,還能表達(dá)業(yè)務(wù)特性。
我們聯(lián)想到了08年奧運(yùn)福娃的設(shè)計(jì),兩者都是多個(gè)統(tǒng)一又獨(dú)立的形象延展,其主要是通過顏色來進(jìn)行區(qū)分,輔助局部做差異化調(diào)整。
根據(jù)這樣的思路,快車是滴滴用戶量最大的業(yè)務(wù),使用了最具春節(jié)氣息的紅色,出租車延續(xù)使用了金黃色調(diào),專車與豪華車注重乘車品質(zhì)與服務(wù),分別使用了藏青色以及黑色,凸顯其高端尊貴的氣質(zhì)且保持與業(yè)務(wù)線品牌色系一致,同時(shí)將豪華車
icon 的眉毛進(jìn)行夸張化,更突出其豪華尊貴的形象,小巴注重價(jià)格實(shí)惠延續(xù)了原有 icon
的色彩,用高級(jí)灰作為其主色調(diào),而代駕也不能缺少春節(jié)的氣息,代駕師傅們就換上了紅色的春節(jié)唐裝。
另外每個(gè)舞獅的背上都增加了春節(jié)祝福文字,不同的文字既能夠讓舞獅代表不同的春節(jié)祝福,也代表了不同的業(yè)務(wù)線的氣質(zhì)差異,使形象更具趣味性。
7. 推動(dòng)方案落地
設(shè)計(jì)到了這個(gè)階段,就算是進(jìn)入收尾環(huán)節(jié)了。接著將方案切圖輸出,并保障和已有的方向、尺寸一致,方便替換。設(shè)定好上線時(shí)間與上線城市,后臺(tái)配置完成后,春節(jié)的舞獅就按時(shí)活躍在每個(gè)滴滴出行用戶的界面里了。
上線后還要對(duì)方案進(jìn)行跟蹤反饋,一般會(huì)從微博、脈脈等平臺(tái)中關(guān)注用戶輿情,把用戶評(píng)價(jià)按「不好,影響打車」、「一般,沒感覺」、「不錯(cuò),有意思」分類整理,由此評(píng)判此次方案是否展現(xiàn)了其價(jià)值。
小結(jié)
回顧整個(gè)設(shè)計(jì)路程,設(shè)計(jì)師通過發(fā)散—聚合—再發(fā)散的方法,快速理解需求找到爆發(fā)點(diǎn),放開思路探索創(chuàng)意的可行性;接著提煉設(shè)計(jì)的挑戰(zhàn)與限制,并反向利用限制條件來推動(dòng)思考,得到初步創(chuàng)意;再通過設(shè)計(jì)的快速嘗試與不斷試錯(cuò),完成方向的決策;細(xì)化打磨方案并挖掘方案的延展性;在最終設(shè)計(jì)落地發(fā)布后,保持持續(xù)的跟蹤與反饋。
從中我們所收獲的,不僅是完成一次次小車換裝設(shè)計(jì)任務(wù),還為今后的創(chuàng)意類設(shè)計(jì)需求提煉了標(biāo)準(zhǔn)化的流程與方法,更好的保障設(shè)計(jì)效率與質(zhì)量。