信息的展示与解读设计-董天田 本文关键词：解读，展示，设计，信息，董天田
信息的展示与解读设计-董天田 本文简介：信息的展示与解读设计浅析董天田资深用户体验设计师联想摘要：对信息进行合理的展示与准确的解读，是用户接受并理解产品的关键因素之一。就如同一张优秀的图片胜过千万字语言一样，良好的信息展示与解读设计不仅能使产品简单易用、减少用户困惑，还能大幅度降低后续的支持和纠错成本，确保产品用户体验。然而当前大多数产品
信息的展示与解读设计-董天田 本文内容：
信息的展示与解读设计浅析
董天田
资深用户体验设计师
联想
摘要：
对信息进行合理的展示与准确的解读，是用户接受并理解产品的关键因素之一。就如同一张优秀的图片胜过千万字语言一样，良好的信息展示与解读设计不仅能使产品简单易用、减少用户困惑，还能大幅度降低后续的支持和纠错成本，确保产品用户体验。然而当前大多数产品的信息展示与解读设计却很难达到令人满意的程度，少数甚至引起用户的误解或反感，直接降低了产品的用户体验。信息的展示与解读设计应用范围极为广泛，形式多种多样并涉及多个行业和领域。受限于篇幅，本文着重讨论其在电子产品中的实现手段，结合用户感受程度来划分相应的等级，并给予详细的分析与探索。
关键词：信息的展示与解读，用户，设计，评判等级，分析
1.
信息的展示与解读
1.1
概念与定义
从表现形态与功能效用来看，信息的展示与解读与交互设计紧密相关，但两者的侧重点又有明显的区别：交互设计更偏重实际发生的一个或一系列操作动作与对应的反馈；信息的展示与解读设计则通常发生在交互动作之前和之后，主要包括但不限于关于产品任何方面的说明、描述、展示和解释等，
需要产品自身以恰当适合的形式主动呈现给用户，并重点关注其最终接收和理解的程度。毫无疑问，用户最终接收和理解的程度越高则越成功，反之则越失败。用户从何种程度上接收并理解产品想要表达的信息，不但直接影响产品的用户体验，还能够间接影响产品的命运甚至一个品牌的形象和地位。就像苹果公司设计师兼资深副总裁乔纳森.伊夫所述：设计所体现的价值不仅仅是指可被感知的那一小部分，它代表了产品，甚至更多。
1.2
巨大的提升空间
对于产品的理解和深入程度，相信绝大多数用户永远赶不上设计制造者。因此，产品必须通过特定的手段和方法来引导指点用户，告诉他们如何使用。最常规也是最容易想到的手段包括雇佣和培训售前售后人员、编写产品指南或安排顾客服务人员等，甚至面对面地答疑解惑。然而事实证明，仅仅做到这些是远远不够的。随着公司规模扩大和用户数量增长，这些办法对于那些拥有成千上万甚至过亿用户的公司来说基本上是杯水车薪。此外，没有也不可能有任何一家公司能够保证与用户面对面地澄清解释各种使用中的问题。因此，在各方面现实因素和客观环境的限制下，当我们依然期望用户能够理解产品的奥妙和精华时，最实际也是最容易把控的手段就是让我们的产品自己开口说话，主动向用户去展示并准确解读相关信息，最终让用户畅通无阻地使用甚至享受产品带来的乐趣。
然而现实却没那么美好：当前市面上充斥着大量参差不齐的信息展示方法与五花八门的解读设计，不但没有为用户创造无缝自然地使用体验，反而加大了用户与产品的距离：很多信息的展示解读设计都不够友好，甚至枯燥粗暴，令用户地上手和操作更加复杂困难。究其原因，最核心的问题是产品设计依然建立在研发工程师的理解基础上，而没有从用户的角度和眼光出发。
1.3设计评判等级的理念
图1
信息的展示与解读设计评判等级示意图（长度仅代表对应的大致比例）
与任何类型的设计一样，信息的展示与解读无法采用一刀切的评判标准来衡量。但万变不离其宗，设计的最终目的是服务于用户。就像马斯洛创造的人类需求等级一样，从低级到高级，人们对于生活品质和思维意识的要求是分等级的。而设计作为服务于人类物质和精神的一种表现形式，具有极为相似的特性，同样源自于人本主义。因此，针对于信息的展示与解读设计，我们可以根据其实现手法和用户接受认可程度设定几个不同等级来加以描述和区分，如上图所示。
可以看到，当前大多数产品的信息展示与解读设计处于第三个等级中，属于平铺直叙、中规中矩类型，提升空间与可挖掘潜力非常大。
2.
设计评判等级描述与分析
2.1
恰如其分
返璞归真
恰如其分地使用某一种或几种手段结合完成，从全局架构和系统逻辑出发进行信息的展示与解读设计；对于每一处细节都有相应的考虑，讲究孰轻孰重和大胆简化甚至大量留白。用户通常感觉不到有任何困难或独特性（就好比使用自己的手脚一样容易），不要需任何思考或犹豫。毋庸置疑，这是最理想的设计[1]。
在这个等级中，苹果产品的信息展示与解读设计最为突出，简洁清晰而不简单。从全局构架和系统逻辑层面来看，对于普通用户只有足够的简单易懂，他们才能够快速感知并接受产品包含的信息并轻易完成绝大多数的操作任务，自然而然地将IOS设备变成自己身体或生活体验的一部分。而IOS始终只在二级或更深界面左上角返回，而在一级界面通过按压HOME返回桌面，仅此一处信息框架的展示和布局设计就为用户节省了大量学习和记忆成本。
IOS系统中信息展示与解读设计的精致细腻与动画过渡效果的连贯无缝则令人们倍感贴心自然，绝大多数用户不需要专业的眼光或刻意的体会就能够感受到其中的奥妙，这也是为什么苹果产品能够牢牢抓住用户的重要
原因之一。
图2
IOS系统中信息的展示与解读在大框架和细节两个层面上都很到位
乔纳森.伊夫坚信“直观自然的设计是最美的”[2]，真正让人们毫无阻力理解并接受的产品，无论从视觉还是从体验上来讲都应该是类似“润物细无声”的，最高境界的追求是让使用者会心一笑，而不是刻意去创造所谓的惊艳以此祈求给用户留下印象。正因为用户是非专业的，因此我们需要让设计也变得直观自然。
2.2
创新出彩
有意而为
较好地使用某一种或几种手段结合完成，用户通常能够感受到设计的精益求精或创意情怀，还会对某些特色或细节留有一定的印象。本着追求完美设计的目标，这种设计通常处于尚在探索形成特定设计风格的过程中，可能带有一定的刻意突出或着重表现性质，也容易引发细节与整体、不同环境中细节的不一致问题。
相信大多数PC用户对于360并不陌生，这里就拿360举例说明。
历经多个版本的“变脸”，360垃圾清理的界面干净整洁，核心信息与辅助信息主次分明，用户只需点击按钮既可以释放系统空间。
这里的信息展示与解读非常到位，相信绝大多数的电脑用户即便再初级也可以看得懂“多少MB的垃圾”。而清理垃圾是自然而然理所当然的事，至于360在背后做了哪些繁冗复杂的工作，就没必要呈现出来了。因此在这里，产品抓住了用户最想要的，从用户的角度来对信息进行展示和解读，成功的激发了用户进行下一步操作的兴趣。
图3
用户非常容易理解、抓住重点、简明扼要
除了一键式的极简设计，通过动态场景将随后发生的事件展示给用户，不仅清楚地交代了清理过程、哪些应用中存在垃圾，还给用户带来了直观的满足感和成就感
–
就如同挨个清扫每个房间一样，所有房间都清扫之后，大扫除也就完成了。对比传统的进度条或百分加或文字叙述，组合运用多媒体无疑是一个明显的进步[3]。最关键的是：这种方式充分考虑到了用户的接受程度和理解能力，真正站在用户的角度来看待产品，而不是想当然的认为用户是如何理解的。
图4
信息的展示与解读并非只是静态排列组合，也可以是动态变化的
当然，在这里需要指出的是，这一等级的设计通常对产品某些重点进行刻意的突出或渲染，具有一定的诱导性。比如在以上的例子中，扫描前实际的垃圾容量为122.9M，而界面上有意识的将978.2MB（未必完全是垃圾，需要手动勾选其他应用项）设计为最醒目的。很显然，360这样设计是有目的的，因为垃圾数量越多，用户进行清理操作的意愿也就越强。
图5
前后相同位置上的信息不同，具有诱导性
2.3
平铺直叙
中规中矩
信息的展示与解读使用一般化的手段来设计完成，用户未必会关注或尝试阅读其内容，并可能引起轻微地不悦或反感，比如一目十行或干脆直接跳过。此外，这种形式的设计还导致相关功能不被启用或很久以后才被偶然发现，原本想要体现的价值被浪费。这种中规中矩的信息展示与解读司空见惯、数量庞大，可以存在于各种界面中，相信只要用过智能手机的用户都略过数不清的应用引导页面和说明界面。这种信息的展示与解读效果很难无法保证达到其预期的效果。
三星Note
Edge在其时尚炫酷的侧边曲面屏上下了血本，又担心引不起用户兴趣或被忽略，于是采用了这样一种设计：在首次开机时给出了大量的信息说明。因为界面确实有限，同时还不得不照顾到用户希望马上体验手机的急迫心情，就造成了这样的尴尬：文字少了怕说不清问题；文字多了又显杂乱，使得用户开机后的第一印象大打折扣。
图6
文字说明以条条框框形式出现，把用户又带回了枯燥的书本课堂时代
从本质上来看，感受任何一个新兴事物，既能激发用户的探索求知好奇探索，又能带给其一种挑战：通过自己地摸索与尝试最终完成一个任务，用户会有一种胜利感和成就感。因此信息的展示与解读要避免平铺直叙和单调刻板。尽管从表面上来看，Note
Edge对于侧屏的信息展示不能不说是设计师花了一定时间和精力专门为方便用户使用而创造的，但从用户感知和接受角度来看，这种方式更像是在偷懒：这不就表明了设计师已经默认用户会仔细阅读理解所有信息，并臆想他们在随后地使用中不再会有任何疑问吗？
还有没有更好的办法？能否将信息的展示与解读贯穿在使用的过程中？有没有一种循循善诱的方式融入到用户的使用过程中，以此创造尽可能自然无缝的体验？我们将在文章结尾处尝试给出分析与探索。
2.4
简单粗暴
要素缺失
信息的展示与解读设计一旦出现了遗漏或缺失，将会给用户带来理解或操作上的困难。通常这一类问题不会单个存在，而会在不同应用或环境中多次出现。尽管用户未必会意识到哪些地方出了问题，也不一定会中断操作过程，但综合体验和理解会因此而大打折扣，同时直接降低产品档次并削弱品牌的影响力。
某品牌的手机在切换SIM卡时，会出现这样一个提示：是否配置全网通。这个提示看似展示并尝试着解读了一些信息，但实际上不仅没有达到预期，反而造成了更大的困惑：用户丈二和尚摸不着头脑，什么是全网通？配置能得到什么好处？不配置又会损失什么？这属于典型的信息展示与解读设计缺失。在这里，缺失主要是指信息的内容极为有限，也没有使用用户能够理解的语言进行描述，用户看到后会在心中形成一个大大的问号甚至会在以后的使用中留下一个心结。可以设想到，如果这类问题只在某些细节或没有被人注意到的环节上出现，可能影响不是很大，至多是用户会觉得使用不顺畅；然而一旦出现在了关键环节或步骤中，就可能导致用户以其特有的方式进行抱怨、传播甚至投诉，这也是导致产品NPS下降的一个主要原因[4]。
图7
非用户友好的信息设计
其实解决这个问题并不难，好好从用户的角度出发来想一想，他们要的是什么？他们的诉求是什么？是否就是无论插入哪张SIM卡都能快速上网并不影响通话短信？多为用户设身处地的考虑考虑，就不会出现工程师思维的“是否配置全网通”了。
2.5
刻意夸大
过度渲染
通过使用不同程度的虚假、刻意夸大或扭曲信息内容和呈现手段，确实能在短期内产生轰动性效应。然而，当用户经历过一个注意力被吸引、高度集中再到恍然大悟的过程后，很可能会产生一种上当被愚弄的感觉。对于产品而言，这将导致更严重的后果：产品公信力与品牌影响力因此而受到损害、广大消费者的信赖度随之下降甚至导致忠实粉丝地背叛[5]。
就像国内某知名品牌发布新手机时，将其金属边框诠释为“奥氏体304不锈钢”并加以渲染和夸大。“奥氏体304不锈钢”是什么东西？不知情的消费者们顿时被这种纯专业术语镇住了，茫然无措地以为是什么顶尖高新科技并充满了好奇与期待。然而很快就真相大白：奥氏体不锈钢居然就是一种非常普遍常见的钢材，虽然其最大的特点就是耐腐蚀、耐磨
但最重要的是价格便宜。不算后期加工，奥氏体304不锈钢的成本也就比卖废铁稍高一点。日常生活中的普通勺子、厨房的不锈钢台面、水盆、拖把杆、晾衣架等等都由这个材料制成。此外，奥氏体不锈钢除了304，还有321、316等等，而316更加高档也更加昂贵，多用于医疗等领域。说白了，“奥氏体304不锈钢”充其量也就是不锈钢中的低档位“屌丝”而已。
图8
一夜爆红的“奥氏体304不锈钢”
刻意使用非用户语言来描绘渲染原本普通常见的信息，虽说既不违法也不跨越道德底线，但从用户体验层面来说，这显然不是一个友好的方式。尽管一个产品需要卖点、需要包装讲故事，并一定要在某个环节或方面做文章。
但即便如此，也应该好好考虑如何讲一个生动有趣、友好易懂的故事，而不是生拼硬凑一个故弄玄虚的噱头，去骗取眼球外加挑战用户的智商和忍耐度。
3.
信息的展示与解读设计的探讨
3.1
从用户角度出发
信息是否通俗易懂、友好自然，最重要的评判标准还要依据用户的主观感受。从用户角度出发绝不是把自己臆想为用户，就像Google资深用户调研总监Tomer
Sharon强调的，想当然地根据自己（或身边一小撮亲友）的经历和体验来假设目标用户群体的思维方式和操作习惯是非常危险的。而很多设计师和研发人员恰恰在这一点上经常犯错：滔滔不绝堂而皇之地讲述自己是如何使用产品和看待设计，貌似有理有据有事实，实际上是一种极为不负责任的懒惰行为，危害甚大。
没有调查就没有发言权。同样，想要确保自己站在用户的角度说话，就必须采取一定的调研和考察手段，进行适量的数据收集和分析，最后再基于分析结果来讨论和设计。专家的意见固然重要，但必须要建立在一个基础上。在这一点上，除了选择运用最适合的调研手段来避免闭门造车或异想天开，确实没有什么捷径可走。
3.2
选择恰当的实现手法
信息是否能给用户提供帮助、是否能发挥预期的效用，主要取决于设计是否得当。随着技术和设备的日新月异，信息的展示与解读不再被限定为单纯的文字或静态示意图。适当地采用动画效果、音效甚至主动性反馈的组合，有时会给用户体验带来明显的提升[6]。为了得到一个更直观生动的效果，我们在这里找一个设计实例进行描述与说明：
图9
某手机官网展示的同一型号中2G和3G内存
依据通用审美标准和视觉风格来看，以上的设计非常专业，通过字体颜色和大小清楚地展示了相关信息，清晰、简洁而且明确。不过即便如此，用户能够得到的信息依然非常有限：两者差了100元，貌似因为一个是3G而另一个是2G。
其实，如果再进一步，从用户将要掏钱、后续将要日用的角度再好好想想，这样就够了吗？不够！3G内存能做些什么？2G又能做些什么？3G比2G快多少、快到哪些地方去了呢？怎样给用户一个直观清晰的感受，让用户很容易就明白两者的区别和功效了呢？
要让用户掏钱，就要让其心里清楚踏实，明白是怎么一回事并能得到哪些好处（当然，土豪随意），而且一定要使用户能够理解的、哪怕通俗易懂的方式手段进行描述与讲解。
考虑到设计风格的一致性与简洁度，简简单单的在当前设计上叠加说明显然不是一个好办法，那样只会使得界面看上去凌乱不堪。是否可以采用结合交互与动画的方式，尝试在鼠标指针飘过时出现相关的说明或介绍呢？介绍时能不能举个例子说明？从描述与解释方法论来看，举例子是个最好不过的方法。比如：运行同样多的程序，3G内存可以游刃有余而2G会有一定的卡顿和延迟等等诸如此类的例子。
因为通过借用常见的行为或事物进行类比，就能够轻而易举地绕过技术或理论层面上的理解困难，让信息的展示与解读更加友好、通俗和易懂。当然，以上方法也只是举个例子而已，不是什么最佳的解决方案，更适合的办法还是需要专业的设计师来考虑探索。
无论如何，产品和设计最终是为了用户。只要给用户一个解释，我们就能赢得一片天空。
参考文献
[1]《The
Sunday
Times》，News
International
PLC，2014-3-16
[2]《乔纳森转》利恩德·卡尼
著；汪琪，岳卉，王文雅
译．中信出版社，2013-12-01．
[3]
《多媒体设计中视觉传达的解读》葛轩辕，2015第5期
[4]
《信息时代企业后台管理界而UI设计探析》李雪浩，2013第8期
[5]
《EffectiveUI软件用户体验艺术》Anderson,J，McRee,J，Wilson,R，清华大学出版社2011-5
[6]
《界面设计中的“黑暗模式”》腾讯科技，2013-09-01
文章配图
[1]
原创《信息的展示与解读设计评判等级示意图》
[2]
http://www.th7.cn/
[3]
360安全卫士界面截图
[4]
360安全卫士界面截图
[5]
360安全卫士界面截图
[6]
三星Note
Edge首次使用界面截图
[7]
手机换卡提示界面截图
[8]
手机发布会现场截图
[9]
手机官网描述截图