UX設(shè)計(jì):剖析商品列表框架中的細(xì)節(jié)思考

1 評(píng)論 5650 瀏覽 47 收藏 8 分鐘

對(duì)多數(shù)人來(lái)說(shuō),上網(wǎng)沖浪是生活中的不可或缺,豐富的沖浪生活中必不可少的當(dāng)然是買買買,面對(duì)琳瑯滿目的商品圖與文案,用戶怎樣才能快速抓到重點(diǎn)?或者說(shuō),怎么樣才能讓信息出現(xiàn)在合適的位置?come~

01 視覺(jué)瀏覽模型

首先我們要了解瀏覽信息這個(gè)動(dòng)作的本質(zhì)和特征,瀏覽的本質(zhì)就是大腦通過(guò)眼睛去提取信息,是一個(gè)傳達(dá)→解碼的過(guò)程,在這個(gè)過(guò)程中又存在一些特性,我們可以利用這些特性去進(jìn)行一些更高效的信息傳達(dá)。

受閱讀習(xí)慣影響,人們閱讀的起始端都是在左側(cè),結(jié)合依據(jù)尼爾森等老前輩發(fā)布的眼球軌跡研究報(bào)告可知,視覺(jué)瀏覽習(xí)慣呈“F”型且是不受控的潛意識(shí)習(xí)慣;同時(shí)可以延伸出例如“E”、“Z”等瀏覽模型,我們可以根據(jù)這些視覺(jué)模型的特性,結(jié)合產(chǎn)品的戰(zhàn)略層目標(biāo),將信息放置在合適的位置,已達(dá)到信息傳達(dá)率的最大化。

02 單元結(jié)構(gòu)

了解了基本的視覺(jué)瀏覽模型,那我們的地基就已經(jīng)搭建好了,接下來(lái)我們來(lái)看看地基搞定之后的結(jié)構(gòu)要怎么去布局。

首先我們需要清晰產(chǎn)品的屬性,電商平臺(tái)的本質(zhì)是物品的交易,因?yàn)榫€上的特殊性,產(chǎn)品中圖片與文案對(duì)于平臺(tái)的GMV就存在最直接的關(guān)系。這個(gè)時(shí)候,單元布局的輪廓就出來(lái)了,就是“商品圖+關(guān)鍵詞文案”。

同時(shí),不同平臺(tái)戰(zhàn)略方向、發(fā)展階段、團(tuán)隊(duì)規(guī)模等因素的不同,所針對(duì)的用戶群體、消費(fèi)階層、心智、審美等各個(gè)因素都會(huì)大不相同,有時(shí)候甚至在同一平臺(tái)中針對(duì)不同的活動(dòng)、不同的品類進(jìn)行細(xì)致地場(chǎng)景劃分,產(chǎn)生不同的單元結(jié)構(gòu)以滿足商業(yè)目的上的需要。

720°地了解平臺(tái)的屬性特征后,我們就可以開(kāi)始利用這么信息來(lái)搭建基本的單元結(jié)構(gòu)了。

例如平臺(tái)主攻下沉市場(chǎng),用戶群體多為三四線,這個(gè)時(shí)候用戶吸引點(diǎn)在于商品的價(jià)格與賣點(diǎn)關(guān)鍵詞,這時(shí)候我們就可以拉大關(guān)鍵詞文案的占比,縮小圖片的占比,讓他們關(guān)注的內(nèi)容盡可能多的進(jìn)入他們的眼睛,吸引購(gòu)買意向模糊的用戶點(diǎn)擊,增加購(gòu)買意向明確的用戶匹配商品的速度,已達(dá)到GMV的提升。

簡(jiǎn)單來(lái)說(shuō),過(guò)程中需要考慮到平臺(tái)因素所產(chǎn)出的圖片尺寸/比例/精致度/是否統(tǒng)一等,與文案搭配所呈現(xiàn)的是否適用當(dāng)前消費(fèi)場(chǎng)景及用戶心智,是否可以提升用戶的轉(zhuǎn)化率,是否可以提升平臺(tái)的下單率。

單元的架構(gòu)是多樣且復(fù)雜的,就像一塊七巧板。重點(diǎn)就在于對(duì)于產(chǎn)品屬性和用戶行為、場(chǎng)景、心理等特征的分析,需要權(quán)衡各個(gè)關(guān)鍵點(diǎn)的重要性,把用戶需要看到的信息、我們想讓用戶看到的信息、用戶希望看到的信息以合適的結(jié)構(gòu)狀態(tài)呈現(xiàn)給他。

