产品经理内功修炼——扁平化交互设计技巧

交互设计扁平化

前言

自IOS7风格横空出世后，扁平化设计就深受设计师追捧并成为大势所趋，扁平化成为视觉设计的普遍标准之一，然而仔细想想，扁平化设计真的只是视觉设计师的工作吗？

其实扁平化不仅仅是界面视觉扁平无立体感，更应该是交互体验的扁平化，信息架构的扁平化。这样我们的产品才是最具扁平风格的产品。

为什么要扁平化？

扁平化之所有成为现在一种大的趋势，包括交互界面都要做到扁平化是为什么？首先因为现在的智能设备越来越多，尤其是手机成为我们现在最重要的一个屏幕，它的大小很有限。那么有些产品不仅仅要追求PC端，还要追求移动端。现在“ihone watch”出来了，还要给智能手表、平板电脑做适配，所以说同一个产品要兼容这么多的设备，这个时候如果想要适用于各个设备的匹配的话，如果我们的产品逻辑特别复杂，信息架构比较庞杂的话，很难在不同的设备上给用户一致的体验。试想一下，如果一个很复杂的产品，它在PC端上可能还能比较轻松地完成，但如果给它做到手机里、平板里等，那么用户还能顺畅的操作吗？可能就会不能。那么为了解决这种问题，扁平化的要求就应运而生了，这样使得我们不仅UI要扁平，交互同样需要扁平。
所以说扁平化这个词的流行，并不仅仅要求视觉的扁平化，还要做到交互上的扁平，扁平的目的不是在于扁平本身，而是在于扁平的易用性，还有给用户更优质的体验，无论是我们的视觉，还是我们的交互，还是我们产品的信息架构只要它能做到扁平，那么在用户看来就会用的越来越简单，越来越好用，体验也会越来越好。

扁平化交互设计的技巧

1.结构层级减少——高效

字面上意思理解交互的“扁平化”，也就是“结构层级”，在用户看就是交互步骤。我们一直在强调精简交互步骤，想要用户用最少的步骤就完成任务，就是希望可以在结构层次上做到“扁平化”。

2.移动端减少结构层级的方法

1）并列：将并列的信息显示在同一个界面中，减少页面的跳转。

2）快捷方式：减少层级就是让用户减少操作步骤，用户可以通过快捷方式一步进入深层次页面。

3）显示关键信息：在移动端减少结构层级就必须把一些非关键信息、非关键层级的信息进行剔除，只显示关键的路径和关键的层级，这样的话页面结构就会减少很多。

4）减少点按：尽量把用户应该知道的信息一次性展示给用户，让用户避免或尽量减少操作，让用户在最少的操作范围之内获得最多的信息、来完成该做的任务。

案列

1.并列

Windows8的主题界面，在页面布局方面很成功，用这种“扁平化”的设计风格把所有的主要功能都罗列在主题界面上即首页上，能让用户很快的进入想去的功能。这都是通过并列的方式把这些主要的功能都并列在同一个页面当中。

2.快捷方式

以苹果作为例子，左边为ios7风格，右边为ios6风格，我们不以UI的角度评判谁优谁劣，我们仅看交互层级。举个例子，比如说我们在使用iphone进行无线网络连接的时候，如果是ios6用户，首先要找到“设置”这个APP的按钮，然后点击之后就行设置的页面，找到wifi打开，选择想要连接的网络。而ios7手从底部向上划就会有快捷方式可以连接wifi。

3.显示关键信息

比如看电影的APP，需要涉及的价钱、排期、座位等关键信息。如果它能够将关键信息展示在入口里面，就不需要我们再点击“影院”去查询了。

4.减少点按

我们说点按是一个比较麻烦的操作，不仅仅是增加了操作的次数，而且还很不容易，点按是一种非常细小的点按方式。以苹果为例，左边为ios7的风格，右边为ios6的风格，如果iphone6想关闭一个后台程序需要做什么？首先要双击出现图示效果，然后我们需要点击那个小叉叉，这时才能关闭一个后台应用程序。再看ios7如何操作？首先还是双击，出现所有的后台程序，这时只要将程序往上托就会关闭。不仅比ios6节省一步，而且往上滑的操作远远优于点叉的操作。

5.表达方式直白——准确

