查看: 1172|回复: 0
打印 上一主题 下一主题

[UI设计] 优秀的移动端UI设计如何打磨细节?

[复制链接]

1240

主题

11

听众

6720

积分

版主

Rank: 7Rank: 7Rank: 7

纳金币
5474
精华
6

荣誉管理 论坛元老 突出贡献 优秀版主

跳转到指定楼层
楼主
发表于 2017-2-27 16:21:08 |只看该作者 |倒序浏览
 ui设计的细节很重要,它不仅仅体现在静态的元素上,动效和微交互也是如今UI和UX设计中最重要的细节。想要打造优秀的移动端UI设计,微交互和动效设计是绕不开的问题,今天的文章我们来聊聊这个~
  著名魔术师 Dariel Fitzkee 曾经说过:“魔术是表演和细节的艺术。”而交互设计同样是如此。设计师大多能够很好的控制设计的大方向,但是细节处理不当的话,会让优秀的设计方案功亏一篑,要不怎么说“细节当中藏有魔鬼”呢?也正是因此,那些精心设计的微交互会让用户体验显得精巧而到位。
  想要了解微交互到底对你的设计有什么好处,那么你最好将你的设计思路勾勒出来。用来绘制原型和线框图的工具有很多,这里推荐使用近期比较火的Adobe Experience,也就是Adobe XD,它是专门为线框图和交互设计而生的。
  呈现系统状态
  对于UI的状态设计,Jakob Nielsen 曾经说过,“系统应当始终通过合理的反馈告知用户当前正在发生的事情,所处的状态。”这也就意味着界面需要通过反馈让用户明白发生了什么,而无需用户猜测。而带有动效的微交互正是以提供视觉反馈而闻名。
  想要展现创意十足的微交互动效,数据的上传和下载过程都是不错的选择。
1.gif
另外一个经典的案例就是下来刷新,这是目前移动端UI中内容更新最常见的交互手段,一个畅快的下拉刷新微交互动效能够让用户欲罢不能。
2.gif
让按钮和控件容易被感知
  即使隔着手机的玻璃屏幕,界面上的按钮和控件也应当是易于被感知,让人觉得它们是真实有形的。运动轨迹和视觉线索能够以即时反馈的形式,弥合这种现实和虚拟图像之间的界限,让人看起来、感觉上都是在直接操作。UI界面中的按钮能够模仿现实中的按钮反馈来强化交互,简单的说来,就是让用户输入和操作的视觉反馈更加明显一些。
3.gif
视觉反馈之所以有用,是因为它符合用户对于交互的期望,当用户针对某个控件进行了操作,而它们给予了对应的反馈,这种感觉是非常良好的。
  构建有意义的过渡
  动效一个很重要的功能,是展现状态和内容的转变与过渡,用来解释屏幕上各种元素的排布和层次。
4.gif
图标可能会从一个形状变为另外一个形状,在不同的时间以不同的功能呈现,而这种过渡和转变就是靠动效来表现的。
  动效设计的优势不仅仅是单纯的引导,它让转变和过渡的等待过程变得更加有趣,愉悦用户。在移动端设备上,过渡动效显得尤为重要,它使得大量的信息呈现不再那么单调。这种情况在Apple Watch 上表现的尤为明显。
5.gif
Apple iOS系统的UI设计中就很好的利用了这些有意义的过渡动效。下面的案例中,用户点击文件夹或者APP,图标当大扩展到整个屏幕,展现出细节和详情。
6.gif
另外一个案例则来自Material Design,过渡动效不仅呈现出控件和不同界面之间的关系,还通过色彩点名两者的关系,并且展现出了状态的改变。这样的过渡过程是流畅、轻松且高效的。
  帮助用户快速入门
  动效和微交互在用户快速入门的时候是非常有用的。当用户初次使用应用的时候,流畅的用户体验和贴心而不繁复的引导对于用户的初次使用和交互有着直接的影响。设计师将最关键、最重要的信息通过引导告知用户,同时还要控制好整个引导流程足够简明而舒适。
7.gif
这个过程中,动效和微交互让信息展现更加顺畅,帮助用户更加高效地抵达目标。
  凸显UI中的变化
  微交互能够直接吸引用户的注意力。在绝大多数情况下,设计师通过动效化的微交互将用的注意力吸引到某个重要的细节上去(比如通知推送)。不过,在这个过程中,要确保动效是功能性的,并且对于用户而言是合理而能接受的。
8.gif
增加令人愉悦的细节
  
游客,如果您要查看本帖隐藏内容请回复

分享到: QQ好友和群QQ好友和群 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
转播转播0 分享淘帖0 收藏收藏0 支持支持0 反对反对0
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

手机版|纳金网 ( 闽ICP备2021016425号-2/3

GMT+8, 2025-8-17 09:02 , Processed in 0.070374 second(s), 31 queries .

Powered by Discuz!-创意设计 X2.5

© 2008-2019 Narkii Inc.

回顶部