#6个简化布局的设计理念 |【鱼C独家中英双语】

不二如是

推荐阅读：

Web新纪元 |【鱼C#视频课程】

只有“前端工程师”才会懂得#恶趣味 | 【哈哈哈】

到底什么“前端开发” | 【吐血力荐】

一图告诉你什么是“前后端” |【吹水】

---

原文：传送门

---

When it comes to layout, ‘less is more’ will achieve better design through simplicity.
说到版面布局，“少即是多”是非常重要的法则，它将通过版面简单化来达到更好的设计。

Beginners often ask: How many colors should I use in my layout? How many different typefaces should I pick? Which images will look best?
初学者经常问：在我的版面布局中应该使用多少种颜色?我应该选多少种不同的字体?哪种图像看起来最好?有这么多不同的元素可供选择？

With so many different elements to choose from, it’s important to keep layouts simple to ensure designs not only look beautiful but read effectively.
应该要保持布局简单，确保设计不仅美观，而且能有效阅读。

Here are six design ideas that will help you to simplify your layouts.
这里有六个设计思路，可以帮助你简化你的版面布局。

---

01. Limit the colors in your designs(限制使用的颜色数量)

Color is a powerful tool when creating a new layout, but it’s also important not to get carried away.
在创建新的版面布局时，颜色是一个强大的工具，但是重要的是不要被带偏。

Before you start designing, choose a color palette of two to four colors and limit yourself to these options.
在开始设计之前，请选择两到四种颜色的调色板，并限制自己选择这些选项。

This will ensure the colors in your designs are striking, effective and cohesive, and don’t overpower the composition of your design.
这将确保你的设计中的颜色是惊人的、有效的和有凝聚力的，并且不会压倒你的设计的组成。

---

02. Avoid using too many elements（避免使用过多设计元素）

Before and during the creative process, always ask yourself, what is the purpose of my design?
在创作过程之前和创作过程中，总是问自己，我的设计的目的是什么？

What is the ultimate goal and what is the overall message?
最终目标和整体表现是什么？

Make sure everything has a reason to be included in the design.
确保一切都有理由被包括在设计中。

And remember don’t be afraid of white or negative space, which space refers to empty areas within your layout.
请记住，不要害怕白色或负面的空间，哪些空间是指布局中的空白区域。

It can used to frame your elements effectively.
它可以用来有效地构建你的设计元素。

As Coco Chanel famously said, “Before you leave the house, look in the mirror and take one thing off.”
正如可可·香奈尔（Coco Chanel）所说的：“ 在你离开房子之前，照照镜子，把一件东西拿掉。”

It’s easy to get carried away so choose your design elements selectively.
”很容易被拿掉的东西就去掉它，所以有选择性地选择你的设计元素。

---

03. Substitute text with images（用图片替代文字）

Think visually and let the graphic elements do the talking.
从视觉角度进行思考，让图形元素来表达。

Icons are an efficient and effective way to convey your message as well as adding an interesting visual aspect to your designs.
图标是一种传达信息的有效方式，同时为你的设计增添了有趣的视觉效果。

However, like other graphic elements, don’t go crazy; most icons work best alone.
但是，像其他的图形元素，不要疯狂使用很多，大多数图标单独使用效果会最好。

Here, the Twitter icon has been placed inside the ‘O’ letter replacing the need for the phrase, ‘Follow me on Twitter’.
在这里，Twitter图标被置于“O”字母内，替代了“在Twitter上跟随我”这个短语的需要。

---

04. Limit your font selection（限制字体样式）

Choosing typefaces that complement each other is a vital part of an aesthetic appealing layout, but again, be selective.
选择适合彼此的字体是美学吸引力布局的重要组成部分，但也是有选择性地使用它们。

Limit your font palette to two or three, including their style variants, such as bold, italic, condensed.
将字体调色板限制为两到三个，包括其样式变体，如粗体、斜体、浓缩。

In this image, a serif and sans serif font have been used together (Josefin Slab and Roboto).
在这个图像中，衬线字体和无衬线字体被一起使用（Josefin Slab和Roboto）。

Also, different font sizes have been used for different lines of text to establish visual hierarchy.
而且不同的字体大小已经被用于不同的文本行来建立视觉层次。

---

05. Create contrast（创造对比度）

Use contrast to create a design that is simple yet effective.
使用对比度来创建简单而有效的设计。

Contrast helps particular design elements stand out from one another and can also be used to enhance the mood of an image.
对比度有助于特定的设计元素相互突出，也可以用来增强图像的情绪。

Here, the white text stands out from the pink circle, which jumps out from the black background.
在这里，白色的文字从粉红色的圆圈中脱颖而出，从黑色的背景中跳出来。

---

06. Remember the magic number（记住神奇数字3）

Still feeling a little overwhelmed by layout?
还是感觉有点被布局压得喘不过气来?

Well, always remember the number three.
记住数字3。

Think three font sizes, three colors, three bullet points… this is how.
认定三种字体大小、三种颜色、三个要点…就是这样。

---

吹水

As mentioned before, different font sizes will establish visual hierarchy in text and it tells the audience what to read first (the most important) and what to read last (the least important).
如前所述，不同的字体大小会在文本中建立视觉层次结构，它会告诉观众先读什么(最重要的)和最后读什么(最不重要的)。

The eye is naturally drawn to large elements, so always make sure your heading, or the information you want people to read first, is the biggest.
眼睛自然会被大的元素吸引，所以一定要确保你的标题，或者你想让人们首先阅读的信息，是最大的。

This should be followed by your subtitle, then your body text. This image uses two different fonts and three different font sizes:
接下来是你的副标题，然后是正文。此图像使用两种不同的字体和三种不同的字体大小:

游客，如果您要查看本帖隐藏内容请回复

Bullet points present information in an ordered and legible fashion.
要点是以有序和清晰的方式呈现信息。

Three bullet points provides readers with information without overcomplicating a design.
三个要点为读者提供了信息，而不使设计复杂化。

Restricting a layout to three elements doesn’t need to reduce your creativity.
将布局限制为三个元素并不需要减少你的创造力。

Rather it gives a framework to experiment within.
相反，它提供了一个在内部进行实验的框架。

And using the golden ratio or rule of thirds can make for a harmonious and well-proportioned, attractive design.
使用黄金比例或三分法则可以使设计更加和谐和匀称。

The image on the left combines a photo background, transparent shape and text, while the image on the right combines a photo background, icon and text.
左边的图片结合了照片背景、透明的形状和文字，右边的图片结合了照片背景、图标和文字。

Using a grid to position three images can create a visual narrative or theme.
使用网格来定位三个图像可以创建视觉叙述或主题。

Applying a photo filter will give the images a unified and consistent look.
应用照片滤镜将使图像具有统一和一致的外观。

---

如果喜欢，别忘了评分 ：

                               
登录/注册后可看大图

  

○试题索引贴●

如果喜欢，请订阅 ：

HTML5 - 庖丁解牛 + JavaScript - 庖丁解牛

六道土豆

卡卡卡卡卡卡

音频线

666

a211827754

完美