交互设计和视觉设计是界面设计共同的组成部分，其中交互设计充当着骨架支撑的作用。从宏观上，交互设计是将产品中众多的功能以及功能之间的逻辑关系一一阐述清楚，这就是设计师需要产出的交互设计流程，一个大的交互流程中可能包含更细微的交互流程；而从微观角度看，微交互也是设计中重要的一环，它决定了产品是否友好。如果说可用性是检验交互设计的基本标准，那么微交互就是要考虑用户的期望和体验，可用性保证产品基本功能完备且方便；而微交互在于给用户一些真正能打动用户心灵，产生情感联系的东西。

一个完整的交互设计流程有以下几步：

1. 认识产品所要解决的问题

2. 收集能解决这一问题的用户相关的信息

3. 提供这一问题的解决方案

4. 验证所提出的解决方案

可用性测试的方法主要有用户测试(usability testing).  AB 测试（A/B Test）. 五秒测试 (five second test) . 远程测试(remote testing) . 热图测试(heat map testing).

5. 改善解决方案

（斜体字来源于网络）

以下以有云青云控制台界面设计来说明交互设计在产品中的实际表现。

青云dashboard

有云dashboard

整体来看，青云控制台的色彩设计延续了其官网的风格，以绿色和深灰色为主要色，不同深浅的灰色为辅助色，但功能区划分比较细碎使各部分之间联系不够紧密，整体感较弱。元素间距较小，比如进度条看起来排布密集，会给用户一定的压迫感。

有云控制台使用深蓝，不同深浅的灰色为主要颜色，大量使用细线条这一设计元素，元素间距适中，视觉上给人感觉透气和轻松，整体风格较为统一。不足是重点不够突出，视觉指引不明显。

交互设计按功能对页面进行了区域划分：顶部导航，侧边导航和内容区。

顶部导航

有云dashboard顶部导航

青云dashboard顶部导航

比较而言，青云顶部导航区域的利用率较高，有APP下载，消息中心，工单系统入口，帮助，创建账户锁，切换中英文功能，鼠标移至最右端按钮上滑出最近操作的侧滑菜单，另外做得较好的细节是每一个图标都有相应的文字说明，用户的学习成本较低，操作效率较高。

侧边导航
 点击logo右侧按钮可以展开或收起导航栏，这个设计最大程度延伸了右侧的内容展示区域。

青云垂直方向上可以展开下一级列表显示更多内容，有云在水平方向上展开，表现形式是一级二级两个导航栏，这在视觉上层级关系更清晰，但占用了较多的有效展示面积。

以下以创建工单，创建云主机，查看详情等高频操作为例说明内容区的交互设计：

1.创建工单

青云控制台中创建工单是以弹窗的形式实现，相比较使用页面跳转而言弹窗不需要很长的加载时间，用户不会因为等待时间长而放弃操作，同时弹窗面积较小能够将用户的注意力集中到有效的内容区域。

2.创建云主机

有云需要两步，青云四步。青云每一步有明确的位置提示，使用户心理上因及时反馈产生的控制感对完成整个流程更有信心，与此同时右侧专门划分出计费区域，问题是只有在步骤二和步骤四才会对计费产生影响，这一设计就显得没有太大必要。

相较而言有云的流程简洁很多，计费也不会占用过多的空间。

3.查看详情：

点击表单中名称进入另一页面，这里相比有云左滑出详情页面这种方式更为直观和便捷。

这里再以dashboard登录注册页面为例讨论：

登录与注册保持了统一的样式，用户在切换过程中表单始终保持在一个稳定且统一的状态下；全屏幕的登录注册表单能够让用户把精力集中在表单上，帮助用户在最短的时间内找到入口并开始使用产品。

简单地说，微交互是用户的操作触发设备而产生的动作。但是这些动作并非简单的因果关系，它们的相互作用是以人为中心设计的，而设备和数字界面的反馈是参考自然和人的行为来做的。而这也是微交互所蕴含的秘密：以更“人性化”的方式，呈现出用户预期中的操作。

基本的输入框加亮hover状态就是最成功的微交互之一。

当你考虑如何设计一个微交互的时候，不要将它视作为一个单独的动作或者任务，你要思考的的是当你要达到什么样的用户体验，如果要实现它需要界面怎样变化。(来源于网络)

纯粹为了漂亮或者噱头的动效是取巧，不是微交互。微交互应当长期存在，细节设计应当贴心而不让人烦恼。过度设计是许多产品失败的原因之一，平滑合理的设计才能造就对的产品。