界面布局与视觉设计
实验说明
实验三:界面布局与视觉设计
为成都一家文创店设计手机、平板、电脑三种尺寸的首页:选择Grid/Flex/Float布局和栅格列数,调整配色、间距、圆角、字号层级。
用按钮文字对比度、正文每行字数、标题与正文字号比、卡片宽度四项指标检验设计,理解视觉层级与可用性。
达成要求:能为文创店首页在手机、平板、电脑三种宽度下选择合适的布局与栅格列数,调整配色、间距、字号层级,使按钮对比度、每行字数、标题层级、卡片宽度四项指标全部合格。
- 对比Grid、Flex、Float三种布局在卡片换行时的差异,打开12栏栅格检查对齐
- 切换配色和文字颜色,让按钮文字对比度达到4.5:1以上
- 调整正文字号和层级比,使每行字数和标题层级落在推荐范围
- 在手机、平板、电脑三种宽度下检查响应式效果
- 让设计检查中的各项指标全部合格
- 知识目标: 掌握界面设计的原则与技巧
- 能力目标: 培养视觉设计与审美能力
- 素养目标: 理解形式追随功能的设计哲学
- 设计四大基本原则
- 8点栅格系统
- 色彩理论与调色板
- 字体排印学
- 视觉层级设计
- 响应式断点设计
漫话数媒
开始实验后,课前的“AI 导学”会在这里生成奇思、妙想的对话。
已阅读实验说明、看过仿真实验区,可直接从这里开始

