杭州UI设计学习｜组件的属性有哪些？

组件的五个属性

要全面了解和学习组件，我们必须首先了解组件的属性:

作用:定义组件的用途和功能，了解组件的用途。

形状:不同形状的组件对产品和用户有什么影响？

行为:通过用户的点击或触摸等动作来定义交互行为。

状态:定义并通知用户当前状态。

语境:根据组件所属的场景考虑组件的不同用途。

1.形状

通过形状的不同，我们可以快速识别不同类型的组件。在设计中，通常使用文字和图形的组合来定义组件的形状。设计组件时，应将形状、颜色、图标、文字等视觉元素组合在一起，合理安排组件的层次结构。

比如一个like按钮的设计看起来很简单，但如果结合不同的使用场景和吸引用户注意力的程度来考虑，一个like组件可以分为以下六种或更多的形状。

所以在设计的时候要充分考虑使用场景和需求，对部件的形状要有清晰的认识。在接下来的设计中，整个设计过程会变得非常清晰，哪些形状的部件需要直接入座。

2.行为

与行为逻辑和业务逻辑相关，会告诉用户操作后的结果。用于在组件被触发时通知用户即时反馈，或者组件当前处于什么状态。

3.状态

通过组件状态的变化，可以告诉用户当前正在执行哪一步，有助于用户了解组件的当前情况。的常见组件状态包括:正常状态、聚焦状态、悬停状态、激活状态、加载状态和禁用状态。

正常状态:是组件最正常的状态，也是设计者设计的第一个状态，说明这是一个用户可以交互的元素。

焦点:它通常用在计算机上，表示某个元素已被选中。比如填表的时候，点击键盘上的tab键，电脑的光标就会切换到下一列，下一列的输入框就会成为焦点。

悬停:当鼠标悬停在一个元素上时，该元素的状态会发生变化。另外，移动端和Pad端的组件不需要悬停。

主动:当你点击一个组件时，组件的颜色会变暗，同时会有内阴影等效果。

加载状态:表示当前数据仍在加载中，需要等待。

禁用:组件呈灰色，通知用户当前条件不满足，不能使用。

4.语境

组件的使用会随着场景或环境的变化而变化。即使是同一个组件，在不同的使用场景中也可以有不同的使用方式。

的所有设计元素都是相对的，它们会根据组件的布局位置、一起使用的其他组件元素以及用户的用途来定义组件的用途。

固定/可变:定义大小是可变的还是固定的。

窄/宽:根据空间的宽度来定义用途。

层次结构:即使相同的功能也需要根据层次结构定义组件的用法。

浮动:定义组件是基于可访问性浮动还是基于滚动移动。