当前位置: 六合开奖结果 > 摄影方法 > 正文

如何使用网页中为你指路的面包屑设计,从七个

时间:2019-09-22 15:54来源:摄影方法
生活处处都是用户体验,童话也不例外。我们熟悉的三只小猪、豌豆公主、狼来了和皇帝的新装等等经典童话,都让这篇文章的作者强行科普了一番用户体验的知识,令人吃惊的是完全

生活处处都是用户体验,童话也不例外。我们熟悉的三只小猪、豌豆公主、狼来了和皇帝的新装等等经典童话,都让这篇文章的作者强行科普了一番用户体验的知识,令人吃惊的是完全说得通,而且内容质量不俗。

随着单页式设计和移动端的兴起,网页中的交互设计越来越重要了。为了打造流畅而可靠的用户体验,你需要对交互设计有更加深入的了解。

面包屑是我们熟知的一种导航工具,它们往往出现在页面内容的上方,告知你所处的位置。它小巧,方便,常见,且简单。可是即便是这样的UI控件,在设计上同样是有讲究的,今天咱们就来聊聊面包屑吧。

编剧大师罗伯特麦基曾经这样写道:故事是人类交流的货币。故事是我们对周围世界的感知的方式。我们越是了解周围的环境,我们就越有可能有生存的机会,我们通过讲故事来交换这些赖以生存的知识。每个被分享的故事都有我们从真实世界学到的教训。

正如同我们在《交互设计最佳实践(卷1)》中所述,要做好交互设计,需要对多个学科有着深入的了解和熟练的掌控,这也是非常符合逻辑的——你要试图让一系列事物所构成的系统令人感到友好,易于学习并且非常实用,这并不是一件简单易行的事情。

作为一种辅助导航系统,面包屑能够帮助用户清晰的定位到自己所在网站的位置。这个词源自于童话中跟着面包屑回到自己家的孩子,而网页中的面包屑也是帮助用户找到自己位置的UI控件。

今天,我们的故事被混杂在了数字和现实的世界当中。我们无间隙的穿梭在两者之间,常常忘记了数字世界不一定会吻合现实世界的规律,这可能会让我们感到困惑。

所以,让我们从最基础的交互设计的概念开始,深入了解核心设计原则,并且借助五步设计流程,更好地完成交互设计。

六合开奖结果现场直播 1

童话受欢迎以及能够被流传至今的原因很大程度上是因为它的简单明了:它们看起来是在教导我们一个关于我们生活着的真实世界的教训。但是这些教训同样也可以用在虚拟的数字世界中,接下来我会从另外一个角度来讲述这些故事。

真正优秀的交互设计,是由人情纽带所驱动的。那么问题来了,人的情绪纽带又是如何转化成数字化的界面和接口的呢?答案的当然是存在的,但是并非是由非黑即白的是与否、对与错所构成。根据我们的经验,真正成功的交互设计立足于基本用户体验设计的完美执行。

面包屑通过路径展示告知用户他们所处的位置,而今天的这篇文章将会探讨一个可用的网页面包屑应当如何设计,通过最佳实践展示面包屑的正确用法。

六合开奖结果现场直播 2

看起来不像是一个答案?没事,我们慢慢看下去。

面包屑导航提供可用性

1,三只小猪

1、结果驱动式设计

作为一种视觉指引,面包屑为用户揭示出网页的层次结构,也正是因此,面包屑成为了用户了解网站背景信息的重要途径,帮助用户了解下列问题的答案:

UX知识:建立在一个坚实的基础上是很重要的

即使不亲自参与用户研究,但是你还是得知道如何对设计构建成熟的认知。

我在哪里?根据整个网站的层次,面包屑能让用户知道他们所处的位置。

很多时候,网站和移动应用省略了诸如创建工作流,分类,分析网站分布,内容矩阵等计划和架构的工作,而从概念很快的推进到UI设计。想象一下试图从内部设计一个还没有建成的房子。

六合开奖结果现场直播 3

我还能去哪里?面包屑提升了整个网站的可查找性,面包屑的存在揭示了整个网站的结构,用户也随之明白网站还有哪些其他的部分。

UX设计5要素中的3个直接被网站的组织和构架影响。正如三只小猪的故事提醒我们,如果计划太匆忙没有被充分的准备可能会导致不稳固的基础,在数字的世界里这意味着粗制滥造的用户旅程、杂乱的内容和难以驾驭的网站。一旦这些问题产生了,他们基本不可能自己消失。网站/应用程序的所有者将会被迫留在这个不稳定的结构上,并且修补磨平裂缝直到永远。

