恶补交互基础知识的好机会!这个国外系列的交互教程非常实用，适合包括设计师、开发、产品等学习，今天的第一部分归纳总结并比较了多种主流的设计模式和信息架构，全文图示丰富，直观易懂，译者还很用心地将图片转成中文版，看起来不费力，强烈推荐呦!
Lost：大约在1993年，我父亲带回家一部体型硕大、形似砖头的移动电话。当时，我们全家人都对这个稀物表示难以置信的兴奋，但是没有人会认为它会对我们的生活产生巨大影响。几年后，当我的一些朋友决定购买它时，我仍然会把它看作是一种花样和噱头。
如今全世界共有60亿移动订阅用户，意味着如果人手一部移动电话，那么世界上87%的人便拥有移动电话。然而，将近有30亿人使用台式电脑，这和移动电话使用情况差别很大。
移动有何不同？
关于移动设计，我们最先需要了解的是它的不同之处，这并不仅仅指尺寸的不同。移动设备的属性与规格也带来了不同的设计启示和要求。由于移动设备更轻更便携，我们通常觉得它们更便于使用。通过频繁使用移动设备，我们与它们之间建立了独特而富有情感的联系。
属性与规格
绝大多数移动设备配有触摸屏，用户主要通过手势以及一些简单的界面元素进行操作。由于受限于屏幕尺寸，有时我们希望屏幕中的显示内容结构更简单精致。同样由于受限于带宽和连接速度，移动端上的设计需要优化加载时间，减少数据请求。
为何、何地与何时
由于需要不间断查看手机信息，我们往往会更频繁地使用手机。乘坐公交车时、街上漫步时或看电视时，它们都无处不在。甚至，我们通常“做”一些其他事情时也在使用。这意味着我们可能在一些复杂的视觉环境下或是一系列干扰条件下使用手机。
我们如何行动和感知
使用移动设备时，我们有不同的态度、行为和优先级。作为Going Mobile 2012研究的一部分，用户体验设计机构FoolPRoof 指出移动设备赋予我们一种新的自由感和控制感。还有一些用户反而对他们的移动设备产生了非常真实的情感。Foolproof指出当智能电话不在身边时，63%的人会感到失落不安。他们把这些设备描述为“有生命的”，是他们身体和人格的一种延伸。
移动设备从根本上改变了用户的期望，因此对于设计师而言，非常重要的一点是遵从以用户为中心的设计流程来进行设计。但存在的问题在于：以往那些最佳的传统实践方法并不总是可以参照。
移动如何影响设计师
移动设备的差异化直接作用于以用户为中心的设计的整个过程：从用户研究到最终的开发和实现方案的测试。而实现方法和信息架构是整个设计流程中受到最大影响的。
移动设计实现方式
不同于传统网站，移动设计的实现存在四种主流方式。移动用户最希望在浏览器上浏览，移动式网站(为移动设备而特地优化的网站)或者响应式网站(根据设备重新排列布局的网站)的内容。而那些在设备上安装了应用程序的人会选择原生应用或混合模式应用。原生应用是独立存在的：每一个应用的界面都被定义在平台层上方。混合模式应用提供了更为灵活的方式，从网络中获取内容，(即通过浏览器进行阅读)，但也提供了类似于原生应用的界面。
每一种实现方式都有正反两面。选择哪种样式取决于项目的设计背景。(下面的表单中，星星越多，效果越好)
移动信息架构
移动设备同样也有自己的信息架构样式库。尽管响应式网站的结构可能更多遵从“标准化”样式，而诸如原生应用则通常采用基于标签的导航结构。但并不存在构造移动网站或应用的“正确”方法。接下来我们会带来一些最流行的样式：层级式、辐射式、套娃式、标签视图、便当盒和筛选视图。
层级式（ Hierarchy ）：
层级样式是带有一个索引页和一系列子页面的标准网站结构。如果你在设计一个响应式网站，你可能会受限于此，然而它所带来的额外样式可以帮助你为适应移动设备而调整体验。
Luke Wroblewski在博文《移动为先》( Mobile First)中帮助我们首先关注于重要的内容：可以帮助我们创造更好的用户体验的产品特性和用户使用过程。
适用项：整理需要跟桌面端网站保持一致结构的复杂站点。
注意项：多面的导航结构应用于小屏幕上可能会给用户引起的麻烦。
辐射式（ Hub-spoke ）：
辐射样式向用户提供了便于跳转的中央式索引，这是iphone的默认样式。用户无法在分页面之间切换，而必须回到中央跳转。一直以来，这种样式主要用于工作流程受限的桌面端(通常是技术限制，诸如表单或者购买流程中受到的限制)。然后，这种样式在移动设备上越来越流行，这是由于用户使用移动设备时会专注于单一任务，以及由于设备本身的外型因素。这种样式的流行使得全局性导航愈发难以使用。
适用项：多功能工具，其中每个都有不同的内部导航和目标。
注意项：这种样式不适于用户进行多任务操作。
套娃式（ Nested doll ）：
套娃样式采用渐进式导航引导用户查看到更详细的内容至。当用户操作不方便时，这是一种快速简单的导航方法。通过点击“前进”或“后退”，用户可以强烈感知自己所处何处。
适用项：应用或网站的主题奇特或者主题之间密切相关。它们同样适用于内置其他父样式的子样式，诸如标准的层级样式式和辐射样式。
注意项：用户无法在不同内容中快速切换，因此需要考虑这种样式是否方便查找，而不能让它成为查找内容的绊脚石。
标签视图（ Tabbed view ）：
这是一种普通应用用户熟悉的样式。这种形式通过工具栏菜单集合为一系列的内容。这样用户可以在第一次打开应用时，便能快速扫过并了解应用的全部功能。
适用项：基于一个相似主题的工具项和多任务情况。
注意项：这种样式不太适合复杂类结构，较为适用于非常简单的内容结构。
便当盒 / 仪表盘（ Bento box/Dashboard ）
便当盒/仪表盘样式通过使用组件展示相关工具或内容的部分信息，再把更详尽的内容链接至到索引界面。由于这种样式很复杂，它在桌面端显示会比在移动端更为适合。这种显示醒目有力，用户只需要扫一眼就可以理解关键信息，但它严重依赖于信息清晰的设计呈现。。
适用项：主题相似的多功能工具和基于内容的平板电脑应用程序。
注意项： 尽管平板电脑的屏幕提供更多空间承载这种样式，但更为重要的是我们要理解用户如何与每块内容互动，以及我们要确保应用简单、有效、使用愉悦。
筛选视图（ Filtered view ）
最后，筛选视图样式允许用户通过选择筛选项来切换不同视图从而在一系列的数据中进行导航。筛选同分面搜索方法一样，是一种很棒的适合用户查询内容的方法。
适用项：内容数量庞大的应用或网站，诸如文章，图像和视频。它可能为杂志样式的应用或网站提供了好的基础，或者是它可以作为另一个导航样式内的子样式。
注意项: 移动设备上，由于筛选和分面搜索很复杂，所以很难在较小的屏幕上展示。
下一步
自从我第一次看到大型的砖头式移动电话起，已经过去了将近二十年，(而我买第一步移动电话也有大约十二年了)。如今我、我父亲和我认识的人几乎都有一部智能电话，我们习惯于频繁地使用它们沟通、交流并且管理我们的生活。每一年科技都有一次飞跃，因此我们要清楚地认识到我们需要与时俱进。设计友好的移动和桌面信息架构正是创建伟大的移动体验的第一步。在第二部分中，我将解释移动内容的差异性如何影响最终方案的设计。
“设计”交互
现今，绝大多数移动设备使用触摸屏，这对我们来说有好有坏。我们不仅可以使用设备来浏览内容，并且还可以与之交互。这就要求设计师考虑人体工程学，不停地模拟用户握持和操作手势，最终才能得出可用的交互模式。
人体工程学
人体工程学在移动设备中最需要注意的就是屏幕尺寸。用户握持的姿势、触摸的手势都影响着用户所能触及到的区域。
点击区域需要足够大的面积，大到让用户非常自信不会点错最佳。手指尖通常1到2厘米宽，标准分辨率的屏幕大概44px到57px之间，在retina高分屏上大概88px到114px。诺基亚、苹果、微软等根据使用屏幕的不同推荐策略也不相同。
当然对触摸面积没有硬性规定，寻找标准不是目的，为用户考虑，怎么样设计才能尽快完成他们的任务，就应该怎么设计。
手势操作
移动设备的屏幕可谓寸土寸金，如何能通过手势实现不同的功能很值得研究。下面列举目前主流三大系统的基本操作模式。
列表如下：
此外，触屏设备的系统标准和操作模式也正处于不断发展之中，设计师要不断研究新的操作方式以适用于APP。
过渡转场
转场为了使不同界面切换更加平滑顺畅，或暗示给用户一种新的可用手势操作方式。一般而言，转场在APP中给用户指引方向，防止用户“迷路”。
基本的转场如下：
以上仅列举少部分，还有非常多的转场效果我们可以选择。最佳选择标准是引入该转场可以促进交互的一致性。
常见的模式
正如第一部分所说，相比桌面电脑，移动设备给设计师放置导航菜单空间更小。结合环境因素，例如恶劣的阅读条件使人分心。这就很难设计一种好的内容结构去让用户专注与内容。
然而，有几种常见的交互模式迎接了这个挑战。如何改进导航、内容选择、登陆/登出、表格显示的展现形式是我们所需要学习的重点。
主导航
主要(或核心)导航用视觉方式展现了我们网站或APP的信息架构。以下有一些需要考虑的地方：
展开式菜单（Expanding Menu）
许多移动和响应式网站使用这种展开式菜单作为导航。 一般菜单的图标在页面头部，点击图标就会展开菜单列表。
适用于: 响应式网站。
注意: 过多的菜单项目会使本就拥挤的屏幕看起来更加糟糕。
星巴克响应网站展开式菜单
侧滑菜单（Side menu）
一些APP和网站都使用侧滑菜单。点击左上角的菜单图标，屏幕边缘就会滑出一块专门的菜单区域。菜单以列表(可带分类)的形式展现，并且还可以向下滚动查看更多。
适用于：选项数目庞大的菜单。它创建一个单独的菜单区域，而不占用用户浏览内容的空间。
注意：必须确保它不与其它交互模式冲突，否则用户会产生迷茫的感觉。
Facebook 侧滑式菜单
选项卡菜单（Tabbed Menu )
在APP的顶部或底部显示常驻的选项卡，用户可以通过点击切换选项。
适用于：选项数目非常少的菜单，由屏幕宽度决定。
注意: 需要考虑Android和windows phone 8 屏幕底部虚拟按键互相干扰的问题。
亚马逊选项卡菜单
辐射状菜单（星型拓扑Hub and spoke menu）
一个集中的主页屏幕提供菜单可供用户选择。点击菜单选项后会进入它自己的内部导航模式。用户可以通过点击返回链接或按钮回到主页。
适用于：直观反映了程序的功能。
注意：对于辐射状菜单，如果用户希望在不同功能之间切换，主屏幕这个必经之路会使用户沮丧。
领英仪表板菜单
内容选择形式
如果你的设计可以很轻松的让用户单手操作，这点就会让你的产品增加不少转化率。
点击（Press to move forward）
选择分类，查看相关文章，然后再选择与本篇内容相关的文章，这就是渐进式导航的精髓。
适用于：内容主导型的网站。
注意：跳转多次页面之后用可能会不知道当前所处位置。
BBC新闻
滚动效果（Coverflow）
用户可以水平滚动预览项目，点击可以进入。Win8的Metro风格程序也是如此。
适用于：选项数目庞大的菜单。它创建一个单独的菜单区域，而不占用用户浏览内容的空间。
注意：必须确保它不与其它交互模式冲突，否则用户会产生迷茫的感觉。
应用商店
翻页效果（Flip over / Peel back）
如果你想进一步了解正在浏览的内容，或你正要进行的设置，那么翻页效果是很好的选择。
适用于：两个相关的内容，比如进行设置或查看信息详情。
注意：会让你的交互方式过于复杂，用户也容易对导航结构感到困惑。
iOS苹果地图
登陆和注册
登陆和注册对于APP必不可少，所以我们应该尽可能把过程设计的简单方便。
自动登陆
用户信息首次登陆就自动保存在APP内，以后打开APP会自动登陆，并更新主页最新消息。这也是在许多社交APP最常见的模式，例如：Facebook、Instagram、Twitter。
适用于：必须登陆才能进入主页查看信息，但对安全要求不是很高。
注意：只适用于对信息安全要求不高的APP。
保存账号和密码
和电脑网页一样，移动APP也可以采用这种设计，保存用户的账号和密码等登录信息，以便于用户快速登录。
适用于：需要登录的手机版网页。
注意：尽量减少登录的步骤。
简单数字密码
不需要输入冗长的详细登录信息，直接输入一次简单密码，简化登录步骤，Paypal就是如此。
适用于：需要记住登录信息，但又必须保证安全的APP。
注意：需要注意APP安全级别(后台运行呼出之后仍需要密码)。
Paypal
填写表单
保存用户信息
据统计，用户安装的APP中，竟有26%只被打开过一次。辛苦制作了一款APP，好不容易被人下载安装，刚一打开，繁琐的注册表单让用户不得不放弃。人人都讨厌在移动设备上填写表单，特别是根本没针对移动设备优化过的电脑版网页。
保存用户的的登录信息可以节省时间、减少成本，让你的应用和网站更易于使用。
交互设计师Luke Wroblewski曾对于注册表单给出过三点建议：一、最好不要在App首屏出现注册界面;二、先体验，后注册;三、因为注册界面繁琐，所以更要优化。
适用于：需要用户添加个人信息的网站或应用，比如在购物过程中填写个人资料。
注意：给予适当的安全性。
亚马逊允许查看个人详细信息和历史订单
正确的键盘类型
在不同的情况显示与之对应的键盘类型能简化操作，例如输入电话号码时，默认弹出的是数字键盘，输入密码时显示全键盘。
适用于：任何表单。
注意：无。
Gmail
进度提示
在电脑网页中显示进度提示条非常好，他能告诉用户当前的进度，完成了多少，还剩多少。在移动设备中这样设计同样很棒，但由于屏幕大小和比例不同，需要考虑进度条的位置和显示方式。适用于：购物表单或长表单。注意：不要让它占据太多空间，不然可能会阻碍用户快速访问其他内容。
有创意的进度条也能缓解用户的焦虑感呦：
Paypal
下一步
设计标准和指南给我们提供了创新的空间。当我手拿诺基亚5110玩贪食蛇时，从未想过我能有机会为手机设计交互界面。而今天我们找到的解决问题的方法，将会成为未来设计的标准和指南。
交互是移动设备不可或缺的重要部分。但是打造体验绝佳、界面生动的移动应用或网站，美妙绝伦的视觉设计也必不可少。
新闻热点
疑难解答
