0分0秒

界面布局与视觉设计

进阶层章内定位操作训练 建议时长7 分钟 产业场景UI设计与视觉设计 设备无需摄像头、麦克风
下载

仿真实验区

开始实验并完成课前步骤后,这里的操作计入成绩

实验说明

实验三:界面布局与视觉设计

为成都一家文创店设计手机、平板、电脑三种尺寸的首页:选择Grid/Flex/Float布局和栅格列数,调整配色、间距、圆角、字号层级。

用按钮文字对比度、正文每行字数、标题与正文字号比、卡片宽度四项指标检验设计,理解视觉层级与可用性。

达成要求:能为文创店首页在手机、平板、电脑三种宽度下选择合适的布局与栅格列数,调整配色、间距、字号层级,使按钮对比度、每行字数、标题层级、卡片宽度四项指标全部合格。

  • 对比Grid、Flex、Float三种布局在卡片换行时的差异,打开12栏栅格检查对齐
  • 切换配色和文字颜色,让按钮文字对比度达到4.5:1以上
  • 调整正文字号和层级比,使每行字数和标题层级落在推荐范围
  • 在手机、平板、电脑三种宽度下检查响应式效果
  • 让设计检查中的各项指标全部合格
  • 知识目标: 掌握界面设计的原则与技巧
  • 能力目标: 培养视觉设计与审美能力
  • 素养目标: 理解形式追随功能的设计哲学
  • 设计四大基本原则
  • 8点栅格系统
  • 色彩理论与调色板
  • 字体排印学
  • 视觉层级设计
  • 响应式断点设计

漫话数媒

开始实验后,课前的“AI 导学”会在这里生成奇思、妙想的对话。