CSS、Flash、jQuery等网页技术解放了网站设计，既创造了卓越的用户界面，也可能导致体验糟糕。此外，“千篇一律”的电商模板扼杀了许多创意，使页面变得平淡无味。
为避免因设计混乱或过度实验而失效，电商所有者需在前沿技术与实用性、美学间取得平衡。本期“网页设计技巧”将概述电商网站导航设计的五大法则。
网站导航视频导览
法则一：让导航易于理解和操作
顾客不希望被导航困扰。尽管某些创新功能（如手势识别）令人惊艳，但作为导航可能令人沮丧并阻碍销售。
请确保导航清晰易懂，使用明确的标签（如“男鞋”、“女鞋”），并将其置于顶部、侧边等可预测位置。
合规示例：
- Skooba Design：使用“笔记本电脑包”等具体标签
- Bonobos：商店部分导航清晰明确
- Gateway：顶部导航配合产品图片，直观易懂
- 滴油般的脂肪：正前方导航适配少量产品
- Crucial：三种清晰导航形式助力快速查找内存或闪存卡
法则二：确保导航可访问性
为残障人士提供无障碍导航既是商业需求也是社会责任。应开发适配屏幕阅读器、盲文显示器等辅助设备的系统，参考W3C《残障人士如何使用网络》指南。
建议在页面顶部设置基于文本的导航和跳过链接（可通过CSS隐藏）。
合规示例：
- Productive Alternatives：无障碍性极佳
- Zahradka Art & Illustration：兼顾无障碍与视觉趣味
- Crawleys Furniture：顶部采用简单文本导航
- Scruffs Hardwear：对屏幕阅读器友好
法则三：明确当前位置
用户可能通过搜索引擎直接进入任意页面，因此需通过视觉和文本线索（如面包屑导航）告知其当前位置。
合规示例：
- Eagle Coffee Company：左侧导航高亮当前页+清晰面包屑
- Tokidoki：粉色字体高亮当前页+良好面包屑路径
- PEZ Factory Store：橙色面包屑+左侧导航全大写显示当前页
- Cabela’s：面包屑中包含“您在此处”提示
- Newegg：更改当前页背景色/字体色+无障碍面包屑
规则四：大网站使用分层和筛选功能
若产品类别、品牌或数量较多，应添加导航层级和筛选条件（如品牌、价格、颜色等），让用户原地完成筛选。
合规示例：
- PetsRight：分层导航清晰易懂
- Ramco Worldwide：提供价格筛选
- MiniRepublic：支持多维度属性导航
- Wlanmall：包含频率、系列等属性筛选
法则五：保留搜索功能
每个电商网站都应在所有页面添加搜索框，这也是重要的导航形式。
合规示例：
- Amie Street：全站任意页面可搜索音乐
- Knife Center：顶部设有搜索功能
- Art.com：搜索框位于文本导航左侧