This story is less about design trends and fashion, and more about foundational design principles, which are often forgotten. Here is a list of principles to help to improve your designs.

这个故事不是关于设计趋势和时尚，而是关于通常被遗忘的基础设计原则。 以下是有助于改善设计的原则列表。

1.版式 (1. Typography)

It would be good to start with the statement that you shouldn’t use more than 2 fonts, as well as their multiple styles, in one project, but I believe that this has become too obvious, and I hope that everyone follows this principle anyways. Let’s talk about more specific matters.

首先声明您在一个项目中不应使用超过2种字体及其多种样式，这是一个很好的选择，但是我相信这已经变得太明显了，我希望每个人无论如何都遵循这一原则。 。 让我们谈谈更具体的事情。

大写跟踪。 (Uppercase Tracking.)

Each time you use text that consists entirely of capital letters, don’t forget to set up letter spacing. This will prevent characters from sticking to one another and will make the text more readable.

每次使用完全由大写字母组成的文本时，请不要忘记设置字母间距。 这样可以防止字符彼此粘连，并使文本更具可读性。

轻，薄和头发字体样式。 (Light, Thin and Hair Font Styles.)

You need to be careful with these styles. Light can be used, but it depends on the font. If you are making a product that users will eventually see on screens, it is better to forget about Thin and Hair styles.They are extremely hard to read and can create the effect of broken half-pixels on some screens.

您需要谨慎使用这些样式。 可以使用浅色，但取决于字体。 如果您要制作一种最终会在屏幕上看到的产品，那么最好不要理会``稀薄''和``发型''，因为它们很难阅读，并且会在某些屏幕上造成半像素损坏的效果。

标题和主要文本字体大小。 (Headings and Main Text Font Sizes.)

Let’s talk about web typography. There are six levels of headings (h1 — h6). First you should make sure you have no more than four in your project and control their logic and consistency. The largest heading (may occur in the first block of the main page) of a website or a landing page may be as large as you wish: current trends encourage expressive typography. However, make sure not to go too far with the rest of your headings, because too large text is as difficult to read as a too small. Now for the main text. A browser default settings (let’s use Google Chrome as reference) will display every text in 16px size. This size is quite comfortable to read, but I tend to use not less than 17px for the main text and 14px for additional text. Reserve 12px as the least possible size while lesser sizes become barely readable due to eyesight issues or bad monitors. Remember to avoid close range sizes. Don’t use 16px and 17px in the same segments: this brings confusion and visual untidiness to the appearance of the product and is just entirely unreasonable.

让我们谈谈网络排版。 标题分为六个级别(h1-h6)。 首先，您应确保项目中的对象不超过四个，并控制它们的逻辑和一致性。 网站或目标网页的最大标题(可能出现在主页的第一部分)可能与您希望的一样大：当前趋势鼓励富有表现力的排版。 但是，请确保不要与其余标题相距太远，因为太大的文本和太小的文本一样难以阅读。 现在为正文。 浏览器的默认设置(让我们使用Google Chrome浏览器作为参考)将以16像素大小显示每个文本。 这个大小很容易阅读，但是我倾向于使用不少于17px的主文本和14px的其他文本。 将12px保留为最小尺寸，而由于视力问题或显示器不良而使较小的尺寸几乎不可读。 切记避免近距离大小。 请勿在同一段中使用16px和17px：这会给产品的外观带来混乱和视觉上的混乱，并且完全是不合理的。

线高。 (Line Height.)

You could rarely leave line height setting in auto value. Usually you’d have to increase it a little to improve readability. This is especially true for large text blocks: blogs, articles and info blocks of websites or mobile apps. The same approach is justified for headings: make sure that letter’s tails don’t touch each other.

您很少可以将行高设置保留为自动值。 通常，您必须将其增加一点以提高可读性。 对于大型文本块尤其如此：网站或移动应用程序的博客，文章和信息块。 标题采用相同的方法是合理的：确保字母的尾巴彼此不接触。

文本和标题层次结构。 (Text and Headings Hierarchy.)

Bold text should be used to highlight important parts of a text. This includes headings, links and buttons and sometimes emphasized segments of the text. If bold style is used for the entire text, it will become unclear where to look, and what is more important. Put the emphasis correctly: everything may not be equally important.

