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