阅读更多

0顶
0踩

移动开发

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

2011-12-15 17:22 by 正式编辑 sherry617 评论(0) 有4259人浏览
本文内容来自一本新书《Mobile Design Pattern Gallery》(《移动应用设计模式画廊》)。以下是部分内容的译文:

我个人对“引导”方面的话题最有感触,在这里分享给大家。虽然这些设计模式都是基于移动应用归纳出的最佳实践方式,但它们在某种程度上同样适用于移动化的网站设计。

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

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



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

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

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

一、对话(Dialog)

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

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


二、提示(Tip)

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



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



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

三、游历(Tour)

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




四、视频演示(Video Demo)

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

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




五、半透明标注(Transparency)

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

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


六、嵌入(Embedded)

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

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


七、持续(Persistent)

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


八、探索(Discoverable)

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

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



Via uxbooth.com
  • 大小: 49.1 KB
  • 大小: 209.4 KB
  • 大小: 18.3 KB
  • 大小: 139.8 KB
  • 大小: 208.7 KB
  • 大小: 213.8 KB
  • 大小: 140.1 KB
  • 大小: 89.8 KB
  • 大小: 161.7 KB
  • 大小: 174.9 KB
  • 大小: 208 KB
  • 大小: 216.1 KB
  • 大小: 205.8 KB
  • 大小: 50.2 KB
  • 大小: 26 KB
