备课笔记-网页高保真制作案例-Axure与Ps结合应用.doc

编号16-01【web产品交互设计开发制作】 编号16-01 学习任务十、网页高保真制作案例-Axure与Ps结合应用 一、课程说明与要求 1.课程说明 本阶段课程分为三个部分，第一部分为Photoshop制作web首页，介绍了Photoshop制作web首页；第二部分为页面的切图和存储，介绍Photoshop切图与存储操作；第三部分为Axure高保真功能实现案例，重点说明网页交互中的功能Axure高保真的实现；通过学习Axure高保真交互案例制作，学生可以全面、深入、透彻地理解Axure原型设计工具的使用方法，提高产品交互设计能力和项目实战能力。 2.工具材料准备说明 本课的作业作品实践需要同学们提前准备一些工具和材料。 工具材料 备注 Photoshop 每台电脑安装 Axure 每台电脑安装 二、学情分析与课程导入 1.学情分析 本课程为高保真效果实现课程，需要能深入掌握Axure各个元件的使用以及PS图片搭建页面的操作，然后将高保真原型效果实现出来。需要学生在学习过程中，结合实际的网页交互案例进行操作感受。在进行原型设计效果制作的同时，要不断思考原型设计效果的实现逻辑，思考如何做到与最终成品一致的效果，这是非常重要的。此外，这时一门实践性较强的课程，需要学生在平时学习时不断的思考各个实际案例中交互效果实现的方式方法，提高制作高保真交互效果。 2.课程导入 我们之前学习了Axure低保真交互效果。而想要把一个高保真交互效果制作出来，需要结合Photoshop工具将web页面的元素切图，在Axure中进行页面搭建，这样才能制作逼真的网页交互界面。那么，本节课将通过对网页中的交互在Axure中实现高保真的效果，来对Axure实现交互原型设计有更深入的了解。 三、理论知识讲解 （一）制作web首页 主页的制作 首先我们要知道我们要制作的主页都包含哪些内容，这时对网页原型制作时整体上的把控： 页头部分： 客户的标识和标语：主要告诉用户这是什么网站，它是做什么的。 品牌理念(Tagline)：最有价值的位置之一是靠近logo的地方，当我们看到一个和客户企业logo相关联的短语时，就知道这是口号，然后我们会把它当作整个网站的描述。口号是一条精炼的语句，刻画了整个企业。 欢迎广告：欢迎广告是网站的简要描述，在主页的首要位置显示，不需要滚动屏幕就能看到。 网页的层次：主页要给网站提供服务的概貌：既要包括内容(我能在这里找到什么)，也要包括功能(“我能做什么”) 有哪些信誉好的足球投注网站：大多数网站需要在主页上设置一个显示突出的有哪些信誉好的足球投注网站框。它是一个站内给用户直接到达目的地的通道，起到了一个引导用户走向的重要作用。 导航：导航位于页面顶部或者侧边区域的，在页眉横幅图片上边或下边的一排水平导航按钮，它起着链接站点或者软件内的各个页面的作用；以及包含用户登录、注册、个人中心等信息 编号16-02 编号16-02 主体：内容区域,是展示部分的主体，以展示为主 页脚部分:这部分包含一些版权信息、友情链接，联系方式、备案信息等；通常页头和页脚是整个站点通用的部分； 【思政融入（整体决定部分，培养大家具有系统思想，建立系统观与大局观，使我们日后在工作中编号16-03，能够站在更高的位置，驾驭整体，统管全局）】 编号16-03 【那么在这部分的学习中，请大家思考一下如何制作高保真主页界面】 （二）页面的切图和存储 1.文字及矩形工具等不需要切图，需要将字号大小，尺寸、色号等信息标注出来，供原型图绘制时使用；图片、logo、图标需要切图。 2.导出的文件信息比较大，我们可以使用“文件”导出“存储为web所用格式”进行优化； 3.标注： 对文字、矩形框等没有切图的图层元素进行标注，比如字号、字间距、字体颜色、矩形框的透明度、倒角数值等信息；便于后期原型设计制作 编号16-04 编号16-04 【我们在了解了Photoshop制作页面切图后，在接下来的部分，就Axure的制作高保真效果来进行重点的讲解】 （三）高保真案例 ……………………………………………………………………【重点】 1.秒杀倒计时功能 （1）倒计时的功能就是需要根据一个固定的时间然后不断递减，并把相应的时间在Axure的文本元件中显示出来。 首先需要在Axure的项目菜单中添加两个全局变量来进行时间的变化的计算，在全局变量添加面板中添加一个dataObject用来赋值一个设定的倒计时间，添加另一个elapsed用来在间隔一秒的时候进行加1，相当于已过去的时长。 当变量设置好后就可以进行交互事件的添加。 面板随鼠标滑动 面板随鼠标移动方向进行滑动显示的效果，准备一个图片元件和一个显示信息的元件，可以命名为浮层元件,将两个商品图片和浮层元件进行重合放置，并把浮层元件进行隐藏。 编号16-05 编号16-05 将图片