新手指南

Web 术语辞典

「页头是什么？」「API 是什么？」用图示与例子讲解常用术语。

分类

网站结构 (16)设计与布局 (16)动画与运动 (Animation & Motion) (16)技术术语 (Technical Terms) (14)SEO 与营销 (13)编程语言 (13)框架与库 (15)服务器与基础设施 (16)AI·生成式AI (14)CMS·网站创建工具 (16)Adobe 创意工具 (16)设计与图像编辑工具 (14)浏览器与搜索引擎 (14)

网站结构

Header (页眉)

yèméi

网站最顶部的导航区域，通常放置网站标志、菜单和搜索栏。

具体示例

网站顶部的“AIGP”标志和菜单部分。

Footer (页脚)

yèjiǎo

具体示例

页面最底部写有“© AIGP”的部分。

Sidebar (侧边栏)

cèbiānlán

放置在主要内容旁边的辅助区域，常用于显示分类列表或筛选器。

具体示例

管理界面左侧的菜单部分。

Breadcrumb (面包屑导航)

miànbāoxiè dǎoháng

一种层级显示，指示当前页面在网站中的位置。例如：首页 > 分类 > 文章标题。

具体示例

首页 / 提示词集合 / AOS.js淡入效果。

Hamburger Menu (汉堡菜单)

hànbǎo càidān

一个由三条横线（≡）组成的图标。点击后会展开菜单，常用于手机屏幕上。

具体示例

在手机上浏览网站时，右上角出现的三条横线图标。

全局导航

quán jú dǎo háng

指在网站所有页面中一致显示的主菜单，包含了指向首页、关于我们、产品、联系我们等关键部分的链接。它通常位于页眉或侧边栏，帮助用户快速跳转到网站的重要区域。

具体示例

一个公司网站顶部始终显示的包含“首页”、“关于我们”、“服务”、“招聘”、“联系我们”的菜单栏就是全局导航。

主内容区

zhǔ nèi róng qū

网页的中心部分，用于显示该页面的主要信息（如文章、产品描述、图片等）。它被页眉、页脚和侧边栏所包围，包含了用户访问该页面所要查看的核心内容。

具体示例

在博客文章页面中，显示文章标题、正文和图片的中央宽阔部分就是主内容区。

局部导航

jú bù dǎo háng

仅在特定版块或页面内显示的菜单或链接集合，提供与该区域相关的详细导航。它位于全局导航之下，帮助用户在当前的类别或主题内进行更深层次的浏览。

具体示例

在在线商店的“电脑”分类页面上，显示“笔记本电脑”、“台式机”、“配件”的子菜单就是局部导航。

首屏横幅区

shǒu píng héng fú qū

位于网页最顶部、紧接页眉下方的一个大型视觉区域。它包含引人注目的图片或视频、标题和主要行动号召按钮，旨在给访问者留下深刻的第一印象，并立即传达网站的目的。

具体示例

在公司着陆页上，带有美丽背景图片、中央有大标题“用创新技术构建未来”、下方有“了解更多”按钮的区域就是首屏横幅区。

搜索栏 (Sōusuǒ lán)

sōusuǒ lán

网站上的一个输入字段，允许用户查找特定信息或内容。用户可以在其中输入关键词，然后网站会显示相关的搜索结果。许多网站都会将它放置在顶部或侧边栏，以便访客高效地查找信息。

具体示例

在电商网站顶部输入的商品名称的文本框，或者新闻网站上用于查找特定文章的输入字段。

行动号召 (Xíngdòng hàozhào / CTA)

xíngdòng hàozhào (sī tī ā)

网站上旨在促使访客采取特定行动（如购买、注册或了解更多信息）的元素。通常以显眼的按钮或链接形式出现，设计上会吸引用户的注意力。行动号召是实现网站目标的关键部分。

具体示例

一个写着“立即购买”、“免费注册”或“了解更多”的按钮，或者指向“联系我们”的链接。

分页 (Fēnyè)

fēnyè

一种导航系统，将大量内容分成多个页面，允许用户在这些页面之间移动。它通常以一组数字或链接形式出现，如“1, 2, 3... 下一页”。这有助于组织和呈现内容，避免一次性显示过多信息，使用户体验更佳。

具体示例

博客文章列表页面或搜索结果页面底部的数字链接，显示“上一页”、“1”、“2”、“3”、“下一页”等。

区块

qū kuài

网页中一个独立的、有主题的内容分组。它通常用于将相关信息归类到共同的标题或目的下，使页面结构更清晰，用户更容易浏览和理解。

具体示例

在一个产品页面上，“特点”、“规格”和“评论”区域各自都是一个独立的区块。

卡片

kǎ piàn

一种矩形的UI元素，用于将相关的简洁信息（通常包含图片、标题、描述，有时还有按钮）组合在一起。卡片旨在高效展示多个内容项，并使其易于浏览。它们通常可以点击以显示更多详细信息。

具体示例

在流媒体服务的主页上，每个电影或电视节目的缩略图，连同其标题和简短描述，都以卡片的形式呈现。

折叠面板

zhé dié pán miàn

一种UI元素，允许用户点击以展开或折叠内容部分。它常用于节省空间和组织大量信息，特别是在常见问题解答部分或详细设置中。用户可以只显示他们当前需要的信息。

具体示例

在“常见问题”页面上，点击一个问题标题会显示其答案，再次点击则隐藏答案。这种交互式元素就是折叠面板。

表单

biǎo dān

允许用户向网站提交信息的输入字段和控件的集合。它通常包括文本框、下拉菜单、单选按钮和提交按钮。表单对于用户交互至关重要，例如注册、登录或进行购买。

具体示例

当您注册新账户时，输入用户名、电子邮件、密码并点击“注册”的页面就是一个表单。

设计与布局

Responsive Design (响应式设计)

xiǎngyìngshì shèjì

一种设计方法，使网站布局能根据PC、平板、手机等不同屏幕尺寸自动调整。

具体示例

在电脑和手机上浏览这个网站时，卡片的列数会自动变化。

Grid Layout (网格布局)

wǎnggé bùjú

一种将元素以格子状（行和列）排列的布局方法，常用于卡片列表。

具体示例

首页文章卡片以四列排列的部分。

Aspect Ratio (宽高比)

kuānggāobǐ

图片或视频的宽度与高度的比例。16:9为宽屏，4:3为标准屏，9:16为竖屏（手机视频）。

具体示例

YouTube视频通常是16:9，Instagram故事通常是9:16。

Margin (外边距) / Padding (内边距)

wàibiānjù / nèibiānjù

外边距是元素外部的留白，内边距是元素内部的留白。

具体示例

卡片周围的空隙（外边距）和卡片内文字与边框之间的空隙（内边距）。

弹性盒子 (Flexbox)

tánxìng hézi

CSS的一种布局模式，用于在单行或单列中排列项目，并有效地分配它们之间的空间。它简化了复杂布局的创建，常用于导航栏或卡片列表等。

具体示例

在网站的头部，你可以使用弹性盒子来水平对齐Logo和导航链接，并自动调整它们之间的间距。

视口 (Viewport)

shìkǒu

指用户在设备屏幕上看到的网页的可视区域。桌面电脑、平板电脑和智能手机等不同设备的视口大小各不相同。

具体示例

当你在智能手机上浏览网站时，浏览器显示内容的屏幕区域就是视口。网站会根据这个视口来调整其显示。

Z轴索引 (Z-index)

zì zhóu suǒyǐn

CSS属性之一，用于控制网页上元素的堆叠顺序。值越高的元素会显示在值较低的元素之上。常用于弹出窗口或下拉菜单等。

具体示例

为了让弹窗广告显示在网站主要内容之上，你会为广告设置一个较高的Z轴索引值，确保它堆叠在其他元素前面。

断点 (Breakpoints)

duàndiǎn

在响应式设计中，断点是指当屏幕宽度（视口）达到特定值时，网站布局或样式发生变化的临界点。它们允许网站适应并为不同设备尺寸提供优化的显示。

