创建平面设计网站（一）-CSDN博客

原文：zh.annas-archive.org/md5/76ED001744425FC67A6333D19F2CBD18

译者：飞龙

协议：CC BY-NC-SA 4.0

前言

扁平设计是一种数字设计风格，近年来在网页和用户界面设计中成为最大的趋势之一。它以其极简主义风格而闻名。它出现在拟物化风格被认为是最大和最著名的趋势的时候，这对用户和设计师来说是一个非常艰难和极端的转变。

《创建扁平设计网站》将讲解扁平设计的故事，从其早期发展到现在，同时向您展示一些最著名的例子，并解释如何以实用和简单的方式设计和实现自己的扁平设计网站。

本书涵盖内容

第一章，“什么是扁平设计？”，解释了什么是扁平设计，自国际印刷风格引入以来的历史，以及它如何在多年来发展。我们还将了解是哪些品牌帮助推动了扁平设计的光芒，以及这种风格如何成为更多品牌和界面的趋势，比如最近发布的苹果 iOS 7。

第二章，“扁平设计”，介绍了如何在扁平设计中设计以及设计师在设计时应该牢记的最重要的事情。它将着重于字体排版、对齐和始终使用清晰、隐形网格以及创建更可预测布局的重要性。

第三章，“创建扁平且可用的界面”，展示了为什么你应该专注于网页可用性以及它对于扁平设计网站的良好功能有多么重要。主要重点是避免对界面、导航和可读性造成任何损害，为了举例说明这一点，我们将创建一些测试和视觉练习。

第四章，“设计您自己的扁平网站”，将逐步向您展示如何设计您的单页面扁平网站。我们将覆盖从规划视觉部分到决定布局和导航，一直到最终像素的整个过程。

第五章，“开发您的网站”，将解释如何使用 Designmodo 扁平 UI Bootstrap 组件开发上一章设计的页面。我们将介绍如何编写基本静态页面，以及 jQuery 过渡和 CSS3 效果。

第六章，“创建您自己的扁平 UI 工具包”，将介绍如何创建您自己的工具包，同时回顾您所做的所有工作。我们将看到如何组织我们的图像、样式和效果，并将它们保存以便将来作为个人扁平 UI 工具包使用。

你需要什么

在本书中，我们将创建一个网页设计并开发一些代码，具体来说是 HTML、CSS 和 JavaScript（借助 jQuery）。对于设计，我们将使用 Photoshop，CS4 及更高版本都可以。对于代码，我们需要一个代码编辑器，比如 Sublime Text，可以从sublimetext.com免费下载和评估；这是一款很棒的软件。您也可以使用其他任何您喜欢的代码编辑器，比如 Windows 的 Notepad++ (notepad-plus-plus.org/)，Linux 的 Coda (panic.com/coda/)，或者 Mac 的 Espresso (macrabbit.com/espresso/)。

本书适合谁

本书适用于有兴趣创建网站的设计师和开发人员。理想情况下，您应该具有一些设计概念的先验知识，但了解如何在初学者/中级水平上使用 Photoshop 是必不可少的。这也适用于已经具有一些前端开发知识的设计师，因为我们将使用 HTML、CSS 和 JavaScript（借助 jQuery）开发网站。

约定

在本书中，您将找到一些区分不同信息类型的文本样式。以下是一些这些样式的示例，以及它们含义的解释。

文本中的代码单词、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 URL、用户输入和 Twitter 句柄显示如下：“我们现在将为我们的<body>元素创建样式”。

代码块设置如下：

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<button class="btn">Click Here</button>
</body>
</html>

新术语和重要单词以粗体显示。例如，屏幕上显示的单词、菜单或对话框中的单词会以这种方式出现在文本中：“点击下一步按钮将您移至下一个屏幕”。

注意

警告或重要提示会以这样的方式显示在一个框中。

提示

提示和技巧会显示在这样。

读者反馈

我们非常欢迎读者的反馈。请让我们知道您对本书的看法——您喜欢或不喜欢的地方。读者的反馈对我们开发能让您真正受益的书籍非常重要。

要向我们发送一般反馈，只需发送电子邮件至<feedback@packtpub.com>，并在消息主题中提及书名。

如果您在某个专题上有专业知识，并且有兴趣撰写或为一本书做出贡献，请参阅我们的作者指南www.packtpub.com/authors。

客户支持

现在您是 Packt 书籍的自豪所有者，我们有一些事情可以帮助您充分利用您的购买。

下载示例代码

您可以从您在www.packtpub.com的账户中下载您购买的所有 Packt 书籍的示例代码文件。如果您在其他地方购买了本书，您可以访问www.packtpub.com/support并注册，以便将文件直接发送到您的电子邮件。

勘误

尽管我们已经尽最大努力确保内容的准确性，但错误还是会发生。如果您在我们的书中发现错误——也许是文本或代码中的错误——我们将不胜感激地接受您的报告。通过这样做，您可以帮助其他读者避免挫折，并帮助我们改进本书的后续版本。如果您发现任何勘误，请访问www.packtpub.com/submit-errata进行报告，选择您的书籍，点击勘误提交表格链接，并输入您的勘误详情。一旦您的勘误经过验证，您的提交将被接受，并且勘误将被上传到我们的网站上，或者添加到该书籍的勘误列表中的 Errata 部分。您可以通过从www.packtpub.com/support选择您的书籍来查看任何现有的勘误。

盗版

互联网上侵犯版权材料的盗版问题是所有媒体的持续问题。在 Packt，我们非常重视版权和许可的保护。如果您在互联网上发现我们作品的任何非法副本，请立即向我们提供位置地址或网站名称，以便我们采取补救措施。

请通过<copyright@packtpub.com>与我们联系，并附上涉嫌盗版材料的链接。

我们感谢您帮助保护我们的作者，以及我们为您提供有价值内容的能力。

问题

如果您在阅读本书的过程中遇到任何问题，请通过<questions@packtpub.com>与我们联系，我们将尽力解决。

第一章：什么是扁平设计？

在本章中，将解释什么是扁平设计以及这种风格是如何产生的。我们将涵盖自 1950 年以来平面设计在平面设计中的前身，然后讨论拟物化设计在使扁平设计成为数字设计中最大趋势之一的过程中的重要性。

我们还将了解扁平设计的当前状态，它是如何被一些最大的品牌所采用的，以及我们如何每天与扁平设计的界面进行交互。还有一个简单的练习，帮助您了解如何构建拟物元素及其扁平对应物，以更好地澄清拟物和扁平设计之间的区别。

定义扁平设计

扁平设计是数字设计风格之一，是 2013 年最受讨论的趋势之一。它的特点是非常极简的外观，专注于从设计中去除所有额外的元素和效果，如斜角、阴影、光效、深度、纹理以及赋予这些元素额外维度的每个元素。

这种处理方式导致了在屏幕上创建一种非常简单和清晰的外观，通过使用白色空间、明亮的颜色和简单的线条作为布局元素。扁平设计作为一种风格，因其有影响力的外观但令人惊讶的简单方法，迅速崛起并被广泛使用。它开始聚集了一大批风格的粉丝和支持者，因为大多数人在扁平设计中看到了一个机会，让他们能够创建一个简单而漂亮的网页。

它无疑是 2013 年设计中最受讨论的话题之一，有很多支持者，也有很多反对这种风格以及对其重要性和讨论的人。

此外，扁平设计之所以在社区中产生如此大的影响，其中一个最重要的原因是它的时机。扁平设计出现在拟物化设计是数字设计和界面中最著名和使用的风格之一的时候。它们以一种显著的方式形成对比，对于这些应用程序的用户以及需要改变他们的设计风格以满足用户的愿望和期望的设计师来说，这确实是一个非常艰难和极端的转变。那么，什么是拟物化设计呢？

历史和演变

扁平设计作为数字设计趋势和名称在 2012 年左右出现在网络上。作为对拟物化设计的回应和替代，首批采用者引起了很多关注，因为相对于当时创建的复杂和沉重的设计，走上创建如此简单和清晰布局的道路被认为是一种风险。这种趋势的转变是历史上一直发生的事情。时尚和风格是循环的，而在这个数字化的时代，这些循环往往更短，变化可能比以往更快。

要真正找到扁平设计的最初起源，我们需要回到 1950 年，当时国际印刷风格（或瑞士风格）的发展。这种风格也专注于创造清晰、可读的设计，与当时印刷海报中使用的复杂插图、纹理和照片形成对比。这也是 Akzidenz-Grotesk 开始更频繁地使用的时候，这是最终成为 Helvetica 的字体的第一个版本，这给无衬线字体排版带来了新的力量和重点。无衬线字体是瑞士风格海报的重点之一，特别是大号无衬线字体，从而传达出非常有影响力的信息。我们可以说这在历史上是扁平设计的第一种形式。

几十年后，在数字领域，微软是推动这种极简外观前进的责任人之一，2006 年推出了 Zune 音乐播放器。尽管设备本身并不是商业上的成功，但其界面是革命性的。对于细长和大字体的重视，以及对导航和图标的清晰和极简处理，是今天微软界面重新设计的根源之一，这种风格仍然可以在 Windows Phone 上强调的字体菜单中找到。Zune 还影响了其他产品，如 Xbox 360 仪表板和 Windows 8。Windows 8 界面，也被称为Metro UI，也是强调扁平设计风格的最大界面改革之一。这是对微软 Windows 外观的巨大改变，也是一个非常大胆的改变，受到了设计社区的很多赞赏，并影响了很多试图复制这种方形布局的网站至今。以下截图显示了 Metro UI 中扁平设计的使用：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

但回到扁平化设计的定义，这是一个由设计师们提出的术语和风格。其中一位来自 LayerVault 的设计师 Allan Grinshtein 在他的文章The Flat Design Era（layervault.tumblr.com/post/32267022219/flat-interface-design）中写道，他认为优雅的界面是用最少的元素产生最大影响。这个观点，再加上 LayerVault 扁平化设计界面的成功和良好反馈，强化了极简界面可以被认为是可用的，并在应用的用户群中取得巨大成功。在这个时候，随着第一批大胆设计师的成功，整个设计社区都开始追随并坚持这种风格，创造了大量遵循扁平设计美学的设计提案和应用。

拟物化与扁平化

拟物化设计，也被称为现实主义，是在 2012 年和 2013 年非常流行的一种风格，它包括创建代表其原始物理对应物的视觉元素。

拟物化被定义为设计或结构的元素，在新材料制成的物品中几乎没有作用，但对于原始材料制成的物品却是必不可少的（来源：维基百科—en.wikipedia.org/wiki/Skeuomorph）。

苹果为其台式机和移动应用创建了多个拟物化界面；例如 iCal、iBooks、Find My Friends、播客应用等。

这种界面在设计界和用户中都备受喜爱和厌恶。这是一种风格，非常注重细节和质感，使界面更加沉重和复杂，但因为与所描绘的真实物体有清晰的联系，所以也更加有趣。由于拟物化界面呈现出的高度细节和互动，用户体验愉快且丰富，吸引眼球的是这些设计所付出的细节和关怀；例如，iBooks 中的翻页效果，视觉上代表了传统书籍中的翻页动作。但这种风格也有其缺点。

除了从传统界面（如苹果的情况，它意味着从其著名的玻璃和清晰的 Aqua 界面）过渡过来的一种严格的转变，桌面上的一些拟物化应用似乎并不符合整体操作系统的外观。除了风格偏好和不连贯的外观之外，拟物化设计也是一个糟糕的设计选择，因为这种风格本身就是对创新的限制。通过复制传统和类比设计，设计师没有选择或自由去想象、创造和设计新的界面和用户交互。扁平设计作为一种极简和清晰的风格，通过忽略任何形式的限制和效果，给了设计师所有的自由。但是两种风格都有适用的场合和时间，拟物化对于直接替代硬件的应用非常适用，比如音频混音器。使用这些界面使新用户更容易学会如何使用真实的硬件对应物，同时之前使用过硬件的用户也会轻松地学会如何使用界面。

无论风格如何，一个好的设计师必须准备创建一个适应用户和市场需求的界面。为了举例说明这一点，并更好地了解扁平和拟物化之间的基本区别，让我们做一个快速的练习。

练习 1 - 拟物化和扁平按钮

在这个练习中，我们将创建一个简单的呼吁行动按钮，复制立即购买。我们将创建这个元素两次；首先，我们将采用拟物化方法，创建一个看起来逼真的带有纹理、阴影和深度的按钮。接下来，我们将简单地将其转换为扁平化的对应物，去掉所有这些额外的元素，并将其调整为极简主义风格。

您应该已经准备好这个练习所需的所有材料。我们将使用 Lato 字体，也可以在 Google Fonts 上免费获得，以及wood.jpg图像作为拟物化按钮上的纹理。我们只需要 Photoshop 进行这个练习，所以让我们打开它并按照以下步骤进行。

