多因子组件文档示例-日期选择器

定义

用于选择或者输入日期

结构

日期选择器由输入框与日期选择面板组成，输入框的推算规则可见《多因子影响下的输入框》

本次我们主要解释日期选择面板的计算

日期选择面板组成解释

日期选择面板是一个复杂的「容器组件」，因此遵从容器组件的推算规则（详见《多因子影响下的容器组件》）

整体尺寸由内容区域及内容区域与容器的间距组成，内容区域相对于容器居中

面板宽度=内容宽度+2*左右 padding，面板高度=内容高度+2*上下 padding

为方便下文解释，我们设日期选择面板的宽、高分别为 W、H

容器边距

容器边距即容器组件内部的原子组件或元素至容器边界的距离，我们规定以容器内部使用数量最多的文字作为容器组件的主文本，在设定了基准后，依据主文本字号及原子组件推算规则即可得出内容区域至容器的间距

为保持所有组件的统一，我们暂定日期选择面板的基准与按钮一致，即基准文字为 12px，左右边距为 12，上下边距为 8（详见《多因子影响下的按钮》），设内容区域与容器的左右边距为 Q(x)，上下边距为 S(x)

则日期选择面板的容器边距计算公式如下：

边距推算举例

设内容区域的宽、高，设为 W(C)、H(C)

则日期选择面板的尺寸有如下计算：

内容区域

内容区域包含了两类原子——「按钮」与「文本」

内容区域的尺寸主要由「按钮」与「文本」自身的大小以及原子间距决定

设原子纵向的间距为 a，横向的间距为 b

设「按钮」原子的宽、高分别为 W(B)、H(B)，文本的宽高分别为 W(T)、W(T)

则日期选择面板内容区域的计算方式如下：

由《多因子影响下的按钮》可知，设定了基准按钮后，原子组件按钮的宽、高可由以下公式计算

由《多因子影响下的文字》可知，文本的宽、高可由以下公式计算

我们不能确保一个容器组件内所有原子（文本、按钮）都使用的是相同的字号，因此对于内容区域的计算我们尽量分别依赖各自的文字字号去计算，最后进行加和

原子间距

原子的间距主要依据元素的亲疏关系和信息密度来匹配使用，距离均为 4 的倍数，区间为 0 ～ 72

一般“较大”的原子组件匹配使用较大的间距，“较小”的原子组件则匹配使用较小的间距，依据具体场景选择

为保持设计的韵律与低噪，我们尽量将间距控制在 4 种以内(包括 0)，呈连续的等差数列为佳，

即我们一般使用：

a0，a0+d，a0+2d，a0+3d…

b0，b0+d，b0+2d，b0+3d…

作为组件内部的间距

a0，b0 分别为纵向、横向的最小间距，d 为间距的差值

在亲密性一致的前提下，原子间距与原子组件和内部元素的尺寸大小呈正相关，原子组件与文字的关联已在《多因子影响下的按钮》一文中详细阐释，不再赘述，因此我们规定，主文本每扩大 2 个字号，原子间距增加 d/2，我们将与基准文字对应的间距称之为「基准间距」，注意：基准间距不是一个单一的值，而是一组数列

设基准间距数列为 S，S=a0+(n-1)d (n 为间距的种数，1≤ n ≤ 4)

设容器组件主文本字号为 T，其对应的原子间距数列 S(T) 有如下公式：

原子间距推算举例

设定基准间距：

令

a0=0 (a0 为基准间距数列的最小值）

d=4 （d 为间距的差值）

n=3 (限定 3 种间距)

可得出：

当 T=12 时，对应的间距数列为【0，4，8，12】

当 T=14 时，对应的间距数列为【2，6，10，14】

当 T=16 时，对应的间距数列为【4，8，12，16】

…

举例

以视距及屏幕精度变化造成主文字由 12px 变为 14px 为例推演日期选择面板的变化