隨著促銷(xiāo)活動(dòng)日益增多，相繼對(duì)應(yīng)的促銷(xiāo)手段也逐漸變的豐富起來(lái)。拼購(gòu)、秒殺、預(yù)售、好友助力砍價(jià)相繼的誕生，讓普普通通的單品模塊，呈現(xiàn)在用戶(hù)面前也不再那么“單純”了。而這些單品模塊在設(shè)計(jì)過(guò)程中，想必各位也是遇到過(guò)不少問(wèn)題。今天就跟大家一起聊聊，這些復(fù)雜的單品模塊在交互階段應(yīng)該如何設(shè)計(jì)。

常規(guī)思路

我們普通常規(guī)思路一般都是，將促銷(xiāo)玩法或者根據(jù)能夠提供的字段直接套用在常見(jiàn)的普通單品上，就開(kāi)始進(jìn)行排版了，亦或換種表達(dá)方式。大多關(guān)注點(diǎn)放在了形式層面，很容易忽略信息層級(jí)的表達(dá)。并且，針對(duì)一個(gè)單品，大家也不定愿意花時(shí)間思考。

而實(shí)際上，單品模塊才是轉(zhuǎn)化的至關(guān)重要。無(wú)論活動(dòng)頁(yè)面多么花哨，最終的落點(diǎn)還是在最基本的單品身上。若按照這樣的思路。經(jīng)過(guò)“精雕細(xì)琢”后，想必問(wèn)題也就接踵而來(lái)了。

會(huì)遇到的問(wèn)題

根據(jù)以往血淚史，整理了大部分我們?nèi)菀讜?huì)遇到的問(wèn)題：

1. 瀏覽動(dòng)線混亂，不知道從何看起，單品模塊一眼get不到重點(diǎn)。
2. 覺(jué)得每個(gè)信息都很重要，不能舍棄，但坑位大小有限，又放不下，放哪里都合適，但好像又都不合適。
3. 信息厚重，整體沒(méi)有節(jié)奏感。
4. 遇到坑位大小不同，信息相同的兩個(gè)單品設(shè)計(jì)時(shí)，容易忽略一致性原則。
5. 異常狀態(tài)較多時(shí)，極端情況下（異常狀態(tài)全部存在）整個(gè)樓層過(guò)于花哨。
6. 玩法解釋不清楚，看不懂，理解有偏頗。
7. 畫(huà)了很多版，但總都差那么一點(diǎn)點(diǎn)，比如：下圖是我曾經(jīng)對(duì)一個(gè)單品模塊的執(zhí)（瞎）著（搞）。

如果以上的問(wèn)題，你也遇到過(guò)類(lèi)似或者同類(lèi)的，我想下面的方法會(huì)對(duì)你日后起到一定的幫助，也是我親身在工作中，使用過(guò)的思路。

設(shè)計(jì)技巧

第一步：明確內(nèi)容??

①定位模塊

先搞清楚，這個(gè)模塊是什么？玩法是什么？如上面所提到的“限量新品預(yù)售”，這些是決定該要呈現(xiàn)什么內(nèi)容的重要因素。

②理清需求

這里的需求包含用戶(hù)需求和業(yè)務(wù)需求，比如：我們常見(jiàn)的業(yè)務(wù)招商需求，品牌方要求品牌元素的露出。用戶(hù)的需求，場(chǎng)景要考慮全。

理清后，要對(duì)需求篩選，并不一定每個(gè)需求都是真需求，且也要明確作為一個(gè)“初露頭角”的單品入口，應(yīng)該展示哪些信息，而不是一股腦的全是重點(diǎn)。如果此時(shí)信息很多，別著急，后面的步驟會(huì)幫助你。

③字段支持

往往遇到，用戶(hù)需要的，或者我們希望展示的，以當(dāng)前現(xiàn)有的資源，是無(wú)法支持到的。若無(wú)法支持，探索是否有其他方式可以代替。

④梳理狀態(tài)

