揭秘我国医药电商巨擘！全方位攻略：如何打造专业电商网站导航布局

亲手教你打造电商网站导航布局

双11即将来临，大家辛苦攒了一年的积蓄终于可以尽情购物了。然而，广大设计师们还在为网站优化默默努力，尤其是新入门的设计师，面对电商网站导航设计可能会感到头疼。别担心，这都不是问题。今天，我要分享的就是如何做好电商网站导航设计，一般人我不告诉他。

随着互联网的不断发展，通过电子商务网站进行商品交易越来越频繁。面对庞大的信息量，访客可能会感到迷茫。因此，优秀的导航设计能够提高网站的易用性，对实现电子商务网站的高效运作具有重要意义。

此外，电子商务网站的首页导航设计必须以用户体验为首要原则，既要将网站所有信息在有限的导航栏中体现，又要为用户提供重要的帮助信息。网站因其独特的重要性和不可替代性，在电子商务网站设计中的地位日益凸显。

1、符合网站内容结构

在设计电商网站导航之前，应先全面了解网站内容，并进行归类。需要注意的是，不必在导航中一一展示所有板块。电商网站通常有两个导航：网站头部的总导航和侧边的分类导航。总导航通常比较笼统地展示网站商品，而分类导航则比较详细。过多的总导航内容在体验和视觉上都会显得冗余。以下是以当当网为例的案例，其总导航分类显得较为复杂琐碎。

另一方面，导航中显示的内容应与网站内容紧密相关，这体现了导航与内容的匹配度。这其中包括导航中或导航周围的广告。正如当当网案例所示，导航周边融入一些广告无可厚非，恰当运用不仅不会引起用户反感，反而能提升用户满意度。但需要注意的是，应尽量避免与本站内容无关、广告成分过于明显的广告内容。过量的无关内容会干扰用户购物体验。

2、结合网站业务目标

首页导航是网站当前情况的缩影，用户通过导航可以了解网站销售哪些商品。因此，导航有必要根据网站主营商品的变更或销量变化进行调整，确保用户看到的导航始终与网站内容和时下热门贴合。例如，优设网的顶部导航选择了最实用的设计师网址导航和大牛云集的设计讲座，强烈推荐给大家。

在电商网站运营过程中，许多问题会逐渐显现，网站改版也是无法避免的过程之一。但在改版之前，应先列出所有问题，思考这些改动是否真正解决问题。

改版前：

改版后：

设计师在不同项目的设计过程中，过程基本相同，但关键在于每次网站设计都会根据客户不同的业务需求产生不同的设计目标。一旦确定目标，就要时刻提醒自己，无论设计多么花哨或简单，都必须完整地体现这一目标。唯品会在目标体现方面较为明显，将主营商品栏目种类和近期活动以最清晰的方式呈现，有效减少用户思考时间，让用户在最短时间内做出点击决策。

3、遵从用户使用习惯

根据用户体验和感受设计网站是必然的。但很多设计师会用周围同事的意见代替大部分用户的意见，这是不可取的。在导航设计时，设计师应将使用对象视为新用户或没有耐心的用户，尤其是电商网站，要尽快满足用户需求，尽量降低导航的学习成本。例如，鼠标悬停的分类打开方式可以很大程度降低用户的学习成本。

用户在页面停留的时间有限，因此导航必须一目了然，让用户产生依赖感。此外，当网站决定改版时，导航尽量不要做很大改变，因为导航是网站中比较重要的组成部分，也是用户相对依赖的模块。一旦导航发生很大变化，会让用户产生陌生感和距离感。新技术只用在无关紧要的地方。

关于用户体验，这里还有一个小细节可以分享。当用户的鼠标从一级导航移动到二级导航的瞬间，有时会因为移动角度和时间上的偏差，无意悬停在下面的一级分类中。虽然这只是一个小细节，但会让一些不耐心的用户感到烦躁。根据我们的初步调查，目前市面上主流的电商网站在这方面做得比较合格。

