TTTing：學會這3招，跟反復改稿Say No！

很多群友問到我關于電商設計流程的問題，其實這個問題有點泛，因為電商設計包含的分支還蠻多的，比如Banner設計／專題頁設計／平臺界面設計／內頁設計／店鋪首頁設計／詳情頁設計／引導頁設計／H5頁面設計等等，既然這樣，我就姑且拿出一個專題頁設計作為案例跟大家分享一下我的設計流程好了。

下面這個頁面是我今年3月份左右做的一個京東平臺的專題頁活動，大家可以先看一下，然后接下來我會從前期溝通思考－中期執(zhí)行－后期修改三個方面給大家分析講解它是怎么做出來的（文末附帶gif動圖）。

（做案例用圖在原項目圖上略有改動）

因為我之前一直都是屬于為平臺服務的電商設計師，所以我下面要講的一些點可能是大多數(shù)服務于店鋪的電商設計師所沒有接觸過的（也僅僅是我個人的一些經驗總結），如果你們想往平臺方向發(fā)展或者希望自己的店鋪設計流程能規(guī)范一點，不防都接觸了解一下（接下來我要講的這些可以說是超級干貨了噢，請大家自備小板凳吶），下面進入正題：

1、前期溝通思考階段。

這個階段主要包含這四個方面：溝通需求／分析定位／視覺推導／風格確定。

（1）溝通需求

做設計的話，溝通肯定是必不可少的了，這里分別涉及到了跟需求人（運營策劃）／交互設計師／前端設計師／領導之間的溝通，很多設計師之所以反復被要求改稿，其實很大程度上就是因為前期溝通這一環(huán)節(jié)出了問題。

大家可以先看下我們的交互稿（嗯，不得不說的是，我們的交互稿其實已經做的很漂亮了，就差上色了。。。）：

首先，我的習慣是，拿到交互稿后，我會從上到下完整的先過一遍交互稿，一方面是看交互稿的內容完不完整，是不是還有些內容點忘記做了，另一方面也會咨詢一下交互設計師，有哪些地方是需要設計師特別注意的啊，有沒有什么內容是要優(yōu)先做的啊等等，如果沒有特殊要求的話，我一般都是會從上而下一步步來做。

其次，針對一些樓層板塊的內容，一方面我會去跟前端交流溝通，看能不能實現(xiàn)或能不能跟平臺兼容，如果不能的話就要協(xié)商去掉以免白做了浪費時間，另一方面我會咨詢下按照交互稿提供的一些邏輯，前端那邊實現(xiàn)起來困不困難，需要設計師做些什么支持等等。

第三，我會去看一下頭部Banner圖的文案標題這些是否是最后確認了，以免涉及到字體變形最后發(fā)現(xiàn)文案要改那就死翹翹了，不過當我覺得標題不是特別好或者有疑問的時候，我都會去跟運營直接溝通商量，看能不能對文案有一些修改調整（所以這也就導致了有一部分需求人很感激我，認為我比較專業(yè)和有責任心，但同時也有小部分需求人會覺得我冒犯了他們，對我有點痛恨，哈哈～）。

以上就是我的一些前期準備工作，算是溝通完了，接下來我們繼續(xù)看。

（2）分析定位

分析定位的話，我們可以根據活動的標題文案和活動主題來著手，大家不妨先來看下我們這次活動的文案和主題：

主標題：引爆415，嗨購3天3夜

副標題／利益點：滿199減100

活動主題：京東全球購1周年感恩回饋

接下來開始分析我們這次活動的定位和目的：

首先，需要說明的是，我們這個活動其實分為三個時間段（國家日／大牌盛宴／引爆415），每個時間段對應一個頁面，由于他們在同一個活動主題下面，所以他們之間的視覺風格是類似的，只是說從時期越靠后氛圍會越來越強烈而已。

其次，既然是周年慶主題，也有滿199減100這么大的折扣，畫面肯定還是得喜慶一點有沖擊力一點會更合適，同時文案里也出現(xiàn)了“引爆”“嗨購”“全球”等字眼，我很自然地就聯(lián)想到了圓形這種形式，并且知道通過對圓形和大量商品的排列處理就可以達到我想要的效果。

第三，這個頁面作為高潮期應該是最熱烈的，但熱烈并不意味著這個頁面就是要做的花里胡哨／低端劣質，畢竟都是賣一些進口商品，所以也就涉及到每個階段頁面之間既要考慮視覺統(tǒng)一以外，也要應該考慮全球購自身的品牌調性這2個方面，這也就決定了本次活動的視覺風格要求是既要熱鬧，也要略顯品質，同時要便于不同時期頁面的視覺延伸（比如我這里的延伸元素就是圓形）。

（3）視覺推導

做完以上需求分析，接下來很重要的一件事情就是做視覺推導了，為了避免因為風格方向錯誤而造成的反復修改，我通常都會出一份視覺推導，一方面是要把我的思考點展現(xiàn)給他看合不合拍，另一方面也是為了讓需求人了解下我最后出來的頁面大致的樣子，如果他確認沒問題了，我才會動手做執(zhí)行。

