談網頁設計中的卡片式布局

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

關鍵詞：網頁設計 卡片式布局 設計風格

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

一、從網頁設計的發展趨勢看卡片式網頁設計布局的特征

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

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

（二）垂直式網站瀏覽

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

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

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

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

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

（五）卡片式設計

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

二、網頁設計中卡片式布局的主要形態分析

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

（一）招貼畫風格——充滿藝術個性

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

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

（二）Metro與扁平化風格

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

（三）柵格

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

三、結語

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

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