《交互界面设计》课件-第4章 APP界面设计

交互界面设计UIdesignUI设计UIdesign4.1APP概念、类型与开发流程学习目的1.了解APP的概念2.了解常见APP类型3.了解APP的开发流程APP的概念4.1.1APP的概念APP是Application的缩写，也称APP软件、APP应用或APP客户端等，是运行在手机系统上的应用程序，它为用户提供了诸多便捷，让用户随时随地实现购物、浏览网页、社交、学习和游戏等操作。常见APP类型4.1.2常见APP类型一、生活服务类从简单的天气预报到复杂的缴费、购物和订餐等，提供这类服务的APP便属于生活服务类APP。这类APP的界面布局简洁整齐，用色比较柔和，界面元素多采用圆角设计，能给用户大方和亲切的心理感觉。常见的有京东、美团外卖、手机淘宝和携程旅行等。4.1.2常见APP类型二、影音娱乐类影音娱乐类APP的内容主要以视频和音频为主。这类APP的界面多采用图文结合的形式整齐排列各个版块，以精美的大尺寸图片作为页面主要信息，目的是突出热门信息，吸引用户视线。常见的影音娱乐类APP有爱奇艺、腾讯视频、哔哩哔哩、华为视频、酷狗音乐等。4.1.2常见APP类型三、社交类社交类APP涵盖范围很广，比如我们每天都在用的QQ、微信、微博、抖音、钉钉等，都属于社交类APP的范畴。随着信息技术的发展，一些电商、教育、资讯、直播和游戏等APP也融入了聊天和通话功能，使得这些APP具备的社交属性。4.1.2常见APP类型四、教育学习类根据教育内容和用途的不同，这类APP内容以视频和文章为主，页面布局与影音娱乐类APP的布局方式相似。常见的教育学习类APP有腾讯课堂、虎课、学浪等。4.1.2常见APP类型五、游戏类与其他类型的APP相比，游戏类APP更强调沉浸式的用户体验。在游戏中，界面的状态栏、导航栏和标签栏都将被隐藏，取而代之的是全屏的游戏界面，这样能使用户更专注游戏内容。近年来，游戏APP产业发展迅猛，比较突出的有皇室战争、王者荣耀、荒野行动和开心消消乐等。APP开发流程4.1.3APP开发流程一款APP的开发需要经过多个环节，每个环节人员的工作内容不同但彼此联系。为了更好地开展设计工作，我们需要简单了解该流程的各个环节，如下图所示。4.1.3APP开发流程一款APP的开发需要经过多个环节，每个环节人员的工作内容不同但彼此联系。为了更好地开展设计工作，我们需要简单了解该流程的各个环节，如下图所示。二维动画4.1.3APP开发流程二维动画一、产品规划0102030405PM收集需求确定整体规划和功能模块绘制产品结构图制作低保真原型形成详细开发需求文档4.1.3APP开发流程一、产品规划01PM收集需求02确定整体规划和功能模块0304绘制产品结构图制作低保真原型在APP开发前，首先由产品经理(PM)收集需求，如产品定义、竞品调研等，形成分析报告。产品经理根据需求确定项目整体规划和系统功能模块等。然后使用专业的产品结构图制作软件(如Xmind)绘制产品结构图，接着根据产品结构图简略手绘原型或使用快速原型设计工具(如AxureRP)制作低保真原型。最后经过产品经理、开发和设计的反复讨论后，形成详细的开发需求文档。4.1.3APP开发流程一、产品规划1.低保真原型低保真原型也称交互原型，一般由产品经理或交互设计师完成，主要用来说明产品功能、逻辑结构和基本布局。2.高保真原型是指由交互设计师根据低保真原型制作的无限接近最终产品的线框图，用来表现产品流程、逻辑、布局、视觉效果和操作状态等。4.1.3APP开发流程二、设计1.交互设计师（UX）会将低保真原型进一步优化，并更多考虑用户操作流程、信息架构、交互细节和页面效果，最终完成高保真原型。2.视觉设计师（UI）需要在充分了解整个页面逻辑的前提下，根据高保真原型完成设计稿，该环节最终产物是页面切图和标注。4.1.3APP开发流程二、设计3.用户体验设计（UE）原则是以用户为核心，保证产品的功能与审美平衡。在这一阶段要通过各种途径让目标用户体验产品，分析目标用户群的习惯、行为、感情、思考、语言或动机等，可以让你做出更好的设计。4.1.3APP开发流程三、开发程序员根据设计团队提供的高保真原型、页面切图和标注搭建页面，根据产品经理提供的开发需求文档开发功能，最终完成APP的开发。4.1.3APP开发流程四、测试

