扁平化设计-纯粹而灵活的设计方式

INFINITY ATRS 2016-06-28 16:49:49

扁平化设计风格(Flat design)源于对用户放弃使用产品的原因的研究。其中最主要的两个原因是导航效果不佳及加载缓慢。

下面这张截图就是扁平化设计的一个很好的范例。扁平化意味着既不过度单调,也没有过多元素。


flat_trendz.jpg

谷歌目前正在大力鼓励响应式设计。因为响应式设计风格的网站只有一个URL和同样的HTML,这让谷歌能更好地指示内容。而扁平化设计风格与响应式设计的理念十分契合。扁平化设计不需要多余的元素,因而加载十分快速。它也更利于在不同大小的设备上显示干净利落的排版。

扁平化设计的主要原则

色彩

我们先从色彩开始吧:对色域的大胆运用是扁平化设计的标志之一。Windows 8首先使用了具有明亮色彩的分层。使用色彩和大小都不同的元素能便捷地创建分层。过去,设计中色彩的主要目的是提升程序的使用效率,但事实证明它在创造审美效果上也同样出色。

获得一个具有一致性的色域的有效方法是,先选择一种颜色,然后调低色调,增加灰度,以便获得不同色调但彼此相关的色彩。有种论调认为,在扁平化风格的设计中,元素之间模糊的界限常令用户感到不知该点击哪里。其实只要能恰当地调整色彩,大小和文本就能轻易避免这一点。记住,色彩越明亮,它的主导性就越强。

恰当的功能可见性

所谓功能可见性(affordance)就是网站上表明某个元素可用于实现某个任务的信号。“点击此处”就是功能可见性的一个例子。另一个例子是一个用于代表主页的房屋图标。

网页开发者需要在自己的设计中清楚地表现出功能可见性。这也是过去三十年里一直被网页开发领域的专业人士所实践的一个准则。然而在扁平化设计中,网站中的项目一般都需要进行重新设计以便让非专业人士的用户也能轻松地使用网站。

UI Patterns 列出了功能可见性的许多不同范例。

明确的功能可见性

当网页上的项目能使任何具备最粗浅的上网技术的人都感到明白无误的时候,这些项目便具备了明确的功能可见性。例如,一个很大的“点击此处”图标会让用户产生点击的冲动。在这两处场景中运用明确的功能可见性非常重要:一是面对新用户时,二是采用新的或非常独特的界面时。

设计者需要帮助对应用程序不熟悉的用户树立信心,以便他们能尽快熟悉常用的图标。而新推出一款app时,即使针对的是经验丰富的用户,也要清楚地说明图标的意义,以便用户在执行任务时能顺利达成目标。设计师还应特别考虑年轻用户,老年用户以及生活在网络尚未完全普及的地区的用户的需要。当然,总体的设计目标还是要创建合理有序的网页。

模式化的功能可见性

模式化的功能可见性指的是已被广泛认可的,能实现特定任务的网页项目。例如点击红心可以将网站加入“我的最爱”列表。一个有下划线的词语代表着一个链接,如果你点击它的话会被转到别的网站/网页。模式化的功能可见性可以说是应用最广泛的一种功能可见性。

隐藏的功能可见性

隐藏的功能可见性是指,只有用户执行了特定的操作后,项目才会显示的特性。例如当光标置于其上才会显示的下拉式目录。通过这种方式可以隐藏很多导航选项。这是很有必要的,因为网站的上需要显示的选项太多了,但又不可能同时显示。

错误的功能可见性

网页中充斥着错误的功能可见性,提示,指引或模式,他们告诉用户当点击或光标悬停在某个元素上时就会产生某个结果,而事实上却什么也没有。有时导致这样问题的是一个无效链接,有时是设计的疏忽,但更多时候,是由于质量低下的平面设计。这也是导致用户弃用某款产品的主要原因之一。

借喻式的功能可见性


20140618115003_89754.jpg

 这个指的主要是图标的使用。例如,一个打印机的图标其功能就是指示用户打印文件。拟物化的图标是写实而充满细节的,而扁平化设计风格的图标就不是这样。借喻式的功能可见性只会采用平面的,极简化的图像,将一个项目压缩为易于理解的符号。Dribbble 提供了很多极简的扁平化设计图标,设计师可以免费下载使用。

下图是拟物化设计与扁平化设计图标的对比。

排版

soundboardapp.png


扁平化设计非常重视简洁与秩序,它必须通过排版和视觉元素来传达设计师的心思。

一般来说扁平化设计风格的网站中文字或密集的文字块很少见,所以设计师处理这些文字内容必须十分用心。有些设计师会说在设计中将无衬线字体用于标题或正文中十分重要。尽管如此,我们还可以更进一步,设法获得更为清晰的字体。

扁平化设计检查清单

在将你的设计交付给客户之前,请对照以下表单逐一检查你的项目,以确认你的设计符合扁平化设计的审美理念:

  1. 设计中用于显示行动按钮的图像和图标足够简洁清晰吗?

  2. 在每个页面中,是否有清晰的标题提示本页面的主要功能

  3. 页面中的功能可用性是否足够清楚且合理?

  4. 分级是否能清晰展示?

  5. 你是否将网站的社交选项置于醒目位置?分享到社交媒体的功能是否便捷?


皖ICP备15007581号-1|百度统计
瑞狐科技全程技术支持,品牌整合营销价值的驱动者

Copyright © 2015 Wise-fox.com Limited All Rights Reserved.

配音员之家 合肥网络公司 合肥网站建设 连云港建网站公司 合肥SEO 深圳网站建设 合肥小程序开发