来自: Be For Web
0
0
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • JSF 下拉框

    jsf 下拉框其实很好用,就是<h:selectOneMenu ..../>标签,具体写法如下:  其中webinput_dropDown是绑定数据,提供UIInput的类的抽象,loginBean是需要绑定backing bean的类.webinput_dropDown.t

  • 如何通过js获取html文本框中的值,js与jquery获取input输入框中的值实例讲解

    如何用javascript获取input输入框中的值,js/jq通过name、id、class获取input输入框中的value先准备一段 HTML一、jquery获取input文本框中的值通过 name:$('input[name="username"]').val()通过 id:$('#user').val...

  • richfaces 下拉框_将RichFaces与JSF 2一起使用

    的JavaServer Faces(JSF)2,2009年发布,包含了在许多领域重大修改和补充,包括系统事件,资源,两者的Facelets标准化和Ajax处理(见相关主题 )。 尽管这种发展通常受到欢迎,但不幸的是,严重的副作用是,实际上...

  • JSF学习小结值radio,input

    初学JSF会感到他强大的同时也会被它那

  • JSF

    JSF实现了基于web的以下三个梦想 1.java程序员不必顾虑HTTP的细节,可以按照原本熟悉的事件驱动模型来设计后台系统,并通过一个能担保数据类型无误的数据传递接口将后台系统与前台界面结合在一起。 2.没有程序设计...

  • JSF2.0实战 - 4、自定义组件

    项目环境: 1、JSF2.1+ 2、JDK1.6+ 3、Tomcat6.0+ 4、Eclipse3.6+ 我用的Indigo

  • JSF实现无刷新二级联动

    JSF有一个"bug":如果页面中包含了下拉框,则提交表单时,JSF会在应用请求值阶段就对下拉框选择的值进行验证(事实上应该在转换完毕后进行验证)。如果这个值不是可选的值之一,则会抛出校验失败的异常。所以BookBean...

  • Jquery Chosen 下拉框美化插件

        插件地址: ...使用时,需要先引入jquery,然后再引入chose的... 遍历并获取选中项的Value值: $("#pingcezhuti option:selected").each(function () { alert($(this).val()); });        

  • 开发一个可视化的JSF web应用

    word版下载在本文中,你使用NetBeans IDE 和JSF 1.2组件来创建和运行一个简单的WEB应用,Hello Web.这个实例要求你输入一个名字,然后根据这个名字来显示一条信息。首先,你执行一个带输入框的页面,然后你在一个...

  • 使用RAD和 WebSphere Portal Server开发JSF portlet (二)

    这是一篇关于使用IBM Rational Application Developer 6.0进行JSF (JavaServer Faces)和JSR (Java Specification Request)168开发的系列文章的第二部分(共两部分)。第一部分主要关注于JSF 和 JSR 168开发的基础...

  • JS插件(1)--- autocomplete 异步加载下拉数据

    //选中后,填充到下拉框的值 id:item.id //选中后,填充到id里面的值 } })); } }); }, delay: 500 , //延迟500ms便于输入 select : function (event, ui) { $( "#statId" ).val(ui.item.id...

  • 使用 Rational Application Developer 6.0 和 WebSphere Portal Server 5.1开发 JSF portlet

    这是一篇有关使用IBM® Rational® Application Developer...你将同时了解到在IRAD中有关的基本 JavaServerFaces (JSF)和 IBM® WebSphere® Portal Server的特性。最后,该篇文章将介绍如何使用JSP快速的创建复杂的Web

  • 开发面试问题

    基础 5 负载均衡 5 函数和存储过程的区别? 5 什么是view(数据库视图)? 5 用过和weblogic,tomcat相同的服务器吗? 5 工作流引擎有哪些?...线程池溢出问题解决方案? 7 jdbc链接数据库具体代码 7 ...

  • OOALV中字段设置ALV中下拉列表列的实现

    有时候我们可以把一些字段设置为下拉,比如一些类型,一些字段的值是比拟定固的一些值,如性别等。设置为下拉,和设置超级链接是类似的,也是使用了一个内表存放了柄句和对应的值,这个表类型为”LVC_T_DROP”.不过递传...

  • Web应用自动化验收工具——Selenium系列预研

    取出某个下拉框中已经选择的值  Java代码  java.lang.StringgetSelectedLabel(java.lang.String selectLocator)  //eg. selenium.getSelectedLabel("xpath=//SELECT@name='...

  • sap abap alv drop down list(ALV下拉列表)

    gs_drp-value = ‘JSF-44′ . APPEND gs_drp TO gt_drp . gs_drp-handle = ‘1′ . gs_drp-value = ‘KMDA-53′ . APPEND gs_drp TO gt_drp . gs_drp-handle = ‘1′ . gs_drp-value = ‘SS3O/N’ . APPEND gs_drp ...

  • Struts2标签使用

    (6):<s:form/> --- 获取相应form的值 使用: <1>:“userAction”> <2>:”userId” action = “userAction”> -- 定义了一个userId的指向userActionde 路径 ”%{userId}”> (7):<s:submit/> ---- 提交...

  • 人力资源经理绩效考核表.xls

    人力资源经理绩效考核表

  • 智慧环卫管理平台建设方案Word(211页).docx

    一、智慧环卫管理平台的建设背景与目标 智慧环卫管理平台的建设源于对环卫管理全面升级的需求。当前,城管局已拥有139辆配备车载GPS系统、摄像头和油耗传感器的环卫车辆,但环卫人员尚未配备智能移动终端,公厕也缺乏信息化系统和智能终端设备。为了提升环卫作业效率、实现精细化管理并节省开支,智慧环卫管理平台应运而生。该平台旨在通过信息化技术和软硬件设备,如车载智能终端和环卫手机App,实时了解环卫人员、车辆的工作状态、信息和历史记录,使环卫作业管理透明化、精细化。同时,平台还期望通过数据模型搭建和数据研读,实现更合理的环卫动态资源配置,为环卫工作的科学、健康、持续发展提供决策支持。 二、智慧环卫管理平台的建设内容与功能 智慧环卫管理平台的建设内容包括运行机制体制建设、业务流程设计、智慧公厕系统建设、网络建设、主机和储存平台需求、平台运维管理体系、硬件标准规范体系以及考核评价体系等多个方面。其中,智慧公厕系统建设尤为关键,它能实时监控公厕运行状态,保障公厕的清洁和正常运行。平台建设还充分利用了现有的电子政务网络资源,并考虑了有线和无线网络的需求。在功能上,平台通过普查、整合等手段全面收集环卫车辆、企业、人员、设施、设备等数据,建立智慧环卫基础数据库。利用智能传感、卫星定位等技术实现环卫作业的在线监管和远程监控,实现对道路、公共场所等的作业状况和卫生状况的全面监管。此外,平台还建立了环卫作业网格化管理责任机制,实现从作业过程到结果的全面监管,科学评价区域、部门、单位和人员的作业效果。 三、智慧环卫管理平台的效益与风险规避 智慧环卫管理平台的建设将带来显著的环境、经济和管理效益。环境方面,它将有力推进环境卫生监管服务工作,改善环境卫生状况,为人民群众创造更加清洁、卫生的工作和生活环境。经济方面,通过智慧化监管,大大降低了传统管理手段的成本,提高了监管的准确性和效率。管理方面,平台能够追踪溯源市民反映的问题,如公厕异味、渣土车辆抛洒等,并找到相应的责任单位进行处置,防止类似事件再次发生。同时,平台还拥有强大的预警机制功能,能够在很多环卫问题尚未出现前进行处置。然而,平台建设也面临一定的风险,如部门协调、配合问题,建设单位选择风险以及不可预测的自然灾害等。为了规避这些风险,需要加强领导、统一思想,选择优秀的系统集成商承接项目建设,并做好计算机和应用系统的培训工作。同时,也要注意标准制定工作和相关法律法规的制定工作,以保证系统建设完成后能够真正为环卫管理工作带来便利。

  • apache-parent-10-14.el7.x64-86.rpm.tar.gz

    1、文件内容:apache-parent-10-14.el7.rpm以及相关依赖 2、文件形式:tar.gz压缩包 3、安装指令: #Step1、解压 tar -zxvf /mnt/data/output/apache-parent-10-14.el7.tar.gz #Step2、进入解压后的目录,执行安装 sudo rpm -ivh *.rpm 4、安装指导:私信博主,全程指导安装

Global site tag (gtag.js) - Google Analytics