一个优秀的详情页可以让用户清晰愉快的接收已有的信息，为用户下一步的操作提供一定的指导。 那么什么样的详情页设计才是好的设计呢？ 在本文中，笔者结合实际案例，从目标、内容、视觉等方面总结了详情页的设计策略。

一个从0到1的详情页应该如何设计，应该遵循哪些设计原则，可以参考哪些设计模型？ 本文将以“设计大侦探”知识星球详情页为案例，告诉你设计详情页的完整过程，帮助你掌握三个重要的思维模型和一套行之有效的设计方法。

一、简介

1、什么是详情页？

详细信息页面是对产品或服务的描述。 我们听到最多的就是电商详情页，很多时候直接定义为电商详情页，但其实任何产品或服务都有详情页，比如医疗保险产品就需要详情页，让用户通过该页面获得该服务的详情和流程，从而吸引用户下单。

本文所指的详情页包括各类产品和服务的详情页。 举的案例是知识付费行业知识星球详情页的设计。

2.详情页有什么作用

详情页就像产品的服务后台。 从这个页面，用户可以全面了解产品的服务人群、核心优势、服务流程、注意事项等详细信息。

详细信息页面也可以用作登录页面。 比如我们卖产品的时候，我们设计的H5或者网页既属于着陆页，又属于详情页。 一个成功的详情页设计可以为产品带来超高的转化率和销量。 相反，如果详情页设计不好，即使投入大量资金进行推广，转化率也会极低。

3.详情页的生命周期

详情页是商品的表现层。 它和产品一样有生命周期。 在不同的生命周期中，有不同的侧重点和策略。 比如大侦探的知识星球在设计的时候，在导入期的时候，比较注重服务体系的验证。 因此，详情页的设计要求就是以快速、快速取胜。 完成 MVP 版本。

4.适合阅读人群

本文共6623字，主要分为四个部分。 不仅适合UI设计师、UX设计师、产品总监和运营，也适合电商设计师、品牌策划和互联网从业人员。 其次，对于创业者来说，本文将带您熟悉详情页设计的完整流程，有效降低时间和人力成本。 另外，本文所指的乙方主要是指设计师、产品、老板或业务方的上游。

2.设定目标

无论任何项目的设计，如果设计目标不明确，就没有方向，最终的设计结果也难以验证。 详情页的设计也是如此。 虽然看起来只是一个页面或者图片，但毕竟详情页和商品一样，也是需要不断迭代优化的。

一、设计背景

“设计背景”就是了解为什么要做这个详情页，决策过程是怎样的。 在这个环节，我们可以使用常见的5Why分析法，不断追问，直到了解乙方设计的真正原因。

不要低估这一步。 如果不弄清立项的关键原因，帮助乙方理清设计目标，那么乙方很容易改变要求。 比如大侦探为什么要设计详情页？ 这是因为我们的知识星球服务体系已经形成了闭环，所以我们打算先试运营网页设计制造，验证商业模式。

2、需求分析

“需求分析”是在了解详情页的“设计背景”后，对乙方的真实需求进行深入分析。 我们可以通过5W2H分析法来找出做什么，看谁，在哪里看，喜欢哪些风格等问题。 如果是外包项目，还要综合考虑乙方的预算、周期、收益等因素。 需求一定要深入挖掘，不能做模棱两可的工作，否则整个项目的设计工作会随时变化。

比如大侦探的详情页需求是快速完成一个MVP版本进行试错，看知识星球的服务是否符合用户的需求，所以整体视觉要求不高，比较注重设计效率和完整性。

Tips：需求的拆解、挖掘、梳理能力，是一个优秀的设计师要成为顶尖设计师所需要具备的能力。 你必须学会​​快速阅读乙方的需求，并做出引导和判断。

3.设计目标

我们梳理完“设计背景”和“需求”后，就可以提炼出这个详情页的“设计目标”了。 “设计目标”不仅可以为设计团队设定一个非常明确的方向，同时也是验证最终设计效果的标准。 比如大侦探的详情页设计目标是在3天内快速设计出一个MVP版的详情页，其次设计风格要符合品牌基调。

3. 内容设计

