商品详情页设计策略
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">文/麦海森 电商时代买东西，摸不到材质，尝不到味道，听不见声音，<span style="color: black;">独一</span>能看到的<span style="color: black;">便是</span><span style="color: black;">照片</span>和文字，<span style="color: black;">因此呢</span><span style="color: black;">怎样</span>实现商品详情页的良好视觉效果，可谓是重中之重，它<span style="color: black;">亦</span>直接决定了客户<span style="color: black;">是不是</span>愿意下单。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/49c1c923055e4f3f909c734a6c5c4a80~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723646579&x-signature=epqQS2m3lexges1GbZaJ5UU%2B038%3D" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/78524c2216c442a980c446893aaab470~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723646579&x-signature=HisGW0ql9mZzzTb2wxJHv%2BaMjhs%3D" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">①页面结构布局主次不分。例如：商品属性、<span style="color: black;">照片</span>等重要的信息与邮费咨询、服务承诺等次要的信息摆放位置颠倒，<span style="color: black;">导致</span>顾客<span style="color: black;">不可</span><span style="color: black;">第1</span>时间<span style="color: black;">得到</span>所<span style="color: black;">必须</span>的信息而失去兴趣直接跳离页面。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p26-sign.toutiaoimg.com/pgc-image/66c506811feb401ca82b6c3e50853589~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723646579&x-signature=hrSgTenWfrSLKGibslbXioqROfA%3D" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">②<span style="color: black;">帮忙</span>顾客判断的商品内容展示不充分。例如：顾客非常想<span style="color: black;">认识</span>商品的材质、尺寸、颜色、寓意、真伪辨别、普及知识、<span style="color: black;">运用</span>与保养、赠品、消费承诺、付款方式等信息<span style="color: black;">不足</span>齐全，从而降低顾客购买的<span style="color: black;">自信心</span>。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/cc6a6c6f7d2d4ba2b33f41b4f96c0065~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723646579&x-signature=DbMtdOoXQEh%2BvcYj9h3kopGvj8w%3D" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">③页面字体和颜色<span style="color: black;">选取</span>及<span style="color: black;">运用</span>缺乏统一感，<span style="color: black;">导致</span>视觉混乱。例如：有些卖家为了突显<span style="color: black;">有些</span>重要信息，要么<span style="color: black;">运用</span>红色的大号字体，要么底色色块<span style="color: black;">运用</span>鲜艳的颜色，<span style="color: black;">这般</span>做达到醒目的目的，但却付出失去了页面的整体性和视觉美感的代价，<span style="color: black;">从而</span>降低店铺的档次和品牌质感。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/ad4e0154c6284d418a0c3820175ba5b8~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723646579&x-signature=SNVW6IhZw3lpSIcUbFIRD4oTJ1Y%3D" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">④<span style="color: black;">宣传</span>在页面中所占篇幅过长，影响用户体验。<span style="color: black;">重点</span><span style="color: black;">表现</span>在页面前几屏以<span style="color: black;">海量</span>的文字或其他<span style="color: black;">宣传</span>为主，客户<span style="color: black;">不可</span><span style="color: black;">第1</span>时间看见商品主体，<span style="color: black;">另一</span><span style="color: black;">宣传</span><span style="color: black;">照片</span><span style="color: black;">太多</span>会<span style="color: black;">导致</span>页面加载速度大大降低。糟糕的用户体验将会消耗客户的热情和耐心，降低客户的购物冲动，<span style="color: black;">乃至</span><span style="color: black;">导致</span>客户跳离页面。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/4e6a8bbecabc400ca14b908ecab35cc5~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723646579&x-signature=vjAXMuh5gL4%2FriEUvrcb9DLQJ6U%3D" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">⑤ 商品<span style="color: black;">照片</span>品质过低，降低了商品品质。如商品<span style="color: black;">照片</span>模糊不清，影响客户对商品的把握和信任。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/3ae80220a82c4dcb8d99ebf738fe13eb~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723646579&x-signature=Yhw%2FgLG%2BtjUQvyGncJwjtkBGUPc%3D" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">⑥ 页面设计为了视觉艺术感，忽略商品介绍。一味追求华丽或个性的设计效果，<span style="color: black;">无</span>结合营销思维去<span style="color: black;">明显</span>商品本身的<span style="color: black;">照片</span>和介绍信息。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/a93eadfc51b7475098bdc552801f7fa6~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723646579&x-signature=FalTC6xw46p8IzG6KFuFYQ8KiGY%3D" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/53ef84f368d34d459a3b46b665faf442~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723646579&x-signature=4jI5AyB3rw6nb8PUHIuzd6mfDx0%3D" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">成功商品详情页不仅要有<span style="color: black;">得到</span>客户认可店铺的商品，还<span style="color: black;">必须</span>有让客户<span style="color: black;">容易</span><span style="color: black;">把握</span>简洁的页面结构布局，能<span style="color: black;">导致</span>客户对商品集中<span style="color: black;">重视</span>力、激起购买欲望的视觉营销设计。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/070aac0ab348453f9bc309ec8f00ea91~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723646579&x-signature=bg%2BnXN3RAuDPJ%2BKc0OL7DzSpOio%3D" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">①网店商品详情页应遵循店铺品牌视觉规范，<span style="color: black;">选取</span>字体和颜色保持与店铺主页风格相一致，实现整齐划一的视觉效应，从而保持<span style="color: black;">全部</span>店铺的品牌视觉形象。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p26-sign.toutiaoimg.com/pgc-image/972f36de7f3f479886d532e7c3e2bc23~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723646579&x-signature=Tcp4a492jYmnLCqVfDUStiI0ElE%3D" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">②商品<span style="color: black;">照片</span>应<span style="color: black;">选取</span><span style="color: black;">必定</span>画质的、统一而单纯的背景，整体画面要<span style="color: black;">显出</span>清晰明亮。为了让消费者能够从全方位连贯地浏览商品，并形成全面的商品印象，<span style="color: black;">那样</span><span style="color: black;">必须</span><span style="color: black;">每一个</span>商品都<span style="color: black;">运用</span><span style="color: black;">区别</span><span style="color: black;">体积</span>和<span style="color: black;">方向</span>的配图。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/fca615de8a924562b85839e2e4b87b73~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723646579&x-signature=ZsQj1iYL0n6M3Zt1F95awqRkCmU%3D" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">③页面的<span style="color: black;">宣传</span>轮播图应符合整体页面风格。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/7bc23db49791425a8b9b0f9eaa1456c6~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723646579&x-signature=ur6YOKqtnSiaAm0xcIzxk5EElvE%3D" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">④<span style="color: black;">按照</span><span style="color: black;">区别</span>行业商品类别，从客户<span style="color: black;">方向</span>去思考问题，把客户想<span style="color: black;">认识</span>的商品属性信息，<span style="color: black;">经过</span>详情页的图文设计出来，从而解开客户心中的疑问，<span style="color: black;">这般</span>做才是有的放矢，<span style="color: black;">才可</span>达到吸引顾客和促进销量的目的。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/a105836afc7c4331ac66b7a8790c5ae4~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723646579&x-signature=AFSDNAyuGB5Dgyhw%2Fsj%2FSmm%2B2yw%3D" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">⑤对<span style="color: black;">照片</span><span style="color: black;">体积</span>和质量要进行严格<span style="color: black;">掌控</span>。<span style="color: black;">因为</span>商品<span style="color: black;">照片</span>色彩<span style="color: black;">区别</span>，其容量<span style="color: black;">体积</span><span style="color: black;">亦</span>随之<span style="color: black;">区别</span>，<span style="color: black;">从而</span><span style="color: black;">导致</span>相应的问题 ( 如<span style="color: black;">没法</span>达到原先的设计效果或影响网速) ，最后影响了整体页面<span style="color: black;">运用</span>效果。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/271e6af8271045d28eec793ff5ca3dcd~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723646579&x-signature=wVJCKk0oJJWoNhGRKhpP%2F3w2UFQ%3D" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">⑥对页面长度要做好充分的计划<span style="color: black;">掌控</span>，为了不影响商品本身的关注度，<span style="color: black;">那样</span>商品展示<span style="color: black;">照片</span>之前的<span style="color: black;">宣传</span>描述就不宜<span style="color: black;">太多</span>了。PC端详情页<span style="color: black;">一般</span>为20屏，<span style="color: black;">倘若</span>详情页屏数<span style="color: black;">太多</span>，容易让买家失去耐心，跳离详情页；手机详情页<span style="color: black;">一般</span>为4页10屏。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/2517c3f6e6e244b5bc373f7a9eff76dc~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723646579&x-signature=u9OtpsWpa96TMZo9ubpij4%2F5Jv4%3D" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">⑦对页面的信息内容要一目了然，并有助于客户的判断。要以客户身份多思考问题，例如：商品尺码不合适<span style="color: black;">怎样</span>处理？有色差<span style="color: black;">怎样</span>处理？这些客户比较关注的问题要给出相应的质量<span style="color: black;">保准</span>、服务承诺和售后服务，从而消除客户的购物顾虑，<span style="color: black;">得到</span>客户的信任和认可。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/491d417c5edb40de887aad7578cbd4ba~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723646579&x-signature=ntoxgGLuuPRcoL9LWxh46ClokKw%3D" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/35526ac337494b60b7ed45be31e0f43f~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723646579&x-signature=7Cjcnv00igeaWA4KayIB8QP2qw4%3D" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;">
<div style="color: black; text-align: left; margin-bottom: 10px;">（此处已添加圈子卡片，请到今日头条客户端查看）</div>
</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">① 官方头条号：设计智造 顶级创意设计师<span style="color: black;">必须</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">② 本篇为 设计智造www.cocoo.top 编辑整理，版权归原作者所有，转载请注明出处！</p>
i免费外链发布平台 http://www.fok120.com/
页:
[1]