我认为组件就是组成用户界面的基本元素，也是前端在开发过程当中，抽象出来可以复用的模块。对于定义大家不必过于纠结，最主要还是要了解其使用，比如在下方页面当中，会包含有哪一些组件？

A. 输入框 开关 上传 按钮 文本提示

B. 输入框 开关 上传 按钮 气泡卡片

C. 输入框 开关 图片预览 按钮 文本提示

这就是我们要了解关于一个组件的判断流程，我认为会有三步：形式、交互、场景。

其实我们在去辨别新一个组件的时候，会优先关注组件的「样子」，进而来进行辨别。

比如下方的两个组件，我们其实很快速就能判断出一个是 单选框，一个是多选框。因为在我们潜意识当中

，因此对于一个组件的第一印象则会和它的形式相关。

但很多时候，随着业务的变化，我们也会给组件更多含义。比如在下方三个新建按钮当中，因为他们的形式不同，所对应的含义也并不相同。

通过形式上，我们可以理解为：

再举一个例子，比如在这三个选择组件当中，正是由于其组件形式的变化，导致它们在使用上也会存在较大差别~

当然，正是因为它们样子的改变，组件的使用含义也会产生变化。

知道它的样子还不够，我们还要了解它究竟应该如何操作，因此就需要明确对应的交互状态。

比如同样给到大家两个组件，请你去辨别这两个组件分别是什么？

其实我们很难进行细致的辨认，因为这两个组件在形式上基本相同。但我们一旦将其动起来，你就会发现不同，左侧的是一个按钮，而右侧则为链接。

其实我们在辨别交互状态时，通常会存在两种辨别维度：常规交互与业务交互。

常规交互是指在网页端当中的基础交互，比如 Hover、点击，这种情况大多数设计师经常接触，因此我们就不花太多时间放在这上面。

第二种交互类型是业务交互，它主要出现在特定的页面上。比如在图表中的下钻、过滤、联动、缩放等等；在表格就会有 冻结、拖拽、选中 等交互，这些内容都是我们在涉及特定页面时需要关注的。

所以我们再去理解一个组件的时候，也需要去考虑这个组件所关联的交互状态，这样才能够对于这个组件有个更为全面的认识。

作用对比则是去思考这个组件与其他作用类似的组件之间究竟会存在什么差别？

因为每一个组件都会有它存在的意义，我们可以通过横向单维度的对比，了解到这个组件它所对应的特点。

这个我们来举一个完整的例子，带大家感受一下~

比如最近在行业当中，出现一种新的组件叫做：蚂蚁线

刚开始在腾讯云的官网看到了蚂蚁线，但其实我对他真的一无所知。于是乎，我开始了组件调研。

从形式开始，你会发现“蚂蚁线”是位于文本下方，通过虚线的方式呈现。

通过这种形式，我们能够拓展一些其他的类似样式。

比如在飞书当中，当你写一个错别字的时候，飞书会提供默认的下划线提示你修改错误。但这个下划线是一个实线，并且会以黄色作为标注，这就是形式上的差异。

其次，在交互上，在整个页面中，当你将鼠标悬停在虚线上时，这个提示会告诉你这里有信息可以进行预览。通过这样，我们就能大致明白“蚂蚁线”的含义：它出现在文本下方，使用虚线的方式提示用户这里有更多的信息。用户通过将鼠标悬停在虚线区域的文本上，便可以查看更多内容。

最后，在对组件进行对比时，思考与“蚂蚁线”具有相同作用的组件，我想到有两个：Tooltips和Popover。并简单整理它们在日常页面的使用，一共会包含三种相同的情况下的交互形式。同时，明确分析纬度以信息凸显程度进行对比，进而能够将这三个组件进行区分。

并且在页面中，交互的形式也会有所不同。因此我们简单整理，会有三种相对应的对比方式。并明确它们，以信息干扰程度作为标准，来进行单维度的划分。进而就能得到“蚂蚁线”组件的一个整体的用途。

关于组件，确实由于时间有限，给大家分享到这里。

【兰亭妙微】如何分析一个B端界面设计中的新组件，简单聊聊~

前端

B端设计师理解组件需把握三步：形式定功能、明确交互状态、作用对比。组件定义为基础可复用模块，通过识别外观、分析常规与业务交互，并横向对比相似组件，可全面把握其特性与适用场景，提升设计效率。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

【兰亭妙微】如何分析一个B端界面设计中的新组件，简单聊聊~

【兰亭妙微】如何分析一个B端界面设计中的新组件，简单聊聊~

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