鲜艳的色彩和奇特的排版相结合，为独特的平面界面铺平了道路。 极简主义是这种设计理念的重要组成部分，您可以看到近几个月来这些趋势的流行程度。 平面网站设计是一个绝妙的概念，因为它只关注内容。 但是许多设计师不熟悉最新 趋势 ，也不知道从哪里开始。

在本指南中，我想介绍基于平面设计的文章，教程，免费图形和网站布局的最终​​集合。 仍会采用此概念的任何人当然都会学到一些新东西。 这些趋势已经存在很长时间了，但是我们最近见证了扁平化网站设计的重大增长。

这有充分的理由！ 带有页面内容的平面设计更易于阅读和交互。

• 平面设计的普及
• 平面设计设计师指南
• 设计资源
• 平面网站 [展示柜]
• 平面UI [展示柜]

您不应期望在每个项目中都使用平面设计。 像所有设计趋势一样，当细节融合在一起时，应仅使用平面网站布局。 否则，可能会感到不快，迫使采用简约方法进入更复杂的网站。 但是，当仔细地放置在一起时，我发现纯平的用户界面非常出色，简单，并且毫不费力地诱使它们吸引着未来几年的访问者。

平面网站的受欢迎程度

如《福布斯》（Forbes）上的文章所述，扁平化网站设计在行业内日趋成熟。 它消除了许多更复杂的纹理，图案，阴影，气泡，渐变和其他闪亮效果，以简化工作为重点。 平面按钮仍然看起来可单击，输入字段仍然看起来可编辑。 一般而言，扁平化的网站布局看起来仍然是交互式的，但是没有更加精致的图形。

平面设计已经存在了一段时间，但最近从Microsoft移动平台以及现在的Microsoft Windows 8中获得了动力。Metro设计已开始成为一个主要趋势，将球推向了平面布局。 Web和移动界面都已在时髦的新用户界面中大幅度增长。 响应式网站模糊了台式机和移动设备之间的差异，扁平化的UI弥补了简单性与一些文化阶层之间的鸿沟。

设计平面网站时，您将面临的最大问题是交互元素。 访问者需要知道页面的哪些区域是纯静态内容，而其他区域则是可单击和可拖动的内容。 平面设计仍可以使用阴影和边缘效果来暗示这种交互性。 但是，精巧是游戏的名称，您可以在许多其他平面网站布局中看到示例。

有用的设计师指南

我在网上发表了很多文章，但文章要少一些，但我想分享一些特定的资源，以帮助您了解平面设计概念。 与实际规则相比，我更喜欢将其视为准则。

在有关平面设计和UI问题的中型博客文章中，作者Missy Titus继续解释了平面UI应该有助于解决您的问题或使其更易于查看。 通过去除纹理，针脚和框阴影，您不应从页面上删除重要内容。 设计趋势只是一定的外观。

当然，平面设计并非适用于每个网站。 网站的趋势是如此之多，它们之所以流行是有原因的-人们喜欢多样性。 精心制作的平面2-D界面脱颖而出，因为它们看起来非常易于使用。 而且，它可以使访问者将更多的注意力集中在您的内容上。 另一篇关于平面设计原理的精彩文章将帮助您了解更具体的界面功能。

最值得注意的是，您希望专注于页面内的内容层次结构。 元素通常不相交，并且页面应该非常自然地流动。 这包括在颜色和盒子内容之间切换。 更容易想到围绕排版构建的页面，这些文本框将通知用户如何与页面进行交互。

一些按钮可能使用平坦的背景色，而其他按钮可能使用形状和象形图。 网页文本和配色方案是您的平面网站至关重要的两个设计概念。

最初由Microsoft推广的Metro外观具有出色的颜色选择系统。 这些很重要，因为颜色会使您的网站脱颖而出。 颜色使按钮，链接和标题看起来不那么黑白。 但是有时候选择一个行之有效的方案可能很困难。

您需要查看其他设计的示例，并查看专业人士过去如何做到这一点。 请查看杰出的FlatDesign灵感画廊 ，以获取类似网站界面的集合。

展平的设计颜色

DesignModo已发布了大量基于平面用户界面设计的资源。 在谈论色彩主题时，我想指出另一篇文章，讨论平面设计和色彩趋势 。 该方案本身是通过以全色调显示一种颜色开始，然后去除较低的色调并以黑色/灰色混合来构成的。 此方法将为您的新调色板创建多种阴影。

在任何浅色或深色背景中，最饱和和最明亮的颜色都比较突出。 他们在DesignModo上发表了另一篇有关复古配色的有趣文章，该文章可以与平面网站布局完美地联系在一起。 但是实际上，在构建新项目时，该过程需要一些实践和直觉。

