英语 07：描述页面与视觉效果

本课任务：用英语完成“描述页面与视觉效果”这一类沟通。英文内容为教学情境，不是用户项目事实的逐字记录。学习顺序是阅读理解、词汇例句、语法拆解、练习和脱稿复述。

• 阅读A：208词；阅读B：204词；对话：173词。
• 首次集中学习：60个词形组，对应原词表66个已观察词项。
• 语法：形容词与副词；位置介词；程度表达。
• 常用句式复习：12句；补充语境练习：16句。
• 返回20课目录。

阅读 A｜Describing a Page Before Changing It

When I describe a page, I begin with the arrangement of its main sections rather than commenting immediately on the colors.

The header is at the top, the navigation sits on the left, and the main content occupies the center of the screen.

A clear structure helps visitors understand where they are and how to reach the information that matters for their current task.

Next, I look at the relationship between the title, the description, and the main button inside each section of the page.

If these elements compete for attention, the page can feel crowded even when there is enough empty space around them.

I describe the specific issue with words such as narrow, wide, centered, uneven, or difficult to read on a smaller screen.

For example, the title may be too large, while the text below it may be too faint against the background.

The icon may also sit slightly above the label, which makes two neighboring items look as though they do not belong together.

These observations give us a clear starting point for improvement without requiring a complete redesign of the whole interface.

I want the description to be accurate enough that another person can locate the problem before I suggest a particular change.

A：逐句中文对照

When I describe a page, I begin with the arrangement of its main sections rather than commenting immediately on the colors. 描述页面时，我先说明主要区块安排，不立即评论颜色。

The header is at the top, the navigation sits on the left, and the main content occupies the center of the screen. 页头在顶部、导航在左侧、主体内容位于屏幕中央。

A clear structure helps visitors understand where they are and how to reach the information that matters for their current task. 清晰结构帮助访客理解当前位置，以及如何找到当前任务所需信息。

Next, I look at the relationship between the title, the description, and the main button inside each section of the page. 接着查看各区块中标题、描述和主要按钮之间的关系。

If these elements compete for attention, the page can feel crowded even when there is enough empty space around them. 如果元素争抢注意力，即使周围空白够多，页面仍会显拥挤。

I describe the specific issue with words such as narrow, wide, centered, uneven, or difficult to read on a smaller screen. 我用窄、宽、居中、不均匀，或小屏难读等词描述具体问题。

For example, the title may be too large, while the text below it may be too faint against the background. 例如标题可能过大，下方文字与背景相比又太淡。

The icon may also sit slightly above the label, which makes two neighboring items look as though they do not belong together. 图标也可能略高于文字，让相邻项目看起来不像一组。

These observations give us a clear starting point for improvement without requiring a complete redesign of the whole interface. 这些观察提供清晰改进起点，无需重做整个界面。

I want the description to be accurate enough that another person can locate the problem before I suggest a particular change. 我希望描述足够准确，让对方在我建议修改前就能定位问题。

阅读 B｜Reading the Visual Details

Visual details communicate relationships, so a small difference in spacing or emphasis can change how someone understands a page.

When a heading is closer to the previous section than to its own text, the grouping becomes difficult to recognize.

A consistent gap between related items makes the content easier to scan, especially when the page contains several different learning activities.

The same principle applies to typography, where size, weight, and contrast should help distinguish the title from supporting information.

A darker background does not automatically create better contrast, because the actual text color and font weight still affect readability.

On mobile, the width of the content changes, and a comfortable desktop arrangement may become narrow or unnecessarily difficult to navigate.

I check whether a long label wraps naturally and whether the main button remains easy to reach without covering important text.

Images and animations should support the purpose of the page, rather than make ordinary information harder to see or understand.

A cinematic image or a photorealistic illustration may be appropriate in one place and distracting in another, depending on the task.

The final judgment should come from the actual content and user activity, not just from an attractive screenshot of an empty page.

B：逐句中文对照

Visual details communicate relationships, so a small difference in spacing or emphasis can change how someone understands a page. 视觉细节传递关系，小小间距或强调差异就可能改变理解。

When a heading is closer to the previous section than to its own text, the grouping becomes difficult to recognize. 标题离上一区块比自身正文更近时，分组关系就难以辨认。

