|
一个优秀的详情页能够让用户清晰且愉悦地接收到已有信息，并为用户的下一步操作做出必定引导，那什么样的详情页设计才是好的设计？本篇文案里，作者结合实质案例，从目的、内容、视觉等方面对详情页的设计策略做了总结，一块来看。 
一个从0到1的详情页应该怎样设计，必须遵循什么设计原则，能够参考什么设计模型？这篇文案，将会以「设计大侦探」知识星球详情页为案例，告诉你一个详情页设计的完整过程，帮忙你把握三个重要的思维模型和一套已验证的设计办法。 
1、导读
1. 详情页是什么？
详情页便是一个制品或服务的说明书。咱们听得最多的是电商详情页，常常会把这个词直接定义为电商详情页，但事实上，任何制品、服务都有详情页，例如一个医疗保险制品就必须详情页，让用户从这个页面获取到这个服务的明细和流程，从而吸引用户下单购买。
本文所指的详情页，就包括了各类制品、服务的详情页，所引用的案例是一个知识付费行业的知识星球详情页设计。 
2. 详情页有什么功效
详情页像一个制品的服务前端，用户能够从这个页面全面认识到这个制品的细节，例如服务人群、核心优良、服务流程和重视事项等。
详情页亦能够做为一个落地页，例如当咱们去营销一款制品的时候，咱们设计的H5或Web的页面既属于落地页亦属于详情页。一个成功的详情页设计能够为制品带来超高的转化率和营销额，相反，倘若详情页设计得欠好，即便投入重金推广，转化率亦会非常低。 
3. 详情页的生命周期
详情页便是产品的表现层，它和制品同样，一样有生命周期。在区别的生命周期，有区别的焦点和策略，例如设计大侦探的知识星球，在处在引入期的时候，更看重对服务体系的验证，因此对详情页的设计需求是以快制胜，快速完成MVP版本。 
4. 适合阅读人群
本文6623字，重点分为四个部分，不仅适合UI设计师、UX设计师、制品经理和运营，还适合于电商设计师、品牌策划和互联网从业者，其次针对创业者来讲，这篇文案将会让你熟练一套详情页设计的完整流程，有效降低时间人力成本。另一本文所指的甲方，重点指设计师的上游，制品、老板或业务方。
2、制定目的
不管做任何项目的设计，倘若不知道设计目的，那就无方向，亦没法验证最后的设计成果。针对详情页的设计，亦是同样。虽然看上去好似只是一个页面或照片，但其实详情页和制品同样，亦必须持续的迭代优化。
1. 设计背景
「设计背景」便是去认识这个详情页为何做，决策流程是什么样的。这个环节咱们能够运用平常的5Why分析法，持续追问，直到认识甲方设计的真正原由。
千万不要小看这一步，倘若你不去弄清楚这个项目立项的关键原由，帮忙甲方梳理好设计目的，那样甲方就会容易变动需求。例如大侦探为何必须设计一个详情页，这是由于咱们的知识星球服务体系已然形成闭环，因此准备起始试运营，验证商场模式。 
2. 需求分析
「需求分析」便是在认识这个详情页的「设计背景」后，针对甲方的真实需求进行深入的分析，咱们能够采用5W2H分析法，去挖掘详细要做什么、给谁看、在哪里看、爱好什么风格等问题。倘若是一个外包项目，还要去结合甲方的预算、周期和机构的利润去思虑，需求的挖掘必定要深入，不要做模棱两可的工作，否则全部项目的设计作业都会随时变动。
例如大侦探的详情页需求便是要快速完成一个MVP版本进行试错，瞧瞧知识星球的服务是不是和用户的需求匹配，因此对整体的视觉需求并不高，更注重设计效率和完整性。 
Tips：对需求的拆解、挖掘和梳理能力，是一个优秀设计师通往顶级设计师必须具备的能力，要学会快速阅读甲方的需求，做出引导和判断。
3. 设计目的
当咱们把「设计背景」和「需求」梳理好以后，咱们就能够提炼出这个详情页的「设计目的」。「设计目的」不仅能够给设计团队设定一个非常清晰的方向，亦是验证最后设计效果的标准。例如大侦探详情页的设计目的便是在3天内快速设计出一个MVP版本的详情页，其次设计风格要符合品牌调性。 
3、内容设计
在确立好「设计目的」以后，就进入了「内容设计」的环节，通俗点说便是文案策划和设计原型。但这个部分的权重是最高的，针对一个详情页来讲，倘若内容无设计好，视觉效果再好亦是白费，它没法吸引用户购买制品，所有的投入都会白费。针对设计师来讲，这部分的工作几乎很少触及，但当你把握这套办法以后，你的设计价值将会提高。
1. 用户分析
在设计内容之前，必定要先思考，这个详情页给谁看。这不仅会决定文字调性、内容结构、视觉风格，还有传播形式。倘若是一款给老年用户运用的制品，你会用“给力”这些词吗？
其次，咱们要去思考这些用户的特征、偏好，倘若用户是一群夜猫子，那样咱们能够思虑设计一款深色的详情页，方便她们在夜晚时候观看。
最后，还要思虑区别的用户人群。例如大侦探的详情页，对社群会员和非社群会员将会在内容结构上设计区别的内容。这是由于社群的会员对大侦探已然非常熟练，针对品牌的介绍就能够尽可能弱化，节省空间。而面对非社群会员，就必须把品牌介绍加入，添加背书、加强信任状。 
Tips：拿到一个项目，对用户分析是最基本的一步，必定要弄清楚谁来观看、谁来运用、她们有什么特征。
2. 场景分析
确认好「给谁看」以后，就要思虑用户拜访详情页的真实场景。必定要去思考用户浏览详情页的场景、设备、平台和打开方式等，例如详情页是以H5形式发布，还是以伴侣圈传播为主，是展示在知识星球还是展示在小鹅通？区别的浏览场景都要去思虑区别的内容展示方式，
大侦探在知识星球展示的详情页，我把价格放在最上面，有伴侣给我说，我用微X打开的发掘头部被遮住了，但在知识星球的展示页，这个位置却是最好的激活方式。这便是场景引起的差异。 
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时候，无歌词，但能够随着哼唱的旋律进行创作，这般作词人能够跟随旋律去填词。
非常多设计师常常觉得无文案就无从下手，其实这是能力不足。咱们能够先去设计文案结构，让文案策划跟着你的结构创作，这般能够极重提高工作效率。 
② 构思表现形式
当咱们在设计文案结构时候，还要去思考设计的表现形式。不要以为这是视觉设计的工作，相反，在这个环节先去思考设计的最后效果，这会对详情页的最后呈现效果有非常大的帮忙。
例如当咱们要去展示一个制品的成功案例时候，可选取的内容形式其实非常多，能够放用户的微X评论截图，还能够按省份、按小区去展示用户真实的评估，倘若你无任何创新力，所有丢给视觉设计师，最后的视觉效果亦会大打折扣。 
Tips：在高保真原型设计好以后，就能够进入第1轮的设计评定了。这儿有个技巧，必定不要只发一个照片给甲方，咱们必定要把自己的设计思路阐述出来，这般才可有说服力。
4、视觉设计
在高保真原型设计稿确认后，倘若是一个外包项目，这一步其实是一个项目的里程碑，需要甲方签字盖章才可继续下一步的作业。视觉设计的工作便是咱们平时最熟练的设计环节了，文案、原型都确认好了，此刻起始炒菜了。视觉设计虽然服务于前面的工作，但视觉设计亦能够做为一个单独的版块，其次亦必须进行调研、分析和制定设计策略。
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：一个好的设计稿，无任何诀窍，千万不要以为哪些大神做设计时间会很短，越厉害的设计师对设计的需求越高，达不到自己心理底线的作品可能都不会发出来。因此做设计必定要有耐心，要去持续优化，你才可设计出越来越优秀的作品。
5、设计说明
当页面设计完毕以后，千万不要以为结束了。在给甲方展示作品之前，不要直接发一个照片过去。这般的交付无任何价值，不管你做得多好，倘若缺少对设计思路的阐述，那样你的设计价值别人很难感受到。因此对设计稿的设计阐述，尤其重要。
1. PPT展示
PPT的展示效果是最好的，尤其是向甲方展示设计方法的时候，当你在的前面，向甲方展示着你的设计思路，那是一种非常美妙的成就感。PPT展示的内容能够从咱们的设计流程提炼，通常我会掌控在10-15页，演讲时间10分钟上下，这个长度给甲方演示起来非常棒。 
2. 长页面展示
长页面展示的时间制作成本低，倘若交付时间太紧了，能够选取这种形式。这种形式虽然基本，亦要把设计品质把控好，不要由于太过粗糙而把全部团队辛辛苦苦的设计方法掉身价了。
6、结语
此次详情页的设计分享教程事实上亦是一个MVP版本，有非常多设计过程的细节还不足仔细，不外咱们要像制品迭代同样，持续去优化设计，完善这个系统办法。我相信，针对非常多设计师来讲，今天这个从0到1的分享，已然让你们明白一个完整详情页诞生的过程，从而提高工作的主动性，一直留在一个纯设计执行的周期。
专栏作家
廖尔摩斯，微X公众号：设计大侦探，人人都是制品经理专栏作家。连续创业者，善于制品设计拆解、书籍诠释。
本文原创发布于人人都是制品经理，未经许可，禁止转载。
题图来自 Unsplash，基于CC0协议。
该文观点仅表率作者自己，人人都是制品经理平台仅供给信息存储空间服务。
| 
发表于 2024-8-12 05:26:51