接下來，我將從形式／排版／配色／布局4個方面來完成我的這份視覺推導：

形式：首先，像我們這種常規(guī)賣貨的專題頁最重要的部分其實就是頭部Banner部分的設計了，因為下面樓層的布局和風格都是依據這個頭部Banner來延伸執(zhí)行的。

同時，我在前面提到了會用圓形這個元素來發(fā)散思維，一方面是因為圓形寓意著圓滿／全球，跟我們的全球購周年慶主題契合，另一方面是因為圓形具有視覺聚焦的效果，通過一定的構成法則來處理，可以產生較強的視覺沖擊力，同時也比大面積的堆積素材或弄一些飄來飄去的點綴元素看起來更高級。

再一個，我個人也是比較喜歡簡潔扁平一些的設計，如果跟項目需要不沖突，需求人也愿意接受我的堅持的話，我都會盡量按自己的喜好來。

舉例，大家可以感受下：

排版：這里主要是指Banner的排版布局，包含整體排版／標題樣式／商品擺放3個方面。

大致就是以圓形為主體（一方面是因為構圖穩(wěn)定，另一方面是因為文字信息部分放圓形中間視覺最為聚焦），標題居中排版的，部分商品圍繞著圓形放置，同時考慮到“引爆”這個關鍵詞，所以也想通過商品來營造一種一大推貨品傾瀉而出的氣勢。

舉例：假想中間部分是文案信息就好了，風格什么的不用管。

配色：關于顏色，冷暖搭配眼睛不累，我最后選擇了紅色／黃色／紫色的冷暖搭配，其實也是考慮到了中國的一些傳統(tǒng)文化和喜好，比如像我們的國旗就是紅色＋黃色，無論是國慶節(jié)／元旦節(jié)／春節(jié)等喜慶的節(jié)日，始終也都是紅色和黃色是最常用的，所以采用紅色也是為了大大降低對顧客的引導成本，因為在他們心底里就是看到紅色就會聯(lián)想到喜慶，喜慶往往也意味著會有活動促銷，紅色也容易讓人感覺到熱烈和沖動，激發(fā)購買欲。

舉例：大家只看配色就好，以大紅色為主色背景色。

（圖片來自深圳JDC運營設計部）

布局：這里指的是樓層布局，因為這個活動還比較大，需要承載很多商家店鋪和商品信息，而且隨時都有可能賣斷貨的情況，為了便于后期維護和替換商品圖信息什么的，樓層布局還是常規(guī)一點比較好。

其實，在以前的一篇文章“平臺電商設計VS店鋪電商設計師的差別”我也提到過，這也是大型平臺專題頁活動與一些店鋪專題或某一款產品專題頁活動在設計上的差別，因為大型平臺專題頁活動考慮的因素是方方面面的，比如整體的品牌調性／后期維護成本／包容性和耐看性／活動重要層級等等，這些都決定了這種專題頁在樓層部分還是需要常規(guī)簡潔一點比較好，設計師需要考慮更多用戶體驗和細節(jié)方面的問題，而店鋪專題或者某一款產品的推廣專題往往可以做的看起來更具創(chuàng)意一些，可以天馬行空，背景做的非常浮夸。

舉例：僅看布局，大型平臺專題頁活動的樓層都是比較方方正正的商品列表形式。

以上我從各個方面給這個活動分析了定位和我要設計的方向，具體就以實際輸出為主了，因為各方面原因導致最后的設計稿可能會有些偏差，但方向就是這樣子的。

同時這里需要說明的一點就是，視覺推導就是把握大方向就好了，千萬不要一開始就想的特別細致，想著去找出完全一模一樣的案例，如果你要完全一樣的案例那成了就是抄襲了，設計師一定要有自己的想法才不容易撞車，而且在那么短時間內你也不可能一下子給出完這個的方案稿，只能說給個大概。

（4）風格確定

看完前面的分析，大家腦海里也許已經有一個大概的樣子模型了吧，但我們也不能夠說得太細，只是需要了解方向思路對不對就好了，一方面是因為還沒有開始執(zhí)行你也沒法具體到很細致的地方，另一方面是因為，如果一開始就把整個頁面的設計全定死了，那往后如果出現(xiàn)突發(fā)情況或者被需求人誤以為頁面就是這樣了，后面你想靈活發(fā)揮就很難了。

總之，以上是我自己的分析思路和視覺推導的思路，對你們也許有一定的借鑒意義，我自己按這些思路來做設計基本是不會有太大差錯了，因為我腦海里的需求類別是不計其數(shù)的，另一方面，經驗越豐富越見多識廣的設計師，分析看待問題也會更全面，出錯的風險更低，當然平臺類型的活動專題頁設計和店鋪類的還是會有些許差別的，但分析思路是類似的。

2、中期執(zhí)行階段。

這個階段按正常情況的話，主要有三個注意事項：先頭部再樓層／先整體再細節(jié)／先排版再標題。

