基于卡片的網(wǎng)頁設(shè)計在購物類網(wǎng)站中的應(yīng)用

殷曉晨　孫冠東　張兆鵬　劉玉琪

摘要：文章對購物類網(wǎng)站界面的現(xiàn)狀進行分析，探究卡片式網(wǎng)頁設(shè)計的緣起及其在購物類網(wǎng)站中的應(yīng)用趨勢。分析如何更好地運用卡片元素，實現(xiàn)購物類網(wǎng)站形式與內(nèi)容的統(tǒng)一，提供更好的用戶體驗。通過采用歸納法、案例分析法對部分購物類網(wǎng)站界面進行研究比較，得出基于卡片式的網(wǎng)頁設(shè)計所具有的優(yōu)勢，并得出卡片式網(wǎng)頁設(shè)計的三個基本要素：卡片內(nèi)信息的融合、卡片的布局與大小、卡片內(nèi)外邊距。

關(guān)鍵詞：卡片式網(wǎng)頁；購物類網(wǎng)站；界面設(shè)計

檢索：www.artdesign.org.cn

中圖分類號：TP393.092 文獻標志碼：A 文章編號：1008-2832（2016）06-0066-03

引言

網(wǎng)絡(luò)購物這一消費方式已經(jīng)受到越來越多消費者的歡迎。根據(jù)中國互聯(lián)網(wǎng)絡(luò)信息中心的調(diào)查統(tǒng)計顯示，至2014年12月，商家利用電子商務(wù)平臺推廣和銷售商品的比例已達45.5%；2013年至2014年間，使用互聯(lián)網(wǎng)購物的網(wǎng)民數(shù)量由30189萬增長至36142萬，使用率增長了19.7%；2014年12月至2015年6月，網(wǎng)民通過網(wǎng)絡(luò)購物的數(shù)量由36142萬增長至37391萬，使用率增長3.5%，商家采用網(wǎng)絡(luò)銷售成為必然趨勢。而作為消費者與商家溝通的媒介，購物網(wǎng)站界面的美觀性和易用性是消費者是否發(fā)生消費行為的首要因素。好的網(wǎng)站界面設(shè)計能夠在第一時間傳達該商家的產(chǎn)品風格、商家理念，引起消費者的情感共鳴，從而引發(fā)消費欲望。因此，越來越多的商家關(guān)注其網(wǎng)站的界面設(shè)計，催生了“扁平化”“瀑布式”“卡片式”等風格潮流。

一、卡片式購物網(wǎng)站的基本概念

（一）卡片式設(shè)計風格

近兩年常常聽到“扁平化風格”的概念。扁平化風格放棄一切裝飾效果，所有元素的邊界都干凈利落，沒有任何漸變、羽化或者陰影。它強調(diào)色彩的單純性、元素的簡約性、信息的符號化，常用于移動端的界面設(shè)計中。卡片式風格多用于網(wǎng)頁中，將需要展示的內(nèi)容均分至數(shù)個矩形卡片內(nèi)，采用圖像與文字說明相結(jié)合的方式將信息傳達給受眾。在形式上，卡片式常常呈矩形陣列排布于網(wǎng)頁中（圖1），卡片之間形狀相似，但不一定完全相同。因此，扁平化與卡片式的設(shè)計風格既有聯(lián)系又有區(qū)別。

（二）國內(nèi)外購物類網(wǎng)站設(shè)計風格的演變

網(wǎng)絡(luò)購物興起之時，文字常充滿整個屏幕，期待在有限的空間內(nèi)給予用戶更多的選擇。而心理學教授Sheeya Iyengar總結(jié)道：“當人們面臨過多選擇的時候，他們的表現(xiàn)非常相似：他們不會做任何選擇?！睘榱私鉀Q文字密集給用戶造成的信息泛濫感，商家逐漸在各自的購物平臺中引入更多商品圖片代替文字說明。多數(shù)情況下人們對圖片的記憶總是好于對字詞的記憶，這種現(xiàn)象稱為“圖片優(yōu)勢效應(yīng)”。