我们在《用户体验设计师必备的4种UX文档》这篇文章中对于交互设计师必须知道的四种UX文档有了深入的介绍,这些文档——或者说过程,可以帮你构建起有血有肉的用户,对具体的产品流程有更真实的还原:

是否应当浏览更多?面包屑揭示出网站有更多值得探索的内容,鼓励用户浏览更多。反过来,面包屑的出现降低了网站的跳出率。

好消息是,网页的历史告诉我们好的构架主要是需要牢记以下基础知识:创建内容的层级;组织内容逻辑;逐步的去展示内容;使用与结构一致并且实用的导航;提供明确的指示标。维基百科之所以能够被使用这么长的原因是因为——它将上面的基础执行的非常好。

1、用户角色(Persona):Persona文档(控制在2~5个)通常需要包含你的目标用户。作为Persona中的虚构的角色,它的属性和特征是基于产品研究和用户定位来设定的,用作后续设计过程中所面对的理想用户,本质上,它就是一个占位符。作为人物设定,其中会包含个人信息,远不止于年龄和收入信息这么简单。Persona 文档的目标是利用角色来验证你的目标用户是如何感受如何看待你的设计的。

减少操作次数

六合开奖结果现场直播 4

六合开奖结果现场直播 5

从可用性的角度上来看,面包屑减少了用户跳转到高层级页面的操作数,这样避免了用户使用浏览器的返回按钮和翻找导航寻找上级页面的复杂交互。

△ 一个网站内容的逻辑层级

2、移情地图(Empathy Map):它像是一个轻量级的Persona文档,在资源短缺时间紧的状况下,可以使用这个文档。Empathy Map 将 Persona 中的角色的个性和性格部分移除了,更加专注于用户在特定情况下的感受。

占用空间小

我发现抵御大野狼毁掉你的网站/app最好的方法是:1. 制作一个站点地图。2. 写一个标准文档。这两个文档都应当是可视化的。站点地图应当将内容的层级分组可视化,而标准文档应该列出内容管理的规则。例如标准23:所有的页面/屏幕都应该有一个无所不在的主导航。一个网站只有靠这两个文档来武装,才有可能赢得更大的生存机会。

3、用户剧本(User Scenario):如果Persona 是帮你设计了一个故事中的角色,那么User Scenario 就是故事的剧本。用户剧本通常是围绕着一个特定目标来设计的。比如说,第二天是母亲节,要为母亲预订一份礼物。目标很明确,要达成目标,用户需要点击几次按钮,走哪些流程,需要多长时间,如何在过程中融入情感,贯穿始终。对整个用户流程有了预判之后,设计师对于UI和UX的设计就有了把握。

面包屑这种设计元素在页面上占用的空间相当小,它基本都是以带链接的文本的形式存在的,并且通常只有一行。

花时间去建立一个稳定的结构。

4、用户地图(Customer Journey Map):这份文档同上门的用户剧本很像,但是它比起前者跨度更大,贯穿体验设计始终。设计人员可以对产品的背景有更深入的了解才能更好地设计,而产品投入使用之后也不是最终结束,这也是跨度如此之大的原因所在。用户旅图将会涵盖角色信息、用户剧本和移情地图的全部信息。这么设定并不是要让用户旅图成为一个大杂烩,而是要将用户性格和用户流程、交互过程结合到一起来看待问题,每个阶段不同环节,都牵涉到不同的情绪和情感。

面包屑不会给用户带来困扰

六合开奖结果现场直播 6

六合开奖结果,2、可用性设计

这个小小的设计元素占据的空间不大,但是给用户带来的便捷远远大于可能带来的问题和困扰。

2,豌豆公主

确保可用性是最低限度的设计。如果你的用户都无法正常使用产品,就更谈不上吸引他们了。看看下面的 EventBrite 的座位设计吧。

什么时候使用面包屑?

UX知识:不要去挑战用户的预期

六合开奖结果现场直播 7

是否要在网站中使用面包屑,主要取决于网站的结构。看看你的网站地图或者整体的结构图,分析使用面包屑能否提高用户在网站内部不同类别、目录下导航是否方便:

传统的网站由三个关键的UI结构组成:一个 header,一个 body,和一个 footer。这些都是为设计师准备的一块久经考验的画布。

六合开奖结果现场直播 8

当你的网站内拥有分类明晰、组织明确的多层次线性结构的时候,你应当使用面包屑。比如一个拥有种类繁多产品的电子商务网站,面包屑就相当有用。

