如何做好復(fù)雜單品模塊的交互設(shè)計(jì)?

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

一、常規(guī)思路

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

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

根據(jù)以往血淚史,整理了大部分我們?nèi)菀子龅降膯?wèn)題:

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

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

 

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

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

定位模塊

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

理清需求

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

字段支持

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

梳理狀態(tài)

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

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

信息打組

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

精簡(jiǎn)信息

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

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

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

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

第三步 自查

自查

這個(gè)模塊是什么?業(yè)務(wù)需求是否滿足?用戶需求是否滿足?信息層級(jí)是否無(wú)誤?是否有信息遺漏?版式是否合理(不臃腫、對(duì)應(yīng)關(guān)系無(wú)誤)?如果自查后,并沒有發(fā)現(xiàn)明顯問(wèn)題,但還是覺得哪里不舒服,到此時(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ò)自查都沒有發(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)并不一定就是要照搬,大家往往找到的案例幾乎都是完整的視覺稿,切記交互階段不要引入視覺元素,否則會(huì)「害人害己」,以自身的親身經(jīng)歷勸諫大家,曾經(jīng)某模塊用了視覺元素,到了視覺階段,業(yè)務(wù)方堅(jiān)持要用交互稿中的樣式,導(dǎo)致十分尷尬。對(duì)照競(jìng)品一定是要在有了初稿之后,否則競(jìng)品會(huì)影響到你自己的設(shè)計(jì)產(chǎn)出。對(duì)于競(jìng)品的參考,這里建議大家參考信息層級(jí)的處理方式、排版布局、狀態(tài)劃分等等??傊灰獏⒖计渲械囊曈X元素。

第五步 快速迭代

小范圍用研

身邊的同事,你的朋友都會(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)致沒有發(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ì)的了。外加用研的用戶訪談結(jié)論,主觀加客觀,還是有一定意義幫助你沉淀對(duì)應(yīng)模塊的設(shè)計(jì)經(jīng)驗(yàn)的。

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

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

上圖是一個(gè)限量新品預(yù)售模塊,常規(guī)理解下,電商的活動(dòng)往往都帶有「促銷」概念的,有一定優(yōu)惠。而上圖商品,貌似我們沒有感受到有優(yōu)惠,沒有優(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è),那些「追捧」新品的用戶,可能就沒注意到,進(jìn)而這一部分用戶是不是就很難抓住了?很明顯問(wèn)題出現(xiàn)在第一步,沒有明確單品是什么。

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

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

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

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

我們?cè)侔凑招畔⒋蚪M,細(xì)化里面的內(nèi)容,按照優(yōu)先級(jí),羅列如下,得出下圖:

然后我們?cè)僦鹨惶畛溥M(jìn)去細(xì)節(jié)。此時(shí),我們與業(yè)務(wù)了解到,此模塊最終出現(xiàn)的商品和品牌都是通過(guò)招商渠道,上線的都是大牌爆品,如果是熟知度很高的,一定程度上可以忽略商品名對(duì)商品的解釋,進(jìn)而我們得到如下圖:

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

結(jié)語(yǔ)

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

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

 

作者的微信公眾號(hào):「未知素設(shè)計(jì)」

每天更新,
全站高品質(zhì)素材免費(fèi)下載!