具体示例

为了在移动设备上垂直显示导航栏，而在平板电脑或桌面设备上水平显示，你可以设置一个特定的屏幕宽度（例如768像素）作为断点。

留白

liú bái

留白是设计元素之间的空白区域。它能提高内容的可读性，并帮助引导视线聚焦于重要部分。适当的留白可以平衡布局，营造出精致、专业的视觉效果。

具体示例

在新闻标题和正文之间留出足够的空白，可以使文章更易于阅读。

首屏横幅区

shǒu píng héng fú qū

首屏横幅区是网页顶部一个大型区域，通常包含醒目的图片、视频或标题。它的目的是吸引访问者的注意力，并立即传达网站的价值或目的。该区域通常会包含一个主要的行动号召按钮。

具体示例

在公司主页上，背景是壮丽的风景照片，中央有一个大大的“开始免费试用”按钮，这个区域就是首屏横幅区。

卡片式布局

kǎ piàn shì bù jú

卡片式布局是一种将信息组织到称为“卡片”的小型独立容器中的设计技术。每张卡片通常包含图片、标题和简短描述。这种布局可读性高，外观整洁有序，非常适合展示商品列表或博客文章等内容。

具体示例

在电商网站的商品列表页上，每个商品的图片、名称、价格和评分都整齐地排列在各自的卡片中，形成一个网格。

页脚

yè jiǎo

具体示例

头部 (Header)

(tóu bù)

网页最顶部的区域，通常包含网站的标志、导航菜单，有时还有搜索栏。它的设计目的是为了快速访问网站的品牌信息和主要功能。

具体示例

当你打开一个网站时，页面最上方显示公司标志和菜单按钮的部分就是头部。

侧边栏 (Sidebar)

(cè biān lán)

网页主内容旁边（通常是左侧或右侧）的垂直区域。它常用于显示辅助内容，如导航链接、广告、相关信息或搜索筛选器。

具体示例

在线商店中，页面左侧垂直排列的产品类别列表或筛选选项就是侧边栏。

容器 (Container)

(róng qì)

在网页布局中，容器是一个概念上的“盒子”，用于将相关内容或元素进行分组和组织。它通过限制宽度、居中或应用内边距来控制内容的显示，使布局更具可读性和结构性。

具体示例

许多网站的主内容都居中显示，两侧留有空白。这个容纳居中内容的无形盒子就是一个容器。

粘性元素 (Sticky Element)

(nián xìng yuán sù)

用户滚动页面时，仍固定在屏幕特定位置（如顶部）的元素。这通常用于保持导航菜单或重要信息始终可访问。

具体示例

在新闻网站上，如果你向下滚动页面时，顶部的导航栏仍然保持可见，那么它就是一个粘性元素。

动画与运动 (Animation & Motion)

Fade In / Fade Out (淡入/淡出)

dàn rù / dàn chū

一种动画效果，使元素缓慢显示（淡入）或逐渐消失（淡出）。

具体示例

向下滚动时，文章卡片平滑地出现的效果。

Slider / Carousel (轮播图/滑块)

lún bō tú / huá kuài

一种用户界面，图片或内容可以横向滑动切换。Swiper是一个典型的库。

具体示例

购物网站上主图片自动切换的部分。

Parallax (视差滚动)

shì chā gǔn dòng

一种效果，当滚动时，背景和前景以不同的速度移动，营造出深度感。

具体示例

滚动时背景图片缓慢移动的网站。

Hover Effect (悬停效果)

xuán tíng xiào guǒ

当鼠标光标悬停在元素上时发生的变化，例如颜色改变、放大等。

具体示例

将鼠标悬停在按钮上时，按钮颜色变深的效果。

Transition (过渡)

guò dù

一种动画，使状态变化平滑进行。例如，颜色不是瞬间改变，而是柔和地过渡。

具体示例

打开菜单时，菜单平滑滑出的动作。

关键帧动画 (Guānjiànzhēn Dònghuà)

ㄍㄨㄢㄐㄧㄢㄓㄣㄉㄨㄥㄏㄨㄚˋ

CSS中用于定义动画中间状态的方法。通过在动画的不同阶段指定关键点（关键帧），可以创建复杂的运动序列、颜色变化或其他转换。它允许精确控制元素属性随时间的变化。

具体示例

定义一个动画，使元素从左向右移动，同时颜色从红色变为蓝色，通过在动画持续时间的0%、50%和100%处设置特定的样式。

缓动函数 (Huǎndòng hánshù)

ㄏㄨㄢˇ ㄉㄨㄥˋ ㄏㄢˊ ㄕㄨˋ

定义动画速度变化模式的函数。它通过模拟现实世界的物理效果，使动画感觉更自然，例如缓慢开始然后加速，或反之。常见的包括 `linear`、`ease-in`、`ease-out` 和 `ease-in-out`。

具体示例

使用 `ease-out` 缓动函数，让一个按钮在点击后平滑地向上滑动，然后轻轻地停止到位，以提供更自然的动画效果。

CSS 变换 (CSS Biànhuàn)

ㄙㄧㄝˋ ㄙㄧㄅㄧㄢˋ ㄏㄨㄢˋ

CSS属性，允许你修改元素在2D或3D空间中的形状和位置。它包括 `translate`（移动）、`scale`（缩放）、`rotate`（旋转）和 `skew`（倾斜）等功能，是许多网页动画的基础。这些功能可以组合以创建复杂的效果。

具体示例

使用 `rotate(45deg)` 将图标旋转45度，或者使用 `scale(1.2)` 将图片放大1.2倍，以创建交互式视觉效果。

动画库

dòng huà kù

动画库是一组代码，可以简化动画的实现过程。它提供预先构建好的功能，让你无需从头开始创建动画，从而节省时间并实现更复杂的动效。常见的动画库有GSAP和Anime.js。

具体示例

我使用动画库为网站的加载界面添加了一个流畅的旋转动画。

滚动触发动画

gǔn dòng chù fā dòng huà

滚动触发动画是一种机制，当用户滚动页面到特定位置时触发动画。例如，当元素滚动到屏幕中央时淡入或旋转。这可以创建一种随着滚动而变化的、富有动感的交互体验。

具体示例

在我的作品集网站上，我设置了滚动触发动画，使得项目图片在滚动时滑入。

SVG动画

S-V-G dòng huà

SVG动画是为SVG（可缩放矢量图形）格式的图像或形状添加动效的技术。它利用矢量图形的特性，可以创建如线条绘制、形状变形、颜色变化等流畅的动画效果。非常适合用于徽标、图标和插画的动画制作。

具体示例

我实现了一个SVG动画，使得公司徽标在页面加载时以线条绘制的方式呈现。

粒子动画

lì zǐ dòng huà

粒子动画是指大量微小元素（粒子）像雪花、火花或气泡一样运动的动画。每个粒子的运动都很简单，但大量粒子聚集在一起就能创造出复杂而迷人的视觉效果。常用于背景或特殊效果。

具体示例

我在网站主视觉区域的背景中添加了粒子动画，粒子像星空一样闪烁和移动。

Lottie 动画

Luòdì dònghuà

一种轻量级、高质量的动画格式，用于网页和移动应用。它通过将Adobe After Effects制作的矢量动画导出为JSON文件，实现复杂动画的轻松集成。

具体示例

当你在网站上看到可爱的角色动画，或者在应用中点击按钮时出现酷炫效果时，通常就是使用了Lottie动画。

Web 动画 API (WAAPI)

Wèibù dònghuà API (WAA-pī)

浏览器内置的、用于使用 JavaScript 动画网页元素的标准 API。它提供了一种强大的方式来控制复杂的动画序列和动态行为，这些在纯 CSS 动画中可能难以实现。

具体示例

当你需要根据用户交互协调多个元素同时动画，或者通过编程动态改变动画的速度和方向时，会使用 WAAPI。

弹性动画

Tánxìng dònghuà

一种模拟物理弹簧运动的动画风格。元素不会直接停止在目标位置，而是会稍微超出一点然后回弹，从而产生更自然、更流畅的感觉。

