内容
- 使用代码进行设计的好处
- 数据优先
- 免费提供手机优惠
- 寻找一种共同的语言
- 学得更快
- 快速迭代
- 更快的发布时间
- 为什么选择HTML5？
- 神奇的数据属性
- CSS3 –这是新的Photoshop
- Sass + Compass：神奇美味
- jQuery：哦，是的，你可以
- 构架
- 最后的想法
这篇文章首先出现在.net杂志的第235期上。.net是面向网页设计师和开发人员的全球最畅销杂志。
我从来不喜欢做超出需要的工作。我倾向于根据使我或我的团队更有效的能力来评估方法和工具。他们多快能使我们获得有效的产品？他们沟通的效率如何？他们会远离我们吗？
多年来，我已经调整了设计流程和工具。我想我会继续这样做。这就是为技术和网络设计的本质。这个行业在不断发展。我们的流程和工具也需要发展。
HTML5和CSS3使更轻松地向上游过渡更多的设计过程-从Photoshop过渡到更加生动有趣的设计。 Foundation，Bootstrap和jQuery之类的工具使您可以将更多的设计过程转移到更易于处理的代码上。
使用代码进行设计的好处
首先，我不建议您从工作流程中删除Photoshop或任何其他视觉设计编辑器。取而代之的是，我将着重于早日将设计转移到代码中的好处。
数据优先
我一直喜欢使用HTML进行设计的事情是，它鼓励从数据优先的角度进行思考。相比之下，使用Illustrator，OmniGraffle或Balsamiq等绘图程序时，您将从一个框开始，然后用数据填充它。
在HTML中，您可以构建DOM（文档对象模型），就像构建目录一样。这是具有真实意义的层次结构的真实信息设计的回归。 HTML5通过添加新的语义元素使文章更进一步：文章，节，标题，旁边，页脚等。这种以数据为先的方法与移动优先的响应式设计很好地融合在一起。
免费提供手机优惠
如果您正在阅读本文，则可能是针对移动设备设计的。而且您可能必须设计一两个表格。使用HTML5，您很幸运。在HTML5之前，您的输入类型几乎都是文本或密码字段。 HTML5引入了许多其他输入类型，包括：
输入type =“ email”>输入type =“ tel”>输入type =“ url”>输入type =“ date”>输入type =“ date-time”>
这些额外的独特输入类型的真正妙处在于，iOS和Android上的移动浏览器可以识别它们，并自动换出上下文相关的键盘-无需特殊的jQuery插件或黑客。哦，如果您的浏览器不知道 输入type =“ email”> 是，那么它只是默认为文本输入。
寻找一种共同的语言
“我们的设计师和开发人员可以用相同的语言工作真是太棒了” – Inflection的应用程序开发人员John Drago
看看是否听起来很熟悉。我在会议室里，有六个服务器端应用程序开发人员，他们可以使用Ruby，Python，Java或.NET对我周围的圈子进行编码。我是唯一的设计师。我的一些建议最初因过于复杂而难以实施。我走到白板上，开始在板上写一些HTML和CSS来说明如何实现设计。对话的语气突然改变了，其中一位开发人员不情愿地说：“是的，如果我们这样做的话，它可能会起作用。”
将我的更多设计过程转移到代码中，可以改善与开发人员的对话。知道如何在代码中精心设计，可以赢得更多的尊重。您不必成为专家就可以赢得尊重。我的HTML和CSS技能固若金汤，但我的JavaScript技能充其量只是中等水平。而且，我对此并不害羞。不过，与前端或服务器端开发人员一起工作时，我们可以说一种通用语言，也可以半途而废，这是一个巨大的优势。
学得更快
虽然线框和视觉合成可以帮助进行规划，但是这些静态工件是理论上的。您尝试过多少次向某人解释一次互动，只是让他们做出回应，“我想我必须看一下。”您越早获得原型，人们就可以与之交互，则您越早可以体验设计并查看想法是否可行。
快速迭代
上次交付生产的最终设计何时与您的Photoshop comp完全匹配？几乎从不。通过数字产品设计，变化不断发生。此外，在几十个屏幕上进行更改（例如，将标题的大小从22pt增加到24pt）可能会在Photoshop中花费数小时。智能对象可在Photoshop中为您提供某种程度的面向对象设计。不幸的是，我认识的大多数视觉设计师都没有充分利用智能对象。使用CSS，因为它鼓励采用更系统的设计方法，所以印刷更改只需几分钟而不是几个小时。
如何更改所有按钮上的线性渐变？还是边框的大小？从方角更改为2px圆角怎么样？在Photoshop中，这可能需要几个小时，而您仍然必须对其进行编码。使用代码进行设计的能力有助于避免返回到Photoshop进行视觉设计迭代的往返过程。当您将这些更改向上移动到代码中时，使用CSS3和Sass（我将在本文后面介绍）可以实时进行，而只需几分钟。
更快的发布时间
多年来，随着我将更多的设计工作流上游转换为代码，我获得了真正的进步-缩短了产品上市时间20％到30％。我做的越多，我花费在重复工作上的时间就越少。我花更少的时间进入Photoshop或Fireworks，然后重复执行代码中的工作。
在某些时候，设计必须与某种类型的后端进行交互，无论是CMS，Rails应用还是其他类型的后端。由于我的大部分设计工作都在代码中进行，因此集成发生的时间要晚于以后。几年前，我的一位客户PointRoll在五天内就从原型开发到生产。
为什么选择HTML5？
HTML5比以前的HTML版本更容易。以文档类型声明为例。在以前的HTML版本中， DOCTYPE 看起来像这样：
！DOCTYPE html PUBLIC“-// W3C // DTD XHTML 1.1 // EN”“ http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd”>
并且有六个不同的版本。幸运的是HTML5 DOCTYPE 看起来像这样：
！DOCTYPE HTML>
严重地。就是这样。令人震惊的简单。
创建标准HTML页面时，有许多公共元素，例如页眉，主要内容区域，侧边栏和页脚。我确定您之前已经看过类似的内容：
div id =“ header> div id =” nav“> / div> / div> div id =” main“> div id =” sidebar“> / div> / div> div id =” footer“> / div>
没有什么不寻常的。但是一旦填充了内容，该模板就会变成div汤。相比之下，借助HTML5的新语义元素，您可以更轻松地进行扫描，例如：
页眉>导航> /导航> /页眉>文章>一旁> /一旁> /文章>页脚> /页脚>
看那个。有道理的事情。
神奇的数据属性
HTML5附带了另一个很棒的钩子，使您能够构建自己的语义： 数据-。以前，如果要为DOM元素分配有意义的内容，则只能使用ID，类和角色。
不幸的是，ID必须是唯一的。类是通用的（yippee！），但是使用它们会很快变成一团糟。角色是未充分利用的资产，对ARIA具有重要意义。最近，我一直在使用数据-用于我们在Inflection开发的事件跟踪分析平台。我们是测试设计的忠实拥护者。在处理具有很大交互性的应用程序或页面时，我们希望对页面内的客户参与度有更深入的了解。
输入 数据-。借助它，您可以分配，传递并加入“定义自己的”含义模型。因此，例如，您可以执行以下操作：
输入type =“ button” data-id =“ facebook” dataregion =“ main” data-event =“ register”>输入type =“ button” data-id =“ twitter” dataregion =“ main” data-event =“ register “>输入type =” button“ data-id =” linkedin“ dataregion =” main“ data-event =” register“>
我们可以将带有JavaScript的侦听器附加到页面上，只要客户将鼠标悬停或单击此按钮，我们就可以跟踪该活动。我们可以看到他们徘徊在Facebook，然后是Twitter，然后是LinkedIn，然后最终决定选择Twitter作为其OAuth模型，而不是仅能跟踪通过OAuth在Twitter上注册的人。
想象一下，将其扩展到Pinterest或新的Myspace设计这样的网站，客户可以在其中拖放图块以根据兴趣对其进行重新排序。或隐藏他们不感兴趣的图块。 数据- 属性使您可以将语义含义附加或分配给您可以定义的事物。对于严重依赖Ajax的网站和应用程序，它提供了无限的机会。
CSS3 –这是新的Photoshop
CSS3带来了全新的外观设计水平，该水平通常需要背景图像，切片和臭名昭著的“推拉门”技术。幸运的是，这已经成为过去。
让我们来看看制作一个带有线性渐变，圆角，文本阴影效果的精美按钮，使其具有不错的按字母效果，并在悬停时发光。学习这些技术将有很长的路要走。它们中的每一个都可以独立使用，也可以以各种组合使用，以消除当今网络流行的任何视觉热度。
首先，让我们对默认设置进行一些调整 按钮> 和 输入type =“ submit”> 元素。假设您使用标准的CSS重置之一，我们将只增加一些调整大小和呼吸的空间。
/ *具有按钮的按钮按钮。======================================= * * / button，输入[type =“ submit”] {高度：2.7em;填充：.4em .7em;行高：1.9； }
专家提示： 提交的按钮和输入可能很难重新设置样式。我发现，将行高调整为1.6或更大，可以避免在代码行内需要额外的div或span的麻烦。 按钮> 标签。
现在我们已经解决了按钮问题，我们可以创建一个 .btn 类，以便为我们提供一个带有圆角，线性渐变，轮廓和凸版外观的漂亮简洁按钮。
.btn {display：inline-block;边框：1px实线＃d4d4cc; -moz-border-radius：4px; -webkit-border-radius：4px; border-radius：4px;填充：.4em .7em;背景：＃edeff2;背景：-webkit-gradient（linear，0％0％，0％100％，from（#fefefe），color-stop（0.55，＃edeff2），to（＃e4e6e9））;背景：-moz-linear-gradient（中心顶部，＃fefefe，＃edeff2 55％，＃e4e6e9）； -moz-box-shadow：rgba（160,172,187，.7）0 0 .2em 0; -webkit-box-shadow：rgba（160,172,187，.7）0 0 .2em 0; box-shadow：rgba（160,172,187，.7）0 0 .2em 0;颜色：＃6c7786;字体大小：1.1em；文字阴影：#fefefe 1px 0 1px;行高：1.375em;光标：指针； }
然后使用 盒子阴影 方法：
.btn：hover，.btn：focus {-moz-box-shadow：＃129ceb 0px 0px 2px; -webkit-box-shadow：＃129ceb 0 0 2px; box-shadow：＃129ceb 0 0 2px;背景：＃e6e9eb;背景：-webkit-gradient（linear，0％0％，0％100％，from（＃f7f7f7），color-stop（0.55，＃f6f6f7），to（＃e6e9eb））;背景：-moz-lineargradient（中心顶部，＃f7f7f7，＃f6f6f7 55％，＃e6e9eb）；颜色：＃45484b;文字阴影：rgb（255,255,255）1px 1px 0;边框颜色：＃c9c9c0; }
现在，我不太喜欢编写线性渐变代码。漫长而令人困惑。如您所见，我只包含了 -莫兹, -webkit，以及标准模型。如果要包含-o和-ms版本，则需要将代码加倍。
还有其他两种选择。一个是CSS3生成器；另一个是CSS3生成器。网络上有几种可用的方法，包括ColorZilla。但是，如果您想进一步提高自己的游戏水平，可以考虑潜入Sass：与Compass结合使用，真是天赐之物。
Sass + Compass：神奇美味
您可以停止希望CSS4独角兽版。在这里，它叫做Sass + Compass。 Sass代表语法很棒的样式表：您继承了CSS3的所有传统优点，并带来了变量，混合，扩展和其他优点的乐趣。
我最近重构了一个5,000行的CSS文件，该文件在相同的蓝色阴影下具有30多种变体。使用Sass，我用以下代码替换了所有变体：
颜色：$ blue；
通过定义 蓝色 在我的 _variables.scss 文件，我可以创建每个CSS或SCSS文件都可以引用的默认颜色。任何编写CSS的人都可以使用 蓝色 而不必担心使用吸管，查找十六进制代码或RGB，RGBA或HSL颜色。
还记得线性梯度代码吗？与其编写几行代码，不如这样：
@include background（linear-gradient（＃b1cfdc，＃7a9cac））;
让Sass和Compass承担繁重的工作，并为您生成正确的语法：完成。假设您要使用较深或较浅的颜色。您可以在Photoshop中四处移动吸管，或者仅使用Sass中的lighten / darken命令：
@include background（linear-gradient（darken（$ litegray，2％），darken（$ off-white，5％）））;
这将创建一个线性渐变，变暗2％ 浅灰色 和5％变暗 米白色。瞧！您甚至都不需要HEX或RGB代码。
jQuery：哦，是的，你可以
我要坦白。 JavaScript曾经吓倒我。然后我找到了jQuery。我不会声称自己是JavaScript专家，但是我非常有信心可以实现任何类型的过渡或使用jQuery所需的功能。
例如，通过单击“添加新号码”链接，可以在屏幕上显示输入的辅助电话号码。使用jQuery，您只需编写以下代码：
//-逐步显示-// $（'。new-number'）。click（function（）{$（'。alt-number'）。fadeIn（'fast'）;}）;
寻找更高级的东西？可能有一个插件。基本行为很简单，而复杂行为可以通过jQuery来实现。
构架
如今，最强大的两个框架是Foundation和Bootstrap。现在，在您关闭CSS框架之前，让我问您一些问题。您使用jQuery吗？ Ruby on Rails？ Django的？所有框架。
就像jQuery和RoR一样，Foundation和Bootstrap的诞生源于我们一遍又一遍地做很多事情（例如重置，排版，网格，表单，按钮，导航和列表）。 Foundation和Bootstrap都通过使用帮助程序类为响应式设计提供支持。两者都有充分的文档记录，并且已经过路测，因此您可以放心使用它们。
两者之间的一个主要区别是：Bootstrap基于LESS系统进行CSS预处理，而Foundation基于Sass。由于其附加功能，我更喜欢Sass而不是LESS，但是Sass和LESS都将传统CSS压成碎片。
关于框架的最后一个想法。对于那些不想继承其他人的框架的人，可以考虑选择一个现有的框架并将其剥离到裸露的骨头上，或者从几个框架中挑选樱桃来自己动手。无论哪种方式，实际上都没有理由每次都从头开始。
最后的想法
是否希望更好地控制您的设计最终结果？将更多进程移到上游进行编码。 HTML5最终为DOM带来了一定的意义。摆脱荒谬的好习惯 DOCTYPEs和神经炎。 CSS3是新的Photoshop：线性渐变，borderradius和框阴影FTW！借助Bootstrap，Foundation，Sass和jQuery之类的工具，将设计从上游移至代码从未如此简单。
在Creative Bloq上发现55个令人惊奇的HTML5示例。
