TTTing：學(xué)會(huì)這3招，跟反復(fù)改稿Say No！

很多群友問到我關(guān)于電商設(shè)計(jì)流程的問題，其實(shí)這個(gè)問題有點(diǎn)泛，因?yàn)殡娚淘O(shè)計(jì)包含的分支還蠻多的，比如Banner設(shè)計(jì)／專題頁設(shè)計(jì)／平臺(tái)界面設(shè)計(jì)／內(nèi)頁設(shè)計(jì)／店鋪首頁設(shè)計(jì)／詳情頁設(shè)計(jì)／引導(dǎo)頁設(shè)計(jì)／H5頁面設(shè)計(jì)等等，既然這樣，我就姑且拿出一個(gè)專題頁設(shè)計(jì)作為案例跟大家分享一下我的設(shè)計(jì)流程好了。

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

（做案例用圖在原項(xiàng)目圖上略有改動(dòng)）

因?yàn)槲抑耙恢倍际菍儆跒槠脚_(tái)服務(wù)的電商設(shè)計(jì)師，所以我下面要講的一些點(diǎn)可能是大多數(shù)服務(wù)于店鋪的電商設(shè)計(jì)師所沒有接觸過的（也僅僅是我個(gè)人的一些經(jīng)驗(yàn)總結(jié)），如果你們想往平臺(tái)方向發(fā)展或者希望自己的店鋪設(shè)計(jì)流程能規(guī)范一點(diǎn)，不防都接觸了解一下（接下來我要講的這些可以說是超級干貨了噢，請大家自備小板凳吶），下面進(jìn)入正題：

1、前期溝通思考階段。

這個(gè)階段主要包含這四個(gè)方面：溝通需求／分析定位／視覺推導(dǎo)／風(fēng)格確定。

（1）溝通需求

做設(shè)計(jì)的話，溝通肯定是必不可少的了，這里分別涉及到了跟需求人（運(yùn)營策劃）／交互設(shè)計(jì)師／前端設(shè)計(jì)師／領(lǐng)導(dǎo)之間的溝通，很多設(shè)計(jì)師之所以反復(fù)被要求改稿，其實(shí)很大程度上就是因?yàn)榍捌跍贤ㄟ@一環(huán)節(jié)出了問題。

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

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

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

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

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

（2）分析定位

分析定位的話，我們可以根據(jù)活動(dòng)的標(biāo)題文案和活動(dòng)主題來著手，大家不妨先來看下我們這次活動(dòng)的文案和主題：

主標(biāo)題：引爆415，嗨購3天3夜

副標(biāo)題／利益點(diǎn)：滿199減100

活動(dòng)主題：京東全球購1周年感恩回饋

接下來開始分析我們這次活動(dòng)的定位和目的：

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

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

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

（3）視覺推導(dǎo)

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

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

形式：首先，像我們這種常規(guī)賣貨的專題頁最重要的部分其實(shí)就是頭部Banner部分的設(shè)計(jì)了，因?yàn)橄旅鏄菍拥牟季趾惋L(fēng)格都是依據(jù)這個(gè)頭部Banner來延伸執(zhí)行的。

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

再一個(gè)，我個(gè)人也是比較喜歡簡潔扁平一些的設(shè)計(jì)，如果跟項(xiàng)目需要不沖突，需求人也愿意接受我的堅(jiān)持的話，我都會(huì)盡量按自己的喜好來。

舉例，大家可以感受下：

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

大致就是以圓形為主體（一方面是因?yàn)闃?gòu)圖穩(wěn)定，另一方面是因?yàn)槲淖中畔⒉糠址艌A形中間視覺最為聚焦），標(biāo)題居中排版的，部分商品圍繞著圓形放置，同時(shí)考慮到“引爆”這個(gè)關(guān)鍵詞，所以也想通過商品來營造一種一大推貨品傾瀉而出的氣勢。

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

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

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

（圖片來自深圳JDC運(yùn)營設(shè)計(jì)部）

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

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

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

以上我從各個(gè)方面給這個(gè)活動(dòng)分析了定位和我要設(shè)計(jì)的方向，具體就以實(shí)際輸出為主了，因?yàn)楦鞣矫嬖驅(qū)е伦詈蟮脑O(shè)計(jì)稿可能會(huì)有些偏差，但方向就是這樣子的。

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

（4）風(fēng)格確定

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

總之，以上是我自己的分析思路和視覺推導(dǎo)的思路，對你們也許有一定的借鑒意義，我自己按這些思路來做設(shè)計(jì)基本是不會(huì)有太大差錯(cuò)了，因?yàn)槲夷X海里的需求類別是不計(jì)其數(shù)的，另一方面，經(jīng)驗(yàn)越豐富越見多識廣的設(shè)計(jì)師，分析看待問題也會(huì)更全面，出錯(cuò)的風(fēng)險(xiǎn)更低，當(dāng)然平臺(tái)類型的活動(dòng)專題頁設(shè)計(jì)和店鋪類的還是會(huì)有些許差別的，但分析思路是類似的。

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

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

當(dāng)然，我們也會(huì)遇到一些不正常的情況，比如時(shí)間特別緊急，需求人要你先把樓層部分先做了，提供模版給到商家先拿去做圖，嗯有時(shí)候確實(shí)會(huì)有這么炒蛋的緊急情況發(fā)生，因?yàn)榭赡芫褪桥R時(shí)決定出一個(gè)活動(dòng)，確實(shí)沒辦法了。

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

（1）先頭部再樓層

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

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

（3）先排版再標(biāo)題

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

萬一需求人突然要改標(biāo)題文案怎么辦？

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

萬一你光做一個(gè)字體設(shè)計(jì)就花費(fèi)了項(xiàng)目一大半的時(shí)間怎么辦？

所以基于種種原因的考慮，我們都是先把文案／商品（如果有的話）先丟在畫布里，弄好整體的排版后再去做標(biāo)題部分的，并且有時(shí)候標(biāo)題字體需要設(shè)計(jì)一下，有時(shí)候只是需要打幾個(gè)字做個(gè)排版就好了，要看具體情況的，因?yàn)椴皇钦f做了字體變形就一定好，不做字體變形就一定不好。

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

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

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

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

3、后期修改階段。

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

（1）先溝通再修改

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

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

（2）先緊急再一般

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

總結(jié)

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

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

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