在國內(nèi)，我們所熟知的淘寶網(wǎng)站，2003年5月創(chuàng)立之時，其界面僅包含少量的信息。至2009年（圖2橘黃色區(qū)域為圖片區(qū)），文字信息幾乎占據(jù)了3/4的頁面。國外最早的購物網(wǎng)站ebay于1997年創(chuàng)建，最初采用簡單的圖文混雜的形式。至2012年網(wǎng)頁布局已基本成熟（圖3），形成了卡片式購物網(wǎng)站的基本雛形。由于其信息的直觀性與瀏覽的舒適性，這種方法在ebay網(wǎng)站中一直沿用至今，并相繼被國內(nèi)外購物類網(wǎng)站借鑒。

縱觀購物類網(wǎng)頁界面的設(shè)計潮流，從內(nèi)容上是由“簡”至“繁”，而從形式上是由“繁”至“簡”的過程?？ㄆ皆O(shè)計風格的誕生，正是設(shè)計師在對購物網(wǎng)站界面形式與內(nèi)容的綜合考量后所作出的創(chuàng)新。

二、卡片式設(shè)計風格在購物網(wǎng)頁中的優(yōu)勢

購物類網(wǎng)站以進行產(chǎn)品銷售為目的，設(shè)計的核心是提供清晰的產(chǎn)品展示，優(yōu)良的視覺引導(dǎo)，以促進用戶實現(xiàn)購買。購物類網(wǎng)頁設(shè)計不僅僅是追求視覺上的統(tǒng)一，更多的要考慮用戶實際操作過程中的需求。

（一）信息條理一致性

根據(jù)對消費者瀏覽網(wǎng)站時的視覺力場的研究，視覺力場是一個動態(tài)的概念，受眾獲取信息是根據(jù)一定的視覺系列，有秩序地進行閱讀與識記?？ㄆ讲季謱⒕W(wǎng)頁變成一個個卡片矩陣，有秩序地引導(dǎo)著消費者的瀏覽視線。

購物網(wǎng)站中的信息內(nèi)容主要包含：菜單欄、導(dǎo)航欄、商品展示。大多數(shù)的購物網(wǎng)站將它們作為主要功能模塊進行處理，模塊化的關(guān)鍵在于構(gòu)建相同層級的信息。在卡片式布局中，同一層級模塊分割成若干卡片，并具有相對固定的位置。菜單欄一般位于首頁最上方，橫向排列；導(dǎo)航欄位于網(wǎng)頁最左側(cè)，豎向排列。在商品展示區(qū)中，每個卡片的大小面積均相同，因此每個卡片能夠成功吸引消費者的概率也是相同的，對于消費者來說，更容易發(fā)現(xiàn)真正吸引自己的商品。

（二）提升網(wǎng)站的風格特征

網(wǎng)站的視覺風格作為一種表現(xiàn)形態(tài)，是網(wǎng)站內(nèi)容與視覺形式相統(tǒng)一的結(jié)果，是網(wǎng)站的功能需求和用戶需求被設(shè)計者詮釋后而體現(xiàn)的一種獨特面貌?；诳ㄆ降木W(wǎng)頁設(shè)計其基本元素是圖片、文字。通過改變卡片陣列的卡片色彩、數(shù)量、位置，文字字體、大小、顏色，能增強品牌識別度。

在GUCCI官網(wǎng)商品展示界面中（圖4），在卡片的基礎(chǔ)上采用橫屏滑動的形式進行商品預(yù)覽，當鼠標置于某一卡片上時，位于此卡片上的商品被放大，并配有信息說明。卡片之間的切換存在一定的視覺滾差，異于大部分的商品展示方式。網(wǎng)站采用黑白灰三種顏色，與商品皮革的特質(zhì)保持一致，反映出GUCCI品牌的高檔、商務(wù)、簡約的品牌特征。

