有手就会的UI小技巧，学完轻松做出高质感界面

作者：Marc Andrew

译者： 蓝建航

TCC 推荐：大家好，这里是TCC翻译情报局，我是李泽慧。在做界面设计时，往往细节决定成败。好的细节往往可以起到“四两拨千斤”的作用，让你的设计档次大幅提升。今天我们就来看看 web 设计中有哪些好用的小技巧吧～

当你在为下个项目创建高效、美观的 UI 界面时，有时可能只需要一些最小的调整就可以快速改善设计。 只是一些简单的微调，就可以产出客户、用户甚至是自己都真实满意的设计。在这篇文章里，我将一些微小且容易付诸实践的简单的设计技巧放在一起，加上少许的努力，就可以改善你的 设计和用户体验。那就让我们开始吧。

01.时不时使用纯装饰性元素

是的，屏幕内大部分的文字内容应该遵守“最佳可用性实践”原则，这是毋庸置疑的。但是，有时候你也想加入一些文字纯粹用来作装饰，这也是可以的，我们也不希望自己所有的设计都陷入平淡无奇的境地。纯粹为了装饰的原因加入一些奇特的元素是完全可以的，不需要遵守无障碍原则...只要这些元素不会以任何方式影响用户体验。灵活一点！

增加装饰性文字（见蓝色笑脸处）

02. 让UI界面中的元素更有区分度

“按钮”和“告示”，这两个通常在你的UI界面中是独立且重要的元素。如果可以的话， 尽量尝试并确保你的用户在浏览网站或 app 时可以快速、容易地将它们区分出来。

 

“按钮”在通常情况下是优先级高的，所以确保它们是屏幕内最突出的项目，可以容易地与其他元素（即通知）作区分。

“按钮”与“告示”样式区分开，使“按钮”在屏幕内最突出

03.只要微量的阴影就够了

我们都喜欢一个好的阴影对吧？当它被适度使用时，可以成为设计中微妙但有力的视觉线索。但是，“细微”就是此处有意思的地方了。大多时候，阴影在现实世界中是几乎不被注意的，因此在你的UI界面中也应该效仿。去掉重而深的阴影，调低不透明度，以达到更微妙和逼真的效果。

去掉深而重的阴影，降低不透明度

04. 使用大写字母？选用合适的字体达到视觉清晰效果

在你的设计中适当地使用大写字母是一件好事。在某些文本元素上使用大写字母，可以帮助你在设计中实现与其他文本元素差异化和对比的效果，并且提升想要呈现的整体视觉效果。如果要采用大写字母，请确保选择一个合适的字体，具有较高的 "x-height"[1]和较大的字重，可以使用户的视觉更加清晰。 （ [1] x-height：是指给定字体中，任何给定尺寸下小写字母x的高度。它提供了一种描述任意字体一般比例的方法。）

全部使用大写字母时要选择合适的字体

05. 让面包屑导航突出且易于用户理解

面包屑导航，到处都是面包屑导航。在内容丰富的网站中，面包屑导航经常被使用，但可惜它们往往没有得到应有的关爱。只需要一些小小的调整，你就可以让用户轻松且精确地找到他们在网站的位置，以及可能要去的地方。这在他们通过“搜索”功能跳转到网站较深的页面时尤其有用。   始终努力确保面包屑链路中的最后一项在视觉上看起来与其他的不同，而链接也应该做得更像链接。给面包屑一点爱吧。

最后一项要与众不同，链接要做得像链接

6. 使用高饱和度的颜色？尝试“色调”和“阴影”调和一下

高饱和度的颜色（亮蓝色、红色、绿色等）在网站上看起来很棒，但是过度使用会造成用户的视觉疲劳，特别是在使用大量文本内容的时候。   如果可以尽量使用得克制一些，可以尝试与饱和颜色的柔和形态（色调与阴影不同的变体）结合使用，以避免可怕的视觉疲劳。   使用这个方法还可以将注意力引向饱和色，使最重要的内容前置和居中。而比较柔和的颜色则不那么突出，可以让用户的眼睛得到休息。照顾一下用户的眼睛吧。

适当使用低饱和度的颜色（如右侧图例）

希望这些好用的 UI & UX 小技巧合集，可以帮助你收获更多如何在设计中通过一些小调整，产出对你和用户都更好的结果。