我们在交互设计中使用了哪些常用组件？本文总结了我们经常使用的一些组件。

在交互设计中，我们经常会遇到几乎在每个应用程序中使用的一些常见组件。从表面上看，这些组件非常常见且简单，但是更常用的组件，它们背后可能存在复杂的交互。

今天我总结了一些我们经常使用的组件。

首先是文本框

文本框是设计中常见的组件之一。无论是PC还是移动，交互式表格都可以交叉引用。与其他组件相比，由于文本框的内容是无边界的，因此交互复杂度非常高。在日常设计中，您可以注意以下几点：

1.默认状态

文本框的默认状态，通常是预设文本的显示，可以是内容提示或输入规则。例如：字数限制，内容限制，但在特殊情况下，默认状态可以是活动的，甚至具有默认输入文本。

2.活跃状态

（1）单击激活文本框后，应显示光标，提供清晰的视觉提示;弹出键盘可以与输入内容组合以选择键盘类型。例如，电话号码文本框会弹出数字小键盘而不是文本键盘。

（2）输入字符后，x出现在文本框的右侧，单击以清除输入。

（3）输入数字是否有限制？例如，移动电话号码文本框限制为11位，以改善错误预防。

（4）输入格式，如：ID卡文本框，通常格式为6-8-4，接近用户的认知。

（5）输入字符限制，是否支持中文，数字，下划线，特殊符号，空格等？

（6）有快速输入按钮吗？

（7）密码类型文本框，明文，密文切换。

3.错误状态

（1）前端验证是同步还是异步。

（2）错误是格式错误还是内容错误？您可以标记文本框以突出显示视觉效果并标记错误原因。

第二，按钮

虽然按钮似乎是一个非常简单的操作控件，但它仍然有许多状态，并且经常被忽略。

1.不可点击的状态

有时页面无法完成必要的交互，按钮可以显示为不可点击，甚至消失，在必要的时刻出现。

2.可点击状态

（1）可点击按钮，当前端验证失败时，需要提示用户完成必要的操作。

当按钮当前不符合可点击条件时，通常可以将其设计为不可点击或可点击+提示。

点击按钮之前有很多操作，通常设计为可点击+提示，反之亦然。

（2）按钮上的副本可以是相关的提示。

（3）开关按钮需要清楚地指示当前状态，而不是状态和操作行为。

打开和关闭的状态不明确，是单击打开还是当前打开？副本可以更改为“已打开”。或者“关闭”

（4）主要和次要按钮，许多按钮成对出现，如：“确定”和“ldquo;取消”。通常，用户可以点击一个按钮，在特殊情况下点击另一个按钮，可以通过样式或颜色区分。

（5）如果是复杂交互后的确认按钮或可能导致严重后果的确认按钮，通常需要确认两次以避免用户误操作。

（6）点击后，设置类的某些按钮需要反馈。

3.形状按钮

例如：文本链接和图标，这些按钮通常具有较低的优先级，并且可以通过样式和颜色等属性为用户提供可点击的提示。

三，搜索框

搜索框可用于准确提取大量信息的确切内容。搜索框的设计有几个关键点：

首先，搜索可以分为以下几种类型：

（1）隐藏式搜索框：可以点击或滑动搜索频率较低的场景;

（2）普通搜索框：通常固定在页面顶部，包括放大镜，搜索框和预设文本;

（3）多功能搜索框：语音和图像搜索;

（4）分类搜索：您可以先选择分类，然后在关键字搜索分类下输入内容。

其次，搜索框的设计还需要注意以下几点：

（1）默认状态：显示预设文本，可以是搜索内容或搜索推荐。

（2）活动状态：您可以跳转到搜索页面并显示搜索建议和搜索记录，或直接搜索。

（3）输入状态：自动完成或推荐，根据输入内容显示关联结果。

语音，图片输入。

（4）结果状态：显示结果筛选。

无法显示结果或没有结果。

四，弹出框

底部弹出窗口有两种形式，一个选择器和一个显示栏。

1.选择器

它只适合选择。选择后直接收到。如果选择太多，您可以单击以确认收集。此选择器需要显式选择状态和默认状态。

2.显示栏

底部显示框用于显示内容，建议不要进行选择。

有许多常见的交互式组件，不同使用场景中的交互可能不同，因此通常更全面地提高设计效率。

作者：芥末不是结束了

链接：https://www.jianshu.com/p/d103920598cc

本文由@芥子未末发布，未经作者许可，禁止转载

该地图来自Unsplash，基于CC0协议

« 如何制作好的用户故事地图？让我们来看看Ant Financial的实际案例！ | 免费360显示官方代购源码网站通过360代购源码网站管理员平台 »