开发人员应该掌握哪些技巧？

 

答：使用Gridlover设置字体大小和行距

使用Typetester并排打印正文副本

不要使用平坦的背景色，而应使用微妙的图案

使用配色方案设计器挑选免费的颜色

如果使用Colllor使眼睛流血，则可以减轻明亮的色彩

使用图标字体，如Entypo

使用CSS3添加一些细微的效果，例如border-radius和box-shadow可以使页面更优美

使用比颜色浅black的文字，尝试#444代替

限制每页使用的字体数量，最多3个

 

答：优秀的代码和出色的设计需要彼此协同工作。不幸的是，视觉设计能力差的人常常认为他们缺乏自然的能力。换句话说，人们普遍认为您是天生具有美学超能力的天赋，或者不是。我不同意这种观点。

 

想一想：如果您在5岁时就停止写作，那么写作可能会很糟糕。艺术和设计也是如此。大多数人在开始掌握手指绘画时就停止正确地制作艺术品。

 

幸运的是，学习永远不会太晚。实际上，增加的成熟度使从客观角度学习主观话题变得更加容易。

 

如果您在一个小型团队中戴上很多帽子，或者如果您觉得项目看起来更好，那么您的项目可能会更加成功，那么这对您来说是合适的。这里有五个可以治愈（或至少掩饰）丑陋的艺术和设计的传统元素和原理。

 

1.使用负空间

大多数开发人员不会关注空白，边距，行高或其他任何会增加空间的CSS属性。很容易看出开发人员何时设计了一个界面：文本直接在边缘上没有边缘留出空间，并且屏幕元素之间的分隔是用线条而不是空格来创建的。

 

在美术领域，元素之间的区域称为“负空间”，尽管在设计的其他领域中，通常将其称为“空白”。负空间使观看者可以快速识别设计的各个部分。它还使文本更具可读性。

 

这里有一些提示：

 

确保文本具有足够的“呼吸”空间。所有四个侧面上都应有足够的填充量。文字几乎永远都不会碰到元素的边缘。

注意“盒中盒”外观。当页面元素由边框分隔而不是由边距分隔时，最终会在许多矩形内嵌套许多矩形。下次，当您想在某物上添加边框时，请尝试添加边距。

温馨提示：尝试在元素的底部增加一些额外的空间。有时，这会产生较小的视觉提升，并使它们在页面上显得更浅。当艺术家将遮罩切成一幅艺术品时，他们通常会通过切割遮罩以使底面大于另一侧来运用这种视觉技巧。

仅通过节省空间，您就已经比大多数尝试设计工作的开发人员好了100％。

 

2.通过价值创造对比

在音乐中，有一个概念叫做动力学。您可以通过以柔和的音量播放歌曲的某些部分来增加情感，使大声部分听起来很响，反之亦然。在设计中也是如此。如果所有内容均为粗体，则没有内容为粗体。

 

值是用于描述颜色的明暗程度的术语。当一个亮值和一个暗值并排放置时，会产生对比度。 对比度可帮助观看者确定重要的内容。 例如，表单元素上的说明文本可能不如表单标签重要，因此您应使用较小的字体或使用灰色文本而不是黑色文本。如果表单标签上的电子邮件：用深色粗体显示，您可能需要在下面添加一些补充文本，以确保访问者不会将其提供的地址用于恶意目的。这些额外的文字并不那么重要，因此您应该使它看起来比其他所有东西都“安静”。

 

文本的视觉效果并不是唯一要记住的事情。您还需要确保价值的完美结合（明暗区域），以便轻松辨别屏幕元素之间的分隔。这是一个有用的视觉工具，因为人眼感知颜色差异的能力远胜于颜色差异。

 

这里有一些提示：

 

与编写代码测试相似，您还应该测试一下设计。在发布您的下一个设计更新之前，请尝试以灰度查看。立即，您将能够看到最暗和最亮的区域。如果一切通常看起来都像是相同的灰色阴影，那么该是时候增加一些对比度和价值了。纯色不足以清楚地将设计元素彼此分开。价值的对比更为重要。