具体示例

当按钮点击后轻微压缩然后像弹簧一样恢复原状，或者列表项出现时带有微妙的“弹性”跳动效果时，就会使用弹性动画。

运动路径动画

Yùndòng lùjìng dònghuà

一种动画技术，其中元素沿着预定义的路径移动。这使得元素可以沿着复杂的曲线或形状移动，而不仅仅是直线，从而创建出更具动态和表现力的动画。

具体示例

当地图上的图标沿着特定路线移动，或者网站标志以波浪形曲线轨迹出现在屏幕上时，就会使用运动路径动画。

技术术语 (Technical Terms)

API (应用程序接口)

yīng yòng chéng xù jiē kǒu

软件之间进行信息交流的接口。它是一种机制，例如 '访问这个URL就能获得数据'。

具体示例

AIGP 使用 REST API 从 WordPress 获取博客数据。

CSS (层叠样式表)

céng dié yàng shì biǎo

用于指定网页外观（颜色、大小、布局、动画）的语言。

具体示例

将文字设为红色、将按钮设为圆角、调整边距。

JavaScript (JS)

jiā wǎ sī kè lǐ pǔ tè

一种为网页添加动态和交互性的编程语言。实现点击后发生某些事情的功能。

具体示例

点击按钮时菜单弹出的动作。

CDN (内容分发网络)

nèi róng fēn fā wǎng luò

一种将文件部署在全球各地的服务器上，并从离用户最近的服务器进行分发的机制。

具体示例

不将 Swiper 代码放在自己的服务器上，而是从 CDN 加载。

npm / Package (npm / 包)

yán pí yán / bāo

一种机制，用于下载其他人编写的程序（库）并在自己的项目中 F使用。

具体示例

通过 `npm install swiper` 添加轮播图功能。

HTTP/HTTPS

H.T.T.P. / H.T.T.P.S. (艾七踢踢屁 / 艾七踢踢屁艾斯)

网页浏览器和服务器之间用于交换信息的通信协议。HTTPS是HTTP的安全版本，增加了加密功能以确保数据在传输过程中的安全性。当网站地址以`https://`开头时，表示正在使用安全的连接。

具体示例

当你在网上购物时输入信用卡信息，如果地址栏显示`https://`开头，就表示你的信息正在通过安全连接发送。

前端 (Frontend)

qián duān (前段)

指的是用户直接与网站或应用程序交互的部分。它包括屏幕上显示的所有视觉元素，如布局、按钮和表单。前端主要使用HTML、CSS和JavaScript等技术进行开发。

具体示例

当你浏览一个网站时看到的文字、图片、布局，以及你点击的所有按钮或菜单，都是该网站前端的一部分。

后端 (Backend)

hòu duān (后段)

指的是在网站或应用程序后台运行，用户无法直接看到的部分。它负责数据处理、与数据库交互以及执行服务器端逻辑。通常使用Python、PHP或Node.js等编程语言进行开发。

具体示例

当你在网上商店将商品添加到购物车或登录时，检查商品库存、用户认证等处理都是在后端完成的。

数据库 (Database)

shù jù kù (数据库)

一个用于以有组织的方式存储和管理信息的系统。网站上的大多数动态内容，如用户资料、产品列表或博客文章，都存储在数据库中。这使得能够快速检索和更新所需的信息。

具体示例

当你在网上商店搜索各种商品或查看你的订单历史时，所有这些信息都是从商店的数据库中获取的。

DOM

dòu mǔ

DOM（文档对象模型）是一种编程接口，它将HTML文档表示为树形结构，允许脚本语言（如JavaScript）动态访问和修改页面内容。

具体示例

JavaScript中的`document.getElementById('logo')`通过DOM获取ID为“logo”的元素。

JSON

jié sēn

JSON（JavaScript对象表示法）是一种轻量级的数据交换格式。它基于JavaScript语法，但独立于语言，易于阅读和解析。

具体示例

API常返回JSON数据，例如`{"城市": "北京", "温度": 25}`。

Ajax

āi jiā kè sī

Ajax（异步JavaScript和XML）是一种在不重新加载整个页面的情况下与服务器交换数据的技术。它让网页应用更快速、更流畅。

具体示例

在搜索框中输入时，自动补全建议不断出现而不刷新页面，就是Ajax的典型应用。

Git

jí tè

Git是一个分布式版本控制系统，用于追踪文件的修改历史。它允许多人同时协作开发，而不会互相干扰。

具体示例

使用Git，你可以通过`git log`查看每次提交的详细记录，了解项目的演变过程。

URL

yōu ā ěr ài

URL（统一资源定位符）是互联网上资源的地址，例如网页或图片。浏览器通过URL找到并显示你请求的内容。

具体示例

URL `https://www.baidu.com/s?wd=天气`中的`?wd=天气`是搜索关键词参数。

SEO 与营销

SEO (搜索引擎优化)

sī yī ōu

优化网站，使其在谷歌等搜索引擎的搜索结果中排名靠前。主要调整标题、H标签和内部链接等。

具体示例

在搜索“Swiper轮播图”时，让您的网站出现在搜索结果的第一页。

MEO (地图引擎优化)

mǔ yī ōu

一种让您的商家在谷歌地图搜索中获得更高排名的策略。对于实体店业务非常重要，主要通过优化Google商家资料实现。

具体示例

提高在谷歌地图中搜索“上海咖啡店”时，您的咖啡店的排名。

AIO (AI搜索优化)

yī yī ōu

优化您的网站，使其内容在ChatGPT、Perplexity等AI搜索中被引用或参考。也称为AI概述优化。

具体示例

确保当用户通过Google搜索的AI摘要功能提问时，您的网站信息能被引用。

LLMO (大型语言模型优化)

lè lè mǔ ōu

一种优化方法，旨在让ChatGPT、Gemini、Claude等大型语言模型（LLM）在生成回答时引用或参考您的内容。

具体示例

当有人向ChatGPT提问“推荐的CSS库有哪些？”时，您的文章能被引用。

GEO (生成式引擎优化)

jī yī ōu

优化您的网站，使其信息被AI搜索引擎（如SGE、Perplexity等）的生成结果所包含。结构化数据和E-E-A-T是关键。

具体示例

当在Perplexity上提出技术问题时，您的解释文章能作为来源显示。

OGP (开放图谱协议)

ōu jī pī

设置在社交媒体上分享链接时显示的标题、图片和描述。是Open Graph Protocol的缩写。

具体示例

在微信中发送URL时，显示的缩略图和摘要。

JSON-LD (结构化数据)

jié sēn lè dé

一种特殊的JSON格式描述，用于告诉搜索引擎页面的内容，例如“这是一篇文章”、“这是一个步骤”。它是富文本搜索结果的来源。

具体示例

Google搜索结果中出现的星级评分或步骤列表，就是JSON-LD的功劳。

Affiliate (联盟营销)

ā fēi lì yè tè

一种通过在自己的网站上推荐商品或服务，当用户通过您的链接购买或注册时获得佣金的机制。

具体示例

通过“强烈推荐此工具”的链接进行注册后，推荐人将获得报酬。

关键词研究

guān jiàn cí yán jiū

查找并分析用户在搜索引擎中实际输入的搜索词语和短语的过程。它有助于优化网站内容，通过理解用户需求来吸引相关的搜索流量。

具体示例

对于一个咖啡豆网站，您可能会研究“最好的咖啡豆”、“如何在家里煮咖啡”或“有机咖啡”等关键词。

反向链接

fǎn xiàng liàn jiē

指从一个网站指向另一个网站的链接。搜索引擎将其视为对内容的“投票”，高质量的反向链接越多，网站的信任度和权威性就越高，从而有助于提升搜索排名。

具体示例

如果一个知名新闻网站引用了您的博客文章并添加了链接，这对您的网站来说就是一个有价值的反向链接。

元描述

yuán miáo shù

指在搜索引擎结果页面中，显示在网页标题（链接）下方的简短摘要。它是用户决定是否点击的重要因素，撰写简洁吸引人的描述可以有效提高点击率。

