首页 理论教育 服装企业网站设计与建设的特点分析

服装企业网站设计与建设的特点分析

时间:2023-06-01 理论教育 版权反馈
【摘要】:服装企业网站界面的视觉元素——文字、图像、Logo、Banner、色彩等都应围绕网站的功能和整体风格而进行设计。服装品牌风格的定位可以决定服装企业自主建设的购物网站或第三方平台网店的设计风格,网站和网店页面的设计相当于品牌的虚拟店面,同样必须融入品牌的风格特色,从网站的Logo和Banner,到页面的文字和色彩搭配,页面的布局以及服装商品的图片展示都是表现品牌风格的重要组成部分。

服装企业网站设计与建设的特点分析

服装企业网站和一般网站的最大不同点就在于,服装网站界面对可视化视觉元素的要求标准非常高,服装企业网站界面的视觉元素设计应有自身独特之处,以区别于其他的普通网站界面。服装企业网站界面的视觉元素——文字、图像、Logo、Banner、色彩等都应围绕网站的功能和整体风格而进行设计。除了文字、图像和色彩以外,还包括声音、视频和动画等新兴多媒体元素,综合运用这些元素,可以增强服装企业网站界面的生动性。网站可视化设计是服装企业开展电子商务,进行视觉营销的重要保障。如何结合网站界面的版面设计和整体风格设计将网站界面中的文字、图像、色彩等用视觉设计呈现出来,同时又受到用户的认可和喜爱,这是服装企业网站设计与建设的特色,也是困难所在。

当然,电子商务网站界面视觉设计还受本身因素的制约。比如网速的快慢、媒介屏幕等。下面重点介绍服装企业网站界面的页面风格设计、页面布局设计、页面色彩设计、页面文字设计、页面图形图像设计等视觉元素的设计特点。

(一)服装企业网站的页面风格设计

服装是紧跟时尚和潮流的特殊商品,每天都有新的元素加入其中,变换成不同的款式和风格,传统的服装实体销售与如今服装企业网站的虚拟网店给消费者带来的是不同的购物体验,在“互联网+”和各种新型信息技术高速发展的今天,服装企业利用网站开展电子商务的优势也渐渐凸显,无论是服装企业自主建设的品牌服装购物网站还是借助第三方平台构建的网上商店,服装企业网站和网店如何区别于其他电子商务平台,创建具有品牌风格特色的购物网站是服装企业在网站设计与建设时面临的一个重要课题。

服装风格是指一个时代,一个民族,一个流派或一个人的服装在形式和内容方面所显示出来的价值取向、内在品格艺术特色。服装风格和品牌风格形象类型可以归纳为前卫、民族、浪漫、优雅、知性、中性、运动、休闲等类型。网站的视觉风格是网站的整体形象给浏览者的综合感受,是通过网页上的视觉元素体现出来的。网站视觉风格的确立是以网站的内容为依据,在准确分析网站定位的基础上建立的。服务于不同对象的购物网站页面从色彩、布局、文字、图片等视觉元素的运用就可以看出其功能和风格。服装类购物网站由于服装品类广泛、风格众多而使其页面具有更多的变化性,且对商品展示的要求较高,特别是对于风格明显的服装品牌,必须强调页面风格的与众不同。服装企业网站和网店最终将品牌风格可以通过网站页面视觉形象展现给消费者。

