用户体验之网站导航设计师指南

以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具。“如果用户在导航上遇到困难,他们通常会犹豫是否要回到网站上。”大多数人可能有过这样的体验,当你打开了一个APP,由于没有导航或者导航设计不合理,你花费了很多时间去寻找你需要的东西。那么你很可能不会逗留在这个页面,甚至不会再想使用这个网站。那么你如何创造出“清晰,简单,一致”的导航呢?让我们来模拟一个场景,你在一个星期天的早晨出门去买自己喜欢...

以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具。

用户体验之网站导航设计师指南

“如果用户在导航上遇到困难,他们通常会犹豫是否要回到网站上。”

大多数人可能有过这样的体验,当你打开了一个APP,由于没有导航或者导航设计不合理,你花费了很多时间去寻找你需要的东西。那么你很可能不会逗留在这个页面,甚至不会再想使用这个网站。

那么你如何创造出“清晰,简单,一致”的导航呢?

让我们来模拟一个场景,你在一个星期天的早晨出门去买自己喜欢的巧克力。走进商店,你首先会看到墙上挂着各类商品区的名称。( 因为它们足够大,你可以在商店的任何地方看到它们。)

“哦,应该是食品杂货区!”你心想,一边朝着那个方向走,一边去购买你正在寻找的巧克力。

再来一次,我们使用完全相同的场景,进行较小的更改。这次没有任何商品区的名称,你就会对这些巧克力的位置一无所知。

现在,把商场看作是你设计的Web应用程序,而你是访问Web应用程序的用户。

当你访问一个网页APP时,你会经历和去商店一样的过程,你通常会试图找到一些东西。然后你会明白:

“用户永远不会认为他们有必要记住在网站中的访问路径。这里应该有一个导航,它应该放在顶部,而且是非常明显的位置。”

网站和商场的一个区别在于,前者没有任何人站在你的身边,告诉你寻找的东西在哪里。在网页上,代替寻找方向的功能是搜索——在搜索框中输入你想搜索的关键词,然后返回到可能出现的地方的链接列表。

在Web应用程序中,你可以通过一个有层次结构的导航来引导你。

通常,在一个Web应用程序的固定位置会有一个保持静态的导航栏(全局导航),其他主要分区导航下都可能有一个子导航栏。

导航的两个主要目的是显而易见的:

帮助我们找到我们正在寻找的东西,并告诉我们我们在哪里。

但导航也有一些同样重要且很容易被忽略的功能:

向用户展示网站内容

通过使层次结构可见,导航可以告诉我们该网站呈现包含哪些部分。而对于用户来说,展示这款应用的具体内容可能比引导或快速定位更重要。

告诉用户如何使用该网站

如果导航是有效的,它会提示你从哪里开始,以及你的选择是什么。如果操作正确,它应该会提供你需要的所有指令。(这听起来不错,因为大多数用户无论如何都会忽略其他指令。)

加强用户对网站建立者的信心

每当我们进入一个网站时,我们都会好奇:“这些家伙知道他们在做什么?”这是让我们回到Web应用程序的主要因素之一。

结构清晰,精心设计的导航是网站创造良好的第一印象的最佳机会之一。

如何创造“清晰,简单,一致”的导航?以下是Web的基本导航惯例:

全局导航是什么?为什么要创建它?

Web设计人员使用术语持久导航(或全局导航)来描述出现在应用程序的每个页面上的一组导航元素。

持久化导航一般会以平静而令人舒服的口吻提示你:

“这里是导航部分,有些区域会根据你在Web应用程序中所处的位置而有所变化,但它会一直在这里,并且始终以同样的方式为你服务。”

持久化导航就像商店里各区域的名称一样,不管你在哪里,如果你想知道你身在何处,你只需抬头仰望看看商店名称。你就可以快速找到自己喜欢的巧克力。

只要导航保持一致的外观出现在每个页面的相同位置,你就能立即确认你仍然在同一个应用中 -这比你想象的重要得多。(行为科学)在整个应用程序中保持一致意味着你只需要弄清楚它是如何工作的。

分区导航 – 一个关键部分

分区导航 - 有时称为主导航 - 是应用程序主要部分的链接,即应用程序层次结构的顶层。

在某些设计中,持久化导航还包含显示二级导航的空间,即当前导航部分的子列表。

在其他情况下,指向一个分区名称或点击它会显示一个下拉菜单。而且在某些情况下,点击将带你到该区域的首页,在那里你会发现二级导航。

面包屑导航 – 你的坐标

面包屑导航就像“你在这里”的坐标一样,它可以显示你在一个Web应用程序上的位置。

面包屑导航,顾名思义,它们不会占用太多空间,但能提供给用户一个方便快捷的方式来做你最需要做的两件事情:返回上一页或者回到主页。