A consistent gap between related items makes the content easier to scan, especially when the page contains several different learning activities. 相关项间距一致，会让多种学习活动所在页面更易浏览。

The same principle applies to typography, where size, weight, and contrast should help distinguish the title from supporting information. 排版也如此，字号、字重和对比度应区分标题与辅助信息。

A darker background does not automatically create better contrast, because the actual text color and font weight still affect readability. 深背景不会自动带来更好对比，实际字色和字重仍影响可读性。

On mobile, the width of the content changes, and a comfortable desktop arrangement may become narrow or unnecessarily difficult to navigate. 移动端内容宽度变化，桌面舒适布局可能变窄或难导航。

I check whether a long label wraps naturally and whether the main button remains easy to reach without covering important text. 我检查长标签是否自然换行，主按钮是否易操作且不遮文字。

Images and animations should support the purpose of the page, rather than make ordinary information harder to see or understand. 图片动画应服务页面目的，而非让普通信息更难理解。

A cinematic image or a photorealistic illustration may be appropriate in one place and distracting in another, depending on the task. 电影感或写实图片是否合适，取决于位置与任务。

The final judgment should come from the actual content and user activity, not just from an attractive screenshot of an empty page. 最终应依据真实内容和用户活动判断，而不只看空页面截图。

工作对话

Reviewer: The page contains the right information, but the title and the button compete for attention, especially on a small screen. 评审者：信息正确，但标题和按钮争抢注意，尤其在小屏上。

Me: Could you describe the spacing as well, because I am not sure which items should look like one connected group? 我：也能描述间距吗，我不确定哪些项应该是一组。

Reviewer: The heading should be closer to its own description, and the gap above the next section should be a little larger. 评审者：标题应更靠近自己的描述，下一区块上方间距应稍大。

Me: I also notice that the navigation icon sits above its label; does that make the sidebar look slightly uneven to you? 我：导航图标还比文字偏高，你也觉得侧栏有些不齐吗？

Reviewer: Yes, and the supporting text is rather faint, so it would help to improve the contrast before adding any decorative effects. 评审者：是的，辅助文字偏淡，增加装饰前先提高对比度更有用。

Me: Please show me a preview with the real lesson content, including a long heading and a button label that may wrap. 我：请用真实课文展示预览，包括长标题和可能换行的按钮文字。

Reviewer: I will compare desktop and mobile layouts and explain which changes improve grouping, readability, and access to the main action. 评审者：我会比较桌面和移动布局，解释哪些修改改善分组、阅读和主要操作。

Me: That will help us make a clear decision about the page without changing its existing style more than the task requires. 我：这样能明确决定，不会超出任务所需大幅改变现有风格。

本课完整词汇表

词形组把常见变形关联起来，不把名词派生词一概合并。例如develop与development仍可能是独立词条。所有格、缩写和有独立用途的形式按实际学习价值保留。释义以工作语境为主；少量低频词用于原会话词汇覆盖，标注在补充例句中。

每个词条的完整例句

下列例句来自这套课程的阅读、对话或补充语境。例句可能复用其他课的场景，以便同一个词在不同任务中再现；总覆盖表保留来源课程编号。

animation — 动画 The animation uses a slow movement to guide attention toward the button without making the whole page feel unstable. 动画用缓慢移动引导按钮注意，不使页面不稳。 搭配：a subtle animation

around — 周围；大约 If these elements compete for attention, the page can feel crowded even when there is enough empty space around them. 如果元素争抢注意力，即使周围空白够多，页面仍会显拥挤。

background — 背景 For example, the title may be too large, while the text below it may be too faint against the background. 例如标题可能过大，下方文字与背景相比又太淡。 搭配：the page background

badge — 徽章；标记 A bolder heading creates emphasis, while a blue badge can identify a category when color is not the only signal. 醒目标题强调，蓝色徽章可识别分类，但不能只靠颜色。

between — 在两者或多者之间 Next, I look at the relationship between the title, the description, and the main button inside each section of the page. 接着查看各区块中标题、描述和主要按钮之间的关系。

camera — 摄像头；相机 A camera capture can reveal facial details that are not appropriate for every public demonstration. 相机拍摄可能暴露不适合公开演示的面部细节。