服装品牌风格的定位可以决定服装企业自主建设的购物网站或第三方平台网店的设计风格,网站和网店页面的设计相当于品牌的虚拟店面,同样必须融入品牌的风格特色,从网站的Logo和Banner,到页面的文字和色彩搭配,页面的布局以及服装商品的图片展示都是表现品牌风格的重要组成部分。服装品牌风格的定位应满足两个特性,即差异性和统一性。因此,特定服装企业购物网站或网店页面的视觉风格设计必须不同于其他网站或网店的页面视觉,而且必须将网站设计的组成元素统一于该品牌的风格之中,整体感强的风格形象较易给消费者留下深刻的视觉印象。对于服装品牌风格的表达,相较于服装品牌官方网站,服装品牌购物网站或网店虽然更加注重于服装产品的展示和销售,但对于品牌形象的宣传,则更具有时效性和变化性,因为品牌购物网站相对官网页面更新速度更快,更能跟上潮流和时尚,也更能持续吸引消费者的关注,获得更大的品牌影响力。与服装企业借助第三方平台构建的网店相比,服装企业自建购物网站以其独立性、品牌差异性和更专业的形象,更能吸引品牌目标消费者的注意力,且从长期性和服装品牌影响力来看,也便于对服装品牌目标消费者的喜好和习惯进行了解和跟踪分析,对服装企业品牌的发展和成长具有更大的帮助作用。

服装企业网站的风格可以归纳为男装的中国风格、商务休闲风格、运动时尚风格、休闲时尚风格等;女装的清新淑女风格、民族怀旧风格、优雅职业风格、前卫时尚风格等。图4-18~图4-20分别是休闲时尚风格、运动休闲风格和民族怀旧风格的几个服装企业网站或网店的代表。

图4-18 C&A官网首页(休闲时尚风格)

图4-19 Adidas官网首页(运动休闲风格)

图4-20 “轻素女装”天猫网店首页(民族怀旧风格)

(二)服装企业网站的页面布局设计

服装企业网站和一般网站的最大不同点是大量图片的运用,图片相比于文字排版更难以驾驭,若选择不好版式和色彩的搭配,会让一个网站显得重点不突出,杂乱无章。而且服装企业网站在页面元素的安排上,更加注重用图片和色彩本身去吸引用户,而不是传统意义上的文字内容。

1.服装企业网站页面布局的基本元素

服装企业网站页面布局的基本元素包括文字、图像、色彩等造型元素及Logo、Banner、导航、主体内容、页脚等内容元素以及按钮、热区、超文本等具有交互功能的屏幕对话构件。服装企业网站一般具有自身品牌的风格特点,它可以通过企业网站CI(Corporate Identity)的形象进行包装和传达。

服装企业网站的Logo作为企业整体形象和文化的标示具有无可替代的作用。用户看到Logo就会想到这是哪一个服装企业和它所代表的网站。国内外几家知名服装企业网站的Logo如图4-21所示。

图4-21 服装企业网站的Logo

2.服装企业网站页面布局设计的方法和基本版式结构

服装企业网站页面布局设计的方法有手工纸面布局法和软件设计布局法两种。手工纸面布局法是在设计页面布局时,先在纸面上画出页面布局的草图,将头脑中的布局设想和创意展现在纸面上,然后经过反复修改,确定最终的布局方案;软件设计布局法是利用Fireworks和Photoshop等图形软件工具设计页面布局草图,软件工具可以更方便地设计网站页面布局和颜色搭配,并且可以利用“层”的功能设计出手工纸面布局无法实现的效果。

服装网站页面版式设计是艺术和技术的完美结合。在版式设计前期需要艺术创作人员通过手工或借助软件设计出UI界面的效果图,然后前端程序设计人员通过编程设置Web页面。常见的网站版式设计技术主要有DIV+CSS布局技术、表格布局技术和框架技术,当前主流的版面设计技术是DIV+CSS布局技术,因为它实现了页面的内容与表现形式的分离,表格布局技术的缺点是过多的表格嵌套会降低页面的响应速度,框架布局技术存在兼容性等问题。

一个最基本的网站页面版式框架主要包含头部、主体、底部三大部分,如图4-22所示。在头部部分主要包括网站的Logo和主导航菜单,主体部分即网站显示的主要内容,底部部分一般是企业联系方式和版权等信息。网站的主页面和各页面的版式可以从图4-22的基本结构衍生出更多种形式,在此不一一列举。下面提供李宁在线商城的主页面供大家参考,如图4-23所示。

图4-22 基本的网页版式结构图

图4-23 李宁在线商城主页

