前端开发人员必看：改进网页设计的具体步骤

作者: phpCN中文网 | 来源:发表于2019-08-24 14:20 被阅读0次

我注意到很多网页开发人员都在费劲的进行设计，他们认为他们没有天生的设计天赋和不知道什么看起来很好，他们从头开始创作的一切都注定看起来很业余和不专业。

为了解决这个问题，开发人员经常使用像Bootstrap和Foundation这样的CSS框架，它们带有一组合理的默认值和主题，可以添加它们以获得自定义外观。转向其中一种解决方案并不羞耻，当然，为了保持一致性，他们可能必须使用这些解决方案。如果您只是想学习如何开始使用Bootstrap，我建议视频教程《bootstrap框架基础课程》或者什么是Bootstrap以及如何使用它这篇文章

但是，您可能是一个想要改进自己设计的开发人员，或者使用独特的样式或自定义CSS构建自己的自定义产品组合。在这种情况下，您可能会发现很难找到任何类型的资源，并提供明确，具体的技巧来改进您的设计。当然，你会发现在谷歌搜索结果，告诉你的上篇为“学习设计理论”或“学会识别好设计”，但这些提示是模糊的，不利于你的设计现在。

因此，我决定列出一些我一直关注的特定于网页设计的内容，您可以使用它来对比您自己的网站并进行改进。

我们将从头开始创建一个网站元素（卡片），使用我在此列出的设计原则，一步一步。

先决条件

HTML和CSS的基础知识（前端基础教程）

目标

使用我们在此学习的每个设计指南从头开发卡片元素。

了解您可以采取的具体行动，以改善您的设计并使其看起来更专业。

将这些指南应用于我们的成品元素，以展示我们如何通过一些代码更改来自定义和创建完全不同的创意设计。

完成的产品

这是我们将要开始的。

以下是我们最终的结果。您可以在此处查看其可用的响应式编码版本演示。

为什么布拉格和芝加哥因为我来自芝加哥，所以我开始在布拉格写这篇文章。（现在在慕尼黑......当我完成时，我们会看到我的位置）。

查看演示

查看GitHub源码

请注意，开始实际上并不是糟糕的设计，而是没有样式。从无到有，做一个好的设计比改善一个好的设计更容易。但是，可以逐个使用所有这些指南来检查设计中的问题。

设计指南

首先是结构布局

使用更多填充

在身体上使用比标题更多的线高

不要使用纯黑色

使用较少的字体，或与字体一致

使用较少的颜色或补色

与边界和角落保持一致

细节，过渡和动画持久

不要过分使用阴影，渐变或动画

那么，让我们开始吧！

第0步：HTML

首先，我将在这里设置HTML，本文的其余部分将只关注CSS。这里有关于卡结构的基本概述。（我正在遗漏图像，因为它不是焦点。我们最后会添加它。）

index.html

<div class="card">

<div class="card-content">



<div class="card-details">



</div>

</div></div>

这是一张卡的实际最终HTML。它位于容器内部以保持形状，但是没有其他样式，规范化器，重置或应用的任何CSS。

index.html

<div class="card">

<div class="card-content">

<h1>The Second City</h1>

<div class="subtitle">City of Big Shoulders</div>

<p>

Chicago is the home of the blues and the truth of jazz, the heart of comedy and the idea of

the skyscraper. It's a city with a swagger, but without the surliness or even the fake smiles

found in other cities of its size.

</p>

<div class="card-details">

<div class="card-details-inner">

<div class="read-more">

<a class="button" href="https://en.wikivoyage.org/wiki/Chicago">Read Article</a>

</div>

<div class="options">

<div class="comments">

<a href="#!">

<i class="fa fa-comments-o"></i>

16 comments

</a>

</div>

<div class="likes">

<a href="#!">

<i class="fa fa-heart-o"></i>

322 likes

</a>

</div>

</div>

</div>

</div>

</div>

</div>

这是我们开始的地方。

在整个事情中都会有一个错字，所以请忽略它。

首先是结构布局

在进行任何设计之前，您应首先确定布局的结构。这意味着任何使用flex，float，position等，而不让风格和设计的方式获得。由于本文侧重于设计，我不会详细介绍如何工作flex和absolute定位工作，但我会解释发生了什么。这是我们的代码，在scss中。

.card {

flex: 1 1 50%;

position: relative;

border: 1px solid #efefef;

}

.card-content {

padding: 0 0 30px;

}

.card-details {

position: absolute;

width: 100%;

bottom: 0;

left: 0;

}

.card-details-inner {

display: flex;

justify-content: space-between;

align-items: center;

}

好吧，它看起来像很多代码几乎没有任何变化。但这是发生了什么：

每张卡的尺寸相同，但不超过外部容器的50％宽度，这意味着只有两张卡并排放置。

底部的详细信息部分（阅读更多，评论等）绝对位于底部。为什么？无论卡中有多少内容，它们都将始终放在底部。

细节部分的两半将放置在左侧和右侧并垂直居中。左侧的“阅读更多”，右侧的“评论”和“喜欢”。

我只包括边框，所以我们可以看到现在所有与卡的布局有关的事情都得到了处理，我们可以开始设计它。

使用更多padding填充

这是我看到的第一个问题，它向我表明某人在设计上是业余爱好者：没有足够的填充，或填充和边距不一致。

我们将在卡片的四边添加相同数量的填充（30px），添加额外的底部以考虑absolute定位。

