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

以下内容由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

相关推荐

  • 做你老婆,用户体验真差

    洞见(DJ00123987)——不一样的新闻,不一样的故事,数百万人订阅的微信大号。点击标题下蓝字“洞见”免费关注,我们将为您提供有价值、有意思的延伸阅读。作者:青蓝来源:青蓝(ID: qinglansz)没错,这是一篇真诚的吐槽贴。鉴于各位直男的脑回路和女人差异较大,常常不能正确理解老婆大人的本意,今天我特意以你们最爱的电子产品——手机为例,给你们分析一下老婆们的用户体验。01. 外观差评,后盖鼓起,前屏磨花,说好的金属漆还掉了色。小...

    2018-03-25
  • 读书:交互设计四策略

    1. 认知什么是简单的体验:用一句话把它写出来,包括我要设计什么,遵循哪几条设计规则,尽量使用最简单的术语。描述我希望用户拥有什么体验(用户使用场景、我的设计怎么满足)。2. 三种类型的用户:专家型用户:愿意探索产品或服务,并给你提建议;随意型用户:有兴趣使用更高级更复杂的产品,掌握重要功能的使用方法;主流用户:使用产品为了完成某项任务,掌握重要功能的使用方法;3. 关注用户的感情需求在设计过程中应该对用户的行为感兴趣,而不仅仅是自己的...

    2018-02-28
  • Axure用的溜,并不代表你就能成为一个产品经理

    作者:杨俊全文共 2497 字,阅读需要 5 分钟—— BEGIN ——当你在人人都是产品经理上搜索“Axure”时,会有98页的结果。在知乎以及其它一些产品经理相关的网站上,也总是能够看到诸多Axure的使用问题和经验分享。但是,作为一个产品经理确实是需要会使用Axure的,但你使用Axure并不代表你就能成为一个产品经理。用户体验五要素在《用户体验的要素》中提到的五要素,自上而下分别是:战略层、范围层、结构层、框架层和表现层。当你能...

    2018-03-04
  • UI设计师最该考虑微交互的设计

    前言什么是微交互?微交互是用户在完成某个小任务时产生的交互体验。例如,解锁手机就是一个微交互,手机调成震动模式时会震一下也是一个微交互。为什么称为“微交互”呢?所谓的“微”其实就是指的产品的细节设计。微交互正在成为产品设计中越来越重要的部分。正如同Charles Eames曾经所说,“细节并不只是细节,它是构建起整个设计的基本元素。”你的UI和交互设计中的每一个元素都是至关重要的,一个又一个细节设计让你的产品最终脱颖而出,而真正让人难忘...

    2018-04-20
  • 【媒体观察】“爆款”G一代,好品质给用户体验“上保险”

    春夏交替的四川地级市资阳,天气多变。但降温和阴雨,还是没能阻挡住中国西南最活跃经济区域,吊装用户的热情与期待。2018年4月23日,将近400位用户,来到了“徐工G能大咖&新产品交接仪式”现场。到场用户的业务范围、规模、设备不尽相同。其中既有已经开始“公司化”运营者,也有依靠零散数台吊车积累第一桶金的“拼搏者”;既有跟随上一轮热潮涌入的新手,也有从业十几年甚至几十年的“老司机”。虽然对市场的理解,对未来的规划各有所取,但谈及徐工G一代产...

    2018-04-29
  • 报名最后12小时|6周快速玩转axure,同时提升产品和交互

    众所周知,Axure是产品经理必备的工作软件。薪资越高的产品经理(比如月薪18k+以上的产品经理),不仅能高效玩Axure,更能用Axure体现产品思维。“起点学院&腾讯课堂”联合打造6周Axure实战班,第7期报名最后12小时!从第1期到现在,2000多位同学学习成长,好评如潮。来看看同学们的成长。下图是0基础同学,学习后制作的“冲顶大会”高保真原型(福利资料:添加班主任Sara为好友,可获取“冲顶大会”原型文件。Sara微信见文末)...

    2018-04-11
  • 从用户体验的角度谈多数RPG战斗系统中的缺陷

    在为RPG创建战斗系统时,多数开发者首先会考虑到这个问题:“游戏中的各个角色会有哪些优势和弱点”。四大元素系统基本的战斗系统之一是,带有水、火、风、土的“四大元素系统”——水比火厉害,火比风厉害等等。这一系统适用于元素不多的游戏,因为玩家几乎立刻就会明白哪些元素能对敌人造成更大伤害。在现实生活中,不同元素的相互作用是众所周知的,因此开发者可以在不提供大量教程的情况下使用这些现实生活中的元素。但如果将这个系统进行延伸的话,就会导致交叉优势...

    2018-04-17
  • 交互设计 ▏如何在作品集中展现自己的设计风格和思考过程?

    交互设计是对于用户产品使用行为的优化设计。它关注的是“用户场景”和“用户心理”,设计的对象是“用户行为”,达成的目标是“能用、易用、想用”。作品集其实是一个人设计风格和思考过程的折射,一个好的交互设计作品集需要在作品中展示你解决了什么问题,如何解决的,以及最终成果。今天小编给大家带来了一位学姐的交互设计研究生作品集,希望可以给大家带来一些启发啦!!!学姐的作品集中一共有3个项目,分别是项目1:Wish项目2:RT: BAGS项目3:FI...

    2018-04-22
  • ​ 不尊重用户体验如何“携程”丨每日时评

    高考作文干货/素材/知识/热点如果你想要作文素材、资料...加我微信:13261345736备注下你想要解决的问题点播时间(今天的歌单车是@光芒点播给大家的,如果你也想点歌,请留言:歌名+歌手~)当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放单车陈奕迅 - Shall We Dance? Shall We Talk!作文君说昨天刚和同学们说完OTA(在线旅行社)网站搭售的问题,今天我们再来具体看看,携程在用户体验上面临的问题...

    微信热点 2018-02-10
  • Axure RP 8.0软件安装教程及下载地址

    破解文件下载地址在文末,请查看!1.双击AxureRP-Setup.exe安装文件。2.点击Next。3.勾选I Agree,然后点击Next。4.一般是默认安装路径。5.点击Next。6.点击Next。7.等待安装。8.取消勾选!取消勾选!Run Axure RP 8使其处于未选中状态,然后点击Finish。9.在桌面找到Axure RP 8,鼠标右击选择打开。10.点击确定。11.勾选Don’t  show this at star...

    2018-03-27