淘宝网店页面设计、布局、配色、装修一本通(第3版)(txt+pdf+epub+mobi电子书下载)

作者:孙东梅

出版社:电子工业出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

淘宝网店页面设计、布局、配色、装修一本通(第3版)

淘宝网店页面设计、布局、配色、装修一本通(第3版)试读:

前言

中国互联网经过10多年的发展,目前网民规模已达6.88亿人。淘宝网经过几年的发展,从最初的星星之火,到目前的红红火火,现今很多SOHO一族都把在淘宝网上经营网店作为一种职业追求,越来越多的人在网上开店。虽然网上店铺很多,但是有相当一部分的销售量非常少,少到几天甚至半个月才能卖出一件商品。为什么会这样呢?除了推广不够之外,还有一个重要的原因是店铺的装修设计不到位。对于网络店铺来说,装修更是店铺兴旺的制胜法宝。一般来说,经过装修设计的网络店铺特别能吸引网友的目光。装修店铺其实并不难,但是想要将店铺装修得十分精美却不是一件简单的事情。

在众多淘宝书籍中,《淘宝网店页面设计、布局、配色、装修一本通》历经5年,仍然显示出极强的生命力:第1版和第2版重印了多次,不论是销量,还是读者的认可度,该书的成绩斐然。5年来该书在淘宝网、当当网、京东商城和各大新华书店销量一直在同类书中名列前茅。虽然图书一直销售很好,不过淘宝网平台经历了多次升级更新,为了保证书中内容与时俱进,我们改版升级了该书。相对于第1版和第2版,首先,整书进行了更新,所有淘宝装修操作页面均为最新版,Photoshop软件版本也是最新的,还增加了最近流行的手机淘宝店铺装修内容,读者跟着书上的操作就可以成功地将网店装修好。此外,我们根据读者最关心的问题和淘宝的变化进行了部分的内容更新,力图做到在新的平台下内容架构的系统和合理。本书主要内容

目前市场上虽然有一些介绍网店装修的书,但是大部分只是讲述按钮的设计、店标的设计、宣传公告等设计。而本书却是指引淘宝卖家怎样根据自己所卖的商品去进行页面设计布局、配色与装修。翻开本书,你会发现本书并不是一本单纯讲解网店装修的图书,其中还有大量的关于创意、页面布局、页面视觉设计、页面配色等方面的知识,可谓一书在手,网店装修设计无忧。希望大家通过本书的学习,能打造一个独具特色的淘宝店铺,在广阔的淘宝家园中开拓出自己的一片天地!

本书共12章,主要内容包括网店装修入门基础、网店页面的元素与布局、网店页面的视觉元素设计、网店页面的创意和风格、大型购物网店页面设计分析、页面色彩搭配知识、网店色调与配色、各行业网店设计与配色案例解析、普通店铺与淘宝旺铺的装修、手机淘宝店铺装修等。本书特色

一般的网店装修图书只讲述网店装修技术的使用,如设计店标、设计分类按钮、设计广告栏,而网店装修技术含量本身并不高,一般只需精通制图软件就可胜任。若要彰显独特个性,最重要的还是得有创意,需懂得灵感和色彩的运用,才能获得稳定的客源。

畅销图书升级。前两版图书在淘宝网、当当网、京东商城和各大新华书店销量一直在同类书中名列前茅,多次印刷。

新增手机淘宝店铺装修讲解。随着移动端交易数量的增加,本书增加了流行的手机淘宝店铺装修内容。

图文并茂,易于阅读。全书每章都配有大量的图例说明,并附以生动的文字讲解,阅读门槛低,无论是淘宝的新手还是老卖家都可以方便地阅读。

通过分析实际的设计案例,帮助大家了解商品页面设计的趋势,以及流行的设计技术;详细讲解了商品页面的制作方法,让您赶上最新的设计潮流,永不落伍!

首先讲述了网店装修所需要的知识,接着讲述了页面的布局与视觉元素设计、页面色彩搭配、图片的处理、普通店铺的装修和旺铺的装修。

作者具有多年的网店设计与装修经验,曾设计了1000多家店铺模板,总结了开店过程中的经验和技巧,涵盖了开店过程中遇到的许多细节问题。本书适合读者

如果您想在网上开店、进行网上创业,如果您正在经营网店,想通过网店的整体包装提升店铺档次、将生意做大做强,如果您是网店设计与网店装修的专业人员,那么本书非常适合您。

本书的编者中既有积累了多年网店设计装修经验的人员,又有网页设计与网站建设方面的人员。参加本书编写工作的有:郭海旺、孙东云、邓静静、李银修、刘宇星、刘中华、李晓民、邓方方、孙良军、何秀明、何海霞、陈石送、徐洪峰、孙起云、吕志彬等。由于作者水平有限,本书存在不足之处在所难免,欢迎广大读者批评指正。编者2016年5月第1章网店装修入门基础本章指导

