<![CDATA[ 网站设计 - freeCodeCamp.org ]]> https://www.freecodecamp.org/chinese/news/ https://cdn.freecodecamp.org/universal/favicons/favicon.png <![CDATA[ 网站设计 - freeCodeCamp.org ]]> https://www.freecodecamp.org/chinese/news/ Eleventy Tue, 12 May 2026 08:52:28 +0000 60 <![CDATA[ 如何在 Figma 中创建颜色和文本样式 ]]> https://www.freecodecamp.org/chinese/news/how-to-create-color-and-text-styles-in-figma/ 6243ea067f18d1062895c231 Wed, 30 Mar 2022 05:30:00 +0000 原文：How to Create Color and Text Styles in Figma，作者：Ijelekhai Faith Olohijere

在这篇文章中，我们将学习如何在 Figma 中创建、编辑和使用颜色和文本样式。我们还将学习如何组合颜色和文本样式，并使用它们来创建美丽的设计。

样式可以帮助你简化工作流程，保持文本和图层的一致性，并节省宝贵的时间。

如何在 Figma 中使用颜色样式

你可以将颜色样式应用于文本、背景和笔触。你还可以将颜色样式应用于设计中创建的形状，或应用于你正在设计的特定网站或移动应用程序的元素或部分。这些元素可能包括按钮、矩形、顶部和底部条形，以及更多。

2022-03-25--4-

你也可以为图像或梯度使用颜色样式。

如何创建一个颜色样式

要创建一个颜色样式，请遵循以下步骤：

  • 创建一个新的形状，然后转到 Fill（填充），用你选择的任何颜色填充你的图层。
2022-03-19--15--1
  • 点击四个点的图标，触发 Color Styles modal（颜色样式模式）。
  • 点击颜色样式模式右上角的 + 图标。
2022-03-19--16--1
  • 为你的样式指定一个首选名称（例如颜色样式 1），然后单击 Create Style（创建样式）按钮。
2022-03-19--17--1

请记住，你可以根据你的需要创建许多颜色样式。

如何在一个图层上应用颜色样式

  • 选择你的图层，进入右侧边栏的 Fill（填充）部分。
  • 点击填充部分右角的四个点图标，触发颜色样式模式。
  • 选择你喜欢的颜色风格。
2022-03-19--19-

完成了!

如何编辑一个颜色样式

点击文件的灰色背景，显示你的样式。

2022-03-19--20-
  • 右键单击 Color Style（颜色样式），在菜单中选择 Edit style（编辑样式）。
2022-03-19--21--3

如何删除一个颜色样式

删除一个颜色样式真的很容易做到。

  • 点击文件的灰色背景，显示你的样式。
  • 在 Color Style（颜色样式）上点击右键，选择 Delete Style（删除样式）。
2022-03-19--21--2

如何在 Figma 中使用文本样式

你还可以对文本应用样式。它可以是一整块的文字，也可以是一个区块中的部分文字。这有助于定义你的标题的风格。

要创建一个新的文本样式，首先要创建一个新的文本层并添加一些设置，例如：

  • Font family：Roboto
  • Font size：30
  • Font weight：Regular
2022-03-19--22-
  • 点击文本部分的四个点图标，触发文本模式。
  • 点击文本样式模式右上角的 + 图标。
2022-03-19--23--1
  • 给你的样式起一个你喜欢的名字（比方说文本样式 1），然后点击 Create Style（创建样式）按钮。
2022-03-19--24--1

如何将文本样式应用到一个图层

首先，选择你的图层，进入右侧边栏的 Text（文本）部分。

然后点击文本部分右角的四个点图标，触发文本样式模式。

最后，只需选择你喜欢的文本样式。

如何删除一个文本样式

要删除一个文本样式，你需要点击文件的灰色背景来显示你的样式。然后，你可以直接右击你想删除的文本样式，选择 Delete Style（删除样式）。

如何结合颜色和文本样式

