扁平化交互设计技巧详解.pdfVIP

在线学习好工作 / 扁平化交互设计的技巧详解 自IOS7 风格横空出世后，扁平化设计就深受设计师追捧并成为大势所趋， 扁平化成为视觉设计的普遍标准之一。今天和大家发分享的就是扁平化设计的技 巧，一起来看看吧。 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 安全卫士，无论是手机还是电脑，都有一个“一键体 检、一键杀毒”的类似功能，这种功能就是把我们比较复杂的功能精简成了一个 按钮，能够让小白用户点一键就明白是什么功能。 如图微信摇一摇，它可谓微信呈爆发式增长的一个里程碑的功能，除了朋友 圈之后就是摇一摇了。“摇一摇”为什么能火，是因为它做的极简，它表达的也非 常准确。所谓“极简”，“摇”的动作是任何人都能做出来的一个动作，只要手部一 摆，就可以做到，非常的容易，甚至比点按更加容易。再看它为什么准确？“摇 一摇”的功能其实是为了互动，是为了交流，为了添加好友，那为什么要用“摇一 摇”呢？因为古代当人类没有语言的时候，人们是通过手势、动作进行交流的， 而“摇”的动作是古代进行交流的最轻松平常的动作。那么微信的产品经理就用这 种最古代最传统“摇”的动作来做移动端的添加好友功能。并且“摇”添加陌生人为 好友最为合适不过。