新手科普!3個(gè)章節(jié)幫你快速熟悉UI組件中的商品卡片設(shè)計(jì)
一、組件介紹
商品卡片是一個(gè)廣泛存在于電商產(chǎn)品中的組件,不管是狹義上的商品,還是廣義上的所有可交易產(chǎn)品 (包括課程、服務(wù)、游戲等虛擬商品),都需要商品卡片來(lái)承載它們的關(guān)鍵信息,以方便用戶(hù)快速了解商品的核心屬性。
常見(jiàn)的商品卡片有兩種形式,也是電商 App 普遍使用的兩個(gè)視圖,即:網(wǎng)格視圖和列表視圖,卡片在這兩種視圖中有著不同的布局,其信息包含能力也有所差異。
我們要學(xué)會(huì)的,就是針對(duì)這兩種視圖,其中的信息該如何排布。
二、設(shè)計(jì)要點(diǎn)
1. 兩種布局
如 Part.1 種所說(shuō),商品卡片通常有兩種布局形式,分別是網(wǎng)格布局和列表布局。
①網(wǎng)格布局
網(wǎng)格布局可以使用瀑布流,所以布局的做法參見(jiàn)瀑布流那篇文章。
只不過(guò)圖片的尺寸相對(duì)來(lái)說(shuō)會(huì)更單一一些,因?yàn)樾枰獓?yán)格控制卡片的錯(cuò)落程度,不至于過(guò)于雜亂。
當(dāng)然,并不是只能做成瀑布流,完全對(duì)齊的網(wǎng)格布局也很常見(jiàn),只需要嚴(yán)格限制圖片和字段的高度,且為有高度差異的字段 (一般是標(biāo)題) 留出空間即可。
②列表布局
列表布局通常也會(huì)保持所有圖片尺寸一致,但文本區(qū)域需不需要與圖片等高,得看具體項(xiàng)目中商品需要露出的信息多寡,像京東這種信息非常多的,文本區(qū)域就可以超出圖片的高度范圍。
而如果信息量中等,那么等高是一種比較好的選擇。
但如果信息比較少,強(qiáng)行把某一字段與圖片底對(duì)齊的做法會(huì)導(dǎo)致組件內(nèi)的間距比組件間的更大,從而影響親密性識(shí)別。
這時(shí)候可以在兩個(gè)商品之間加分割線。
2. 卡片樣式
主要有三種樣式,我稱(chēng)之為有全包、半包和開(kāi)放式。
全包:有明確的卡片背景,將圖片和文本全部包括在內(nèi)部,比較不常見(jiàn)。
半包:圖片部分會(huì)撐滿卡片的邊界,而文本依然在卡片內(nèi)部,比較常見(jiàn)。值得注意的是如果卡片需要做圓角,圖片朝內(nèi)的兩個(gè)角不需要給圓角。
開(kāi)放式:沒(méi)有明確的卡片背景,圖+文本自成卡片區(qū)域,在設(shè)計(jì)上通常會(huì)讓文本兩側(cè)較之圖片稍微向內(nèi)縮進(jìn)一些距離,在讓親密性表現(xiàn)得更舒適。可以?xún)蓚?cè)縮進(jìn),也可以只縮進(jìn)右側(cè)。
3.卡片內(nèi)容
不同類(lèi)型的商品、不同需求的產(chǎn)品所需要表達(dá)的信息是不同的,但總結(jié)來(lái)說(shuō)有以下這幾類(lèi):
- 圖片:商品主圖
- 主標(biāo)題:活動(dòng)標(biāo)簽+商品名稱(chēng)
- 副標(biāo)題:銷(xiāo)售排名/用戶(hù)評(píng)價(jià)數(shù)據(jù)等
- 價(jià)格數(shù)據(jù):折后價(jià)格/折前價(jià)格+銷(xiāo)售量
- 優(yōu)惠信息:退換政策/優(yōu)惠券/滿減活動(dòng)/分期信息
- 商品規(guī)格表:商品核心規(guī)格信息
- 店鋪信息:相關(guān)標(biāo)簽+店鋪名稱(chēng)
- 功能按鈕:收藏/購(gòu)物車(chē)
其中,圖片、標(biāo)題和價(jià)格,這三個(gè)是最基礎(chǔ)的信息,幾乎每個(gè)商品卡片都必不或缺。其余的信息則并不一定每個(gè)都要包含在內(nèi),不同的 App 會(huì)根據(jù)自己的展示需求挑選其中幾類(lèi)排布在卡片內(nèi)。
信息展示的順序、和權(quán)重對(duì)比,都會(huì)根據(jù)實(shí)際情況略作調(diào)整。例如一些國(guó)外的電商 App,會(huì)把價(jià)格的權(quán)重做得比標(biāo)題更大。
而對(duì)于網(wǎng)格布局和列表布局,所展示的信息盡可能保持一致。但因?yàn)榫W(wǎng)格視圖不適合展示的過(guò)長(zhǎng),所以如果信息真的非常多,那么網(wǎng)格視圖可以適當(dāng)省略。例如小米有品是一個(gè)典型的例子,網(wǎng)格視圖相比列表視圖只少了商品規(guī)格表,因?yàn)檫@個(gè)字段實(shí)在不適合放在網(wǎng)格視圖展示。
4. 不同的使用場(chǎng)景
之所以會(huì)把使用場(chǎng)景放在這里,是因?yàn)樯唐房ㄆ氖褂脠?chǎng)景會(huì)影響它所展示的信息類(lèi)型。舉個(gè)例子,淘寶首頁(yè)推薦內(nèi)的商品卡片內(nèi)所包含的信息,就比搜索出來(lái)的完整商品卡片少了一些。
這是因?yàn)橥扑]中的商品信息務(wù)求直擊要害,其導(dǎo)購(gòu)需求遠(yuǎn)遠(yuǎn)強(qiáng)于展示需求,同時(shí)也考慮到推薦頁(yè)應(yīng)同屏展示更多商品,所以會(huì)把其他可能會(huì)影響用戶(hù)獲取核心信息,且可能造成卡片過(guò)長(zhǎng)的字段全部隱去了。
同理,商品卡片在購(gòu)物車(chē)中的信息也不一樣,考慮到存在于購(gòu)物車(chē)中的商品都是用戶(hù)已經(jīng)了解過(guò)大部份信息的商品,所以設(shè)計(jì)時(shí)要抓住用戶(hù)在這種場(chǎng)景下最關(guān)注的內(nèi)容——價(jià)格和規(guī)格,所以購(gòu)物車(chē)中的卡片會(huì)多出一些價(jià)格變動(dòng)、規(guī)格重選、數(shù)量修改等信息。
總之,商品的使用場(chǎng)景很大程度上會(huì)影響展示信息的選擇,最核心的要點(diǎn)是一定要考慮用戶(hù)在不用的場(chǎng)景下,最核心的信息訴求是什么,不同 App 對(duì)此可能有不同的做法,我在這里也無(wú)法一概而論。
5. 不一樣的商品卡片
①Asos/Massimo Dutti
國(guó)外的電商 App,尤其是品牌自己的 App,總是會(huì)做得非常極簡(jiǎn),一個(gè)標(biāo)題一個(gè)價(jià)格一張圖片,幾乎做到了商品卡片最簡(jiǎn)潔的狀態(tài),這是品牌氣質(zhì)決定的,也是產(chǎn)品定位決定的。所以國(guó)內(nèi)走出海路線的 App 大多也會(huì)是這個(gè)風(fēng)格,比如 Shein。
②馬蜂窩/飛豬
舉這兩個(gè)例子并不是因?yàn)閮烧叩慕M件設(shè)計(jì)得有多精妙,而是因?yàn)樗鼈冇兄硪环N不同的商品,以及所呈現(xiàn)出來(lái)的不同的組件——酒店。
我在這里想要說(shuō)明的是,不同的商品類(lèi)型可能也會(huì)有其特有的字段類(lèi)型,尤其是服務(wù)型商品,不同的服務(wù)所呈現(xiàn)出來(lái)的組件會(huì)有很大不同。
三、樣式拓展
這里收集了一些商品卡片的線上案例,也可以作為設(shè)計(jì)時(shí)的參考:
結(jié)尾
商品卡片的組件,今天就介紹到這里了。
作者:超人的電話亭
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請(qǐng)?jiān)L問(wèn):網(wǎng)站技術(shù)
本文來(lái)源:http://gagu89.com/seodongtai/19381.html