火星网校
给初级UI设计师的7个UI设计技巧
发布时间：2024-02-28 10:12:01 浏览量：169次
⬆️来自freepik.com的插图
文章目录
对比
留白
重复
重叠
悬念
一致性
对齐
如果你正在使用以上7个设计技巧，它将使你的设计与众不同。要像一位好厨师一样熟练掌握它们，你应该知道如何使用食材使菜肴变得可口。
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️⃣对齐
对齐可以帮助你设计的布局。网格在更好地对齐元素方面起着至关重要的作用。对齐可提高可读性。
⬆️在布局对齐中使用网格。
即使在报纸上，他们也使用网格来对齐大量内容。
热门课程推荐
热门资讯
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
-
10. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
