每一个web开发人员不可避免地遇到他们需要视觉设计决策的情况下,他们是否喜欢与否。

也许你工作的公司没有一个全职的设计师,你需要自己实现UI的新特性。或者你认为黑客,你希望它更好看yet-another-Bootstrap-site。

很容易让你举手说,“我将永远无法让这看起来不错,我不是一个艺术家!”但事实证明有很多技巧可以使用就可以升级了你的工作,不需要背景的图形设计。

这里有七个简单的想法你可以使用它来提高你的设计。

1。使用颜色和重量来创建层次结构,而不是规模

样式文本UI时常见的错误是过度依赖字体大小来控制你的层次结构。

“这是文本重要吗?让我们使它变得更大。”

“这是文本二次吗?让它更小。”

而不是让所有的重担字体大小,试着用颜色或字体重量做同样的工作。

“这是文本重要吗?让我们使它更大胆。”

“这是文本二次吗?让我们用比较亮的颜色。”

试着坚持两个或三个颜色:

• 一个黑暗的(但不是黑色)颜色为主要内容(比如一篇文章的标题)
• 一个灰色的为次要内容(如日期发表的一篇文章)
• 浅灰色为辅助内容(可能的版权声明页脚)

类似地,两个字体的权重通常是足够的UI工作:

• 一个正常的字体重量(400年或500年取决于字体)对于大多数文本
• 重量更重的字体(600或700)你想强调的文本

远离字体重量低于400 UI的工作;他们可以为大标题但工作在较小的尺寸太难以阅读。如果你正在考虑使用较轻的重量不再强调一些文本,用比较亮的颜色或较小的字体大小。

2。不要用灰色文本颜色的背景

使文本成为浅灰色是一个伟大的方式去不再强调它在白色的背景,但它看起来不那么大的背景。

那是因为我们实际看到的影响,白色灰色减少了对比。

背景颜色接近的文本是什么实际上有助于创建层次结构,而不是浅灰色。

有两种方法可以减少对比在处理彩色背景:

1。减少白色文本的不透明度

用白色文本和降低不透明度。这让背景色通过有点流血,不强调文本与背景,并不冲突。

2。那里的颜色基于背景颜色

这样做的效果好于减少不透明背景图像或模式时,或者当减少不透明度使文本感觉太枯燥或冲毁。

选择一个颜色相同的色调为背景,调整饱和度和明度直到它看起来正常。

3所示。抵消你的阴影

而不是使用大型模糊和传播价值框阴影更加明显,添加一个垂直偏移量。

它看起来更自然,因为它从上面模拟光源照射下像我们看到在现实世界中。

这适用于插图的阴影像你可能使用井或表单输入:

如果你有兴趣学习更多关于影子设计材料设计指南是一个神奇的底漆。

4所示。使用更少的边界

当你需要创建两个元素之间的分离,试图反抗立即到达边境。

而边界是一个伟大的方式来区分两个元素,它们不是只有使用太多的方法,可以让你的设计感到忙碌和混乱。

下次你发现自己到达了边境,试试这些想法之一:

1。使用一个盒子的影子

盒阴影做伟大的工作描述一个元素的边界,但可以更微妙而实现相同的目标而不被干扰。

2。使用两个不同的背景颜色

给相邻元素稍微不同的背景颜色通常是所有您需要创建它们之间的区别。如果你已经使用不同的背景颜色除了边境,试着消除边界;你可能不需要它。

3所示。添加额外的间距

什么更好的方式来创建元素之间的分离,而不是简单地增加分离?距离远是一个伟大的方式来创建组之间的区别没有引入任何新的UI元素。

5。不要炸毁图标,是小的

如果你设计的东西可以用一些大图标(如可能的着陆页的“特性”一节),你可能会本能地抓住这样的免费图标集字体太棒了或Zondicons和提高直到满足你的需求。

毕竟他们是矢量图,所以质量不会受到如果你增加尺寸对吗?

虽然确实矢量图不会降低质量当你增加它们的大小,图标,画在16-24px永远不会看起来很专业,当你吹3或4 x预定的大小。他们缺乏细节,总觉得不成比例的“粗”。

如果小图标都是你,试着将它们包含在另一个形状和给形状背景颜色:

这让你保持接近其预期的实际图标大小,同时填充更大的空间。

如果你的预算,你也可以使用一组溢价图标设计用于更大的尺寸,Heroicons或标志性的。

6。使用口音边界将颜色添加到平淡的设计

如果你不是一名平面设计师,你怎么加的视觉天赋UI,其他设计从美丽的摄影或彩色插图吗?

一个简单的技巧,能产生很大的不同是添加丰富多彩的口音边界的部分界面,否则感觉有点乏味。

例如,沿着一边一个警告信息:

…或强调积极的导航项:

…甚至你的整个布局:

不需要任何图形设计人才向UI添加一个颜色的矩形,它可以提高你的网站更加“设计”。

很难挑选颜色吗?尝试选择从一个限制调色板Dribbble颜色的搜索为了避免感觉被传统的颜色选择器的无限可能。

7所示。并不是每一个按钮需要一个背景颜色

当有多个操作用户在一个页面上,很容易落入的陷阱设计这些行为纯粹基于语义。

这样的框架引导鼓励这个语义风格给你菜单的选择当你添加一个新的按钮:

“这是一个积极的行动吗?使按钮绿色。”

“这是否删除数据?红色的按钮。”

语义是按钮设计的一个重要组成部分,但是有一个更重要的维度通常被遗忘:层次结构。

页面上的每一个行动都坐落在一个金字塔的重要性。大多数页面只有一个真正的主要行动,几个不太重要的二次操作,和一些很少使用三级操作。

在设计这些操作时,沟通是很重要的在层次结构。

• 主要的行动应该是显而易见的。固体、高对比度背景颜色这里伟大的工作。
• 二次行动应该清楚但不突出。大纲样式或低对比背景颜色是伟大的选择。
• 第三行为应该发现但不引人注目的。样式这些行动像链接通常是最好的方法。

“破坏性的行为,他们总是不应该红?”

不一定!如果不是破坏性的行动主页面上的行动,它可能是更好的给它一个二级或三级按钮治疗。

拯救大红色,大胆的造型时,消极的行动是主操作界面,就像在一个确认对话框:

喜欢这篇文章吗?我们刚刚发布了一本书!

重构UI需要我们知道的所有关于设计和包成一个全面的计划,其中包括一本书,演示,一个组件库,定制设计资产等等。

超过6000人把它捡起来,到目前为止,和反馈一直是惊人的。

如果你有兴趣,去RefactoringUI.com/book要了解更多并下载一个示例。