21个UI设计技巧【UI设计干货】

　　在设计界面和UI组件时，很容易被所有要做的设计选择淹没。有时，UI 在你觉得恰到好处之前，设计并不完全有效，直到你一遍又一遍地调整它。 就像一幅画是由成千上万个简单的笔触组成的，一幅好画 UI 设计由无数小决定组成，为用户带来轻松愉快的体验。让我们通过21项技能来提高我们 UI 设计技能!21个UI设计技巧

　　1.淡化背景

　　当你有一个真正想吸引用户注意的模式窗口时，请淡出背景。这将真正使您的窗口在用户中脱颖而出，并促使他们专注于操作。

看下面例子中的窗口和较暗的背景;比较确实让我们意识到菜单选项的重要性。

　　移动模态聚焦站点模板的示例

　　2. 使用视觉层次来吸引焦点

大小、对比度和位置是建立视觉层次结构所需的一切。以下电子邮件内容最重要的方面是免费资源按钮;它的主导地位意味着你的眼睛在文本内容或“阅读更多”按钮之前就被它吸引住了。

　　Titan - 响应电子邮件 + Themebuilder Access

　　3. 使用颜色来发挥你的优势

　　充分利用颜色!如果有一些对用户非常重要的东西，不要害怕使用真正引人注目的颜色。

尝试在设计的其他部分使用不常用的颜色，并尝试饱和颜色。你也可能对视觉吸引力感到惊讶!

　　Titan - 响应式电子邮件 + Themebuilder Access

　　4. 定制那些社交按钮!

　　社交媒体按钮对许多设计项目至关重要。虽然一开始似乎是一项简单的任务，但可能很难决定它们去哪里，如何展示它们。其中一件事经常发生，它们会破坏你 UI 设计的统一性。它们都有不同的颜色，最终会让人觉得它们在互相竞争，并与你竞争 UI 视觉空间的竞争。

定义自己的社交按钮来匹配自己的社交按钮值得花一些额外的时间 UI 设计。这将为您的项目提供大量的视觉统一!

　　手绘社交媒体图标

　　5. 将形状添加到边框边缘

在背景框架的边缘添加一些视觉风格，以帮助打破网格。坚持网格很好，但有时你想摆脱块的外观。添加与下一部分相关的图像确实有助于使您的页面看起来更有活力。您甚至可以使用箭头形状向上或向下引导用户的注意力。试着用这个概念提出你自己的想法!

　　6. 自定义项目符号列表

项目符号列表是一种有用的工具，可以帮助划分内容，使用户更容易阅读关键点。一个聪明的技巧是，您可以定制项目符号列表以使用定制图像。这是一个很好的方法来推广你的品牌，甚至通过图像提供一些信息。试着用独特的颜色或图标把内容信息带回家!

　　介绍 UI 套件

　　7.将类别组织成块

　　在许多情况下，项目符号列表包含大量信息，或者当列表的顺序应该被视为平等时，您可能会担心强调最佳选择。在这些情况下，尝试将此内容分为并排块。

对于块，所有内容都显示出相同的价值。这样做的另一个好处是，您可以定制框架的设计，并显示比简单列表更多的视觉信息。

　　介绍 UI 套件

　　8. 使用适合色盲的颜色

　　许多患有色盲或其他类型视觉障碍的用户可能很难区分不同的颜色。检查以确保您的高对比度颜色对每个人都有明显的不同，这将是一个好主意。

Photoshop 提示:其实有一个很酷的技巧可以用来 Photoshop 来检查这个!查看>校样设置， 接着你可以选择不同的色盲过滤器来检查对比色。

　　·

　　无障碍

　　9. 把你的话分解掉

　　很容易陷入使用大文本的陷阱。有时这可能是一个向你提供信息的设计师。然而，开始分解你的信息通常是一个好主意，除非这是一篇你想让用户坐下来喝杯咖啡的文章。用户正在寻找特定的东西，所以让它们尽可能容易。

确保标题是独特的，并使用项目符号来驱动主页的关键信息。使用颜色和粗体文本来强调重要的部分。最重要的是确保你的书面内容是迷人和有趣的。

　　Sakola - 高中网站设计用户界面

　　10.使用块而不是边框

　　用边框和线分解内容是区分不同部分的好方法。然而，它们也会给你的设计增加混乱，尽管它们可能会对你的设计产生整体的负面影响。

为了解决这个问题，你可以用不同的背景颜色划分区域来创建框架。这自然会在不同的内容区域之间创建一条线，使你的设计不那么混乱和幽闭恐惧症。你的内容越少，你就越能脱颖而出!

　　Sakola - 高中网站设计用户界面

　　11. 明智地间隔你的文字