具体示例

在Google搜索结果中，网站标题下方显示的2-3行描述性文本就是元描述。

搜索结果页 (SERP)

sōu suǒ jié guǒ yè (SERP)

指用户在搜索引擎中输入关键词后显示的结果页面。它包含各种形式的结果，如自然搜索列表、付费广告和丰富摘要。SEO的目标就是在此SERP上获得更高的排名。

具体示例

当您在Google中输入一个查询后，看到的包含蓝色链接标题和描述的整个页面就是SERP。

CRO (转化率优化)

CRO (zhuǎn huà lǜ yōu huà)

指提高网站访问者完成期望目标（如购买产品、填写表格或注册会员）的比例的过程。这通常通过改善用户体验和A/B测试来实现。

具体示例

一个电商网站重新设计其产品页面布局或更改“立即购买”按钮的颜色，以鼓励更多访问者完成购买，这就是CRO的例子。

编程语言

HTML (超文本标记语言)

ài qī yī mǔ ài lè

用于构建网页“骨架”的语言。它定义了标题、段落、图片、链接等结构。是所有网站的基础。

具体示例

像 `<h1>标题</h1><p>正文</p>` 这样编写。

PHP (超文本预处理器)

pī ài chī pī

一种在服务器端运行的编程语言。它是WordPress的核心，通过与数据库交互来生成动态页面。

具体示例

WordPress的主题和插件都是用PHP编写的。

TypeScript (类型脚本)

tài pǔ sī kè ruì pǔ tè

一种为JavaScript添加“类型”的语言。它预先定义变量可以接受的值的类型，从而防止错误。在大规模开发中是必不可少的。

具体示例

写 `const age: number = 25;`，如果尝试给 `age` 赋一个字符串值，就会报错。

Python (派森)

pài sēn

在AI、机器学习和数据分析中最常用的语言。语法简单易读。在Web开发中，Django和Flask是著名的框架。

具体示例

ChatGPT和Stable Diffusion的后端都是用Python构建的。

SQL (结构化查询语言)

sī kù yǐn lè

一种专门用于指示数据库“给我这个数据”或“保存这个数据”的语言。

具体示例

`SELECT * FROM users WHERE age > 20;` 用于获取所有年龄大于20岁的用户列表。

JavaScript

JavaScript (zhā-wǎ-sī-kè-rì-pǔ-tè)

一种用于为网页添加交互性和动态功能的编程语言。它直接在浏览器中运行，是前端开发的核心。如今也用于服务器端编程和移动应用开发。

具体示例

用于实现点击按钮时菜单的展开/收起、表单输入验证、或者无需重新加载页面就能动态更新内容等功能。

Go

Go (gōu)

由Google开发的简单快速的编程语言。它在并发处理（同时执行多个任务）方面表现出色，常用于Web服务器和云服务等后端开发。作为编译型语言，它执行速度快且依赖管理简单。

具体示例

适用于需要同时处理大量用户请求的Web API服务器，或者采用微服务架构的系统开发。

Rust

Rust (lā-sī-tè)

一种兼顾安全性和速度的系统编程语言。它在保证内存安全的同时，能提供与C++相当的高性能。常用于需要高可靠性的场景，如浏览器渲染引擎、操作系统和嵌入式系统。

具体示例

被用于Firefox网络浏览器的主要组件、区块链技术以及高性能WebAssembly的开发中。

Kotlin

Kotlin (kē-tè-lín)

一种现代简洁的编程语言，以作为Android应用开发的官方推荐语言而闻名。它与Java完全兼容，同时提供更安全、更易读的语法。也支持服务器端开发和Web前端。

具体示例

广泛用于Android智能手机应用开发，并被Google、Uber、Netflix等大公司的应用所采用。

CSS (层叠样式表)

céng dié yàng shì biǎo

CSS（层叠样式表）是一种用于描述HTML或XML文档呈现的样式表语言。它定义了元素在屏幕、纸张或其他媒体上应如何显示，使设计者能够控制网页的外观和感觉。通过将设计与结构分离，CSS可以有效地管理和更改网站的设计。

具体示例

你可以使用CSS来改变网页的背景颜色，设置标题的字体大小，或者将元素排列成多列布局。

Java

jiā wá

Java是一种高级、基于类的、面向对象的编程语言，旨在尽可能减少实现依赖。它广泛用于构建健壮、可扩展的应用程序，包括企业级后端系统、Android移动应用和大数据处理。

具体示例

许多大型网络应用程序，例如银行或社交媒体平台使用的应用程序，都使用Java作为其服务器端逻辑。它也是开发原生Android应用程序的主要语言。

Ruby

lǔ bǐ

Ruby是一种动态、开源的编程语言，专注于简洁性和生产力。它具有优雅的语法，易于阅读和编写，并以其流行的Web框架Ruby on Rails而闻名。

具体示例

你可以使用Ruby，特别是结合其Rails框架，快速构建像博客平台、电子商务网站或社交网络服务这样的Web应用程序。

C#

xī shà pǔ

C#（发音为“C-sharp”）是微软开发的一种现代、面向对象的编程语言。它广泛用于构建Windows桌面应用程序、使用Unity引擎开发游戏以及使用ASP.NET Core框架构建强大的Web应用程序和API。

具体示例

你可以使用C#创建Windows桌面应用程序，在Unity中开发游戏，或者使用ASP.NET Core构建健壮的后端服务和网站。

框架与库

React (前端库)

ruì'āktè

由Meta（原Facebook）开发的UI构建库。通过组合组件来构建页面。目前最受欢迎。

具体示例

Instagram、Netflix、Airbnb等知名网站都在使用。AIGP也基于React。

Next.js (全栈框架)

nèikèst jiéyì'sī

一个基于React的成熟Web框架。集成了服务器端渲染、静态生成和API路由。

具体示例

这个AIGP网站就是用Next.js 16构建的。

Vue.js (渐进式框架)

wéi'ǔ jiéyì'sī

一个学习成本低的UI框架。基于HTML模板，直观易用。在中国Web开发领域也很受欢迎。

具体示例

常被选择用于快速构建内部工具或管理后台。

Tailwind CSS (实用工具类CSS框架)

tài'ěrwén dí sī'i'sī

一个通过组合类名来应用样式的CSS框架。无需设计文件，即可快速构建UI。

具体示例

使用 class="text-lg font-bold text-blue-600" 即可创建大号、粗体、蓝色的文字。

jQuery (JavaScript库)

jiékuì'èruì

曾经市场份额巨大的JavaScript库。可以轻松编写DOM操作。目前正逐渐向React/Vue等框架迁移。

具体示例

通过 `$('.menu').slideToggle();` 可以实现菜单的展开/收起动画。

Node.js (JavaScript运行时)

nuòdé jiéyì'sī

一个让JavaScript能在服务器端运行的执行环境。其优势在于前后端可以使用同一种语言编写。

具体示例

npm install 命令和Next.js的开发服务器都运行在Node.js上。

Angular (安古拉)

ān gǔ lā

Angular是Google开发的前端框架，适合构建大型Web应用程序。它基于TypeScript，提供双向数据绑定和依赖注入等功能。

具体示例

在开发企业仪表板或复杂的单页面应用（SPA）时，Angular经常被使用。

Lodash (洛达什)

luò dá shí

Lodash是一个JavaScript实用工具库，提供用于操作数组、对象、字符串等的便捷函数。它能提高代码可读性并减少重复任务。

具体示例

使用Lodash函数可以轻松地从数组中删除重复项或创建对象的深拷贝。

Express (快速)

kuài sù

Express是一个运行在Node.js上的轻量级Web应用程序框架，简化了服务器端开发。它提供路由和中间件机制，广泛用于构建REST API。

具体示例

可以使用Express构建用于管理用户注册或产品信息的API。

Svelte (斯维尔特)

sī wéi ěr tè

