YTUI 2

一致性 ​

YTUI 的一致性，体现在以下方面：

  • 始终贯彻设计标准，例如返回键统一放在左上角。
  • 严格遵循规律关系，例如圆角不同尺寸之间是有严谨的规律关系的。

圆角尺寸 ​

  • 最大圆角 24px（1.5rem），按 4px（0.25rem） 的幅度向下递减。

字体大小 ​

统一用 rem 为 font-size 的单位 ​

由于 YTUI 所有元素的宽/高/边距/等尺寸都是以 rem 为单位的，若同时把字体也设为以 rem 为单位，则有利于我们在任何情况下都可预测字体所在的父元素实际渲染尺寸。对精确布局有利。

以 rem 为单位的字体要注意以下问题：

1. 注意 1rem 与 root font-size (通常是 html 元素) 有直接关系

例如，在 PC 端浏览器：

  • 若 html { font-size: 16px; } 则 1rem 等效于 16px。
  • 若 html { font-size: 14px; } 则 1rem 等效于 14px。

2. 注意 12px 临界值

注意字体的 px 和 rem 换算规则需要特殊处理，不能简单乘除所得。原因如下：

PC 端浏览器最小渲染字体是 12px。若换算后的字体 px 值小于该值，也会直接按 12px 渲染。

rem 与 px 的比例关系可能会变化。此处以最广泛的 16px 对应 1rem 为例：当我们要设 14px 和 12px 的字体，此时按比例关系对应写成 0.75rem 和 0.875rem。但若浏览器改为了按 14px 为 1rem 渲染时，我们打开 DevTools 看到的两个字体的实际渲染值却是 12.25px 和 12px。并不符合预期，同时也会造成 UI 上的不协调。

文字语序 ​

  • 标题内的文字，统一使用【名词】或【名称 + 动词】，最大限度地与按钮等可操作元素做区分。
  • 按钮内的文字，使用【动词】或【动词 + 名词】或【指代动作的图标 + 名词】，没有例外。

返回和关闭 ​

  • 【返回】键统一在左上角，【关闭】键统一在右上角。
  • 弹出层只有【关闭】，没有【返回】。
  • 页面顶栏只有【返回】，没有【关闭】。
  • 页面顶栏统一有【<返回】，若页面有弹出层，则点击页面顶栏的【<返回】可逐级关闭本页的弹出层。

边框颜色 ​

  • 全局只使用一种边框颜色。