家居品牌Rejuvenation在其官方網(wǎng)上商店首頁大膽的將整幅頁面均用卡片填充（圖5）。充分利用了卡片式的親切友好性，并將所有的產(chǎn)品用明亮的基調(diào)處理，與簡潔優(yōu)雅的產(chǎn)品形態(tài)和諧呼應(yīng)。首頁商品幾乎無任何產(chǎn)品說明，但高質(zhì)量的圖片與輕快的字體足以給用戶身在其中之感，仿佛這些優(yōu)質(zhì)的家居用品近在眼前。整個頁面干凈、明快，傳遞出該品牌營造出的生活情調(diào)，喚起消費者對新生活的期待。

（三）網(wǎng)頁更易開發(fā)維護

在網(wǎng)頁開發(fā)過程中，開發(fā)人員首先要將網(wǎng)站整體布局進行“切塊”處理，對每一模塊進行分區(qū)，依次定義其屬性。卡片式布局一般會在長、寬屬性中遵循至少有一個屬性值相等，這種布局更易確定其取值。商品展示區(qū)中，所有商品都屬于相同等級，商品的圖片、信息被保存在數(shù)據(jù)庫中。每張卡片都可以作為一個鏈接，與數(shù)據(jù)庫中該商品的信息相互關(guān)聯(lián)。同級商品的鏈接路徑是相同的，當商品信息需要更新時，只需從數(shù)據(jù)庫中進行修改，減小了代碼量。

響應(yīng)式設(shè)計也已成為近年來大多數(shù)網(wǎng)站的必備要素，尤其是購物類網(wǎng)站，更不能受到設(shè)備不同的影響?？ㄆ皆O(shè)計能夠?qū)㈦x散的信息整合在一個模塊內(nèi)，減少界面元素的復(fù)雜性，根據(jù)設(shè)備不同進行彈性調(diào)整相對位置和大小，較好的滿足響應(yīng)式需求。

（四）平衡網(wǎng)站的功能性和美觀性

在卡片式的網(wǎng)頁設(shè)計中，圖片與文字分別承擔著不同的功能，減少了用戶的思考時間。過多的使用卡片元素容易導(dǎo)致網(wǎng)頁看起來單調(diào)，這還需要各要素的協(xié)調(diào)搭配。當用戶認為當前的視覺元素符合其心理意愿的時候，便會產(chǎn)生愉悅的贊同感。通過對卡片合理的布局，搭配符合網(wǎng)站定位的色彩，可以增強用戶對商品的認同。

三、卡片式購物類網(wǎng)站的設(shè)計要素

（一）卡片內(nèi)部信息的融合

卡片式能夠充分利用圖文解說的方法，在相同的區(qū)域內(nèi)展示更多的有效信息并不失生動活潑。對于卡片中圖片與文字的結(jié)合方式主要有以下幾種：

1.將商品整圖作為網(wǎng)頁背景。通過大圖展現(xiàn)，可以使購物網(wǎng)站更加注重網(wǎng)站信息的情感表達，營造符合商品特征的情景環(huán)境，建立貨品與用戶之間的信息傳遞。此時卡片即整個屏幕，商品分類及購買鏈接可位于圖片的一側(cè)（圖6），文字部分清晰明確。對于高檔奢侈品精妙細節(jié)的展現(xiàn)具有不可取代的優(yōu)勢。

2.將卡片分為圖片與文字兩個分區(qū)。圖片作為卡片背景，文字說明與圖片之間有一定的間距，共存于同一卡片內(nèi)。這在基本型的卡片式設(shè)計中較為常見。

3.每一張圖片作為一張單獨的卡片。當鼠標移至圖片上方時，文字說明將動態(tài)彈出；抑或利用卡片的可翻轉(zhuǎn)性，改變商品的展示角度。動態(tài)展示效果會增加網(wǎng)站的靈動、高檔感（如圖7），但若過多追求效果，會加大網(wǎng)頁的開發(fā)難度。

4.每張卡片被劃分為2-4個區(qū)域，主要信息所占面積最大，次要信息布于主要信息的周圍（圖8）。信息越多，提供給用戶的可選擇性越多。

