设计师必看｜信息直观易感知，设计四两拨千斤

信息是设计的基础元素，Apple设计指南中将信息的清晰表达作为了一个重要主题：唐纳德·诺曼在《设计心理学1》也提出了“可视性”的设计原则，即通过直观的信息表达传递产品功能和操作方式。由此可见信息表达对用户体验的重要性，今天就一起看看怎样才能完成直观易感知的信息表达吧。#01易被感知的信息标识标识是信息的载体，即将有意义的信息进行提炼并转译为界面元素，并通过合理的布局被用户感知到。信息标识的表达根据重要程度有强有弱，强的表达开门见山能在第一眼就占据用户视线，弱的则在用户有需要时就能发现。1.开门见山，一眼看透微信读书：划线内容值得仔细看看。还记得曾经借别人笔记看的时光嘛？微信读书对有其他用户标注过的内容会显示标注和下划线，就像书本上的笔记，一眼就可以辨析出来，点击就能看到其他用户的笔记。▲ 微信读书的笔记小宇宙：上新功能啦。打开小宇宙，如果有新功能就会以半浮层的形式直接提示，用户第一时间就能知道有哪些新功能，有需求即可快速体验。▲小宇宙的新功能提示浮层2. 如有需要，就能发现亚马逊：缺货了，“查看可用选项”。当组合出现的商品中的某一规格缺货时，亚马逊不会将该规格置灰，而是会提示“查看可用选项”，如果用户对该规则感兴趣就能快速感知到还有别的型号有货。▲ 亚马逊商品详情页网易云音乐：进度条上的副歌点位标识。只要用户关注进度条，就能感知到该点位，准确掌握进入副歌的时间，对于想听副歌的用户来说拖动效率能得到有效提高。▲网易云音乐进度条上的副歌点位快手：里面有“神评”。如果有优质评论，评论入口处就外透“神评”标识帮助用户确定评论的可消费性，进入评价列表后也会标识“神评”帮助用户定位。▲快手“神评”饿了么：跟随骑手的健康信息。疫情反复的当下，饿了么的送餐界面上，跟随骑手增加展示了体温及疫苗接种情况，用户看骑手位置的时候就能看到，为用餐者增添了一份安心。▲饿了么骑手健康信息#02体感直观的呈现形式体感是指用户对于事物的感受，常见的信息呈现形式有图文、视频等，但随着VR、AR、3D建模等技术的应用，信息可视化程度更高、信息表达更准确，用户能够对屏幕内的事物形成趋于现实生活的真实体感。从信息复杂度从简单到丰富分别为：多维信息的拟真表达、真实世界的直观映射、信息过载时的降噪平衡。1. 多维信息聚合的拟真表达淘宝3D互动+AR美妆/试穿：对商品信息进行了多维度表达，3D互动支持720度旋转查看和放大查看表达商品外观、细节，AR美妆/试穿则直观真实地呈现了上身效果，且覆盖品类多，能帮助用户对商品形成确定性体感辅助购买决策。▲ 淘宝3D互动+AR美妆/试穿（EG.口红）得物3D空间+虚拟试穿：聚焦于鞋靴垂直领域，支持鞋子720度旋转查看和放大查看，同时提供了虚拟试穿能力，鞋子的材质、细节和上脚效果都是十分直观拟真。▲ 得物3D空间+虚拟试穿懂车帝3D看车：车内空间的表达不局限于把车身尺寸标注出来，还将乘坐空间和后备箱空间分别以不同身高的乘坐情况和行李箱的组合放置情况进行了可视化表达，信息呈现形式全面且直观，也更容易被用户理解。▲ 懂车帝3D看车2. 真实世界的直观映射高德地图车道级导航：车道级导航对现实道路进行了三位模拟，信息表达相较于传统导航更精细，可视化程度更高，道路上虚实线、各车道的转向、当前行驶车道、周围车辆信息均直观的呈现在了地图导航上，用户对于当前的路况能够形成更加真实直观的体感。▲ 高德地图车道级导航全景故宫：将故宫的全貌还原到线上，用户不仅能看到宫殿布局，还能看到殿内景象，且各宫殿介绍能够配合全景地图一一呈现，用户足不出户就能对故宫形成真实全面的认识。▲ 全景故宫3.信息过载时的降噪平衡贝壳·VR看房：全景视角可以让用户对房屋的真实情况一览无余，但二手房内的过多的生活痕迹反而形成了信息噪音，贝壳基于房屋户型提供了新的装修效果，可以和房屋现状进行对比查看，降低了干扰信息同时保证了真实体感。▲ 贝壳·VR看房#03写在最后信息表达直观易感知是构建愉悦用户体验的重要因素！一方面，我们要对信息进行提炼，构建易于识别、易被感知的信息标识；另一方面，我们要对信息进行组织，借助科技的力量，构建体感直观的呈现形式。带着同理心和对新技术的探索欲，相信设计师们一定能呈现出精彩信息表达形态。✨ 本期粉丝福利 ✨—信息直观易感知，小编也不多废话！神评第一，送公仔，冲！截止：4月25日 12:00本期作者：瞪大双眼的小叶//////END//////淘宝设计，一个服务于全球亿万消费者体验的设计团队，致力于让设计触动人心，让商业美而简单。欢迎加入我们，公众号后台回复“招聘”，了解最新招聘信息。

关键词： 信息表达 用户体验 真实世界