Date 2026-01-04 22:34:00
Hi，我是彩云。每个人都是作为新手设计的。没有人天生审美好，必须像其他事情一样训练。每天看 Dribbble 上面的设计作品可能很有帮助，但很多时候你可能只是欣赏设计，却不明白为什么。
没有想法，只使用材料，不知道该设计什么，所有这些都可能是你进步的阻力，给你带来挫折。在今天的文章中，我将教你 10 一种非常简单的设计技巧，这些技巧不需要任何特殊的技巧，只要使用，就能大大提高你作品的设计感。
当然，这些不是公式定理，而是大多数情况下的有效技能。
没有想法？没有好的图片？然后你只需要使用通用的黑色和白色，你就可以很快得到一个“抽象设计”，构图正确。在工作中使用黑白将帮助你理解平衡、空白以及如何使用文本和几何图形。
让我们快速看一个例子，黑白的使用简单有效地展示作品，看起来非常先进。
我喜欢用我自己发明的“东西”来测试我的设计，我称之为“平衡方案”。这是一种黑白内容块方法，我用简单的几何图形代替内容。
我的方法是让黑色块覆盖元素，然后计算左右黑色区域，大致相同，被视为平衡。如果将这一原理应用到界面中，则会得到结果：
用黑色矩形代替主要内容，灰色是次要内容。显然，你必须用眼睛观察，但我们也可以直接计算。左侧黑色矩形面积之和为(236x138)+(934x132)+(674x44)+(313x69) = 右侧的大矩形面积为207109px(446x446) = 198916px。它们之间的差别很小，只有误差。 3.9558%
我现在不需要在设计之前计算它。经过多年的实践，这种意识已经成为一件自然的事情，因为你的眼睛会感到不平衡。
（彩云注：关于视觉平衡，这里实际上是关于视觉区域应该大致相同，眼睛会感觉到平衡。就在最后一篇文章中，“为什么你的设计总是感到不舒服？”很可能是视觉平衡做得不好”分享了更全面的图像平衡知识，我们必须阅读它。）
在前面的例子中，我用灰色的背景来展示设计作品，但实际上我可以尝试不同的元素，这有助于增加画面空间感和背景效果。
但是需要注意的是，在一个真实的网站上，页面周围可能没有那么多多余的空间，所以这只是一种作品展示技巧。
咖啡豆在上面的作品展示中给人一种深度和品质的感觉。
不要浪费时间整天测试尺寸。我建议段落的文本尺寸大约是。 14-18pt，副标题为14-18pt 24-36pt，标题可以用更大的字号(我个人习惯用 96-144pt）。Figma 默认尺寸非常适合排版。
上面的尺寸看起来太小，这是正常的，因为你在手机上看到的图片在电脑上看全屏是正常的。
注：有些字体比其他字体大或小得多。你应该使用它们 Roboto 如果字体大小与此类标准字体相匹配 14-18pt 的 Roboto 差不多，那它就是完美的正文字体。
段落 18，导航 24，标题 96
(彩云注:我建议刚入行的朋友，比如不知道网页规范和移动终端规范。学习规范的快速有效的方法是截图大厂的应用、网页和 APP 都可以。然后，直接测量截图。记住人们在制作界面时使用了多少字体、颜色、间距、字体大小等。记住这些参数，至少不容易出错。之后，我在自己的项目中定制了自己的规范。我以前写过关于如何制定设计规范的文章。如果你想知道这些知识，你必须去看看“如果你想这样理解原来的设计规范，你应该早点知道！”）
如果你有一些透明的图片，你可以用它们来设计一些 3D 图层。如果没有，可以用网页版。 AI 自动抠图神器！
今天的在线去背工具大多会整合 AI 人工智能技术可以通过机器学习构建一个模型，可以准确识别前景和背景。使用机器自动化去除背景的好处是快速、准确，无需额外编辑，即使没有专业的绘图软件，也可以在浏览器中进行。remove.bg 这是最早出现和最强大的在线背诵服务选择。后来，也有 FocoClip
阅读文章 >作为 CSS 中的 Z-index，你可以把透明图片放在其他项目的后面或前面，给人一种三维错觉。这对增强设计感非常有效。
让我们来看看我使用这种技术的简单设计。
鸟嘴从绿色背景到黄色背景，增强了整体视觉冲击力。
明亮的颜色很好，但如果用得不好，往往会导致激进的设计和糟糕的图片。此外，浅色设计（性冷设计）现在非常流行，所以让我们开始尝试颜色选择器的新区域。
一些更好的颜色可以在这个红框范围内快速选择
这两种颜色都没有问题，这是一个审美问题，但如果你想表达一些更先进的设计感觉，试试浅色。
在我看来，大的留白比太少的留白要好。乱七八糟的设计很差， 通过多种方式可以获得呼吸感：
让背景大面积保持可见的使用间距，避免使用文字墙效果不会引起太多关注的图片来简化文本，保留朗朗上口的短语
更大的留白(上图中指的是黑色区域)会显得更高级
通常，当我们思考设计时，我们会想到一个干净、流畅、清晰的概念。但是太干净的画面会让人觉得不真实，缺乏质感。
在设计中，噪音是一个很好的朋友，尤其是当你想给你的网站一个优雅或艺术的外观时。此外，应用微妙的噪音，使图片具有电影级的外观，这种处理方法非常适合视频和动态网站。
你可以使用 Photoshop 创建白色背景 2-4K 大小的杂色-高斯分布的纹理，然后放在页面的顶部。
整个网页增加了一些噪音，使整个图片具有更强的纹理。（这里的噪声效果更微妙，小图片可能看不清楚，点击大图片可以看到噪声效果）
有许多不同的字族和风格，但总的来说，我把它们分为三类：
衬线字体无衬线字体正文字体常用的衬线字体，如 Abril Fatface, Playfair Display, Volux, Chalga 等。
包括无衬线字体 Metropolis、ITC Avant Garde、Redwing、Takota、Gotham...
这可能是最难使用的技能，但如果使用正确，就会大放异彩。
几何图形的使用有助于加强概念和布局的顺序，甚至不需要图形。很难找到合适的几何形状，我仍然不能很好地掌握它。
易于使用的技能是将文案中的字母、数字和标题作为几何形状：使它们变得巨大而聪明，或使用一些特殊的字母作为形状(A 非常有效)。(这个技巧非常实用。彩云经常在一些视觉内容较少的页面上使用大几何图形，如大写字母作为底部背景，颜色较浅，视觉上看起来更丰富。)
Hi，我是彩云。
阅读文章 >欢迎关注作者微信微信官方账号:「彩云译设计」