这个导航之所以被称为面包屑导航,是因为它们让人想起童话故事"汉赛尔和格莱特“。当汉赛尔和格莱特穿过森林时,不小心迷路了,但是他们发现在沿途走过的地方都撒下了面包屑,这些面包屑帮助他们找到了回家的路。

面包屑导航会显示从主页到你所在的位置的路径,并可以轻松地在应用程序的层次结构中移回到更高级别。

在很长一段时间里,面包屑导航仅仅应用于APP中,在这些APP中的应用实际上只是存储大量的数据,但现在它们在UI / UX中也是必需的设计元素。

以下是实现这些导航的最佳实践

1. 把它们放在顶部

如果将他们放置在页面的顶部,面包屑导航可以很好地发挥作用。我认为这可能是因为设计师使它们与页面边缘结为一体,使他们看起来更自然,就像书籍或杂志的页码一样。

2.级别之间使用“>”

多次的试验和失败总结似乎表明,级别之间的最佳分隔符是“大于”操作符(>),可能是因为它在视觉上显示了向下移动的效果。

3.最后一栏加粗

列表中的最后一栏应该是当前页面的名称,并将其加粗,从而突出其应有的重要性。因为这是你当前使用的网页,所以它自然也不会是一个链接。

选项卡

选项卡是少数几个在用户界面中实际使用物理隐喻的例子之一。它就像是三环活页夹中的标签分隔符或文件抽屉中的文件夹标签,可以将任何东西分成不同的部分。通过点击它的标签(或者,在Web上点击它),你可以很容易地打开其中某个部分。

如果你还沉浸在购物中心和巧克力的例子中,那好。标签就类似于商场某一个部门里的货架,他们可以帮助你精确定位商品。你可以在不同的货架上看到不同种类的巧克力,供需要的人购买。

我认为它们是一个非常棒的导航选择。以下是为什么我喜欢它们的原因:

1.浅显易懂

我从来没有见过任何人(不管是不是“计算机文盲) 看了标签的界面会说:“嗯,我不知道那些标签是干嘛的?“

2.显而易见

当我做可用性测试时,令我很惊讶的是,用户往往会忽略网页顶部的水平导航栏。但是选项卡在视觉上非常独特,因此很难被忽略。而且除了导航,它们很难被误认为是其他什么,所以它们成功创建了导航和内容之间的那种显而易见的划分。

3.并非华而不实

网页设计师总是在努力让页面更具视觉上的趣味性。但如果设计得当,选项卡也可以更加精美,并提供有用的功能。

结论

理解导航可能很困难,但要想实现它更加困难。但是无论你设计,你都必须确保你的导航能带给用户最终想要看到的东西。这很重要,因为他比你想象中更希望“买到喜欢的巧克力“。

如果你是一名UI / UX设计师,你使用的是哪种导航风格呢?

作者:Aakriti Chugh

地址:https://uxplanet.org/designing-navigation-labels-and-breadcrumbs-2a6220bb0cc6


扫描二维码,关注 “摹客” 微信公众号

用户体验之网站导航设计师指南

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/35888/

(0)
交互精选交互精选
上一篇 2018-03-14
下一篇 2018-03-14

