**实用性网页元素设计指南**
Lane Sun
2021-09-03
本文讲述了针对实用性网页(网页程序)界面元素的一些设计建议, 包括元素样式,颜色设计,
可读性等方面的建议. 限于篇幅, 不包括布局与排版,特效与动画,无障碍访问方面的建议.
不适用于展示性的网页(如海报网页), 由于包含个人观点, 并不确保适用于所有情况,
同时由于文章的时效性特点, 请注意了解本文的撰写时间.
本作品采用知识共享署名 4.0 国际许可协议进行许可。
## 设计原则
### 用户第一
实用性网页的设计目标在于方便用户查看与使用, 因此设计原则以用户观感以首要是当然的.
典型的考虑方向有:
* 页面的设计风格是否与页面内容相适应
* 颜色的搭配与使用是否会造成视觉疲劳
* 元素的数量与布局是否对浏览造成压力
* 页面设计对障碍人士是否友好
* 设计风格是否适应时代
### 开发者第二
在用户之后, 你需要考虑开发者对页面的观感, 也就是优雅地安排页面的代码, 需要考虑的方向大概分为:
* 页面的后续修改是否困难
* 开发者访问页面元素的方式是否合理
* 代码是否整洁且符合规范
### 机器第三
最后, 还需要注意照顾一下用户的设备, 比如计算机,浏览器什么的:
* 页面是否在大多数设备上流畅显示
* 页面是否占用了太多处理器或者内存
* 页面是否符合现代标准且在考虑支持的浏览器上正确显示
* 页面是否有安全隐患
## 设计的细分
大体上网页设计可以分为样式,色彩,布局,响应(反馈)这几类. 这篇文章将涉及其中的样式和颜色部分,
另外有些文章会把多分辨率自适应(即响应式设计)加入其中, 但是由于响应式设计相当复杂,
同时在其必要性上存在一些争议,所以这里并没有列入考虑.
# 色彩相关
有一部分人会把色彩与样式结合起来考虑. 这里的建议是把色彩独立于样式之外的,
大多数的样式设计仅依赖于颜色的明暗, 对颜色的色相和饱和度并不太敏感, 也有一部分的设计依赖于饱和度,
但相对较少且依赖程度不深, 所以有必要把色彩独立开来考虑.
## 色彩的基本
合理的色彩设计主要在于维持两个方面--柔和度和锐度--的平衡, 也就是对颜色对比度的把握.
如下:
Some text...
Some text...
Some text...
Some text...
Some text...
Some text...
上图中, 无关基本色调, 图像由左至右一致从锐利向着柔和变化. 可以明显看出, 越是锐利,
则页面更加便于识别与阅读, 同时更容易造成视觉疲劳; 反之, 过于柔和的颜色虽然在观感上很舒适,
但相对难以阅读.
原因就在于人的眼睛往往对变化很敏感, 就如同相对于静止的东西, 动态的东西更容易引起人的注意一样,
色彩设计的重点并不是颜色本身, 而是一种颜色到另一种颜色之间的梯度(即颜色之间的对比),
这是眼睛最为关注的地方. 同时对于大多数的人来说, 亮度的变化相较于饱和度以及色调的变化更为明显,
这也是视觉本身特性导致的. 综上所述, 在色彩设计中, 我们关注的重点是对颜色过渡的梯度的把握,
也就是上面所说的柔和度和锐度的平衡, 而体现了这一梯度最明显的地方便是颜色之间的亮度变化.
!!!
参见:
* [维基百科上的彩色视觉](https://zh.wikipedia.org/wiki/%E5%BD%A9%E8%89%B2%E8%A7%86%E8%A7%89)
* [维基百科上的颜色](https://zh.wikipedia.org/wiki/%E9%A2%9C%E8%89%B2)
## 设计利器: HSL颜色格式
对于大多数网页设计者来说, 最常用的颜色格式大概是Hex写法, 如`#ffffff`,`#08f8`这样的.
也有人会用RGB或RGBA写法, 如`rgb(0, 0, 0)`或`rgba(256, 256, 256, 0.4)`. 除了这两种,
CSS还允许使用HSL(或HSLA)写法, 格式如下:
*************************************************
*
* hsl[a]( H, S, L[, A] )
* | | | |
* | | | '---- 透 明 度
* | | | 0.0 ~ 1.0
* | | '-------- 亮 度
* | | 0% ~ 100%
* | '----------- 饱 和 度
* | 0% ~ 100%
* '-------------- 色 相
* 0deg ~ 360deg
*
*************************************************
[CSS中HSL颜色格式的语法]
在HSL格式中, 色相是一个角度值, 因为HSL是XY面为极坐标系的圆柱型颜色空间. 在色相轴,
0deg代表纯粹的红色, 120deg代表纯粹的绿色, 240deg是纯粹的蓝色,
可以利用这个规律像RGB色域一样对HSL的色相进行混合. 在饱和度轴, 0%是完全的灰度颜色,
100%则是完全饱和的颜色. 而HSL颜色格式最为实用的便是其对亮度的定义了, 在HSL中,
亮度值从0%的完全黑色到100%的完全白色变化, 其中50%才是颜色最为艳丽的值.
意味着HSL的亮度轴直接体现了上文提到的颜色之间的亮度梯度,
这是HSL相比于其他各种颜色格式最有优势的地方, 也是HSL最终被CSS采用为标准的原因.
使用HSL之后, 剩下的便是简单的工作了.
比如要给一个彩色的积木按钮加上有一定区分度的Hover/Active效果,
只需要对HSL的L通道加上一个差值就可以了:
~~~~~~~~~~~~~~~~~~~~ CSS
div.but {
background: hsl(200deg, 100%, 45%);
box-shadow: 0px 4px 0 0 hsl(200deg, 100%, 35%);
}
div.but:hover {
background: hsl(200deg, 100%, 50%);
box-shadow: 0px 4px 0 0 hsl(200deg, 100%, 40%);
}
div.but:active {
background: hsl(200deg, 100%, 40%);
box-shadow: 0px 4px 0 0 hsl(200deg, 100%, 30%);
}
~~~~~~~~~~~~~~~~~~~~
[这是以5%为梯度的按钮]
!!!
参见:
* [维基百科上的HSL和HSV](https://zh.wikipedia.org/wiki/HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4)
* [MDN上的颜色语法](https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value)
## CSS的瑞士军刀: `hsl() + var() + calc()`
自从CSS加入`var()`和`calc()`语法后已经过了有一段时间了, 但在Web依旧很少见到使用它们的网页.
造成这一现象的一部分的原因是在它们之前LESS等预编译样式表引擎已经先流行起来了,
但这并不影响它们成为绝佳的设计工具, 尤其是与HSL搭配使用的时候! 事实上,
这一组合的强大可能已经超越大部分预编译样式表引擎所提供的功能了.
!!!
这篇文章并不会包括对各个函数或者API的讲解, 因此如果对用法有问题的话请先浏览节尾的参见资料.
当网页的样式较少的时候, 选择将颜色值直接写入样式表就完全没有问题
(也就是类似于计算机语言中的字面值). 接着当样式增加到一定程度时, 便适合采用定义变量的方式,
将颜色值预先定义好, 再在需要调用的地方使用(就像宏一样). 利用`var()`或者LESS等引擎都可以实现.
然而, 当样式进一步变多时, 使用变量预定义的方式便会出现问题, 变量的数量会雪崩式地增加, 同时,
因为颜色种类增加的缘故, 样式表也渐渐变得难以理解,维护.
LESS等预编译引擎也通过一些手段尝试规避这个问题, 比如"颜色变种", 以此来压缩变量的数量.
然而, 这些办法终究只是类似语法糖一样的东西, 可以缓解问题却无法根治. 为此,
需要从根本上创建一个新的模式, 这便是引入`calc()`和HSL的目的.
~~~~~~~~~~~~~~~~~~~~ CSS
hsl(
var(--h-or)
)
~~~~~~~~~~~~~~~~~~~~
!!!
参见:
* [MDN上的var()]("https://developer.mozilla.org/zh-CN/docs/Web/CSS/var()")
* [MDN上的calc()]("https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc()")
## 不同亮度环境下的视觉差异
虽然之前说过, 在色彩设计中视觉上最为敏感的是颜色之间的梯度或称差异度, 但其他因素的影响也是存在的,
其中相对比较重要的是亮度本身对视觉的影响.
~~~~~~~~~~~~~~~~~~~~ CSS
div.box-1 {
background: hsl(0deg, 0%, 100%);
color: hsl(0deg, 0%, 90%);
}
div.box-2 {
background: hsl(0deg, 0%, 0%);
color: hsl(0deg, 0%, 10%);
}
~~~~~~~~~~~~~~~~~~~~
[10%梯度在亮色与暗色背景下的效果对比]
Some text...
Some text...
如上图, 两边文字与背景之间的实际梯度都是3/16, 可以明显看出, 在亮色背景下文字的辨识度高得多.
就和视觉倾向于对变化作出响应一样, 眼睛本身则倾向于对能量作出响应, 因此在暗色环境下,
人眼对梯度的敏感度并不如亮色环境, 也就是说可读性较差, 但相应得更加柔和,
这也是为什么往往暗色的页面往往更加让人舒适的原因, 其中有一部分的效果便来自于锐度的损失.
因此在色彩设计的时候可能需要考虑到亮度本身从而对梯度进行一定的修正, 比如在暗色页面下则增加梯度.
## 彩色像素渲染偏移问题
一个小问题: 在同一行或列中对齐放置不同颜色的相同样式元素时, 常常发生两者位置看似不对齐的现象,
如下:
这是由于屏幕的彩色子像素排列位置不同导致的, 同时也有一部分原因是人眼对颜色的不均匀感知,
在低分辨率和高亮度的情况下尤其明显, 与不同的软硬件也有直接关系. 遇到这种情况建议适当地放大元素,
同时减少元素边际的对比度和亮度.
## 一点无障碍修正
在利用HSL格式制作褪色或加强(比如失去焦点的窗口或是不可用的按钮)效果时,
建议在改变S通道时请同步改变L通道, 因为一部分视觉障碍人群可能不能很好地捕捉饱和度的变化,
给予一些亮度上的区分会让他们更容易识别出这些变化. 这只需要很少的一点工作,
但可以让一部分人的浏览体验变得更好.
# 示例样式
Plate Basic
Plate Primary
Cartoon Brick Basic
Cartoon Brick Primary
Material Basic
Material Primary
Underline
Simple Darken
Simple Border
Simple Box
Simple Box Primary
Gradient
Complex Plastic
Complex Glass
Complex Bubble
Complex Bubble Line