界面原型设计 课件 第5章 网站首页界面

第5章网站首页界面模块二网站界面原型设计教学重点难点PARTONE需求与架构总览PARTTWO导航栏模块化PARTTHREE轮播图交互实现PARTFOUR新闻与文章模块PARTFIVE快讯与视频数据驱动PARTSIX目录CONTENTS.热榜排行与底部导航PARTSEVEN教学小结与课堂作业PARTEIGHT目录CONTENTS.（01）教学重点难点PART-教学重点与难点熟练掌握网站首页四大模块的原型流程，包括导航、轮播、内容展示、底部导航。教学重点实现轮播图的无缝循环播放，确保新闻模块的悬停放大效果，以及热榜的动态更新功能。教学难点学会使用动态面板、中继器、母版等工具，完成模块化设计和数据驱动的页面制作。技能目标（02）需求与架构总览PART-网站首页包含导航栏、轮播图、新闻模块、最新文章、最新快讯、视频推荐、24小时热榜和底部导航栏。功能结构通过效果图展示首页的整体布局和视觉效果，为后续制作提供参考。效果图展示首页功能结构与效果图（03）导航栏模块化PART-顶部导航动态面板与母版新建1260×60的动态面板，设置100%宽度自适应，为导航栏提供基础容器。创建母版从系统元件库导入导航栏，删除多余项目，设置菜单文本、悬停与选中样式。为导航栏配置下拉菜单，设置菜单项的悬停填充效果，提升用户体验。将导航栏创建为母版，实现全局复用与统一维护，提高开发效率。配置下拉菜单导入导航栏元件创建导航面板（04）轮播图交互实现PART-导入轮播元件并调整尺寸为800×350，设置四张轮播图状态。导入轮播元件为轮播图替换01-04素材，确保视觉效果符合设计要求。替换轮播素材新增指示点Dot4，设置填充、透明度及单击切换状态，增强交互性。添加指示点为轮播图设置自动循环、5000ms间隔、左右箭头悬停变色，确保无缝衔接。设置自动循环轮播动态面板与指示点（05）新闻与文章模块PART-创建170×160新闻模块动态面板，插入图片与双层标题，设置基础布局。创建新闻模块设置鼠标进入时图片放大至230×230并切换完整标题，移出时恢复，提升交互体验。设置悬停效果通过复制与素材替换快速生成四宫格新闻区，实现统一交互与视觉一致性。批量生成新闻新闻模块悬停放大创建800×840“最新文章”容器，为文章卡片提供布局空间。创建文章容器将首篇文章制作为“文章卡片”母版，后续通过脱离母版替换内容，实现高效更新。创建母版设计包含背景、图片、标签、标题、摘要、来源与时间的文章卡片，丰富内容展示。设计文章卡片通过母版确保文章卡片的样式统一，提升整体视觉效果。样式统一最新文章母版卡片（06）快讯与视频数据驱动PART-添加“查看更多”按钮与悬停变色效果，提升用户交互体验。添加交互效果时间轴快讯列表使用组合“快讯标题与时间”并复制五组，设置10px间距，生成快讯列表。生成快讯列表构建370×840“最新快讯”动态面板，包含标题、时间轴垂直线、时间点圆点。构建快讯容器视频推荐中继器创建800×550“视频推荐”容器，为视频展示提供布局空间。创建视频容器拖入中继器实现三列卡片布局，提升页面信息密度。拖入中继器设置背景、内联框架、标题、作者、时间元件，丰富视频卡片内容。设置视频元素在数据中维护url、title、author、time四列，通过项目加载时绑定变量实现批量渲染。绑定数据（07）热榜排行与底部导航PART-确保热榜排行的视觉效果与整体页面风格保持一致。视觉一致性中继器数据绑定picture、ranking、title、time四列，实现动态排行更新。绑定数据设置排行标签、标题、时间、图片悬停放大效果，增强视觉吸引力。设置排行元素创建370×710热榜容器，包含TOP1-2大图卡片与TOP3中继器列表。创建热榜容器24小时热榜排行创建1260×100底部导航动态面板，设置100%宽度自适应，填充深灰色。输入版权与分类链接文本，设置文字链接及悬停变色效果。通过母版或全局元件实现全站统一底部，确保品牌一致性与维护效率。创建底部导航输入版权信息实现全局统一底部导航版权区（08）教学小结与课堂作业PART-教学小结掌握首页模块化思路，包括母版导航、轮播自动循环、新闻悬停放大等。模块化思路重点理解动态面板状态、中继器变量绑定、母版复用三大核心技能。核心技能为后续复杂页面制作奠定扎实基础，提升综合设计能力。后续基础