APP开发完成后，测试人员需要对APP的功能、兼容性、容错性、性能效率、易用性、压力和信息安全等问题进行测试，并将发现的问题及时反馈给开发人员或设计人员进行修改。之后，测试人员做上线前的最终测试。测试过程中视觉设计师需要与测试人员相互协作，找出开发后的页面与原型之间的差别，从而使APP与原型的规格一致。4.1.3APP开发流程五、上线通过测试后，运营人员负责将产品发布到苹果商店和各大安卓市场，并通过各种手段（微博宣传、投放广告或线下活动等）提升APP人气，然后将运营过程中发现的问题反馈给产品团队，由产品经理发起APP的版本迭代。UI设计UIdesign4.2APP页面构成元素学习目的1.了解APP页面构成2.了解常见的6种导航形式APP页面构成4.2.1APP页面构成基础的APP页面由栏和内容视图两大部分构成，而栏又由状态栏、导航栏和标签栏3部分构成，如下图所示。一、栏4.2.1APP页面构成一、栏1.状态栏位于页面顶部，高为40像素，用来显示通知、时间、信号和电量等常规信息。无论是iOS系统还是Android系统，状态栏一般都是透明的，其中的图标和文字会根据当前页面的颜色更改为白色或黑色，如下图所示。状态栏在制作时符合视觉习惯即可。4.2.1APP页面构成一、栏2.导航栏位于状态栏下方，高为88像素，用于管理屏幕信息，以及页面层级结构间的导航。导航栏左侧为后退按钮，中间显示当前页面的内容标题，右侧为当前页面的操作按钮。栏内的按钮可以是文字，也可以是图标。导航栏添加按钮，可用加号或其他表示可展开的图标代替。4.2.1APP页面构成一、栏3.标签栏标签栏是APP的全局导航，用户可点击此栏中的功能图标快速切换页面。标签栏一般位于页面底部，高为98像素，栏内图标分为选中和未选中两种状态，通常使用剪影图标加文字描述的方式表示。栏内图标以3～5个为宜，且文字要通俗易懂，精炼概括，尽量不超过4个汉字宽度，如下图所示。4.2.1APP页面构成二、内容视图1.表格视图内容视图包括APP的主要内容信息和交互行为，是视觉设计的主要区域。适合展示数量较多，级别相同的信息。在等高的单元格中，标题信息默认左对齐，副标题、按钮右对齐。4.2.1APP页面构成二、内容视图2.文本视图内容视图包括APP的主要内容信息和交互行为，是视觉设计的主要区域。一个能显示多行文本的区域。当内容太多而超出显示范围时，页面还可支持滚屏，将文本内容显示完整。4.2.1APP页面构成二、内容视图3.临时视图内容视图包括APP的主要内容信息和交互行为，是视觉设计的主要区域。在内容视图中占位较小，是向用户提供额外功能和选项的视图。例如，点击加号后出现的下拉列表，在删除APP时弹出的提示对话框等，都属于临时视图。常见导航形式4.2.2常见导航形式1.卡片式导航此处的导航区别于前面所说的导航栏，它是对页面中各元素的整合设计。优秀的导航设计能更好地引导和帮助用户使用APP的各项功能。通过卡片对信息进行归纳，可以增加页面的层次感，让信息有更明显和更规矩的区分，给用户很好的视觉感受。但卡片周围都要保留一定间距，这会占用屏幕空间，导致一屏内无法呈现较多信息。因此，这类导航不适合用于阅读或新闻等以文字为主的APP中。使用该类导航的APP有米家、英语流利说和爱彼迎等，如右图所示为学习强国和爱彼迎APP页面的卡片式导航。学习强国爱彼迎4.2.2常见导航形式2.舵式导航此处的导航区别于前面所说的导航栏，它是对页面中各元素的整合设计。优秀的导航设计能更好地引导和帮助用户使用APP的各项功能。舵式导航能较大限度地引导用户，其标签栏中通常有3或5个导航项，中间的导航项是重要且需要频繁点击的功能图标。舵式导航重点突出了核心功能，并放进了一些常用的功能。可以提高导航栏趣味性，让用户贡献更多的内容。不足之处是将多个功能在+号里，增加了点击的层次。使用该类导航的APP有美拍、小红书、开源中国和映客直播等，如右图所示为使用舵式导航的喜马拉雅和闲鱼APP页面。喜马拉雅闲鱼4.2.2常见导航形式3.列表式导航此处的导航区别于前面所说的导航栏，它是对页面中各元素的整合设计。优秀的导航设计能更好地引导和帮助用户使用APP的各项功能。层次清晰，易于理解，可展示内容较长的标题，配合下拉列表还可展示次级内容。但列表式导航的灵活性较差，只能通过顺序或颜色来区分入口级别，同级标题过多时，会使用户产生视觉疲劳。使用该类导航的APP有微信、网易新闻、每日瑜伽和简书等，如右图所示为使用列表式导航的微信APP页面。微信4.2.2常见导航形式4.抽屉式导航此处的导航区别于前面所说的导航栏，它是对页面中各元素的整合设计。优秀的导航设计能更好地引导和帮助用户使用APP的各项功能。也称侧滑式导航，用户可通过左右滑动页面，或点击页面左上角的展开按钮，控制当前页面的显隐。抽屉式导航适合作为产品的辅助导航，一般用来放置需要但是不常用到的功能，例如设置、当前用户等信息其缺点是：功能容易被忽视。另外，操作效率低，用户需要双手操作，然后等待菜单展开数据，再点击功能。使用该类导航的APP有手机QQ、滴滴出行、网易邮箱和酷狗音乐等，如图所示。手机QQ滴滴出行4.2.2常见导航形式5.瀑布式导航此处的导航区别于前面所说的导航栏，它是对页面中各元素的整合设计。优秀的导航设计能更好地引导和帮助用户使用APP的各项功能。目前比较流行的导航形式。其特点是随着页面向下滚动，内容会不断加载，直至穷尽。适合展示以图片或视频为主的信息，如图所示为使用瀑布式导航的微博APP。根据APP的版式需求，内容视图中的模块也可用双排平齐或错位排列，如图所示为双排平齐的优美图APP页面。瀑布式导航的缺点是不适合层级架构复杂的产品，容易发生空间位置迷失；容易产生疲劳感。使用该类导航的APP还有花瓣和腾讯视频等。微博优美图4.2.2常见导航形式6.宫格式导航此处的导航区别于前面所说的导航栏，它是对页面中各元素的整合设计。优秀的导航设计能更好地引导和帮助用户使用APP的各项功能。将功能入口等距分布在页面中，便于用户查找所需功能。一般横向不超过5个图标，超过时可将设置为左右滑动形式。缺点在于：一旦进入某个页面后，需要返回主页才可进入其他功能入口，形成较长的路径链，不适合多任务操作。因此，常用作次级导航。使用该类导航的APP有优酷、支付宝主页和微信中的“钱包”页等。腾讯视频国家政务UI设计UIdesign4.2APP页面构成元素学习目的1.了解APP页面构成2.了解常见的6种导航形式APP页面构成4.2.1APP页面构成基础的APP页面由栏和内容视图两大部分构成，而栏又由状态栏、导航栏和标签栏3部分构成，如下图所示。一、栏4.2.1APP页面构成一、栏1.状态栏位于页面顶部，高为40像素，用来显示通知、时间、信号和电量等常规信息。无论是iOS系统还是Android系统，状态栏一般都是透明的，其中的图标和文字会根据当前页面的颜色更改为白色或黑色，如下图所示。状态栏在制作时符合视觉习惯即可。4.2.1APP页面构成一、栏2.导航栏位于状态栏下方，高为88像素，用于管理屏幕信息，以及页面层级结构间的导航。导航栏左侧为后退按钮，中间显示当前页面的内容标题，右侧为当前页面的操作按钮。栏内的按钮可以是文字，也可以是图标。导航栏添加按钮，可用加号或其他表示可展开的图标代替。4.2.1APP页面构成一、栏3.标签栏标签栏是APP的全局导航，用户可点击此栏中的功能图标快速切换页面。标签栏一般位于页面底部，高为98像素，栏内图标分为选中和未选中两种状态，通常使用剪影图标加文字描述的方式表示。栏内图标以3～5个为宜，且文字要通俗易懂，精炼概括，尽量不超过4个汉字宽度，如下图所示。4.2.1APP页面构成二、内容视图1.表格视图内容视图包括APP的主要内容信息和交互行为，是视觉设计的主要区域。适合展示数量较多，级别相同的信息。在等高的单元格中，标题信息默认左对齐，副标题、按钮右对齐。4.2.1APP页面构成二、内容视图2.文本视图内容视图包括APP的主要内容信息和交互行为，是视觉设计的主要区域。一个能显示多行文本的区域。当内容太多而超出显示范围时，页面还可支持滚屏，将文本内容显示完整。4.2.1APP页面构成二、内容视图3.临时视图内容视图包括APP的主要内容信息和交互行为，是视觉设计的主要区域。在内容视图中占位较小，是向用户提供额外功能和选项的视图。例如，点击加号后出现的下拉列表，在删除APP时弹出的提示对话框等，都属于临时视图。常见导航形式4.2.2常见导航形式1.卡片式导航此处的导航区别于前面所说的导航栏，它是对页面中各元素的整合设计。优秀的导航设计能更好地引导和帮助用户使用APP的各项功能。通过卡片对信息进行归纳，可以增加页面的层次感，让信息有更明显和更规矩的区分，给用户很好的视觉感受。但卡片周围都要保留一定间距，这会占用屏幕空间，导致一屏内无法呈现较多信息。因此，这类导航不适合用于阅读或新闻等以文字为主的APP中。使用该类导航的APP有米家、英语流利说和爱彼迎等，如右图所示为学习强国和爱彼迎APP页面的卡片式导航。学习强国爱彼迎4.2.2常见导航形式2.舵式导航此处的导航区别于前面所说的导航栏，它是对页面中各元素的整合设计。优秀的导航设计能更好地引导和帮助用户使用APP的各项功能。舵式导航能较大限度地引导用户，其标签栏中通常有3或5个导航项，中间的导航项是重要且需要频繁点击的功能图标。舵式导航重点突出了核心功能，并放进了一些常用的功能。可以提高导航栏趣味性，让用户贡献更多的内容。不足之处是将多个功能在+号里，增加了点击的层次。使用该类导航的APP有美拍、小红书、开源中国和映客直播等，如右图所示为使用舵式导航的喜马拉雅和闲鱼APP页面。喜马拉雅闲鱼4.2.2常见导航形式3.列表式导航此处的导航区别于前面所说的导航栏，它是对页面中各元素的整合设计。优秀的导航设计能更好地引导和帮助用户使用APP的各项功能。层次清晰，易于理解，可展示内容较长的标题，配合下拉列表还可展示次级内容。但列表式导航的灵活性较差，只能通过顺序或颜色来区分入口级别，同级标题过多时，会使用户产生视觉疲劳。使用该类导航的APP有微信、网易新闻、每日瑜伽和简书等，如右图所示为使用列表式导航的微信APP页面。微信4.2.2常见导航形式4.抽屉式导航此处的导航区别于前面所说的导航栏，它是对页面中各元素的整合设计。优秀的导航设计能更好地引导和帮助用户使用APP的各项功能。也称侧滑式导航，用户可通过左右滑动页面，或点击页面左上角的展开按钮，控制当前页面的显隐。抽屉式导航适合作为产品的辅助导航，一般用来放置需要但是不常用到的功能，例如设置、当前用户等信息其缺点是：功能容易被忽视。另外，操作效率低，用户需要双手操作，然后等待菜单展开数据，再点击功能。使用该类导航的APP有手机QQ、滴滴出行、网易邮箱和酷狗音乐等，如图所示。手机QQ滴滴出行4.2.2常见导航形式5.瀑布式导航此处的导航区别于前面所说的导航栏，它是对页面中各元素的整合设计。优秀的导航设计能更好地引导和帮助用户使用APP的各项功能。目前比较流行的导航形式。其特点是随着页面向下滚动，内容会不断加载，直至穷尽。适合展示以图片或视频为主的信息，如图所示为使用瀑布式导航的微博APP。根据APP的版式需求，内容视图中的模块也可用双排平齐或错位排列，如图所示为双排平齐的优美图APP页面。瀑布式导航的缺点是不适合层级架构复杂的产品，容易发生空间位置迷失；容易产生疲劳感。使用该类导航的APP还有花瓣和腾讯视频等。微博优美图4.2.2常见导航形式6.宫格式导航此处的导航区别于前面所说的导航栏，它是对页面中各元素的整合设计。优秀的导航设计能更好地引导和帮助用户使用APP的各项功能。将功能入口等距分布在页面中，便于用户查找所需功能。一般横向不超过5个图标，超过时可将设置为左右滑动形式。缺点在于：一旦进入某个页面后，需要返回主页才可进入其他功能入口，形成较长的路径链，不适合多任务操作。因此，常用作次级导航。使用该类导航的APP有优酷、支付宝主页和微信中的“钱包”页等。腾讯视频国家政务UI设计UIdesign4.3APP基本页面简介学习目的一个完整的APP通常包括启动页、引导页、首页、详情页和个人中心页等多个页面。4.3APP基本页面简介启动页是APP情感化设计的重要组成部分，它是渲染品牌氛围和彰显个性的重要手段之一。也是APP启动过程中减缓用户等待的焦虑情绪的重要环节。一、启动页①使用企业Logo和标语（Slogan）作为主元素，传递品牌信息，如图所示；4.3APP基本页面简介启动页是APP情感化设计的重要组成部分，它是渲染品牌氛围和彰显个性的重要手段之一。也是APP启动过程中减缓用户等待的焦虑情绪的重要环节。一、启动页②使用符合当下热点或意境化的图像搭配企业Logo和标语，引起用户情感共鸣，如图所示；4.3APP基本页面简介一、启动页③插入广告信息，增强宣传力度。④使用时长在3～5秒的宣传动画，比静态的广告图像更具表现力。4.3APP基本页面简介二、引导页引导页一般用于表现产品概念或帮助用户了解APP功能。通常引导页仅在用户第一次启动APP或者版本更新后出现。引导页一般有3～5个页面，设计时各页的风格和结构应保持统一，且内容彼此关联，如图所示为随手记APP的引导页。4.3APP基本页面简介三、首页首页是APP的关键页面之一，是APP内容的汇总，用户可通过点击页面中的链接进入对应栏目或页面。首页的页面布局比较灵活，以购物类APP为例，页面中由上至下一般为状态栏、导航栏（含搜索）、分类图标、Banner、内容版块和标签栏，根据版式需要也可适当调整，如图所示为手机天猫APP首页。4.3APP基本页面简介四、详情页详情页常用于购物类APP中展示商品的详细信息，一般包括商品图片、名称、价格、商品介绍和详情图等内容，以列表或卡片形式布局。该页内容较多，通常一屏内无法完全显示，用户可通过向下滑动获取更多信息，如京东APP的详情页。4.3APP基本页面简介五、个人中心页个人中心页是供用户查看和设置个人信息的页面。该页常见布局有两种：①页面功能较多时，通常将各功能分类展示，让用户能通过分类标题快速找到所需功能，例如苏宁易购、手机淘宝和知乎等。4.3APP基本页面简介五、个人中心页个人中心页是供用户查看和设置个人信息的页面。该页常见布局有两种：②页面功能较少时，通常采用列表形式进行布局，这样会让页面效果更加清爽，功能分布更具条理，例如咸鱼、微信和支付宝等。APP首面设计要点浏览环境清晰在进行App首页界面设计时，应减少无关的设计元素，给用户提供简约、清晰的浏览环境。重点突出每个App首页界面都应有明确的重点，以便用户能快速锁定主要信息。目标明确首页应该有清晰的点击交互效果，保证用户的使用体验。导航明确导航清晰，要确保用户在界面中浏览跳转时“不迷路”，让用户清楚地知道在哪里，可以去哪里。UI设计UIdesign4.4.1美食在线首页制作UI设计UIdesign4.4.4美食在线-今日最新UI设计UIdesign4.5.1潍坊文旅APP项目调研学习目的1.了解潍坊文旅项目调研的流程和方法2.确定APP项目的框架4.5.1潍坊文旅APP项目调研

