移动应用的引导模式设计

2024-05-09 21:20:02

文字工作搞的有点儿奔放了啊,一直玩到周日晚间这般时候;任何其他事情恐怕都难以让自己有这样的劲头了吧。也难说。其实周末两天主要是收拾家当准备搬家;忙里抽闲做做内容,纯当休闲娱乐。 互联网的一些事

  前段日子,我们(英文原文作者)的团队接到了一个新的移动应用项目。悲催的是,当时所有的移动方面的设计师都已经被其他项目买票了,剩下的设计师所擅长的领域基本都在企业级应用或效率工具等方面。于是,我制作了一个包含大量移动应用截图的快速教程,希望帮助他们尽快熟悉新方向。结果真心好,培训效果喜人,这套教程也成为我们手头的移动应用设计模式参考,并逐步编纂成书。 yixieshi

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

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

f416a2014a90f6034c9787f43912b31bb151edf6.jpg

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

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

77638b529822720e75f5f9497bcb0a46f31fabda.jpg

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

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

  ●对话(Dialog) 互联网的一些事

  ●提示(Tip)

  ●游历(Tour)

  ●视频演示(Video Demo) yixieshi

  ●半透明标注(Transparency) yixieshi

  ●嵌入(Embedded) 互联网的一些事

  ●持续(Persistent)

  ●探索(Discoverable) yixieshi

3404ed03738da97778089d98b051f8198718e3f6.jpg

  对话(Dialog)

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

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

eec68322720e0cf3adcc55480a46f21fbf09aada.jpg

  提示(Tip)yixieshi

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

8897688da9773912f1019ed2f8198618377ae2f6.jpg

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

0c9a17f3d7ca7bcb7640dc9cbe096b63f724a8da.jpg

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

  游历(Tour)

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

0d19b2773912b31bf34bd69a8618367adbb4e1f6.jpgd7e32212b31bb051bc03a89b367adab44bede0f6.jpg

  视频演示(Video Demo)互联网的一些事

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

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

7267ccca7bcb0a468f19908a6b63f6246a60afda.jpg4786a81bb051f819c30218f9dab44aed2f73e7f6.jpg

  半透明标注(Transparency)yixieshi

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

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

cd8fab51f81986187060f4374aed2e738ad4e6f6.jpg

  嵌入(Embedded)

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

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

055f1146f21fbe091465d8a76b600c338644adda.jpg

  持续(Persistent)互联网的一些事

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

74d2e91fbe096b63762245e30c338744eaf8acda.jpg

  探索(Discoverable)

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

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

cec5e3198618367a9dae646e2e738bd4b21ce5f6.jpg
  英文原文:Patterns for mobile application design

转载于:https://blog.51cto.com/hsiaoyang/1138149

