[
  {
    "notice": "只有 title 和 text 字段是必填，其他字段可删除不填。填写时，请从第三条数据开始填写，第二条数据是示例，填写完成之后，不要删除前面两条",
    "notice1": "只有 title 和 text 字段是必填，其他字段可删除不填。填写时，请从第三条数据开始填写，第二条数据是示例，填写完成之后，不要删除前面两条",
    "notice2": "只有 title 和 text 字段是必填，其他字段可删除不填。填写时，请从第三条数据开始填写，第二条数据是示例，填写完成之后，不要删除前面两条",
    "title": "这里填标题，必填必填必填必填必填必填必填必填必填必填必填必填必填必填必填必填必填必填必填必填",
    "titleTranslate": "这里填标题翻译",
    "text": "这里填原文，一句一个换行符，一段两个换行符，必填必填必填必填必填必填必填必填必填必填必填必填必填必填必填必填必填必填必填必填",
    "textTranslate": "这里填原文翻译，一句一个换行符，一段两个换行符",
    "audioSrc": "这里填音频的url/在线地址"
  },
  {
    "title": "How are you today?",
    "titleTranslate": "今天好吗？",
    "text": "STEVEN:Hello, HELEN.\n\nHELEN:Hi, Steven.\n\nSTEVEN:How are you today?\n\nHELEN:I'm very well, thank you. And you?\n\nSTEVEN:I'm fine, thanks.\n\nSTEVEN:How is Tony?\n\nHELEN:He's fine, thanks. How's Emma?\n\nSTEVEN:She's very well, too, Helen.\n\nSTEVEN:Goodbye, Helen.Nice to see you.\n\nHELEN:Nice to see you, too, Steven. Goodbye.",
    "textTranslate": "史蒂文：你好，海伦 \n\n海 伦：你好，史蒂文 \n\n史蒂文：你今天好吗？ \n\n海 伦：很好，谢谢你。你好吗？ \n\n史蒂文：很好，谢谢。 \n\n史蒂文：托尼好吗？ \n\n海 伦：他很好，谢谢。埃玛好吗？ \n\n史蒂文：她也很好，海伦。 \n\n史蒂文：再见，海伦。见到你真高兴。 \n\n海 伦：我见到你也很高兴，史蒂文。再见。",
    "audioSrc": "/sound/article/nce1/009&010－How Are You Today.mp3"
  },
  {
    "title": "07A Describing a Page Before Changing It",
    "titleTranslate": "第07课A｜描述页面与视觉效果",
    "text": "When I describe a page, I begin with the arrangement of its main sections rather than commenting immediately on the colors.\nThe header is at the top, the navigation sits on the left, and the main content occupies the center of the screen.\nA clear structure helps visitors understand where they are and how to reach the information that matters for their current task.\nNext, I look at the relationship between the title, the description, and the main button inside each section of the page.\nIf these elements compete for attention, the page can feel crowded even when there is enough empty space around them.\nI describe the specific issue with words such as narrow, wide, centered, uneven, or difficult to read on a smaller screen.\nFor example, the title may be too large, while the text below it may be too faint against the background.\nThe icon may also sit slightly above the label, which makes two neighboring items look as though they do not belong together.\nThese observations give us a clear starting point for improvement without requiring a complete redesign of the whole interface.\nI want the description to be accurate enough that another person can locate the problem before I suggest a particular change.",
    "textTranslate": "描述页面时，我先说明主要区块安排，不立即评论颜色。\n页头在顶部、导航在左侧、主体内容位于屏幕中央。\n清晰结构帮助访客理解当前位置，以及如何找到当前任务所需信息。\n接着查看各区块中标题、描述和主要按钮之间的关系。\n如果元素争抢注意力，即使周围空白够多，页面仍会显拥挤。\n我用窄、宽、居中、不均匀，或小屏难读等词描述具体问题。\n例如标题可能过大，下方文字与背景相比又太淡。\n图标也可能略高于文字，让相邻项目看起来不像一组。\n这些观察提供清晰改进起点，无需重做整个界面。\n我希望描述足够准确，让对方在我建议修改前就能定位问题。"
  },
  {
    "title": "07B Reading the Visual Details",
    "titleTranslate": "第07课B｜描述页面与视觉效果",
    "text": "Visual details communicate relationships, so a small difference in spacing or emphasis can change how someone understands a page.\nWhen a heading is closer to the previous section than to its own text, the grouping becomes difficult to recognize.\nA consistent gap between related items makes the content easier to scan, especially when the page contains several different learning activities.\nThe same principle applies to typography, where size, weight, and contrast should help distinguish the title from supporting information.\nA darker background does not automatically create better contrast, because the actual text color and font weight still affect readability.\nOn mobile, the width of the content changes, and a comfortable desktop arrangement may become narrow or unnecessarily difficult to navigate.\nI check whether a long label wraps naturally and whether the main button remains easy to reach without covering important text.\nImages and animations should support the purpose of the page, rather than make ordinary information harder to see or understand.\nA cinematic image or a photorealistic illustration may be appropriate in one place and distracting in another, depending on the task.\nThe final judgment should come from the actual content and user activity, not just from an attractive screenshot of an empty page.",
    "textTranslate": "视觉细节传递关系，小小间距或强调差异就可能改变理解。\n标题离上一区块比自身正文更近时，分组关系就难以辨认。\n相关项间距一致，会让多种学习活动所在页面更易浏览。\n排版也如此，字号、字重和对比度应区分标题与辅助信息。\n深背景不会自动带来更好对比，实际字色和字重仍影响可读性。\n移动端内容宽度变化，桌面舒适布局可能变窄或难导航。\n我检查长标签是否自然换行，主按钮是否易操作且不遮文字。\n图片动画应服务页面目的，而非让普通信息更难理解。\n电影感或写实图片是否合适，取决于位置与任务。\n最终应依据真实内容和用户活动判断，而不只看空页面截图。"
  },
  {
    "title": "07C Working Conversation",
    "titleTranslate": "第07课C｜描述页面与视觉效果",
    "text": "Reviewer: The page contains the right information, but the title and the button compete for attention, especially on a small screen.\nMe: Could you describe the spacing as well, because I am not sure which items should look like one connected group?\nReviewer: The heading should be closer to its own description, and the gap above the next section should be a little larger.\nMe: I also notice that the navigation icon sits above its label; does that make the sidebar look slightly uneven to you?\nReviewer: Yes, and the supporting text is rather faint, so it would help to improve the contrast before adding any decorative effects.\nMe: Please show me a preview with the real lesson content, including a long heading and a button label that may wrap.\nReviewer: I will compare desktop and mobile layouts and explain which changes improve grouping, readability, and access to the main action.\nMe: That will help us make a clear decision about the page without changing its existing style more than the task requires.",
    "textTranslate": "评审者：信息正确，但标题和按钮争抢注意，尤其在小屏上。\n我：也能描述间距吗，我不确定哪些项应该是一组。\n评审者：标题应更靠近自己的描述，下一区块上方间距应稍大。\n我：导航图标还比文字偏高，你也觉得侧栏有些不齐吗？\n评审者：是的，辅助文字偏淡，增加装饰前先提高对比度更有用。\n我：请用真实课文展示预览，包括长标题和可能换行的按钮文字。\n评审者：我会比较桌面和移动布局，解释哪些修改改善分组、阅读和主要操作。\n我：这样能明确决定，不会超出任务所需大幅改变现有风格。"
  },
  {
    "title": "07D Sentence Review",
    "titleTranslate": "第07课D｜描述页面与视觉效果",
    "text": "When I describe a page, I begin with the arrangement of its main sections rather than commenting immediately on the colors.\nA clear structure helps visitors understand where they are and how to reach the information that matters for their current task.\nIf these elements compete for attention, the page can feel crowded even when there is enough empty space around them.\nThe icon may also sit slightly above the label, which makes two neighboring items look as though they do not belong together.\nVisual details communicate relationships, so a small difference in spacing or emphasis can change how someone understands a page.\nA consistent gap between related items makes the content easier to scan, especially when the page contains several different learning activities.\nOn mobile, the width of the content changes, and a comfortable desktop arrangement may become narrow or unnecessarily difficult to navigate.\nA cinematic image or a photorealistic illustration may be appropriate in one place and distracting in another, depending on the task.\nThe page contains the right information, but the title and the button compete for attention, especially on a small screen.\nThe heading should be closer to its own description, and the gap above the next section should be a little larger.\nYes, and the supporting text is rather faint, so it would help to improve the contrast before adding any decorative effects.\nI will compare desktop and mobile layouts and explain which changes improve grouping, readability, and access to the main action.",
    "textTranslate": "描述页面时，我先说明主要区块安排，不立即评论颜色。\n清晰结构帮助访客理解当前位置，以及如何找到当前任务所需信息。\n如果元素争抢注意力，即使周围空白够多，页面仍会显拥挤。\n图标也可能略高于文字，让相邻项目看起来不像一组。\n视觉细节传递关系，小小间距或强调差异就可能改变理解。\n相关项间距一致，会让多种学习活动所在页面更易浏览。\n移动端内容宽度变化，桌面舒适布局可能变窄或难导航。\n电影感或写实图片是否合适，取决于位置与任务。\n评审者：信息正确，但标题和按钮争抢注意，尤其在小屏上。\n评审者：标题应更靠近自己的描述，下一区块上方间距应稍大。\n评审者：是的，辅助文字偏淡，增加装饰前先提高对比度更有用。\n评审者：我会比较桌面和移动布局，解释哪些修改改善分组、阅读和主要操作。"
  },
  {
    "title": "07E Vocabulary in Context",
    "titleTranslate": "第07课E｜描述页面与视觉效果",
    "text": "The character in the illustration has an extremely simple outline, while the motion guides attention toward the main action.\nThe positioning rules define the positions of the cards, and an offset moves the label slightly away from the icon.\nOn a handheld device, the screen is smaller, so the same page needs a more compact arrangement of the controls.\nThe animation uses a slow movement to guide attention toward the button without making the whole page feel unstable.\nA bolder heading creates emphasis, while a blue badge can identify a category when color is not the only signal.\nThe hero section contains the main title, a short tagline, and a visual that introduces the product.\nA consistent logo, title style, and footer make separate pages feel like parts of one site.\nThe panel has a sticky header and a popover that opens beside the selected item.\nThe tabs should remain visible when the viewport becomes narrow, without creating horizontal overflow.\nThe mock image shows a spaceship near a hallway, but the final illustration should use the real product context.\nA camera capture can reveal facial details that are not appropriate for every public demonstration.\nThe image tool can colorize a picture, adjust its frame, or unwarp a distorted shape.\nThe layout builder uses flex behavior to distribute available space across the elements in a column.\nA narrow window needs a different outline around the focused control so that keyboard users can locate it.\nThe example headings and titles should be realistic, and the image should not turn an ordinary page into a dramatic movie scene.\nThe screen shows the current cursor position and a marker next to the selected text.",
    "textTranslate": "插图角色轮廓极简，动效引导主要操作。\n定位规则定义卡片位置，偏移量让标签略离图标。\n手持设备屏幕较小，控件需更紧凑安排。\n动画用缓慢移动引导按钮注意，不使页面不稳。\n醒目标题强调，蓝色徽章可识别分类，但不能只靠颜色。\n首屏主视觉区包含主标题、简短标语及产品图片。\n统一标志、标题样式和页脚让独立页面像一个站点。\n面板有吸附页头和选项旁弹出的浮层。\n可视区域变窄时标签页应仍可见，不产生横向溢出。\n模拟图展示走廊附近飞船，但最终插图应符合产品语境。\n相机拍摄可能暴露不适合公开演示的面部细节。\n图像工具可以着色、调框或还原变形形状。\n布局构建器用弹性行为把可用空间分给列中元素。\n窄窗口需为焦点控件设置不同轮廓，便于键盘用户定位。\n示例标题应真实，不应让图片把普通页面变电影场景。\n屏幕展示光标位置，并在选中文本旁显示标记。"
  }
]