電子設計速成

by Ali Spittel

通過Ali Spittel

Web設計速成課程：從一個非設計者到另一個 (A Web Design Crash Course: from one non-designer to another)

I will preface this by saying that I’m not a professional designer. That being said, I like building pretty things and have had some success with that. A lot of developers seem overwhelmed by design. I wanted to do a quick write-up with visual examples with quick tips on how to improve the visuals of your site. Rules are made to be broken. If you want to make a great website as easily as possible, these are some good rules of thumb!

首先，我不是專業設計師。話雖如此，我喜歡建造漂亮的東西，并在此方面取得了一些成功。許多開發人員似乎對設計不知所措。我想通過視覺示例快速撰寫文章，并提供有關如何改善網站視覺效果的快速提示。規則被打破。如果您想盡可能輕松地創建一個出色的網站，那么這是一些好的經驗法則！

顏色 (Color)

I really enjoy playing with color on my websites, but there needs to be a balance and a coordinated color scheme for the site to look cohesive and professional. It’s essential that these colors don’t clash, that they have a reasonable level of contrast, and that they are consistent.

我真的很喜歡在我的網站上玩彩色游戲，但是要使網站看起來具有凝聚力和專業性，就必須有一個平衡和協調的配色方案。這些顏色不要沖突，它們具有合理的對比度水平以及一致是至關重要的。

一致性 (Consistency)

Here’s my color scheme for The Zen of Programming:

這是我的《編程之禪》的配色方案：

I use the same hex codes for green, pink, and grey for my backgrounds, headers, text, and buttons.

對于背景，標題，文本和按鈕，我對綠色，粉紅色和灰色使用相同的十六進制代碼。

You can use CSS variables to make sure that your colors are the same throughout your code.

您可以使用CSS變量來確保您的顏色在整個代碼中都相同。

