清晰

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

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

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

在 Clarity Design 中,我们把整体的设计流程拆分为三个部分: 定义视觉——设计师须从视觉规范中确定设计元素是否满足视觉原则基本定义。如:该设计元素是否在字体排版上合理,颜色是否使用正确,如有图标元素,确定图标是否符合视觉原则,再考虑文案是否清晰简练。

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

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

主台与空间

在此,将 Teambition 的主界面称为主台(Main Stage),各类元素在 Z 轴深度的分层如下:

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

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

巧用模态

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

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

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

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

设计人员间的协作

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

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

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

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