--- title: 交互设计也需要扁平化 date: 2014-09-21T16:00:00Z modified: 2024-07-02T08:17:36Z permalink: "https://www.tmogroup.com.cn/insights/other-20441/" type: post status: publish excerpt: "" wpid: 100877 categories: - 其他资讯 - 数字化转型 - 电商开发 tags: - 其他资讯 - 数字化转型 - 电商开发 - 网站建设 featured_image: "https://www.tmogroup.com.cn/wp-content/uploads/2024/07/交互设计也需要扁平化.png" timestamp: 2024-07-02T08:17:36Z --- 随着智能手机、PAD甚至是各种智能穿戴设备的普及，交互设计理 念也变得更为多样化，而从以往传统PC的左键点击、右键点击、双击等逐渐简成单击和滑动两个动作后，很显然，扁平化的交互设计比其他设计方式更能符合现在 的移动互联网或者智能设备多样化的适用需求。同时，一款产品通常会在多平台进行来供用户操作，也只有扁平化的交互设计才能最大程度满足多平台的应用。 其实在所谓“扁平化”这个概念流行起来以前，岚海一直都在强调以易用、强调用户体验为设计的中心思想，并也一直在往这个方向而努力着，而现在看来，扁平化的流行只不过是将我们以往的思想和理念名词化，或者是更规范化而已。言归正传，下面我我们就来分享一些如何将交互扁平化的方法： ### 一、减少层级关系 所谓减少层级关系顾名思义就是指尽可能的简化设计的层级结构，比如网站的导航设计，产品的分类设计、或者是软件应用的设置层级设计等。 图乍一看有点复杂，其实不然，Y轴为纵向轴，在这图种只有一层，我们可以把这张图理解为导航中的一条分枝线。Z周为深度轴，比如说从首页到分类到具体应用这样的流程深度。那么X自然就是广度轴，比如从首页上有5个分类这样子。 理解了结构，我们来看具体案例： 首先我们看首页，从广度来讲，他的导航非常的广，涉及到各种类别的商品。 我们再看深度，那是想要多深有多深啊，一个服装分类里还有各种2级分类和3级分类。 这是淘宝PC端的截图，可以看出，PC端因为屏幕尺寸够大，可以很从容的体现出所需的广度和深度，那么如果是在移动客户端上，我们如何来表达出这种需求呢？那就得用到我们本文所讲的交互设计扁平化了。 从交互设计角度而言，如何做到扁平化，或者是说如何来精简用户的操作流程，我们总结出以下方法。 #### 1.1 并列设计 这是WIN8的界面，我们以往在win的其他产品中想看天气啊，照片啊，地图啊什么的都得进入到相应的目录才可以看到，现在在同一个界面中我们就可以查看到这些内容。 #### 1.2 快捷方式 这是IOS7的界面，只要屏幕往上滑动就可以出现这个界面，以往我们常用的什么wifi开启、手电筒、计算器、照相机不都得进入项目的目录才可以打开吗，现在在这个界面上一应俱全，同时闹钟、音量和飞行模式等同样常用的功能也都被归纳到了这个界面中，是不是更为方便了？ 再看看IOS6，要开个wifi有多麻烦相比大家都知道。 我们在来看前文提到的淘宝手机版本界面，不管你现在在看什么，在操作什么，只需要点击一下右下角的快捷图标就可以回到你想去的位置，而不需要一层一层的往上返回。 #### 1.3 显示关联内容 这是某电影购票手机客户端的用户界面截图，在显示电影院名称的同时还列出了最低价的电影票及剩下的场次等信息。在这个流程中，用户既然已经开始选择 了电影院，代表着用户已经有了购买意向，此时想用户推荐出最便宜的价格和余下的场次使得用户在选择起来更为方便，而不需要再一家一家的去寻找满意的电影票 了，节约了用户的购买时间和流程。 #### 4）减少操作次数 在IOS7中，想要关闭一个后台程序，只需要往上一滑就可以实现 而IOS6则需要先长按，然后再点击需要关闭的应用，不但比IOS7多了一个步骤，用户还多付出了长按的时间。 不过这里我需要注意的是，由于滑动操作在设计表达上没有直接点击那么明显，所以我们在设计带有滑动效果的功能时一定要有足够的提示度，否则很容易让用户现在不知道应该做什么。 ### 二、使用直白的表达方式 俗话说得好，设计得先把用户当傻子..不知道这是哪来的俗话，确实是太股过于俗气，那么我们换个文雅的方式来说则可以表达为：我们需要设计出一样就能让用户看明白怎么操作的功能。比如： 微信的摇妹功能相比是无人不知无人不晓吧...开个玩笑...这个界面应该连小孩子都可以做到，一看就知道是只需要摇动手机可以能实现这个界面所提供的功能了。 ### 三、信息罗列需井然有序 互联网中到底有多少信息？这不是能用个简单的数字能够能量的，在如今的移动互联网时代，如何能让用户快速的找到自己所需的信息，通过用户简易的操作，更直观的将所需的信息展示给用户是我们需要做的事情。我们来看下图： 我们来看个例子： 这是传说中的好123，我非常理解作为互联网“高玩”的你对这个网站是多么的不屑，但他的商业价值是无法忽视的，当年那么多人爱用他可以理解，时至 今日互联网已经飞速发展了那么多年，我们看到他的Alexa排名现在依旧保持在前20位，为什么那么多小白现在还是爱用他呢？因为其中一个原因就是他无论 从设计还是交互上都能很好的诠释扁平化的含义。 ### 小结： 合理的整理内容信息，科学的减少层级关系，恰当的精简操作步骤，明了的传达操作意图。这可谓是做好扁平化交互设计的方法与精髓。扁平化设计是一个概念，是一种思想，更是一种设计精神，为了能在环境和需求日益多变的情况下依旧能够高效的提高用户体验，我们一直在努力着、探索着。