在本文中将分享一些现成的提示和技巧,以帮助您改进设计构图。
每个设计师都可以做一些小事来大大增强他们的设计。例如,引入视觉层次或添加深度和运动的错觉。如果您还没有使用这些技巧,现在可以将它们引入您的工作中。
更改比例以传达重要性并创建层次结构
在 UI 设计中,尺寸并不像规模那么重要。比例是对对象大小与其他对象大小以及它们所在空间大小的关系的理解。
想象一下,你想给你的外星朋友发送一张西瓜的照片。你怎么能表达水果有多大?在它旁边放一些其他常见的水果,如橙子和苹果。看着它们并排,你的外星伙伴很容易理解西瓜很大。
规模 在元素之间 创建视觉层次结构并引导用户关注。更大的元素尺寸表示更高的重要性。您一定已经注意到,与画廊中的其他图像相比,流行图像有时会更大。在这个例子中,中心照片的较大尺寸不仅强调了它的价值,而且还创造了节奏。
玩转构图,看看它如何改变情绪、转变视角或缓解紧张情绪。
使用负空间创建引人入胜且令人难忘的徽标
我们谈了很多关于 在网页设计中使用负空间。负空间非常有用的另一个领域是创建 引人入胜且令人难忘的品牌徽标。
以下是在标志设计中使用负空间的 5 个优点:
1.它突出了你的创造力。负空间标志设计需要更多的努力来创造,用户喜欢聪明有趣的设计。
2.它使您的徽标保持简单。您可以使用页面上已有的内容,而不是添加更多元素和过度拥挤设计。
3.它使您的设计更令人难忘。做得好的负空间标志让人们思考并牢记在心。
4.它吸引消费者。在徽标中使用负空间可以让您创建“隐藏信息”,这是一种吸引消费者并将他们推向您的品牌的简单方法。
5.它使您的徽标脱颖而出。使用负空间可以通过在标准设计上给它一个独特的转折来帮助你的标志与众不同。
许多著名的标志设计,如 FedEx、NBC 或 Toblerone,都是有效利用负空间的结果。
突出显示您要优先考虑的元素
突出显示是设计师可以用来强调重要元素的另一个出色工具。一个常见的例子是在订阅页面上突出显示最佳价值计划。
在该示例中,蓝色突出显示使 Optimal 计划成为焦点,它吸引了用户的眼球。这也创造了节奏,使设计看起来充满活力和活力。
使用视觉层次来建立重要性顺序
视觉层次 是排列元素以显示其 重要性顺序的原则。清晰的视觉层次有助于设计师引导用户进行所需的操作。它还可以帮助用户理解信息。相反,缺乏层次结构或对每个元素的强调会使设计混乱和混乱。
您可以使用以下方法建立视觉层次结构:
• 尺寸,
• 颜色,
• 对比,
• 对齐,
• 重复,
• 接近,
• 负空间,
• 质感和风格。
在示例中,标题、徽标和 CTA 按钮使用大小、负空间和样式进行强调。
添加没有动画的动作
动画是增强交互性并使您的设计更具影响力、活力和活力的绝佳工具。然而,并不是每个人都有时间和预算来为他们的设计制作动画。
如果我们告诉你,你可以 在没有动画的情况下在设计中创建动作怎么办?有可能欺骗观众的眼睛,让他们相信他们看到了运动,而实际上他们并没有。
在设计元素后面添加运动线是暗示运动的最常见的视觉提示之一。同时,3D 形状增加了深度,使 UI 看起来更加动态。向静态设计添加运动的其他方法包括:
• 创建速度线,
• 描绘物质的运动(例如,鸟类降落在水中的涟漪),
• 各种透明胶片的重叠层,
• 采用“定格”效果(例如悬浮在半空中的弹跳球),
• 添加运动模糊,
• 使用视错觉。
在 2D 设计中模拟深度
为您的设计增加深度会使它们看起来更逼真、更有活力,甚至更老派。3D 设计可能令人生畏,但好消息是您可以在 2D 设计中模拟深度。
在示例中,阴影的使用使按钮看起来高高在上,而标题和副标题看起来嵌入到屏幕中。
在 2D 设计中创建深度的其他方法包括:
• 重叠元素,
• 添加透明度(更远的物体看起来更不透明),
• 操纵大小和比例,
• 玩线条粗细变化(线条的粗细越粗,物体看起来越近),
• 并调整视角。
添加不对称以使您的设计在视觉上有趣
正如混沌理论所说,混沌只是秩序的一种形式。在网页和应用程序设计中,对称性具有视觉上令人愉悦的好处,但可能难以实现,并且并不适用于所有情况。
对称适用于传统设计和那些想要描绘信任光环的设计。可以说对称设计感觉平衡且没有威胁性。
不对称布局不必是不平衡的。请注意右侧庞大的标题如何平衡左侧的流体元素。不对称设计看起来更加现代和动感。它们还允许将用户的注意力吸引到您希望它去的地方——例如,CTA。
力求极简主义
在设计中引入太多细节使其看起来过于拥挤且难以导航。它使用户不堪重负并增加了认知负担。还记得 Waldo 在哪里吗?找到 CTA 不应该像找到 Waldo 那样困难。
在过去的 5 年中,设计趋势已经朝着“少就是多”的理念发展。这意味着用户体验设计师的工作是使产品更精简并增强其功能——而不是用功能将其塞满。
如何实现简约的外观?以下是一些提示:
• 专注于页面的主要元素。
• 应用视觉层次(将最重要的内容放在顶部,不太重要的内容放在底部)。
• 去掉内容中过多的文字。
• 使用简单方便的导航系统。
• 仅包含功能动画。
始终保持一致性
UI 设计中的一致性是关于确保 UI 元素的外观和行为方式相同。当用户开始浏览您的网站或应用程序时,他们开始注意到 UI 是如何工作的。根据他们的经验,他们假设其他页面的工作方式类似。证明这些假设是正确的会产生一种控制感、熟悉感和可靠性。
下面列出了 UI 设计一致性带来的一些好处:
1、它增加了可用性。如果您的网站或应用程序的行为可预测,用户就会知道会发生什么。
2、它消除了混乱。视觉一致性有助于创建逻辑结构并确定内容的优先级。
3、它会引起情绪反应。确信他们知道如何驾驭您的产品会引起积极的情绪反应。反过来,这会带来愉快的用户体验。
保持一致性的最佳方法之一是创建一个设计系统,该系统引入一组共享的原则和规则来构建组件。
请记住,不同平台的用户有不同的期望。如果您正在为 iOS 应用程序设计,请查看iOS 人机界面指南并努力遵守它们。如果您正在为 Android 进行设计,请查看Material Design Guidelines。
本文内容为转载
网友评论