[为移动而设计.docxVIP

为移动而设计：交互设计篇发表于2013-06-14 14:38|?2875次阅读| 来源CSDN|?11?条评论| 作者翟方庆交互设计设计iOSAndroidGo Mobile摘要：现在的移动设备都采用触摸屏，这不仅带来了许多机遇，也存在诸多制约。我们在通过它们浏览内容的同时，也在与内容进行交互。这迫使设计师开始对人体工程学、手势操作、过渡特效，以及针对移动端的交互模式进行思考。在“为移动而设计值心急架构篇”中，我们看到了设计师在设计移动应用时需要面对的主要挑战。移动端所显示的内容，从观察条件、行为，到情感，这些方面的差异影响着用户。Elaine McVicar有12年的设计经验，目前在伦敦Flow Interactive任职视觉设计主管，从事视觉设计、界面设计工作。以下为译文：我的手机是一款Nokia5110（1998年入手的），只具备很少的功能，比如打电话、发短信，或玩一玩贪吃蛇。更重要的是，这些交互方式都由手机制造商掌控。随着智能手机、触摸屏和App Store的出现，它们给设计师们带来了数不胜数的机会。同时，尽快熟悉这个尚且年轻的设计领域，也是我们这些设计师的责任。交互设计现在的移动设备都采用触摸屏，这不仅带来了许多机遇，也存在诸多制约。我们在通过它们浏览内容的同时，也在与内容进行交互。这迫使设计师开始对人体工程学、手势操作、过渡特效，以及针对移动端的交互模式进行思考。人体工程学由于在设计移动应用时涉及人体工程学，这要求我们要关注设备的尺寸以及触摸屏的实际问题。例如，用户握持设备和触摸屏幕的方式，直接影响到用户能否轻松触摸到屏幕的某一区域。热点区域，或称其为“用户激活某些功能时需要触摸的区域”需要有足够的尺寸，让用户确信自己可以准确地点击到。指尖面积平均有1至2厘米宽，在标准屏幕上所占空间大致结余44px只57px，在高清屏（如Retina）上大约占88px到114px。诺基亚、苹果、微软，为更好诠释触摸屏的特性，各家公司使用的尺寸都存在细微差别。然而，目前并没有关于以上设计尺寸的硬性规定。与其以各种设计规范为标尺，不如单纯地去考虑用户希望通过触屏操作得到什么，用户的操作目的有多重要，以及他们需要在多短时间内达成，并依此进行设计。手势操作除了显示内容以外，触摸屏的每一部分都能被用于实现任何功能，这让手势操作成为移动交互设计的重要构成元素。所有触屏操作系统都采用了该操作，包括Android、iOS、Windows 8。我们用一张表格简单汇总一下各平台：此外，目前涌现了许多设计标准和模式，用于指导开发手势操作。设计师能够并且应该依照自身产品所需，跨越这些“标准和模式”的界限。过渡效果在应用切换于不同显示状态时，过渡效果可以让这个过程显得更加平滑。更多情况下，过渡效果便于用户撤销操作，并防止用户在切换界面过程中“找不着北”。基本的过渡效果包括：常见模式正如我们在第一篇文章中所讲的，相对于PC来说，移动设备留给设计师更少的用户添加菜单和导航提示的空间。结合环境因素来看，例如复杂的视觉环境和干扰条件，通常情况下，我们很难将最好的内容结构提供给用户。然而，有几种通用的交互模式值得去尝试去挑战，其中一些用于改善导航、选择内容、登录注册和导航的交互设计非常有价值。主导航菜单主导航菜单是展示网页或手机应用信息架构的视觉表现形式。以下是一些值得思考的案例。扩展菜单（Expanding Menu）：许多移动应用和响应式网页都使用扩展菜单来进入主导航。一个被放置在顶部的菜单按钮，在点击之后会显示主菜单列表。星巴克采用了扩展式菜单的网页适合于：响应式网页。注意项：过多的菜单选项和子菜单会让列表过长过于复杂，这将带来操作上的不便。侧滑菜单（Side menu）：一些应用和网页使用的是侧滑菜单，正如我们在Facebook应用中所看到的。与扩展菜单相似，侧滑菜单会在屏幕一侧以垂直表单的形式显示出菜单选项。Facebook客户端适合于：拥有大量菜单选项的应用。为用户导航开辟了一个独立的区域，而不用在显示内容和功能的界面中占用大量空间。注意项：确保不会与其他导航或交互模式冲突。例如，如果扩展菜单或选项卡式菜单和侧滑菜单同时出现在一个应用里，当用户需要找某一特定功能时或选项时，这种设计会导致用户产生困惑，不利于操作。标签菜单（Tabbed Menu）：这种设计我们曾在上一篇文章中提到过。它是一个永久显示在界面顶部或底部的工具栏，便于用户在不同界面之间快速切换。亚马逊客户端底部的标签式菜单适合于：菜单选项更少的应用。这取决于移动设备屏幕在水平方向上可用宽度。通常采用这种菜单的iOS应用都会设置5个选项。注意项：底部标签设计与Android和Windows 8的标准交互不相称。辐射式菜单（Hub and spoke menu）：一个集中化更高的主界面，用户可以