随着时间的推移,这些组件都包含了用户的预期在里面。例如,一个header通常会包含:网站名称(和logo),主导航,功能导航,搜索功能,登录等。此外header区域遵循一个模式:品牌logo通常被放置在header的最左侧。

这个在线的APP允许活动的组织者从活动创建之初就可以保留特定的座位,整个流程保留了大量的细节(特定的行、列,是否靠近舞池等),设计者将多个步骤、多个流程整合到一个流程当中。

当网站不具备逻辑清晰的层次结构的时候,就不要使用面包屑。

并不是所有的网站都这么做,有些人认为,打破规则会开拓更好更独特的数字体验。我不打算反对这些观点,但是事实证明绝大多数的网页遵循着这样的模式。

就像EventBrite 这样,复杂的系统尤其要保证它的易用性,整个流程要流畅,让用户感到不费吹灰之力就能搞定。在探索系统上耗费的时间越短,用户就越能做好手头真正重要的事情。

六合开奖结果现场直播,面包屑的类型

全球互联网的一致性增加了用户看到这种模式的可能,他们越是看到一个logo被放在网页的左侧,越是希望它在那里。这意味着用户在看到一个新网站之前就会对它有所期待。而这被称之为心智模式,而在数字产品的UX中心智模式意味着:

3、可供性设计和能指

面包屑是基于网站的逻辑结构而存在的导航组件,它可以基于位置、路径来展示,也可以基于属性而存在。

数字产品中的心理模式是为了识别含义和节约时间。

可供性设计,在我们之前的文章中曾经解释过:

基于位置的面包屑

举个栗子,一个房子的心智模型是有四个墙,一个屋顶,一扇窗户和一扇门。当你走近任何一栋房子,你都知道要找一个最像门的地方进去,而不是窗户。这节省了你的时间,你不会去评估任何一个可以进去的入口。同样对于用户来说,一个网站也包含着类似这样的心智模型。

Affordance 是 James J. Gibson 造出来的一个词,Gibson 是20世纪最重要的认知心理学家之一,他的生态学式视知觉论和直接知觉为认知心理学开辟了新的领地。affordance 是 afford (提供、给予、承担)的名词形式,环境的 affordance 是指这个环境可提供给动物的属性,无论是好的还是坏的,所以我认为可供性是一个合适的翻译。Gibson 用来解释 affordance 的例子是这样的:如果一块地表面接近水平(而不是倾斜的),接近平整的(而不是凸起或凹陷的),以及充分延伸的(与动物的尺寸相关),如果地表面的物质是坚硬的(与动物的重量相关),我们可称它为基底、场地或地面,它是可以站上去的(stan-on-able),可让四足或两足动物保持竖直姿势,它是可以行走(walk-on-able)和跑动(run-over-able)的,它不像水表面或沼泽表面之于一定重量的动物那样是可陷入的(sink-into-able)。列出的四项属性——水平、平整、延伸和坚硬——它们是这个表面的物理属性,如果以物理中使用的度量衡去衡量它们的话,但是对于特定动物的支撑可供性,它们必须与动物关联上才可以被衡量,它们不是抽象的物理属性,它们是为所指动物特定的,与动物的姿势和行为相关,所以 affordance 不能像我们在物理中那样来衡量。

基于位置的面包屑设计通常都能很好的反映网站的结构特征。它们直接将网站的层次结构展现在访客面前,其中包含多个层级(级别通常超过2层)。这种层级展示性的面包屑对于从外部来源(比如搜索引擎)进入网站的用户而言,具有明显的指引性作用。

六合开奖结果现场直播 9

我们在探讨交互设计的可供性之时,认为一个功能应该能为自己发声,通过合理的方式声明它本身的用处(道路可供人步行)。

六合开奖结果现场直播 10

△ 一座房子的心理模型

能指(Signifiers)是个语言学概念:

在下面 BestBuy 的页面中,面包屑将产品所在页面的层级关系展现了出来。

豌豆公主的故事告诉我们,不要把事物放在用户期望的地方之外。像公主一样,如果一个东西不在她的期望之中,就会带来一个糟糕的体验。

能指和所指是语言学上的一对概念,能指意为语言文字的声音,形象;所指则是语言的意义本身。按照语言学家或者哲学家们的划分,人们试图通过语言表达出来的东西叫所指,而语言实际传达出来的东西叫能指。

六合开奖结果现场直播 11

