ui-交互设计师原则_非设计师的基本设计原则

ui-交互设计师原则

by Anna 4erepawko Mészáros

通过安娜4erepawko梅萨罗斯

非设计师的基本设计原则 (Fundamental design principles for non-designers)

This one is for all the content creators out there who can’t afford to pay a professional designer, as well as for non-designers on a team where designers are always too busy to help. If you can follow these simple steps, I guarantee your designs will look better.

这是针对所有无法付钱聘请专业设计师的内容创作者，以及团队中设计师总是很忙而无法提供帮助的非设计师。 如果您可以按照这些简单的步骤进行操作，则可以保证您的设计会更好。

This list was born out of years of observing my non-designer friends, family and colleagues struggle with designing things they need in their everyday life. Personal newsletters, CVs and portfolios, pictures for posts on Facebook or Instagram, video thumbnails for YouTube and so on.

该列表源于多年观察我的非设计师朋友，家人和同事在设计日常生活中所需的物品时遇到的困难。 个人通讯，简历和投资组合，Facebook或Instagram上帖子的图片，YouTube的视频缩略图等。

All of these people came to me for help and advice on how to make things look better. I’m a firm believer in the whole “teach a person to fish” idea, so rather than designing things FOR them, I tried to give them valuable advice that could help with similar issues in the future.

所有这些人都向我寻求有关如何使外观看起来更好的帮助和建议。 我坚信整个“教人钓鱼”的想法，因此，我没有为他们设计东西，而是给他们提供了宝贵的建议，这些建议可以在将来解决类似问题。

As time went on, I realised I’ve been giving people all the same tips over and over again. I have worded them differently each time, but all of my advice I can distill down to these four principles.

随着时间的流逝，我意识到我已经一遍又一遍地向人们提供所有相同的提示 。 我每次对它们的措辞都不同，但是我的所有建议我都可以归纳为这四个原则 。

I am aware that there are thousands of lists just like this one out there, but I find these lists to be too excessive. You can’t really consistently follow a list of 25 “simple” (nothing containing 25 parts can be truly “simple”) steps as a non-designer. And you don’t have to.

我知道有成千上万个这样的列表，但是我发现这些列表实在是太多了。 作为非设计人员，您不能始终如一地遵循25个“简单”步骤的列表(没有包含25个部分的步骤才是真正的“简单”)步骤。 而且您不必。

Will this help you create shiny beautiful designs? No. Will this help you create great, clear and comprehensible designs that everyone can easily understand and interact with? Absolutely. So, without further ado, I present to you:

这会帮助您创建闪亮的精美设计吗？ 否。这是否可以帮助您创建所有人都可以轻松理解并与之互动的出色，清晰和可理解的设计？ 绝对。 因此，事不宜迟，我向您介绍：

任何人都能遵循的4条基本设计原则 (4 Fundamental Design Principles Anyone Can Follow To Achieve Great Results)

对比 (Contrast)

Make sure there is enough contrast between all elements.

确保所有元素之间有足够的对比度。

Why? Because things that are slightly different, but not different enough, create a kind of Uncanny Valley. They feel eerie and repulsive to a human eye, and/or are difficult to comprehend. Now we don’t want that in our designs, do we?

为什么？ 由于事物略有不同，但差异还不够，因此创建了一种Uncanny Valley 。 他们感到人眼怪异且令人反感，和/或难以理解。 现在我们不想在设计中使用它，对吗？

Elements of your design should be either exactly the same, or significantly different.

设计的元素应完全相同或显着不同 。

Issues with contrast mostly manifest themselves in 4 different ways:

具有反差的问题通常以4种不同的方式表现出来：

1. Colour: use dark on light colours and vice versa.

1. 颜色：在浅色上使用深色，反之亦然。

Example: Never use combinations like grey on a slightly darker grey or light pink on light blue — they are extremely difficult to read/interact with.