.card-content {

padding: 30px 30px 110px;

}

.card-details-inner {

border-top: 1px solid #efefef;

margin: 0 30px;

padding: 30px 0;

}

我也将删除它的上边距，<h1>因此它不会干扰元素的相等填充。我更喜欢删除所有顶部边距并仅使用底部边距。这是个人偏好，但它最适合我。

.card h1 {

margin: 0;

}

.card p {

margin: 0 0 30px;

}

.subtitle {

margin: 0 0 15px;

}

我认为它已经开始变得更好了。您可能会注意到底部细节区域周围似乎有太多空间，但这只是因为“读取文章”链接将成为一个按钮 - 否则我们会少用。

在body上使用行高 line-height要大于标题

标题应该比正文更少行高。一个良好的数额是1.2为标题，并1.5以1.6正文文本。据说“黄金比例” 1.61803399，但没有人有时间可以获得这么多数字。这是我通常用作所有网站标准的代码，只在必要时进行调整。

html {

line-height: 1.6;

}

h1,h2,h3,h4,h5 {

line-height: 1.2;

}

它现在变得更加分散和可读。

不要使用纯黑色

对于文字和背景，纯黑色，如black或在#000000，特别严酷，应该避免。

#444444对于正文，我将使用坚固的漂亮灰色，对于#666666卡体字体，我将使用静音。

眼睛不那么刺激，更舒适。

使用较少的字体，或与字体一致

如果你真的不知道你在使用字体做什么，这里有一些简单的建议：只使用一个字体系列（字体）。字体是整个字体系列，包括所有粗体和斜体版本。我们只是将它们全部称为字体，因为这比较熟悉。

Google字体当然是查找要在项目中使用的自定义字体的绝佳资源。按“流行”排序，其中任何前20种字体都应该完全可以使用。我将使用Nunito，一种很流行的字体，有一个常规宽度和一个粗体宽度。（400和700）。

加载它...

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:400,700" />

html {

font-family: 'Nunito', sans-serif;

}

在这里。

另一个提示：将此代码添加到您的所有项目中，以使文本更清晰，更清晰并在所有浏览器上定义。

html {

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

标题默认设置为粗体，但我也希望我的副标题是粗体。

.subtitle {

font-weight: 700;

}

好吧，也许你不喜欢只有一种字体，而且你想使用多种字体。这很有道理，但是在尝试遵循这个规则时：**将所有标题设为一种字体，将所有标题设为另一种字体**。例如，您可以选择将所有标题设置为serif字体（带有尾部的字体，例如Times New Roman），并且所有正文文本都是sans-serif字体（没有尾部的字体，例如Arial）。或者相反。

一致性是关键。当你不熟悉设计时，试图成为超级创意和不同的是大多数糟糕设计的来源。保持简单直到你了解更多。

使用较少的颜色或补色

当您刚开始设计时，相同的建议适用于字体颜色：如果您不知道自己在做什么，只需使用一种颜色即可。我们制作的例子只使用一种颜色。

想要使用多种颜色？这是有道理的，但至少使用补色轮。这是你要看的一个。

如果您对一年级的艺术课不熟悉，只需看看轮子的两端并匹配它们。蓝色和橙色。紫色和黄色。通常，更柔和的颜色在网络上看起来更好。

我选择了#E76C67一个平坦的红橙色作为我们设计的颜色。我可以很容易地选择蓝色，紫色或绿色，因为所有这些都看起来很好用黑色和白色，但我选择了这个。

a {

color: #e76c67;

text-decoration: none;

}

.subtitle {

margin: 0 0 15px;

font-weight: 700;

font-size: 1.25rem;

color: #e76c67;

}

现在我们对设计有一些颜色，因为它只有一个，它没有什么可碰撞的。

与边界和角落保持一致

如果你想要圆角，在你的所有元素中使用圆角：形状，按钮，卡片等。如果你要有方角，在你的所有元素中使用方角。保持边框和边框半径一致。我确信你注意到一致性是本文的一个共同主题，这是有充分理由的。

在我们的示例中，我将使用尖角 - 我的任何元素都没有边界半径。这意味着我的卡和按钮（如果它是一个完整的网站，我的表格输入）都将是矩形。如果我想使用圆角，我应该确保所有东西都有圆角。

如果您的按钮有1px边框，请确保您的表单也有1px边框。确保悬停和活动状态与常规元素的边框大小匹配，因此悬停和选项卡上的形状不会更改。

这是我们按钮的CSS。

.button {

display: block;

font-size: 1rem;

background: #e76c67;

border: 1px solid #e76c67;

padding: 0.75rem 1rem;

color: white;

text-decoration: none;

font-weight: 700;

text-align: center;

}

.button:hover,

.button:focus {

background: darken(#e76c67, 10%);

border: 1px solid darken(#e76c67, 10%);

}

细节，过渡和动画持久

如果你要做的第一件事就是在你的空设计中加入渐变或盒子阴影，那就有问题了。在选择了布局，字体和颜色后，应最后添加过渡，动画，框阴影和其他小细节。

我要给卡元素添加一个微妙的盒子阴影。

.card {

box-shadow: 2px 6px 25px rgba(0, 0, 0, 0.1);

transition: all 0.3s ease;

position: relative;

}

.card:hover {

box-shadow: 2px 6px 30px rgba(0, 0, 0, 0.2);

}

我也更喜欢底卡的细节是灰色的，元素之间的空间更大一些。