创建一个 800 x 600 像素的新 Photoshop 文档。这是我们将创建按钮的地方。
让我们从创建拟物化按钮开始。我们首先使用圆角矩形工具创建一个半径为 20 像素的矩形。这将是我们按钮的正面。为了在创建元素时更容易可视化，让我们将其设为灰色（#a2a2a2）。
现在我们已经创建了按钮的正面，让我们给这个按钮增加一些深度。只需复制图层（在 Mac 上按command + J，在 Windows 上按Ctrl + J），然后将其拉到 10 或 15 像素，取决于您的喜好。让我们将这个新的矩形变成更深的灰色（#393939），并确保这个图层在正面图层下面。现在你应该有一个简单的灰色按钮，带有一些深度。侧面图层通过向下拉动几个像素来模拟按钮的深度，由于我们使它变暗，它看起来像阴影。
现在是行动的时候。在按钮正面上创建一个文本框，将其宽度设置为按钮的宽度，并将文本居中。在其中，写上立即购买，并将文本设置为 Lato，粗细为黑体，大小为 50 pt。通过观察屏幕，垂直居中，直到你发现它正确地坐落在按钮的中心。
现在为了使这个按钮真正拟物化，让我们获取我们的图像wood.jpg，让我们将其用作我们的纹理。创建一个名为wood-face的新图层，并确保它位于我们的face图层之上。现在要定义图层作为纹理，并使用我们的按钮作为蒙版，我们将右键单击图层，然后单击创建剪贴蒙版。这将使我们的纹理覆盖按钮面。
对于侧面纹理，复制wood-face图层，将其重命名为wood-side，并重复前面的说明以处理侧面图层。之后，为了获得不同的外观，移动wood-face图层并寻找纹理的好区域，理想情况下是一些上升条纹，使其看起来更真实。
为了完成侧面，创建一个新的图层样式在side图层中，渐变叠加，并制作一个从黑色到透明的渐变，并更改设置如下截图所示。这将在木头上产生阴影效果，使其看起来更好。
要完成我们的拟物按钮，让我们回到文本，将颜色定义为#7b3201（或另一种棕色；尝试从按钮中选择并稍微加深，直到找到看起来不错的颜色），这样看起来就像文本是被雕刻在木头上的。
最后的触摸将是在文本中添加一个内阴影图层样式，设置如下。将所有图层分组，并命名为拟物，我们完成了。

现在我们有了我们的拟物按钮。这是一个非常简单的方法，但我们通过使用形状、纹理和一些图层样式重新创建了木制按钮的外观。

现在我们来制作我们的扁平版本：

复制我们刚刚创建的组，并将其命名为扁平。将其移动到工作区的另一半。
删除以下图层：wood-face、wood-side和side。
这个按钮不会有任何深度，所以我们也不需要侧面图层和纹理。为了保持按钮与我们之前的颜色方案相同，我们将使用颜色#7b3201作为我们的文本和面部颜色。我们将制作一个透明按钮，只有边框上有颜色，并在鼠标悬停时填充（我们将在本书的后面介绍这些效果）。您的文档应该看起来像下面的截图所示：
创建一个新的图层样式，并选择描边，设置如下。这将创建我们按钮的边框。为了使按钮透明，让我们将图层填充选项减少到 0%，这样只会应用图层样式。
让我们删除文本的图层样式，使其变平，将字体的粗细减少到粗体，使其变得更薄，大致与边框的重量相同，并在视觉上对齐，我们的扁平按钮就完成了！练习 1-拟物和扁平按钮

这种透明按钮非常适合扁平界面，特别是在模糊的颜色背景上使用。这是因为它创造了一个有影响力的按钮，只有很少的元素，创造了一个透明的控件，并充分利用了设计中的空白空间。在设计中，特别是在设计扁平化时，要记住少即是多。

通过这个练习，您能够构建一个拟物元素，并将其拆解成扁平版本，这就像一个带边框和文本的圆角矩形一样简单。我们选择的字体经常用于扁平设计布局；它简单但圆润，非常适合圆角形状，就像我们刚刚创建的那些一样。

在现实世界中的扁平使用

设计师对这种风格的采用和使用非常迅速。苹果、谷歌和 Facebook 等大品牌和公司重新设计了它们的界面和品牌，创造了更简单的外观。苹果 iPhone 的移动操作系统 iOS 7 绝对是这种采用的最大例子，因为它的界面被完全重新设计以简化导航、控件、图标和操作系统中存在的几乎每个元素。鉴于用户界面世界中所见到的变化，这已经是可以预料的了，但从 iOS 6 和其拟物化应用到 iOS 7 和其扁平外观和实验性界面的巨大跃升。更多的品牌也跟随了这一转变，比如 Facebook，重新设计了他们的品牌和应用，使其更简单和扁平。大多数移动应用重新设计了它们的界面和图标，并遵循了这种扁平风格。少即是多；扁平设计帮助品牌理解这一点，并改变了它们的外观，使其更简单和清晰。看看以下的例子：

Facebook 标志重新设计（旧版本和新的扁平重新设计）：
谷歌标志重新设计（旧版本和新的扁平重新设计）：
苹果 iOS 为 iPhone 设计（左边是 iOS 6，右边是重新设计为扁平风格的 iOS 7，可以在使用的图标中看到）：

总结

所以你看到了！我们看了扁平并不是一种新的设计风格，因为它的极简主义外观可以追溯到 20 世纪 50 年代的国际版式风格。我们还介绍了如何在拟物化和扁平中设计，以及它们的主要区别。此外，我们了解了扁平设计在一些世界著名公司如谷歌、Facebook 和苹果中的重要性和普及程度，它们重新设计了它们的标志和用户界面以匹配这种外观。

现在我们知道了什么是扁平设计，接下来我们将发现如何在扁平中设计，以及作为设计师，你应该专注于创建一个出色的扁平界面。

第二章：扁平设计

本章涵盖了如何在扁平设计中设计，以及在设计时需要专注的最重要的事情。它还将介绍排版、对齐和网格布局的重要性，以创建更好、更易读的设计。继续阅读，了解在扁平设计中设计时需要牢记的所有事情，并准备开始创建自己的扁平设计项目。

设计风格

扁平设计是一种风格，顾名思义，类似于平面。这种外观和风格迅速在设计师中流行起来，因为它简单而又有很大的影响。在本章中，我们将介绍扁平设计的限制和规则，你应该做什么，不应该做什么，以及何时在你的布局中使用扁平设计。

扁平设计网站看起来有条理，干净，而且非常专业。想象一间摆满家具、桌子、沙发、地毯、花盆和植物的房间。你曾经在这样的房间里，尽管感觉舒适，但有时会感到拥挤，有时东西太多了。现在想象一下去掉那些桌子、沙发和地毯，只留下基本的东西：一块地毯，一张沙发，只有一张小实用的桌子。白色的墙会显得更清晰、更大，房间会感觉更清晰、更宽敞。对于刚开始扁平设计的设计师，比如你自己，这大致是你需要经历的过程，通过去除所有额外的图像、细节和效果，比如阴影和渐变，只专注于用扁平的背景和扁平的颜色来展示信息。

扁平设计绝对是一种趋势。尽管它已经存在很长时间，但原因是它带来了很好的学习和很好的界面。设计师通常会追随趋势，并根据当前更频繁使用的风格来创建自己的作品。毕竟，灵感几乎每天都来自我们所看到的任何地方，而网络是我们不断使用的东西。设计师对布局的新想法和方法创造了新的范例和设计模式，因此，作为设计师，我们追随这些模式是很自然的。这导致布局的不断改进和界面的新想法，扁平设计也是如此。它是一种特定的风格，有着特定的外观。如果你想创建扁平设计，你应该遵循这些规则，并最终将其与自己的风格混合在一起。这些规则也可以被视为限制，但在设计中，这并不总是一件坏事。

在限制下工作

我认为扁平设计不是一种自然的风格；它不是一种你自然会使用的风格，而是需要强迫自己使用的。即使是最极简的网站通常也不会采用扁平的外观，因为扁平有其特定的外观和特定的规则。

这是因为设计师经常会发现设计中的缺陷和问题，并试图通过装饰和变通来克服它们。文字如果在每个图像上都不易阅读，通常会有微妙的阴影，以确保有一个更暗的背景，使文字对比足够，始终可读。这些是设计师面临的挑战。这些限制使得设计变得有趣，因为通过去除所有这些支撑，设计师发现自己只专注于重要的事情。

在学术背景下，当学生被分配一个设计项目时，他们可以设计任何他们想要的东西，并且还可以选择使用哪种媒介作为风格，通常结果会比被分配特定主题和媒介的学生要糟糕。例如，通过知道你正在为儿童玩具设计网站，你有了你的焦点和目标。当你被允许做任何事情时，很难知道你想要专注于什么。限制在项目管理中非常有效，可以让你将注意力集中在最重要的任务和设计上。这让你设计所需的元素，并专注于更适合目标的风格。

平面设计确实是一种具有自己一套限制的风格。您需要设计看起来平坦并且不使用通常可以使用的任何效果。您需要遵循某种美学；它必须简单，必须有很多空白空间，并且必须看起来结构化和有组织。您放置内容的空间必须经过深思熟虑，因为通常它将是一个较小的部分。如果您有一个有数十个文本块的大页面，您最终会得到一个更加拥挤的布局，并且无法获得您试图追求的美学外观。

定义您的限制，并使您的布局尽可能优化。如果某个副本或图像不需要，只需删除它。它变得越简单，最终看起来就越清晰。

平面并不总是答案

就像每种风格一样，平面设计应该在外观符合产品目标和目标的网站和产品中使用。并非所有网站或应用程序都会从使用平面美学设计中受益。平面设计外观确实非常灵活，可以在非常不同类型的市场和目标中使用，但始终牢记您的目标。只有在对手头的项目有意义时才使用平面。每个项目都是不同的，您希望通过您的网站传达信息或通过用户界面与用户互动的方式因项目而异。

平面设计可以很容易地在设计师作品集、公司网站、Web 应用程序、移动应用程序、餐厅等许多不同的示例中找到和使用，但您需要问自己这个问题：平面设计对我的网站来说是一个好的外观吗？如果您正在创建游戏网站，比如 RPG，或者推广高端昂贵的产品，比如手表或好酒，您可能最好跳过平面设计。原因是这些项目将受益于纹理和渐变阴影等效果，并允许设计师创建更高端和微妙的外观。例如，游戏网站由游戏图像和未来或旧元素组成，这些元素总是与所讨论的游戏相关联。想象一下如果魔兽世界网站采用平面设计会有多无聊。因此，请确保您的项目适合平面外观，不要只是为了目标而使用该风格，因为这将失去目的并失去所有影响力。

以下屏幕截图显示了魔兽世界网站：

平面设计并不总是答案

放下你的“拐杖”

没错，平面设计有一个“无拐杖”规则。所有投影阴影、斜角、发光、渐变、光照效果、纹理和浮雕都不应在这里使用，因为这种限制是学习和实践创建平面设计的最佳方式。

如果您想要创建真正的扁平外观，您需要确保您的设计确实是扁平的。但是，不要认为扁平是一种专制；您总是可以尝试创建扁平的 3D 外观，看起来非常棒，是的，阴影是允许的。每个设计师都试图用自己的想法添加和改进风格，伴随而来的是伟大的图标。阴影和光线的使用不应破坏扁平外观。因此，首先尽可能扁平地设计，专注于使扁平设计看起来很棒的重要事项。设计包括网格、空白空间、构图和排版；当您感到舒适时，尝试添加这些新元素，因为它们看起来非常好。甚至有一种阴影风格，称为长阴影，与扁平一起使用。这基本上类似于地面附近的光线，产生了沉重而长的阴影。这创造了一个很酷的效果。看一下以下的截图：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Pixeden 提供的扁平设计图标集（左）和 Sajeer Mohamed 提供的 Motorola Long Shadow 标志（右）

照片还是插图？

对这个问题的答案非常简单：两者都可以。

扁平设计插图是设计师们非常快速地掌握的技能，特别是用于设计扁平图标，从而在这些图标上使用扁平颜色，达到非常有趣的效果。这些插图看起来很棒，确实是网站扁平化外观的很好补充（如果它们确实与您的产品和目标相关），但照片也可以（而且应该）被使用。扁平不仅仅是关于文本和简单的颜色；它是关于创建一个布局，让您的照片和内容脱颖而出，将用户的注意力集中在内容上，而不是界面上。这在拟物化界面上经常发生。

如今，很常见看到网站使用非常宽广和高分辨率的人物、产品或环境照片，更容易地展示他们的产品在真实情境中。经常有人说一张图片胜过千言万语，所以，善用这些图片来帮助您传达信息。照片在设置网站的情绪和语气方面非常重要；扁平设计在图片上看起来很棒，因为它是复杂（图像）和简单（布局）的混合，这在两者之间产生了很好的对比。

如果您正在寻找一些预先设计的扁平图标，有几套免费的图标集可以在线使用，由设计师创建并为设计师创建。

以下是一些您可以在项目中使用的例子：

