文档介绍：高大上的扁平化交互设计
写在前面的话：（看正文请直接跳到分割线处）
当写完“做好扁平化设计：视觉篇”给到各位设计师看求指点的时候。
大家吐槽了：
有人说“只有交互扁平了，视觉才好做扁平⋯⋯”
还有人说 “如果一个产品把希望寄托于视觉上，想靠视觉来表现产品的扁平化，显然是不靠谱的⋯⋯
”
确实是这样的，扁平化不仅仅是界面视觉扁平无立体感，更应该是交互体验的扁平化，信息架构的
扁平化。
在进入正题之前，我们先来看一个例子，我发现有人用科幻电影中的UI 画面来和扁平化视觉相比较
，他们说这是未来界面的一个发展趋势，确实这和现在的UI画面有一定的相似地方，来看一些电影
画面截图。投影光感和色块的组合简洁明了，看起来很有未来感和设计感。
但是我更认为这应该是交互扁平化的代表，还记得在《谍中谍4》里面有个场景：
汤姆·克鲁斯的敞篷轿跑车与恐怖分子在迪拜的沙暴中追逐，带来了影片的高潮。我自己当时对这一
段的印象非常深刻。
在追逐开始的时候，副驾的美女就用投影在挡风玻璃上显示出了导航，追逐的位子速度等相关信息
，并开始相关操作，给阿汤哥指挥。最后成功追到恐怖分子。
可以看到这里的界面视觉表现是以投影光感和色块为主非常扁平，但是如果它的交互操作和信息展
现不够扁平的话，副驾的美女点半天也找不到位置，甚至在一眼看上去不知道这个界面要怎么操作
的话，呵呵，不要谈追逐恐怖分子了，估计自己都抓狂了～
（这里可以详见电影情节）
同样，如果一个产品你拿到后不知道他想表达什么，也不知道要怎么用的，点了半天也找不到你想
找的信息的时候，估计这会儿你已经没有耐心了，要不了一分钟你就会把它卸载掉。如果视觉好看
一点的话或许能吸引你停留的久一点，但最终你不会成为他的忠实用户。
所以，交互扁平化和信息扁平化的重要性不言而喻。
Noteloop：专业收集电影中的UI界面部分，有兴趣的同学可以看看.
—————————– 分割线，言归正传 —————————–
先我们来看为什么扁平化会那么来势汹汹.
这是因为我们的需求环境在发生变化。以前我们没有ipad 没有智能手机，只有pc，我们只有电脑环
境需求，所以扁不扁平化似乎没有多重要，再来看现在我们有着多种智能设备，需要在各个场景各
个设备上随时切换，可以看到从pc到各手持设备的趋势是越来越明显。
随着各种智能设备的多样性和普及，交互界面需要变得更容易适应其变化，很显然扁平的交互界面
要比其它样式要更容易处理。移动互联网向着需要低配置、高效能，个性化以及优质用户体验的方
向发展。我们必需快速响应这个趋势。
其实在“扁平化”这个词流行以前，我们一直都在强调交互的易用性和创造优质用户体验，并一直在
努力往这方面去做。其实在我看来“扁平化”这个词，是这些设计目标的一个总概念，可以很宽泛，
应该是一种内在的设计思想。
接下来，我们来看看能有哪些方法可以做到交互扁平化。
一、结构层级减少 —— 高效
先从字面意思来理解交互的“扁平化”，与之相对应的应该是“结构层级”，在这里我理解为交互步骤，
以前也一直在强调精简交互步骤，想要用户用最少的步骤就完成任务，显然这里是要求层级结构的
扁平，所以交互步骤和层级结构是相互关联的。
我们先来理解下什么是层级结构
（素材来源：eico ）
从图中可以看出来，这个是一个树形结构，在树形结构中
链接的层数被称为深度（z轴），最底层页面包含的页面总数被称为链接的广度（x轴）。纵向（
y轴）很多情况下都只有一层，放的多都是一些消息提醒和快捷方式。
来看看pc端的web界面（以淘宝为例），最底层页面就是他的首页，包含的页面综述非常丰富，可
以看到从广度来讲覆盖面是非常大的。
来看深度
从鞋包配饰－到女鞋－到单鞋－到单鞋的各种类型
可以看出，web网页更注重深广度的平衡。
再来看看手机端，很显然如果直接把web上的结构搬到手机上是行不通的，由于手机设备的限制，
淘宝的手机主界面的广度大大减弱，信息深度更为明显。
pc上我们可以用面包屑路径或者各种导航清晰的表现出层级结构，让用户不在复杂的层级机构中
迷路。但是在移动设备上显示区域有限，没有足够的地方用来放这样的路径，更多的时候我们只能
用back。所以这也印证了前面所说的扁平化来势汹汹的趋势。
我们怎样才能做到在移动端减少结构层级从而精简交互步骤。总结了以下几种方法，也欢迎大家参
与讨论。
1）并列
将并列的信息显示在同一个界面中，减少页面的跳转。
这里有最典型的例子就是 Windows 8，在这之前什么天气／邮件