另外，亚马逊的网站过于“简洁”，导航的底色与网页底色、字体与网页字体都过于相近，这会在查看的某一瞬间造成用户视觉混淆。

4、避免重复的分类

上文提到，在设计导航之前，首先要全面了解网站内容，并进行归类。首页导航的作用就是将这些板块进行详细分类。在明确导航目的和重要性后，将类似的板块组合在一起，形成主导航。主导航的左下或右下方会有一个较为全面完整的分类导航，我们称之为局部导航。在一些知名电商网站中，局部导航的使用率可能高于主导航。这两者之间存在着微妙的递进关系，要尽量避免内容重复。

无论是文字还是图片，重复性的内容都容易让用户产生厌烦感。以天猫为例，“医药保健”和“医药馆”在字意上相近，点击后也进入了同一个页面，这样的重复性内容会明显降低有针对性需求用户的购物体验。

无论文字还是图像，重复的内容会迅速让用户感到疲惫。例如，在天猫的案例中，“医药保健”和“医药馆”在意义上非常接近，点击后确实进入了同一页面，这种重复内容会明显降低具有针对性需求的用户的购物体验。

5、运用恰当的文案

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

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

6、清晰的视觉体验

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

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

7、为用户提供反馈

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

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

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

导航与网站整体风格的搭配应分为视觉和内容两个部分。

在视觉上，大多数网站基本不会出现大问题，因为所有的设计师都明白导航基本上占据了整个页面的主视觉这个道理，电商首页中只有导航既需要迎合网站的整体风格，又同时主导着网站风格。

从内容上来说，导航的内容与网站的点击量，甚至商品销量都有着密切的关系。一旦用户无法通过导航找到自己想要的商品，就意味着商家丢失了一位客户。而如果能在导航中推荐一些商品给用户，也许能促进网站商品的销售。

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

9、利于搜索引擎优化

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

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

10、趋于专业化的导航

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

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

总结：

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

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

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

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

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

AnyForWeb Design

原文作者：AnyForWeb视觉设计

其他文章推荐：

网页设计风格如何把握呢？10招轻松搞定！！

网页设计中的分割法则（设计师必须掌握的网页栅格）

UI设计师必看：那些让页面更加出色的小细节

哪些大学开设电子商务专业

电子商务专业(B2B)是融合计算机科学、市场营销学、管理学、经济学、法学和现代物流于一体的新型交叉学科。培养掌握计算机信息技术、市场营销、国际贸易、管理、法律和现代物流的基本理论及基础知识，具有利用网络开展商务活动的能力和利用计算机信息技术、现代物流方法改善企业管理方法，提高企业管理水平能力的创新型复合型电子商务高级专门人才。

国内开设电子商务专业的院校总共有381所学校，名单如下：

序号院校名称

1北京交通大学

2中国农业大学

3北京师范大学

4北京外国语大学

5对外经济贸易大学

6首都经济贸易大学

7南开大学

8天津职业技术师范大学

9天津财经大学

10石家庄经济学院

11河北师范大学

12山西大学

13太原理工大学

14内蒙古大学

15内蒙古农业大学

16大连理工大学

17沈阳理工大学

18辽宁科技大学

19大连海事大学

20辽宁工业大学

21渤海大学

22长春工业大学

23黑龙江大学

24燕山大学

25佳木斯大学

26哈尔滨金融学院

27上海海事大学

28上海师范大学

29上海对外经贸大学

30苏州大学

31南京航空航天大学

32中国矿业大学(徐州)

33南京邮电大学

34南京林业大学

35南通大学

36南京农业大学

37南京财经大学

38浙江理工大学

39浙江师范大学

40湖州师范学院

41浙江工商大学

42合肥工业大学

43阜阳师范学院

44安徽财经大学

45巢湖学院

46铜陵学院

47华侨大学

48集美大学

49泉州师范学院

50华东交通大学

51江西理工大学

52江西农业大学

53江西财经大学

54中国海洋大学

55济南大学

56山东建筑大学

57山东师范大学

58临沂大学

59山东财经大学

