設(shè)計(jì)沖刺最早由谷歌提出針對(duì)帶領(lǐng)團(tuán)隊(duì)快速做創(chuàng)新設(shè)計(jì)并驗(yàn)證設(shè)計(jì)的基本流程。下面通過(guò)這篇文章，帶著大家來(lái)感受我們這次設(shè)計(jì)沖刺經(jīng)歷的過(guò)程、以及如何采用的一些定義方法、抉擇方法推導(dǎo)設(shè)計(jì)思路，希望對(duì)大家今后在主題設(shè)計(jì)中有所啟發(fā)。

此次項(xiàng)目是由我和我們組3位 UI設(shè)計(jì)師共同設(shè)計(jì)完成，在不影響主產(chǎn)品迭代的需求過(guò)程里，我們歷時(shí)一周碎片時(shí)間，經(jīng)歷理解主題、定義關(guān)鍵點(diǎn)、頭腦風(fēng)暴、聚焦創(chuàng)新思路、繪制草圖、效果6個(gè)過(guò)程，其中在效果落地中進(jìn)行很多次方案優(yōu)化，最終，在上線完成后獲得不錯(cuò)效果。

有人說(shuō)世界上有兩種通用的語(yǔ)言：一個(gè)是音樂(lè)，一個(gè)是足球。每屆世界杯結(jié)束后，總有一些旋律縈繞在耳邊，還有一些視覺(jué)元素印在腦海里。記得2014年巴西舉辦的世界杯，其中主題曲《we are one》、以及主題視覺(jué)設(shè)計(jì)充滿了巴西的特色讓人記憶猶新。

這次我們 bxd 設(shè)計(jì)團(tuán)隊(duì)為了響應(yīng)世界杯的運(yùn)動(dòng)精神，提升指旺APP 情感化的氛圍，把首頁(yè)8個(gè) icon 作為切入點(diǎn)，結(jié)合俄羅斯世界杯時(shí)效效應(yīng)，做一次具有創(chuàng)新性的主題設(shè)計(jì)。

一、理解主題、發(fā)散思路

1. 理解定義主題

在定義思路方向前，我們先搜集了俄羅斯素材、感受了主題曲《放飛自我》旋律以及往屆視覺(jué)表現(xiàn)，并進(jìn)行了相應(yīng)的分析。

主要集中在：如何抓住這次世界杯的核心精神？如何在指旺app 平臺(tái)上表現(xiàn)更有記憶點(diǎn)？

通過(guò)搜集的一些海報(bào)素材資料，我們提煉出2018俄羅斯世界杯2個(gè)關(guān)鍵點(diǎn)：運(yùn)動(dòng)精神、地域特色。

• 運(yùn)動(dòng)核心精神：放飛自我、激情活力。
• 記憶點(diǎn)：俄羅斯國(guó)家地域特色。

2. 發(fā)散——頭腦風(fēng)暴

在提煉出2個(gè)關(guān)鍵點(diǎn)后，我們從運(yùn)動(dòng)精神與俄羅斯特色為出發(fā)點(diǎn)，進(jìn)行了頭腦風(fēng)暴，不斷發(fā)散關(guān)鍵詞，盡可能多角度思考，突破舊的思路尋找最佳創(chuàng)意的切入點(diǎn)。

二、聚焦方向

在頭腦風(fēng)暴后，我們把發(fā)散的關(guān)鍵詞進(jìn)行歸類整理，把思路鎖定在這幾個(gè)關(guān)鍵詞詞上：世界國(guó)旗、足球元素、俄羅斯特色、球星、運(yùn)動(dòng)員上。

把重要關(guān)鍵詞聚合形成3個(gè)設(shè)計(jì)思路：

• 思路1：世界各國(guó)國(guó)旗+足球元素
• 思路2：俄羅斯元素+足球元素
• 思路3：運(yùn)動(dòng)員+俄羅斯圖形

我們對(duì)3個(gè)思路的評(píng)審維度是：可行性、創(chuàng)新性。

按照思路1、思路2我們迅速找了一些參考，做了一些對(duì)比。

