代碼設計的基礎原則

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.

我們應該知道的第一件事是，通過任何視覺媒介進行的每個設計都由以下元素組成： 線，形狀，形式，紋理和平衡。 這些基本要素是構成整體的小塊。 無論您有什么需求，這些小元素都可以發揮重要作用，并且可以影響或破壞設計。 它們以各種形式存在于任何地方，包括衣服的質地，房屋的布局，甚至杯形的小東西。 您可以在此處訪問更多有關設計的基本元素。

UnsplashUnsplash

顏色 (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.

要了解有關顏色的更多信息，請點擊此處的鏈接。

Photo by Francesco Ungaro on UnsplashFrancesco Ungaro在Unsplash上拍攝的照片

版式 (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.

這是文本的樣式或外觀。 由于它幾乎存在于所有形式的媒體中，因此我們如何設計其樣式在設計中起著至關重要的作用。 字體傳達的信息比通過文字表達的單詞更多。 它們可以是休閑，中性，異國情調或圖形。 例如，兒童文學和廣告中使用的字體表現出孩子們的頑皮性格，并邀請他們加入。通常，嚴肅的信息會隨文本傳遞，看起來像消息一樣嚴肅(有時很殘酷和令人恐懼)。 有多種字體。 襯線，無襯線和顯示字體。 選擇字體時需要考慮一些事項，例如“層次結構”，“前導”，“跟蹤”和“字距調整”。 選擇字體時，請注意少即是多。 每個項目只能選擇一種或兩種字體。 單擊此處的鏈接以了解有關字體類型以及選擇字體時要考慮的事項的更多信息。

Photo by Halacious on UnsplashHalacious在Unsplash上的照片

布局和組成 (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 。

UnsplashUnsplash

圖片 (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.

圖像不僅僅是裝飾。 在設計中，它們是將觀眾吸引到您所提供物品的鉤子。 引人入勝的視覺效果可幫助您與觀眾建立聯系，并給觀眾留下深刻的印象，而無需他們朗讀一個單詞。 人們被吸引到看起來真實并能講述故事的圖像上。 有兩種圖像，光柵圖像和矢量圖像。 在某些情況下，每個都很好。 確保在為設計選擇圖像時，尋找清晰，清晰且無失真的圖像。 更多有關圖片的信息 。

Photo by Markus Spiske on UnsplashMarkus Spiske在Unsplash上拍攝的照片

負空間 (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.

這就是設計的所有基本原理。 無論是印刷媒體，數字媒體，藝術品還是建筑，每個好的設計都利用這些原理。 現在掌握這些原則將改變您永久性地看到一切的方式。

UX Para Minas Pretas (UX For Black Women), a Brazilian organization focused on promoting equity of Black women in the tech industry through initiatives of action, empowerment, and knowledge sharing. Silence against systemic racism is not an option. Build the design community you believe in.UX Para Minas Pretas (UX For Black Women)，這是一個巴西組織，致力于通過采取行動，賦權和知識共享的舉措來促進科技行業中的黑人女性平等。 對系統性種族主義保持沉默是不可行的。 建立您相信的設計社區。

翻譯自: https://uxdesign.cc/principles-of-design-the-basis-of-good-design-6df8ab5aeb83

代碼設計的基礎原則

總結

以上是生活随笔為你收集整理的代码设计的基础原则_设计原则：良好设计的基础的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。