在线资源Flat UI Colors是尝试将创意工作重点放在平面配色方案上的理想起点。

相关文章

我想分享其他启发性博客文章，这些文章与纯用户界面有关，而不是在本文中复制和反调非常规内容。 我已经读过无数篇有关该主题的文章，并且观点很精致。

花几分钟时间浏览此列表中的2或3篇文章，您可能会惊讶于所学内容。

• 设计扁平化
• 平面网页设计：趋势还是革命？
• 平面设计及其重要意义
• 您需要了解的有关平面设计的知识

免费资源

牢记一些设计理论之后，我们应该开始讨论其他平面设计资源。 如果您知道要查找的位置，那么图形和代码示例都可以在网上找到。 开源代码是让新开发人员沉浸于新设计趋势的最佳方法。

但是图形在理解平面用户界面方面也起着至关重要的作用。 网站设计和移动应用程序设计都已经发展成研究领域。 将这些免费资源视为实践平面设计思想的学习工具。

图形

设计人员和开发人员都需要图形。 在几乎每种网站布局中都可以找到符号，图标，徽标和其他常见的图形特征。 因此，使用扁平技术的免费赠品图形在Internet上变得越来越流行。 这是在平面设计领域中创建的我个人最喜欢的UI套件和图标的一小部分。

我只是喜欢Pixeden的惊人的免费赠品和高级图形集合。 就在最近，我发现了一些Dribbble镜头，这些镜头在宣传免费的平面设计图标集。 这些图标分4卷发行，每卷包含一组不同的图标。 vol1和vol2集被意外地标记为相同，但是您可以看出这是大量平面图标的集合–所有这些都可以在任意数量的Web项目中免费使用！

Freebiesbug为设计人员提供了大量出色的PSD文件。 一个例外的例子是他们为用户界面设置的扁平彩色图标集。 您可以从他们的网站或直接从Dribbble页面下载此免费集。 该套件包括基于流行的Internet服务的12个图标设计。 这个集合可能不会对每个项目都有用，但是很高兴知道那里有很多平面设计师供图形设计师使用。

您可能需要出于多种原因在网站中包含浏览器图标。 设计机构和SaaS公司经常需要列出其功能和支持的客户。 这些平面浏览器图标是任何新布局的完美伴侣。 您也可以从Stefano Tirloni发行的原始Dribbble镜头中下载此图标 集 。

讽刺的是设计师Lukas Jurik 于上个月在Dribbble上发布了一些全新的图标。 这个奇妙的收藏品包括PSD文件中的48个免费平面图标设计。 您可以在任何Web或移动项目中自由使用它们。 我特别喜欢这套图标的是各种图标。 对于刚进入平面UI的设计师来说，这确实是一个创意杰作。

iconShock发布的一组精美的平面图标包括3600多个不同示例。 该设计在许多图标上都具有轻微的光泽效果，并且在其他类似的图标集中脱颖而出。 这很棒，因为图标已被调整为大型，中型和小型网站元素的3种不同设置。 这些免费提供的平面图标真是个集合！

此事件输入免费赠品中较深的配色方案使用平面设计功能真正脱颖而出。 该界面本身是为网站构建的，用于处理用户输入以安排活动或可能注册参加会议。 当然，您可以将这个免费赠品用于练习。 但是我也认为各种PSD样式以及配色方案本身提供了一个很好的学习框架。 此免费赠品的全部功劳归Dylan Opet所有 。

在设计网站布局时，很难收集灵感灵感。 没有示例，很难想象来自图像滑块，导航链接，缩略图以及下拉菜单的各种页面对象。 此免费赠品PSD包含出色的纯网站下拉菜单。 这些图标易于缩放，您可以使用CSS3效果复制许多相同的框阴影。 签出原始Dribbble镜头以下载副本并查看另一个预览。

如果您正在寻找基于Web的用户界面元素的集合，那就别无所求！ 由Andreea Nicolaescu发布的这一出色的平面UI PSD免费赠品 ，是编写自己的网站时的绝佳起点。 将此PSD套件不仅用于图形，还可以帮助进行颜色选择和匹配完整的配色方案。 PSD围绕白色背景构建，这是极简主义设计师中最常见的背景。 您可以查看原始Dribbble镜头的全屏预览。

除了出色的平面图标，我还希望共享一系列用户界面工具包。 第一个PSD文件由Riki Tanone创建，并在Dribbble上免费发布。 它是一个小文件，但包含许多另类元素，例如视频播放器和电子邮件收件箱。 色彩艳丽，几乎使我想起各种柔和的阴影。