03 點(diǎn)睛標(biāo)簽

我們將大體架構(gòu)搭建好之后,剩下的就是要把細(xì)節(jié)元素給點(diǎn)亮,讓他們起到一個(gè)點(diǎn)睛的效果。

細(xì)分一下,其中涉及到的細(xì)節(jié)元素大致為活動(dòng)標(biāo)簽、折扣標(biāo)簽、跳轉(zhuǎn)按鈕等常規(guī)的分子部件,在結(jié)構(gòu)中,圖片、商品名稱、價(jià)格是用戶關(guān)注的重點(diǎn),其他的部件則起到輔助刺激的作用。圖片和商品名稱的大體結(jié)構(gòu)我們?cè)谏弦徊揭汛罱耍O聛?lái)我們看看這些小部件該如何合理歸置。

先從標(biāo)簽說(shuō)起。整體框架出來(lái)了,用戶所需要了解的商品信息就已經(jīng)基本呈現(xiàn)了,這個(gè)時(shí)候用戶心智上更多的主觀意向,尋找合適的商品,而標(biāo)簽的出現(xiàn),更像是一劑興奮劑,強(qiáng)烈告訴用戶:“這個(gè)品熱度第一!”、“這個(gè)品是最新款!”等我們刺激用戶的聲音,增強(qiáng)用戶查看的欲望。

這個(gè)時(shí)候疑問(wèn)來(lái),那放哪里合適呢?

活動(dòng)標(biāo)簽,多為顯示該商品的熱度、促銷主題、排名等一些大的狀態(tài)性的信息,為的是在用戶心理層面給這個(gè)商品帶來(lái)更多的好感度,放置的位置可以結(jié)合具體場(chǎng)景去分析,可以考慮與商品圖進(jìn)行結(jié)合放置。

遵循由上而下滑動(dòng)的交互原理,我們可知在每個(gè)單元的頂部會(huì)是滑動(dòng)瀏覽時(shí)第一被眼睛識(shí)別的信息,而且可以利用這個(gè)心理去給還沒(méi)看到具體商品的用戶進(jìn)行一個(gè)心理鋪墊,比如商品的品質(zhì)、權(quán)威性等,先入為主的進(jìn)行心理建設(shè),再結(jié)合視覺(jué)瀏覽模型,合適的位置就出來(lái)了。

次要信息比如倒計(jì)時(shí)、商品折扣、商品特點(diǎn)等輔助信息,結(jié)合布局場(chǎng)景考慮,有的可與圖片一起放置增強(qiáng)品質(zhì)感,有的可與文案一起放置增加決策信息,有的可與價(jià)格一起放置,刺激用戶進(jìn)行決策,是很有靈性的一個(gè)點(diǎn)睛之筆。

最后是按鈕,在這里的按鈕可以理解為瀏覽過(guò)程的一個(gè)閉環(huán)節(jié)點(diǎn),也是一個(gè)操作的終結(jié)點(diǎn),是最后的臨門一腳。位置當(dāng)然是在右側(cè)最為合適,降低操作難度,同時(shí)也是整個(gè)單元的一個(gè)視覺(jué)終結(jié)點(diǎn),瀏覽完流程之后決定是否點(diǎn)擊跳轉(zhuǎn)。當(dāng)然,你可以利用你的方式去引導(dǎo)或刺激用戶點(diǎn)擊,你可以的。

04 總結(jié)

  • 多方面的了解戰(zhàn)略目標(biāo)、市場(chǎng)因素、用戶目標(biāo)、畫(huà)像、場(chǎng)景、心智等等信息;
  • 利用視覺(jué)瀏覽模型進(jìn)行信息的合理規(guī)劃和引導(dǎo);
  • 根據(jù)平臺(tái)的特性對(duì)框架進(jìn)行布局,左右結(jié)構(gòu)、上下結(jié)構(gòu),依據(jù)平臺(tái)特性而定;
  • 標(biāo)簽可以起到很合適的輔助作用,放在相應(yīng)的位置可以起到多樣的效果;
  • 按鈕作為閉環(huán)節(jié)點(diǎn),降低操作的難度,有需求的話可以用你的方式去刺激或者引導(dǎo)。

 

作者:阿類,個(gè)人公眾號(hào):阿類雜碎面

本文由 @阿類 原創(chuàng)發(fā)布于人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來(lái)自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 網(wǎng)上沖浪,好古老的詞匯 ??

    來(lái)自安徽 回復(fù)