本帖最后由 大胡子蜀黍 于 2017-6-15 17:28 编辑
具体怎么做——柱子十刀
柱子十刀第一刀 - 纵向构图
柱子十刀,是我根据当前手机端图片的弊端,提出的十招改善方法。照此刀法一刀刀砍过去,PC用图就一步步转变为适合于手机端阅读的图片。如果一开始就依照“柱子十刀”来做构思、拍照、制图,能基本上保证用户在手机上阅读起来比较舒服、不吃力。算是“手机端原生内容”了。
从柱子竖屏思维付费学员的操作效果来看,柱子十刀对手机端转化率的提升效果十分明显,可谓“刀刀见血、立竿见影”。
第一刀纵向构图
在打开设计软件(如photoshop等)开始构图,你不假思索就选择了横向构图——和人类眼帘形状类似、也和PC屏幕形状类似,视觉上最舒服。这无可厚非。
但是,当你面对的是手机竖屏,有没有想过应该改用和手机屏幕形状类似的竖屏、纵向构图?
图46
思维调转一下。采用纵向构图,可以充分用完整个手机屏幕面积,让设计主体足够大。竖屏的重要性,前面已强调过多次,这里不赘述。这里直接上案例。
第一个例子:一个横向构图的钱包。
左边是钱包图片,右边是文案。
图47
我们用最简单的面积法来分析一下。信息主体(钱包)大约只占了手机屏幕面积的六分之一。不管这张图片做得多漂亮,都只能通过这1/6屏幕的面积来展示自己,除了一个红色钱包,还能期望用户看到什么呢。而文案所能占的空间就更小了,不管写得是否妙语如花,用户都很难看得见其中的内容。
纵向构图改造之后呢?
图48
这时钱包占到了整个屏幕面积的2/3。由1/6到2/3,展示面积整整提升了四倍。用四倍空间去展示同样一个钱包,用户就轻轻松松地看清了这个钱包有几个卡位、能装了多少钱、纽扣的样式,甚至卡片是哪家银行的信用卡都看得清清楚楚。文案表达也游刃有余。
第二个例子,雷军微博配图。
两个模特坐在马路牙子上。三分之一的屏幕上装着两个人,每个人是仅占屏幕的九分之一。几乎看不清模特的表情,表情张力浪费掉了一大半。模特的表现力只能通过模特的姿势来勉强体现。除了表达“两个模特坐在马路牙子上”,这个图片传递的有效信息比较贫乏了,对品牌调性、销售推动也无从说起。
图49
看看雷军微博上的另外一张图,用屏幕的三分之二来表现两个人。
图50
此时,每个模特占用了近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竖屏。
这就是柱子十刀第一刀:纵向构图。
纵向构图之后,同样的一个主体,得以用3-4倍面积去表达,更能引起用户注意、信息更丰富、细节更清晰。而且用户看大图时,不需要精准聚焦,阅读的疲劳度也降低了,不经意间延长了阅读时间。对提升转化率怎能没帮助呢?
柱子十刀第二刀 - 砍掉左右留白
第二刀 砍掉左右留白
为什么会有左右留白?
前文说过,人类眼帘是横的长方形,PC屏也是横的长方形。我们面对横的长方形屏幕时,自然用到左右留白。让设计主体居中;让用户注意力往中间正方形聚焦;画面整体平衡。左右留白几乎是天生和谐、天经地义的排版设计手法。
但是,当我们面对的手机屏不再是横方形、而是竖屏的时候,有没有想过左右留白可能是不合理的、不正确的?左右留白时机上浪费了手机屏的展示空间?
还是直接看案例吧。
第一个案例:戴口罩的女孩
一个中规中矩的平面设计作品,左右留白主体居中,貌似能帮助用户视觉聚焦,画面平衡和谐。
图51
由于左右留白已占去屏幕宽度的2/3,模特也只能占到屏幕宽度的1/3、屏幕面积的1/9。画面上除了看到“一个戴着口罩的女孩”,似乎就没能传递出其他有效信息了。
看看砍掉左右留白之后的效果。
图52
此时,这个女孩马上占到整个屏幕的三分之二大小,我们马上看清楚了她的眼神、她佩戴的黑色挂绳、上衣的花纹,甚至口罩牌子。模特张力和产品细节都得到了自然展现,信息丰富多了。这部分信息在砍掉左右留白之前,莫名其妙地被淹没了。
两张图一对比,就很容易看出区别了。手机竖屏上,左右留白让画面主体太小了,淹没了许多关键内容。砍掉左右留白之后,画面信息就立刻变得丰富起来。
第二个案例:鳄鱼皮手机壳
手机壳主体居中,深邃颜色的背景一直延伸到两边,体现其奢华内涵。左右留白泛指的是主体之外的空白,不一定是白色。
图53
画面的平衡感没有问题,手机壳约占屏幕的1/6。看不出来这个手机壳的更多细节和质感了。店家说这款手机壳的售价在1000元以上,如何体现哪里值钱呢?用户一瞥之下,和九块九包邮有什么区别?
把左右留白砍掉之后,此时手机壳能占到屏幕的2/3。
图54
手机壳突然拉近到用户的眼皮底下,毫不费劲我们就可以看清这个手机壳的鳄鱼皮质感。手机壳的奢华逼格传递过来了。
没有足够大面积的展示空间,再好的产品、再好的摄影也白搭。砍掉左右留白,就是让产品主体变得更大,让用户看得更真切。
第三个案例:朋友圈的小狗
朋友圈里晒出来一只可爱的小狗,背景是美丽的栅栏和蝴蝶兰。很平衡,但是还不够。
图55
把左右留白砍掉,小狗楚楚可怜的眼神就传过来了。这时照片透过来的是温情,一定能获得更多的点赞和评论。
图56
这就是柱子十刀第二刀:砍掉左右留白。
横方形屏幕上的习惯性和谐画面,迷惑了我们的眼睛,于是手机上的图片保留了大量无必要的左右留白,白白浪费了主体的展示空间。许多信息在淹没在小图中,没能传递给用户。
习惯性思维让我们无意识间就犯错。
大胆砍掉左右留白,画面主体立马放大了3-4倍,信息展示得更充分、更轻松。用户非常舒服地看到产品的细节、质感乃至情感等等,收到了更丰富的信息。对提升转化率怎能没帮助呢?
柱子十刀第三刀 - 一屏一主题
第三刀一屏一主题
“一屏一主题”的刀法,源自“一屏就是最小的信息单元”的手机屏特点。
把信息切碎到手机屏的一个信息单元大小,最适宜手机用户阅读。
直接看案例。
第一个案例:一副眼镜的三个细节
这一屏里展示了一副眼镜的三个细节特点,设计得很清爽,图文编排错落有致。
我们按照普通用户的阅读习惯,看2秒钟然后手指一划,进入下一屏。
图57
手指停下来。
刚刚画面上在讲述眼镜的什么特点?
你是否突然意识到,原来自己什么都没记住。仅仅是依稀看明白了“在讲眼镜的三个特点”,但是“每个特点的内容是什么",原来自己并没有接收到。视而不见,我们居然被自己的眼睛蒙混了过去。
现在来看看一屏一主题。看2秒钟然后手指一划,进入下一屏。
图58
手指停下来,先别回去看刚才屏幕上的内容。
再问同样的问题。画面上在讲述的眼镜有什么特点?
相信大多数人都能回答“在讲眼镜的铰链很牛”。
而且,“在讲眼镜的铰链很牛”其实在第一张图里也有,只是我们视而不见罢了。
为什么会这样?
一屏只有一个主题,正好是我们最容易阅读的信息单元大小。阅读和理解起来毫无压力,容易在脑里留下了印象。
而一屏有多个主题,手机用户阅读和理解起来就大为费劲,大脑和眼睛默认进入了进入“视而不见”的偷懒状态。马虎看完,大概知道在讲眼镜卖点、在推销产品,但是具体内容是什么,并没真正在意。而且,对多个生僻知识点的记忆,是非常有难度的事情,大脑只能是边看边忘。所以,手指划过去之后,大脑里一点印象都没有。
第二个案例:看见楚楚动人的小猪
一屏多主题的表达。我们看到一只老虎、一只猪、一只狗……。
图59
下图是一屏一主题的表达。
图60
这时我们只看到一只可爱的小猪趴在吉他上,眼睛、鼻子、耳朵、爪子甚至吉他的六根弦……,都进入了我们的眼帘。刚才那张图怎么没发现那么多的内容?是同一只小猪吗?
一屏多主题时,给用户传达的是“这里有老虎、小猪、小狗三个动物(主题)”,突出的是“有多个动物”。对于单个动物(比如小猪)有什么特点,也就是单个主题本身想表达的信息内容,给用户的印象非常模糊。
而一屏一主题时,给用户传达的是“一只……的小猪,ta有...的特征”,小猪留给用户的印象是丰富的、饱满的。如果这些信息内容本身(主题卖点)切中了用户的需求,就能对销售转化有很大的促进作用。
第三个案例:内容丰富的加湿机
再来看一款加湿机的介绍。上半部分讲述产品的几个细节,下半部分是产品规格。设计风格挺温暖。这大概就是我们两秒钟只内接收到的内容。然后手指一划,进入下一屏。
图61
手指停下来,先别回去看刚才屏幕上的内容。
同样,看到这行字的时候,已经很少人能回忆起刚画面上在讲述的加湿机有什么特点。我们大致只知道是在讲加湿机的卖点,但要回忆出几个功能点点关键词都非常困难。连功能点都没看到,用户又怎么知道这些功能点是否能切中他的需求。
如果砍成一屏一主题呢?
图62
一目了然。
大部分人都看到了“双重加湿速度”。如果“双重加湿速度”正好是用户的需求和痛点,ta就会深入去了解。其实“双重加湿速度”也在上一张图里,掩藏在那一堆主题当中,没被我们发现。
陌生行业里的生僻词语,不容易理解、更难记住。你的产品在普通消费者面前,ta需要动脑理解,也是很难理解和记住的“生僻词语”。如果这些生僻知识点还不止一个,那么用户的下意识里就会选择敷衍、逃跑。
如果是不是“生僻”知识,结果又怎么样呢?
第四个案例:5张扑克牌 vs 1张扑克牌
这一屏有5张扑克牌。同样,看2秒钟然后手指一划,进入下一屏。
图63
手指停下来,先别回去看刚才屏幕上的内容。
现在回想一下,牌面上有几个黑桃、几个红桃?4是什么花色的?
大部分人都已经回答不出来了。
尽管扑克牌对每个人而言都不是“生僻的知识”,但是我们依旧不能回忆起2秒钟看过的5张牌。5张好无关联的扑克牌,错落有致地展示在一屏里,也形成了“生僻的知识”,超出了大脑2秒钟的阅读、理解和记忆的极限。
更何况是你的商品卖点呢?
大脑最喜欢、最舒服看到的是:一张牌。
图64
哪怕只瞄0.1秒钟,我们也知道并记住了“这是一张红桃K”,并且在相对比较长的时间内,能保持清晰的印象。如果这张牌正是撬动销售转化的关键点,请把ta单列出来用一屏来表达,这样顾客就能愉快地、轻松地、舒服地把ta消化掉。
这就是“一屏一主题”对销售转化的威力。
现在,大概你一眼就可以看出来:
下面的手机详情图在表达上有什么问题?
柱子十刀第四刀 - 左右分栏变上下分栏
第四刀左右分栏变上下分栏
为什么会左右分栏?
人类眼睛横着长视野是横的长方形,PC显示屏也是横的长方形。把横方形的长边切成左右两半,是一种自然平衡。
横方形屏幕天生适合左右分栏,把屏幕切成左右两个区域,更便于阅读。事实上,左右分栏是大多数设计师做图时的习惯性表达。
但是,手机用户面对的是竖屏。左右分栏还好使吗?
第一个案例左图右文的习惯性表达
左边是产品,右边是文字介绍。这样的表达形式再普通不过了。相信每个人每天都会遇到类似表达的图片。
图66
问题是,匆匆一瞥之后,你知道刚才图片上在表达什么吗?图片上的产品清楚吗?文字瞄准的关键词还有印象吗?
此时发现,原来刚才的图片我们并没有看清楚,而文字更是被我们直接忽略了。这就是每个用户每天都发生的事情。
看看变为上下分栏的效果。
图67
原来是旅行收纳袋。
左右分栏时,产品图片小到看不见;调整为上下分栏后,图片上的logo都看得见。左右分栏时,文字总是位置不够、无法调更大;调整为上下分栏,文字就很容易排版了。
第二个案例 无线耳机,要逼格更要内容
一款有逼格的耳机。
图68
当然,在没有事先提醒的情况下,很少人能从这个图上看到耳机。依稀只看见一个男人落寞的背影图,还有一堆密密麻麻的文字。
如果把排版改为上下分栏呢?
图69
一个年轻人头戴耳机,站在窗台外;窗外更远处有楼宇;窗内有台灯灯罩、桌面上是叠起来的书。“给你无线自由”的文案够大够清晰。不假思索,我们都知道这是无线耳机的介绍。
左右分栏时,是对竖屏的短边(宽度边)进行切分。于是图片宽度只能占到屏幕宽度的1/2,面积更是只占到1/6,大大地浪费了摄影师的才情;同样文字区域也只有不到屏幕面积的1/6,却需要安置上百字的文案。表达空间捉襟见肘,就导致了图小、字小,手机用户阅读不舒服。只接收到逼格,看不见内容。
上下分栏则不同,对竖屏的长边(高度边)做切分。图片和文字区域都布满手机屏幕全宽度,最大化地应用了屏幕空间。很容易就实现了大图、大字,手机用户不需要定焦阅读,信息传递得舒服、顺畅。
第三个案例 神奇的美食
左右分栏时,晒美食也平淡无奇。因为锅里的鸡太小了,只占到屏幕的1/6,未能触动用户的下意识。文字则小得需要费劲去阅读,很多用户就直接跳过去不读了。
图70
上下分栏就大不一样。用整个屏幕的二分之一来表达烧好的鸡煲,连锅里的辣椒都看得清清楚楚。图片够大、够清晰,视觉冲击能刺激到用户的味蕾,引发共鸣。文案够大够清晰,用户用余光瞄一下也能读懂其中的意思。
图71
看到这里,请马上检查一下自家店铺的详情图,或者今天的微博微信配图。是否有习惯性的左右分栏表达?如果有的话,请马上调整为上下分栏对比一下效果。
这就是柱子十刀第四刀。是不是很简单?
柱子十刀第五刀 - 标题字高≥1/10屏高
柱子十刀第五刀,砍向标题文字的大小。
经常有朋友问我:标题应该用几号字才够大?
竖屏思维不以字号为单位来衡量文字大小
一提到字号,我们脑子里浮现的都是这个字号在PC屏上的大小,但实际上这个印象和手机屏上的大小相去甚远,会误导到我们做正确的设计。
不以字号,那以什么为单位呢?
我引入“屏高”这个相对参照物,来做文字大小的衡量单位。建议大胆使用≥1/10屏高的大字来做手机端标题。
先看案例。
案例一 PC上觉得大小刚好的标题
在电脑上做设计时,有些设计师喜欢用优雅的小字做标题,也许看起来比较有设计感。但是这样的设计,进入手机之后太小了,无法一下子抓住用户的注意力。看清这样的标题,需要用户特别地集中注意力,聚焦再聚焦,才能看完。
很多做快速浏览的用户,甚至根本没读到标题里的文案内容,手机一划已进入了下一屏。标题的作用就完全没体现出来。
图72
案例二 家纺标题
以十分之一屏高的大字做大标题。
即使在1秒钟之内的速读中,“今天,我才知道是如此的爱你”,不需要特别用心也能看清楚。
图73
案例三 女装标题
当标题字体达到可以和屏高相提并论的时候,其实才可以统领整屏的内容。
“亲肤麻棉很舒服”的文字信息,用户是在看图片的同时,用余光就顺便阅读到的,根本不需要专门聚焦。
图74
案例四 化妆品标题
标题文字,就是要做到用户漫不经心地瞄读、瞟读时,也可以轻易看到、看清、看懂“斜口设计贴合好”。
图75
案例五 微博配图标题
微博配图。大标题“急速指纹”,让正在“极速划屏"的手机用户,也能轻易捕捉到配图的核心信息。
图76
案例六 大至1/5屏高的标题
其实,手机上的标题文字还可以做得比1/10屏高更大。即使大至1/5屏高,在匆匆一瞥的手机用户眼里,也不会觉得有太大的突兀感。
图77
看完这些案例,相信你对“1/10屏高”标题所能达到的信息畅通感有了直观认识。适合于手机屏的标题,和适合于PC屏的标题,未必是通用的。用这样的大字做标题,在PC屏上非常罕见,但是在手机屏上却恰如其时。
环境不同了,想当然的和谐和美,不一定是恰当的。
知其然更要知其所以然。现在来深究一下用屏高作为文字大小的单位的逻辑。或者说,为什么不能以像素和字号作为手机端文字大小的衡量单位呢?
为什么:不能以像素、字号做为文字大小的衡量单位?
其一,手机屏的像素密度是PC屏的3-4倍。电脑屏上的正方块进入手机屏,边长会缩小3-4倍、面积更会缩小一个数量级。拿PC屏的像素印象,去衡量手机端像素的实际大小,会判断失误。
其二,图像进入手机屏,实际上做了以手机屏屏宽为基准的等比缩放。
这样,图宽1200像素中的100号字,和图宽600像素中的100号字,当他们进入手机屏时,文字显示的大小就会完全不一样!
图78
看懂上面这张图,你就明白手机端上文字的大小,跟手机屏幕大小成正比,跟你预设的图片宽度成反比。
单纯用字号作为手机端图片文字大小,毫无意义。
所以请暂时忘记像素、忘记字号,以“屏高”为相对参照物,直接以手机屏实际场景为判断标准。把标题文字调整到用余光也能清晰看到、看清、看懂的大小为止。慢慢地,你会在手机屏上重新找到正确的拿捏字号和像素的感觉。
如果你一下子做不出决定,那么就先听我的:标题字高≥1/10屏高。这就是柱子十刀第五刀。
柱子十刀第六刀 - 一屏文案字数<3行30字
柱子十刀第五刀一屏文案字数<3行30字
手机详情图上,一屏之内文案用多少字为好?
我的建议是,文字阅读量(包括标题和正文)要控制在两三行、二三十个字以内,也就是普通用户者看两三眼就能看完的范围。
用户停留在每一屏的时间只有几秒钟。文字的阅读任务如果太繁重,就触碰到了at的耐心极限,心生厌烦,就直接跳过不读了。
案例一牛皮癣式文案
电商早期,牛皮癣式文案曾立下汗马功劳。据说有数据证明“美国亚马逊用户喜欢清爽的页面、但中国淘宝用户就是喜欢杂乱页面”。那些年,信息还没那么泛滥,也许狂轰滥炸真能让用户招架不住,从而达成比较高的销售转化吧。
进入手机互联网时代,商品信息泛滥成灾,用户耐心锐减。试问现在还有几个人能把这些字从头到尾读完?相信99%的人看到这个画面的第一反应,就是赶紧划屏翻过去吧。
图79
划进来的页面,只有两行字。世界清静多了。
图80
需要阅读的文字量很少。扫一眼,就已读完画面上的文字,并马上明白文字的意思。
“少”,是不是比“多”更好?
案例二培训教材文案
一个培训教材式页面。这样的页面,至少需要讲师在旁边讲解一两分钟,才比较好理解。让手机用户阅读这样的页面,就等于指望让ta自学成才了。
图81
不会有几个人愿意把这些信息看完,且不说看懂了。五六个标题,上百个文字,晦涩的专业知识,甚至还有截面图,大大超出了普通人的心理耐烦极限。赶紧手指一划,逃之夭夭。
此时的页面上只有不到20个字的阅读量。
图82
是不是在2秒钟内,就明白了画面想表达的含义?
案例三不能轻松读完的文字
有些画面上有太多诠释性文字。设计师这样做,一方面可能是为了体现专业度,另一方面是“让画面内容更丰满”的思维惯性。生怕讲少了,用户不能理解到自己的深刻内涵。
但是除了同行和自己,还有多少普通用户会去阅读这些文字呢?
这些大篇幅的小文字,不仅没人阅读,而且这些文字对阅读和理解标题内容造成了干扰。实在是得不偿失。
不如把用户看不见的文字,全都砍掉。
图84
无关紧要的配角太多,就会分掉主角的受关注度。冗余信息不仅对强化主题无益,反倒对主体信息造成干扰。
把用户所有的注意力都引向主角好了。这样就确保了必须表达的信息,在最短时间内畅通无阻地传递给用户。
案例四两行字比三行字更好
我们来做一次极致优化的尝试。
这是一个相当清爽的画面。大标题下边是两行24字的注释小标题。看两秒钟,划屏进入下个画面。
图85
砍掉一行文字。同样用两秒钟时间来阅读。
图86
细细品味对比一下,2秒钟之内对两张图中文字信息的阅读和吸收的顺畅度。
你会惊奇地发现:快速读完两行24字,大脑明显有阅读压力;而面对一行12字时,大脑就更轻松、更舒服,也更容易理解和记忆。
究其原因,是因为手机时代人类大脑对单一信息量的处理深度明显降低了,更浅、更短、更容易处理的信息,会更受大脑喜欢。
让手机用户看两行字,不如只让ta看一行字时更轻松,能传递到更多、更明确、更清晰的信息。
这就是柱子十刀第六刀:一屏的文字字数,最好控制在两三行、二三十个字以内。
能用一行表达,就不用两行;如果用十个字就好,就绝不用二十个字。
少就是多。多就成了干扰。
柱子十刀第七刀 - 长文案整版只用文字
柱子十刀第七刀长文案整版只用文字
第六刀讲一屏文字要控制在3行30字以内。
马上有同学疑问,我家的产品特别高科技,30个字根本说不清楚,需要用长文案来解说。怎么办?
的确会有许多知识性内容,不得不用长文案来介绍。如何才能让手机用户愿意阅读更多的文字呢?
柱子十刀第七刀就砍向长文案。
直接来看案例。
案例一图文穿插式长文案
三个闪亮的大手表,穿插三大段文字。
图87
在手表的耀眼光晕下,你能沉下耐心来去阅读大篇的文字吗?而且是三篇长文案。标题会被一扫而过,然后就被瞬间忘记;正文文字则会被直接跳过,连读的机会都没有。
人类都有一双好色的眼睛。当页面里有图片又有文字是,我们90%的精力会被图片所吸引,只剩下零星耐心用余光去阅读文字。如果余光遭遇到的是大篇幅文字,阅读任务超过了用户耐烦极限,就会放弃阅读。
使用图文穿插式长文案时,图片干扰太大,文字本身受到的关注度太低了。用户根本就没读文字,即使文案写得惊天地泣鬼神也没用。
太浪费文采了。
案例二上下分离式长文案
简单的布局方式。上边是大段文字,下边是配图。
比案例一略好。起码图片没那么夺目,文字受到的关注多了一些。
图88
现在静心来回味一下。看到这张图的第一秒、第二秒时,你有几成的注意力在看图片,有几成的注意力在看文字?
即使是这样的简单图片,也会分去我们50%以上的注意力。也就是说,假如我们用来阅读这一屏信息所花的时间是2秒钟、注意力是100分的话,至少有一半的注意力会被图片吸引走,只剩下一小部分精力在阅读文字。
态度上,我们还是在敷衍文字!如果文字内容本身很重要的话,大部分用户还是接受不到文字所携带的信息。因为他们一半以上的注意力,还是在图片上。
案例三整版文字长文案
如果,把画面上所有的图片都砍掉、整版只剩下文字呢?
图89
是不是觉得心里突然一下就安静了下来?
没错。画面上没有任何图像,你的大脑马上切换到纯文字阅读模式。像看书一样。
从作品生动的角度上来讲,前两个案例图文并茂也许更生动;但是单纯从文字传递的信息而言,整版的纯文字能让人进入文字阅读状态。当用户100%的精力都在文字上,ta就能看到、理解和吸收更多文字信息。
这当然不够好。
让用户一口气读完这一大段文字,超出用户的阅读能力了。这样的文字布局传递给用户很大的压迫感,让他心生怯意(如果是有意为之,用来体现用户所不能理解的黑科技,就很好)。
案例四整版文字 + 切割成小段落
把文字切割成用户能一口气读完的小段落(最多四行一段),并用标题去统率。
图90
长文案给用户的压力马上小多了。三四行文字一小段,在普通用户的轻松阅读范围之内。长文案给用户造成的压迫感,消失了。正如把大面包切成了小面包,让顾客得以一口一块、轻松吃掉。用户终于得以在轻松的心情下认真阅读你究竟在说什么。
还可以更好。
案例五整版文字+ 小段落大标题 + 一半空白
如果某一段文字非常重要,我们可以大胆地把砍掉其他段落砍掉、直接留空。留空之的好处,就是引导用户的注意力聚焦到剩下的文字上来。
图91
下面是大片不需要处理的空白,注意力被腾空了出来,强行聚焦在剩下的文字上。
此时的文字阅读效果,是不是更好?
人眼的注意力优先级
人眼注意力的优先级是这样排序的。首先喜欢看视频;接着是图片;再次是标题;然后是文字;最后就是是空白。
所以,当版面上其他地方都是空白时,此时文字优先级最高、最能吸引注意力、最优有销售力。
所以,越重要的文案,用越多的空白。别用更多的文字去诠释他,那可能会造成干扰。
空白就是最好的绿叶,它能反衬出剩下的文字都是重要的红花。
总结:如何处理手机详情图上的长文案
首先,把所有图片都砍掉,整版只用文字。想让用户聚焦于文字,就尽量别让ta好色的眼睛看到任何图片。这样,用户进入到文本阅读模式。
其次,把长文案切割成小段落(最多四行一段),并且加上小标题,便于用户轻松阅读。
第三,如果某一段文案特别重要,就把除了这段文案以外的地方全部留空。用空白来衬托文字的重要。
柱子十刀第八刀 - 背景图上莫压字
柱子十刀第八刀背景图上莫压字
这一刀砍向背景图。
手机屏幕像素比较高,色彩绚丽,人眼比较容易疲劳。当疲劳到达人心的耐烦极限,下意识就会指挥手指一划,结束本屏的阅读。
所以对背景图的第一个要求,色彩不用太复杂,减少对眼睛的刺激,客观上延长了用户的耐心,也就是延长了对本屏信息的阅读时间。这一点比较容易理解。
第二个要求,背景图上不要压字,否则文字和图像传递的信息都会受到削弱。这一点不太容易理解,我们直接看案例吧。
案例一背景图上压长文案
一片竹林上,一段介绍竹纤维的文字。
图92
很显然,这一段文字很少人会阅读。因为阅读起来太辛苦了。本来,整屏的竹林会有较强的视觉冲击力,但是由于上面的文字干扰,视觉冲击力也就消失了。
这样的表达,手机用户“竹林上面有一段竹纤维的文字介绍”,具体的“竹纤维是什么”的信息,还没来得及传递,用户的手指已经划过去了。
案例二多个产品图上压多个卖点文字
有时候为了节约屏幕空间,设计师会在多个产品图压上多个卖点文字。PC上经常这样表达。
图93
但是进入手机后,这样的表达是失败的。试问一下,你刚刚看到的产品三个卖点是什么呢?
也许你才突然意识到,完全没看到刚才图上的文字,甚至对图片内容印象也不深刻。没错,面对并不是十分清晰的多段文字,我们的大脑被眼睛糊弄了,加快了“走马观花”的速度,在并没有接收清楚信息之前,就已经草草了事,准备进入下一屏。
当然,这里除了图上压字,也同时犯了一屏多主题的错误。
下面看一个一屏一主题的例子。
案例三在图片半透明区域上压字
图片上划出一块半透明的区域,插入文案。
图94
没错。画面唯美、有文艺范。
但是除了逼格之外,几乎接收不到文字的内容。我们又一次被眼睛糊弄了。文字所表述的信息被悄悄地忽略。对图片采取的半透明处理,并不能够保持图片的完整性。整个画面除了右边那几颗瓜子,其他信息也被悄悄忽略掉了。
案例四两种压字方式的对比
绝大多数人一眼看到了“WHY 孕妇要穿背带裤”,很少人会去辨认下面三个理由的具体阐述。
图95
纯色背景下的文字内容,对付起来很轻松,用户一秒之间就能读完;而压在图片上的文字,有比较大的阅读障碍,绝大部分用户会跳过不读。
案例五当文字和图片彻底分开
两秒钟之内,绝大多数人都能够轻松看完、看懂这张图的表述。而且图片内容表达得非常清晰。
图96
案例六标题并非需要独立底色
标题并不一定需要独立的底色。但是文字和图片需要明显地分开,这样用户不用费劲去辨别,在一眼看清楚图片的同时,用余光就能够把文字尽收眼底。
图97
案例七底色并非要用白色
底色并非要用白色。但是别太绚烂刺眼,那样会增加眼睛的负担。简单的背景下,文字和图片主体分开,用户阅读起来就很舒服。
图98
总结:背景图尽量简单并和文字完全分离
电脑上,在复杂的背景图上压上注释文字,是常用的表达方式。往往这样可以产生场景代入感,文字也可以起到点睛的作用。为什么进入手机之后就不灵了呢?原因有二:
一是手机屏幕很小。在图片上压大字,文字区域面积占比较大,常常会占到图片面积的1/3以上。文字和图片都是主角,信息相互干扰。而电脑屏幕比较大,文字区域占比基本上在1/5以下,用户大部分精力还是会被图片所吸引,主次分明。
二是手机用户的大脑是单任务CPU,不擅长同时处理多线程运算。图上加字,客观上迫使用户必须分出一部分运算能力来用于辨别,从而用于阅读理解的运算能力就下降了。
说到底,手机用户太懒惰了,只喜欢简单、易懂的内容形式。当遇到复杂、麻烦、需动脑的超负荷运算任务时,就会下意识选择敷衍了事乃至放弃、划屏逃跑。
所以,背景图尽量简单、并和文字完全分离。
柱子十刀第九刀 - 大胆使用近焦局部图
之所以要加上“大胆”两个字,是因为“近焦”、“局部图”太普通了,人人都自觉得会用。正是因为人人自觉会用,反倒容易掉以轻心、运用得不充分。
还是从案例说起。
案例一鼻尖下的棉花
这是一个体现服饰用料的常见表达。
图99
本来重点在于突出棉花,但是思维定势使我们追求场景完整。在PC屏上这样的表达也很和谐,但是进入手机屏,“近焦”、“局部图”就运用得不够充分。
直接把这张图放大。
图100
棉絮的丝丝缕缕扑面而来。
这就是大胆地使用近焦、局部图之后的效果。手机屏太擅长做这样的表达了。宛如把棉花放在我们鼻尖之下,亲临其境。可以想象,如果用更高清的微距图,会有更强烈的视觉冲击力。
这就是场景带入感。
相比之下,原来的表达太过于平淡,毫无感染力。使用局部是不是更应该大胆一些?
顺带提一下,这也可以作为第八刀图上压字的反面案例。即使放大到如此地步,阅读文字还有障碍。
案例二半碗粉刺激味蕾
半碗粉是局部。
但半碗粉比一碗粉的展示面积更大,因而能展现得更清晰、更充分,甚至能直接刺激用户的味蕾。
如果按照常规做法,就是把整只碗、筷子,甚至桌子都拉入画面框呢。这样美食本身多大的展示空间就太小了。视觉冲击力了。
图101
案例三局部体现细腻工艺
局部最能体现工艺细节。
通过一个局部的高清展示,产品的工艺水平和格调都传递过来。如果你能选择适当的摄影视角,用户能够马上理解你的模具水平、工匠精神、古典美。
就这样一点而言,局部图比一张看不太清楚的泛泛整体图强多了。
图102-105
总结:大胆使用近焦局部图
手机屏幕不擅长表达远景、广角、大场面,但非常擅长表达近焦、微距、高清特写、局部细节。不用担心用户因为看到的是局部图,而不能理解产品的整体,因为人类大脑早就演化出自动补图的功能。
兼顾场景的整体性,以追求画面的和谐,是长期以来养成的设计思维习惯。在手机屏上需要突破这个禁锢。
突破禁锢之后,结合你原本的设计功底,局部图不仅可以表达细节、情感、味觉、材质、工艺……甚至表达纵深辽阔空间。你会收获到意外的视觉冲击、带入感,还能缩短和用户之间心灵沟通距离。
大胆、更大胆些,去使用使近焦局部图。
这就是柱子十刀第九刀。
柱子十刀第十刀 - 加大主题之间的空白
柱子十刀最后一刀,砍向空白。
空白是手机详情长图的断句符,控制着表达的节奏。
空白控制不好的手机详情长图,就象一篇没用对标点符号、没有段落的文章。用户不容易找到到主题间的停顿,阅读费劲,有压迫感甚至让人喘不过气来。一感觉到不舒服,用户就会加快手指的划动速度,许多内容还没被看清就翻过去了。
案例一
标题和上下图关系一样暧昧,导致归属关系不清。
“经典圆领”,是属于上图、还是下图的标题呢?用户犹豫了两秒钟还是没弄清楚,决定放弃不读。
手指一划过去了。
图106
案例二
图文并茂,排版密不透风,用户阅读有压力。
喋喋不休,咄咄逼人。用户瞄了几眼,感觉难于理解你所表达的内容,却触达了耐心极限。
眉头一皱手指一划,离开了。
图107
案例三
多图多字,见缝插针,重山叠嶂。
用户屏住呼吸阅读了一阵,没能理出头绪,透不过气来。
手指一划逃跑了。
图108
空白缺失的原因剖析
由于手机屏比较小,设计手机详情图时往往觉得空间不够用。图片和文字都放不下,更没有多余都空间留出来给空白。
所以我们见到都大部分手机详情图,都是玲琅满目的填鸭式叙述,密不透风,空白缺失。
加大主题之间的空白试试看。
案例四
条理明晰,豁然开朗。压迫感消失了。
手指滑落到完整一屏处自然会停顿,2秒钟之内就轻松看完、读懂本屏内容。然后手指一划,进入下一屏。
图109
案例五
空白起到的不仅是间隔主题的作用。
更重要的是,透过空白把设计师的从容和自信传递了过来。用户的阅读心境变得平静、不焦躁,信息沟通更轻松高效。
图110
案例六
把空白拉大2倍。是不是有一种给长文分段、换行的感觉?
图111
案例七
并非一定要给屏幕塞满文字和图片,空白也是内容的一种。
恰恰是因为空白的存在,让图片和文字能得到更清晰的凸显传递。
图112
第十刀总结:加大主题间的空白
乐曲需要用休止符来换气;长文需要用标点符号来断句、用段落换行来体现文章层次。空白间隔就是详情长图的休止符、标点符号和分段换行。
加大手机详情长图主题间的空白。
一方面,空白让主题间隔明显,使用户能很轻松地分辨出每个主题,方便阅读;另一方面,空白能使作品节奏明朗、表达从容不迫。当用户处于舒服平静的心境,自然延长了对整套图片的阅读时间,大幅提高了信息沟通效率。
也许,这也是“空即是色”的一种理解吧。
柱子十刀复盘
十刀出完,收刀入鞘。
现在开始复盘。
每一刀,用一两句话,讲清楚。
手机屏是竖屏、竖方形。纵向构图就是根据手机屏形状来构图,合理利用屏幕空间,能使主体布满整个屏幕,展示面积变大3-4倍。
宽度边(左右边)是手机竖屏的短边。左右留白就是在手机屏的短边上留白,让主体宽度变窄了。砍掉左右留白,主体宽度恢复到整个屏宽大小,展示面积变大3-4倍。
一屏就是手机的信息单元。一屏一个主题,不仅能使主体变大,而且能让用户自然地接收到更加饱满的信息,更易理解和记忆。
左右分栏把手机屏短边(左右边)切割为两份,因此主体宽度只能占到屏幕宽度的一半,展示面积无法更大。转成上下分栏,充分利用了手机屏的长边(高度边),主体宽度能占满整个屏宽,展示面积变大3-4倍。
手机屏上的文字大小,不要以像素、字号为单位。以十分之一屏高为标题文字的大小,保证用户用余光就能轻松看到。
一屏文案字数的多少,取决于用户两、三眼能读完的字数,也就是二三十个字、两三行。文字再多的话,用户就看不完、放弃不读了。
人眼重色轻文。只有整屏都是文字没有图片,用户才能集中注意力于文字。三四行做一小段落,加小标题;文案越重要,就配予更多的空白。
背景太复杂,会加速人眼的疲劳;图上压字,会让用户既忽略文字、又忽略了图片。图片和文字彻底分开,阅读最舒服。
局部图、近焦图乃至微距图,是最适合手机屏表达的手法,可以用来实现视觉冲击力、带入感。产品的一个细节清晰展现在用户鼻尖下,拉近的不仅是镜头,还有心理距离。
空白就是手机详情图的休止符、标点、段落。加大空白,陈述有节奏感;表达自信,从容不迫,沟通效果好。
希望实操阶段,大家能坚持住!加油!
全部评论()