电子商务网站设计分析系列之一：首页导航

世界著名的网页易用性专家尼尔森曾经有报告显示，首屏以上的关注度为80.3%，首屏以下的关注度仅有19.7%。这两个数据足以表明，首屏对每一个需要转化率的网站都很重要，尤其是电商网站。

创新互联建站是一家专注于成都网站设计、做网站与策划设计,尚志网站建设哪家好?创新互联建站做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:尚志等地区。尚志做网站价格咨询:13518219792

相关阅读：电子商务网站设计分析系列之一：首页导航

在电子商务网站中，用户最急切需要获得的不外乎两点：吸引人的商品或店铺，以及网站能够给予他的信任感。信任需要积累，因此，各类宣传推广信息就成了电商首屏展示的不二之选。

一个能引人驻足停留的首屏一定会为网站带来更多的客户和利益，笔者会告诉你如何策划设计出一个好看好用的电商首屏。

1.确定可视范围

 根据统计报告显示，2014年使用率最高的Internet用户屏幕分辨率为1366px*768px。以此为例，浏览器边框宽度普遍在21左右，所以网页首屏宽度在无干扰因素的情况下可以确定为1345；而屏幕总高度为768，除去任务栏高度40、店铺页头106、浏览器（工具栏、边框等）160和位置工具栏30，初步估算首屏高度控制在432较为合适。因此我们可以得出，最符合时下趋势的首屏设计宽高基本范围是1345*432，重要的内容可以尽量放在这个区间里。

2.展示吸引用户的信息

 首页的首屏位置在整个网站中都称得上寸土寸金，正因为如此，此处展示的文字应该短小精悍，尽可能用最少的篇幅就把信息表达清楚。标题性文字更应该把商家的商业诉求清晰直接的表达出来，在这类文字的策划上需注意符合网站的整体风格。

一号店的banner文案就能很好的抓住浏览者的眼球，有趣的标题文字加上“0元领”这样的醒目的字眼，让用户充满了好奇心。

Gap的首屏虽然没有将广告的下半部分很完整的展现出来，但是这似乎并没有影响到用户想要继续点击的心情，真正吸引用户的信息点都被整齐的陈列在首屏中，供用户逐一了解。

3.视觉焦点要显眼

大多数用户的浏览习惯是走马观花式的，以如今国内电商网站普遍的布局来看，用户在第一屏中的视觉焦点基本上以Banner和导航为主。因此，其中所表现的无论是文字还是大图，都应该让用户一眼看清内容，减少其思考时间。设计师在设计时可以用“去色”的方法来检验实际效果。

去色前：

去色后：

易迅首屏算是个反面教材。首屏原图会令人觉得太过繁复，所以视觉焦点自然会分散开来。

通过去色前后的对比图我们可以发现，去色后，导航上的文字内容会变得不够清晰，因此我们可以得出，色彩是锁定用户视觉焦点的主要问题。

去色前：

去色后：

唯品会首屏去色后的效果就截然不同了。去色后，Banner上的内容仍然可以很容易的辨认出来，文字和背景都很清晰。

5、使用合适的文案

为了迎合用户在导航上只愿意停留短短的几秒钟，导航文字内容的可用性就变得至关重要。文字标签是传达信息最有力的途径，因此，导航中出现的文案应该避免使用一些用户很难理解的词汇，比如专业术语、缩写和个性化语言等。其中最常见的就是缩写，很多电商网站会由于排版美观，或是文字长度上的限制而选用缩写，从而牺牲用户体验，增加了用户对导航的理解难度。

在电商网站导航中，文案的首要任务就是让每个用户都能准确快速的理解相关信息。而作为设计师，我们理所当然的花费许多时间一味的专注于视觉美学，这是几乎所有设计师的通病，但这一通病在导航设计中却成了致命伤。清晰明了的表达是美观的前提，任何交互项目的最佳状态就是实现透明化。

6、清晰的视觉体验

从视觉角度上来说，用户只用几秒钟的时间扫视网站，所以导航的视觉设计必须符合逻辑，用色彩给用户提供一种指引，成为用户点击的向导。可点击的部分尽可能的明显一些，减少用户对其的猜测。在色彩的使用上应避免大片亮色，这会间接地降低导航文字的可识别度，与此同时，电商网站面向的是所有的消费者，因此，在导航与导航文字内容的色彩搭配上也要考虑到一些色彩障碍者。