同样,创建一个标准文档也可以帮助避免创建一个不符合期望的网站。我们可以通过竞品分析和用户测试来了解这些。竞品分析常常被视为一种在竞争中保持领先的方式,但事实上它们还能帮助你在用户使用你的网站或者app前预测用户的心理模型。

简单说来,可供性设计所传达出来的东西,就是它的能指。(地面是平的表明人可以用脚在上面走路)

基于路径的面包屑

比如说你是一个汽车制造商,几乎每一个你的目标用户访问你的网站的同时也会访问竞争对手的网站。如果竞争对手都把它们的导航放在header上,而你偏偏非要把导航放在左侧。你的目标用户访问你网站的时候就会感到困惑和混乱。忽然间,浏览你的网站需要付出思考和努力。一个本来很简单的任务变得艰巨而复杂,这些都是因为他们的期望受到了不必要的挑战。

没有能指,用户也就无法真正察觉到其中的可供性设计。

基于路径的面包屑通常也被称为历史足迹,它展现出来的并非是网站结构,而是访客抵达特定页面的完整路径。这种面包屑路径并非是静态的,而是动态生成的。基于路径的面包屑有时候会对用户有所帮助,但是有的时候还是会让用户感到迷惑——有的用户浏览网站的时候浏览路径过于天马行空,这种基于路径的面包屑会帮助他们记录,无需翻看历史,也不无需使用浏览器的返回按钮来返回特定位置。另外,这种基于路径的面包屑对于一次就抵达特定位置的用户而言毫无用处。

用户是敏感的,要像对待公主那样对待他们。

六合开奖结果现场直播 12

下面就是使用基于路径面包屑来导航的案例和原理说明:

六合开奖结果现场直播 13

在上面的案例中,你能看到按钮设计的进化和发展。第一个按钮仅仅只是单词,没有能指,而第三个按钮加上了圆角边框和阴影层次,反映出它作为按钮的特征。

六合开奖结果现场直播 14

3,糖果屋

六合开奖结果现场直播 15

基于属性的面包屑

UX知识:用户总是在寻找回家的路

能指同样可以以比喻或者暗喻的形式存在,因为人们需要明白他们为什么要同这个对象进行互动,而不止是知道他们可以。正如同上门iPhone 屏幕底部的托盘,你能看到圆角边框的按钮,从而了解我们可以按它,其中的电话、邮件和音符等符号,则以特定的形象暗示用户,点击按钮可以达到什么样的目的,做什么样的事情。

这类基于属性的面包屑常见于电子商务类网站,产品常常基于类别和属性而组织到不同的子目录中,基于属性的分类让用户更容易理解产品和产品之间的关系,提供了更多不同的浏览路径。

最著名的影响界面设计的童话是《糖果屋》,一个关于两个小孩走进了森林,被一个女巫欺骗,最终靠着面包屑找到回家的路的故事。面包屑现在是网页设计的一个共同特点,尤其是对于那些内容必须分成栏目和子栏目的大型网站。面包屑导航服务于三个主要用途:定位、导航和让用户安心。他们通过网站结构来告诉用户他们现在在哪里,然后用超链接让他们能够返回到之前的位置。

4、可学习性

六合开奖结果现场直播 16

六合开奖结果现场直播 17

在理想情况下,用户对任何功能操作过一次之后,都会记住如何使用,然而现实情况并非如此。直觉化的操作和便于熟悉的设计必须贯彻到每个界面当中。

就像 TM Lewin 的这个页面,面包屑展现出的是特定页面对应产品,而产品是按照某个属性来组织的:

△ Argos.co.uk上面包屑的例子

成功的交互设计,应该充分借助一致性与可预测性的设计,来降低整体的复杂度。举个例子,有的页面值得保留,链接尽量在新页面中打开;而有的页面涉及到特定的操作和流程,不能在新页面中打开,防止用户重新定位。

六合开奖结果现场直播 18

最最重要的是面包屑导航能让人安心。大多数的网上活动都会涉及一种叫信息觅食的行为——是对知识的搜寻。想想看你在IMDB(互联网电影数据库)上找了多少次那个你记不起名字的演员。通常来说,这种觅食的行为需要比一个搜索结果页面更深入的东西。而这种情况下,面包屑是最管用的。

一致的设计确保了设计的可预测性,也提高了整体的可学习性。

层级还是历史?

试想一下,你想给你的礼物找一个红色的蝴蝶结包装一下。你用你最喜欢的搜索引擎搜索蝴蝶结,并且到达了一个网上零售商店的页面。如果这个网站有面包屑导航,那么它看起来可能是这样:

