优秀的详细页面可以让用户清晰愉快地接收现有信息，为用户的下一步操作提供一定的指导。 什么样的详细页面的设计是好的设计呢？ 在本文中，作者结合实际案例，从目标、内容、视觉等方面总结了详细页面的设计策略，并一起观看。
详细页面应该从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 )、商品优势(客户利益)、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决定主题颜色、辅助颜色、渐变等页面的配色，确保了整个设计的统一性。 其次，如果品牌标志的颜色是标志，就需要进行调整和优化。 如果是外包项目，这其实是扩大业务的好机会。
主题：关于设计的配色，推荐非常实用的网站Palet ton ( https://Palet ton.com），你只需要输入品牌色的色值，就可以获取和这个颜色相关的互补色、邻近色等，这样会保证你的配色不会出现问题。)
2 .字体的选择也不用太烦恼。 因为现在大多数字体都有版权，我们可以选择的字体不多。 如果使用苹果电脑的话，苹果方面比较好。 另外，思源黑体、阿里巴巴普惠等WIN系统直接使用黑体、微软雅黑即可。 对于主可视slogan字体，如果条件允许，请考虑使用收费字体或让字体设计器单独设计。 这样的话，主视觉会更加引人注目。
Tips：新手设计师往往会去找一些花里胡哨的字体，但事实上根本没有必要，而且会惹来不必要的风险。另外任何页面的设计，不管是banner、网页还是UI，字体不能超过3种，包含英文，一定要保持设计的统一性。
3 .要创建详细信息页面，可以将其分为n个部分。 每个部分的内容可以分为标题、副标题、文本内容、主要视觉和背景。 然后，每个标题和内容的样式只需设计一个就可以重用。 这是最简单的制作技巧。 罗宾威廉姆斯的《写给大家看的设计书》一书中出现的四个原则——亲密、对齐、重复、对比，只要掌握就没有误区。
Tips :设计越好，排版实际上越简单。 我建议你读一遍《写给大家看的设计书》这本书。 你会发现，无论多么复杂的设计，其实只要遵循这四个原则就很简单。
4 .选图原则简单，与高清、主题相关，调性统一。 照片绝对不要拿来直接使用。 需要简单地调整对比度、彩度。 接下来请锐化，确保照片的高精细。
都说好照片胜于千言万语，但现在好照片的价格不便宜，在没有付费照片的情况下，在设计表现形式上要避免得更短，比如插图、图标、手机模型、思维结构图等。
Tips：图片一定要保持清晰度，这个是设计图片最需要注意的细节，如果一张图片是模糊的，千万不要用。
5 .修饰元素修饰元素增加页面设计的个性化，但不能过于华丽。 一般可以从logo和VI的要素中提取。 例如，大侦探logo的“胡子”、“管子”，这些元素会成为整页的点睛之笔。 不仅丰富了页面的设计，还提高了品牌的认知度，加深了用户对品牌的印象。
考虑到详细页面通常会很长，我喜欢设计根据用户浏览页面的高度而变化的进度条。 这样的修饰元素会给用户带来非常友好的体验。 可以想象在没有网站提示的巴士上，你的心情会有多慌张。 这与用户访问不知道有多长的详细信息页面的原因相同。
Tips：我在过去诊断过很多设计的作品集，其中就会发现有很多设计师加了很多不相干的修饰元素，这会导致你的设计显得非常花哨、业余。
6 .优化慢工。 对于视觉设计，只有不断尝试各种效果的设计，才能找到最佳的风格。 这没有诀窍。 不管这个设计师多么老练，做什么类型的项目，只有不断尝试各种效果，才能做出更好的设计。 大侦探详细信息页面的设计，时间周期很紧，但我也前后尝试了多个版本，几次颠覆、重做、优化。
Tips：一个好的设计稿，没有任何诀窍，千万不要以为那些大神做设计时间会很短，越厉害的设计师对设计的要求越高，达不到自己心理底线的作品可能都不会发出来。所以做设计一定要有耐心，要去不断优化，你才能设计出越来越优秀的作品。
五、设计说明页面设计完成后，千万不要以为已经完成。 在向甲方展示作品之前，不能直接发送照片。 这样的交货没有任何价值。 不管做得多么好，如果缺少对设计思路的说明，别人就很难感受到设计的价值。 所以论述设计原稿的设计是特别重要的。
1. PPT展示效果最好，尤其是向甲方展示设计方案的时候，你在前面，向甲方展示你的设计思路，那是一种非常棒的成就感。 PPT的展示内容可以从我们的设计流程中提取出来。 通常，我会控制在10-15页，演讲时间在10分钟左右。 这个长度向甲方发表非常棒。
2 .展示较长页面展示较长页面的时间制作成本较低。 如果交货时间太紧，可以选择这种形式。 这种形式是基础性的，但必须好好管理设计的质量。 不能让整个团队因为太粗糙而辛苦的设计方案掉价。
六、结语本期详细页面的设计共享教程实际上也是MVP版本，很多设计步骤的细节还不够，但是就像产品的迭代一样，我们需要不断优化设计，不断改进这个系统方法。 对于很多设计师来说，我相信今天这种从0到1的分享，不仅能让他们了解完整细节页面诞生的过程，提高工作主动性，还能停留在纯粹的设计执行阶段。
专栏作家
廖莫斯，微信公众号：设计大侦探，每个人都是产品经理的专栏作家。 连续创业者，擅长产品设计分解，书籍解读。
这篇文章每个人都是产品经理，未经许可禁止转载。
标题来自Unsplash，基于CC0协议。
本文的观点只有代表本人，每个人在产品经理平台上只提供信息存储空间服务。
