恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
体验设计之移动端中的微交互
0.0°
2019-08-08 自译外文 经验/观点 原作者: Nick Babich 举报 6414 129 259 2

著名魔术师达里尔·菲茨基(Dariel Fitzkee)曾经说过,“魔术既要有细节也要有表演。”交互设计就是这样。设计师们想把页面布局作好,如果细节处理不好,解决方案便会失败。魔术就在于细节。这就是为什么精心设计的微交互会让体验大幅度提升。


显示系统状态

JakobNielsen的第一个启发式用户界面设计声明:“系统应该始终在合理的时间内做出适当的反馈让用户了解正在发生的事情。”这意味着用户界面应该通过提供反馈让用户及时了解正在发生的事情。应用程序不应该让用户猜测——它应该告诉用户发生了什么,微交互可以通过适当的视觉反馈帮助用户理解。


数据上传和下载过程是应用微交互动画的绝佳机会。

Image title数据下载动画 (Image: Nick Buturishvili)

另一个动画是“下拉刷新”,它在移动设备上表示内容更新过程。一个令人愉快的刷新动画可以让用户咯咯地笑。

Image title

下拉刷新(图片:Toma Reznichenko)

重点:动画提供应用程序进程状态的实时通知,使用户能够快速了解正在发生的事情。


使按钮和操作可感知

用户界面元素,如按钮和控件,即使它们位于一层玻璃的后面,也应该是可感知的。按钮可以模仿常见物理对象的交互。简单的说,你可以通过对用户输入的视觉响应来增加清晰度。

Image title

(图片来源:谷歌)

重点:视觉反馈之所以起作用,是因为它能满足用户对确认的自然需求。点击一个应用程序感觉很好,因为你知道发生了什么。


创建有意义的过度

你可以在导航之间平滑的动画向用户传递信息,解释屏幕上元素排列的变化或强化元素的层次结构。

图标可以从一种形状变成列外一种形状,在不同的时间提供双重功能。

Image title

(图片来源:谷歌)

动效设计可以有效的引导用户的注意力,既可以提供信息,也可以给用户带来快乐。这对移动设备和智能手表帮助非常大,因为在这些屏幕上无法输入大量的信息。

Apple的ios UI 的转场就是一个很棒的例子。在下面的示例中,用户选择文件夹或应用程序并放大到其详细视图(或直接到应用程序的主屏幕),

Image title

(图片来源:Rian Van Der Merwe)

另一个很好的例子是通过颜色和持久元素在两个状态之间创建视觉连接的动画。这使得过渡平稳而轻松。

Image title

重点:微交互能够在页面之间建立可视连接,并增加UI的清晰度。


帮助用户开始使用

微交互在用户入门期间是非常有用的。入门流程中完美的用户体验和动画会对首次使用该应用程序的用户产生巨大影响。他们通过突出显示最重要的功能和控件,在应用程序启动后指导和教育用户。

Image title

图片:Ramotion

重点:微交互可以展示信息并帮助用户有效地实现目标。


突出显示UI界面中的变化

微交互能够引起用户的注意。在很多情况下,动画用于吸引他们注意重要的细节(例如消息通知)。但是,请确保动画具有功能性,适用你的用户。

Image title

通知(图片来源:Arjun Kani)

重点:微交互可以为用户提供良好的视觉提示。


添加令人愉快的细节

微交互动画的最基本用途是过渡。但是,当动画以超出标准操作范围的方式使用时,应用程序能够真正的取悦用户。下面的按钮能够完美地改变状态并提供双重功能:通知用户并创造一个奇迹。

Image title

社交媒体分享(图片:Kei Sato)

重点:时刻关注用户情感,这在交互中起着非常重要的作用。


设计微交互时应该考虑什么?

当你创建包含过多元素的视觉设计时,请记住以下几点:

1、使微交互几乎不可见且完全正常。

确保动画符合功能目的,不会感到尴尬或恼人。对于频繁和次要的操作,响应应该是适度的,而对于不常见和主要的操作,响应应该更加强烈。

2、保持持久

微交互必须能够长期使用。在第一百次使用后,第一次看起来有趣的东西也可能会变得烦人。

3、遵循Kiss原则

过渡设计的微交互可能是致命的。微交互不应该使屏幕过载,导致长时间的加载过程。相反,他们应该通过即时传递有价值的信息来节省时间。

4、不要从零开始

你要时刻了解目标受众及其背景。利用这些知识使你的微交互更加精确和有效。

5、与其他UI元素创建视觉和谐

微交互应该与应用程序的风格相匹配,帮助产品建立品质感。




更新:2019-08-08

收藏

129人已收藏

王雨_Vision

微信公众号:RVDesign

  • 55

    作品

  • 3535

    粉丝

  • 130

    关注

  • 营销动效怎么落地|用PAG动效,支持输出3D图层!
  • 动效探索祭
  • OPENERS ROLE ANIMATION
  • iLAB WebSite Design

    猜你喜欢

      2019-08-08 自译外文 经验/观点 原作者: Nick Babich 举报 6414 129 259 2

      体验设计之移动端中的微交互

      0.0°

      你确定要举报体验设计之移动端中的微交互

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年08月08日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      259
      129
      2

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录