一个优秀的详情页能让用户清晰愉快地接收到已有的信息，并引导他们进入下一步。什么样的细节页面设计才是好的？本文从目标、内容、视觉等方面总结了详情页的设计策略。，结合实际案例，那么我们一起来看一下。

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

一.导言1。什么是详情页？详细页面是对产品或服务的描述。我们听到最多的就是电商详情页，往往直接定义为电商详情页。但其实任何产品或服务都有详情页。比如一个医疗保险产品，需要一个详情页，让用户从这个页面中获取这项服务的详情和流程，从而吸引用户下单购买。

本文中提到的详细页面包含各种产品和服务的详细页面。引用的案例是某知识付费行业的知识星球详情页设计。

2.详情页的作用是什么？详情页就像是一个产品的服务前端。用户可以从该页面全面了解该产品的详细信息，如服务人群、核心优势、服务流程和注意事项等。

详细信息页面也可以用作登录页面。例如，当我们销售一个产品时，我们设计的H5或网页同时属于登录页和详细信息页。一个成功的详情页设计可以为产品带来超高的转化率和销量。相反，如果详情页设计不好，即使投入一大笔钱做推广，转化率也会很低。

3.详细信息页面的生命周期。详细信息页面是产品的性能层。它与产品具有相同的生命周期。在不同的生命周期，有不同的侧重点和策略，比如设计侦探的知识星球。在导入期的时候，更注重服务体系的验证，所以详情页的设计要求是快速取胜，快速完成MVP版本。

4.这篇6623字的文章适合读者。主要分为四个部分。不仅适用于UI设计师、UX设计师、产品经理、运营，也适用于电商设计师、品牌策划、互联网从业者。其次，对于创业者来说，本文会让你熟悉一个完整的详情页设计流程，有效降低时间和人力成本。另外，本文所指的甲方主要是指设计师、产品、老板或业务方的上游。

二、制定目标

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

1. 设计背景

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

不要小看这一步。如果你不搞清楚这个项目的关键原因，不帮甲方梳理设计目标，那么甲方就很容易改变要求。比如大侦探为什么需要设计详情页？这是因为我们的知识星球服务体系已经形成了一个闭环，所以我们准备开始试运行，验证商业模式。

2.需求分析“需求分析”是在了解本详情页的“设计背景”后，对甲方真实需求的深入分析。我们可以用5W2H的分析方法，挖掘出做什么，给谁看，在哪里看，喜欢什么风格等具体问题。如果是外包项目，要结合甲方的预算、周期、公司利润来考虑。需求挖掘一定要深入，不能做模棱两可的工作，否则整个项目的设计工作会随时发生变化。

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

温馨提示:拆解、挖掘、整理需求的能力，是一个优秀的设计师需要具备的，能够上到顶层的能力。学会快速阅读甲方要求，并做出引导和判断。

3. 设计目标

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

三、“设计目标”确立后，内容设计就进入了“内容设计”环节，也就是通常所说的文案策划和设计原型。但这部分权重最高。对于一个详情页来说，如果内容设计得不好，视觉效果再好也是徒劳的。它无法吸引用户购买产品，所有的投入都会白费。对于设计师来说，这部分工作很少涉及，但是当你掌握了这种方法，你的设计价值就会得到提升。

1. 用户分析

在设计内容之前，一定要想好这个详情页是给谁看的。这不仅会决定文字的调性、内容结构、视觉风格，还会决定传播的形式。如果是针对老年用户的产品，你会用“给力”这四个字吗？

其次，我们要考虑这些用户的特点和偏好。如果用户是一群夜猫子，那么我们可以考虑设计一个黑暗的详情页，让他们晚上看。

最后，考虑不同的用户群体。比如侦探的详情页，会针对社区成员和非社区成员，在内容结构上设计不同的内容。这是因为社区成员对大侦探已经非常熟悉了，品牌的介绍可以尽量弱化，节省空时间。面对非社群成员，需要介绍品牌，增加背书，增强信任感。

温馨提示:拿到项目，分析用户是最基础的一步。你一定要搞清楚谁会看，谁会用，他们的特点是什么。

2. 场景分析

确定给谁看之后，就要考虑用户访问详情页的真实场景了。一定要想好用户浏览详情页的场景、设备、平台和打开方式。比如详情页是以H5格式发布，还是主要在朋友圈传播，在知识星球展示还是在小叶童展示？不同的浏览场景必须考虑不同的内容呈现方式，

我把价格放在知识星球大侦探显示的详情页的最上面。一个朋友告诉我，我在微信上打开，发现我的头被遮住了，但是这个位置是知识星球的展示页面上最好的激活方式。这就是场景造成的差异。

温馨提示:在考虑展示场景的细节时，我特意调查了《知识星球》的细节页面大小、展示方式和设计要求。最后得到关键信息知识星球平台只支持3张图片，最高图片高度6000px。

