页面内容最大宽度推导

Ghostzhang 发表于

在制定布局规范的过程中遇到了一个问题,内容区域的最小最大宽要定多少呢?一直以来好像都没有认真想过这个问题,于是翻了下几个主流的设计规范,都没有看到相关的定义,只好用开发者工作大概看了看。

2022-09-30_01

因为我用的是『带鱼屏』,所以又发现一个有意思的现象,屏幕变大了,网站的内容却并没有随之变大

2022-09-30_02

是因为产品的设计者都没有发现这个现象,留着这么多的空间浪费着不用吗?

2022-09-30_03

2022-09-30_04

看这占比,不太可能不知道吧,那么问题来了?

2022-09-30_05

在华为的《人因研究》有这么一张图

2022-09-30_06

于是好像找到了一个突破口了,知道距离和角度,不就能算出屏幕区域大小了吗?

2022-09-30_07

2022-09-30_08

呃~厘米跟像素有什么关系……在这里卡了一段时间……转机在另一个事情上,是关于字体大小的

2022-09-30_09

为什么以前的字体用12px可以,现在字体得用14px了呢?

2022-09-30_10

通过字体大小对照表,找到了像素与英寸的对应关系,这里涉及到另外两个概念,DPI和PPI。

2022-09-30_11

因为DPI是用于打印的,这里我们先不管。在屏幕上,像素其实也分两种类型

2022-09-30_12

2022-09-30_13

这也就导致了虽然大分辨率下使用了12px的逻辑像素在物理尺寸上还是要比小分辨率下的12px显得更小一些。

2022-09-30_14

通过屏幕的计算,就可以得到PPI,然后就再通过厘米和英寸的关系,就得到了最终的像素啦

2022-09-30_15

2022-09-30_16

接下来就是体力活了,一通计算后得到这些,为方便记忆,取得中间值 650px,需要注意的是,这里计算的是单眼的视角。

2022-09-30_17

简单验证了下,看起来是可行的。

2022-09-30_18

2022-09-30_19

2022-09-30_20

但是

2022-09-30_21

参考前面大多数站点的宽度值,取双眼舒适的视角,即2倍650的1300像素。

2022-09-30_22

至此,完成了页面内容区域最大宽度的推导。

其他的一些问题,如 限制了宽度,那应如何对齐? 及 空间是否被浪费?等问题,请见附件PPT。本地下载PPT

《页面重构中的设计模式》 from Ghost Zhang

讨论