网页设计速成课程：从非设计师到非设计师

2025-05-24

网页设计速成课程：从非设计师到非设计师

首先声明，我并非专业设计师。话虽如此，我喜欢创造精美的东西，并且在这方面也取得了一些成功。很多开发者似乎对设计感到不知所措，所以我想写一篇文章，其中包含一些视觉示例和一些关于如何提升网站视觉效果的快速技巧。规则是用来打破的，但如果你想尽可能轻松地创建一个优秀的网站，以下是一些不错的经验法则！

颜色

我非常喜欢在我的网站上玩转色彩，但网站需要平衡协调的配色方案，才能看起来统一、专业。至关重要的是，这些颜色不能冲突，对比度要适中，而且要保持一致。

一致性

以下是我为《编程禅》设计的配色方案：

我对背景、标题、文本和按钮使用相同的绿色、粉色和灰色十六进制代码。

您可以使用 CSS 变量来确保整个代码中的颜色相同。

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

h1 {
  color: var(--pink);
}
Enter fullscreen mode Exit fullscreen mode

如果您使用 SCSS 或其他 CSS 预处理器，这会更容易！

至于主题中颜色的数量，通常四种比较合适。不妨选择两种中性色（例如黑色、白色或灰色），再加入两种大胆的亮色。使用单一颜色的深浅色调的单色配色方案也绝对有效！

当我使用彩虹配色方案时，我会将彩虹视为一种颜色，然后将两种中性色用于其他所有颜色。例如，在alispit.tel上，我会使用深灰色作为部分文本，白色作为背景，然后使用彩虹色来表示字母和随机形状。

冲突的色彩

确保颜色搭配协调，不冲突非常重要。通常，色轮上彼此相对的颜色会冲突。当然，你也可以利用冲突的颜色制作出优秀的网站，但这比较困难，最好留给设计师去做。例如，红色和绿色，橙色和紫色。

另外，还要记住颜色的色调——如果你用的是冷色调的粉色，那么搭配冷色调的绿色可能比搭配暖色调的绿色更合适。暖色调的底色偏红，而冷色调的底色偏蓝。

对比

确保网站上的颜色对比度合理。如果没有，内容阅读起来会困难得多。这里有一个很棒的网站可以帮你检查对比度。Lighthouse 测试也能帮你检查！一般来说，浅色在深色之上，深色在浅色之上！

颜色含义

如果您正在为某个品牌开发网站，不同的颜色对读者来说具有不同的隐含含义，并且可以传达不同的情绪，因此记住这些会很有帮助。

选择颜色的技巧

有很多很棒的网站可以让您更轻松地选择协调良好的调色板。

我有时会在搭建新网站时使用Coolors生成器。我也会关注这个Instagram 账号，看到喜欢的调色板就会保存下来。最后，如果我只想看一堆颜色并在其中选择，我会使用Materialize 的配色页面——我喜欢他们的配色！

文本

在大多数网站上，文本是最关键的部分。你需要它易于阅读，并突出最重要的内容。

下面是一个非常难以阅读的文本示例：

难以阅读的网站内容文本示例

让我们努力让它更具可读性！

间距

为文本内容添加间距。有几种间距可以提高内容的可读性。第一种是在页面边缘添加内边距。

内容的侧面

在很多网站上，文本不会跨越页面宽度，而是放在一个只占据页面一部分的容器内。这样可以让内容阅读起来更舒适，因为你的视线不需要移动太多，页面看起来也更美观。W3C建议每行字符数不超过 80 个。

<style>
  .container {
    width: 80%;
    margin: 0 auto; /* centers the div on the page */
  }
</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>
Enter fullscreen mode Exit fullscreen mode

行高

我们可以添加行高来增加文本行之间的空间。最新的 Android 操作系统为通知添加了更大的行高，使其更易于一目了然地阅读。

另外，为了方便阅读，最好增加行高——W3C 建议是 1.5 到 2.0。还记得高中时论文行距要加倍吗？我们这次也做了同样的事情，只不过这次是在线上！

p {
  font-size: 18px;
  line-height: 2.0;
}
Enter fullscreen mode Exit fullscreen mode

这会将下图左侧的文本转换为右侧的文本。

行高演示

段落填充

我还会确保在段落之间添加填充，以便于区分它们。

p {
  padding-bottom: 27px;
}
Enter fullscreen mode Exit fullscreen mode

段落填充演示

字间距

如果您使用全大写字母作为标题，则可能需要在单词之间添加更多间距，以便更容易区分它们。

这是我的博客标题，带有额外的字间距：

下面是没有的内容：


h1 {
  word-spacing: 9px;
}
Enter fullscreen mode Exit fullscreen mode