　　就像使用块可以帮助创建没有边界的网格一样，经过仔细考虑的间距也可以产生相同的效果。当文本段落之间的间隔恰到好处时，你通常甚至不需要单独的背景颜色。

在单个内容之间创建一个大空间，使文本更接近相应的标题。这样，你就可以很好地坚持网格的最低设计风格。

　　Sakola - 高中网站设计用户界面

　　12. 与圆角一致

　　使 UI 元素的角变圆是一种常用的技术，使它们具有更柔软的外观。这样做的好处是它不会破坏网格。尽量确保无论你使用什么尺寸，你都可以一直使用所有的设计元素。

你甚至可以进一步把其他内容放在同一尺寸，比如照片或图标。这种统一真的可以把设计结合起来!

　　银行金融 UI 套件

　　13. 按重要性改变按钮设计

　　有时根据您的项目和用户目标，按钮有不同的用途。在这种情况下，你可以大胆地使用颜色来强调更重要的选择，而在重要性较低的按钮上使用更少的颜色。

　　例如，登录屏幕需要同时容纳新用户和现有用户，但您可能希望根据您的目标强调这些选项之一。

试着创建两个相同尺寸的按钮，但给更重要的按钮更多的对比度。在这种情况下，由于大多数用户将登录并只创建一个帐户，因此“创建帐户”受到抑制。

　　14. 单边线/p>

虽然在文本超链接上看到悬挂效果使用下划线是很常见的，但你也可以在块上使用它。滚动时尽量在整个块上添加粗下划线，以便按钮能够真正点击。您还可以添加这样的线条来为内容框添加一些视觉风格。

　　15.让你的按钮脱颖而出

大量负空间的平面设计正变得非常流行。虽然保持简单很好，但用户可能无法理解导航按钮不同于传统文本。使用间距和独特的设计元素，使您的按钮从文本中脱颖而出。

　　菜单导航 UI 套件网站 Adobe XD 模板

　　16. 从游戏中汲取灵感

　　在游戏开发领域，有一个术语叫juice，意思是让你的游戏设计变得有趣。这通常包括弹性动画，从按下按钮开始。

尝试为您的按钮或屏幕图标添加一些新的按钮 CSS 动画，或为某些功能创建独特的视觉 UI。当然，Web 而且应用程序开发不是游戏，你不想浪费用户的时间，但是点击增加的流行或者天赋真的可以给你的项目增添一些乐趣。

　　17. 在按钮上添加图标

　　虽然一小段文本就足够了，但在某些情况下，图标可能真的可以把按钮的功能带回家!将图标放置在文本旁边，类似于使用项目符号点。

虽然我不会使用每个按钮，但它可以帮助用户快速理解按钮的功能。有了这个想法，可能性真的是无限的。例如，您可以通过保存按钮或购买按钮上的购物袋获得云图标。这样做的另一个好处是，它可以帮助您的设计打破一些语言障碍。

　　18. 使用图标来节省宝贵的空间

　　随着移动应用程序的标准化，有许多不同的图标。这是一个很好的机会，为我们节省空间，使我们的设计时尚。

　　是否有设置页面?创建一个易于访问的齿轮图标，而不是将其作为主要导航项。

　　搜索栏没有足够的空间放置?尽量使用放大镜图标，以便用户在需要时访问该栏。

虽然这不能替换导航中的每个链接，但您可以区分您的内容和导航内容的工具。

　　19. 利用 CSS 渐变

当你真的需要注意按钮时，请尝试放置环境渐变。虽然我建议不要在导航中过度使用渐变，但这种额外的视觉天赋确实可以为视觉组件带来优势。

　　比特钱包

　　20. 内容在边缘重叠

处理内容区域边缘的另一个好主意是重叠内容。这确实强调了内容本身，并增加了一些有趣的深度，这在平面颜色中很难实现。它还可以很好地弥合一个部分和下一个部分之间的差距!

　　比特钱包

　　21. 使用文本之间的间距

　　有时，当文本单独存在时，它会感到有点孤独。你所能做的就是调整字母之间的距离，让它脱颖而出!试着使用标题上所有的大写字母来执行这个操作，这样你的标题就有一个复杂的外观。

它还可以对单独的文本产生奇迹，周围没有太多其他内容。这是一个很好的方法，提供一些关键点，而不增加字体大小。

　　比特钱包

　　用这些技能开始学习 UI 设计

　　你有它!帮助你学习21个技能 UI 设计。在你的下一个 UI 在设计项目中尝试这里列出的一些技巧(并记住使用任何形式) UI 设计时注意细节)。找出对你有用的想法并做笔记。

　　此外，请记住，这些提示并不是绝对的规则。你从事的每个项目都有自己的需求和目标。有些想法适用于你的设计，有些则不适用。创建 UI 请始终牢记用户的核心目标!