粗体文本应用于突出显示文本的重要部分。 这包括标题，链接和按钮，有时还包括文本的强调部分。 如果将粗体样式用于整个文本，将不清楚在哪里查找以及更重要的内容。 正确地强调重点：所有内容可能都不一样重要。

文字对比。 (Text Contrast.)

Pay special attention to the color of text in your design. It should have enough contrast so the text is readable on any type of monitor. This is especially important for placeholders in input fields where light grey is often used.

请特别注意设计中文本的颜色。 它应该具有足够的对比度，以便在任何类型的监视器上都可以读取文本。 这对于经常使用浅灰色的输入字段中的占位符尤其重要。

2.间距和边距。 (2. Spacing and Margins.)

Negative space (the “air” between elements ) is essential for a good design. Space helps to clarify relations between elements, provides rhythm and balance.

负空间(元素之间的“空气”)对于良好的设计至关重要。 空间有助于理清元素之间的关系，提供节奏感和平衡感。

摆脱多余的框架和线条。 (Get Rid of Extra Frames and Lines.)

The easiest way to separate one semantic block from another is to use a frame or a 1px line. This is not always the best approach though. I’ve seen design pieces where there was a box inside a box and with several more boxes inside, each box had it’s own 1px frame. In such situations, you need to stop and think: is this really appropriate and necessary? Today’s interfaces tend to have cards everywhere: card at an online store, card in an animal care application, card of a restaurant which delivers your favourite pizza in a delivery app. Sometimes it’s reasonable to use a 1px frame, but there are other ways of distinguishing such elements, like shadows or spacing. The main thing is that margins between cards should be greater than paddings inside them. Disposal of frames on any element could save space for content as long as you won’t need extra space for inner margins. After all, it is the content that is the most important part of any product, so do not unjustifiably cut off the space reserved for it.

将一个语义块与另一个语义块分开的最简单方法是使用框架或1px的行。 但是，这并不总是最好的方法。 我见过一些设计作品，其中一个盒子里面有一个盒子，里面还有几个盒子，每个盒子都有自己的1px框架。 在这种情况下，您需要停下来想一想：这真的合适吗？ 当今的界面上到处都有卡片：在线商店中的卡片，动物护理应用程序中的卡片，在配送应用程序中交付您喜欢的披萨的餐厅的卡片。 有时使用1px帧是合理的，但是还有其他区分此类元素的方法，例如阴影或间距。 最主要的是，卡之间的边距应大于其内部的填充。 只要您不需要额外的空间用于内部页边距，在任何元素上放置框架都可以节省内容空间。 毕竟，内容是任何产品中最重要的部分，因此请不要无理地减少为其保留的空间。

什么属于哪里？ (What Belongs Where?)

Margins help visually determine whether one element belongs to another. Let’s consider the layout of an article on a news site. Let’s say it consists of one picture, a heading, 3–4 lines of preview text and the date of publishing. The heading should “marry” the text and make up a solid element. The date should have a slightly larger margin than the margin between the heading and text. Finally, the picture should be moved as far from the heading-text unit as the date is, or even farther. Sounds confusing? Better look at the related picture below.

边距有助于从视觉上确定一个元素是否属于另一个元素。 让我们考虑一下新闻网站上文章的布局。 假设它由一张图片，一个标题，3-4行预览文本和发布日期组成。 标题应“结合”文本并构成一个坚实的元素。 日期的边距应比标题和文本之间的边距略大。 最后，应将图片移到距标题文本单元尽可能远的日期，甚至更远。 听起来令人困惑？ 最好看看下面的相关图片。

少即是多。 (Less is More.)

There’s always a client or a manager who demands that all information has to be fitted in one block or a one mobile app screen. So the title, and the phone, and the entire menu, and the special offer will fit. And don’t forget a big-big logo. I’m not much of a negotiator and can’t come up with an easy trick how to make them change their mind. But at least you could say this: the less information a user receives at once, the easier for him it would be to take action (for example, make a phone call). Gradual information intake ensures easier and more pleasing customer experience. A customer should never have a hard time deciphering your interface layout — no one ever wants that. And a pile of tightly grouped elements is unaesthetic and in the end, ugly.

总是有一个客户或经理要求将所有信息都放在一个块或一个移动应用程序屏幕中。 因此，标题，电话，整个菜单以及特价都将适合。 并且不要忘了大大小小的徽标。 我不是谈判者，不能提出一个简单的技巧来使他们改变主意。 但是至少您可以这样说：用户一次收到的信息越少，采取行动(例如打个电话)就越容易。 循序渐进的信息获取可确保更轻松，更愉悦的客户体验。 客户永远都不会费力地解读您的界面布局-没人会想要。 一堆紧密分组的元素是不美观的，最终是丑陋的。

