代码设计的基础原则_设计原则：良好设计的基础

As designers, it’s our goal to pass information in the most pleasing way possible. Starting out, there’s a wealth of literature to read and videos to watch that can get quite overwhelming to take in at a glance. People take different routes to learn all that needs to be learnt but there are basic principles of design which if they are mastered now will make all the difference and set your designs apart. This is a sneak peek into what they are about.

作为设计师，我们的目标是以最令人愉悦的方式传递信息。 首先，有大量的文学作品可供阅读，而观看的视频则一目了然。 人们采用不同的途径来学习所有需要学习的知识，但是有一些基本的设计原则，如果现在掌握了这些原理，它们将使一切都与众不同并将您的设计与众不同。 这是对它们的一瞥。

基本原理 (Fundamentals)

The first thing we should know is that every design through any visual medium is made up of the following elements; Line, Shape, Form, Texture and Balance. These fundamental elements are little pieces that make the bigger picture. No matter your need, these little elements make all the difference and can either make or break a design. They are present in every form in every place — in the texture of your clothes, the layout of your home and even little things like the shape of your cup. You can access more on the basic elements of design here.

我们应该知道的第一件事是，通过任何视觉媒介进行的每个设计都由以下元素组成： 线，形状，形式，纹理和平衡。 这些基本要素是构成整体的小块。 无论您有什么需求，这些小元素都可以发挥重要作用，并且可以影响或破坏设计。 它们以各种形式存在于任何地方，包括衣服的质地，房屋的布局，甚至杯形的小东西。 您可以在此处访问更多有关设计的基本元素。

颜色 (Colour)

Colours can draw your eyes to an image, evoke a certain emotion or communicate important things without using words at all. Most people have a favourite colour that they are drawn to. They like the feelings such colours create in them but they aren’t actively conscious of their reactions to it. People wear black when they are sad, stop signs are red and the walls of hospitals are predominantly white. These colour choices were not by chance but to create or enhance feelings to fit the venue or location.

颜色可以完全不使用文字就将您的眼睛吸引到图像上，唤起某种情感或传达重要的信息。 大多数人都有喜欢的颜色。 他们喜欢这种颜色在他们身上产生的感觉，但他们并不积极意识到自己对此的React。 人们在悲伤时会穿黑色衣服，停车标志是红色，医院的墙壁主要是白色的。 这些颜色选择不是偶然的，而是创造或增强感觉以适合场所或位置。

“DESIGN SPEAKS LOUDER THAN WORDS”

“比语言更胜一筹”

Colours can be described in HEX, RGB,CYMK, HSV or HSB code. Although HEX, RGB and CYMK can describe colour, CYMK is used majorly in print media and the other two don’t do a good job in describing shades of a colour. HEX code in particular is difficult to understand. On first glance, do you understand the value #13AC7B? Confusing right? HSV or HSL has been prescribed as the best choice for specifying colour on digital media. The colour wheel which we were taught in school is a guide to selecting colours that will be a magic wand in the arsenal of any designer. Using different formulae for selecting colour, creating a colour palette to use in a project is to an extent, simplified. Some formulae include;

可以用十六进制，RGB，CYMK，HSV或HSB代码描述颜色。 尽管HEX，RGB和CYMK可以描述颜色，但是CYMK主要用于打印介质，另外两个在描述颜色阴影方面做得不好。 十六进制代码尤其难以理解。 乍看之下，您了解＃13AC7B的价值吗？ 对吧？ HSV或HSL已被指定为在数字媒体上指定颜色的最佳选择。 我们在学校里教过的色轮是选择颜色的指南，这些颜色将成为任何设计师手中的魔杖。 使用不同的公式选择颜色，可以在某种程度上简化创建要在项目中使用的调色板。 一些公式包括：

Monochromatic: This uses one colour from the colour wheel and uses saturation and value to create variations.

单色 ：使用色轮中的一种颜色，并使用饱和度和值来创建变化。

Analogous: This uses colours that are next to each other on the colour wheel like reds and oranges or blues and greens.

类比 ：使用色轮上彼此相邻的颜色，例如红色和橙色或蓝色和绿色。

Complementary: This uses colours opposite each other on the wheel like Blue and Orange or Red and Green.

互补色：使用轮毂上彼此相反的颜色，例如蓝色和橙色或红色和绿色。

Split Complementary: This uses two colors on either side of the complement. This gives the same level of contrast as complementary but more colours to work with.

分割互补色：在互补色的任一侧使用两种颜色。 这样可以提供与互补色相同的对比度，但是可以使用更多的颜色。

Triadic: This uses three colours that are evenly spaced. These combinations tend to be striking so be mindful when using them.

Triadic ：这使用均匀分布的三种颜色。 这些组合往往引人注目，因此在使用它们时要谨记。

Tetradic: This uses four colours forming a rectangle on the wheel. The formula works when you let one colour dominate and the remaining as accents.

四面体 ：使用四种颜色在车轮上形成一个矩形。 当您让一种颜色为主，其余为重音时，该公式将起作用。

To learn more on colours, follow the link here.

要了解有关颜色的更多信息，请点击此处的链接。

版式 (Typography)