示例： 切勿使用灰色(在略深的灰色上)或浅粉红色(在浅蓝色上)组合，因为它们很难阅读/交互。

2. Size: only put elements next to each other that are either exactly the same size, or a considerably different size.

2. 大小：仅将大小完全相同或大小不同的元素彼此相邻放置。

Example: Don’t put 32pt and 36pt text lines next to each other. 18pt and 36pt, on the other hand, will work great together.

示例： 不要将32pt和36pt文本行彼此相邻放置。 另一方面，18pt和36pt可以很好地协同工作。

3. Weight: same as with Size, only put elements next to each other that are either exactly the same weight, or a considerably different weight.

3.权重：与“大小”相同，仅将权重完全相同或权重明显不同的元素彼此相邻放置。

Example: Don’t put “Bold” and “Black” weights of the same typeface next to each other — because they look too similar. “Light” and “Bold” weights, on the other hand, will work great together.

示例： 不要将相同字体的“粗体”和“黑色”粗细彼此相邻放置，因为它们看起来太相似了。 另一方面，“轻”和“粗体”配重将一起工作。

4. Style: don’t put one italic type next to another italic type, or one serif typeface next to another serif typeface. Combine things that are different.

4. 样式：请勿将一种斜体字放在另一种斜体字旁边，也不要将一种衬线字体放在另一种衬线字体旁边。 结合不同的东西。

Example: Don’t put “Times New Roman” and “Georgia” next to each other — they look too similar. Combine fonts that have considerably different styles.

示例： 不要将“ Times New Roman”和“ Georgia”并排放置-它们看起来太相似了。 组合样式迥异的字体。

一致性 (Consistency)

Make sure similar elements appear in similar ways.

确保相似的元素以相似的方式出现。

Why? First of all, by keeping things consistent (and, therefore, simple), you allow people to focus their attention on important aspects of your design rather than being distracted by things changing all the time.

为什么？ 首先，通过保持事物的一致性(并因此使其简单)，您可以使人们将注意力集中在设计的重要方面，而不是因为事物一直在变化而分散注意力。

Second, consistency increases trust and makes things look actually designed, rather than just quickly thrown together.

其次，一致性提高了信任度， 并使事情看起来像是实际设计的 ，而不是很快地融合在一起。

Things to stick to once you have selected them:

选择它们后要坚持的事情：

• Typeface/font
  字体/字体
• Colour palette/shade of colour
  调色板/颜色阴影
• Grid
  格
• Alignment
  对准
• Style of decorative elements
  装饰元素风格

And so on...

等等...

When you are working on many different pieces that appear next to each other (for example, video thumbnails for your YouTube channel, or covers for your Medium articles), choose one overall style for all of them and stick to it as well.

当您处理许多彼此相邻的不同作品(例如，您的YouTube频道的视频缩略图，或中型文章的封面)时，请为它们全部选择一种整体风格，并坚持使用。

奥卡姆剃刀 (Occam’s Razor)

aka减少视觉噪音 (aka Reduce Visual Noise)

The fewer the number of elements you use in your design, the better.

设计中使用的元素数量越少越好。

Why? It’s hard for the human brain to process information and make decisions with an overload of input. Use as few decorative elements (typefaces, colours, shadows, frames, strokes, icons, patterns and so on) as possible.

为什么？ 人脑很难处理信息并做出大量输入决定。 尽可能少使用装饰元素(字体，颜色，阴影，框架，笔触，图标，图案等)。

Apply a design version of Occam’s Razor to everything:

将Occam的Razor设计版本应用于所有内容：

If something can be achieved with just 2 elements, don’t use 3. If something can be achieved with 10 elements, don’t use 20. You get it.

如果仅用2个元素就可以实现某些目标，请不要使用3。如果仅用10个元素就可以实现某些目标，请不要使用20。

If you don’t like old English scholastic philosophers and prefer things you can see on Netflix, sure: be the Marie Kondo of your own designs. Whatever doesn’t spark joy (or isn’t a useful part of a design), has to go.

