侯帅-电商详情页设计教程笔记

详情页正确执行步骤

1、了解产品的行业（注重款式的就是页面简洁一点 注重功能的就文案与产品并重）

2、理解文案的诉求，详细的沟通

3、确定详情页的风格调性（要找好参考 便于沟通）

4、结合创意 集合素材 （素材与文案 风格要有关联性）

详情页设计的逻辑框架（用户浏览到后半段的时候是没有耐心的，页面需要简洁明了）

（1）店铺活动 关联销售（ 给店铺的其他产品一些浏览）以点带面

（2）风险承诺（打消客户疑虑）

（3）产品海报（产品形象）

（4）产品概况（优势 卖点的提炼）

（5）痛点挖掘

（6）功能 功效

（7）证书 认证 好评（树立产品形象 打消购买疑虑）

（8）工艺 细节

（9）产品实拍（开始无耐心）

（10）售后 物流 保障（简单展示即可）

（11）品牌 工厂 车间（简单展示即可）

整体风格的把控技巧 - 颜色搭配

风格样式统一的四大要点

（1）色彩搭配

 色彩搭配独一无二的话 可以更好让消费者记住你

         技巧：1、选择一张色调舒服的图片，整体色彩统一，颜色不宜多，色调柔和

         不能用的图片：

        a、质量低 颜色存在噪点 模糊 

        b、PSD的图片 插画 这些色调已经被人干扰过了 不适用

        c、产品摄影 要考虑产品和背景能不能突出产品

       图片中提取出来的颜色，要注意适不适合产品风格定位 用户年龄 的考虑

（2）背景肌理(可以让画面更有质感 对背景有丰富的作用)

确定与产品风格想统一的肌理 一定要不断的重复使用 对详情页的统一性有很大的帮助

       常见的三种肌理：能够突出产品

      a、实拍纹理 要注意与产品搭配度

      b、色彩填充（纯色 渐变）

      c、图案的平铺

（3）分割样式

          常见三种风格样式：

         a、色块分割（节奏感会强烈一点，不同内容不同的独步色块）

         b、线条分割（要去底色统一 用波浪线 分割线）

        c、标题分割（可以给标题一个底色 突出标题 ）

（4）文案排版

        文案浏览起来便捷 高效 更轻松的获取信息

        字体选择不要多 效果不要多

        排版重复 可以改变颜色 间距统一

       小一点的字体尽量用黑体 辨识度高一点

手机端详情页设计要点

竖向构图 精简内容 文字放大 适当留白

平均每屏浏览时间 2-5s

先做一个大致排版

海报制作：先确定产品位置 在确定文案位置（所有文案先打出来 再去排版）

文案距离两边大概40px，行间距10-20px