This is the style or appearance of text. Since it is present in almost every form of media, how we style it plays a vital role in design. Fonts communicate more than words expressed through them. They can be casual, neutral, exotic or graphic. For example, the fonts used in children’s literature and adverts show the playful nature of kids and invite them in. Serious information is normally passed with text that looks as serious (sometimes grim and scary) as the message. There are different kinds of fonts; Serif, Sans-serif and Display fonts. There are some things to consider when selecting fonts such as Hierarchy, Leading, Tracking and Kerning. When selecting fonts, note that less is more. Limit yourself to one or two font choices per project. Follow the link here to understand more on the types of fonts and things to consider when selecting fonts.

这是文本的样式或外观。 由于它几乎存在于所有形式的媒体中，因此我们如何设计其样式在设计中起着至关重要的作用。 字体传达的信息比通过文字表达的单词更多。 它们可以是休闲，中性，异国情调或图形。 例如，儿童文学和广告中使用的字体表现出孩子们的顽皮性格，并邀请他们加入。通常，严肃的信息会随文本传递，看起来像消息一样严肃(有时很残酷和令人恐惧)。 有多种字体。 衬线，无衬线和显示字体。 选择字体时需要考虑一些事项，例如“层次结构”，“前导”，“跟踪”和“字距调整”。 选择字体时，请注意少即是多。 每个项目只能选择一种或两种字体。 单击此处的链接以了解有关字体类型以及选择字体时要考虑的事项的更多信息。

布局和组成 (Layout & Composition)

Layout and Composition gives your work structure and make it easy to navigate (think your kitchen or office floor layout). It also shows the relationship between elements. There 5 principles of Layout and Composition that can help sharpen your work; Proximity, White Space (Negative Space), Alignment, Contrast and Repetition.

布局和构图赋予您工作结构，并使其易于导航(请考虑您的厨房或办公室地板布局)。 它还显示了元素之间的关系。 布局和构图共有5条原则，可帮助您提高工作效率； 接近度，空白(负空间)，对齐，对比度和重复。

Proximity: This is using visual space to show relationship in your content.

邻近度 ：这是使用视觉空间显示内容中的关系。

White Space: This is also a major principle of design but is tightly related to Layout and Composition hence mentioning it here. It helps in defining and separating different sections.

空白 ：这也是设计的主要原则，但与布局和组成紧密相关，因此在此进行提及。 它有助于定义和分隔不同的部分。

Contrast: This is difference between two items. It can help you catch the reader’s eye, create emphasis or call attention to something important. Contrast can be created using colour, size or visual weight and different styles of text.

对比度 ：这是两项之间的差异。 它可以帮助您引起读者的注意，强调或引起人们对重要事物的注意。 可以使用颜色，大小或视觉重量以及不同样式的文字来创建对比度。

Repetition: This is a reminder that every project should have a consistent look or feel. Being consistent make your work easier to read. When the user knows what to expect, they can relax and focus on the content.

重复 ：这提醒每个项目都应具有一致的外观。 保持一致会使您的工作更容易阅读。 当用户知道期望什么时，他们可以放松并专注于内容。

You can see more here.

你可以看到多个H ERE 。

图片 (Images)

Images are more than just decoration. In design, they are the hook that draws the viewer to what you have to offer. Compelling visuals help you connect and make a strong impression on viewers without them reading a single word. People are drawn to images that look authentic and tell a story. There are two kinds of images, Raster and Vector images. Each are good under certain circumstances. Ensure when selecting images for your design, look for images that are sharp, clear and free of distortion. More on images here.

图像不仅仅是装饰。 在设计中，它们是将观众吸引到您所提供物品的钩子。 引人入胜的视觉效果可帮助您与观众建立联系，并给观众留下深刻的印象，而无需他们朗读一个单词。 人们被吸引到看起来真实并能讲述故事的图像上。 有两种图像，光栅图像和矢量图像。 在某些情况下，每个都很好。 确保在为设计选择图像时，寻找清晰，清晰且无失真的图像。 更多有关图片的信息 。

负空间 (Negative Space)

Negative space or white space is the area of the design that is empty. Negative space is something that would be thought of as a bye-product of designing but actually is something that is as important as the other principles discussed above. It gives our design breathing room and passes emotions in and of itself. Look at the picture above, there’re just a bunch of frames on a wall. It is the proper use of negative space that gives it beauty as design or art. Negative space can be manipulated through padding, margin and line height. There are two types of negative space: Micro & Macro negative space. Micro negative space is the small space between elements while Macro negative space is the larger space between layout elements. Watch the full video on Negative space to see more.

负空间或空白是设计中空白的区域。 负空间被认为是设计的副产品，但实际上却与上面讨论的其他原理同样重要。 它为我们的设计提供了喘息的空间，并传递了自身的情感。 看上面的图片，墙上只有一堆框架。 负空间的正确使用使它成为设计或艺术之美。 可以通过填充，边距和行高来控制负空间。 负空间有两种类型：微观和宏观负空间。 微观负空间是元素之间的小空间，而宏观负空间是布局元素之间的大空间。 观看有关负空间的完整视频，以了解更多。

And that’s all the basic principles of design. Every good design out there whether print media, digital, artwork or architecture make use of these principles. Grasping these principles now will change how you see everything permanently.

这就是设计的所有基本原理。 无论是印刷媒体，数字媒体，艺术品还是建筑，每个好的设计都利用这些原理。 现在掌握这些原则将改变您永久性地看到一切的方式。