Svelte是一种现代前端框架，采用新方法在编译时生成高效代码，而不使用虚拟DOM。开发者编写声明式代码即可创建运行时开销最小的应用程序。

具体示例

使用Svelte开发包含交互式表单和动画的轻量级Web应用可以获得更好的性能。

组件 (Component)

zǔ jiàn

将UI的各个部分视为独立、可复用的模块。每个组件拥有自己的结构和逻辑，组合起来构成整个界面。

具体示例

按钮、卡片、标题栏等都可以是组件。

单页应用 (SPA)

dān yè yìng yòng

只在初始加载一个HTML页面，之后通过JavaScript动态更新内容，无需整页刷新。提供流畅的用户体验。

具体示例

Gmail、Google Maps等应用，点击链接不会重新加载整个页面。

状态管理 (State Management)

zhuàng tài guǎn lǐ

集中管理应用程序数据及UI状态的机制。有助于理清复杂应用中的数据流，保持界面一致。

具体示例

使用Redux、Vuex、Zustand等库来管理用户登录状态或购物车数据。

MVC (Model-View-Controller)

M V C

将应用程序分为模型（数据）、视图（界面）和控制器（逻辑）的设计模式。职责分离让代码更易维护。

具体示例

Ruby on Rails 和 Angular 都采用 MVC 模式。

服务端渲染 (SSR)

fú wù duān xuàn rǎn

在服务器上生成完整的HTML页面再发送给客户端的技术。首屏加载更快，且更有利于搜索引擎优化。

具体示例

Next.js 和 Nuxt.js 原生支持服务端渲染。

服务器与基础设施

共享主机 (Rental Server)

lèn tǎ'ěr sā'i'bò

一种每月只需几百日元即可发布网站的共享服务器。易于使用WordPress。适合初学者。

具体示例

例如，Xserver、ConoHa WING、Sakura Server等日本服务商。

VPS (虚拟专用服务器)

bù'ī pí'i'sī

将一台物理服务器虚拟化分割，并使其像专用服务器一样使用的服务。具有root权限，自由度高。

具体示例

AIGP的Next.js运行在Xserver VPS上的Docker中。

AWS (亚马逊云服务)

ē'i'dá bùlǐ'wéi'ěsī

亚马逊提供的全球最大的云计算服务集合。包含EC2（服务器）、S3（存储）、Lambda（无服务器）等200多种服务。

具体示例

Netflix、任天堂、NASA等全球大型企业都在使用。

Docker (容器技术)

duōkè'ěr

一种将应用程序放入名为“容器”的“箱子”中，使其在任何环境中都能以相同方式运行的虚拟化技术。

具体示例

通过 `docker compose up` 可以一键启动开发环境。

Vercel (前端部署平台)

wǎ'ěrsè'ěr

Next.js开发方提供的托管服务。只需将代码推送到Git仓库，网站即可自动部署。

具体示例

通过GitHub集成，代码更新后几秒钟即可反映到生产环境的网站上。

Cloudflare (内容分发网络服务)

kèláo défúléi'ěr

提供免费的CDN、DNS、DDoS防御和SSL证书服务。通过Cloudflare Pages也可以进行网站托管。

具体示例

只需将其置于网站前端，即可实现加速和增强安全性。

SSL / HTTPS (安全通信协议)

ìsī'sī'èl'ěr

一种加密Web网站和浏览器之间通信的机制。以 https:// 开头的URL表示该网站已启用SSL。它还会影响SEO。

具体示例

浏览器地址栏中显示锁形图标即是SSL通信的证明。

nginx (Web服务器)

ēnjīněkè sī

一款高速的Web服务器/反向代理。能够同时处理大量访问。作为Apache的下一代产品而普及。

具体示例

在VPS上，将nginx放置在Next.js前端，负责SSL处理和缓存。

CDN (内容分发网络)

C-D-N (nèi róng fēn fā wǎng luò)

一种分布式的服务器网络，旨在快速向用户交付网站内容（如图片、视频和CSS文件）。它通过从地理位置上最接近用户的服务器提供内容，从而提高页面加载速度并减轻主服务器的负载。

具体示例

一个全球性的新闻网站使用CDN来分发其文章中的图片和视频。无论用户身在何处，CDN都能确保他们从最近的服务器获取这些媒体文件，从而实现快速浏览体验。

DNS (域名系统)

D-N-S (yù míng xì tǒng)

一种将人类可读的域名（例如 example.com）转换为计算机可理解的IP地址（例如 192.0.2.1）的系统。这使用户能够通过易于记忆的名称访问网站，而不是数字地址。它扮演着互联网“电话簿”的角色。

具体示例

当你在浏览器中输入“baidu.com”时，DNS会将该域名解析成百度服务器的IP地址，从而让你的浏览器能够连接到正确的服务器并显示网页。

负载均衡器 (Load Balancer)

fù zài jūn héng qì (Load Balancer)

一种设备或软件，用于将网络流量或请求均匀地分配到多个服务器。这可以防止单个服务器过载，并提高Web应用程序的可用性和响应速度。

具体示例

一个热门的在线游戏在高峰时段会有大量玩家同时登录。负载均衡器会将这些玩家的连接请求智能地分配到后端的多台游戏服务器上，确保每位玩家都能获得流畅的游戏体验，避免服务器卡顿或崩溃。

Kubernetes (K8s)

Koo-ber-net-ees (Kā-bā-sī)

一个开源系统，用于自动化部署、扩展和管理容器化应用程序。它在多台机器（节点）集群中高效地编排容器，为应用程序提供高可用性和弹性。

具体示例

一家科技公司使用Kubernetes来管理其云服务上的数百个微服务。Kubernetes负责监控这些服务的健康状况，并在流量高峰时自动增加容器实例，确保服务稳定可靠。

数据库

shù jù kù

数据库是一个有组织的数据集合，以电子方式存储和访问。它被网站和应用程序用来持久地存储用户数据、产品信息或设置。数据库旨在实现高效的数据检索和管理。

具体示例

在线商店会将所有客户账户详情、订单历史和产品库存状态存储在数据库中。

无服务器计算

wú fú wù qì jì suàn

无服务器计算是一种云执行模型，开发人员可以构建和运行应用程序而无需管理服务器。云提供商动态地管理服务器的配置和扩展。代码根据事件执行，您只需为实际使用的计算资源付费。

具体示例

当用户上传文件时，一小段代码（例如 AWS Lambda 函数）会自动运行来处理该文件，而无需您管理底层服务器。

API (应用程序编程接口)

A-P-I

API 是一组规则和协议，允许不同的软件应用程序之间进行安全通信。它定义了一个程序如何向另一个程序请求特定服务并接收响应。这使得各种服务和应用程序能够无缝协作。

具体示例

天气预报应用程序使用气象服务的 API 获取最新的天气数据并显示给用户。

防火墙

fáng huǒ qiáng

防火墙是一种网络安全系统，根据预设的安全规则监控和控制传入和传出的网络流量。它的主要目的是保护服务器或网络免受未经授权的访问和恶意攻击。它充当受信任的内部网络和不受信任的外部网络之间的屏障。

具体示例

你的家用 Wi-Fi 路由器通常具有防火墙功能，可以阻止来自互联网的可疑连接直接到达你的电脑。

AI·生成式AI

LLM (大型语言模型)

dà xíng yǔ yán mó xíng

经过海量文本数据训练的巨型AI模型。可用于文本生成、摘要、翻译、代码生成等多种用途。

具体示例

如 ChatGPT (GPT-4)、Claude、Gemini、DeepSeek 等

Prompt (提示词)

tí shì cí

指对AI发出的指令或问题。提示词的编写方式会极大地影响AI的输出质量。

具体示例

例如，“使用 Swiper 创建一个无限循环的轮播图”就是一个提示词

RAG (检索增强生成)

jiǎn suǒ zēng qiáng shēng chéng

一种在AI回答前先搜索外部数据库，并将最新信息纳入回答生成的技术。旨在减少幻觉现象。

具体示例

例如，在回答前搜索公司内部文档的企业内部聊天机器人

Fine-tuning (微调)