Pixeden 提供的扁平设计图标集 Vol1（www.pixeden.com/media-icons/flat-design-icons-set-vol1))
由 buatoom 提供的免费扁平图标（dribbble.com/shots/1095922-Free-Flat-Icons))
由 Jan Dvořák 提供的免费扁平图标（dribbble.com/shots/1054478-Free-Flat-Icons))
扁平图标收藏（www.flaticon.com/))
扁平图标收藏（flaticons.net/))

扁平很棒，因为它是一种简单的风格，可以让您展示其内容。最终，一切都关乎内容，设计的功能是以最简单和最快的方式将内容传达给用户/读者。因此，在扁平设计中，尽情使用您的图片，让内容说话，而不是界面。以下的截图是一个很好的例子：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Teehan+Lax 设计工作室主页

尊重网格

网格在平面设计和数字设计中都是重要的工具。网格是一组虚拟线条，定义了主要布局的间距和尺寸，它是界面的基础，布局将建立在其上。它是一个框架，为用户提供设计每个页面和每个部分内容的方向和指导，而无需担心对齐、安全边距和间距。这是因为网格早已在之前开发，避免了对每个页面进行这些计算。请看以下截图：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用 Guide 插件的 Photoshop 指南

网格绝对是每个设计作品中的重要组成部分，但对于扁平设计来说，它的重要性不可否认。由于扁平设计倾向于减少框和线条，网格对于将所有视觉元素组合成布局非常重要。两个对齐的元素可以给观看者产生一个块或一条线的感知，这些视觉感知是通过网格和确保这些对齐是正确的来构建的。

空白空间是扁平设计想要实现的清洁简约外观中最重要的因素之一。在设计中使用网格对于创造这种空白空间至关重要。均匀和平衡的元素将创建结构，否则您将使用框和线来创建。以下截图显示了 numbrs.com 网站上对空白空间的运用：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

为了帮助您设计，已经开发了几种适用于各种应用程序的网格系统。特别是对于 Web，最常用的之一是 960 网格系统。它可以在960.gs上找到。以下截图显示了 960 网格系统在tapbots.com上的使用：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

这个网格将允许您基于最常用的尺寸创建几种不同类型的块，所有这些块都是以总宽度为 960 像素构建的。您可以选择 12 列或 16 列。这些可以分开使用，也可以在同一布局中一起使用，以在保持一致性和连贯性的同时为您的块设计提供更大的灵活性。

如果您想要创建一个响应式网站，一个很好的工具是 unsemantic，它可以在线获取，网址为unsemantic.com/demo-responsive。这是一个非常类似于 960 的网格系统，但是与固定网格不同，这个系统是流体网格。流体网格完全基于百分比，而不是固定列数，允许布局适应设备视口，并为用户提供响应式体验。

我们将在本书的后面学习更多关于网格以及如何使用它们的知识，第四章 设计您自己的扁平网站。

专注于排版

排版对于平面设计布局非常重要。为了简单和几何形状，无衬线字体是在平面设计中处理排版时的明确选择。有许多字体在平面设计中更常见且更常用。这些字体是根据其特性选择的。这些字体通常是几何形状的；然而，它们可能具有微圆角，它们通常在标题中使用大写字母。在一个词中使用所有大写字母也是为了为该词创建更具影响力的外观，这也可以通过字体的较重重量来实现。一个很棒的字体应该有几种不同的重量，以便能够将轻型风格与粗体或特粗体混合在一起，因为这种两种相反重量的混合在标题和文本块中视觉上看起来很好。它通过创建这种视觉对比来更加关注标题。以下截图是 Motiva Sans 字体具有不同重量的示例。此字体可在www.myfonts.com/fonts/niramekko/motiva-sans/上获得。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

如今，可以在网上找到大量质量良好的免费字体。这些字体专为网络设计。Google Fonts 等网站允许用户轻松搜索、浏览和在其项目中使用字体。这对于希望在其网站上使用自定义字体的网页开发人员来说是一个很好的工具。

以下是一些建议在平面设计中使用的字体系列：

普罗克西玛新体（www.myfonts.com/fonts/marksimonson/proxima-nova/）
未来体（www.myfonts.com/fonts/bitstream/futura/）
拉托（www.google.com/fonts/specimen/Lato）
蒙特塞拉特（www.google.com/fonts/specimen/Montserrat）
Open Sans（www.google.com/fonts/specimen/Open+Sans）
科伯特（www.fontsquirrel.com/fonts/corbert）

这些只是您可以在设计中使用的一些字体。随意搜索更多适合您目标风格的字体。根据您选择的字体类型，您可以获得更严肃或更愉快的语气。明智地为您的项目选择字体，因为字体是网站外观的主要因素之一。理想情况下，您应该在每个网站上选择最多两到三种字体。主要字体应该用于标题。这是最详细的字体，也是排版的基调。您应该选择另一种字体用于文本块，这将是您的正文；这种字体应该是中性的，其唯一目的是使文本可读并使其与标题形成对比。可能的第三种字体应该是适合大写和小字体的字体；这可以用于标题，描述图像，或者可以附加到图形上。谨慎选择您的字体；比较和测试它们以确保它们搭配得很好。始终牢记您使用的媒介，因为为屏幕设计的字体可能在印刷品上不起作用，反之亦然。

平面颜色

在平面设计中使用颜色的规则非常简单：避免渐变和纹理。这些颜色应该原样使用，不做任何修改。即使是一个平面颜色看起来也会有一点渐变，因为 LCD 屏幕的构造方式。这是因为屏幕的每个区域颜色不会完全相同，而且围绕设备的光线也会对其产生影响。因此，请尝试测试您的颜色并选择一个有效且好看的调色板。

尽管有一些首选的扁平颜色类型。网站 http://flatuicolors.com 很适合快速检查这些颜色并使用它们。只需点击屏幕上的颜色，十六进制代码就会复制到剪贴板上，准备好粘贴到您的 Photoshop 或 CSS 代码中。网站上显示的颜色很容易代表所使用的颜色类型。这是对使用鲜艳颜色的有趣尝试，但它们应该稍微调和一下。强烈的绿松石色、调和的绿色和略微不那么鲜艳的蓝色是最常用的颜色之一。其想法是创建一个良好的颜色背景，但不要太鲜艳，以避免过多地关注颜色。记住，颜色是内容所在的背景，焦点应始终放在内容上，而不是颜色本身。以下截图显示了来自 http://flatuicolors.com 的扁平 UI 颜色：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

在创建网站时，您应该选择要使用的调色板。这个调色板由网站中使用的所有颜色组成，应该有一两种主要颜色和一些额外的中性颜色。例如，在 patterntap.com 的情况下（如下截图所示），主要颜色显然是页眉部分使用的那种绿黄色，而黑色用于顶部的次要菜单，非常浅的灰色用于背景。每种颜色都有自己的功能。黄色是与品牌相关的主要颜色，黑色是分隔符。有一个单独的内容中性区域，灰色是内容区域，可读性更重要。定义自己的调色板；尝试使用主要颜色的不同色调，较浅和较深的颜色；并测试它在链接、标题和视觉元素（如线条）中的效果。创建调色板时要记住的一件重要事情是，必须避免混合不搭配的颜色。还要记住在使用它们时要保持一致。如果一个标题在一个页面上是浅蓝色，那么在所有页面上都应该是这样。

提示

让我告诉你一个小秘密；在使用黑色作为线条或文本时，尝试使用非常深的灰色而不是完全的黑色。它看起来会好很多。同样的，尝试使用灰色或略带黄色的白色，而不是纯白色。稍微加深颜色会给元素带来另一种外观，就好像您在使用纹理一样。

以下截图是扁平颜色的一个例子（www.patterntap.com）：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

灵感和参考

在设计中需要很多专业知识，但其中最重要的之一是视觉文化。通过观察他人的作品来充实自己的视觉文化。在学习时，尝试复制其他人的风格，并了解他们是如何做到的，最重要的是为什么要这样做。

通过在视觉上保持对不同项目的最新了解，您会发现自己会在视觉上学习到一些使用的设计模式，以及颜色调色板、界面思想、布局和排版。这只需要看看其他人正在做什么，并在视觉上感受一下。您可以在本节后面找到一些关于扁平设计和布局的灵感和良好的参考。这些都是扁平设计的执行的一些很好的例子，还展示了如何以不同的方式使用这种风格。注意白色空间、使用的颜色和调色板，以及图标、摄影以及这些网站整体组织。可以随意将这些用作自己项目的灵感，通过采用执行和布局的想法，而不是直接复制整个布局。

设计师的工作需要是原创的，无论灵感和/或使用的设计模式是什么。

以下是一些您应该了解和查看以获取灵感的网站。这些是平面设计的出色执行示例：

Treehouse（www.teamtreehouse.com）
Treehouse 内容部分，采用平面风格插图（www.threehouse.com）
Numbrs 主页，使用无衬线文本的全屏照片（www.numbrs.com）
Wacom 主页，带有内容块和平面图标（www.wacom.com）
Hellomonday 主页（www.hellomonday.com）

摘要

到目前为止，您应该能够理解在平面设计中网格和空白空间的重要性，以及如何使用出色的排版在平面颜色上创建有影响力的消息。平面设计关乎细节，在这种情况下，细节在于学习如何在缺乏复杂性和噪音的情况下进行设计。现在您知道如何使其看起来不错。在下一章中，我们将学习如何使其运行良好，通过讨论网络可用性及其在平面界面中的重要性。

第三章：创建扁平且可用的界面

本章将涵盖扁平设计中的网页可用性，以及这对每个网站和网络应用程序的设计功能有多重要，因为这种风格可能会因其简单的外观而产生几个可用性问题。我们将通过理解什么是网页可用性，并学习以可用性为重点设计网页表单，学习设计师需要注意哪些元素以及需要关注什么，以成功创建可用界面。

了解网页可用性

网页可用性顾问和可用性专家 Jakob Nielsen 在网站中定义了可用性，www.nngroup.com/articles/usability-101-introduction-to-usability/，如下所示：

“可用性是评估用户界面易用性的质量属性。该词还指的是在设计过程中改善易用性的方法。”

在这种情况下，网页可用性与网站的良好功能以及用户使用的简单和可预测性有关。我们作为设计师和开发人员，假设对于大多数人来说，使用网站是容易的，已经被认为是一种自然的技能，但这不是您应该做出的假设。相反，当设计网站或界面时，您必须假设用户没有使用它们的先前经验。界面必须设计得直观且易于使用，即使对于初次使用的用户也是如此。

所有元素必须在视觉上可识别。例如，链接、表单、文本字段和按钮等元素必须易于区分。例如，链接通常是以历史和通常表示的方式——正如在 HTML 的第一个版本中定义的那样——在文本块中的蓝色下划线单词，但这并不总是如此，主要是由于网页设计师创建的自定义和颜色方案。这意味着即使不使用超链接的标准符号，用户也应该有一种简单的方式来识别文本块中的这个元素。这必须是自然的，用户必须自己理解，而无需任何解释。通常，这是通过保持单词中的下划线并将颜色更改为与文本颜色对比的颜色来完成的。下划线可以被粗体文本效果替换，以澄清这个特定单词与常规阅读文本的不同之处。

鼠标悬停效果也非常重要。当将鼠标悬停在单词上时，用户会检测到单词的不同之处；有时，下划线消失了，或者单词应用了粗体效果。然而，无论选择的效果或样式如何，链接都会有视觉上的变化。这种变化是让用户感觉到这个特定元素对交互作出响应，被认为是一个比简单文本更重要的元素的原因，就像超链接一样，它将带用户到另一个页面。

这是用户访问网页时经历的思考方式，这是可用性在网页设计中起作用的一个例子。在谈论网页或移动应用程序时，可用性更加重要，因为在这种情况下，必须存在特定的用户旅程，以允许用户完成某些任务。这是因为应用程序是具有特定目标的工具。然而，在网站上，内容的访问取决于访问者的兴趣和他们自己的目标。

不幸的是，可用性的重要性经常被忽视，但它应该始终成为每个网页设计项目中的一部分。鉴于其外观，这在扁平设计中尤为重要，但为什么可用性很重要呢？

网页可用性的重要性

可用性有几个重要原因。首要原因是，可用性保证您的网站“只是起作用”。

在创建任何项目时，总会有一个目标。通常目标是通过展示图像和文本内容来向访问者提供信息，但也可以是销售产品或服务，甚至在 Web 应用程序的情况下直接提供服务。无论目标是什么，总是有一个。可用性是您和设计师确保一切正常运作以实现该目标的工具。通过确保用户理解网站导航或通过澄清按下按钮的操作，您使用户更容易更有可能按照预期的用户旅程进行操作。

如果您经营商业网站，这尤为重要，因为它将直接影响您的收入，可能是成功或失败的在线业务之间的区别。有一个案例，一个网站仅通过更改一个简单的按钮就在一年内增加了 3 亿美元的收入。这绝对证明了可用性的重要性。