六合开奖结果现场直播 19

根据实际经验,绝大多数的情况下,面包屑还是适合展现层级机构而非浏览历史。因此,基于位置和属性的面包屑应用更加广泛,基于路径的面包屑相对少见的多。

礼品 > 包装材料 > 蝴蝶结(Bows)

UI模式是提升交互可学习性的常见战术。许多网站和APP都已经开始使用UI模式了,模式化的设计确保了一致性,也便于用户熟悉,同时也可以在此基础上添加更多大量的创意设计。

面包屑导航最佳实践

面包屑会提供你所看到的信息的上下文,并且向你保证你在正确的位置上。如果一个面包屑看起来像这样:

六合开奖结果现场直播 20

当你开始设计面包屑导航的时候,应当谨记下面的事情:

礼品 > 体育休闲 > 射箭工具 > 弓(Bows)

面包屑就是网页设计中最常见的一种UI模式,它引导用户更为有序地浏览网页。不论你在网站哪个地方,面包屑会直观告诉你浏览路径。这种熟悉化的设计提升了网站的可学习性。具备可学习性的网站会鼓励用户使用它们,自然而然地提高了可用性。

1、不要使用面包屑来替代网页主要的导航系统

……那么你显然会失去信心。

5、反馈和响应时间

面包屑只是一个辅助导航系统,它无法替代主要的导航系统。请记住,它是仅仅是为了用户方便的次要选项,用来抵达其他层级的快速定位链接系统。

六合开奖结果现场直播 21

反馈是交互的心脏。每一次交互都是用户产品之间的对话,所以你的产品最好保持着友好、有趣且有用的特性。

六合开奖结果现场直播 22

4,金发女孩和三只熊

六合开奖结果现场直播 23

2、不要将当前页链接加到面包屑中

UX知识:锚点有助于提供信息环境和重点

无论是精心设计的动效,有趣而生动的微互动,还是一个简单的嘟嘟声,你的产品必须同用户进行沟通,给予反馈,不论这个操作是否完成。

面包屑的最后一个层级是当前的页面,而这一项在面包屑中是不应该加上链接的,因为它只起到展示定位的作用,没有任何意义。

我们其实在借这个童话的名义说一个老掉牙的UX原理:金发女孩效应。这个效应常常发生在同时展现给用户三个相似的但是在量上有所区别的选项的时候。举个例子,三碗温度不同的粥。

在下面的案例中,Hootsuite 通过猫头鹰来展现用户长时间不操作而进入睡眠状态,这是符合逻辑且非常有趣的,这种反馈将停止更新的负面状态设计得有趣而好玩。

3、使用分隔符

这种三个按照特定规模组成的选项会导致两个重要的状况被创建:1)形成高低两个锚点。2)一个确定的中间选项。( 这里不要跟诱饵效应混淆,这是一种认知偏差,目的类似,但是实施起来并不相同)。

六合开奖结果现场直播 24

