# 十个能切实提升转化率的电商设计决策 > 不是“多留白”，也不是“测试按钮颜色”。而是在真实店铺里真正能推动转化的视觉层级、摄影、字体和移动端选择。 Ryan Badger - 2024年11月3日 - 阅读约 7 分钟 ## 真正能推动转化的设计决策 讲设计的文章通常分为两派。一派说“多留白！”（太模糊），另一派说“A/B 测试 47 种按钮颜色”（太琐碎）。对于盯着自己的店铺、纳闷为什么转化率只有 1.3% 的人来说，两者都没有帮助。 这篇文章讲的是那些能切实改变电商店铺转化率的具体视觉设计决策。不是品味，不是品牌美学，而是那些要么帮助人们购买、要么妨碍他们购买的版式、层级、颜色和字体选择。 ## 1. 视觉层级：最重要的东西应该看起来最重要 大多数店铺在商品页上给所有东西同等的视觉分量：16px 的正文，18px 的价格，18px 的标题。每个元素都在争抢，没有一个胜出。视线找不到入口，访客不知道该先看哪里，也就不知道下一步该点哪里。 解决办法：你希望被点击的东西，应该是页面上最大、对比度最高的东西。 - 商品标题：28-36px - 价格：20-24px，加粗，界限清晰 - 加入购物车按钮：在手机上通栏，是页面上视觉上最重的元素 - 描述、规格列表、物流信息：14-16px，更安静 当你站在 8 英尺（约 2.4 米）外看你的商品页（是的，真的向后靠一靠），能看出主要操作是什么吗？如果整个页面看起来像一锅灰汤，说明你的层级是坏的。 ## 2. 留白留给行动按钮周围，而不是到处都留 “多留白”被当作万能的设计建议到处宣扬。真正重要的，是按钮和关键元素周围的留白，而不是为了留白而留白。 - 加入购物车区域周围至少留 40-60px 的内边距 - 价格独占一块干净的空间，不被其他文字挤压 - 给商品图片留出空间（不要无边距地铺满边缘） 把其他一切（评价、物流信息、相关商品）排得更紧凑。它们是次要的。行动按钮区域靠成为唯一有呼吸空间的东西而胜出。 ## 3. 一致的商品摄影胜过“更好”的商品摄影 一个有 50 件商品的目录，照片各不相同（背景不同、光线不同、缩放程度不同），看起来很业余。一个每张照片都是同一角度、同样光线、同样裁切、同样背景的目录，看起来很专业。 这是数量问题，不是质量问题。你最畅销的前 5 款可以有精心打磨的主图。其余的都应该以完全相同的方式拍摄，哪怕稍微逊色一些。不一致传递出的“小而不可靠的店”的信号，比低质量更强。 实用规则： - 主图：白色或纯色背景，居中，整个目录采用相同的裁切 - 副图：生活场景 / 使用中，调性一致 - 所有照片使用相同的宽高比和分辨率 ## 4. 行动按钮看对比度，而不是颜色 “橙色按钮的转化率比绿色高 X%！”你经常能看到这类所谓测试过的说法。单独来看，这纯属胡说，因为它忽略了按钮所处的整体环境。重要的是**与周围页面的对比度**。橙色主题网站上的橙色按钮是隐形的。同一个网站上的蓝色按钮则是灯塔。 选择与你网站主色调对比度最高的颜色。如果你的页面是白 + 黑 + 米色，你的行动按钮就应该是其他地方都不出现的那一种颜色。 补充一点：主要行动按钮要避免使用幽灵按钮（只有轮廓，没有填充）。它们看起来优雅，但转化测试表现不佳，因为它们在视觉上暗示“次要”。加入购物车、提交订单、立即购买，都要用实心填充。 ## 5. 手机端的字号和行长 大多数手机端店铺的文字既太小又太宽。手机显示文字的像素密度更高；在桌面上 16px 的字，在手机上显得很小。 手机端排版的底线： - 正文：至少 16-18px - 行长：每行 40-60 个字符 - 行高：字号的 1.4-1.6 倍 - 按钮 / 点击区域：高度至少 44px（Apple 的无障碍指南） 如果访客在你的商品描述上用双指放大，说明你的字太小了。要在真实手机上、用手臂伸直的距离来测试，而不是用浏览器的移动端模拟器。 ## 6. 手机端的悬浮式加入购物车按钮 在手机上往下滚动一个很长的商品页：等你读完描述，加入购物车按钮已经在 3 屏之外了。已经决定购买的顾客现在得滚回去，这会拉低转化率。 解决办法：原来的按钮滚出屏幕后，悬浮式加入购物车按钮会浮在手机视口底部。点一下，购物车打开，不用再来回找。 桌面端：悬浮式购物车变成可选（视口更大）。手机端：没有商量余地。 ## 7. 展示结果而不是商品本身的首屏图片 大多数首屏版块展示的是孤立的、白底的商品。作为参考照片没问题；作为首屏就不对了。首屏需要在 2 秒内传达“有了这个，生活会是什么样”。 更好的做法：商品在使用中、在场景里，配上与你的目标买家相符的人物或环境。 - 护肤品：有人在使用，晨光，浴室 - 家具：这件家具放在真实的房间里，有生活气息 - 服饰：穿在身上，在动，而不是模特假人 - 食品/咖啡：正在制作或享用中，而不是商品图 使用中的首屏图转化得比孤立商品的首屏图更好，因为它替买家完成了更多想象的工作。他们可以直接看到自己使用它的样子，而不必费力去想象。 ## 8. 全店组件保持一致 一个常见的失误：商品页用一种卡片样式，分类页用另一种，首页又是第三种。顾客即使说不出来，也能感觉到这种不一致。当同样的组件始终一致地出现，店铺才显得值得信赖。 一个小型电商设计系统包括： - 一个商品卡片组件（用在首页精选、分类网格、相关商品、搜索结果） - 一套按钮系统（主要、次要、第三级；只要这三种） - 一套标题样式系统（H1、H2、H3；一致地使用） - 一套调色板（最多 3 种品牌色，外加灰阶） - 一套字号体系（最多 3-4 种字号） 大多数店铺每样东西都做出 15 种变体，其实一种就够了。变体越少，看起来越专业，维护起来也越省事，顾客也更容易形成对你品牌的稳定印象。 ## 9. 第一屏是“继续滚动”的广告 首次加载时可见的区域（首屏）只有一个任务：让访客想要往下滚。仅此而已。不要试图在第一屏就完成成交。 首屏需要的东西： - 这是为谁准备的（一句话） - 商品是什么（视觉上，一张好图） - 一个明确的行动按钮（加入购物车或立即选购） - 一个让人安心的信任信号（评分 + 评价数量，或媒体引述，或知名客户） 首屏不需要的东西： - 多个争夺注意力的行动按钮 - 每 3 秒自动切换的首屏轮播（转化杀手；内容一动，顾客就会愣住） - 产品的所有优点 - 顾客评价墙 ## 10. 去掉首页的轮播图 与上一条相关，但值得单独成条：首页首屏轮播已经死了。研究一致表明，自动轮播的首屏幻灯片点击率只有 1-3%，而且只有第一张幻灯片获得显著关注。把你会放在第一张幻灯片上的那条信息，作为静态首屏放上去。其余的都舍弃。 ## Shoprocket 提供什么 主题化店面自带的模板，已经遵循了上面的视觉层级、对比度和移动端设计模式。如果你在自己的网站上使用嵌入组件，周围页面的设计由你掌控，但： - 默认使用**购物车侧滑面板**（而不是整页购物车） - 支持**手机端悬浮购物车** - **响应式商品图片**，自动输出 WebP，并保持合适的宽高比 - **站点构建器 + 40 多个主题**，让你不必从零开始搭建设计系统 - **自定义 CSS 接口**，让你把嵌入组件的主题调成与你的网站匹配 ```
``` Shoprocket 管不到的：你的首屏图片、你的摄影一致性、你的文案、你的配色体系。这些是成是败，全在你自己，也是最值得投入时间和预算的地方。 > **提示：**现在就用手机打开你的店铺。随便找一个商品页。不用滚动就能看到加入购物车按钮吗？价格是不是明显的第二大元素？不用眯着眼就能读描述吗？如果其中任何一个答案是否定的，那就是你要做的第一个设计修复。 ## 太长不看 - **层级：** 最重要的元素应该看起来最重要。用 8 英尺测试来检验 - **行动按钮周围留白**，而不是为了留白而到处留 - **摄影的一致性** 胜过摄影的质量。整个目录用同一种风格 - **行动按钮看对比度，而不是颜色。** 与你页面调色板对比度最高的颜色胜出 - **手机端字体：正文 16px 以上，点击区域 44px 以上** - **手机端悬浮式加入购物车** 没有商量余地 - **首屏图片展示结果**（商品在使用中），而不是白底商品图 - **小型设计系统（3 种颜色、4 种字号、3 种按钮变体）** 比 15 种变体看起来更专业 - **第一屏卖的是“继续滚动”**，而不是商品。一条明确的信息，一个行动按钮 - **干掉首页轮播**。静态首屏胜出 如果你想要内置这些设计模式的主题化店面，[开始免费试用](https://app-v3.shoprocket.io/signup)。14 天，无需绑卡。 --- - HTML version: https://v3.shoprocket.io/zh/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion - Language: 中文 (zh) - Also in: [العربية](https://v3.shoprocket.io/ar/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Deutsch](https://v3.shoprocket.io/de/blog/ecommerce-design-entscheidungen-die-conversion-messbar-steigern.md), [Ελληνικά](https://v3.shoprocket.io/el/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [English](https://v3.shoprocket.io/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Español](https://v3.shoprocket.io/es/blog/diez-decisiones-de-diseno-ecommerce-que-mejoran-la-conversion.md), [Français](https://v3.shoprocket.io/fr/blog/dix-decisions-design-ecommerce-qui-augmentent-la-conversion.md), [עברית](https://v3.shoprocket.io/he/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [हिन्दी](https://v3.shoprocket.io/hi/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/blog/sepuluh-keputusan-desain-ecommerce-yang-terukur-menaikkan-konversi.md), [Italiano](https://v3.shoprocket.io/it/blog/dieci-scelte-di-design-ecommerce-che-aumentano-la-conversione.md), [日本語](https://v3.shoprocket.io/ja/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/desimt-e-parduotuves-dizaino-sprendimu-didinanciu-konversija.md), [Norsk](https://v3.shoprocket.io/nb/blogg/ti-designvalg-nettbutikk-som-loefter-konverteringen.md), [Nederlands](https://v3.shoprocket.io/nl/blog/tien-ontwerpkeuzes-webshop-die-conversie-verhogen.md), [Polski](https://v3.shoprocket.io/pl/blog/dziesiec-decyzji-projektowych-w-e-commerce-ktore-podnosza-konwersje.md), [Português](https://v3.shoprocket.io/pt/blog/dez-decisoes-de-design-que-aumentam-a-conversao-no-ecommerce.md), [Română](https://v3.shoprocket.io/ro/blog/zece-decizii-de-design-ecommerce-care-cresc-masurabil-conversia.md), [Русский](https://v3.shoprocket.io/ru/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [ไทย](https://v3.shoprocket.io/th/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Türkçe](https://v3.shoprocket.io/tr/blog/donusumu-artiran-on-eticaret-tasarim-karari.md)