电子商务移动端商品详情展示视觉设计分析

2020-10-21高文翔

鸭绿江·下半月 2020年7期

摘要：随着电子技术的发展，移动端的设备越来越先进，功能越来越强大，改变着我们的生活，也改变着电子商务的购物模式，越来越多的消费者选择手机、平板电脑等移动设备进行网上购物，人们都知道店铺需要设置移动端的详情页来增加店铺搜索权重，却有很多卖家不知道店铺的移动端详情页需要如何去做，才能有效的提高搜索权重。本文通过分析移动端商品详情页的视觉要点和制作流程，来提高商品转化和消费者的停留时间，进行详情页的优化，而不是单纯的将PC端详情页修改上传。

关键词：电子商务;移动电商;详情页设计

电子商务的发端是PC端，商品的视觉展示也是根据PC端的格局进行的设计。在早期，通过手机等移动端进行线上购物，通常浏览的是缩小版的PC端网页，PC端的显示窗口要比移动端大很多，特别是详情页，PC端会做的很长，有的长度甚至要超过一万像素，在利用手机等移动端设备去浏览这些商品的网页的时候，就会发生商品图片展示不全、文字信息太小等等，无法识别商品信息的情况出现，这样会丢掉大量的消费者流量。以淘宝为例，在近几年的双十一、双十二等活动中，必须设置单独的移动端详情页才能参加这些大型活动，不难看出平台的官方对移动端商品视觉展示的重视程度。再以天津市高职电子商务技能大赛为例，美工模块的装修分为PC端、移动端、跨境端，早几届的比赛中，只有PC端和移动端，是以PC端的设计为主，特别是移动端的商品详情页就是PC端的缩小版，发展到近一二年的比赛中，为了取得比较好的成绩，移动端的设计不能再是PC端的缩小版，而是对PC端详情页优化、或者独立制作，国赛中亦是如此，移动端的视觉设计权重在提高，越来越受到重视。因此，移动端商品的视觉展示，特别是详情页的设计，显得尤为重要，在下文中，我将分析目前移动端详情页存在的普遍问题、详情页设计要点、移动端详情页的制作流程。

一、移动端详情页的普遍问题

在前文中提到的商品信息显示不全的问题，只需要根据平台移动端的格式要求，设置好参数，对PC端详情页优化或者独立制作就可以解决。在移动端详情页的内容制作上，还需要注意以下几点问题。

（一）过密的文字说明

在商品的详情页展示中，有些卖家为了突出商品的信息，会用大篇幅的文字去描述商品的信息、店铺的服务和对商品的感悟等等，这样做的初衷本实为了让消费者能够更详细、切实的了解商品，但是根据研究机构的统计，如果商品详情页的文字内容超过七成，消费者是不愿意去仔细阅读的，特别是当文字的排版拥挤、紧密，会在视觉效果上引发消费者的畏惧感，密密麻麻的文字会让消费者失去继续深入了解商品的耐心。特别是在移动端，消费者对商品的浏览具有偶然性，可能是在空闲间隙刷出来的商品，刚性的需求不强烈，密集的文字说明无法激发消费者的冲动消费。所以在设计移动端详情页的时候，需要考虑手机、平板电脑等移动端设备的屏幕大小，减少大篇幅文字的出现，提炼关键词，排版上以图文结合的形式出现，让商品的信息显得主次分明，有节奏感对消费者有视觉导向作用，在能够突出商品主要信息的视觉情况下，减少消费者的阅读负担，减少商品的文字表达。

（二）過于夸张的商品图片

在对商品进行展示的时候，有些卖家为了增强图片的吸引力，抓住消费者移动端购物的偶然性，对图片的视觉效果做了很深入的修饰，夸张一点的说，将每一张商品图片都做成了商品的海报图，让详情页的震撼力十足，以为能够吸引消费的注意力。然而根据研究机构的数据统计，近八成的消费者会更关注展示的图片是不是商品的实拍图，消费者更希望能够看到的商品图片是真实的、全面的、细节的、清晰的等等，而不是那些过分夸张的商品海报图、宣传图。在商品移动端的详情页中插入和商品相关的海报图片确实能够在一定程度上营造吸睛的视觉效果，但是如果过多的使用修饰痕迹重的海报图、宣传图，就不能很好地客观地展示商品的真实状态，缺乏真实感，真实感是促成消费者购物冲动的因素之一。所以在设计移动端详情页的时候，可以在详情页的顶端设计一副和商品相关的海报图进行宣传铺垫即可，先引发爆点吸引消费者注意力，让消费者有兴趣进一步浏览商品的详情页面，然后紧接着就要对商品进行详细的展示了，展示一定要用商品实拍图，将商品的外形、质地、颜色、款式、功能、特点等信息进行真实、全面、清晰的展示，保证图片的真实性，提高商品的真实感，触发消费者下单。