如果忽略这些信息，当整个团队辛辛苦苦完成设计稿的时候，发现高度不能超过18000px，这个时候再改会很痛苦。

所以设计一个细节页面，需要模拟用户真实的访问场景和效果。

3. 竞品调研

无论做什么设计，都离不开对竞品的研究。“精品调研”有很多维度，比如内容、设计风格、营销方式、服务流程等。当我们做一个从0到1的详情页时，找到适合自己的有竞争力的产品是一个非常高效的方法。其他人已经做了我们经常认为很难的事情，所以必须花时间去调查竞品。

温馨提示:竞品的研究也要有明确的目标，否则内容太分散，不知道从哪些维度入手。

4. 内容规划

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

1)思维模式

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

① FABE销售规则

FABE销售法是将商品的特性、商品的优势、顾客的利益和卖点的证据按照科学的逻辑有机结合起来的技术和工具。如果你之前有想过要不要把“品牌优势”或者“用户痛点”放在一个详情页上，那么这个模型可以帮你找到一个参考标准。

②旋转销售法

旋转销售法，即询问情况，发现问题，引出潜在后果，介绍解决方法(需要-回报)。这个模型不仅可以用来定义内容结构，还可以作为文案的模型。

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

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

看过《产品拆解》的朋友应该对西蒂尼的社会心理学“影响力”六大说服原则有印象。它们是互惠、承诺和一致性、社会认同、偏好、权威和稀缺。国内营销专家陈勇的“转型六要素”也是从这本书里摘录的。

这两个模型对产品的营销设计有很大的帮助。比如为了吸引用户有兴趣的浏览，就要利用对等原则给用户发红包。为了加快用户的点餐速度，他们会利用“稀缺效应”制造紧迫感。

2)低保的真实原型

“没有原型就没法讨论。”Katherine mcelroy在《原型设计》中的话——创造成功产品的实用方法和实践真的很简单。在内容设计的这个阶段，我们往往会陷入一种没有思路，没有灵感的境地。这时候就要大胆努力了。其次，我推荐使用Xmind工具进行设计，这样不仅可以传播思路，而且运营成本非常低。

①梳理内容结构。

一个页面的内容结构就是在这个页面上放什么，如何安排内容顺序。这时，我们将使用FABE或自旋模型。如果你一点经验都没有，可以直接按照FABE的模式，从这个产品是什么，有什么优势，为用户解决了什么痛点，做过什么真实案例来规划。你会发现，按照这种结构设计的详情页，即使不添加任何内容，也能得到及格的分数，用户看了也会觉得很自然。

②加入营销策略。

营销策略就是在页面内容中加入营销手段，从而吸引用户浏览和购买服务。比如很多商品促销的时候会给用户各种免费礼包，其实就是利用了“互惠原则”，让用户占便宜，吸引用户浏览。

比如有些医疗服务会包含很多真实的医生、专家、真实的案例，以此来增强服务的背书，打消用户的顾虑。我们经常会看到限时加盟，限量加盟，利用了稀缺效应，制造了一种迫切感来下单。

温馨提示:当我们完成这一步，其实可以和甲方进行初步的沟通，这样可以减少下一步的返工率。

3)高保真原型

当我们完成了低保模型，页面的框架就设计好了，下一步就是根据框架设计文案结构和表现形式。

①设计文案结构

文案结构是什么样的？文案结构就像歌手写Demo的时候，没有歌词，但是可以用哼唱的旋律来创作，让作词人跟着旋律去填词。

很多设计师往往觉得没有文案就无从下手，但这其实是一种能力的缺失。我们可以先设计文案结构，让文案计划跟着你的结构创作，这样可以大大提高工作效率。

(2)构思表达形式。

我们在设计文案结构的时候，也要思考设计的形式。不要认为这是视觉设计的工作。相反，在这个环节先思考一下设计的最终效果，对详情页的最终呈现效果会很有帮助。

例如，当我们要展示一个产品的成功故事时，实际上有许多形式的内容可供选择。可以放用户微信评论截图，也可以分省份分社区展示用户真实评价。如果你没有什么创新，全部扔给视觉设计师，最终的视觉效果会大打折扣。

温馨提示:高保真样机设计完成后，即可进入第一轮设计评估。这里有一个窍门。不要只发一张图给甲方，一定要说明我们的设计思路，这样才有说服力。

四、视觉设计

高保真原型设计稿确认后，如果是外包项目，这一步其实是项目的里程碑，需要甲方签字盖章才能继续下一步操作。视觉设计的工作是我们平时最熟悉的设计环节。文案和原型都确定了，现在在做饭。虽然视觉设计是为前面的工作服务的，但是视觉设计也可以作为一个单独的板块，后面是研究、分析、设计策略。

1. 配色

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

