手机移动端APP界面设计之引导设计篇

时间:2016-04-02

网站模版网(www.genban.org)的小编打算这周分享一些比较适合初学者的APP界面设计教程。也算是对之前关于APP界面设计做一次阶段性的总结。

今天要跟大家来分享的关于手机移动端APP界面设计之引导设计篇。

之前有聊过App引导页最佳设计之5个UI界面设计步骤

1、移动APP界面设计分享:文字阅读体验设计篇

2、APP界面设计教程:移动界面设计尺寸篇

3、APP图标设计教程之APP图标设计素材篇

如今很多手机移动端APP应用都会在初次加载时提供“教练画板”形式的进行新手引导或教程任务(画着各种使用说明的半透明浮层)。此类引导有时确实可以帮助用户以正确的方式使用产品。但是有时候又觉得没有这个必要。

那如何来定达到合理的APP引导设计呢?

手机app引导设计一:引导语句必须简短,聚焦在最重要的任务上

因为在移动情境中,人机会话时间更加有限,注意力更容易分散。而人类的短期记忆难以保存太多的内容,信息在20秒左右的时间内就会开始被遗忘。因此,相比于在一个浮层上一次性展示UI当中每个地方的说明,不如一次聚焦在一两个上面。减少说明的焦点可以使用户将注意力放在最重要的说明上。一次展示的说明越少,用户越有可能去阅读并记忆下来。
同时交互设计师也要学会挑选合适的时机,为用户提供最重要的引导提示,一次一个,使他们更容易理解和明白。

02-mobile-application-hint-instruction-tutorials-ui-ux-design.png

也要避免接连不断的展示引导信息,这样不仅会产生短期加重记忆方面的问题,而且会让新用户觉得你的应用过于复杂,望而生畏。
如果需要展示引导的文字太多,可以概括分成几个步骤来引导,简化这些文字。
手机app引导设计二:尽量使用图形元素

我们都知道,图形对于文字更易于记忆和了解。最合理的方式是:

“恰当的图形元素” +简短的文字”,并整合到一个展示层面上。

这种方式即有利于用户阅读,也可以使多步骤的流程更直观、易懂、易记忆。值得推荐。

04-mobile-application-hint-instruction-tutorials-ui-ux-design.png
另外,我们采用的图形尽量简单易懂,形象具体的。避免让人产生歧义的图标。反倒会误导我们的移动用户,损失设计交互体验。
手机app引导设计三:切记与实际UI界面混淆

必须使引导提示在外观上与实际界面元素有着明确的区分,否则引导提示就是在干扰实际界面,用户也会迷茫,甚至会把教学内容当做功能界面,试着与其交互。

06-mobile-application-hint-instruction-tutorials-ui-ux-design.png7-mobile-application-hint-instruction-tutorials-ui-ux-design.png
要使提示内容与普通的界面元素区分开来,最简单的方式是使用不同的字体。我们通常可以见到很多手写字体风格的提示,确实可以与实际UI当中的文字产生鲜明的对比。

 

手机移动端APP界面设计之引导设计总结:

当我们在进行手机移动APP应用的引导设计的时候,一个重要的原则就是尽可能的保持简短。
聚焦于当前界面中最主要的交互任务,以图文并茂的方式提供最易扫描的说明内容,避免一连串的提示。同时,还要确保你的提示内容不会与应用的实际UI混淆在一起。

以上这些手机移动APP引导设计观点和内容,部分摘自于http://beforweb.com/的《关于移动应用的新手引导设计》

上一条:APP扁平化设计,界面到底如何来配色呢? 下一条:苹果iPad界面设计规范、尺寸等指导性设计知识

相关文章

最新文章