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

關鍵詞：網(wǎng)頁設計 卡片式布局 設計風格

網(wǎng)頁設計是以圖形用戶界面設計和交互設計為特點的設計系統(tǒng)?？ㄆ讲季质窃诳缑襟w融合的基礎上產(chǎn)生的，是近年來比較常見的響應式布局的一種。在門戶、資源分享、電商、新聞等類型的網(wǎng)站中得到了廣泛的應用。

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

（一）響應式設計成為跨媒體的布局方式

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

（二）垂直式網(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設計，在對整個網(wǎng)頁的瀏覽與使用上會更加流暢，在手機與平板電腦上也能以便捷的垂直滑動模式來瀏覽頁面。

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

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

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

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

（五）卡片式設計

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

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

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

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

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

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

（二）Metro與扁平化風格

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

（三）柵格

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

三、結(jié)語

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

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