當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

电子设计速成_Web设计速成课程：从一个非设计者到另一个

發(fā)布時(shí)間：2023/11/29 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了电子设计速成_Web设计速成课程：从一个非设计者到另一个小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

電子設(shè)計(jì)速成

by Ali Spittel

通過(guò)Ali Spittel

Web設(shè)計(jì)速成課程：從一個(gè)非設(shè)計(jì)者到另一個(gè) (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!

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

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

我真的很喜歡在我的網(wǎng)站上玩彩色游戲，但是要使網(wǎng)站看起來(lái)具有凝聚力和專業(yè)性，就必須有一個(gè)平衡和協(xié)調(diào)的配色方案。這些顏色不要沖突，它們具有合理的對(duì)比度水平以及一致是至關(guān)重要的。

一致性 (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.

對(duì)于背景，標(biāo)題，文本和按鈕，我對(duì)綠色，粉紅色和灰色使用相同的十六進(jìn)制代碼。

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

您可以使用CSS變量來(lái)確保您的顏色在整個(gè)代碼中都相同。

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預(yù)處理器，這將更加容易！

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!

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

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.

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

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

重要的是要確保您的顏色看起來(lái)很好并且不會(huì)發(fā)生沖突。通常，色輪上彼此相反的顏色會(huì)發(fā)生沖突。當(dāng)然，您可以使用出色的色彩制作出出色的網(wǎng)站，但難度更大，讓設(shè)計(jì)師更好。一些示例是紅色和綠色或橙色和紫色。

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.

另外，請(qǐng)記住顏色的色調(diào)-如果您使用冷色調(diào)的粉紅色，則可以將冷色調(diào)的綠色與其搭配使用，而不是暖色調(diào)的綠色。暖色調(diào)具有較深的底色，冷色調(diào)則較藍(lán)。

對(duì)比 (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!

確保您的網(wǎng)站上的顏色之間存在合理的對(duì)比度。如果沒(méi)有，閱讀內(nèi)容將更加困難。這是一個(gè)很棒的網(wǎng)站，它將為您檢查您的對(duì)比度。燈塔測(cè)試也將為您檢查！通常，將深色置于深色之上，將深色置于深色之上！

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

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

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

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

有很多很棒的網(wǎng)站，這些網(wǎng)站使選擇易于協(xié)調(diào)的良好調(diào)色板變得更加容易。

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!

在構(gòu)建新站點(diǎn)時(shí)，有時(shí)會(huì)使用Coolors生成器。我也會(huì)在Instagram上關(guān)注此帳戶，并保存我喜歡的調(diào)色板。最后，如果我只想看一堆顏色并在它們之間進(jìn)行選擇，請(qǐng)使用Materialize上的顏色頁(yè)-我喜歡它們的顏色！

文本 (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.

在大多數(shù)網(wǎng)站上，文字將是最關(guān)鍵的部分。您需要它易于閱讀并強(qiáng)調(diào)最重要的內(nèi)容。

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

這是一個(gè)很難閱讀的文本示例：

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.

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

On the sides of your content:

在您的內(nèi)容方面：

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.

在許多網(wǎng)站上-文本不會(huì)跨越頁(yè)面的寬度，而是會(huì)在僅占據(jù)頁(yè)面一部分的容器內(nèi)。由于您的眼睛需要減少移動(dòng)，因此頁(yè)面內(nèi)容看起來(lái)更舒適，因此內(nèi)容閱讀起來(lái)更加舒適。 W3C建議每行少于80個(gè)字符。

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操作系統(tǒng)在通知中增加了更高的行高。這使它們一目了然更容易閱讀。

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!

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

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.

在下面的圖片中，這會(huì)將左側(cè)的文本轉(zhuǎn)換為右側(cè)的文本。

Paragraph Padding:

段落填充：

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

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

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.

如果您對(duì)標(biāo)題使用全大寫，則可能需要在單詞之間添加更大的間距，以便于區(qū)分它們。

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

這是我的博客標(biāo)題，帶有額外的單詞間距：

And here it is without:

這里沒(méi)有：

h1 { word-spacing: 9px; }

The first is a lot easier to read!

第一個(gè)更容易閱讀！

對(duì)準(zhǔn) (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.

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

可讀字體 (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:

有些字體比其他字體更易于閱讀。對(duì)于網(wǎng)絡(luò)上的內(nèi)容，通常更容易讀取無(wú)襯線字體。襯線是某些字體中字母尾部出現(xiàn)的小點(diǎn)-您可以在下圖中的綠色圓圈中看到一個(gè)襯線：

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.

我的經(jīng)驗(yàn)法則是每個(gè)網(wǎng)站的一種裝飾性字體(認(rèn)為是草書或非傳統(tǒng)字體)或襯線字體，而每個(gè)網(wǎng)站的內(nèi)容則為無(wú)襯線字體。

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

Serif and Decorative

襯線和裝飾

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

Sans-Serif

無(wú)襯線字體

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

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

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

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.

背景也是如此-純黑色通常不是最佳選擇-深海軍藍(lán)或灰色會(huì)使您的內(nèi)容更易于閱讀。

漿紗 (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.

對(duì)于您的內(nèi)容應(yīng)多大以及應(yīng)使用哪種度量單位(例如，em與px)，存在不同的意見(jiàn)。共識(shí)傾向于16–18像素，并且該比例適用于放大或縮小您網(wǎng)站的用戶。

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

不同類型的標(biāo)題應(yīng)大于您的內(nèi)容。另外，使用不同的字體粗細(xì)來(lái)區(qū)分文本。

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

Our content becomes a lot easier to read!

我們的內(nèi)容變得更容易閱讀！

背景資料 (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!

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

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

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

分割頁(yè)面 (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.

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

使用不太忙的照片 (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.

如果要保留整個(gè)頁(yè)面的背景圖像，請(qǐng)盡可能使用一張簡(jiǎn)單的圖片，不要過(guò)多地進(jìn)行操作。在我上面使用的一種中，用戶仍然可以閱讀很多顏色和大文本。使用風(fēng)景或圖案的圖像將減少干擾。

添加文字陰影 (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!

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

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

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

呼吁采取行動(dòng) (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.

當(dāng)您建立網(wǎng)站時(shí)，通常需要用戶做一些事情。在電子商務(wù)網(wǎng)站上，您希望用戶購(gòu)買商品。在作品集上，您可能希望查看者與您聯(lián)系。在博客上，您希望用戶訂閱。在設(shè)計(jì)網(wǎng)站時(shí)，請(qǐng)記住該操作。您可能需要在網(wǎng)站上的多個(gè)地方使用亮色，較大的文本或“號(hào)召性用語(yǔ)”功能。您可能還需要確保它在網(wǎng)站上的任何地方都可見(jiàn)。

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.

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

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.

強(qiáng)調(diào)重要內(nèi)容在每個(gè)站點(diǎn)上看起來(lái)都不同。在您做出的每個(gè)設(shè)計(jì)選擇中，記住用戶希望用戶采取的行動(dòng)非常重要。

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:

設(shè)計(jì)網(wǎng)站時(shí)，您可能不想從頭開(kāi)始，因此使用UI框架可能會(huì)有所幫助。其中一些包括：

Bootstrap, which I would make sure to customize since its heavily used
Bootstrap ，我會(huì)確保對(duì)其進(jìn)行自定義，因?yàn)樗褂寐屎芨?
Materialize, which follows Google’s Material design philosophy, and
Materialize ，遵循Google的Material設(shè)計(jì)理念，并且
Grommet, my favorite aesthetically — it also emphasizes accessibility.
格羅梅特(Grommet) ，從美學(xué)上我是我的最愛(ài)-它也強(qiáng)調(diào)可訪問(wèn)性。

設(shè)計(jì)清單 (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.

由于這是一篇很長(zhǎng)的文章，包含很多技巧，因此我想將最重要的信息提取到清單中。它是用GitHub markdown編寫的，因此您可以將其復(fù)制并粘貼到問(wèn)題或markdown文件中。然后，您可以選中該框，也可以為每個(gè)操作項(xiàng)用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

保持聯(lián)系 (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!

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

Originally published at zen-of-programming.com.

最初發(fā)布于zen-of-programming.com 。

翻譯自: https://www.freecodecamp.org/news/a-web-design-crash-course-from-one-non-designer-to-another-a6f8da0e6aa/

電子設(shè)計(jì)速成

總結(jié)

以上是生活随笔為你收集整理的电子设计速成_Web设计速成课程：从一个非设计者到另一个的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：老是梦到爬山是什么意思
下一篇： slack 使用说明_我如何使用Node

编程问答

电子设计速成_Web设计速成课程：从一个非设计者到另一个

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

顏色 (Color)

一致性 (Consistency)

撞色 (Clashing Colors)

對(duì)比 (Contrast)

顏色含義 (Color Meaning)

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

文本 (Text)

間距 (Spacing)

對(duì)準(zhǔn) (Alignment)

可讀字體 (Readable fonts)

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

顏色 (Color)

漿紗 (Sizing)

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

背景資料 (Backgrounds)

分割頁(yè)面 (Split the Page)

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

添加文字陰影 (Add Text Shadow)

背景顏色 (Background Colors)

呼吁采取行動(dòng) (Calls to Action)

更多閱讀 (More Reading)

UI框架 (UI Frameworks)

設(shè)計(jì)清單 (Design Checklist)

保持聯(lián)系 (Keep in Touch)

總結(jié)