威海app开发:6个方法教你打造优秀UI动态微交互
为了更好理解你的设计如何得益于微交互,它如何帮助你草拟 App 的设计。Adobe 推出了一个新的框架设计应用 Experience Design (Adobe XD) ,它让你设计线框并使设计可交互。你可以免费下载体验。
明确系统状态
Jakob Nielsen 提出了关于界面设计状态的启发,「系统应当在合理的时间里,通过合适的反馈来保持告知用户将要发生的事情。」这意味着,用户界面必须持续给出反馈,带用户跟上节奏。App 不该引起用户不断的猜测,而应该告诉用户当前发生的事情。微交互通过合适的视觉反馈来帮助你实现这一切。
数据的上传与下载场景,是一个应用动态微交互的绝佳机会。
同类的动画,还有广为人知的「下拉刷新,」 这类动画引发了移动设备上的内容设计创新。愉悦的刷新动画总会博得用户会心一笑。
要点:对于 App 的过程状态,动画提供实时的告知,使得用户可以快速地理解发生的一切。
让按钮和操控可触知
用户界面元素和操控元件应该是可触知的,即使它们身处屏幕下方。视觉和动态指引能够桥接这个间隙,通过及时响应输入以及主观操纵感十足的动画。界面按钮的交互可以模仿自常见的现实物体。简单来说,你可以对用户的输入行为给予视觉反馈,以此提升界面感知的清晰度。
要点:视觉反馈因得体地满足了用户对接收信息的自然欲望而产生作用。用户穿梭于 App 之中,时刻感觉掌控一切,这非常棒。
打造有意义的转场
你可以借助动画让用户在导航和内容之间顺滑地穿梭、来解释屏幕中布置的元素的变化、或以此强化界面元素的层级。
图标可以在不同的时间里,演变不同的形状,服务于双重功能。
动态设计以信息告知和取悦用户的手段,有效地吸引用户的注意。在移动设备和智能手表上显得尤其出色,毕竟方寸之间容不下大量信息的堆砌。
Apple 的 iOS 用户界面是个优秀的实例,如下图所示,用户选中一个文件夹或者 App,视角会接着拉近到详情视图、或直达 App 主界面。
另一个优秀的实例:通过颜色变化或元素的流动,串起两个状态之间的视觉关联。这样的动画让切换显得轻松顺滑。
要点:微交互建立页面间的视觉联系,也明确了用户界面。
帮助用户开始
微交互在信息载入过程发挥了重大作用。出色的载入体验与动画,对用户在初次沉浸于 App 时产生了极大的冲击。它们在唤起 App 时突出最重要的特性和操控,给予用户引导和教育。
要点:微交互呈现信息并帮助用户高效地抵达目标。
强调界面的变化
微交互可以引导用户的注意力。在许多情况下,动画用于吸引用户对重要细节的关注(例如查阅「通知」)。然而,必须确保该动画服务于功能,并且在用户角度,是个得体的存在。
要点:微交互对用户而言,可以是良好的视觉指引。
增加愉悦的细节
微交互动画最基础的应用是转场。然而,App 动画在突破标准动作范围的限制下,真切地取悦于用户。下面的按钮无缝地切换状态,同时满足双重功用:告知用户、使其怦然心动。
要点:关注用户的情绪,它们在界面交互中发挥了巨大的作用
设计微交互时需要考虑的
当你的视觉设计包括以上讨论的元素时,关注以下几点:
让你的微交互几乎不可见,并且完全是功能性的 确保动画适用于服务功能目的,不要让用户感到尴尬或打扰。对于常用的以及次要的操作,建议响应是适度的。而对于低频的、主要的操作,响应则应该更有份量。 长驻于心 微交互应该经得起长期使用的考验,初见倾心也可能日渐厌烦。 遵循 KISS 原则 过度设计的微交互可以是致命的。微交互不应该使得屏幕信息过载,造成漫长的载入。相反地,它应该通过迅速地传达有价值的信息来节省时间。 不从零开始 你总会了解目标受众以及他们的背景。使用这些信息来让你的微交互更加精确并且有效。 与其它界面元素建立视觉协调 微交互的风格应该与 App 的整体匹配,营造和谐的产品感知。总结:平庸的产品与伟大的产品差就差在细节上,怎么设计微交互,即位于功能之内或周边的那些交互细节。你的手机怎么静音?你怎么知道有新邮件了?怎么修改应用的设置?诸如此类的交互细节,既可以毁掉一个产品,也可以成就一个产品。
相关阅读推荐
-
威海本土app怎么快速吸粉?
不管是全国的还是威海的,所谓运营app的目的,无非是增加客户的使用量,增加知名度,与此相对应,明星在当今社会是拥有...
-
威海内容型app运营方案
内容型APP做运营的时候,需要先把内容运营的框架搭建好。 一.APP刚成型,内容从何而来 内容社区类APP中内容的流通方向为:...
-
威海新睿小编谈APP开发步骤
有没有一瞬间,你想知道手机上的app是怎么做的? 你可能有一个app的想法,你只是开始调查开发移动app将需要什么。下面,...
APP资讯文章推荐阅读
-
威海新睿小编谈APP开发步骤
有没有一瞬间,你想知道手机上的app是怎么做的? 你可能有一个a.....
-
威海商城APP开发找哪家开发公司
威海APP开发公司新睿网络发现:商城APP开发是一款便捷的线上购物平.....
-
威海如何选择APP开发外包公司?
近几年为了迎合移动互联网时代,威海很多企业都迫切需要一款自己.....
-
为什么威海app开发公司报价差距如此大
APP需求功能一样,给不同的威海开发公司会收到不同的报价,有的报.....
-
从互联网运营的角度看威海银行APP运营
互联网运营到底是干啥的?每次我都会沉思很久,为什么呢?因为似.....
相关案例推荐
-
叉车兄弟
类型:各类平台
-
辣妈帮
类型:各类平台
-
马上吃
类型:新闻政府
-
调料街(购物商城类)
类型:商城购物