03APP交互页面的设计与制作-4

主讲：张玲老师新媒体视觉设计视觉传达设计专业苏州经贸职业技术学院新媒体视觉设计实战匠心实践项目六H5交互动态页面设计与制作App交互页面的设计与制作010203信息可视化设计与制作3.1APP的设计与制作流程3.2APP的设计规范和工具3.3APP中的信息可视化设计3.4AIGC在APP交互页面设计中的应用3.5APP交互动态页面设计与制作APP交互页面的设计与制作03项目六

匠心实践新媒体视觉设计实战3.5.1APP交互动态页面设计与制作-明确需求书野微课App动态交互设计实战书野微课App的目标用户主要是中高职院校负责教材选购的老师，也包括一部分自购教材的学生及社会上有自学需要的人士。一般老师可在App上浏览和选择图书，然后联系当地经销商或企业进行订购，学生和社会人士可直接在App下单购买。另外，为适应当前教学及学生学习需要，App还为部分教材配备了相应的课程，学生可登录后购买学习。

本App的最终目的：一是方便老师选书；二是方便学生选书及自主学习课程；三是要对企

业起到一定的宣传和推广作用，为企业获得更多的发展机会。为此，App需要满足以下三点要求。（1）书籍列表和课程列表要有单独的页面，其余较为重要但比较琐碎的功能整合到一个页面中，且与书籍和课程列表页面同级。（2）老师一般会按照专业选择书籍，所以要按照专业对书籍进行分类，并且要方便用户查找。（3）用户在选择书籍时，肯定要对书籍的详细信息进行了解，因此要设计书籍或课程的详情页面，对书籍进行详细介绍。3.5.2APP交互动态页面设计与制作-确定设计风格在确定设计风格阶段中，我们可以从产品的目标用户出发。书野微课App的目标用户主要是中高职院校负责教材选购的老师，也包括一部分自购教材的学生及社会上有自学需要的人士。因此我们可以采取简约、清晰的设计风格设计参考3.5.3APP交互动态页面设计与制作-完成设计草案该案例中我们将使用Axure软件绘制完成书野微课App的高保真页面然后在AE中实现动态展示书野微课界面3.5.4APP交互动态页面设计与制作-完成设计草案首先启动AxureRP，在页面功能面板中双击默认页面，将其重命名为“绘制图书页面线框图书”。在样式功能面板中单击“自动”下拉按钮，在下拉列表中选择“iPhone11Pro...”，设置页面尺寸为375×812。3.5.5APP交互动态页面设计与制作-完成设计草案使用Axure制作底部导航栏的切换效果,将图标文件导入Axure中，转换为SVG形状完成制作后的3个图标3.5.6APP交互动态页面设计与制作-完成设计草案选中绘制好的导航栏的所有内容，右键转换为母版，命名为底部导航栏。3.5.7APP交互动态页面设计与制作-完成设计草案双击母版，进入母版编辑界面。进入母版编辑页面之后在样式栏中单击添加母版视图。3.5.8APP交互动态页面设计与制作-完成设计草案单击两次添加按钮，然后我们选中基本视图。在名称右侧这里我们输入选中图书。3.5.9APP交互动态页面设计与制作-完成设计草案使用相同的方法，然后我们对其余的两个视图进行重命名。选中课程。下面是选中我的。编辑完成后单击确定。接着在页面标签栏下方，我们选择选中图书标签，并取消影响所有视图的这个复选框3.5.10APP交互动态页面设计与制作-完成设计草案选择图书图标，这里我们给到一个深灰色。让这个图标变为选中状态3.5.11APP交互动态页面设计与制作-完成设计草案切换到选中课程视图，再选择图书图标，给它改为浅灰色。设置课程图标的形成颜色，给它变成深灰色。是选中“课程”时导航栏的状态按照上面的方法，可完成选中“我的”时导航栏的状态3.5.12APP交互动态页面设计与制作-完成设计草案添加页面交互,选中图书按钮，在右侧选择交互。设置交互状态：单击时打开链接：图书3.5.13APP交互动态页面设计与制作-完成设计草案将母版的不同状态应用于页面种，在图书页面状态为：选中图书3.5.14APP交互动态页面设计与制作-完成设计草案预览交互效果，在Axure种点击播放按钮。就会跳转至浏览器，在浏览器页面可以实现我们在软件中设置的交互效果。3.5.15APP交互动态页面设计与制作-完成设计草案使用AE完成页面的动态切换展示刚刚我们在Axure种实现的是比较生硬的交互效果，想要交互更加生动就需要借助视频制作软件AE来完成页面跳转动效是页面间整体的跳转，因此需要准备好“图书”页面、“课程”页面和“我的”页面图片。在AfterEffects中新建项目，先选择“合成/新建合成...”菜单项，弹出“合成设置”对话框，在其中设置相关选项；然后单击“确定”按钮新建合成，如图所示。“合成设置”对话框3.5.16APP交互动态页面设计与制作-完成设计草案在项目面板中单击新建文件夹按钮，并将其重命名为页面跳转。将本书配套素材第七章交互原型图页面跳转文件夹中的3个文件拖入文件夹。同时选中3个图片，按下鼠标左键向下拖动到时间轴面板中，在画面中调整缩放大小。3.5.17APP交互动态页面设计与制作-完成设计草案在工具栏中选择圆角矩形工具，设置其描边颜色为橙色。描边厚度为8，并将图层重命名为“手势”。向右边拖动圆度属性，使圆角矩形显示为圆形。3.5.18APP交互动态页面设计与制作-完成设计草案设置位置关键帧属性，实现手势点击切换页面1.手势图层关键帧设置：手势图层在12帧处的属性值为480，2300。22帧处的属性值设置为550,22803.5.19APP交互动态页面设计与制作-完成设计草案设置缩放属性关键帧将22帧处的关键帧复制到1秒12帧处，为手势涂层缩放属性添加关键帧，在1秒02帧处设置为80%，在1秒05帧处设置为75%，在1秒12帧处设置为100%。3.5.20APP交互动态页面设计与制作-完成设计草案设置不透明度属性关键帧在12帧、22帧、1秒05帧、1秒12帧处为图层变化属性组中的不透明度属性添加关键帧。单独设置12帧和1秒12帧处的属性值为0%，使其呈现从无到显现，点击之后再消失不见的效果。3.5.21APP交互动态页面设计与制作-完成设计草案按快捷键U可以看到我们给图层添加的所有关键帧类型3.5.22APP交互动态页面设计与制作-完成设计草案选中所有关键帧，按快捷键F9添加缓动效果3.5.23APP交互动态页面设计与制作-完成设计草案将时间指示器移到12帧处，并按快捷键Alt加左括号，再将时间指示器移到1秒12帧处，按快捷键Alt加右括号。3.5.24APP交互动态页面设计与制作-完成设计草案修剪涂层时间线的入点和出点时间。将课程页面涂层时间的入点修剪至1秒06帧处。3.5.25APP交互动态页面设计与制作-完成设计草案选择手势图层，复制一个图层副本，按下鼠标左键向右拖动复制图层的时间线，使时间入点和第一个关键帧位于2秒02帧处设置复制图层的位置。关键帧的属性值分别为。850，2300。930，2280。930，22803.5.26APP交互动态页面设计与制作-完成设计草案将课程页面图层时间线的出点和我的页面时间线的入点修剪至2秒21帧处3.5.27APP交互动态页面设计与制作-完成设计草案选择手势2图层，复制该图层，将手势3图层的时间入点和第一个关键帧的位置放在3秒18帧处，设置第一个位置属性值为285,2300，第二个和第三个位置属性值为200,2280。3.5.28APP交互动态页面设计与制作-完成设计草案将我的页面图层时间线的触点修剪至4秒12帧处3.5.29APP交互动态页面设计与制作-完成设计草案选中所有图层，右键单击