你并不了解手机屏
我敢说，其实你并不了解这块每天有16小时在你身边的屏幕。
绝大多数人都对身边每天都在发生的事情视而不见。如果你不用心去观察的话。
所有人都知道，跟PC屏相比手机屏是一块小屏幕，但是很少人会留意到手机屏是一块高清屏。也就是说，
手机屏的像素密度（PPI）比PC屏要大的多。
所谓的像素密度（PPI），指的是1英寸屏幕之中含多少个像素点。当然每英寸里面像素点越多，像素密度越大，
图像会更清晰。以苹果公司的几款经典产品为例，说明PC和智能手机之间的像素密度差别。
21寸iMac电脑屏幕的像素密度（PPI），只有iphone6/7屏幕的1/3，或者iphone6的1/4。
1080个像素点，在iMac电脑屏幕占用了10.5英寸（约27厘米），而iPhone6、7 Plus手机屏只用2.7英寸（不到7厘米）。
电脑上看觉得刚刚好时，手机上看就一定小了
换个角度来理解，同样像素的图片，在iPhone6 Plus手机屏幕上的绝对尺寸，就只有iMac屏幕上的1/3到1/4大小了。
比如说40像素X40像素的方块，在iMac屏幕上显示出来的绝对尺寸是10×10mm，可能觉得不小了。未经过任何缩放的情况下，
在iPhone6/7手机屏幕上显示出来的绝对尺寸是3.2×3.2mm，在iPhone6/7 Plus手机上是2.6×2.6mm。
边长小了3-4倍，面积整整缩小了一个数量级。
假如我们在PC屏幕上选择了40像素高的文字做标题，觉得比较雅致漂亮时，这样的文字大小进入手机屏，
看起来就会比较吃力。图片上传到手机屏会变小，大家对此早有预期的；但是一下被缩小了十多倍，
这个比例就超出普通人的预期范围了。
前面提到过，“明明要做大图大字 ，但莫名其妙做成了小图小字“，设计师多次调大最后的作品还是小了。
很多时候就是因为对“被缩小了10多倍”的预判不足。在电脑上觉得刚刚好的东西，到了手机屏上就一定是小了。
大脑里对手机屏上像素大小的印象，基本上都是错误的
由于习惯，我们大脑里对像素大小的印象，大多是PC屏幕上所习惯的像素大小；不是手机屏幕看到的像素大小。
我们现在知道，两者之间在长度上有数倍的差别，面积上的差别，则会达到十倍以上。
当我们提起18像素、30像素、100像素，在PC屏上的大致有多大，熟练的从业者都能有感觉，八九不离十。
但在手机屏上18像素、30像素、100像素会得到多大的绝对尺寸？大家下意识的感觉，
基本上都是错误的——知道会变小、但是没想到会变得这么小。
平时微博微信配图，也经常可看到这样的情况。比如：
这就是不同像素密度引发的沟通障碍。不重视他、尊重他、正视他，我们根据惯性思维和美感做出的设计，会受到很大的干扰。
既然如此，在后续竖屏思维中讨论手机端作品时，暂且把像素先忘掉吧。
我们都是斗鸡眼
【手机屏的第2个特点】
屏宽比人类双目距离小：我们都是斗鸡眼
手机屏第二个不为人所注意的特点，源自屏幕宽度和人类双目距离的对比。有没有注意过，
手机的屏幕宽度比我们两个眼睛之间的距离小？
人类两眼之间的距离，约为8厘米。
PC屏幕宽度往往在30厘米以上。比如iMac（21.5寸）的屏幕宽度约48cm，即使是14寸笔记本屏幕宽度也有32cm。
而许多设计师的电脑是27寸甚至更大，屏幕宽度在60cm以上。
由于PC屏幕的宽度比人类双目距离大，在PC屏面前人眼的视线有3个特点：
1）看PC屏幕时双目视线外放。
2）模糊聚焦就可捕捉到主体（图像或文字），不需精准定位。
3）模糊聚焦的好处，是视线进行大范围的移动时很轻松随意。
人类眼帘，天生是一个视线外放型的大屏幕。而在在电脑发明之前，我们读书、看报、看电影、户外广告、
宣传栏，或者看大多数的平面媒体时，视线也是外放的。突破了技术瓶颈之后的PC屏，也延续了这个特点。
手机屏幕不一样。
现在主流的智能手机屏，宽度都小于8厘米。比如iPhone6/7 Plus（5.5寸）屏宽约7厘米、iPhone6/7（4.7寸）屏宽约6厘米。
屏幕宽度小于人类双目距离，于是在手机屏面前，人眼视线的3个特点是：
1） 看手机屏幕时双目视线内收。
2） 在手机屏幕上追随主体（某图像或文字），必须保持精准聚焦。
3）精准聚焦的弊端，是视线在屏幕上的移动幅度较小，且很容易疲劳。
一个形象的比喻，在手机屏面前我们都成了斗鸡眼。
——必须“盯”着屏幕看内容；移动视线时也是“盯着移动”；定焦阅读。
因此，手机用户眼睛特别容易疲劳。相应地，耐心就会大大减少了。在耐心耗尽的那一霎那，本能地手指一滑，
于是眼睛和心理得到哪怕0.01秒的休息。这就是合理的生理学诠释。
那么，当你在制作图文并茂、丰富多彩的内容时，有考虑过在手机屏的另一端斗鸡眼们的感受吗？
如果做些调整让斗鸡眼们做定焦阅读时更舒服一点，沟通效果是否会更好？
一屏就是最小的信息单元
PC屏幕上，信息单元是区（栏、块）
前文说到，在PC大屏幕前，人的视线很方便在屏幕上进行大范围的移动，由A区到B区。事实上，
大屏幕的信息是由一个个“区”组建成的。比如，我们熟悉的淘宝购物页面，是由以下“区”组成。
顶部是店铺招牌区；
左边是产品主图区；
中间分为3个区，分别是标题区、颜色区、购买按键区；
右边是关联销售区；
……
我们在电脑前浏览淘宝页面时，逐区域浏览内容。这种阅读方式，是自然而然的事情，并不需要谁来刻意引导。
因此，PC屏幕的信息单元是：区，或者叫栏、块。
【手机屏的第3个特点】
一屏就是手机屏上最小的信息单元
当同样的页面进入到手机屏，六个区合为一体了。整个屏幕只传递过来一个信息：一个手机皮套的商品页面。
页面中的每个区域分别在表达什么内容？绝大部分人不情愿再去仔细分辨、深入了解每个区域的内容了。
PC屏幕上 自然的“逐区域去阅读内容”的习惯，在手机屏幕上并不存在。手机用户地把整一屏信息归纳
为一个信息单元，快速接收并结束了这一屏内容吸收。然后手指一划，开始下一屏信息的获取。
几乎是下意识地，手机用户就完成了这个过程。
所以，手机屏上信息的基本单元是“屏”，而不再是“区”、不是“栏”、不是“块”。
一屏就是最小的信息单元，无需再分了。
一屏一个主题 VS 一屏多个主题
一屏就是一个信息单元。手机上一屏最好只有一个焦点、一个主题、一个要理解的内容点。
此时这个主题的内容最容易被用户接受得最全面、具体。
如果一屏之中有多个焦点、多个主题、多个内容点，大脑也会把所有信息简单合并为一个整体信息来处理。
除非遇到极其感兴趣、或者不得不处理的内容，否则绝大多数人不会对其中的某一个区域再做深入阅读了。
比如手机屏上有只猫咪。
这就是“一屏只有一个主题”的典型表达。画面很清晰地传递过来一个信息：“一只猫咪，
两只绿色的大眼睛，长长的胡须”。停留数秒后，手机用户手指一划，进入下一屏。
手机屏幕上有一只猫、一只狗，一只兔子和一只老虎。
手机用户的大脑快速地把整屏内容合并为一个信息单元，“这有4只动物：猫、狗、兔子和老虎”。
刚才很清晰的“一只猫咪，两只绿色的大眼睛，长长的胡须”的信息，这次并未出现在你脑里。
虽然还是同样的一张猫咪图片！
而且，在看到这行字之前，你几乎不会注意到：狗有什么形状的耳朵？兔子是蹲在草地还是沙地上？
老虎的背后有什么风景？……
所有的定语和修饰词都消失殆尽，你的大脑满足于“猫、狗、兔子和老虎4只动物”，
已完成本屏信息的吸收，准备手指一划进入下一屏了。
是不是很神奇？
一张扑克牌的启示
现在回想一下手机用户使用场景：
ta在搭地铁、在走路、在吃饭、在看电视、在闲聊……时，突然打开手机，瞄一眼、划，瞄一眼、划……然后关上了手机屏幕。
那么，什么样的内容形式能让用户瞄一眼就马上读懂？不需特别聚焦、不需动脑、好不费劲，
就完全明白整屏信息的表达？
答案是：一张扑克牌。
看到这个手机屏的图案，所有人都能不假思索地读出，这是一张梅花K。
即使用户在“划、喵一眼、然后关掉手机屏幕”的极限阅读条件下，也无碍于对“这是一张梅花K”的阅读和理解。
一张扑克牌，可以轻易做到“瞄一眼就能马上读懂”，是用户在手机屏上读取信息时，最舒服、最自然、最喜欢的状态了。
而这张扑克牌，再次印证了“一屏就是最小的信息单元”。这一屏传递的信息就是“梅花K”三个字。
99%的人对这个牌面信息都截取到此为止。几乎没有人会去关注牌面上国王拿的宝剑、戴的皇冠、穿的衣服。
不信，大家试想一下，“梅花K”和“红桃K”上的国王，宝剑、皇冠、衣服有什么不同？是不是有什么不同的。
对每个人都熟悉的扑克牌尚且如此，就不说其他商业信息了。
有没有想过，你的手机端详情，应该做成“一张扑克牌”的样子？
竖屏！竖屏！竖屏
【手机屏的第4个特点】
竖屏！竖屏！竖屏！
人类的双眼是横着排列的，因而人类天生拥有的是横方形眼帘，即视野的左右宽度，比上下高度要大得多。
所以人类天生看到的是横方形的世界。
人造的各种演出舞台、格斗场、足球场、篮球场……，似乎自古以来就是横的长方形，以便观众观看得最舒服。
工业社会以来，人类发明的绝大部分屏幕（电影屏幕、电视机屏幕、电脑屏幕……），早期由于技术原因还类似于正方形，
现在突破技术瓶颈之后全部是扁的横方形了。电影屏幕还在不断地加宽，越是商业大片的屏幕越宽。
拿起照相机（包括智能手机相机）拍照，人们下意识横屏取景；偶尔遇到特别高的事物，才会把镜头竖起来。
层出不穷的新产品发布会后面的LED屏，是横的长方形。连最新流行的虚拟现实3D眼镜，戴上眼镜后看到的视野也是横的长方形。
这并非偶然。横方形的舞台或者屏幕形状，和人类的眼帘形状相类似，天生符合人眼的视觉习惯，看着更舒服。
直到人类进入智能手机时代。
手机屏——人类第一次大规模面对竖屏获取信息
智能手机屏幕是竖的长方形。这个屏幕的左右宽度小于上下高度，和人类眼帘横的长方形不再类似。
起初市场推动着智能手机往越来越大屏幕的方向狂奔，更大的屏幕代表更好的视觉。当大尺寸屏幕的技术和成本
不是瓶颈之后，对更大屏幕的追求终于让步于更舒服的“单手持机”，目的是为了把另外一只手解放出来。
对于“单手持机”而言，拿着横屏幕的手机更容易疲劳。由于面对竖屏阅读会产生“眼帘形状不类似”的不舒适，
所以智能手机保留了“自动横屏”功能。即当手机横过来时，屏幕上的内容会自动按照横屏的形状来重新排列。
但除了看电影和打游戏，已经很少有人把手机屏横过来了。大多数人选择默认关掉这个功能。
市场最后证明：虽然竖屏阅读会产生“眼帘形状不类似”的不舒适，但全世界人民更加无法接受
“单手拿着横屏幕手机”所带来的不爽。
在更懒惰的手面前，眼睛妥协了。
数年间，智能手机完成了全民普及。大多数人每天睁开眼的第一件事，是看智能手机；每天晚上睡觉前的最后一分钟，
也是看智能手机。吃饭、搭车、走路、上厕所……，甚至开车，都在看智能手机。
拥有横方形眼帘的人眼，很快就习惯了竖屏。越来越多的信息在通过智能手机的竖屏传递过来。无时、无处不在。
可以说，人类快速地被竖屏驯化了。
PC屏横屏到手机屏，大多数人只留意屏幕大小的简单变化，把手机屏内容当做PC端内容的缩小版。
99%的设计师、手机端内容的生产者，每天还在面对着横方形PC屏，设计最终在竖方形手机屏幕展示的作品。
极少人对此产生足够的重视和警觉。这是人类第一次大规模通过竖屏来获取信息、看世界，是信息传播媒介的一次大变革。
竖屏！竖屏！竖屏！！
不懂竖屏，你的舞台被切掉了2/3
不懂竖屏，猛虎都会变成病猫
竖屏突然驾道，让所有人一下子措手不及。绝大多数人人还按照原来横屏的思维和方法在创意、
构图、摄影、设计。但是如果不深入琢磨竖屏的规律，你就自己把舞台切掉了三分之二。
在PC横屏上，我们在PC上设计出的图片大都是横方形的。这样的图片会占满整个PC屏幕，最具视觉冲击力，
而且也符合“眼帘形状类似”的天生舒适。不仅是PC，其实在包括舞台、广告牌、大屏幕PPT等所有的类横屏上，
大家都非常习惯性地横屏构图。
但同样一张横方形图片进入了竖方形手机屏，竟然只能占手机屏幕的三分之一！由于只用了三分之一的屏幕面积
来展示同一个主体，视觉冲击力、场景带入感、情感诉求等等都大打折扣。
PC屏上的猛虎，进入手机屏后变得太小了。小图片丧失了视觉冲击力，传递给用户的整体信息量太少，
从而导致了用户对老虎丧失了畏惧之心。
不懂竖屏，猛虎都会变成病猫。更别提那些对用户来无关痛痒的销售性信息了。
竖方形图：竖屏上最舒服的构图形式
那么在手机屏幕上应该如何去构图，才能够保持老虎的原貌呢？
应该用竖方形的图片进入竖屏，这样图片才能把整个屏幕占满。这时老虎的威慑力自然地通过屏幕传递了过来。
揭秘屏幕被切掉了2/3的魔术：不同基准的等比缩放
PC屏上的16:9横方形满屏图片，在9:16手机屏上变成了一个更小的16:9横方形满屏图片，
这中间做了以手机屏屏宽为基准的等比缩放。用小学算术推导一下就会知道：PC满屏横方形图片进入了
竖方形手机屏之后，只占了手机屏幕的0.316（约三分之一）大小！
在9:16竖方形的手机屏上，如果想重新让图片占满整个手机屏幕获得最大化的视觉冲击效果，必须用同样的9:16竖方形图片。
当然，在9:16竖方形手机屏上得以满屏的图片，进入16:9电脑横屏时，做了以PC屏屏高为基准进行等比缩放。
同样也只能占1/3的PC屏幕面积。
这就是不同基准的等比缩放魔术。在不同形状的屏幕，以不同的基准做等比缩放，会得出天壤之别的结果。
屏幕形状改变了，构图形状也应该随之改变。否则就会浪费屏幕空间、降低图片视觉冲击力、减少内容的传递信息量。
更直接地说，做手机端设计不尊重竖屏，就会浪费转化率、浪费流量、浪费钱。
看懂上面三张图，启动了竖屏思维的开关
当前在手机屏上到处都是本来适配于PC屏设计的横方形图片。
一方面因为设计师在PC横屏前工作，不由自主地受到了PC屏幕形状的影响；更深层的原因，
是长期的传统平面设计思维根深蒂固，设计师潜意识里的绝大多数美术作品，都是横方形构图。
你的手机端设计已经采用竖方形图片了吗？
用心看懂上面四张图，从此你在手机屏上比普通设计师多出了两倍展示舞台。
到此，也恭喜你启动了竖屏思维的开关。
粤公网安备 44030902001796号 粤ICP备19041343号-3
签到成功
大胡子蜀黍
全部评论()