新手UI设计师的UI设计技巧【UI干货】

⬆️来自freepik.com的插图

文章目录

对比

留白

重复

重叠

悬念

一致性

对齐

如果你正在使用以上7个UI设计技巧，它将使你的设计与众不同。要像一位好厨师一样熟练掌握它们，你应该知道如何使用食材使菜肴变得可口。

1️⃣对比

它有助于使元素在人群中脱颖而出。它也遵循格式塔的“相似性法则”原则。对比度帮助我们在设计中创建视觉层次。可以通过以下方式实现对比：

-颜色对比

以Netflix的“登录”页面为例。

你可以在下面看到他们如何使用对比色向用户显示标题（1）和CTA按钮（2）。

以下是热图的快照，用户如何与Netflix登录页面进行交互。用户看到的第一件事是登录标题，然后是CTA按钮和“立即注册”链接。

HeatMap是使用VisualEyes插件生成的

-尺寸对比

以 LinkedIn的个人资料页面为例。会看到他们如何使用字体大小（以px为单位更改）和粗细（从粗体，常规和斜体更改）来创建视觉层次结构。

-重量对比

重量的最佳示例是主按钮和辅助按钮之间的区别。根据谷歌材料设计指南：

主按钮或包含按钮（重点突出）由于

包含颜色填充和阴影，因此包含按钮的重点更加突出。

次要或轮廓按钮（中等强调）

由于笔划，轮廓按钮比文本按钮用于强调更多。

第三或文本按钮（低强调）

文本按钮通常用于不太重要的操作。

2️⃣留白

充足的留白空间可帮助你的设计呼吸并使其更生动。艺术家在白色空间中发挥很大的作用，以使其艺术品脱颖而出。你可以在下图中的Gal Shir中看到。他使用了对比（浅紫色的深紫色）和白色的空间来创作这幅精美的艺术品。

Gal Shir的插图

留白会增加元素的可查找性。提高网站的转换率。以Amazon的登录页面为例。他们的主要重点是让用户登录时不会分心。他们把留白（-ive space）发挥到了极致。

亚马逊，谷歌和ubereats等受欢迎的网站都使用留白，以提高其清晰度和转换率。

3️⃣重复

顾名思义，重复就是重复单个元素多次。重复在网络和应用程序设计中可能很有用。通过重复元素，我们作为设计师不仅可以按照用户的期望进行交付，而且还可以通过减少认知负担来改善他们的体验。

重复可以是颜色，样式，布局等。

当你重复元素时，这些重复之间的间隔可以产生节奏感和移动感。

重复颜色和线条以创建如此漂亮的logo，作者：肯尼·米斯纳（Kenny Miesner）

以dribbble.com为例，所有设计都以相同的四列顺序放置在相同大小的盒子中。

Dribbble.com登录用户的主页

4️⃣重叠

重叠的最佳示例是视差动画。使用形状，颜色，照片和版式的组合可以最成功地实现这一目标。还使用模糊来创建深度和与页面的分离。

以下是一些使用重叠手法的设计。

流行的杂志封面在封面上经常使用这种技术。例如Vogue，Cosmopolitan，Bazaar等。

著名的在线无代码生成器工具Webflow的登录页面使用了重叠的设计手法。你可以在右侧看到效果，将Webflow功能的快照一个接一个地添加并从监视器中出来。

热门网站（从L到R）在其网站上使用重叠技术进行phonepe.com，webflow.com和stripe.com。

5️⃣悬念

悬念会使用户对你的设计感到好奇。他们会想为什么会这样。要想与其他网站不（视觉上）同。可以通过以下方法实现：

打破平衡

极端裁剪放大

重叠

有角度的元素

6️⃣一致性

一致性确实降低了用户的认知负担，但同时又扼杀了创新。精明的设计师非常清楚如何使用一致和不一致的设计元素。

注意：你可以通过重复颜色，字体，类似类型的图像，布局和形状来保持一致性。

一致性可从这几点去表现：

色彩

字体

布局

Dribbble的设计展示页面在整个页面上具有一致的布局。

图像（图标）

在stripe.com中，所有图标图片在整个网站上都是一致的。

7️⃣对齐

对齐可以帮助你设计的布局。网格在更好地对齐元素方面起着至关重要的作用。对齐可提高可读性。

⬆️在布局对齐中使用网格。

即使在报纸上，他们也使用网格来对齐大量内容。