交互设计中那些稍有变化的“中间状态”

尹广磊

交互设计中界面内容层次和界面间的过渡衔接是相对主要的部分，
这在几年前就写过了这方面的文章。

参考链接：
1.信息呈现是一门层叠的艺术：交互设计表达好从属关系
2.学会三点，即可打造良好的交互设计效果

然而在交互的界面中还有各类各样的一些稍有变化的“中间状态”，我们一起来梳理一下。


1. 窗体或框体的当前活跃状态与非活跃状态



上图中有两个窗口，一前一后，前边的是当前活跃状态，后边的是非活跃状态窗口。
我们可以看到在非活跃窗口中像关闭按钮、侧栏选中的文件夹颜色有明显的变暗，
而在一些区域背景上，颜色有变浅。
这样看来，非活跃窗口中内容的层次对比，较当前活跃窗口中而言是减弱了。
这主要是为了保障活跃窗口的主体显示效果，后边变淡变弱。




上图中是同一个窗口中左右两个框体，鼠标点到哪边时哪边会是活跃高亮状态，
而另一边就会变为非活跃状态，选中那边的颜色值会有降低。


2. 按可用与不可用与否，有启动与禁用状态




3. 按选中与否，有默认与选中状态






4. 按当前焦点位置可以有焦点所在位置状态

注意：跟活跃窗口一样，窗口中的焦点也只有一个，
一个位置获得焦点后，焦点原来的位置也就失去了焦点。

下面是输入框和复选框获得焦点后的不同状态。




5. 因为鼠标而存在的悬停、按下、拖动中状态

鼠标在按钮上悬停和按下状态比较常见。



注意下图：鼠标拖动中状态被拖动的内容是半透明的，防止完全挡住后边的东西。




6. 触摸屏手指按下状态、拖动中状态

点按之后给予反馈，所以按下后可以有一个点按状态。



注意，在列表进入内容时的点按，不只是进入时有，在返回列表时还有。
目的是提示之前的阅读位置，保持视线连贯。
查看文章：微信新版本中缺少了该有的“响应”

触摸屏上的拖动中状态，被拖动内容也是半透明处理的。


7. 检测到说话声音大小的状态




8. 等待中的状态




------------------------------------------------------------------------
以上是一些系统性的中间状态，而且其中有一些不容易注意到它们的细节差别。
还有一些在应用中的各类状态，它本身就是提醒或引起你的注意。

比如：新消息到达、未读、执行失败、成功、危险警示等。
由于比较容易能看出区别，所以暂时没有补充相关配图。
会员朋友可以在下面各自贴一些中间状态图出来。




------------------------------------------------------------------------

配色本身有很多区块，各区块上有不同的内容，各个内容又有不同的交互状态。
所以配色上可能很难保证各个内容在不同区块，不同状态下颜色值设置的都是合理的。
我自己制作了一个详情的记录表，用于记录下每一种内容在不同区块，不同状态下的颜色值。
以便于自己按统一性的标准去检查自己的设计。

walter吴

受教，点赞后的数字增加过程算交互过程中状态和中间状态是一个概念吗？

尹广磊

2# walter吴

嗯，记数状态