在设计网站时考虑可用性往往是保留访问者和失去访问者之间的区别。如果用户不理解网站，或者他们无法轻松找到他们想要的东西，就会感到沮丧，用户会离开，去其他地方寻找内容。您可能知道这种感觉，当您在混乱的网站上寻找某些东西时，会感到非常困难。试着想象一下，当用户使用网站时会有什么想法，并确保避免可能出现的所有挫折。

如果您觉得您已经解决了基本的可用性问题，但仍然相信您可以改进您的工作，那么您可能需要开始测试。了解您的网站出现了什么问题的最佳工具之一是用户测试，也就是与用户坐下来，与他或她一起浏览网站，并从他或她的反馈中学习。

有很多不同的方法来测试网站，如果您有兴趣了解更多关于网站可用性的信息，我强烈推荐 Jakob Nielsen 的书《设计网站可用性》，可在亚马逊上购买。

实现良好的平衡

好的，现在我们已经讨论了什么是网站可用性，您知道它会对网站的访问者产生多大的影响，我希望您退一步，放松一下，不要惊慌。您可能已经通过使用常识来避免大部分较大的可用性问题，就像任何为特定设计做决策的设计师应该做的那样。我们不希望制作一个网站，以至于缺乏风格和色彩。毕竟，创新来自于大胆尝试不同的事物。

话虽如此，您的最终目标是在一个真正出色的网站和一个功能性网站之间实现良好的平衡。大多数情况下，可用性只是关于组织和常识，这是一种工作方式，而不是一种应用技术。更具创新性的界面在开始时可能更难使用，但设计师可以选择冒这个风险来获得不同的体验。然而，如果您想玩得更安全，请尝试专注于已知和熟悉的布局类型和简单的设计。

有时，通过对网站设计进行非常小的简单调整，可以实现可用性改进。

有几位设计师提出了对知名网站的重新设计，其中大多数都集中在通过重新组织、简化或甚至重新设计元素来简化当前的布局。重新组织和简化元素是一个很好的练习，因为它让您了解哪些元素在设计中真正重要，哪些只是装饰性的。

瑞典机构 Weare1910 (weare1910.com/) 为维基百科 (en.wikipedia.org) 创建了一个重新设计提案，他们重新设计了网站，更加专注于内容，同时简化了设计。通过大幅改善排版，使文本和行高更大，并提高了文章的可读性，同时简化了布局，去掉了左侧的菜单。这创造了一个更简单但可识别的维基百科网站版本。以下屏幕截图 (blog.weare1910.com/post/75576312730/a-readable-wikipedia) 显示了维基百科（顶部）和其重新设计（底部）。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

维基百科（顶部）和重新设计（底部）。可在 http://blog.weare1910.com 找到

因此，为了清晰地看到这一点，让我们做一个简化设计的小练习。我选择了伦敦交通局网站的主页，因为它是一个较旧的网站，其设计仍然非常笨重，看起来非常凌乱。这绝不是一个严肃的重新设计，而只是一种学习如何简化设计以创建更轻盈和可读性更强的页面的方式。

首先，让我们找到可以操作的原始网站。您可以打开本书提供的 tfl-redesign.psd 文件并进行操作。

提示

下载示例代码

您可以从 http://www.packtpub.com 的帐户中下载您购买的所有 Packt 图书的示例代码文件。如果您在其他地方购买了本书，可以访问 www.packtpub.com/support 并注册，以便直接通过电子邮件接收文件。

打开文件后，让我们确定要处理的块。只关注内容部分，忽略右侧的条形。我们将网站分为三个主要部分：主要亮点部分，带有奥斯特收费和巴克莱信息的中间部分，以及其他新闻和重要信息的最后部分。这些是我们将重新设计的部分。以下屏幕截图显示了旧的 TFL 网站（www.tfl.gov.uk）在左侧，已确定的主要内容部分在右侧：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

TFL 网站 www.tfl.gov.uk（左）和主要内容部分（右）已确定

确定并突出显示了我们的部分后，让我们开始用我们的内容替换它。对于第一部分，创建类似的标题和正文文本，并覆盖当前设计，以便我们可以在同一元素中对齐内容。

因此，重新编写第一部分的标题。您可以使用 Lato 字体来完成这项任务。将文本大小设置为 13 磅，将标题的粗细设置为黑色，以使其与描述文本区分开。前两个块已禁用，因此让我们将文本颜色设置为灰色（#979797）。这将使文本呈现出一种褪色的黑色，并在视觉上暗示这些块已被禁用，与已启用和活动的块形成对比。由于我们正在删除蓝色背景，因此无法保持文本为白色。因此，将活动行标题设置为蓝色；只需选择背景颜色并将底部线设置为黑色。

您现在已经有了第一部分的内容。只需选择图像并删除它，并将该部分涂成白色以匹配背景。为了改善这些部分内容行之间的分隔，让我们创建一些分隔线。在文本之间创建两条 1 像素粗的灰色分隔线（#dcdcdc）。这将有助于在视觉上定义这些块，同时保持它们非常简单和轻盈，正如下面的屏幕截图所示：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

继续下一部分，让我们做同样的事情，用覆盖的方式替换文本。复制相同文本的颜色，忽略绿色三角形。将文本对齐到区块的左侧，并删除之前存在的图像和文本。在完成所有这些操作后，页面应该如下截图所示：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

对于最后一部分，做同样的事情，将标题与图像顶部对齐，并保持相同的颜色。最终结果将类似于以下截图：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

现在我们已经简化了所有的部分，我们可以看到页面看起来更轻更干净。然而，没有了线条和框，内容似乎不那么拥挤。因此，我们需要在区块之间留出更大的间距，以使它们在视觉上分离开来。只需将第二和第三部分下拉一些像素，就足以给人不同部分的感觉。简化后的 TFL 网站的结果将类似于以下截图：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

这些简单的改变在结果上带来了明显的改善。事实上，改变只是简单地从布局中移除背景图像和非必要图像，以使内容定义区块而不是框和线。这导致产生了更多的空白空间，使网站变得更轻。这在以下截图中是显而易见的：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

网页表单的可用性

正如我们之前所说，可用性在扁平设计中非常重要。从这种风格中在可用性方面受到的影响最大的元素通常是网页表单。通常很容易使控件（如按钮和文本字段）与扁平样式相匹配，以至于它们失去了使它们可识别的效果和特性。文本字段通常由一个矩形框表示，内部有微妙的内阴影来显示它正在等待内容。这种阴影在扁平设计中经常丢失，为了避免这种情况，我们需要确保表单是可识别的。有几种方法可以做到这一点。最好的方法是亲自动手，所以让我们在网页表单的可用性上做一个简单的练习。

接下来，我们将为网站创建一个简单的注册表单。为此，我们将使用附带本书的资源包中提供的ele_winvista_firefox_all.psd文件。它也可以在designerstoolbox.com/designresources/elements/vista/firefox/上找到。

这个文件是一个浏览器表单模板，其中包含在 Firefox 中创建基本 HTML 表单时会遇到的元素。所以，让我们开始吧。

使用常规浏览器样式创建网页表单

让我们执行以下步骤来创建一个网页表单：

在 Photoshop 中创建一个大小为 350 x 350 像素的新文件。我们将在这个文件中创建我们的表单。
创建一个带有文本Name的文本字段。这个字段将作为剩余字段的标题模板。您可以将字体定义为 Arial，并将大小设置为 14 磅。
现在你有了标题，将Input Field文件夹从模板文件中复制到你的新文档中。将它们与标题左侧对齐，文本字段右侧对齐，如下截图所示：
我们需要整理文件，并将标题和字段保存在与字段对应的文件夹中。复制name文件夹，然后将其改为Age。
现在，让我们创建一个Gender字段。为此，我们将使用下拉列表的模板，并为其分配一个独立的标题。
假设我们正在为一个博客创建一个表单，所以我们需要一个账户类型选择器。然后，我们将创建一个名为“账户”的字段，带有单选按钮。复制“已选择单选按钮”和“未选择单选按钮”文件夹，并分别将文本更改为“作者”和“评论者”。这是博客将具有的两种不同的账户状态，具有不同的权限。
最后，将“按钮”文件夹复制到您的文件中，并将其对齐到右侧。
我们的标准表单已完成！这是在 Firefox 浏览器中简单的 HTML 表单的外观，这是标准外观之一。您应该最终得到类似下面截图的设计：

就是这样，非常简单对吧？但是，这是一个相当标准的“不那么令人兴奋”的外观。接下来，让我们尝试一下扁平设计风格。

使用扁平样式重新创建表单

现在我们有了基本表单，我们需要重新创建元素以匹配扁平设计的外观。为此，让我们使用之前使用的字体 Lato，并按照以下步骤重新创建表单：

复制我们创建的文件，并将其命名为flat-form.psd。我们将使用我们之前创建的文件作为基础来创建这个新表单。
将标题的字体更改为 Lato，并将其大小设置为 15 pt。
对于文本字段，创建一个宽度为 190 像素，高度为 35 像素的白色矩形。这将是我们的新扁平文本字段。
为此矩形添加混合选项，例如描边。描边的大小应为 1 像素，并位于矩形内部。我们不希望边框非常明显；我们希望它是微妙的，比文本更轻。因此，让我们将其颜色定义为“＃aeaeae”。这种浅灰色在白色和黑色文本上效果很好。
现在，让我们创建我们之前所说的填充文本，并将其大小更改为 13 pt；我们刚刚创建了我们的第一个扁平表单元素。它应该看起来像下面的截图：
复制新字段以用于“年龄”和“性别”。对于“性别”，我们可以使用相同的矩形，但我们将添加一个小三角形以指示它是一个下拉列表。为了创建这个三角形，我们将使用多边形工具（U）并创建一个具有三个边的形状。将三角形设置为黑色或边框的相同灰色（“＃aeaeae”），并创建下拉按钮。
这是一个个人选择，这取决于你的口味。为了更加关注按钮，我们可以使用按钮的反转选项，使三角形变为白色，并创建一个与矩形边框颜色相同的矩形。为此，复制我们用于文本字段的矩形，并将其宽度更改为 35 像素。删除定义描边的图层样式，因为我们这里不需要它，并将此矩形的颜色定义为“＃aeaeae”。这将在字段上创建对比，并进一步将其与其他字段区分开。
对于账户表单，我们将使用椭圆工具重新创建圆形元素。创建一个 16 x 16 像素的白色圆圈，并具有相同的描边。将其与其他字段对齐。这将是我们的单选按钮。复制此图层并将其缩小为 9 x 9 像素；删除描边，并将主要颜色定义为“＃aeaeae”。这将是我们的选择。对于选项文本，让我们使用相同的文本字段，并将其向右移动，这样我们就可以在左侧拥有单选按钮。现在，我们只需复制此行，将其下拉，删除所选图层，我们就有了未选择的单选按钮。它应该看起来像下面的截图：
现在，我们只缺少按钮。为此，我们将使用与字段相同的矩形，删除描边，将背景设置为“＃aeaeae”，并将其宽度更改为 105 像素。我们可以使用文本字段设置为白色来创建标签。

现在，我们有了与之前相同的表单，但它是以扁平设计风格重新设计的。正如您所看到的，它由非常简单和基本的元素组成，看起来比原始版本更简约。我们只使用黑色、灰色和白色。然而，在设计更多颜色的网站时，您可以选择在矩形描边和背景上使用主品牌颜色，使其更符合所创建的设计。以下截图显示了默认样式表单（左侧）和扁平样式表单（右侧）：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

优化表单的可用性

正如您所注意到的，我们的新表单在定位和元素工作方式方面与默认版本相似，但我们仍然可以改进其可用性，以确保用户拥有最佳体验。现在，让我们进行以下几个小的调整，这些调整将极大地改善表单：

首先，让我们更改字段内的文本。目前，这个文本设置为黑色，显示为“输入文本”。这个文本被称为占位文本，应该用来指示用户网站期望的内容类型。您可以在这里使用操作或内容示例来向用户显示应输入的内容。让我们将文本更改为“输入您的姓名”，因为这将帮助用户填写此字段。然而，黑色是我们保留给内容的颜色，为了使其看起来更加离散，不那么像内容，我们将文本设置为灰色（#aeaeae）。这样，用户就有了视觉提示，但没有黑色文本，字段看起来仍然是空的，准备让用户填写。
对年龄字段执行相同操作，但使用“输入您的年龄”文本。
将性别中的文本更改为“选择您的性别”，从而将其与选择框联系起来。
最后，将按钮的文本更改为表单的操作。在这种情况下，由于这是一个注册表单，将文本更改为“注册”。这个小改变将向用户定义表单的主要操作，确保用户了解他或她在网站上执行的操作。按钮上也可以使用颜色来指示某些操作。例如，一个删除账户按钮将提供红色背景的好处，以指示永久和极端的操作，比如删除账户。

这些改变非常简单，但在优化和改善表单的可用性方面非常有效。这些是您在设计表单时应该专注的一些要点，以确保性能和易用性。您的屏幕应该与以下截图所示的内容类似：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

扁平可读性