60郑州轻工业学院

61河南科技大学

62河南大学

63洛阳师范学院

64河南财经政法大学

65武汉大学

66武汉工程大学

67武汉理工大学

68华中师范大学

69中南民族大学

70湘潭大学

71湖南大学

72湖南科技大学

73湖南农业大学

74湖南理工学院

75湖南人文科技学院

76南华大学

77暨南大学

78华南农业大学

79华南师范大学

80广东技术师范学院

81广东财经大学

82桂林电子科技大学

83玉林师范学院

84四川大学

85西南交通大学

86西南石油大学

87重庆邮电大学

88成都信息工程大学

89西华大学

90西昌学院

91四川师范大学

92四川外国语大学

93贵州大学

94贵州财经大学

95云南大学

96云南财经大学

97西北工业大学

98西安科技大学

99长安大学

100陕西师范大学

101渭南师范学院

102兰州交通大学

103西北民族大学

104青海民族大学

105石河子大学

106天津城建大学

107齐鲁医药学院

108青岛滨海学院

109黄淮学院

110贵阳学院

111徐州工程学院

112厦门理工学院

113江汉大学

114华北科技学院

115北京信息科技大学

116南京审计学院

117南昌工程学院

118五邑大学

119西安培华学院

120北京联合大学

121黑龙江东方学院

122山东交通学院

123湖南女子学院

124电子科技大学中山学院

125西安财经学院

126上海金融学院

127海南师范大学

128山东工商学院

129重庆工商大学

130河北经贸大学

131浙江树人学院

132广东外语外贸大学

133上海第二工业大学

134广东培正学院

135湖南涉外经济学院

136宁夏理工学院

137华南理工大学广州学院

138中山大学南方学院

139成都东软学院

140湖南师范大学树达学院

141吉首大学张家界学院

142西安欧亚学院

143西京学院

144南昌理工学院

145浙江大学宁波理工学院

146武汉大学珞珈学院

147沈阳工学院

148大连科技学院

149武汉科技大学城市学院

150武汉工程大学邮电与信息工程学院

151武汉工商学院

152湖北经济学院法商学院

153浙江师范大学行知学院

154浙江理工大学科技与艺术学院

155杭州师范大学钱江学院

156绍兴文理学院元培学院

157浙江财经大学东方学院

158宁夏大学新华学院

159河北大学工商学院

160河北经贸大学经济管理学院

161华东交通大学理工学院

162江西理工大学应用科学学院

163江西农业大学南昌商学院

164江西财经大学现代经济管理学院

165厦门大学嘉庚学院

166福建师范大学协和学院

167兰州商学院陇桥学院

168山西大学商务学院

169新疆农业大学科学技术学院

170辽宁科技大学信息技术学院

171燕山大学里仁学院

172太原科技大学华科学院

173长春工业大学人文信息学院

174安徽大学江淮学院

175山东科技大学泰山科技学院

176武汉学院

177桂林电子科技大学信息科技学院

178贵州财经大学商务学院

179贵州师范大学求是学院

180电子科技大学成都学院

181广州商学院

182四川传媒学院

183四川工商学院

184华中师范大学武汉传媒学院

185燕京理工学院

186中山大学新华学院

187南京中医药大学翰林学院

187南京中医药大学翰林学院

188南京财经大学红山学院

189山东财经大学东方学院

190上海财经大学浙江学院

191山东大学威海校区

192北京邮电大学

193北京林业大学

194首都师范大学

195中央财经大学

196北京物资学院

197华北电力大学（北京）

198天津大学

199天津商业大学

200河北大学

201河北科技大学

202石家庄铁道大学

203太原科技大学

204山西财经大学

205内蒙古工业大学

206内蒙古财经大学

207沈阳工业大学

208东北大学

209辽宁工程技术大学

210大连工业大学

211辽宁师范大学

212东北财经大学

213吉林财经大学

214哈尔滨工业大学

215哈尔滨工程大学

216哈尔滨商业大学

217上海理工大学

218东华大学