在面包屑中,用来分隔不同层级最常见的是大于符号(>),常见的使用方法是父类别 > 子类别。当然,分隔符的使用并不拘泥于这一种,有使用箭头(→)的,还有使用书名号(»)的,也有使用斜杠(//)的。使用哪种分隔符通常取决于整体风格和设计师的喜好。

锚点是我们为了理解真实的世界而创建的一个测量的基准线。

另外一个给用户反馈的重要因素是响应时间。通常给予用户最好的反馈就是尽快、尽早、立刻给予反馈。绝大多数时候,延时反馈会让用户感到非常烦躁的,除了极少数特殊的情况。

六合开奖结果现场直播 25

例如,你打算买一个你从未买过的昂贵的宝石,你从经销商A那得到£5,000的报价。从经销商B那得到£10,000的报价。看起来经销商A是更好的交易。

提升交互设计的五步流程

六合开奖结果现场直播 26

六合开奖结果现场直播 27

了解了交互设计的五大支柱之后,接下来我们来介绍提升交互设计的方法。

4、选择合适的尺寸和间距

但是当你从经销商C那得到£100,000的报价时,经销商A虽然还是最好的选择,但是经销商B忽然就显得没那么糟糕了。如果你买了这块宝石当礼物,在其它更贵的宝石的衬托之下,甚至会觉得经销商A的报价很便宜。

六合开奖结果现场直播 28

在设计的时候应当仔细考虑尺寸和间隔大小,不同的面包屑层级之间应当有足够的间距,确保用户能够识别。当然你也不希望面包屑占据页面太多的空间,如果面包屑比顶部导航还要大,看起来就非常尴尬了。

六合开奖结果现场直播 29

著名的交互设计师 Stephen P. Anderson 曾经说过,如果有人假装是你的界面,当你同他进行交互的时候,会大开眼界的。任何一个尴尬的反馈都会被放大,你会在这个过程中学会规避反人类的交互,当你完成整个过程,就可以开始编写交互的脚本,调整结果了。

5、不要让它成为视觉焦点

引入A和B两个锚点判断出背景环境。理想的情况下我们会去寻找更多的信息,在这个例子来说会去寻找更多的报价,这样我们就可以去判断A和B是正常报价,而C是特例了。但是,当面对的信息有限时,我们只能从已知的内容里做出判断。

接下来,我们说说具体的流程:

面包屑本身是一个辅助导航,如果使用过于花哨的字体和醒目的色彩,会使得它显得喧宾夺主,过于抓人眼球。它不应该是浏览过程中用户的视觉焦点。下面的面包屑设计并不差,但是它太过于醒目,甚至比顶部导航还能引起用户注意力。

在数字产品中,金发姑娘效应可以用来鼓励用户去选择特定的选项,以完成我们的业务目标。如果我们在网上销售服务或者产品,我们希望突出其中一个。那就在它的旁边加上另外两个选项。这么做会提升它在用户眼中的吸引力。如果额外的选项被选中了也没有关系,不过它们在页面中的主要作用是为了支持和强调明星产品而存在的。

1、角色扮演和互动:找两个人来,一个扮演界面,另外一个记录笔记。为扮演界面的人手持一个浏览器窗口纸板,并且同时通过投影仪投射出界面。你扮演用户,同界面进行对话,你阐述并解释用户的目标,而界面则仅限于标签、菜单和其他的UI元素来为你的操作进行反馈。

六合开奖结果现场直播 30

六合开奖结果现场直播 31

六合开奖结果现场直播 32

Google 的面包屑设计并不抢眼,但是用户依然能够很好的使用它。

assembla.com采用金发姑娘效应来给自己的3个包月计划定价

2、勾勒出叙事线索:记录者记录每一个步骤的细节,包括任务和情绪。完成这个步骤,可以借助User Scenarios文档来完成。

六合开奖结果现场直播 33

设计在这个效应里仍然起着重要的作用。颜色,距离,位置和字体粗细都用来在视觉上提升明星产品。但是这些选项是舞台上设置的锚。

六合开奖结果现场直播 34

6、不要在移动端页面上使用面包屑

锚点一旦被设定了,它就很难被改变。这就是为什么大家都觉得跟过去相比现在的一切都如此的贵。这是应为价格随着通货膨胀增加,但是我们并没有改变我们的锚点。例如,我记得我第一次买一包薯片花了20便士。现在,20年过去了,当我花75便士买一包薯片的时候还是跟最初的那个锚点比较。

3、简化步骤:有时候用户要达成目标需要经历许多步骤(比如买票),然而在制作原型的时候,就应该将一个复杂的目标肢解成为一系列简单的步骤(比如询问目的地,然后设定行程)。举个例子,维珍航空的阶梯型设计,就是为了让预订过程更简单易行。

如果你觉得自己的移动端页面上要使用面包屑的话,那就意味着你的移动端网页设计出现问题了:可能是网站太复杂(嵌套层级过深),而这样一来,就不符合移动端的使用场景了。为了解决问题,你应当试图简化整个体系,确保面包屑不会出现在手机上。

借用笛卡尔注明的主张我思故我在。锚点在我们如何感知这个世界上的作用告诉我们,我们是任何给定时间里知识的总和。

六合开奖结果现场直播 35

结语

六合开奖结果现场直播 36

4、控制用户选择:这可能是最艰难的一步,但是你必须尽量减少用户的操作。时刻审问自己,这个步骤当中的每一个选项是不是非要不可的,如果不是,将它分离到其他的非关键位置。

面包屑让用户可更加便捷地浏览整个网站,回溯到上级页面,寻找相关的产品,它对于整个网站结构是有意义的。它的功能并不复杂,增加易用性是它的主要作用,所以千万不要将面包屑复杂化。

5,丑小鸭

5、注意微时刻:Micromoment,这是一个新的合成词,指的是用户在与界面进行交互的关键时刻,这时候用户可能会犹豫、激进或者突然停止,我们姑且将其翻译为微时刻。回想角色扮演的环节,你会记得那些犹豫、忐忑的时刻。为了让交互更清晰,你应该充分运用每一个细节上的文案选取,结合可靠的UI模式,引导用户在这些微时刻作出对的选择。

欢迎关注doyoudo的微信公众号

UX知识:美是相对的

如果不注意细节魔术师的魔术会失败,同样的道理,糟糕的交互会毁掉整个用户体验。上面的流程可以帮你让交互设计成为界面和用户沟通的桥梁,而非单纯地让界面动起来。

丑小鸭故事的主旨是什么?是关于怎样克服挑衅行为,抑或宣扬内在美?坦白说我也不是很确定。

结语

对我来说,领会丑小鸭故事中所包含的相对性的概念,是能给UX设计带来帮助的最重要之处。丑小鸭,作为在同类比较中最差的那个锚点,如果没有他的存在,其他的伙伴们不会像他们看起来那样出色。

交互设计并不只牵涉界面行为,它是一项基于用户行为的适应性技术。用户在功能和情感上喜欢什么,期待什么,这是关键。但是也正是基于这样的限制,你所设计的产品应当是针对这些期望和需求而做的。所以,最好的交互设计大概是这个样子:对于用户响应迅速,不会夹杂太多的思想,就如同一个完美的魔术,流畅,值得期待,又符合逻辑。

同样的逻辑也适用于网页的复数个CTA(行为召唤按钮)设计。设想你在页面上有一个单一的CTA按钮(按钮1),用来提示用户执行某种操作,比如说,买一件商品或是把商品加入购物篮中。一名浏览该页面的用户必须做所谓的Hobson选择,即排他性的二选一:a)买或者b)不买。面临这种选择的时候,大多数用户会选择b)不买。