你也可以在设计时结合文本和颜色样式。你可以为不同的文本对象添加颜色样式。这是一个额外的步骤，可以使你的系统更容易维护，特别是当你不必为每个颜色组合创建不同的文本样式时。

  • 要保存专门用于文本的颜色样式，创建一个文本框并输入你的文本，按照“如何将文本样式应用到一个图层”的步骤
  • 当你到了你应该给你的样式一个描述/名称的地方，输入你的文本描述，比如副标题、页面标题、按钮文本等等。
2022-03-25--1--1

总结

请注意，在设计时使用和创建样式完全取决于你。没有人会知道你在设计中使用了什么颜色/文字风格，除非你让他们知道。就像我说的，这完全由你自己决定

然而，样式有助于保持你的设计的一致性，并且创建很赞的样式可以帮助你打造完美的用户体验。

]]> <![CDATA[ 响应式网页设计简史 ]]> https://www.freecodecamp.org/chinese/news/history-of-responsive-web-design/ 5f59d233cd07b005bfb5af70 Tue, 10 Nov 2020 09:20:00 +0000 一个网页就像是一块画布，你可以随心所欲地进行网页设计。但是，网页设计和绘画不一样的地方在于，不是所有人都会如你所想地理解你的网站。

互联网既庞大又古老，设备却越来越小，越来越精巧。现在，你必须在不影响作品美感的前提下调整它的大小，以适应更小的画布。

这就是响应式设计的用武之地。现在，我们在 PC 端和手机端浏览很多网站的体验都很好，但并不是一开始就是这样的。开发人员通过多年试验才达到这一点，而且我们仍在每天改进。

在本文中，我们将深入探讨响应式网页设计的历史，了解网站开发是如何随着时间发展的。

互联网早期

还记得互联网早期所有网站看起来都很棒吗？仅在网络上发布自己的页面就已经是一项巨大的成就了。即使只是用 Geocities 或 Angelfire 这些最早的建站服务做的页面，你可以将其展示给朋友，那简直是世界上最棒的事情之一。

那时候设计师的工作比较简单：人们只能通过台式计算机上网，设备的分辨率和宽高比就那么几种，所以设计师可以在一个屏幕上任意布局，而不必太担心其他屏幕的尺寸。

image-58
Yahoo 2001 年的主页

那时，网站常常强迫用户使用桌面浏览器。重新设计整个网站以适应一些不常见尺寸的设备是一项艰巨的任务，许多公司都不愿意花这个精力。

CSS 出现之前

在过去的 20 年左右的时间里，大多数开发人员都从 Web 开发入门编程，也就是说他们要学习 HTML 这一构建网站的基本要素。

用最基本的术语来说，HTML 元素是在默认情况下彼此堆叠的矩形框。通过几个装有文本和图像的盒子，你能实现简单的效果。

那时候我们可以使用的 HTML 标签很少，包括 h1 - h6 标签，图像标签，列表，表格，段落等等基本的标签（现在可能使用 CSS 替代了）。

以下是一个最基本的 HTML 页面：

<html>
<head>
  <title>FreeCodeCamp</title>  
</head>
<body>
  <h1>FreeCodeCamp</h1>
    <img src="logo.jpg" height="150" width="150" align="right">
    <p>Text goes here</p>
  <p>Text goes here</p>
</body>
</html>
image-59
一个基本的 HTML 网页

那时候没有结构化或统一的方式布局 HTML，但是好在 HTML 通过特殊标签提供了一些自定义功能。

所有这些标记甚至沿用到今天，虽然其中一些因为太基础已经在 HTML5 中被弃用。例如，有一个 <marquee> 标记，用于创建滚动的文本、图像和其他 HTML 元素。

现在，仅通过 CSS 就可以达到相同的效果。但是那时，开发人员必须为每个功能创建单独的标签。（有趣的事实：如果你搜索 “marquee 标签”，会看到 Google 制作的一个复活节彩蛋。）因此，设计人员需要一种结构化的布局元素的方式，需要是灵活的且完全可定制。

所以，级联样式表（Cascading Style Sheets，CSS）出现了，这是对 HTML 元素布局的一种标准。

级联样式表或 CSS 是一种布局任何 HTML 元素的方式。CSS 有一组预定义属性，可以应用于任何 HTML 元素。这些样式可以直接嵌入在一个 HTML 页面中，也可以用作外部 .css 文件。