思路1，國(guó)旗元素因?yàn)樽罱K八強(qiáng)不確定性較大——可行性低。思路2，在設(shè)計(jì)上缺乏創(chuàng)新，拼的是寫實(shí)功底，和市場(chǎng)中我們常見(jiàn)的一些設(shè)計(jì)形式比較趨同——?jiǎng)?chuàng)新性低。思路3，從設(shè)計(jì)創(chuàng)新度和可行性上來(lái)說(shuō)，都占據(jù)較大優(yōu)勢(shì)。同時(shí)，我們還在設(shè)計(jì)組做了一些調(diào)查，發(fā)現(xiàn)大家都有相同的傾向，這更堅(jiān)定了思路3方向的確定。

三、草圖設(shè)計(jì)過(guò)程及效果表現(xiàn)

運(yùn)動(dòng)員+俄羅斯的思路確定后，我們開(kāi)始嘗試了幾組試驗(yàn)發(fā)現(xiàn)效果不是很好，人物顯得很小，動(dòng)作看不清楚，風(fēng)格也不知道如何提煉。突然，我們就閃現(xiàn)了想重新?lián)Q回方案1的念頭。

這時(shí)，我們停下來(lái)思考：出不來(lái)效果的原因在哪里？這些原因也是我們接下來(lái)面臨的幾大挑戰(zhàn)：運(yùn)動(dòng)員表現(xiàn)形式、動(dòng)作設(shè)計(jì)、對(duì)比關(guān)系、細(xì)節(jié)表現(xiàn)。

挑戰(zhàn)1：什么形式表現(xiàn)運(yùn)動(dòng)員？

我們把運(yùn)動(dòng)員的運(yùn)動(dòng)表現(xiàn)拆分為兩種：局部運(yùn)動(dòng)、整體動(dòng)作。在 icon 里表現(xiàn)局部動(dòng)作缺少連貫性，構(gòu)圖不飽滿。對(duì)比之下，一個(gè)完整動(dòng)作比局部更具有整體協(xié)調(diào)性、飽滿性。

確定完動(dòng)作的形式后，那就是找到相應(yīng)的風(fēng)格。我們通過(guò)「五度分析法」，以「真實(shí)」與「夸張」為兩端的維度。過(guò)于真實(shí)的運(yùn)動(dòng)缺乏設(shè)計(jì)感，過(guò)于夸張的動(dòng)作缺乏親和力。結(jié)合我們平臺(tái)用戶屬性后，在夸張和真實(shí)的第3度找到了穩(wěn)重又簡(jiǎn)練的表達(dá)形式。

挑戰(zhàn)2：如何給運(yùn)動(dòng)員設(shè)計(jì)動(dòng)作？

我們都知道足球運(yùn)動(dòng)有一個(gè)較驚心動(dòng)魄的動(dòng)作——射門，這也是看球賽最讓人興奮的時(shí)刻。于是，我們把這最興奮部分放在最后作為整個(gè)主題設(shè)計(jì)的點(diǎn)睛之筆，那前面的幾個(gè)動(dòng)作自然就和射門銜接上了。

設(shè)計(jì)后：有規(guī)律的帶球、傳球、射門、接球等一系列完整的動(dòng)作。

挑戰(zhàn)3：人物與背景的對(duì)比關(guān)系

形狀對(duì)比

設(shè)計(jì)完運(yùn)動(dòng)員的動(dòng)作后，放在原來(lái)的圖形外框中發(fā)現(xiàn)缺乏活力，放在圓形外形中顯得拘謹(jǐn)。如何讓運(yùn)動(dòng)員「破」出來(lái)？怎么表現(xiàn)才能形成差異性？

我們分析出是因?yàn)槿鄙倭硕砹_斯元素。我們都知道俄羅斯比較有特點(diǎn)的是他建筑的頂部的形狀。接下來(lái)，我們就把建筑頂部圖形的輪廓提煉出來(lái)。

顏色對(duì)比

找到具有俄羅斯特點(diǎn)的外框圖形后，我們發(fā)現(xiàn)8個(gè) icon 都是統(tǒng)一紅色與統(tǒng)一藍(lán)色在視覺(jué)上略顯死板，而俄羅斯的國(guó)旗是紅藍(lán)白三色，我們把 icon 穿插在這三個(gè)顏色中，則會(huì)對(duì)比更強(qiáng)烈。

挑戰(zhàn)4：如何深入刻畫細(xì)節(jié)？