扁平化的交互其实是为了让我们的用户能够更易用、体验更好，让我们的小白用户都能够轻松地完成任务，那这时就需要我们做到表达方式直白、准确，能够让用户一眼看的明白，不需要过多的解释。有的时候，我们的产品经常会做一些相对复杂的功能，我们需要可能很多很多的新手引导、提示来告诉用户这个功能是做什么用的，并且怎么用？
业界有一句话“如果你的功能不能让用户一眼就看明白，还需要解释的话，那么你这个功能就做失败了……”不能让小白用户马上上手的功能也不是好功能。
为了解决这个问题，做法可以是减少按钮和选项，让使用更简洁。并且在表达方式上能够用最简单、最通俗的话把一个相对专业的功能说的很明白。比如说360安全卫士，无论是手机还是电脑，都有一个“一键体检、一键杀毒”的类似功能，这种功能就是把我们比较复杂的功能精简成了一个按钮，能够让小白用户点一键就明白是什么功能。

如图微信摇一摇，它可谓微信呈爆发式增长的一个里程碑的功能，除了朋友圈之后就是摇一摇了。“摇一摇”为什么能火，是因为它做的极简，它表达的也非常准确。所谓“极简”，“摇”的动作是任何人都能做出来的一个动作，只要手部一摆，就可以做到，非常的容易，甚至比点按更加容易。再看它为什么准确？“摇一摇”的功能其实是为了互动，是为了交流，为了添加好友，那为什么要用“摇一摇”呢？因为古代当人类没有语言的时候，人们是通过手势、动作进行交流的，而“摇”的动作是古代进行交流的最轻松平常的动作。那么微信的产品经理就用这种最古代最传统“摇”的动作来做移动端的添加好友功能。并且“摇”添加陌生人为好友最为合适不过。

6.信息直观——有序

互联网已经是信息爆炸的时代了，我们对于信息的获取，已由原来的稀少变为爆炸，我们要的并不是数据越来越多，而是在如此庞杂的信息里如何找到自己想要的信息。那么这个时候对于我们产品经理而言，需要做的也不是给用户越来越多的信息，而是给用户他们想要的东西。这个时候我们就需把互联网里大量的信息整理的有序清晰，让用户能根据我们整理的清晰分类快速找到自己需要的东西。
这时产品经理所要做的工作就是分类，交互设计师和UI设计师主要做的是整理工作。产品经理把信息分成几大类，交互设计师和UI设计师对不同分类里面的不同信息做页面的布局和摆放整理，就像如图的收纳箱，里面有许多杂乱无章的东西，但是我们通过不同的布局分块就可以把杂乱无章的东西巧妙的放在一个容器里面。我们做互联网产品也是，信息特别特别多，如何才能让用户直观的来看这些信息，找到自己想要的东西呢？这就需要我们的产品经理和设计师对产品进行相关的分类和整理。

如图一个PC端的信息往往是比较多的，或者说是一个信息最多的承载媒体，那么对于一个信息如此多的媒体，该怎样进行分类布局呢？如设计师的网址导航，应该说网址导航是一个信息比较多的产品，这么多的网址我们怎么对它进行分类呢？对于设计师而言，可能有以下几种分类：资源下载，比如下载一些飞机稿之类的；设计教程，如果想提高自己的修养，可以查看设计教程；高清图库，也是找一些素材的，可能以找图为主；配色方案，可以在里面找一些优秀设计师的配色方案。通过资源下载、设计教程、高清图库、配色方案的四种分类方式，把我们UI设计师的平时的这种获取素材的工作分成了四大类，这时如果一个UI设计师来到我们的网站就可以根据自己的目的查找相关资料。

7.一致性

前言说道交互为什么需要扁平化，是因为现在是一个多媒体、多平台的时代，大家除了有电脑之外还有手机、平板电脑、智能电视、智能手环、智能手表等，那么平台一旦多了，一个产品就要涉及多个平台的匹配，那么一款产品怎样才能占据多个平台，让用户在不同的平台里面能够熟练掌握这些功能或产品的使用呢？这就需要我们同一个产品在不同的平台上、在操作功能上有固定的一致性，最好能够在这个产品端上能实现的功能在其他产品上也能找到。

这就是我们所说的一致性：
1. 功能的一致性。
2. 平台与平台之间的无缝体验。同样一个用户，即使他跨端了，一会在PC端，一会在手机端，一会在电脑甚至电视手表里，不同的客户端都能够使用到我们产品的功能，并且可以比较熟练地去使用，这就是我们一致性所要达到的效果。

