翻译:Grace Gogh 审校:冠男Ben | UXRen翻译组 #343译文
作者: cary-anne olsen-landis(前IBM Power Systems的经验研究主管)
原文标题:《Kano Model — Ways to use it and NOT use it》
设计团队为产品提出了一系列用户需求。
开发(工程师)团队带着的不一样的功能包来到会议桌前。
管理团队只想留下那些能使公司盈利的功能。
运维团队认为需要优化的功能则完全不同。
产品团队如何知道该朝哪个方向推动项目?
作为设计研究人员,我们借助用户的所言所行来深入阅读并洞察他们的需求。但是,我们中的许多人都在努力寻找新方法来实现需求的可视化管理,以便和上述的跨职能团队达成一致(拉齐认知)。用户当然可以对功能进行投票并对其进行排名,这可以提供很好的方向,但这并不能给到更深层次的需求定义,即哪些功能是必须有的,而哪些功能是在期望之中的。
现在开始认识卡诺模型。
图1:狩野纪昭(来源: Mind the Product)
Kano模型是由Noriaki Kano教授在20世纪80年代提出的产品研发和客户满意度理论,将用户偏好分为五类。它通过评估每种功能的2套衡量标准:满意度和情感度,来提供帮助我们了解客户对产品功能的看法。这2种衡量标准的组合形成五类属性:魅力属性、期望属性(线性属性)、无差异属性(次要属性)、必备属性和反向属性。
设计一个调查问卷,并独立列出每个功能。最好在可能的情况下通过原型或交互式线框稿来演示每个功能。你不必花太多时间进行原型设计,这只是传递想法的原型。有些人甚至只展示原型的某处细节,可能是因为他们喜欢这个点子,但并不喜欢它的实现方式。
图2:功能用图片展示的例子
如果无法使用demo来展现功能,说明性文字也可以很好地发挥作用。
图3:功能用说明性文字表示的例子
专家提示:与其他IBM研究人员讨论时,比较成功的研究人员测试了15–20个功能。那些不太成功的则测试了30-40个功能。 测试20多种功能对于客户和研究人员来说都已经足够多的啦(不建议超过20多个)。
看到每个功能后,用户可以对卡诺问卷的进行选择回答:
(Daniel Zacarias对于如何清楚地编写这些问题提供了一系列优秀的建议)
针对上述两个问题的标准Kano问卷答复为:
Daniel Zacarias还为答案集提供了其他一些选择。基本上,如果您要尝试使用卡诺模型,请阅读他的整篇文章。太奇妙了。
Jan Moorman还建议添加第3个问题:此功能有多重要?
她建议使用“一点也不重要”至“超级重要”的9级李克特量表。但是,当尝试在李克特量表上阐明重要性的9个点时,这有点棘手。似乎7点的李克特量表阐明起来比较容易。
图4:李克特量表的7级重要性
当你找到答案,Daniel Zacarias会介绍详细的分析过程。 我强烈建议您仔细阅读。
IBM的研究人员发现一个问题:得到这些数据很棒,但是数字本身并没有告诉任何人背后的原因,这是研究人员无法避免会被管理团队挑战的关键症结。 一个团队使用卡诺模型进行了大约15次定性访谈。另一个团队在从40个人中获得问卷样本后,又进行了5次定性访谈。两个团队都强烈建议在此过程中添加定性访谈,因为它有助于补充上下文的定性数据支持。
IBM的某个团队不愿再使用Kano模型。该团队之前会使用场景描述(Scenarios)来代替功能(features)进行调研问卷的设定,但是,在测试进展中他们明显发现设定的场景并没有真实反映客户实际使用产品的行为,最终导致测试失败。
使用场景来展示功能的想法很好,但是当我们在讨论该方法时必须事先验证。经过确定现状的生成研究后,卡诺+场景组合(kano+Scenarios)将会非常有力。
另一条建议是减少正在测试的功能数量。承担了30-40个功能清单的测试团队表示,如此多的功能测试太密集了。这会导致在测试结束之前,用户不知所措,且疲惫不堪。
卡诺模型非常擅长对功能进行优先级排序。卡诺模型的基础理论是Daniel Zacarias提出的“喜悦的自然衰减”。创新的想法和产品总会从令人兴奋的新颖功能(在Kano图表的顶部:魅力)转变成预期的功能(在底部:最好的必备,被贬损的,最糟糕的)。
利用卡诺模型获得最佳结果(来源:UX Booth和Jan Moorman)
以无线互联网为例*(灵感来源于参考文献中Jared Spool的示例)。
假设时间回到了2001年,你此刻正出差在外,带着一台具有以太网端口和WiFi的笔记本电脑。当你来到了酒店,发现有以太网端口可上网。尽管房费中未包含无线上网,但可以在商务中心使用WiFi。你此刻会很高兴!感觉太奇妙了!这是很棒的选择!
快进到2017年。你正在出差,并携带配备WiFi的基本笔记本电脑。当在酒店中,发现有以太网端口供连接Internet。房费中未包含无线上网,但是可以在商务中心使用WiFi。你真的会生气!这家酒店是什么鬼,需要额外付费才能上网?!还有谁依然在使用以太网端口连接到Internet?
经过了16年的发展,有些功能从最初的一种吸引人的功能(比如房间中的以太网端口,商务中心中的WiFi),变成了不受欢迎的功能。
如果团队不了解客户的需求,他们可能会专注于自己期望的功能,而不是极具吸引力的功能。使用卡诺模型的某IBM研究人员,在自己的团队中指出了这一点:“团队对某些功能感到非常兴奋,然后意识到这些都是桌面上的赌注。”
在讨论卡诺模型时,我们认为该模型还具有其他一些潜力:
痛点深度(Depth of pain points)
该模型有助于揭示现有痛点的糟糕程度。卡诺问卷很容易用于研究,以深入了解为什么痛点如此糟糕,以及为什么这些功能对客户如此重要。它可能会揭示一些以前无法确定的需求,并推动进一步的创新。
基准功能(Baselining features)
我们讨论了使用卡诺模型作为功能的定期评估项目,以观察哪些功能降为较低类别。这种具有足够大用户基础的纵向测试可协助分析市场趋势和期望,并有助于随着时间的推移持续证明研究价值。它还可以帮助团队了解他们的产品何时开始趋于平稳,何时需要创新的想法来回到引领潮流的状态。
有时,IBM的设计团队会担任某些项目的咨询顾问。IBM的一些设计团队被要求参与到某些项目中,以“梳理可用性”并在产品发布前渗入神奇的用户体验的“灰尘”。其他设计团队则暂时参与到边界更广泛的产品团队中。
在讨论结束前,我们还有一个悬而未决的问题:如果无法影响产品决策,卡诺模型还有用吗?你无法影响产品可能是因为该产品已经在开发中,或是由于管理层的压力,亦或是设计团队只是该产品团队的临时成员等等。使用卡诺模型的努力真的值得吗?
或者,即使不能影响产品,卡诺模型仍然可能有用吗?
你有什么想法吗?
在奥斯汀的IBM,一组设计研究人员会在每个月的某些时间共进午餐以讨论感兴趣的研究主题。之后,在IBM Power Systems的研究人员会收集并记录对话的重点。以上来自IBM Power Systems研究人员的午餐系列文章之一。
参考资料
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
文章来源:UX Ren 作者:宝珠
编辑导读:想要做好一个设计师,就要多研究优秀人士的作品,取长补短。现在互联网的发达,很容易就能在网上找到相关的学习资料。本文以史蒂夫·克鲁格的名著作为引入,分享20句关于界面可用性设计的名言,希望对你有帮助。
设计,以及许多其他领域,都是建立在优秀专业人士的作品和发现之上的,每个想要成为某个领域专家的人经常寻求指导来学习如何把事情做好。专业导师的各种书籍和文章现在都可以在互联网上免费阅读,让努力学习知识的人很方便的找到。
我们经常会分享来自数字设计领域最优秀专家的名言和睿智的想法。你会在迈克·蒙泰罗(Mike Monteiro)所著《设计是一项工作(Design Is a Job)》里找到有关设计的短暂洞察,奥伦·沃特尔(Aarron Walter)的《为情感而设计》(Design for Emotion)以及排版大师埃里克·斯皮克尔曼(Erik Spiekermann)的一系列智慧思想也是如此。
下面我们要分享的是史蒂夫·克鲁格(Steve Krug)的名著《不要让我思考(Don’t Make Me Think)》中的一组引言。
2000 年初版,14 年后再版,《Don’t Make Me Think》在今天仍然切合时代发展,符合实际需要。史蒂夫·克鲁格为界面可用性设定了一些基本原则,并与该领域的专业人士分享,这使得本书成为 UX 设计师推荐的最重要的资源之一。
可用性第一定律——“不要让我思考”描述了关于网站可用性的要点、案例和见解。创造不需要用户过多思考的界面设计,不仅可以解决问题,而且易于使用。这里有 20 句名言,反映了“不要让我思考”的一些关键点。
1、如果某件事需要大量的时间投入——或者看起来会这样——它就不太可能被使用。
2、让每一页或每一个屏幕都不言自明,就像商店里都有良好的照明:它会让所有的商品看起来更好。访问一个不需要我们思考的网站会让人感觉毫不费劲,相反,为不相关的事情多花心思会浪费我们的精力、热情、还有时间。
3、无用的客套话(“happy talk”)都是一种沾沾自喜的宣传,你可以在蹩脚的小册子里找到。与好的宣传文案不同的是,它没有传达任何有用的信息,它一个劲的说我们有多棒,而不是描述是什么让我们这样棒的。指示说明必须被消灭。
4、可访问性(Accessibility)非常重要,它不仅仅是正确的做法,而且是非常正确的做法。关于无障碍访问,如果没有引起足够的重视,你就无法意识到,它能显著的改善一些人的生活。仅仅通过把工作做得更好就能显著改善人们的生活,这难道还不够厉害吗?
5、另一个让人困惑的来源是那些看起来不太明显的链接或者按钮。作为一个用户,我永远不应该花哪怕一毫秒的时间来考虑这些东西是否可以点击。
6、最近几年里,让产品更加易用成为几乎所有人的责任。现在,视觉设计人员和开发人员常常要做交互设计(决定用户单击、按下或滑动时下一步会发生什么)和信息体系结构(确定应该如何组织所有内容)之类的事情。
7、可用性(Usability)就是确保让一个能力和经验一般(甚至低于平均水平)的人,能够想出如何使用并完成任务,而不必费事。相信我:事情就是这么简单。
8、可用性是有关人们如何理解和使用事物,而与技术无关。
9、关于指示说明,你只需要知道一点就够了:除非“蒙混过关”多次尝试失败,没有人会去读它们。
10、你越仔细观察用户,并倾听他们明确表达他们的意图、动机和思考过程,你就越会意识到,他们对网页的个人反应是基于许多变量的。试图用一维的“喜欢”或”不喜欢”来描述用户是徒劳的,而且会适得其反。另一方面,好的设计会考虑到这种复杂性。
11、那些设计网站的人并不在乎让事情变的明显和容易,这会削弱我们对网站及其背后公司组织的信心。
12、然而在现实中,大多数时候我们不会选择最佳选项,而是选择了遇到的第一个合理的选项,即所谓的“满意”(satisficing)策略。
13、大部分的网页设计问题(至少是对重要的那些问题来说)都没有一个简单的“正确”答案。有效的答案是那些运作良好的、满足需求的综合设计,它们往往经过了仔细思考,良好的执行和测试。
14、删掉每页上一半的文字,然后把剩下的再删掉一半。
15、设计师喜欢微妙的线索,因为微妙是复杂设计的特征之一。但网络用户通常都很匆忙,经常会错过这些线索。
16、如果你在设计了很多不同的网站之后只发现一件事,那应该是:几乎所有的设计理念——无论一开始多么糟糕——都可以通过足够的努力,在合适的环境下变得可用。
17、你的主要职责应该是分享你所知道的,而不是告诉人们应该怎么做。
18、你的目标应该是完全删除说明文字,让每项内容不言自明,或者尽可能做到这一点。当说明文字绝对必要时,把它们减少到最少。
19、和遵循惯例去设计相比,设计师们面临很大的诱惑去重新发明轮子。很大程度上是因为他们觉得自己被雇来是要做一些新的、不同的事情,而不是做原有的旧事情。更不用说,来自同事的赞扬、奖励和高级职位很少是基于“最好地利用惯例”这样的标准。虽然少数时候,在重新发明轮子上花的时间足以制造出新的革命性滚动设备,但通常情况下,这只是浪费时间而已。
20、如果你想要一个很棒的网站,一定要测试。因为你在这个网站上工作了好几周,已经失去了新鲜感。你了解的太多了。要想知道它是否真的有效,唯一的方法就是测试它。
文章来源:人人都是产品经理 作者:Alina Arhipova
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编辑导读:对于老一辈人来说,他们没有赶上互联网兴起的时候,等到想要主动“触网”时,才发现很多操作根本搞不清楚。尽管产品设计师已经极可能考虑到了老人群体的用户体验,但在实际操作中,老人家还是一头雾水。这时,操作越是简单的产品,越能够赢得他们的喜爱。本文作者从自身经验出发,对这类现象进行分析,与你分享。
上周某天吃完晚饭,我妈递过她的华为手机怯怯地问我:你有空吗?我想叫你帮我跟那个商家说换一个快递,我们家这边的百世快递的站撤了,叫他们不要用这个快递。
我脑海中闪过一个念头:嗯?最近我没有帮她付款啊。但随即也是接过她的手机打开了淘宝。我妈立刻阻止我:不是淘宝,是拼多多。随即自己打开了她微信里的拼多多小程序,演示给我她找不到商家客服。我跟她说,这个功能要用APP才行,于是帮她下载了拼多多APP并很快解决了问题。
弄完之后,我们又展开了这样的对话:
我妈:哎呀,这个拼多多真是太好了,物美价廉,超方便!你怎么不早教我用!
我:我自己都不怎么用拼多多啊!
我妈:这个是我的舞友上周教我的!我打开一看,哇,好多有用的东西,又便宜!第一天我就买了几百块的!
我:但是拼多多很多假货啊!
我妈:我又不像你们追求什么名牌!有什么假货可言?一条裙子30块!
我:……
我妈:而且!以前我在淘宝总要你帮我付款,现在我用拼多多自己用微信就可以支付了。
我:我早就叫你开个支付宝账号,你自己又不开!
我妈:那么麻烦,我不会,你又不教我!而且又要绑定银行卡,万一哪天我的钱被人家骗走,那些什么黑客……
我:哪有黑客黑你,你又不是马云……
我妈:还有,拼多多退货很方便!以前我在淘宝的时候,退货要你帮我搞,还要在家等快递上门,很不自由,现在我自己去菜鸟驿站退就得了。
我:好吧。
我妈:以后我就用拼多多,我那些舞友都在用!
我:你开心就好。
我回头想了想,这是一个以用户定位和产品特征为优势抢夺用户的典型场景。
首先看看以我妈为原型的粗略用户画像:
为什么我说拼多多是从用户定位和产品特征这两个维度抢夺走了我妈这样的淘宝用户的呢?
首先,我用的是“抢夺”这个词。
我并没有用挤占、分流这样的词。因为,在跟我妈的交谈里,我已经感受到她心里估计“从此淘宝一生黑”了。也确实,一个月以来我妈没有再叫我在淘宝付款过。所以,我想我妈大概率未来不会再用淘宝了,也就是说,淘宝直接流失掉了我妈这个用户。
其次,来看看用户定位。
根据上面我列出的以我妈为原型的用户,多吗?我简单查了一下。
根据国家统计局官网上发布的《中华人民共和国2019年国民经济和社会发展统计公报》,60周岁以上的人口约有2.5亿人,60-65周岁的人口约有83250000人,分别占人口总数的18.1%和6%;根据中国互联网信息中心官网发布的《第46次<中国互联网络发展状况统计报告>》,截止2020年6月,我国手机网民用户规模达9.4亿。
那么,根据这个比例可以推算,这样的用户大约在5千万—1亿的规模。
这么大的一个用户群体,实际上是淘宝自己放弃掉的。自从前几年淘宝打假货的行动和品牌化(力推天猫)的战略执行以来,实际上大量的县城以下、60岁以上的用户都被淘宝放弃掉了。
以我妈为原型的这批用户,他们大多数没有支付宝账号,但在微信上有钱,但除了平时发发红包,菜市场便利店买点东西,基本上还是没有用出去。于是,这批用户沉淀在微信钱包里的海量的钱,很难直接转化到淘宝上。
另外一个关键的地方在于,他们对淘宝是有怨言的,但在拼多多出来之前,没有替代物。某种程度上来说,对用户而言,忠诚度是很虚无的。真正对品牌有感情而产生“忠诚”的用户极少极少,品牌还是得需要不断优化产品,满足用户的需求。
品牌也好,产品也好,本质上是为用户提供价值,而不是要跟用户“谈恋爱”。
这是很多品牌的一个误区。没有在自身的产品上下功夫,去了解用户瞬息万变的需求,而去打“情怀”,讲“文化”。所以,我们可以看到当某些品牌醉心于自己的“情怀和文化”之时,其竞争对手在了解用户需求和优化产品而推出竞品后,瞬间打垮行业老大哥的案例。
最后来讲讲产品特征。
我妈使用淘宝的流程是怎么样的呢?
挑选商品——下订单——点击“找人付款”——发送需支付的订单到我的淘宝账号——退出淘宝——打开微信——告诉我发了一个订单——发红包给我——我看到微信或淘宝信息——点击需支付的订单——支付——退出淘宝——打开微信收红包。
而她使用拼多多呢?
挑选商品——下订单——支付。
当我列出这两个产品使用流程之后,我猜如果你是我妈,你也会用拼多多了。
在我妈跟我的对话里,还突出强调了“退货难”这个点。实际上是淘宝的物流服务不好吗?并不是。我一直觉得淘宝的物流虽然不如京东,但并不差,而且也不断在优化升级。但为什么我妈还是觉得不好呢?这一点不能单纯地从物流本身来看,而得回到淘宝的产品来看。
在淘宝上,推出了一个功能,叫“找人付款”。当时我觉得这个功能很好,解决了我帮我妈买单时,她要跳出淘宝从微信给我发链接的麻烦。但最终却带来了一个重要的弊端:当要退换货时,我这边无法执行,她那边又不知道如何操作。
而当我从PC端登上我妈的淘宝账号之后,PC端的退换货服务非常麻烦和繁琐,让我都研究了差不多一个小时才解决。而最后,我妈那边又无法支付退货费用,我在PC端也支付不了,也不能“找人付款”。总之,整个过程极其麻烦。虽然淘宝也意识到了产品上的缺陷,但目前的情况而言,这样的产品还是对于我妈这样的用户非常不友好。
而拼多多呢?它基于微信这个社交生态圈。加上没有什么太多余的功能,我妈很快就能上手了,自己操作还是比别人代操作方便多了。
谈到这里,我还意识到一个重要的问题。
从产品对人际关系的影响而言,淘宝是负向的,而拼多多是正向的。从某种程度上而言,60岁以上的这代人,是被互联网抛弃了,所以当他们想搭上这波潮流时,不得不面对自己的儿女,需要向他们请教,怎么用怎么学。这一点首先就会让不少子女心烦,不少父母自卑。
再进一步,如果每次父母网购都得“捆绑”上子女时,对人际关系是正向的吗?而在拼多多上购物时,他们不仅可以大大优化自己的产品使用流程,还能跟自己的老朋友们一起拼单,互惠互利,这对人际关系的影响有很大的正向作用。
你有什么被别的产品抢走的故事吗?
一点个人小想法,想到哪写到哪。
如果你有不同的意见和想法,欢迎评论或留言。
文章来源:人人都是产品经理 作者:@源记物语
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
Apple 致力于让每件产品都赏心悦目,与其说官网是产品展示平台,倒不如说它是苹果产品分支的延续。从 Apple.com 找设计灵感是每一位设计师都做过的事,那它到底有何魅力?文章对Apple的网页设计展开了梳理分析,与大家分享。
每当有新产品发布时,我们都会被它的 Landing page 所吸引。不管是 AirPods Pro 也好,和前段时间发布的 iPad Pro 也一样。
这背后是 Apple 基于 webGL 技术,创造的一种沉浸与交互式产品体验。
我们在产品介绍页可以看到,苹果使用了大量的滚动 scroll 来体现连续性。
一方面,滚动作为大多数 Web 用户最自然的操作,学习成本极低。
另一方面,在冗长的页面下,滚动能让产品特性保持更自然的转场衔接。
iPad Pro 的连续性
另外,采用了大量的动画式转换(animated transition),即操作时展示的动态效果,以此来增加趣味性。
伴随着丰富的、若隐显现的章节文案,就像电影的旁白一样,娓娓道来。
通过滚动的方式增加交互性,这是明智之举。试想一下,如果只放置已渲染的演示视频,那么用户的操作会受到限制,只能在视频中前进或后退,毫无乐趣可言。
AirPods的趣味性
说到言之有序,我们看 iPad 的页面介绍。四款产品,分别是:iPad Pro、iPad Air、iPad、iPad mini。
拍摄角度的秩序感,可谓妙不可言。
iPad的秩序感
如此一来,即显得有序,也不会导致视觉疲劳。
其次,官网与 iOS 保持协同的设计语言,给用户呈现了一致的感官体验。
从 iOS 11 开始,苹果就采用了 Large Title 大标题的字体风格。字重也从 Regular + Light 的组合,转向的 Medium + Bold ,以此增强信息传播中的识别力。
HomePod
另外,高斯模糊的标题栏背景、产品的投影等设计语言也保持系统一贯的风格。我们可以很清晰的看到 Web 设计的同步转变。
第三是视差带来的层次感。
苹果奉行包豪斯的无装饰和极简的理念。当然,它不是那种附庸的美观及外表的光鲜,而是将复杂难懂的技术以简洁的形式传达给用户。
Mac Pro 视差滚动
在信息层次方面,Apple 的编排设计由浅入深,犹如抽丝剥茧。很好的利用了视差滚动,传达图片与文字之间「层」的概念。这种深度感可以增加用户的理解和乐趣。
不仅如此,样式上富有视觉张力。或扩张、或收缩、或吸引、或排斥之感觉,呈现刺激与震撼。举两个例子:
A13芯片的扩张力
扩张力:整个画面以 A13芯片 为视觉中心点,元素和布局围绕这个视觉中心点向外扩张。采用发散式的视觉引导,视觉张力就出现了,让人感觉巍峨壮观。
Pro级摄像头的排斥力
排斥力:通过元素的大小对比,可以形成一定强度的视觉排斥力。Pro级摄像头 辅以大特写,传达空间意识。视觉上被其构图、美感触动。
再聊聊苹果的高级感是怎么来的?
我们都知道,高饱和度的色彩,会影响人的情绪波动。相反,低饱和度的配色,对人眼的刺激较弱,会有一种冷静且克制的高级感。
iMac Pro 高级感
回过头来看苹果官网的大部分页面,除了产品界面色彩 和 按钮蓝 之外,其他的文字、背景、控件一律采用黑白灰色系,以此营造高级感。
甚至是 iPhone 11 Pro 新出的暗夜绿,也是高级灰中加了一点点绿而已。
换言之,减少使用颜色的数量,降低色彩的饱和度都能削减色彩对人的情绪,起到提升产品高级感的效果。
iPad 留白
除此之外,恰当的留白可以更加突出产品内容,让重要的信息更准确的传达。并且能营造出广阔的空间感,让画面得到延伸,呈现一种意境美。
所以我们做设计时应当多做减法,避免无意义的视觉元素堆砌,反而能让你的设计更有高级的气质。
这又印证了现代主义建筑大师密斯·凡德罗的那句话:Less Is More。
当然,只有留白是不够的。既然是做宣传,那么一份高分辨率、精致的配图就显得尤为重要。
苹果官网大部分的产品都是采用实拍+后期修图,而非渲染图。目的就是为了反映真实产品的质感、以及材质光影效果,这一点能看到苹果对于品质的追求。
Designed by Apple in California
不仅如此,苹果产品圣经《Designed by Apple in California》,以及壁纸同样是由摄影师拍摄完成。有兴趣的同学可以看下面这个幕后制作视频,相当硬核。
做过英文 Web 的设计师都知道,英文往往比中文更好设计,相同的布局英文出来的效果也更好看。
这不是崇洋媚外,心理学有个词叫做「母语羞涩」。简单来说就是,中文对于我们来说,太常见了会让人产生一种廉价感(实际上是羞涩感)的心理感受。
老外也一样,你可以看到美国企业:苹果、麦当劳、星巴克都是使用图形 Logo,而日本企业不用母语,而是用英文,比如 SONY、TOYOTA、Canon。
你的下一台电脑,何必是电脑。
回到苹果官网,我们看到一部分文案是英文产品名称,这个不会感觉羞涩。
那中文部分怎么办呢?比较有意思的是,Apple 的本土化团队用了完全不对仗但押韵、奇怪的排比、双关、重复等修辞手法。虽然语感很差,但基本上能明白字面意思。
其实这样做的目的就是为了创造一种陌生感、一种独特的语言风格,来凸品牌气质。举几个例子:
最后一点。生活要有仪式感,苹果官网也有仪式感。
国际妇女节专题
在一些特殊的日子里,例如三八节当天,友商选择打广告促销。而苹果推出了国际妇女节专题,致敬女性的伟大,这一做法颇具人文情怀。
不过话又说回来,感动归感动,还是参与友商的打折活动香。
文章来源:人人都是产品经理 作者:阿洋
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在做交互设计或者视觉设计时要遵循一些既有的原则,其中非常重要的一条就是【格式塔定律】
一、什么是格式塔原理?
格式塔心理学诞生于1912年,是由德国心理学家组成的研究小组试图解释人类视觉的工作原理。他们观察了许多重要的视觉现象并对它们编订了目录。其中最基础的发现是人类视觉是整体的:我们的视觉系统自动对视觉输入构建结构,并在神经系统层面上感知形状、图形和物体,而不是只看到互不相连的边、线和区域。“形状”和“图形”在德语中是Gestalt,因此这些理论也称做视觉感知的格式塔原理。
格式塔学派主张人脑的运作原理属于整体论,“整体不同于其部件的总和”。例如,我们对一朵花的感知,并非纯粹单单从对花的形状、颜色、大小等感官资讯而来,还包括我们对花过去的经验和印象,加起来才是我们对一朵花的感知。
格式塔心理学家认为这些原则之所以存在,是因为头脑具有天生的倾向,可以根据某些规则感知刺激中的模式。(是不是觉得hin神奇)
比如,这是著名的“人脸花瓶幻觉”图。如果以黑色为背景,白色为图形,则是一个花瓶;如果以黑色为图形,白色为背景,则是两个人的侧脸。它也反映了图形和背景对一幅图的影响。
二、什么是格式塔原理?
使用不同数量的空格来合并或分离元素是传达有意义的分组的关键。例如,在Ant Design的标题区域中,“ 搜索”功能与站点的主要导航位于同一行。但是,主导航和搜索之间的多余空格表示它们属于不同的组,因此具有独特的功能。对于使“ 搜索”功能在主菜单的其余部分中脱颖而出,此空格至关重要。

