Volantis 设计规范 0.0
配置项不应影响可维护性
如果不满足下面的设计规范，但是增加配置项几乎没有成本，可以增加选择，如果增加较多的代码维护成本，就直接舍弃。
布局
使用偶数、倍数枚举作为间距。
例如，定义了 $gap = 16px，这个值为 2^4
在所有需要间距填充的场合都以这个值为基准值进行调试，如果某个地方使用 $gap 较宽，就尝试 $gap * 0.5，如果较窄，就使用 $gap * 0.75 等。
相似的元素使用相同的布局规则。
例如所有的卡片元素，就统一使用一样的圆角弧度、一样的外部间距。所有的列表型元素，就使用统一的文字颜色、active 和 hover 颜色及背景。
动效服务于内容
所有的动画、转场必须服务于内容，没有实际价值的特效、喧宾夺主的特效都应当舍弃。
例如按钮 hover 时可以高亮、点击按钮时可以高亮；而点击空白处放烟花则不可以。
色彩
以浅色为例，深色主题同理：
正文及其相关内容一般是黑白灰
- 文章标题：黑色
- 文章正文、卡片的正文：接近黑色
- 各级章节标题：比正文突出一点
- 文章的元信息（作者、发布日期等）：灰色
可交互性元素一般是彩色
- 主题色：用于修饰、体现列表的选中与 hover 状态。
- 链接色：用于体现这个文字是可以点击的链接。
- 高亮色：当鼠标放在可交互元素上时予以视觉反馈。
- 卡片背景色：白色。
- 区块背景色：极浅的灰色。
视觉密度
一个常规大小的视野内，最高优先级内容的个数为 1～3 个，例如文章标题。文章头图的视觉优先级远高于文章标题，所以如果使用头图，请确保和文章内容相关。
视觉元素越多，则越分散注意力，使得关键内容越容易被忽略。
文章预览卡片
优先级顺序是：头图 -> 文章标题 -> 文章摘要 -> 元信息
如果想让文章被点击，就要对每一类元素针对性去优化：
- 设置吸引眼球且切题的头图。
- 简明扼要的标题。
- 减少元信息数量，尽可能放在文章内页。
- 精简摘要文字。
优先级
一个列表的小组标题是次于列表项本体的，因此小组标题按照文章元信息一样的规则处理。
例如导航栏菜单的小组标题
避免过度自由
前期过度追求导致了现在维护成本较高（例如 meta 、 widget 、 layout），产生了不少无效设计。后期转向以半自由（方案一、方案二等）为主。
例如现在的封面布局方案，每一种针对特定场合进行排版和优化。
Volantis 设计规范 0.0
配置项不应影响可维护性
如果不满足下面的设计规范，但是增加配置项几乎没有成本，可以增加选择，如果增加较多的代码维护成本，就直接舍弃。
布局
使用偶数、倍数枚举作为间距。
相似的元素使用相同的布局规则。
动效服务于内容
所有的动画、转场必须服务于内容，没有实际价值的特效、喧宾夺主的特效都应当舍弃。
色彩
以浅色为例，深色主题同理：
正文及其相关内容一般是黑白灰
可交互性元素一般是彩色
视觉密度
一个常规大小的视野内，最高优先级内容的个数为 1～3 个，例如文章标题。文章头图的视觉优先级远高于文章标题，所以如果使用头图，请确保和文章内容相关。
视觉元素越多，则越分散注意力，使得关键内容越容易被忽略。
文章预览卡片
优先级顺序是：头图 -> 文章标题 -> 文章摘要 -> 元信息
如果想让文章被点击，就要对每一类元素针对性去优化：
优先级
一个列表的小组标题是次于列表项本体的，因此小组标题按照文章元信息一样的规则处理。
避免过度自由
前期过度追求导致了现在维护成本较高（例如 meta 、 widget 、 layout），产生了不少无效设计。后期转向以半自由（方案一、方案二等）为主。