我跟往常一樣回到公司辦公座位上,右手手上拿著樓下麥當勞6元購買的超值早餐,左手瞬時按下了桌子下的主機電腦開關,然后一邊吃著雙層包皮夾雜著火腿的漢堡,慢慢在等待電腦的啟動。不到一會兒時間,開啟的電腦桌面就響起噠噠噠的聲音,自啟動的郵箱接收了最近收到的郵件,此時我還沉醉在超值早餐的吞咽過程中,還沒回過神來。伴隨著一口熱辣辣的豆?jié){入口,我緩緩的把視線移動到了收到的工作郵件當中。噔~一個活動設計H5需求彈出,這2天我需要設計一個《搶十月終極大禮》的宣傳頁面。
一開始看到這個活動需求的截止時間,其實我是拒絕的,2天時間設計一個炫酷吊炸天的活動頁面,感覺時間是不足夠的,不過作為一個有專業(yè)精神的設計尸,我覺得我還是應該細細看下需求搞,然后再確定怎么跟需求方撕逼~嘀嘀嘀,雙擊打開交互稿文件▼
需求稿里面有這次宣傳頁的所有交互圖示,整個活動可以分為三個部分,第一部分頭圖,第二部分點擊購買大禮包,第三部分搶購Q幣充值。
眨眼一看,摸摸小下巴沉思幾秒鐘,好像又沒那么難,應該是可以完成的!這時我再具體看看頭圖文案:搶十月終極大禮,1元解鎖30話?。〕渲底罡叻道?0%哦~奧,嗯,嚇?我思考了數(shù)分鐘,這是一道看文字想畫面的創(chuàng)作題?。?!
福爾摩師V:首先看到這兩段文字,我要先提煉出具有動次打次感覺的畫面詞語!例如:搶字!還要再提煉出最具用戶吸引力的畫面詞語:大禮?。?/p>
由此我可以聯(lián)想出以下畫面!密密麻麻的人群,在擁擠的搶一個禮物的畫面既視感~
大概的畫面印象有了,那么怎么起草稿呢?這里又需要考慮分析畫面元素組成跟色調是什么?。?/p>
畫面豬腳不用多說了,本身自有的品牌形象企鵝娘+小黑子!畫面色調選擇,這里的關鍵字是10月,10月會有延續(xù)國慶的feel傾向,所以這里我選擇用紅黃色為主?。ê冒善鋵嵤俏蚁贡缺鹊模驗槲冶旧硐矚g這個顏色搭配,哈哈哈~)
分析到這里基本思路都比較明確了就可以開始畫,頭圖的草稿了!如下圖▼
再畫草稿的時候要考慮下這個畫面的延展性跟具體用在什么地方,我這個圖除了要用在H5活動(750-1334)設計里面,還要用在閃屏(ip6,ip7,7p,ip8,8p,ipx,安卓機.....)各種banner位置等等,所以在草稿的時候就要考慮這些問題,盡量用大的尺寸去畫,而且盡量分層?。〉綍r縮小再用也完全OJBK(一般我都是新建畫布A4分辨率300去畫圖的,看個人習慣吧!沒有限制),不然到時做延展設計時,你就會發(fā)現(xiàn)各種問題!簡直崩潰的不要不要哦?。?!所以切記切記!
草稿差不多了,就要開始把第二部分,第三部分的交互設計稿去補充做完了~具體如下圖▼
到了這一步大概花費了小半天時間(快速出草稿這一部分,越快越好,試錯時間越短,你留給后面做設計細節(jié)的時間就越多!),基本的設計原型已經(jīng)出來了,這時候不要盲目的往下做哦!要去跟需求方溝通確認下,這個草稿設計有沒問題,有沒達到需求方的需求目的,不然你做到了一大半才去溝通,錯了,重做!可是真的浪費時間啊?。?!不要說了!都是淚~
此時我經(jīng)過了和需求方的反復溝通~她說:完全ojbk!沒問題(很完美的即視感),這時我又默默的回到設計尸的工位,翹起了二郎腿,視線仰望45度角,嘴角向揚露出微微一笑,心想(我真是個天才?。??滴答滴答滴答~時間不多了,趕緊細化設計!
設計過程展示▼
完整設計展示▼
總結活動設計的一些核心點▼
01.分析理解文案想出對應畫面?。ó嬅娓陌笇Σ簧希瑫鷮擂?!沒有1+1>2的效果)
02.整個活動思考邏輯要理順,不是盲目立即去找參考!
03.理解設計需求,有問題馬上去跟需求方溝通!(并不是每個需求方的需求稿都是深思熟慮的!你懂得!所以有問題盡量溝通解決,可以把坑,扼殺在開始設計之前?。?/p>
04.一定要快速出草稿跟需求方確定,過了以后才繼續(xù)往下做?。。?!不然你會后悔的!
05.活動按鈕彈窗等等,可以單獨做個UI kit 給重構開發(fā)人員,方便后續(xù)工作開展 !
從拿到需求后,經(jīng)過了24小時48秒之后的我,又繼續(xù)回到了設計尸工位,右手手上拿著樓下麥當勞6元購買的超值早餐,左手瞬時按下了桌子下的主機電腦開關,然后一邊吃著雙層包皮夾雜著火腿的漢堡,慢慢在等待電腦的啟動。誒?怎么畫面如此熟悉,仿佛發(fā)生過的場景一樣~我到底做了什么?我在哪里?我是誰?