如果您不喜欢古老的英语学校哲学家，并且喜欢可以在Netflix上看到的东西，请确定：成为自己设计的Marie Kondo 。 无论什么都不激发喜悦(或不是设计的有用部分)，必须走。

空间 (Space)

The way things are positioned sends a meta-level message about their meaning.

事物的定位方式会发送有关其含义的元级消息。

Why is this important? Because minding how you position things and how much space you add around them helps reduce the complexity of a design, and, therefore, makes it both more pleasing to look at AND easier to interact with.

为什么这很重要？ 因为介意如何放置事物以及在事物周围增加多少空间有助于降低设计的复杂性，因此，使其看起来更悦目并且更易于交互。

To use space in your design to convey meaning mind these 3 things:

要在设计中使用空间来传达含义，请注意以下三点：

1. Proximity = Relatedness

1.接近=关联

Things that are closer to each other than to the other elements, are perceived as being related more to each other than to the other elements.

彼此之间比其他元素更近的事物被认为彼此之间的关联比与其他元素的关联更大 。

This one is the most important because I feel like it’s being ignored too often (even by some people claiming to be professional designers, not to name any names).

这一点是最重要的，因为我觉得它经常被人忽略(即使有些人声称自己是专业设计师，也未提及任何名字)。

It can be applied in many different ways, for example:

它可以以许多不同的方式应用，例如：

• There should be more space between the lines than between each word in a line — and, similarly, more space between different paragraphs than between the lines inside a paragraph.
  行之间的空间应该比行中每个单词之间的空间更大，并且类似地，不同段落之间的空间应该比段落内的行之间的空间更大。

• Elements of a design should have less space between each other than between those elements and the edges of the composition.
  设计的各个元素之间的间距应小于这些元素与构图边缘之间的间距。

• Labels and supporting information should be positioned near the elements that they describe/relate to.
  标签和支持信息应放置在它们所描述/相关的元素附近。

2. Negative Space

2. 负空间

In combination with Occam’s Razor, give your designs as much negative space as you possibly can, to declutter them and make their meaning more obvious.

与Occam的Razor结合使用，可以为您的设计提供尽可能多的负空间，以使它们杂乱无章并使其含义更明显。

Putting too many elements into a limited amount of space is like trying to listen to three different songs at once. It’s hard to understand what is being said.

在有限的空间中放置太多元素就像试图一次听三首不同的歌曲一样。 很难理解正在说什么。

3. Importance and order

3. 重要性和秩序

This one is extremely common sense but I feel like I still have to mention it here.

这是一种非常常识的感觉，但是我觉得我仍然必须在这里提及它。

Things that matter most, you put first, and/or make them take up the most amount of space. Use sequences of things to convey order. Et cetera. You can definitely figure out the rest.

最重要的事情是，您放在第一位，和/或使它们占用最大的空间。 使用事物序列来传达秩序。 等等。 您绝对可以找出其余的部分。

结束 (The End)

Congrats! If you have followed all these steps while making whatever it is you are making, it most likely looks very good by the industry standards.

恭喜！ 如果您在做任何事情时都遵循了所有这些步骤，那么按照行业标准看，它看起来非常好。

For everything else, there is always a designer.

对于其他所有事情，总会有设计师。

***

***

My name is Mészáros Anna, I’m a graphic/UI designer turned UX/UI designer with an academic background in philosophy and interest in all things design ethics. I’d love to connect with more like-minded individuals, so feel free to drop me a message and follow me on either Medium or Twitter.

我的名字叫MészárosAnna，我是一位图形/ UI设计师，后来成为UX / UI设计师，在哲学和对所有设计伦理的兴趣方面都有学术背景。 我很想与志趣相投的人建立联系，因此随时向我发送消息并在Medium或Twitter上关注我。

翻译自: https://www.freecodecamp.org/news/fundamental-design-principles-for-non-designers-ad34c30caa7/

ui-交互设计师原则