基于化妆品电子商务的网页设计探讨

摘 要：网络信息化蓬勃发展的今天，化妆品是人们生活的必需品，其产业模式也从传统的商业贸易模式迅速发展到电子商务贸易中之中，网页设计的水准也不断要求提高，本文从五个方面来谈化妆品电商的网页设计来满足人们的审美需求。

关键词：化妆品；设计；网页；电子商务

随着我国国民经济的快速发展和信息化水平的不断提高，电子商务在全国范围得到了普及，对人们的购物消费模式有了显著的影响。电子商务是以现代电子工具和信息网络技术为手段，通过以互联网为主的电子交易方式进行网上购物、网上交易、在线电子支付各种商务活动相关的现代商业运营模式，是传统商业模式的电子化、网络化和信息化。电子商务具有降低交易成本、减少库存、缩短生产周期、降低管理成本、提高劳动生产率、扩展市场范围，更好地沟通客户、24小时不打烊、提供个性化服务等优势。消费者通过网上看图比货比价购買，付款流程便利，快递上门送货，这种足不出户的购物方式促使电商迅猛发展。

电子商务网站也进入更新换代的繁荣期，最早是企业与消费者之间的电子商务（C2C）模式的易趣网，再到企业与消费者之间的电子商务（B2C）模式的亚马逊和规模最大、最普及的企业与企业之间的电子商务（B2B）、B2C、C2C综合的阿里巴巴电商军团，至现在以美团为代表的线下商务与互联网之间的电子商务（O2O）模式，形成了竞争激烈的网络营销模式。国内化妆品也跟上了电子商务的节奏，成为网络销售7大主力行业之一。国内化妆品的线上渠道占有了上述的所有电子商务模式，随着网络消费者的日益增长，厂商也积极发展线上自营模式，和好的电商品牌合作，为客户提供更好的产品和体验，形成线上线下品牌竞争发展的良好局面。

艾瑞咨询数据报告中国化妆品零售市场相关数据，在2013年中国化妆品零售市场规模为3338.6亿元，2014年超4000亿，达到4044.1亿元，未来五年，增长率将继续保持在20%以上。[1]据统计消费者在化妆品页面浏览停留时间最长的十大品牌是卡姿兰、欧莱雅、百雀羚、美肤宝、相宜本草、美宝莲、玉兰油、韩束、珀莱雅。打开这些品牌的网页，每个品牌电商网页设计风格各异，产品突出，艺术美感动人心弦。现在化妆品网络消费已经进入读图时代，日化销售中电商网页设计成为产品销售的重要的决定因素之一。电商网页设计也是平面设计在网络信息时代的介质延伸，在本文中，主要探讨日化网页设计的框架、版式、文字、图形、色彩的设计。

1 网页的框架设计

根据日化客户的网页设计需求，进行市场调研，了解消费者需求、网页风格定位，初步规划板块结构、设计具有风格独特和整体形象清晰的网站，我们可以把一个复杂的网站设计把大小尺寸、主次模块进行草图划分和分割，划分成相互独立的二级导航，每个二级导航再划分成三级、四级等子栏目的草案。购物电商网站的重点划分应该是产品展示，也可以把日化产品按功能分类变成一级导航重点强调，可以直接展示产品相关信息和图片，让目标消费者迅速找到自己所需商品。其他如企业背景、客户服务都是辅助信息。每个产品的页面规划也尤为重要，麻雀虽小五脏俱全，能够在页面中力求平衡，导航清晰，起到了一个优秀导购员的作用，一般的结构如图1。

结构设计规范有序且有章可循，主次关系分明是网站设计的重要前提，结构设计就如同大纲，有了大纲才能对后续设计有整体的认知和把握。在此基础上与客户进行沟通与调整，根据反馈信息，进行协调修改，防止网页设计大功告成却突然结构调动，避免费时费力，尽量做到一步到位。

2 网页的版式设计

网页的版式设计和平面设计有很多相似之处，是根据图文、动画、视频等要素有秩序、有机的组织在有限的屏幕空间，并且有一定的视觉导向感，能够使视觉有主次、合理律动地在屏幕中穿梭，并且获得轻松而美的享受。

根据客户需求，可以强化页面整体构成设计，为了更好地让产品的功能效用和营销广告能被关注，需将各元素在版式编排中做整体视觉流程策划，根据视觉运动规律来策划，如页面上块面大小、色块的互补等都会引发视觉张力，引发受众亢奋感。在网页设计主页面的设计上，我们的视觉焦点一般在网页中心点偏上的位置，人的视觉对于版面视觉的关注度一般是上部比下部强，[2]左半部比右半部强，才引发了“国”、“同”、“T”、“川”字的网页版式设计，后随着页面元素的强弱大小等相关规律视觉开始进行流动，最后完全吸收网页。例如，百雀羚（图2）的电商设计就结合当下和“好声音4”的合作广告和热销产品“年方十八”三生面膜五折热卖等营销广告翻转滚动来表现，其中式的红木柜作为整体网页穿插元素，表现了老国货持久弥新的经典魅力。

产品描述中的视觉版式设计和一级页面的版式设计差异较大，产品描述如上图的分支结构一般有十几个小块面构成，如果每个小块面单一的版式设计会引发受众的视觉疲劳，没有耐心看下去，从而无法吸引消费。因此，我们在产品描述版面构成中要注意参考平面设计的方法，可以用直线、曲线、焦点、反复、导向、散点视觉流程，动静结合、刚柔并济、综合使用。

