微交互怎么玩?一份简单实用的微交互设计指南-UI设计 PS-优质IT资源分享社区

admin
管理员
管理员
  • UID1
  • 粉丝29
  • 关注4
  • 发帖数581
  • 社区居民
  • 忠实会员
  • 原创写手
阅读:217回复:0

微交互怎么玩?一份简单实用的微交互设计指南

楼主#
更多 发布于:2016-06-06 19:34

 功用差不多的情况下,怎么让用户一见倾心?微交互是决议用户形象的要害之一,今日这篇好文列举了运用微交互的注意点,以及五个最多见的运用场景,全是干货,来收!

好的商品通常做好了两点:功用和细节规划。

功用招引用户运用你的商品,细节规划将你的用户留下。优秀的细节规划可以使你的商品在许多竞品中锋芒毕露,优秀的微交互规划通常可以让用户在初度运用商品时就可以留下深入的形象。作为一个交互规划师,在规划微交互计划的时分不只要考虑视觉上的冲击力,还要想办法赋予其信息传递的功用。

啥是微交互?

微交互是商品中存在的某一个时刻,它完结了某一个小的使命。Dan

Saffer在他的书中(Microinteractions)首次描绘了微交互的概念,这些小细节专心于效劳这些必要的功用:

沟通回馈或许动作的成果回馈

完结某个独自的使命

增强直接操作的感受

协助用户在视觉上展现操作的成果,以及防止过错

一些显着的微交互比方包含:

当你将iPhone设置成静音时随同呈现的的轰动提示、屏幕上的静音icon。

界面动画提示是不是可以点击(当鼠标移到按钮上方时按钮的色彩改动)。

为啥运用微交互?

微交互是在对用户一些天然的需要/愿望的认知和反应。用户从微交互供给的视觉、触觉等反应中承认他们的做法被承受。微交互还可以引导用户正确的运用体系/商品。

定义微交互的运用情形

微交互的一个特点是它可以被放置在许多的场景下,辅佐不一样的动作做法。整体来说,微交互的运用场景包含:

展现体系/商品的状况

Jacob

Nielsen在“可用性启示准则”中指出:让你的用户时刻了解发作的工作,用户希望对自个的做法当即得到反应。可是有些情况下,app需要时刻来等候做法处理完结后才干向用户宣布反应。因此,商品界面需要向用户指明此时正在发作的事。

▲ 下载进度表

或许标明用户地点的方位:

Tips:不要让你的用户感到无助,让你的用户了解实时的状况而且向其展现进度(比方进度条可以让用户了解进度,消除疑惑)

提示更新

咱们有时需要向用户推送告诉来保证用户了解到事态的更新。动画可以做到这一点,动画可以招引用户的注意力,防止用户忽略掉主要的信息。

Tips:微交互里的动效应当遵从KISS准则(keep it simple, stupid),应当尽量简略直接。

相关上下文

运用动效来将用户的注意力滑润的在导航页面间切换,向用户解说页面里元素之间的联络,以及页面跳转的来龙去脉。这关于移动设备非常有用,由于屏幕的尺度约束,移动界面中每一页的内容都很紧凑,运用动效来论述内容之间的联络非常有用。

Tips:尽量让每个页面的导航简练,这么可以有用防止用户在页面跳转中迷失。两个状况之间的却换应当明晰、滑润、方便。在视觉上一致所有的交互方式,下降用户的学习本钱。

输入可视化

数据输入是运用中非常主要的环节,微交互可以运用现有的元从来展现数据输入的反应,然后将这步操作变得更加高效。

Tips:微交互可以协助用户了解信息格式,来历,协助用户快捷输入信息。

引导互动

微交互可以鼓舞用户、招引用户与商品交互。它可以在用户体会中产生同理心。可是需要谨慎运用微交互,保证其在感官上不会得罪你的用户。

时刻谨记:不要让用户感到厌烦,Keep it simple, stupid.

Tips:重视用户的情感反应,由于它在用户体会中起到很主要的作用。多做用户研讨和情形调研,规划能被用户频繁运用的微交互计划。

值得谨记的

微交互向用户展现动作反应,告诉以及信息框架结构

微交互应当经过转移用户的注意力、愉悦用户等来到达加速/缩短信息数据的传输

了解你的用户以及运用微交互的布景,可以让你的微交互计划更加的精准与高效

微交互有必要可以支持长时效的运用,在首次运用时感到惊喜的计划,可能在第一百次运用时就变成了困惑。

微交互计划应当人性化一些,而且在视觉上坚持调和。用户在运用的时分应当感到流畅,微交互的计划应当尽可能的从现实日子中取得启示,比方运用拟物化等手法,然后下降学习本钱。

总结

用心规划,考虑用户运用商品的情形,再规划这些微交互时多运用一些日子中多见的操作形式、物体的运动轨迹、多见的做法方式等。商品的易用性来历于对细节的打磨,巨大的规划不只仅在功用上满意用户的需要,还要在微交互的规划上打动人心。

优质IT资源分享社区为你提供此文。

本站有大量优质UI设计(含PS,软件 网页 平面设计等)教程视频,资料等资源,包含UI设计基础教程,高级进阶教程等等,教程视频资源涵盖传智播客,极客学院,达内,北大青鸟,猎豹网校等等IT职业培训机构的培训教学视频,价值巨大。欢迎点击下方链接查看。

UI设计教程视频

优质IT资源分享社区(www.itziyuan.top)
一个免费,自由,开放,共享,平等,互助的优质IT资源分享网站。
专注免费分享各大IT培训机构最新培训教学视频,为你的IT学习助力!

!!!回帖受限制请看点击这里!!!
!!!资源失效请在此版块发帖说明!!!

[PS:按 CTRL+D收藏本站网址~]

——“优质IT资源分享社区”管理员专用签名~

本版相似帖子

游客