[
  {
    "单词": "animation",
    "翻译": "动画",
    "例句": "The animation uses a slow movement to guide attention toward the button without making the whole page feel unstable.\n动画用缓慢移动引导按钮注意，不使页面不稳。",
    "笔记": "课程07｜已出现形式：animation｜例句来源课程07",
    "短语": "a subtle animation"
  },
  {
    "单词": "around",
    "翻译": "周围；大约",
    "例句": "If these elements compete for attention, the page can feel crowded even when there is enough empty space around them.\n如果元素争抢注意力，即使周围空白够多，页面仍会显拥挤。",
    "笔记": "课程07｜已出现形式：around｜例句来源课程07"
  },
  {
    "单词": "background",
    "翻译": "背景",
    "例句": "For example, the title may be too large, while the text below it may be too faint against the background.\n例如标题可能过大，下方文字与背景相比又太淡。",
    "笔记": "课程07｜已出现形式：background｜例句来源课程07",
    "短语": "the page background"
  },
  {
    "单词": "badge",
    "翻译": "徽章；标记",
    "例句": "A bolder heading creates emphasis, while a blue badge can identify a category when color is not the only signal.\n醒目标题强调，蓝色徽章可识别分类，但不能只靠颜色。",
    "笔记": "课程07｜已出现形式：badge｜例句来源课程07"
  },
  {
    "单词": "between",
    "翻译": "在两者或多者之间",
    "例句": "Next, I look at the relationship between the title, the description, and the main button inside each section of the page.\n接着查看各区块中标题、描述和主要按钮之间的关系。",
    "笔记": "课程07｜已出现形式：between｜例句来源课程07"
  },
  {
    "单词": "camera",
    "翻译": "摄像头；相机",
    "例句": "A camera capture can reveal facial details that are not appropriate for every public demonstration.\n相机拍摄可能暴露不适合公开演示的面部细节。",
    "笔记": "课程07｜已出现形式：camera｜例句来源课程07"
  },
  {
    "单词": "capture",
    "翻译": "捕获；记录",
    "例句": "A camera capture can reveal facial details that are not appropriate for every public demonstration.\n相机拍摄可能暴露不适合公开演示的面部细节。",
    "笔记": "课程07｜已出现形式：capture｜例句来源课程07"
  },
  {
    "单词": "character",
    "翻译": "字符；汉字；角色",
    "例句": "The character in the illustration has an extremely simple outline, while the motion guides attention toward the main action.\n插图角色轮廓极简，动效引导主要操作。",
    "笔记": "课程07｜已出现形式：character｜例句来源课程07"
  },
  {
    "单词": "cinematic",
    "翻译": "电影般的",
    "例句": "A cinematic image or a photorealistic illustration may be appropriate in one place and distracting in another, depending on the task.\n电影感或写实图片是否合适，取决于位置与任务。",
    "笔记": "课程07｜已出现形式：cinematic｜例句来源课程07"
  },
  {
    "单词": "colorize",
    "翻译": "着色",
    "例句": "The image tool can colorize a picture, adjust its frame, or unwarp a distorted shape.\n图像工具可以着色、调框或还原变形形状。",
    "笔记": "课程07｜已出现形式：colorize｜例句来源课程07"
  },
  {
    "单词": "column",
    "翻译": "列；栏目",
    "例句": "The layout builder uses flex behavior to distribute available space across the elements in a column.\n布局构建器用弹性行为把可用空间分给列中元素。",
    "笔记": "课程07｜已出现形式：column｜例句来源课程07"
  },
  {
    "单词": "cursor",
    "翻译": "光标",
    "例句": "The screen shows the current cursor position and a marker next to the selected text.\n屏幕展示光标位置，并在选中文本旁显示标记。",
    "笔记": "课程07｜已出现形式：cursor｜例句来源课程07"
  },
  {
    "单词": "desktop",
    "翻译": "桌面端",
    "例句": "I will compare desktop and mobile layouts and explain which changes improve grouping, readability, and access to the main action.\n评审者：我会比较桌面和移动布局，解释哪些修改改善分组、阅读和主要操作。",
    "笔记": "课程07｜已出现形式：desktop｜例句来源课程07",
    "短语": "the desktop version"
  },
  {
    "单词": "facial",
    "翻译": "面部的",
    "例句": "A camera capture can reveal facial details that are not appropriate for every public demonstration.\n相机拍摄可能暴露不适合公开演示的面部细节。",
    "笔记": "课程07｜已出现形式：facial｜例句来源课程07"
  },
  {
    "单词": "flex",
    "翻译": "伸缩；弹性布局相关简称",
    "例句": "The layout builder uses flex behavior to distribute available space across the elements in a column.\n布局构建器用弹性行为把可用空间分给列中元素。",
    "笔记": "课程07｜已出现形式：flex｜例句来源课程07"
  },
  {
    "单词": "footer",
    "翻译": "页脚",
    "例句": "A consistent logo, title style, and footer make separate pages feel like parts of one site.\n统一标志、标题样式和页脚让独立页面像一个站点。",
    "笔记": "课程07｜已出现形式：footer｜例句来源课程07",
    "短语": "the page footer"
  },
  {
    "单词": "frame",
    "翻译": "框架；帧",
    "例句": "The image tool can colorize a picture, adjust its frame, or unwarp a distorted shape.\n图像工具可以着色、调框或还原变形形状。",
    "笔记": "课程07｜已出现形式：frame｜例句来源课程07"
  },
  {
    "单词": "group",
    "翻译": "组；分组",
    "例句": "Could you describe the spacing as well, because I am not sure which items should look like one connected group?\n我：也能描述间距吗，我不确定哪些项应该是一组。",
    "笔记": "课程07｜已出现形式：group｜例句来源课程07"
  },
  {
    "单词": "hallway",
    "翻译": "走廊",
    "例句": "The mock image shows a spaceship near a hallway, but the final illustration should use the real product context.\n模拟图展示走廊附近飞船，但最终插图应符合产品语境。",
    "笔记": "课程07｜已出现形式：hallway｜例句来源课程07"
  },
  {
    "单词": "header",
    "翻译": "页头",
    "例句": "The header is at the top, the navigation sits on the left, and the main content occupies the center of the screen.\n页头在顶部、导航在左侧、主体内容位于屏幕中央。",
    "笔记": "课程07｜已出现形式：header｜例句来源课程07",
    "短语": "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.\n我：请用真实课文展示预览，包括长标题和可能换行的按钮文字。",
    "笔记": "课程07｜已出现形式：headings｜例句来源课程07",
    "短语": "a section heading"
  },
  {
    "单词": "hero",
    "翻译": "英雄；网页首屏主视觉区",
    "例句": "The hero section contains the main title, a short tagline, and a visual that introduces the product.\n首屏主视觉区包含主标题、简短标语及产品图片。",
    "笔记": "课程07｜已出现形式：hero｜例句来源课程07"
  },
  {
    "单词": "icon",
    "翻译": "图标",
    "例句": "I also notice that the navigation icon sits above its label; does that make the sidebar look slightly uneven to you?\n我：导航图标还比文字偏高，你也觉得侧栏有些不齐吗？",
    "笔记": "课程07｜已出现形式：icon｜例句来源课程07",
    "短语": "the menu icon"
  },
  {
    "单词": "image",
    "翻译": "镜像；图片",
    "例句": "Images and animations should support the purpose of the page, rather than make ordinary information harder to see or understand.\n图片动画应服务页面目的，而非让普通信息更难理解。",
    "笔记": "课程07｜已出现形式：image、images｜例句来源课程07",
    "短语": "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.\n接着查看各区块中标题、描述和主要按钮之间的关系。",
    "笔记": "课程07｜已出现形式：inside｜例句来源课程07"
  },
  {
    "单词": "layout",
    "翻译": "布局",
    "例句": "The layout builder uses flex behavior to distribute available space across the elements in a column.\n布局构建器用弹性行为把可用空间分给列中元素。",
    "笔记": "课程07｜已出现形式：layout｜例句来源课程07",
    "短语": "the page layout"
  },
  {
    "单词": "logo",
    "翻译": "标志；品牌图形",
    "例句": "A consistent logo, title style, and footer make separate pages feel like parts of one site.\n统一标志、标题样式和页脚让独立页面像一个站点。",
    "笔记": "课程07｜已出现形式：logo｜例句来源课程07"
  },
  {
    "单词": "marker",
    "翻译": "标记物；标记",
    "例句": "The screen shows the current cursor position and a marker next to the selected text.\n屏幕展示光标位置，并在选中文本旁显示标记。",
    "笔记": "课程07｜已出现形式：marker｜例句来源课程07"
  },
  {
    "单词": "motion",
    "翻译": "运动；动效",
    "例句": "The character in the illustration has an extremely simple outline, while the motion guides attention toward the main action.\n插图角色轮廓极简，动效引导主要操作。",
    "笔记": "课程07｜已出现形式：motion｜例句来源课程07"
  },
  {
    "单词": "movement",
    "翻译": "移动；运动",
    "例句": "The animation uses a slow movement to guide attention toward the button without making the whole page feel unstable.\n动画用缓慢移动引导按钮注意，不使页面不稳。",
    "笔记": "课程07｜已出现形式：movement｜例句来源课程07"
  },
  {
    "单词": "navigation",
    "翻译": "导航",
    "例句": "The header is at the top, the navigation sits on the left, and the main content occupies the center of the screen.\n页头在顶部、导航在左侧、主体内容位于屏幕中央。",
    "笔记": "课程07｜已出现形式：navigation｜例句来源课程07",
    "短语": "the main navigation"
  },
  {
    "单词": "navigator",
    "翻译": "导航器",
    "例句": "The navigator helps visitors move between sections, and the preferences panel lets them enable the features they need.\n导航器帮助切换区块，偏好面板让人启用所需功能。",
    "笔记": "课程07｜已出现形式：navigator｜例句来源课程09"
  },
  {
    "单词": "offset",
    "翻译": "偏移量；抵消",
    "例句": "The positioning rules define the positions of the cards, and an offset moves the label slightly away from the icon.\n定位规则定义卡片位置，偏移量让标签略离图标。",
    "笔记": "课程07｜已出现形式：offset｜例句来源课程07"
  },
  {
    "单词": "outline",
    "翻译": "提纲；轮廓",
    "例句": "A narrow window needs a different outline around the focused control so that keyboard users can locate it.\n窄窗口需为焦点控件设置不同轮廓，便于键盘用户定位。",
    "笔记": "课程07｜已出现形式：outline、outlined｜例句来源课程07"
  },
  {
    "单词": "outside",
    "翻译": "外面；外部的",
    "例句": "What do you work on at the moment, and how would you describe your role to someone outside your team?\n同事：你目前做什么，怎样向团队外的人介绍自己的角色？",
    "笔记": "课程07｜已出现形式：outside｜例句来源课程01"
  },
  {
    "单词": "over",
    "翻译": "在上方；超过",
    "例句": "Thanks for restoring the product listing; could you send over the link to your other website and explain your rates for a placement?\n伙伴：谢谢恢复收录，能发另一个网站链接并说明推广报价吗？",
    "笔记": "课程07｜已出现形式：over｜例句来源课程18"
  },
  {
    "单词": "overflow",
    "翻译": "溢出",
    "例句": "The tabs should remain visible when the viewport becomes narrow, without creating horizontal overflow.\n可视区域变窄时标签页应仍可见，不产生横向溢出。",
    "笔记": "课程07｜已出现形式：overflow｜例句来源课程07"
  },
  {
    "单词": "page",
    "翻译": "页面",
    "例句": "If these elements compete for attention, the page can feel crowded even when there is enough empty space around them.\n如果元素争抢注意力，即使周围空白够多，页面仍会显拥挤。",
    "笔记": "课程07｜已出现形式：page｜例句来源课程07",
    "短语": "the detail page"
  },
  {
    "单词": "panel",
    "翻译": "面板",
    "例句": "The panel has a sticky header and a popover that opens beside the selected item.\n面板有吸附页头和选项旁弹出的浮层。",
    "笔记": "课程07｜已出现形式：panel｜例句来源课程07"
  },
  {
    "单词": "photorealistic",
    "翻译": "照片般写实的",
    "例句": "A cinematic image or a photorealistic illustration may be appropriate in one place and distracting in another, depending on the task.\n电影感或写实图片是否合适，取决于位置与任务。",
    "笔记": "课程07｜已出现形式：photorealistic｜例句来源课程07"
  },
  {
    "单词": "popover",
    "翻译": "浮层；弹出式提示层",
    "例句": "The panel has a sticky header and a popover that opens beside the selected item.\n面板有吸附页头和选项旁弹出的浮层。",
    "笔记": "课程07｜已出现形式：popover｜例句来源课程07"
  },
  {
    "单词": "position",
    "翻译": "位置；立场",
    "例句": "The screen shows the current cursor position and a marker next to the selected text.\n屏幕展示光标位置，并在选中文本旁显示标记。",
    "笔记": "课程07｜已出现形式：position、positioning、positions｜例句来源课程07"
  },
  {
    "单词": "reach",
    "翻译": "到达；联系，见reach out",
    "例句": "I check whether a long label wraps naturally and whether the main button remains easy to reach without covering important text.\n我检查长标签是否自然换行，主按钮是否易操作且不遮文字。",
    "笔记": "课程07｜已出现形式：reaching｜例句来源课程07"
  },
  {
    "单词": "scene",
    "翻译": "场景；画面",
    "例句": "The example headings and titles should be realistic, and the image should not turn an ordinary page into a dramatic movie scene.\n示例标题应真实，不应让图片把普通页面变电影场景。",
    "笔记": "课程07｜已出现形式：scene｜例句来源课程07"
  },
  {
    "单词": "screenshot",
    "翻译": "截图",
    "例句": "The final judgment should come from the actual content and user activity, not just from an attractive screenshot of an empty page.\n最终应依据真实内容和用户活动判断，而不只看空页面截图。",
    "笔记": "课程07｜已出现形式：screenshot｜例句来源课程07"
  },
  {
    "单词": "section",
    "翻译": "区块、章节",
    "例句": "The heading should be closer to its own description, and the gap above the next section should be a little larger.\n评审者：标题应更靠近自己的描述，下一区块上方间距应稍大。",
    "笔记": "课程07｜已出现形式：section、sections｜例句来源课程07",
    "短语": "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?\n我：导航图标还比文字偏高，你也觉得侧栏有些不齐吗？",
    "笔记": "课程07｜已出现形式：sidebar｜例句来源课程07",
    "短语": "the navigation sidebar"
  },
  {
    "单词": "size",
    "翻译": "大小",
    "例句": "The same principle applies to typography, where size, weight, and contrast should help distinguish the title from supporting information.\n排版也如此，字号、字重和对比度应区分标题与辅助信息。",
    "笔记": "课程07｜已出现形式：size｜例句来源课程07",
    "短语": "the font size"
  },
  {
    "单词": "spaceship",
    "翻译": "宇宙飞船",
    "例句": "The mock image shows a spaceship near a hallway, but the final illustration should use the real product context.\n模拟图展示走廊附近飞船，但最终插图应符合产品语境。",
    "笔记": "课程07｜已出现形式：spaceship｜例句来源课程07"
  },
  {
    "单词": "sticky",
    "翻译": "粘性的；吸附定位的",
    "例句": "The panel has a sticky header and a popover that opens beside the selected item.\n面板有吸附页头和选项旁弹出的浮层。",
    "笔记": "课程07｜已出现形式：sticky｜例句来源课程07"
  },
  {
    "单词": "style",
    "翻译": "风格；样式",
    "例句": "That will help us make a clear decision about the page without changing its existing style more than the task requires.\n我：这样能明确决定，不会超出任务所需大幅改变现有风格。",
    "笔记": "课程07｜已出现形式：style｜例句来源课程07"
  },
  {
    "单词": "tagline",
    "翻译": "宣传标语",
    "例句": "The hero section contains the main title, a short tagline, and a visual that introduces the product.\n首屏主视觉区包含主标题、简短标语及产品图片。",
    "笔记": "课程07｜已出现形式：tagline｜例句来源课程07"
  },
  {
    "单词": "theme",
    "翻译": "主题",
    "例句": "The first theme introduces projects and working habits, while later themes cover questions, changes, problems, and professional communication.\n第一主题介绍项目和工作习惯，后面涉及提问、修改、问题和职业沟通。",
    "笔记": "课程07｜已出现形式：theme｜例句来源课程02",
    "短语": "the dark theme"
  },
  {
    "单词": "title",
    "翻译": "标题",
    "例句": "For example, the title may be too large, while the text below it may be too faint against the background.\n例如标题可能过大，下方文字与背景相比又太淡。",
    "笔记": "课程07｜已出现形式：title、titles｜例句来源课程07",
    "短语": "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.\n页头在顶部、导航在左侧、主体内容位于屏幕中央。",
    "笔记": "课程07｜已出现形式：top｜例句来源课程07"
  },
  {
    "单词": "under",
    "翻译": "在……下；处于某条件",
    "例句": "I look for the intended content and confirm that the main links lead to the correct destinations under the production domain.\n我查找预期内容，确认主要链接在生产域名下指向正确位置。",
    "笔记": "课程07｜已出现形式：under｜例句来源课程16"
  },
  {
    "单词": "unwarp",
    "翻译": "还原形变；技术动词",
    "例句": "The image tool can colorize a picture, adjust its frame, or unwarp a distorted shape.\n图像工具可以着色、调框或还原变形形状。",
    "笔记": "课程07｜已出现形式：unwarp｜例句来源课程07"
  },
  {
    "单词": "viewport",
    "翻译": "可视区域",
    "例句": "The tabs should remain visible when the viewport becomes narrow, without creating horizontal overflow.\n可视区域变窄时标签页应仍可见，不产生横向溢出。",
    "笔记": "课程07｜已出现形式：viewport｜例句来源课程07"
  },
  {
    "单词": "window",
    "翻译": "窗口；窗户",
    "例句": "A narrow window needs a different outline around the focused control so that keyboard users can locate it.\n窄窗口需为焦点控件设置不同轮廓，便于键盘用户定位。",
    "笔记": "课程07｜已出现形式：window｜例句来源课程07"
  },
  {
    "单词": "within",
    "翻译": "在……以内",
    "例句": "An application may run directly on the host, inside a container, or within a virtual machine that has its own environment.\n应用可能直接在宿主机、容器，或有独立环境的虚拟机中运行。",
    "笔记": "课程07｜已出现形式：within｜例句来源课程12"
  }
]