数字媒体交互设计（慕课版） 课件 016第三章4网页高保真制作案例-Axure与Ps结合应用.pptx

综合实例网页高保真制作案例-Axure与Ps结合应用天津电子信息职业技术学院知识要点1、制作web首页2、页面的切图和存储3、高保真案例——界面制作4、高保真案例——秒杀倒计时功能5、高保真案例——面板随鼠标滑动6、高保真案例——内联框架添加视频7、高保真案例——图片放大预览功能第一部分制作web首页制作web首页 主页的制作页头：标志或品牌标识、标语、导航、搜索主体：内容区域页脚：版权声明、友情链接、联系方式、备案… …… …制作web首页 主页的制作页头：标志或品牌标识、标语、导航、搜索主体：内容区域页脚：版权声明、友情链接、联系方式、备案… …… …制作web首页 主页的制作页头：标志或品牌标识、标语、导航、搜索主体：内容区域页脚：版权声明、友情链接、联系方式、备案… …… …制作web首页新建页面新建画布：1920*1080分辨率72px；颜色模式RGB，8位制作web首页设定参考线使用选区加辅助参考线的方法设定有效分辨率制作web首页logo图标做页面之前需将用到的图标都设计好，排版时置入进来即可；将图层命名为logo制作web首页导航菜单文字标题文字字号14-16颜色不要纯黑制作web首页搜索框使用工具矩形工具绘制根据具体情况设置描边和倒角制作web首页轮播图banner设定轮播图的参考线制作web首页首页完成使用前几步的方法即可完成高保真页面的制作；第二部分页面的切图和存储页面的切图和存储 切图文字及矩形工具等不需要切图图片、logo、图标需要切图… …… …页面的切图和存储 存储优化文件大图片… …… …页面的切图和存储 标注对文字、矩形框等没有切图的图层元素进行标注，便于后期原型设计制作；… …… …第三部分高保真案例——界面制作高保真案例——界面制作高保真案例——界面制作如图创建一个2列，列宽为600，间距为0，距离边距为50的全局辅助线高保真案例——界面制作如图创建一个动态面板，并把它的宽度设置为100%宽度，这样在进行原型预览的时候就可以根据浏览器的宽度进行平铺，并把颜色设置为#333333，并把动态面板的阴影打开。如图创建一个动态面板，进行顶部菜单栏的制作，根据设计的功能添加相应的文字。高保真案例——界面制作第四部分高保真案例——秒杀倒计时功能高保真案例——秒杀倒计时功能高保真案例——秒杀倒计时功能高保真案例——秒杀倒计时功能设置秒数第五部分高保真案例——面板随鼠标滑动高保真案例——面板随鼠标滑动高保真案例——面板随鼠标滑动高保真案例——面板随鼠标滑动高保真案例——面板随鼠标滑动高保真案例——面板随鼠标滑动例如当鼠标从商品面板的左侧移入时，通过左侧热区的判断然后设置浮层面板显示并向右滑动因为此时交互事件是放在了商品面板上的需要把商品面板置于顶层，否则就无法正常检测到移入移出时需要的交互效果。高保真案例——面板随鼠标滑动第六部分高保真案例——内联框架添加视频高保真案例——内联框架添加视频添加视频链接内联框架播放视频设置为隐藏边框、从不滚动、预览样式选择视频高保真案例——内联框架添加视频添加视频链接当元件载入时给内联框架设置视频的连接进行载入的播放当切换别的图片是取消选中，并在取消选中时将内联框架的视频链接进行删除，否则当切换元件时也会在后台进行播放视频的操作而当再次选中时在为内联框架重新设置播放视频的视频链接即可进行视频播放高保真案例——内联框架添加视频添加视频链接高保真案例——内联框架添加视频添加本地视频发布生成的HTML文件会生成Axure中各个页面的HTML文件在设置内联框架播放视频交互事件的视频链接地址中填入本地视频的名称包括后缀名高保真案例——内联框架添加视频添加本地视频重新生成当前页面的HTML文件注意本地视频的添加只能在文件中找到对应的页面进行双击预览，无法在Axure中进行实时预览。高保真案例——内联框架添加视频添加本地视频预览第七部分高保真案例——图片放大预览功能高保真案例——图片放大预览功能预览区域的样式高保真案例——图片放大预览功能右面板2的样式高保真案例——图片放大预览功能高保真案例——图片放大预览功能高保真案例——图片放大预览功能高保真案例——图片放大预览功能高保真案例——图片放大预览功能设计组件本课内容结束 祝学习顺利天津电子信息职业技术学院本节课程主要的内容是实例讲解，使用ps制作web首页（主页包含的内容），以及对页面进行切图和存储；在制作web首页前，我们需要根据我们设计的低保真或者线稿图，来知道我们首页都要制作哪些内容，包含的元素，以及尺寸比例；首先我们要知道我们要制作的主页都包含哪些内容：页头部分：客户的标识和标语；主要告诉用户这是什么网站，它是做什么的。品牌理念(Tagline)；最有价值的位置之一是靠近logo的地方，当我们看到一个和客