平面网站设计终极指南
平面网站设计是一个绝妙的概念，因为它只关注内容。
极简主义是此设计理念的重要组成部分，您可以看到近几个月来这些趋势的流行程度。
鲜艳的色彩和奇特的排版相结合，为独特的平面界面铺平了道路。
这些趋势已经存在了很长时间，但是我们最近才目睹了扁平化网站设计的重大增长。
仍然会使用此概念的任何人当然都会学到一些新东西。
在本指南中，我想介绍基于平面设计的文章，教程，免费图形和网站布局的最终集合。
带有页面内容的平面设计更易于阅读和交互。
这有充分的理由！
但是，当仔细地放置在一起时，我发现纯平的用户界面非常出色，简单，并且毫不费力地诱使它们吸引着未来几年的访问者。
否则，可能会感到不快，迫使采用简约方法进入更复杂的网站。
像所有设计趋势一样，当细节融合在一起时，应仅使用平面网站布局。
您不应期望在每个项目中都使用平面设计。
平面网站的受欢迎程度
一般而言，扁平化的网站布局看起来仍然是交互式的，但是没有更精致的图形。
平面按钮仍可单击，输入字段仍可编辑。
它消除了许多更复杂的纹理，图案，阴影，气泡，渐变和其他闪亮效果，以简化工作为重点。
正如在《福布斯》（Forbes）上的文章中所提到的那样，扁平化网站设计在业内日益成熟。
响应式网站模糊了台式机和移动设备之间的差异，扁平化的UI弥补了简单性与一些文化阶层之间的差距。
Web和移动界面都已在时髦的新用户界面中出现了大幅增长。
平面设计已经存在了一段时间，但最近从Microsoft移动平台以及现在的Microsoft Windows 8中获得了动力。Metro设计已开始成为一个主要趋势，将球推向了平面布局。
但是，精致是游戏的名称，您可以在许多其他平面网站布局中看到示例。
平面设计仍可以使用阴影和边缘效果来暗示这种交互性。
访问者需要知道页面的哪些区域是纯静态内容，而其他区域则是可单击和可拖动的内容，而没有其他内容。
设计平面网站时，您将面临的最大问题是交互元素。
有用的设计师指南
与实际规则相比，我更喜欢将其视为准则。
我在网上发表了很多文章，但文章要少一些，但我想分享一些特定的资源，以帮助您了解平面设计概念。
设计趋势只是一定的外观。
通过去除纹理，针脚和框阴影，您不应该从页面上删除重要内容。
在有关平面设计和UI问题的中型博客文章中，作者Missy Titus继续解释了平面UI应该有助于解决您的问题或使其更易于查看。
另一篇关于平面设计原理的精彩文章将帮助您了解更具体的界面功能。
而且，它使访问者比您其他任何人更专注于您的内容。
精心制作的平面2-D界面脱颖而出，因为它们看起来非常易于使用。
网站趋势如此之多，它们之所以流行是有原因的-人们喜欢多样性。
当然，平面设计并非适用于每个网站。
更容易想到围绕排版构建的页面，这些文本框将通知用户如何与页面进行交互。
这包括在颜色和盒子内容之间切换。
元素通常不会相交，并且页面应该非常自然地流动。
最值得注意的是，您希望专注于页面内的内容层次结构。
网页文本和配色方案是您的平面网站至关重要的两个设计概念。
一些按钮可能使用平坦的背景色，而其他按钮可能使用形状和象形图。
但是有时候选择一个行之有效的方案可能会很困难。
颜色使按钮，链接和标题看起来不那么黑白。
这些很重要，因为颜色会使您的网站脱颖而出。
最初由Microsoft推广的Metro外观具有出色的颜色选择系统。
请查看出色的FlatDesign灵感画廊 ，以获取类似网站界面的集合。
您需要查看其他设计的示例，并查看过去专业人员的工作方式。
展平的设计颜色
此方法将为您的新调色板创建多种阴影。
该方案本身是通过以全色调显示一种颜色，然后降低色相并以黑色/灰色混合来构成的。
在谈到色彩主题时，我想指出另一篇文章，讨论平面设计和色彩趋势 。
DesignModo已发布了大量基于平面用户界面设计的资源。
但是实际上，在构建新项目时，该过程需要一些实践和直觉。
他们在DesignModo上发表了另一篇有关复古配色的有趣文章，可以很好地与平面网站布局相关。
在任何浅色或深色背景中，最饱和和最明亮的颜色都比较突出。
在线资源Flat UI Colors是尝试将创意工作重点放在平面配色方案上的理想起点。
相关文章
我已经读过无数篇有关该主题的文章，并且观点很精致。
我不想分享非常规内容并将其复制到本文中，而是要分享其他与平板用户界面有关的启发性博客文章。
花几分钟时间浏览该列表中的2到3篇文章，您可能会惊讶于所学到的东西。
免费资源
开源代码是让新开发人员沉浸于新设计趋势的最佳方法。
如果您知道要查找的位置，那么图形和代码示例都可以在网上找到。
牢记一些设计理论之后，我们应该开始讨论其他平面设计资源。
将这些免费资源视为练习平面设计思想的学习工具。
网站设计和移动应用程序设计都已经发展成研究领域。
但是图形在理解平面用户界面方面也起着至关重要的作用。
图形
这是在平面设计领域中创建的我个人最喜欢的UI工具包和图标的一小部分。
因此，使用扁平技术的免费赠品图形在Internet上变得越来越流行。
几乎每种网站布局中都可以找到符号，图标，徽标和其他常见的图形特征。
设计人员和开发人员都需要图形。
vol1和vol2集被意外标记为相同，但是您可以看出这是大量平面图标的集合–所有这些图标都可以在任意数量的Web项目中免费使用！
这些图标分4卷发行，每卷包含一组不同的图标。
就在最近，我发现了一些Dribbble镜头，这些镜头在宣传免费的平面设计图标集。
我只是喜欢Pixeden的惊人的免费赠品和高级图形集合。
这个集合可能不会对每个项目都有用，但是很高兴知道那里有大量平面赠品供图形设计师使用。
该套件包括12个基于流行Internet服务的图标设计。
您可以从他们的网站或直接从Dribbble页面下载此免费集。
一个例外的例子是他们为用户界面设置的扁平彩色图标 。
Freebiesbug为设计人员提供了许多精美的PSD文件。
您也可以从Stefano Tirloni发布的原始Dribbble镜头中下载此图标 集 。
这些平面浏览器图标是任何新布局的完美伴侣。
设计机构和SaaS公司经常需要列出其功能和支持的客户。
您可能需要出于多种原因在网站中包含浏览器图标。
对于刚进入平面UI的设计师来说，这确实是一个创意杰作。
我特别喜欢这套图标的是各种图标。
您可以在任何Web或移动项目中自由使用它们。
这个奇妙的收藏品包括PSD文件中的48个免费平面图标设计。
讽刺的是设计师Lukas Jurik 于上个月在Dribbble上发布了一些全新的图标。
这些免费提供的平面图标真是个集合！
这非常好，因为图标已被调整为大型，中型和小型网站元素的3种不同设置。
该设计在许多图标上都具有轻微的光泽效果，并且在其他类似的图标集中脱颖而出。
iconShock发布的一组精美的平面图标包括3600多个不同示例。
此免费赠品的全部功劳归Dylan Opet所有 。
但我也认为，各种PSD样式以及配色方案本身都为学习提供了一个不错的框架。
当然，您可以将这个免费赠品用于练习。
该界面本身是为网站构建的，用于处理用户输入以安排事件或可能注册参加会议。
此事件输入免费赠品中较深的配色方案使用平面设计功能真正脱颖而出。
签出原始Dribbble镜头以下载副本并查看另一个预览。
这些图标易于缩放，您可以使用CSS3效果复制许多相同的框阴影。
这个免费赠品PSD包含出色的平面网站下拉菜单。
没有示例，很难想象来自图像滑块，导航链接，缩略图以及下拉菜单的各种页面对象。
在设计网站布局时，很难收集灵感灵感。
您可以查看原始Dribbble镜头的全屏预览。
PSD围绕白色背景构建，这是极简主义设计师中最常见的背景。
将此PSD套件不仅用于图形，还可以帮助进行颜色选择和匹配完整的配色方案。
由Andreea Nicolaescu发布的这一出色的平面UI PSD免费赠品 ，是编写自己的网站时的绝佳起点。
如果您正在寻找基于Web的用户界面元素的集合，那就别无所求！
色彩艳丽，几乎使我想起各种柔和的阴影。
它是一个小文件，但包含许多另类元素，例如视频播放器和电子邮件收件箱。
第一个PSD文件由Riki Tanone创建，并在Dribbble上免费发布。
除了出色的平面图标，我还希望共享一系列用户界面工具包。
如果您想快速入门，建议您下载这两个工具包，并在自己的时间练习。
配色方案更加牢固，但平面按钮/元素看起来几乎相同。
它的大小与其他PSD差不多，并且包含博客项目，例如订阅框，日历，撰写文本区域，标签输入框以及其他一些简洁的东西。
现在， 第二个UI工具包也由Riki Tanone发布，并将重点更多地放在博客元素上。
配色方案几乎在每个元素上都采用灰色/绿色，看起来简直太棒了。
输入字段，水平和垂直导航，滑块，按钮以及许多其他页面对象。
我真的很喜欢这个PSD文件，因为它主要关注常见的网站元素。
这个替代的平面UI套件由Devin Schulz设计，并在Dribbble上免费发布。
我鼓励所有设计人员查看类似的示例，看看可以从这些平面网页元素中构建什么。
实际上，仅搜索Dribbble会提供一长串平面UI套件结果。
而且我敢肯定，还有很多其他示例可以在网上找到。
所有这些免费的UI套件都完美地体现了平面设计文化。
即使基于此PSD编码CSS3样式的过程也将是一次巨大的学习经验。
我绝对建议下载副本并在一些练习网站上使用这些设计。
这些元素基于常见的网站对象，例如滑块，按钮，开关，标签和输入字段。
设计师Dylan Opet也在上面创建了Event Planning UI赠品，他还发布了更新的Flat UI Kit。
输入他们的电子报注册电子邮件地址后，可以免费下载。
我认为该UI工具包也可以用于移动应用程序设计。
该集合的设计更符合都市趋势，具有相似的调色板，界面元素，滑块，条形图和其他非常规页面对象。
就在最近，Webdesigner Depot上有一篇大文章发布了一个新的平面UI套件。
开源代码
签出一些免费的代码样本，您可以在平面设计项目中使用它们。
Web设计和开发往往在许多关键领域重叠，并且在编写网站界面时经常发生这种情况。
前端Web开发人员始终对最新趋势感兴趣。
他们的免费版本还托管在Github上，供可能希望分担项目并扩展功能的开发人员使用。
但是免费版本确实令人惊讶，它提供了您需要的所有主要项目，例如输入字段，切换按钮，标题，图标等等。
DesignModo已发布了免费版本和专业版本 ，其中包括PSD文件和HTML / CSS编码元素。
Flat UI套件可能是Web开发人员了解这一趋势的最佳资源。
您可以构建出色的界面，只需少量自定义即可完美地融入您的网站布局。
iCheck是完全免费和开源的，非常适合新开发人员。
值得注意的是，复选框和无线电输入是两个元素，使用CSS很难设置样式。
jQuery iCheck插件是用于增强输入按钮的工具。
在新选择之间切换时，还会显示一个小动画。
原始设计基于带有柠檬绿色无线电圆圈的深色背景。
直到最近我才发现他们的平面单选按钮看上去很精致，直到那时我才听说过这个网站。
在Design＆Code上发布的免费资源可以在任何网站项目中使用。
开发人员将练习他们的技能，并向世界发布很棒的免费赠品代码。
好吧CodePen是另一个示例，它实际上在一个位置分类并显示最新的笔。
Web开发人员可能熟悉基于云的IDE，例如jsFiddle和JSBin。
这是一个非常不错的效果，非常棒，可以免费找到类似的东西。
尽管设计是“扁平的”，但单击时仍可以在按钮下方看到阴影。
但是每个按钮的悬停/活动状态给我留下了深刻的印象。
您显然可以更新配色方案以匹配您自己的网站。
本示例介绍了一组普通的平面界面按钮，这些按钮以3种不同的尺寸设计。
举个例子，看看是否可以根据自己的需要扩展代码。
悬停按钮使用CSS3过渡以优雅的动画效果更新背景颜色。
这更多是一个简单的示例，实际上不支持活动状态。
这些简单的按钮样式也可以在CodePen中找到。
入门虽然不多，但是您可以从CSSFlow摘录页面中找到其他平面设计示例。
提交按钮具有自然的悬停状态和活动状态，此外输入字段也会在焦点上发光。
您实际上可以试用现场演示示例，并在自己的浏览器中查看其工作原理。
此特定示例是使用平面按钮和几个输入字段的注册表单 。
CSSFlow片段可能是免费HTML / CSS代码的最佳在线画廊之一。
50个美丽的平面设计网站
浏览其他布局的一些示例实际上可以帮助您将界面整合在一起，而这些界面可能是您自己没有想过的。
平面设计的概念很容易讨论和辩论，但是交谈并不一定总能使您达到终点。
没有一些精美的例子，什么最终的设计指南是完整的？
我已经收集了50个豪华的扁平化网站布局，希望对世界各地的设计师产生启发。