模塊的默認(rèn)和異常會(huì)有多少種狀態(tài)。有時(shí)候，一些促銷(xiāo)玩法，表面上，看起來(lái)不是很復(fù)雜，但梳理之后，可能一個(gè)單品模塊的所有狀態(tài)加起來(lái)就有五六種。

第二步：確定內(nèi)容?

①信息打組

同類(lèi)信息組合到一起，如價(jià)格類(lèi)：原價(jià)+劃線價(jià)；商品信息：規(guī)格+名稱(chēng)等。

②精簡(jiǎn)信息

避免信息層級(jí)過(guò)多，內(nèi)容臃腫的可能，同類(lèi)型的，是否可以縮減成一種來(lái)表達(dá)？

談到這點(diǎn)，想起了椰樹(shù)椰汁，試問(wèn)大家，有誰(shuí)能記得椰樹(shù)椰汁瓶子上面的字都寫(xiě)的什么嗎？

③梳理優(yōu)先級(jí)，做取舍

該模塊需要傳遞的信息做優(yōu)先級(jí)梳理。以現(xiàn)有模塊能承載的信息量，做刪減。根據(jù)經(jīng)驗(yàn)，三個(gè)優(yōu)先級(jí)區(qū)域在一個(gè)模塊已經(jīng)是比較飽滿(mǎn)的狀態(tài)了?！吧賱t空、滿(mǎn)則溢”，當(dāng)然，這個(gè)環(huán)節(jié)要根據(jù)具體情況具體來(lái)看。

經(jīng)過(guò)以上兩個(gè)環(huán)節(jié)，想必即便不是設(shè)計(jì)師，也能夠把思路放清晰，結(jié)構(gòu)想明白，此時(shí)就可以開(kāi)始排版了。

到此，是不是就能夠設(shè)計(jì)出完全沒(méi)問(wèn)題，或者問(wèn)題較少的方案呢？

個(gè)人來(lái)看，還是要看經(jīng)驗(yàn)是否充足，如果是老司機(jī)，到此環(huán)節(jié)，應(yīng)該不會(huì)有太大的問(wèn)題，而對(duì)于新入行的小鮮肉，可能還需要后面的步驟。

第三步：自查?

這個(gè)模塊是什么？業(yè)務(wù)需求是否滿(mǎn)足？用戶(hù)需求是否滿(mǎn)足？信息層級(jí)是否無(wú)誤？是否有信息遺漏？版式是否合理（不臃腫、對(duì)應(yīng)關(guān)系無(wú)誤）？

如果自查后，并沒(méi)有發(fā)現(xiàn)明顯問(wèn)題，但還是覺(jué)得哪里不舒服，到此時(shí)，如果你已是“山窮水盡”、“油盡燈枯”，那么就考慮是否有其他的展示形式，也就是前面所說(shuō)的，替代的表達(dá)方式。

第四步：細(xì)節(jié)打磨

①多版本嘗試

這里提到的多版本嘗試，要保證優(yōu)先級(jí)不變的基礎(chǔ)之上，嘗試多種排版或布局形式。力爭(zhēng)找到最優(yōu)方案。當(dāng)你輸出多個(gè)版本且無(wú)法從中抉擇時(shí)，那就證明當(dāng)前任何一個(gè)方案都存在一定的問(wèn)題。

如果經(jīng)過(guò)自查都沒(méi)有發(fā)現(xiàn)問(wèn)題，尋求身邊同事協(xié)助，一起發(fā)現(xiàn)問(wèn)題所在。

這里有個(gè)小技巧給大家：先盡量用色塊來(lái)嘗試內(nèi)容布局，用色塊排版的好處是能夠讓你將精力聚焦在以信息優(yōu)先級(jí)上，盡可能避免受到其中的細(xì)節(jié)打擾。同以最小成本試錯(cuò)思路，會(huì)幫你提升產(chǎn)出效率。

②競(jìng)品對(duì)比

初稿之后，對(duì)比競(jìng)品，取長(zhǎng)補(bǔ)短。取長(zhǎng)并不一定就是要照搬，大家往往找到的案例幾乎都是完整的視覺(jué)稿，切記交互階段不要引入視覺(jué)元素，否則會(huì)“害人害己”。

