设计优秀app的秘密

好的产品往往做好了两点:功能和细节设计。功能吸引用户使用你的产品,细节设计将你的用户留下。优秀的细节设计能够使你的产品在众多竞品中脱颖而出,优秀的微交互设计往往能够让用户在初次使用产品时就能够留下深刻的印象。作为一个交互设计师,在设计微交互方案的时候不仅要考虑视觉上的冲击力,还要想办法赋予其信息传递的功能。

什么是微交互?

微交互是产品中存在的某一个时刻,它完成了某一个小的任务。Dan Saffer在他的书中(Microinteractions)第一次描述了微交互的概念,这些小细节专注于服务这些必要的功能:

  • 交流回馈或者动作的结果回馈
  • 完成某个单独的任务
  • 增强直接操作的感觉
  • 帮助用户在视觉上展示操作的结果,以及避免错误

一些明显的微交互例子包括:

当你将iPhone设置成静音时伴随出现的的震动提醒、屏幕上的静音icon

界面动画提示是否能够点击(当鼠标移到按钮上方时按钮的颜色改变)

为什么使用微交互?

微交互是在对用户一些自然的需求/欲望的认知和反馈。用户从微交互提供的视觉、触觉等反馈中确认他们的行为被接受。微交互还可以引导用户正确的使用系统/产品。

定义微交互的使用情景

微交互的一个特点是它可以被放置在很多的场景下,辅助不同的动作行为。总体来说,微交互的使用场景包括:

展示系统/产品的状态

Jacob Nielsen在“可用性启发原则”中指出:让你的用户时刻了解发生的事情,用户期望对自己的行为立即得到反馈。但是有些情况下,app需要时间来等待行为处理完成后才能向用户发出反馈。因此,产品界面需要向用户指明此刻正在发生的事。

下载进度表

或者标明用户所在的位置:

scrolling bar progress

Tips:不要让你的用户感到无助,让你的用户了解实时的状态并且向其展示进度(比如进度条能够让用户了解进度,消除疑惑)

提示更新

我们有时需要向用户推送通知来保证用户了解到事态的更新。动画可以做到这一点,动画可以吸引用户的注意力,避免用户忽视掉重要的信息。

new incoming message

Tips:微交互里的动效应该遵循KISS原则(keep it simple, stupid),应该尽量简单直接。

关联上下文

使用动效来将用户的注意力平滑的在导航页面间切换,向用户解释页面里元素之间的关系,以及页面跳转的来龙去脉。这对于移动设备非常有用,因为屏幕的尺寸限制,移动界面中每一页的内容都很紧凑,使用动效来阐述内容之间的联系非常实用,(关联阅读:我在“如何合理的在移动应用中使用动效”一文中也有涉及)

Tips:尽量让每个页面的导航简洁,这样可以有效避免用户在页面跳转中迷失。两个状态之间的却换应该清晰、平滑、快捷。在视觉上统一所有的交互形式,降低用户的学习成本。

输入可视化

数据输入是应用中非常重要的环节,微交互可以使用现有的元素来展示数据输入的反馈,从而将这步操作变得更加高效。

Tips:微交互能够帮助用户理解信息格式,来源,帮助用户便捷输入信息。

引导互动

微交互可以鼓励用户、吸引用户与产品交互。它可以在用户体验中产生同理心。但是需要谨慎使用微交互,保证其在感官上不会冒犯你的用户。时刻谨记-不要让用户感到厌烦,Keep it simple, stupid.

Tips:关注用户的情感反馈,因为它在用户体验中起到很重要的作用。多做用户研究和情景调研,设计能被用户频繁使用的微交互方案。

值得谨记的

  • 微交互向用户展示动作反馈,通知以及信息框架结构
  • 微交互应该通过转移用户的注意力、愉悦用户等来达到加快/缩短信息数据的传输
  • 了解你的用户以及使用微交互的背景,能够让你的微交互方案更加的精准与高效
  • 微交互必须能够支持长时效的使用,在第一次使用时感到惊喜的方案,可能在第一百次使用时就变成了困扰。
  • 微交互方案应该人性化一些,并且在视觉上保持和谐。用户在使用的时候应该感到流畅,微交互的方案应该尽可能的从现实生活中获得启发,比如使用拟物化等手段,从而降低学习成本。

总结

用心设计,思考用户使用产品的情景,再设计这些微交互时多运用一些生活中常见的操作模式、物体的运动轨迹、常见的行为方式等。产品的易用性来源于对细节的打磨,伟大的设计不仅仅在功能上满足用户的需求,还要在微交互的设计上打动人心。

原文发布于微信公众号 - 交互设计前端开发与后端程序设计(interaction_Designer)

原文发表时间:2016-03-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏PPV课数据科学社区

电商网站分析实践(上)

给网站带来流量并不是一件容易的事,而在用户到达网站后如何吸引用户与网站发生互动更是一个艰难的挑战。如何建立一个用户喜欢的并能持续回访的一个站点?所有的网站营销人...

43610
来自专栏ThoughtWorks

实践中的精益产品设计 | TW洞见

今日洞见 文章作者来自ThoughtWorks:Natalie Hollier,译者来自:田萌。图片来自网络。 感谢ThoughtWorks校对小组:宋国强、杨...

3509
来自专栏程序员互动联盟

互联网架构师必备技能

对于任何一个软件开发人员来说,架构师都是一个令人向往的角色。就连世界首富比尔盖茨在2000年卸任公司ceo的同时,也担任了微软公司的荣誉角色“首席软件架构师”...

3784
来自专栏Java学习网

前端工程师是怎样一种职业

前端工程师是怎样一种职业 前端工程师已经是大家不再陌生的一个软件行业的工种了,尽管这一工种诞生也没几年。作为一名从业三年的前端工程师,我尝试结合业界标准与我的理...

3148
来自专栏互联网杂技

前端工程师是怎样一种职业

前端工程师已经是大家不再陌生的一个软件行业的工种了,尽管这一工种诞生也没几年。作为一名从业三年的前端工程师,我尝试结合业界标准与我的理解,来尽可能诠释一下前端工...

3916
来自专栏数据和云

【演讲实录】下一代企业级应用架构管理体系

在IT系统的建设和管理中,敏态和稳态似乎不可协调的两个问题,那么在企业IT系统的管理中,如何根据需求去合理管控,今天将通过王璞老师在第七届数据技术嘉年华上的分享...

3345
来自专栏web前端教室

零基础,怎么学习,才能学成一个优秀的web前端开发?

很抱歉,优秀的web前端开发都不是学出来的。都是练出来的。 一、要多写,因为很多js的书,只是看的话,是看不明白的。要写了才有自己的亲身的感受,才能没有遗漏的...

1948
来自专栏华章科技

给网站数据分析师的五个建议

通常网站管理者都想通过网站分析来得到一定的效果,但不知道怎么做才好。实际上能否灵活的使用网站分析很大程度上取决于你如何利用网站分析。这里给大家介绍一下网站分析师...

1163
来自专栏非著名程序员

程序员:请你不要对业务逻辑「嗤之以鼻」

最近感受很多,感慨也很多。我发现很多程序员对于处理业务逻辑都是「嗤之以鼻」。感觉自己天天写业务逻辑代码,改 Bug 都没有时间学习,没有时间实现个人成长?

1.2K1
来自专栏web前端教室

【思路】学习前端的思路问题

大家好,今天是周五,祝大家周末快乐,今天我们聊一下《学习前端的思路问题》。为什么要聊这个呢,因为群里的小伙伴经常会问我,前端怎么学,学了很久没方向啊,学什么东西...

1111

扫码关注云+社区

领取腾讯云代金券