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

一、常規(guī)思路

我們普通常規(guī)思路一般都是，將促銷玩法或者根據(jù)能夠提供的字段直接套用在常見的普通單品上，就開始進行排版了，亦或換種表達方式。大多關(guān)注點放在了形式層面，很容易忽略信息層級的表達。并且，針對一個單品，大家也不定愿意花時間思考，而實際上，單品模塊才是轉(zhuǎn)化的重要關(guān)鍵點。無論活動頁面多么花哨，最終的落點還是在最基本的單品身上。若按照這樣的思路。經(jīng)過「精雕細琢」后，想必問題也就接踵而來了。

二、會遇到的問題

根據(jù)以往血淚史，整理了大部分我們?nèi)菀子龅降膯栴}：

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

如果以上的問題，你也遇到過類似或者同類的，我想下面的方法會對你日后起到一定的幫助，也是我親身在工作中，使用過的思路。

三、設(shè)計技巧

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

定位模塊

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

理清需求

這里的需求包含用戶需求和業(yè)務(wù)需求，比如我們常見的業(yè)務(wù)招商需求，品牌方要求品牌元素的露出。用戶的需求，場景要考慮全。理清后，要對需求篩選，并不一定每個需求都是真需求，且也要明確作為一個「初露頭角」的單品入口，應(yīng)該展示哪些信息，而不是一股腦的全是重點。如果此時信息很多，別著急，后面的步驟會幫助你。

字段支持

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

梳理狀態(tài)

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

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

信息打組

同類信息組合到一起，如價格類：原價+劃線價、商品信息：規(guī)格+名稱 等。

精簡信息

避免信息層級過多，內(nèi)容臃腫的可能，同類型的，是否可以縮減成一種來表達？談到這點，想起了椰樹椰汁，試問大家，有誰能記得椰樹椰汁瓶子上面的字都寫的什么嗎？

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

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

經(jīng)過以上兩個環(huán)節(jié)，想必即便不是設(shè)計師，也能夠把思路放清晰，結(jié)構(gòu)想明白，此時就可以開始排版了。到此，是不是就能夠設(shè)計出完全沒問題，或者問題較少的方案呢？個人來看，還是要看經(jīng)驗是否充足，如果是老司機，到此環(huán)節(jié)，應(yīng)該不會有太大的問題，而對于新入行的小鮮肉，可能還需要后面的步驟。

第三步 自查

自查

這個模塊是什么？業(yè)務(wù)需求是否滿足？用戶需求是否滿足？信息層級是否無誤？是否有信息遺漏？版式是否合理（不臃腫、對應(yīng)關(guān)系無誤）？如果自查后，并沒有發(fā)現(xiàn)明顯問題，但還是覺得哪里不舒服，到此時，如果你已是「山窮水盡」、「油盡燈枯」，那么就考慮是否有其他的展示形式，也就是前面所說的，替代的表達方式。

第四步 細節(jié)打磨

多版本嘗試

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

如果經(jīng)過自查都沒有發(fā)現(xiàn)問題，尋求身邊同事協(xié)助，一起發(fā)現(xiàn)問題所在。這里有個小技巧給大家。先盡量用色塊來嘗試內(nèi)容布局。用色塊排版的好處是能夠讓你將精力聚焦在以信息優(yōu)先級上，盡可能避免受到其中的細節(jié)打擾。以最小成本試錯思路，會幫你提升產(chǎn)出效率。

競品對比

初稿之后，對比競品，取長補短。取長并不一定就是要照搬，大家往往找到的案例幾乎都是完整的視覺稿，切記交互階段不要引入視覺元素，否則會「害人害己」，以自身的親身經(jīng)歷勸諫大家，曾經(jīng)某模塊用了視覺元素，到了視覺階段，業(yè)務(wù)方堅持要用交互稿中的樣式，導(dǎo)致十分尷尬。對照競品一定是要在有了初稿之后，否則競品會影響到你自己的設(shè)計產(chǎn)出。對于競品的參考，這里建議大家參考信息層級的處理方式、排版布局、狀態(tài)劃分等等?？傊灰獏⒖计渲械囊曈X元素。

