Halo，这里是设计夹，今天为大家分享的是「复选框设计」。

☑️复选框（Checkbox）是设计中常用到的组件，在B端表单设计中用得尤其频繁。看起来虽然很简单，但复选框的尺寸、颜色和位置仍值得我们仔细考虑，以确保让用户更容易理解和使用。

我们首先来介绍最基础的复选框样式，其次分析复选框+描述/icon/数值/图像等多种类型的复选框形式，最后总结设计复选框时的五点注意事项，全面掌握复选框的设计～

感知力是大脑将不同的信息连接和组织成一个连贯整体的机制。例如我们将相似的对象分组并连接起来，能够轻松地区分出不属于该组的对象。

大脑在处理和组织看到的信息时会使用一套快捷方法，了解这些方法是设计成功的关键要素。

在 UI 设计时，我们应该有意识地运用感知力，用足够的事实来验证设计，有依有据地解释为什么这个图形元素要这样设计？背后的原因是什么？

提升感知力有助于清晰地解释设计方案，避免常见的设计错误，引导我们将设计做得更好、更容易理解！

近段时间讲了不少 AI 方面的知识，不过我实际用 AI 绘画做 UI 时，目前还只能用来做参考，很多细节还是得手动调整。今天跟大家分享的这个案例，就是通过 16 次改版优化把它一点点变好的。通过对 UI 中这些细节的不断打磨，终于让它在视觉上变得更好了。

这 16 次优化，实际上也是在做 UI 时所需要遵循的设计原则，记得收藏并用到自己的项目里，用上才算真正学到。

展示组件在页面中主要承担着向用户传达信息功能，以帮助用户快速地定位和浏览数据。常用的展示组件包含徽标、标签、走马灯、文字提示、气泡卡片、折叠面板、表格等。接下来我将逐个讲解一下这些组件。

配图是我们平时在设计工作中经常用到的，一个好的配图很多时候会直接影响到一个作品的好坏，图片本身也是一种视觉语言，通过学习跨领域的知识可以帮助我们提升自身所处的领域设计能力，本篇文章和大家讨论构图和景别知识，通过对这些知识的了解判断如何选择一个好的配图以及怎么应用好配图，大多数设计师选择配图时都是凭着主观意识在选择配图，你所选择的配图很大程度会受到你的主观意识的影响，这些主观意识来源于自身审美、文化、环境等因素的，因此在我们的主观意识基础上，应该具备一定的客观依据来帮助我们更好的选择合适的配图。

构图与景别知识在摄影、绘画、影视中应用很多，但很多设计师容易忽视这些知识，这些知识看似是摄影、绘画、影视等行业的知识与设计好像没太大关系，这些知识也是很有必要学习的的理论知识，对构图景别的理解很大程度会影响你能否把握好设计画面中的配图，配图本身也是一种视觉语言，提升构图和景别知识对设计师整体综合实力提升是有帮助的，当你做三维和插画等设计时同样也会用到这些知识，了解这些知识会让你以客观依据的角度，运用和判断设计中配图的好与坏。

前言

徽标数在系统可见方面扮演着重要角色。通过徽标数的提示让用户直观的感受到系统的可见性，其目的是告知用户有未读的消息或有未处理的任务，当用户完成后徽标数消失。

徽标数本是提升点击率和曝光率的利器，然而有些产品却将徽标数当作信息触达的利器，随意使用这件杀伤力武器，使得徽标数被滥用，造成用户免疫，徽标数反而失去了本身的作用。

本文通过简析徽标数设计，探讨如何通过徽标数（红点）提升通知易用性。

小图标是界面的核心组成部分，承载着信息传递的重要作用。作为页面的最小展示单位，图标设计也是最能考验设计师基本功的一项工作。

不过设计师熟练掌握的，往往只是单个图标的风格化绘制方法。在这个过程中，设计师更关注图标的美感和细节，而忽略了从宏观的角度考量「图标表达的准确性」、「不同图标之间的关联」、以及如何帮助业务「快速实现客制化功能」。

新的一年，先祝大家运势涨如脱兔，因为年前和过年这段时间工作没那么忙，就抽空继续整理了一些工作中对B端设计的总结，希望可以带给需要的人一些启发。如有纰漏，欢迎各路大神指正。

上一篇说到了设计原则，接下来我们讲讲 B 端常用组件的内容。