网店装修是网上开店过程中一个至关重要的环节。网店装修可以美化店铺,使店铺获得更多的视觉销售力,从而创造出超过网店装修费用几十倍的收益。网店装修带给网络店铺的不仅仅是美观,更多的是创造出一个精美的店铺形象,给顾客一种强烈的吸引力,并刺激其购买欲望,从而提升销售业绩。1.1 网店装修需要注意的问题

网店装修的目的在于创造更多的销售额,为网店带来更高的人气和属于店铺的忠实客户。所以网店装修应该是建立在这个目的之上的,否则如果装修只是使图片更精美,而不能带来收益,那么装修网店就变得毫无价值和意义。1.1.1 什么是网店装修

网店装修可以理解为类似实体店铺的装修,店铺漂亮才能吸引顾客来购物甚至多次消费。对于网店来讲,一个好的店铺设计至关重要,毕竟买家只能通过网上的文字和图片来了解店铺,了解产品,所以店铺装修得好能增加买家的信任感,甚至还能对店铺品牌的树立起到关键作用。

网店装修就是在淘宝、易趣、拍拍等网店平台允许的结构范围内,尽量通过图片、程序模板等让店铺更加美观。“普通店铺”结构很固定,只能做一点装饰,功能性不强。而“旺铺”自由度非常大,功能也很强,关键是看自己的创意和技术。1.1.2 为什么要进行网店装修

在网上开店,也要把门面装修得漂亮点儿,这样才能吸引买家。作为视觉动物,人的第一印象对其认知会产生相当大的影响。同样,逛街购物也是如此,装修靓丽而富有特色的门店使人们的购物心情更舒畅,顾客下单的时候自然会更爽快。倘若店铺的装修毫无特色,货品堆放毫无秩序,相信你的购物欲望也会大打折扣,甚至有想赶快离开的心理。而对于网络店铺来说,装修更是店铺兴旺的制胜法宝,商品的任何信息买家都只能通过网店页面来获得,所以更需要在美观上下工夫。一般来说,经过装修设计的网络店铺特别能吸引网友的目光。下面具体介绍为什么要装修网店。

第一,新手基本上都没有销售信誉,拿什么让买家相信你不是骗子呢?把网店装修得漂漂亮亮的,即使买家质疑你是骗子,你也可以挺直腰杆说:“有这么认真的骗子吗?”

第二,经过装修的网站会给买家留下一个好印象。很多新手在开店时,整个网店都可以看到马虎的痕迹。标题不规范,长的长,短的短;分类不整齐,有一个字的,有三个字的,有多个字的,看起来相当不协调;商品描述更是乱七八糟。而装修靓丽的网店会给顾客留下一个好印象,使其购买几率大大提高。

第三,装修网店时,要注意整体搭配。很多新手在装修时到处找免费的东西,七拼八凑,使整个店面花花绿绿的,跟垃圾场一样,那样的装修还不如不装修。

第四,网店商品虽然非常重要,但是绝对不能忽视装修。正所谓“三分靠长相七分靠打扮”,网店的美化如同实体店的装修一样,能让买家从视觉上和心理上感觉到店主对店铺的用心,并且能够最大限度地提升店铺的形象,有利于网店的品牌形成,提高浏览量。

第五,好的装修会增加顾客在网店停留的时间。漂亮、恰当的网店装修,可以给顾客带来美感,使顾客浏览网页时不易疲劳,自然会更细心地浏览你的店铺。好的商品在诱人的装饰品的衬托下,更不容易遭受拒绝,有利于促进成交。

如图1-1和图1-2所示分别为装修好的店铺和没有装修的店铺,可以看到装修后的店铺极大地提高了店铺的美观性和人气,网店销售量也有了很大的提高。图1-1 装修好的店铺图1-2 没有装修的店铺1.1.3 新手店铺装修的误区

在网上可以看到很多卖家的店铺装修得非常漂亮,有些卖家甚至找专业人士“装修”店铺。面对形形色色的店铺装修行动,稍不小心就走入了店铺装修的误区。下面介绍网店装修过程中常见的误区。(1)店铺名称过于简洁

有的掌柜相信简单就是美,店名取得很简洁,只有几个字。殊不知,对于店铺名称,30个字的编辑限度是很重要的。比如做话费充值的店铺,起的名字是“话费点点充”,可是买家在搜索店铺的时候,使用关键词“充值”、“话费充值”进行搜索,你的店铺都是找不到的。小提示为店铺取名时,要充分利用好30个字。因为很多人会利用搜索店铺这个方法来对宝贝进行搜索,所以店铺名称中应尽量包含更多的宝贝关键词。(2)栏目分类太多

