提升用户界面设计技能的技巧和资源
最初发布于dionarodrigues.dev。
你是否曾经有过这样的感觉：看着某个界面，却不知道它哪里出了问题？
也许你是一位开发者，正努力通过代码打造更优秀的界面；又或许你是一位设计师，正在尝试各种不同的颜色组合，却依然找不到用户界面的问题所在。别担心，这完全正常，我会尽力帮助你。🐱🏍😃✨
我整理了一些设计技巧和资源，这些技巧和资源可以根据我作为前端设计师在职业生涯中发现和使用的技术，指导你培养良好的视觉设计眼光。
首先，你需要明白，这其中并没有什么秘诀或魔法，关键在于获得灵感、练习、坚持和耐心。在本文中，我将分享一些我过去作为设计师时（并且至今仍在坚持）用来提升UI设计技能的方法。希望对你有所帮助。
1. 简单的视觉改变就能产生巨大的影响
大多数时候，解决方案都藏在细节之中，正如视觉设计师Steve Schoger在他著名的项目“重构 UI”（一系列提升视觉设计技能的小技巧）中所展示的那样。
正如史蒂夫向我们证明的那样，对比、大小和间距等基本设计原则如果运用得当，将是强大的助力。因为有时你只需要：
减少边界
虽然边框能很好地区分两个元素，但它们会让界面看起来非常杂乱。使用阴影、增加元素之间的间距以及不同的背景颜色都能有效解决这个问题。
此外，阴影框可以很好地勾勒出元素的轮廓，起到边框的作用，而且效果更微妙，更不容易分散注意力。
跳出数据库的思维模式
除了简单的列表和表格之外，信息展示方式还有很多。尝试为常见的视觉元素寻找富有创意的解决方案。
专注于字体排印
有些用户界面几乎完全依赖于排版。因此，你应该花些时间调整字体粗细、大小、颜色和其他字体属性，以改善排版层次结构和可读性。除了边框和阴影之外，你还可以通过改变文本内容的显示方式来构建更好的界面，这其中有一些技巧。
你不应该在彩色背景上使用灰色文字。
灰色在白色背景上效果很好，但在彩色背景上则不太理想。在这种情况下，可以选择与背景色调相同的颜色，调整其饱和度和亮度——也可以直接降低其不透明度。
对齐并不需要始终完美无瑕。
每种效果都可以通过选择正确的技巧来模拟。我们可以通过结合轻微的偏移和阴影来增强凸起元素的效果。
这里还有更多建议。
2. 寻找参考资料和灵感
既然您已经知道界面中的小细节非常重要，那么现在是时候熟悉一些 UI/UX 设计模式并寻找创意了。
我相信我们总能从他人身上学到东西。因此，我通常会花很多时间分析一些用户界面模式，以了解UI组件中常用的不同设计方案。
对我而言，寻找灵感是设计过程中最令人兴奋的环节。我喜欢寻找创意解决方案，并思考如何才能创造出同样出色的界面。因此，我会努力找出设计师构建的每一个细节，以及他为什么选择使用这种方法而不是另一种方法。
这是训练我们欣赏优秀设计眼光的方法。
以下是一些可供参考的UI/UX设计模式网站：
我喜欢从中汲取 UI 设计灵感的网站：
请记住，我们不必每次解决特定的设计问题时都重新发明轮子。我们只需要找到好的参考资料，更快地找到可靠的解决方案。
3-练习并分享你的作品
熟能生巧，您同意吗？
有些人认为设计只靠天赋，但我认为设计是可以学习的。当然，有些人更擅长编程，有些人更擅长设计，但只要有耐心、投入和大量的练习，我们都能掌握这两项技能。
以下是一些可以帮助你提升UI设计技能的技巧：
通过模仿优秀的界面来学习
这并非抄袭，只是为了练习。
通过阅读和模仿其他代码，开发者可以学习并大幅提升技能。同样，设计师也需要参考其他设计师的界面设计，从中汲取灵感，学习新的技巧和方法。
不妨尝试复刻一些界面。这将为你提供一个巧妙的方式，让你走出舒适区，拓展视觉设计技能。在临摹你喜欢的界面设计时，你会注意到每一个细节。而这正是关键所在：关注那些细微之处；你还记得吗？
试着找出你使用某些颜色、按钮样式、留白、视觉层级、字体等的原因……注意何时间距比边框更合适，阴影是如何使用的，为什么有些文本的字间距为负值或行高不同。通过模仿其他设计，你可以学到很多东西，这非常棒。
运用所学知识并分享你的作品
既然你已经具备了注重细节的专业知识，能够训练自己对优秀设计的鉴赏力，并且经过了大量的练习，那么现在是时候改进你现有的项目或者尝试创造一些新的东西了。
如果你是开发者，你可以利用 CSS 的强大功能来制作惊艳的效果。如果你是设计师，你可以使用一些软件来创建出色的原型，例如 Adobe XD、Figma、Photoshop 等。
以下是一些有用的 CSS 相关链接，可供您参考和学习：
CSS特效教程：
Adobe XD 和 Figma 教程，助您提升软件技能：
Adobe XD
Figma
不要被技术所局限，要多方探索，找到运用所学知识的最佳方法，并将你的项目与他人分享。通过分享作品，你可以获得反馈，从而不断提升技能。
最近我发现了uxcel，一个学习 UI 的在线平台。来看看吧。✌
结论
正如我在文章开头提到的，关键在于寻找灵感、练习、坚持和耐心。尝试将寻找灵感融入生活。每天花些时间分析一些网站、一些特效，并探索一些用户界面设计决策。不断学习并应用所学知识。努力工作。
我相信几个月后，当你回顾自己的进步时，你会很高兴自己花时间学习设计。不妨寻找其他资源，尝试学习一些设计原则，也别忘了分享你的作品哦！😃
如果您觉得这篇文章对您有帮助，请告诉我，也欢迎在评论区分享您常用的其他技巧和资源。下次见！😁
文章来源：https://dev.to/dionarodrigues/tips-and-resources-on-how-to-improve-your-ui-design-skills-29i3