`
阿尔萨斯
  • 浏览: 4106719 次
社区版块
存档分类
最新评论

具有引导性的移动应用界面设计模式

 
阅读更多

编者按:本文来自一本新书,Mobile Design Pattern Gallery(移动应用设计模式画廊),译者微博ID为@C7210,Web设计与前端玩家,现就职于大众点评网产品部用户体验设计组(UED)。

  前段日子,我们的团队接到了一个新的移动应用项目。悲催的是,当时所有的移动方面的设计师都已经被其他项目买票了,剩下的设计师所擅长的领域基本都在企业级应用或效率工具等方面。

  于是,我制作了一个包含大量移动应用截图的快速教程,希望帮助他们尽快熟悉新方向。结果真心好,培训效果喜人,这套教程也成为我们手头的移动应用设计模式参考,并逐步编纂成书。

  我(英文原文作者)个人对其中关于“引导”方面的话题最有爱,在这里分享给大家。需要提一下,虽然这些设计模式都是基于移动应用归纳出的最佳实践方式,但它们在某种程度上同样适用于移动化的网站设计。

  还记得第一次使用Photoshop时的情形吗?给我印象最深刻的就是一个空白画布和左侧的一堆强大工具。话说,当时我也只是假设它们很强大,实际上不能确定,因为面对这样一个界面,我完全不知道从哪里开始使用。于是我只好又买来一本“Teach Yourself Photoshop in 24 Hours”,花点时间自学先。(24小时系列教程,小C我只看过JavaScript一本,印象里真心烂。)

mobile-design-patterns-photoshop-5

  10多年之后的现在,移动市场中出现了成千上万的应用,每个类别中,都有好几打功能几乎完全相同的。这些应用多数是免费的,所以我们时常会随便挑一个下载安装,花5分钟研究一下那些直觉性很差的用户界面,然后卸掉,再去装另外一个玩玩看。

  Layar Reality Browser是一款基于“增强现实”(Augmented Reality,简称AR)技术的移动应用,它的初期版本如下图所示:

mobile-design-patterns-layar-reality-browser

  是什么让我经由这块大片灰色的界面得到了“增强现实”?答案就是“引导”。对于移动应用来说,“引导”的本质就是一种小提示,当用户第一次使用app的时候显示出来,向用户推荐一些常用功能的操作方式,或引领他们完成一个预设的教学目标。简单却用心的引导方式可以很有效的在初次体验中提升用户满意度。

  移动应用的引导模式大致分为八类:

  • 对话(Dialog)
  • 提示(Tip)
  • 游历(Tour)
  • 视频演示(Video Demo)
  • 半透明标注(Transparency)
  • 嵌入(Embedded)
  • 持续(Persistent)
  • 探索(Discoverable)

mobile-design-patterns-invitation-model

  对话(Dialog)

  带有介绍文案的简单对话框是移动应用中最普遍的引导方式,也许是因为在开发编码方面相对容易些的缘故。不过由于太常见了,这种模式也非常容易被用户直接无视。

  保持介绍文案的言简意赅是非常重要的,没人愿意在这里阅读大量内容。另外有一点需要注意,对于非常重要的信息,最好在应用内部留有能够重新阅读这些提示内容的入口。下面的截图出自TargetWeightActionMethod这两款应用的首页。

mobile-design-patterns-invitation-model-dialog

  提示(Tip)

  这种方式比起“对话”来说,具有更强的上下文相关性。我们可以在应用的任何一个视图界面中使用提示,而不仅是首页。在eBay的app中(如下图左侧所示),“保存搜索结果”的功能就是通过提示来吸引眼球的。试想如果这里不使用如此明显的提示,用户的目光会很容易忽视掉这块原本是呈现标题的地方。另外,Android中用来引导用户对首页进行自定义的操作提示也是个很典型的范例(下图右侧),有些类似Windows中的曲别针君。

mobile-design-patterns-invitation-model-tip

  ShoppingList会在用户使用的过程中渐进式的对一些主要功能进行提示,引导用户操作。

mobile-design-patterns-invitation-model-tip-my-shopping-list-app

  通常的原则,是在当前需要突出的相关功能旁边放置提示气泡,保持介绍文案的简短,并且在用户开始执行对应的操作时移除提示。

  游历(Tour)

  游历可以带来终极的引导体验——通过对关键屏和重要功能的连续展示,在最短的时间内引领用户对应用进行全面的探索。Nike GPS应用是该方式的一个不错的例子,它特别为移动设备进行了优化,包括明了的介绍、生动的图片、简单的导航以及足够明显的关闭按钮。这套游历会在应用的首屏出现,用户可以在7屏的介绍中自由的前后浏览或关闭。另外,在导航方面,Nike GPS同时使用了页面指示(圆点)与页码计数(“2 of 7″)来清晰的展示当前游历的步骤。CalcBot也用到了类似的导航

mobile-design-patterns-app-invitation-model-tour

mobile-design-patterns-app-invitation-model-tour-nike-gps-calcbot

  视频演示(VideoDemo)

  对于某些依赖于特定操作方法的应用来说,视频演示也许是最有效的引导方式了,因为它可以动态的展示应用的实际操作。Roambi通过这种这种方式展示了它们的大量可视化数据,并且直观的演示了用于导航和浏览内容的手势。Google Goggles则直接在演示中插入了一段Youtube上的视频。

  我们通常可以使用这种方式来展示应用的关键功能点,或是从标准操作流程的角度出发,演示应用的操作方式。另外,需要在视频中提供基本的控制功能,包括停止、暂停、音量控制等。

mobile-design-patterns-app-invitation-model-demo-google-roambi

mobile-design-patterns-app-invitation-model-demo-google-goggles

  半透明标注(Transparency)

  与其他具有引导性的设计模式相比,半透明标注的方式对于触屏设备来说有些独特。它通常会在应用的首屏出现,以一个覆盖在真实界面上方的半透明层为背景。Pulse和Phoster是比较典型的例子,通过半透明标注的模式,他们快速并且可视化的向用户展示了怎样对内容进行导航。

  我们应该以正确的方式使用半透明标注,而不是试图通过这种效果来弥补应用界面本身的拙劣设计。当用户开始产生相应的交互行为时,要及时的移除标注。

mobile-design-patterns-app-invitation-model-transparency-pulse-phoster

  嵌入(Embedded)

  与其他模式不同,“嵌入”不会在目标界面加载之前呈现。在这种模式中,相关的引导内容会融入到界面设计当中,直到被真正的内容覆盖移除掉。Mini Diary和PageOnce都是典型的例子,通过嵌入式的提示,他们可以立刻推动用户进行相关操作。

  在一个界面中可以存在多个嵌入式引导提示。在设计应用的界面时,要对这些嵌入式元素进行差异化处理,通过图片等方式使它们能与普通内容很好的区别开。

mobile-design-patterns-app-invitation-model-embedded-mini-diary-pageonce

  持续(Persistent)

  这种方式同样会融入到界面当中,并始终存在。例如,Jamie Oliver’s Recipes会始终建议用户使用横屏的方式获取额外的功能。Spring Pad则结合了“嵌入”与“持续”两种模式——用来引导用户添加自定义内容的“+”符号会始终存在,并不断被正式内容替代。

mobile-design-patterns-app-invitation-model-persistent-recipes-spring-pad

  探索(Discoverable)

  所谓的“探索”式引导,听上去也许有些矛盾,但它是一种鼓励用户进行某种特定交互操作的有效方式,同时不会影响到应用界面本身的设计。通常,这类引导会在某些操作的触发下呈现,例如下拉或侧翻页面。

  要对这种引导方式的使用保持谨慎。它最常规的作用是刷新或加载更多内容

mobile-design-patterns-app-invitation-model-discoverable-ebay-timeline

  viaBeForWeb
http://www.leiphone.com/mobile-ui-design.html

分享到:
评论

相关推荐

    移动应用界面设计模式–搜索、排序、筛选

    去年年底,我们曾经学习过一篇“具有引导性的移动应用界面设计模式”,其英文原文来自O’Reilly动物园的一本新书,”MobileDesignPatternGallery”,就是封面上是个大公鸡的那本儿。今次这篇则是来自于本书的第四章...

    “四川美食”安卓应用程序APP-产品开发策划书.doc

    6.3.3. 其他引导性关键词 54 6.3.4. 会员服务 54 6.3.5. 自助查询类 54 6.3.6. 活动类服务 55 6.3.7. 其他特色类 55 6.4. 微信公众号设计 56 6.4.1. 会员服务 56 6.4.2. 产品介绍 56 6.4.3. 活动展示 57 6.4.4. 商家...

    全国计算机类说课大赛一等奖:CSS样式表的使用教学设计.docx

    由CSS样式表的使用引导学生对网页界面设计的分析。 三 学生分析 教学对象为我校计算机应用专业中职二年级的学生。学生学习网页制作已有一个学期,对这节课之前的学生情况分析如下: (一)学生知识能力分析 学生能...

    El Inputte for .NET---最新标准的输入界面控件

    针对最终用户在计算机输入操作中可能导致输入错误、输入陷阱、误操作等方面的各种使用情况,El Inputte采用对输入控制防患于未然的特别设计方式,帮助软件开发人员自然地实现流畅的软件输入界面。El Inputte for ...

    计算机应用技术(实用手册)

    2.DM分区的应用:首先用GHOST安装光盘引导起计算机,选择DM分区进入工作界面。 16 第三章 CMOS密码的清出与系统密码的清出 23 1、跳线短接法 23 2、下电池短接 23 二.系统密码清除,把CMOS第一引导设为光驱引导,...

    美食俱乐部APP产品策划书.doc

    6.3.3. 其他引导性关键词 54 6.3.4. 会员服务 54 6.3.5. 自助查询类 54 6.3.6. 活动类服务 55 6.3.7. 其他特色类 55 6.4. 微信公众号设计 56 6.4.1. 会员服务 56 6.4.2. 产品介绍 56 6.4.3. 活动展示 57 6.4.4. 商家...

    网页与Web程序设计 课件 ppt 机械工业出版社 part1

    本书全面讲授网页设计与制作技术、JavaScript脚本编程和Web数据库应用技术。本书以目前最流行的网页设计三剑客Dreamweaver 8、Fireworks 8和Flash 8作为支撑平台,由浅入深,系统地介绍了网页的构思、规划、制作和...

    客客威客系统KPPW 2.2 GBK Beta.zip

    1、界面设计提升,用户交互体验改进; 新版对前端界面用户体验做了细致的改进,保持原有风格不变情况下对首页、列表、详细页、发布等套页的展示进行改造优化,前端界面更简洁大气。在大量采纳威客站长的建议后,新...

    网络安全之网络备份解决方案.doc

    同时运行的"Cue Cord"(智能卡)应用程序可引导用户循序渐进地完成备份与复原工作。 无与伦比的保护 无论用户采用何种Novell网络操作系统进行连网,ARCserveIT都能为其提供妥善的 保护。ARCserveIT可对采用与NDS兼容的...

    windowsnt 技术内幕

    理解NTFS分区和文件大小限制 NTFS POSIX.1符合性 为NTFS分区整理碎片 可移动介质和Windows NT 理解运行第三方磁盘工具造成的问题 支持基于Win32的应用程序 理解Windows NT对附加技术的支持 知道在什么时候不能使用...

    高级软件架构师复习提纲

    引导团队朝共同的方向前进/简化决策的制定过程,确保决策的一致性/激励团队/强化解决方案目标/保持对解决方案质量的重视 35、测试的目标包括以下哪些内容:找出所有团队必须解决的缺陷/按照功能规格说明书验证解决...

    信息架构:超越Web设计(第4版)(全彩).[美]Louis Rosenfeld(带详细书签) PDF 下载 高清 完整版

    为了引导你通过这个广阔的生态系统,本书为数字设计提供了经得起时间考验的基本概念、方法和技术。用户体验设计师、产品经理、开发人员和数字设计中涉及的所有人,都要学习如何创建帮助人们与你的信息进行交互的语义...

    rfc中文文档目录,包含部分翻译

    RFC2005 IP移动性的适用性陈述 RFC2011 SNMPv2 管理信息基础用于Internet 协议使用SMIv2 RFC2012 SNMPv2 管理信息基础 用于传输控制协议使用SMIv2 RFC2013 有关采用SMIv2用户数据报协议的SNMPv2管理信息数据库 ...

    中文版RFC,共456

    RFC2005 IP移动性的适用性陈述 RFC2011 SNMPv2 管理信息基础用于Internet 协议使用SMIv2 RFC2012 SNMPv2 管理信息基础 用于传输控制协议使用SMIv2 RFC2013 有关采用SMIv2用户数据报协议的SNMPv2管理信息数据库 RFC...

    RFC中文文档-txt

    RFC2005 IP移动性的适用性陈述 RFC2011 SNMPv2 管理信息基础用于Internet 协议使用SMIv2 RFC2012 SNMPv2 管理信息基础 用于传输控制协议使用SMIv2 RFC2013 有关采用SMIv2用户数据报协议的SNMPv2管理信息数据库 RFC...

    驱动精灵(可以备份驱动,也可以升级驱动)

    2、我们追随用户需求,从易用性的角度出发,全面大幅改进了驱动精灵界面设计。 3、主界面新增事务区,事务区可显示驱动与设备的状态及相应的解决方案。 4、针对不同用户需求,2011版本提供三种驱动支持模式,分别是...

Global site tag (gtag.js) - Google Analytics