（美术学专业论文）现代电子商务中网页设计的理性与感性研究.pdf

i 一 1 ， - 。 学位论文原创性声明 j j i i i ljji ii ii lj1i ii l lj l l j y 181612 9 本人所提交的学位论文现代电子商务中网页视觉设计的理性与感性的研究，是 在导师的指导下，独立进行研究工作所取得的原创性成果。除文中已经注明引用的内容 外，本论文不包含任何其他个人或集体已经发表或撰写过的研究成果。对本文的研究做 出重要贡献的个人和集体，均已在文中标明。 本声明的法律后果由本人承担。 论文作者( 签名) ： 牲 砂肜年f 月6 日。 指导教师确认( 签名) ：撇 沙捧f 月彩日 学位论文版权使用授权书 本学位论文作者完全了解河北师范大学有权保留并向国家有关部门或机构送交学 位论文的复印件和磁盘，允许论文被查阅和借阅。本人授权河北师范大学可以将学位论 文的全部或部分内容编入有关数据库进行检索，可以采用影印、缩印或其它复制手段保 存、汇编学位论文。 ( 保密的学位论文在年解密后适用本授权书) 指导教师( 签名) ：妹3 睦蠢 弘矽年，月26 日 1 1 1 “ 摘要 现代人们生活的各个方面都随着科学技术的不断发展，被网络覆盖。人类的经济生 活层面以及企业的经营活动也越来越多的依赖网络媒体来展开，商家和企业比以往任何 时候都更清楚的认识到网页的设计对电子商务活动的成功极其重要。随着设计对当今世 界的影响越来越大，企业正趋向于将设计视为他们做出商业决策中不可分割的一部分。 本课题就是从网页的视觉设计对电子商务的网络营销的重要作用及影响入手，探讨传达 视觉语言的理性过程与感性的信息传达结果与行为结果的关系，希望对现代网页设计的 发展有所帮助。 电子商务的网页设计的感性与理性的合理关系的处理，不仅可以提高网页设计的艺 术价值，还可以促进电子商务活动的成功。一个在战略上策划一致的电子商务网站的网 页视觉设计方案能够在网络这个媒体上传达出企业产品信息以及品牌内涵，从而使消费 者受到影响，促使最终消费的产生。论文的内容从理论与实践两个方面出发，主要以国 内外相关理论、专著及论文为基础，结合优秀成功的电子商务网页设计案例加以分析说 明，探讨电子商务网页视觉设计的理性要素和感性要素。 设计者要遵循一个感性认知、理性设计和感性结果的设计过程。充分了解目标消费 群对于营销主体和网站页面的直觉反应与需求是设计师在电子商务的网页设计过 程的基础，在此基础上所选择的视觉语言进行组合，所完成的科学设计过程及结 果能够增加设计师的创新效率和电子商务经营者的资金收益，才能是真正满足消 费者需要的成功的网页设计。 关键字：电子商务网页设计感性认知理性过程感性结果 i i l 一 1 r r a b s t r a c t i 。 w i t ht h ed e v e l o p m e n to ft e c h n o l o g y , i n t e r n e th a sb e c o m ev e r yp o p u l a r m o r ea n dm o r e 。， p e o p l e 7 sc o m m e r c i a ll i f ea n de n r e r p r i s e 7 sb u s i n e s sr e l yo ni n t e r n e t b u s i n e s s m a na n d e n t e r p r i s e a r em o r e c l e a r l y c o n c i o u so ft h e i m p o r t a n c e o fw e b s i t e 7 s d e s i g n t o e - c o l n r r l e r c e d e s i g ni se x e r t i n gm o r ea n dm o r ei n f l u e n c et ot h ew o r l d ，s oe n t e r p r i s e st e n dt o l o o ko nd e s i g na s t h ei n s e p a r a b l ep a r ti nt h eb u s i n e s ss t r a t e g y t h i st h e s i se x p l o r e st h e r e l a t i o n s h i po fv i s u a ld e s i g n 7 sp e r c e p t i o ne l e m e n t sa n dr e a s o ne l e m e n t sa n di t sc o n s e q u e n c e b ya n a l y z i n gh o ww e b s i t e 7 sv i s u a ld e s i g ni n f l u e n c ee - m a r k e t i n ga n de - c o m m e r c ei nh o p i n g t h a tt h ef r u i t so ft h i st h e s i sw o u l db eh e l p f u lt om o d e r nw e b s i t ed e s i g n h o wt ob e t t e rd e a lw i t ht h er e l a t i o n s h i po fp e r c e p t i o ne l e m e n t sa n dr e a s o ne l e m e n t so f w e bp a g ed e s i g ni ne c o m m e r c ec a r lb o t he n h a n c et h ea r t f u lv a l u eo fw e b s i t ed e s i g na n d p r o m o t es u c c e s so fe c o m m e r c eb u s i n e s s aa r t f u l l yc o n s i s t e n tv i s u a ld e s i g no fe c o m m e r c e w e b s i t ec a nc o n v e ys u c c e s s f u l l ye n t e r p r i s e 7 sp r o d u c ti n f o r m a t i o na n db r a n dc o n n o t a t i o na n d i n f l u e n c ec u s t o m e r sp o s i t i v e l y , a sar e s u l ti tl e a d st of i n a lc o n s u m p t i o n o nt h eb a s i so f 飞d o m e s t i ca n df o r e i g nr e l e v a n tt h e o r i e s ，b o o k sa n dt h e s i s ，w i t ha n a l y s i so fs u e c e s s f u lc a s e so f t - 一 一 e - c o l n l n e r c ew e b s i t ed e s i g n ，t h et h e s i se x p l o r e st h ep e r c e p t i o ne l e m e n t sa n dr e a s o ne l e m e n t s i nw e b s i t e 7 sv i s u a ld e s i g n t h ed e s i g n e rs h o u l df o l l o wt h ep r o c e s so fp e r c e p t i o nr e c o g n i t i o n ，r e a s o nc o u r s ea n d p e r c e p t i o nr e s u l f t h eb a s i so fd e s i g n e r 7 ss u c c e s s f u ld e s i g ni st h o r o u g hu n d e r s t a n d i n ga b o u t t a r g e tc u s t o m e r 7 si n t u i t i o n a lr e a c t i o na n dn e e d st om a r k e t i n gb o d y 7 sw e b s i t e t h ed e s i g n e rs h o u l dc o m b i n es u c c e s s f u lt h ev i s u a le l e m e n t s ，i nt h i sw a yh i so rh e r s c i e n t i f i cd e s i g np r o c e d u r ea n dr e s u l tc a np r o m o t ed e s i g n e r 7 si n n o v a t i o na n di n c r e a s e e b u s i n e s s m a n 7 sp r o f i t sa sw e l la ss a t i s f yc u s t o m e r 7 sn e e d st og o o dw e b p a g ed e s i g n k e yw o r d s ：e - c o m m e r c e ，w e b p a g ed e s i g n ，p e r c e p t i o nr e c o g n i t i o n ， r e a s o nc o u r s e ，p e r c e p t i o nr e s u l t 一 ， r ， 目录 中文摘要i i i 、 英文摘要 第一章绪论1 1 1课题背景1 1 2国内电子商务中网页视觉设计的理性与感性研究的现状1 1 2 1相关学术专著1 1 2 2 硕士、博士论文 2 1 2 3 学术期刊和会议相关论文 o 0 000 boqo000 00 00 00 00 0 2 1 3国外电子商务中网页视觉设计的理性与感性研究的现状2 1 4 研究的目的及意义 2 1 5 研究的内容及方法 2 第二章现代电子商务中网页的视觉设计4 n o 2 1现代电子商务及网络营销4 2 2 网页的视觉设计 4 2 3网页视觉设计的感性与理性5 2 3 1 什么是感性认识 000100 00 0 5 2 3 2 什么是理性认识 80 0q i 5 2 3 3 感性与理性在电子商务网站的网页视觉设计中 5 2 4本章小结6 第三章电子商务网页视觉设计中的感性认识 8 3 1直接认知所面对的电子商务网站及网页设计的目标受众8 3 2 直接认知所面对的电子商务网站及网页设计的目标市场 9 3 3直观认知网站建设者的网站目标 g 000 0060 10 000 1 q00000 1 0 ，3 4 本章小结 1 1 7 第四章电子商务网页视觉设计中的理性过程 1 2 4 1 科学合理的网页布局 1 2 v 。 4 1 1电子商务网页视觉设计中的合理导航 1 2 4 1 2 确定符合电子商务网站营销内容的网页布局结构 1 5 4 2 电子商务网页视觉设计中科学合理的文字设计 00 0o i l 2 4 4 2 1电子商务中网页视觉设计中字体设计的协调2 4 4 2 2电子商务中网页视觉设计中字体设计的对比0 00 0 0 0 0 2 5 4 2 3电子商务网页视觉设计中的字体设计的可读性与易读性 2 6 4 3电子商务网页视觉设计中的色彩设计2 9 4 3 1 色彩的色调和意象 o00 0doo i 2 9 4 3 2电子商务网页配色原则和技巧3 1 4 4电子商务网页视觉设计中的图像设计3 4 4 4 1从表现网站目的分析图像类型3 5 4 4 2 从表现形式分析图像类型 g o oo 00 3 8 4 5 本章小结 3 9 第五章电子商务网页视觉设计的感性结果 4 1 结论 4 3 参考文献 4 4 后记( 含致谢) 0g00 00 4 6 攻读学位期间科研成果 4 7 v l k t 弋 第一章绪论 1 1课题背景 2 0 世纪末，互联网的出现是对人类社会发展进程最有影响的事件。有了网络，时间 和空间不再限制人类之间的交流和沟通。人类生活的方方面面都被网络化了。 电子商务的支柱是因特网。这个世界不是关于技术的，而是关于信息、决策和通信 的。“这个世界正在改变每个人的生活，从个人式作坊到超大型公司，没有企业能够忽 视当今网络经济的潜力。电子商务产生并经过十多年的发展，已经成为当代企业经营 和商务活动的必备工具。随着社会进步和生产的发展，商务的形成及具体内容应市场需 求在不断的变化。从原始社会人们直接用物品相交换；货币出现后成为了商品交换的媒 介；随着科学技术的发展，与其相结合的商品交换的手段发展起来。商务活动手段从邮 购订货、电话订购、电视直销，到今天的电子商务网络营销在不断的变化发展。 网络营销作为电子商务中决定能否成功的最重要的核心，目的只有一个，就是在网 上把商品卖出去。互联网作为一种特殊的媒体，使购物的方式在线上和线下有很大差别。 企业想在网络上提高市场占有率，往往求助于网页的设计。根据研究显示，当人们想在 网络上消费购物的时候，网站提供什么商品是首要的，然后是对商品的选择比较，购买 付款。“在这个过程里客户不断地主动搜寻和分析处理与所要选购的商品有关的各种信 息，故具有很强的客户驱动特性。这和在商场购物不同，商场有服务员可以招呼顾客、 解说、促成交易，而网上虚拟商店没有服务员，只能以精心制作的、可用性强的网页来 吸引客户，并使客户能方便地找到他们想要的东西，从而增加成交机会。 陋1 其网页讲究的是用视觉语言排版布局即视觉设计，让他们能够了解网站提供的信 息，从而达到宣传广告及刺激消费的目的。但究竟网页的视觉设计应该怎样达到客户留 下深刻印象从而达到消费这样感性的结果，取决于怎样完成以网络营销为导向的网页的 设计，谁是目标用户、竞争对象等众多的问题的解答，这是一个理性的思考设计的过程。 1 2国内电子商务中网页视觉设计的理性与感性研究的现状 本人通过查阅学术专著、硕士、博士论文、学术期刊等相关文献，分析说明目前有 关中国现代电子商务中网页视觉设计的感性与理性研究现状。 1 2 1 相关学术专著 经过本人的检索和调研，尚未发现国内以电子商务中网页视觉设计的感性与理性的 研究为专题的学术专著。有关电子商务网页设计的一些论述都在“计算机w e b 应用技术” 的专著中；有关网页视觉设计的一些论述、观点多数是混杂在“艺术设计”或“视觉传 达”类的专著中。 1 2 2 硕士、博士论文 r 矗 检索中国国家文献中心的中国学位论文库，没有找到研究电子商务网页视觉设计的 感性与理性的论文。从2 0 0 0 年到2 0 0 9 年的全国硕士、博士论文库中，有关网页设计的 论文主要是从网页设计的后台技术和前台艺术形式，动画在网页设计中的互动等方面进 行研究，关于电子商务的网页视觉设计的理性与感性的研究还很少。 1 2 3 学术期刊和会议相关论文 从最近几年的学术期刊和会议相关论文，研究电子商务的产生与发展的文献和研究 网页设计的普遍性问题的文献较多，关注网页设计的形式等方面的论文越来越多的出现 在一些专业期刊和核心期刊上。但是对于电子商务的网页视觉设计的理性与感性的文章 几乎没有。 1 3 国外电子商务中网页视觉设计的理性与感性研究的现状 国外的一些书籍大多是研究电子商务网站网页建设技术等方面的专著，关于电子商 渺 务网页视觉设计的感性与理性研究的专著还未发现。 1 4 研究的目的及意义 网络已经深入到我们生活的各个方面，整个社会都被网络化了。人类的经济生活层 面以及企业的经营活动也越来越多的依赖网络媒体来展开，商家和企业比以往任何时候 都更清楚的认识到网页的设计对其电子商务活动的成功极其重要。客户总要寻求一种保 证，希望他们花在信息传递上的钱是物有所值的。本课题就是从网页的视觉设计对电子 商务的网络营销的重要作用及影响入手，探讨理性的视觉语言及传达过程与感性的信息 传达结果与行为结果的产生的关系，希望对现代网页设计的发展有所帮助。 由于电子商务的网页视觉设计的理性与感性的研究，目前还没有系统的研究成果， 叠 本课题的写作意义就是试图填补这方面的空白。总结电子商务网页视觉设计中的一些规 ” 律，为以后设计者在设计电子商务网页时提供理论参考，以及研究者提供一些研究的基， 本材料。 v 1 5 研究的内容和方法 l 本课题提出电子商务的网页视觉设计的理性与感性的合理关系的处理，不仅可以提 高网页设计的艺术价值和商业价值，还可以促进电子商务活动的成功。课题的内容在理 论方面，主要以国内外相关理论、专著及论文为基础，结合网页设计的实际理论及电子 商务网页设计的理性要素和感性要素。从各种视觉语言、视觉传达形式等方面，探讨电 子商务的网页视觉设计之初的感性认知，以及理性过程和感性结果等内容，并用优秀成 功的网页设计案例加以分析说明。 在实践方面，总结自己多年从事网页设计的经验，多渠道、多方面收集资料，了解 目前电子商务网页视觉设计的理性与感性的研究现状。并且以网络上的电子商务网页为 研究实体，通过调查各种电子商务网站，总结出目前电子商务的网页视觉设计的数据。 然后从布局、文字、图形、色彩等重要要素的不同角度对它进行分析，重点探讨的是现 代电子商务的网页视觉设计的理性的视觉语言及传达过程与感性的信息传达结果与行 为结果的产生的关系。 第二章现代电子商务中网页的视觉设计 2 1 现代电子商务及网络营销 电子商务是指企业利用当代电子和网络技术来对外从事的各种经营和营销活动。口3 是未来企业从事经营和商务活动的一种主要形式。其所涵盖的业务范围很广，可以分为 网络营销、在线采购、经营决策三个大部分，可是不管进行什么样的商务活动，网络营 销中的促销宣传、理念传播也好，在线采购中的网上采购、在线支付也好，经营决策中 的价格比较、信誉咨询也好，都是为了企业的运营和交易的产生这个目的。简单通俗的 说“电子商务是在网上卖东西的整个过程 。 电子商务最重要的核心部分就是网络营销。曾经看到一个笑话“某公司总裁向董事 长抱怨说自己的薪水还没有营销副总裁的高，董事长跟他说，如果没有营销副总裁带来 的订单，就不需要你这个总裁了 。虽然整个商务过程的各个环节都不可或缺，但是不 可否认，最难的是把东西卖出去。“网络营销是企业利用当代网络环境来展开的各类营 销活动，是传统市场营销在网络时代的延伸和发展；企业利用当代网络技术来整合多种 媒体，实现营销传播的方法、策略和过程。州郇简单通俗的说就是“在网上卖东西的技术”。 2 2 网页的视党设计 从公元前2 5 0 0 0 年，石器时代的人在岩壁上或者其他物体表面图画粗糙的动物、事 物及神秘造型与图案到公元前1 5 0 0 0 年埃及人的象形文字，再到文艺复兴时期的华丽的 艺术语言巴洛克，从1 9 世界后半叶的维多利亚风格到摄影术的诞生，从受到印象 派和新艺术主义影响的2 0 世纪的视觉设计到表现主义的诞生，立体派、达达派、未来 派、构成主义、包豪斯学派、风格派和超现实主义派等等众多艺术运动接踵而至都深深 影响着视觉设计。各个不同的历史时期都有属于自己的视觉语言来表现设计，如今网络 时代飞速发展的现代数字技术为设计者提供了无限的自由操作空间，设计潮流变化非常 活跃，设计师常常综合各种艺术风格，并根据内容、图片以及读者和环境的需求采用不 同的设计方式。 网页设计是一门新兴的设计类和计算机应用类的交叉学科，它本身以网络为载体， 由视觉传达的“前台设计”与计算机技术的“后台设计”两个部分组成。与以欣赏为 4 内容的纯艺术相比较，网页视觉传达设计是一门在网络上信息处理的艺术。信息处理的 好坏直接影响网页设计及网站建设的成功。网页的视觉传达的明确的目的性就是通过设 计将视觉信息更准确、快速地传递给访问者。它不仅“作用于人的视觉而且能够触动人 的所有感官 。陋3 以人们视觉流向的心理和生理的特点来组织各种视觉构成元素，适应 传达视觉信息的精髓，使网页的视觉传达功能最大化，增加网络作为媒体的可读性和创 新性。 2 3 网页视觉设计的感性与理性 2 3 1 什么是感性认识 “一般感情性质的，感觉性质的被称为感性”。汉语大词典的解释：“作用 于人的感觉器官而产生的感觉，知觉和表象等直观认识，相对于理性 。康德的 感性论指出“思维运动的第一个形式是感性，也就是纯粹感性。它的对象是事物 和世界的现象，是事物纯粹表现出来的东西一一表象 。感性是在意识还没有察 觉到事件推理的过程，浅意识已经做出本能反应，习惯和经验已经得出了结论。 没有逻辑规范可以遵循，就是一种只可意会不可言传的感觉，比如灵感。“感性 认识是通过感觉器官对客观事物的片面的、现象的和外部联系的认识。感觉、知 觉、表象等是感性认识的形式。 2 3 2 什么是理性认识 理性一般指概念、判断、推理等思维形式或发展活动。就像在此介绍“理性 的概念，本身就是理性的活动。它是“认识的高级阶段，是抽象思维，是对事物 本质的、整体的和内部联系的概括和反映”。能够指导人们的实践活动才是理性认 识最重要的地方。从感性认识而上升到理性认识才是真正的认识。“理性认识是感 性认识的提高，在感性认识的基础上，把所获得的感觉材料，经过思考、分析， 加以去粗取精、去伪存真、由此及彼、由表及里的整理和改造，就会从感性认识 飞跃到理性认识。 1 2 3 3 感性与理性在电子商务网站的网页视觉设计中 在电子商务网站的网页视觉设计过程中，设计师对目标消费群对于网站页面 的直觉反应与需求的感性认知是设计师在电子商务的网页视觉设计过程的基础， 在此基础上所完成的设计过程及结果能够增加了设计师的创新效率和电子商务经 营者的资金收益。 设计师经过多年的专业培训自然而然对视觉形象敏感，犹如从沙中筛选贝壳， 筛选出有效的专业的视觉语言，利用它们的视觉形式、传达给人们的视觉心理来 揭示信息的含义。如果使用的科学合理，含义阐释的很清楚，推理到目标用户的 心理，达到了信息交流的目的，电子商务网站的浏览量就会上升，继而转化为消 费的产生。想让访问者采取行动必须要让人们清楚的看到网页所传达的信息。例 如网页上有个形象突出的“立即购买”的按钮，很明确的是想让网页上的产品马 上产生消费结果；如果网页上的电话号码在很明显的位置，那么网站传递的是想 让访问者拿起电话拨打电话号码的信息。不要让用户琢磨下一步要做什么，能做 什么。在每一个用户可能停下来的节点，如网页文字的大小、最能打动人的口号 等旁边，都要明确的告诉用户下一步做什么，用各种手段引导到网站目标完成页 面。如果网页的视觉设计师能一直引导用户的目光和心理活动，完成网站目标就 是一个成功的设计结果。 这个理性的设计过程，是在之前对目标消费群的消费心理需求的感性认识之 上进了分析和判读、推理得到了结果，利用网页视觉形象的科学的设计过程刺激 消费者产生情感冲动，最终产生促进消费的感性结果。符合访问者的生理需求和心 理需求的设计是电子商务网站经营者对设计师信任感的来源，是保证整个设计项 目的顺利进行的源动力。 2 4 本章小结 本章对研究对象电子商务网页的视觉设计的概念及设计中的理性与感性的定 义做了解释，并对研究范围作了明确的界定。分析了由于电子商务的核心是网络 营销，最终要达到的目的也是消费的产生，所以网页的视觉设计区别于其他行业 网站的单一的传递信息。 在人们面对面交谈的过程中，大量的信息是通过语气、面部表情、手势等配 合语言来传递的。在网页视觉设计的过程中，网页的内容就像是交谈过程中的语 言只能传递一部分的信息，还是要由表现方式的配合来达到目的的。比如色彩、 布局、排版、图像等等这些视觉元素塑造了网站的个性或者声音，这种声音则赋 予网站独特的基调、气氛、姿态，引起不同的情感冲击，令网站具有吸引力。而设 计师对目标受众的情感需求的直观感性认识是网站具有这种吸引力的基础。这种感 性认知会更深入的影响视觉设计的逻辑思维方式，使网页页面在外观、操作等方面 6 使目标受众的感觉是一种“美”的体验，从而为人们最终的消费行为产生向导。 “设计”一词既是名词( 一种结果) ，也是动词( 一种行为) 。h 3 在整个电 子商务的网页视觉设计过程是一个从感性认知网站目标受众以及目标市场、贴近 网站经营者建立网站目标到经过设计师如何运用专业的理性设计作为网络营销的 重要一环来推动目标的达成，刺激消费者的购买情感产生达到的感性消费结果的 设计过程。 7 第三章电子商务网页视觉设计中的感性认识 在中国最大的c 2 c 购物网站淘宝网上绝大多数都是经营着人们衣食住行的普 通经营者，它们销售着市场上常见的的产品。这些产品在别人的网络店铺里也有， 那么消费者为什么要在你这里消费，而不选择其他店铺呢? 想要让消费者充分了 解产品的卖点，就要设法让注意力在自己的网页停留足够长的时间。就要求设计 者在网页视觉设计的最初阶段充分感受目标受众的心理需求，认知目标市场的情 况，了解网站的目标。以这种感性认知为基础，决定设计师选择组织什么样的视 觉语言来满足目标用户群的消费心理。 3 1直接认知所面对的电子商务网站及网页设计的目标受众 目标受众是众多以印刷、电视、w e b 等为媒介的交流活动的中心。在电子商 务网站的网页视觉设计的每一个步骤都要确定目标受众的重要性。毕竟设计师是 不可能不知道受众是谁，就设计出满足他们的心理需求的网页。 感受用户的心理体验是要在设计项目进行之前做的第一个工作。用户可以根 据性别、年龄、教育水平、婚姻状况、收入等等分为不同的群体。一个在工厂工 作的普通工人和一个大学教授的购物心理、浏览习惯肯定存在巨大的差异。哪些 人是自己的目标用户? 他们的心理习惯是什么? 网页设计师必须很清楚的知道。 对目标用户的心理感知使设计师对于整个网页的视觉设计方向有了基本的把握。 感受用户的心理因素可以让网页视觉设计师和网站建设者都站在目标受众的角度 思考问题，从而成功的完成设计项目。 人与人之间心理的感知通常与人的年龄、地域和收入水平等有一定关系。不 同的社会或者专业角色对信息有不同的需求。因而对网站用户的不同角色的直观 认知，有助于网页视觉设计师区别并感受他们各自不同的心理需求。比如这是个 在淘宝网上经营手链的例子。首先在热播的台湾偶像剧的百度贴吧里发了帖子， 指明说是剧中男女主角定情款手链并带有链接，点击进入淘宝店铺页面设计并不 是单纯手链的图片介绍，而是出现剧照。设计师清楚的认识到同样的年龄容易有 同样的喜好。自己的目标消费群就是年轻人，并且是爱看偶像剧的年轻人，用大 量的剧照和消费者达成共鸣，刺激消费的产生。 8 图3 1 百度贴吧发布帖子图图3 2 链接到淘宝网上的页面设置 在对用户群展开一些研究以后，我们会发现细分用户群对于了解用户需求会 有很大的帮助。举例来说，如果你在研究2 0 岁一一3 5 岁，大学毕业的男性，可能 会发现3 0 岁一一3 5 年龄段男性的需求与那些2 0 岁一一2 9 岁年龄段的男性不一样。 如果两个不同年龄段男性的差异特别明显，那么就可以根据他们的年龄差异，建 立两个分开的用户群。另一方面，如果2 0 岁一一2 4 岁年龄段的男性与2 5 岁一一 3 5 岁年龄段男性的需求似乎非常相似的话，则你或许可以将其合并到一个用户群 中去。“创建细分用户群是一种用于发现用户最终需求的手段。用户细分将 全部的用户划分为较小的，有共同需求的小组，以此来帮助我们更好的了解用户 的需求。 呻1 图3 3 划分用户群 3 2直接认知所面对的电子商务网站及网页设计的目标市场 市场上的选择日趋丰富，人们越来越想要提高自身的生活质量，这就需要更 多的优质的设计。“设计不是种技能，而是捕捉事物本质的感觉能力和洞察能 力。所以，设计师要时刻保持对社会的敏感度”，呻3 直观认知电子商务网站及网页 视觉设计的目标市场。没有经过目标市场验证，就不能草率动手进行网页的设计。 要知道目标市场里的什么问题是首先要认识面对的，要靠网页的视觉设计帮忙解 o 决的。简单的说就是把消费者的购物欲望保存起来，就像电子扫描一样。“在全球 化的市场里，商品竞争力的核心在于对消费欲望的把握能力和体现水平。”n 们如果设计 师能够做到这一点，那么就有机会诞生一个能帮助企业产生经济利益的网页视觉 设计。有些电子商务网站面对的是对价格并不敏感而更关注产品规格、质量的目 标市场，比如家具、汽车配件等，对于这类产品最重要的是全面展现产品特征。 人们不会因为购物代金卷、节日大减价之类的信息而决定购买这类产品；而有些 目标市场就有可能因为优惠、免费等促销活动，使潜在客户放弃其他网站选择在 你这个网站成为消费者。根据不同的目标市场，网页视觉设计要解决的问题自然 也是不同的。设计师在参与电子商务网页的视觉设计之初要充分感知目前网络消 费的目标市场主要有以下几个方面： ( 1 ) 个性化的消费市场。消费者用自己的消费准则来选择市场上越来越丰富的 商品。消费主流就是个性化的消费市场。网络消费具有范围更广更多元化的特点， 打破了空间和时间的限制，正是适合个性化消费的市场。 ( 2 ) 主动性的消费市场。随着商品市场的多元化发展，消费者的消费风险也随 之增加。对商品有关的信息并进行分析和比较往往是消费者通过网络主动获取的， 尤其是在很多大额或者高档的消费中。消费风险减轻了，消费者对产品的信任程 度增加了，在心理上得到了满足和平衡，消费的主动性也就增强了。 ( 3 ) 享受方便的消费过程。现代社会竞争激烈，工作压力比较大，许多人没有 时间和体力浪费在逛街购物上，网络消费市场就满足这部分消费者方便性购买的 目标；而另一部分消费者则是希望在网络消费中寻找生活的乐趣。不论是哪种消 费者，网络消费都是享受方便的过程。 ( 4 ) 价格影响消费市场。消费者购买商品时要考虑的重要因素就是价格。网络 消费市场的生命力就是商品价格低廉。价格对消费者的心理产生重要的影响，产 品的定价逐步由企业定价转变为消费者引导定价。 ( 5 ) 有层次性的消费市场。刚开始接触网络消费的人群往往偏重于书籍、唱片 这些精神产品的消费；完全信任网络购物，掌握了网络消费的规律和操作的消费 者，则侧重于日用消费品的购买。 3 3 直观认知网站建设者的网站目标 实现消费并不是所有电子商务网站的网站目标。不同的利益增长模式、产品 1 0 特性、用户行为模式决定了每个网站不同于别人的网站目标。比如销售的产品是 软件，网站目标往往不会让浏览者直接购买，而是用“免费”这个巨大的“引力 漩涡”来吸引浏览者下载软件试用。可以说，所有浏览者对软件的初步关注都围 绕在该软件的易用性和功能性两个方面，而软件或者网站的开发者也必然侧重于 自己产品的易用性和功能性进行开发，从而使后续的付费领域得到开拓，使浏览 者由体验者自然成为消费者。以腾讯的q q 为例，网站经营者敏感发现了自己的软 件产品在用户交流上的便利易用，在公众接受并把q q 聊天当成习惯的时候，添加 各个非即时通信的客户端，产生了一系列的以软件为载体的后续付费领域，比如 付费q q 账号、付费q q 秀等。这一做法给腾讯带来了极大成功。在这个方面具有 其他电子商务网站所不能比拟的优势。 再比如有的网站目标是希望线下消费的产生；有的网络营销是实体店的辅助 营销活动，促使浏览者通过网络了解实体店信息，才是网站的目标；有的网站是 依靠广告赢利。利用自己对网站经营的产品的了解和习惯，和网站经营者站在同 一个角度直观认知网站的目标对于网页的视觉设计有不可忽视的指导意义。 3 4 本章小结 消费者需要的产品在淘宝网、腾讯网、e b a y 、当当网等这些成功的电子商务网站上 都应有尽有，他们对消费者非常了解。当具体的目标市场、消费群体被电子商务网站的 经营者准确锁定时，网页的视觉设计师就要利用自己的感官、习惯、经验，根据网络市 场的不同发展方面清晰界定目标市场的特征；总结目标人群的价值观念、喜好、生活方 式以及直观认知网站的目标，这就对确定设计策略提供了基础和保障。在此基础之上进 行的下一部分的设计工作才能够体现网站内容主题。这是设计项目的第一步，即电子商 务网站的网页视觉设计的感性认知阶段。 那么采用什么外观风格来表现设计项目的主题内容呢? 选用哪些视觉语言来组织 说明设计过程中的感性认知阶段呢? 这是个科学的、符合逻辑思维的过程，是电子商务 网页视觉设计的理性设计过程。简单的说，就是把感性认知具体形象化的过程，向理性 飞跃的过程。 第四章电子商务网页视觉设计中的理性过程 设计师不是艺术家，在进行电子商务网页视觉设计项目的过程中，不能依据自己的 喜好和价值观随机决定网页的形式，要以用户为中心，以增长经济利益为目的，选择科 学合理的视觉语言，遵循逻辑思维模式，进行理性的设计过程。这个理性的过程包括网 页布局的设计和由文字、色彩、图像组成的视觉形象的设计两个部分。 4 1 科学合理的网页布局 能够向访问者快捷、简便的传递信息是确立合理的电子商务网页布局的重要标准。 信息在网页中的布局就好比是在水果店里摆放水果。根据种类把水果分为李子、西瓜、 橘子、香瓜、苹果等，然后以质量、大小、品种为标准确定水果的价格，这是种对顾客 挑选想要的水果有帮助的摆放方式。各种品种和质量的水果分开摆放，一看就非常清楚， 免去了顾客分辨水果的品种和质量、价格的时间。除了方便顾客以外，整齐的摆放在货 架上的新鲜艳丽的水果，散发着浓郁的香气时刻带给顾客强烈的视觉、味觉冲击，激发 着顾客的购物欲望。电子商务网站的网页布局就是先对产品进行分类整理，确立导航， 实现结构化的网站主题内容，让消费者对自己想要找的东西一目了然。电子商务网站的 网页布局就是对主题内容进行视觉化逻辑处理，让消费者更容易理解。 4 1 1电子商务网页视觉设计中的合理导航 如果消费者进入电子商务网站，弄不清楚该怎么访问页面，即使再花哨的布局结构， 也是完全不合理的，不可用的。网络消费者没有耐心去弄明白一个不知道要怎么点击的 页面。与其那样不如毫不费力的用g o o g l e 搜索其他同类产品的网站更容易、快捷。因 此，当网站的消费者想要以最有效率的方法找到他们想要的东西的时候，合理的导航设 计显得尤为重要。 遵循导航的逻辑设计原则，明确给出访问者“你在这里”的当前位置反馈，显示访 问者在网站中的位置是设计合理导航的准则。引导访问者在网站中去他想去的地方，这 是设计合理导航的关键。访问者能够毫不费力地完成检索，要求助于分类、标签以及分 层的逻辑条理清晰。导航就像杂志的目录，让访问者以最短的时间寻找所需要的东西。 ( 1 ) 网页导航的逻辑设计原则 1 2 最简单、最直观、最一致的导航条 当人们进入电子商务网站以后，需要的是最简单、最直观的导航条，帮助人们进行 下一步的链接。整个网站的不同页面上导航条的外观和位置，链接的前后顺序和数量多 少，甚至标点符号、字体字号都应该保持一致。下面是一个俄罗斯的电子商务网站，网 页的页面导航使用简单的色块式设计，遵循了简单、直观的设计原则，在点击每一个链 接出现的新的页面上的导航都是一致的，给人一种整个网站很统一的效果，使用起来也 很便捷。 o i _ 。- - 。 ，x 蓄1 葶紫幽 专稀赢酶曼懿9 熊瓣 鲢雹蕻忍 o r 渺该， ；i 辔籀舔 图4 1 简单、直观、一致的导航 利用常识的导航元素 在设计的过程中，我们也可以采用同平常不一样的非标准元素进行导航设计。但是 前提是要和人们平常识别的标准元素有一定的共同特征。假如在美国，停车标志突然被 我们由红色八角形标志改成蓝色的三角形标志，那么重大撞车事故一定一起接着一起； 假如我们改成竖立的红色圆形标志，可能就没那么严重的结果了。因为以往的常识会作 用于司机让他们知道类似的红色圆形标志也具有相似的含义。这就说明和标准元素具有 共同特征的非标准元素，是可以利用人们以往的常识理解相似含义，引导识别。这些元 素打破常规，具有很强的吸引力和趣味性。消费者进入网站后，是很乐意接收这样的导 航元素，延长注意力停留在网页的时间，甚至是进行下一步的访问。 图4 2 不寻常的导航元素设计 1 3 图4 2 为d d b 购物网站的首页，导航设计不同寻常的条块设计，而是采用了动画效 果，8 个白色球体不断上下漂浮在黑色背景下，人们很容易根据自己的常识和生活习惯 理解，点击每一个球体就是进入链接中。新鲜的导航设计更容易吸引访问者的深入访问。 始终为访问者定位的导航标签 想象一下，自己身处在没有任何地理标志的陌生环境的情况，是多么糟糕。所以， 访问者需要始终清楚自己在网站中的什么位置。对于当前所处位置以及接下来可以到达 的位置的感觉是决定会不会继续访问网站的关键要素之一。用网站l o g o 、页面标题等作 为导航标签明确告诉访问者“你在这里”，在整个网页布局的视觉层次结构中尤为重要。 s h o p i “n l ；悯n 侈暑乏= 一：一 图4 3 始终为访问者定位的导航标签 同一个电子商务的网站所有的页面的左上角都有“d d bs h o p 的网站l o g o 。网站 l o g o 下面还有一些网页标题，都是一样的设计、布局，无论到达哪个页面，随时随地告 诉访问者“您现在访问的网站是d d b 。 照顾不同计算机水平的访问者的导航风格 虽然现在已经很少有对下划线作为指示链接的方式都不熟悉的“菜鸟 了。但是令 人迷惑的导航系统只有整日泡在网上的人才可以理解。而在两者之间的则是绝大部分的 般访问者。无论是什么样计算机水平的用户，清晰优雅的导航系统是可以得到所有人 的支持的。提供反馈的导航形式 当进入电子商务网站时，访问者需要在点击链接后等待一段较长的时间的时候，提 供某种形式上的导航反馈很重要。例如图4 4 访问者正在下载一个图片，我们可以提供 个小的动画图标，用以显示下载正在进行中，让用户感觉等待的时间没有那么漫长。 没有提示的长时间的链接等待，会让访问者感觉以为网站的链接终止了，就会点击离开 网站。 1 4 图4 4 动画显示下载进程 ( 2 ) 导航的可视性 “能够识别网站上的链接特征叫做功能可视性，或简称可视性”。例如带有下划线 的文本，可视性就非常强，访问者能够很快识别文本链接。在进行电子商务网站的导航 设计时，网站上所有的链接的大小、颜色、样式，都尽量保持一致。通常在改变可视性 是具有重要意义的情况下，才做适当改变。如图4 8 对于网站上同类商品在页面设计上 使用桔色的链接和桔色系图案与白色页面背景搭配，而另外一类的产品在页面上则使用 蓝色的链接和蓝色系的图案与白色页面背景搭配。导航的颜色、图像虽然发生了改变， 但是形式还是保持一致的。这样做的目的是想要访问者更关注导航的可视性，并以此诱 惑访问者探索网站。 t ：萋、嘲荔一一一蝴、，_ e ：o _ 一，一 照 ：“麓 一一o o o 国 画。一。 鸶 r 鬟肇 匠照。，蕈 1 7 j 一。， 如图4 5 导航保持一致的可视性 4 1 2 确定符合电子商务网站营销内容的网页布局结构 电子商务网站为网页的布局具体选择怎样的结构形式，是由不同性质、类型的网站 营销内容信息所决定的。检验网页布局结构是否合理的标准，不是设计师主观、单纯的 以“美”为标准来确定的，而是能否向访问者提供很强的使用性。网页布局结构直接决 1 5 定网页内容给人的视觉感受。比如：“信息超负荷”的页面，就会让访问者迅速、彻底 地感到厌烦，他们很可能因为没有耐心理清这种混乱而关掉页面。正如( d o n tm a k em e t h i n k 的作者s t e v bk r v g 所述：“如果需要投入大量的时间( 或者，看似要投入大量 的时间) 在某物上，那使用它的可能性就很小。 这就要求设计师审视使用者需要的最 容易、最方便地使用性，并将其运用到设计中。这是一个必须要符合逻辑顺序，通过理 性思维，运用科学设计原则的过程。 使用者的观点是在进行网页布局时最重要的观点。你所选择的页面结构方式，直接 关系访问者是否感觉舒适。网页布局结构可分为两类，划分的依据就要看网站的内容和 导航结构是不是复杂。 ( 1 ) 单一结构 “单一 顾名思义是指信息架构单一。主页和子页面在单一结构中的网页布局结构 几乎完全相同的，这是比较简单、比较容易构思的网