虽然优秀设计的一部分是创建易于理解的视觉效果,但弄清楚如何在简单和精致之间取得平衡是一项相当大的挑战——尤其对于非设计师而言。 多年来,我逐渐意识到与非设计师分享简单的平面设计规则可以帮助他们在创建演示文稿、简单模型,甚至偶尔制作卡片时感到更舒服。
看到这些技巧的强大之处,我决定将这些规则整理成 Twitter 帖子。现在,我借用 Sketch 舞台,将这个帖子变成一个更充实的指南,希望它比我可以塞进 280 个字符的内容更容易导航,并且为您提供更多背景信息。
让我们开始吧。
快速调整以提升任何设计
您是否曾经看过一个设计,想知道为什么如此基本的东西看起来如此出色?您可能甚至尝试自己复制它,但发现您的方法中缺少某些东西。 缺失的关键可能是以下之一
- 嵌套边框半径。 边框可能很棘手,因为它不仅仅是遵循对称规则。 想象一下,您有一个带有圆形边框的正方形,位于一个更大的圆形正方形内。 (我们将这个第一个正方形称为“嵌套正方形”,因为它位于另一个形状内)。 因此,当我们考虑嵌套正方形的边框时,本能可能是使边框半径等于较大正方形的边框半径。 但这实际上不会创建一个统一的边框。 诀窍是使内部半径小于外部半径。
- 匹配的粗细。 使用文本和字形(一个小单色图像)可能会欺骗眼睛,即使对于设计师也是如此。 将文本与字形配对时,请始终确保文本的粗细与图像的粗细相匹配。 这样,两个元素看起来就像是属于一起的。
- 堆叠阴影。 作为设计师,我们经常使用阴影来使我们的设计更具动态性。 阴影通过创建深度感来帮助为任何元素提供 3D 效果。 为了使它看起来逼真,我们必须遵循物理规则。 元素越远,它的 阴影就越小。 当然,您拥有的元素越多,这越具有挑战性——但投入时间来使您的阴影恰到好处,将真正改变您的整体设计。
想要在 Sketch 中使用阴影? 您可以在检查器的样式部分下找到您需要的所有工具。
如何掌握间距
我们都需要空间,您的设计也需要。 虽然适当的间距绝对是美学问题,但它同样也是语义问题。 元素之间的距离所传达的信息远比您想象的要多,如下所示。
- 嵌套间距。 重要的是要记住,设计最终以一种或另一种方式反映了现实生活。 在间距方面,我们经常将彼此靠近的事物视为一个组或集群。 同样的事情也会发生,具体取决于您在设计中放置元素的位置。 通过将元素彼此靠近来创建“视觉块”是一个很棒的工具,只要您有意识地使用它即可。
- 文本周围的间距。 这是可以快速提升您的设计的那些小而强大的修复之一。 在形状(如按钮)中布局文本时,请确保文本周围的间距在小写字母周围形成一个均匀的带。 如果您仔细考虑一下,使用大写字母或撇号作为对齐参考肯定会导致您的大部分文本未对齐。
- 字母间距。 对于新手来说,通常认为在文本方面,您只能编辑字体、大小和粗细。 但实际上,您可以玩转整个间距选项领域,以帮助使您的文本更具可读性。 一个值得遵循的好的经验法则是,文本越小,它需要的字母间距就越多。
成为对齐专家
在讨论间距时,我们已经涵盖了一些关键的对齐原则,所以现在是时候提高一个档次了。
- 对齐文本和图像。 当垂直居中文本和图片时,请使用小写字母的高度进行居中,而不是使用大写字母的高度。 如果您一直在关注,您就会知道这与我们用于文本周围间距的原则相同。 所以你有它,你的第一个设计黄金法则!
- 居中多边形。 在设计中,您经常会发现,适当的对齐方式更多地与我们的眼睛如何感知图像有关,而不是它在数学上实际居中的程度。 对于多边形,逻辑方法是居中其边界框(形状容器的边框)。 但是,为了使它看起来正确对齐,您必须想象一个通过多边形中每个点的圆。 然后,使用该圆来对齐您的多边形。
Sketch 带有许多方便的对齐工具,可以帮助您将组件放置在您需要的正确位置。
使用对比度
最后但并非最不重要的一点,让我们来谈谈对比度。 对比度的关键是有效地使用它来创建差异化。 这可以是颜色之间或文本之间的差异化。 以下是如何使用两者
- 颜色对比度。 我们经常选择颜色,因为语义(就像我们理解交通信号灯中的颜色一样)或者因为我们遵循品牌指南。 虽然这些都是确定要使用哪些颜色的好方法,但重要的是要仔细检查该选择是否会影响可读性。 为了使文本易于阅读,背景和文本之间需要有足够的对比度。 在彩色背景上使用文本时,请确保对比度大于 4.5:1。
- 文本粗细对比。对比重要的另一个例子是尝试建立文本之间的差异。 例如,您可能正在使用一种或两种字体,但发现您需要区分不同的标题或“视觉块”。 为此,请尝试使用粗细(粗体、细体、常规等)。 如果您的字体有多种粗细,请至少跳过一个,以产生足够的对比度。 例如:从细体到中等体,而不是从细体到常规体。
确定字体粗细后,您可以创建文本样式,以便在 Sketch 中轻松重复使用。
这就是全部内容! 希望这些技巧能帮助您在设计时感到更加轻松。 如果您希望我在技巧主题中介绍其他内容,您随时可以通过 Twitter 联系我。
Laurent Baumann 是 PopStage 的创始人兼首席执行官,PopStage 是一个用于举办互动研讨会、训练营、网络研讨会和培训课程的在线平台。 过去,他曾与 Sketch、Upthere、Apple、Sandisk、Western Digital 等公司合作,构建了数百万用户使用的产品。