UI设计知识梳理-09

打造优质产品详情页

打造优质产品详情页的技巧

意义：产品意义，介绍相关卖点。商业意义：视觉包装，吸引用户购买。

技巧：1，设计尺寸，宽度750-800px设计稿是可能适配网页端和移动端。

2，字体应用：字体大小，一级标题：40px。二级标题：24px。描述文字：20px。能够较好的兼容移动端和网页端。字体选用；非衬线字体：适合大部分使用。衬线字体：文艺类、气质类。字体间距、行高。字间距0、字体大小的1.5倍。

3，图片技巧：使用场景图，可以加强视觉冲击力，提升品牌感。尽量使用真实的商品图片设计。图片保持统一风格调性，营造品牌氛围。

4，图形图标：利用图形点缀界面，突出设计调性，加强内容节奏感，什么风格？去寻找此类风格的设计元素，更符合风格。合理运用图标点缀。更简洁，有趣的形式。

5，版式设计：多使用留白，明显的标题，清晰的内容区分。平面设计的借鉴，杂志化的排版。

6，参考的案例有：网易严选，造作，苹果。

优质详情页设计实战

组成：

1，商品卖点，设计卖点（突出商品的使用功能价值，例如，午睡枕头），功能卖点。材料卖点，品牌卖点。2，商品细节，商品某细节部位的特写，让用户了解细节品质。3，商品参数，商品特征值，一般以尺寸规格，颜色为主。4，品牌故事：商品由来的故事和发展历程。5，产品故事，介绍产品的由来。使用说明：使用方法和保养说明。

案例：（例，l型记忆枕，风格简洁文艺）

1，商品卖点，详情页头图使用黄金分割比例，突出首屏视觉效果。2，使用匹配文艺调性的日系风格商品图片设计，图片明暗度，色彩饱和度保持一致，体现简洁文艺气质。3，功能点的设计，排版上充分利用留白，让页面舒适。4，使用统一的中轴线对齐方式。5，字体设计，使用符合设计风格的字体，统一字体颜色，加强调性，（标题：康熙字典体，描述：华文中宋）。6，简洁的图形图标，加强设计细节，突出调性，简洁风格：线条。

品牌故事和细节：1，使用明细的标题划分内容模块，保持页面信息架构清晰。2，细节图片要非常清晰直观。3，品牌故事中，增加地图的图片。利用合理的图片来说明内容。

产品参数和使用说明：利用简洁的线条来给 使用场景这个标题设计，加强其中的设计感。2，设计时，文字要有适合的行高，段距。

总结：1:图片，黄金比例尺寸，清晰符合调性。2:字体，非衬线字体为主，统一字体的使用颜色。两种以内，标题和描述文字区。版式：多留白，图文结合，内容模块区分明显。3：页面颜色，多以中性色，白、灰百搭。用匹配商品调性的点缀色。4:图标图形，简洁的线条。