反例：阿里旺旺客户端原来内置在淘宝天猫里，刚一开始淘宝和天猫内置的阿里旺旺不能发图，只能通过专门的客户端去发图，那如果使用淘宝或者天猫进行购物在和卖家进行交流的时候，如果你想反馈一些问题，卖家经常会问“给我截个图吧”，那这个时候，作为一个用户就会很烦恼，因为大部分用户没有阿里旺旺，只有淘宝天猫，这时在和客服沟通的时候没有截图功能就会非常痛苦，而只能发表情或是通过电脑、客户端去发截图，这就是功能的不一致性。
我们功能的一致性并不是说所有的功能各个客户端都有，而是说主要的功能必须要在各个客户端都有。

优秀案例：QQ在做平台与平台的无缝无缝体验上做的非常好，比如说你打开自己的手机QQ就会看到，你可以和自己的电脑相连，和自己的ipad相连，甚至和周围的一些设备相连。可以从电脑发图到手机，或是手机发图到电脑，这样就实现不同平台之间无缝的转换体验。

小结

交互的扁平化设计，其实是一个概念，是一种内在的设计思想，目的是能在环境需求多种变化的情况下，依旧能提高用户体验的一种方法。不管是从视觉上，还是从交互上都应该根据产品的实际情况/场景以及用户来具体分析，才能达到真正扁平的目标从而提供优质的用户体验。能够使得用户在体验上通过更少的时间经过更少的步骤完成他的操作，能够在不同的客户端上和媒体上进行操作，把我们的主流功能做到一致性，使得我们真正能够达到扁平化目标，提供优质的用户体验。

原文链接：
交互设计扁平化

产品经理内功修炼——扁平化交互设计技巧相关推荐

产品经理内功修炼——产品的界面框架设计
产品的界面框架设计课程目标 1.掌握产品界面框架设计的类型 2.了解不同界面框架的优缺点 3.能够根据产品需求设计界面框架前言我们说界面的框架设计不仅仅是UI同学的设计,更多的是产品经理和交互设 ...
移动端APP扁平化UI设计解析
在当今信息爆炸的文化背景下,人们每天都会通过手机APP接触到巨大的信息流,然后再持续的进行评估.过滤并且再加工,具有认知上的负担,扁平化UI设计更加适合信息碎片化的传递方式. 移动端APP扁平化UI设 ...
视频教程-【吴刚】UI扁平化图标设计初级入门标准教程-UI
[吴刚]UI扁平化图标设计初级入门标准教程业内知名UID.UED.用户体验.品牌策略与创意设计师,十三年行业职业教育培训经验,业内"UI视频第一人",教学总监.视觉设计讲师. A ...
产品经理基本功：UGC社区后台设计
原创: Kevin改变世界的点滴 Kevin改变世界的点滴昨天社区产品在C端产品中其着孵化产品业务和承载用户内容集合的模块.因为负责的产品中涵盖社区模块,如何有效的避免社区出现:脏乱差.小广告.无 ...
UI实用素材|扁平化UI设计模板，UI设计师都要会！
在当今信息爆炸的文化背景下,人们每天要通过过手机APP接触巨大的信息流,然后再持续的进行评估.过滤并且再加工,具有认知上的负担,扁平化UI设计更加适合信息碎片化的传递方式. 扁平化的UI设计通过将有效 ...
android 自己定义标签的使用，实现扁平化UI设计
2014年8月6日11:06:44 android对自己定义标签的使用.实现扁平化UI设计: 1.attrs.xml文件里自己定义标签如: <?xml version="1.0&qu ...
视觉冲击！12个精美绝伦的扁平化网站设计
越来越多的人崇尚简单,简约的扁平化设计风格.扁平化设计对于印刷品设计.网页设计和移动操作系统的设计来都带去了新的变化.扁平化网页设计是指设计形式摒弃图案纹理背景,阴影文字以及网站盒模型的部分. 下面手 ...
2016扁平化图标设计如何做太原UI设计师郭文军讲
2016扁平化图标设计如何做太原UI设计师郭文军讲造型 1.主要方法堆叠法切割法 2.主要原则偶数同层运算选取对齐尽量不引入新的形状做U不做V 3.注意点 1.大小一致 2.风格统一 ...
android ui 扁平化,android 自定义标签的使用，实现扁平化UI设计
2014年8月6日11:06:44 android对自定义标签的使用,实现扁平化UI设计: 1.attrs.xml文件中自定义标签如: //reference指的是是从string.xml引用过来 ...

产品经理内功修炼——扁平化交互设计技巧

产品经理内功修炼——扁平化交互设计技巧相关推荐

最新文章

热门文章