为移动而设计系列二：交互设计.pdfVIP

为移动而设计系列二 ：交互设计 在本系列的第2节中 ，交互设计师Elaine McVicar将继续讲解有关移动设计信息架构的 识 ，并提供 大量有关移动端设计模式的范例 ，为大家解释它们与电脑端设计模式的区别之处。 我的第一部手机是诺基亚5110 （1998年买的 ），功能非常有限 ：电话、短信、贪吃蛇。另外 ，手机 所能进行的全部交互都在制造商的掌控之下。而智能手机、触摸屏和“A pp st o re”的出现 ，给设计师 带来了巨大的机遇。因此 ，我们现在需要尽可能地熟悉、了解智能手机这种相对还比较新颖的媒介 。 欢迎来到移动端设计第2节 ：交互设计。下面是有关本系列的一些背景资料 ，方便新加入的同学跟 上节奏 ：为移动而设计系列一 ：信息架构代表着设计师进行移动端设计时所面临的几项关键难题 ， 这些难题主要是移动端的环境 ：从视觉条件到行为再到情感。考虑到移动端与传统设计之间的区别 给用户带来的影响 ，我在上一节中说明了我们在从到策略再到最终产品这一整套设计流程中对这些 区别详加考虑的重要性。 在第1节中 ，我们对移动环境下信息架构模式的探索进行了总结。信息架构是设计流程其余部分的 基础。在进入设计审美部分之前 ，我们务求了解手机和平板电脑交互与传统台式电脑交互之间的 区别。 交互设计 大部分现代移动设备都采用了触摸屏 ，而触摸屏有着自己独特的优势和局限性。我们不仅要使用触 摸屏查看内容 ，还要与内容进行交互。这就使得设计师要考虑如何设计出符合人体工程学的手势和 过渡效果 ，以及专门针对移动端的交互模式。 人体工程学 移动端人体工程学的设计要求我们既要考虑设备尺寸 ，也要思考触摸屏在实际应用情况下的各种 问题。举例来说 ，用户拿设备和触摸屏幕的方式决定着他们能否轻松够到屏幕的各个部分。 点击区域 ，或者叫“用户为激活某对象所需触摸的屏幕区域”需要有充分的空间以便用户准确 （及自 信地 ）操作。一般人的指尖宽度是1到2厘米 ，大概对应标准屏幕的44 px到57px ，或者高密度屏 幕 （视网膜屏 ）的88px到114 px。考虑到触摸屏的区别 ，诺基亚、A pple和微软在这方面的推荐大小 彼此之间有着细微的差别。 不过 ，在点击区域这一方面 ，并没有硬性的规定。你完全不用费劲查看各种标准来寻求既定的答案 ，只需要思考用户要在屏幕上实现什么目的、其待实现目的的重要性如何 ，以及需要完成的速率 ， 然后相应进行设计就行了。 手势 触摸屏上专用于某些功能的区域部分是无法显示内容的 ，这也就使得手势成为了移动交互设计的一 个关键组成部分。现在所有的主流触摸操作系统都采用了手势 ，其中包括 ：Google 的 A ndro id、 A pple 的 iO 和Microsof t 的 W indows 8。 下表是对各种手势的简单汇总 ： 另外 ，关于触摸屏设备手势的开发也出现了一定的标准和模式。设计师可以 ，也应当根据自己所设 计应用的情况拓展手势的疆界。 过渡 过渡是指让应用内不同状态之间界限变模糊的交互操作 ，其有助于故事的讲述或奠定手势的含义。 在更多情况下 ，过渡可以帮助用户回忆过往内容 ，防止他们“迷路”。 基本的过度方式包括 ： 上面所列的只是众多过度效果的一小部分 ，实际可供我们选择的过渡效果还有很多。而实际操作中 ，我们的选择应当能够提高我们所要推进的交互效果的连贯性。 通用模式 正如第1节中所讲到的 ，移动设备留给设计师安放菜单和导航提示的地方相比电脑来说太少了。另 外再考虑到环境因素 （例如视觉条件不佳或者分散注意力的因素过多等 ），我们往往难以让用户轻 松理解产品内容的结构。 不过 ，还是有一些比较通用的交互模式能够帮助大家解决难题。其中最有价值的当属能够用于完善 导航、选择内容、登陆/注销和处理表单的模式。 1 主导航 主导航 （或者叫“基本导航” ）是对我们网站 （或应用 ）信息架构的一种视觉呈现。下面是几个可供 参考的方法 ： 采用扩展菜单的星巴克响应式网站 有很多移动端及响应式网站都采用扩展菜单进入主导航画面。菜单图标 （通常几行横线 ）包含在标 题当中。点击图标可以显示一系列主菜单项。 适合于 ：响应式网站 要注意 ：过多的菜单选项和子菜单选项会把内容挤到屏幕下方 ，使用起来会很烦人和费劲。 2 侧边菜单 采用侧边菜单的Faceboo k应用 有的应用和网站采用可滑动的侧边菜单。比如Faceboo k的应用。和扩展菜单一样 ，一般需要点击一 个有几行横线的图标或者滑动屏幕 ，然后就可扩展出或滑过菜单 ，并在屏幕侧面垂直显示一系列菜 单项。侧边菜