交互设计的精髓_服务器

PC端的交互设计基本功

你知道pc端人机交互中组件的基本状态吗？今天的重点话题是:按钮的五种状态，文本框的四种状态，ss="superseo">ss="superseo">表单和表格的两种状态，七种类型的提示框，四种永远不会犯的错误，四种让体验更好的效果。

键的5种状态

1)一切正常状态:可以点击，不进行所有姿势的状态。

2)鼠标悬停状态:鼠标停留在按键上的状态。

3)鼠标按下时的状态:鼠标按下时(去百度看看有没有松开，就是实际效果的那种)

4)鼠标按下后d出的状态:鼠标按下后会松开的状态(这个实际效果做不到，因为是松开后鼠标停留在按钮上的实际效果，已经区分出来了。

5)不能点击状态:一般是深灰色。鼠标停留的时候，鼠标是被禁止的，不能点击。

输入框的4种状态

1)静态:指没有进行所有交互 *** 作时的状态。这种状态下，输入框的线条颜色一般为深灰色，提示文字为深灰色，提示创意文案输入你的xxx。

2)打字状态:指点击打字后的状态。在这种状态下，输入框的线条颜色一般是URL的主色。无文字输入时，提示文字为深灰色，提示创意文案输入你的xxx。当文本被键入时，输入框中的文本显示信息。文本的颜色是灰黑色。

3)打字不正确状态:是指文本打字不正确，检查不正确时的状态。在这种状态下，输入框的线条颜色一般为鲜红色，输入框中的文字显示的是键入的文字，文字的颜色为灰黑色或鲜红色(非常少见)。

4)输入适当状态:是指文本被正确键入和检查时的状态。在这种状态下，输入框的线条颜色一般为深灰色，在输入框的后面会显示一些信息对齐标志。输入框中的文本显示键入的文本，文本的颜色为灰黑色。

表报告的两种状态

1)静止状态:静止状态下，背景色的每一行都必须应用不同的颜色，只使用一种颜色会导致视觉疲劳、眼睛疲劳、线条容易误读等一些客户体验不佳的问题。

2)鼠标经过状态:当鼠标经过某一条数据信息时，需要得到不同的背景颜色。因为客户此时的关注点是在这块数据信息上，为了客户的方便，查询这块数据信息不会受到其他数据信息的影响。

3)鼠标经过可 *** 作的字符或logo时:建议默认淡化服务平台的基本色。因为是可 *** 作的字符或logo，所以鼠标经过的实际效果应该和默认设置不同，比如字符可以加横线或颜色变化，logo可以加颜色变化。

七种提示框

1) *** 作前提示:网页不 *** 作时的提示框从头到尾显示某个地方的信息，可以关闭。

2) *** 作时提示:点击 *** 作按钮后，全程提示，如以下两个实际效果，第二个实际效果可以出现在顶部、中部和底部。当它出现在顶部或底部时，徽标或标志不应与文本显示在一行中。

3) *** 作成功的提示:点击 *** 作按钮后， *** 作成功的提示会出现在顶部、中部和底部，显示的信息会在2000ms后自动淡化。

4) *** 作不成功提示:点击 *** 作按钮后，d出 *** 作不成功提示，与 *** 作成功提示的实际效果相同。唯一的变化就是颜色的变化。强烈推荐鲜红色。

5)提示确认 *** 作:当客户进行一些谨慎的 *** 作时，需要得到确认 *** 作的提示。

6)弱 *** 作提示:弱 *** 作提示的实际效果只有在客户 *** 作保存提交之外的事情时才能应用，并且该提示不是关键提示。

7)强 *** 作提示:只有当客户 *** 作了除保存、提交之外的一些 *** 作，并且这个提示很关键时，才能应用强 *** 作提示的实际效果。

不重复的四种不准确。

1)在tab开关中添加tab开关。

2)在d出窗口内添加一个d出窗口

3)当logo代替文字时，如果logo不能表现出 *** 作的隐喻意义，就需要在鼠标经过logo时显示消息，否则会导致客户不知道 *** 作是什么的困惑。

4)同一网页上不能出现相同的创意文案或相同 *** 作的按钮。

4种让你感觉更强大的实用效果

1)选择较少的下拉列表可以尝试暴露选择的内容，而不是隐藏在下拉列表中。例如，通过选择识别的样式。

2)用具有视觉冲击力或徽标的选项替换单选按钮。

3)使用有实际效果的备选复选框。

4)文字内容多的时候，可以尝试分流程或者分内容。

大家好！！我是一名UX室内设计师，期待与相爱的朋友一起成长，一起探索客户体验！我可以经常升级一些和客户体验相关的文章。

创作者:高杰，微信号:微信微信官方账号:UX室内设计师高杰，华电云UX室内设计师，5年商品人机交互经验，人机交互和客户体验的核心。

欢迎分享，转载请注明来源：内存溢出

交互设计的精髓