这是网页设计的一个重要里程碑。现在，设计人员可以选择更改 HTML 元素的每个属性，并将它们放置在所需的位置。

当屏幕开始缩放

到这里，设计人员已经可以完全控制网页了，他们需要确保一个网页在不同尺寸的屏幕上均显示良好。

桌面端今天仍然很流行，但是大多数人是使用手持移动设备上网。现在，设计人员要处理的宽度减小了，但高度却变得更高，因为与桌面端相比，触摸屏设备上滚动显示页面非常方便。

网站必须考虑响应式网页设计了。

响应式网页设计是一种网页设计方法，可使网页在各种设备以及窗口或屏幕尺寸上都能很好地呈现。

对于较小屏幕的处理，最常见的方法是侧边栏。边栏就像一个抽屉，其中保留了链接和其他不太重要的内容。设计人员只需将所有辅助内容放到侧边栏，使网页看起来干净。但其实侧边栏最初并不是为此目的而设计的。

在此之前，<frameset> 和 <frame> 标签非常流行，因为它们允许设计人员嵌入外部网页。 但是，与现在流行的 <iframe> 标签不同，这些标签反应迟钝，因为它们无法适应不同的屏幕尺寸，即使在较小屏幕上也是保持原布局，看起来很糟糕。

<frameset rows="100,*">
  <frame src="header.html"/>
  <frameset cols="33%,33%,*">Nested frameset
    <frame src="subframe1.html"/>
    <frame src="subframe2.html"/>
    <frame src="subframe3.html"/>
  </frameset>
</frameset>

在桌面端，输出看起来完全正常，但在移动设备上却不行。

image-64
framesets 在桌面端和移动端的显示

向响应式设计过渡

那些陈旧的、庞大的、包含成千上万个页面的网站面临着一个难题：响应还是不响应。

网页设计师们都知道：从较大屏幕切换到较小屏幕挺麻烦的——画布变小，而画作要保持不变，要么需要删除画作的某些部分，要么使其适应。

由于那时候没有关于响应设计的指导准则，设计师通常采用一种幼稚的方式，将元素放置在屏幕的各个部分。

例如，使用 <table> 标签。

从很多方面来说，使用  <table> 标签进行布局不是一种好的做法，例如：

  • 表格不适合布局，而是以紧凑形式显示列表数据
  • <table> 标签和 <frameset> 标签一样，不能响应，因此无法适应较小的屏幕尺寸
  • 表格需要在加载完所有单元格之后才能渲染，而使用 <div> 标签进行布局，则可以独立加载

大型网站案例

让我们看看一些大型网站如何处理这一难题。

以 YouTube 为例，你可能已经看过 YouTube 的桌面版，内容很多，包括顶部的标题，左侧的边栏，彼此堆叠的视频以及页脚。大多数内容对于移动端用户来说是不必要的。

imgonline-com-ua-twotoone-xJF4QFgv5p
YouTube 在桌面端和移动端的显示

YouTube 可能采用了响应式设计，将多余的元素隐藏在某个地方。

如果你设计过网站，就知道网站性能的重要性。你放在页面上的每个项目都会使网页变慢。因此，对 YouTube 而言，从服务器中获取内容然后隐藏内容是浪费资源。

YouTube 是一个老网站。修改已有代码可能会破坏一些内容。因此，YouTube 采用了一种动态服务。

动态服务是服务器检查网页是在桌面端还是在移动端打开的一种方法，然后，它会根据设备类型动态地为网页提供服务。

这种方法易于实现，因为设计人员不必处理不同的屏幕尺寸。但它也经常不受欢迎，因为如果配置不正确，可能会由于重复的内容问题而影响 SEO。

对于移动端版本，通常使用 m.<site-name> .com 这样的子域名。

类似地，Facebook、Wikipedia 和其他大型网站也采用这种方式。响应式网页设计是一种理想的解决方案，但是比较难以实现。

其他一些网站决定不采用响应式设计，而是构建一个移动应用程序。考虑到未来发展，构建移动应用程序是一种合理的方法。但是安装移动应用程序需要用户的信任，因为相比 Web apps，它们可以访问更多数据。