capture — 捕获；记录 A camera capture can reveal facial details that are not appropriate for every public demonstration. 相机拍摄可能暴露不适合公开演示的面部细节。

character — 字符；汉字；角色 The character in the illustration has an extremely simple outline, while the motion guides attention toward the main action. 插图角色轮廓极简，动效引导主要操作。

cinematic — 电影般的 A cinematic image or a photorealistic illustration may be appropriate in one place and distracting in another, depending on the task. 电影感或写实图片是否合适，取决于位置与任务。

colorize — 着色 The image tool can colorize a picture, adjust its frame, or unwarp a distorted shape. 图像工具可以着色、调框或还原变形形状。

column — 列；栏目 The layout builder uses flex behavior to distribute available space across the elements in a column. 布局构建器用弹性行为把可用空间分给列中元素。

cursor — 光标 The screen shows the current cursor position and a marker next to the selected text. 屏幕展示光标位置，并在选中文本旁显示标记。

desktop — 桌面端 I will compare desktop and mobile layouts and explain which changes improve grouping, readability, and access to the main action. 评审者：我会比较桌面和移动布局，解释哪些修改改善分组、阅读和主要操作。 搭配：the desktop version

facial — 面部的 A camera capture can reveal facial details that are not appropriate for every public demonstration. 相机拍摄可能暴露不适合公开演示的面部细节。

flex — 伸缩；弹性布局相关简称 The layout builder uses flex behavior to distribute available space across the elements in a column. 布局构建器用弹性行为把可用空间分给列中元素。

footer — 页脚 A consistent logo, title style, and footer make separate pages feel like parts of one site. 统一标志、标题样式和页脚让独立页面像一个站点。 搭配：the page footer

frame — 框架；帧 The image tool can colorize a picture, adjust its frame, or unwarp a distorted shape. 图像工具可以着色、调框或还原变形形状。

group — 组；分组 Could you describe the spacing as well, because I am not sure which items should look like one connected group? 我：也能描述间距吗，我不确定哪些项应该是一组。

hallway — 走廊 The mock image shows a spaceship near a hallway, but the final illustration should use the real product context. 模拟图展示走廊附近飞船，但最终插图应符合产品语境。

header — 页头 The header is at the top, the navigation sits on the left, and the main content occupies the center of the screen. 页头在顶部、导航在左侧、主体内容位于屏幕中央。 搭配：the mobile header

heading — 标题层级 Please show me a preview with the real lesson content, including a long heading and a button label that may wrap. 我：请用真实课文展示预览，包括长标题和可能换行的按钮文字。 搭配：a section heading

hero — 英雄；网页首屏主视觉区 The hero section contains the main title, a short tagline, and a visual that introduces the product. 首屏主视觉区包含主标题、简短标语及产品图片。

icon — 图标 I also notice that the navigation icon sits above its label; does that make the sidebar look slightly uneven to you? 我：导航图标还比文字偏高，你也觉得侧栏有些不齐吗？ 搭配：the menu icon

image — 镜像；图片 Images and animations should support the purpose of the page, rather than make ordinary information harder to see or understand. 图片动画应服务页面目的，而非让普通信息更难理解。 搭配：a container image

inside — 在内部；内部的 Next, I look at the relationship between the title, the description, and the main button inside each section of the page. 接着查看各区块中标题、描述和主要按钮之间的关系。

layout — 布局 The layout builder uses flex behavior to distribute available space across the elements in a column. 布局构建器用弹性行为把可用空间分给列中元素。 搭配：the page layout

logo — 标志；品牌图形 A consistent logo, title style, and footer make separate pages feel like parts of one site. 统一标志、标题样式和页脚让独立页面像一个站点。

marker — 标记物；标记 The screen shows the current cursor position and a marker next to the selected text. 屏幕展示光标位置，并在选中文本旁显示标记。

motion — 运动；动效 The character in the illustration has an extremely simple outline, while the motion guides attention toward the main action. 插图角色轮廓极简，动效引导主要操作。

movement — 移动；运动 The animation uses a slow movement to guide attention toward the button without making the whole page feel unstable. 动画用缓慢移动引导按钮注意，不使页面不稳。