219上海财经大学

220南京大学

221东南大学

222南京理工大学

223南京工业大学

224河海大学

225江苏大学

226盐城工学院

227南京中医药大学

228杭州电子科技大学

229浙江农林大学

230杭州师范大学

231丽水学院

232安徽大学

233安徽理工大学

234淮北师范大学

235宿州学院

236淮南师范学院

237厦门大学

238福州大学

239闽江学院

240南昌大学

241南昌航空大学

242景德镇陶瓷学院

243江西师范大学

244山东大学

245山东科技大学

246青岛理工大学

247青岛农业大学

248聊城大学

249泰山学院

250郑州大学

251河南工业大学

252新乡医学院

253许昌学院

254商丘师范学院

255郑州航空工业管理学院

256武汉科技大学

257武汉纺织大学

258湖北工业大学

259中南财经政法大学

260湖北工程学院

261吉首大学

262中南大学

263长沙理工大学

264湖南师范大学

265衡阳师范学院

266湖南商学院

267中山大学

268华南理工大学

269广东药学院

270岭南师范学院

271深圳大学

272广西大学

273桂林理工大学

274广西民族大学

275重庆大学

276电子科技大学

277成都理工大学

278西南科技大学

279四川理工学院

280四川农业大学

281西南大学

282重庆师范大学

283西南财经大学

284贵州师范大学

285贵州民族大学

286云南农业大学

287西安交通大学

288西安电子科技大学

289西安石油大学

290西北农林科技大学

291陕西理工学院

292兰州大学

293兰州财经大学

294青海大学

295宁夏大学

296新疆财经大学

297长沙医学院

298辽宁对外经贸学院

299浙江万里学院

300吉林华桥外国语学院

301昌吉学院

302常州工学院

303青岛大学

304广州大学

305扬州大学

306吉林工商学院

307江西科技师范大学

308安阳工学院

309梧州学院

310北方民族大学

311河北金融学院

312浙江财经大学

313湖南财政经济学院

314广东金融学院

315广西财经学院

316湖北经济学院

317武汉商学院

318西安邮电大学

319武汉东湖学院

320汉口学院

321上海杉达学院

322广东工业大学

323湖南第一师范学院

324上海商学院

325安徽新华学院

326武昌理工学院

327湘潭大学兴湘学院

328广州大学华软软件学院

329广东外语外贸大学南国商学院

330湖南商学院北津学院

331湖南农业大学东方科技学院

332东南大学成贤学院

333西安翻译学院

334齐齐哈尔工程学院

335上海建桥学院

336北京师范大学珠海分校

337沈阳工业大学工程学院

338大连工业大学艺术与信息工程学院

339辽宁理工学院

340湖北工业大学工程技术学院

341武汉纺织大学外经贸学院

342湖北商贸学院

343文华学院

344杭州电子科技大学信息工程学院

345浙江农林大学暨阳学院

346湖州师范学院求真学院

347浙江工商大学杭州商学院

348哈尔滨广厦学院

349云南师范大学商学院

350河北科技大学理工学院

351南昌大学科学技术学院

352南昌航空大学科技学院

353景德镇陶瓷学院科技艺术学院

354江西师范大学科学技术学院

355阳光学院

356集美大学诚毅学院

357中原工学院信息商务学院

358兰州交通大学博文学院

359新疆大学科学技术学院

360新疆财经大学商务学院

361重庆师范大学涉外商贸学院

362石家庄经济学院华信学院

363大连艺术学院

364长春财经学院

365淮北师范大学信息学院

366大连东软信息学院

367广西大学行健文理学院

368桂林理工大学博文管理学院

369贵州大学科技学院

370天津商业大学宝德学院

371武汉理工大学华夏学院

372成都理工大学工程技术学院

373成都文理学院

374吉林大学珠海学院

375西北工业大学明德学院

376北京邮电大学世纪学院

377四川大学锦城学院

378南京邮电大学通达学院

379青岛工学院

380西南科技大学城市学院

381郑州升达经贸管理学院