扁平设计通常使用大号无衬线字体用于消息和标题。这些文本片段在照片和扁平颜色上看起来很棒，但与每个人一样，您总是要确保您的排版是可读的。在扁平的情况下，您不应该使用投影或渐变，因此您必须特别注意可读性。为此，始终要努力实现文本和背景之间的最佳对比度。

让我们通过以下步骤进行快速练习，尝试最佳的可读性实现方式：

在 Photoshop 上创建一个新文档，我们将尝试颜色。我们只想在块的顶部叠加文本，因此创建一个大小为 160 x 175 像素的小矩形。将此形状的颜色设置为黑色，并在其中创建一个白色的文本字段。这种对比度，白色在黑色上方，非常易读。当然，对于可读性来说，最好的对比度是黑色在白色上方，就像每本书和每份报纸一样。我们刚刚创建了这种对比度的反向，这种对比度也非常容易阅读，并且适用于标题。我不建议您阅读白色文本在黑色上方，因为这对眼睛来说非常累人。
现在让我们尝试一下flatuicolors.com/中的一种平面颜色，并将形状的颜色定义为#4d9ad7。这种颜色看起来非常棒，因为它既细腻又充满活力，而白色文本读起来非常好，因为白色与这种鲜艳的蓝色形成良好的对比。
用#65c378、#9166b2和#374a5d颜色重复上述步骤。所有这些颜色在白色背景下都会读得很好，因为它们都是鲜艳和较深的颜色。
现在将文本中的一个单词改为黑色。你会注意到，即使文本仍然可读，对比度感觉不太对。黑色只有在非常浅的颜色上才能很好地阅读，在这种情况下，它失去了白色所提供的锐利度。我们无法在以下截图中清楚地看到，但你可以通过跟随这个练习并检查本书中提供的示例来自行测试：
现在让我们尝试一些不同的字重。在一个颜色块中，用三行写上Flat Design Rules。将Flat的字重改为轻体，Design改为常规，Rules改为黑体。这样，我们可以看到不同字重下的字体是什么样子。轻体看起来非常好，创造了更简约和轻盈的外观，而黑体通过创建更大的对比度，形成了更大和视觉上更大的文本块。这对于标题和创建更具影响力的消息选项非常有用。特别要注意轻体字体，因为它们有时可能由于太薄而缺乏可读性。然而，像现在这样，我们应该测试轻体字体。
使用彩色文本，容易出现对比问题。尝试在蓝色块（#4d9ad7）上方使用绿色文本（#65c378），以及反之。这种组合的可读性很差，应该避免使用。有一些互补色可以使用。这些颜色在色轮上相对，对比更大。如果你打算在彩色背景上使用彩色文本，请确保它们有良好的对比度，以确保可读性。你的屏幕现在应该看起来与以下截图类似：
在使用图像背景时，你必须特别注意文本的放置，因为图像具有不同的形状和颜色。理想情况下，你会希望将文本放在图像的顶部，使用平面颜色。

这些是你可能遇到的与平面设计文本可读性相关的主要问题，这些是你可以通过网站配色和字体执行的一些良好测试。记住，每种字体都有特定的高度和形状，你在选择使用哪种字重时必须小心。试一试，寻找灵感；当你看到它应用在你的网站上时，你就知道找到了你完美的字体。

总结

在本章中，我们介绍了网页可用性的基本定义以及其重要性，特别是在平面设计中，确保创建出色和功能性界面非常重要。我们看到可用性可以通过小的改变来实现，记住重点应该是尽可能地让界面对用户更容易。我们还介绍了网页表单中的可用性，这是平面设计中通常存在更多可用性问题的元素之一，以及如何避免这些问题以及将表单转换为平面样式。我们还介绍了平面类型，并学习了如何在几种情况下测试可读性。

第四章：设计您自己的扁平网站

本章将是一个关于如何以扁平设计风格设计简单网站的实用逐步指南。

在本章中，我们将涵盖以下主题：

项目规划
使用外部资源简化和加快工作
布局设计过程
通过考虑其开发来创建设计，以加快整个工作过程

规划您的工作

规划绝对是设计网站中最重要的阶段之一。大部分工作都归结为确切地知道您将如何设计和开发您的网站；规划是所有这些决定将被做出的地方。

您需要首先定义您的目标和网站目标，您想要实现什么，以及为谁。想象一下，您正在为一个小工具公司创建一个在线电子商务网站。目标将是在线销售这些小工具（“什么”），目标对象将是 25 至 50 岁男性（“谁”）。这些通常都很容易理解。但是，如果您发现客户的要求不明确，请确保在开始工作之前了解他们的目标和目标，因为没有什么比一个不了解情况的设计师更糟糕的了。

然而，在这种情况下，我们正在创建自己的作品集页面。因此，基本上，我们正在创建一个旨在向设计师和潜在未来客户展示我们的作品（“什么”）的页面。当然，在这种情况下，目标并不像玩具公司或女装店那样容易定义，但目标总是存在的。您可能是一个对手机或时尚更感兴趣的设计师，因此在设计网站时请记住这一点。您的在线和离线形象应该使观众将您与某个市场联系起来，这是通过为主页设计创建和实施特定的方法和风格来完成的。

不幸的是，我不会有机会与您面对面交流，因此我们将不得不创建一个简单灵活的设计师作品集。这应该是一个通用作品集，不受您的工作专业的限制。所以，让我们开始规划吧！

定义您的部分

由于我们正在设计作品集，重点是展示设计师的作品。这里只有几个部分；它们如下：

工作/作品集：这是展示您设计项目的地方
关于：这是您作为设计师和个人的简短描述，以及您的经验
联系：这是一个存储您联系方式的地方，以便观众可以联系您，以及您的位置

这些是我们将为您的作品集设计的基本部分。由于这是一个如此小巧简单的网站，我们将创建一个单页网站。这种页面最近越来越常见。这主要是因为它以非常简单的方式迅速向用户呈现所有信息。此外，它通过在单个页面上呈现不同内容提供了更动态的体验。

开始设计您的页面

既然我们知道要设计什么，我们就可以开始草拟和设计您的网站了。我通常会先在纸上简单草绘，快速模拟我们要设计的内容。您也可以使用 Balsamiq 等软件创建线框图，但我更喜欢在纸上草绘。所以，拿一张纸开始草绘吧。

我们将创建的页面将包括五个视觉区块。这些区块如下：

页眉：这是我们将放置一个头像或标志来代表设计师作为品牌和菜单
关于：这是一个关于您的部分，包括一段关于您的文字和您的简历链接
项目：这是展示您设计作品的部分，包括缩略图
联系方式：这是一个包含您联系方式的简短文本块
页脚：这是页面末尾的一个非常小的区块，包含版权和社交网络链接

以下是我的草图：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

手绘布局

我们的布局已经绘制好了，现在可以打开 Photoshop 开始设计我们的最终页面了。

使用 Designmodo.com 的 Flat UI

有这么多的设计师和开发者，你可以找到一些外部资源和预先设计好的组件，可以帮助你节省项目时间。Designmodo.com 的 Flat UI 包是一个很好的包，其中包含一些已经设计好的基本元素，所以我们将使用它来设计我们的页面。你可以在designmodo.com/flat-free/免费获取这个包，其中包括分层的 PSD、图标、Lato 字体以及基于 Twitter Bootstrap 3 框架的开发文件。在本书的后面，我们将使用这些预先开发好的组件来设置我们的页面，进行开发工作，并将我们的布局变得生动起来。以下是 Designmodo Flat UI 包的截图：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

在 Photoshop 中设计

现在我们已经定义了各个部分并且绘制了全局布局，可以开始创建最终像素了。打开你的 Photoshop，让我们开始执行以下步骤：

创建一个宽度为 1200 像素，高度为 2000 像素，白色背景的新文档。这将是我们全长网站设计的画布。
让我们从创建页眉开始。我们需要使用一个头像来代表我们的面孔，所以你可以使用你自己的头像，我会从uifaces.com/获取一个，那里你可以找到几个真实用户的头像来用在你的设计模型中。
让我们使用矩形工具创建一个作为页眉背景的形状。你可以将形状的颜色设置为灰色，因为我们稍后会决定颜色。
现在我们已经为页眉打好了基础，让我们把头像/标志放进去。这将是网站的品牌区域。它展示了网站的内容以及归属者。
创建一个 125 x 125 像素的圆形，并将其用作头像的蒙版。给蒙版添加一个 5 像素的白色描边混合选项。这将在我们的圆形周围创建一个边框，使头像更加突出。
要创建我们的菜单，我们将使用文本字段。创建三个不同的文本字段，并在其中写上ABOUT，WORK和CONTACTS。这些将是我们的菜单链接。将文本设置为 Lato 字体，字体样式为粗体，文本大小为 20 像素。在这里，你可以尝试不同的文本样式；尝试使用小写文本而不是大写文本，尝试较轻的字重和下划线。你可以根据自己的喜好调整链接的样式，但我会坚持使用指示的样式，因为我认为它看起来不错。
所以，我们的页眉已经创建好了，只缺颜色。让我们去flatuicolors.com/选择一个建议的颜色。正如我在第三章中提到的，创建扁平且可用的界面，通过选择这种颜色来为整个网站设置主色调。在选择颜色时要记住这一点。通常，我更喜欢在整个网站设计过程中建立我的调色板，因为我可以立即尝试它们。选择你喜欢的颜色；我会使用 Peter River，#3498db。

以下截图显示了你的页眉目前应该是什么样子的：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

如果您想创建一个更有趣和有影响力的标题，您还可以为标题使用背景图像。如果您有您的工作桌或您的电脑的图像，并且屏幕上显示了工作文件，这些都是很好的代表您工作的图像。将其放在有颜色的背景层下面，并将颜色层的不透明度更改为大约 85％。这将在图像上创建一个蓝色色调效果。下面的截图显示了在sendtoinc.com/找到的蓝色色调背景：
由于这是一个单页网站，您可能会想知道为什么我们要使用菜单。然而，菜单对于网站是必不可少的，因为它是主要的导航工具，它还告诉观看者他或她将能在网站上找到哪些内容。由于我们在同一个页面上创建了所有的部分，这个菜单不会链接到不同的页面，但我们可以使用 JavaScript 滚动到特定的部分。这是我们将引导观众找到他们正在寻找的部分的方式。我们将在第五章开发您的网站中更多地讨论这一点，包括代码的开发和技术方面。
现在我们要创建我们的关于部分。首先，使用 Lato 字体类型、粗体字体样式和 40 像素的文本大小创建标题。所有单词都应该是大写，以保持一致性。让我们使用关于我来使语气更加个人化。将文本颜色更改为#222222，以避免使用纯黑色。这样会更容易看。
接下来，创建我们的内容。我们将创建两个文本区域，并用我们的文本填充它们。如果你没有文本，可以从lipsum.com生成并获取一些“lorem ipsum”段落来填充文本区域。这两个区块将分别为 500 像素宽，并在它们之间留有 35 像素的间距。将文本类型设置为 Lato，字体样式设置为 Regular，文本大小设置为 14 像素。另外，为了使文本更易读并使列更具视觉几何感，让我们在段落选项中选择Justify last left选项。我们还将行间距设置为 20 像素。
为了完成我们的关于部分，让我们打开Designmodo flat-ui-free.psd文件。在那里，您会找到我们可以使用的预制按钮，所以将Button（静态）文件夹复制到我们的文档中，并将其放置在文本区域下方，与页面居中对齐。确保您更改按钮的背景颜色以匹配我们之前选择的颜色。将副本更改为下载简历，这一部分就完成了。下面的截图是一个很好的例子，说明您可以如何通过使用内容来创建视觉块：
接下来是工作部分。首先，让我们创建八个 225 x 140 像素的矩形，并使它们之间的间距为 47 像素。用这些创建一个 2 x 4 的网格，这将作为我们项目缩略图的容器。使用缩略图是展示项目的一种简单快速的方式。您可以选择使用 lightbox 2 这样的插件，它可以在lokeshdhakar.com/projects/lightbox2/上找到，以展示更大的图像，或者直接将其链接到 dribble 中的条目。
为了创建这个块的视觉分离并与其他部分形成对比，让我们为这个块设置一个背景颜色。但是，不要使用太鲜艳明亮的标题颜色，而是使用主色的浅色调（#99cbed）。这将创建一个更平滑的背景，使缩略图与背景形成更多对比。下面的截图显示了最终结果：
现在，使用这些矩形作为剪裁蒙版，并用您的工作项目填充缩略图。我从dribbble.com中获取了一些条目来填充这个示例。同样，我们希望内容创建视觉块，因此我们不会创建任何边框、线条或分割线。我们组织内容的方式足以设置视觉块并定义此部分的布局。
我们的工作部分现在已经完成。您可以在缩略图上方或下方使用标题，但这是一个更简单的方式来创建工作部分，它也表明了您的工作本身就足以说明问题。通过减少页面上的元素数量，我们还专注于创建一个极简主义页面，令人印象深刻的是，通过减少其中多余的元素，一个网站可以变得如此简单。以下截图是极简主义页面的一个很好的例子：
我们的“联系”部分也将非常简单和极简。创建“联系”部分有几种方法。通常，您可以构建一个联系表单，并显示您位置的地图，并使用图标来表示不同类型的联系方式。然而，我们将回归到基本：一个号召行动的标题，一个电子邮件地址和一个电话号码。因此，让我们复制“关于”部分的标题，并将其更改为“让我们聊聊”。使用这种文本创建了更个人化的方式来接触您的观众，同时也代表了您更易接触的形象，提醒观众这实际上是一个可以轻松联系的人。
在标题之后，创建两个文本字段，分别在两行中添加您的电子邮件地址和电话号码。此部分的内容将是简单的联系信息。对于这些字段，使用小写文本，并将字体类型设置为 Lato，字体样式设置为常规，字体大小设置为 23 像素。在纯色背景上使用这样简单的字体，我们专注于内容本身的影响，因为除此之外，没有其他东西，比如框、线条、图标或地图，来分散注意力。扁平设计非常注重这种简单性，专注于必要的内容和最低限度。您应该能够看到结果，类似于以下截图：
我们的“联系”部分完成后，我们只剩下页脚来完成网站。我们将创建一个小矩形（50 像素高）作为背景，并将其设置为与页眉相同的蓝色（我们的主色，#3498db）。在这里，我们将简单地添加我们的版权文本和链接到您账户的社交网络图标。因此，创建一个文本字段，将字体类型设置为 Lato，字体样式设置为粗体，字体大小设置为 12 像素，带有© 2014 设计师名称的文本。将其左对齐。
在页脚的右侧，让我们添加链接到您的 Twitter 和 Facebook 账户，以便人们可以与您联系。您可以在这些链接中找到带有这些链接的社交标志包，或者您可以从 Facebook 的品牌资产部分www.facebookbrand.com/获取 Facebook 的官方标志，从 Twitter 的品牌资产部分about.twitter.com/press/brand-assets获取 Twitter 的官方标志。由于我们使用我们的主色作为页脚背景，让我们使用这些标志的白色版本，使它们在蓝色背景上可见。将它们都对齐到页面的右侧。它应该看起来像以下截图：

