最近为了帮助 C 端学员更好的提升产品、体验、交互思维,会更新一系列 C 端相关的优化案例,在内部完成讨论后我们再独立输出一套方案做对照,促进大家进行深度思考和发散。

image.png

此次改版的系列是两步路的路线模块,包括路线的详情页和相关功能使用的页面,我们今天的分享先从它的详情页开始改起。

image.png


问题分析

在分析问题前简单介绍下这个应用和功能模块,两步路是国内最权威的户外徒步路线记录和分享的工具/社区,我要找徒步路线就要到这个 APP 里搜索,并在抵达目的地后开启路线的导航跟着指示走(才不会迷失在山里)。

路线详情页,就是用户自己记录并分享出来的路线(虽然不止徒步)介绍页面,包含了大量的信息,用户要通过这些信息来认识这条线路,并决定是否要使用它作为自己出行的方案。

而目前的页面结构对理解线路来说存在很多非常多的问题,所以为了方便大家理解,我们根据组件的顺序从上到下进行分析。

问题1:首屏信息展示混乱缺乏重点

在首屏中,内容是很分散且混乱的。一方面顶部封面只有一张大图其实作用很小,对理解路线的作用有限,另一方面下方的一些关键数据又展示得很没有存在感。

image.png

比如我们看路线时最关注的里程、爬坡、耗时等数据,只放在标题下方是很难看清的,而且只用图标还有一定的理解成本。而标题旁边那个二维码图标也放的很牵强,正常分享路线用户是不会想着去点它的。

image.png

再往下用户信息夹在标题和路线属性说明中,也非常割裂,破坏阅读节奏。路线的属性信息先给标签再在右侧做文字说明的做法也背离正常的阅读习惯。

image.png