navigation — 导航 The header is at the top, the navigation sits on the left, and the main content occupies the center of the screen. 页头在顶部、导航在左侧、主体内容位于屏幕中央。 搭配：the main navigation

navigator — 导航器 The navigator helps visitors move between sections, and the preferences panel lets them enable the features they need. 导航器帮助切换区块，偏好面板让人启用所需功能。

offset — 偏移量；抵消 The positioning rules define the positions of the cards, and an offset moves the label slightly away from the icon. 定位规则定义卡片位置，偏移量让标签略离图标。

outline — 提纲；轮廓 A narrow window needs a different outline around the focused control so that keyboard users can locate it. 窄窗口需为焦点控件设置不同轮廓，便于键盘用户定位。

outside — 外面；外部的 What do you work on at the moment, and how would you describe your role to someone outside your team? 同事：你目前做什么，怎样向团队外的人介绍自己的角色？

over — 在上方；超过 Thanks for restoring the product listing; could you send over the link to your other website and explain your rates for a placement? 伙伴：谢谢恢复收录，能发另一个网站链接并说明推广报价吗？

overflow — 溢出 The tabs should remain visible when the viewport becomes narrow, without creating horizontal overflow. 可视区域变窄时标签页应仍可见，不产生横向溢出。

page — 页面 If these elements compete for attention, the page can feel crowded even when there is enough empty space around them. 如果元素争抢注意力，即使周围空白够多，页面仍会显拥挤。 搭配：the detail page

panel — 面板 The panel has a sticky header and a popover that opens beside the selected item. 面板有吸附页头和选项旁弹出的浮层。

photorealistic — 照片般写实的 A cinematic image or a photorealistic illustration may be appropriate in one place and distracting in another, depending on the task. 电影感或写实图片是否合适，取决于位置与任务。

popover — 浮层；弹出式提示层 The panel has a sticky header and a popover that opens beside the selected item. 面板有吸附页头和选项旁弹出的浮层。

position — 位置；立场 The screen shows the current cursor position and a marker next to the selected text. 屏幕展示光标位置，并在选中文本旁显示标记。

reach — 到达；联系，见reach out I check whether a long label wraps naturally and whether the main button remains easy to reach without covering important text. 我检查长标签是否自然换行，主按钮是否易操作且不遮文字。

scene — 场景；画面 The example headings and titles should be realistic, and the image should not turn an ordinary page into a dramatic movie scene. 示例标题应真实，不应让图片把普通页面变电影场景。

screenshot — 截图 The final judgment should come from the actual content and user activity, not just from an attractive screenshot of an empty page. 最终应依据真实内容和用户活动判断，而不只看空页面截图。

section — 区块、章节 The heading should be closer to its own description, and the gap above the next section should be a little larger. 评审者：标题应更靠近自己的描述，下一区块上方间距应稍大。 搭配：the pricing section

sidebar — 侧栏 I also notice that the navigation icon sits above its label; does that make the sidebar look slightly uneven to you? 我：导航图标还比文字偏高，你也觉得侧栏有些不齐吗？ 搭配：the navigation sidebar

size — 大小 The same principle applies to typography, where size, weight, and contrast should help distinguish the title from supporting information. 排版也如此，字号、字重和对比度应区分标题与辅助信息。 搭配：the font size

spaceship — 宇宙飞船 The mock image shows a spaceship near a hallway, but the final illustration should use the real product context. 模拟图展示走廊附近飞船，但最终插图应符合产品语境。

sticky — 粘性的；吸附定位的 The panel has a sticky header and a popover that opens beside the selected item. 面板有吸附页头和选项旁弹出的浮层。

style — 风格；样式 That will help us make a clear decision about the page without changing its existing style more than the task requires. 我：这样能明确决定，不会超出任务所需大幅改变现有风格。

tagline — 宣传标语 The hero section contains the main title, a short tagline, and a visual that introduces the product. 首屏主视觉区包含主标题、简短标语及产品图片。

theme — 主题 The first theme introduces projects and working habits, while later themes cover questions, changes, problems, and professional communication. 第一主题介绍项目和工作习惯，后面涉及提问、修改、问题和职业沟通。 搭配：the dark theme

title — 标题 For example, the title may be too large, while the text below it may be too faint against the background. 例如标题可能过大，下方文字与背景相比又太淡。 搭配：the article title

