返回列表

浏览量:作者:慧赢天下客服外包

做电商必知!手机竖屏构图思维

发布时间:2022-11-07

通过竖屏构图思维提升无线端的点击率和转化率。在正文开始之前,先和大家聊一聊近些年的一个电商近况。我们电商来说,越来越多的成交占比由咱们的电脑端转向我们的无线端,有一组数据大家可以先和我看一下。就拿我们前些年的的双十一来说,移动端占比的比从2012年的5%直线上升到2017年的90%。可见我们的绝大部分流量都来自我们的移动端了。那么为什么会出现这样的情况呢?马上带大家来分析一下。


数据分析


在我看来无非是两个大点:

第一,设备的演变导致使用方式的演变;

第二,设备的演变导致阅读方式的演变。


现在我们逐个看一下我们的设备使用方式。

1.台式电脑:离不开电脑桌,所以台式电脑的使用方式就被固定在了电脑桌上;

2.笔记本电脑:解决了我们电源的限制,但是笔记本的重量还是个问题,所以我们的使用方式还是限制在“坐”的姿势上;

3.平板电脑:更加轻便,不需要桌子更不需要坐着,我们使用的时候可以扩展到更多的地方去,看似很方便了,但是整机大小还是略大,用户自由还是有所限制;

4.智能手机:真正解放了人类的自由度,一只手即可掌握所有的操作。我们可以在任意的场景,地点,姿势的条件下使用

所以截止今天,没事把手机拿出来刷刷看看已经成为我们普遍的行为了。


再来看下我们的阅读方式。以前的我们会从书籍上,报纸上,电视上等等渠道去获取有限且不定向的信息,而当今的电脑,互联网的出现,获取信息的方式开始多元化,一直发展到现在的5G智能手机的出现,获取信息更加简便高效了。现在的我们几乎每天都身处在海量的信息之中,各种社交软件,直播软件,小视屏软件等等。阅读环境从过去的少而不定向且单一的环境,变成了现在多而杂乱且可筛选。而这一变化导致人们的耐心减少,好奇心麻木,再加上信息量太多,没有足够的时间成本去获取,所以现在的阅读大部分都是走马观花,不会沉浸下来去阅读。


与此同时,我们再来看下改变过之后的设备使用方式和阅读方式之后的变化,为了让各位看的更加清晰,我特意准备了下面这张图让大家看的更加清晰:



看过这张图是不是有一种比较直观的感受,就是原来我们在电脑上看到一张大图的时候,我们立刻能感觉到图片所带来的感官刺激,并且图片的细节也可以一览无遗。


但是到了手机端的时候我们再用同等比例看这张图的时候,图片所带来的感官刺激几乎可以忽略了,而且细节部分也几乎看不到了。我们想要看清楚只有把图片放大才可以做到。但是当今信息网络这么庞大,每天都有数以百计甚至数以千计的图片展现在我们面前,谁会有闲心在浏览的时候把这些图一个一个放大看呢?


这样看下来之后,因为设备的演变,导致了人们的使用方式和阅读方式都改变了,这是不可逆转的事实,这也导致了同样的视觉,PC端看上去的舒适,在手机端看的时候就没那么舒服了。就好比同一个字号在PC端上看的时候相对清晰,而放在手机端的时候缩小了十几倍的感觉,几乎无法看清。


看到这里,相信大家都会很关注到底如何来做我们的手机端设计,那么请大家持续关注我们的文章,我将会在下一篇文章中,通过一些图片的实际案例来带大家更加直观的了解常见问题,从而加以解决。现在的流量绝大部分来自于我们的无线端,也说到了设备的演变导致使用方式的演变和设备的演变导致阅读方式的演变。下面就带给大家具体的一些演示和案例,让大家更加直观的认识到问题所在。



一、手机端要竖状构图

手机端要竖状构图


这是我在PS中给大家带来的演示效果,我们需要转化成下方这张图的展现效果。

给大家带来一个海报的案例,更加直观的展现一下(图片素材均来自网络,如有侵权请及时告知下架更换):



调整之前,不管这张图片内容精美与否,只能占据到我们手机端展示屏幕的大概四分之一左右的面积,另外文案利益点等方面也不容易看清楚。而调整为竖屏之后,海报整体占比为三分之二左右,比原来呈现面积扩大将近3倍。文案表达更为丰富清晰,画面效果也更加有刺激感官的作用,整体画面氛围立马变的舒适饱满。这就是我们的竖状构图的好处。


 

二、左右排版变为上下排版


左右排版变为上下排版


首先,没改版之前我们的左右排版,左图右文,很常规的一个排版。但是展现在手机上的效果不是那么尽如人意。而竖屏上下排版之后,主体物更大,文案更大,细节看的更清楚。这样让食物看起来更新鲜,更有吃欲,更能增加人的购买欲。


 


三、图片/细节图一定要用大图


图片/细节图一定要用大图


 眼镜高清细节图,把产品的工艺水平和设计格调体现了出来。虽然只显示了一部分,但是完全不妨碍产品表现的设计理念、模具水平、工匠精神等。美食近焦图,将美食淋漓尽致的展现出来,甚至里面的辣椒、芝麻都清晰的展现,透过手机大屏构图刺激到了用户的味蕾。同理,产品场景大图,拉近了人与产品的共鸣,通过产品表达生活。产品纹理大图,将产品的材质纹理表现的淋漓尽致。而横屏构图,这样的效果会被极大的削弱。



四、一屏一主题的原则


一屏一主题的原则

 


前后对比我们可以看得出来,设计前文已经阐述,手机用户才懒得动脑去区分、学习、记忆、理解这么多陌生的内容,客户只想更快的滑过去。即使完全看完,立刻就会忘记。改变之后的一屏一主题,彻底将设计方式解放。生动的画面+文案,立刻会让人记住,增加人的心理共鸣。现在你再回头看上方画面,还记得说的什么?



五、标题字号要突出放大


标题字号要突出放大


左边的图看来:标题过小或者没有标题,手机用户在做快速浏览的时候,是很难聚焦在某一次。客户可能都没有读完这一屏就已滑走,甚至可能找不到他想要的信息。我们要避免这种设计。而经过我们改版之后的右图:即便是客户在1秒钟的快速阅读下,标题文字也是清晰可见,立马能映入眼帘。不需要用户在浏览的时候再去费神仔细查看标题文案信息


经过这几个常见问题的案例解析之后,大家是不是有一个更加清晰的认知呢?那么我们现在就可以回到我们自己的店铺当中去,看下我们自己详情页是不是有我陈述到的这些问题,如果有,建议大家及时修改补救。更好的提高咱们店铺的转化率,不让有效的客户流量流失,让我们的店铺大卖!