我跟往常一樣回到公司辦公座位上，右手手上拿著樓下麥當勞6元購買的超值早餐，左手瞬時按下了桌子下的主機電腦開關，然后一邊吃著雙層包皮夾雜著火腿的漢堡，慢慢在等待電腦的啟動。不到一會兒時間，開啟的電腦桌面就響起噠噠噠的聲音，自啟動的郵箱接收了最近收到的郵件，此時我還沉醉在超值早餐的吞咽過程中，還沒回過神來。伴隨著一口熱辣辣的豆漿入口，我緩緩的把視線移動到了收到的工作郵件當中。噔~一個活動設計H5需求彈出，這2天我需要設計一個《搶十月終極大禮》的宣傳頁面。
 

 

一開始看到這個活動需求的截止時間，其實我是拒絕的，2天時間設計一個炫酷吊炸天的活動頁面，感覺時間是不足夠的，不過作為一個有專業精神的設計尸，我覺得我還是應該細細看下需求搞，然后再確定怎么跟需求方撕逼~嘀嘀嘀，雙擊打開交互稿文件▼

 

 

需求稿里面有這次宣傳頁的所有交互圖示，整個活動可以分為三個部分，第一部分頭圖，第二部分點擊購買大禮包，第三部分搶購Q幣充值。

 

 

 

眨眼一看，摸摸小下巴沉思幾秒鐘，好像又沒那么難，應該是可以完成的！這時我再具體看看頭圖文案：搶十月終極大禮，1元解鎖30話！！充值最高返利70%哦~奧，嗯，嚇？我思考了數分鐘，這是一道看文字想畫面的創作題?。。?/p>

 

 

福爾摩師V：首先看到這兩段文字，我要先提煉出具有動次打次感覺的畫面詞語！例如：搶字！還要再提煉出最具用戶吸引力的畫面詞語：大禮??！

 

由此我可以聯想出以下畫面！密密麻麻的人群，在擁擠的搶一個禮物的畫面既視感~

 

大概的畫面印象有了，那么怎么起草稿呢？這里又需要考慮分析畫面元素組成跟色調是什么?。?/p>

 

畫面豬腳不用多說了，本身自有的品牌形象企鵝娘+小黑子！畫面色調選擇，這里的關鍵字是10月，10月會有延續國慶的feel傾向，所以這里我選擇用紅黃色為主?。ê冒善鋵嵤俏蚁贡缺鹊模驗槲冶旧硐矚g這個顏色搭配，哈哈哈~）

 

 

分析到這里基本思路都比較明確了就可以開始畫，頭圖的草稿了！如下圖▼

 

 

再畫草稿的時候要考慮下這個畫面的延展性跟具體用在什么地方，我這個圖除了要用在H5活動（750-1334）設計里面，還要用在閃屏（ip6，ip7，7p，ip8，8p，ipx，安卓機.....）各種banner位置等等，所以在草稿的時候就要考慮這些問題，盡量用大的尺寸去畫，而且盡量分層！！到時縮小再用也完全OJBK（一般我都是新建畫布A4分辨率300去畫圖的，看個人習慣吧！沒有限制），不然到時做延展設計時，你就會發現各種問題！簡直崩潰的不要不要哦?。?！所以切記切記！

 

草稿差不多了，就要開始把第二部分，第三部分的交互設計稿去補充做完了~具體如下圖▼

 

 

 

到了這一步大概花費了小半天時間（快速出草稿這一部分，越快越好，試錯時間越短，你留給后面做設計細節的時間就越多！），基本的設計原型已經出來了，這時候不要盲目的往下做哦！要去跟需求方溝通確認下，這個草稿設計有沒問題，有沒達到需求方的需求目的，不然你做到了一大半才去溝通，錯了，重做！可是真的浪費時間啊！??！不要說了！都是淚~

 

此時我經過了和需求方的反復溝通~她說：完全ojbk！沒問題（很完美的即視感），這時我又默默的回到設計尸的工位，翹起了二郎腿，視線仰望45度角，嘴角向揚露出微微一笑，心想（我真是個天才！），呃？滴答滴答滴答~時間不多了，趕緊細化設計！

 

設計過程展示▼

 

 

完整設計展示▼

 

 

 

總結活動設計的一些核心點▼

 

01.分析理解文案想出對應畫面！（畫面跟文案對不上，會跟尷尬！沒有1+1>2的效果）

 

02.整個活動思考邏輯要理順，不是盲目立即去找參考！

 

03.理解設計需求，有問題馬上去跟需求方溝通！（并不是每個需求方的需求稿都是深思熟慮的！你懂得！所以有問題盡量溝通解決，可以把坑，扼殺在開始設計之前！）

 

04.一定要快速出草稿跟需求方確定，過了以后才繼續往下做?。。?！不然你會后悔的！

 

05.活動按鈕彈窗等等，可以單獨做個UI kit 給重構開發人員，方便后續工作開展 ！

 

從拿到需求后，經過了24小時48秒之后的我，又繼續回到了設計尸工位，右手手上拿著樓下麥當勞6元購買的超值早餐，左手瞬時按下了桌子下的主機電腦開關，然后一邊吃著雙層包皮夾雜著火腿的漢堡，慢慢在等待電腦的啟動。誒？怎么畫面如此熟悉，仿佛發生過的場景一樣~我到底做了什么？我在哪里？我是誰？