• 服务支持:点击这里给我发消息
陈柱子微信公众号二维码
柱子开讲竖屏思维
醒觉思维惯性
重新认识战场
重新认识用户
重新认识你自己
柱子十刀
思维进阶

柱子开讲竖屏思维【26】:柱子十刀第一刀 - 纵向构图

原创
陈柱子
2017-03-06

柱子开讲竖屏思维-配图-26-1

柱子十刀,是我根据当前手机端图片的弊端,提出的十招改善方法。照此刀法一刀刀砍过去,PC用图就一步步转变为适合于手机端阅读的图片。如果一开始就依照“柱子十刀”来做构思、拍照、制图,能基本上保证用户在手机上阅读起来比较舒服、不吃力。算是“手机端原生内容”了。

从柱子竖屏思维付费学员的操作效果来看,柱子十刀对手机端转化率的提升效果十分明显,可谓“刀刀见血、立竿见影”。

第一刀 纵向构图

在打开设计软件(如photoshop等)开始构图,你不假思索就选择了横向构图——和人类眼帘形状类似、也和PC屏幕形状类似,视觉上最舒服。这无可厚非。

但是,当你面对的是手机竖屏,有没有想过应该改用和手机屏幕形状类似的竖屏、纵向构图?

柱子开讲竖屏思维-配图-26-2

思维调转一下。采用纵向构图,可以充分用完整个手机屏幕面积,让设计主体足够大。竖屏的重要性,前面已强调过多次,这里不赘述。这里直接上案例。

要温习的同学,请直接看

第一个例子:一个横向构图的钱包。

左边是钱包图片,右边是文案。

柱子开讲竖屏思维-配图-26-3

我们用最简单的面积法来分析一下。信息主体(钱包)大约只占了手机屏幕面积的六分之一。不管这张图片做得多漂亮,都只能通过这1/6屏幕的面积来展示自己,除了一个红色钱包,还能期望用户看到什么呢。而文案所能占的空间就更小了,不管写得是否妙语如花,用户都很难看得见其中的内容。

纵向构图改造之后呢?

柱子开讲竖屏思维-配图-26-4

这时钱包占到了整个屏幕面积的2/3。由1/6到2/3,展示面积整整提升了四倍。用四倍空间去展示同样一个钱包,用户就轻轻松松地看清了这个钱包有几个卡位、能装了多少钱、纽扣的样式,甚至卡片是哪家银行的信用卡都看得清清楚楚。文案表达也游刃有余。

第二个例子,雷军微博配图。

两个模特坐在马路牙子上。三分之一的屏幕上装着两个人,每个人是仅占屏幕的九分之一。几乎看不清模特的表情,表情张力浪费掉了一大半。模特的表现力只能通过模特的姿势来勉强体现。除了表达“两个模特坐在马路牙子上”,这个图片传递的有效信息比较贫乏了,对品牌调性、销售推动也无从说起。

柱子开讲竖屏思维-配图-26-5

看看雷军微博上的另外一张图,用屏幕的三分之二来表现两个人。

柱子开讲竖屏思维-配图-26-6

此时,每个模特占用了近1/3屏,展示面积扩大了三倍。此时,这两个年轻人的气质跃然“机”上。

模特能传达设计师想表达的时尚元素,体现品牌调性。模特气质甚至能直接推动销售。很显然,手机上的横屏构图浪费了模特的力量。而改为纵向构图之后,模特张力很自然地散发了出来。

上面两张图都是来自雷军的微博,都是小米的高薪设计师在PC上设计出来的。在电脑上展示也许不会有这么大的差别。雷军(或者是他的助理)发微博配图时,也许没想到,这两张图在手机端上的展示效果会如此不同。

手淘上的纵向构图尺寸

当前绝大多数手机竖屏的满屏是9:16。所以微博微信的配图,直接用9:16竖屏图做满屏展示就好。

针对手淘app,有标题栏和购买栏,用9:16竖图会导致一屏展示不完一张图的情况,所以略有不同。事实上,在不同尺寸、不同分辨率的手机屏幕下,手淘中间的展示窗口的竖屏比例不尽相同(约9:12~9:14)。像素越高的手机屏幕,标题栏和购买栏所占的屏幕比例越小,留给展示窗口的空间越大。并不存在一个绝对尺寸,可让所有人的手淘上都刚好是一屏。

我一般推荐手淘一屏尺寸用9:12竖屏,这样可保证绝大多数手机屏显示出一整屏的图片,避免出现一张图需要跨屏展示的情况发生。

图片比例取9:12,那宽度取多少像素合适?

像素大就会影响速度,像素小会影响清晰度。这个平衡取舍,淘宝是受影响最大的利益体。阿里一定会综合考虑了全国各地当前的用户习惯和流量带宽现状,再会给出标准和建议。作为卖家直接用淘宝的推荐值就可以了。

前几年阿里官方推荐手淘图片宽度不要超过620。今天(2017年3月6日)的淘宝官方推荐是:480px≤宽度≤1242,高度≤1546;建议手机端图片宽度750图片上传会较好。

因此,我建议手淘一屏的尺寸用:750*1000,9:12竖屏。

柱子开讲竖屏思维-配图-26-8

这就是柱子十刀第一刀:纵向构图。

纵向构图之后,同样的一个主体,得以用3-4倍面积去表达,更能引起用户注意、信息更丰富、细节更清晰。而且用户看大图时,不需要精准聚焦,阅读的疲劳度也降低了,不经意间延长了阅读时间。对提升转化率怎能没帮助呢?

上一篇:柱子开讲竖屏思维【25】:竖大少浅四原则
下一篇:柱子开讲竖屏思维【27】:柱子十刀第二刀 - 砍掉左右留白