品牌
Tanrei 这个名称、它的两个标志及其用法,以及决定系统外观的性格。
Tanrei(端麗)的意思是端正而清朗。这个名字本身就是对系统的要求:在产品所面向的每一个平台上,界面都安静、精确、易读。Tanrei 是一个独立的项目。
Tanrei 有两个标志,一次只使用其中一个。
符号与文字标
符号,浅色
符号,深色
文字标,浅色
文字标,深色
- 符号是 Shippori Mincho 的 T,四角经过柔化。它只用在要求方形或圆形的地方:favicon、应用图标、素材上的水印(例如设计文件角落的装饰),或者用于低调的宣传和装饰。
- 文字标是符号的 T 后接用 Outfit SemiBold 排出的 “anrei”,绘制为一个整体。凡是会读出名称的地方,它就是 Tanrei 的标志:本站的页眉(任何宽度下)、封面、页面标题、分享链接的图片。
一次只使用一个标志,从不把符号和文字标组合成组合标志:这是 Tanrei 针对自己标志的规则。应用栏本身则允许产品以其标志所需的任何方式显示自己的标志,包括组合标志。
符号位于其方形画框中心稍下方的位置。这是一种视觉校正:T 的重量在上方,放低一点看起来才居中。
两个标志都只用一种颜色 sys.color.on-surface,绘制在其所在的表面上。由于颜色是令牌而不是图形的一部分,标志会跟随浅色和深色配色方案以及每一级对比度。每处使用都采用 on-surface:本站页眉用 comp.app-bar.brand.color 为文字标上色,它就是 on-surface。
留白
四周各留墨迹高度的四分之一
在符号四周各留出其高度的四分之一。从墨迹量起,而不是从画框量起。在文字标周围留出其 x 字高的一半。这片空间里不放任何其他东西:没有文字,没有其他标志,也没有屏幕的边缘。
最小尺寸
符号:24 px 的画框
文字标:24 px 高的大写字母
不要把符号画得小于 24 px 的画框,也不要让文字标的大写字母低于 24 px。
唯一的例外是 favicon,因为浏览器以 16 px 绘制它。它是一个 SVG。旁边的 ICO 和 PNG 文件是同一图像按浏览器所需尺寸绘制的结果,而不是第二种设计。在 16 px 下它的边缘会变柔,这是可以接受的。
避免
涂成别的颜色
改成轮廓线
拉伸
把符号和文字标并排
在符号旁边排出名称
- 一次只使用一个标志:会读出名称的地方用文字标,只有在要求方形或圆形的地方才用符号。
- 用 on-surface 绘制标志,放在其所在配色方案的表面上。
- 在平台需要不透明图标的地方,例如主屏幕或位图 favicon,把符号放在浅色配色方案的表面上。那个方块属于平台,而不属于标志。
- 保持符号在画框中的位置,不要把它移到画框中心。
- 不要改变标志的颜色,也不要添加渐变、轮廓线、阴影或背景形状。
- 不要拉伸、旋转或裁切标志。
- 不要把符号和文字标组合成组合标志,也不要在符号旁边用文字排出名称。
- 不要用其他字体重新排出文字标。使用它的图形。
- 不要把「端麗」二字当作标志使用。它们是设计文件封面的装饰,不属于标识的一部分。
品牌也是系统的外观。
表面接近单色,边框是一像素的细线,因此屏幕上色彩最丰富的就是产品的内容。主要操作是白底黑字,或黑底白字。蓝色的强调色只有一个,专门留给必须一眼就能找到的那一样东西:键盘焦点环。链接靠下划线来辨认,选中的项靠主色来辨认,所以屏幕上再没有别的东西是蓝色的。
层次来自对齐、间距和细线,而不是厚重的阴影或染了色的面板。层级是一圈圆环加上极柔和的阴影。
默认是克制的。更强的强调级差、更大更平滑的圆角、更有弹性的动效,这些富于表现力的选择都是叠加在同一结构之上的额外令牌,而不是它的分叉。
Tanrei 的代码和文档采用 Apache License 2.0 授权。该许可证第 6 条不授予使用许可方名称、商标或产品名称的许可,但描述作品来源和复制 NOTICE 文件所需的除外。
- 你可以在文字中说明你的作品使用了 Tanrei,或是用 Tanrei 构建的。
- 符号和文字标属于 Tanrei Authors,不向他人授权。不要在你的产品、你的包的名称或图标中使用它们,也不要以任何暗示你的作品就是 Tanrei 或获得 Tanrei 认可的方式使用它们。