第五步 快速迭代

小范圍用研

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

第六步 沉淀經(jīng)驗

沉淀設(shè)計經(jīng)驗

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

以上六步，如果每一步都能夠做到「盡善盡美」，想必應(yīng)該就不會遇到開篇提到的那些問題了。為了驗證上面提到的方法有用，簡單舉兩個「活生生」的實例給大家。

四、實例對照

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

我們從頭來看，這是一個什么單品？限量新品預(yù)售，我們回看上圖，不知道大家是否有注意到「新品」信息，「新品」在整體模塊優(yōu)先級最低的區(qū)域內(nèi)，試問，如果是掃視瀏覽，在一個內(nèi)容豐富的活動頁，那些「追捧」新品的用戶，可能就沒注意到，進而這一部分用戶是不是就很難抓住了？很明顯問題出現(xiàn)在第一步，沒有明確單品是什么。

我們再看另一個比較「失敗」的案例，大家先看下模塊本身，先看是否能理解這個單品的含義，再閱讀后文。

上圖的單品是粉絲福利商品，玩法是關(guān)注店鋪就可享受比原價優(yōu)惠的價格。為什么說他失敗，首先，不知道大家是否能領(lǐng)會到按鈕上的關(guān)注和預(yù)約指的是什么？點擊了之后是去哪里呢？其次關(guān)注的是單品還是關(guān)注什么？預(yù)約又是什么？其次，專享價是我當(dāng)前看到的價格是和其他人不同的價格嗎？是我的特權(quán)嗎？專享價比正常價優(yōu)惠了多少呢？此模塊的信息的確很簡潔，但最基本是什么都沒有傳達清楚。

我們嘗試優(yōu)化一下。

玩法我們已明確，能支持的功能我們參照上圖案例，我們看用戶需求是什么：這是什么商品？與正常價優(yōu)惠多少？我點哪里可以享受優(yōu)惠價？業(yè)務(wù)訴求，提升粉絲量，重點突出關(guān)注店鋪。關(guān)于狀態(tài)這里就不贅述了。根據(jù)需求需要展示的信息有：商品信息（商品圖+名稱+價格對比）、關(guān)注信息。 如何展示？按照優(yōu)先級，我們梳理成下圖左側(cè)，但業(yè)務(wù)訴求重點突出關(guān)注，業(yè)務(wù)側(cè)重點拉新，我們得出右側(cè)大致結(jié)構(gòu)。

我們再按照信息打組，細化里面的內(nèi)容，按照優(yōu)先級，羅列如下，得出下圖：

然后我們再逐一填充進去細節(jié)。此時，我們與業(yè)務(wù)了解到，此模塊最終出現(xiàn)的商品和品牌都是通過招商渠道，上線的都是大牌爆品，如果是熟知度很高的，一定程度上可以忽略商品名對商品的解釋，進而我們得到如下圖：

此時模塊沒有剛才看起來那么厚重，到此環(huán)節(jié)，玩法是能解釋清楚，后面就是在此基礎(chǔ)之上優(yōu)化。自查環(huán)節(jié)上文已提到的幾個關(guān)鍵點，大家可以自行驗證。后續(xù)細節(jié)打磨的步驟就需要大家在實際工作中，慢慢逐一修正了，我們這里就不再贅述了。

結(jié)語

以上，是在實際工作中提取出來的一些小技巧和方法，也許結(jié)果看起來，可能你沒用方法也能畫出來，甚至有更好的方案，當(dāng)然這也是可行的。任何方法適用的都是當(dāng)你遇到問題時，輔助得出結(jié)論的工具。

當(dāng)然如果你在工作中對此類型的問題有更好的方法和技巧，歡迎留言評論交流。雖文章是定義在復(fù)雜的單品模塊的設(shè)計上，但思路也能適用于一些樓層，或其他模塊上，還望能對大家在實際工作中有所幫助，如有不足，感謝指正。

作者的微信公眾號：「未知素設(shè)計」