这也是一个非常大的误区。有些店铺的商品分类多达上百个,也许你会说店铺的东西多,必须这样分类。但是你要知道,分类是为了让买家一目了然地找到他需要的东西,分类这么多,一屏都显示不完,谁会愿意去仔细找你的分类?如图1-3所示的店铺中,左侧的栏目分类太多,而且杂乱无序,买家怎么能快速找到所需的商品呢?图1-3 分类太多太杂(3)图片过多过大

在有些店铺的首页中,店标、公告及栏目分类等,全部都使用图片,而且这些图片非常大。虽然图片多了,店铺一般会更美观,但是却使买家浏览的速度变得非常慢,店铺的栏目半天都看不到,或者重要的公告也看不到,如图1-4所示,那还有什么效果?图1-4 图片过大(4)存放图片的空间速度太慢

去测试一下你存放图片的空间服务器速度是否正常,并测试服务器是否有区域限制。很多服务器在不同的ISP提供商,访问速度是完全不同的,甚至会出现打不开的现象,那么店铺的公告、分类,别人也许就看不到。如果产品介绍里的图片或产品介绍的模板页面看不到的话,那就惨了。(5)动画过多

将店铺布置得像动画片一样闪闪发光,能闪的地方都让它闪起来:店标、公告、宝贝分类,甚至宝贝的图片、浮动图片。动画固然可以吸引人的视线,但是使用过多的动画会占用大量的宽带空间,网页下载速度更慢。而且使用这么多的动画,浏览者看起来会很累,也突出不了重点,如图1-5所示,此店铺使用了过多的动画。图1-5 过多的动画(6)宝贝名字过长

将宝贝名字、分类名字取得很长,这样做的好处是被搜索到关键词的可能性增大。但太长的宝贝名字将无法在列表中完整显示。还有些掌柜为了引起买家的注意,在名字中加上一长串其他符号,但真正的买家是不会过于关心这些的。把宝贝的特性、范围等表述清楚,再加入适当的广告词,这样就可以了。(7)店铺装修的色彩搭配

有些卖家把店铺的色彩搞得鲜艳华丽,把界面做得五彩缤纷。色彩总的应用原则应该是“总体协调,局部对比”,也就是说网店页面的整体色彩效果应该是和谐的,只有局部的、小范围的地方可以有一些强烈的色彩对比。在色彩的运用上,可以根据网店的需要,分别采用不同的主色调。店铺的产品风格、图片的基本色调、公告的字体颜色最好与店铺的整体风格对应,这样出来的整体效果和谐统一,不会让人感觉很乱,如图1-6所示是色彩搭配合理的店铺。图1-6 色彩搭配合理的店铺(8)页面设计过于复杂

旺铺装修切忌繁杂,不要把旺铺设计成门户类网站。虽然把旺铺做成大网站看上去比较有气势,使人感觉店铺很有实力,但却影响了买家的使用,他要在这么繁杂的一个店铺里找到自己想要的商品,不看得眼花才怪呢!所以说,不是所有可装修的地方都要装修或者必须装修,个别地方不装修效果反而更好。总之一句话,要让买家进你的店铺后能够较便利地找到自己所要购买的商品,能够快捷地看清商品的详情。1.2 网店装修审美准则

在淘宝开店以后,装修就成了首要任务。装修上了档次,顾客会觉得你是实力卖家,自然也就多了一层信任。装修好的店铺会让人一进去就爱上这里,喜欢它的风格、分类,以及颜色搭配,从而拉近卖家和买家之间的距离。1.2.1 网店的风格

网店风格是指网店界面给买家的直观感受,买家在浏览的过程中所感受到的店主品味、艺术气氛、人的心境等。在经营网店的过程中,应该让网店的格调最大限度地符合大众的审美观念,赢得顾客的好评,如图1-7所示,属于经营农家特产的店铺风格。图1-7 经营农家特产的店铺风格

装修店铺首先要确定店铺的主题,以此来定位商品特色和店铺装修的风格。然后根据店铺的商品特色进行素材收集、图片处理,以及店铺招牌、促销区、分类导航区的设计,这样一步一步就可以完成整个店铺的装修了。1.2.2 网店审美的通用原则

网店页面设计既是一项技术性工作,又是一项艺术性很强的工作。因此,设计者在装修网店时除了要考虑网店本身的特点外,还要遵循一定的艺术规律,从而设计出色彩鲜明、风格独特的网店。网站装修应该遵循的审美三原则如下。(1)特色鲜明

一个网店的用色必须要有自己独特的风格,这样才能显得个性鲜明,给浏览者留下深刻的印象,如图1-8所示是特色鲜明的网店。(2)搭配合理

