产品的病用户的痛：谈谈购物网站导航栏设计的“小心思”

导航的外貌：

• 导航，它的表达方式。它如同一个超市地面和货架上的标语。 超市是立体的“网”。而网站导航是平面的“锁链”。二者有立体和线性的不同表现和感受，但却有相同的功能 — 指引用户的方向。
• 导航，它的字如其人。身处现实世界，我得知自己具体在哪儿，知道怎么去安全的地方 — 这是“安全感”的保障。
• 导航，它的简单清晰。导航的简单清晰带来的是安全感，带来的是信任，而信任带来了难得的消费。

导航的内在：

导航的特点我想了很多，比如简单、突出、美观等。但我想，导航不是艺术品，回归到它最初的价值，导航 两个最重要的内在特点：

• “明显”。明显才能突出“线索”。不然导航就成了可有可无，甚至是“噪声”。
• “准确”。用户急急忙忙的来，更可能急急忙忙的走，因此需要准确简洁的提醒和导航。

导航的作用：

• 首先，告诉用户这里有什么。 导航让我知道这里有什么，而不用花费额外力气去多想。
• 其次，告诉我们如何使用网站。 上购物网站的用户的目的性很强，购买某一种物品，导航的设计好坏决定了用户购买你而不是其他网站的东西需要跨过多大的门槛。
• 最后，它给了我们对于网站建造者的信心。 导航的好坏很大程度虎让我对网站拥有者产生信任或怀疑。好的设计无疑是加分项。为用户省时间，恰恰是购物网站建立的目的吧。

那么说了这么多，但是具体怎么操作呢?我想做一个网站，我该如何设计一个好的导航呢?

Web导航的那些设计小习惯

十几年的网页设计走过了漫长的道路，引用《Don’t make me think》一书中的说法，网站的那些导航经历了以下几个阶段：

• 1995—古生代 网站由程序员设计，老式的HTML链接和按钮
• 2000—西部蛮荒时代 web上的各种限制，字体丑陋，下划线丑陋。难以辨别什么地方可以点击。
• 2005—黄金时代 CSS为我们提供了优雅的解决方案：只用颜色来表示可点击的链接。

所以网站的导航设计要注意以下几点：( 4 个元素)

1. 站点的名称(腾讯网，天猫，京东…)，我知道自己当前在哪儿，需要在每个页面看到站点名称或logo(通常在左上角)。
2. 实用工具(购物车…)，帮助我们使用站点。
3. 搜索框
4. 栏目(当前具体在哪儿)，主导航条。
5. 导航有统一格式。用户进入你的网站只需要学习一次就会永久使用了。

那么，一下网站导航的好坏如何测试或者评价呢?

网站导航的设计好不好? 想象一下突然给你一个陌生的页面，看这个网页，自己问问自己：“我从这个网页中知道了下面这些内容了么?”：

• 这是什么网站?(站点id和logo)
• 我在哪个网页上?(站点的面包屑或子一级页面名称)
• 这个网站主要栏目是什么?(标签)
• 我在导航系统的什么位置?(面包屑或标签想要的按钮突出显示)
• 我怎么搜索?我怎么去我想去的地方?(搜索框)

那如何测试一下我设计的导航栏如何呢?

1. “摘掉眼镜”。想像一下近视眼摘掉眼镜的痛苦，但是面对像素，这也是一个美丽的世界，细节被屏蔽掉了，完整的框架天然的呈现在你面前。 “模糊的视线”让人能更好地发现自己设计的导航产品的不足。好的导航一目了然，清楚无误地呈现，依赖整体外观，而不是看细节。
2. “拿在手里”。你可以打印出你设计的网页导航，换个与平时观察角度不同的方向，观察并圈出导航，看看能否快速定位地方。

最后呢，想说一说。 一个购物网站的最伟大之处在于第一次的打开浏览就给了新用户一种难得的“信任感”。这种信任感的来源于产品设计的专业与细致。网站的一点小出错，不匹配，用户的感到挫折，信任感可能会降低唉。

精心雕琢的产品总是让人爱不释手，创意把握的那么细致准确，有的放矢志的创新做到了准确完美。

我自己写过策划和计划书，做过产品，写过网站，设计过游戏，正因如此，我才明白一个好的产品背后的艰辛和不易。一次完美购物的体验其实是多环节共同努力的结果，产品人的不懈追求，从脑海中的创意到纸上的图画勾勒、到绘制低保真原型的思考、到高保值原型的张弛有力、到研发的艰难、到产品的推广、物流的精心磨合和客服的细致设计等许多环节做到了全面开花。系统的全面完善是不容易的，购物网站的产品人用行动证明了自己的本事和才干，成全了用户的完美购物体验，打造了很多款融入生活的数字化产品，也成就了今天的互联网繁荣的中国。

我不善于写深奥的观点，简单明了直接说点干货，我想是所有产品童鞋和研发童鞋最期待的文章。希望大家喜欢，欢迎批评指正哦!

注：相关网站建设技巧阅读请移步到建站教程频道。