今天的主要内容是：按钮的五种状态，文本框的四种状态，表格表的两种状态，七种类型的提示框，四种从未犯过的错误，以及四种使体验更好的效果。 。

你知道进行PC端交互设计时的基本组件状态吗？

　　1、按钮的5种状态

1）正常状态：可以单击而无需任何操作的状态

2）鼠标悬停状态：鼠标悬停在按钮上的状态

3）按下鼠标时：按下鼠标（转到百度，按住，就是效果）

4）按下鼠标后弹跳状态：当鼠标按下时鼠标将释放状态（此效果无法完成，因为释放鼠标后释放按钮时的效果已经分离）

5）Unclickable状态：一般为灰色，当鼠标结束时禁止鼠标，不可点击

　2、文本框的4种状态

1）静态：指不进行交互的状态。此状态下文本框的线框颜色通常为灰色，提示文本为灰色，提示副本为xxx。

2）输入状态：指点击输入后的状态。此文本框的线框颜色通常是网站的主要颜色。未输入文本时，提示文本为灰色。如果提示文本，请输入xxx。输入文本后，文本框中的文本将显示已输入的文本，文本颜色为黑色。

3）输入错误状态：指输入文本后验证错误的状态。此状态下文本框的线框颜色通常为红色，文本框中的文本显示输入的文本。文字的颜色是黑色或红色。 （很少见）。

4）输入正确状态：指输入文本后验证文本的状态。此状态下文本框的线框颜色通常为灰色，有些将在文本框后面显示复选标记图标，并显示文本框中的文本。输入的文字，文字颜色为黑色。

　　3、表格的2种状态

1）静态：在静态下，每种背景颜色必须使用不同的颜色。使用一种颜色会导致用户体验视觉疲劳，眼睛疲劳，易读和错误等。用户体验不佳

2）鼠标传递状态：当鼠标经过某一段数据时，需要提供不同的背景颜色，因为用户的注意力集中在这些数据上，这样用户就可以在不受其他数据干扰的情况下查看数据

3）当鼠标通过可操作的文本或图标时：默认情况下，建议使用平台的主颜色。因为它是可操作的文本或图标，所以鼠标必须通过默认效果，例如文本可以加下划线或着色。更改，图标可以添加颜色更改。

　4、提示框的7种类型

1）操作前提示：页面未操作时的提示框始终显示在某个位置，可以关闭

2）操作提示：单击操作按钮后，进程提示，如下面两个效果，第二个效果可以出现在顶部，中间和底部。出现在顶部或底部不应显示连续文本的图标或图标

3）操作成功提示：单击操作按钮后，成功提示可以显示在顶部，中间和底部，并在2000毫秒后自动消失。

4）操作失败提示：单击操作按钮后，显示失败提示，并且操作成功提示效果相同，唯一的变化是颜色变化。建议使用红色

5）确认操作提示：当用户执行谨慎操作时，需要提示确认操作

6）操作弱提示：当用户操作除保存提交类以外的操作，并且提示不是重要提示时，可以使用弱提示效果

7）强大的操作提示：当用户操作除保存提交类以外的操作时，此提示非常重要，该操作可用于突出显示效果

　　5、永远不要犯的4种错误

1）内部的标签开关并添加标签开关

2）在弹出窗口中添加一个弹出窗口

3）当图标替换文本时，如果图标不能指示操作的含义，则当鼠标通过图标时需要显示图标的文本，否则用户可能无法理解操作是什么。

4）具有相同副本或相同操作的按钮无法在同一页面上显示

　　6、让体验更好的4种效果

1）具有较少选项的下拉框，您可以尝试公开选项的内容，而不是将其隐藏在下拉框中。例如，使用选择标记的样式

2）用视觉或标签选择替换单选按钮

3）用标签效果替换复选框

4）编辑更多内容时，尝试单步执行或对内容进行分类

« Alichuan Airlines的战略合作将四川航空App的功能移至飞飞 | 马云向金庸致敬：这位大人物是全国人民，所以先生说我做了这个 »