UI交互设计案例教程 第七章.pptxVIP

07文旌课堂App的界面与动效设计 签到签到方式 教师通过“文旌课堂APP”生成签到二维码，并设置签到时间，学生通过“文旌课堂APP”扫描“签到二维码”进行签到。。扫码下载文旌课堂APP扫码签到 为了帮助同学们学习如何完整地设计并制作移动端App的界面线框图及其交互动效，进一步了解UI交互设计师的基本职责，并联系实际培养自身的实践能力，最终达到学以致用的目的。 本章按照UI交互设计的基本流程，介绍了移动端App“文旌课堂”的需求规划、界面线框图与动效设计，并重点介绍了该App交互动效的制作方法。单元导读 ★熟悉移动端App的基本设计流程知识目标★自觉培养大局意识，学会从全局视角观察和解决问题★将理论知识应用到实践中，提升专业技能 思政目标★掌握使用Axure RP绘制移动端App页面线框图的方法★掌握使用After Effects制作移动端App交互动效的方法 技能目标学习目标 （1）书籍列表和课程列表要有单独的页面，其余较为重要但比较琐碎的功能整合到一个页面中，且与书籍和课程列表页面同级。（2）老师一般会按照专业选择书籍，所以要按照专业对书籍进行分类，并且要方便用户查找。（3）用户在选择书籍时，肯定要对书籍的详细信息进行了解，因此要设计书籍或课程的详情页面，对书籍进行详细介绍。7.1 前期规划7.1.1 需求分析 文旌课堂App的目标用户主要是中高职院校负责教材选购的老师，也包括一部分自购教材的学生及社会上有自学需要的人士。一般老师可在App上浏览和选择图书，然后联系当地经销商或企业进行订购，学生和社会人士可直接在App下单购买。另外，为适应当前教学及学生学习需要，App还为部分教材配备了相应的课程，学生可登录后购买学习。 本App的最终目的：一是方便老师选书；二是方便学生选书及自主学习课程；三是要对企业起到一定的宣传和推广作用，为企业获得更多的发展机会。为此，App需要满足以下三点要求。 7.1 前期规划7.1.2 用户行为流程设计 从无到有设计产品时，要先从整体把握用户行为流程；然后对流程节点进行延伸，由大到小逐步完善产品。 文旌课堂App的用户行为流程主要包括用户使用App的主要行为流程和登录、注册App 的流程。首先根据实际生活中的购物流程，可以确定用户使用文旌课堂App的大致行为流程为“打开App→选择商品→查看商品详情页→付款”；然后根据产品设计目标丰富用户行为流程，如用户选择商品前可能需要先浏览商品或搜索同类型商品。 综上所述，最后绘制出的主要用户行为流程图，如图所示。产品的主要用户行为流程图 在实际使用App时，登录和注册也是一件极其复杂的事，因此可以针对用户登录和注册App的步骤单独绘制一张流程图，以指明用户登录和注册App的具体流程，如图所示。登录和注册App 的用户行为流程图 ★提示：在设计产品的用户行为流程时，要尽量减少用户完成某项任务所需要的步骤，使用户可以更快达成目的，方便用户操作。另外，要确保设计的步骤和功能是可实现的。7.1 前期规划7.1.2 用户行为流程设计 在进行产品信息架构设计，绘制产品信息架构图时，要以产品为核心，围绕其展开绘制，首先确定登录后的一级界面，然后再逐个完善和展开一级界面中所包含的功能和内容，最后形成完整的信息架构图。 市面上的大多数App都是使用底部导航栏对App的功能进行分类的，此处也不例外，我们在绘制时可以先对底部导航栏进行设计，然后再根据层级安排继续绘制一级界面中所包含的其他功能。7.1 前期规划7.1.3 产品信息架构设计 根据设计目标，先将文旌课堂App中的图书和课程分别设置为两个一级界面；然后将购物车、添加课程后的学习界面、个人信息、地址设置等较为重要且相互之间无包含关系的功能组合到一个一级界面——“我的”中，并将上述功能作为该界面中的主要功能，既方便用户查找，又使App的结构看起来更加简洁。 7.1 前期规划7.1.3 产品信息架构设计 在设计图书和课程界面的功能和结构时，可参考同类App 的界面，如设置Banner广告，既可以吸引用户眼球，又可以向用户展示优秀的书籍和线上课程。目前，App中的图书以计算机类为主，但考虑到产品的后续发展，可以在图书和课程界面中对商品进行分类，当上架新的图书时可直接放置到对应类别，不会破坏App的主要结构。按照上述方法进行思考与设计，最终绘制出的文旌课堂App信息架构图，如图所示。 ★提示：在绘制产品信息架构图时，对相同的界面要明确标识（ 如点击“ 客服”和“ 在线客服”进入的页面是同一页面），或用带箭头的线段指出两者之间的对应关系，以便快速识别。由于产品