“设计目标”确立后，进入“内容设计”环节。 简单来说就是文案策划设计原型。 但是这部分的权重最高。 对于一个详情页，如果内容设计不好，再好的视觉效果也是徒劳。 如果不能吸引用户订购产品，那么所有的投资都将付之东流。 对于设计师来说网页设计制造，这部分工作很少涉及，但是当你掌握了这个方法后，你的设计价值就会增加。

1、用户分析

在设计内容之前，首先要想好这个详情页是给谁看的。 这不仅会决定文本的基调、内容结构、视觉风格，还会决定交流的方式。 如果是面向老年用户的产品，你会用“强大”这个词吗？

其次，我们必须考虑这些用户的特征和偏好。 如果用户是一群夜猫子，那么我们可以考虑设计一个紫色的详情页，供他们晚上看。

最后，需要考虑不同的用户群体。 比如大侦探的详情页，内容结构会针对社区成员和非社区成员进行不同的设计。 这是因为社区成员对大侦探已经非常熟悉，品牌的介绍可以尽量弱化，节省篇幅。 对于非社区成员，需要增加品牌介绍，增加背书，加强凭证。

Tips：拿到一个项目，用户分析是最基本的一步。 你必须弄清楚谁会看，谁会用，他们有什么特点。

2.场景分析

在确定“谁会看到”之后，需要考虑用户访问详情页的真实场景。 需要考虑用户浏览详情页的场景、设备、平台和打开方式。 比如详情页是发布H5格式，还是主要传播在同学圈，展示在知识星球还是小歌通上？ 不同的浏览场景需要考虑不同的内容展示方式，

知识星球大侦探展示的详情页，我把价格放在最上面。 良好的激活形式。 这就是场景所带来的不同。

Tips：在考虑展示场景细节的时候，我特意查看了知识星球的详情页规范、展示方式和设计要求，最后得到了知识星球平台只支持3张图片和最大图片高度的关键信息。

如果忽略了这个信息，当整个团队努力完成了设计稿，却发现高度无法超过，这时候再改会特别痛苦。

因此，在设计详情页时，需要模拟用户真实的访问场景，才能保证疗效。

3、竞品监管

无论做什么设计，都离不开竞品的监督。 “竞品监管”有很多维度，内容、设计风格、营销方式、服务流程等，当我们在做一个从0到1的详情页时，找到适合自己的竞品是一种极其高效的形式工作的。 往往我们想到的是别人已经做过的事情，所以监管竞品这一步肯定是需要时间的。

Tips：竞品监管也要有明确的目标，否则内容太零散，不知从何下手。

4、内容策划

从这一步开始，我们进入设计执行阶段。 一个优秀的详情页设计，需要全面设计从用户接触到商品到下单的整个体验旅程。 不仅需要专业创新的内容，更需要营销策略的设计。

1）心智模型

以下三种思维模型是我在详情页设计中最常使用的设计模型。 FABE+SPIN可以帮我快速细化一个详情页的内容结构，社会心理学可以加入营销策略，提高详情页的商业价值。

①FABE销售规则

FABE销售法则是一种按照科学逻辑，将商品特性（ ）、商品优势（ ）、客户利益（ ）、卖点证明（ ）有机结合的技术和工具。 如果你曾经纠结过一个详情页到底应该把“品牌优势”放在首位，还是把“用户痛点”放在首位，那么这个模型可以帮你找到一个参考标准。

② SPIN销售方式

SPIN销售法，即探索现状（）、识别困难（）、引出潜在后果（）、介绍解决方案（Need-）。 该模型除了用于定义内容结构外，还可以作为复制描述模型。

比如我们在介绍一个产品的时候，可以按照SPIN模型来写，这样会很有说服力。 随着经济形势越来越差（S），UI设计师的职业危机也越来越大（P），但是一个纯粹的执行工具设计师会面临降薪或者失业（I），这个时候，如果设计师不注重产品思维能力（N）的学习和提升，那么未来的竞争力会越来越弱。

③社会心理+陈勇转型六要素

看过《 》的同学应该对西奥迪尼的社会心理学《影响力》六大说服原则有印象。 它们是互惠互利、承诺和一致性、社会认可、偏好、权威和稀缺性。 营销专家陈勇先生的《转型六要素》也摘自本书。

