打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
交互反馈方式
链接的移入和移出:网站产品特性不同,整个页面的长度会在一屏显示,在不影响视觉的前提了,我们需要对某个模块弱化或者是强化。比如说网站页脚,用户点击相对比例比较低,我们将弱化显示,当鼠标移入到产品模块当中,模块颜色会加深。在这方面twitter产品是一个不错的范例,默认页脚灰色字体,不会喧宾夺主,当用户鼠标移入到这个模块当中,系统判断用户可能需要通过页脚了解网站的相关信息,文字区域色值改变,由灰色变成黑色。在视觉呈现的方式上,正面反馈可以让我们的用户体验更上一层楼,如虎添翼。


Google plus 的做法在Loading的圆球增加动态的效果,告知用户你所等待的内容正在加载。

  (Google plus加载过程中圆球注水的效果)

  (链接:用户点击过的链接状态)

 文字超出提示文字:例如在Twitter中发表内容时,当文字超出140字时,TWITTER在第一时间用红色负数的数字代表你已经超出的字数,按钮为灰色,不可点击,希望你及时做删减。

  (Twitter文字超出提示状态)

  利用视觉来提供反馈式交互设计

  我们可以改变界面的视觉呈现效果和视觉元素属性来改变反馈的表型形式。譬如在鼠标移入图片增加浮动层,改变风格样式,增加图片圈选的效果,或者页面的配色和大小等方式来实施正面反馈。前面提到链接被点击之前和被点击之后所呈现高对比的背景色。Google plus加载过程中注水的过程,或者用户注册时填写正确时所给出的状态提示图标。再比如Twitter中页脚模块,鼠标划入通过改变文字颜色等方式来突出显示

  在比如一个非常典型的例子,鼠标指针的状态变化。操作者(用户)将鼠标移动到可输入文字的文本区域,指针会发生变化,变成I的标识,意味着可输字。再比如鼠标鼠标指针的状态变化,当用户将鼠标指向一个可交互的界面元素,如链接或者是按钮,他们会希望按钮变成手形,链接变为手形,并增加下划线,来反馈并告知用户链接和文本区别。如果系统在这里并没有做出符合或者达到符合用户预期的反馈,那么用户很有可能会为此感到迷惑,甚至不解。

  利用动画效果提供反馈 一些事

  其实,动画自身就属于视觉表现的一种方式,比如说登陆WordPress管理后台时,用户名和密码错误,登陆框表单会表现出抖动的效果。提示用户输入用户名或密码错误。根据动画的视觉表现是,也可以将动画效果运用在反馈上

  比如说页面内的锚点链接跳转,在系统默认的情况下,锚点跳转没有任何动画过度效果,页面只是很突兀的移动到锚点所指定的位置,而现如今,我们可以在很多优秀注重用户体验的网站中看到具有平滑滚动效果链接的跳转。部分网站在页面在目标到达位置后,将锚点所指定的位置进行高亮显示。这种细微的改变使得整个交互方式更加符合用户的直接。同时可以很清晰的讲交互结果呈现给用户。

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
谈什么是卡片式设计? | 人人都是产品经理
Google桌面5软件体验分析
14个HTML5实现的效果合集 | 雷锋网
2011年全球20大3D网站 立体中国
交互设计:多屏幕使用环境下的产品模式
有效的互联网产品设计
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服