移动应用的引导模式设计相关推荐

  1. 如何设计真正基于通证经济落地的商业生态模式设计?

    如何设计真正基于通证经济落地的商业生态模式设计? 作者:廖国东 我一直在寻找一种不存在群体互害的商业模式,而且财富的积累也不是一个零和游戏,所以我从没放弃过探索或创造出一种通赢运行机制:只要合理的利益 ...

  2. 商业模式新生代_商业模式设计方法视觉化思考——《商业模式新生代》笔记之九...

    前言:慢慢来,比较快."财不入急门","您赚不到认知之外的钱"点击头像关注我,和您一起每天学习一点商业思维,提升自己的商业认知.我始终相信,方向对了,认知到了, ...

  3. 从壹开始微服务 [ DDD ] 之一 ║ D3模式设计初探 与 我的计划书

    缘起 哈喽大家周四好!又是开心的一天,时间过的真快,我们的 <从壹开始 .net core 2.1 + vue 2.5 >前后端分离系列共 34 篇已经完结了,当然以后肯定还会有更新和修改 ...

  4. 模式设计概述:代理者模式

    分布式系统模式 分布式相关的模式设计有大概三种模式,分布式系统与集中式系统相比需要完全不同的软件.管道和过滤器模式,微核和代理者模式. 代理者模式 代理者模式体系结构的强制条件是 组件应该能够访问其他 ...

  5. 分享基于EF6、Unitwork、Autofac的Repository模式设计

    目录 分享基于EF6.Unitwork.Autofac的Repository模式设计 一.实现的思路和结构图 二.Repository设计具体的实现代码 三.Repository设计的具体的使用 四. ...

  6. 分享基于Entity Framework的Repository模式设计(附源码)

    关于Repository模式,在这篇文章中有介绍,Entity Framework返回IEnumerable还是IQueryable? 这篇文章介绍的是使用Entity Framework实现的Rep ...

  7. mongodb数据合并设计_「时间序列数据」和MongoDB(二)-模式设计最佳实践

    在上一篇博客文章时间序列数据与MongoDB:第一部分-简介中,我们介绍了时间序列数据的概念,然后介绍了一些可以用于帮助收集时间序列应用程序需求的发现问题.对这些问题的回答有助于指导支持大容量生产应用 ...

  8. 服务器的BIOS引导模式设置为什么,Legacy BIOS 引导模式和 UEFI 引导模式

    Legacy BIOS 引导模式和 UEFI 引导模式 服务器配备有统一可扩展固件接口 (Unified Extensible Firmware Interface, UEFI),可以将其配置为支持 ...

  9. 引导win7+linux系统安装,win7 + ubuntu16.04LTS双系统安装(Legacy引导模式)

    前言 由于虚拟机运行在本人的老机器上实在是比较卡,又还不想换机器,再加上linux的向(ai)往(zhe)之(teng)情,所以决定装个ubuntu(16.04LTS)双系统,并计划将ubuntu变为 ...

  10. 联想笔记本进入pe_联想笔记本bios怎么设置U盘启动|legacy和uefi双引导模式启动

    [文章导读]最近有很多网友问联想笔记本bios怎么设置U盘启动呢,刚买来笔记本安装电脑系统发现找不到我制作好的U盘启动,联想2016年后出来的笔记本默认都是uefi引导的,有些U盘启动制作工具只支持l ...

最新文章

  1. mysql定义结束_mysql自定义开始结束日,以周为维度
  2. jQuery基础---filter()和find()
  3. mongodb中批量将时间戳转变通用日期格式
  4. OpenCV 计算物体的凸包
  5. evc4工程移植vs.net2005所碰到的问题积累
  6. JavaScript 模块化七日谈
  7. python爬取新闻发送微信_如何利用 Python 爬虫实现给微信群发新闻早报?(详细)...
  8. Sharepoint-拾贝
  9. 一篇不大正经的关于数论的总结(未完
  10. mysql最大字段数_mysql最大字段数量及 varchar类型总结
  11. mariadb修改默认字符集
  12. 内核parameter mem解析
  13. 很不错标签云js插件
  14. 普通固定电话机使用与原理简介
  15. python中pass语句的出现是为了保持程序结构的完整性_Python 为什么要有 pass 语句?...
  16. 对话奥比中光CV博士:今年三维重建与计算机视觉可以关注哪些热点?
  17. Windows Project2016如何增加加班工时。
  18. i5-12400和i5-12400F有什么区别 i512400和12400f哪个好
  19. 物理学与计算机相关参考文献,中国科学技术大学 计算物理学 教材与参考文献...
  20. Unity开发之-Unity入门简介(近万字攻略)

热门文章

  1. 一个华为人在华为工作十年的感悟 --徐家骏
  2. B. 在哈尔滨的寒风中
  3. 显著性水平 置信度 置信区间 实例讲解
  4. Vue动态渲染本地图片
  5. 【个人喜好诗词之一】归去来兮辞
  6. VR,“看房”容易“卖房”难
  7. php 计算壬子,壬子日是哪一天,壬子日怎么算
  8. 笑是理想的热情与态度
  9. php控制wifi上网时长,腾达路由器家长控制功能怎么控制孩子上网时间
  10. 北京h5游戏制作平台有哪些,h5游戏公司实例评测