网店页面设计虽然属于平面设计范畴,但它又与其他平面设计不同,它在遵循艺术规律的同时,还要考虑人的生理特点。色彩搭配一定要合理,给人一种和谐、愉快的感觉,避免采用纯度很高的单一色彩,否则容易造成视觉疲劳,如图1-9所示是搭配合理的店铺页面。图1-8 特色鲜明的网店图1-9 搭配合理的店铺页面(3)讲究艺术性

网店装修设计也是一种艺术活动,因此它必须遵循艺术规律,在考虑到网店本身特点的同时,按照内容决定形式的原则,大胆进行艺术创新,从而设计出既符合网店要求,又有一定艺术特色的网店。1.3 网店装修的一般流程

网店的装修步骤有哪些?下面介绍网店装修的一般流程。在店铺正式开业之后,和传统店铺一样,为了能正常营业、吸引顾客,需要对店铺进行相应的装修,主要包括取一个好店名、确定装修风格、注重修饰细节等。(1)取个好店名很重要

网店取名也是很有学问的。一个有特色的店名不仅能使买家记住你,还能使买家对你的店铺产生好感,促成交易并成为你的忠实客户。

网店店名会在一定程度上影响网店的访问量。为什么这么说呢?以“淘宝”为例,淘宝网目前有搜索店铺和搜索宝贝的功能,所以说店名以易记为取名原则,以便让买家在搜索时尽快找到。(2)确定装修风格

众所周知,开店,门面很重要;开网店,门面同样很重要,只不过这个门面如今变成了网店的页面。经过美化后的页面对商品销售同样有一定的辅助作用,不仅能让买家注意到你的产品、增加“逛店”的乐趣、提高点击率,还可以极大地提升购买机会。

网店设计风格要与主营产品相符。针对不同的消费群体有不同的主题模板。一般来说,插画、时尚可爱、桃心、花边等风格适合女装类店铺,而黑白搭配、有金属质感的设计风格更适合男性商品店铺,如图1-10所示是男装店铺采用黑白搭配的风格。图1-10 男装店铺采用黑白搭配的风格

网店的整体风格要一致。从店标的设计到主页的风格,再到宝贝页面,应采用同一色系,最好有同样的设计元素,让网店有整体感。在选择分类栏、店铺公告、音乐、计数器等东西的时候要有整体考虑。一会儿浪漫温馨,一会儿又搞笑幽默,风格不统一是网店装修的大忌。(3)注重修饰细节

虽然开店平台都会提供免费的模板,但是这远远不能满足店主的需求。试想,千篇一律的网店页面如何能使你的店铺脱颖而出。因此,网店装修成了新手卖家必修的功课。

对淘宝网店进行装修设计,必须了解淘宝对自定义店铺的规定。对于普通店铺来说,可以发挥的空间有:店铺公告、宝贝分类、店标/论坛头像、签名、宝贝描述。除此之外,还有计数器、背景音乐、挂件、欢迎欢送图片、掌柜在线时间、营业时间、联系方式等。第2章网店页面的元素与布局本章指导

设计网店页面的第一步是设计页面布局。好的页面布局会令买家耳目一新,同样也可以使买家在店铺中比较容易找到他们所需要的商品,所以初学者应该对网店页面布局的相关知识有所了解。

网店页面的布局版式、展示形式直接影响买家使用的方便性。合理的页面布局可以使买家快速发现店铺的核心商品和服务;如果页面布局不合理,买家不知道怎样获取所需的信息,或者很难找到相应的信息,那么他们很快就会离开这个网店。2.1 网店栏目和页面设计策划

只有准确把握买家需求,才能做出买家真正喜欢的网店。如果不考虑买家需求,网店的页面设计得再漂亮,功能再强大,也只能作为摆设,无法吸引买家,更谈不上将他们变为网店的客户。2.1.1 为什么要进行策划

一个成功的网店,不在于投资多少钱,不在于有多少高深的技术,也不在于市场有多大,而在于这个网店是否符合市场需求,页面是否符合体验习惯,是否符合运营基础。专业的网店策划,可以带来以下几个好处。(1)避免日后返工,提高运营效率。很多网店店主不是IT行业人士,总是在不断地修改网店页面。所以,为了避免以后不停地返工修改网店页面,事先对网店的各个环节进行细致的策划是非常必要的。(2)避免重复烧钱,节约运营成本。当网店设计好后,为什么总是没有买家呢?即使花很多钱去推广,到最后也没有留住买家。那是因为网店的各个环节,尤其是用户的体验环节定位出了问题。所以店铺做出来之后,总是无法留住买家。因此,如果想节省网店推广的钱,那就仔细反省一下网店自身的定位,做好网店的策划。(3)避免投资浪费,提高成功几率。在开始网店之前,一定要做一次细致的策划,如市场的考察、赢利模式的研究、网店的定位。只有进行了专业的思考和策划,才可以使投资人的钱不白花,避免投资浪费。(4)避免教训,成功运营。策划网店时,不但要策划网店的具体内容栏目,更多的时候是要策划网店的市场定位、运营模式、运营成本等重要的运营环节。2.1.2 网店的栏目策划