这两种模式对产品的营销设计都有很大的帮助。 比如，为了吸引用户形成兴趣浏览，就要运用“互惠原则”，给用户发红包； 营造紧迫感。

2）五保户的真实原型

“没有原型就没有讨论。” 在《- and for 》中的话真的很简单。 在内容设计的这个阶段，你常常会陷入没有想法、没有灵感的境地。 这个时候，你就要大胆的下手了。 其次，我推荐使用Xmind工具进行设计。 除了发散思维，操作成本也很低。

①梳理内容结构

页面的内容结构就是这个页面要放什么内容，内容顺序怎么安排。 这时候我们就需要用到FABE或者SPIN模型。 如果你完全没有经验，可以直接按照FABE的模型来做。 从这个产品是什么，它有什么优势，它为用户解决了什么痛点，你做了什么真实的案例去规划，你会发现它就是按照这个结构设计的，即使你不在上面添加任何内容详情页，可以获得及格分数，用户阅读起来会感觉更自然。

②添加营销策略

营销策略是在页面内容中加入营销手段，从而吸引用户浏览和订购服务。 比如很多产品在促销的时候，都会给用户赠送各种免费礼包。 这或许是基于“互惠原则”，让用户受益，吸引用户浏览。

再比如，有些医疗服务为了提高服务的背书，打消用户的疑虑，会加入很多真实的医生、专家、真实的案例。 另外，我们经常会看到限时参与和数量有限的参与，利用稀缺效应来营造下单的紧迫感。

Tips：当我们完成这一步后，虽然可以和乙方进行初步的沟通，但是这样可以降低下一步的返工率。

3）高保真原型

我们完成五保模型后，页面的框架设计好了，接下来要做的就是根据框架设计文案的结构和表现形式。

① 设计文案结构

文本结构是什么样的？ 文案结构就像歌手写小样，没有歌词，但可以随着唱的曲子创作，让编曲者跟着曲子作曲。

很多设计师往往认为没有文案就无从下手，虽然这是一种能力的缺失。 我们可以先设计好文案结构，让文案方案跟着你的结构创建，这样可以大大提高工作效率。

② 表达方式

我们在设计文案结构的时候，还要考虑设计的表达方式。 不要以为这是视觉设计的工作。 反之，在这个环节想好设计的最终效果，对详情页的最终效果会有很大的帮助。

比如我们要展示一个产品的成功案例，虽然有很多内容方式可以选择，但是我们可以放用户陌陌评论的截图，也可以按省份和新村展示用户的真实评价。 如果没有什么创新，就全交给视觉设计师了，最终的视觉效果会大打折扣。

温馨提示：高保真原型设计完成后，即可进入第一轮设计评估。 这里有一个办法，一定不能只发一张图片给乙方，一定要讨论自己的设计思路，这样才有说服力。

4.视觉设计

高保真原型设计稿确定后，如果是外包项目，这一步当然是项目的里程碑，需要乙方签字盖章才能继续下一步。 视觉设计工作是我们最熟悉的设计环节。 文案和原型已经确定，现在开始做菜。 即使视觉设计为以上工作服务，视觉设计也可以单独作为一个版块，其次还要进行监督、分析和制定设计策略。

1.配色

通常我们可以根据Logo或VI来确定页面的配色，比如主题色、辅助色、渐变色等，这样会保证整个设计的统一性。 其次需要注意的是，如果品牌logo的颜色很低，尽量调整优化。 如果是外包项目，这可能是业务拓展的好机会。

Tips：关于设计的配色，推荐一个非常实用的网站（），只需要输入品牌色的色值，就可以得到与这个颜色相关的补色、邻色等，这将确保您的配色不会出现问题。

2.字体

字体的选​​择不用太担心，因为大部分字体都是有版权的，可供选择的字体不多。 如果用苹果笔记本，苹果方很好，或者思源宋体，阿里巴巴普惠字体等，WIN系统可以直接用宋体和微软雅黑。 至于主视觉的字体，如果条件允许，可以考虑使用付费字体或者让字体设计师单独设计，这样主视觉会更加醒目。

