《Web界面设计》--提供邀请

1.前言

《web界面设计》本书包含的六大设计原则：直截了当、简化交互、足不出户、提供邀请、使用变换、即时反应。这6大设计原则都能给我们在交互设计中带来很多的指导和思考

web中的富交互设计面临的一个主要挑战就是易发现性。对用户给出邀请是成功的交互式界面的关键所在。这里我将结合我在网上找的一些案例，给大家分享6大设计原则中的“提供邀请”。

下面我们来看QQ空间照片支持编辑的功能。

“邀请”就是引导用户进入下一个交互层次的提醒和暗示，通常包括实时的提示信息和预期功能，以表明在下一个界面可以做什么。

上述例子中，设计人员选择了鼠标悬停给出邀请；另一种方案时任何时候都显示邀请。下面我将从“静态邀请”和“动态邀请”的角度，和大家分享和探索。

2.静态邀请

静态邀请就是直接在页面上给出提示，有引导操作邀请、漫游探索邀请两种模式

引导操作邀请

邀请用户执行一个或多个主要任务。在视觉上可以表现出多种不同样式。常见类型：「文本邀请」、「引导操作按钮」、「白板式邀请」、「未完成邀请」。

• 文本邀请：

  
  

• 引导操作按钮：

 

• 白板式：给出该区域应有功能的提示，并引导用户创建内容

• 未完成邀请：给出未完成区域/提示，邀请用户完成任务

 

• 注意事项：

视觉干扰：引导操作邀请的问题是它会与页面上的其他内容争夺用户的眼球

 

最佳实践：

• 针对主要操作使用引导操作邀请；

• 针对简单的步骤使用引导操作邀请；

• 把引导操作的区域设计得容易吸引用户注意力，但不要干扰整个页面的视觉外观；

• 可以利用空白区域来引导用户操作；

• 可以利用（看起来）未完成的区域引导用户操作。人类的天性会促使用户想要“完成”它。

 

漫游探索邀请

在用户首次登录时出现少量「探索点」，当用户点击「我知道了」，能快速切换到下一个探索点。

漫游探索邀请：是向用户介绍新功能的好方法，尤其是对于那些设计优良的界面。下图如蓝湖新用户登录时的功能介绍：

优点：

• 漫游探索内容与网站功能联系密切；

• 指引提示文案清晰准确；

• 指引详尽

• 容易退出，每个提示框都有跳过的按钮，用户不需要一直跟着他的提示走

 

缺点：

• 介绍内容过多，让人容易忘记；

• 探索的最后，应该明确告知用户探索结束，提示可以新建项目/继续学习等

 

• 注意事项：

它不是「创口贴」，漫游并不会让难用的站点变得好用，仅通过它不能解决界面交互的真正问题。

 

最佳实践：

• 在重新设计站点或发布新站点并需要向用户介绍一系列功能是，可以使用漫游探索邀请；

• 尽可能密切在漫游探索邀请与站点本身的联系；

• 要保持漫游探索邀请简明扼要，还要使其容易退出且容易重新启动；

• 不要指望通过漫游解决界面本身存在的问题；

• 保持漫游过程简单。

 

3.动态邀请

响应用户在特定位置执行特定操作的方式，提供特定的邀请。动态邀请的方式主要有：悬停邀请、预期功能邀请、拖放邀请、推论邀请、更多内容邀请

悬停邀请

鼠标悬停时，给用户下一步操作的提示。

豆瓣电影列表，展示电影宣传画、主题、评分以及购票，当悬停时展示更多内容，提示用户点击进入后将会有更多内容。

最佳实践：

• 当操作不如内容重要，而且希望界面整洁时，使用悬停邀请；

• 实现悬停邀请时，可以通过改变光标、改变背景和现实提示条共同配合表明所邀请的操作；

• 悬停邀请期间，尽力为用户提供单击后产生结果的预览；

• 通过熟悉的概念引出新概念，有助于用户快速理解。最常见的元素是按钮、链接、下拉箭头等众所周知的图标；

• 当用户悬停于某个对象上时改变光标，意味着操作将作用于鼠标下方的对象。（如鼠标变成手指/竖线等）

预期功能邀请

通过熟悉的方式（如按钮/图标/反转箭头方向）邀请用户操作。例：对人们而言，门把手的预期功能是可以抓握、扭转或按压。

悬停时出现下拉箭头。众所周知的下拉箭头通常都表示单击可以看到一组选项或菜单，用于邀请用户通过单击查看可以执行的操作。

最佳实践：

• 通过人们习以为常的概念来引出新的、不熟悉的交互方式；

• 使用可感知的预期功能来给出邀请提示；

• 把邀请安排在适当的上下文中，特别是要靠近交互的主体。

拖放邀请

包含15个事件：页面加载、鼠标悬停、鼠标按下、拖动启动、拖动离开原来的位置、重新进入原始位置、进入有效目标、退出有效目标、进入吴小目标、进入非特定目标、悬停于有效目标、悬停于无效目标、放置被接受、放置被拒绝、放置在父容器上。对于这种复杂的交互过程，要引导用户顺利完成，关键是要在恰当的时刻显示邀请。

如下图案例所示：

 

最佳实践：

• 通拖放期间，尽可能利用多个瞬间确保用户理解每一次细微的邀请；

• 在鼠标位于可拖动区域时，应该改变光标形状；

• 为用户拖动明确提供一个可以抓握的空间。

推论邀请

交互期间以可见方式向用户表明系统推断出的用户想法。如下图：

用户点击「赞」后，同时系统分析（既然用户喜欢这篇文章，那么可能对这一类文章都有兴趣）并提供开启「精打细算」的邀请。

 

用户在绘图软件中吸颜色的的时候，界面回随着鼠标移动不断给出提示。

更多内容邀请

有更多内容时，利用悬停揭示其存在，同时显示少量更多内容。

常见的轮播图，下方轮播器展示内容数量，图片会隔一定时间自动轮播，或者通过鼠标悬停/点击查看更多内容。

 

4.结语

“静态显示”和“动态响应”之间的平衡：

• 如果操作非常重要，且可以处理的不那么密集，应选择“静态显示”；

• 如果操作与内容相比不那么重要，而且主要目的事保证易读性和界面简洁，则应该选择“动态响应”。

无论是动态邀请还是静态邀请，都是引导用户顺利进入下一个交互层次的有效方式。