视觉设计师跟平面设计
重点 (Top highlight)
When I was studying visual communications design in college, I was fascinated by how much power designers have in making people think, feel, and act a certain way.
当我在大学学习视觉传达设计时，我着迷于设计师让人们以某种方式思考，感受和行动的力量。
After a decade helping scale products to millions in users and revenue as a product & UX designer, I still use many of the basic lessons I learned in my first years — examining shapes, layouts, and thinking about how form affects the people using my products.
在作为产品和UX设计师帮助产品扩展到数百万用户和创收十年后，我仍然使用在我头几年学到的许多基本课程-检查形状，布局，并思考形式如何影响使用我的产品的人们。
We’ve all heard of the visual design elements like shape, line, etc., and we’ve had the principles like contrast, emphasis, rhythm, etc. beaten into our heads. I’ll share a few of the subtler, not as oft-mentioned principles that I learned training as a graphic designer — but I still use to this day. Call them advanced, call them lesser-known, but I hope that by sharing them we’ll level up the design community as a whole!
我们都听说过形状，线条等视觉设计元素，并且已经将诸如对比度，强调，节奏等原理付诸实践。 我将分享一些微妙的知识，而不是像我作为平面设计师所学的训练那样经常提到的原则，但直到今天我仍然会使用。 称它们为高级，称其为鲜为人知，但我希望通过共享它们，可以提升整个设计社区的水平！
原则 (The Principles)
1.重力 (1. Gravity)
Gravity applies to objects and shapes, even in visual communication. It may sound strange — it’s not like gravity is a real force pulling 2-d objects downwards as it does in real life.
重力适用于对象和形状，即使在视觉传达中也是如此。 听起来可能很奇怪-重力并不像现实生活中那样是一种真正的力量将二维物体向下拉。
But gravity is so engrained into our perception of reality that it translates even to 2-d objects on a page. Take the image below as an example. It should feel slightly uncomfortable as if you’re waiting for the circle at the top to drop at any moment.
但是引力深深地扎根于我们对现实的感知之中，以至于它甚至可以转换为页面上的二维物体。 以下面的图片为例。 好像您正在等待顶部的圆圈随时掉落一样，应该会感到有点不舒服。
Now look at this image below — the reverse.
现在，看下面的这张图片-相反。
This composition should feel less like a ball about to drop — and more like an object is simply resting at the bottom of the page. Grounded. Peaceful.
这种构图应该不像要掉落的球，而更像是一个物体只是停留在页面底部。 接地。 平静的。
Lesson? Be intentional and cognizant when you’re designing that visually heavy objects at the top can come off uncomfortable and feel anxious (unless of course, that’s the feeling you’re trying to convey).
课？ 当您设计顶部的视觉重物可能会感到不舒服并感到焦虑时，要有意识和认知(当然，除非您要传达这种感觉)。
2.阅读方向 (2. Reading Direction)
In western society (reverse otherwise), we read left to right, top to bottom. Because of this, objects on the left are perceived as entering, and objects on the right perceived as leaving.
在西方社会(反之则相反)，我们从左到右，从上到下阅读。 因为这， 左侧的对象被视为进入，而右侧的对象被视为离开。
Here’s a circle on the left. Again, because we read from left to right, the circle feels like it’s entering the composition. Below, the circle feels like it’s exiting.
这是左边的圆圈。 同样，因为我们从左到右阅读，所以圆感觉就像是进入了合成。 在下面，圆圈感觉像在退出。
You can use this to convey certain emotions as well. For example, want to make an object feel like it’s peeping in? You can create a composition like the one below:
您也可以使用它来传达某些情绪。 例如，想让一个物体看起来像在偷窥吗？ 您可以创建如下所示的构图：
Or inversely, want to convey an object (or a character) running away?
或者相反，想要传达一个逃跑的对象(或角色)吗？
3.阅读优先 (3. Reading Priority)
Because we read left to right top to bottom, we naturally see objects on the top left first, and then our eyes will naturally move to the bottom right and see things there afterwards.
因为我们从左到右从上到下阅读，所以我们自然会先看到左上角的对象，然后我们的眼睛自然会移到右下角，然后再看那里的东西。
This matters because if you’re trying to create visual hierarchy (maybe you want your users to see the title first, and then the content after) where you place things, even if they’re the same shape/color/size, does make a difference.
这很重要，因为如果您试图创建视觉层次结构(也许您希望用户先看到标题 ，然后再看到内容 )，即使它们的形状/颜色/大小相同，也可以使它们放置在其中有所不同。
Take this example below:
请在以下示例中：
Most likely, if you’ve grown up reading English books from the top left to the bottom right, you’d have looked at the top left circle first, before the bottom right.
最有可能的是，如果您是从左上角到右下角阅读英语书籍的，那么您首先应该在右下角之前先查看左上角的圆圈。
4.视觉张力 (4. Visual Tension)
I once had this described to me as physical tension translated and amplified. It’s the feeling you get when you see a glass full of liquid sitting at the edge of a table.
我曾经把这种描述描述为我的身体紧张感得到了转化和增强。 当您看到一桌装满液体的杯子坐在桌子边缘时，就会有这种感觉。
Often visual tension is just unintentionality — designers not realizing that they accidentally put shapes adjacent to each other that create tension unknowingly. This can come across sloppy. Take a look at the image below:
通常，视觉张力只是无意识的-设计师没有意识到他们不小心将形状彼此相邻，从而在不知不觉中产生了张力。 这可能会遇到马虎。 看一下下面的图片：
Feeling uncomfortable yet? Here are all of the tension points highlighted below.
感到不舒服吗？ 以下是所有突出显示的张力点。
You can, if you’re intentional, use visual tension to draw a user’s eye and create a feeling of anxiety. Maybe you’re designing a poster for a protest or you want to focus someone’s attention on something. In those cases, make sure your tension is intentional and doesn’t come off looking like a mistake.
如果您有意，可以使用视觉张力吸引用户的眼睛并产生焦虑感。 也许您正在设计用于抗议的海报，或者想将某人的注意力集中在某物上。 在这种情况下，请确保您的紧张情绪是故意的，不会像看起来的错误那样消失。
Here’s the same composition with the tension focused and intentional on a specific location.
这是相同的构图，其中的张力集中在特定的位置，并且有意将其放在特定的位置。
5.动态与静态 (5. Dynamic vs Static)
Static compositions can often come across boring. An easy way to spice it up and make it feel more exciting is to simply tilt the horizon. Here’s an example of a static image that feels stale.
静态成分经常会让人感到无聊。 给它添加香料并使它更令人兴奋的一种简单方法是简单地倾斜地平线。 这是一个感觉陈旧的静态图像的示例。
Now tilt the horizon, and all of a sudden the cityscape looks a lot more exciting.
现在倾斜地平线，突然之间，城市景观看起来更加令人兴奋。
To make the composition even more dynamic and exciting, you can engage the borders and let shapes bleed outside of it. Check out this 3-pt perspective composition:
为了使构图更加生动有趣，您可以接合边框并让形状在其外部流血。 查看以下3点透视图组成：
6. Activating Negative Space
6.激活负空间
You can use directional shapes to activate negative space — to a point. Too small of a directional force and the negative space remains inactive. Here’s a shape that draws your attention, and then moves your eyes upwards and to the right.
您可以使用方向性形状激活负空间-一点。 方向力太小，负空间保持不活动状态。 这是一种形状，可以引起您的注意，然后向上和向右移动眼睛。
Issue is, your attention is likely dead by the time you reach the top right of the page. Your eye moves past the object, but there’s simply too much space there and too little directional force from the object that your eye drops off. The space remains inactive. However, with a bit of cropping/scaling:
问题是，当您到达页面右上角时，您的注意力可能会消失。 您的眼睛移过对象，但那里的空间太大，而来自对象的方向力也太小，您的眼睛掉了下来。 该空间保持不活动状态。 但是，通过一些裁剪/缩放：
All of a sudden the space around the shape looks intentional and active. Takeaway? If you’re trying to move someone’s eyes around, be cognizant of inactive negative space. An easy trick is to just point at the object with your finger, move in the direction your eye naturally moves, and notice the location where your attention just naturally drops off. If that’s way before you want it to, you’ll need to tweak your layout — either the shape or the borders — to keep that negative space active.
突然之间，形状周围的空间看起来既有意图又活跃。 带走？ 如果您要移动某人的视线，请注意不活动的负空间。 一个简单的技巧就是用手指指向对象，沿眼睛自然移动的方向移动，并注意您的注意力自然下降的位置。 如果那是您想要的方式，那么您需要调整布局(形状或边框)以使该负空间保持活动状态。
Don’t let the confines of CSS, HTML, or whatever other technology you’re using excuse you from ensuring your compositions are doing what it is you want them to do as a designer. These visual principles will apply across any medium — print, digital, web, you name it. They’re simply how our brains & eyes are wired to perceive visual information, in whatever form that may be!
不要让CSS，HTML或您正在使用的任何其他技术限制您，以确保您的作品按照设计人员的意愿进行工作。 这些视觉原理将适用于任何媒体-印刷，数字，网络，随便您如何命名。 它们只是我们的大脑和眼睛如何连接以感知视觉信息的方式，可能是任何形式！
Love your dog? I just launched a small project where dog owners can follow the progress of other dogs, get help, and document their own journey. It’s called BigRuffLife, take a look!
爱你的狗？ 我刚刚启动了一个小项目，养狗的人可以跟随其他狗的进展，获得帮助并记录自己的旅程。 叫做BigRuffLife，看看吧！
Join me for regular product design insights where I share conversations I’ve had with top designers & directors from companies like Dropbox, what I’ve learned from scaling a startup into the millions in revenue, and more!
加入我的行列，定期获取产品设计见解 ，与我分享与Dropbox等公司的顶级设计师和总监的对话，从将初创公司扩展到数百万收入中所学到的知识，以及更多！
翻译自: https://uxdesign.cc/6-visual-design-principles-that-ux-designers-should-be-aware-of-f609f9293703
视觉设计师跟平面设计
1338
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