Tips：菜鸟设计师经常会找一些花哨的字体，其实完全没有必要，反而会造成不必要的风险。 另外，任何页面的设计，无论是网站、网页还是UI，都不能超过包括英文在内的3种字体，必须保持设计的统一性。

3、排版

一个详情页可以分为N个部分，每个部分的内容可以分为标题、副标题、正文内容、主视觉和背景。 之后你只需要将每个标题和内容样式设计一个就可以复用，这是最简单的排版方式。 罗宾·威廉姆斯的《为你设计的书》中提到的四大原则——亲密、对齐、重复和对比，只要把握住，排版就不会出错。

提示：设计越好，排版越简单。 建议大家看看《为你设计的书》这本书，你会发现无论设计多么复杂，只要遵循这四个原则，都可以显得非常简单。

4. 图片

图片选择的原则是简洁、高清、与主题相关、色调统一。 不要只是直接使用图片。 通常需要对对比度和色彩饱和度进行简单的调整，其次是色阶，以保证画面的清晰度。

都说好图顶千言，但是现在好图的价格不是买得起的，所以在没有付费图的情况下，在设计的方式上要扬长避短表达方式，比如通过插画（成本也很高）、图标、手机模型、思维结灯光等。

温馨提示：图片一定要保持清晰。 这是设计图片最重要的细节。 如果图片模糊，请不要使用它。

5.装饰元素

装饰元素减少了页面设计的个性化，但又不太花哨。 通常可以从Logo或VI的元素中提炼出来，比如侦探logo的“胡子”、“烟斗”，成为整个页面的点睛之笔。 不仅丰富了页面的设计，还提高了品牌认知度，加深了用户对品牌的印象。

考虑到详情页通常很长，我喜欢设计一个进度条，它会随着用户浏览页面的高度而变化。 这样的装饰元素会给用户带来非常友好的体验。 你可以想象，当你在没有站点提示的情况下乘坐公交车时，你会有多慌张。 页数是事实。

Tips：我以前查过很多设计作品集，发现很多设计师加入了很多无关紧要的装饰元素，会让你的设计显得非常花哨和外行。

6.优化

缓慢而小心地工作。 对于视觉设计，只有不断尝试各种具有治疗效果的设计，才能找到最好的风格。 这没有秘密。 不管设计师的经验如何，无论他做的是什么类型的项目，只有不断尝试各种疗效，才能做出更好的设计。 虽然大侦探的详情页设计时间很紧，但我也尝试了多个版本，推倒，重启，优化了好几次。

Tips：好的设计稿是没有任何技巧的。 别以为这些前辈设计的时间会很短。 越厉害的设计师对设计的要求越高，不符合他们心理底线的作品可能不会发表。 出来。 所以在设计的时候一定要有耐心，不断优化，这样才能设计出越来越好的作品。

五、设计说明

当页面设计完成后，不要以为一切就结束了。 在给乙方展示作品之前，不要直接发图片。 这种交付没有任何价值。 不管你做得多好，如果缺乏对设计思想的讨论，别人就很难感受到你设计的价值。 因此，设计稿的设计讨论非常重要。

1.PPT展示

PPT的演示效果是最好的，尤其是把设计方案展示给乙方的时候，当你在背后给乙方展示你的设计思路的时候，是一种非常美妙的成就感。 PPT中显示的内容可以从我们的设计过程中提取出来。 通常我会控制在10-15页，演讲时间在10分钟左右。 这个宽度非常适合乙方演示。

2、长页面展示

长页显示的制作成本低。 如果交货时间太短，您可以选择这些方式。 这些方法其实都是基本的，设计的质量一定要控制好，才不会因为太粗糙而让整个团队辛辛苦苦的设计方案付之东流。

六，结论

这次详情页的设计分享教程其实是MVP版本，很多设计步骤细节不够详细，但是我们要像产品迭代一样，不断优化设计，构建这个系统。 相信对于很多设计师来说，明天从0到1的分享，已经让大家了解了一个完整的详情页诞生的过程，从而提高工作的主动性，而不是停留在单纯的设计执行阶段。