“7 Practical Tips for Cheating at Design” by @refactoringui https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886 翻译来自外网medium的好文章，分享给大家学习，无商业行为，侵删。
用策略代替天赋来提高你的设计。
每个web开发人员都不可避免地遇到需要进行可视化设计决策的情况，不管他们喜欢与否。
也许你工作的公司没有专职的设计师，你需要为自己的新功能实现UI设计。或者，你可能正在努力进行一个项目，你希望它看起来比现存的其他Bootstrap设计的网站更好。
你很容易举起你的手说:“我永远也做不出这样的样子，我不是艺术家!”但事实证明，你可以用大量的技巧来升级你的作品，而不需要在平面设计方面有任何背景。
这里有七个简单的主意，你今天就可以用来改善你的设计。
1、用颜色和字重而非大小来创造层次结构。
在设计UI字体样式时，一个常见的错误是过于依赖于字体大小来控制您的层次结构。
“这些文字重要吗？让我们做大一点”
“这些文字是二级的吗？让我们做小一点”
不要把所有繁重的工作都留给字体大小，尝试使用颜色或字体权重来做同样的工作。
“这是文字重要吗?让我们做炫丽一点。”
“这些文字是二级的吗？让我们把颜色做淡一点”
试着坚持用两到三种颜色:
主要内容的用深色(但不是纯黑色)颜色(如文章标题)
次要内容用灰色(如文章发表的日期)
辅助内容用浅灰色(可能是页脚的版权声明)
类似地，两个字体权重通常足以用于UI工作:
大多数的文本采用正常的字重（400到500，具体取决于字体）
对于需要强调的文字采用较重的字重（600到700，具体取决于字体）
应当尽量不要让正文部分字重低于400，因为这一部分字体字体本身尺寸已经较小，低于400会使得可读性不佳。如果你依然需要降低字重，那么不妨让字体色彩更浅一点，或者替换成其他识别度较强、字重相对较小的字体。
2、不要在有色背景上使用灰色的文本
在白色背景下，将黑色的文本改成灰色，是不错的淡化其视觉效果的做法，但是在彩色背景下这么做，则是另外一回事。
实际上，让白色背景下文本由黑变灰实际上是达到降低对比度的效果。
但是在彩色背景下，想要降低对比度是应该让文本逐步接近背景色，而不是改为灰色。
想要降低和背景色之间的对比，通常有两种方法：
a、降低白色文本的不透明度
降低不透明度，能够让背景的颜色透过来一些，以一种不冲突的方式降低前景文字和背景之间的对比度。
b、基于背景色手工挑选文本的颜色
当背景是图像或者图案的时候，半透明的文本会影响可读性，这个时候最好是基于背景主色调来挑选相应的文本色。
选择与背景颜色相同的颜色，调整饱和度和亮度，直到它看起来合适。
c、偏移阴影
不要使用大的模糊和扩展值来让box阴影更加明显，而是采用添加一个垂直的偏移量。
这样它看起来更自然，因为它模拟了从上面照下来的光源，就像我们习惯在现实世界里看到的那样。这适用于嵌入的阴影，比如表单输入框:
如果你有兴趣了解更多关于阴影设计的知识， Material Design Guidelines 是一个很好的入门指南。
4、尽量少用边框
不要一谈到在两个元素之间创建分隔时，就想到使用边框。
虽然边界是区分两个元素的好方法，但它们不是唯一的方法，而且使用太多的边框会让你的设计变得繁杂和混乱。
下次当你发现自己想要使用边框时，不妨试试下面的方法:
a. 用一个边框阴影
边框阴影能起到和边框一样描绘轮廓的作用, 但它可以更精细，也可以实现相同的目标，而不会让人分心。
b. 用两种不同的背景颜色
给相邻的元素设置稍微不同的背景颜色，通常可以在它们之间创建区别。如果您已经使用不同的背景颜色并添加了边框，请尝试删除边框，你可能不需要它。
c. 增加额外的空间
有什么更好的方法来创建元素之间的间隔，而不是简单地增加间隔?增大间隔是一种很好的方法，可以在不引入任何新UI的情况下创建元素组之间的区别。
5. 不要把小图标放大
如果你正在设计一些可以使用一些大图标的东西(比如可能是登陆页面的“功能”部分)，你可能会直接地获取一个免费的图标集，比如“ Font Awesome ”或“ Zondicons”，并增加尺寸以符合你的需求。
毕竟它们是矢量图像，所以如果你增加尺寸，质量不会受到影响。
虽然矢量图像在增加尺寸的时候不会降低质量，但是当你把它们的尺寸放大到原来的3倍或4倍时，16-24px的图标就会显得很不专业了。他们缺乏细节，而且总是感觉不成比例的“敦厚”。
如果你只有小图标，试着把它们围成另一个形状，然后给它一个背景色:
这样可以使实际的图标更接近其预期的大小，同时仍可以填充较大的空间。
如果你有预算，你也可以使用一个高级图标集设计用于更大的尺寸，像Heroicons 或者 Iconic。
6、给平淡的设计增加颜色强调边框
如果你不是一名平面设计师，你如何在你的UI中获得一些视觉天赋，犹如其他设计师从美丽的摄影或彩色插图中获得那样呢?
一个简单的小窍门就是给你的界面添加色彩缤纷的强调色，否则你会觉得有点乏味。
例如，在警告信息的一侧:
或者强调被点击的导航栏项目
或者整个版面的顶部：
不需要任何图形设计天赋来为你的UI添加一个彩色的矩形，它可以让你的网站感觉更具设计感。
很难选择颜色?尝试从一个已有的调色板中选择，比如Dribbble’s color search ，以避免被传统颜色选择器的无限可能性所淹没。
7、不是所有的按钮都需要背景色
当用户可以在页面上执行多个操作时，很容易陷入那些纯粹基于语义操作的设计陷阱里。
像BootStrap 这样的框架就让设计师按照语境和语义来进行选择：
“这是一个积极的操作？让这个按钮是绿色的吧。”
“这是否是要删除数据？那么将按钮设置为红色的吧。
的确，语义和按钮本身的设计息息相关，但是还有更重要的维度被忽略了，那就是层次结构。
网页上每个操作其实都位于整个交互金字塔的某个位置。绝大多数的页面其实只有一个主要操作，搭配一些不太重要的次要操作，以及为数不多的几个三级操作。
在设计这些交互的时候，通过层次结构来呈现这些交互的重要性是很重要的设计环节。
主要操作应该很明显。采用实色、高对比度的按钮是很有必要的。
次要操作应该明显，但是不突出，采用幽灵按钮或者和背景对比度较低的色彩是比较合理的。
三级操作应该是可被发现，但是不明显的，他们最好被设计为链接。
“破坏性的交互所涉及的按钮难道不应该是红色的么？”
没必要！如果破坏性的交互所涉及到的按钮不是主要操作的话，让它按照次要操作甚至三级操作的按钮来设计就好了。
保存大的、红色的和大胆的样式，因为当这个消极的动作实际上是界面中的主要动作，比如在一个确认对话框中:
网友评论