扁平化设计与拓展[文档资料]

扁平化设计与拓展 本文档格式为 WORD,感谢你的阅读。 一、扁平化 Flat design，译为扁平化设计。扁平化设计就是摒弃了一切干扰用户阅读内容本质的修饰效果，比如阴影、透视、纹理、渐变和任何 3D 效果。通过抽象、简化、符号化的设计元素，干净利落的展现所要呈现的内容与信息；界面设计采用极简抽象、矩形色块、大字体；交互设计在于功能的本身使用，去掉了冗余的界面和交互。使用户的关注点能停留在应用所传递的信息本身，就好像 Windows Phone 最初想要做到的那样： “ 聚焦信息本身 ” 而不是应用本身。 二、扁平化设计 为什么要进行扁平化设计？这是因为我们的需求环境在发生变化。以前我们没有 ipad、没有智能手机这类智能移动设备，只有桌面电脑，所以扁不扁平化似乎没有那么重要。现在我们有着多种智能设备，需要在各个场景各个设备上随时切换，这样就需要有一种新的设计理念即扁平化设计。 扁平化设计是一种极简主义美学，附以明亮柔和的色彩，最后配上粗重醒目，而风格又复古的字体。扁平化设计简化了诸如按钮、图标一类的界面元素。 1.不添加效果 摒弃一切装饰效果，诸如凹凸、阴影、斜角、渐变、材质等能做出 3D 效果的元素。所有元素的边界都干净利落，没有任何羽化、渐变或者阴影。微软的 Metro 风格用户界面就是一种典型的扁平化，没有阴影、高光、渐变和纹理的修饰，取而代之的是平面化的色块与突出的文字信息。 这种设计有着鲜明的视觉效果，它所使用的元素之间有着清晰的层次和布局，使得用户能直观了解每个元素的作用以及交互方式。如今从网页到手机应用无不在使用扁平化的设计风格，尤其在手机上，因为屏幕的限制，使得这一风格在用户体验上更具优 势，更少的按钮和选项使得界面干净整齐，使用起来格外简单。 2.界面元素 扁平化设计通常采用许多简单的用户界面元素，诸如按钮或者图标之类。设计师通过观察和了解对象的本质，进行巧妙的取舍，使用简单的外形（矩形或者圆形），在没有更多特效装饰的情况下清楚的表达内容，在界线与轮廓的高对比下，表现出物体的美感。 这些用户界面元素可以方便用户点击，用户凭经验就能大概知道每个按钮的作用，极大地减少用户学习新交互方式的成本。 3.优化排版 由于在扁平化设计中使用的都是极简的元 素，排版就成了很重要的一环，排版好坏直接影响视觉效果，甚至可能间接影响用户体验。 由于界面更加简洁，字体在排版中就显得非常重要，使用字体帮你创建期望的风格和基调。一种新奇的字体作为设计元素将会发挥极其重要的作用。 4.注重色彩 扁平化设计中，通常采用比其他风格更明亮更鲜艳的颜色，而且倾向于使用单色调，尤其是纯色，并且不做任何淡化或柔化处理。同时，扁平化设计中的配色要使用更多的色调。比如，其他设计最多只包含两三种主要颜色，但是扁平化设计中会平均使用六到八种颜色。 醒目明 亮的颜色能够增加视觉元素的趣味性；单色调的配色方案，可以选择一些具有生气的颜色，然后在色调上进行调整，增强色彩之间对照感，提高辨识度。 三、扁平化设计的拓展 在保持扁平化设计的基础上，增加一点效果和美感，使其成为一种独特的效果。比如，在简单的按钮旁加一点点渐变或阴影，从而使这种风格成为其特色，产生出一种扁平化设计的变种。这种设计要比单纯的扁平化更具有适用性和灵活性，用户也喜欢这种稍微圆滑一点的设计方式。 1.长投影 长投影即延伸投影，一般都是 45 度角的阴影从图标中延伸 出来，投影一般为物体的 2.5 倍大，阴影也是扁平的，无渐变、明暗和衰退。 2.阴影式 阴影式和长投影不同之处在于长投影是 “ 投影 ” ，而这种带阴影的效果能够给图标增加一种层次感和立体感。 3.渐变式 渐变式其渐变也是扁平的，为扁平化设计增加一种精致感。 四、扁平化交互设计 随着各种智能设备的多样性和普及化，交互界面需要更容易适应其变化，扁平化的交互界面要比其他样式更容易处理。在扁平化设计模式之前，我们一直都在强调交互的易用性和良好的用户体验感。接下来，我 们来探讨一下扁平化的交互设计： 1.减少结构层级 结构层级就是交互步骤，让用户用最少的步骤来完成任务，就是要求层级结构的扁平。 针对智能移动设备，能否直接把网页上的结构搬上去，显然不行。由于移动设备的限制，主界面的广度大大减弱，而深度更为明显。在桌面电脑上可以用各种导航方式表现出层级结构，让用户不迷路。但在移动设备上，由于显示区域有限，只能采用不断的 “ 返回 ” 方式，增加了操作的繁琐。那么怎样才能在移动设备上减少结构层级、精简交互步骤。 1）并列信息 将并列的信 息显示在同一个界面中，减少页面的跳转。比如：以前什么天气、邮件等应用，都必须到具体的应用里才能看到，而 windows8 在同一个界面中都展示出来了。 2）快捷方式 在任意界面只要向下滑动都能从屏幕顶部呼出一个快捷菜单。 层级结构的减少，用户不需要一层一层地进入设置进行操作，提高效率的同时也使结构变得清晰。 3）显示关键信息 比如在线购电影票，除了显示影院、影片名称之外，还能显示出最低票价、余下场次、是否可以购票等关键信息，这样就不需要逐个查看影院信息了，加快了 购买效率。 由于智能移动设备没有足够的空间来展示路径，如果没有清晰的层级关系，就可能使用户迷失方向，甚至要进入深层次的信息才能找到想要的，这时更应该做的是减少信息的深度。 2.表达方式直白、准确 如果你的功能不能让用户一眼就看明白，还需要解释的话，那么这个功能就失败了。通过减少按钮和选项，让使用更简洁，用直观的表达方式，让使用更准确，不用再为这里要怎么操作而苦恼。 例：摇一摇，用户的本能反映，不需要任何解释，只要拿着手机晃动就能实现这个功能。 3.信息直观、 有序 在大数据时代，如何从这些数据里找到自己想要的，尤其是在小屏幕设备上展示，更需要减少过度繁杂元素的交互界面设计，让信息更直观的展现。 在大数据状态下，通过 “ 分类！分类！分类！ ” 方式降低数据的使用难度，让用户能根据清晰的分类快速找到自己需要的东西。 4.一致性 现在的用户已经习惯了在多场景下运用多平台设备，一旦用户学会了界面中某个部分的操作，他们很快就能知道如何在其他设备上进行操作。这就需要功能的一致性、平台之间的无缝衔接，比如： QQ 应用软件。 五、扁平化 设计的局限性 尽管在应用和网页设计中越来越多人开始使用扁平化设计，但这并不意味着它就是无懈可击的。 首先，像以往任何一种设计趋势一样，它也可能会因为一些设计师的心血来潮和不经大脑被滥用，在扁平化设计时出现偏差，那将直接影响应用的可用性。 其次，扁平化去除了特效，界面中的每个