相关推荐

  • 静态码限额后,微信支付还能兼顾合规和用户体验吗?

    【新朋友】点击标题下方蓝色字“经济晚报”关注【老朋友】点击右上角,转发或分享本页面内容4月1日,央行关于静态码扫码支付限额500元的新规开始正式实施了,从这天开始,大家通过静态二维码支付的时候每天限额是五百块。你感觉到了不方便吗?新规一出,很多小伙伴们都产生了疑问:以后我扫码支付消费是要被“管制”了吗?如果每天的限额用完却还有扫码支付的需求咋办?新规如何配合?微信支付上线新产品体验针对用户的这些疑问,微信支付和支付宝这两大移动支付巨头给...

    2018-04-07
  • 交互体验大升级 云视听极光3.0最新版本体验评测

    作为腾讯视频官方的电视端应用版本——云视听极光迎来了第三个大版本的更新:云视听极光3.0。在我之前的国内4大电视端视频应用软件的对比评测中我对云视听极光的老版本在交互体验上的感受只能用一般般来形容。这次的大更新官方声称对交互界面体验上针对用户需求和建议做了较大的改进,我也立马升级了软件进行了一番体验。让我们来看看云视听极光3.0在体验上到底如何吧。UI交互体验:界面设计进入软件就可以看到3.0版本的大变化,相比老版本,3.0的频道分类栏...

    2018-01-30
  • UI|人性化交互设计 美食订餐网站

    类别:美食网站设计:BASOV(乌克兰)今天品牌先生为大家分享乌克兰 BASOV 工作室设计的一款美食订餐的网站。从选餐到订餐下单,设计师进行了很便捷的交互设计,让网站尽到最大的便捷和简约,这样客户也会爱上这样的网站。网站的建立不单单是界面UI设计出漂亮的界面,包括客户的需求和网站的结构等等,此款网站在前期原型交互设计上的用心在图中也都体现了出来。▼(品牌先生独家整理,转载请告知或注明出处)UI-- END --请点击下方“阅读原文”去...

    2018-02-21
  • Axure 从入门到够用

    第180篇Glen几个月前决定总结分享一个Axure教程系列,结果现在才腾出时间来梳理。Axure是最常见的产品原型工具了,看完这篇文章,你就基本具备了日常工作需要的产品原型能力了。Axure入门到够用教程1. 尺寸规范1.1 网页端产品尺寸优秀的产品原型是需要做到像素级高保真的,这样便于之后设计师输出设计图,毕竟眼见为实嘛。现在互联网主流屏幕分辨率有1920 * 1080、1366 * 768、1440 * 900。你在画网页产品原型...

    2018-03-06
  • 2019届及以后实习|互联派、苹果、百度等一大波实习来咯!

    今天的实习信息也是满满的哦~快跟着派派一起来看看吧~互联派、苹果、法国优格、百度、京东等多个岗位等你投递~面向人群2019届及以后,包括2019届、2020届、2021届同学,以下的岗位都可以投递哦~岗位预览◆互联派/用户运营实习生/大连◆互联派/新媒体运营(内容编辑)实习生/大连◆网易有道广告优化实习生◆苹果/数据分析实习生/北京◆法国优格/财务助理实习生/上海◆百度/HR实习生(招聘方向)/北京/可转正◆百度/人力资源实习生/北京◆...

    2018-03-23
  • 交互设计需要掌握哪些"必备"心理学知识?

    交互设计是以人为中心的设计,设计者要站在用户的角度出发,深入、全面的了解用户的需求才能够设计出具有良好用户体验的产品。而想要在作品集中向考官体现同学们对用户心理需求的把控能力,除了做好用户调研之外,也要掌握一些常用到的心理学知识。交互设计是人与其他一切事物之间的行为设计,而人的行为中包含感知和认知这两种与心理学密切相关的要素,因此,同学们在设计项目时,每一个功能设计、每一个操作流程以及UI的设计都要基于了解用户心理学的基础上开展设计。本...

    2018-04-10
  • 论数字媒体交互设计的未来

    “交互设计”这一概念如今风靡全球,对于它的研究 与实践受到企业、院校等机构越来越多的关注。现如今交互设计正在呈现出一种放射状成长态势,这使得交互设计没有绝对的定理,都是在共同交流,探索中前进。国内交互设计优秀案例分析在信息全球化的时代,无论是国际还是国内市场,大多数设计机构都在言必称交互,“交互设计师”、“用户体验设计师”已经成为炙手可热的职位。我国也涌现出一批优秀的交互设计师们,其设计出的作品均获得了国内外的一致好评。例如,中央美术学...

    2018-03-03
  • 用户体验设计专题——前言

    元宵佳节一过,春节假期正式步入尾声,相信大家的工作也已步入正轨。为了感谢大家对我们这个略显晦涩却干货满满的公众号的支持,经过系统梳理,我们归纳总结了9个用户产品设计的基本原理,结合从数千个小流量评估实验中筛选的经典案例予以阐述,在未来两个月的时间里,会逐步分享给大家!废话少叙,步入正题!笼统地说,用户体验(User Experience,简称UX或者UE),是指用户在使用一个产品、系统或者服务时建立起来的纯主观感受。这里我们会关注两个重...

    微信热点 2018-03-02
  • 课程论文 | 基于用户体验的购物车再设计

    引言PAGE1随着我国经济水平的增长,人民生活水平的不断提高,越来越多的消费者选择去大型超市购物消费,大多数城市居民都养成了定期光顾超市的习惯,把购物同休闲结合起来。体验经济的到来,越来越多的消费者开始关注购物本身是否能带来愉快的体验,这样的体验超出了纯粹的购物,而成为光顾超市目的的一部分。因此,购物不仅仅是出于购物的需求而且还为了获得愉快的体验。而购物车与消费者的购物体验紧密相连。购物车的使用体验对消费者的购物体验影响很大。现有购物车...

    2018-02-13
  • 行云流水般的交互体验:当智能头机邂逅百度音乐

    音乐,作为一直延续的人类共有的精神食粮。从爱迪生发明第一部留声机到后来的黑胶唱片、再到磁带、CD、MP3经历了整整140年,储存和传输音乐的介质从磁性变成了光学;储存歌曲的数量越来越多,体积也越来越小。但是笔者有一个长期被困扰的问题:作为运动爱好者和音乐发烧友,在跑步锻炼时常常需要将iPod或者Sony Walkman笨重的机身绑在胳膊上,然后再插上耳机、选歌、调节音量等等至少4、5步操作才能听到想听的歌;还常常因为线头缠绕,越解越乱。...

    2018-01-30