网页设计中导航设计的几个指导原则

隐藏边栏
【淘尚网络:原创】编辑整理:Yolanda发布时间:2015-12-24 11:49:28
414
A+

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

下面的设计原则,可以避免导航菜单出错。

导航菜单要清晰可见

1.大屏中的导航菜单不要太小

如果空间足够,不要将菜单隐藏。

2.把导航菜单放在用户熟悉的位置

通常用户会希望在浏览过的网站或app中的类似位置(譬如网站顶部、左侧等)中找到他们想要的UI元素。

3. 让菜单链接看起来有互动感

如果菜单选项看起来不可点击,用户未必能认出它是导航。如果我们的导航设计融入太重的图形、或太过追崇扁平化设计风格,会使它们看起来更像是装饰性图片或标题。

4. 确保导航菜单拥有足够的视觉吸引力

很多导航菜单的周围会留有一点空白区域以从视觉上突显它。但当网站UI元素比较拥挤时,如果导航菜单视觉比重太弱就会在各色图形、促销广告、标题里迷失,不易被用户识别。

5. 菜单选项的颜色要与网站背景色对比鲜明

令人惊讶的是,有非常多的设计师都忽视了“对比原则”。即便是熟悉以上规则的设计师设计出来的导航菜单也有可能会被用户忽视,因为他们很难客观地评价自己的作品——尤其是碰上比较主观的设计标准时,比如哪个UI元素应该拥有更明显的视觉效果。如果你知道你的导航菜单在哪儿,自然能一看看到它,因为这是你设计的。因此,让用户参与验证十分必要。

告诉用户其当前位置

1. 告诉用户当前所处什么位置

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

导航菜单要与用户任务协调一致

1. 使用易懂的链接标签

清楚用户要找的是什么,使用相似且相关的类别标签。要记住导航菜单并不是拿自造词和行话去忽悠人的。请使用可以准确描述网站内容和特征的术语。

2. 链接标签要容易阅读

减少用户阅读菜单具体内容的时间,如使用左对齐的垂直菜单、或将关键词前置。

3.对于大型网站来说,让用户通过导航菜单预览子级内容

对于喜欢挖掘网站各层级内容的典型用户来说,下拉菜单可以让用户快速浏览、节省时间。

4. 为息息相关的内容提供本地导航

如果用户喜欢对一些同类商品频繁对比、或在某个场景里完成多个任务,可以将这些临近页面做成本地导航菜单,这样用户就不需要在复杂的路径里“上蹿下跳”了。

5. 利用视觉的传达力

图像、颜色等元素可以帮助用户理解菜单选项,但也要确保这些图形起的是积极作用(至少不能让操作变得更难)。

导航菜单要易于操作
6. 菜单选项要够大、方便点击

如果导航菜单的选项过小或者彼此靠得太近,会给移动用户造成很大的困扰;大屏网站中导航菜单选项如果也设计成这样,那就会很难操作。

7. 确保下拉菜单不会太大或太小

鼠标悬停触发的下拉菜单呈现时间太过短暂会给用户带来挫败感,因为用户还没来得及点击菜单里的某个链接的时候,下拉菜单就消失了。另外,太长的垂直导航菜单也不利于底部选项的点击,除非滚动屏幕。最后,鼠标悬停触发的下拉菜单不能太宽,否则会让用户误以为是新页面、并且好奇为什么自己还没点击就出现了新的“页面”?

8. 当页面内容很长时,可以考虑悬浮吸顶(或固底)菜单

已浏览到页面底部的用户要想回到首屏需要一次又一次地回滚鼠标(移动端则是不断向上划动屏幕);如果导航可以悬浮吸顶,用户就可以很方便地进行其他菜单选项的切换。这很适合小屏幕场景。

9. 尽可能缩短导航菜单最常用操作的物理距离

下拉菜单内容比较多时,将用户最常点击的链接放到离鼠标悬停的选项最近的地方可以减少鼠标移动的距离(移动端也类似)。最近一些app中流行的饼状菜单则将所有菜单选项成圆(有的是半圆)状围绕在菜单周围,这样每一个选项链接的物理点击距离都是最短的。

用新颖有趣的交互方式去惊艳用户?

实际上……答案是“不”。

炫酷的效果并非我们的首要目标。对于用户来说,最能打动他们的还是网站的精彩内容、以及熟悉且操作简单的导航菜单。

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


官方微博
官方微信
淘尚官方微博

淘尚网络

weibo.com/tsoome 淘尚官方微博

