很多上海企业做网站时，抽屉导航的设计很随意——汉堡菜单找不到、打开后内容混乱堆砌、关不掉、和网站风格脱节、某些客户用不了……这些问题让移动端客户的导航体验大打折扣。实际上，抽屉导航设计需要遵循五大核心原则。本文分享抽屉导航设计的五大原则，帮助企业提升移动端导航体验。
原则一：便捷性原则，不要让客户找不到或关不掉
抽屉导航的核心目标是"让客户便捷地访问网站导航"，所以设计要以便捷性为原则。触发按钮要明显（右上角、图标清晰、颜色对比明显、可点击区域至少44px），客户容易找到和点击；抽屉面板滑出要流畅（0.2-0.3秒动画），客户不需要等待；关闭方式要便捷（点击遮罩、关闭按钮明显、汉堡变关闭），客户随时能关闭。不要触发按钮不明显（客户找不到）、滑出动画太慢（客户等得不耐烦）、关闭方式不便捷（客户关不掉），那样抽屉导航就失去了便捷性。
原则二：层级性原则，不要混乱堆砌
抽屉导航的内容要以层级性为原则——主导航栏目清晰（5-8个，大字号16-18px，行高44-56px），有子分类的栏目可展开（箭头标识，展开后缩进显示），当前位置高亮，层级不超过3级，重要栏目优先放在前面。不要所有内容混在一起（没有层级，子分类和主导航混排）、子分类全部展开（抽屉太长）、层级超过3级（太深，切换麻烦）、重要栏目放在后面（客户需要滚动才能看到）。层级性原则的抽屉导航能让客户快速理解网站的内容结构，准确找到目标栏目。
原则三：非干扰性原则，不要遮挡整个屏幕或无法关闭
抽屉导航是辅助导航元素，不是页面的主体，设计要遵循非干扰性原则——抽屉面板宽度占屏幕的70%-85%（不要几乎全屏，留出遮罩层空间），后面有半透明遮罩层（突出抽屉，同时可点击关闭），关闭方式便捷（点击遮罩、关闭按钮），客户随时能关闭回到页面浏览。不要抽屉几乎全屏（遮挡整个页面，客户看不到后面的内容）、没有遮罩层（抽屉和页面混在一起，客户不知道怎么关闭）、关闭方式不便捷（客户关不掉，被困在抽屉里）。
原则四：一致性原则，不要和网站风格脱节
抽屉导航的设计要和网站的整体设计风格保持一致——同样的配色（抽屉背景色用网站的中性色或主题色，文字颜色和网站正文一致，高亮颜色用网站的主题色）、同样的字体（导航文字用网站的正文字体或标题字体）、同样的圆角风格（抽屉面板的圆角和网站其他元素一致）、同样的图标风格（汉堡菜单图标、关闭按钮图标、展开箭头的风格和网站其他图标一致）、同样的动画风格（滑出/收回动画和网站其他交互动画风格一致）。不要抽屉导航用一种完全不同的风格，客户会觉得突兀，也降低了网站的专业度。
原则五：可访问性原则，不要让某些客户用不了
抽屉导航的设计要以可访问性为原则——确保不同能力的客户都能使用抽屉导航。键盘可访问（Tab键聚焦到汉堡菜单按钮，Enter或空格键打开，Esc键关闭）；屏幕阅读器可读（用正确的ARIA属性，如aria-label、aria-expanded、role="dialog"）；文字足够大（主导航16-18px，子分类14-16px，行高44-56px）；颜色不依赖（不要只用颜色传达信息，同时用文字加粗或左侧标识线说明）；触摸目标足够大（导航链接和按钮的触摸目标至少44x44px）。做网站设计的过程中我们发现，可访问性是抽屉导航设计中最容易被忽略的原则，但它能确保所有客户都能顺畅使用导航。
抽屉导航设计的五大原则包括：便捷性原则（不让客户找不到或关不掉，触发按钮明显、滑出流畅、关闭便捷）、层级性原则（不混乱堆砌，主导航清晰、子分类可展开、当前高亮、层级不超过3级）、非干扰性原则（不遮挡整个屏幕或无法关闭，宽度70%-85%、有遮罩层、关闭便捷）、一致性原则（不和网站风格脱节，配色、字体、圆角、图标、动画统一）、可访问性原则（不让某些客户用不了，键盘可访问、屏幕阅读器可读、文字足够大、颜色不依赖、触摸目标足够大）。对于企业做网站来说，抽屉导航不是简单放一个汉堡菜单，而是需要遵循这五大原则系统设计。盐城鹤翔网络建议上海企业对照以上五大原则自查网站的抽屉导航，让每一个移动端客户都能便捷、顺畅地使用网站导航。
|
