移动设计

(翻译)移动应用设计中的亮点

2016-03-07  本文已影响40人  麻辣土豆丝

原文地址:http://babich.biz/top-design-moments-for-mobile-app/

当你回顾最近几年最成功的交互设计时,显而易见的赢家是那些将动效基础处理得完美无缺的主儿。他们从自然的人类活动中汲取灵感,接着在我们还没有注意的时候就拆掉了真实与虚拟之间的壁垒。让我们来回顾一下最重要的设计技巧,以及它们能如何为我所用。

分层界面及动画

现代界面拥有越来越多的层级,充分利用了Z轴。这种方法提出了界面深度的概念,让交互体验变得更加可感知。

移动应用环境是一个三维空间,拥有x.y.z轴

长投影的使用给人以深度的印象。投影给设计增加了一点趣味,但又不会分散太多的用户注意力。带有长投影的图片和元素仿佛要跃屏而出一般。

谷歌的Material Design的层级架构

如果想要充分利用这项新技术,那么使用动画是一个很不错的选择。动画让画面更具有流动性,也使得用户体验更有意义。新款手机的技术支持让设计师和开发人员可以创造出非常棒的动画效果。带动画的新手指导可以大大吸引用户的眼球,同时在他们初次使用应用时进行引导。

Remotion为Muzo应用设计的引导页

另外一条非常重要的动画规律是——对用户的操作进行反馈。尽可能让界面从用户触摸屏幕的点开始变化。

用户可以感知到变化起始点

但是不要因为这个原因就使用动画。你在使用动画前应该考虑好为什么要使用的原因。

贴士:处理得好的话,这种方法会带来逼真的3D效果,并且明确UI元素和交互之间的关系。深度、层级和动效之间的结合有助于建立层级的概念。

滑动手势

屏幕不仅仅是一块触摸区域,也可以用来承载手势操作。滑动手势常被用来执行返回、回到菜单、切换当前项目或触发操作,例如喜欢或删除项目。

滑动手势举例

最常见的滑动交互之一是Tinder的右滑手势。这个界面手势要有多好就有多好——简单易懂。不仅如此,它的循环播放功能更产生现象级效果——使用Tinder变得好有趣。这让用户在应用上“再多停留五分钟”。

ios版Tinder

另一个优秀案例是iOS邮件应用的导航,人们可以轻松地通过滑动手势完成星标邮件或删除信息等操作。

iOS版本的邮件应用

贴士:尽管手势自身在一开始可能不那么显而易见,但一旦用户发现并习得了它,那么它将成为一个使用中的愉悦点,减少用户流中的步骤,增进用户体验。

在设计时考虑拇指大小

用户不喜欢复杂的手势,例如三指触屏或双手同时操作。最近一份针对1333名路人的研究显示75%的智能手机操作都是单指完成的。

尽管我们经常提到“手指友好”的设计,但其实大拇指承担了大部分的工作

在设计时,需要考虑这款app在几个不同场景下的使用状态。人们并不总会在一个能用双手和界面进行交互的场景下使用应用。

印象笔记简化了控件,使用悬浮按钮(floating action button)来承接最重要的用户指令。

安卓版印象笔记

贴士:为懒人设计,这会增加你的app的使用量。

尽量做到极简

最终的目的是要让我们的界面变得简洁,让它们更具功能性,更加好用。你需要关注以下几点:

简洁的配色方案:使用更简洁的配色方案总会与扁平化设计或“少就是多”的设计理念联系起来。但精简界面会提升用户体验,并且使用太多颜色会对整体观感产生负面影响。

一款应用只用一个字体:设计一款应用时,考虑该如何让字体更有气势,可以在字重和维度上做文章,不要使用不同的字体。

使用元素而不是线条作为分割线:还有别的分割内容的办法,例如使用区块,留白或颜色等。

图标的使用要保持一致:一套完整的图标可以告诉用户如何使用这款app,如何与之交互。想想购物车图标吧,它可以用来代表结账或查看商品。用户没有必要考虑以何种方式导航并完成购买,这个图标元素指导他们完成合适的操作。

极简设计的优秀案例是谷歌的日历应用。点击相应区域后,它会变成一个单独的层,并逐渐展开,显示出此事件的详细信息。

安卓版的谷歌日历

贴士:UI设计的方向正朝着移除一切不必要的元素进发,更多地关注于功能性。使用更少的线条和分隔符,简化配色,使用简单的字体,这些都会让你的界面看上去更清爽,更现代,更具功能性。

结论:

极简风格的界面和其他的设计技巧都是通往优秀设计道路上的好帮手,但它们绝不是目标。设计的终点应该是创建一套和用户的心理模型自然匹配的交互系统。

简洁的用户操作流,清晰的视觉效果,容错性佳的设计,这些都有助于产生无缝式的用户体验。你的交互系统应该着眼于在清晰明了的视觉沟通中解决问题。

上一篇下一篇

猜你喜欢

热点阅读