第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惯性思维和设计美感做出的图片,到了手机上就会看不见、看不清,或者是勉强看得见但是看着非常不舒服。
既然如此,从现在开始,我们暂且先把像素忘掉吧。