3.1在页面上切勿使用超过三个字体。
为什么?单个页面上使用的一系列字体确实表明了一个定义较差的品牌,并且看起来懒惰和混乱。最多可以一次使用三个不同字体(徽标,标题,身体内容)。
3.3保持一致的类型层次结构。您应该只使用少量字体尺寸和一个或两个字体权重来开发类型的层次结构。想想HTML标题标签H1,H2,H3等。使用亮度,大小和重量的变化来表示文本的重要性。有关类型层次结构的绝妙示例,请查看Apple的人类界面指南。
[3.4]使您的身体文本具有正常的重量且间隔良好。文本应始终是清晰的,因此为大型标头或字体重量的案例保留光线或粗体字体,对文本的可读性几乎没有影响。此外,始终将身体文本的线间距保持在1.15至1.5(取决于尺寸),以最大程度地提高可读性。例如,本文大约具有1.5 REM线间距。证明您的身体段落也不会受到伤害。
3.1身体背景应始终是灰色的阴影
为什么?彩色背景,甚至是非常深色的灰色,都可以轻松地在眼睛上产生压力。对于重要的内容,例如网页或应用程序的文本主体,至关重要的用户可以轻松阅读和intepret。
3.3在大多数情况下,在任何图像,彩色或梯度背景上使用白色文本。如果需要,将非常轻的滴影(<= 10%的不透明度)应用于文本。
为什么?白色朝下通常更具吸引力,更容易为变体创建变体。决定深色在彩色背景上使用通常具有挑战性。但是,请确保您选择的任何颜色组合也可以访问。
3.4切勿使用绝对黑人。
为什么?对于大多数网页而言,纯净,不透明的黑色(#000)通常太苛刻了。甚至GitHub的身体字体颜色也是#24292E,而不是#000。如有疑问,您可以使用数值网络安全灰度十六进制代码(#111,#222 ... #AAA,#BBB等)。
3.5确保彩色组件不会彼此接壤。
为什么?除非颜色彼此之间非常强烈的补充,否则通常,两种相邻颜色的对比度会产生极化感和分裂感,从而破坏您页面的流程。如果导航栏可能会触摸有色英雄的地方,则选择透明的Navbar背景。
确保所有组件的一致性。定义了页面的光源后,请确保所有阴影都遵循其方向。如果光线以135度“击中”您的页面,则每个阴影和梯度应在135度下落下。使用阴影作为介绍层次结构或状态的工具。阴影应用于突出显示页面组件,提供页面结构或描述状态。例如,您可以通过降低其高程而不是更改其颜色来描绘按钮。太多的阴影会呈现过多的维度,因此请小心(例如,不要创建具有18个独特海拔的站点)。您的影子的偏移应等于其模糊半径的一半。例如,X / Y偏移为10px的阴影应具有大约20px的模糊半径。这种方法是最真实的阴影。始终将阴影的不透明度保持在25%以下。在微妙的一侧err,因此不要损害您的设计。如果您使用的是黑暗的背景,则在某些情况下,您可能需要增加阴影的不透明度,以确保其可见度。阴影并不总是需要黑色。当在彩色表面上使用阴影时,使用非常深色或暗淡的背景颜色变体来改善阴影的混合物通常是有利的。