談網(wǎng)頁設(shè)計中的卡片式布局

摘要：本文主要圍繞網(wǎng)頁設(shè)計中的視覺設(shè)計談網(wǎng)頁設(shè)計的設(shè)計理念和方法。通過對網(wǎng)頁設(shè)計的總體趨勢進行分析，找到網(wǎng)頁設(shè)計的特點、卡片式布局的設(shè)計理念和風(fēng)格。

關(guān)鍵詞：網(wǎng)頁設(shè)計 卡片式布局 設(shè)計風(fēng)格

網(wǎng)頁設(shè)計是以圖形用戶界面設(shè)計和交互設(shè)計為特點的設(shè)計系統(tǒng)。卡片式布局是在跨媒體融合的基礎(chǔ)上產(chǎn)生的，是近年來比較常見的響應(yīng)式布局的一種。在門戶、資源分享、電商、新聞等類型的網(wǎng)站中得到了廣泛的應(yīng)用。

一、從網(wǎng)頁設(shè)計的發(fā)展趨勢看卡片式網(wǎng)頁設(shè)計布局的特征

（一）響應(yīng)式設(shè)計成為跨媒體的布局方式

由于瀏覽網(wǎng)頁平臺的媒介不再僅限于電腦屏幕（即便是電腦屏幕，使用者也可能使用不同的分辨率），還有平板電腦、智能手機等，如果用固定的寬、高制作網(wǎng)站，在不同平臺上瀏覽網(wǎng)站時將出現(xiàn)版面太小或太大等版面浪費或不足的問題。因此，能夠針對不同平臺做出調(diào)整的自適應(yīng)式網(wǎng)站設(shè)計是近年的網(wǎng)頁設(shè)計重點之一。

（二）垂直式網(wǎng)站瀏覽

在瀏覽國內(nèi)外各大網(wǎng)站時會發(fā)現(xiàn)，越來越多網(wǎng)頁的內(nèi)容呈現(xiàn)方式，常常是一長串的瀑布式垂直內(nèi)容模塊（但會分成數(shù)個段落），如Apple官方網(wǎng)站的呈現(xiàn)方式。也許有人不喜歡在同一個頁面捲動多次，但通過適當(dāng)?shù)玫木幣排c設(shè)計，在對整個網(wǎng)頁的瀏覽與使用上會更加流暢，在手機與平板電腦上也能以便捷的垂直滑動模式來瀏覽頁面。

（三）大按鈕設(shè)計——方便用戶點擊，提高用戶體驗的舒適感

大按鈕的設(shè)計有兩個主要的目的。第一，當(dāng)我們在瀏覽網(wǎng)站時，常會收到通過按下按鈕前往新頁面的提示，或者進行購物的動作，夠大的按鈕可以顯示出其重要程度，能讓人快速注意到它，通過按鈕大小不同的對比，制造重點上的落差。第二，這樣的按鈕設(shè)計也能方便各種觸控式屏幕平臺的瀏覽與操作。

（四）圖層視差滾動設(shè)計——可折疊的菜單適合移動端的界面設(shè)計

運用圖層做視差設(shè)計，在2D動畫世界中原本就是一個相當(dāng)常見且重要的模擬景深與空間感的技巧。將前后兩張（以上）圖層以不同的移動速度呈現(xiàn)，在頁面滾動時可以造成不錯的空間效果，從FLASH開始流行后便有許多網(wǎng)站運用這種技巧，現(xiàn)在則轉(zhuǎn)以CSS3 + HTML5來建構(gòu)。在移動端的網(wǎng)頁界面設(shè)計中，可折疊的面板被大量使用，它彌補了手機界面尺寸不足的局限，讓頁面的層級清晰有效，有時還可以按照模塊視圖的方式出現(xiàn)，使界面操作簡捷有效。

（五）卡片式設(shè)計

在卡片式布局設(shè)計中，每個部分都會劃分為獨立的區(qū)塊以便操作，這一設(shè)計不會顯得單調(diào)，相反，它更加難于預(yù)測，可能會將內(nèi)容以更讓人感興趣、更適于探索的方式呈現(xiàn)出來。

二、網(wǎng)頁設(shè)計中卡片式布局的主要形態(tài)分析

像容器一樣的卡片式設(shè)計將頁面的主題內(nèi)容區(qū)清晰地分成若干個模塊，每個模塊為一個信息單元，包含了圖片、標(biāo)題文字、鏈接、圖標(biāo)按鈕等等。根據(jù)設(shè)計的內(nèi)容展現(xiàn)出不同的形態(tài)。

（一）招貼畫風(fēng)格——充滿藝術(shù)個性

招貼畫風(fēng)格是常見的圖片與文字混排的風(fēng)格，每個單元模塊類似于招貼的設(shè)計方式。

如上圖，該網(wǎng)站試圖模仿Pinterest，許多設(shè)計師在其中加入了各種不同元素，使它們看起來像是從流行的社交媒體網(wǎng)站上被“分享”而來，事實上是WordPress用戶迅速利用技術(shù)在其中創(chuàng)建的許多不同的主題。

（二）Metro與扁平化風(fēng)格

Metro模式由微軟在2006年推出，它可以算作是基于卡片式設(shè)計的最早代表。這種圖片和文字，放在不同區(qū)塊，按照不同的比例有節(jié)奏地排列，能夠有效地區(qū)分出主次信息。

（三）柵格

柵格模式并不是被遺忘的風(fēng)格，相反，設(shè)計師們正嘗試通過更加嚴(yán)格的網(wǎng)格或鉆石風(fēng)格的框架來充實這一模式，具體包括將內(nèi)容塊有規(guī)律地隔開或完美地嵌入整個布局中。一些設(shè)計師創(chuàng)建柵格，將“卡片”交織在一起；而另一些設(shè)計師則更喜歡用純粹的網(wǎng)格來展示圖像和圖形。刪格化的風(fēng)格簡潔，使界面看起來清晰、整潔。

三、結(jié)語

綜上所述，卡片式設(shè)計對營造一個簡約風(fēng)格的網(wǎng)站的確很有效果。卡片式布局可以以每個模塊圖文并茂的方式使網(wǎng)站的信息更加清晰，便于瀏覽和閱讀。我們在做卡片式設(shè)計時，首先要考慮卡片單元模塊的功能，然后再根據(jù)主題進行風(fēng)格化設(shè)計。卡片式設(shè)計的最大特點就是會讓整個網(wǎng)站的布局和條理變得很清楚，但這有可能會造成卡片的獨立性太強，與整體風(fēng)格格格不入。因此，設(shè)計師在設(shè)計時要使卡片式布局與網(wǎng)站整體的設(shè)計風(fēng)格相統(tǒng)一，色彩上相和諧。對用戶來說，網(wǎng)頁設(shè)計的目標(biāo)是為其帶來“成功且令人滿意的體驗”，成功就是指用戶能高效地完成其在網(wǎng)頁中的瀏覽計劃；令人滿意是指這一過程是愉快的，而不僅僅是滿足其功能性的需求，這種愉快可以表現(xiàn)為視覺上的愉悅與審美的享受。

（作者簡介：張璇，女，碩士研究生，魯迅美術(shù)學(xué)院，講師，研究方向：插圖設(shè)計、互動設(shè)計）（責(zé)任編輯 劉冬楊）