top — 顶部；最高的 The header is at the top, the navigation sits on the left, and the main content occupies the center of the screen. 页头在顶部、导航在左侧、主体内容位于屏幕中央。

under — 在……下；处于某条件 I look for the intended content and confirm that the main links lead to the correct destinations under the production domain. 我查找预期内容，确认主要链接在生产域名下指向正确位置。

unwarp — 还原形变；技术动词 The image tool can colorize a picture, adjust its frame, or unwarp a distorted shape. 图像工具可以着色、调框或还原变形形状。

viewport — 可视区域 The tabs should remain visible when the viewport becomes narrow, without creating horizontal overflow. 可视区域变窄时标签页应仍可见，不产生横向溢出。

window — 窗口；窗户 A narrow window needs a different outline around the focused control so that keyboard users can locate it. 窄窗口需为焦点控件设置不同轮廓，便于键盘用户定位。

within — 在……以内 An application may run directly on the host, inside a container, or within a virtual machine that has its own environment. 应用可能直接在宿主机、容器，或有独立环境的虚拟机中运行。

语法精讲与结构拆解

G07-1 形容词与副词

The text is faint, and the icon sits slightly above the label.

faint作表语描述text；slightly为程度副词；above the label为位置介词短语。

对照／迁移：clear text / explain clearly

G07-2 too与enough

The title is too large, but the text is not clear enough.

too＋形容词表示过度；形容词＋enough表示足够；enough＋名词。

对照／迁移：large enough / enough space

G07-3 空间介词与定语

The button inside the card is near the bottom.

inside the card修饰button；near the bottom说明位置。top、left等常需要the，取决于搭配。

对照／迁移：at the top / on the left / between two cards

相关结构补充与易错点

形容词：名词前／系动词后

a compact layout；the layout is compact。look、seem、feel 后也可以接形容词。

• The icon looks misaligned. 图标看起来没对齐。
• This seems unnecessary. 这个似乎没必要。

too / enough：过度与足够

too＋形容词；形容词＋enough；enough＋名词。

• The spacing is too large. 间距太大。
• The text isn’t clear enough. 文字不够清楚。

介词：in/on/at/to/into/from

in a file/in the database；on the page/on the server；at a URL；deploy to production；translate into English；download from…。

• Display it in a separate HTML file. 在单独的 HTML 文件中显示。
• Deploy the app to the server. 把应用部署到服务器。

十二句表达复习

本节从本课选择十二句完整表达，用于TypeWords跟打与默写。先理解结构，再替换人物、对象、时间或原因。它们是选句，不代表每句都是固定搭配。

When I describe a page, I begin with the arrangement of its main sections rather than commenting immediately on the colors. 描述页面时，我先说明主要区块安排，不立即评论颜色。

A clear structure helps visitors understand where they are and how to reach the information that matters for their current task. 清晰结构帮助访客理解当前位置，以及如何找到当前任务所需信息。

If these elements compete for attention, the page can feel crowded even when there is enough empty space around them. 如果元素争抢注意力，即使周围空白够多，页面仍会显拥挤。

The icon may also sit slightly above the label, which makes two neighboring items look as though they do not belong together. 图标也可能略高于文字，让相邻项目看起来不像一组。

Visual details communicate relationships, so a small difference in spacing or emphasis can change how someone understands a page. 视觉细节传递关系，小小间距或强调差异就可能改变理解。

A consistent gap between related items makes the content easier to scan, especially when the page contains several different learning activities. 相关项间距一致，会让多种学习活动所在页面更易浏览。

On mobile, the width of the content changes, and a comfortable desktop arrangement may become narrow or unnecessarily difficult to navigate. 移动端内容宽度变化，桌面舒适布局可能变窄或难导航。

A cinematic image or a photorealistic illustration may be appropriate in one place and distracting in another, depending on the task. 电影感或写实图片是否合适，取决于位置与任务。

The page contains the right information, but the title and the button compete for attention, especially on a small screen. 评审者：信息正确，但标题和按钮争抢注意，尤其在小屏上。

The heading should be closer to its own description, and the gap above the next section should be a little larger. 评审者：标题应更靠近自己的描述，下一区块上方间距应稍大。

