企业形象网站建设解决方案   |   集团公司网站建设解决方案   |    协会门户网站建设解决方案
您所在位置:首页 > 建站知识

网站设计

Website development

你知晓这些导航设计的原则吗?

发布时间:2016-05-23 10:16:56

TAGS:网站设计

为客户设计导航是每一位网站和app设计者的首要职责。毕竟客户一旦迷路,再炫酷的动效、再有趣的内容也都毫无意义。即使我们的网站中有搜索功能,也不能把搜索框当成客户导航的唯一工具。大多设计者已意识到这一点,并在自己的网站中设计了导航菜单。
HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

定义:导航菜单是网站主要内容或特征的列表,通常由一组链接或icon组成,并在视觉样式上与网站其他内容有显著差异。HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

导航菜单包含但不限于导航条和汉堡菜单。HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

导航菜单的重要性已经不言而喻,我们平时遇到的每一个网站或软件中都有它的存在;但并不是所有的导航菜单都设计得准确无误。我们也常发现客户因导航设计不当而感到困惑、难以操作,或者连导航在哪儿都不知晓。HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

下面的设计原则,可以避免导航菜单出错。HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

导航菜单要清晰可见HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

1. 大屏中的导航菜单不要太小。假如空间足够,不要将菜单隐藏。HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

2. 把导航菜单放在客户熟悉的位置。通常客户会期望在浏览过的网站或app中的类似位置(譬如网站顶部、左侧等)中找到他们想要的UI元素。HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

3. 让菜单链接看起来有互动感。假如菜单选项看起来不可点击,客户未必能认出它是导航。假如我们的导航设计融入太重的图形、或太过追崇扁平化设计风格,会使它们看起来更像是装饰性图片或标题。HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

4. 确保导航菜单拥有足够的视觉吸引力。很多导航菜单的周围会留有一点空白区域以从视觉上突显它。但当网站UI元素比较拥挤时,假如导航菜单视觉比重太弱就会在各色图形、促销广告、标题里迷失,不易被客户识别。HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

5. 菜单选项的颜色要与网站背景色对比鲜明。令人惊讶的是,有非常多的设计师都忽视了“对比原则”。HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

即便是熟悉以上规则的设计师设计出来的导航菜单也有或许会被客户忽视,因为他们很难客观地评价自己的作品——尤其是碰上比较主观的设计标准时,例如哪个UI元素应该拥有更明显的视觉效果。假如你知晓你的导航菜单在哪儿,自然能一看看到它,因为这是你设计的。因此,让客户参与验证非常必要。HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

告诉客户其当前位置HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

6. 告诉客户当前所处什么位置。客户成功导航的一个基本的标准是他自己能发现:“我在哪儿?” 通常被选中的菜单选项在视觉上与其他选项是有差异的,这可以帮助客户明确自己的当前所在位置(或者通过面包屑导航定位)。假如没有让客户明确所在位置、导致他们迷路,那么就犯了特马资料最准群网站设计基本的错误。讽刺的是客户不总是通过首页到达目的页,所以导航菜单对于客户来说意义重大。HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

导航菜单要与客户任务协调一致HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

7. 使用易懂的链接标签。清楚客户要找的是什么,使用相似且相关的类别标签。要记住导航菜单并不是拿自造词和行话去忽悠人的。请使用可以准确描述网站内容和特征的术语。HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

8. 链接标签要容易阅读。减少客户阅读菜单具体内容的时间,如使用左对齐的垂直菜单、或将关键词前置。HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

9. 对于大型网站来说,让客户通过导航菜单预览子级内容。对于喜欢挖掘网站各层级内容的典型客户来说,下拉菜单可以让客户快速浏览、节省时间。HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

10. 为息息相关的内容提供本地导航。假如客户喜欢对一些同类商品频繁对比、或在某个场景里完成多个任务,可以将这些临近页面做成本地导航菜单,这样客户就不必需在复杂的路径里“上蹿下跳”了。HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

11. 利用视觉的传达力。图像、颜色等元素可以帮助客户理解菜单选项,但也要确保这些图形起的是积极作用(至少不能让操作变得更难)。HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

