基于卡片的网页设计在购物类网站中的应用

《基于卡片的网页设计在购物类网站中的应用》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、基于卡片的网页设计在购物类网站中的应用　　摘要：文章对购物类网站界面的现状进行分析，探究卡片式网页设计的缘起及其在购物类网站中的应用趋势。分析如何更好地运用卡片元素，实现购物类网站形式与内容的统一，提供更好的用户体验。通过采用归纳法、案例分析法对部分购物类网站界面进行研究比较，得出基于卡片式的网页设计所具有的优势，并得出卡片式网页设计的三个基本要素：卡片内信息的融合、卡片的布局与大小、卡片内外边距关键词：卡片式网页；购物类网站；界面设计检索：www.artdesign.org.cn中图分类号：TP393.092文献标志码：A文章编号：1008-2832（201

2、6）06-0066-03引言9网络购物这一消费方式已经受到越来越多消费者的欢迎。根据中国互联网络信息中心的调查统计显示，至2014年12月，商家利用电子商务平台推广和销售商品的比例已达45.5%；2013年至2014年间，使用互联网购物的网民数量由30189万增长至36142万，使用率增长了19.7%；2014年12月至2015年6月，网民通过网络购物的数量由36142万增长至37391万，使用率增长3.5%，商家采用网络销售成为必然趋势。而作为消费者与商家沟通的媒介，购物网站界面的美观性和易用性是消费者是否发生消费行为的首要因素。好的网站界面设计能够在第一时

3、间传达该商家的产品风格、商家理念，引起消费者的情感共鸣，从而引发消费欲望。因此，越来越多的商家关注其网站的界面设计，催生了“扁平化”“瀑布式”“卡片式”等风格潮流一、卡片式购物网站的基本概念（一）卡片式设计风格近两年常常听到“扁平化风格”的概念。扁平化风格放弃一切装饰效果，所有元素的边界都干净利落，没有任何渐变、羽化或者阴影。它强调色彩的单纯性、元素的简约性、信息的符号化，常用于移动端的界面设计中。卡片式风格多用于网页中，将需要展示的内容均分至数个矩形卡片内，采用图像与文字说明相结合的方式将信息传达给受众。在形式上，卡片式常常呈矩形阵列排布于网页中（图1），卡

4、片之间形状相似，但不一定完全相同。因此，扁平化与卡片式的设计风格既有联系又有区别（二）国内外购物类网站设计风格的演变网络购物兴起之时，文字常充满整个屏幕，期待在有限的空间内给予用户更多的选择。而心理学教授Sheeya9Iyengar总结道：“当人们面临过多选择的时候，他们的表现非常相似：他们不会做任何选择。”为了解决文字密集给用户造成的信息泛滥感，商家逐渐在各自的购物平台中引入更多商品图片代替文字说明。多数情况下人们对图片的记忆总是好于对字词的记忆，这种现象称为“图片优势效应”在国内，我们所熟知的淘宝网站，2003年5月创立之时，其界面仅包含少量的信息。至20

5、09年（图2橘黄色区域为图片区），文字信息几乎占据了3/4的页面。国外最早的购物网站ebay于1997年创建，最初采用简单的图文混杂的形式。至2012年网页布局已基本成熟（图3），形成了卡片式购物网站的基本雏形。由于其信息的直观性与浏览的舒适性，这种方法在ebay网站中一直沿用至今，并相继被国内外购物类网站借鉴纵观购物类网页界面的设计潮流，从内容上是由“简”至“繁”，而从形式上是由“繁”至“简”的过程。卡片式设计风格的诞生，正是设计师在对购物网站界面形式与内容的综合考量后所作出的创新二、卡片式设计风格在购物网页中的优势购物类网站以进行产品销售为目的，设计的核心

6、是提供清晰的产品展示，优良的视觉引导，以促进用户实现购买。购物类网页设计不仅仅是追求视觉上的统一，更多的要考虑用户实际操作过程中的需求（一）信息条理一致性9根据对消费者浏览网站时的视觉力场的研究，视觉力场是一个动态的概念，受众获取信息是根据一定的视觉系列，有秩序地进行阅读与识记。卡片式布局将网页变成一个个卡片矩阵，有秩序地引导着消费者的浏览视线购物网站中的信息内容主要包含：菜单栏、导航栏、商品展示。大多数的购物网站将它们作为主要功能模块进行处理，模块化的关键在于构建相同层级的信息。在卡片式布局中，同一层级模块分割成若干卡片，并具有相对固定的位置。菜单栏一般位于

7、首页最上方，横向排列；导航栏位于网页最左侧，竖向排列。在商品展示区中，每个卡片的大小面积均相同，因此每个卡片能够成功吸引消费者的概率也是相同的，对于消费者来说，更容易发现真正吸引自己的商品（二）提升网站的风格特征网站的视觉风格作为一种表现形态，是网站内容与视觉形式相统一的结果，是网站的功能需求和用户需求被设计者诠释后而体现的一种独特面貌。基于卡片式的网页设计其基本元素是图片、文字。通过改变卡片阵列的卡片色彩、数量、位置，文字字体、大小、颜色，能增强品牌识别度9在GUCCI官网商品展示界面中（图4），在卡片的基础上采用横屏滑动的形式进行商品预览，当鼠标置于某一卡

8、片上时，位于此卡片上的商品被放大，并配