（三）过多的关联商品

在对移动端的详情页设置关联商品的时候，有些卖家还是停留在PC端详情页的设计理念之下，想多设置关联商品，给店铺引流，这种设计手段在PC端还行得通，PC端的屏幕够大，设置一排，甚至两排的关联商品都不会影响消费者浏览商品的视觉效果，而且PC端大多通过宽带上网，网速稳定，图片、热点图层多一些也可以顺利打开。但是移动端就很不一样，比如移动的主力手机的屏幕相对较小，在手机上浏览商品详情页的时候，当关联多的时候，会影响消费者想要快速浏览商品详细信息的需求，且手机购物有一定的偶然性，在消费者坐地铁、地下停车场、野外等信号较弱的场所进行线上购物的时候，关联商品图片、热点图层的增多，会影响商品详情页的打开速度。根据研究机构的数据统计，过多的与商品无关的信息展示，是消费者不喜欢的视觉元素，如果消费者在通过手机等移动设备浏览商品详情的时候，过多的无用信息会降低页面的打开速度，也会影响消费者查看商品信息的效率，这时消费者很有可能急于浏览商品信息，快速滑动屏幕而忽略关联商品模块，失去引流的作用，或者消费者失去耐心去了别的店铺，以致流量的损失。所以对于关联商品的展示，卖家一定要控制好比例，一般在移动端的关联商品在2-3款为宜，并且是与详情页有联系的或者配套的商品，才能更好的留住消费者，引起消费者的关注。

二、详情页设计的要点

在移动详情页出现的种种问题中，根本问题是详情页设计的思路问题，移动端的详情页设计来源于PC端，对于同一件商品它们也有着同样的设计思路，但是在PC端的基础上要做好优化，根据手机等移动设备的特点，提供给消费者更好的商品浏览体验。在移动端的详情页设计制作中，应该更要注意营造商品展示的真实、逻辑和氛围。

（一）营造真实

在线下购物时，消费者从多种感官渠道获取商品信息，而线上购物只能通过图片等视觉感官来了解商品。这时卖家在设计商品详情页的内容中要模拟线下购物方式的流程，引导消费者了解商品，以商品的真实状态，赢得消费的信任，保持商品真实的感觉，才能促使消费者下单购买。真实感可以通过商品的高清大图展示、商品细节展示、场景图片展示来变现，也可以通过买家秀来展示，或者通过视频、直播的形式来展示。不管使图片还是视频，都要线下的购物流程出发，卖家以消费者的购物视角展示商品，从多角度的商品展示开始，展现商品全貌、全款，并添加文字或者语言对图片、视频内容进行描述，添加细节、特点的说明，对商品的细节、特点、用法等等都要有相应的展示，让商品更加真实的呈现给消费者，树立店铺的好口碑，迎来更多的顾客和订单。

（二）营造逻辑

在进行详情页的设计制作时，卖家不仅要注意对商品描述内容语句的逻辑，也要设计好详情页的整体逻辑关系。将消费者最想看到的商品信息放在详情页的顶端，通过展示商品特性、到商品特点，到商品的作用，到商品的质量这个逻辑来确定商品详情页信息的前后顺序，这样一步步的引发消费的好感，增强其信赖感和购买欲望，完成下单。在移动端，逻辑顺序的营造和PC端又有很大的不同，在PC端的详情页中可以放置关联商品、活动信息、优惠券、新品推荐等很多附加的信息，移动端的浏览连贯性不如PC端，并且消费者在移动端页面的停留时间较短，这些附加的信息在移动端则显得不是很实用，移动端的逻辑是一定要直截了当的进入商品的主题，这就要求在移动端的前三屏内容设计中，必须要对商品的外形、质地、颜色、款式等主要信息做清晰的描述。在商品详情页的前三屏中，最多只占用一屏做为非商品展示的内容区域，最好只占半屏，这样在移动端商品详情页的第一屏中就既有商品的关键信息又有商品本身的展示信息，有助于保持详情页内容的连贯性、逻辑性。

