关于动态详情页的场景体验设计研究

黄荣强 黄迅

摘要：在移动端APP设计中，合场景的用户体验设计是产品的核心竞争力，即需要根据不同用户需求、体验场景提供最合适的界面设计。本文通过分析各大app中图片动态详情页的解决情况来归纳现有方案优缺点，再通过对用户对场景分析法重新提炼出新的动态详情页解决方案，完善这种细分场景的用户阅读体验，提升产品品质。

关键词：社交;交互设计;体验场景;用户体验

中图分类号：TU986.2 文献标识码：A 文章编号：1005-5312（2019）11-0036-01

一、本课题的研究背景

随着移动互联网的扩张和资讯的爆炸，用户对信息的获取效率要求越来越高，现有APP的图片动态详情页的交互模式和界面设计趋于模式化，没有针对多图片和文字信息这一场景进行设计，导致阅读效率低下，冗长的操作路径的会降低用户的点击率和阅读量。基于这种现状，需要推动设计关注如何针对不同体验场景去提升用户的阅读效率，节省用户时间，提升产品的体验畅快感。

二、场景分析法

在交互设计中，常常需要对用户场景中的功能进行梳理，整理出符合用户心智模型的信息架构。要对功能所处的应用场景进行详细分析，了解场景的特殊性与限制条件。场景是决定一个页面设计是否成功的关键。即使是同样的一个功能，在不同的场景中好的设计也不是一成不变的，都需要根据场景而进行相应的变化，有的是两个场景所做的设计是相冲突的。

三、现有案例分析

现在移动端app普遍会增加社交功能（动态页）来促进产品的社交属性，通过组建人际关系网来提升产品黏性。现有的模式主要分两种：以熟人社交为代表的微信和以陌生人社交为代表的微博，以微信为代表的熟人社交，动态页（朋友圈）文字、图片、评论、点赞默认完全展示，提高用户获取信息的效率;

以微博為代表的陌生人社交，动态页（关注/热门）默认展示文字和图片，将评论、点赞和转发等详情后置到详情页（微博正文）;

体验上的差别归根结底是由产品形态和场景特性决定的，微博动态页推送信息不一定符合用户喜好，完全展示文字、图片、评论等会造成用户的浏览效率的直线下降，设置成点击后进入微博正文页，查看完整图文、评论等信息，提升产品的浏览体验。

现有问题点在于，第二种解决方案没有针对动态页和详情页去细分场景，优化用户体验，用户在进入详情页后的有进一步查看了解详细图文内容的需求，而此时图片展示形态还是和动态页一致，需要点击进入新的页面层级去查看大图，不能有效提升阅读效率。

四、通过场景分析去优化体验

现面世产品详情页部分查看大图体验差，层级深。实际使用中，用户在动态页被缩略图吸引，进入详情页，再手动点击打开大图;切换大图显示时还要反复滑动或者多次点击，无法快速查看所有图片。

基于这种使用场景，用户需要的是在详情页高效获取图、文信息，直接展示图片更符合用户心智模型。即在详情页上直接展示大图，通过重构界面将缩略图作为导航定位栏，点击缩略图快捷切换大图，或是左右滑动切换大图。做到交互层级底，缩短查看路径，阅读效率提升明显（如下图所示）。

五、结语

通过场景分析的设计方法，去体验和发现现有详情页的不足，分析这种体验场景下用户的诉求点，通过思考用户的核心需求，简化体验路径。将详情页的图片排布重构，提出用缩略图作为导航栏，默认按顺序大图展示，点击缩略图或者滑动大图切换显示，做到图片查看的高效和快捷。这种细分体验场景去设计的方法，能更符合用户的心智模型，可以设计出更具有创新的有价值的产品。