组件 状态 用户 大家好，我是 Clippp，今天为大家分享的是「组件设计」。现在有很多成熟的组件库，能为设计的规范性带来更大的便利。但作为设计师，不仅仅需要了解每个组件的样子、用在哪些地方，更需要清楚地知道组件的本质，即组件的形状、行为、状态等内在属性和设计细节，才能更深层地掌握组件设计。组件的五种属性想要全面了解并学习组件，首先要搞清楚组件具备的属性：作用：定义组件的用途和作用，明白组件用来做什么的。形状：不同形状的组件对产品、对用户分别有哪些作用。行为：通过用户点击或触摸等动作定义交互行为。状态：定义并告知用户当前的状态。语境：根据组件所属的场景考虑组件不同的用途。1. 形状通过形状的差异，我们能快速辨别不同类型的组件。在设计中，通常采用「文字与图形」相结合的形式来定义组件的形状。在设计组件时，要将形状、颜色、图标和文字等视觉元素组合在一起，并合理安排组件的层级结构。例如一个点赞按钮的设计，看起来很简单，但是如果我们结合不同的使用场景和吸引用户注意力的程度去考虑，一个点赞的组件就可以分为下面 6 种甚至更多的形状。所以在设计时，要充分地考虑使用场景和诉求，并对组件的形状有清晰的认知，在接下来的设计中需要哪种形状的组件直接对号入座，整个设计过程就会变得很明确。2. 行为行为和交互逻辑以及业务逻辑相关，会告诉用户操作后的结果。用来告知用户触发组件时的即时反馈，或者组件当前处于什么状态。3. 状态通过组件状态的变化可以告诉用户当前在进行哪一步操作，有助于用户了解组件当前的情况。常见的组件状态包括：正常状态、聚焦状态、悬停状态、激活状态、加载状态、禁用状态。正常状态(Normal)：是组件最常规的状态，也是设计师首先设计的状态，表示这是用户可以交互的元素。聚焦状态(Focus)：多用在电脑端中，表示元素已被选中。比如在填写表单时，点击键盘上的 tab 键，电脑的光标会切换到下一栏，下一栏的输入框出现聚焦状态。悬停状态(Hover)：当鼠标悬停在元素上时，元素会有状态的上的变化。另外，在移动端和 Pad 端上的组件不需要悬停状态。激活状态 (Active)：点击组件时，组件的颜色会变深，同时还会出现内阴影等效果。加载状态(Loading)：表示当前数据仍在加载中，需要等待。禁用状态(Disabled)：组件置灰状态，告知用户当前条件不满足，无法使用。4. 语境组件的用法跟随场景或环境会发生变化。即使是同一个的组件，在不同的使用场景中也可以有不同的使用方法。所有的设计元素都是相对的，它们会根据组件的排版位置、一起使用的其他组件元素以及用户的使用目的等来定义组件的用途。固定/可变：定义大小是可变还是固定。窄/宽：根据空间的宽度定义用途。层级结构：即使是相同的功能也需要根据层级结构定义组件的用法。浮动：定义组件是基于可访问性浮动还是基于滚动移动。组件的三种类型组件的类型大致可以分为三类：导航类（用于导航信息的组件）、输入类（用户输入信息时使用的组件）、信息类（用于向用户传递信息的组件）。1. 导航类组件作为导航提示或者展示信的组件，包括卡片、列表、网格、轮播、选项卡、菜单栏等组件。卡片：容纳信息最常见的方式。列表：用于对同一属性的信息进行排序，以便于识别。网格列表：用于在两列中显示卡片或信息单元。轮播：用于水平滚动而不是垂直滚动。选项卡：用于显示具有不同类型的信息。菜单：用于显示难以用选项卡显示的大量复杂层次结构。2. 输入类组件用于输入信息或做出选择的组件。现在很多组件库中的输入类组件形状都很相似，这样设计的原因是考虑到用户的使用习惯，避免使用让用户感到陌生的组件。复选框：当选择多个元素时使用单选按钮：当只能选择几个元素中的一个时使用文本字段：当用户输入文本信息时使用下拉菜单：打开菜单查看各种信息时使用按钮：用于在各种场景下输入有关用户决策的信息切换开关：用于打开/关闭特定状态3. 信息类组件用来传递信息的组件，根据要输入的信息类型来传达用户的选择。常用的信息类组件包括：指导文字：用于提供指导信息。工具提示：用于展示文字无法传达的内容。吐司提示：轻量级的提示，在提示过后通常会自动消失。警告：用来向用户传达需要清楚了解的重要信息。弹窗：向用户传达需要做出选择的内容。用户引导：用于传达用户不熟悉的页面内容。最后以上就是组件的属性和类型的解析，希望通过这些内容能帮助你对组件有更多的认识和思考。「组件系列」的其他文章，近期也会不断更新，欢迎大家关注如何构建维护设计组件库？我总结了这6个方法！原文引自 medium 上的一篇文章 Keeping Things Organized。阅读文章 > 欢迎关注作者微信公众号：「Clip设计夹」本篇来源：优设网原文地址：https://www.uisdc.com/component-design-details
状态 信息 产品 缺省状态属于交互的边缘状态，很容易被忽略，造成设计不完整。为了保证设计完整性，对缺省状态进行整理很有必要，以免缺漏。大纲：缺省状态的出现原因和分类缺省状态的组成缺省状态的视觉样式组件化与复用缺省状态的出现原因和分类UI 界面上展示的信息可大致分为固定信息和动态信息两类。所谓固定信息是指，不需要请求服务器的信息类型，例如底部标签栏的图标是以切片的形式存在于安装包中，总是可见。而动态信息是会随场景变化的，如下拉刷新操作一般都伴随着信息的实时更新，这类信息就属于动态信息。以请求服务器是否成功为依据，缺省状态主要分类两大类：请求失败：网络环境原因 或 设备原因请求成功：数据正常且为空 或 数据异常其中，数据正常且为空的状态，我们习惯性称其为空状态。除了空状态之外的其他缺省状态，可以认为是异常状态。缺省状态的组成不同场景、不同产品，缺省页组成都可能不同。为了便于讨论，拿电商产品的搜索无结果为例进行分析。从组成上来看，淘宝和小红书进行了状态说明：根据当前关键词，无搜索结果，提示用户可以尝试更换关键词。而京东将状态提示压缩在很小的区域范围内，一句文案简单表意，使用了绝大多数屏幕空间来推荐其他商品。造作除了商品推荐之外，提供了行为引导。不同的形式有不同的目标侧重，从体验的角度上来讲，淘宝和小红书状态更加清晰明确。而推荐商品更大程度上是为了促成交易。产品层面，空状态也有可以发挥的空间，主要是引导用户行为和推荐相关内容。行为引导，目的是让用户快速熟悉产品并产生使用记录，增加粘性。内容推荐，不论是电商推荐商品或者社交平台推荐人，都是增加用户和产品之间联系的一个很好手段。缺省状态的视觉样式缺省状态的视觉表达样式有多种，不同的表达形式体现了不同的产品调性。从简约克制到丰富的情感化表达，也是逐渐增加视觉元素的过程。组件化与复用当业务模块众多时，可能涉及到的空状态和异常状态对应的具体页面数量巨大，将所有情况遍历、梳理、归类为 n 种类型，再进行统一设计，不仅节约设计成本，更可以使产品群整体性更强，进一步突出专业性和品牌感。以下是有道词典的案例。结语：尽管缺省状态是边缘状态，但是很好体现了产品的质感、特性和细节，值得仔细打磨。更多设计缺省页的方法：本篇来源：优设网原文地址：https://www.uisdc.com/the-default-design
表哥