网店栏目策划的重要性常被忽略。其实,网店栏目策划对于网店的成败有着非常直接的关系,网店栏目兼具以下两个功能,二者缺一不可。

1.提纲挈领,点题明义

网速越来越快,网络的信息越来越丰富,买家却越来越缺乏耐心,打开网店超过10秒钟或一旦找不到自己所需的信息,就会毫不客气地关掉页面。要想让浏览者停下匆匆的脚步,就要让他们清晰地看到店铺内容的“提纲”,也就是网店的栏目。

网店栏目的规划,其实也是对网店内容的高度提炼。即使是文字再优美的书籍,如果缺乏清晰的纲要和结构,恐怕也会被淹没在书本的海洋中,网店也是如此。无论网店的内容有多精彩,如果缺乏准确的栏目提炼,也难以引起浏览者的关注。

因此,网店的栏目规划首先要做到“提纲挈领、点题明义”,用最简练的语言提炼出网店中每一个部分的内容,清晰地告诉买家有哪些信息和功能,如图2-1所示的网店栏目很清晰,具有提纲挈领的作用。图2-1 网店栏目具有提纲挈领的作用

2.指引迷途,清晰导航

网店的内容越多,浏览者也越容易迷失。除了“提纲”的作用之外,网店栏目还应该为浏览者提供清晰直观的指引,帮助买家方便地找到所需的商品。网店栏目的导航作用,通常包括以下两种情况。(1)顶部导航:顶部导航可以帮助买家快速找到所需栏目。通常来说,顶部导航的位置是固定的,以减少浏览者查找的时间,如图2-2所示顶部导航既有商品分类又有其他导航信息。(2)产品栏目导航:一般产品栏目导航在页面左侧,也就是宝贝分类。产品分类越清晰越好,通过单击分类可以快速找到相关的产品信息,如图2-3所示是产品栏目导航。图2-2 顶部导航图2-3 产品栏目导航(3)快捷搜索:对于网店的老顾客而言,需要快捷地找到所需商品,“快捷搜索店内宝贝”为这些顾客提供直观的搜索,减少点击次数和时间,提升浏览效率,如图2-4所示是快捷搜索。图2-4 快捷搜索

归根结底,成功的栏目规划,还是基于对买家需求的理解。对于买家需求理解得越准确,越深入,网店的栏目也就越有吸引力,能够留住越多的潜在客户。2.1.3 网店的页面策划

网店页面是网店销售商品的最终表现层,也是买家访问网店的直接接触层。对于页面设计的评估,最有发言权的是网店的买家,好的网店策划者要善于从买家的浏览行为中捕捉买家的意见。

网店策划者在做页面策划时,应该遵循以下原则。(1)符合客户心理的网店特点及行业属性

在买家打开页面的一瞬间,让买家直观地感受到网店所要传递的理念及特征,如页面色彩、图片、布局等。(2)符合买家的浏览习惯

根据页面内容的重要性进行排序,让买家用最少的光标移动,找到所需信息。(3)符合买家的使用习惯

根据网络买家的使用习惯,将店铺最有特色的商品放置于醒目的位置,便于买家的查找及使用,如图2-5所示是将特色商品重点展示。图2-5 将店铺最有特色的商品重点展示(4)图文搭配,重点突出

买家对图片的认知程度远高于对文字的认知程度,适当地使用图片可以提高买家的关注度。此外,确立页面的视觉焦点也很重要,过多的干扰元素会让买家不知所措。(5)利于搜索引擎优化

减少Flash和大图片的使用,多用文字描述,以便于搜索引擎更容易收录网店,让买家更容易找到所需商品。2.2 网店布局的基本元素

在一个完整的淘宝旺铺中,网店页面通常包括的元素有:店招、公告、促销栏、宝贝分类导航、宝贝展示区、宝贝描述、计数器、欢迎欢送图片、联系方式等,如图2-6所示为典型的网店元素布局。(1)店招

顾名思义,店招是一个店铺的招牌。对于网店的店招来说,必须放在店铺的最上方,用来说明经营项目,是招揽顾客的牌子。

店招首先应说明店铺是经营什么的,有什么特色使顾客必须在这里停留,同时还要注意店招大小,不能做短了,否则会显得既不专业又不协调。(2)公告栏