页脚是网站的最后一个元素。它作为添加相关链接的地方，例如社交网络链接和适用于页面的版权信息。它还作为网站的视觉结束，并通过蓝色和白色之间的视觉对比来创建联系部分的块。

现在我们的网站已经完成，我们可以审查颜色和元素的位置。在构建布局之后，进行这种调整和决策总是更容易，因为你能够可视化所有元素的组合以及它们的外观。最终的选择和调整主要是为了增强网站的外观和感觉。间距、颜色和文本确保通过整体看网站时，你会觉得它运作良好，而不是专注于单个部分。

我们的第一个扁平设计页面现在已经完成，整个网站应该看起来类似于以下截图：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

摘要

在本章中，我们涵盖了设计单页面扁平网站的整个过程，从规划、草图到在 Photoshop 中进行最终设计，以及使用 Designmodo.com 的 Flat UI 包等外部资源。我们能够为设计师作品集设计一个简单的扁平网站，包括所有必要的部分。在下一章中，我们将介绍使用 Designmodo Flat UI 包、HTML 和 CSS 开发我们刚刚设计的网站。

第五章：开发您的网站

在本章中，我们将开发我们在第四章中设计的扁平网站，设计您自己的扁平网站。我们将使用 Designmodo Flat UI，它是基于 Twitter Bootstrap 创建的，这是一个具有预先开发组件的前端框架，可以加快开发速度。我们还将介绍使用 jQuery 来构建我们的导航动画。

创建我们的文件夹树

在大型项目中，正确组织文件以及创建全面的文件结构非常重要。在较小的项目中，您可能意识不到这一点的重要性，但这是您应该从一开始就建立的习惯，这样当您在更大的项目上工作时，您就可以从一开始实施良好的实践。

这非常容易做到，而且也是您可以根据个人喜好进行调整的事情。我喜欢将我的文件组织在类别中。当我开始一个开发项目时，我最喜欢做的一件事就是创建三个文件夹：css，我在其中保存我的 CSS 样式文件；img，我保存用于构建网站的图像；js，我保存所有的 JavaScript 文件。在您的主文件夹的根目录中，您应该以一种可以通过使用相对路径轻松加载其余文件的方式拥有您的 HTML 文件。

这是一个非常简单的任务，但它可以帮助您以一种让您可以使用相对路径、在本地工作，并在项目结束时更轻松地将所有内容导出到服务器的方式来组织所有文件。

网站开发项目的典型文件夹树将类似于以下截图所示的内容：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

现在我们已经讨论了如何开始我们的项目，让我们开始吧。但在我们开始项目的开发之前，我们需要准备好我们的图片。

准备我们的图片

我们开发项目的第一步是基于 Photoshop。我们需要回到我们的网站设计文件并导出我们页面所需的图片。

由于我们设计了一个如此简约的页面，我们页面中的大部分元素都是由 HTML 元素制作的，而不是由图像制作的。不过，我们仍然有一些图像，比如我们的头像和作品缩略图，所以让我们将它们导出来以便在我们的页面中使用。

关于头像，我们可以有两种方法来处理；简单的方法和正确的方法。简单的方法是将我们的圆形头像及其边框导出为带有透明背景的.png文件。以下截图显示了带有透明背景的Avatar.png文件：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

通过导出一个透明的.png文件，我们可以轻松地在网页中使用带有任何背景颜色的图像，这将起作用，可能已经足够了。但这并不是处理这个问题的最佳方式。如果您想在网站完成后更改头像怎么办？或者如果您想更新网站颜色并更改描边颜色怎么办？那么您将需要回到 Photoshop 并重新导出这个图像，这就很麻烦了。

但幸运的是，我们可以在 HTML 中实现大部分效果，这样您就可以只使用一个普通的方形图像作为头像，让其余的工作由代码完成。这样，您只需通过更改常规头像图像或几行 CSS 代码就可以更新您的头像。此外，如果您为客户或公司做这个项目，您可以通过使更新独立于设计师工作来简化将来的更新。我们将在本书的稍后部分讨论此代码；现在，只需确保将您的头像导出为 128 x 128 像素的方形图像。这应该与以下截图中显示的内容类似：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

现在，让我们导出我们的缩略图。这部分非常简单；只需确保以相同大小导出所有缩略图，以保持一致性并且更容易在将来更新。有几种方法可以做到这一点。我喜欢创建一个具有图像尺寸（225 x 141 像素）的新文档，将所有图层复制粘贴到那里，并单独保存它们。然后，我将该文档保存为任何将来使用的模板。这样，我知道每次需要创建缩略图时，我只需使用同一文档。

然而，你可以使用其他方法来实现这一点。您可以使用切片并为文档中的每个图像创建切片（键盘快捷键C），然后直接导出切片图像（在保存为 Web 和设备菜单上，您可以选择要导出的切片类型）。您还可以使用 Photoshop 中自 2013 年以来可用的名为生成图像资产的新功能，该功能允许您轻松将图层或文件夹重命名为文件名（例如background.png），然后只需选择自动生成图像文件。这是创建大型项目的多个资产的好方法，而且非常容易更新，因为资产会随着任何文件保存选项自动生成。如果您对图像资产生成器想了解更多信息，我强烈建议您参考 Adobe 帮助链接：helpx.adobe.com/photoshop/using/generate-assets-layers.html。

无论如何，如果您愿意，您可以继续进行此操作，但请确保保持图像大小的一致性，并以 100%的不透明度导出它们，因为如果您考虑可能使用任何一种鼠标悬停效果，我们可以并且将在以后使用 CSS 来实现。

我们还缺少的另外两个图像是 Twitter 和 Facebook 图标。对于这些图标，我们将它们保存为 32 x 32 像素的方形透明.png，这样如果我们希望更改页脚的背景，我们仍然可以使用它们。

我们现在已经完成了图像准备工作！

开发我们的页面

现在我们的图像准备好了，让我们开始创建我们的页面。就像设计一样，我们将从上到下创建，从头部开始，逐渐开发布局直到页脚。

我们将使用 Designmodo Flat UI Free 进行此操作，因此我们需要做的第一件事是导入我们将要使用的文件。如果您还没有这样做，请从designmodo.com/flat-free/下载。访问该页面并单击下载 HTML。这将为您提供一个包含 Designmodo Flat UI Free 包、Twitter Bootstrap 3 和一些示例文件的 ZIP 文件。

因此，就像我们之前讨论的那样，让我们从创建我们的文件夹树开始。创建以下文件夹：css，js和img。我们还需要额外的资源，因此创建两个额外的文件夹：fonts，我们将保存使用的自定义字体，以及bootstrap，我们将保存要使用的 bootstrap 文件。

Designmodo Flat UI Free 包是建立在 Twitter Bootstrap 之上的，因此我们将有效地使用 Twitter Bootstrap 来构建此页面。Twitter Bootstrap 是一个前端框架，带有各种预先开发的元素和样式，这使得开发人员更容易更快地创建简单页面。我坚信优化工作，并且没有必要不断重新发明轮子。我们要使用的大多数东西已经做了数百次甚至数百万次，所以让我们利用共同的努力来让我们自己的生活更轻松。这就是 Twitter Bootstrap 真正方便的时候。如果您想了解更多关于 Twitter Bootstrap 并查看所有示例和指南，可以在线查看getbootstrap.com/。

现在我们已经创建了文件结构，让我们用所需的文件填充它。首先，让我们将之前从 Photoshop 导出的图像上传到img文件夹中。在我们的css文件夹中，我们将粘贴 Designmodo 包中的flat-ui.css文件。我们现在不会使用任何 JavaScript，所以我们不需要复制包中提供的 JavaScript 文件。将 Designmodo 包的fonts文件夹的内容复制到你自己的fonts文件夹中，并将bootsrap文件夹也复制并粘贴到你的root文件夹中。这包括 Bootstrap 使用的所有样式和资源。到目前为止，你的主文件夹应该看起来与下面的截图类似：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

这包括开始创建我们的页面所需的所有文件，有了这些文件，我们终于可以开始编写 HTML 了。

打开你的 HTML 编辑器，创建一个名为index.html的新文件。这将是我们的网站。Designmodo 包中有一个名为template.html的文件，这是一个带有基本 HTML 结构的干净的起始页面，已经初始化好了，这是一个很好的基础来进行工作。所以打开文件，复制其内容，并粘贴到你的index.html文件中。

下面的截图显示了你在索引文件上应该有的内容：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

我们可以从这里删除一些内容。favicon 部分，<link rel="shortcut icon" href="images/favicon.ico">，可以删除，因为我们没有为这个页面设计 favicon，以及在之后加载的所有脚本都可以删除。我们将使用 JavaScript，但我们将根据需要加载文件，以避免不必要的文件占用空间。

我们现在不会创建任何 CSS 文件；我们只会专注于创建 HTML 文件，并准备好内容后再进行样式设置。由于我们使用 Twitter Bootstrap，我们将尽量通过使用 Bootstrap 的现有功能和样式来复制我们的设计，只有在那之后我们才能创建自己的样式来定制页面以满足我们的需求。

因此，要创建我们的标题，我们将需要一个填满整个浏览器宽度的<div>元素，以创建我们设计的视觉效果。为此，我们将使用 Bootstrap 已经提供的一个名为jumbotron的类。你可以在getbootstrap.com/examples/jumbotron/上在线查看示例 Bootstrap 文件。基本上，这是一个div类，其宽度定义为 100%，并且拉伸以填满浏览器，并具有不同的背景颜色。这个div的结构如下：

<div class="jumbotron">
      <div class="container">
      </div>
    </div>

在<body>标签后面插入这段代码。如果你保存并在浏览器中刷新文件，你将能够看到Jumbotron div 中填充浏览器的效果。现在，我们只需要在div容器中插入我们的内容，就像下面的代码所示：

<p class="text-center" ><img src="img/avatar.jpg"/></p>
        <p class="text-center">
            <a href="#">About</a>
            <a href="#">Work</a>
            <a href="#">Contacts</a>
        </p>

正如你所看到的，我们在一些元素中使用了class="text-center"。这是 Bootstrap 类负责将文本对齐设置为居中，它将使我们的元素居中，使其看起来有点像我们的设计标题。当然，还有一些需要改变的地方，但我们将在 CSS 中进行这些更改。下面的截图显示了当我们在浏览器中打开 HTML 文件时，我们的 HTML 文件是什么样子的：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

非常接近我们想要做的事情，对吧？

现在，对于我们的“关于”部分，我们需要创建一个标题、两个文本块和一个按钮。幸运的是，这也大多是通过使用 Bootstrap 样式完成的。对于标题，我们将使用<h2>标签；对于文本块，我们将使用一个带有特定块类的段落，它将如下所示：<div class="col-md-6">。Twitter Bootstrap 带有一个实现的响应式网格系统，由 12 列组成。所以在这种情况下，我们想要创建两个占据屏幕一半的块。因此，每个块将有六列，因此使用col-md-6类。正如我所说的，这是一个响应式网格，这意味着网站将根据平板电脑和智能手机动态调整列的大小，以适应所使用的设备。