屏幕边缘空白不均匀。 (Uneven Screen Edge Margins.)

If you work on a poster, a banner or our favourite card, then pay attention to margins from the edges. If you lay the content out in a classic way — from top left to bottom right corner — make the top margin a little bigger than the left one. This looks more appealing than even margins on all sides.

如果您使用海报，横幅或我们最喜欢的卡片，请注意边缘的空白。 如果以经典方式(从左上角到右下角)布置内容，则使上边距比左边稍大。 这看起来比所有方面的利润都更具吸引力。

3.颜色和图像。 (3. Color and Images.)

Images, icons and backgrounds set the product mood. Images should demonstrate exactly what a company, an app or a website offers.

图像，图标和背景设置产品心情。 图片应准确显示公司，应用程序或网站所提供的内容。

一些徽标思想。 (Some Logo Thoughts.)

I don’t do logos too often, I’ve made like 20 of them during my career, and here is what I’ve learned: a good logo is very difficult to make. However, a designer can surely create a decent logo, just following basic rules and principles. For example, careful color selection. Once I saw a fishing store called “VIP catch” with a purple logo. The combination of purple and the word “VIP” doesn’t really create an association with fishing. In general, you can use any color for any industry, unless there is a clear disconnect such as the “XXX VIP Catch” purple scenario. Another logo tip: if you are having a hard time putting an image (a symbol) to a logo — just don’t do it. Try to make it a font-only logo, do less and do better. Spare this world another legal office with a seal or scales on their logo.

我不太常做徽标，在我的职业生涯中，我已经制作了20个徽标，这就是我所学到的：好的徽标很难制作。 但是，设计师只要遵循基本规则和原则，就可以肯定地创建出像样的徽标。 例如，仔细选择颜色。 有一次我看到一家名为“ VIP catch”的钓鱼店，上面有一个紫色徽标。 紫色和“ VIP”一词的结合并没有真正与钓鱼相关。 通常，除非明确断开连接，例如“ XXX VIP Catch”紫色场景，否则您可以将任何颜色用于任何行业。 徽标的另一个提示：如果您很难在徽标上添加图像(符号)，请不要这样做。 尝试使其成为仅字体的徽标，少做多，做得更好。 在这个世界上另辟legal径，并在其徽标上加盖印章或缩放比例。

阴影。 (Shadows.)

The shadow under an object should never be black. It will always be a darker shade of the surface on which it is cast. Objects usually have several shadows: one is small and bright, directly below it (if it is standing or lying on something), and the second one is more blurry and transparent. Avoid “dirty”, unnatural shadows in your project.

物体下方的阴影绝对不能为黑色。 始终将其投射在其表面上的阴影变暗。 对象通常具有多个阴影：一个阴影很小且明亮，直接在阴影之下(如果它站立或躺在某物上)，第二个阴影则更加模糊和透明。 避免在项目中出现“脏污”，不自然的阴影。

图标和图像。 (Icons and Images.)

Anything that can be vector should be vector. All pictograms, arrows and logos should be given to developers in SVG format (PDF for iOS development). PNG icons have blurry edges and look bad, especially on retina displays. Besides, vector images occupy less memory.

可以是vector的任何东西都应该是vector。 所有象形图，箭头和徽标都应以SVG格式提供给开发人员(适用于iOS开发的PDF)。 PNG图标的边缘模糊，外观不好，尤其是在视网膜显示屏上。 此外，矢量图像占用更少的内存。

有关图标的更多信息。 (More About Icons.)

If you are working on a set of icons for a website or an app, make sure all of them belong to one “Family”. That means equal stroke width, equal border radius. Check to ensure each icon fits into same size square and has equal mass. If some icons have circles in it, make sure these circles have the same diameter. Icons should have a consistent style.

如果您正在为网站或应用程序处理一组图标，请确保所有图标都属于一个“家庭”。 这意味着相等的笔触宽度，相等的边框半径。 检查并确保每个图标适合相同大小的正方形并具有相等的质量。 如果某些图标中有圆圈，请确保这些圆圈的直径相同。 图标应具有一致的样式。

4.常识。 (4. Common Sense.)