店铺公告栏是每家店铺必备的栏目。公告是用来向买家展示自己店铺里有什么新品、新优惠政策的绝佳平台,同时也是买家获取店铺信息的重要渠道。图2-6 典型的网店元素布局(3)促销栏

促销栏的长度一般是750像素左右,高度没有限制,这里比店招有更重要的广告价值。促销栏通常是越大越好,但高度不能太高,其中的内容要有动感,给顾客一种像在看电视的感觉,内容也不要过于单一。动态的内容最好置于整个促销栏的左上方,因为这里正处在顾客视野的正中央,最容易引起注意。(4)宝贝分类导航

这也是每个店铺都有的。在建立目录的时候应该遵循一些原则,比如说按字母顺序来排列产品分类,并在顶上加以注解,这样就会更人性化,节省顾客搜寻所需宝贝的时间。

店铺类目的装修是重中之重。在店铺类目中,不仅可以很方便地用各种图片来展示商品分类,还可以通过图片及图片上的文字来表达想要表达的任何内容(例如:欢迎光临、营业时间等)。好的店铺类目装修可以很好地配合店铺装修并凸显卖家个性。

店铺分类的颜色、图案和文字最好与店招有一定的呼应,这样在整体上会有一种连续性和协调感。一般情况下,在分类的最下边还会加上联系方式、营业时间、计数器的图片。(5)宝贝描述

该内容是在买家对产品有兴趣之后,点击进入后看到的页面,这里对于大家来说可操作的内容是最多的,需要注意的是要使描述具有层次性,条理清楚,各个部分尽量独立,如图2-7所示的是打开的宝贝描述页面。图2-7 打开的宝贝描述页面(6)计数器

计数器不是必备的,但是,有了它,卖家能够更好地揣摩买家的心思。如果你的店铺人气很高,买家看到他(她)中意的东西之后又看到人气这么旺,肯定是保质保量,并且售后可能也不会很差,于是就留下了一个很好的印象,非常有利于成交。

通常在这些地方都可以添加计数器:一是在公告栏里;二是在产品的分类导航栏里;三是在描述模板里。(7)联系方式

对于旺铺,联系方式最好放在促销模板的右下角,因为人们的习惯通常都是把署名、联系方式、日期等放在右下角。在描述模板的顶端或底端也都可以添加联系方式。对于普通店铺来说,联系方式可以放在公告栏或者分类的顶端。2.3 页面布局设计

网店页面设计要讲究编排和布局,虽然网店页面设计不同于平面设计,但它们有许多相近之处,应加以利用和借鉴。为了达到最佳的视觉效果,应讲究整体布局的合理性,使浏览者有一个流畅的视觉体验。2.3.1 页面布局原则

页面在设计上有许多共同之处,如报纸等,也要遵循一些设计的基本原则。熟悉一些设计原则,再考虑一下页面的特殊性,便不难设计出美观大方的页面来。网店页面设计有以下基本原则,熟悉这些原则将对页面的设计有所帮助。

1.主次分明,中心突出

在一个页面上,必须考虑视觉的中心,这个中心一般在屏幕的中央,或者在中间偏上的部位。因此,一些重要商品或内容一般可以安排在这个部位,在视觉中心以外的地方就可以安排那些稍微次要的内容,这样在页面上就突出了重点,做到主次有别,如图2-8所示的页面的中间偏上位置放置着重要的推荐商品。

2.大小搭配,相互呼应

对待商品展示的多个图片的安排要互相错开,使大小图像之间有一定的间隔,这样可以使页面错落有致,避免重心的偏离,如图2-9所示的图片搭配就很美观。图2-8 主次分明中心突出

3.页面布局时的一些元素

格式美观的正文、和谐的色彩搭配、较好的对比度、具有较强可读性的文字、生动的背景图案、大小适中的页面元素、布局匀称、不同元素之间有足够空白、各元素之间保持平衡、文字准确无误、无错别字、无拼写错误,如图2-10所示。图2-9 图片搭配就很美观图2-10 文字排版精美细致

4.文本和背景的色彩

考虑到大多数人使用256色显示模式,因此一个页面显示的颜色不宜过多,主题颜色通常只需要2~3种,并采用一种标准色。

5.简洁与一致性

保持简洁的常用做法是使用醒目的标题,这个标题常常采用图形表示,但图形同样要求简洁,另一种保持简洁的做法是限制所用字体和颜色的数目。

要保持一致性,可以从页面的排版下手,各个页面文本、图形之间保持相同的间距,主要图形、标题或符号旁边留下相同的空白。2.3.2 网店页面内容的排版