我們?cè)诖_定設(shè)計(jì)動(dòng)作、設(shè)計(jì)形式、對(duì)比關(guān)系3大方向后，接下來(lái)就是在設(shè)計(jì)中深入細(xì)節(jié)刻畫了。有句話說(shuō)「細(xì)節(jié)決定成敗」，細(xì)節(jié)往往是最能打動(dòng)人心的地方，這也是決定了我們最終整體效果的關(guān)鍵環(huán)節(jié)。

1. 動(dòng)作調(diào)整

我們要在精煉的圖形中表達(dá)精準(zhǔn)的動(dòng)作，最重要的兩點(diǎn)就集中在力量沖擊感、動(dòng)作幅度上。肌肉的線條是表現(xiàn)力量的一個(gè)因素，肌肉感不強(qiáng)，則動(dòng)作軟綿綿的，在 icon 中沒(méi)有沖擊力。其次，在運(yùn)動(dòng)員肢體視覺(jué)表達(dá)上，幅度夸張不失去視覺(jué)平衡情況下，大幅度的肢體動(dòng)作會(huì)讓圖形更具有靈動(dòng)性。

肌肉線條感調(diào)整

動(dòng)作幅度張力調(diào)整

2. 質(zhì)感

我們通過(guò)調(diào)整外框的寬度增加整體圖形視覺(jué)感受面積，在外框增加不同的深淺金色提升外框的金屬質(zhì)感，為整體營(yíng)造更立體的視覺(jué)效果。

3. 層次

通過(guò)投影來(lái)區(qū)別前、中、后的層次關(guān)系，在投影細(xì)節(jié)上增加環(huán)境色，這樣整個(gè)圖形在層次上更加層次分明了。

• 前：球
• 中：運(yùn)動(dòng)員
• 后：圖形框

4. 整體一致性

在最后守門員的設(shè)計(jì)上，我們考慮到整體動(dòng)作的一致協(xié)調(diào)上，修改了守門員動(dòng)作。

四、設(shè)計(jì)感悟

最終，在我們不斷的調(diào)整下，效果圖終于如期完成。在上線后，受到了團(tuán)隊(duì)的一致好評(píng)，這是我們?cè)谀瓿跆岢銮楦谢諊O(shè)計(jì)以來(lái)，通過(guò)設(shè)計(jì)沖刺流程理解定義主題，進(jìn)行創(chuàng)新性的方案設(shè)計(jì)。首次突破了傳統(tǒng)形式，在創(chuàng)意、風(fēng)格上響應(yīng)了俄羅斯世界杯主題，并且形成了鮮明的異域特征。

2018世界杯自開(kāi)賽以來(lái)，梅西、冰島守門員、C羅……讓我們看到了很多奇跡，所有運(yùn)動(dòng)員都在追逐夢(mèng)想，這一份追逐都源自內(nèi)心熱愛(ài)，讓他們不斷突破自己。

這也是2018世界杯的核心運(yùn)動(dòng)精神——放飛自我、激情活力。

這一次，世界杯主題設(shè)計(jì)，也讓我們放飛自己，帶著一份對(duì)設(shè)計(jì)的熱愛(ài)之心，一腔對(duì)世界足球的熱情，突破了以往，在設(shè)計(jì)上綻放更多魅力和精彩。

歡迎關(guān)注作者的微信公眾號(hào)：「詠舍」

「主題設(shè)計(jì)案例總結(jié)」

• 《一個(gè)App 閃屏的完整設(shè)計(jì)過(guò)程》
• 《如何給節(jié)日主題做設(shè)計(jì)，來(lái)看這篇超全面的分析！》
• 《首度揭秘！春節(jié)期間滴滴地圖小車圖標(biāo)的換裝設(shè)計(jì)過(guò)程》
• 《ofo小黃車是如何打造情感化設(shè)計(jì)的？來(lái)看總監(jiān)的自述！》
• 《實(shí)戰(zhàn)深度總結(jié)！如何設(shè)計(jì)和運(yùn)營(yíng)品牌形象？》
• 《設(shè)計(jì)節(jié)日閃屏？收下這份超全面的知識(shí)點(diǎn)總結(jié)！》
• 《網(wǎng)易實(shí)戰(zhàn)案例：教你五步打造APP節(jié)日主題設(shè)計(jì)》