wēi tiáo

指通过追加数据对现有AI模型进行再训练，使其专注于特定用途。

具体示例

例如，将通用的 GPT 模型定制成擅长医疗术语的专业AI

Stable Diffusion (稳定扩散)

wěn dìng kuò sàn

一种通过文本生成图像的开源AI。可在本地电脑上运行，模型可自由定制。

具体示例

例如，输入“龙与少女”即可自动生成插画

Token (令牌)

lìng pái

AI处理文本时的最小单位。一个汉字约等于1~3个令牌。API费用通常根据令牌数量计算。

具体示例

例如，DeepSeek 每百万令牌仅 $0.14，价格极低

生成式AI

shēng chéng shì AI

一种能够像人类一样生成新内容（如文本、图像、音频或视频）的人工智能。它通过学习现有数据，模仿其模式和风格来创造原创输出。

具体示例

能够根据文本提示生成独特图像，或创作摘要和诗歌的AI，就是生成式AI的例子。

模型

mó xíng

在AI和机器学习的语境中，模型指的是经过训练的算法或系统本身。它就像一个“大脑”，从数据中学习模式，然后能够对新数据进行预测或生成输出。

具体示例

整个经过训练能够识别特定图像中是猫还是狗的AI系统，或者能够根据文本生成图像的AI系统，都被称为模型。

训练数据

xùn liàn shù jù

用于教授AI模型学习模式和规则的信息。这些数据越多、质量越高，模型的性能就越好。

具体示例

要训练AI识别猫，就需要数千张标记为“这是一只猫”的猫的图像作为训练数据。

推理

tuī lǐ

指已训练好的AI模型接收新的、未见过的数据，并基于这些数据进行预测、判断或生成内容的过程。这是模型“思考”或“行动”的阶段。

具体示例

当你向聊天机器人输入问题并获得回复，或者人脸识别系统从照片中识别出人物时，AI模型正在进行推理。

幻觉

huànjué

指生成式AI模型生成不真实、无意义或与其训练数据不符的信息的现象。AI会以非常自信的语气呈现这些虚构内容，因此用户核实其输出至关重要。

具体示例

询问AI“谁发明了电灯泡？”，它自信地回答“尼古拉·特斯拉于1920年发明了电灯泡”，而正确答案是托马斯·爱迪生于1879年。

嵌入

qiànrù

一种将单词、短语或其他数据转换为AI模型可以理解和处理的数值向量（一串数字）的方法。这种转换使AI能够理解不同信息之间的关系和相似性。

具体示例

单词“狗”和“小狗”可能被转换为在多维空间中彼此非常接近的数值向量，这表明它们对AI来说具有很强的语义相似性。

温度

wēndù

生成式AI模型中一个控制输出随机性或创造性的参数。较高的温度值会导致更具多样性、惊喜甚至有时更离谱的响应，而较低的值会使输出更集中、一致和可预测。

具体示例

在生成创意故事时，您可能会设置较高的温度以鼓励富有想象力和独特的情节。而对于事实问答，较低的温度可以确保更直接和准确的回答。

护栏

hùlán

为防止生成式AI生成不当、不准确或有害内容而设置的安全机制和规则。它们确保AI的输出保持在道德界限内并符合预期用途。

具体示例

医疗AI助手可能会设置护栏，以防止其给出医疗诊断或开处方，而是引导用户就此类关键建议咨询人类医生。

CMS·网站创建工具

WordPress (内容管理系统)

wò dé pǔ lái sī

全球市场份额约43%的开源CMS。由Automattic公司主导开发。通过插件和主题可自由扩展功能，适用于从博客、企业网站到电商等多种场景。

具体示例

例如，白宫、索尼音乐、BBC新闻等都在使用

Wix (网站搭建平台)

wēi kè sī

源自以色列的无代码网站搭建工具。由Wix公司（纳斯达克上市公司）运营。通过拖放式操作可直观设计网站，并包含托管服务。提供免费套餐。

具体示例

在个人作品集、小型商业网站中很受欢迎

Jimdo (网站创建服务)

jīn dù

源自德国的网站创建服务。在中国（或其他地区）由当地伙伴代理运营。其特点是AI可自动生成网站的“AI网站搭建器”。

具体示例

对中文支持良好，常用于小型个人网站或店铺

Studio (网站设计工具)

sī tǎ dí ào

源自日本的无代码网页制作工具。由STUDIO公司运营。设计自由度高，中文字体支持丰富。内置协作编辑和CMS功能。

具体示例

常用于设计师作品集和小型企业网站

Shopify (电商平台)

shòu bǎi fēi

源自加拿大的全球最大电商（网店）平台之一。整合了支付、库存、配送管理。通过月费制可轻松开设网店。

具体示例

例如，耐克、Supreme，以及许多D2C品牌都在使用

Squarespace (网站建设器)

sī kuài ěr sī pèi sī

源自美国的网站建设器，以其精美模板为特色。由Squarespace公司（纽交所上市公司）运营。提供大量专为摄影师和创作者设计的模板。

具体示例

在作品集、餐厅、婚礼网站中很受欢迎

Webflow (可视化网页开发工具)

wèi bù fú luò

专为设计师打造的可视化网页开发工具。无需编写代码即可构建专业的响应式网站。可通过GUI精细控制CSS。

具体示例

当设计师希望“无需代码创建专业品质网站”时，会选择它

Peraichi (一页网站搭建工具)

pé lái yī

源自日本的LP（着陆页）创建工具。由Peraichi公司运营。只需选择模板，填入文字和图片，即可完成一个单页网站。

具体示例

常用于活动公告、推广着陆页、名片式网页

无头CMS (Headless CMS)

wú tóu C-M-S

一种内容管理系统，将内容管理（后端）与内容展示（前端）分离。这意味着您只需创建一次内容，就可以将其发布到任何平台，如网站、移动应用或物联网设备。它为开发者提供了极大的灵活性，可以选择自己喜欢的前端技术。

具体示例

如果您希望在智能手机应用和网站上展示相同的博客文章，无头CMS可以帮助您在一个地方管理内容，然后将其分发到这两个平台。

无代码开发 (No-Code Development)

wú kài mǎ kāi fā

一种无需编写任何编程代码，通过可视化界面和拖放操作来创建应用程序或网站的方法。它使得技术知识较少的人也能将想法变为现实。这种方法通常能缩短开发周期并降低成本。

具体示例

使用Wix或Webflow等平台，通过可视化编辑器完全不写代码来构建自己的在线商店或作品集网站，就是无代码开发的一个例子。

模板 (Template)

mó bǎn

预先设计好的网站或文档布局和结构。它提供了一个起点，让用户无需从头开始设计即可高效地创建页面。模板通常包含占位内容和特定的美学风格，可以进行自定义。

具体示例

在WordPress上开始一个新博客时，您可能会选择一个“商业”或“作品集”模板，然后根据您的内容自定义其颜色和图片。

Drupal

Dǔ-rǔ-pà-ěr

一个功能强大的开源内容管理系统（CMS）。它非常灵活，常用于构建具有复杂功能的大型网站和Web应用程序。Drupal以其强大的安全性、可扩展性和模块化而闻名。

具体示例

大型政府网站、大学门户和主要媒体网站经常使用Drupal。您可以通过添加各种模块来灵活扩展其功能，以满足特定需求。

内容管理系统 (CMS)

nèi róng guǎn lǐ xì tǒng

一种用于创建、编辑和管理网站数字内容的软件应用程序。它允许用户无需深入的编程知识即可构建和维护网站。

具体示例

WordPress是一个流行的CMS，广泛用于博客、商业网站等，使内容更新变得简单。

页面构建器

yè miàn gòu jiàn qì

一种允许用户可视化创建和定制网页布局和设计的工具。它通常采用拖放界面，无需编写代码即可构建页面。

具体示例

在您的CMS中使用页面构建器，您可以轻松排列图片库、文本块和表单，以创建自定义设计的着陆页。

主题

zhǔ tí