（三）营造氛围

前面说到详情页的设计要以消费者在线下的购物视角展示商品，在线下购物时，会有导购等人员对消费者进行服务，那么在线上，图片、文字等视觉信息就是线上购物的服务员，充满亲切感的图文信息能够营造出一种愉快、轻松的购物氛围，拉近卖家和消费者的之间的心理距離。在文字信息的展示上，不要以大段的文字出现，可以用对话的形式出现，以对话的形式向消费者传达商品信息，比如可以采用问答的对话形式，不仅能够消除消费者对商品的疑问，也同时获得了犹如线下购物一样的体验，越真实、越亲切，越能让消费者放下心中戒备，提高购买的可能性。在图文的背景色可采用红色、橙色等激进的颜色，配以有紧迫感的辅助图形、背景图形，营造很多人争相购买的气氛，模仿线下购物环境中，人们喜欢扎堆购物、凑热闹的购物心理，促进消费者跟风消费、购买，这点在冲动型消费中尤为重要，会带动不少消费者下单购买。

三、移动端详情页设计的制作流程

移动端的详情页制作可以参考PC端的方法，根据移动端详情页所需要的要点进行调整后，流程如下：确定商品的页面风格、搜集与商品相关素材、构建详情页框架布局、确定主色调的配色方案、选择合适的字体类型、在软件中排版设计、修改定稿、将长图进行切片处理和优化储存、上传电商平台的后台。

第一步是确定商品的页面风格。页面风格主要根据商品本身的属性、特点、功能等信息来确定。比如在全网搜索巧克力，可以发现巧克力的详情页风格都是很柔滑的感觉，视觉元素中图形采用圆形或者圆角的流线型为主，颜色的过渡柔和，文字信息是以圆角、纤细的字体表现的。如果在全网搜索机油，风格和巧克力会截然相反，详情页都是很硬朗的风格，视觉元素中图形多以方形或者多边形为主，颜色的过渡明显，文字信息是以尖锐、粗犷的字体表现的。

第二步是搜集与商品相关素材。通过前期的商品实拍获得商品本身的素材，搜索与商品相关的网站或者从自己的素材库中提炼与商品相关的素材。

第三步是构建详情页框架布局。根据商品的推广文案、活动策划，结合商品进行框架布局。一般来说框架由海报图模块、商品卖点图模块、商品参数模块、优劣势对比模块、商品大图展示模块、商品细节图展示模块、商品包装模块、商品认证模块、售后模块组成。

第四步是确定主色调的配色方案。如果店铺是单一品牌，且品牌有企业VI视觉规范，则可以直接使用品牌的标准色、辅助色进行设计，如果没有可以从商品本身的外形颜色上提取主色调及配色，或从商品的商标中提取，或从商品的联想属性中提取配色方案。

第五步是选择合适的字体类型。字体起到对商品进行直白的解释说明的作用，也能起到画面的引导作用，并对商品的调性有一定的影响，所以要根据商品的属性选择相应的字体。

第六步是在软件中排版设计。商品详情页是在Photoshop软件中制作的，画面元素不能太多，尤其是移动端的设计，要简洁、清爽、透气、有节奏感。并且在排版上注意手机屏幕的大小，以一屏的大小为一个画面来显示一个图片的主要内容。

第七步是修改定稿。制作初稿导出图片格式，提交运营审稿或者上线测试，进行局部调整、修改，再定稿。

第八步是将长图进行切片处理和优化储存。制作好的详情页是一张长图，高度有时会达到上万像素，所以要使用Photoshop进行切片，对图片优化处理，保证图片在清晰的情况下占存储最小，让消费者在移动端能够更快的刷新出商品详情页。

第九步是上传电商平台的后台。把切好的详情页图片按照顺序上传到店铺的后台图片空间，上架新商品的时候就可以直接导入新设计好的详情页了。

四、总结

在很多领域都在讲究“仿生学”，在移动端的电子商务活动中，我们也要讲究“仿真学”，

不同于PC端，消费者在固定的场所进行线上购物，手机等移动设备的使用场合非常多，移动端的店铺视觉效果、商品详情展示页面要从真实感、逻辑感、氛围感这三点出发，在线上营造出线下购物环境的代入感，以合理的制作流程来设计详情页，引导消费者完成下单。

参考文献：