论坛 › 香港 › 5个方面聊聊：详情页改版思路

fny5jt9 发表于 2024-8-12 10:50:38

5个方面聊聊：详情页改版思路

    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">近期</span><span style="color: black;">始终</span>在做的一件事是对详情页的改版与优化，<span style="color: black;">此刻</span>已进入尾声，其中有遇到坑，<span style="color: black;">亦</span>有<span style="color: black;">增多</span>对用户的理解，<span style="color: black;">这儿</span>就和<span style="color: black;">大众</span>聊聊关于详情页的那点事。</p><img src="https://p3-sign.toutiaoimg.com/pgc-image/153075876696190af3a4a98~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723653507&amp;x-signature=nboM9axMCuK%2Fkc2vANrHFz9M7EM%3D" style="width: 50%; margin-bottom: 20px;">
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">1、</span><span style="color: black;">怎样</span>定义详情页</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">我理解详情页是用户在<span style="color: black;">运用</span>app时，体验核心功能的落地页。</p>对电商<span style="color: black;">制品</span>，商品详情页是用户在购买前最高频的落地页；对社交<span style="color: black;">制品</span>，聊天页面则充当了“详情页”；对内容型<span style="color: black;">制品</span>，<span style="color: black;">最后</span><span style="color: black;">必须</span>用户观看，产生停留时长的则为内容详情页。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">总的<span style="color: black;">来讲</span>，虽然<span style="color: black;">制品</span>类型不<span style="color: black;">同样</span>，但<span style="color: black;">针对</span><span style="color: black;">每一个</span><span style="color: black;">制品</span>，都有其自己定义的详情页。</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">2、</span>详情页的<span style="color: black;">功效</span></h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">详情页<span style="color: black;">常常</span>是用户完整<span style="color: black;">运用</span><span style="color: black;">制品</span>时必经的页面，<span style="color: black;">经过</span>对用户<span style="color: black;">运用</span><span style="color: black;">制品</span>的路径总结，如下图：</p><img src="https://p3-sign.toutiaoimg.com/pgc-image/1530758762046031c9044d4~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723653507&amp;x-signature=mygVqTJ%2BO1zQyPY9pjGTvv95mj0%3D" style="width: 50%; margin-bottom: 20px;">
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">能够</span>看到，页面层级是递进关系，内容量<span style="color: black;">是由于</span>多到少，由大到小的漏斗，反映了<span style="color: black;">制品</span>在<span style="color: black;">持续</span>尝试<span style="color: black;">知道</span>用户需求的意图。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">说的具象一点，我觉得<span style="color: black;">能够</span>概括为2点：</p> 产生关键的<span style="color: black;">制品</span>数据，<span style="color: black;">例如</span>：内容型<span style="color: black;">制品</span>，会在该页面产生阅读量、播放量等。引导用户做做决策，<span style="color: black;">例如</span>：电商型<span style="color: black;">制品</span>，引导用户做购买决策。<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">3、</span><span style="color: black;">为何</span>改版详情页</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">详情页的好坏归根结底是个用户体验问题，<span style="color: black;">由于</span>当用户真的从列表页或其他<span style="color: black;">途径</span>进入了详情页，说明用户<span style="color: black;">已然</span>对详情页里的信息产生了初步兴趣，当来到详情页<span style="color: black;">快速</span>的跳出或返回了，那只能是详情页的信息<span style="color: black;">无</span>满足他的需求。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">有可能是内容质量问题，<span style="color: black;">亦</span>有可能是信息结构问题。这<span style="color: black;">必须</span>更<span style="color: black;">详细</span>的数据来定位，<span style="color: black;">这儿</span>不做<span style="color: black;">详细</span>阐述。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">但<span style="color: black;">针对</span><span style="color: black;">制品</span>经理<span style="color: black;">来讲</span>，改版是围绕着<span style="color: black;">处理</span>用户需求来做的，<span style="color: black;">因此</span><span style="color: black;">必须</span><span style="color: black;">知道</span>详情页满足了用户什么需求，<span style="color: black;">那些</span>依然没有满足或<span style="color: black;">必须</span><span style="color: black;">处理</span>的问题。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">拿我负责<span style="color: black;">制品</span><span style="color: black;">来讲</span>，我所做的<span style="color: black;">制品</span>是做招聘的，核心需求是帮用户找到合适工作。详情页呈现的是职位信息，用户<span style="color: black;">是不是</span>做出应聘决策，取决于<span style="color: black;">非常多</span><span style="color: black;">原因</span>：<strong style="color: blue;">工作时间、地点、薪资、<span style="color: black;">机构</span>、工作内容等等</strong>。这些是<span style="color: black;">日前</span>已有的基本信息，满足了用户基本需求。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">但事实上，<span style="color: black;">经过</span>对用户的调研与收到的反馈，结合马斯洛需求层次理论来看，<span style="color: black;">咱们</span>只满足了用户最底层的基本需求。<span style="color: black;">倘若</span>要<span style="color: black;">帮忙</span>用户做决策，应是<span style="color: black;">按照</span>金字塔一层一层去满足用户更高价值的需求，从而<span style="color: black;">提高</span>详情页到应聘的转化率。</p><img src="https://p3-sign.toutiaoimg.com/pgc-image/15307587614423cecd76478~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723653507&amp;x-signature=3hbYgjLBLJF5xWizeRGbIhdfxvY%3D" style="width: 50%; margin-bottom: 20px;">
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">4、</span><span style="color: black;">怎样</span>改版详情页</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">这次</span>改版详情页<span style="color: black;">重点</span>分为3个方向：</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">增多</span>信息丰富性，<span style="color: black;">表现</span>专业性，从而<span style="color: black;">提高</span>用户的信任感</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">针对</span>这方面，<span style="color: black;">经过</span>对国内外的竞品调研，去尽可能多的汇总差异化信息，这个过程中<span style="color: black;">必须</span>甄别<span style="color: black;">那些</span>信息对自己<span style="color: black;">制品</span>用户是有价值的，适用于自己<span style="color: black;">制品</span>的业务。先做加法，尽可能多的收集信息。再做减法，<span style="color: black;">按照</span>用户的<span style="color: black;">运用</span>场景，去筛掉不适合自己<span style="color: black;">制品</span>属性的信息。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">执行起来<span style="color: black;">便是</span>，列一个信息框架，<span style="color: black;">而后</span><span style="color: black;">根据</span>框架收集<span style="color: black;">详细</span>的字段，填充进去。看<span style="color: black;">那些</span>字段是能<span style="color: black;">帮忙</span>用户做决策，<span style="color: black;">提高</span>用户体验的。<span style="color: black;">而后</span>再去分析这些字段<span style="color: black;">怎样</span>去计算，<span style="color: black;">怎样</span>去取值。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">如下图：</p><img src="https://p3-sign.toutiaoimg.com/pgc-image/15307587662335fadfefdb3~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723653507&amp;x-signature=r16bzoJFVFZsJZuyw6%2FUbIuXh6E%3D" style="width: 50%; margin-bottom: 20px;">
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">能够</span>理解为，该结构是参考竞品+脑暴+用户调研汇总而成的信息框架。<span style="color: black;">这里</span><span style="color: black;">基本</span>上，由交互产出<span style="color: black;">详细</span>的demo图，<span style="color: black;">而后</span><span style="color: black;">咱们</span><span style="color: black;">按照</span>demo图上最全的信息，挨个去讨论，每种数据对用户的价值。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">当确定<span style="color: black;">有些</span>信息对用户是有价值的，并且能起到有助于用户决策的<span style="color: black;">功效</span>时，最后才<span style="color: black;">思虑</span><span style="color: black;">怎样</span>实现。<span style="color: black;">此时</span>候，会<span style="color: black;">发掘</span>，理想很<span style="color: black;">饱满</span>，现实很骨感。<span style="color: black;">非常多</span>信息虽然确实对用户有<span style="color: black;">功效</span>，<span style="color: black;">例如</span>：<span style="color: black;">经过</span>用户画像<span style="color: black;">帮忙</span>用户计算与该职位的匹配度等。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">但在<span style="color: black;">详细</span>的策略制定过程中，却<span style="color: black;">发掘</span><span style="color: black;">基本</span><span style="color: black;">无</span><span style="color: black;">那样</span>全面的画像数据与标签。冰冻三尺非一日之寒，看似简单的功能并非一蹴而几。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">此时</span>候就<span style="color: black;">表现</span>出了数据丰富的重要性，<span style="color: black;">倘若</span>有足够的数据支撑，<span style="color: black;">能够</span><span style="color: black;">按照</span>各个维度去组合，形成完整的用户画像，<span style="color: black;">而后</span>将业务与用户画像去做精确的匹配，从而大大<span style="color: black;">提高</span><span style="color: black;">举荐</span>效率，降低用户筛选成本。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">运用马斯洛需求层次理论</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">基于内容丰富性去做改版，有个问题是<span style="color: black;">怎样</span>去将信息分级，<span style="color: black;">这儿</span>有一个切入点，即运用马洛斯需求层次理论，将信息<span style="color: black;">恰当</span>的区分。</p><img src="https://p3-sign.toutiaoimg.com/pgc-image/1530758764952b2e028dfb2~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723653507&amp;x-signature=gwa%2BLcnFuzSr%2FQCkeVqZna1boIE%3D" style="width: 50%; margin-bottom: 20px;">
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">用户产生决策有几个关键的心理<span style="color: black;">过程</span>：我<span style="color: black;">能够</span>做，我适合做，我乐于做。</p><span style="color: black;">能够</span>做<span style="color: black;">表率</span>了用户的基本需求，即呈现基本信息，看<span style="color: black;">是不是</span>符合<span style="color: black;">需求</span>。适合做<span style="color: black;">表率</span>了用户的属性和职位数据匹配，<span style="color: black;">例如</span>说：我是学生，那我和麦当劳服务员的属性会更匹配，和饿了么送餐员的属性不太匹配。乐于做<span style="color: black;">表率</span>了用户的一种<span style="color: black;">剧烈</span>情感意愿，即我符合该职位基本<span style="color: black;">需求</span>，我的属性和该职位<span style="color: black;">亦</span>匹配，<span style="color: black;">而后</span>我还<span style="color: black;">尤其</span><span style="color: black;">爱好</span>该职位。<span style="color: black;">例如</span>：<span style="color: black;">经过</span>别人对职位的主观感受，<span style="color: black;">加强</span>用户对该职位的报名意愿。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">倘若</span><span style="color: black;">能够</span><span style="color: black;">根据</span>这个<span style="color: black;">规律</span>去呈现信息，<span style="color: black;">那样</span>就遵从了由基本需求晋升，到自我价值需求的金字塔形信息结构。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">区分详情页模板，扬长避短</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这个改版思路并不是通用型的，只做参考。各个<span style="color: black;">制品</span>所<span style="color: black;">包括</span>的业务类型是不<span style="color: black;">同样</span>的，<span style="color: black;">倘若</span>业务过于<span style="color: black;">繁杂</span>，并且在用户端有<span style="color: black;">表现</span>，那就应该站在用户<span style="color: black;">方向</span>，对<span style="color: black;">区别</span>业务展示<span style="color: black;">区别</span>模板。这么做是为了降低用户对<span style="color: black;">区别</span>业务类型的认知难度。</p><img src="https://p3-sign.toutiaoimg.com/pgc-image/15307587678593fce7c9c1b~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723653507&amp;x-signature=IL4laAmM6%2FbENtR5g4o%2FUPGW5SQ%3D" style="width: 50%; margin-bottom: 20px;">
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">举个例子：在线职位和线下职位。在线职位不受时间空间的<span style="color: black;">需求</span>，随时结算；而线下职位则<span style="color: black;">需求</span>时间、空间，且结算有周期。<span style="color: black;">因此呢</span><span style="color: black;">针对</span>这两种信息差别<span style="color: black;">极重</span>的业务类型，在详情页就<span style="color: black;">能够</span><span style="color: black;">经过</span>信息差异化来<span style="color: black;">表现</span>二者的<span style="color: black;">区别</span>。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在线职位有着<span style="color: black;">类似</span>的工作流程，<span style="color: black;">因此呢</span>对其单独<span style="color: black;">表示</span>出工作流程，降低用户学习成本。而线下职位<span style="color: black;">广泛</span>会有工作<span style="color: black;">需求</span>，<span style="color: black;">因此呢</span>对其<span style="color: black;">表示</span>商家的<span style="color: black;">需求</span>。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">这般</span>模板化的好处在于，对<span style="color: black;">区别</span>类型的职位、<span style="color: black;">区别</span>业务，<span style="color: black;">经过</span>信息的差异化，从而让用户更轻易的<span style="color: black;">认识</span>到该业务的特点，<span style="color: black;">而后</span>辅助用户进行决策。</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">5、</span>上线之后</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">针对</span>这类特大改动，且是优化用户体验的改动，最好<span style="color: black;">能够</span>分A/B test做对比。A版本是改版前版本，B版本是改版以后版本，<span style="color: black;">经过</span>二者上线以后的数据变化，从而评判<span style="color: black;">这次</span>改版<span style="color: black;">是不是</span>有效。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">结合这个App，<span style="color: black;">咱们</span><span style="color: black;">必须</span>关注的是详情页的报名转化率，<span style="color: black;">由于</span><span style="color: black;">增多</span>的这些丰富职位信息，按理<span style="color: black;">来讲</span>是<span style="color: black;">帮忙</span>用户进行决策的，<span style="color: black;">亦</span><span style="color: black;">便是</span>引导报名。<span style="color: black;">那样</span>，从详情页到报名这层转化应有<span style="color: black;">明显</span><span style="color: black;">提高</span>。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">上线以后，取一段稳定的时间段，并避开运营活动、市场推广等带来的数据波动，就<span style="color: black;">能够</span>清晰的看出<span style="color: black;">这次</span>改版以后的转化率变化曲线。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">用户在<span style="color: black;">制品</span>上的<span style="color: black;">行径</span>路径，<span style="color: black;">能够</span>理解是一层层的沙漏，每一步的损耗、流失，留存，都有其客观<span style="color: black;">原由</span>和主观<span style="color: black;">原由</span>，而<span style="color: black;">制品</span>的<span style="color: black;">功效</span>就在于将客观<span style="color: black;">原由</span>带来的每一层转化，尽可能<span style="color: black;">提高</span>，从而<span style="color: black;">增多</span><span style="color: black;">最后</span>的核心用户占比。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这在数据上就可以证明，你的<span style="color: black;">制品</span>满足了核心用户的需求。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><strong style="color: blue;">#专栏作家#</strong></h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">王伟华，<span style="color: black;">微X</span>公众号：夜漫<span style="color: black;">制品</span>（learnerwwh），一只略带文艺情怀的<span style="color: black;">制品</span>汪，<span style="color: black;">善于</span>社交，<span style="color: black;">新闻</span><span style="color: black;">行业</span><span style="color: black;">制品</span>，心理学<span style="color: black;">兴趣</span>者，<span style="color: black;">日前</span>正<span style="color: black;">处在</span>知识体系搭建<span style="color: black;">周期</span>。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">题图来自 Pexels，基于 CC0 协议</p>

nqkk58 发表于 2024-10-2 01:44:39

“沙发”（SF，第一个回帖的人）‌

nykek5i 发表于 2024-10-10 15:33:17

外贸网站建设方法 http://www.fok120.com/

j8typz 发表于 2024-10-14 15:08:10

这夸赞甜到心里，让我感觉温暖无比。

查看完整版本: 5个方面聊聊：详情页改版思路