37种简单的方法来调剂你的UI设计

Ever been working on a design that feels too plain? Let’s look at a few dozen simple ways to spice things up. Get ready to bookmark this page, because you’ll want to reference this list in the future. It’s unbelievable how many incredible pro-level designs feature solid foundations plus a few techniques listed below.

你是否曾为一个感觉过于平淡的设计工作过？让我们来看看几十种简单的方法来调剂一下。准备好把这个页面收藏起来，因为你将来会想参考这个列表。令人难以置信的是，许多令人难以置信的专业级设计都具有坚实的基础和下面列出的一些技巧。

Note: this guest post is by Anthony Hobday, a London-based product designer and brilliant analyst of design. Follow him on twitter.

注：这篇客座文章的作者是Anthony Hobday，他是驻伦敦的产品设计师和出色的设计分析家。在twitter上关注他。

Background Techniques

背景技术

Borders & Dividers Techniques

边框和分隔线技术

Shadow Techniques

阴影技术

Text Techniques

文本技术

Other Techniques

其他技术

Spicing up Backgrounds

为背景增光添彩

Every design has a background. Let’s start with some ways of making them a bit more exciting.

每个设计都有一个背景。让我们从一些使它们更精彩的方法开始。

Angled Background Transition

有角度的背景过渡

Instead of using a “boxy” horizontal background transition, try an angled background transition to add a bit of extra life.

与其使用 "方正的 "水平背景过渡，不如尝试有角度的背景过渡，以增加一点额外的活力。

(Note this one also cuts off the product image – a Pocket Cut-Off – adding further interest)

(请注意，这幅画也切断了产品图片--口袋里的切口--增加了进一步的趣味性)

Curved Background Transition

弯曲的背景过渡

If the style of your website works well with soft shapes, this is another way to skip the ordinary flat background transition.

如果你的网站风格与柔和的形状配合得很好，这是另一种跳过普通平面背景过渡的方法。

In this example the title sits across the background transition, which further adds interest.

在这个例子中，标题横跨背景过渡，这进一步增加了趣味性。

Tilted Highlight Shape

倾斜的高光形状

It’s not difficult to add a shape behind an element and tilt it slightly. But especially if it’s colourful, it adds a lot of character to what could otherwise be an ordinary layout.

在一个元素后面添加一个形状并使其稍微倾斜并不难。但是，特别是如果它是彩色的，它就会给本来是普通的布局增加很多特色。

This example uses a gradient fill for the background shape, which helps add even more visual flair.

这个例子对背景形状使用了梯度填充，这有助于增加...