网店页面拥有传统媒体不具有的优势,例如能够将声音、图片、文字、动画相结合,营造一个富有生机的独特世界,同时它拥有极强的交互性,使买家能够参与其中,同设计者相互交流。

现在的网店页面通常具有的内容是文字、图片、符号、动画、按钮等。其中文字占很大的比重,因为现在网络基本上还是以传递信息为主,而文字是最有效的一种方式。其次是图片,添加图片不但可以使页面更加活泼,而且可以直观形象地说明问题。

页面上比较好的文本排版是这样的:一般文本的排版整体性好,浏览起来通畅而丝毫没有阻碍,理解内容更加容易。文字的大小应该适中,如果太大浏览起来增加了翻页的难度,太小看起来太累。因此这是值得每一个设计者慎重考虑的。用色也要考虑,一般用区别于主体的颜色可以起到强调作用,但是凡事都是过犹不及,一个整体的文字内容里用的颜色太多,势必会影响读者的理解,也会影响他们使用的心情,导致厌倦的情绪,如图2-11所示的网店页面中的文字排版,采用了表格排列,文字清晰明了。图2-11 网店页面中的文字排版

图片在网店页面设计中也占据很重要的地位,由于图片的加入使网店页面更加丰富多彩,所以把图片用好是非常重要的。有几个值得注意的地方,图片不能太大,受带宽的限制,人们是很难忍受等待之苦的,这就要求把图片的体积缩小,同时又要使图片尽量清楚、直观,最大限度地发挥它的作用,把握这个度是很关键的;另外图片的排版也很讲究,特别是多图的情况,既要使图片与图片之间有联系,同时又要融为一个整体,使之看起来有条理,如图2-12所示的是页面中的多图排版。图2-12 页面中的多图排版小提示在进行网店页面布局时应注意以下几点。从上到下,从左到右,按照内容重要性的优先级有序展开。重要内容放在靠前的位置。建立清晰的视觉层次。页面布局清晰明确,同级的页面布局一致。第3章网店页面的视觉元素设计本章指导

一般来说,网店的视觉元素主要有文字、图片、按钮这几类,还包括多媒体等,这些是网店外观设计的组成部分,服从于网店的整体风格需要。用好视觉元素,能使买家获得更好的在线体验。3.1 网店导航设计

网店的导航是网店内容架构的体现,网店导航是否合理是网店易用性评价的重要指标之一。正确的网店导航要做到便于浏览者的理解和使用,让浏览者无论进入网店的哪一页,都很清楚自己所在的位置,很容易返回网店首页。3.1.1 导航设计的基本要求

简单直观的导航不仅能提高网店易用性,而且方便浏览者找到所需的信息,有助于提高用户转化率。导航设计在整个网店的设计中举足轻重。导航有许多方式,常见的有图片导航、按钮导航、文字导航,如图3-1所示是按钮导航。图3-1 按钮导航

在设计导航时要注意以下基本要求。(1)明确性:无论采用哪种导航策略,导航的设计应该明确,让浏览者能一目了然。具体表现为:让浏览者明确店铺的主要商品范围;让浏览者清楚了解自己所处的位置等。只有明确的导航才能真正发挥“引导”的作用,引导浏览者找到所需的信息。(2)可理解性:导航对于浏览者应该是易于理解的。在表达形式上,要使用清楚简洁的按钮、图片或文本,避免使用无效字句。(3)完整性:要求网店所提供的导航具体、完整,从而可以让浏览者获得整个网店范围内的领域性导航,同时涉及网店中全部的信息及其关系。(4)咨询性:导航应该能给买家提供咨询信息,它如同一个问询处、咨询部,当浏览者有需要的时候,能为使用者提供导航。(5)易用性:导航系统应该容易进入,同时也要容易退出当前页面,或让使用者以简单的方式跳转到想要去的页面。

只有考虑到以上这些导航设计的要求,才能保证导航策略的有效,进而发挥导航策略应有的作用。3.1.2 导航的基础要素

全局导航也称为主导航,是出现在网店每一个页面上的一组通用导航元素,以一致的外观出现在网店的每一个页面,扮演着对浏览者最基本的访问进行方向性指引的角色。

对于大型电子商务网店来说,导航还应当包括搜索与购买两大要素,以方便浏览者在任意页面均能进行产品搜索与购物,如图3-2展示的是网店的全局导航。图3-2 网店的全局导航指点迷津一般网店的全局导航包括三个基本设计要素。店铺名称:网店顶部的店招或店铺名称必须添加返回首页的超链接。返回首页:每个全局导航左边的位置应该出现返回首页的提示及超链接。全站基础栏目(一级栏目)。3.1.3 导航设计注意要点

在设计导航时可以采用文本链接方式,一些网店为了表现网店的独特风格,在导航条上使用Flash或图片等作为导航。以下是一些常见的导航设计注意事项。