六合开奖结果现场直播 37

现在设想,我们在页面上增加了一个额外的按钮(按钮2),它被故意设计成一种需要用户付出更多努力,但仍然可以给我们的商业行为带来正面效果的选项,比如说分享这件商品的链接到用户的社交渠道这样一个操作选项。这个按钮就是这个例子中的丑小鸭。研究表明,当把按钮2放置在按钮1相邻的位置时,会给按钮1的点击率带来提升。这就是所谓的Hobson+1效应。

六合开奖结果现场直播 38

6,狼来了

UX知识:不要用虚假的信息去误导用户

当用户与网站或应用发生交互时,信息会以多种方式向用户传达。从内容群组化,到所选择的颜色,用户总是被我们所创造的标示所引导和影响,这便是符号理论的基石概念。(关于符号的研究,及符号学和UX设计的更多讨论详见:icon需要配上文字么?)

一个关于符号学应用的显著例子便是设计准则之一的功能可供性(affordances)。由UX教父Don Norman提出,功能可见性被定义为提供引发行动的诱因。比如,汽车门把手是被设计用来让汽车用户拉开车门用的,所以其设计特别鼓励并辅助了这一类行为的实施。在这个例子中,与用户沟通的标示含义就是:这是用来拉开的。

六合开奖结果现场直播 39

汽车门把手提供了拉开这一功能可供性

在网络设计的二维世界中,功能可供性的实施要难的多。网络设计的早期年代里,在镜像真实世界的尝试中,人们提出了拟物化的准则。比如曾经应用在iOS6上的景像深度设计,大家还记得么?

六合开奖结果现场直播 40

但是后来随着扁平化设计的应用,原来的方案中留下了很多看起来无法再点击的按钮。这些按钮已经完全失去了他们的功能可供性,以至于他们的含义难以解读。

这给用户们留下了一个关于信任的议题。是否所有矩形都是按钮?这要求接下来的网页设计师们,必须负起艰巨的责任来保证他们的设计是经过深思熟虑的,更重要的是保持一致性的。毕竟对含义的释读来自于经历的重复这一过程。如果一个页面中的蓝色下划线文字标识的是可点击的链接,那么我们就会据此推测在另一个页面中的相同样式文字提供了同样的功能。如果这一点被再次验证,我们的思维过程就会归纳出简化的模式来应对这一特定样式,即蓝色

  • 文字 + 下划线 = 可点击的链接。

如果我们接收的是虚假的信号,正如狼来了的寓言所提醒的,问题就来了。丝毫不顾及行动带来的后果,小男孩对狼群到来的虚警和村民赶来后的一无所获,两次,便足以让村民们对示警视而不见,以至于当狼真的来了的时候酿成了悲剧。

六合开奖结果现场直播 41

Lyondell Basell在标题,信息和文字链接中都使用了蓝色文字,造成了混淆

