六大原则
直截了当：在哪里输出，就允许在哪里输入。让用户直接对对象进行操作，所见即所得。
简化交互：减少操作步骤，缩短交互流程，简化功能层级。根据当前的情境显示合适的界面元素。
足不出户：在当前页面完成操作，减少页面切换，更好保持上下文。
提供邀请：增加功能的可发现性，引导用户进入下一交互层次。
巧用变换：动画过渡的形式，暗示关联性，增强趣味性、增加与用户的沟通。
即时反应：及时响应用户的操作，提供反馈、建议等，防止用户出错。
直接了当
一、页内编辑
what：
在页面中或者使用浮层直接编辑，不用新开页面或弹窗，减少跳转。浮层可以提供更加复杂的编辑器，如日期选择。
一般会有一个操作（按钮、双击等）进入编辑状态。
how：
进入编辑状态的方式，需要给与用户提示。
对称性原则：进入和退出编辑模式应当采取同样的交互风格。
让编辑状态与显示状态平滑过渡。
覆盖层可以同时对多个字段同时调整。
只要可能，应当允许用户拖动覆盖层，以便查看被遮住的内容。
why：
减少页面跳转，可以不脱离上下文，在编辑过程中可以为用户提供参考。
所见即所得，修改后可以立即看到结果，更加直观。
二、利用拖放
what：
利用鼠标拖放可以更改位置、排序、从属关系、分组、对被放置对象执行操作（如删除）。
how：
让用户知道哪些可以拖动、那些不能拖动。
拖动过程中给予视觉反馈，告知可以放到哪里以及拖动后的效果。
why：
直观、便捷、自由度大。
三、直接选择
what：
多个对象时，可以直接点击对象选择部分对象，或者点击按钮/框选全部对象，之后批量进行操作。
how：
区分选择与未选择状态。
提示选择的数量。
支持shift/Ctrl键的多选。
简化交互
四、上下文工具
what：
就相关联的内容放到一起，同时对应的操作放在内容旁边，方便用户操作。
how：
将工具和内容放到一起，让人知道二者之间的关系。
鼠标悬浮显示操作，注意操作部分与显示部分的遮挡关系。
通过开关进入编辑状态，在内容旁显示操作按钮。
双击/右键单击对象显示更多操作。
why：
不同点击内容之后再进去一层才能操作，层次更加扁平，操作流程更加简单。
使用悬浮/开关进入编辑状态，页面显示会更加简洁、清晰。
足不出户
五、覆盖层
what：
通过点击/悬浮激活浮层形式，更加轻量。可以展示操作、详情等。
how：
使用亮盒效果（即周围变暗）突出内容。
注意遮挡对于当前操作和下一步操作的影响。
六、嵌入层
what：
从当前区域挤出一块临时的内容空间，可以执行操作、查看详细信息（如列表中的更多信息，通过点击后行高增加来显示）等。
使用标签页的形式并列放置多项主题的内容。
how：
打开与关闭操作应该保持对称性。
将重要内容放在第一个标签页，许多用户可能不会查看其它标签页。
七、虚拟页面
what：
每页加载一定数量的内容，分页加载，分步显示。
how：
下拉过程中逐步加载/翻页控件/拖动过程中逐步加载（如地图）。逐步加载可先显示占位内容，再显示加载后的内容。
使用上一步/下一步的传送带模式，分屏展示。
还有一种就是类似prizi模式的，先看到一个全貌，可以无限放大进入更细节的页面。
why：
当前页面可以显示大量的内容，创造了一个无尽显示空间的感觉。
八、流程处理
what：
魔法原理：能否通过某种魔法来帮用户完成任务。跳过技术驱动的制约。也就是用户目标是什么，如何直接达成目标。让任务完成的流程符合用户的思维方式。
how：
交互式单页：组合筛选时，一个筛选条件的改变会影响其他筛选条件的值。
嵌入式部件：通过轻量的浮层来显示/完成附加步骤，不影响主线任务的流程。
对话框：使用弹窗来完成一系列分步任务，在弹窗中分页展示，不用整个页面都产生变动。需要给出当前位置的提示。
配置程序：实时预览不同选择的组合结果，及时反馈。
静态单页：从上到下按顺序排列任务，在一个页面内上下拖动完成，减少页面跳转。
单页适合步骤较少的任务。多页适合步骤复杂的任务。同时多页有助于人们聚焦于当前的步骤，上下文/前后页之间的联系比较弱。
提供邀请
九、静态邀请
what：
直接在页面上给出交互提示。
how：
引导操作邀请：将步骤列出来，告知用户需要几步完成操作；空白区域的提示文本；CTA（行为召唤）按钮；露出部分内容，提示还有更多内容。
需要在可发现性与干扰用户之间做出平衡。
十：动态邀请
what：
在用户交互过程中的某个点上吸引用户，并引导他们继续下一步操作。
how：
鼠标悬停是触发；拖动时提示可以拖动的元素以及可以放置的位置；推断人们的下一步操作，并给出提示。
why：
动态邀请的功能没有静态邀请那样直接、明显，但是可以减少页面的视觉干扰，适合于在某种时机下才需要使用的功能。
巧用变换
十一、变换模式
what：
通过变化来吸引、引导人们的注意力。
how：
加亮/减暗，让用户聚焦于某一块内容。
扩展/折叠，在用户交互过程中逐步显示更多内容。
动画效果，表明状态过程（如增加、删除、移动等），增强上下文联系。
变化的方式：滑入滑出、面板互换、翻转、传送带、折叠窗格、缩放、渐进显示。
十二、变换的目的
why：
增加吸引力；增进沟通，告知用户操作的结果、对象之间的关系，更好的保持上下文联系。吸引用户的注意力，更好地引导用户。
即时反映
十三、查询模式
how：
自动完成：输入一部分，系统给出可用选项，如同下拉选项中的可搜索。
实时建议：输入一部分，通过数据库给出常用的搜索建议，如百度搜索时的建议。
实时搜索：输入过程中及时展现结果，无需点击查询按钮。
微调搜索：搜索后对结果进行筛选。
十四：反馈模式
how：
实时预览：在提交输入之前就给与用户反馈，如输入邮箱，用户切换焦点后显示格式错误。或者密码强度的实时提示。
渐进展示：输入一部分内容后再显示与之相关的接下来的内容。如填写用户名后再显示密码输入框。
进度指示：显示任务处理的实时进度，如上传进度条、搜索时加载占位内容、文字输入时显示还可以输入多少字。
定时刷新：自动刷新内容。过于频繁会导致页面抖动剧烈，干扰用户。
网友评论