Volantis 设计规范草稿

[xaoxuu]

Volantis 设计规范 0.0

配置项不应影响可维护性

如果不满足下面的设计规范，但是增加配置项几乎没有成本，可以增加选择，如果增加较多的代码维护成本，就直接舍弃。

布局

使用偶数、倍数枚举作为间距。

例如，定义了 $gap = 16px，这个值为 2^4

在所有需要间距填充的场合都以这个值为基准值进行调试，如果某个地方使用 $gap 较宽，就尝试 $gap * 0.5，如果较窄，就使用 $gap * 0.75 等。

相似的元素使用相同的布局规则。

例如所有的卡片元素，就统一使用一样的圆角弧度、一样的外部间距。所有的列表型元素，就使用统一的文字颜色、active 和 hover 颜色及背景。

动效服务于内容

所有的动画、转场必须服务于内容，没有实际价值的特效、喧宾夺主的特效都应当舍弃。

例如按钮 hover 时可以高亮、点击按钮时可以高亮；而点击空白处放烟花则不可以。

色彩

以浅色为例，深色主题同理：

正文及其相关内容一般是黑白灰

• 文章标题：黑色
• 文章正文、卡片的正文：接近黑色
• 各级章节标题：比正文突出一点
• 文章的元信息（作者、发布日期等）：灰色

可交互性元素一般是彩色

• 主题色：用于修饰、体现列表的选中与 hover 状态。
• 链接色：用于体现这个文字是可以点击的链接。
• 高亮色：当鼠标放在可交互元素上时予以视觉反馈。
• 卡片背景色：白色。
• 区块背景色：极浅的灰色。

视觉密度

一个常规大小的视野内，最高优先级内容的个数为 1～3 个，例如文章标题。文章头图的视觉优先级远高于文章标题，所以如果使用头图，请确保和文章内容相关。

视觉元素越多，则越分散注意力，使得关键内容越容易被忽略。

文章预览卡片

优先级顺序是：头图 -> 文章标题 -> 文章摘要 -> 元信息

如果想让文章被点击，就要对每一类元素针对性去优化：

1. 设置吸引眼球且切题的头图。
2. 简明扼要的标题。
3. 减少元信息数量，尽可能放在文章内页。
4. 精简摘要文字。

优先级

一个列表的小组标题是次于列表项本体的，因此小组标题按照文章元信息一样的规则处理。

例如导航栏菜单的小组标题

避免过度自由

前期过度追求导致了现在维护成本较高（例如 meta 、 widget 、 layout），产生了不少无效设计。后期转向以半自由（方案一、方案二等）为主。

例如现在的封面布局方案，每一种针对特定场合进行排版和优化。

[gzldc]

收藏了 说不定以后有用。

[Tikas]

水一下，太赞了！

我越来越喜欢，大爱！

谢谢！