產(chǎn)品卡片是廣泛存在于電商APP中的一個組件,不管是狹義上的,還是廣義上的所有可交易產(chǎn)品 (包括但不限于電子書、音樂、游戲賬號等非真實存在的產(chǎn)品),這些都需要產(chǎn)品卡片組件作為載具來承載產(chǎn)品自身的關(guān)鍵信息,才可以方便用戶快速了解產(chǎn)品的核心屬性。
當下的常見產(chǎn)品卡片主要分為兩種,也就是電商 App 最常用的兩種視圖,即“網(wǎng)格視圖”和“列表視圖”,產(chǎn)品卡片因視圖的布局不同,所展示的信息內(nèi)容在里面也不一樣。
比如淘寶中就存在兩種不同的視圖可以根據(jù)用戶的個人喜好進行切換:
本篇文章所要講的,就是針對這兩種排版不一樣的視圖,其中的信息,應該如何排布才能做到效果最大化。
如上面所說,產(chǎn)品卡片通常有兩種布局形式,分別是網(wǎng)格和列表的布局;兩種布局的內(nèi)容排列都各不相同。
第一種:網(wǎng)格布局
網(wǎng)格布局可以使用瀑布流的排列方式,只不過相對來說圖片的尺寸會更加單一,因為瀑布流的排列方式特點是多列的布局形式,列與列之間保持固定寬度,內(nèi)容按照發(fā)布時間或者權(quán)重等因素排列,形成像瀑布一樣的流式布局。產(chǎn)品排列需要嚴格控制卡片的錯落程度才不會顯得過于雜亂。
當然,產(chǎn)品卡片并不是只能做成瀑布流,完全對齊的網(wǎng)格布局也是很常見一種樣式,只需要嚴格限制圖片和字段的高度,同時為有高度差異的字段 (一般情況下是指標題) 留出足夠的空間即可。
列表布局:通常情況下也會保持所有圖片尺寸一致、間隔距離一致,但文本區(qū)域需不需要做到與圖片等高,需要具體看項目中的產(chǎn)品要表達的信息數(shù)量,根據(jù)數(shù)量來決定文本區(qū)域的高度,例如像京東這種,文本信息非常多,那么文本區(qū)域的高度就可以超出圖片的高度范圍而不必強求與圖片對齊。
如果產(chǎn)品需要展示出來的信息量不是特別多,那么等高就是一種比較好的選擇。
假如信息量比較少的情況下,強行把文本區(qū)域與圖片高度對齊,這種做法會導致組件內(nèi)的間距比組件之間的間距更大,進而影響親密性識別;這時候可以在兩個產(chǎn)品的文本區(qū)域之間加分割線,將兩個不同的產(chǎn)品文本通過分割線進行分割開來。