在结构设计介面和UI模块时，很难被所有要作出的结构设计优先选择所冲走。有时候，UI 结构设计在您两遍又两遍地调整它直至觉得恰如其分以后并不全然有效率。 就像两幅画是由数以千计个单纯的笔法共同组成的一样，两个好的 UI 结构设计是由许许多多小下定决心共同组成的，这些下定决心为采用者增添Pashchimi的新体验。让他们通过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. 采用粗的单边线
虽然在文档超链接上看到悬停效果采用下划线是很常见的，但您也可以在块上采用它。试著在滚动时，在整个块上添加粗下划线，以或者说让按键可点击。您还可以添加这样的线条来为文档框添加一些听觉风格。
15.让你的按键十强
具有大量负空间的平面结构设计正变得十分流行。虽然保持单纯是很好的，但采用者可能无法理解导航按键与常规文档不同。利用间距和独特的结构设计元素让您的按键从正文中十强。
工具栏导航 UI 套件网站 Adobe XD 模版
16. 从游戏中汲取灵感
在游戏开发领域，有两个术语叫做juice，意思是让你的游戏结构设计变得有趣。这通常包括从按下按键开始的有弹性的动画。
试著为您的按键或加载屏幕图标添加一些新的 CSS 动画，或者为某些功能创建独特的听觉 UI。当然，Web 和应用程序开发不是游戏，您不想浪费采用者的时间，但是通过点击增加的流行或天赋的确可以为您的项目增添一些乐趣。
17. 给你的按键添加图标
虽然一小段文字就足够了，但在某些情况下，图标可能真的可以将按键的功能带回家!以与采用项目符号点类似的方式将图标放在文档旁边。
虽然我不会对每个按键都采用它，但它可以帮助采用者快速了解按键的作用。有了这样的想法，可能性真的是无限的，例如，您可以通过保存按键或购买按键上的购物袋来获得云图标。这样做的另两个好处是它可以帮助您的结构设计打破一些语言障碍。
18. 采用图标节省宝贵的空间
随着终端应用程序变得标准化，因此有许多不同的图标。这为他们提供了两个节省空间并使他们的结构设计时尚的绝佳机会。
有设置页面吗?与其将其作为主要导航项，不如创建两个易于访问的齿轮图标。
没有足够的空间放置搜索栏?试著采用放大镜图标，以便在采用者需要时可以访问该栏。
虽然这不能替换导航中的每个链接，但您可以区分您的文档和用于导航该文档的工具。
19. 利用 CSS 渐变
当您真的绝对需要引发按键的特别注意时，请试著放置环境渐变。虽然我建议千万别在导航中过度采用渐变，但这种额外的听觉天赋的确可以为听觉模块增添竞争优势。
20. 在边缘重叠文档
处理文档区域边缘时的另两个好主意是重叠文档。这的确强调了文档本身，并增加了一些有趣的深度，这在平面配色上很难实现。它也可以很好地弥合两个部分与下两个部分之间的差距!
21. 在文档之间采用间距
有时候，文档单独存在时会深感有些孤独。您可以做的事情是调整字母的间距以使其脱颖而出!试著在标题上采用所有大写字母来执行此操作方式，以使您的标题具有复杂的外观。
它还可以对单独出现的文档产生奇迹，而周围没有太多其他文档。这是在不增大字体大小不一的情况下提供一些重点的好方法。
采用这些基本功开始学习 UI 结构设计
你有它!21个基本功来帮助你学习 UI 结构设计。在您的下两个 UI 结构设计项目中试著这里列出的一些基本功(并记住在采用任何形式的 UI 结构设计时特别注意细节)。寻找对你有用的想法并做笔记。
另外，请记住，这些提示不是绝对的规则。您从事的每个项目都有自己的需求和目标。有些想法会适用于您的结构设计，有些则不会。在创建 UI 结构设计时，请始终牢记采用者的核心目标!
↑想看最新课程大纲，点此文字链即可跳到传智UI结构设计学科站↑
