基于卡片的網頁設計在購物類網站中的應用

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

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

關鍵詞：卡片式網頁；購物類網站；界面設計

檢索：www.artdesign.org.cn

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

引言

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

一、卡片式購物網站的基本概念

（一）卡片式設計風格

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

（二）國內外購物類網站設計風格的演變

網絡購物興起之時，文字常充滿整個屏幕，期待在有限的空間內給予用戶更多的選擇。而心理學教授Sheeya Iyengar總結道：“當人們面臨過多選擇的時候，他們的表現非常相似：他們不會做任何選擇。”為了解決文字密集給用戶造成的信息泛濫感，商家逐漸在各自的購物平臺中引入更多商品圖片代替文字說明。多數情況下人們對圖片的記憶總是好于對字詞的記憶，這種現象稱為“圖片優勢效應”。

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

縱觀購物類網頁界面的設計潮流，從內容上是由“簡”至“繁”，而從形式上是由“繁”至“簡”的過程。卡片式設計風格的誕生，正是設計師在對購物網站界面形式與內容的綜合考量后所作出的創新。

二、卡片式設計風格在購物網頁中的優勢

購物類網站以進行產品銷售為目的，設計的核心是提供清晰的產品展示，優良的視覺引導，以促進用戶實現購買。購物類網頁設計不僅僅是追求視覺上的統一，更多的要考慮用戶實際操作過程中的需求。

（一）信息條理一致性

根據對消費者瀏覽網站時的視覺力場的研究，視覺力場是一個動態的概念，受眾獲取信息是根據一定的視覺系列，有秩序地進行閱讀與識記。卡片式布局將網頁變成一個個卡片矩陣，有秩序地引導著消費者的瀏覽視線。

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

（二）提升網站的風格特征

網站的視覺風格作為一種表現形態，是網站內容與視覺形式相統一的結果，是網站的功能需求和用戶需求被設計者詮釋后而體現的一種獨特面貌。基于卡片式的網頁設計其基本元素是圖片、文字。通過改變卡片陣列的卡片色彩、數量、位置，文字字體、大小、顏色，能增強品牌識別度。

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

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

（三）網頁更易開發維護

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

響應式設計也已成為近年來大多數網站的必備要素，尤其是購物類網站，更不能受到設備不同的影響。卡片式設計能夠將離散的信息整合在一個模塊內，減少界面元素的復雜性，根據設備不同進行彈性調整相對位置和大小，較好的滿足響應式需求。

（四）平衡網站的功能性和美觀性

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

三、卡片式購物類網站的設計要素

（一）卡片內部信息的融合

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

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

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

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

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

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

在網頁中使用卡片布局，規范了圖形、圖片輪廓，使元素之間的聯系更加緊密。卡片的布局與大小主要包含兩種方式：

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

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

（三）卡片內外邊距控制

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

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

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

結語

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

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