当你正为一个平淡无奇的设计苦寻思路时，看看这里几十种简单的方法吧，可为你的 UI 设计增加趣味。收藏起来，将来你也会用到它们。
注意：这篇文章原文由 Anthony Hobday 撰写，他是伦敦的产品设计师和杰出的设计分析师，在Twitter上关注他。
背景技巧
边框与分隔技巧
阴影技巧
文本技巧
其他技巧
背景技巧
倾斜背景过渡
与其使用“四四方方”的水平背景过渡，不如尝试一下有角度的背景过渡，来增加一点额外的活力。
（这个设计也用了另一个方法——口袋隔断——增加了更多的趣味）
弯曲背景过渡
如果你的网站的风格与软形状很好，这是另一种方式来跳过普通的平面背景过渡。
在本例中，标题位于背景过渡中，这进一步增加了趣味性。
倾斜突出的形状
在主体元素后面，放一个形状并使其稍微倾斜并不困难，但如果它是丰富多彩的，它会为原本普通的布局增加点个性。
这个例子使用了一个渐变填充背景，添加了更多的视觉张力。
突出背景的形状
有时你用了一个融入背景的容器，你不希望在它周围加边框。试着在容器后面添加一个形状，这样它就更突出了。
你可以选择几何（如上图）或纹理（如下图）
尝试一下，但一定要找到与品牌或主题相匹配的东西。
突出图标的形状
图标后面的彩色形状，可以强化品牌的颜色，强化图标的含义，为普通的网格增加一点多样性。
这些简单的颜色点缀，为该设计增添了很多色彩。
微妙的图案背景
为了使容器背景更有趣(不分散对内容的注意力)，尝试添加一个微妙的背景。
上面的网站运用了微妙的图案背景UI技术。理想情况下，图案应该与你的品牌匹配。
微妙的线条背景
使用线条或其他矢量形状作为背景，是增加视觉趣味的一种简单方法。
在这个示例中使用了对角线，但任何模式都可以工作，只要它不太繁忙，从而分散对内容的注意力。
大文本背景
如果你厌倦了用抽象的视觉效果来暗示概念，为什么不使用文字呢？大的、不强调的背景文字，可以不分散注意力并有所暗示。
小贴士：字体越大，字体的风格就越淡。大小和对比度是一个权衡。
边框与分隔技巧
虚线边框
点缀在物体周围的边框，可以让物体在视觉上更轻，更有质感。
在这个例子中，虚线边框很好地强化了左边的图形是在背景中的意图。
虚线分隔
虚线分隔，不像实线那样分隔得很明显。如果你希望这些部分仍然在一起，这么做可能很有用。
因为上面示例中的对比度很低，所以在不分散内容的情况下增加了样式。
双边框
为了进一步强调，双边框可以真正将内容与背景分开。
在此例中，额外的白色边框有助于表单在背景上真正突出，这是一种极其轻微的拟物化。
渐变边框
渐变边框，尤其是色彩鲜艳的边框，传达了一个强烈的信息：这个边框内的任何内容都是令人兴奋的、重要的，或者两者兼有。
这是一个很好的方式来强调品牌颜色，而不占用额外的空间。
倾斜渐变边框
这是微妙的，但是看起来就像它在边框周围的几个点上“捕捉光线”，这种效果经常出现在边缘明亮的金属上。
在此示例中，元素在边缘使用彩色渐变，而不仅仅是白色。
手绘边框
并非网站或应用程序上的所有内容都必须由电脑绘制，手绘的边框看起来也可以毫不费力地为设计增添很多特色。
图形边框
重复方式可以为容器制作不错的边框，额外的纹理更吸引眼球，有助于突出里面的任何内容。
在本例中，图案边框只应用于容器的左侧边缘，但它使内容看起来很重要，特别是因为它使用了条纹，这是常见的用来警告的视觉语言。
透明粗边框
元素周围的大边框，设置较低的不透明度，有助于突出显示、让结构和元素与背景形成对比。重要的是，它在视觉上比不透明的边框更轻。
在这个例子中，半透明的边框使用了背景模糊，这使得它在经过背景颜色过渡时产生了有趣的效果。
淡化的边框
添加一个彩色边框，然后复制它，让它稍微大一点，并降低不透明度。巧妙地重复，你会得到一个有趣的渐变深度效果。
这个例子很好地使用了这种效果，给人一种按钮后面有一个脉冲光的印象(用虚线边框作为衡量标准)。
阴影技巧
在本节中，我们不会讨论典型的 box shadows。相反，我们将看看如何使用阴影的概念来增加视觉趣味。
悬浮阴影
大多数投影假设元素平放在网站背景上。悬浮阴影，假设网站背景是一个向地平线延伸的平面，元素漂浮在其上方，投射出下方与元素分离的阴影。
上图，每个作者头像下方的悬浮阴影与倾斜高光相配合。
实体阴影
阴影不需要模糊。你可以有一个“阴影”，它是与容器大小相同的偏移形状。
这些产品层级背后的彩色形状，有助于加强它们的差异，并使整个部分更加令人兴奋。
轮廓阴影
类似于前面的技巧，你可以用一个偏移轮廓作为阴影。看看下面“Try Kairn!”这个按钮。
图案阴影
阴影可以由图案组成，这是突出元素的好方法，因为纹理会吸引眼球。
注意，这个图案与其他地方使用的填充图案瓷砖形成了一个主题。
文本技巧
你可能会觉得，文本没有多少机会能提供视觉趣味，但是还是有很多排版的技巧可以运用。
分层文本
将文字和图像交织在一起是一种强大的技巧，可以让两者真正地融为一体。
行内图像
在文本行内添加图标、插图或小的视觉元素，可能会显得古怪而独特。
Elizabeth Goodspeed在推特上编译了许多这样的“nouveau rebus”，值得一看。
有趣的项目符号
项目符号可能会有点无聊，试试用更有趣的(品牌上的)图像来代替它们。
粗下划线
网络上标准的下划线很薄，通常用于链接。像这样更粗的下划线是使用品牌颜色的机会，并比标准下划线更能突出某些词。
它们可以是大而粗的：
或微妙而轻盈：
改变字体以高亮
这种方法在一些稍微古怪的网站上越来越受欢迎。它对被替换掉的词语进行强调。
在这里，他们结合了斜体、手绘元素和实心阴影的字体变化。
字宽字高的变化
你已经使用了粗体和斜体来强调某些文本，但你曾使用过更宽或更窄的字宽吗?
在上面的例子中，每个单词的文本宽度被动画过，从而产生更有趣的效果，值得一看!
其他技巧
还有一些其他的技巧，可让你的设计更有趣。
点状网格
点状网格，已成为为页面添加一些视觉特效的简单方法。它们添加了纹理，易于创建，并且可用于填充页面网格中的空间。因为它是一个由点组成的网格，所以它们在视觉上不会像纯色块那样太重。
上图，更标准。下图，更风格化：
如果你掌握了上面的手绘元素和粗下划线，可以更胜一筹。
打破框架约束
让内容从容器中溢出，来打破设计规则。
在这个例子中，左边的文字遵循规则，右边的图像变得兴奋，溢出了容器，它象征着活力和顽皮。
手绘元素
手绘元素是添加人性化的一种简单方法，它给人的印象是有人拿着笔在网页上画画。
请注意手绘示例如何与产品的氛围相匹配，调试之于代码就像编辑之于文本。
运用三维
如果你想要一个回归科幻的外观，可以使用渐隐渐变为容器加一个深度效果。
在这个例子中，它看起来就像蓝色的容器飞向你，这有助于推广内容。
偏移背景或边框
这是另一种以有趣的巧妙打破规则的方式。元素的边框通常紧贴在元素的边缘，但如果你稍微偏移一下该边框，它确实可以吸引注意力。这也是一种添加深度效果的有趣方式。
注意轮廓阴影和粗下划线的相似之处。
口袋截断
有时你不需要显示整个图像（或者您没有空间），这种截断图像的方法表明图像在网页的下半部分的还在继续延伸。
提示：这可以与背景技巧相结合。
重叠的形状
复制一个容器，并使每个副本更小，可以给人一种消失在远处的感觉。但与阴影不同，它让一切都感觉清晰。
上图，更真实。下图，更抽象。
注意运用三维的相似之处。
不规则的容器
容器不必是矩形的。这在HTML和CSS中是最简单的，但如果您打破了这一规则，可以让容器脱颖而出。
这个容器到处都是，但这只会更吸引观众的注意力，并匹配下面列出的5个功能。
翘起的元素
巧妙地使用阴影，甚至可能扭曲元素的形状，可以使它们看起来好像在向某个方向“倾斜”。
在此例中，白色的方块看起来好像是倾斜了一点，面向网站的顶部。
可见网格
简单而令人满意。
本文翻译自：https://www.learnui.design/blog/spice-up-designs.html?ref=webdesignernews.com#hand-drawn-elements