当用户访问站点却接收到了非本意和错误的指示时,同样的事情便发生了。如果网站本身的拥有者是知名品牌时,造成的不良效果会得到增幅,因为知名品牌本身具有权威的性质。因此关键在于设计的一致性,而值得再强调的是,一份规范的文档总是助益良多的。

记住:人们天然的信任权威,但是如果权威说谎,他们就再也不会给予其信任。

六合开奖结果现场直播 42

7,皇帝的新装

UX知识:不要害怕挑战成见

比起弄出一份声明把之前所有的启示再特意罗列一遍,这是多好的一种结束方式啊!

皇帝的新衣是一则告诫人们不要为骄傲所陷的寓言,它提醒着人们应该时刻质疑自己所被告知的信息。

还记得图片滚筒么?作为UX设计早期出现并十分流行的一种元素,几乎每个网站都对其趋之若鹜,希望在把其放在主页上以展示图片库,宣传和商品。而至今为止仍有很多网站在这样做。

六合开奖结果现场直播 43

但是数据表明这些并没有什么效果,甚至可以说是令人觉得丑陋的。之所以失效主要的原因在于,图片滚筒的主要设计意图是实现内容的隐藏和再现,而这违背了用户启发中最重要的原则:召回场景中的再识别。

将对象,行为和选项可视化,来最小化用户的记忆负担。用户没有必要记取当前段落之外的信息。

当用户翻转滚筒时,他们被强制的记取每一个选项的位置才能做出所预设的决定。更糟糕的是,我们人类天生就希望在做决策前能看到事物的全貌。这意味着,如果我们知道有25个选项提供给我们,那么我们很可能会看完他们全部再做选择。这对用户来说并不友好。

正如现实世界一样,我们创造的数字世界也是在不断变化的。这一副景象绝不会持续太久。在物理的世界和数字世界的交缠愈发紧密的当下,为了探知用户体验是如何参与其中的,周期性并基于证据的学习才是唯一的正确方式。

历史告诉我们,每当一个新的数字界面问世(台式电脑,触摸屏设备,可穿戴技术和虚拟现实)我们心目中关于UX的真理都会被质疑。

在这样的情况下,UI设计被迫回到原点去付出额外的努力来帮助用户采用新的技术。

还记得最开始的时候ios推出拟物化的界面设计,苹果这么做是特意通过真实世界来帮助用户更快的熟悉数字世界。

扁平化设计现在已经成为了网页和app的设计规范,但是在VR(虚拟现实)的世界中却没法这么做。在虚拟世界中一个文件被展示成一本书放在书架上可能是更好的选择。拟物化可能并没有死,而是周期性的继续存在着。

我们在这里能够学到的是,我们无法确定今天知道的知识能够继续在未来被使用。

随着时间的推移,轮播图可能会被取消。但是我们要知道挑战惯例是困难的(苹果花了6次迭代才有信心推出扁平化设计)。

其中一个解决办法是采用逐步减少的方式,这个想法最早是由Allan Grinshtein提出。这个方法的前提是,需要用户熟悉界面到已经不需要明显的设计线索。设计最终是由用户对于界面的熟悉程度来决定的。

随着曝光的增加,会越来越少的需要设计去手把手的引导用户。这会使UX需要迎合大众的部分去掉,取而代之的是越来越个性化的用户体验。

如果我们要创建图表去说明这一点,它可能看起来像一个这样的公式 x+y=10。X轴用来代表用户的专业水平,1代表用户不怎么熟悉UI,10代表用户非常熟悉UI。Y轴代表我们需要在界面上引导用户的程度。1代表不怎么需要,10代表非常需要。

六合开奖结果现场直播 44

很容易想象在未来,响应式设计不仅仅是关于网页如何适配尺寸。而是一个界面去适应不同类型的用户,高水平的用户和低水平的用户将会有不同的为他们定制的体验。

从某种方面来说这是 CRM(客户关系管理)的自然过程,在这个过程当中,随着对其掌握的宝贵客户关系的不断累积,这些商业关系可以化作商业关系资产而被加以利用,最终在交互层面呈现给用户更加有意义的讯息。这才是正宗意义上的个性化设计,一种由数据驱动的追求影响化最大化的设计模式。

如果说故事是人类接触的货币,那么UX设计就是铸币的过程。创造了一种可以让交易成功发生的机制。

编辑:摄影方法 本文来源:如何使用网页中为你指路的面包屑设计,从七个

关键词:

  • 上一篇:没有了
  • 下一篇:没有了