立即关注
最新动态
热门点击
编辑推荐
  • 今天

    WWW

    WWWWW...[原文链接]

  • 35天前

    我所理解的新零售:新零售是融合,O2O是割裂,新零售不是O2O

    新零售在一开始是线上和线下的融合,但是在这个过程中制定游戏规则的依然是效率更高,创新精神更强的互联网企业。实体线下零售商通过和互联...[原文链接]

  • 35天前

    若iPhone8推迟到11月上市,谁会偷着乐?

    有消息称:iPhone 8面临技术挑战,或推迟到11月上市。这个消息来源于台湾地区媒体《经济日报》( Economic Daily News)报道。要知道,自iPhone 5以来,...[原文链接]

  • 35天前

    一款不用“锁”的共享单车 智能化技术颠覆传统

    以荧光绿为主色调的智享单车第三代产品LIV?LO,11日在北京首次亮相。 4月11日以荧光绿为主色调的智享单车第三代产品LIV?LO,11日在北京首次亮相。...[原文链接]

  • 92天前

    3个月狂吸粉400万 这个脑洞少女如何迅速超越papi酱?

    她使出浑身解数,就地取材,完成了一道道办公室美食:饮水机煮火锅、挂烫机蒸包子、电脑机箱摊煎饼果子、电钻棉花糖、瓷砖煎牛排、……她因...[原文链接]

  • 93天前

    揭秘网络营销的本质

    营销说白了就是操纵客户的大脑、操纵客户的思维,你要懂得去了解客户的心理。...[原文链接]

  • 95天前

    苦逼SEO如何实现自身价值的提升?

    目前SEO发展越来越难做,SEOer越来越难生存,于是笔者就与这位朋友聊了起来,了解到他目前在一家企业做优化工作,发展不是很好,每天累死累活...[原文链接]

  • 96天前

    广州手机网站建设弹窗设计要吗?

    弹窗设计很让人难受,影响用户体验几乎是绝对的。不过,你不主动招揽用户,让他主动找你,在个性化的互联网世界,这样做是不是有点“装”大...[原文链接]

  • 96天前

    企业到底个人网站运营如何策划

    谈到网站,大家自然而然就会联想到流量,没错,一个网站,流量是其灵魂,没有流量。任何网站做的再好,也无法发掘他的真正价值,可能你比别...[原文链接]

  • 96天前

    阿里为什么不收购百度?

    本文来自一个网友的问题汇总,对于阿里为什么不收购百度,网友回复众说纷纭,甚至有的网友反驳提出此问题者有点略显不专业,不管怎么样。让...[原文链接]

  • 96天前

    人性营销:水果店用微信轻松实现创富

    我今天再给大家分享一个案例:我们小区的水果店是怎么用一年突破150万营业额的。这个案例是我亲自策划指导,所以我就可以把这里面的原理给大...[原文链接]

  • 96天前

    论坛私信营销的正确操作姿势

    本人操作过的项目很多,每一个几乎都是从零起步,从没想过把所有资源整合到一起,错过了太多用户,错过了太多粉丝,我在网赚行业没有一个朋...[原文链接]

  • 592天前

    如何用预期式设计保持用户体验简单易行?

    现如今,用户大多深陷于碎片化的时间和过量的信息,所以用户更加青睐简约而现代的网页设计。“少即是多”是这类网站的设计哲学,少而精准的...[原文链接]

  • 599天前

    网页设计中导航设计的几个指导原则

    导航菜单的重要性已经不言而喻,我们平时遇到的每一个网站或软件中都有它的存在;但并不是所有的导航菜单都设计得准确无误。我们也常发现用...[原文链接]

  • 606天前

    404页面设计趋势分析

    每个网站都是由不同功能不同类型的页面构成的,当用户打开错误链接的时候,网站的404页面就派上用场了。一个可靠的404页面在告知用户他们走错...[原文链接]

  • 607天前

    扁平化设计的8个实用小技巧

    规则是用来打破的,但在打破规则之前,你需要知道规则是什么。无论是设计的四大原则还是扁平化的这几条tips,都不是不可挑战不可违逆的,你...[原文链接]

  • 609天前

    设计完美极简风网站的六个步骤

    在刚刚过去的几年里,涌现的许多网页设计趋势正在逐渐成为主流,引领我们走向未来。其中,极简主义网页设计正式其中之一。极简设计风格不会...[原文链接]

  • 611天前

    企业如何准备网站建设资料?

    建立一个行之有效的营销性的网站决不能马马虎虎,草率行事,随便准备点资料,找一些象征性的图片,一揽子塞给专业公司,过个不长时间网站就...[原文链接]

  • 612天前

    网站优化指南与用户体验五要素

    虽然标题指的是网站,但同样适用于移动端的UI设计,所以无论你做网站或者是APP设计,都可以参考本文来做用户体验或交互,特别是本文中提到的...[原文链接]

  • 615天前

    ​对于识别12306验证码这件事,心塞到分分钟吐血

    买火车票正在从彻夜排队的力气活,进化成识别验证码的智力活。“请点击下图中所有的白百合”、“请点击下图中所有的博斯普鲁斯海峡”、“...[原文链接]

  • 616天前

    他用一手变态字,写出了一种新的文案形式

    他用一手变态字,写出了一种新的文案形式美国文案大师罗伯特·布莱在《文案创作完全手册》中说:文案写手不是视觉艺术家。...[原文链接]

  • 616天前

    怎样才能做出一个优秀的404页面?

    平生不见404,阅尽全网也惘然。对,如果你从未打开过404页面,就可以说你几乎未曾真正用过互联网。404页面的出现的原因很简单:当你输入链接...[原文链接]

  • 618天前

    ​芈月背后的男人原来是他!

    随着《芈月传》的开播,这部讲叙秦昭王母亲芈月波澜起伏传奇一生的古装剧赚足了眼球。而在开播前,芈月的饰演者孙俪在微博晒出一组古装照...[原文链接]

  • 619天前

    网站建设中通常忽略的重要细节有哪些?

    我们都说细节决定成败,可见细节在我们生活、工作当中所起到的作用,一个小小的马蹄可能导致整个战争的失败,那么企业在网站建设的过程中,...[原文链接]

  • 620天前

    高端网站建设需要注意的六个关键点

    想要开发一个高端的网站,需要注意什么呢?建设网站虽然不是很难,但是想要建设一个成功的网站,需要注意下面几个方面,才能成功。下面淘尚...[原文链接]

  • 621天前

    留白设计是一种高端艺术,要懂得在网页设计中合理运用负空间

    所谓留白,是指在网页中除字体本身所占用的版面空间之外的空白处,我们通常也称为“负空间”。实际上,负空间的概念并不仅限于网页设计中,...[原文链接]

  • 622天前

    网页设计中的平面构成

    什么东西都离不开基础,建房子需要地基,解方程式需要先学会乘法表,唱歌需要先会“哆、来、咪”。页面设计也同样需要基础,这个基础就是平...[原文链接]

  • 622天前

    专业网站建设应该怎么把网站定位在品牌产品中

    网站运营经验人员应该都很清楚,网站运营关键在于网络营销,网络营销的途径有很多,有部分网站是通过赚取网站广告费用和发布网站软文进行网...[原文链接]

  • 622天前

    五大SEO优化方式 让你的排名不再过山车

    搜索引擎优化,涉及到的细节非常多,首先我要澄清的是:当前文章,不可能非常细节的去讲所有的优化知识点。但是,当前文章却是适合所有网站...[原文链接]

  • 623天前

    重读吉拉德:如何让你的营销案多卖一倍货?

    或许有人认为:影响销售的因素很多,产品、潮流、消费者喜好的变化乃至政策突变。其中大部分是广告人无法控制的。不过,当今的广告人承担的...[原文链接]

  • 623天前

    为了做张圣诞节海报,各大品牌也是拼了......

    ​快要圣诞节了,目测设计师和文案们又开始在为这个日子忙碌了。嗯,给点灵感,看看各大品牌的设计师们往年都是怎么利用一些突出的圣诞...[原文链接]

  • 625天前

    有一种寒冷,叫做你妈觉得你该穿秋裤了!

    有一种温度叫做,忘穿秋裤;有一种寒冷,叫做你妈觉得你该穿秋裤了!随着各地温度的持续下降,秋裤君的天下即将正式来临。小伙伴的依靠秋裤...[原文链接]

  • 626天前

    网站制作之什么是分页导航

    在博客、杂志甚至是大多数站点中,分页的点击次数可能比搜索还要多,因为在很多时候,访客并没有明确自己的需求,只是在网页中一页接着一页...[原文链接]

  • 627天前

    公司为什么要建企业网站?

    随着网络信息技术的飞速发展,互联网已经成为了人们快速获取、发布和传递信息的重要渠道。因互联网信息传递快、优越的互动性和便捷的交流方...[原文链接]

  • 628天前

    SEO网站优化之三种不同类型网站的站内优化方法

    每个类型高端网站建设的网站不论是站内和站外优化方法也许大致一样,但是其中的细节之处则是有很大的区别,很多个人网站在给网站优化时都只...[原文链接]

  • 630天前

    做网站如何把握好用户需求增加用户体验

    设计的目的是更好的体验,而掌握用户的心理是体验的核心。好好掌握客户心理学,你的设计将更有效果,客户将更满意。耗时不多也不难,因此我...[原文链接]

  • 632天前

    网站改版方案:如何将影响降到最小

    网站改版,提到这个词,有些人估计会慌了神。生怕自己的站一夜之间被周董送到了千里之外。其实,对于改版,大家大可不必太过紧张。只要是个...[原文链接]

  • 634天前

    “卖萌”无效, 品牌营销需要自带“萌基因”

    这几天朋友圈被一本名叫《你今天真好看》的蠢萌插画书洗版,书里几十个可爱的小动物,被作者Liz Climo赋予了蠢萌的性格,有点呆却又触动人心的...[原文链接]

  • 635天前

    网站各个页面标题该怎么去做SEO

    一个网站不仅仅是有首页而且有栏目页、新闻页、产品页、标签页等等,这些页面的标题该怎去做呢?可能大家都明白我讲的意思,或者我想说的都...[原文链接]

  • 636天前

    屏蔽对你大谈特谈“H5营销”的朋友,告诉你什么是H5!

    这一年多打着“H5营销”嘘头的公司很多,由于市场需求旺盛和微信的火爆,市面上出现了很多“最擅长H5营销”的公司。市场繁荣但充斥着很多不...[原文链接]

  • 637天前

    一张图看懂创业公司是如何吹牛的……

    说话,是一门艺术,创业公司该如何向投资人、公众包装自己?一张图带你看懂创业圈的那些潜规则...............[原文链接]

  • 637天前

    《西游记》其实就是一部O2O团队的创业故事

    最近O2O死亡名单上的新成员越来越多,资本寒冬伦,今年北京的雪又比往年来的更早了一些,O2O成了时下一个沉重而悲凉的话题。今天我来讲一个轻...[原文链接]

  • 647天前

    究竟谁买了朋友圈的面膜?

    哥豆瓣有一个友邻,小姑娘刚毕业没多久,工资三四千吧,可是女孩都爱时髦啊。今儿买个包包,明儿买了小裙。iPhone6一出,别的女孩要么自己买...[原文链接]

  • 648天前

    微信文章的发布日期真的对阅读量没影响么?

    ​不管是博客、网站、QQ空间,还是微信公众平台、微博、今日头条等,我们在发布文章的时候经常会考虑到文章的发送时间、标题的字数、标题中...[原文链接]

  • 648天前

    ​这样清新脱俗的促销广告还真是少见!双11你们要不要试试?

    听说黄晓明在大学的时候追过赵薇,但最后却娶了AB;听说李晨以前跟张馨予好过,现在却和范冰冰在一起。听说你之前一直用XX面膜,不过最后...[原文链接]

  • 648天前

    盘点|这些年被老大老二联合起来弄死的老三们

    那些年,在中国互联网圈有一个著名的段子:“老大和老二打架,老三死了。”这些年,在中国互联网圈有一个著名的段子:“老大和老二好了,老...[原文链接]

  • 648天前

    SEO们,停下互点和伪原创,进来看下

    很多人会看到很多好的文章,会恍然大悟。但是,到了明天就会忘记做回自己。这其实很好的对应了一句话“成功人总是少数的”。我并不是想借...[原文链接]

  • 649天前

    人人都碰过的囧事:老板的需求「不靠谱」,怎么办

    在公众号的留言里面,有人跟小编说「老板让我做xxx,不靠谱很头疼怎么办」、「老板不懂业务瞎指挥怎么办」、「项目组的工作进度经常被老板打...[原文链接]

  • 649天前

    不懂放权给用户?活该忙成狗丨运营秘籍教你如何四两拨千斤!

    最近有人跟我说,做社区好累啊,每天要处理一堆的事情,马上新产品又要发布了,估计我的工作量要翻倍了,我要屎了。我和他说,你有多少能帮...[原文链接]

  • 649天前

    京东举报阿里扰乱电商市场秩序 公关对垒战一触即发

    电商的双十一大促还没开始,几大电商巨头已经开始了公关战。11月3日下午,京东通过官方微信号“京东黑板报”宣布,向工商总局实名举报阿里扰...[原文链接]

  • 分享到微信朋友圈
    打开微信,点击底部的“发现”,使用“扫一扫”即可将网页分享至朋友圈

    联系我们

    全国服务热线:400-600-4084

    广州热线:020-29066186

     

     

    手机热线1:18680440808

    手机热线2:18620220902

     

    服务邮箱:serve@tsoo.me

     

     

    淘尚微信

    微信扫一扫
    服务号
    企业号
    或者在添加朋友-查找公众号搜索淘尚网络

    关注我们的微信

  • 淘尚网络服务号

    服务号

  • 淘尚网络企业号

    企业号

  • 到我们这里来

    广州市天河区林和西路167号
    威尼国际16楼E12-E15

     

     

    room E12-E15,F16,
    building No.167 of Vili International Mansion
    LinHe WestRoad , TianHe District
    GuangZhou City

     

     

    在地图上找到我们

    填写需求信息给我们

    • 看不清?点击更换
  • 客户需求

    一封邮件或许正是成就一个出色产品的开端。

    欢迎填写表格或发送合作邮件至:serve@tsoo.me
    看不清?点击更换

    服务热线:400-845-8848

    首页前进后退刷新客服联系关于
    客服软件由淘尚IM提供
    //////