我们的按钮也很容易通过使用 Bootstrap 标签来实现；在这种情况下，它是平面样式，因为 Designmodo Flat UI 包。我们的按钮将如下所示：<p class="text-center"><button class="btn btn-hg btn-primary">下载简历</button></p>。按钮元素有btn类，这是负责给按钮外观的主要类；其他类是用来设置颜色和行为的。我们稍后会更改这个，以使用我们的颜色和字体选项。因此，这部分的 HTML 代码如下：

   <div class="container">
      <div class="row">
        <h2 class="text-center">About Me</h2>
        <div class="col-md-6">
          <p>Text</p>
        </div>
        <div class="col-md-6">
          <p>Text</p>
        </div>
       <p class="text-center"><button class="btn btn-hg btn-primary">Download Resume</button></p>
      </div>
  </div>

只需将我们更大的文本块的文本替换为适应列；我们的关于我部分应该如下截图所示：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

接下来，我们将创建我们的“工作”部分。由于这也将有一个蓝色的宽背景，我们将再次使用jumbotron div元素作为我们的主容器。在我们的设计中，我们有一个 2 x 4 的缩略图网格，由行和列组成 Bootstrap 网格，我们需要创建两行，每行四个缩略图。考虑 Bootstrap 中 12 列网格的工作方式，我们将需要使用12/4 = 3列来放置每个缩略图，我们有四个。以下是我们工作部分的最终代码：

<div class="jumbotron">
      <div class="container">
        <div class="row">
          <div class="text-center col-sm-6 col-md-3">
            <img src="img/1.png"/></div>
          <div class="text-center col-sm-6 col-md-3">
            <img src="img/2.png"/></div>
          <div class="text-center col-sm-6 col-md-3">
            <img src="img/3.png"/></div>
          <div class="text-center col-sm-6 col-md-3">
            <img src="img/4.png"/></div>
        </div>
        <div class="row">
          <div class="text-center col-sm-6 col-md-3">
            <img src="img/5.png"/></div>
          <div class="text-center col-sm-6 col-md-3">
            <img src="img/6.png"/></div>
          <div class="text-center col-sm-6 col-md-3">
            <img src="img/7.png"/></div>
          <div class="text-center col-sm-6 col-md-3">
            <img src="img/8.png"/></div>
        </div>
      </div>
    </div>

所以，在这里你可以看到我们为背景创建了一个jumbotron div元素，两行div元素用于我们的线条，每一行都有四个带有图片的分区，这是我们的缩略图。检查我们用于这个div元素的类是很重要的，因为它们用于网格。使用的div，<div class="text-center col-sm-6 col-md-3">，有三个不同的类。text-center类用于在块中居中我们的图片；它是响应式的，会根据屏幕尺寸改变大小，我们不希望图片比原始文件大小大，因为那样会导致像素化并破坏图片质量。col-md-3类负责在桌面设备中对齐图像在网格中的位置，这意味着每个图像将占据三列。col-sm-6类是指平板设备，在平板宽度上，它将每行显示两个缩略图。这样可以创建更好的自适应体验，因为它将在桌面上每行显示四个缩略图，在平板上显示两个，在智能手机上只显示一个，这是所有设备中最小的，如下面的截图所示：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

只用 Bootstrap 代码，我们就能够快速轻松地创建一个响应式的缩略图网格，我们可以用于我们的“工作”部分。

“联系”部分可能是最简单的部分，因为我们只需要创建三行内容。我们将再次使用<h2>元素作为标题，然后使用两个<p>元素来表示每行内容，如下所示的代码所示：

<div class="container">
  <h2 class="text-center">Let's Chat</h2>
    <p class="text-center"><a href="mailto:designer@portfolio.com">designer@portfolio.com</a></p>
  <p class="text-center">+44 1234 567 890</p>
</div>

代码也很简单。我们只是使用text-center标签来使页面中的文本居中，然后我们在电子邮件中创建一个链接，以便访问者可以直接点击发送任何邮件。通过使用href=mailto:designer@portfolio.com，我们允许浏览器打开邮件程序以创建一个填充有此信息的e-mail字段的新电子邮件，从而更容易发送消息。这种行为在每种情况下可能都不好，因为有时默认的电子邮件程序可能没有配置，或者用户可能使用无法打开这种链接的网络邮件客户端，因此只有在您认为有意义时才使用。

以下截图显示了我们简单的联系部分的外观：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

创建的最后一个元素是页脚，我们将再次使用jumbotron div元素。我们需要进行一些调整，以确保页脚固定在页面底部，但我们将在稍后在页面样式中进行。

因此，对于页脚，我们将创建jumbotron div元素，一个包含版权文本的段落，以及两个带有社交网络图标的超链接。这看起来一点也不像我们想要实现的样子，但我们的内容已经在那里，现在只需要样式来改变它的外观。以下是我们页脚的最终代码：

<div class="jumbotron">
      <div class="container">
        <p>
          <span class="text-left">© 2014 Designer Name</span> 
          <a href="#"><img src="img/twitter-icon.png"></a>
          <a href="#"><img src="img/fb-icon.png"></a>
        </p>
      </div>
    </div>

通过这最后一段代码，我们的基本 HTML 页面已经完成，准备用 CSS 进行一些样式工作。

用 CSS 样式化我们的页面

让我们首先在css文件夹中创建一个名为main.css的新文件。这将是我们放置自己的样式以定制页面外观的地方。有了我们的文件，现在我们需要在我们的 HTML 页面中链接我们的 CSS 文件。转到您的index.html文件并在<head>标签中添加<link href="css/main.css" rel="stylesheet">，并确保您在bootsrap.css和flat-ui.css之后添加它；否则，我们的样式可能会被覆盖并且不起作用。

我们将要做的第一个更改是文本颜色。因为我们希望它是我们在设计中设置的颜色，让我们将<body>标签中的每个元素的文本颜色设置为#222222。我们可以使用以下代码来实现：

body{
  color: #222222;
}

现在，让我们从页眉开始，让我们把它的背景设为蓝色。我们将为此选择的颜色代码是#3498db，因为我们想要为每个jumbotron div元素更改这个，我们将定位jumbotron类，如下面的代码所示：

.jumbotron{
  background-color: #3498db;
}

保存文件并在浏览器中刷新，您会注意到它会立即看起来更像您设计的样子，有蓝色背景部分。关于头像，我之前告诉过您我们可以在 CSS 中创建圆形头像。我们能够做到这一点是因为 CSS3，它允许我们轻松地在边框和边框半径中创建圆角。通过将边框设置为 50％，它将在每个角落创建这样的半径，从而形成一个完美的圆形。因此，请记住，这不会在每个浏览器中起作用，因为并非所有浏览器都支持 CSS3，但您应该始终使用最新的技术和技巧来充分利用它们，同时始终牢记对旧版本的优雅降级。

在这种情况下，唯一的问题是在旧版浏览器中，头像将是一个正方形而不是一个圆形。这不是一个主要问题，因为这只是一个视觉上的差异，它并不影响业务或可用性。但是回到我们的头像，我们希望它是一个圆形，并带有一个白色边框，所以我们需要在我们的 CSS 选择器中定位我们的头像。由于我们的头像只是一个<img>标签，我们需要回到 HTML 文件并更改我们的标签以包括一个类，比如<img class="avatar" src="img/avatar.jpg"/>。现在，我们可以在我们的 CSS 中定位.avatar，以下是我们将用于效果的代码：

.avatar{
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  border: solid 5px #FFF;
  display: inline-block;
}

这将起作用，我们的头像现在看起来与我们原始设计中的一模一样。然而，你可能会在 Safari 和其他浏览器中遇到一些问题，因为每个浏览器渲染这些元素的方式略有不同。所以，你可以做一个小改变，它仍然会起作用。不要把图片放在你的 HTML 文件中，你可以在 CSS 中将其定义为背景图片，这样就可以解决问题了。在你的 HTML 文件中，将该行改为<p class="text-center"><span class="avatar"></span></p>；在 CSS 文件中，添加以下参数：

background: url('../img/avatar.jpg'); 
height: 128px; 
width: 128px;

现在，它应该在 Safari 中也能工作了，但每次尝试新技术时，一定要检查它在哪里工作和中断，因为总有一种方法可以调整你的代码使其工作。以下截图显示了你的头像在实时 HTML 页面中的工作方式：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

对于菜单，我们将使用以下代码：

#header a{
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 15px 0 15px;
  font-weight: bolder;
}

#menu{
  margin-top:50px;
}

提示

记住，无论是 HTML、CSS、JavaScript 还是其他任何语言，都要缩进你的代码。这样可以让你和其他人更容易阅读和快速可视化和分析更大的代码块。

正如你所看到的，我们在这个 CSS 中使用了新的 ID。#header类是我们在 HTML 中为整个页眉<div>设置的 ID，#menu是我们为包含菜单链接的<p>元素设置的 ID。随着我们进行更多的样式设置，我们需要设置类和 ID 来能够选择 HTML 文件中的特定元素。在这里，我们通过使用text-transform确保我们的链接是大写，并将颜色改为白色。此外，我们将字体重量改为更重的重量，以适应我们的设计。

对于“关于”部分，我们需要改变一些东西，比如标题大小、文本的字体大小，以及行高。最后，我们将使用边距和填充来确保元素之间的间距与我们设计的完全一样。这个 CSS 的一个非常重要的部分是text-align: justify属性，它使文本块具有与我们设计相同的文本对齐方式，使文本适应块并有助于视觉上定义布局。

我们还想改变按钮的颜色以匹配我们的调色板，所以我们通过定义.btn元素的背景颜色来实现这一点。这样我们就覆盖了先前使用的颜色。我们还将在鼠标悬停时改变颜色，所以我们将使用选择器.btn:hover来在鼠标悬停时改变元素的样式。你会注意到当你悬停在按钮上时会有一个小的淡入淡出效果，这是由 Designmodo Flat UI 包的 CSS 文件中使用的css-transitions产生的效果，它将这个效果应用到每个链接和按钮上。让我们使用以下代码：

#about h2{
  font-size: 35px;
  text-transform: uppercase;
  margin: 70px 0 70px 0;
  color: #222222;
}

#about p.text{
  font-size: 14px;
  line-height: 1.70;
  text-align: justify;
  color: #222222;
}

#about .btn{
  margin-top: 90px;
  margin-bottom: 135px;
  background-color: #3498DB;
  font-size: 17px;
  padding: 12px 40px;
}

#about .btn:hover{
  background-color: #99CBED;
}

以下截图是我们设置 CSS 后“关于”部分的样子：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

我们的“工作”部分在 CSS 文件上不需要太多的改变，因为它已经非常接近我们想要做的样式。所以，我们只需改变jumbotron div元素的背景颜色，并在元素之间留下一些边距，使它们等距分布，如下面的代码所示：

#work{
  background: #99cbed;
  padding-top: 95px;
}

#work img{
  margin-bottom: 50px;
}

对于我们的“联系人”部分，我们的内容由一个<h2>标签、一个链接和电话号码的文本组成。这也很容易进行样式化，主要是颜色和文本大小的改变，以及边距设置以适应这一部分。使用以下代码来设置“联系人”部分：

#contacts{
  margin-bottom: 80px; 
}

#contacts p{
  font-size: 23px;
}

#contacts h2{
  font-size: 35px;
  text-transform: uppercase;
  margin: 70px 0 35px 0;
  color: #222222;
}

#contacts a{
  color: #222222;
}

#contacts a:hover{
  color: #3498db;
}

最后，让我们来处理我们的页脚。目前这与我们的设计不太相似，所以我们需要通过定义其高度、缩小文本并将图标对齐到右侧来使其更小。为了对齐我们的图标，我们将使用float: right；我们将使用margin来在图标之间创建一些间距。以下是为此部分创建的 CSS 代码的一部分：

#footer{
  height: 50px;
  margin-bottom: 0px;
  padding-top: 25px;
  padding-bottom: 60px;
}

#footer span{
  color: #fff;
  font-size: 11px;
}

#footer .icon{
  float: right;
  margin-left: 10px;
}

首先，我们需要为元素<a href="#" class="icon"><img src="img/fb-icon.png"></a>设置类图标，这样我们就可以有效地只针对这些图标并将它们对齐到同一行的右侧。这完成了我们布局页面的 CSS 工作。

通过简单的 CSS 行来对齐元素并更改一些颜色，这看起来与我们的设计非常相似。让我们来看看我们的页面现在是什么样子。它应该看起来与下面的截图类似：

使用 CSS 为我们的页面添加样式

使用 jQuery 进行导航

