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

用户头像
深圳/UI设计师/5年前/187浏览
《Web界面设计》--提供邀请
用户头像
熊杰杰

《Web界面设计》真的是写的非常好的一本书,虽然是一本比较老的书籍,但是书上所讲的设计原则,都很适用于当前网页设计

1.前言

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

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

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

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

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

2.静态邀请

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

引导操作邀请

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

  • 文本邀请:


  • 引导操作按钮:

 

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

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

 

  • 注意事项:

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

 

最佳实践:

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

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

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

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

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

 

漫游探索邀请

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

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

优点:

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

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

  • 指引详尽

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

 

缺点:

  • 介绍内容过多,让人容易忘记;

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

 

  • 注意事项:

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

 

最佳实践:

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

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

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

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

  • 保持漫游过程简单。

 

3.动态邀请

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

悬停邀请

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

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

最佳实践:

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

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

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

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

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

预期功能邀请

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

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

最佳实践:

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

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

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

拖放邀请

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

如下图案例所示:


 



最佳实践:

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

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

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

推论邀请

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

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

 

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

更多内容邀请

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

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

 

4.结语

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

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

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

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

 

 

 

 

 


4
举报
|
收藏
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
智能家居中心 简约 UI设计组件库
UI通用设计素材1
APP/小程序商业项目UI模板|99个高保真UI+79个原型
钱包ui模板
新能源APP应用UIKit
【新年UI图标】汽车icon
【新年UI图标】30个图标
UI界面 组件
UI应用平面图标
新拟态风格 UI设计组件库
UI 登录界面设计模板包
3D卡通UI界面图标可爱插画免扣素
高级感金属拟物 UI设计组件库
拟物风质感写实UI卡片合集源文件
Security Camera UI kit
【新年UI图标】珠宝icon
【新年UI图标】会员icon
科技医疗透明柜UI界面设计
【新年UI图标】秒杀icon
手表表盘UI系列
盲盒APP UI设计
高级表盘系列UI源文件
户外旅行飞机情侣假日出行
你可能喜欢
相关收藏夹
地产VI
地产VI
地产VI
地产VI
大家都在看
登录注册