但是,在较小的屏幕上,无法保持此间距。为了避免将这些区域视为一个整体,页面收缩宽度的时候,搜索后的文字隐藏了。
应具有固定或锁头标题的网站特别可以从使用独特的背景颜色或清晰的边框中受益,从而有效地将标题与下面滚动的页面内容区分开。此外,大页脚的单一统一背景色 可有效地表示该区域中的所有链接都属于一个组。
创建清晰的边界是一种强大的视觉提示,可以压倒其他分组原则,例如接近性或相似性。因此,当需要包含几种不同类型的UI元素或无法调整对象之间的空白量时,它是一种强大的工具。我们做页面时如果需要把两个元素放成一组与其他元素区分,那么我们可以用线框画出边界来达到目的。
如果其它因素相同,那么相似的物体看起来归属于一组。接下来从形状、颜色、尺寸上来说明相似性原理,这也就是我们平时做视觉设计时的原理,比如我们设计稿宣讲时可能会被开发、产品以及测试同学问到“为什么用这个形状?为什么这里用这个颜色?为什么这两个尺寸不一致?等等,细细体会这个相似性原理就会给我们答案,让我们在画设计稿时能够有理有据。
在上图中,我们头脑中自然而然的会分成“四列”,也就是圆形一列,三角形一列,然后再圆形一列,三角形一列,而不会看成“三行”
应用共享的颜色来表示某些项目是相关的,因此可能具有相似的功能,这很有效。通用颜色往往比其他特征(例如形状)更加突出,因此可以用于组合不同类型的元素并传达它们确实相关。
在用户界面设计中,颜色通常用于指示常用功能。例如,使用单个链接颜色作为与用户交流可点击内容,链接颜色应仅保留给交互式文本和其他可单击元素,因为用户会意识到所有具有此特征的项目都是相关的,并且以相同的方式工作。因此,链接颜色不应用于关键字,不可点击的标题或实际上不可点击的附近图标。
如上图,就是一个用色的反面例子,“ 消息中心”中的所有按钮均为绿色,因此用户必须花时间确定哪个是提交表单的主要按钮。(此外,“ 提交”按钮离消息区域很远,并且根据Fitts的定律,这种缺乏接近性也会降低用户的速 度。)
相同颜色的按钮将被视为具有相同的重要性级别。因此,应为主要操作性按钮保留单独的颜色,以帮助它们在辅助按钮中脱颖而出。
在用户界面中,我们经常使用大小来强调内容或按钮中最重要的部分。相同的大小表示相同的视觉突出度,并且在所有其他条件相同的情况下,将共享该属性的所有元素连接在一起。一致地使用大小会创建视觉层次结构,并使页面易于扫描,因为人们可以立即看到并理解这些类型分组。
例如,在产品列表页面中,每个单独的产品列表都以相同的大小(和相同的形状)显示。这种一致的视觉样式告诉我们该区域中的所有物品都是产品。共享大小将其与其他不同的UI元素分开。当某项商品在此列表中以不同的大小或形状出现时,就会突出显示为不属于产品分组。下面这个产品集合的促销以单个产品列表大小的两倍显示。
下面是我最开始尝试的招聘系统首页的改版:
根据上面的相似性原理和接近性原理就可以很容易看出来,这个页面结构和逻辑不清晰:
1.待处理和招聘日程两个模块之间的区分不够清晰:因为这两个模块右侧应用了同样的形状和颜色的按钮(相似性原理),让用户在心理上产生联想,同时这两个模块之间只靠间距来区分,区分的太弱了(接近性原理)
2.招聘日程头部日期与下面的面试安排卡片联系太弱:因为面试卡片用了非常强的边界区分的线条(接近性原理-构建清晰的结构)确实在面试模块之间构建了清晰的结构,与此同时卡片与头部的日期之间看起来没有什么关联。
3.首页的选中效果太弱,分析这个页面的层级,左侧首页选中才应该是最重的,能让用户第一眼就知道在系统中的位置,很显然目前来看很容易忽视首页这个位置,关注点被吸引到了快捷入口。这并不是我们想要传达给用户的。
根据格式塔原理中的相似性原理和接近性原理,对页面的结构进行了调整,就看起来清晰多了。
所以,我们在制作完设计稿后,可以应用格式塔原理,分析下最终呈现给用户的结构和逻辑是否清晰。而这也是做视觉的理由和底气。
视觉倾向于感知连续的形式而不是离散的碎片。
连续理解起来是很简单的,但连续却解决了非常复杂的问题。通过找到非常微小的共性将两个不同的环连接成一个整体。在引导页中经常会用到这个。
视觉系统自动尝试将敞开的图形关闭起来,从而将其感知为完整的物体而不是分散的碎片。
闭合可以实现统一整体,这不难理解。但是有一个非常有趣的现象值得我们去观察和思考,就是不闭合时候也会实现统一的整体,更确切的说,这种现象是一种不完全的关闭。这些图形与设计给人以简单,轻松、自由的感觉。所以,完全的闭合是没有必要的。最著名的应用便是苹果公司的logo,咬掉的缺口唤起人们的好奇、疑问,给人巨大想象空间。