服装企业网站的界面展示除了应具备服装品牌风格特色和良好的版式布局基础外,还需借助页面文字、页面色彩、页面图形图像等元素吸引用户,特别是服装企业网站的界面,更应该充分重视页面图片和色彩的可视化设计。色彩作为其中传递品牌情感、理念的重要途径必须与网站的布局结构相配合,与文本图片等元素相协调,才能达到有效传递品牌服装网站形象与页面信息的效果,符合浏览的视觉舒适性、审美愉悦性要求,从而给人留下深刻印象。

(三)服装企业网站的页面色彩设计

1.服装企业网站色彩设计基础

网站的色彩是网站呈现给用户的第一印象,它能够体现网站的风格、文化和品位。一个成熟的企业也应具有自己特有的企业标准色,企业网站的建设也应该遵循企业标准色,达到统一的视觉传达效果,突出企业识别和传达企业形象

颜色是因为光的折射而产生的。颜色又可以分为发光物体(如显示器三原色RGB和不发光物体(如报纸)的印刷四色CMYK两种色彩模式。

在发光物体中(如电视电脑屏幕和任何类型的屏幕),“红(Red)、绿(Green)、蓝(Blue)”是这个发光物体色彩系统中光的三原色。其他色彩都可以用这三种色彩调和而成。网页的设计就建立在这个RGB色彩系统之上。在网页HTML语言中,根据RGB三种颜色数值分配的不同可以表示不同的颜色,例如:红色的十进制表示是RGB(255,0,0)。我们在网页设计中通常采用十六进制的表示方法,例如红色的十六进制表示为RGB(FF0000)。同理,白色可表示为RGB(FFFFFF)16=RGB(255,255,255)10,在HTML的语法中为<body bgcolor=”#FFFFFF”>就是指网页的背景色为白色。在不发光物体的印刷四色中,CMYK分别代表“青色、洋红、黄色、黑色”,这些颜色是颜料的原色。CMYK被运用于报纸、期刊和海报等的印刷。

网站页面色彩设计的最重要原则之一就是选择企业的标准色为主色调,尽量将页面颜色控制在三种色彩以内。当然,要掌握网站页面颜色的色彩搭配,还需了解颜色的三要素(色调、饱和度和亮度)、基本的配色方案、色彩心理学和计算机中颜色的表示等知识。下面着重介绍网页设计中与计算机相关的一个重要概念——Web安全色,也就是说在计算机的浏览器中并不能显示所有的颜色,每个浏览器只能显示216种色彩。如果尝试216种安全色之外的颜色,浏览器就会通过抖动或者混合自身的颜色来尝试重新产生该颜色。而且,不同的计算机平台(Mac、PC等)有不同的调色板,不同的浏览器也有自己的调色板。这意味着对于同一幅图像,显示在Mac上的Web浏览器中的图像,与它在PC上相同浏览器中显示的效果可能差别很大。所以,在网页设计时,应尽量使用这216种Web安全色。

2.网页设计中的色彩心理与情感(www.xing528.com)

在服装企业网站的设计中,网页设计师要充分了解色彩心理与情感的相关知识,不同的颜色会使浏览者产生不同的心理感受。下面是一些常见色彩的含义:

红色:能量,力量,活力,领导地位,勇气,激情,快乐,危险,邪恶,愤怒,血,高识别度;

橙色:开朗,热情,快乐,激情,魅力,创意,有趣,轻浮,华丽,粗鲁,低端;

黄色:乐观,清新,法律教育,傲慢,怯懦,疾病,背叛,幼稚;

绿色:财富,金钱,平静,树木,野心,耐力,治愈,冷静,打赌,自然,完备,保护,羡慕,嫉妒,不成熟;

蓝色:安全,守信,稳定,忠诚,智慧,信任,友爱,保鲜,勇气,科学,悲伤,抑郁,冷漠,稳重;

紫色:神奇,神秘,灵性,潜意识创造力,尊严,皇室,悲哀,残酷,自大,自负;

黑色:强大,神秘,高贵,精致,功能性,死亡,病态,瘟疫,孤傲。

下面是一些知名服装企业网站的配色和常见的第三方电商平台的配色,它们的网页配色设计可供我们学习和借鉴,如图4-24~图4-32所示(见文前彩页部分)。

(四)服装企业网站的页面字体设计

一般网站的主体信息展示区域,主要是通过文字的形式传递信息。但是,在服装企业网站的设计中,文字信息更多地让位于图片和色彩的展示。不过不论何种情形,文字的表现在网页设计中占有不可忽视的地位。文字设计主要涉及字体、字号、文字的编码方式、文字的色彩、文字的排版方式以及特殊字体的设计等内容。

首先,网页中文字的设计要符合人的阅读习惯,如按照从左至右,从上至下的编排方式,选择常见和计算机支持的字体样式,如浏览器默认支持的文字一般为中文宋体,英文通常为Times New Roman或Arial字体样式。网页中文字的编码简体中文一般采用GB2312-80字符集、繁体中文一般采用BIG-5字符集,还有一种更通用的国际编码UTF-8字符集(同一页面可以同时显示中文简体、繁体及其他语言如英文、日文、韩文等)。

其次,网页中字体大小通常默认值为12PT(12磅,即小四号字),当然也可针对不同情况调整页面中字体大小。在排版方面要选择适当的字间距、行间距以及和图片的环绕方式等。文字的色彩除了黑色外也应与企业标准色尽量保持一致。

最后,如果在网页设计中需要一些特殊字体或者艺术字时(例如在网站主页面的Logo,导航栏中的特殊字体以及主页面的Banner设计中),可以采用将文字转换成图像的方式放入页面中。

(五)服装企业网站中的页面图形图像设计

网站中图形图像与动画设计是除了文字之外现代网页不可或缺的元素,特别是在服装网站的设计中更显其重要性。网站中的Logo设计、Banner设计、导航设计、超链接设计、背景设计以及服装网站中服装展示设计等,无一能离开图形图像的设计元素。有人曾开玩笑说“网上服装销售卖的主要不是服装本身,而是服装模特和图片”。

计算机中图形图像主要分为两种类型:位图图像和矢量图形。Web页面中的标准图像格式如GIF、JPEG和PNG都是位图图像。矢量图形与位图图像最大的区别是,矢量图形不受分辨率的影响。

(1)位图是由像素(Pixel)组成的,像素是位图最小的信息单元,存储在图像栅格中。每个像素都具有特定的位置和颜色值。位图图像质量是由单位长度内像素的多少来决定的。单位长度内像素越多,分辨率越高,图像的效果越好。位图图像的优点是色彩和色调变化丰富,可以较逼真地反映自然界的景物,同时也容易在不同软件之间交换文件,但是,因为位图图像受到像素和分辨率的影响,造成位图图像在放大缩小或者旋转处理后失真,同时文件数据量巨大,对内存要求容量也较高。除了Web中的三种标准图像格式外,常见的图像格式还有BMP、PSD、TIFF等。位图图像常用的绘画工具主要包括Adobe公司的Photoshop和Fireworks、Microsoft公司的画图以及Corel公司的Corel Painter等。

(2)矢量图形,也称为面向对象的图像或绘图图像,在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体,都具有颜色、形状、轮廓、大小和屏幕位置等属性。矢量图形是根据几何特性绘制的图形,只能靠软件生成。它的优点是文件占用空间小、图像元素对象可编辑、不受分辨率和输出设备影响,放大后矢量图形不会失真。它最大的缺点是难以表现色彩层次丰富的逼真图像效果。矢量图形适用于图形设计、文字设计和一些标志设计、版式设计等。常见的矢量图形格式有SWF、SVG、AI、CDR和DWG等。矢量图形常用的绘画工具主要包括Adobe公司的Illustrator和Flash、Corel公司的CorelDraw等。

根据某网站的统计显示,Web页面中的图形图像格式所占百分比如图4-33所示,从中可以看出网站中大量采用了JPEG的图像格式,这种方式可以为服装企业网站的建设提供一些借鉴。

图4-33 网站中图形图像格式所占百分比

在网站的设计中除了文字和图形图像外,还包括动画、音频和视频等多媒体形式,鉴于服装企业网站在构建中图片已经占用了大量的空间和网络带宽,因此一般不应采用音频视频等需要更多插件和影响用户响应时间的多媒体形式。

(六)服装企业网站特色模块设计

服装企业网站为了介绍服装产品特性,往往会增加某些知识性特色模块,如面料说明模块、号型模块、测量模块和洗涤保养模块。面料模块可以图文并茂地说明面料的种类、纹路组织、服用性能等信息和不同面料的鉴别方法等;号型模块是服装号型设置原则和方法的模块,以便使顾客根据自己的尺寸更好地选择服装大小,也可以根据顾客的主要尺寸为顾客推荐合适的服装号型;测量模块通过人体部位各个方位的测量图和文字相结合,可以详细地介绍人体相关尺寸的测量方法,使消费者能够准确地测量出自己的主要尺寸,从而为选购服装提供依据;洗涤保养模块则阐明了日常服装上洗涤图案的含义,服装的洗涤和保养知识及其注意事项。通过提供常识性的知识,能增加网民访问网站的兴趣;服装搭配模块主要提供服装服饰的搭配方法,指导消费者根据体型、年龄、性格、爱好等选择合适的服装。

对于服装企业来说,通过网络销售服装,关键的一点便是服装展示。服装根据品类、风格属性、面料特性和季节流行等特征需用不同方式进行展示,其中对于单品的具体展示是消费者决定是否购买的重要一环,因此必须对服装商品的特性进行详细了解。服装是由面料、色彩、款式设计三元素组成,人们购买服装不仅需要从视觉上判断服装款式和色彩,也需要了解面料成分和洗涤保养等信息,即使是同一件服装,由不同的人穿效果也不尽相同,服装的尺寸大小也是购买者必须了解和选择的,由于网上购买服装无法试穿,此问题便成为服装网络销售的一个难点之一,因此,服装企业电子商务网站,必须通过全方位的服装展示让消费者了解服装商品信息。

目前,购物网站上服装展示的工具有三种——图片、文字描述和动态视频。其中,图片是最直观最主要的展示方式,消费者对网站上服装及相关商品的识别都由此产生。因此服装购物网站上占据面积最大的便是服装图片,服装图片所传达的服装信息能对购买者决策产生巨大影响。其次便是文字阐述,通过简短的文字将服装尺寸、价格、面料成分等信息标示出来,令消费者获知服装大小和面料是否满足自己的需要。最后便是三维动态展示方式,可展现人体着装后的立体效果,依靠视频技术可将动态效果以视频窗口的形式展现给消费者。在服装购物网站页面中以最恰当的方式展现出服装商品的特点以满足消费者的购买需要。三维动态展示方式要求网站页面设计师必须充分了解品牌风格特色和掌握服装商品特性,将品牌服装最完美地展现给消费者。

(七)服装企业网站的关键技术设计

一个服装企业电子商务网站要想获得良好的运转与为用户创造良好的用户体验条件,还需要充分利用一些新技术,如服务器方面的服务器集群技术、负载均衡技术、高速缓存技术等;网络建设方面的内容分为网络CDN(Content Delivery Network)技术、存储区域网SAN(Storage Area Network)技术、数据存储与分析方面的大数据技术、用户行为分析技术、物联网技术在服装电子商务中的应用等。特别是一些新兴技术形态如基于虚拟现实技术的虚拟试衣系统、三维虚拟商城等,也许将会给服装电子商务带来一场革命。另外一些新的基于移动互联网技术的社会化电子商务分享模式,如利用社交网络SNS的App对某类服装商品展开评论,从而引导潜在消费者进行消费的电商导购模式,“美丽说”等电商平台即采用此技术模式。手机客户端图片识别技术搜寻同款服装等新技术的引入,也会改变服装电子商务的消费生态形式,如天猫手机客户端的“拍立得”图片识别功能等。

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

我要反馈