2017年1月国务院发布了《关于实施中华优秀传统文化传承发展工程的意见》。在新的历史条件下，传承、弘扬中华优秀传统文化，是建设中国特色社会主义文化的重要内容。要让中华优秀传统文化焕发蓬勃生机、展现独特魅力、实现创新发展，一个重要环节就是要让优秀传统文化走进生活。一、项目背景4.5.1潍坊文旅APP项目调研潍坊有着丰富的传统文化资源，有越来越多的人想要了解潍坊。人们需要一款APP，可以全面了解潍坊文化旅游资源。一、项目背景4.5.1潍坊文旅APP项目调研趣潍旅是一款潍坊民俗文化旅游的APP，将分享民俗文化、旅游、美食、社交、购物等功能于一体的综合类APP，可以让人们更好的了解潍坊，使旅游目标更明确。二、产品定位文化旅游4.5.1潍坊文旅APP项目调研三、目标人群调研18-45岁年轻人我们通过走访和问卷调研，发现18-45岁左右的年轻爱好者，习惯网络社交，网上购物，对新的事物有着好奇心，喜欢旅游，热爱生活。4.5.1潍坊文旅APP项目调研四、用户画像除了上学期间学习外暑假之余，我最喜欢旅游，我希望用自己存下来的钱利用假期时间多出去走走，看看外面的世界，希便更舒适的服务。并且希望APP能够分享旅游的快乐。我是一名旅游爱好者，跟着团队总是玩的不尽兴，我希望有一款专门引导旅游的APP，这样旅游中的各种烦恼都会得到解决。我是也是一名旅游爱好者，我喜欢各地的非遗文化，喜欢收集各地非遗文化的文创，领略非遗文化的古老技艺，希望旅游APP给我推荐更多非遗的文化与传承。在校学生女16岁学生旅游爱好者男25岁职场员工业余爱好者女35岁非遗传承人4.5.1潍坊文旅APP项目调研五、潍坊的文化旅游资源潍坊文物古迹、人文景观众多，后李文化、大汶口文化、龙山文化遗存遍布全市，十笏园、齐长城、云门山、范公亭、山旺化石、恐龙化石、沂山国家森林公园等中外驰名。拥有青州、高密、临朐3个“中国民间文化艺术之乡”和14个“山东省民间文化艺术之乡”。4.5.1潍坊文旅APP项目调研六、潍坊的特色美食潍坊不仅有着悠久的历史文化，还有许多好吃的美食。NO.1：肉火烧潍坊传统小吃，皮酥肉嫩、香而不腻。NO.2：朝天锅深受当地人喜爱。NO.3：高密炉包潍坊传统美食，面皮暄软、内馅饱满。NO.4：辣丝子清淡爽口、非常开胃。NO.5：鸡鸭和乐潍坊特色美食，鲜香可口，非常好吃。还有小炒肉、扒菇、芥末鸡等等4.5.1潍坊文旅APP项目调研七、潍坊的非遗文化资源1.杨家埠木版年画杨家埠木版年画，是中国民间艺术宝库中的瑰宝，以浓郁的乡土气息和淳朴鲜明的艺术风格而驰名中外潍县杨家埠木版年画是流传于山东省潍坊市杨家埠的一种民间版画，是我国民间艺术宝库中的一朵奇葩，以浓郁的乡土气息和淳朴鲜明的艺术风格而驰名中外。