• 服务支持:点击这里给我发消息

柱子开讲竖屏思维【27】:柱子十刀第二刀 - 砍掉左右留白

原创
陈柱子
2017-03-07

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

第二刀 砍掉左右留白

为什么会有左右留白?

前文说过,人类眼帘是横的长方形,PC屏也是横的长方形。我们面对横的长方形屏幕时,自然用到左右留白。让设计主体居中;让用户注意力往中间正方形聚焦;画面整体平衡。左右留白几乎是天生和谐、天经地义的排版设计手法。

但是,当我们面对的手机屏不再是横方形、而是竖屏的时候,有没有想过左右留白可能是不合理的、不正确的?左右留白时机上浪费了手机屏的展示空间?

还是直接看案例吧。

第一个案例:戴口罩的女孩

一个中规中矩的平面设计作品,左右留白主体居中,貌似能帮助用户视觉聚焦,画面平衡和谐。

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

由于左右留白已占去屏幕宽度的2/3,模特也只能占到屏幕宽度的1/3、屏幕面积的1/9。画面上除了看到“一个戴着口罩的女孩”,似乎就没能传递出其他有效信息了。

看看砍掉左右留白之后的效果。

柱子开讲竖屏思维-配图-27-

此时,这个女孩马上占到整个屏幕的三分之二大小,我们马上看清楚了她的眼神、她佩戴的黑色挂绳、上衣的花纹,甚至口罩牌子。模特张力和产品细节都得到了自然展现,信息丰富多了。这部分信息在砍掉左右留白之前,莫名其妙地被淹没了。

两张图一对比,就很容易看出区别了。手机竖屏上,左右留白让画面主体太小了,淹没了许多关键内容。砍掉左右留白之后,画面信息就立刻变得丰富起来。

第二个案例:鳄鱼皮手机壳

手机壳主体居中,深邃颜色的背景一直延伸到两边,体现其奢华内涵。左右留白泛指的是主体之外的空白,不一定是白色。

柱子开讲竖屏思维-配图-27-

画面的平衡感没有问题,手机壳约占屏幕的1/6。看不出来这个手机壳的更多细节和质感了。店家说这款手机壳的售价在1000元以上,如何体现哪里值钱呢?用户一瞥之下,和九块九包邮有什么区别?

把左右留白砍掉之后,此时手机壳能占到屏幕的2/3。

柱子开讲竖屏思维-配图-27-

手机壳突然拉近到用户的眼皮底下,毫不费劲我们就可以看清这个手机壳的鳄鱼皮质感。手机壳的奢华逼格传递过来了。

没有足够大面积的展示空间,再好的产品、再好的摄影也白搭。砍掉左右留白,就是让产品主体变得更大,让用户看得更真切。

第三个案例:朋友圈的小狗

朋友圈里晒出来一只可爱的小狗,背景是美丽的栅栏和蝴蝶兰。很平衡,但是还不够。

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

把左右留白砍掉,小狗楚楚可怜的眼神就传过来了。这时照片透过来的是温情,一定能获得更多的点赞和评论。

柱子开讲竖屏思维-配图-27-7

这就是柱子十刀第二刀:砍掉左右留白。

横方形屏幕上的习惯性和谐画面,迷惑了我们的眼睛,于是手机上的图片保留了大量无必要的左右留白,白白浪费了主体的展示空间。许多信息在淹没在小图中,没能传递给用户。

习惯性思维让我们无意识间就犯错。

大胆砍掉左右留白,画面主体立马放大了3-4倍,信息展示得更充分、更轻松。用户非常舒服地看到产品的细节、质感乃至情感等等,收到了更丰富的信息。对提升转化率怎能没帮助呢?

上一篇:柱子开讲竖屏思维【26】:柱子十刀第一刀 - 纵向构图
下一篇:柱子开讲竖屏思维【28】:柱子十刀第三刀 - 一屏一主题