There are a few more things I’d like to tell about, but I didn’t figure out how to categorize them, so I put them in this section.

我还想讲几件事，但是我没有弄清楚如何对它们进行分类，因此我将它们放在本节中。

避免使用怪异的布局。 (Avoid Weird Layouts.)

Let’s go back to the news preview example we studied in the Space and Margins section. If we arrange the elements (image, title, text and date) in an unconventional order, it may become confusing. Try sticking to familiar interface layouts. Familiar does not necessarily mean boring, you could always display creativity in other parts of the project. Avoid experimental positioning of elements on a screen / page / card without good reason. Otherwise the user may get confused and leave your site or delete the application. Remember that a designer and an artist are different professions. In design we create a product for people, which means your personal creative impulses can be applied only where it will not interfere with the user experience.

让我们回到在“空间和边距”部分研究的新闻预览示例。 如果我们以非常规的顺序排列元素(图像，标题，文本和日期)，则可能会造成混淆。 尝试坚持熟悉的界面布局。 熟悉并不一定意味着无聊，您总是可以在项目的其他部分中发挥创造力。 避免在没有充分理由的情况下对元素在屏幕/页面/卡片上进行实验性定位。 否则，用户可能会感到困惑，离开您的网站或删除该应用程序。 请记住，设计师和艺术家是不同的职业。 在设计中，我们为人们创建产品，这意味着您的个人创作冲动只能在不会干扰用户体验的情况下应用。

布局尺寸和尺寸。 (Layout Sizes and Measurements.)

Before starting design on a mobile app, it is important to ask the developers about screen sizes. Usually it will be 320px for iOS and 360px for Android. While it is more or less clear and predictable with mobile apps, a website design may be challenging since it will be used on a wide range of devices. The following situation was very common in my own experience as a frontend developer: the provided layout was made for huge monitors. There were margins of 400–600 pixels between blocks, huge font sizes, a strange grid. It’s lucky that I’m also a designer and I could fix this problem myself by adjusting margins and sizes to make it look good on any screen. However, frontend developers usually don’t have a design background and will implement the design exactly the way it was provided to them. As a result, elements will be too big on a common laptop screen. Note that an average laptop screen limit is about 700px vertically, so try to fit one semantic block into this measurement.

在移动应用上开始设计之前，务必向开发人员询问屏幕尺寸，这一点很重要。 通常情况下，iOS为320px，Android为360px。 尽管使用移动应用程序或多或少都可以清楚地了解和预测，但网站设计可能会面临挑战，因为它会在各种设备上使用。 以我作为前端开发人员的经验，以下情况很常见：提供的布局是为大型显示器制作的。 块之间有400-600像素的边距，巨大的字体，一个奇怪的网格。 幸运的是，我还是一名设计师，我自己可以通过调整边距和大小以使其在任何屏幕上看起来都不错来解决此问题。 但是，前端开发人员通常没有设计背景，并且会按照提供给他们的方式完全实施设计。 结果，普通笔记本电脑屏幕上的元素将太大。 请注意，笔记本电脑的平均垂直屏幕限制在垂直方向约为700像素，因此请尝试在此度量标准中加入一个语义块。

Lorem Shmipsum。 (Lorem Shmipsum.)

The Lorem Ipsum sample text in your design looks cheap and unprofessional so avoid using it. It only reveals that a designer was lazy to create some decent content. Moreover, you no longer have to create it on your own, there’s bunch of plug-ins for Sketch and Figma that will generate content for you. Another tip: try not to duplicate blocks, even if it is just for a demo purpose. Put different pictures, headings and preview texts of different length.

您设计中的Lorem Ipsum示例文本看起来便宜又不专业，因此请避免使用它。 它只表明设计师懒于创建一些体面的内容。 此外，您不再需要自己创建它，而是为Sketch和Figma提供了大量插件，它们可以为您生成内容。 另一个提示：即使只是出于演示目的，也不要重复块。 放置不同长度的不同图片，标题和预览文本。

Every rule has its exceptions. All given advice is never meant to be a dogma and there will always be a case where you should do the opposite. But in most cases these tips will help improve your design. I hope this was a helpful article! Thank you for reading.

每个规则都有其例外。 给出的所有建议永远都不会成为教条，在某些情况下，您应该采取相反的做法。 但是在大多数情况下，这些技巧将有助于改进您的设计。 希望这篇文章对您有所帮助！ 感谢您的阅读。