清晰

成效往往建立在全身心的投入上。

用户本身的注意力是很有限的，它会受到诸多限制。我们人在一个时间段内只能做一件事，这样才能够把事情做好。它还有个前提，就是具有足够清晰的目标。我们希望用户在使用 Teambition 的过程中，能够感知到每个服务、功能和操作都是明确的。这样才能把事情做得更加准确。也意味着我们在设计和实现的过程中，须时刻保持清晰的思考。

视觉、布局、动效三位一体

在 Clarity Design 中，我们把整体的设计流程拆分为三个部分：

定义视觉——设计师须从视觉规范中确定设计元素是否满足视觉原则基本定义。如：该设计元素是否在字体排版上合理，颜色是否使用正确，如有图标元素，确定图标是否符合视觉原则，再考虑文案是否清晰简练。

调整布局——在思考一个设计元素应该安置在界面某个位置时，参考我们制定的布局原则，确定是否符合网格系统的规范。设计元素的大小是否与布局规范中的标准大小相符。考虑设计元素在界面中是否符合韵律安排。

加入动效——每一个可交互的设计元素，都可以考虑加入适当的动效，以加强用户对该交互过程的认知和理解。在加入动效时，应当考虑动效是否满足基本原则，是否运用到了合适的场景，查找该组件或该类型组件是否已经有确切的定义，并继承该定义。结合场景原则考虑设置合理的运动与时间。

主台与空间

在此，将 Teambition 的主界面称为主台（Main Stage），各类元素在 Z 轴深度的分层如下：

在主台概念中，从右到左层次类型分别是主台、遮罩、模态、警示、提醒。其中，遮罩属于非固态层（Unsolid），其他层次属于固态层（Solid）。

不同层级不能相互穿透，且只有模态层可以复制与叠加，模态之间的堆叠通过深度来表现：

巧用模态

在主台中，模态是唯一可以形变的大型元素。感知模态在深度空间里的层叠关系和效果。 用户定位服务时，要满足符合用户预期的条件，即是：

排布 — 每项服务入口须直白明了，将重要且使用频率高的服务放在显眼的位置以便用户可以快速定位。

引导 — 当用户不知道现在该怎么做时，可以快速寻找到「帮助台」并获取到有效帮助信息。

易读 —文字、图案等视觉元素清晰易读，使用有逻辑的样式或是颜色引导用户操作。

设计人员间的协作

在设计中资源文件命名、颜色命名，组件交互和样式需要统一。通过使用专业的版本控制、设计沟通工具和设计协作规范让设计师的设计得以继承、迭代，同时也降低了设计师与开发人员的沟通成本，让各自专注于业务而非不必要的沟通和文件查找。

在设计时，一定遵循一致性原则。同样的组件类别不要使用不同的视觉处理。例如，按钮标题使用标准统一的字号，绝不因为使用场景不同而使用不同的字号大小。

严格地遵循视觉排版规则，在所有文字应用场景中使用统一的字号、字距、行距。

使用统一的交互行为逻辑，例如：鼠标移到头像上时，均显示为人员详情浮层，避免使用其他行为逻辑。