摘要：本文主要围绕网页设计中的视觉设计谈网页设计的设计理念和方法。通过对网页设计的总体趋势进行分析，找到网页设计的特点、卡片式布局的设计理念和风格。

关键词：网页设计 卡片式布局 设计风格

网页设计是以图形用户界面设计和交互设计为特点的设计系统。卡片式布局是在跨媒体融合的基础上产生的，是近年来比较常见的响应式布局的一种。在门户、资源分享、电商、新闻等类型的网站中得到了广泛的应用。

一、从网页设计的发展趋势看卡片式网页设计布局的特征

（一）响应式设计成为跨媒体的布局方式

由于浏览网页平台的媒介不再仅限于电脑屏幕（即便是电脑屏幕，使用者也可能使用不同的分辨率），还有平板电脑、智能手机等，如果用固定的宽、高制作网站，在不同平台上浏览网站时将出现版面太小或太大等版面浪费或不足的问题。因此，能够针对不同平台做出调整的自适应式网站设计是近年的网页设计重点之一。

（二）垂直式网站浏览

在浏览国内外各大网站时会发现，越来越多网页的内容呈现方式，常常是一长串的瀑布式垂直内容模块（但会分成数个段落），如Apple官方网站的呈现方式。也许有人不喜欢在同一个页面捲动多次，但通过适当得的编排与设计，在对整个网页的浏览与使用上会更加流畅，在手机与平板电脑上也能以便捷的垂直滑动模式来浏览页面。

（三）大按钮设计——方便用户点击，提高用户体验的舒适感

大按钮的设计有两个主要的目的。第一，当我们在浏览网站时，常会收到通过按下按钮前往新页面的提示，或者进行购物的动作，够大的按钮可以显示出其重要程度，能让人快速注意到它，通过按钮大小不同的对比，制造重点上的落差。第二，这样的按鈕设计也能方便各种触控式屏幕平台的浏览与操作。

（四）图层视差滚动设计——可折叠的菜单适合移动端的界面设计

运用图层做视差设计，在2D动画世界中原本就是一个相当常见且重要的模拟景深与空间感的技巧。将前后两张（以上）图层以不同的移动速度呈现，在页面滚动时可以造成不错的空间效果，从FLASH开始流行后便有许多网站运用这种技巧，现在则转以CSS3 + HTML5来建构。在移动端的网页界面设计中，可折叠的面板被大量使用，它弥补了手机界面尺寸不足的局限，让页面的层级清晰有效，有时还可以按照模块视图的方式出现，使界面操作简捷有效。

（五）卡片式设计

在卡片式布局设计中，每个部分都会划分为独立的区块以便操作，这一设计不会显得单调，相反，它更加难于预测，可能会将内容以更让人感兴趣、更适于探索的方式呈现出来。

二、网页设计中卡片式布局的主要形态分析

像容器一样的卡片式设计将页面的主题内容区清晰地分成若干个模块，每个模块为一个信息单元，包含了图片、标题文字、链接、图标按钮等等。根据设计的内容展现出不同的形态。

（一）招贴画风格——充满艺术个性

招贴画风格是常见的图片与文字混排的风格，每个单元模块类似于招贴的设计方式。

如上图，该网站试图模仿Pinterest，许多设计师在其中加入了各种不同元素，使它们看起来像是从流行的社交媒体网站上被“分享”而来，事实上是WordPress用户迅速利用技术在其中创建的许多不同的主题。

（二）Metro与扁平化风格

Metro模式由微软在2006年推出，它可以算作是基于卡片式设计的最早代表。这种图片和文字，放在不同区块，按照不同的比例有节奏地排列，能够有效地区分出主次信息。

（三）栅格

栅格模式并不是被遗忘的风格，相反，设计师们正尝试通过更加严格的网格或钻石风格的框架来充实这一模式，具体包括将内容块有规律地隔开或完美地嵌入整个布局中。一些设计师创建栅格，将“卡片”交织在一起；而另一些设计师则更喜欢用纯粹的网格来展示图像和图形。删格化的风格简洁，使界面看起来清晰、整洁。

三、结语

综上所述，卡片式设计对营造一个简约风格的网站的确很有效果。卡片式布局可以以每个模块图文并茂的方式使网站的信息更加清晰，便于浏览和阅读。我们在做卡片式设计时，首先要考虑卡片单元模块的功能，然后再根据主题进行风格化设计。卡片式设计的最大特点就是会让整个网站的布局和条理变得很清楚，但这有可能会造成卡片的独立性太强，与整体风格格格不入。因此，设计师在设计时要使卡片式布局与网站整体的设计风格相统一，色彩上相和谐。对用户来说，网页设计的目标是为其带来“成功且令人满意的体验”，成功就是指用户能高效地完成其在网页中的浏览计划；令人满意是指这一过程是愉快的，而不仅仅是满足其功能性的需求，这种愉快可以表现为视觉上的愉悦与审美的享受。

（作者简介：张璇，女，硕士研究生，鲁迅美术学院，讲师，研究方向：插图设计、互动设计）（责任编辑 刘冬杨）