此外，本地移动应用程序的问题在于它们的开发成本很高，因为一套设计和功能必须要适应不同的平台。

响应式网页设计策略

上面说的是已有站点所面临的问题。对于新网站，响应式设计已成为与其他网站竞争的必要条件。

谷歌最近还推出了移动优先索引，也就是说，在移动设备上搜索时，谷歌会优先选择移动端友好的网站，这是需要做响应式涉及到另一个原因。

移动优先

假设你有一个装满东西的手提箱，将物品从较小的手提箱转移到较大的手提箱更容易呢，还是从较大的手提箱转移到较小的手提箱更容易？

在移动优先的策略下，首先使网站与移动设备兼容，然后再看在过渡到更大屏幕时如何调整。

download
移动优先策略

关于这个策略的一个误解是，人们认为它的意思是“仅适用于移动设备”。其实移动优先并不意味着仅针对移动端进行设计，这只是一种安全、容易的方法。

与桌面端相比，移动屏幕上的可用空间要小得多，因此必须用以显示核心内容。

此外，移动用户更频繁地切换页面，因此立即吸引他们的注意很重要。由于页面上的元素较少，并且重点放在内容上，因此网页可以更整洁。

网页设计的未来

互联网正以惊人的速度发展，人们正在将业务转移到线上，竞争比以往更加激烈。有人在讨论企业是否真的还需要移动应用程序。随着渐进式 Web 应用程序（PWA）和各种 Web API 的出现，网络比以前更加强大。现在，PWA 可以实现大多数功能，例如通知、定位、缓存和离线兼容性。

PWA 是一种基于网页的应用，使用 HTML，CSS 和 JavaScript 等常见 Web 技术构建。

创建 PWA 的过程非常简单，但这超出了本文的范围和核心思想，我们更多地关注 PWA 带来的好处吧。

download--2-
安装 PWA

你可能已经注意到上面 Chrome 浏览器中的“添加到主屏幕”按钮。对于普通网站，它只不过是主屏幕上的快捷方式图标。但是，如果网站是 PWA，则可以做很多非常酷的事情。

你不需要安装 Web 应用程序即可运行 PWA，它就像是本地应用程序。另外，PWA 可以作为独立的 Web 应用程序运行，顶部没有 Chrome 地址栏，这样就更像应用程序了。 PWA 也可以在桌面端工作，这使其成为任何新应用程序的理想之选。它可以在具有 Web 浏览器的任何平台上运行，安全并且具有所有基本的本地功能。

需要明确说明的是：PWA 不能替代本地应用程序。本地应用程序将继续存在。 PWA 只是实现这些功能的一种简单方法，它让你无需实际构建移动应用程序。

展望 Web 的未来

我们可以看到，随着技术不断发展，互联网变得越来越容易访问，上网的用户数量呈指数增长。

Web 设计趋势的转变更倾向于性能和用户体验，并且将持续如此。我们还将朝着 Web 3.0 迈进。

Web 3.0 是下一代互联网技术，在很大程度上依赖于机器学习和人工智能（AI）的使用。它旨在创建更多开放的、连接的且智能的网站和 Web 应用程序。

这意味着一切都将被连接起来，机器也将联网，类似于爬虫爬取网站信息并理解页面的上下文。而一个良好、干净、精巧、着重于内容的网页设计将帮助机器更好地理解事物。互联网是一个开放的地方，充满创新的事物。我们可能正在向一个意识控制的网络迈进！

结语

responsive_design
响应式设计

纵观互联网发展史，我们可以看到一些曾经流行的技术逐渐变得过时，人们仍在持续构建更好的互联网。在这个时代，用户体验已经成为首要关注点，任何应用都应该考虑性能和设计要让用户满意。我们不再像互联网发展之初那样只能从有限的工具中作出选择，而是可以自由地发挥创造力，将创造力转变为有价值的东西。

互联网充满魅力，我们可以从很多很棒的网站得到启发。让我们保持热情，继续前进。

原文：A Brief History of Responsive Web Design，作者：Abhishek Chaudhary

]]>