此屏幕上的联系按钮是哪个
有四个按钮,每个按钮都有不同的颜色。蓝色联系我们,绿色详细信息,黄色查看价格,粉色活动申请。四个地方同时投屏 “点击这里”它说,访问者必须自己找到按哪里,而不是在屏幕上。
这是因为每个重要的事物都被赋予了颜色。我想强调活动,我想强调价格,我想吸引询问。
没有人从一开始就选择九
如果您打开其中一个再现屏幕并数一下颜色,就会发现有九种。分别是标志、查询按钮、辅助按钮、三个卡头、活动徽章、咨询链接、公司介绍链接。而不是选择九个, 结果是,对于每个附加的横幅或徽章,都会出现一种颜色。没看到。
该屏幕不是实际的客户屏幕,而是按照常见配置建模的再现屏幕。
在计数之前决定角色。
决定减少多少颜色只需颠倒顺序即可。首先,确定每种颜色的作用。
| 角色 | 此页面上的值 | 要做 |
|---|---|---|
| 表面 | FAF9F5 | 覆盖了大部分屏幕。你不应该脱颖而出。 |
| 轮廓 | E3DACC | 只需划分空间即可。 |
| 信 | 141413 | 只需要阅读它。颜色本身不会说话。 |
| 压力 | D97757 | 仅在需要按压的一处进行涂抹。 |
我不会给你规定应该有多少种颜色。 该视频中有四个调色板,重点是其中之一。重要的不是数量,而是重点在一个地方。
强调色上方的字母是通过测量对比度来选择的。
一旦决定了突出显示颜色,您将留下要放置在其顶部的文本颜色。不要用眼睛来挑选,而是测量对比度。如果使用WCAG 2.1的相对亮度公式计算,则如下。
| 混合物 | 对比 | 正文尺寸字体大小:4.5:1 |
|---|---|---|
| 白色字母 FFFFFF / 橙色 D97757 | 3.1 : 1 | 这还不够。只有基于大字母的 3:1 才能通过。 |
| 墨水字母141413/橙色D97757 | 5.9 : 1 | 它过去了。 |
| 墨水字母141413/奶油色FAF9F5 | 17.5 : 1 | 它过去了。 |
在很多情况下,您可以通过保持相同的品牌颜色并仅更改字体颜色来通过考试。然而,该值是针对上述组合的。大文本、图标和非活动元素有不同的标准,必须在实际屏幕上重新测量。
我们今天要做的不是减少颜色
打开一个屏幕 选择对您来说最重要的一个按钮。 然后,从涂有该颜色的其他位置减去该颜色。这些位置包括顶部事件横幅、价格突出显示徽章和文本中的辅助按钮等。只需留出边框即可轻松阅读。
如果只剩下一种强调色,则按下该颜色。之后计数会自动排序。
这是 Blue Canvas 的登陆页面。您可以在模拟报价屏幕上查看包含的项目和预计金额。