（二）卡片間的布局與大小

在網(wǎng)頁中使用卡片布局，規(guī)范了圖形、圖片輪廓，使元素之間的聯(lián)系更加緊密?？ㄆ牟季峙c大小主要包含兩種方式：

1.均等分布型：大多數(shù)的卡片式購物網(wǎng)站中，卡片之間大小相等，位置相鄰，多呈矩陣排布。這種布局較常見，也容易被用戶接受。但容易缺少網(wǎng)站的品牌個性，相似度較高。

2.內(nèi)部嵌套型：首先一個網(wǎng)頁界面被分為幾個大小不等的卡片部分，并在其中嵌入更小的卡片。相比較均等式的矩陣排列，此種布局能夠突出重點信息，營造錯落有致之感，并同時考慮到次要信息有可能對用戶的影響。

（三）卡片內(nèi)外邊距控制

用戶在進入購物類網(wǎng)站時，視線焦點通常在商品圖片上。當其展示形式易于理解時，常常是一目十行。如果卡片之間距離較近且卡片尺寸較小，整個頁面則會較為密集，引起用戶的視覺疲勞（圖9）。相反，若卡片位置相隔甚遠又會顯得頁面內(nèi)容松散，關(guān)聯(lián)性較弱（圖10）。在主流電商的網(wǎng)頁設(shè)計中，通常在信息塊外的留白較大，而在信息塊內(nèi)部留白較小，這種處理方式相對擁擠的網(wǎng)頁來說能夠讓用戶在操作時不易著急，并使頁面更清爽。在卡片式網(wǎng)頁中，信息塊內(nèi)留白即卡片內(nèi)邊距，信息塊外留白則指卡片與卡片的外邊距。

一般情況下，卡片外邊距大小為10～70px。隨著電腦屏幕尺寸的擴大，瀏覽一個完整的網(wǎng)頁要花費更長的時間。購物網(wǎng)站的網(wǎng)頁若采用豎向瀏覽的方式，其兩側(cè)應(yīng)與屏幕邊緣保持適當?shù)倪吘?，以避免用戶視線的大幅度跳躍；若使用橫向瀏覽，卡片則不宜太寬，并與上下文字保持適當間距?？ㄆ瑑?nèi)邊距可選擇范圍較大，常見的有以下幾種處理方式（圖11）。

內(nèi)邊距的大小設(shè)置也體現(xiàn)了卡片內(nèi)部信息的結(jié)合方式。在扁平化風格的影響下，字體也朝著圓潤、精細的趨勢演變?？傮w呈現(xiàn)出形式上的簡潔、優(yōu)雅，內(nèi)容上的豐富、細膩。內(nèi)外邊距的合理控制能提供給用戶更舒適的瀏覽環(huán)境，讓視線得到片刻的喘息，從而引導(dǎo)用戶查看到更多具有潛在意向的商品。

結(jié)語

購物網(wǎng)站商品分類復(fù)雜，信息繁多，而卡片式設(shè)計風格是一種直觀簡約的設(shè)計方式。在將卡片式應(yīng)用于購物網(wǎng)站之前，必須經(jīng)過對用戶的需求分析、對網(wǎng)站的市場定位，最終通過卡片式這一形式呈現(xiàn)出商品的個性所在。

然而，每一種設(shè)計風格都只是設(shè)計潮流中的一個片段。依當前的設(shè)計趨勢來看，卡片式設(shè)計風格整合了網(wǎng)頁中元素的統(tǒng)一性，但縱觀全局，卡片的輪廓決定了其內(nèi)部元素形狀的單一。雖然還可以對其中的諸多元素進行豐富創(chuàng)新，創(chuàng)建諸如放大縮小、翻轉(zhuǎn)、浮動等多種動態(tài)效果，但會加大網(wǎng)站的開發(fā)運營成本。因此，一個好的卡片式購物網(wǎng)站，應(yīng)該隨著商家與用戶需求的變化不斷自我完善，擁有更強的生命力。