設計沖刺:5天搞定2018俄羅斯世界杯主題設計

5 評論 8605 瀏覽 27 收藏 13 分鐘

本文作者將帶著大家來感受其在這次設計沖刺經歷的過程、以及如何采用的一些定義方法、抉擇方法推導設計思路,希望對大家今后在主題設計中有所啟發。enjoy~

此次項目是由我和我們組3位UI設計師共同設計完成,在不影響主產品迭代的需求過程里,我們歷時一周碎片時間,經歷理解主題、定義關鍵點、頭腦風暴、聚焦創新思路、繪制草圖、效果6個過程,其中在效果落地中進行很多次方案優化,最終,在上線完成后獲得不錯效果。

設計沖刺最早由谷歌提出針對帶領團隊快速做創新設計并驗證設計的基本流程。下面通過這篇文章,帶著大家來感受我們這次設計沖刺經歷的過程、以及如何采用的一些定義方法、抉擇方法推導設計思路,希望對大家今后在主題設計中有所啟發。

前言

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

這次我們bxd設計團隊為了響應世界杯的運動精神,提升指旺APP情感化的氛圍,把首頁8個icon作為切入點,結合俄羅斯世界杯時效效應,做一次具有創新性的主題設計。

1. 理解主題、發散思路

1.1 理解定義主題

在定義思路方向前,我們先搜集了俄羅斯素材、感受了主題曲《放飛自我》旋律以及往屆視覺表現,并進行了相應的分析。

主要集中在:如何抓住這次世界杯的核心精神?如何在指旺app平臺上表現更有記憶點?

通過搜集的一些海報素材資料,我們提煉出2018俄羅斯世界杯2個關鍵點:運動精神、地域特色。

  • 運動核心精神:放飛自我、激情活力。
  • 記憶點:俄羅斯國家地域特色

1.2 發散—頭腦風暴

在提煉出2個關鍵點后,我們從運動精神與俄羅斯特色為出發點,進行了頭腦風暴,不斷發散關鍵詞,盡可能多角度思考,突破舊的思路尋找最佳創意的切入點。

2. 聚焦方向

在頭腦風暴后,我們把發散的關鍵詞進行歸類整理,把思路鎖定在這幾個關鍵詞詞上:世界國旗、足球元素、俄羅斯特色、球星、運動員上。

把重要關鍵詞聚合形成3個設計思路:

  • 思路1:世界各國國旗+足球元素
  • 思路2:俄羅斯元素+足球元素
  • 思路3:運動員+俄羅斯圖形

我們對3個思路的評審維度是:可行性、創新性。

按照思路1、思路2我們迅速找了一些參考,做了一些對比。

思路1,國旗元素因為最終八強不確定性較大—可行性低。思路2,在設計上缺乏創新,拼的是寫實功底,和市場中我們常見的一些設計形式比較趨同—創新性低。思路3,從設計創新度和可行性上來說,都占據較大優勢。同時,我們還在設計組做了一些調查,發現大家都有相同的傾向,這更堅定了思路3方向的確定。

3. 草圖設計過程及效果表現

運動員+俄羅斯的思路確定后,我們開始嘗試了幾組試驗發現效果不是很好,人物顯得很小,動作看不清楚,風格也不知道如何提煉。突然,我們就閃現了想重新換回方案1的念頭。

這時,我們停下來思考:出不來效果的原因在哪里?這些原因也是我們接下來面臨的幾大挑戰:運動員表現形式、動作設計、對比關系、細節表現。

挑戰1:什么形式表現運動員?

我們把運動員的運動表現拆分為兩種:局部運動、整體動作。在icon里表現局部動作缺少連貫性,構圖不飽滿。對比之下,一個完整動作比局部更具有整體協調性、飽滿性。

確定完動作的形式后,那就是找到相應的風格。我們通過“五度分析法”,以“真實”與“夸張”為兩端的維度。過于真實的運動缺乏設計感,過于夸張的動作缺乏親和力。結合我們平臺用戶屬性后,在夸張和真實的第3度找到了穩重又簡練的表達形式。

挑戰2:如何給運動員設計動作?

我們都知道足球運動有一個較驚心動魄的動作—射門,這也是看球賽最讓人興奮的時刻。于是,我們把這最興奮部分放在最后作為整個主題設計的點睛之筆,那前面的幾個動作自然就和射門銜接上了。

設計后:有規律的帶球、傳球、射門、接球等一系列完整的動作。

挑戰3:人物與背景的對比關系

(1)形狀對比

設計完運動員的動作后,放在原來的圖形外框中發現缺乏活力,放在圓形外形中顯得拘謹。如何讓運動員“破”出來?怎么表現才能形成差異性?

我們分析出是因為缺少了俄羅斯元素。我們都知道俄羅斯比較有特點的是他建筑的頂部的形狀。接下來,我們就把建筑頂部圖形的輪廓提煉出來。

(2)顏色對比

找到具有俄羅斯特點的外框圖形后,我們發現8個icon都是統一紅色與統一藍色在視覺上略顯死板,而俄羅斯的國旗是紅藍白三色,我們把icon穿插在這三個顏色中,則會對比更強烈。

挑戰4:如何深入刻畫細節?

我們在確定設計動作、設計形式、對比關系3大方向后,接下來就是在設計中深入細節刻畫了。有句話說“細節決定成敗”,細節往往是最能打動人心的地方,這也是決定了我們最終整體效果的關鍵環節。

(1)動作調整

我們要在精煉的圖形中表達精準的動作,最重要的兩點就集中在力量沖擊感、動作幅度上。肌肉的線條是表現力量的一個因素,肌肉感不強,則動作軟綿綿的,在icon中沒有沖擊力。其次,在運動員肢體視覺表達上,幅度夸張不失去視覺平衡情況下,大幅度的肢體動作會讓圖形更具有靈動性。

① 肌肉線條感調整

② 動作幅度張力調整

(2)質感

我們通過調整外框的寬度增加整體圖形視覺感受面積,在外框增加不同的深淺金色提升外框的金屬質感,為整體效果營造更立體的視覺效果。

(3)層次

通過投影來區別前、中、后的層次關系,在投影細節上增加環境色,這樣整個圖形在層次上更加層次分明了。

  • 前—球
  • 中—運動員
  • 后—圖形框

(4)整體一致性

在最后守門員的設計上,我們考慮到整體動作的一致協調上,修改了守門員動作。

4. 設計感悟

最終,在我們不斷的調整下,效果圖終于如期完成。在上線后,受到了團隊的一致好評,這是我們在年初提出情感化氛圍設計以來,通過設計沖刺流程理解定義主題,進行創新性的方案設計。首次突破了傳統形式,在創意、風格上響應了俄羅斯世界杯主題,并且形成了鮮明的異域特征。

2018世界杯自開賽以來,梅西、冰島守門員、C羅……讓我們看到了很多奇跡,所有運動員的都在追逐夢想,這一份追逐都源自內心熱愛,讓他們不斷突破自己。

這也是2018世界杯的核心運動精神—放飛自我、激情活力。

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

  • 設計師:hellen、文斌、小涵、婷婷
  • 設計負責人:李陽

 

作者:Hellen(微信公眾號:詠舍)七年設計經驗,藝術設計學碩士畢業。專注用戶體驗設計、心理學、自我管理與提升。

本文由 @Hellen 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自 Pixabay,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 和餓了么很像呀

    回復
  2. 一個擁有超脫思維的設計師,真可怕~

    來自上海 回復
  3. 學習了!

    來自北京 回復
    1. 頭像可以的

      回復