高档网站设计（设计秘籍丨如何从0到1设计一个详情页）

一个优秀的详情页可以让用户清晰且愉悦地接收到已有信息，并为用户的下一步操作做出一定引导，那什么样的详情页设计才是好的设计？本篇文章里，作者结合实际案例，从目标、内容、视觉等方面对详情页的设计策略做了总结，一起来看。一个从0到1的详情页应该如何设计，需要遵循什么设计原则，可以参考什么设计模型？这篇文章，将会以「设计大侦探」知识星球详情页为案例，告诉你一个详情页设计的完整过程，帮助你掌握三个重要的思维模型和一套已验证的设计方法。一、导读1. 详情页是什么？详情页就是一个产品或服务的说明书。我们听得最多的是电商详情页，往往会把这个词直接定义为电商详情页，但事实上，任何产品、服务都有详情页，比如一个医疗保险产品就需要详情页，让用户从这个页面获取到这个服务的明细和流程，从而吸引用户下单购买。本文所指的详情页，就包含了各类产品、服务的详情页，所引用的案例是一个知识付费行业的知识星球详情页设计。2. 详情页有什么作用详情页像一个产品的服务前端，用户可以从这个页面全面了解到这个产品的细节，比如服务人群、核心优势、服务流程和注意事项等。详情页也可以作为一个落地页，比如当我们去销售一款产品的时候，我们设计的H5或Web的页面既属于落地页也属于详情页。一个成功的详情页设计可以为产品带来超高的转化率和销售额，相反，如果详情页设计得不好，即便投入重金推广，转化率也会非常低。3. 详情页的生命周期详情页就是产品的表现层，它和产品一样，同样有生命周期。在不同的生命周期，有不同的焦点和策略，比如设计大侦探的知识星球，在处于引入期的时候，更看重对服务体系的验证，所以对详情页的设计要求是以快制胜，快速完成MVP版本。4. 适合阅读人群本文6623字，主要分为四个部分，不仅仅适合UI设计师、UX设计师、产品经理和运营，还适合于电商设计师、品牌策划和互联网从业者，其次对于创业者来说，这篇文章将会让你熟悉一套详情页设计的完整流程，有效降低时间人力成本。另外本文所指的甲方，主要指设计师的上游，产品、老板或业务方。二、制定目标不管做任何项目的设计，如果不明确设计目标，那就没有方向，也无法验证最终的设计成果。对于详情页的设计，也是一样。虽然看上去好像只是一个页面或图片，但其实详情页和产品一样，也需要不断的迭代优化。1. 设计背景「设计背景」就是去了解这个详情页为什么做，决策流程是什么样的。这个环节我们可以使用常见的5Why分析法，不断追问，直到了解甲方设计的真正原因。千万不要小看这一步，如果你不去弄清楚这个项目立项的关键原因，帮助甲方梳理好设计目标，那么甲方就会容易变动需求。比如大侦探为什么需要设计一个详情页，这是因为我们的知识星球服务体系已经形成闭环，所以准备开始试运营，验证商业模式。2. 需求分析「需求分析」就是在了解这个详情页的「设计背景」后，针对甲方的真实需求进行深入的分析，我们可以采用5W2H分析法，去挖掘具体要做什么、给谁看、在哪里看、喜欢什么风格等问题。如果是一个外包项目，还要去结合甲方的预算、周期和公司的利润去考虑，需求的挖掘一定要深入，不要做模棱两可的工作，否则整个项目的设计作业都会随时变动。比如大侦探的详情页需求就是要快速完成一个MVP版本进行试错，看看知识星球的服务是否和用户的需求匹配，所以对整体的视觉要求并不高，更注重设计效率和完整性。Tips：对需求的拆解、挖掘和梳理能力，是一个优秀设计师通往顶级设计师需要具备的能力，要学会快速阅读甲方的需求，做出引导和判断。3. 设计目标当我们把「设计背景」和「需求」梳理好以后，我们就可以提炼出这个详情页的「设计目标」。「设计目标」不仅仅可以给设计团队设定一个非常清晰的方向，也是验证最终设计效果的标准。比如大侦探详情页的设计目标就是在3天内快速设计出一个MVP版本的详情页，其次设计风格要符合品牌调性。三、内容设计在确立好「设计目标」以后，就进入了「内容设计」的环节，通俗点说就是文案策划和设计原型。但这个部分的权重是最高的，对于一个详情页来说，如果内容没有设计好，视觉效果再好也是徒劳，它无法吸引用户购买产品，所有的投入都会白费。对于设计师来说，这部分的工作几乎很少涉及，但当你掌握这套方法以后，你的设计价值将会提升。1. 用户分析在设计内容之前，一定要先思考，这个详情页给谁看。这不仅会决定文字调性、内容结构、视觉风格，还有传播形式。如果是一款给老年用户使用的产品，你会用“给力”这些词吗？其次，我们要去思考这些用户的特征、偏好，如果用户是一群夜猫子，那么我们可以考虑设计一款深色的详情页，方便他们在夜晚时候观看。最后，还要考虑不同的用户人群。比如大侦探的详情页，对社群会员和非社群会员将会在内容结构上设计不同的内容。这是因为社群的会员对大侦探已经非常熟悉，对于品牌的介绍就可以尽量弱化，节省空间。而面对非社群会员，就需要把品牌介绍加入，添加背书、增强信任状。Tips：拿到一个项目，对用户分析是最基础的一步，一定要弄清楚谁来观看、谁来使用、他们有什么特征。2. 场景分析确认好「给谁看」以后，就要考虑用户访问详情页的真实场景。一定要去思考用户浏览详情页的场景、设备、平台和打开方式等，比如详情页是以H5形式发布，还是以朋友圈传播为主，是展示在知识星球还是展示在小鹅通？不同的浏览场景都要去考虑不同的内容展示方式，大侦探在知识星球展示的详情页，我把价格放在最上面，有朋友给我说，我用微信打开的发现头部被遮住了，但在知识星球的展示页，这个位置却是最好的激活方式。这就是场景导致的差异。Tips：在考虑展示场景这个细节的时候，我特意去调研了知识星球的详情页尺寸、展示方式和设计要求，最终我获取了知识星球平台仅支持3张图片，最高图片高度6000px的关键信息。如果忽略这个信息，当整个团队辛辛苦苦完成设计稿的时候，却发现高度不能超过18000px，这个时候改起来会非常痛苦。所以设计一个详情页，一定要模拟用户真实的访问场景，效果。3. 竞品调研不管做任何设计，都少不了竞品调研。「竞品调研」的维度有很多，比如内容、设计风格、营销方式、服务流程等。在我们去做一个从0到1的详情页时候，找到一个适合我们自己的竞品是一个非常高效的工作方式。往往我们费尽心思思考的东西，其他人都已经做了，所以竞品调研这一步，一定要花上时间。Tips：竞品调研也要明确目标，否则会导致内容过于分散，不知道从哪些维度入手。4. 内容规划从这一步开始，我们进入设计执行阶段。一个优秀的详情页设计，需要从用户访问这个产品到下单购买的整个体验旅程进行全面地设计，不仅仅需要专业、创新的内容，更需要设计营销策略。1）思维模型以下三个思维模型，是我在详情页设计中最常使用的设计模型。FABE+SPIN可以帮助我快速提炼一个详情页的内容结构，而社会心理学可以加入营销策略手段，提升详情页的商业价值。① FABE销售法则FABE销售法则是一个把商品的特征（Features）、商品的优势（Advantages）、顾客利益（Benefits）以及对卖点的证明（Evidence），按照科学的逻辑有机地结合在一起的技术和工具。如果你以前思考过一个详情页到底应该先放「品牌优势」还是先介绍「用户痛点」，那么这个模型可以帮助你找到一个可参考的标准。② SPIN销售法SPIN销售法，即探询现状(Situation)、找出困难(Problem)、引出潜在后果(Implication)、介绍解决方案(Need-payoff)。这个模型不仅可以用来定义内容结构，还可以作为文案描述的模型。比如当我们去介绍一个产品的时候，我们可以按照SPIN模型撰写，这将会非常有说服力。随着经济的形势越来越差（S），UI设计师的职业危机也越来越大（P），只是一个纯执行的工具型设计师将会面临着降薪或失业（I），这个时候如果设计师还不注重产品思维能力的学习和提升（N），那么以后的竞争力将会越来越弱。③ 社会心理学+陈勇转化六要素看过「产品拆解」的朋友应该对西奥迪尼的社会心理学《影响力》六大说服力原则有印象，他们分别是互惠、承诺和一致、社会认同、喜好、权威和稀缺，而国内营销专家陈勇老师的「转化六要素」也是从这本书提炼出来的。这两个模型，对产品的营销设计有非常大的帮助，比如为了吸引用户产生兴趣浏览，就要使用「互惠原则」，给用户送红包；为了提升用户下单速度，就会使用「稀缺效应」制造紧迫感。2）低保真原型“没有原型就没法讨论。”凯瑟琳·麦克尔罗伊在《原型设计-打造成功产品的实用方法及实践》的这句话，真的大道至简。内容设计这个阶段，往往会陷入没有思路、没有灵感的局面，这个时候，一定要大胆动起手来，其次我推荐使用Xmind工具来设计，这样不仅可以发散思维，作业成本也非常低。① 梳理内容结构页面的内容结构就是这个页面要放什么内容，内容顺序怎么排列，这个时候我们就要利用FABE或SPIN模型了。如果你一点经验都没有，你可以直接按照FABE的模型去做，从这个产品是什么、有什么优势、解决用户什么痛点和做了什么真实案例去策划，你会发现这按这样结构去设计的详情页即便不加任何内容都可以拿到及格分，用户去阅读起来都会感到自然。② 加入营销策略营销策略就是在页面内容加入营销手段，从而吸引用户浏览，购买服务。比如很多产品去推广的时候，都会给用户送各种免费礼包，这其实就是利用了「互惠原理」，让用户占便宜，吸引用户浏览。再比如一些医疗服务会加入很多真实的医生专家、真实病例，目的是增强服务的背书和打消用户的顾虑。还有我们经常会看见限时加入、限名额加入，是利用了稀缺效应，制造下单的紧迫感。Tips：当我们把这一步完成的时候，其实可以和甲方进行初步的沟通，这样可以降低下一步工作的返工率。3）高保真原型当我们完成低保真模型以后，页面的框架就是设计好了，接下来要做的就是根据框架去设计文案结构和表现形式。① 设计文案结构文案结构像什么呢？文案结构就像一个歌手去写Demo时候，没有歌词，但可以随着哼唱的旋律进行创作，这样作词人可以跟随旋律去填词。很多设计师往往觉得没有文案就无从下手，其实这是能力不够。我们可以先去设计文案结构，让文案策划跟着你的结构创作，这样可以极大提升工作效率。② 构思表现形式当我们在设计文案结构时候，还要去思考设计的表现形式。不要以为这是视觉设计的工作，相反，在这个环节先去思考设计的最终效果，这会对详情页的最终呈现效果有非常大的帮助。比如当我们要去展示一个产品的成功案例时候，可选择的内容形式其实非常多，可以放用户的微信评论截图，还可以按省份、按小区去展示用户真实的评价，如果你没有任何创新力，全部丢给视觉设计师，最终的视觉效果也会大打折扣。Tips：在高保真原型设计好以后，就可以进入第一轮的设计评定了。这里有个技巧，一定不要只发一个图片给甲方，我们一定要把自己的设计思路阐述出来，这样才能有说服力。四、视觉设计在高保真原型设计稿确认后，如果是一个外包项目，这一步其实是一个项目的里程碑，需要甲方签字盖章才能继续下一步的作业。视觉设计的工作就是我们平时最熟悉的设计环节了，文案、原型都确认好了，现在开始炒菜了。视觉设计虽然服务于前面的工作，但视觉设计也可以作为一个单独的版块，其次也需要进行调研、分析和制定设计策略。1. 配色一般我们可以根据Logo或VI去确定页面的配色，比如主题色、辅助色、渐变色等等，这样会确保整个设计的统一性。其次也需要注意，如果品牌的Logo颜色很Low，要尝试去调整优化，如果是一个外包项目，这其实是业务拓展的好机会。Tips：关于设计的配色，推荐一个非常实用的网站Paletton（https://paletton.com ），你只需要输入品牌色的色值，就可以获取和这个颜色相关的互补色、邻近色等，这样会保证你的配色不会出现问题。2. 字体字体的选择也不需要过于纠结，因为现在大部分字体都有版权，我们可选择的字体并不多。如果你使用苹果电脑，苹方就很不错，或者思源黑体、阿里巴巴普惠体等，WIN系统直接使用黑体、微软雅黑就可以。至于主视觉的slogan字体，在条件允许的情况下，可以考虑使用付费字体或者让字体设计师单独设计，这样主视觉会更吸引眼球。Tips：新手设计师往往会去找一些花里胡哨的字体，但事实上根本没有必要，而且会惹来不必要的风险。另外任何页面的设计，不管是banner、网页还是UI，字体不能超过3种，包含英文，一定要保持设计的统一性。3. 排版一个详情页，可以拆分为N个部分，每一个部分的内容，又可以拆分为标题、副标题、文本内容、主视觉和背景，然后每一个标题和内容样式，你只需要设计好一个，就可以重复使用，这就是最简单的排版技巧。罗宾·威廉姆斯的《写给大家看的设计书》这本书提到的四个原则——亲密性、对齐、重复和对比，只要你掌握，排版就不会出错。Tips：越优秀的设计，排版其实越简单。我建议大家去读一遍《写给大家看的设计书》这本书，你会发现不管多复杂的设计，其实只要遵循这四个原则，都能变得很简单。4. 图片选图的原则很简单，高清、和主题相关，调性统一。图片千万不要拿来就直接用，一般都需要进行对比度、色彩饱和度的简单调整，其次要进行锐化，保证图片高清。都说一张好图胜过千言万语，但是现在一张好图片的价格不便宜，所以在没有付费图片的情况下，在设计表现形式上就要更多的扬长避短，比如通过插画（成本也高）、图标、手机模型、思维结构图等。Tips：图片一定要保持清晰度，这个是设计图片最需要注意的细节，如果一张图片是模糊的，千万不要用。5. 修饰元素修饰元素会增加页面设计的个性化，但又不能太过于花哨。一般可以从Logo或VI的元素去提取，比如大侦探Logo的“胡子”、“烟斗”，这些元素就成为了整个页面的点睛之笔。不仅仅丰富了页面的设计，还增强了品牌识别度，加深用户对品牌的印象。考虑到详情页一般都会很长，我喜欢设计一个进度条，这个进度条将会跟着用户浏览页面的高度而变化。这样的修饰元素，将会给用户带来非常友好的体验，你可以想象当你在一个没有站点提示的公交车上，你的心情会有多慌，这和用户访问一个不知道多长的详情页是一个道理。Tips：我在过去诊断过很多设计的作品集，其中就会发现有很多设计师加了很多不相干的修饰元素，这会导致你的设计显得非常花哨、业余。6. 优化慢工出细活，对于视觉设计，只有不断地尝试各种效果的设计，你才能找到最佳的样式，这个没有任何诀窍。不管这个设计师有多资深，做什么类型的项目，只有不断地尝试各种效果，才能做出更好的设计。大侦探的详情页设计，尽管时间周期很紧，但我也前后尝试了多个版本，数次的推翻、重来、优化。Tips：一个好的设计稿，没有任何诀窍，千万不要以为那些大神做设计时间会很短，越厉害的设计师对设计的要求越高，达不到自己心理底线的作品可能都不会发出来。所以做设计一定要有耐心，要去不断优化，你才能设计出越来越优秀的作品。五、设计说明当页面设计完毕以后，千万不要以为结束了。在给甲方展示作品之前，不要直接发一个图片过去。这样的交付没有任何价值，不管你做得多好，如果缺少对设计思路的阐述，那么你的设计价值别人很难感受到。所以对设计稿的设计阐述，特别重要。1. PPT展示PPT的展示效果是最好的，特别是向甲方展示设计方案的时候，当你在的前面，向甲方展示着你的设计思路，那是一种非常美妙的成就感。PPT展示的内容可以从我们的设计流程提炼，一般我会控制在10-15页，演讲时间10分钟左右，这个长度给甲方演示起来非常棒。2. 长页面展示长页面展示的时间制作成本低，如果交付时间太紧了，可以选择这种形式。这种形式虽然基础，也要把设计品质把控好，不要因为太过粗糙而把整个团队辛辛苦苦的设计方案掉身价了。六、结语此次详情页的设计分享教程事实上也是一个MVP版本，有很多设计步骤的细节还不够仔细，不过我们要像产品迭代一样，不断去优化设计，完善这个系统方法。我相信，对于很多设计师来说，今天这个从0到1的分享，已经让你们明白一个完整详情页诞生的过程，从而提升工作的主动性，不停留在一个纯设计执行的阶段。专栏作家廖尔摩斯，微信公众号：设计大侦探，人人都是产品经理专栏作家。连续创业者，擅长产品设计拆解、书籍解读。本文原创发布于人人都是产品经理，未经许可，禁止转载。题图来自 Unsplash，基于CC0协议。该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。