导航菜单要易于操作HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

12. 菜单选项要够大、方便点击。假如导航菜单的选项过小或者彼此靠得太近,会给移动客户造成很大的困扰;大屏网站中导航菜单选项假如也设计成这样,那就会很难操作。HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

13. 确保下拉菜单不会太大或太小。鼠标悬停触发的下拉菜单呈现时间太过短暂会给客户带来挫败感,因为客户还没来得及点击菜单里的某个链接的时候,下拉菜单就消失了。另外,太长的垂直导航菜单也不利于底部选项的点击,除非滚动屏幕。后,鼠标悬停触发的下拉菜单不能太宽,否则会让客户误以为是新页面、并且好奇为什么自己还没点击就出现了新的“页面”?HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

14. 当页面内容很长时,可以考虑悬浮吸顶(或固底)菜单。已浏览到页面底部的客户要想回到首屏必需一次又一次地回滚鼠标(移动端则是不断向上划动屏幕);假如导航可以悬浮吸顶,客户就可以很方便地进行其他菜单选项的切换。这很恰好小屏幕场景。HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

15. 尽或许缩短导航菜单常用操作的物理距离。下拉菜单内容比较多时,将客户常点击的链接放到离鼠标悬停的选项近的地方可以减少鼠标移动的距离(移动端也类似)。近一些app中流行的饼状菜单则将所有菜单选项成圆(有的是半圆)状围绕在菜单周围,这样每一个选项链接的物理点击距离全是短的。HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

用新颖有趣的交互方式去惊艳客户?HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

实际上……答案是“不”。HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

炫酷的效果并非我们的首要目标。对于客户来说,能打动他们的还是网站的精彩内容、以及熟悉且操作简单的导航菜单。HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

当然,有的时候一些创新型菜单的确可以提升客户体验(下拉菜单就是一个例子)。在某些场景下,由于新技术的独特需求,这15条原则也未必使用——举个例子,第4条 “确保导航菜单拥有足够的视觉吸引力” 就不适用于语音识别。但大多数情况下,这15条全是我们必需考虑的指导原则,因为它们会大大提高导航菜单的易用性。HvU上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

原创不易,未经授权,严禁转载

原文地址:/i,72,6485,0.html

客户评价

更多+
  • 感谢特马资料qq群,系统提前完成,在整个项目周期内,特马资料qq群对待我们并不像是对待客户,更像是朋友一样,每一次,都能以专业的角度向我们提出更合理、更有效的解决方案,并快速、细致地完成我们的每一个需求,再次感谢以至诚之心做事的特马资料qq群团队。

    潘涛

  • 我是东方龙马集团,在云智家做了2个企业官网,服务态度超级好。假如想做网站,选择他家一定不后悔。性价比高,服务态度好。值得你的信赖!

    谭娇

  • 技术好,设计精良,操作便利,很专业!配套的服务和后续的服务都很好,网站封面堪称精品,运行方便,后台操作的简单。技术还会耐心教我,很好的特马资料qq群(上海)科技有限公司,建站很不错的。

    陈曦

  • 不错,价格比较合适,要点是响应速度蛮快,有什么难题都会马上给你解决,公司很满意,因为他们全是针对每个项目建了相应的讨论组,有难题可以再里面提出,人员分工到位,解决难题很及时。

    张经理

联系方式

工作时间:10:00-19:00
咨询电话:010-64758810
客服邮箱:net@cnlink.cc

服务领域

  • 网站定制开发
  • PC网站设计
  • 域名邮箱
  • 网站维护
  • 网站二次开发
  • 响应式网站设计
  • 虚拟主机
  • 网站优化
  • 网站设计开发
  • 创意设计
  • 云主机
  • 项目合作

合作伙伴

All Rights Reserved.©2010-2016 特马QQ群|资料网站京公网安备 110105019435 京ICP备123124426号
本网站设计已受版权保护,任何公司及个人不得复制,违者将依法追究责任,特此声明。法律顾问:上海市辉瑞律师事务所。
嘿,我来帮您!