我们倾向于分解复杂的场景来降低复杂度。
我们的大脑将视觉区域分为主体和背景。主体包括一个场景中占据我们主要注意力的所有元素,其余则是背景。这个原理经常会在海报设计中应用,这也是为什么我们做海报,做平面时,一定要制作好背景,背景的氛围很重要。
文章来源:站酷 作者:ZZiUP
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
今天为大家带来的文章是「地图标签」设计。很多App会内嵌地图功能,这些地图的功能相对简单,更多是起到查看和引导的作用,但在产品中又不可或缺~
除了常见的地图类App,还有其他很多产品会根据使用需求嵌入地图功能,通过在地图页中添加引导性的交互标签,让用户了解所处的位置或者导航路线。
如何保持地图页面与产品风格统一,同时又方便用户使用呢?通过系统化的方法可以快速实现地图组件的选择和归类。
1. 图标
地图上只标记图标,这种呈现方式能地显示地图上的信息,减少内容遮挡,也是在设计中首先要考虑的类型。
2. 文本
如果地图上标记的内容没有合适的图标能展示出来,可以直接利用文本来描述。
3. 图标和文本
随着地图的放大缩小,气泡信息的详细程度也会发生变化。地图放大时将图标和文本相结合可以显示更多的信息,而缩小时只显示图标。
4. 图标、文本和注释
图标,文本和注释相结合的形式虽然能显示更多的信息但是需要谨慎使用,因为气泡的尺寸太大会遮挡地图的内容,反而影响使用。
只有当气泡内容能显著提升用户体验时,才使用这种类型。
大多数场景中,地图组件的底部会有一个突出的箭头,用来标记确切的信息或地址。
考虑到后期开发的难度,箭头的位置应始终位于组件的中间。另外如果一个页面中有多个地图组件,可以将箭头调整到顶部,防止发生重叠。
1. 颜色
组件的颜色比较灵活,默认情况下是白色,但可以通过改变背景色来匹配品牌色。
颜色通常出现在图标后面用来强调信息,如果没有图标可以把整个气泡组件都填充上颜色。
根据背景色的不同,文本和图标尽可能使用黑色或白色,减少对内容的干扰。
2. 状态
地图气泡尺寸的大小根据点击需求确定。白色轮廓加上胶囊形状让用户能够快速识别出可点击的对象,选定后气泡颜色会反转。
3. 内容缩放
组件基于地图缩放级别和缩放速度展示不一样的动画效果。
如何判断设计出来的组件是否适合用户使用?组件需要怎样设计才能适用于不同的使用场景中,有没有统一的规范?
1. 组件状态
面对不同场景中的组件,提供多种状态:重叠、可见、收缩、聚类、分离。
2. 密度
地图中至少要保持40%的内容是始终可见的,这样用户可以明确位置信息,防止产生误操作行为。
利用聚类功能将相邻的气泡组件合并在一起,通过数字显示包含的内容,这种形式利于用户理解和操作。
3. 易读性
易读性在地图中很重要,例如用户手持使用手机时组件中的字体为15pt,当用户驾驶导航时组件的字体会变为24pt。
另外还要考虑语言的选择对组件的影响,最好避免在气泡组件中使用长串字符,以防止地图中的信息被遮挡。
如果必须要显示长串字符,需要把气泡组件的尺寸水平拉长至地图尺寸的75%,然后换行且最多只能显示两行文本。
在开始设计地图UI界面之前,有必要花费时间了解地图组件的样式、类型和可用性指南。
通过这些信息可以帮助设计师更快地确定方向,从而设计出清晰美观的地图界面。
文章来源:优设 作者:Clip设计夹
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
地图作为记录地形传递路线信息的载体,在人类文明中一直扮演着重要的角色。其承载形式一直紧跟着时代技术的发展而变化,从石板、动物皮革,到丝绸、纸张。当互联网走进千家万户,地图也步入电子化时代。
相较于纸质地图,电子地图优势显著:更新速度快、获取信息效率高、更清晰、可交互等。电子地图(后文简称地图)的出现也影响着人们的出行方式,尤其当智能手机普及,我们可以随时查询地点、发起导航,再也不需要提前记下高速出口和转向路口了。
滴滴拥有网约车、代驾、骑行、公交、自驾导航等众多业务,是一站式出行平台。而地图作为承载出行服务的重要载体,横向支撑着各业务线的发展。以网约车业务为例,调研结果显示绝大部分乘客都会关注并使用地图。
随着各业务线对体验的要求不断提升,单一的地图模式已经不能满足业务诉求及用户需求,需要进一步细分场景、精细刻画地图样式,于是地图的设计也变得愈发重要。
地图承载的信息种类复杂、数量巨大,初期可能会找不到设计切入点。我们可以先了解下它的定义和实现方式,或许就能从中找到答案。
定义:地图是依据一定的数学法则,采用地图语言,经过制图综合来表示地球表面的图形。
实现流程:
结合“从雏形到完整地图”这一步流程的实现方式,进而可将地图拆分为基础层、策略层和感官层。帮助各职能角色找到对应切入点。
解构地图后,我们不难看出,感官层是设计侧需要关注的重点层级。
面对如此复杂的地图信息,为了梳理出清晰的思路,我们会对地图元素进行分类:根据数据的类别和呈现状态,可拆分为点、线、面三类元素。
名词解释:POI, Point of Information的缩写,即“信息点”。一个POI可以是一栋房子、一个商铺。
名词解释:AOI, Area of Interest的缩写,即“信息面”。指的是区域状的地理实体,如医院、小区等。
从定义可以看出,地图是一种特殊的图形语言,是以上所有元素的集合体。相比我们所了解的UI设计、运营设计,地图有属于自己的设计原则。以下为大家总结了一些核心的原则:
符合制图学和公众认知
地图发展到现在已经成为了一门学科,我们会发现即使语言不通,拿到一张地图时也能看懂,这是因为有制图学和公众认知在规范着地图设计。如地图默认北向上、草地水系基本遵循物理世界的颜色、省界线是实线、停车场图标大多用P来代表等等。符合制图学和公众认知,大大降低了用户的学习成本和记忆负担,使地图可以作为一种世界通用语言流通起来。
保证识别度
地图属于信息类工具,其上出现的元素均需清晰可识别,保证可读性是最基本的设计原则。所以在设计时会限制颜色对比度、最小字号等,而具体规则会根据场景确定。
清晰有层次
地图的层次清晰包含了两个方面:信息主次清晰,视觉具有整体性。
信息主次清晰,地图信息庞杂,没有主次关系会影响用户的读图效率。在设计时需要考虑元素本身的特点、重要性,可通过颜色、icon/文字大小、线形宽窄等表达。做到同类元素有关联性,不同元素有差异性。同时,信息主次也会根据比例尺的变化有所调整。
视觉具有整体性,在滴滴的业务场景中,地图通常作为最底层组件出现,上层还会有很多业务组件。因此在设计时需克制用色,既要保证地图中各元素之间的区隔度,又要保证地图整体与其他业务组件拉开视觉层级。这样才能更好的突出当前业务模块的重点,提升整体的使用效率和体验。
细分地图模式
地图在各业务模块中应用广泛,用户需求也不尽相同,设计时需要根据使用场景区分不同模式。以网约车场景为例,业务信息始终处于上层,地图用来帮助用户定位、快速发单。因此,网约车场景的地图整体性强、色调偏冷、视觉层级后退,能更好的搭配网约车模块的整体设计,保证用户的操作效率。
具有品牌特性
品牌调性一直是滴滴设计层面非常关注的原则,品牌基因贯穿了所有产品,始终具有独特的视觉风格。遵循品牌的视觉语言,使地图可以更好的融合到产品中,保证了设计的统一性。
文章来源:优设 作者:CDX创意设计中心
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
牛津词典上有对Navigation一词在互联网领域的解释:
the way that you move around a website or the Internet when you are looking for information
翻译为:你在浏览网页时四处移动寻找信息的方式
也就是说用户看到的,影响其寻找信息的因素都可视为导航。
交互上:
用户在使用传统方式阅读时,所处的空间是单向的,只能向前或向后翻页;
而在网页领域,所有的内容都存放在各自的URL里,信息在多维度多空间里相互交错,各有联系,可跳跃的阅读方式让用户很容易失去位置感。
试想一下我们在大型商场里晕头转向的场景,会常常抱怨其导视系统的糟糕,网站有过之而无不及。
业务上:
从潜在用户想要了解某个产品时,导航就开始起作用了
影响点击量:网站排名高低,搜索带来的点击量
影响转化:网站的易用性,访问者转化为潜在客户和客户的概率
设计者创造易用的表单,展示有用的信息,建立流畅的交互,这些都要靠导航来引导用户达到。
内容涉及到的东西很多,内容之间的相互关系也不确定,因此不同内容导航需要不同的导航模式
1)种类
不同行业,不同业务重点对内容的分类方式不同
种类可以是符合大众认知,具有并列关系的信息,
也可以是按照设计者的意图创造出的种类,并区分其优先级
种类导航的出现无形中建立了用户心中对某类产品的预期信息架构,使其在浏览信息时更有方向性,例如在浏览一家服装店铺时,用户在进入导航列表前就对种类有了预期,诸如男士上装,男士下装,女士上装、女士下装、配饰,包袋等。
2)字母
以字母顺序排列信息。适用于信息量超大,且不存在主次、重要级关系的内容。常见于联系人列表,地区导航,介绍人名,合作伙伴等场景。
3)自然属性
以时间,地理位置等属性组织信息架构。
时间:展示在一段时间内发生的事情,以时间为导航可以直观地感受到信息的变迁,立体感更强。例如一个企业的发展历史
地理位置:展示在不同地理位置的事件信息,空间感更强
也叫做结构导航,根据信息的上下级关系、主体信息架构等因素将信息有序排列。分为全局导航和局部导航。
全局导航往往指页眉和页脚,存在于网站的大部分页面,便于用户随时跳转。
页眉:用户进入网站关注到的点,将网站进行功能分类后,将导航文字放置在页眉上
页脚:此空间是为隐私和法律链接保留的,还会加上联系方式,也有许多内容繁重的网站会把站点地图放置在页脚。
雅各布·尼尔森把全局导航在网站中的作用形象地比喻为机舱座位下的救生衣 ,你只要知道它哪 ,而不必时时关注它,需要时立即找到穿上即可。
局部导航是是更深层级的导航,不作用于全局,存在于特定的功能区,可分布在页面各部分。
业务上必要的一些功能入口,通常贯穿全局,例如很多网站的个人信息,用户需要在大部分时刻都可直接接触到该功能。根据用户的心理模型,这类功能会存在于页面的右上角。
用户使用较多,也是最重要的导航方式之一。当带有明确的目的性或无法通过内容,层级导航找到想要的信息时,用户会在搜索框内尝试输入一些信息。
而让用户主动搜索会出现下面的情况:用户无法清晰表达或错误地表达其想要搜索的内容,导致系统无法匹配上对应的信息,
为了让搜索导航更有效地发挥其作用,出现了自动填充,模糊搜索,推荐搜索,搜索历史,搜索纠正等一系列导航功能,这些功能都是为了想办法将用户引导到他可能需要的页面上。
以类似地图的样式来展示网站页面之间的层级关系,并提供相应的链接。可视性强,便于用户找到想要的信息。
考虑到排版布局,样式美观,除了用文字本身的含义用作导航外,图标也经常被用作导航,分为纯图标导航和文字+图标导航,这里图标的风格会很大程度上影响这个页面的视觉效果
将导航文字横向有序地排列,独立性强,占用空间较少,可放置的导航条目有限,但这个局限性也可以成为优点,它要求设计师创造出简短,易于理解,且满足业务需求的标题。
当内容过多时会选择在单个导航下放置下拉显示二级导航,下拉显示的二级导航可以很长或采用滚动显示的方式,这种临时的模态导航可以最大限度地利用到屏幕空间。
很多网页的横向页眉导航会保持滑动时固定的样式,便于用户时时找到主页面的入口。
占用空间较多,通常放置在页面左边位置,用不同的底色或分割线将其与主内容分开,内容文字一般采用左对齐,便于阅读,导航层级过多时会采用点击展开的样式,上下滚动的常用交互也让竖向导航容纳的内容更多。
部分竖向导航是可隐藏或收缩的
在拥有复杂信息的网页中,会将横向导航,竖向导航等其他样式混合使用,
面包屑导航是位于页面顶部或底部的一行内部链接,在不同层级的链接之间用“>”分隔,可让访问者快速返回上一版块或根网页。许多面包屑导航都将内容最宽泛的页面(通常为根网页)设置为最左边的首个链接,并在右侧列出更具体的部分。
占用很少的空间并提供主导航实现不了的深层次定位功能。
面包屑的使用让网站的结构更加清晰,强化用户的心理层级模型,并实现跨层级跳跃
分页显示的内容数量固定,有时用户可自定义内容数量,此外页面上通常有当前页,任意页,上一页,下一页,首页,末页的链接。具有定位性,当用户需要回到之前浏览过的某个位置时,可采用分页的形式
无限滚动希望用户只注意当前页的内容且不能快速到达页面的底部,适用于无法预测用户何时能够找到需要的信息的情况。在一些图片展示,内容推送的网站上设计者不知道用户想要的内容,同时也要展现网站内容丰富,资源库深不见底的特质会采用交互上更简单的无限滚动模式。
一些设计者想要用户优先注意到的内容,会采用突出的版面设计,通过改变文字图形的大小,颜色等与其他一般性内容形成对比或使用海报,弹窗等形式试图引导用户行为。
根据上面第三和第四点,分别从信息层和表现层给出导航设计的建议
1.信息结构尽可能扁平
多花一些时间去考虑信息体系结构,可根据首页规划全局的导航,首页是用户在网站中导航的起点,考虑如何让用户尽可能方便地从网站上的宽泛内容(首页)转到他们所需的更加具体的内容。
2.重视导航的顺序
当同一级别的导航数量很多时,顺序变的更加重要。根据用户的认知习惯,开头和结尾作为关注度(看到的)和保留度最高(刚刚发生的)的地方,其内容更加突出。
3.SEO优化
良好的网站导航结构可以帮助搜索引擎了解哪些是网站站长认为重要的内容,尽量用一些具体的描述词语而非大而宽泛的词汇,例如“产品”,“服务”。虽然搜索引擎的搜索结果是在页面级别提供的,但它也希望了解页面在网站这个更大层面上的角色。导航中关键词的使用会影响其在搜索引擎中被搜到的质量。
4.创建网站地图
用于显示网站结构的一个简单页面,通常包含网站页面的分层列表。如果在网站上查找页面时遇到问题,用户可能会访问此页面。此外搜索引擎也会访问此页面,以便使抓取范围尽量覆盖网站的全部页面。
1.一致性
同一类型导航的视觉表现与交互操作在整个网站页面中要保持一致,清晰一致的导航可以让用户预见每一步操作的结果。
2.清晰性
颜色与大小:文字颜色与背景颜色的对比,标题与内容的字号大小,这些最基本的元素直接影响导航的清晰度
留白与装饰:与平面设计中原理一样,留白让网站页面布局平衡,张弛有度;装饰与留白相结合,让导航表现得更精美,也有助于视觉分割
强调与弱化:有些导航起引导作用需要突出,有些起辅助作用需要弱化,强弱对比结合丰富了视觉层次,并让导航起到它该起的作用
3.凸显超链接
将可点击的超链接文本与常规文字在样式和交互上进行区分,常见做法有下划线,文字颜色,加粗,鼠标悬浮变色。
4.在常规位置放置导航
网页发展的几十年让用户对网页产生了一些常识性认识,例如用户会在进入一个网站时去页眉或侧边栏寻找主导航,尽量遵循这些常规用法。
5.导航数量不宜过多
无论是全局或局部导航,数目越多用户处理和记住信息的难度越大,可以通过分组分层来提高信息浏览效率
6.侧边栏
侧边栏导航会占据一部分的屏幕空间,将其与主内容部分进行分割有助于用户,例如用反差较大的背景色形成导航区与内容区
加入导航收缩功能,以便更好地利用屏幕空间,特别是在一些小尺寸屏幕上。
在做完网页设计后可以根据浏览网页的一般习惯,通过以下几个方面对导航设计进行简单审查
问自己以及团队其他成员以下几个问题
1.这是什么网站
2.网站有哪些主要内容
3.导航看上去是否像是导航,可点击的
4.导航的名称是否会引起歧义
5.现在处在网站的哪个层级
6.如何进退
7.具体的功能是否会在预想的地方出现
8.怎么进行内容搜索
借助工具
9.使用Google Analytics对网站的访问情况进行回顾并进行一些评估
例如一些页面的浏览量极低于预期或相较于同类页面浏览差距过大,就要考虑是否是指向该页面的导航出现了问题。
导航的最终目的是简化获取信息的过程,具体以何种方式表达还需要取决于业务内容,但总体上要以用户易接受的方式呈现。用户若是能在获取信息的过程中按照设计者所想的方式前进并感受到畅通无阻的快感,导航便是成功的。