第一个更容易阅读！

结盟

对于英语和其他从左上到右的语言，如果内容左对齐且不对齐，则最容易阅读。您的内容默认就是这种布局！请确保text-align: center;上面没有空格！您可以将标题或文本容器居中，但长内容块必须左对齐。

可读字体

有些字体比其他字体更容易阅读。对于网页内容来说，无衬线字体通常更容易阅读。衬线是某些字体中字母末端延伸出来的小点——你可以在下图中绿色圆圈里看到一个衬线！

无衬线字体 vs. 衬线字体

我的经验法则是，每个网站使用一种装饰性字体（例如草书或非传统字体）或衬线字体作为标题，使用一种无​​衬线字体作为内容。

我最喜欢的一些字体：

衬线字体和装饰字体

无衬线字体

颜色

白色背景上的黑色文字会因为对比度过高而导致眼睛疲劳。我用深灰色来显示内容。虽然对比度仍然很高，但不如黑色文字那么高。

p {
  color: #4A4A4A;
}
Enter fullscreen mode Exit fullscreen mode

背景也是如此——纯黑色通常不是最好的选择——深蓝色或灰色会让你的内容更易于阅读。

浆纱

对于内容应该有多大以及应该使用什么测量单位（例如 em 与 px），存在不同的意见；但是，共识倾向于 16-18 像素，并为放大或缩小网站的用户提供该比例。

不同类型的标题应该比正文更大。此外，使用不同的字体粗细来区分文本。

一旦我们改变这些事情……

我们的内容变得更加容易阅读！

背景

让背景图片看起来美观，尤其是在背景图片上叠加文字的情况下，真的很难。除非背景图片对网站至关重要，否则我会尽量避免使用。如果你仍然决定使用背景图片，我会提供一些替代方案和解决方案，让你的背景图片看起来更美观！

下图中的文字很难阅读。

拆分页面

如果您想保留图像，您可以拆分页面，以便图片显示在一半，文本显示在另一半。


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

<div class="container">
  <div class="text">
    My Text
  </div>
  <img src="path/to/img">
</div>
Enter fullscreen mode Exit fullscreen mode

使用不太繁忙的图片

如果您想保留整页背景图片，尽可能使用一张简洁的图片，不要有太多内容。我上面使用的图片，颜色丰富，字体较大，用户仍然可以阅读。使用风景或图案的图片可以减少干扰。

添加文本阴影

您还可以在文本下方添加文本阴影，以使其更易读。

.text {
  text-shadow: #4A4A4A 1px 1px 8px;
}
Enter fullscreen mode Exit fullscreen mode

通过上述更改和增加字体大小，背景图像上的字体变得更容易阅读！

背景颜色

我不会用太亮的颜色做背景。几乎任何颜色放在上面都会难以阅读，而且可能会让人眼睛疲劳。

行动呼吁

构建网站时，通常需要用户做一些事情。在电商网站上，你希望用户购买商品。在作品集网站上，你可能希望浏览者联系你。在博客网站上，你希望用户订阅。设计网站时，请牢记用户订阅的动机。你可能需要使用鲜艳的颜色、更大的文字，或在网站的多个位置添加“行动号召”功能。你还需要确保这些功能在网站上的任何地方都清晰可见。

例如，我的博客订阅表单始终位于侧边栏，并且采用彩色设计来吸引读者的注意力。在我的作品集里，我在主页、关于和联系页面上都添加了我的社交媒体账户链接。

强调重要内容在每个网站上看起来都会有所不同，但重要的是在做出每个设计选择时牢记希望用户采取的行动。

更多阅读

UI框架

在设计网站时，您可能不想从头开始，因此使用 UI 框架可能会有所帮助。其中包括Bootstrap（由于使用频率很高，我一定会对其进行自定义）；Materialize（遵循 Google 的 Material 设计理念）；以及Grommet（从美学角度而言，我最喜欢的，它也强调了可访问性）。

设计清单

由于这篇文章很长，包含很多技巧，我想把最重要的信息提炼成一份清单。这份清单是用 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
Enter fullscreen mode Exit fullscreen mode

保持联系

如果你喜欢这篇文章并想了解更多，我会每周更新我本周最喜欢的链接和最新文章。另外，欢迎在推特上分享你最喜欢的设计技巧！我还有很多内容可以在本文中讨论，比如响应式设计、留白和对齐，所以如果你想看到更多类似的文章，请告诉我！

文章来源：https://dev.to/aspittel/a-web-design-crash-course-from-one-non-designer-to-another-2o2m
Devto 翻译
PREV
以开发者身份写博客
NEXT
Vue 初学者完整指南