一系列模板和样式表的集合，用于定义网站的整体外观、设计和布局。它允许您在不改变网站内容的情况下，轻松地改变其视觉呈现。

具体示例

如果您想刷新博客的外观，只需安装并激活一个新主题，即可立即更改其颜色、字体和页面结构。

插件

chā jiàn

一种为现有CMS或网站添加特定功能的小型软件。它允许您扩展系统的功能，而无需更改其核心代码。

具体示例

安装一个SEO插件可以帮助您的网站针对搜索引擎进行优化，使其更有可能在搜索结果中获得更高的排名。

Adobe 创意工具

Adobe (奥多比)

àoduōbǐ

由美国Adobe公司（纳斯达克股票代码：ADBE）提供的一系列创意软件。是摄影、视频、设计和网页制作行业的标准。通过按月付费的Creative Cloud订阅提供。

具体示例

几乎所有设计公司和视频制作专业人士都在使用Adobe。

Photoshop (图像处理软件)

túxiàng chǔlǐ ruǎnjiàn

行业标准的照片编辑和图像处理软件。广泛用于修饰、合成、色彩校正等，从专业摄影师到网页制作人员都在使用。也包含了AI功能“生成式填充”。

具体示例

消除商品照片背景，美化皮肤，制作宣传横幅图片。

Illustrator (矢量绘图软件)

shǐliàng huìtú ruǎnjiàn

行业标准的矢量图形创建软件。用于制作放大后不会失真的数据，如Logo、图标、插画、传单等。是印刷品设计的必备工具。

具体示例

制作公司Logo、名片、海报、包装设计。

XD (与Figma集成)

X.D. yǔ Fígmǎ jí chéng

Adobe XD曾是一款UI/UX设计工具，但在2023年已停止新销售。目前正转向与Figma集成（Adobe曾尝试收购Figma但最终放弃）。

具体示例

曾用于创建网页和应用的线框图及原型。

Premiere Pro (视频编辑软件)

shìpín biānjí ruǎnjiàn

专业视频编辑软件。用于编辑电影、电视节目和YouTube视频。与After Effects结合可实现高级视频表现。

具体示例

编辑高质量YouTube视频、企业宣传片、电影预告片。

After Effects (动态图形与视觉特效软件)

dòngtài túxíng yǔ shìjué tèxiào ruǎnjiàn

动态图形和VFX的经典软件。用于创建文字动画、效果合成和视频特殊效果。

具体示例

制作标题动画、爆炸特效、信息图表视频。

Lightroom (照片管理与编辑软件)

zhàopiàn guǎnlǐ yǔ biānjí ruǎnjiàn

专门用于大量照片管理和批量编辑的软件。擅长RAW图像处理、色调校正和预设应用。手机版可免费使用。

具体示例

统一并批量校正100张旅行照片的色调。

InDesign (桌面出版软件)

zhuōmiàn chūbǎn ruǎnjiàn

专门用于书籍、杂志、目录等多页印刷物布局的桌面出版(DTP)软件。是出版和印刷行业的标准工具。

具体示例

制作100页的产品目录或杂志的版面。

Creative Cloud (创意云)

/'kri:eɪtɪv klaʊd/

Adobe为其创意应用程序提供的订阅服务。它提供对Photoshop、Illustrator和Premiere Pro等一系列软件的访问权限，以及云存储和相关服务。它帮助创作者在不同设备间管理他们的项目和资产。

具体示例

您订阅Adobe Creative Cloud，就能在电脑上下载和使用Photoshop、Illustrator，并在线保存您的设计文件。

图层

/tú céng/

图层就像设计软件中堆叠在一起的透明纸张。每个图层可以容纳不同的元素，如文本、图像或形状，允许您独立编辑它们而不会影响设计的其他部分。这使得复杂的设计更容易管理和修改。

具体示例

在Photoshop中，您可能会将背景图像放在一个图层上，将人物照片放在其上方的另一个图层上，然后将文本放在最顶层的图层上，这样您就可以移动或更改文本而不会影响照片或背景。

矢量图

/shǐ liàng tú/

矢量图是使用数学方程式来定义线条、曲线和形状而非单个像素创建的图像。这意味着它们可以放大或缩小到任何尺寸而不会失真或像素化，因此非常适合用于标志和插图。

具体示例

在Illustrator中创建的公司标志就是矢量图，无论打印在名片上还是显示在巨大的广告牌上，它都能保持清晰锐利。

工作区

/gōng zuò qū/

创意软件中的工作区指的是屏幕上面板、工具和窗口的布局安排。您可以根据特定的任务，如照片编辑、视频编辑或网页设计，自定义您的工作区，从而提高工作效率。

具体示例

在Premiere Pro中，您可能会从侧重时间线和预览的“编辑”工作区切换到突出显示色彩校正工具的“颜色”工作区。

栅格图像 (或位图)

zhà gé tú xiàng (huò wèi tú)

一种由称为像素的独立点组成的图像格式。放大时，栅格图像可能会因为像素拉伸而出现锯齿或模糊。它们最适合用于照片和复杂的详细图像。

具体示例

用智能手机拍摄的照片或在Photoshop中创建的图像编辑都是栅格图像的典型例子。

蒙版

méng bǎn

一种用于隐藏或显示图像或图层部分的工具，而不会永久删除它们。它允许您控制特定区域的可见性，使部分透明或可见。这对于设计中的无损编辑至关重要。

具体示例

如果您想从照片中移除背景只显示人物，或者将图像裁剪成特定形状，就会使用蒙版。

画板

huà bǎn

设计文件中的可配置画布或工作区，您可以在其中创建设计。您可以在一个文档中拥有多个画板，从而可以同时设计网站的不同页面或移动应用程序的各种屏幕。这大大提高了工作效率。

具体示例

您可以将网站的首页和子页面，或移动应用程序的登录界面和个人资料界面，作为不同的画板在同一个文件中进行管理。

渐变

jiàn biàn

一种视觉效果，将两种或多种颜色平滑地融合在一起。它在颜色之间创建了渐进的过渡，可用于传达深度、维度或柔和的美感。渐变广泛应用于各种设计元素，如网站背景、徽标和插图。

具体示例

您可能会创建一个从蓝色平滑过渡到紫色的背景，或从黑色过渡到透明的背景，或用它来增加按钮的深度感。

设计与图像编辑工具

Figma (协同设计工具)

Fígmǎ (xié tóng shè jì gōng jù)

一款基于浏览器的UI/UX设计工具，由Figma公司运营。实时协同编辑是其最大优势。在网页设计领域市场份额正迅速扩大。

具体示例

团队同时创建和审阅网站设计。

Canva (在线设计工具)

Cānbā (zàixiàn shèjì gōngjù)

由澳大利亚Canva公司运营的在线设计工具。拥有丰富的模板，即使是没有设计经验的用户也能轻松制作社交媒体图片和演示文稿。

具体示例

使用模板制作Instagram帖子图片、演示文稿幻灯片和名片。

Affinity (创意软件套件)

Āfīnnìtí (chuàngyì ruǎnjiàn tàojiàn)

由英国Serif公司开发，现已被Canva公司收购。是一套买断制的创意软件，包括Photo（照片编辑）、Designer（矢量图形）和Publisher（桌面出版）三大核心产品。作为Adobe的替代品备受关注。

具体示例

寻求避免Adobe订阅费用的专业人士会将其作为替代品使用。

GIMP (免费图像编辑软件)

G.I.M.P. (miǎnfèi túxiàng biānjí ruǎnjiàn)

一款免费的开源图像编辑软件，功能与Photoshop相似。支持Windows/Mac/Linux。

具体示例

当想要进行专业图像编辑但不想花钱时的选择。

Sketch (Mac UI设计工具)

Skèchí (Mac U.I. shèjì gōngjù)

专为Mac设计的UI设计工具，由荷兰Sketch公司开发。在Figma出现之前，曾是UI设计的标准。特点是轻量且运行速度快。

具体示例

macOS用户在创建应用UI设计时使用。

Inkscape (免费矢量图形编辑器)