body {   --pink: #CF92B7;   --green: #59876B;   --grey: #4A4A4A; }

h1 {   color: var(--pink); }

If you are using SCSS or another CSS preprocessor, this is even easier!

如果您使用的是SCSS或其他CSS預處理器，這將更加容易！

As far as the number of colors involved in your theme, four is usually a good bet. Maybe make two of these colors neutrals (like black, white, or grey) and two bolder pops of color. Monochromatic color schemes that use shades of one color can definitely work as well!

至于涉及主題的顏色數量，通常四個是不錯的選擇。也許將其中兩種顏色設為中性色(如黑色，白色或灰色)和兩個更大膽的顏色。使用一種顏色陰影的單色配色方案當然也可以使用！

When I work with rainbow color schemes, I treat the rainbow as one color and then use two neutrals for everything else. For example, on alispit.tel I use a dark grey for some text, white for the background, and then the rainbow colors for letters and random shapes.

當我使用彩虹配色方案時，我將彩虹視為一種顏色，然后對其他所有顏色使用兩個中性色。例如，在alispit.tel上，我對某些文本使用深灰色，對背景使用白色，然后對字母和隨機形狀使用彩虹色。

撞色 (Clashing Colors)

It’s important to make sure your colors look good together and don’t clash. Usually, the colors opposite to each other on the color wheel clash. Of course, you can make excellent websites that utilize clashing colors, but it is more difficult and may be better left to designers. Some examples would be red and green or orange and purple.

重要的是要確保您的顏色看起來很好并且不會發生沖突。通常，色輪上彼此相反的顏色會發生沖突。當然，您可以使用出色的色彩制作出出色的網站，但難度更大，讓設計師更好。一些示例是紅色和綠色或橙色和紫色。

Also, keep the tones of the colors in mind — if you are using a cool toned pink, a cool toned green may be good to pair with it instead of a warm-toned green. Warm-toned colors have redder undertones, and cool toned colors are bluer.

另外，請記住顏色的色調-如果您使用冷色調的粉紅色，則可以將冷色調的綠色與其搭配使用，而不是暖色調的綠色。暖色調具有較深的底色，冷色調則較藍。

對比 (Contrast)

Make sure there’s a reasonable level of contrast between the colors on your website. If there isn’t, it will be much more difficult to read your content. Here’s an awesome site that will check your contrast for you. Lighthouse testing will also check this for you! In general, put light colors on top of dark ones, and dark colors on top of light ones!

確保您的網站上的顏色之間存在合理的對比度。如果沒有，閱讀內容將更加困難。這是一個很棒的網站，它將為您檢查您的對比度。燈塔測試也將為您檢查！通常，將深色置于深色之上，將深色置于深色之上！

顏色含義 (Color Meaning)

If you are working on a website for a brand, different colors have different implicit meanings to readers. They can convey different moods so it can be helpful to keep those in mind.

如果您正在為某個品牌的網站工作，則不同的顏色對讀者會有不同的隱含含義。他們可以傳達不同的情緒，因此記住這些情緒可能會有所幫助。

選擇顏色的技巧 (Tips for choosing colors)

There are a lot of awesome websites that make it easier to pick good color palettes that coordinate well.

有很多很棒的網站，這些網站使選擇易于協調的良好調色板變得更加容易。

I sometimes use the Coolors generator when I’m building a new site. I also follow this account on Instagram, and I will save color palettes that I like when I see them. Finally, if I just want to see a bunch of colors and choose between them, I use the color page on Materialize — I like their colors!

在構建新站點時，有時會使用Coolors生成器。我也會在Instagram上關注此帳戶，并保存我喜歡的調色板。最后，如果我只想看一堆顏色并在它們之間進行選擇，請使用Materialize上的顏色頁-我喜歡它們的顏色！

文本 (Text)

On most sites, the text will be the most critical part. You need it to be easy to read and for the most important content to be emphasized.

在大多數網站上，文字將是最關鍵的部分。您需要它易于閱讀并強調最重要的內容。

Here’s an example of really hard to read text:

這是一個很難閱讀的文本示例：

Let’s work on making it more readable!

讓我們努力使其更具可讀性！

間距 (Spacing)

Add spacing to your text content. There are a few types of spacing that can make your content more readable. The first is adding padding on the sides of your page.

在文本內容中添加空格。間距的幾種類型可以使您的內容更具可讀性。首先是在頁面兩側添加填充。

On the sides of your content:

在您的內容方面：

On a lot of websites — the text won’t span the width of the page, it will be inside of a container that takes up only part of the page. This makes the content more comfortable to read since your eyes need to move less, and the page will look better. The W3C recommends fewer than 80 characters per line.

在許多網站上-文本不會跨越頁面的寬度，而是會在僅占據頁面一部分的容器內。由于您的眼睛需要減少移動，因此頁面內容看起來更舒適，因此內容閱讀起來更加舒適。 W3C建議每行少于80個字符。

<style> .container {   width: 80%; margin: 0 auto; } <;/style>

<div class="container">   <p>   Lorem ipsum dolor amet master cleanse cloud bread brunch pug PBR&B  actually. Thundercats marfa art party man bun gluten-free  sriracha. DIY tofu cred blue bottle etsy. Retro listicle normcore  glossier next level etsy lumbersexual polaroid pour-over 90's  slow-carb health goth banjo. Unicorn chicharrones 8-bit poke   glossier.   </p> </div>

Line Height:

線高：

We can add line-height to add more space between lines of text. The most recent Android operating system added a more substantial line-height to notifications. This makes them easier to read at a glance.

我們可以添加行高以在文本行之間添加更多空間。最新的Android操作系統在通知中增加了更高的行高。這使它們一目了然更容易閱讀。

Also, it is best for accessibility purposes to add more line-height — the W3C recommendation is 1.5 to 2.0. Remember having to double space essays in high school? We’re doing the same thing here, just online this time!

另外，出于可訪問性的目的，最好增加行高-W3C建議為1.5到2.0。還記得高中時必須將太空論文加倍嗎？我們正在這里做同樣的事情，這次只是在線！

p {   font-size: 18px;   line-height: 2.0; }

This will transform the text on the left to the text on the right in the image below.

在下面的圖片中，這會將左側的文本轉換為右側的文本。

Paragraph Padding:

段落填充：

I would also make sure to add padding in between your paragraphs so that it is easy to differentiate between them.

我還要確保在您的段落之間添加填充，以便于區分它們。

p {   padding-bottom: 27px; }

Word Spacing:

字間距：

If you are using all-caps for a header, you may want to add more spacing in between words so that it is easier to differentiate between them.

如果您對標題使用全大寫，則可能需要在單詞之間添加更大的間距，以便于區分它們。

Here is my blog’s header with additional word spacing:

這是我的博客標題，帶有額外的單詞間距：

And here it is without:

這里沒有：

h1 {   word-spacing: 9px; }

The first is a lot easier to read!

第一個更容易閱讀！

對準 (Alignment)

It is easiest to read content if it is aligned to the left and un-justified for English and other top-left to right languages. Your content will be this way by default! Just make sure you don’t have a text-align: center; on it! Feel free to center your headers or the container your text is in, but have long blocks of content left-aligned.

如果內容向左對齊并且對于英語以及其他從左上到右的其他語言不合理，則閱讀內容最容易。默認情況下，您的內容將是這種方式！只要確保您沒有text-align: center; 在上面！可以隨意將標題或文本所在的容器居中放置，但要對齊較長的內容塊。

可讀字體 (Readable fonts)

Some fonts are easier to read than others. For content on the web, it is generally easier to read fonts that are sans-serif. Serifs are the little points that come off of the ends of letters in some fonts — you can see a serif in the green circle in the diagram below:

有些字體比其他字體更易于閱讀。對于網絡上的內容，通常更容易讀取無襯線字體。襯線是某些字體中字母尾部出現的小點-您可以在下圖中的綠色圓圈中看到一個襯線：

My rule of thumb is one decorative (think cursive or un-traditional) font or a serif font for headers and one sans-serif font for content per website.

我的經驗法則是每個網站的一種裝飾性字體(認為是草書或非傳統字體)或襯線字體，而每個網站的內容則為無襯線字體。

我最喜歡的一些字體： (Some of my favorite fonts:)

Serif and Decorative

襯線和裝飾

Pacifico
太平洋
Righteous
正義
Fira Sans
費拉·桑斯(Fira Sans)

Sans-Serif

無襯線字體

Roboto
機械手
Lato
拉托
Montserrat
蒙特塞拉特
Arial — this one comes on your computer
Arial-這是您的計算機上的

顏色 (Color)

Black text on a white background can cause eye strain because of too much contrast. I use dark greys for my content. Then, there is still a lot of contrast, but not as much as there would be with black text.

由于對比度太高，白色背景上的黑色文本可能會導致眼睛疲勞。我為內容使用深灰色。然后，仍然有很多對比，但是不如黑色文本那樣。

The same is true with backgrounds — a pure black is often not the best choice — a dark navy or grey will make your content easier to read.

背景也是如此-純黑色通常不是最佳選擇-深海軍藍或灰色會使您的內容更易于閱讀。

漿紗 (Sizing)

There are differing opinions on how large your content should be and what unit of measurement you should use (em vs. px for example). The consensus leans towards 16–18 pixels and having that scale for people who zoom in or out on your site.

對于您的內容應多大以及應使用哪種度量單位(例如，em與px)，存在不同的意見。共識傾向于16–18像素，并且該比例適用于放大或縮小您網站的用戶。

Headers of varying types should be larger than your content. Also, use different font weights to differentiate text.

不同類型的標題應大于您的內容。另外，使用不同的字體粗細來區分文本。

一旦我們改變了這些東西... (Once we change these things…)

Our content becomes a lot easier to read!

我們的內容變得更容易閱讀！

背景資料 (Backgrounds)

Making background images look good, especially with text on top of them, is really difficult. I would avoid background images unless they are critical to the site. I’m going to give a couple alternatives and solutions for making background images work if you still decide to use one!

要使背景圖像看起來不錯，尤其是在其頂部帶有文本的情況下，確實很困難。我將避免使用背景圖片，除非它們對網站至關重要。如果您仍然決定使用背景圖像，我將提供一些替代方法和解決方案，以使背景圖像正常工作！

On the below image, the text is challenging to read.

在下圖上，文字很難閱讀。

分割頁面 (Split the Page)

If you want to keep the image, you could split the page so that the picture displays on one half and the text on the other.

如果要保留圖像，可以拆分頁面，以使圖片顯示在一半上，文本顯示在另一半上。

<style>   .container {     display: grid;     grid-template-columns: 1fr 1fr;   } &lt;/style>

<div class="container">   <div class="text">My Text</div>  <img src="path/to/img"> </div>

使用不太忙的照片 (Use a less busy picture)

If you want to keep the full page background image, if possible, use a simple picture without too much going on. In the one I’m using above, there are a lot of colors and large text that the user can still read. Using an image of a landscape or a pattern will be less distracting.

如果要保留整個頁面的背景圖像，請盡可能使用一張簡單的圖片，不要過多地進行操作。在我上面使用的一種中，用戶仍然可以閱讀很多顏色和大文本。使用風景或圖案的圖像將減少干擾。

添加文字陰影 (Add Text Shadow)

You can also add a text shadow below your text to make it more readable.

您還可以在文本下方添加文本陰影以使其更具可讀性。

.text {   text-shadow: #4A4A4A 1px 1px 8px; }

With the above changes in place and an increased font-size, the font on a background image becomes a lot easier to read!

通過上述更改和增大的字體大小，背景圖像上的字體變得更容易閱讀！

背景顏色 (Background Colors)

I wouldn’t use a super bright color for your background. Pretty much any color will be difficult to read on top of it, and it may strain people’s eyes to read.

我不會為您的背景使用超亮的顏色。幾乎所有顏色都很難在其上讀取，并且可能使人的眼睛難以看清。

呼吁采取行動 (Calls to Action)

When you build a website, there’s usually something that you want the user to do. On e-commerce sites, you want the user to buy something. On a portfolio, you probably want the viewer to contact you. On a blog, you want the user to subscribe. When you’re designing a site, keep that action in mind. You may want to use a bright color, larger text, or feature that “call to action” on multiple places on your site. You also may want to make sure that it is visible everywhere on the site.

當您建立網站時，通常需要用戶做一些事情。在電子商務網站上，您希望用戶購買商品。在作品集上，您可能希望查看者與您聯系。在博客上，您希望用戶訂閱。在設計網站時，請記住該操作。您可能需要在網站上的多個地方使用亮色，較大的文本或“號召性用語”功能。您可能還需要確保它在網站上的任何地方都可見。

For example, my subscribe form for my blog is always in the sidebar, and it has color on it to grab the reader’s attention. On my portfolio, I have links to my social media accounts on the home, about, and contact pages.

例如，我的博客訂閱表單始終在側邊欄中，上面帶有顏色以吸引讀者的注意力。在我的投資組合中，我可以鏈接到主頁，簡介頁和聯系頁上的社交媒體帳戶。

Emphasizing the important content will look different on every site. It’s important to keep the action you want the user to take in mind with each design choice you make.

強調重要內容在每個站點上看起來都不同。在您做出的每個設計選擇中，記住用戶希望用戶采取的行動非常重要。

UI框架 (UI Frameworks)

You may not want to start from scratch when you design a site, so using a UI Framework may be helpful. Some of these include:

設計網站時，您可能不想從頭開始，因此使用UI框架可能會有所幫助。其中一些包括：

Bootstrap, which I would make sure to customize since its heavily used
Bootstrap ，我會確保對其進行自定義，因為它使用率很高
Materialize, which follows Google’s Material design philosophy, and
Materialize ，遵循Google的Material設計理念，并且
Grommet, my favorite aesthetically — it also emphasizes accessibility.
格羅梅特(Grommet) ，從美學上我是我的最愛-它也強調可訪問性。

設計清單 (Design Checklist)

Since this is a pretty long post with a lot of tips, I wanted to distill the most important information into a checklist. It’s written in GitHub markdown, so you can copy and paste it onto an issue or into a markdown file. Then you can either check the box or replace the space with an x for each action item.

由于這是一篇很長的文章，包含很多技巧，因此我想將最重要的信息提取到清單中。它是用GitHub markdown編寫的，因此您可以將其復制并粘貼到問題或markdown文件中。然后，您可以選中該框，也可以為每個操作項用x代替空格。

## Color - [ ] Uses consistent colors throughout - [ ] Uses non-clashing colors - [ ] The color choice makes sense for the business purpose of the site

## Text - [ ] The text has padding on both sides. - [ ] The line-height is 1.5-2.0 - [ ] There's padding between paragraphs - [ ] If your headings are in all caps, there's increased word spacing - [ ] Blocks of text are un-justified - [ ] Blocks of text are left-aligned - [ ] Sans-serif fonts are used for body text - [ ] A maximum of two fonts are used - one decorative or serif and one sans-serif - [ ] body text isn't pure black on white - [ ] body text is 16-18px and is scalable

## Backgrounds - [ ] Use a pattern or simple image - [ ] A text shadow is used to make headings readable - [ ] The background isn't too bright

## Calls to Action - [ ] Important information is highlighted in order to attract user interaction

保持聯系 (Keep in Touch)

If you liked this article and want to read more, I have a weekly newsletter with my favorite links from the week and my latest articles. Also, tweet me your favorite design tips! I have a ton more than I could have discussed in this article like responsiveness, whitespace, and alignment. If you want to see more posts like this, let me know!

如果您喜歡這篇文章并想了解更多信息，請參閱每周新聞通訊，其中包括本周我最喜歡的鏈接和最新文章。另外，向我發送您最喜歡的設計提示！與響應能力，空格和對齊方式相比，我的能力比本文中討論的要多。如果您想看到更多類似的帖子，請告訴我！

Originally published at zen-of-programming.com.

最初發布于zen-of-programming.com 。