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

【资料图】

▲点击 "TCC翻译情报局"关注，回复 "社群" 加入我们

本文共 2300字，预计阅读 6分钟

TCC 情报局的第 173篇干货分享

2023年的第 2篇

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

当你在为下个项目创建高效、美观的 UI 界面时，有时可能只需要一些最小的调整就可以快速改善设计。只是一些简单的微调，就可以产出客户、用户甚至是自己都真实满意的设计。在这篇文章里，我将一些微小且容易付诸实践的简单的设计技巧放在一起，加上少许的努力，就可以改善你的 设计和用户体验。那就让我们开始吧。1. 时不时使用纯装饰性元素1. It’s perfectly OK to use purely decorative elements from time to time是的，屏幕内大部分的文字内容应该遵守“最佳可用性实践”原则，这是毋庸置疑的。但是，有时候你也想加入一些文字纯粹用来作装饰，这也是可以的，我们也不希望自己所有的设计都陷入平淡无奇的境地。纯粹为了装饰的原因加入一些奇特的元素是完全可以的，不需要遵守无障碍原则...只要这些元素不会以任何方式影响用户体验。灵活一点！ 增加装饰性文字（见蓝色笑脸处）2. 让UI界面中的元素更有区分度2. Make elements in your UIs distinguishable from one another

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

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

“按钮”与“告示”样式区分开，使“按钮”在屏幕内最突出3. 只要微量的阴影就够了3. Just subtle amounts of shadow are all you need我们都喜欢一个好的阴影对吧？当它被适度使用时，可以成为设计中微妙但有力的视觉线索。但是，“细微”就是此处有意思的地方了。大多时候，阴影在现实世界中是几乎不被注意的，因此在你的UI界面中也应该效仿。去掉重而深的阴影，调低不透明度，以达到更微妙和逼真的效果。 去掉深而重的阴影，降低不透明度4. 使用大写字母？选用合适的字体达到视觉清晰效果4. Using All Caps? Choose a font suitable to achieve optical clarity在你的设计中适当地使用大写字母是一件好事。在某些文本元素上使用大写字母，可以帮助你在设计中实现与其他文本元素差异化和对比的效果，并且提升想要呈现的整体视觉效果。如果要采用大写字母，请确保选择一个合适的字体，具有较高的 "x-height"[1]和较大的字重，可以使用户的视觉更加清晰。（ [1] x-height：是指给定字体中，任何给定尺寸下小写字母x的高度。它提供了一种描述任意字体一般比例的方法。） 全部使用大写字母时要选择合适的字体5. 让面包屑导航突出且易于用户理解5. Make Breadcrumbs stand out and easy to interpret for the user面包屑导航，到处都是面包屑导航。在内容丰富的网站中，面包屑导航经常被使用，但可惜它们往往没有得到应有的关爱。只需要一些小小的调整，你就可以让用户轻松且精确地找到他们在网站的位置，以及可能要去的地方。这在他们通过“搜索”功能跳转到网站较深的页面时尤其有用。始终努力确保面包屑链路中的最后一项在视觉上看起来与其他的不同，而链接也应该做得更像链接。给面包屑一点爱吧。 最后一项要与众不同，链接要做得像链接6. 使用高饱和度的颜色？尝试“色调”和“阴影”调和一下6. Using highly saturated colours? Try and tone things down with a Tint or Shade高饱和度的颜色（亮蓝色、红色、绿色等）在网站上看起来很棒，但是过度使用会造成用户的视觉疲劳，特别是在使用大量文本内容的时候。如果可以尽量使用得克制一些，可以尝试与饱和颜色的柔和形态（色调与阴影不同的变体）结合使用，以避免可怕的视觉疲劳。使用这个方法还可以将注意力引向饱和色，使最重要的内容前置和居中。而比较柔和的颜色则不那么突出，可以让用户的眼睛得到休息。照顾一下用户的眼睛吧。 适当使用低饱和度的颜色（如右侧图例）希望这些好用的 UI & UX 小技巧合集，可以帮助你收获更多如何在设计中通过一些小调整，产出对你和用户都更好的结果。原文：UI & UX Micro-Tips: Volume One (marcandrew.me)作者：Marc Andrew译者：蓝建航审核：徐曼鹭编辑：孙淑雅本文翻译已获得作者的正式授权（授权截图如下）

---

往期精选文章：十个技巧帮助你设计一款在线学习 APP这些色彩心理学知识教你如何传递信息案例研究｜康奈尔大学副业社区网站设计Web Vitals —— 谷歌的新一代 Web 性能体验和质量指标网页设计师能从日式美学中学到什么？案例研究｜一款为你带来难忘体验的美食 APP如何制作打动面试官的作品集，这里有一份完整的指导手册如何做好用户体验项目？从一个好计划开始如何建立设计系统如何把握不同层级用户的需求：回归本质，打磨信息架构TCC 视野｜2021 年用户体验设计趋势分析

---

- 设计师自习社区-TCC 设计情报局欢迎小伙伴加入，一起交流设计知识，了解全球设计资讯，锻炼英文能力，发掘更多可能性～添加小助手微信，备注「社群」，即可加入读者群。