當然，我們也會遇到一些不正常的情況，比如時間特別緊急，需求人要你先把樓層部分先做了，提供模版給到商家先拿去做圖，嗯有時候確實會有這么炒蛋的緊急情況發(fā)生，因為可能就是臨時決定出一個活動，確實沒辦法了。

但大多數(shù)時候還是可以按正常情況來看的，所以我們一個個點來講解：

（1）先頭部再樓層

首先，頭部Banner部分相當于整個頁面的門面，用戶進入到這個頁面第一眼就會從這個頭部Banner來感受你這個活動是怎么回事，比如這是賣什么東西的頁面啊，有沒有什么活動優(yōu)惠啊，這個頁面吸不吸迎人要不要分享給朋友啊等等。

其次，頭圖的風格樣式，決定了整個頁面的調性，比如樓層標題部分／按鈕形式 ／背景顏色樣式等該如何選擇，一般來說這些都是可以從頭部Banner部分提取元素和顏色的。

（3）先排版再標題

我知道很多人的習慣是先做標題部分，而且不管三七二十一，先做了字體變形再說，但是一般來說我都不太建議大家這么做，還有些人不知道從何下手，干脆先把標題做些字體變形，還加上效果等等，但是這就存在幾個問題?。?/p>

萬一需求人突然要改標題文案怎么辦？

萬一你把字做好后發(fā)現(xiàn)其他的商品圖或元素怎么排都排不好看了怎么辦？

萬一你光做一個字體設計就花費了項目一大半的時間怎么辦？

所以基于種種原因的考慮，我們都是先把文案／商品（如果有的話）先丟在畫布里，弄好整體的排版后再去做標題部分的，并且有時候標題字體需要設計一下，有時候只是需要打幾個字做個排版就好了，要看具體情況的，因為不是說做了字體變形就一定好，不做字體變形就一定不好。

（2）先整體再細節(jié)

其實無論做什么事情都有這么個原則，畫畫／做產品／做設計等等，都是先整體把握大感覺，然后再優(yōu)化各個元素的位置擺放／陰影顏色等細節(jié)。

比如，做這個頭部的時候，我的做法思路是什么樣的呢？做了個gif給你們感受下（背景部分的商品我是想要營造一種一大推貨品傾瀉而出的感覺，但為了不干擾主體，所以特地挑選的都是跟背景類似的紅色商品）：

再一個就是樓層標題／廣告圖片／頁面底部等部位的細節(jié)元素了，都是結合頭部的圓形來延伸的，給你們看下：

3、后期修改階段。

這個階段有幾個注意事項，比如：先溝通再修改／先緊急再一般等，而且在電商設計里中途要修改文案或臨時要修改文案都是非常普遍的事情，大家正常看待就好。

（1）先溝通再修改

其實在整個設計過程中都會涉及到溝通的問題，前面我們已經提到了，在拿到需求的前期就是有很多個溝通環(huán)節(jié)，同樣的在整個頁面設計完成后，我們需要給到自己的老大或者運營審核對不對？

而通常情況下，他們都會給到一些自己的建議或看法，那么作為設計師當然是既要聽取意見，也要有自己的想法了，這個時候的溝通協(xié)商就很重要了，比如哪些地方設計師是應該改的，哪些地方是可以說服運營接受的，哪些地方應該繼續(xù)完善的，所有這些都需要去溝通協(xié)商。

（2）先緊急再一般

事情分輕重緩急，修改也一樣，也分緊急和不緊急，這個時候就不一定是按照從上而下的順序來修改了，而是要有優(yōu)先級，什么事情比較緊急就先做那件事情，所以這就要視具體情況而定了，比如我可能某個地方配色不是很好我想要修改一下，但是這個的緊急程度弱于出一份樓層商品的坑位圖模版規(guī)范，那我就會先把規(guī)范先出了，其他的事情先放一邊。

總結

一般來說，對于不同階段的設計師，在前期溝通思考／中期執(zhí)行／后期修改這三項上所花費的時間比例是不一樣的，假設我把設計師粗略分為初級中級高級三個級別，做同一個項目都給了10小時的時間，那么他們在每一個項目階段所投入的精力可能是下面這樣分配的，我大致做了一個表給大家感受下：

這張表格我只是粗略示意一下不同階段設計師的工作精力分配，相信已經非常一目了然了吧，不過實際上同一個項目要想達到相同的效果，三個階段的設計師所花費的時間不可能一樣的，初級設計師花費的時間可能不止10小時，高級設計師花費的時間可能不到10小時。

以上，我今天的設計流程分享就結束了，在我看來，作為一名設計師，要么是你有能力說服別人聽你的，要么是你能做到不被不專業(yè)的人牽著鼻子走或者被忽悠，因為在實際項目中，任何一個環(huán)節(jié)的不專業(yè)都是會拖累到其他人的。設計師要想擺脫反復改稿的噩夢，自身就必須要更加專業(yè)以及見多識廣，要么你能選擇去跟一群專業(yè)的人共事，要么是你能用你的專業(yè)引導或配合別人按你的思路走，畢竟，任何修改或結果都應該是有意義的以及有道理的，別人才會信服。