京东的网站在这一点上做的还是比较好的，每一个层级的导航颜色由深及浅，让用户有一种循序渐进的感觉。整个导航区域的色彩搭配也很恰当，无论鼠标悬停在任何地方，所在的位置都能反应出一个比较舒适的页面。

7、为用户提供反馈

当用户对导航中的某一个元素有了动作之后，导航项都应该对此做出相应的回馈，比如当用户在分类导航上悬停或是点击某些文字内容后，文字应该做出一些改变，可以是字体的大小、颜色的变化，或是任何其他合适的效果。关于这一点，国内的大部分电商网站都做的比较到位。

一号店的二级导航就有很恰当的反馈信息，一整个选中的板块都被不刺眼的色彩所填充了，让用户很清楚的知道自己目前所在的位置。而展开的三级导航选中后的颜色就与其原本标出的热门商品的字体颜色有些重复，比较容易混淆。

8、导航符合网站整体风格

导航与网站整体风格的搭配要区分为视觉和内容两个部分。在视觉上，大多数网站基本不会出现大问题，因为所有的设计师都懂得导航基本上占据了整个页面的主视觉这个道理，电商首页中只有导航既需要迎合网站的整体又同时主导着网站风格。从内容上来说，导航的内容与网站的点击量，甚至商品销量都有着密切的关系。一旦用户无法通过导航找到自己想要的商品，就意味着商家丢失了一位客户。而如果能在导航中推荐一些商品给用户，也许能促进网站商品的销售。

导航要符合网站整体的风格可以细节到每一个小细节，甚至于任何的线框字体。这样做的目的主要是减少用户的页面跳跃感，尽量避免用户因为页面跳转的原因而产生的思考和反应。同时，对网站的整体美观程度也有一定的好处。

9、利于搜索引擎优化

搜索引擎的优化是几乎所有初创电商都会选择的推广方式，而电商导航是电商网站最主要的入口，基于此，有很多栏目的导航并不利于搜索引擎的抓取。在内容的设置上，应该将主要内容一目了然的展现出来，这样的设计不仅利于用户查看，也让搜索引擎蜘蛛能顺着导航目录层层深入。所以，在导航栏中尽量使用文本，减少用户思考时间的同时利于搜索引擎的优化，按钮和图片会阻碍到搜索引擎的访问和抓取。

拍拍的导航相对于种类网站就显得特别简洁。主导航上只有几个主要的模块，既让用户能快速的了解到网站的主营项目，也实力利于搜索引擎的优化。

10、趋于专业化的导航

商业化和专业化对B2B电子商务网站尤为重要。时下有很多电商网站的导航看起来比较凌乱，在色调和布局上也过于幼稚，这样的导航会让用户对整个网站的风格基调产生截然不同的看法。如果电商网站需要体现出严肃简洁的特点，就应该尽量避免过多的运动效果。作为导航栏，比其他标题栏更高的高度，更大的加粗字体是个不错的选择，但一旦过度反而会看起来不够精致。

乐蜂网虽然是一个偏向女性化的网站，但单看导航还是比较专业的。没有过多的色彩，使用的颜色和字体也都趋于商务化，分类也尽可能的减少，这样的风格带给用户最直接的就是正规正统，能在一定程度上增加用户对网站的信任感。

总结：

笔者认为，电子商务网站的导航设计也不能一概而论，不同的网站类型有不同的设计侧重点。比如，亚马逊等综合类电商网站的商品数量众多，那么4000万商品和4000个商品的导航设计一定会有很大的区别。我们可以看到，淘宝由最初一级导航是按照用户人群区分，到如今，不仅扩大了搜索框，一级导航也以功能作为划分点。

而垂直类电商的用户对商品更有目标性，所以在导航的设计上往往需要按照自己的业务逻辑来进行科学分类索引，比如京东和一号店的商品种类划分。

还有一种类型就是由传统企业转型而来的电子商务，这类电商网站的营销通常以单个品牌为主，例如案例中的优衣库。由于分类和数量都很少，因此除了传统的科学分类索引以外，首页的单品推荐也对单个商品的营销非常有效。

电子商务网站的导航设计还是应该本着用户体验为佳的原则，既要将网站中的所有信息都在有限的导航栏中体现，又要为用户反馈出重要的帮助信息。