Yes, and the supporting text is rather faint, so it would help to improve the contrast before adding any decorative effects. 评审者：是的，辅助文字偏淡，增加装饰前先提高对比度更有用。

I will compare desktop and mobile layouts and explain which changes improve grouping, readability, and access to the main action. 评审者：我会比较桌面和移动布局，解释哪些修改改善分组、阅读和主要操作。

补充词汇语境

这些句子为词汇覆盖提供额外语境，难度有差异。先练主阅读和对话，再按需学习低频词。专门语境不必强行用在普通项目对话中。

The character in the illustration has an extremely simple outline, while the motion guides attention toward the main action. 插图角色轮廓极简，动效引导主要操作。

The positioning rules define the positions of the cards, and an offset moves the label slightly away from the icon. 定位规则定义卡片位置，偏移量让标签略离图标。

On a handheld device, the screen is smaller, so the same page needs a more compact arrangement of the controls. 手持设备屏幕较小，控件需更紧凑安排。

The animation uses a slow movement to guide attention toward the button without making the whole page feel unstable. 动画用缓慢移动引导按钮注意，不使页面不稳。

A bolder heading creates emphasis, while a blue badge can identify a category when color is not the only signal. 醒目标题强调，蓝色徽章可识别分类，但不能只靠颜色。

The hero section contains the main title, a short tagline, and a visual that introduces the product. 首屏主视觉区包含主标题、简短标语及产品图片。

A consistent logo, title style, and footer make separate pages feel like parts of one site. 统一标志、标题样式和页脚让独立页面像一个站点。

The panel has a sticky header and a popover that opens beside the selected item. 面板有吸附页头和选项旁弹出的浮层。

The tabs should remain visible when the viewport becomes narrow, without creating horizontal overflow. 可视区域变窄时标签页应仍可见，不产生横向溢出。

The mock image shows a spaceship near a hallway, but the final illustration should use the real product context. 模拟图展示走廊附近飞船，但最终插图应符合产品语境。

A camera capture can reveal facial details that are not appropriate for every public demonstration. 相机拍摄可能暴露不适合公开演示的面部细节。

The image tool can colorize a picture, adjust its frame, or unwarp a distorted shape. 图像工具可以着色、调框或还原变形形状。

The layout builder uses flex behavior to distribute available space across the elements in a column. 布局构建器用弹性行为把可用空间分给列中元素。

A narrow window needs a different outline around the focused control so that keyboard users can locate it. 窄窗口需为焦点控件设置不同轮廓，便于键盘用户定位。

The example headings and titles should be realistic, and the image should not turn an ordinary page into a dramatic movie scene. 示例标题应真实，不应让图片把普通页面变电影场景。

The screen shows the current cursor position and a marker next to the selected text. 屏幕展示光标位置，并在选中文本旁显示标记。

练习与参考答案

1. 结构识别

观察下面的本课句子，先指出主语和谓语，再圈出连接词与修饰成分：

The text is faint, and the icon sits slightly above the label.

2. 挖空回忆

When I describe a 【1】____, I begin with the arrangement of its main sections rather than commenting immediately on the colors.

3. 中文转述

1. 描述页面时，我先说明主要区块安排，不立即评论颜色。
2. 清晰结构帮助访客理解当前位置，以及如何找到当前任务所需信息。
3. 如果元素争抢注意力，即使周围空白够多，页面仍会显拥挤。

4. 迁移到自己的项目

1. 用三到五句介绍与本课主题相关的一次真实任务。
2. 至少使用本课五个词条和一个重点语法结构。
3. 改变例句中的主体、对象或条件，解释修改后句意有什么变化。
4. 让同伴追问一个细节，再用完整句子回答；不要把示例中的教学设定当成自己的实际经历。

TypeWords 导入材料

• 本课词汇文件：选择“导入自定义单词”入口。
• 本课文章文件：含A阅读、B阅读、C对话、D选句、E补充语境。
• 原文与译文逐行一一对应。模板前两条是官网要求保留的说明与示例，不是课程正文。
• 词汇文件没有伪造音标或词源；需要时可在TypeWords里补充可靠词典数据。未生成独立音频文件。

继续学习

上一课 · 20课目录与总索引 · 下一课