摘要：本文主要圍繞網(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)?？ㄆ讲季质窃诳缑襟w融合的基礎(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)方式。也許有人不喜歡在同一個頁面捲動多次，但通過適當?shù)玫木幣排c設(shè)計，在對整個網(wǎng)頁的瀏覽與使用上會更加流暢，在手機與平板電腦上也能以便捷的垂直滑動模式來瀏覽頁面。

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

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

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

運用圖層做視差設(shè)計，在2D動畫世界中原本就是一個相當常見且重要的模擬景深與空間感的技巧。將前后兩張（以上）圖層以不同的移動速度呈現(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ū)清晰地分成若干個模塊，每個模塊為一個信息單元，包含了圖片、標題文字、鏈接、圖標按鈕等等。根據(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è)計師們正嘗試通過更加嚴格的網(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è)計?？ㄆ皆O(shè)計的最大特點就是會讓整個網(wǎng)站的布局和條理變得很清楚，但這有可能會造成卡片的獨立性太強，與整體風(fēng)格格格不入。因此，設(shè)計師在設(shè)計時要使卡片式布局與網(wǎng)站整體的設(shè)計風(fēng)格相統(tǒng)一，色彩上相和諧。對用戶來說，網(wǎng)頁設(shè)計的目標是為其帶來“成功且令人滿意的體驗”，成功就是指用戶能高效地完成其在網(wǎng)頁中的瀏覽計劃；令人滿意是指這一過程是愉快的，而不僅僅是滿足其功能性的需求，這種愉快可以表現(xiàn)為視覺上的愉悅與審美的享受。

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