Be For Web - 渐进呈现 http://www.beforweb.com/taxonomy/term/102 en 图文版 WWDC 设计分会:基础设计原理 - 渐进呈现与对称性 http://www.beforweb.com/node/1054 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-logo-wwdc-2019-apple-s.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>周二夜间。冲了个澡出来竟然听到了滚滚的雷声,滴滴答答的雨也落了下来。强弩之末的夏季,疯狂高温高湿的日子,如此结束倒也有了些许戏剧性。</p> <p>两个半月的个人事务忙碌状态也终于在本周暂时画上了句号。很多在从前完全不敢设想的挑战和难关,也不得不逐一面对和战胜,回头看看我甚至觉得有些懵逼。这个夏天到底发生了些什么。并不确定。</p> <p>刺眼的阳光,湿热的空气,窒息的压力 - 回望这些日子,记忆中大约只有如此的印象。一个人面对世界的善意或冰冷或挑战或不屑的能力在变强,但到了夜里又开始全身心想要&ldquo;喝两口&rdquo;的欲望是怎么回事。</p> <!--break--><p><img alt="" src="/sites/default/files/images/201909-WWDC-56/0.jpeg" style="width: 620px; height: 620px; border: none;" /></p> <p>回来说正经的。继续上期主题,即 WWDC 之&ldquo;基础设计原理&rdquo;设计分会,演讲人是 Apple 设计布道者团队的 Mike Stern 老师。在上期当中,我们了解了&ldquo;映射&rdquo;与&ldquo;可供性&rdquo;,错过的朋友不妨回看;今天的话题聚焦于&ldquo;渐进呈现&rdquo;与&ldquo;对称性&rdquo;。</p> <p><img alt="" src="/sites/default/files/images/201908/0-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <h3> 渐进呈现</h3> <p>搞清楚了用什么东西盛放食物,我们接下来可以安心点餐了。我想点一个美味的芝士汉堡,于是叫来了服务生。</p> <p><img alt="" src="/sites/default/files/images/201909-WWDC-56/131-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>他问我需要几分熟,&ldquo;五分&rdquo;。他问我需要哪种芝士,&ldquo;切达奶酪&rdquo;。</p> <p><img alt="" src="/sites/default/files/images/201909-WWDC-56/132-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>是否需要加培根、鸡蛋或牛油果?&ldquo;不需要&rdquo;。</p> <p><img alt="" src="/sites/default/files/images/201909-WWDC-56/133-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>搭配沙拉、薯条还是炸洋葱圈?&ldquo;炸洋葱圈&rdquo;。</p> <p><img alt="" src="/sites/default/files/images/201909-WWDC-56/134-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>他问我是否了解芝士汉堡配洋葱圈的热量极高,我回答:&ldquo;骗人的&rdquo;。</p> <p>以上过程便体现了&ldquo;渐进呈现&rdquo;的原理。</p> <p><img alt="" src="/sites/default/files/images/201909-WWDC-56/135-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>作为一种用于管理复杂度的方法,&ldquo;渐进呈现&rdquo;几乎可以说是交互设计领域所独有的,其基本概念是引导人们平缓地由简单状态进入到复杂状态,例如将原本复杂的逻辑隐藏起来,通过更加易于认知的界面形式帮助人们轻松完成最为基础的任务。</p> <p><img alt="" src="/sites/default/files/images/201909-WWDC-56/136-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>如果你一上来就必须面对所有的配料选项,那么点餐也会成为复杂到令人畏惧的任务。反之,步步为营则会令人感到轻松舒适。</p> <p><img alt="" src="/sites/default/files/images/201909-WWDC-56/138-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>此外,前期的输入选择也可能对后续的选项产生影响。例如,如果我选择薯条,那么服务生就会继续给到我&ldquo;普通&rdquo;、&ldquo;松露&rdquo;、&ldquo;蒜香&rdquo;三种口味选项;但是我没有选薯条,所以我无需在意他们薯条的口味;如果服务生询问我关于薯条口味的问题,那就是在浪费我的时间,平白增加我的认知负荷。或者,并非如此?其实我很喜欢蒜香味的薯条,如果我知道他们有提供,那么一定会点一份。所以你看,这里就有问题暴露出来了。</p> <p><img alt="" src="/sites/default/files/images/201909-WWDC-56/140-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>渐进呈现可以有效地管理复杂,简化决策过程;但同时也会将信息与功能埋没起来。所以我们该如何是好?</p> <p>关于如何正确运用渐进呈现的讨论,最后通常都会归结于&ldquo;二八定律&rdquo;。</p> <p><img alt="" src="/sites/default/files/images/201909-WWDC-56/142-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>如果你觉得这个概念有些陌生,那么可以大致理解为,一个系统所提供的全部效用当中的 80%,来自于其 20% 的内因。</p> <p><img alt="" src="/sites/default/files/images/201909-WWDC-56/143-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>对于 app 而言,这大约意味着其 80% 的价值来自于其 20% 的功能;或是 80% 的人只会用到其全部功能当中的 20%。</p> <p>当然,实际情况当中的具体百分比不会那么精确,但比例大致符合。产品所提供的信息与功能通常不会拥有相同的权重,总会有一些比另外一些更加重要和关键。</p> <p>因此,为了降低复杂度,简化认知与决策过程,我们通常可以将那些相对次要的东西隐藏起来,以实现渐进呈现。换句话说,如果你的 app 非常复杂,那么完全可以尝试将 80% 相对次要的信息或功能隐藏起来,以便使那最为重要的 20% 得以简洁而清晰地呈现。</p> <p><img alt="" src="/sites/default/files/images/201909-WWDC-56/144-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>一个最经典的例子就是文件打印对话窗口。绝大多数时候,人们只关心那些最基本的设置,例如选择哪台打印机,纸张规格,打几份等等。在打印机所提供的全部功能当中,上述这些连 20% 的比例都远远达不到,但却是人们在 80% 的场景里所需用到的全部。</p> <p><img alt="" src="/sites/default/files/images/201909-WWDC-56/145-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>而当人们需要更复杂的功能时,仅需点击一下就可以访问到。</p> <p><img alt="" src="/sites/default/files/images/201909-WWDC-56/146-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p><img alt="" src="/sites/default/files/images/201909-WWDC-56/147-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>渐进呈现不仅能降低视觉复杂度,使打印变得简单易行,同时也会降低人们产生困惑甚至是误操作的可能性。</p> <p>或许我们都经历过类似的情景,例如爸妈或亲人突然打电话给你,说他们要崩溃了,因为电脑工作异常,可能是因为他们弄错了什么东西,他们完全搞不懂。渐进呈现的设计方式着实可以避免太多这类情况的发生。</p> <p>所以,试着保持默认状态的简单,让多数初中级用户可以顺畅地使用产品,避免困惑与误操作;同时,也要让高级用户可以快捷地访问到他们所需要的复杂功能。</p> <h3> 对称性</h3> <p>芝士汉堡和炸洋葱圈都很美味。晚餐之后,大家早早休息,我们明天要去潜水。</p> <p><img alt="" src="/sites/default/files/images/201909-WWDC-56/147-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>来到夏威夷的海滩,我们戴上护目镜,穿上脚蹼,调整呼吸管,下水。</p> <p>水下有各式各样的鱼类。有河豚,金枪鱼,巨型乌贼...魔幻一般的水下世界,为什么如此全然的美丽着?这里蕴涵着我们将要探讨的最后一则设计原理,对称性。</p> <p><img alt="" src="/sites/default/files/images/201909-WWDC-56/150-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>我们对于对称性的概念都非常熟悉。每当谈到对称,我们通常会想到&ldquo;反射对称&rdquo;,或称&ldquo;镜像对称&rdquo;。</p> <p><img alt="" src="/sites/default/files/images/201909-WWDC-56/151-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>但其实还有更多的相关概念,例如&ldquo;辐射对称&rdquo;或&ldquo;旋转对称&rdquo;,以及&ldquo;平移对称&rdquo;。这三类对称在自然界中非常常见。</p> <p><img alt="" src="/sites/default/files/images/201909-WWDC-56/154-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>对称是一种有效的形式,我们通常会将其与&ldquo;健康&rdquo;、&ldquo;稳定&rdquo;、&ldquo;平衡&rdquo;、&ldquo;有序&rdquo;等概念关联在一起。同时,对称还极具视觉美观性。</p> <p>具有对称性的元素即便在物理上没有彼此连接,人们也会倾向于将它们认知为整体。譬如当看到一对互为对称的括号时,我们在认知当中会无意识地将它们整合为连贯的整体。</p> <p><img alt="" src="/sites/default/files/images/201909-WWDC-56/155-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>潜在水下时,你会发现到处都是镜像对称、旋转对称和平移对称。实际上,无论是在陆地、天空还是海洋,几乎所有类型的动植物身上都体现着一种或多种对称性。</p> <p><img alt="" src="/sites/default/files/images/201909-WWDC-56/156-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>而人造物品也是同样。灯的开关具有对称性,水龙头也是如此。</p> <p><img alt="" src="/sites/default/files/images/201909-WWDC-56/157-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p><img alt="" src="/sites/default/files/images/201909-WWDC-56/158-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>汽车显然也是同样,而且汽车的对称性更多是出于实际功能性的考虑;你一定不会希望驾驶这样一辆汽车上路。</p> <p><img alt="" src="/sites/default/files/images/201909-WWDC-56/160-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>但对称性同样蕴含着美学价值。经过精心设计的界面通常能够同时体现出镜像对称与平移对称的特性。</p> <p>在天气 app 中,镜像对称带来了良好的视觉平衡感。所有的关键元素都以界面中线为基准保持着居中对齐,同时其他所有元素都在两端维持着平衡。</p> <p><img alt="" src="/sites/default/files/images/201909-WWDC-56/161-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p><img alt="" src="/sites/default/files/images/201909-WWDC-56/162-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>同样的对称模式也体现在相机、时钟、电话等众多 app 当中。</p> <p><img alt="" src="/sites/default/files/images/201909-WWDC-56/163-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p><img alt="" src="/sites/default/files/images/201909-WWDC-56/164-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p><img alt="" src="/sites/default/files/images/201909-WWDC-56/165-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>在平移对称当中,元素的重复性为我们带来了结构与次序的感知。你可以在时钟 app 的地区时间列表,或是天气 app 的城市天气列表中感受到平移对称的结构特性。</p> <p><img alt="" src="/sites/default/files/images/201909-WWDC-56/166-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p><img alt="" src="/sites/default/files/images/201909-WWDC-56/167-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p><img alt="" src="/sites/default/files/images/201909-WWDC-56/168-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>在设计界面时,尽可能有意识地通过对称性原理来构建平衡与秩序的感知。</p> <p><img alt="" src="/sites/default/files/images/s/Banner-PS-BFW-3x.png" style="width: 600px; height: 154px;border:none;" /></p> </div></div></div><ul class="field_categories"><li class="design taxonomy-term-reference-0"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/292" typeof="skos:Concept" property="rdfs:label skos:prefLabel">WWDC</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/192" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计原则</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/102" typeof="skos:Concept" property="rdfs:label skos:prefLabel">渐进呈现</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/302" typeof="skos:Concept" property="rdfs:label skos:prefLabel">对称性</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Wed, 28 Aug 2019 05:24:33 +0000 C7210 1054 at http://www.beforweb.com http://www.beforweb.com/node/1054#comments 通过合理的指示元素引导用户发现隐藏内容 http://www.beforweb.com/node/78 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-eye-ball-ui-hidden-elements-trigger-indicators-user-experience.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p> </p> <p>天气甚好,不冷不热,微困。搞掉这篇就上房顶子发发呆。如果哪位觉得今次的图标有些许惊悚的话,欢迎在评论中吐槽,或者直接在<a href="http://weibo.com/c7210">微博</a>上跟我念叨。</p> <p>之前连续更新了两章iOS Wow体验,分别是关于<a href="http://beforweb.com/node/80">应用上下文环境</a>以及<a href="http://beforweb.com/node/81">iOS技术特性</a>这两方面的话题。今天换换脑子吧,放下移动应用这摊子事,回到Web端,遛一篇图文并茂篇幅简短的小译文,关于隐藏内容及相应的提示元素使用方式blah blah的。走着。</p> <p>标签(Tab)、下拉菜单、手风琴风格的折叠控件...渐进呈现(progressive disclosure)的交互方式可以有效的帮助我们降低界面的视觉复杂度,同时尽可能多的向用户展示内容。</p> <p>不过凡事有利亦有弊,在视觉上不可见的东西确实很有可能被用户所忽略掉。因此,把界面元素隐藏起来还不算完,我们必须通过一些恰当的方式向用户进行提示,让他们意识到隐藏元素的存在<a class="eLink" href="http://beforweb.com">。</a></p> <!--break--><h3> 用户的预期</h3> <p>这里所说的预期,是指用户对自己能否在站点中找到隐藏元素所做出的假设和预判。如果用户认为某些内容一定是藏在什么地方的,他们就会主动的进行寻找;反之,他们也有可能受到一些因素的影响,过早的认定那些内容根本不存在。</p> <p>在购物网站中,多数用户认为自己能够并且应该获取到商品详情、退换政策、运费等方面的信息。在这种预期的作用下,即使那些内容并没有直截了当的呈现出来,他们也会主动寻找。</p> <p>另一方面,诸如用户点评、额外的商品图片集、视频演示等附加内容并非是所有购物网站的标配,如果它们在默认状态下是不可见的,那么对于那些不熟悉该站点的用户来说,通常不会花费太多时间进行寻找,因为在他们的预期中,这些内容可能就是不存在的。</p> <p>用户的预期取决于他们长久以来的认知和行为习惯。作为设计师,如果不能确保用户会从主观上积极主动的寻找隐藏元素,我们就要借助可视化的触发指示,引导他们获取更多的内容。</p> <h3> 触发指示</h3> <p>任何一种对隐藏内容的存在起到提示作用的界面元素都可以被称为触发指示。它们大致分为五类:</p> <h4> 1.方向与空间</h4> <p>具有指向性的界面元素通常可以用于对隐藏内容的指示。方向指示(directional indicator)的视觉表现形式能够很准确的描绘出虚拟空间当中位置及移动的概念,符合用户直觉。</p> <p><img alt="ui-Hidden-Elements-trigger-indicators-2-itunes-disclosure-arrows" src="/sites/default/files/images/201205/ui-Hidden-Elements-trigger-indicators-2-itunes-disclosure-arrows.png" style="width: 481px; height: 136px;" /></p> <p>此外,方向指示本身通常会以图标的形式存在,这也使得后面的文字标题在用户看来具有更强的可点击性,进一步增强了隐藏内容被发现的可能性。</p> <p><img alt="ui-Hidden-Elements-trigger-indicators-3-fox-menu.png" src="/sites/default/files/images/201205/ui-Hidden-Elements-trigger-indicators-3-fox-menu.png" style="width: 500px; height: 147px;" /></p> <p>在Fox的主导航当中,前两个菜单项会各自触发一个&ldquo;大数据量菜单&rdquo;的展开(mega menu,赶上这种已然约定俗成的词儿我是真心不想翻成中文&mdash;&mdash;译者<a class="eLink" href="http://beforweb.com">C7210</a>注),其中作为触发指示的正是标题文字后面的下三角图标。这类元素从视觉上来看是很微小的,但它们对于用户能否正确领会页面的交互方式却是至关重要的。</p> <p>空间指示(spatial indicators)与方向指示具有比较密切的相关性。在这种模式中,通常会有一个&ldquo;高亮&rdquo;的界面元素向用户提示当前所处的位置或是已做过的选择,而其他那些处于普通状态的同级别导航元素则暗示着当前区域当中有更多内容可以被发现。</p> <p><img alt="ui-Hidden-Elements-trigger-indicators-4-spatial-indicators" src="/sites/default/files/images/201205/ui-Hidden-Elements-trigger-indicators-4-spatial-indicators.png" style="width: 500px; height: 298px;" /></p> <p>分页控件是一个比较典型的例子,这种模式可以很直白的让用户知道自己看过多少内容、现在正处于怎样的位置、接下来还有多少东西可看。另外,导航菜单中的&ldquo;当前&rdquo;状态标识,以及浏览器的滚动条等等,从本质上讲都属于空间指示。</p> <h4> 2.隐喻</h4> <p>隐喻是一种非常有效的引导方式。例如,将用户界面设计成为书籍或杂志的样式,在交互方式上也模拟真实的物理效果。通过这种高度隐喻化的表现形式来承载在线内容,可以让用户会很自然的去浏览那些在当前可视区域&ldquo;后面&rdquo;的东西,就像在现实中看书那样。</p> <p><img alt="ui-Hidden-Elements-trigger-indicators-5-metaphor" src="/sites/default/files/images/201205/ui-Hidden-Elements-trigger-indicators-5-metaphor.png" style="width: 500px; height: 309px;" /></p> <p>隐喻的方式确实非常符合用户的直觉及预期;作为设计师,我们必须确保拟真界面的外观和交互方式能够准确的体现出真实物体的视觉及物理特性。不过,由于技术等客观条件所限,真实物体的行为规律未必能够被准确的还原到网页当中,我们需要在选择设计方案的时候对这方面的问题加以考虑。</p> <h4> 3.图标</h4> <p>图标可以使触发指示元素在整个页面当中以相对凸显的方式呈现出来,例如Macy在&ldquo;Reviews&rdquo;标签中所使用的星级图标。</p> <p><img alt="ui-Hidden-Elements-trigger-indicators-6-macys" src="/sites/default/files/images/201205/ui-Hidden-Elements-trigger-indicators-6-macys.png" style="width: 500px; height: 276px;" /></p> <p>图标一类的视觉元素可以使平淡枯燥的文字内容具有更强的可辨识性,进而引导用户发现附近的隐藏元素。不过这类做法也具有一定的风险,有时它们吸引到的注意力太多了,以至于使用户忽略掉了其他的重要信息。</p> <h4> 4.渐变褪色</h4> <p>我们还可以通过改变内容自身外观的方式来指示更多的隐藏内容,而不必使用图标一类的可视化界面元素作为触发指示。其中最典型的方法就是为内容文字设置渐变褪色效果,Amazon的商品描述页面当中就使用了这种方式。</p> <p><img alt="ui-Hidden-Elements-trigger-indicators-7-gradient-hide-amazon" src="/sites/default/files/images/201205/ui-Hidden-Elements-trigger-indicators-7-gradient-hide-amazon.png" style="width: 500px; height: 240px;" /></p> <p>逐渐褪色的文字可以很有效的吸引用户的注意力,并促使他们探索更多内容。配合可视化的触发指示元素,例如&ldquo; Show More&rdquo;文字链接及相关的图标,这种引导效果就会进一步的增强。</p> <h4> 5.短暂呈现</h4> <p>所谓短暂呈现,是指我们可以策略性的让内容在一个时间段内保持可见。例如,在购物网站的商品详情页面中,当页面完成加载后,完整的商品描述内容可以在短时间内保持呈现状态,然后通过动画方式收起,并在内容最终消失的位置提供一个可视的触发指示元素,这样用户就很清楚有哪些内容被隐藏了起来,当他们需要获取相关信息的时候,可以到哪里去找到这些内容。当然,这种模式的实现当中有一个重要的前提,那就是用户必须注意到了内容消失的过程及相应的动画效果。</p> <p>关于短暂呈现,另外一个典型的例子就是轮播。在这种模式中,多项内容会依次呈现一段时间;这样不仅能够让用户了解到更多内容的存在,更重要的是,它们会&ldquo;主动&rdquo;的显现出来,用户无需执行任何交互操作就可以获取到完整的信息。</p> <p><img alt="ui-Hidden-Elements-trigger-indicators-8-dell-carousel" src="/sites/default/files/images/201205/ui-Hidden-Elements-trigger-indicators-8-dell-carousel.gif" style="width: 500px; height: 288px;" /></p> <h3> 最佳实践</h3> <p>我们对五类触发指示进行了大致的了解。光是这样还欠点儿火候,更重要的是,我们必须知道在实际工作中以怎样的方式、怎样的程度来使用这些触发指示,因为这类元素或多或少会为界面整体带来一定的视觉噪音,搞不好会使整个界面变得相当凌乱,不仅不能有效的起到提示作用,反而会影响用户对于其他内容和功能的浏览使用。我建议大家在实践中首先对以下四个方面的问题进行考虑<a class="eLink" href="http://beforweb.com">:</a></p> <ol> <li> 确定隐藏内容的重要程度,判断它们对于转化率的提升能够起到多大的作用,它们是否只是对于某种特定类型的用户才有意义。</li> <li> 确定这些内容被浏览的频率,通过统计工具查看能够浏览到这些内容的用户所占的百分比。</li> <li> 判断用户对于隐藏内容的预期,通过用研来了解用户在特定的界面当中最希望获取哪些方面的信息。</li> <li> 汇总前三个方面的分析结果,判断是否有必要使用&ldquo;隐藏内容+触发指示&rdquo;的模式。如果确实需要,那么指示元素采用怎样的视觉表现形式更加得当;会吸引更多注意力的轮播动画?还是视觉效果相对较弱的渐变褪色?</li> </ol> <p>如果你确定隐藏内容确实非常重要(1),但当前的浏览量很低(2),而且用户的预期当中并没有包含这些内容(3),那么你就应该考虑对触发指示元素进行调整了,看看能否让它们吸引到用户更多的注意力;抑或是这些内容根本就不应该隐藏起来。</p> <div class="embed"><article id="node-290" class="node node-related-books" about="/node/290" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/界面设计模式-泰德维尔/dp/B00EV562SY/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="界面设计模式(第2版)" src="http://beforweb.com/sites/default/files/images/products/35.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/界面设计模式-泰德维尔/dp/B00EV562SY/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">界面设计模式(第2版)</a></h4> <p><a href="http://www.amazon.cn/界面设计模式-泰德维尔/dp/B00EV562SY/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书按照设计进程的大致顺序,细致地梳理了交互设计中的模式,每个模式都至少含有一个范例,以方便读者学习。第1版中文版在推出后大获好评,一路畅销;在第2版中,新增了社交媒体,移动设计的内容,切实地符合了当下的技术发展潮流...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </div></div></div><ul class="field_categories"><li class="design taxonomy-term-reference-0"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UI</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/102" typeof="skos:Concept" property="rdfs:label skos:prefLabel">渐进呈现</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/80" typeof="skos:Concept" property="rdfs:label skos:prefLabel">隐喻</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Fri, 25 May 2012 08:05:56 +0000 C7210 78 at http://www.beforweb.com http://www.beforweb.com/node/78#comments