电子设计速成

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 。