第5章 生活服务APP界面设计了解常见APP 类型了解APP 的开发流程了解APP 基本页面掌握购物类APP 的设计技巧及页面的一般制作方
法学 习 目 的目录 / CONTENTS基础知识案例实战5.1 APP 设计基础知识 APP 是Applicatio
n 的缩写，也称APP 软件、APP 应用或APP 客户端等，是运行在手机系统上的应用程序，它为用户提供了诸多便捷，让用户随时随地
实现购物、浏览网页、社交、学习和游戏等操作。5.1.1 常见APP类型5.1 APP 设计基础知识5.1.1 常见APP类型
影音娱乐类APP 的内容主要以视频和音频为主。这类APP 的界面多采用图文结合的形式整齐排列各个版块，以精美的大尺寸图片作
为页面主要信息，目的是突出热门信息，吸引用户视线。常见的影音娱乐类APP 有爱奇艺、哔哩哔哩、酷狗音乐和喜马拉雅FM 等。5.1
APP 设计基础知识5.1.1 常见APP类型5.1 APP 设计基础知识5.1.1 常见APP类型5.1 APP 设计基础知识5
.1.1 常见APP类型5.1 APP 设计基础知识5.1.2 APP开发流程 一款APP 的开发需要经过多个环节，每
个环节人员的工作内容不同但彼此联系。为了更好地开展设计工作，我们需要简单了解该流程的各个环节，如下图所示。产品规划：5.1 APP
设计基础知识PM收集需求确定整体规划和功能模块绘制产品结构图制作低保真原型形成详细开发需求文档 程序员根据设计团队提
供的高保真原型、页面切图和标注搭建页面，根据产品经理提供的开发需求文档开发功能，最终完成APP 的开发。5.1 APP 设计基础知
识开发：设计：交互设计师（UX）会将低保真原型进一步优化，并更多考虑用户操作流程、信息架构、交互细节和页面效果，最终完成高保真原型
。视觉设计师（UI）需要在充分了解整个页面逻辑的前提下，根据高保真原型完成设计稿，该环节最终产物是页面切图和标注。用户体验设计（U
E）的原则是以用户为核心，保证产品的功能与审美平衡。5.1 APP 设计基础知识测试： APP 开发完成后，测试人员需
要对APP 的功能、兼容性、容错性、性能效率、易用性、压力和信息安全等问题进行测试，并将发现的问题及时反馈给开发人员或设计人员进行
修改。之后，测试人员做上线前的最终测试。注意：测试过程中视觉设计师需要与测试人员相互协作，找出开发后的页面与原型之间的差别，从而使
APP 与原型的规格一致。上线： 通过测试后，运营人员负责将产品发布到苹果商店和各大安卓市场，并通过各种手段（微博宣传
、投放广告或线下活动等）提升APP 人气，然后将运营过程中发现的问题反馈给产品团队，由产品经理发起APP 的版本迭代。5.1 AP
P 设计基础知识5.1.3 APP基本页面简介 启动页是APP 情感化设计的重要组成部分，它是渲染品牌氛围和彰显个性的
重要手段之一。也是APP 启动过程中减缓用户等待的焦虑情绪的重要环节。① 使用企业Logo 和标语（Slogan）作为主元素，传递
品牌信息，如图所示；② 使用符合当下热点或意境化的图像搭配企业Logo 和标语，引起用户情感共鸣，如图所示；5.1 APP 设计基
础知识5.1.3 APP基本页面简介③ 插入广告信息，增强宣传力度，如图所示；④ 使用时长在3 ～ 5 秒的宣传动画，比静态的广告
图像更具表现力，如图所示。5.1 APP 设计基础知识5.1.3 APP基本页面简介 引导页一般用于表现产品概念或帮助
用户了解APP 功能。通常引导页仅在用户第一次启动APP 或者版本更新后出现。引导页一般有3 ～ 5 个页面，设计时各页的风格和结
构应保持统一，且内容彼此关联，如图所示为随手记APP 的引导页。5.1 APP 设计基础知识5.1.3 APP基本页面简介
首页是APP 的关键页面之一，是APP 内容的汇总，用户可通过点击页面中的链接进入对应栏目或页面。首页的页面布局比较灵活，以
购物类APP 为例，页面中由上至下一般为状态栏、导航栏（含搜索）、分类图标、Banner、内容版块和标签栏，根据版式需要也可适当调
整，如图所示为手机天猫APP 首页。5.1 APP 设计基础知识5.1.3 APP基本页面简介 详情页常用于购物类A
PP 中展示商品的详细信息，一般包括商品图片、名称、价格、商品介绍和详情图等内容，以列表或卡片形式布局。该页内容较多，通常一屏内无
法完全显示，用户可通过向下滑动获取更多信息，如图 所示为京东APP 的详情页。5.1 APP 设计基础知识5.1.3 APP基本页
面简介 个人中心页是供用户查看和设置个人信息的页面。该页常见布局有两种：② 页面功能较少时，通常采用列表形式进行布局，
这样会让页面效果更加清爽，功能分布更具条理，例如咸鱼、微信和支付宝等。① 页面功能较多时，通常将各功能分类展示，让用户能通过分类标
题快速找到所需功能，例如苏宁易购、手机淘宝和知乎等。购物类APP 界面设计5.2 案例实战——购物类APP界面设计 下
图显示了小红衫APP 的部分页面。本案例通过分析整个APP 的设计思路，并制作其中的首页、购物车和个人中心页面，学习购物类APP
的一般制作流程。作品展示5.2 案例实战——购物类APP界面设计（1）分析基本结构图 下图所示为本案例要制作的小红衫A
PP 的基本结构图。观察此图，确定需要制作的页面和页面之间的逻辑关系。设计思路5.2 案例实战——购物类APP界面设计（2）确定主
色 小红衫APP 是推荐和销售包包、鞋类、饰品和服装的电商平台，目标用户以青年消费者为主，因此界面采用红色作为主色，
既与“小红衫”的名字相呼应，又能突出青年的活力和自信。设计思路（3）规划页面布局 根据基本结构图，在设计首页时，将包包
、鞋类、饰品和服装作为主要分类，热门活动、时尚达人等版块依次向下排列，并加入扩展内容，以方便用户浏览。在设计购物车和我的页面时，优
先考虑用户的使用习惯，可参考市场上同类APP的页面布局，在符合整体风格的前提下，让用户更容易上手。5.2 案例实战——购物类APP
界面设计案例步骤1）制作导航栏和Banner2）制作分类图标版块3）制作热门活动、时尚达人和品质潮男版块1）制作导航栏和商品列表2）制作猜你喜欢和结算版块1）制作个人信息和我的订单版块2）制作Banner 版块和我的服务版块首页设计：购物车页面设计：个人中心页面设计： |
|