3 网页的文字设计

汉字起源于象形文字，它既是字，又是画，自古就有“字画同源”之说。经过长期的发展，汉字由繁到简，由具象到抽象，成为一种规范化的符号。[3]网页的导航条、广告语、网页标题、正文文字都是网页信息的重要组成部分。其中为了区别正文文字，对受众视觉进行传播信息和视觉诱导，导航条和广告语的设计要结合色彩、图形着重设计，文字之间的间距、大小、行距和字体要选择和网站设计风格保持统一性，文字和背景要形成鲜明对比，以便突出文字内容。同时，网页设计具有交互性，文字可以设计成色彩、大小等特效的变化，增加页面的互动性、生动性和可读性，更加良好而准确地表达文字的意义。其他标题文字和正文文字要和谐布局，字号、色彩统一，忌讳色彩繁多每个页面字体不一致。文字的设计和编排的好坏，影响到整个网站设计的品位和整体性。

如欧莱雅（图3），其中文字既有与图形设计相结合的层次性，又有阴阳大小虚实变化，其文字的块面信息只有两块，且面积形成鲜明的对比却很好地统一在蓝调子里面，还进行了留白处理，空间感、光感强烈。

4 网页的图形设计

在快节奏忙碌的现代生活环境中，广告遍布大街小巷，人们已经无暇一一看广告的文字内容，广告的图形设计也变得很重要。同样，网页设计也进入了读图的时代，电商网页图形设计一方面直接展示产品或相关信息、技术来促使消费者购买，同时也满足消费者审美的心理需求，增加亲切感。产品图片的拍摄质量非常重要，加上后期修图就能够表现非凡品质。摄影图片和素材组合设计在网页中的面积和比重相对于化妆品电商网页来说尤为重要。点线面在网页设计中的需结合得恰到好处。一个汉字、一个按钮、一个标志都是一个点。点的形状、方向、大小、位置、聚集、发散，都能给人带来不同的心理感受。[4]线是点的轨迹，起到强调、分割页面结构，引导视觉流程的作用。不同方向、长度、宽度、形态的线性会给人不同的感受。面的交替使用、合理分割，能使页面产生井然有序的和谐效果。例如，相宜本草（图4）的几套代表性的系列套装就较好的结合了点线面的设计，以线相连，让画面之间有了联系，诱导消费者的视觉自然转移，优惠价的文字突出作为互补色对比，格外耀眼，这个就是点的延伸。圆旁的细虚线使得产品层次更加丰富。

5 网页的色彩设计

信息时代的网页不再局限于简单的图文搭配，制作个性精美、过目不忘的页面需要设计者不仅要掌握基本的网页制作技术，还要掌握色彩搭配等艺术修养。美丽丰富、色彩协调的搭配能引发受众的情感共鸣和无限遐想。色相、明度、纯度三个要素构成变化多样的色彩，色彩原理对于网页设计是至关重要的。

色彩在电商网页设计中占有很大的比例。在网页设计中，色彩给浏览者带来的视觉冲击力形成了网页设计的第一印象，其表现力直接影响到形式的统一与美观。很多成功网站的色彩搭配令人耳目一新，探索色彩在网页设计中的搭配规律也特别重要。利用色彩进行信息组织、区域划分与识别，便于浏览者操作和分辨，减少认知负荷。对主体内容进行必要的忘掉，使网页内容层次分明、条理清晰和色彩均衡。利用美观合理的色彩搭配吸引受众在网页上的停留时间，激发兴趣。

不同的色彩在我们的日常生活、审美取向中有不同的感情和象征意义。例如，化妆品网站基本上喜欢用红色、粉红、紫色、金色或绿色，象征女性的柔美如花或者是天然草本萃取。除了这些色彩运用外，还要注意黑白灰、金、银等万能色，如纯度较高的网站可以搭配黑色，调节和均衡其明度效果。同时我们要避免网站大块面的色彩或者文字、图片信息内容，要适当留白，给受众透气、舒畅的心理感受。

综上所述，化妆品电商的网页设计涉及的视觉元素必须要在合理规划网站布局的基础之上，对文字、图形、色彩进行合理布局和排版。在设计过程中，设计师必须遵循图形设计的形式美法则，才能设计出更合理更美观的信息传达形式。化妆品电商网站都是爱美之人经常光顾的电商网站，对其设计美的要求如化妆品功效一样期待才会促进销售购买。因此，化妆品网站的设计是美的形式对设计者的挑战，要能使受众群体对产品产生良好的形象记忆，以达到网站主题内容的设计目的，從而产生良好的商业销售循环。

参考文献：

[1] 化妆品资讯[DB/OL] . http：//www.cosmetic-news.net/cn/news/detail.aspx？typeid=19&id=2174.

[2] 徐津.报纸版面设计中的人机工程学问题[J].包装工程，2005（4）：201.

[3] 管家庆，陈莹燕.包装设计——创意思维与表现[M].武汉大学出版社，2010：40.

[4] 于颖慧，马晨.教育类网站的艺术设计——点的应用[J].北京工业职业技术学院学报，2006（4）：32.

作者简介：董亚平（1981—），女，江苏宜兴人，本科，无锡工艺职业技术学院艺术设计专业讲师。