外观设计和美化

内部工具的外观很多时候会决定使用者的信任度,如果你开发的工具显得布局局促或者颜色使用不协调,可能给使用者留下不好的体验。

在卡拉云中,你可以通过拖拽,自由调整组件的布局。同时,你也可以设计组件的外观,如颜色搭配等。

本文中,我们介绍如何调整组件的外观,同时给一些实用建议,帮助你搭建更美观体验更好的应用。

简单样式控制

在点击一个组件时,如果组件样式可以被调整,则下方会出现样式控制。用按钮组件举例,当点击按钮时,会出现以下的样式设置

样式设置

点击颜色按钮即可调整和控制颜色

动态样式控制

在颜色控制中,我们仍然可以使用 JS 逻辑来进行动态的样式控制。

这里用一个例子来说明,假设你在开发一个报销系统,通常用户的报销在几百元左右。但如果用户输入的报销值大于了 1000 元,则需要用红色按钮提醒用户注意。

那么在这里,你可以将按钮的颜色设置为

{{
  parseFloat(baoxiao.value) < 1000 ? "#6fd49f": "red"
}}

也即,如果报销输入框(baoxiao)的值小于 1000,用绿色(#6fd49f) 否则用红色

实现的效果如下,当用户输入的报销金额超过 1000 元时,按钮会自动变红

动态样式

应用样式设计建议

对于内部工具来说,多数时候我们考虑效用远大于美观。但有一些非常简单的技巧,可以帮助你快速搭配出既符合用户期望的功能,又能提升用户体验。

以下是我们的几点建议

将功能逻辑相近的组件组织起来

有一些功能需要多个组件完成,比如说对于一个表单来说,可能有多个输入项。此时将这些输入项全部放入一个容器中,将会很大程度增加界面的整洁程度,比如对比以下两种组件摆放的布局,显然后者给人更整洁的感受

规范布局

尽量采用对称对齐

如果应用中有多个按钮、表格、表单或图表,尽量将它们水平或纵向对齐。同样,对比以下两种布局,后者给人更规范和端正的感觉

对齐摆放

用颜色提醒用户操作

在多数 UI 界面中,绿色、蓝色给人“可通行”的感觉,而红色和黄色给人警惕感。因此,可以适当地使用不同的颜色让用户潜意识中知道应该如何与界面交互。

举个例子,如果删除操作是一个需要谨慎的操作,你不希望连续点击,那么你可以把删除的按钮调整为红色。反之,如果你希望用户进行一个操作,比如添加操作或更新操作,则可以将对应的按钮或操作调整为绿色以作为所谓的行为召唤(Call to Action)。

但请注意,同一个界面上,尽量不要添加太多的行为召唤,太多的行为召唤可能会使用户迷惑而不知道应该做什么。

以下是一个较为美观的颜色搭配,注意删除和提交修改按钮(行为召唤)的不同颜色

不同颜色的按钮