传统的网站设计诸如阴影、水晶按钮、渐变、高光,而"扁平化设计"抛弃这些拟真视觉效果,从而打造出一种看上去更"平"的界面。无论在传统网页设计或针对移动设备所做的界面设计中,复杂炫目的效果对产品而言未必是最好的选择。过于复杂的效果不仅很难吸引用户,反而容易让用户在视觉上产生疲劳,甚至产生认知障碍。因此我们在网页设计中需要参考"扁平化"的简洁美学。
扁平化完全属于二次元,这个概念最核心的地方就是放弃一切装饰效果,诸如阴影,透视,纹理,渐变等等能做出3D效果的元素一概不用。所有的元素的边界都干净利落,没有任何羽化,渐变,或者阴影。尤其在手机上,更少的按钮和选项使得界面干净整齐,使用起来格外简洁。可以更加简单直接的将信息和事物的工作方式展示出来,减少认知障碍的产生。
举个例子,我们通常会为界面当中的按钮添加渐变和投影效果,因为现实当中的按钮就是具有这些视觉特征的,即使这些效果对于界面元素的功能来说没有任何实际意义。又譬如有些天气方面的应用会使用温度计的形式来展示气温;在现实世界中,这种实体的存在是必需的,而在应用软件当中,温度计的形象则纯粹是装饰性的。
日历应用当中皮革质地的设计元素是必需的吗?如果按钮上不使用3D质感,用户是否还知道它们可以被点击?有多少装饰性的元素是真正必要的?
"在现实生活中,当按钮被按下时,你可以清楚的感受到它的弹性,但在桌面设备或移动设备的显示屏上,你无法感觉到这种物理回馈。看上去是实体的东西却无法让人感受到实体本该具有的反馈效应,至少对我来说这是一种很蹩脚的、不符合预期的体验。
1.选择简单的背景
忘掉那些华丽的或复杂的砖墙式图片。在扁平化设计中,应该选用朴素、淡雅的颜色或是色调相近的颜色。
2.拒绝特效
在扁平化设计中不要有阴影、高光或是动画特效。就像我们之前了解扁平化设计的定义一样,它就是要避免在设计中使用任何透视、纹理或能做出3D效果的元素。所有元素的边界都应干净利落,没有任何羽化、渐变。
3.使用图标
扁平化设计经常使用图标,这是因为图标可以用来提供简单、流线型的用户体验。图标不仅方便用户点击,另外由于用户凭经验能大概知道每个图标代表了什么 ,还可以极大的减少用户学习新交互方式的成本。所以在网站设计中记得使用图标,但是也要确保图标是通用的、大家都知道的,不受地域、种族、文化、语言等因素影响的。如果我们使用的图标不能很快容易被访问者们理解,使用它们还有什么意义呢?
4.玩转各种图形
各种各样的图形在扁平化设计中很流行。圆形、正方形和线条不仅是设计布局美化的一个元素,还可以作为网站内容的分界线,让每个部分内容的层次更加分明,有助于访问者明白网站每个页面的整体框架。
5.惯用明亮配色
配色在网站中的重要性,相信大家都深有体会了,小飞在这就不多说了。扁平化设计通常采用比其他风格更明亮、绚丽的颜色,就像粉红色、蓝色、绿色和黄色等在这种设计中都很常见。但是,这种设计风格往往倾向于使用单色调,甚至是纯色,还有一点要注意的是这些颜色的使用不要太过,一个页面最好不要使用超过3种颜色,太多的颜色会让网站看起来凌乱、没有美感。
6.主菜单清晰
主菜单、按钮以及所有的链接都应该看起来很简洁、清晰,不要有任何阴影或强调效果。一般而言,在扁平化设计中,按钮常放在一个简单的框(矩形或圆形)里面,或者以更加简洁的设计方法:什么图形都不用,只使用文本本身。
7.重视字体排版
目前文本已经成为一种重要的可视化元素,扁平化设计鼓励在网站上使用大胆、创新的字体和排版,这能让网页充满趣味,不单调。不过要记得任何时候都不能为了时尚或噱头牺牲字体的可读性,如果用户无法正常浏览网站,还谈什么排版和设计风格。
无论风格如何,界面形式都取决于实际的功能。好的设计方案离不开产品前期的规划工作,特别是通过草图或线框原型进行的探索。识别出最核心的用例需求,使用原型不断尝试和验证,为接下来的界面设计工作打下坚实的基础。
扁平化风格的逐渐盛行固然有它的道理,但本质上它只是设计美学当中的一种;与仿古、高光、金属质感、木质等视觉效果相同,对视觉风格的选择必须以良好的信息架构及交互模式为基础。
扁平风格的一个优势就在于它可以更加简单直接的将信息和事物的工作方式展示出来,减少认知障碍的产生。
随着网站和应用程序在许多平台涵盖了越来越多不同的屏幕尺寸,创建多个屏幕尺寸和分辨率的skeuomorphic设计既繁琐又费时。设计正朝着更加扁平化的设计,你可以一次保证在所有的屏幕尺寸上它会很好看。扁平化设计更简约,条理清晰,最重要的一点是,更好的适应性。