首页 理论教育 手机端店铺设计的思路优化

手机端店铺设计的思路优化

时间:2023-06-10 理论教育 版权反馈
【摘要】:手机端店铺页面的设计核心是模块化,平台对页面模块的数量也有限制,因此要利用有限的模块创造更多的价值。例如,图3-71和图3-72所示为农夫山泉矿泉水的手机端店铺页面,白色是主色,红色是辅助色,绿色是点缀色。设计师使用这样的配色方案是根据农夫山泉的品牌主色决定的。手机端店铺详情页的宽度可以设为750~1 240像素。另外,手机端店铺首页空间有限,在设计时要注意分清主次。

手机端店铺设计的思路优化

根据前面所述,手机端店铺用户具有使用时间碎片化和快速阅读的显著特点。手机端店铺首页装修有一定的局限性,并不能像电脑端页面那样具有较大自由度的发挥空间。买家连续浏览页面的时间可能不长,这就要求页面必须进行简洁明了的表达,能突出商品的卖点及店铺利益点,让买家能第一眼就看得明白,从而有继续看下去的兴趣。对比买家在电脑端的阅读与浏览习惯,手机端上的阅读速度会相对更快。同时,买家使用手机端的时间相对电脑端而言要短一些,注意力的集中时间也较短。针对以上手机端店铺买家的特点,手机端店铺装修需要注意以下几点。

1.清晰的导购思路

买家在看手机时会比较放松,如果在几秒内不能吸引住买家,那么该买家就很有可能会流失,因此,拥有一个清晰的导购思路非常重要。手机端店铺页面的设计核心是模块化,平台对页面模块的数量也有限制,因此要利用有限的模块创造更多的价值。

普遍的手机端店铺首页由以下几部分组成:店招、海报、分类入口、优惠券、单品展示等。一般而言,这几个部分大都按照顺序排列。图3-68~图3-70所示的首页示例中,第一个模块的位置可以利用无线即时效应,在新品上线或大型活动的前期在手机端提前预热;下面的模块给买家提供感兴趣的导购入口,降低跳失率;接下来就可以利用手机端进行“活动展示+商品推荐”,让买家依赖手机端,提高回访率;如果老客户人群占比较高,可以采用新品展示为主、人气商品展示为辅的形式呈现。

图3-68

图3-69

图3-70

2.简洁的店铺色调属性

设计学中有一条“7秒钟定律”,有研究表明,“人关注一个商品的时间通常为7秒,而这7秒的时间内70%的人确定购买的第一影响要素是色彩”。通常同一版块内的颜色不要超过3种,这3种颜色可以看作主色、辅助色和点缀色。例如,图3-71和图3-72所示为农夫山泉矿泉水的手机端店铺页面,白色是主色,红色是辅助色,绿色是点缀色。设计师使用这样的配色方案是根据农夫山泉的品牌主色决定的。这样的配色方案就能让这个页面看起来十分和谐、统一。因为手机端店铺的页面本身空间有限,所以并不适合使用过多色彩。

另外,卖家在进行店铺装修时可以多多使用万能搭配色,如黑、白、灰等色彩。因为这些色彩比较百搭,与任何颜色搭配都会显得比较和谐,并容易体现出高端的感觉。一般而言,背景色尽量以浅色调为主,因为在手机端上查看时,浅色的背景更能突出商品本身,使买家注意力容易集中在商品上。

图3-71

图3-72

3.首页布局

在确定了店铺装修风格之后,就需要设计首页布局。手机端店铺详情页的宽度可以设为750~1 240像素。由于手机屏幕尺寸和流量的关系,手机端店铺详情页的长度建议控制在6屏以内,每屏切割为多个小屏。商品图片要突出整体场景,重视效果图和搭配感觉。首页上各类模块的搭配要统一、简洁。好的页面布局能够吸引更多买家驻足。卖家可以先设计店铺首页的整体框架结构,再单独调整各个模块的内容。一般而言,常见的店铺页面布局包括店招、导航栏、全屏海报、商品促销轮播海报、商品自定义主图展示区等,其布局模板如图3-73所示。(www.xing528.com)

图3-73

4.图片布局技巧

手机端店铺首页大多以豆腐块的形式展现,范围非常有限,因此在选择图片时要尽量使用模特半身图或局部特写图,避免视觉上的不清晰。另外,要兼顾图片与图片之间的过渡搭配,如果全部都用模特半身图或局部特写图,页面就会显得单调和乏味,因此,可以适当地穿插一些全景图,有意识地调整页面的节奏,使整个页面更加和谐与活泼。全景图与局部图交替使用如图3-74和图3-75所示。

图3-74

图3-75

5.图文搭配的排列技巧

排版是为了统一布局文字和图片。在面积较小的情况下,统一能使页面看起来更大,还能避免因为“乱”和“杂”而产生的廉价感。从手机端店铺的海报可以看出,设计相对于电脑端海报的设计要简单许多,但要做得好也不是容易的事。编者根据实操积累的经验总结了一些规律。例如,文字一般占整个海报的1/2或1/3,并且要尽量放在同一个区域。在设计时,要注意文字间的关系,如字体可以上粗下细或上大下小,架构应主次分明。另外,手机端店铺首页空间有限,在设计时要注意分清主次。例如,在设计首页海报时,要先定位店铺海报要突出的重点是什么,是促销信息还是推荐宝贝。如图3-76所示,海报将活动促销定为重点,并推出了专属活动。买家看到这个海报后,就能知道该店铺将会开展一场金秋超值购满减的促销活动。

图3-77所示中的海报设计为热卖单品,下方还有优惠券,鼓励买家在看到促销信息后直接领取店铺优惠券。这在无形之中又增加了买家的购买欲望。

图3-76

图3-77

6.产品类目布局技巧

从吸引买家的角度看,若店铺类目明确,如图3-78所示,餐具按照不同功能分为盘子、碗和水具等,买家就能快速找到自己想要的商品。其实很多买家不是只为购买一款商品而进入店铺的,如果能在首页为其提供多种选择,就可以增大买家下单购买商品的概率。

图3-78

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

我要反馈