寫在前面
很多群友問到我關(guān)于電商設(shè)計流程的問題翻具，其實這個問題有點泛履怯，因為電商設(shè)計包含的分支還蠻多的，比如Banner設(shè)計／專題頁設(shè)計／平臺界面設(shè)計／內(nèi)頁設(shè)計／店鋪首頁設(shè)計／詳情頁設(shè)計／引導(dǎo)頁設(shè)計／H5頁面設(shè)計等等裆泳，既然這樣叹洲，我就姑且拿出一個專題頁設(shè)計作為案例跟大家分享一下我的設(shè)計流程好了。
下面這個頁面是我今年3月份左右做的一個京東平臺的專題頁活動工禾，大家可以先看一下运提，然后接下來我會從前期溝通思考－中期執(zhí)行－后期修改三個方面給大家分析講解它是怎么做出來的（文末附帶gif動圖）。
因為我之前一直都是屬于為平臺服務(wù)的電商設(shè)計師闻葵，所以我下面要講的一些點可能是大多數(shù)服務(wù)于店鋪的電商設(shè)計師所沒有接觸過的（也僅僅是我個人的一些經(jīng)驗總結(jié)）民泵，如果你們想往平臺方向發(fā)展或者希望自己的店鋪設(shè)計流程能規(guī)范一點，不防都接觸了解一下（接下來我要講的這些可以說是超級干貨了噢槽畔，請大家自備小板凳吶）栈妆，下面進入正題：
1、前期溝通思考階段。
這個階段主要包含這四個方面：溝通需求／分析定位／視覺推導(dǎo)／風(fēng)格確定鳞尔。
（1）溝通需求
做設(shè)計的話嬉橙，溝通肯定是必不可少的了，這里分別涉及到了跟需求人（運營策劃）／交互設(shè)計師／前端設(shè)計師／領(lǐng)導(dǎo)之間的溝通寥假，很多設(shè)計師之所以反復(fù)被要求改稿市框，其實很大程度上就是因為前期溝通這一環(huán)節(jié)出了問題。
大家可以先看下我們的交互稿（嗯糕韧，不得不說的是枫振，我們的交互稿其實已經(jīng)做的很漂亮了，就差上色了兔沃。蒋得。。）：
首先乒疏，我的習(xí)慣是额衙，拿到交互稿后，我會從上到下完整的先過一遍交互稿怕吴，一方面是看交互稿的內(nèi)容完不完整窍侧，是不是還有些內(nèi)容點忘記做了，另一方面也會咨詢一下交互設(shè)計師转绷，有哪些地方是需要設(shè)計師特別注意的啊伟件，有沒有什么內(nèi)容是要優(yōu)先做的啊等等，如果沒有特殊要求的話议经，我一般都是會從上而下一步步來做斧账。
其次，針對一些樓層板塊的內(nèi)容煞肾，一方面我會去跟前端交流溝通咧织，看能不能實現(xiàn)或能不能跟平臺兼容，如果不能的話就要協(xié)商去掉以免白做了浪費時間籍救，另一方面我會咨詢下按照交互稿提供的一些邏輯习绢，前端那邊實現(xiàn)起來困不困難，需要設(shè)計師做些什么支持等等蝙昙。
第三闪萄，我會去看一下頭部Banner圖的文案標題這些是否是最后確認了，以免涉及到字體變形最后發(fā)現(xiàn)文案要改那就死翹翹了奇颠，不過當我覺得標題不是特別好或者有疑問的時候败去，我都會去跟運營直接溝通商量，看能不能對文案有一些修改調(diào)整（所以這也就導(dǎo)致了有一部分需求人很感激我烈拒，認為我比較專業(yè)和有責(zé)任心圆裕，但同時也有小部分需求人會覺得我冒犯了他們三椿，對我有點痛恨，哈哈～）葫辐。
以上就是我的一些前期準備工作搜锰，算是溝通完了，接下來我們繼續(xù)看耿战。
（2）分析定位
分析定位的話蛋叼，我們可以根據(jù)活動的標題文案和活動主題來著手，大家不妨先來看下我們這次活動的文案和主題：
主標題：引爆415剂陡，嗨購3天3夜
副標題／利益點：滿199減100
活動主題：京東全球購1周年感恩回饋
接下來開始分析我們這次活動的定位和目的：
首先狈涮，需要說明的是，我們這個活動其實分為三個時間段（國家日／大牌盛宴／引爆415）鸭栖，每個時間段對應(yīng)一個頁面歌馍，由于他們在同一個活動主題下面，所以他們之間的視覺風(fēng)格是類似的晕鹊，只是說從時期越靠后氛圍會越來越強烈而已松却。
其次，既然是周年慶主題溅话，也有滿199減100這么大的折扣晓锻，畫面肯定還是得喜慶一點有沖擊力一點會更合適，同時文案里也出現(xiàn)了“引爆”“嗨購”“全球”等字眼飞几，我很自然地就聯(lián)想到了圓形這種形式砚哆，并且知道通過對圓形和大量商品的排列處理就可以達到我想要的效果。
第三屑墨，這個頁面作為高潮期應(yīng)該是最熱烈的躁锁，但熱烈并不意味著這個頁面就是要做的花里胡哨／低端劣質(zhì)，畢竟都是賣一些進口商品卵史，所以也就涉及到每個階段頁面之間既要考慮視覺統(tǒng)一以外战转，也要應(yīng)該考慮全球購自身的品牌調(diào)性這2個方面，這也就決定了本次活動的視覺風(fēng)格要求是既要熱鬧程腹，也要略顯品質(zhì)匣吊，同時要便于不同時期頁面的視覺延伸（比如我這里的延伸元素就是圓形）儒拂。
（3）視覺推導(dǎo)
做完以上需求分析寸潦，接下來很重要的一件事情就是做視覺推導(dǎo)了，為了避免因為風(fēng)格方向錯誤而造成的反復(fù)修改社痛，我通常都會出一份視覺推導(dǎo)见转，一方面是要把我的思考點展現(xiàn)給他看合不合拍，另一方面也是為了讓需求人了解下我最后出來的頁面大致的樣子蒜哀，如果他確認沒問題了斩箫，我才會動手做執(zhí)行。
接下來，我將從形式／排版／配色／布局4個方面來完成我的這份視覺推導(dǎo)：
形式：首先乘客，像我們這種常規(guī)賣貨的專題頁最重要的部分其實就是頭部Banner部分的設(shè)計了狐血，因為下面樓層的布局和風(fēng)格都是依據(jù)這個頭部Banner來延伸執(zhí)行的。
同時易核，我在前面提到了會用圓形這個元素來發(fā)散思維匈织，一方面是因為圓形寓意著圓滿／全球，跟我們的全球購周年慶主題契合牡直，另一方面是因為圓形具有視覺聚焦的效果缀匕，通過一定的構(gòu)成法則來處理，可以產(chǎn)生較強的視覺沖擊力碰逸，同時也比大面積的堆積素材或弄一些飄來飄去的點綴元素看起來更高級乡小。
再一個，我個人也是比較喜歡簡潔扁平一些的設(shè)計饵史，如果跟項目需要不沖突满钟，需求人也愿意接受我的堅持的話，我都會盡量按自己的喜好來胳喷。
舉例零远，大家可以感受下：
排版：這里主要是指Banner的排版布局，包含整體排版／標題樣式／商品擺放3個方面厌蔽。
大致就是以圓形為主體（一方面是因為構(gòu)圖穩(wěn)定牵辣，另一方面是因為文字信息部分放圓形中間視覺最為聚焦），標題居中排版的奴饮，部分商品圍繞著圓形放置纬向，同時考慮到“引爆”這個關(guān)鍵詞，所以也想通過商品來營造一種一大推貨品傾瀉而出的氣勢戴卜。
舉例：假想中間部分是文案信息就好了逾条，風(fēng)格什么的不用管。
配色：關(guān)于顏色投剥，冷暖搭配眼睛不累师脂，我最后選擇了紅色／黃色／紫色的冷暖搭配，其實也是考慮到了中國的一些傳統(tǒng)文化和喜好江锨，比如像我們的國旗就是紅色＋黃色吃警，無論是國慶節(jié)／元旦節(jié)／春節(jié)等喜慶的節(jié)日，始終也都是紅色和黃色是最常用的啄育，所以采用紅色也是為了大大降低對顧客的引導(dǎo)成本酌心，因為在他們心底里就是看到紅色就會聯(lián)想到喜慶，喜慶往往也意味著會有活動促銷挑豌，紅色也容易讓人感覺到熱烈和沖動安券，激發(fā)購買欲墩崩。
舉例：大家只看配色就好，以大紅色為主色背景色侯勉。
布局：這里指的是樓層布局鹦筹，因為這個活動還比較大，需要承載很多商家店鋪和商品信息址貌，而且隨時都有可能賣斷貨的情況盛龄，為了便于后期維護和替換商品圖信息什么的，樓層布局還是常規(guī)一點比較好芳誓。
其實余舶，在以前的一篇文章“平臺電商設(shè)計VS店鋪電商設(shè)計師的差別”我也提到過，這也是大型平臺專題頁活動與一些店鋪專題或某一款產(chǎn)品專題頁活動在設(shè)計上的差別锹淌，因為大型平臺專題頁活動考慮的因素是方方面面的匿值，比如整體的品牌調(diào)性／后期維護成本／包容性和耐看性／活動重要層級等等，這些都決定了這種專題頁在樓層部分還是需要常規(guī)簡潔一點比較好赂摆，設(shè)計師需要考慮更多用戶體驗和細節(jié)方面的問題挟憔，而店鋪專題或者某一款產(chǎn)品的推廣專題往往可以做的看起來更具創(chuàng)意一些，可以天馬行空烟号，背景做的非常浮夸绊谭。
舉例：僅看布局，大型平臺專題頁活動的樓層都是比較方方正正的商品列表形式汪拥。
以上我從各個方面給這個活動分析了定位和我要設(shè)計的方向达传，具體就以實際輸出為主了，因為各方面原因?qū)е伦詈蟮脑O(shè)計稿可能會有些偏差迫筑，但方向就是這樣子的宪赶。
同時這里需要說明的一點就是，視覺推導(dǎo)就是把握大方向就好了脯燃，千萬不要一開始就想的特別細致搂妻，想著去找出完全一模一樣的案例，如果你要完全一樣的案例那成了就是抄襲了辕棚，設(shè)計師一定要有自己的想法才不容易撞車欲主，而且在那么短時間內(nèi)你也不可能一下子給出完這個的方案稿，只能說給個大概逝嚎。
（4）風(fēng)格確定
看完前面的分析扁瓢，大家腦海里也許已經(jīng)有一個大概的樣子模型了吧，但我們也不能夠說得太細懈糯，只是需要了解方向思路對不對就好了涤妒，一方面是因為還沒有開始執(zhí)行你也沒法具體到很細致的地方单雾，另一方面是因為赚哗，如果一開始就把整個頁面的設(shè)計全定死了她紫，那往后如果出現(xiàn)突發(fā)情況或者被需求人誤以為頁面就是這樣了，后面你想靈活發(fā)揮就很難了屿储。
總之贿讹，以上是我自己的分析思路和視覺推導(dǎo)的思路，對你們也許有一定的借鑒意義够掠，我自己按這些思路來做設(shè)計基本是不會有太大差錯了民褂，因為我腦海里的需求類別是不計其數(shù)的，另一方面疯潭，經(jīng)驗越豐富越見多識廣的設(shè)計師赊堪，分析看待問題也會更全面，出錯的風(fēng)險更低竖哩，當然平臺類型的活動專題頁設(shè)計和店鋪類的還是會有些許差別的哭廉，但分析思路是類似的。
2相叁、中期執(zhí)行階段遵绰。
這個階段按正常情況的話，主要有三個注意事項：先頭部再樓層／先整體再細節(jié)／先排版再標題增淹。
當然椿访，我們也會遇到一些不正常的情況，比如時間特別緊急虑润，需求人要你先把樓層部分先做了成玫，提供模版給到商家先拿去做圖，嗯有時候確實會有這么炒蛋的緊急情況發(fā)生拳喻，因為可能就是臨時決定出一個活動梁剔，確實沒辦法了。
但大多數(shù)時候還是可以按正常情況來看的舞蔽，所以我們一個個點來講解：
（1）先頭部再樓層
首先荣病，頭部Banner部分相當于整個頁面的門面，用戶進入到這個頁面第一眼就會從這個頭部Banner來感受你這個活動是怎么回事渗柿，比如這是賣什么東西的頁面啊个盆，有沒有什么活動優(yōu)惠啊，這個頁面吸不吸迎人要不要分享給朋友啊等等朵栖。
其次颊亮，頭圖的風(fēng)格樣式，決定了整個頁面的調(diào)性陨溅，比如樓層標題部分／按鈕形式 ／背景顏色樣式等該如何選擇终惑，一般來說這些都是可以從頭部Banner部分提取元素和顏色的。
（3）先排版再標題
我知道很多人的習(xí)慣是先做標題部分门扇，而且不管三七二十一雹有，先做了字體變形再說偿渡，但是一般來說我都不太建議大家這么做，還有些人不知道從何下手霸奕，干脆先把標題做些字體變形溜宽，還加上效果等等，但是這就存在幾個問題爸仕А：
萬一需求人突然要改標題文案怎么辦适揉？
萬一你把字做好后發(fā)現(xiàn)其他的商品圖或元素怎么排都排不好看了怎么辦？
萬一你光做一個字體設(shè)計就花費了項目一大半的時間怎么辦煤惩？
所以基于種種原因的考慮嫉嘀，我們都是先把文案／商品（如果有的話）先丟在畫布里，弄好整體的排版后再去做標題部分的魄揉，并且有時候標題字體需要設(shè)計一下吃沪，有時候只是需要打幾個字做個排版就好了，要看具體情況的什猖，因為不是說做了字體變形就一定好票彪，不做字體變形就一定不好。
（2）先整體再細節(jié)
其實無論做什么事情都有這么個原則不狮，畫畫／做產(chǎn)品／做設(shè)計等等降铸，都是先整體把握大感覺，然后再優(yōu)化各個元素的位置擺放／陰影顏色等細節(jié)摇零。
比如推掸，做這個頭部的時候，我的做法思路是什么樣的呢驻仅？做了個gif給你們感受下（背景部分的商品我是想要營造一種一大推貨品傾瀉而出的感覺谅畅，但為了不干擾主體，所以特地挑選的都是跟背景類似的紅色商品）：
再一個就是樓層標題／廣告圖片／頁面底部等部位的細節(jié)元素了噪服，都是結(jié)合頭部的圓形來延伸的毡泻，給你們看下：
3、后期修改階段粘优。
這個階段有幾個注意事項仇味，比如：先溝通再修改／先緊急再一般等，而且在電商設(shè)計里中途要修改文案或臨時要修改文案都是非常普遍的事情雹顺，大家正车つ看待就好。
（1）先溝通再修改
其實在整個設(shè)計過程中都會涉及到溝通的問題嬉愧，前面我們已經(jīng)提到了贩挣，在拿到需求的前期就是有很多個溝通環(huán)節(jié)，同樣的在整個頁面設(shè)計完成后，我們需要給到自己的老大或者運營審核對不對王财？
而通常情況下卵迂，他們都會給到一些自己的建議或看法，那么作為設(shè)計師當然是既要聽取意見搪搏，也要有自己的想法了狭握，這個時候的溝通協(xié)商就很重要了闪金，比如哪些地方設(shè)計師是應(yīng)該改的疯溺，哪些地方是可以說服運營接受的，哪些地方應(yīng)該繼續(xù)完善的哎垦，所有這些都需要去溝通協(xié)商囱嫩。
（2）先緊急再一般
事情分輕重緩急，修改也一樣漏设，也分緊急和不緊急墨闲，這個時候就不一定是按照從上而下的順序來修改了，而是要有優(yōu)先級郑口，什么事情比較緊急就先做那件事情鸳碧，所以這就要視具體情況而定了，比如我可能某個地方配色不是很好我想要修改一下犬性，但是這個的緊急程度弱于出一份樓層商品的坑位圖模版規(guī)范瞻离，那我就會先把規(guī)范先出了，其他的事情先放一邊乒裆。
總結(jié)
一般來說套利，對于不同階段的設(shè)計師，在前期溝通思考／中期執(zhí)行／后期修改這三項上所花費的時間比例是不一樣的鹤耍，假設(shè)我把設(shè)計師粗略分為初級中級高級三個級別肉迫，做同一個項目都給了10小時的時間，那么他們在每一個項目階段所投入的精力可能是下面這樣分配的稿黄，我大致做了一個表給大家感受下：
這張表格我只是粗略示意一下不同階段設(shè)計師的工作精力分配喊衫，相信已經(jīng)非常一目了然了吧，不過實際上同一個項目要想達到相同的效果杆怕，三個階段的設(shè)計師所花費的時間不可能一樣的格侯，初級設(shè)計師花費的時間可能不止10小時，高級設(shè)計師花費的時間可能不到10小時财著。
以上联四，我今天的設(shè)計流程分享就結(jié)束了，在我看來撑教，作為一名設(shè)計師朝墩，要么是你有能力說服別人聽你的，要么是你能做到不被不專業(yè)的人牽著鼻子走或者被忽悠，因為在實際項目中收苏，任何一個環(huán)節(jié)的不專業(yè)都是會拖累到其他人的亿卤。設(shè)計師要想擺脫反復(fù)改稿的噩夢，自身就必須要更加專業(yè)以及見多識廣鹿霸，要么你能選擇去跟一群專業(yè)的人共事排吴，要么是你能用你的專業(yè)引導(dǎo)或配合別人按你的思路走，畢竟懦鼠，任何修改或結(jié)果都應(yīng)該是有意義的以及有道理的钻哩，別人才會信服。
