竖屏思维:大幅度提升手机端转化率的逻辑和方法
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

第1章 重新认识手机屏——移动互联网的主战场

大像素小屏幕:不同像素密度引发了沟通障碍

所有人都知道,跟PC屏相比,手机屏是一块小屏幕。但是很少人会留意到高清的手机屏是一块大像素密度屏。也就是说,手机屏的像素密度(PPI)比PC屏要大得多。

所谓的像素密度(PPI),指的是1英寸屏幕之中含多少个像素点。每英寸里面像素点越多,像素密度越大,图像会更清晰。

智能手机的像素密度是PC的3~4倍

以苹果公司的几款经典产品为例,说明PC和智能手机之间的像素密度差别。

苹果公司不同产品的屏幕尺寸、分辨率和像素密度对比

可以看到,在iMac电脑屏幕上,1英寸长度能容纳103个像素点;而iPhone 6/6s/7/8手机屏上像素密度是326, iPhone 6 Plus/6s Plus/7 Plus/8 Plus的像素密度是401, iPhone X的像素密度则高达458。

智能手机的像素密度是PC的3~4倍,所以在手机屏上看东西会觉得更加清晰。这一点和我们的常识相一致,比较容易理解。

相同像素在手机屏上的展示长度只有PC的1/4~1/3

我们换个角度,对比一下100个像素在PC屏和手机上的绝对长度。

100像素直线,在苹果公司不同产品屏幕上的绝对长度

100个像素点,在iMac电脑屏幕上长2.47cm;在iPhone 6/6s/7/8手机屏上是0.77cm,是iMac上长度的0.312倍(约1/3);在iPhone 6 Plus/6s Plus/7 Plus/8 Plus上是0.63cm,只有iMac上长度的0.255倍(约1/4);而在iPhone X上是0.55cm,只有iMac上长度的0.225倍(小于1/4)。

也就是说,同样数量像素点在手机屏上的展示长度大约只有PC的1/4~1/3。

相同像素在手机屏上的展示面积比PC缩小了一个数量级

我们再深入一点。对比一下100×100像素的正方块,在PC屏和手机屏上的展示面积。

100×100像素方块,在苹果公司不同产品屏幕上的绝对面积对比

100像素见方的方块,在iMac电脑屏幕上占面积6.10cm2;而在iPhone 6/6s/7/8手机屏上是0.59cm2,是iMac上面积的0.097倍(约1/10);而在iPhone 6 Plus/6s Plus/7 Plus/8 Plus上是0.40cm2,只有iMac上面积的0.066倍(约1/15);在iPhone X上更小,只有0.31cm2,只有iMac上面积的0.050倍(约1/20)。

也就是说,同样100×100像素的正方块,在手机屏上占据的面积要比PC屏上小一个数量级!这样,问题就来了。

在电脑上看觉得刚刚好时,手机上看就一定小了

我们在PC屏幕上调整图片大小或选择标题字号,有没有想过:假如不经过任何算法调整,这幅图片或者文字进入手机屏时,大小会下降一个数量级?

图片从PC上传到手机屏会变小,大家对此早有预期。但是如果说会被缩小一个数量级,这个比例还是超过了绝大多数人的想象。

在PC屏上看觉得大小刚好,在手机屏上看一定小了

我们大脑里对像素大小的印象,大多是PC屏幕上所习惯的显示大小,而不是手机屏幕看到的像素大小。比如,当提起18像素、30像素、100像素时,熟练从业者们的脑海里自然浮现出来的是这些像素在PC屏上的大致大小。

但是,18像素、30像素、100像素在手机屏上占据的绝对尺寸会是多少?我们自认为胸有成竹,但是大脑里对手机屏上像素大小的印象,基本上都是错误的——知道会变小,但是没想到会变得这么小——在长度上有数倍的差别,面积上的差别则达到10~20倍。

相同像素的元素从PC屏进入手机屏,展示面积被缩小了10多倍,用户看起来当然吃力了。但是,在面对着PC屏做设计时,谁会任性地把一个元素调大10倍?

所以,尽管经过设计师多次调大,最后手机端上的图片和文字还是显小了。这是因为对“被缩小了10~20倍”严重预判不足而出现设计偏差。

这就是不同像素密度引发的沟通障碍。不重视、不正视、不尊重它,我们依照PC惯性思维和设计美感做出的图片,到了手机上就会看不见、看不清,或者是勉强看得见但是看着非常不舒服。

既然如此,从现在开始,我们暂且先把像素忘掉吧。