交互设计之扁平化

其实在“扁平化”这个词流行以前，咱们一直都在强调交互的易用性和创造优质用户体验，并一直在往这方面去作。

在我看来，“扁平化”这个词，是一种设计风格，将来的趋势，扁平、简约、天然...

那么到底怎么样才能作到扁平化设计呢？

1.结构层级减小－高效

从字面上理解交互的扁平化，与之遥相呼应的便是“结构层级”，页面结构、流程结构，用户要达到某个目的，所须要的步骤，

一般咱们都是想用户最少的操做步骤来达成某个目的。参考下图可更好理解什么是层级结构：

从图中能够看出来，这个是一个树形结构，在树形结构中

连接的层数被称为深度（z轴），最底层页面包含的页面总数被称为连接的广度（x轴）。纵向（y轴）不少状况下都只有一层，放的多都是一些消息提醒和快捷方式。

以PC端淘宝web界面为例，最底层页面就是他的首页（X轴），包含的东西很是丰富，从广度来说覆盖面很是之大。

来看深度

从服装内衣 > 到应季女装 > 到针织开衫各类类型 

web界面很注重深广度的平衡。

若是是到手机端，显然把它直接搬过去是行不通的。

因为手机设备的限制，淘宝的手机主界面的广度大大减弱，信息深度更为明显。

pc上咱们能够用面包屑路径或者各类导航清晰的表现出层级结构，让用户不在复杂的层级机构中迷路。

可是在移动设备上显示区域有限，没有足够的地方用来放这样的路径，更多的时候咱们只能用back。

因此这也印证了前面所说的扁平化来势汹汹的趋势。

咱们怎样才能作到在移动端减小结构层级从而精简交互步骤。总结了如下几种方法，也欢迎你们参与讨论。

1)并列

 将并列同层级的信息显示在同一个界面中，减小页面的跳转。

以win8为例，什么天气、邮件，几乎都是在同一个界面中显示，并列的结构，方便用户更快捷的操做

2)快捷方式

以IOS7为例，只要从下往上滑动，并可呼出快捷菜单，方便开启关闭手电筒、wifi、蓝牙等

IOS6里面要打开wifi，必须先打开设置，在到wifi选择网络

对比步骤：

IOS7：底部上滑 》 打开wifi

IOS6：点击设置 》 选择wifi 》开启wifi 

层级结构的减小，用户无需在一层一层的点到设置里面去按，提升效率的同时也使层级结构变得清晰可见。

3)有限的空间，显示关键的信息

咱们来看豆瓣电影

首页列表显示当前上映的电影海报、电影名字、影迷评分，详情页面展现该电影的简介、预告片、用户评论，选座购票的按钮极为突出，便于

用户点击，进去以后显示具体的影院、价格、剩余场次及是否能够购票的状态。

4)减小点按

仍是以IOS7为例，关闭后台程序时，只需用手指轻轻往上一滑就关闭了

对比IOS6，双击home，长按APP图标，逐个点X关闭。

2.表达方式直白－准确

就是要小白用户都能轻松上手，毫无压力，记得某产品经理说过，“若是你的功能还须要解释的话，那是个失败的功能”

例：”微信摇一摇“

看到这个图标，凭本能反应，小白都知道摇晃手机便可。

3.信息直观－有序

在现在这个信息大爆炸的时代，若是从信息海洋里面找到本身想要的，尤为如今是小屏幕盛行，

咱们更须要减小过分复杂的交互界面设计，让信息更直观的展现。

分类，分类，分类！这是为何小白用户这么喜欢hao123的缘由，他把大多数用户用到的网站进行分类整理

让人很直观的就能找到想去的网站，例以下列网站：

 

干净整洁有序，永远比杂乱无章更让人赏心悦目。

其余

响应和反馈，也是扁平化中比较重要的一点，界面应该提醒到用户，当他做了某个操做，以便知道

到底发生了什么，是成功仍是不成功，出错了应该怎么作，不然用户不知所措，必然的会选择离开。

小结：

有效的整理信息、减小层级结构，功能表达方式直白等等都是使交互扁平化的手段。