温馨提示:关于设计的配色，推荐一个非常实用的网站，Paletton (https://paletton.com)。你只需要输入品牌色的色值，就可以得到补色、邻色等。和这个颜色有关，这样可以保证你的配色不会有问题。

2. 字体

字体的选择不需要太纠结，因为现在大部分字体都是有版权的，我们可以选择的字体并不多。如果用苹果电脑，苹果很好，或者思源黑体，阿里巴巴普惠等。，WIN系统可以直接用黑体和微软优雅黑。至于主视觉的标语字体，有条件的话可以考虑使用付费字体或者让字体设计师单独设计，这样主视觉会更醒目。

温馨提示:设计师新手经常会找一些花里胡哨的字体，其实根本没有必要，会招致不必要的风险。另外，任何页面的设计，无论是banner、网页还是UI，字体都不能超过三种，包括英文，一定要保持设计的统一性。

3. 排版

一个详情页可以分为N个部分，每个部分的内容也可以分为标题、副标题、文字内容、主视觉、背景。然后，你只需要设计一个标题和内容样式，就可以重用了。这是最简单的排版技术。罗宾·威廉姆斯(Robin williams)的《面向所有人的设计书》(Design Book for Everyone)提到了四个原则——亲密、对齐、重复和对比。只要掌握了它们，排版就不会出错。

温馨提示:设计越好，排版越简单。建议你看一遍《给每个人的设计书》这本书，你会发现，不管设计有多复杂，只要遵循这四条原则，都可以很简单。

4. 图片

选图的原则很简单，高清，主题相关，调性统一。不要直接用图。一般来说，你需要简单地调整对比度和色彩饱和度。其次，你需要对它们进行锐化，以保证图片的高清晰度。

都说一幅好图抵得上千言万语，但现在一幅好图的价格并不便宜。所以在没有付费图片的情况下，需要在设计和表现形式上多取其长，避其短，比如插画(同样成本较高)、图标、手机模型、思想结构图等。

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

5. 修饰元素

装饰元素会增加页面设计的个性化，但不能太花哨。一般可以从Logo或者VI的元素中提取，比如侦探Logo的“胡子”“烟斗”。这些元素成为整个页面的点睛之笔。既丰富了页面的设计，又提升了品牌的辨识度，加深了用户对品牌的印象。

考虑到详情页通常很长，我喜欢设计一个进度条，它会随着用户浏览页面的高度而变化。这样的装饰元素会给用户带来非常友好的体验，可想而知你在没有站点提示的公交车上，会有多么恐慌的感觉，这和用户访问一个不知道多久的详情页是一个道理。

温馨提示:我过去诊断过很多设计作品集，会发现很多设计师加入了很多不相关的装饰元素，会导致你的设计显得很花哨，很业余。

6. 优化

慢慢地，小心地工作。对于视觉设计来说，只有不断尝试各种效果的设计，才能找到最好的风格。这没有窍门。无论设计师多资深，做什么样的项目，只有不断尝试各种效果，才能做出更好的设计。神探详情页的设计，虽然时间周期很紧，但前后也试了好几个版本，推翻，重做，优化了好几次。

小贴士:一份好的设计稿，不要有什么花样。不要以为那些大神的设计时间会很短。越有实力的设计师对设计的要求越高，达不到自己心理底线的作品可能就发不出来了。所以设计的时候一定要有耐心，一定要不断优化，这样才能设计出越来越优秀的作品。

五、设计说明

页面设计好了，不要以为就结束了。在给甲方展示作品之前不要直接发图，这种交付是没有价值的，你做的再好。如果你缺乏设计思路的阐述，那么你的设计价值就很难让别人感受到。因此，精心设计设计稿的设计就显得尤为重要。

1. PPT展示

PPT的展示效果是最好的，尤其是给甲方展示设计方案的时候，当你在它面前给甲方展示你的设计思路，是一种奇妙的成就感。PPT的内容可以从我们的设计过程中提炼出来。一般我会控制在10-15页，演讲时间10分钟左右。这个长度很大，便于甲方演示。

2.长页面显示。长页显示器的生产成本低。如果交货时间太紧，可以选择这种形式。这种形式虽然是基本的，但是设计质量要控制好，不能因为太粗糙而贬低整个团队辛辛苦苦的设计方案。

六、结语

这个详情页的设计分享教程其实是MVP版本，很多设计步骤的细节都不够细致。但是和产品迭代一样，要不断优化设计，完善这个系统方法。我相信，对于很多设计师来说，今天从0到1的分享，让你了解了一个完整的细节页面诞生的过程，从而增强了工作的主动性，不停留在单纯的设计执行阶段。

专栏作家

福尔摩斯，微信微信官方账号:一个设计侦探，人人都是产品经理专栏作家。连续创业者，擅长产品设计拆解和书籍解读。

本文由人人作为产品经理原创发布，未经允许禁止转载。

题目来自Unsplash，基于CC0协议。

此观点仅代表作者本人，大家都是产品经理。平台只提供信息存储空服务。