移动端设计分析

2018-11-27  本文已影响0人  茶水间咖啡师

原文:Nick Babich |  译:程琳琳

当你研究近来最成功的交互设计的时候,会发现是那些完美的执行底层交互的应用成了赢家。它们在我们没有注意的情况下悄悄的消除了操作障碍,下面来简述一下原理。

1.分层与动画

现代界面变得更加利用分层,更充分利用了Z轴。这种方法给姐妹带来深刻的感觉,使体验更加切合实际。

(如图:移动应用环境是具有X轴,Y轴和Z轴的3D空间)

在三维空间中,利用长阴影制造出深度的感受,让具有长阴影的图像和元素从页面层次中凸显了出来。

(如图:Google材料设计层结构)

运动和动画是采用层的原理,从而为用户体验提供流动性和更多意义。而新的移动设备和技术能力使设计师和开发人员能创造出非常好的动画。动画演示教程是捕获用户注意力的好方法,同时教育他们如何在第一时间使用该应用程序。

(如图:通过动画演示如何登录Muzo App)

动画的另一个重要原则——响应用户的操作。在可能的情况下,界面变化的震动中心必须是设备屏幕的触摸点。

(如图:让用户注意到可触发的源点)

但是不要为了动画而使用动画,你的动画效果背后应该有明确的动机。

2.滑动手势

屏幕不仅是触摸目标,还是手势目标。滑动手势用于返回、到达菜单、更改当前项目或触发诸如或删除项目之类的操作。

(如图:滑动动作示例)

最容易是别的滑动交互之一是Tinder的滑动操作,简单易懂。而且,Tinder的滑动功能的使用率是惊人的——使用Tinder变得上瘾、有乐趣。

(如图:iOS版的Tinder应用程序)

另一个很好的例子是苹果iOS邮件导航。邮件应用程序可以更轻松地通过滑动来标记和删除邮件。

(如图:iOS邮件应用)

另外:虽然这可能难以自我发现这个功能,但一旦发现和学习,这样的手势就可以成为使用乐趣,并可以通过减少用户流程中的步骤来改善用户体验。

3.设计时——拇指在心中

用户不需要复杂的手势,如三指敲击或需要双手使用手机。最近在街上使用智能手机的1333人的研究发现,约75%的智能手机使用是一个拇指。

虽然我们经常提到“手指友好”的设计,拇指做大部分的工作。在设计时,考虑到您的应用程序将在多个环境中使用,人们不会总是处于可以使用多个手指或双手与UI进行交互的情况。Evernote简化了控件,并使用浮动操作按钮进行最重要的用户操作。

(如图:Evernote应用)

4.追求极简主义

最终目标是简化我们的界面,使其更加功能和可用。您需要关注以下时刻:

简单的配色方案。使用简单的颜色方案总是与平面设计相关联,而“少即是多”的方法。但是,简化界面可以改善用户体验,同时拥有太多颜色可能会对其造成负面影响。

一个应用程序,一个字体。当设计一个应用程序时,想想如何通过玩重量和尺寸使排版功能强大,而不是不同的字体。

简化元素,但不仅仅是用线条。还有其他方法可以使用,诸如使用块、间距或颜色的方法来分离内容。

使用一致的图标集。告诉用户应用程序的工作原理以及如何与它进行交互。想想使用作为标识符的购物车图标来查看购买项目,用户不必考虑如何进行购买,这个元素指示用户进行适当的操作。

“极简主义”设计的好例子是日历应用程序。脱离表现层,日历中的操作将成为一个单独的层,操作后,界面并开始切换,显示有关事件的详细信息。

(如图:适用于Android的Google日历应用)

UI设计正在逐渐消除任何不必要的元素,更多的关注功能。较少的线条和分隔线,简单的配色方案和单一字体将为您的界面提供更清洁、现代和凸显功能的感觉。

结论

极简接口和其他设计原则肯定是实现良好设计的一种方式,但它们不是目标。这个背后的目标是创建一个自然地与用户的心理模型一致的交互系统,简单的用户流程,清晰的视觉效果和宽容的设计,帮助创造出让用户无缝体验的错觉。你设计的互动系统应旨在通过清晰的视觉沟通来解决用户的问题。

上一篇下一篇

猜你喜欢

热点阅读