以自身的親身經(jīng)歷勸諫大家，曾經(jīng)某模塊用了視覺(jué)元素，到了視覺(jué)階段，業(yè)務(wù)方堅(jiān)持要用交互稿中的樣式，導(dǎo)致十分尷尬。對(duì)照競(jìng)品一定是要在有了初稿之后，否則競(jìng)品會(huì)影響到你自己的設(shè)計(jì)產(chǎn)出。

對(duì)于競(jìng)品的參考，這里建議大家參考信息層級(jí)的處理方式、排版布局、狀態(tài)劃分等等，總之不要參考其中的視覺(jué)元素。

第五步：快速迭代??

小范圍用研：

身邊的同事，你的朋友都會(huì)成為你設(shè)計(jì)產(chǎn)出的幫助者，行業(yè)內(nèi)外均可，有時(shí)候他們的建議會(huì)讓你更佳堅(jiān)定你的設(shè)計(jì)方案，有時(shí)也會(huì)發(fā)現(xiàn)你發(fā)現(xiàn)不到的問(wèn)題。我們自身往往在設(shè)計(jì)的過(guò)程中，很容易陷入自己的觀點(diǎn)和認(rèn)知，導(dǎo)致沒(méi)有發(fā)現(xiàn)問(wèn)題的所在。

第六步：沉淀經(jīng)驗(yàn)??

沉淀設(shè)計(jì)經(jīng)驗(yàn)：

上線后，驗(yàn)證設(shè)計(jì)方案最佳的辦法就是看數(shù)據(jù)，但數(shù)據(jù)需要對(duì)比，理想是能A/B方案，才能知道哪個(gè)方案最優(yōu)，哪個(gè)方案有問(wèn)題。而在實(shí)際工作中A/B方案對(duì)于大型活動(dòng)，業(yè)務(wù)上存在一定風(fēng)險(xiǎn)，所以這里提到的對(duì)比，也就只能是相對(duì)的了。外加用研的用戶(hù)訪談結(jié)論，主觀加客觀，還是有一定意義幫助你沉淀對(duì)應(yīng)模塊的設(shè)計(jì)經(jīng)驗(yàn)的。

以上六步，如果每一步都能夠做到”盡善盡美”，想必應(yīng)該就不會(huì)遇到開(kāi)篇提到的那些問(wèn)題了。為了驗(yàn)證上面提到的方法有用，簡(jiǎn)單舉兩個(gè)“活生生”的實(shí)例給大家。

實(shí)例對(duì)照

上圖是一個(gè)限量新品預(yù)售模塊，常規(guī)理解下，電商的活動(dòng)往往都帶有“促銷(xiāo)”概念的，有一定優(yōu)惠。而上圖商品，貌似我們沒(méi)有感受到有優(yōu)惠，沒(méi)有優(yōu)惠的產(chǎn)品出現(xiàn)在大型電商活動(dòng)中一定是有原因的。

我們從頭來(lái)看，這是一個(gè)什么單品？

限量新品預(yù)售，我們回看上圖，不知道大家是否有注意到“新品”信息，“新品”在整體模塊優(yōu)先級(jí)最低的區(qū)域內(nèi)。試問(wèn)，如果是掃視瀏覽，在一個(gè)內(nèi)容豐富的活動(dòng)頁(yè)，那些“追捧”新品的用戶(hù)，可能就沒(méi)注意到，進(jìn)而這一部分用戶(hù)是不是就很難抓住了？

很明顯問(wèn)題出現(xiàn)在第一步，沒(méi)有明確單品是什么。

我們?cè)倏戳硪粋€(gè)比較“失敗”的案例，大家先看下模塊本身，先看是否能理解這個(gè)單品的含義，再閱讀后文。

上圖的單品是粉絲福利商品，玩法是關(guān)注店鋪就可享受比原價(jià)優(yōu)惠的價(jià)格。

為什么說(shuō)他失?。?/strong>