现在， 第二个UI工具包也由Riki Tanone发布，并将重点更多地放在博客元素上。 它的大小与其他PSD几乎相同，并且包含博客项目，例如订阅框，日历，撰写文本区域，标签输入框以及其他一些简洁的东西。 配色方案更加牢固，但平面按钮/元素看起来几乎相同。 如果您想快速入门，建议您下载这两个工具包，并在自己的时间练习。

这个替代的平面UI套件由Devin Schulz设计，并在Dribbble上免费发布。 我非常喜欢这个PSD文件，因为它主要关注常见的网站元素。 输入字段，水平和垂直导航，滑块，按钮以及许多其他页面对象。 配色方案几乎在每个元素上都采用灰色/绿色，看起来简直太棒了。

所有这些免费的UI套件都完美地体现了平面设计文化。 而且我敢肯定，还有很多其他示例可以在网上找到。 实际上，仅搜索Dribbble会提供一长串平面UI套件结果。 我鼓励所有设计人员查看类似的示例，看看可以从这些平面网页元素中构建出什么。

设计师Dylan Opet也在上面创建了Event Planning UI赠品，他还发布了更新的Flat UI Kit。 这些元素基于常见的网站对象，例如滑块，按钮，开关，标签和输入字段。 我绝对建议下载副本并在一些练习网站上使用这些设计。 即使基于此PSD编码CSS3样式的过程也将是一次巨大的学习经验。

就在最近，Webdesigner Depot上有一篇大文章发布了一个新的平面UI套件。 该集合的设计更类似于都市趋势，具有相似的调色板，界面元素，滑块，条和其他非常规页面对象。 我认为该UI工具包也可以用于移动应用程序设计。 输入他们的通讯注册电子邮件地址后，即可免费下载。

开源代码

前端Web开发人员始终对最新趋势感兴趣。 Web设计和开发往往在许多关键领域重叠，并且在编写网站界面时经常发生这种情况。 签出一些免费的代码样本，您可以在平面设计项目中使用它们。

Flat UI套件可能是Web开发人员了解这一趋势的最佳资源。 DesignModo已发布了免费版本和专业版本 ，其中包括PSD文件和HTML / CSS编码元素。 但是免费版本确实令人惊讶，它提供了您需要的所有主要项目，例如输入字段，切换按钮，标题，图标等等。 他们的免费版本还托管在Github上，供那些可能希望分担项目并扩展功能的开发人员使用。

jQuery iCheck插件是用于增强输入按钮的工具。 值得注意的是，复选框和单选框是两个很难使用CSS设置样式的元素。 iCheck是完全免费和开源的，非常适合新开发人员。 您可以构建出色的界面，只需少量自定义即可完美地融入您的网站布局。

在Design＆Code上发布的免费资源可以在任何网站项目中使用。 直到最近我才发现他们的平面单选按钮看上去很精致，直到那时我才听说过这个网站。 原始设计基于带有深绿色无线电圆圈的深色背景。 在新选择之间切换时，还会显示一个小动画。

Web开发人员可能熟悉jsFiddle和JSBin等基于云的IDE。 好吧CodePen是另一个示例，它实际上在一个位置分类并显示最新的笔。 开发人员将练习他们的技能，并向世界发布真棒的免费赠品代码。

本示例介绍了一组通用的平面接口按钮，这些按钮以3种不同的尺寸设计。 您显然可以更新配色方案以匹配您自己的网站。 但是每个按钮的悬停/活动状态给我留下了深刻的印象。 尽管设计是“扁平的”，但单击时仍可以在按钮下方看到阴影。 这是一个非常不错的效果，非常棒，可以免费找到类似的东西。

这些简单的按钮样式也可以在CodePen中找到。 这更多是一个简单的示例，实际上不支持活动状态。 悬停按钮使用CSS3过渡以优雅的动画效果更新背景颜色。 举个例子，看看是否可以根据自己的需要扩展代码。

CSSFlow片段可能是免费HTML / CSS代码的最佳在​​线画廊之一。 此特定示例是使用平面按钮和几个输入字段的注册表单 。 您实际上可以试用现场演示示例，并在自己的浏览器中查看其工作原理。 提交按钮具有自然的悬停和活动状态，此外，输入字段也会在焦点上发光。 入门虽然不多，但是您可以从CSSFlow摘录页面中找到其他平面设计示例。

50个美丽的平面设计网站

没有一些精美的例子，什么最终的设计指南是完整的？ 平面设计的概念很容易讨论和辩论，但是交谈并不一定会带您到达终点。 浏览其他布局的一些示例实际上可以帮助您将界面整合在一起，而这些界面可能是您自己自己可能没有想到的。

我收集了50个豪华的平面网站布局，希望对世界各地的设计师产生启发。

翻译自: https://www.hongkiat.com/blog/flat-design-resources/