正如我们之前所说，我们可以使用幻灯片到section代码来创建我们的单页网站导航，这样当用户点击菜单时，页面就会滚动到该部分的开头。为了实现这种效果，我们将使用一个名为PageScroller的 jQuery 插件，可在pagescroller.com/上找到。有两个版本：Pro 和 Lite。对于这个练习，Lite 版本就足够了，因为我们只需要最低限度的功能。我们要实现的方式也非常简单，但如果您想要更多选项，可以查看插件的readme文件和网站。

首先，我们需要加载所需的 JavaScript 文件。解压插件后，将jquery.pagescroller.lite.js文件复制并粘贴到您的js文件夹中。我们还需要 jQuery，但我们将从外部路径的内容传送网络（CDN）加载它。因此，请在您的<head>元素中包含这两行，理想情况下是在</head>标记之前，如下面的代码所示：

<script type="text/javascript" src="img/jquery-latest.min.js"></script>
<script type="text/javascript" src="img/jquery.pagescroller.lite.js"></script>

这将在您的页面上加载 JavaScript 文件，但现在您需要初始化插件。

您可以通过在document.ready JavaScript 函数中简单调用函数pageScroller()来实现这一点，这意味着它只会在文档加载后启动。看一下下面的代码：

  <script type="text/javascript">
  $(document).ready(function(){
    // initiate page scroller plugin
    $('body').pageScroller({
      navigation: '#menu'
    }); });
  </script>

脚本加载和初始化后，一切都准备就绪。因此，插件的工作方式是在特定元素上监听点击事件，当初始化时，在这种情况下，我们将其定义为我们的#menu div元素中的navigation: '#menu'。现在，它将查找class部分以滚动到它，因此我们需要将这个类添加到我们的标题中。

理想情况下，我们希望将其添加到容器的开头或我们部分的<h2>标题。以下代码显示了我们如何在 HTML 文档中定义部分：

<div id="about" class="container section">
      <div class="row">
(..)
<div id="work" class="jumbotron section">
(..)
<div id="contacts" class="container section">

这样，我们每次通过向其添加类部分来定位我们部分的开头，并在菜单中点击时，它将滚动页面到相应的部分。试一试，你会发现它会直接滚动到菜单中点击的部分。

这种导航方式即使在更大的部分中也能更好地工作，但这是一种快速简便的方式，可以为我们的单页网站添加一个酷炫且简单的导航。

总结

这就是我们的开发工作！在本章中，我们使用 Designmodo Flat UI 包开发了我们的单页网站，以简化工作流程。我们实践了文件组织、图像导出和项目阶段，并学习了如何处理项目以及在更大的项目中应该考虑什么。我们还与 Twitter Bootstrap 有了第一次互动，这是 Flat UI 包的基础。我们成功地通过使用 HTML、预定义的 Bootstrap 类和自定义 CSS 样式来创建与之前完全相同的设计。我们还使用了PageScroller来创建我们的单页滚动导航。

接下来，让我们看看如何通过创建自己的 Flat UI 套件来创建自己的组件。

第六章：创建您自己的 Flat UI 套件

在这最后一章中，我们将学习如何创建自己的个人 Flat UI 套件。我们将涵盖整个过程的所有阶段，从设计到开发和导出您的资产。这些是您在创建自己的套件时需要牢记的最重要的元素。我们还将解释如何通过记录每个元素和用法来确保您或其他人的使用便捷。

设计您的组件

要创建自己的 Flat UI 包，第一步是定义您应该创建哪些元素。您的目标是创建并收集一组元素以便将来在项目中重复使用，因此您应该寻找大多数项目中常见的基本界面元素。例如按钮、表单控件（如单选按钮和复选框）、表单内容区域（如文本字段和文本区域）、标题样式和大小（如<h1>、<h2>和<h3>）一旦设计、思考和开发完成，就可以在多个项目中重复使用。通常，网页设计师发现自己在重复使用旧的 HTML 和 CSS 代码，因此创建自己的个人包对于使工作流程更加轻松和快速非常有帮助。

创建您自己的 Flat UI 包的第一阶段是设计您的元素。有几种在线设计可供 UI 包、网页元素，甚至很棒的图标包，您可以将其用作自己工作的灵感。在dribbble.com上简单搜索将帮助您找到可以用作灵感的优秀元素，甚至一些免费赠品，您可以将其用作创建自己设计的基础。

以下截图显示了 Alexandre Crenn 在dribbble.com/shots/1020321-FREE-Pack-UI-PSD上的 Flat UI 包的示例：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

要创建您的包，定义您想要包含和设计的元素。列出您最需要的元素，并开始设计它们。

例如，让我们做一个练习，为您的个人包创建其中一个元素。让我们创建一个按钮，因为它是所有元素中最常用和最具视觉冲击力的元素之一，执行以下步骤：

打开 Photoshop 并创建一个新的 320 x 95 像素文档。
使用圆角矩形工具，创建一个半径为 8 像素、背景颜色为#2ecc71的矩形。输出将类似于下图所示：
这次让我们创建一个更有趣的平面按钮，并赋予它一些深度。复制此图层，将其颜色更改为#27ae60，并向下移动 5 像素。确保这第二个矩形在图层顺序中位于我们创建的第一个矩形下方。这使得第二个矩形与其阴影一起出现在按钮的一侧。仅通过进行这种轻微的更改，您就能看到我们在按钮中产生了深度效果，如下图所示：
要完成设计我们的按钮，让我们创建一个文本字段，上面写着“点击这里”。使用 Lato 字体，白色字体样式，将大小设置为 20 pt。现在，在文本图层中创建一个带有 1 像素距离和 1 像素大小的投影层样式，颜色为黑色，不透明度为 33%。
现在，我们的新平面按钮已经完成，如下截图所示：

正如您所看到的，我们在文本中使用了阴影和 3D 深度效果，这是一个扁平按钮。您可能会对此感到疑惑，因为我之前曾反对使用这样的效果。事实是，只要您能明智地使用它们并以微妙的方式使用它们，您可以使用阴影甚至 3D 对象，就像在前面的图像中使用的那样。这个按钮，即使有阴影和深度，看起来仍然是扁平的，并且具有这种特征肯定更具吸引力。然而，本质上，它仍然是一个扁平按钮，而不是一个直接代表物理按钮的按钮。此外，文本中的阴影非常微妙，只是足够突出文本。与一切一样，不要对规则太苛刻；尝试用样式进行实验，看看哪种效果最好。然而，要实现极简主义，您需要能够专注于基本要素并设计干净的元素。

现在我们已经设计好了我们的按钮，我们准备将其转化为代码。由于这个按钮可以完全由 HTML 和 CSS 创建，多亏了 CSS3 的 border-radius 和 text-shadow 功能，我们不需要做任何图像导出。然而，在不同的元素中，比如单选按钮或复选框，我们需要准备这些图像。因此，我们继续进行下一步，即导出图像并编写您的元素代码。

导出和编码

正如我之前所说，这一步是您需要为您的包导出和准备任何图像的步骤。处理图像有几种不同的方法。无论是图标还是背景，您都应该尽量优化您的图像。减小图像大小并加快页面加载速度的一个很好的方法是使用 CSS Sprites。Sprites 最初是用于视频游戏，其中单个图像文件会有几个动画帧，然后加载这些帧，并改变图像的坐标来创建动画，就像传统动画一样。以下截图显示了超级马里奥兄弟 3 的 Sprite 表：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

这种技术也用于 Web 和界面设计，通过创建按钮、图标和几种状态，并将它们包含在一个单一的图像中，然后使用 CSS 仅显示我们需要的部分来实现。有一些程序和在线应用程序可以帮助创建这些 Sprites 的 CSS 代码，这比手动计算和创建所有 CSS 代码要快得多。在线应用程序，如 Sprite Cow (www.spritecow.com/)和 Sprite Right (spriterightapp.com/)等软件非常有助于创建 CSS Sprites，您应该一定要看看它们，并尝试在下一个大型项目中使用 Sprites。现在，让我们回到我们的按钮。以下截图显示了来自 Amazon.com 的 Sprites：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

由于我们的按钮只由代码组成，我们可以直接进行开发，而无需为此元素导出任何图像。因此，让我们直接跳转到我们的代码编辑器，并执行以下步骤：

让我们首先为我们的按钮创建 HTML 代码。我们需要创建一个简单的 HTML 页面来承载按钮。创建一个名为button.html的新 HTML 文件，其中包含以下代码作为参考：

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<button class="btn">Click Here</button>
</body>
</html>

在这里，您可以看到我们的按钮实际上是一个<button>元素，带有类class="nbtn"。对于类，使用小的名称是很好的，因为它们小而易于识别和书写。在开发您的包时，您希望尽可能考虑如何重用您的 CSS。因此，例如，当创建按钮时，如果您想创建相同按钮的几种颜色，您应该创建一个类btn，然后为每种颜色创建一个类，如红色、蓝色等。这样，btn类将只有用于大小和外观的 CSS，您可以在单独的类中定义颜色。这意味着您可以重用btn类来定制和更改它以供将来使用。然后，红色按钮看起来会像<button class=tbtn redred class=then look l>。这只是一种思考如何在创建 CSS 时混合不同类以实现不同目标的方法。

让我们回到我们的按钮。现在我们创建了我们的 HTML 文件，如果您在浏览器中打开该文件，您将看到我们的按钮完全没有样式，具有默认的浏览器外观。因此，创建了 HTML 文件后，现在是时候用 CSS 样式化这个元素了。首先，我们想为此使用自定义字体，因此请在 HTML 文件的<head>元素中包含以下行：<link href='http://fonts.googleapis.com/css?family=Lato:700' rel='stylesheet' type='text/css'>。这将加载 Lato 字体以用于我们的按钮。为了组织起见，我们将在头部创建我们的 CSS 代码，因此在<head>中创建一个<style></style>元素。
为了创建按钮的外观，我们将使用以下 CSS 代码：

.btn{
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
border:none;
border-bottom: 5px solid #27ae60;
background: #2ecc71;
font-family: 'Lato', sans-serif;
text-shadow: 0 1px 2px #239a55;
font-size: 20px;
color: #ffffff;
height: auto;
margin: 0;
width: 210px;
display: block;
padding: 15px;
text-transform: uppercase;
width: 250px;
float: left;
outline: none;
}

因此，通过查看代码，我们将边框半径定义为 8 像素，不幸的是，由于浏览器的兼容性，我们必须包含几个浏览器前缀，以确保它在大多数浏览器中都能正常工作。我们不仅将背景颜色设置为我们选择的绿色，还设置了文本的颜色和字体以及其阴影。

如果您现在刷新浏览器，您会看到我们之前使用的设计现在已经完全开发完成，包括 3D 深度。这是通过创建一个更大的底部边框border-bottom: 5px solid #27ae60来实现的。我们给边框设置了 5 像素的半径和更深的绿色，从而创造了按钮的深度幻觉。最后一部分outline: none也非常重要，因为它是取消浏览器焦点轮廓的部分，通常是蓝色的发光或蓝色的边框（取决于所使用的浏览器）。因此，通过这种方式，我们确保我们的元素没有应用任何其他类型的效果，除了我们创建的效果。

以下显示了我们的 CSS 代码中按钮的外观：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

提示

一个很好的资源来创建您的 CSS3 代码是css3generator.com。它可以让您微调和可视化诸如边框半径和框阴影之类的细节。它非常适合帮助您处理几个特定于浏览器的前缀。

现在，对于不同的状态，我们的按钮在此代码中使用了以下属性：

.btn:hover{
outline: none;
border: 1px solid #27ae60;
margin-top:3px;	
}

.btn:active{
outline: none;
padding-top: 16px;
padding-bottom: 14px;
-webkit-box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 1);
box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 1);
}

.btn:hover类是鼠标悬停在按钮上时发生的悬停效果。我们的目标是使其看起来好像按钮被按下，因此我们将边框改为较小的边框，以给按钮一种阴影效果，并丢失较大的底部边框。然而，由于按钮需要向下移动，我们给它一个 3 像素的上边距，使其看起来好像按钮真的被按下，如下面的截图所示：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

对于活动状态，当按钮被点击时，我们希望它看起来像是从之前的状态被按下。因此，我们创建了一个内部阴影，并改变了填充，使文本下移了几个像素，刚好让用户感觉它在物理上有点下降。与之交互时，您会理解它产生的效果以及它的良好运行情况。以下截图显示了按钮处于活动状态时的情况：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

至此，我们的按钮开发就完成了！它已经可以在您的包和未来的项目中使用。您还可以进一步自定义它，并根据相同的外观创建不同的尺寸。

文档至关重要

在创建元素和脚本时，您应该对所有内容进行文档记录。组织和文档记录非常重要，以便您可以正确地重复使用创建的元素。此外，如果您经常与更多人一起工作，您应该确保所有类都有可理解的名称。还要确保以一种任何其他人都可以随意获取和使用您的代码的方式对 CSS 和 HTML 进行注释。有时，类的名称可能不好，当您寻找特定类或尝试理解代码时，如果没有任何支持或文档，这可能是一项非常艰巨的任务。

确保您的所有代码可理解的最佳方法是使用注释。在 HTML 中，您可以通过使用封闭代码或文本注释来实现：