火星网校
非科班如何做好UI设计的7大规则分享
发布时间：2024-07-04 13:56:13 浏览量：109次
开篇
今天我们继续探讨《非科班如何做好UI设计的7大规则》的第二部分，前文是《非科班如何做好UI设计的7大规则（Part 1）》。
文章原作者是来自西雅图的独立UI/UX设计师Erik D. Kennedy，他在用户体验和视觉设计领域拥有丰富经验。
他同时经营着一个设计网站"Learn UI Design"，在那里分享自己的学习心得和发布视频教程。感兴趣的朋友可以去关注一下。
如需修改文字、添加图片等，还请多多包涵，我们将努力改进。
本文是系列文章的第二部分，建议先阅读第一部分内容，即《非科班如何做好UI设计的7大规则（Part 1）》。
本文主要讨论的是设计简洁干净UI的规则：
- 光来自天空（Part 1）；
- 黑与白第一（Part 1）；
- 加倍你的留白（Part 1）；
- 了解在图像上叠加文本的方法；
- 使文本弹出和不弹出；
- 只使用好的字体；
- 像艺术家一样窃取；
规则4：了解在图像上叠加文本的方法
要成为优秀设计师，必须学会如何将文本与图像结合，吸引人的注意。
这是每个优秀设计师必须掌握的技能，初级设计师经常面临的挑战之一！
方法1：直接在图像上叠加文本
是的，这也算一种方法？
不得不说，这是最基本也是最有效的方法之一，也是我之所以把它放在首位的原因。
Otter Surfboards. 简约又时尚，但有些难以阅读。
在使用此方法时需注意：
- 确保图像和文本有明显对比度，一般情况下，图像应为暗色调，文字则应为白色；
- 确保文本在各种屏幕尺寸下都能清晰可读；
Aquatilis网站 – 值得一探究竟。
我在许多项目中都尝试过这种方法添加文字，它可以为观众呈现炫酷的画面，但在实际使用中，也需注意控制使用的剂量。
方法2：覆盖整个图像
最简单的放置文本在图像上的方法就是直接覆盖整个图像。如果原始图像色彩不够深，可以使用半透明的黑色覆盖图像。
Upstart网站采用35%不透明黑色滤镜。
如果您看到原始图像的色调，会发现原始图像亮度过高，对比度太强，使得文字难以辨认。但覆盖一个黑色半透明图层，问题就解决了。
这种方法也适用于缩略图或小图像。
来自慈善机构网站的缩略图：water site
同时，不妨尝试在照片的非聚焦区域模糊处理，这对图像和版式的融合要求更高。
Teehan + Lax
确保文字始终位于模糊图层之上，这样就能清晰阅读文字部分。
方法5：底图褪色
巧妙地将底层图像某部分淡化为深色，并在其上放置白色文字。许多网站都采用这种巧妙方法。
对于上述图像，您可能以为只是直接在图像上放置白色文字，实际上不然，仔细观察，您会发现实际是一个从0%不透明到20%不透明的渐变矩形框。
这种操作非常微妙，能确保文字的清晰可读而不影响整体美观。
规则5：使文本弹出和不弹出
文本的突出和不突出指的是文本的视觉吸引力，即如何通过对比来让想要突出的部分更加显眼，其他部分降低视觉层级。
文本的差异通常体现在尺寸、颜色、字重、字间距等方面。
在图片页脚部分，文字体积小、对比度低、字体粗细更细，使得其显得不那么突出。
Blu Homes网站设计无可挑剔，虽然有些标题很棒，但强调的字体是小写的。如果改用大写字体，则视觉效果可能过于强烈。
规则6：只使用好的字体
在设计过程中，字体选择能够直接影响整体效果，我们的策略是找到好的字体，然后只使用它们。
以下是一些不错的免费字体，供您选择。
对于具有独特个性的网站设计，可以尝试使用一些不同寻常的字体，但对于大多数UI设计来说，需要简洁明了的字体。
Ubuntu（上图）。 字重较多，适合某些应用。
OpenSans（上图）。 易读、流行的字体。 适合正文使用。
Bebas Neue（上图）。 全部大写的字体设计。
规则7：像艺术家一样窃取
当您首次尝试设计按钮、表单、图标等UI元素时，可能会意识到如何使其看起来更好的方法不是很清楚。
但幸运的是，您并未发明任何新的UI元素。这意味着您总能看到其他人如何设计，并从中选取最佳方案。
如何选取呢？以下是我在设计过程中发现的最有用的资源：
1. Dribbble
这是一个邀请制的“设计师展示与分享”网站，您可以在这里找到几乎所有事物的优秀案例。
热门课程推荐
热门资讯
-
想要了解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. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