截取网页的屏幕截图，然后使用图像编辑工具（例如Photoshop）来试验曲线和水平。有时，您会偶然发现更令人愉悦的设计，只需进行一些小的CSS调整即可实现。

几乎在每种艺术形式中，初学者都倾向于提高每种东西的音量。降低音量是成熟的标志，并有助于突出最重要的部分。

 

3.添加带有纹理的品种

现实世界中的大多数事物都不是完全平坦和平滑的。纹理为您的界面增加了多样性。 即使您不打算使用skueomorphism复制真实的表面，在一些地方添加一点纹理仍然是一个好主意。纸张，金属和石材都充满了纹理的灵感。甚至文本块也可以视为纹理。通常，一点点随机噪声足以使您的设计与其他平淡无聊的页面区分开。

 

以下是一些纹理提示：

 

纹理增加了很多视觉上的丰富性，可以使页面在字面上和形象上都显得更深。

如果您使用的是渐变色或许多微妙的颜色过渡，则绝对应该在顶部添加一些浅色纹理，因为这会减少色带并使颜色看起来更平滑地融合。CSS3中的多个背景使此操作变得容易。

使用CSS3对背景进行分层也意味着纹理的文件尺寸非常小。您可以制作一个小方块（应该做大约256×256像素），里面充满一些噪音，然后让背景重复。然后，您可以在多个位置重用此文件。

4.塑造事物

在网页设计中，最被忽视的艺术元素是形状。看起来世界上有很多二维形状似乎很明显，但是HTML和CSS倾向于矩形。实际上，“盒子模型”是最重要的CSS概念之一。当您沉迷于代码中并只是试图使数据库连接正常工作或定位背景时，很容易忘记如此基本的东西。非矩形形状可以吸引人们注意至关重要的页面元素。

 

仅仅因为我们的工具是面向矩形的，并不意味着我们不能弯曲规则并制作其他形状。实际上，CSS允许您轻松创建一些相当复杂的形状。

 

这就是为什么要使用形状的原因：

 

许多对象都是用矩形设计的：电视，桌子，房间等。即使您没有自觉地意识到它，弯曲或不规则的物体也容易脱颖而出。与其使用颜色，值或只是通过在页面上加大其大小来引起对页面元素的关注，不如尝试使用唯一的形状。

设计精美的图标和徽标可以通过简单的形状来识别，例如Apple或Disney等公司的徽标。设计图标和徽标时，请始终先从纯黑色形状开始。以后可以添加任何阴影和颜色。

温馨提示：如果您想增加对Web应用程序的转化，并且访问者没有点击号召性用语按钮，请尝试A / B测试形状异常的按钮（例如，尝试用箭头代替一个矩形按钮）。即使一开始看起来有点难看，这可能足以吸引更多的注意力。

与此相关的是，永远不要让这些工具定义您的想象力。首先设计，然后找出实际可行的方法。

 

5.保持平衡

在花费数小时将每个像素和工作细节安排到页面上之前，重要的是要退后一步来查看大图。视觉平衡是用清晰直接的语言教授的最困难的概念之一，但这是一种可以迅速发展的本能。平衡是思考设计的组成或布局的一种方法。它是指放在一个区域相对于另一个区域的视觉重量。正确处理这一点很重要：页面不平衡会产生紧张感。 在极少数情况下，您可以使用平衡来故意制造紧张感（例如，恐怖电影的网站），但是在大多数功能正常的Web应用程序中，应避免这种情况。

 

通常很容易浏览设计并确定一侧是否比另一侧更重。与设计的另一面相比，可能有太多的元素，太多的对比度，太多的颜色等等。考虑到设计的顶部与底部之间的关系也很重要，尽管在垂直滚动的网页上（与大多数网页一样），这不如水平平衡重要。

 

以下是一些使页面更加平衡的提示：

 

在页面中心下方画一条垂直线。感觉一侧有比另一侧更多的东西吗？设计不必对称，但至少在两侧应具有相等的重量。

尝试颠倒查看页面。这样可以防止您的眼睛阅读文本并解释UI小部件的功能。相反，您不禁会注意到大多数页面元素是在哪里收集的。如果您仍然不确定，也可以尝试将其与第一个技巧结合使用。