1， 項(xiàng)目簡(jiǎn)介：
這個(gè)夏天注定有很多大事發(fā)生。滴滴代駕上線一周年，歐洲杯、奧運(yùn)會(huì)接踵而至。在運(yùn)營(yíng)與市場(chǎng)部同學(xué)的共同策劃下，公司產(chǎn)出了一系列效果顯著的線上運(yùn)營(yíng)活動(dòng)，我們作為設(shè)計(jì)師充當(dāng)著非常重要的執(zhí)行方的角色。
如果將設(shè)計(jì)師發(fā)散的創(chuàng)意思維和代駕產(chǎn)品結(jié)合,將會(huì)產(chǎn)生怎樣神奇的化學(xué)反應(yīng)？如何才能更好的將設(shè)計(jì)的思維融入到作品中，提升點(diǎn)擊率并更好的傳播代駕產(chǎn)品？怎么變被動(dòng)為主動(dòng)，轉(zhuǎn)變身份角色，從單純的執(zhí)行者變成積極主動(dòng)的策劃者，創(chuàng)意者？
懷著這樣的想法，趕著夏季的尾巴，我們決定和運(yùn)營(yíng)的同學(xué)一起策劃一場(chǎng)線上活動(dòng)，共同譜寫(xiě)并奏響了這首“夏末狂想曲”。
2， 前期準(zhǔn)備
在前期方案設(shè)定中，我們研究了許多較受歡迎的h5案例，并希望從中汲取靈感，找到符合代駕特征的展現(xiàn)方式。下圖表格中的優(yōu)缺點(diǎn)均指相對(duì)代駕產(chǎn)品而言，并不針對(duì)某一具體h5類(lèi)型.
考慮到代駕為一種低頻次使用功能，數(shù)據(jù)展示的類(lèi)型并不十分適合。同時(shí)為了最大限度降低用戶流失率及跳轉(zhuǎn)率，我們決定將2，3兩種展示方式進(jìn)行結(jié)合。
劇情設(shè)定
夏末狂歡的主題立意點(diǎn)在于“動(dòng)”，而“代駕司機(jī)送您回家”的主題立意點(diǎn)卻在于“靜”。為了動(dòng)靜結(jié)合，我們決定用開(kāi)場(chǎng)的“靜”與結(jié)尾的“靜”遙想呼應(yīng)。同時(shí)內(nèi)場(chǎng)場(chǎng)景循序漸進(jìn)，當(dāng)熱鬧的氛圍達(dá)到最高潮的時(shí)候立刻收尾，用強(qiáng)烈的反差對(duì)比去凸顯代駕司機(jī)的專業(yè)可靠。
形式設(shè)定
如前所述，為了最大限度的降低用戶流失率及跳轉(zhuǎn)率，我們采用的是將信息展示及游戲互動(dòng)這兩種表現(xiàn)形式相結(jié)合的表現(xiàn)形式：用圖片烘托氛圍，除必要的規(guī)則及引導(dǎo)外，刪除所有可有可無(wú)的文字部分。此外，用游戲的表現(xiàn)形式展示信息，并在信息的展示過(guò)程中穿插類(lèi)似游戲的尋寶環(huán)節(jié)以制造驚喜
3， 設(shè)計(jì)過(guò)程
創(chuàng)意與形式確定后便需要開(kāi)始著手具體的設(shè)計(jì)工作。由于最終的期望是盡可能的通過(guò)圖片形式烘托氛圍，設(shè)計(jì)的第一步則是分別確定各場(chǎng)景的畫(huà)面內(nèi)容。我們挖掘了代駕師傅線下的場(chǎng)景畫(huà)面，采集炎炎夏日代駕服務(wù)中的片刻剪影作為這次運(yùn)營(yíng)活動(dòng)的設(shè)計(jì)源點(diǎn)。
可以發(fā)現(xiàn)代駕服務(wù)的大部分場(chǎng)景都聚焦于繁華喧囂的酒吧鬧市。我們采集了這些場(chǎng)景的共性并將之與夏日印象相結(jié)合，得到了炎熱，不安，躁動(dòng)的特征。接著我們針對(duì)每個(gè)場(chǎng)景大致想要表達(dá)的內(nèi)容羅列了關(guān)鍵詞并收集了相關(guān)圖片制作了簡(jiǎn)易的情緒版。
草圖
確定了每個(gè)場(chǎng)景的大致畫(huà)面內(nèi)容后，我們開(kāi)始草圖繪制。為了追求游戲感，讓畫(huà)面活潑生動(dòng)，我們打算采用散點(diǎn)透視的方式去繪制每個(gè)場(chǎng)景，使畫(huà)面開(kāi)闊，內(nèi)容豐滿。我們將場(chǎng)景及元素構(gòu)建了一個(gè)由淺至深的虛擬空間，用戶層層體驗(yàn)探尋每一道門(mén)后的秘密，猶如代駕體驗(yàn)穿梭于城市每一個(gè)平凡街道，可以實(shí)時(shí)翻閱每一頁(yè)代駕服務(wù)留下的片刻畫(huà)面。
不過(guò)這樣的構(gòu)思也帶來(lái)了繁瑣的工作量。光是草圖部分的繪制就花了大約3天時(shí)間，其中最復(fù)雜的莫過(guò)于整體場(chǎng)景的搭建。由于人眼特征的局限性，并且平時(shí)能夠搜集到的大多是焦點(diǎn)透視的圖，大家對(duì)于散點(diǎn)透視缺乏有效的經(jīng)驗(yàn)及參考。這些場(chǎng)景的構(gòu)建的確花費(fèi)了我們大量的腦細(xì)胞。
色彩
內(nèi)容確定后重要的一步就是顏色的選擇。由于最初的設(shè)想是讓整個(gè)畫(huà)面有動(dòng)靜結(jié)合的節(jié)奏，我在開(kāi)場(chǎng)和結(jié)尾用了較為安靜的冷色調(diào)，中間場(chǎng)景則以暖色調(diào)為主，并且循序漸進(jìn)，越來(lái)越強(qiáng)烈：用繽紛絢麗的暖色基調(diào)和浮華，飽滿，喧嘩的元素來(lái)營(yíng)造一個(gè)激情充溢的高熱氛圍。
當(dāng)然以上只是最初上色時(shí)確定的基本色調(diào)，后續(xù)我們分別對(duì)不同場(chǎng)景的特征，及想要傳達(dá)給用戶的感覺(jué)做了局部調(diào)整。
字體
想做好一個(gè)h5，自然不能放過(guò)每一個(gè)細(xì)節(jié)。字體部分的設(shè)計(jì)我們也做了反復(fù)推敲。
雖然整個(gè)h5在瀏覽的時(shí)候并未出現(xiàn)類(lèi)似slogan的部分，但是后期宣傳的資源位（如滴滴出行app內(nèi)公告欄）則需要用簡(jiǎn)潔的標(biāo)題引導(dǎo)用戶點(diǎn)擊。為了配合開(kāi)場(chǎng)神秘空靈的氣氛，標(biāo)題處采用了手寫(xiě)的方式并著重突出筆觸的靈動(dòng)感。
完成稿
下圖為夏末狂想季的最終完成稿：
5， 項(xiàng)目小結(jié)
這次的活動(dòng)對(duì)我們意義非凡。這是作為設(shè)計(jì)師的我們第一次將暢想的創(chuàng)意構(gòu)思與具體活動(dòng)相結(jié)合，并將想法落地， 成功上線的作品；也是讓我們的身份從單純的執(zhí)行設(shè)計(jì)變成發(fā)起創(chuàng)意并參與到創(chuàng)意全過(guò)程中的第一步。相信這次項(xiàng)目的合作和產(chǎn)出對(duì)團(tuán)隊(duì)每個(gè)人都是一次寶貴的經(jīng)驗(yàn)，讓我們并受益頗多。
就項(xiàng)目本身而言，確實(shí)還存在著許多的遺憾。比如作為一個(gè)多人合作的項(xiàng)目，在設(shè)計(jì)進(jìn)行的過(guò)程中并未很好的校對(duì)每個(gè)人的設(shè)計(jì)風(fēng)格，導(dǎo)致發(fā)現(xiàn)問(wèn)題時(shí)已經(jīng)失去了修改的時(shí)間；比如由于時(shí)間有限，畫(huà)面動(dòng)效并未做到百分百流暢，一定程度上損耗了體驗(yàn)的過(guò)程。
存在遺憾才能更好的追求完美。
在活動(dòng)上線后，作為設(shè)計(jì)師的我們也一直在反思，如何讓h5在好玩有趣的情況下同時(shí)可以承載品牌的特性，傳遞品牌精神？在每一次h5背后，視覺(jué)設(shè)計(jì)的部分究竟可以貢獻(xiàn)多少的流量？如何做到真正打動(dòng)用戶而非依靠各種利益點(diǎn)去維持瀏覽率？這一切都是我們需要繼續(xù)探索和努力的方向。
a， 直觀的交互：權(quán)衡h5的順暢性與趣味性，堅(jiān)持在用戶耐性差，接觸學(xué)習(xí)新事物積極性低下的假設(shè)下確定h5里的交互和內(nèi)容。雖然夏末狂想季內(nèi)容豐富，層層通關(guān)找尋小章魚(yú)的游戲感強(qiáng)，但是交互不夠直觀。
b， 清晰的利益點(diǎn)：對(duì)于需要用戶較多參與的h5，需要清晰明確的告知用戶走完所有流程的動(dòng)機(jī)利益點(diǎn)。比如采訪了周?chē)脑S多朋友，很多人都表示不知道要去尋找章魚(yú)。
c， 理解用戶：做h5好像寫(xiě)文章，總分總的形式清晰易理解，但漸進(jìn)的表達(dá)對(duì)用戶要求高，設(shè)計(jì)起來(lái)也更加需要技巧。我們?cè)谠O(shè)計(jì)的過(guò)程中應(yīng)該更多的從非設(shè)計(jì)師的角度去審視設(shè)計(jì)，讓用戶理解h5要傳遞的實(shí)際意義，而不是僅僅停留在表面的美丑上。
我們可以吸取夏末狂想季中好的經(jīng)驗(yàn),把它固化然后運(yùn)用到更多的項(xiàng)目創(chuàng)意中, 同時(shí)把已出現(xiàn)的問(wèn)題提出避免再次產(chǎn)生，從而創(chuàng)造出更多的好作品！
以下是完整的作品展示：