导航使用的简单性。导航的使用必须尽可能简单,避免使用下拉或弹出式菜单导航,如果一定要用,那么菜单的层次不要超过两层。

不要采用“很酷”的表现技巧。如把导航藏起来,只有当鼠标停留在相应位置时才会出现,这样虽然看起来很酷,但是浏览者更喜欢可以直接看到的选择。

注意超链接颜色与单纯叙述文字的颜色呈现。

测试所有的超链接与导航按钮的真实可行性。网店制作完成发布后,第一件该做的事,是逐一测试每一页的超链接与每一个导航按钮的真实可行性,彻底检验有没有失败的超链接。

导航内容必须清晰。导航的目录或主题种类必须清晰,不要让浏览者困惑,而且如果有需要突出主要页面的区域,则应该与一般页面在视觉上有所区别。

准确的导航文字描述。买家在点击导航链接前对他们所找的东西有一个大概的了解,超链接上的文字必须能准确描述超链接所指向的页面内容。3.2 页面中的文字设计

文字是人类重要的信息载体和交流工具。虽然文字不如图片直观、形象,但是却能准确地表达信息的内容和含义。在确定页面的版面布局后,还需要确定文本的样式,如字体、字号和颜色等,还可以将文字图形化。3.2.1 文字的字体、字号、行距

页面中中文默认的标准字体是“宋体”,英文是“Times New Roman”。如果在页面中没有设置任何字体,在浏览器中将以这两种字体显示。

字号大小可以使用磅(point)或像素(pixel)来确定。一般页面常用的字号大小为12磅左右。较大的字体可用于标题或其他需要强调的地方,小一些的字体可以用于页脚和辅助信息。需要注意的是,小字号字体容易产生整体感和精致感,但可读性较差。

无论选择什么字体,都要考虑到页面的总体设计和浏览者的需要。在同一页面中,字体种类少,版面雅致,有稳重感;字体种类多,则版面活跃,丰富多彩。关键是如何根据页面内容来掌握这个比例关系。

行距的变化也会对文字的可读性产生很大影响,一般情况下,接近字体尺寸的行距设置比较适合正文,如图3-3所示的文字字体、字号和行距都比较合适。3.2.2 文字的颜色

使用不同颜色的文字可以使想要强调的部分更加引人注目,但应该注意的是,对于文字的颜色,只可少量运用,如果什么都想强调,其实是什么都没有强调。况且,在一个页面上运用过多的颜色,会影响浏览者阅读页面内容,除非有特殊的设计目的。

颜色的运用除了能够起到强调整体文字中特殊部分的作用之外,对于整个文案的情感表达也会产生影响。图3-3 文字的字号行距

另外需要注意的是文字颜色的对比度,它包括明度上的对比、纯度上的对比,以及冷暖的对比。这些不仅对文字的可读性产生作用,更重要的是,可以通过对颜色的运用实现想要的设计效果、设计情感和设计思想,如图3-4所示是搭配合理的文字颜色,重点突出。图3-4 搭配合理的文字颜色3.2.3 文字的图形化

所谓文字的图形化,即把文字作为图形元素来表现,同时又强化了原有的功能。作为页面设计者,既可以按照常规的方式来设置字体,也可以对字体进行艺术化的设计。无论怎样,都应该把如何更出色地实现自己的设计目标作为第一原则。

将文字图形化,以更富创意的形式表达出深层的设计思想,以此克服页面的单调与平淡,从而打动人心,如图3-5所示为图形化的文字。图3-5 图形化的文字3.2.4 让文字易读

文字是帮助买家获得网店信息的重要手段,因而文字的易读性和易辨认性是设计网店页面时的重点。

正确的文字和配色方案是好的视觉设计的基础。网店上的文字受屏幕分辨率和浏览器的限制,但是仍有一些通用的准则:文字必须清晰可读,大小合适,文字的颜色和背景色有较为强烈的对比度,文字周围的设计元素不能对文字造成干扰,如图3-6所示的页面,其文本采用表格排列,更容易阅读。图3-6 文字易读指点迷津在进行网店的页面文字排版时要做到以下几点:避免字体过于黯淡导致阅读困难。字体色与背景色对比明显。字体颜色不要太杂。有链接的字体要有所提示,最好采用默认链接样式。标题和正文所用的文字大小有所区别。英文和数字应选用与中文字体搭配在一起较和谐的字体。

试读结束[说明:试读内容隐藏了图片]

下载完整电子书

若在网站上没有找合适的书籍,可联系网站客服获取,各类电子版图书资料皆有。

客服微信:xzh432

登入/注册
卧槽~你还有脸回来
没有账号? 忘记密码?