Ìnkēsīkēpǔ (miǎnfèi shǐliàng túxíng biānjí qì)

一款免费的开源矢量图形编辑器。可作为Illustrator的替代品使用。原生支持SVG格式。

具体示例

当想要免费制作Logo或图标的SVG数据时使用。

Adobe Photoshop

ā dōu bǐ Fó tuō shā pǔ

Adobe Photoshop是一款专业的图像编辑软件，广泛用于照片编辑和数字艺术创作。它具备图层、滤镜、选择工具等多种功能，适用于从照片修饰到复杂图形设计的广泛场景。

具体示例

Photoshop常用于去除照片中不需要的物体、更换背景或调整色调。

Adobe Illustrator

ā dōu bǐ Yī lā sī tè léi tè

Adobe Illustrator是一款用于创建和编辑矢量图形的专业设计工具。它适合设计徽标、图标、插图和印刷材料，因为图形在任何尺寸下都能保持清晰，不会损失质量。

具体示例

Illustrator常用于设计公司徽标或创建名片、宣传册等印刷材料的布局。

Procreate

Pǔ luó kè lì ài tè

Procreate是一款适用于iPad的强大数字绘画和插图应用。它具有直观的界面、丰富的笔刷库和图层支持，非常适合艺术家和设计师在移动设备上创作专业品质的作品。

具体示例

Procreate常用于在iPad上搭配Apple Pencil，轻松地在火车上或咖啡馆里绘制插图或创建数字草图。

Figma Mirror

Fēi gé mǎ Mǐ lè

Figma Mirror是一款官方应用，可让你在智能手机或平板电脑上实时预览Figma中创建的设计。它有助于通过在实际设备上检查UI/UX设计的外观和行为来进行测试和收集反馈。

具体示例

在Figma中设计好移动应用界面后，你可以使用Figma Mirror在自己的iPhone上测试点击和滚动交互，同时进行调整。

Adobe XD

(ā dé bǐ X D)

Adobe公司推出的一款矢量设计工具，专为UI/UX设计和原型制作而生。它允许设计师创建线框图、设计模型和交互式原型。它有助于可视化网站和移动应用程序的用户体验。

具体示例

您可以使用Adobe XD设计一个新手机应用的屏幕流程，并创建一个包含按钮点击动画的原型。

Miro

(mǐ luò)

一个在线协作白板平台，专为团队协作设计。它用于头脑风暴、构思、创建线框图、可视化用户流程以及许多其他设计过程。团队可以实时编辑和互动。

具体示例

您的团队使用Miro为网站的新部分集思广益，通过在共享白板上使用便签和图表来组织想法。

Zeplin

(zè pǔ lín)

一个协作工具，旨在简化设计师和开发人员之间的设计交付流程。它将Figma或Sketch等工具中的设计导入，并自动生成开发所需的规范（CSS代码、资产、尺寸信息）。它有助于弥合设计和实现之间的差距。

具体示例

设计师完成网页布局后，将其上传到Zeplin，开发人员可以轻松查看设计规范、下载资产并获取CSS代码片段进行实现。

Webflow

(wèi bù liú)

一个无代码/低代码平台，允许用户在不编写代码的情况下设计、构建和发布响应式网站。设计师可以通过可视化界面直接创建精美的网站，并添加交互和动画。它模糊了设计和开发之间的界限。

具体示例

市场团队需要快速发布一个新的着陆页，因此设计师使用Webflow直接构建和发布网站，无需开发人员编写代码。

浏览器与搜索引擎

Browser (浏览器)

liú lǎn qì

用于显示网站的软件。它解析HTML并将其渲染到屏幕上。与搜索引擎不同（浏览器是浏览软件，搜索引擎是搜索服务）。

具体示例

Chrome、Safari、Edge、Firefox是浏览器。Google搜索是搜索引擎。

Google Chrome (谷歌浏览器)

gǔ gē liú lǎn qì

由Google公司开发，全球市场份额约65%的浏览器。使用V8引擎实现高速运行。拥有丰富的扩展功能。默认搜索引擎是Google搜索。

具体示例

可在Windows/Mac/手机上使用。开发者工具功能强大。

Safari (苹果浏览器)

sà fā lǐ

由Apple公司开发的浏览器。预装在iPhone/iPad/Mac上，是Apple用户的默认浏览器。使用WebKit引擎。

具体示例

iPhone的默认浏览器。电池消耗较少。

Microsoft Edge (微软Edge浏览器)

wēi ruǎn Edge liú lǎn qì

Microsoft公司基于Chromium开发。预装在Windows 10/11上。以集成Bing AI (Copilot) 为特色。是Internet Explorer的继任者。

具体示例

Windows系统自带的浏览器。点击Copilot按钮即可进行AI对话。

Firefox (火狐浏览器)

huǒ hú liú lǎn qì

由Mozilla基金会开发的开源浏览器。提供强大的隐私保护功能。使用独特的Gecko引擎。

具体示例

受注重隐私保护的用户和Web开发人员欢迎。

Google Search (谷歌搜索)

gǔ gē sōu suǒ

由Google公司运营的全球最大搜索引擎（市场份额约92%）。通过爬虫抓取网页并构建索引。新增AI概览功能。

具体示例

通过google.com或Chrome的地址栏进行搜索。

Bing (必应)

bì yìng

由Microsoft公司运营的搜索引擎。集成Copilot（原Bing Chat），是AI搜索的先行者。Edge的默认搜索引擎。

具体示例

在Edge浏览器或Copilot中搜索时会使用Bing。

Yahoo! Search (雅虎搜索)

yǎ hǔ sōu suǒ

在中国台湾、香港等地区由雅虎运营。搜索引擎核心技术利用Google。其特点是与新闻、问答等服务联动，在特定地区拥有较高市场份额。

具体示例

通过Yahoo!主页进行搜索。在一些地区，中老年用户中拥有根深蒂固的人气。

Browser vs. Search Engine (浏览器与搜索引擎的区别)

liú lǎn qì yǔ sōu suǒ yǐn qíng de qū bié

浏览器 = '查看'网站的应用程序。搜索引擎 = '查找'网站的服务。Chrome是浏览器，Google搜索是搜索引擎。两者是不同的，但容易混淆。

具体示例

在Chrome浏览器中使用Google搜索，在Safari浏览器中使用Yahoo!搜索，两者可以自由组合使用。

网址栏 (地址栏)

wǎng zhǐ lán (dì zhǐ lán)

浏览器窗口顶部的长方形输入框，用于输入或显示网站的网址（URL）。通过它可以直接跳转到任意网页。

具体示例

输入 'https://www.baidu.com' 并按下回车键，就会打开百度首页。

书签 (收藏夹)

shū qiān (shōu cáng jiā)

一种保存常用网站链接的功能，方便以后快速访问。在某些浏览器中也被称为「收藏夹」。

具体示例

把你常看的新闻网站加入书签后，每次只需点击一下就能打开，无需手动输入网址。

无痕模式 (隐私浏览)

wú hén mó shì (yǐn sī liú lǎn)

一种不保存浏览记录、Cookie等数据的特殊模式。适合在公用电脑上使用，但并不能做到完全匿名。

具体示例

在公共图书馆使用无痕模式搜索，之后别人就无法看到你的搜索历史了。

主页 (起始页)

zhǔ yè (qǐ shǐ yè)

打开浏览器或点击主页按钮时首先显示的网页。可以设置为常用网站，方便快速访问。

具体示例

如果你每天早上要看新闻，可以把新闻网站设为主页，一打开浏览器就能看到。

自动填充 (预测搜索)

zì dòng tián chōng (yù cè sōu suǒ)

在网址栏或搜索框中输入文字时，根据历史记录或常用词语自动显示候选词的功能。可以节省打字时间。

具体示例

输入「bai」时，可能会自动提示「百度」或「百度百科」，选择后即可快速打开。

了解术语后，亲自动手试试吧！

我们的提示词库可以让您预览和复制刚刚学到的技术。

浏览提示词 →