《UI界面设计》课件 项目三　移动应用 UI 界面设计-“时代楷模”App UI 界面设计

项目三移动应用UI界面设计——“时代楷模”AppUI界面设计214215任务1需求分析与设计任务2线框图设计任务3视觉设计任务4交互设计任务5测试与交付需求分析与设计任务12161.了解移动应用UI界面设计的概念。2.了解移动设备常见的操作系统。3.了解移动应用UI界面的核心元素和界面类型。4.熟悉移动应用UI界面设计的流程。5.能进行移动应用UI界面设计的需求分析和设计，并制作App信息架构图。217UI设计师小李接到了设计“时代楷模”AppUI界面的任务。按照移动应用UI界面设计流程，应先对项目和用户需求进行分析，了解该App界面需实现的功能和特性，以及目标用户的特征、需求和期望，从而梳理出该App界面包含的功能模块，建立用户画像，并使用思维导图软件设计与制作该App界面的信息架构图。218“时代楷模”App界面的信息架构图如图所示。219“时代楷模”AppUI界面的信息架构图一、移动应用UI界面设计的概念移动应用UI界面设计是指针对智能手机、平板计算机等移动终端，通过视觉元素如布局、色彩、图标、文字和交互逻辑的规划，构建用户与应用程序交互媒介的系统化过程。其核心目标是实现信息的高效传递与操作的无障碍执行。220221移动应用界面通过深度适配用户场景，显著提升服务便捷性与体验友好度。在用户体验层面，其自然流畅的交互模式降低了用户认知负荷；在技术层面，则实现更优加载性能与响应效率；在商业价值方面，增强的交互功能与稳定的服务质量直接推动应用流量增长与用户黏性提升。右图所示为设计精美的移动UI界面示例。京东App首页界面二、移动设备常见的操作系统1.HarmonyOS鸿蒙（HarmonyOS）是华为公司开发的面向全场景的分布式操作系统，于2019年8月9日正式发布。其设计初衷是实现不同设备之间的互联互通，打破设备界限，为用户提供统一、流畅的跨设备交互体验。2222232.AndroidAndroid是一种以Linux为基础的开放源码操作系统，2008年9月23日首个正式版本被发布，其主要应用于手持设备。2010年年末的数据显示，仅正式推出两年的Android操作系统已经超越了塞班系统，一跃成为全球最受欢迎的智能手机操作系统。3.iOSiOS是由苹果公司开发的一款操作系统，目前主要应用在iPhone、iPodtouch和iPad等设备上。它以Darwin为基础，最初被命名为iPhoneOS，在2010年6月7日召开的WWDC大会上被改名为iOS。三、移动应用UI界面的核心元素1. 状态栏（status bar）状态栏位于界面最顶端，用于显示系统级状态信息，包含设备信号强度、Wi-Fi连接状态、电池电量、时间等基础信息，部分场景下还会显示通知图标、定位标志等，如图所示。224状态栏2. 导航栏（navigation bar）导航栏一般处于界面顶部，承担应用内页面跳转与层级导航功能。常见形式包括标题栏、返回按钮、搜索框及其他功能按钮，设计时需保证导航逻辑清晰，通过图标、文字或两者结合的方式引导用户操作，如图所示。225导航栏3. 标签栏（tab bar）标签栏多以图标结合文字标签形式呈现，常位于界面底部，用于快速切换应用核心功能模块，如图所示。226标签栏4. 侧边栏（sidebar/drawer）侧边栏通常以“汉堡包”图标为触发入口，从屏幕侧边滑出，收纳低频操作或次要功能选项，如图所示。227侧边栏5. 内容区域（content area）内容区域占据界面主体空间，是展示应用核心信息与用户操作对象的区域。其布局依据具体功能需求灵活设计，可能包含图文列表、视频播放器、表单输入框等多种组件。例如，在新闻类应用中，内容区域用于展示新闻标题、摘要及配图；在地图导航应用中，则用于显示地图、路线规划等内容，如图所示。228内容区域6. 工具栏（toolbar）工具栏位于内容区域上方或下方，用于放置与当前页面操作紧密相关的功能按钮，如文档编辑应用中的“保存”“撤销”和“重做”按钮，图像编辑应用中的“裁剪”“滤镜”和“调整”按钮等。工具栏按钮设计需简洁直观，确保用户能快速识别并进行对应操作，如图所示。229工具栏7. 模态框（modal）模态框是临时覆盖在主界面之上的半透明容器，用于中断用户当前操作，强制用户对特定信息或选项进行处理。常见于提示确认、警告、登录注册等场景，如删除重要数据时弹出的确认删除模态框，需用户单击“确认”按钮或“取消”按钮后才允许返回原界面操作，如图所示。230模态框8. 弹窗（pop-up）弹窗是以浮动形式短暂显示在界面特定位置的提示框，用于展示简短信息或提供快捷操作选项，不强制用户交互，如新消息提醒弹窗、操作成功提示弹窗等，一段时间后会自动消失，或用户可通过单击空白区域关闭弹窗，如图所示。231弹窗9. 标签页（tabs）标签页是在内容区域内水平排列的选项卡，用户通过单击切换不同的标签页的内容，实现同一页面内多组信息的分类展示，如图所示。232标签页10. 浮层按钮（floating action button）浮层按钮是悬浮于内容区域之上的圆形或方形按钮，通常用于进行页面核心操作，如社交应用中的“发布动态”按钮以及邮件应用中的“撰写新邮件”按钮，其颜色、大小及动效设计突出，以吸引用户注意力，如图所示。233浮层按钮四、移动应用UI界面类型一个App的UI界面通常包括多个页面的设计，这些页面共同构成了用户与App进行交互的完整体验。根据App的具体功能和需求，移动AppUI界面类型包括引导页、闪屏页、登录/注册页、首页、列表页、详情页、个人中心页等。2341. 引导页用户在首次打开新的应用时，通常会看到2～3个系列引导页，上面有简短的文案解释产品功能，方便用户使用；同时也会引导用户进行创建账号、设置偏好、添加兴趣等操作，从零开始带领用户了解产品，如图所示。235引导页2. 闪屏页闪屏页也叫启动页，当大多数应用程序被用户启动时，进入首页之前会出现一张图片或者一段动画、视频，显示数秒后会自然过渡到首页，这段时间的页面称为闪屏页，如图所示。236闪屏页3. 登录页和注册页登录页允许用户输入用户名和密码来验证身份，注册页允许用户输入个人信息完成注册，如图所示。一个好的登录/注册页往往会给用户留下深刻印象，因此，在设计过程中要充分考虑界面视觉表现和流程交互体验。237登录页和注册页a）登录页b）注册页4. 首页首页是App的核心页面，用户可在此进行大部分操作，如查看信息、搜索内容、选择功能等，如图所示。首页区域从上到下分别是状态栏、导航栏、轮播图（banner）、金刚区、瓷片区、列表区、标签栏等。UI设计师需要考虑主页页面的布局、色彩、图标、文字等元素，让用户能轻松找到所需信息，提升使用体验。238首页5. 列表页列表页通常用于展示大量数据，如新闻、商品、联系人等，如图所示。UI设计师需要根据数据的种类和特点量身定制展示方式，如是否需要分类、排序、搜索等功能，以及如何合理呈现数据，如图表、列表、卡片等形式。239列表页6. 详情页详情页通常是用户点击列表中某个数据后进入的页面，以展示该数据的详细信息，如图所示。UI设计师需要考虑详情页页面的布局、字体大小、颜色、图片等元素，让用户能清晰了解信息，并可根据需要进行操作。240详情页7. 个人中心页个人中心页通常是用户修改App设置、个人信息等的页面，如图所示。UI设计师需要考虑个人中心页面的布局、颜色、图标、字体等元素，让用户能轻松操作，同时需注意页面简洁明了，避免过于复杂混乱，导致用户操作失误。241个人中心页五、移动应用UI界面的设计流程移动应用UI界面设计是一个系统且细致的过程，其目的在于确保最终呈现的移动应用界面兼具美观性与实用性。通常而言，移动应用UI界面的设计流程和网页UI界面的设计流程一致，一般遵循以下步骤：需求分析→设计规划→线框图设计→视觉设计→交互设计→测试优化→交付验收。242线框图设计任务22431.了解移动应用界面线框图的概念和设计原则。2.了解App界面常见的布局方式。3.能绘制App引导页和闪屏页线框图。4.能绘制App注册页和登录页线框图。5.能绘制App首页线框图。244UI设计师小李已完成需求分析，梳理出“时代楷模”App界面的信息结构，并确定了该App界面的信息框架。按照移动应用UI界面设计流程，小李现需依据确定好的信息框架，使用AdobeXD软件绘制该App引导页和闪屏页、注册页和登录页及首页的线框图。绘制的线框图最终效果如图所示。245246“时代楷模”AppUI界面的线框图247“时代楷模”AppUI界面的线框图248“时代楷模”AppUI界面的线框图249一、移动应用界面线框图的概念和设计原则1. 移动应用界面线框图的概念移动应用界面线框图（wireframe）是界面设计的结构化蓝图，专注于功能布局与用户流程，剥离视觉细节，用抽象元素呈现页面框架，如图所示。250某App部分界面的线框图案例2. 移动应用界面线框图的设计原则（1）符合人体工程学。基于移动设备单手操作特性，将核心交互按钮置于屏幕底部“拇指热区”，确保用户在握持设备时可轻松触达。（2）降低认知负荷。遵循格式塔心理学原理，通过分组、对齐、留白等设计手法简化界面信息层级。（3）提升操作效率。设计简洁直观的交互流程，减少不必要的操作步骤。251二、App界面常见的布局方式1. 列表式布局列表式布局是移动界面设计中最常见的一种布局方式，内容从上向下排列，导航跳转时通常需返回初始界面。这种布局层次展示清晰明了，视线流从上到下，浏览体验快捷，特别适合展示内容较长的菜单或拥有次级文字内容的标题。如图所示为列表式布局界面。252列表式布局界面2. 九宫格布局九宫格布局非常直观，所有功能一目了然。这种布局方式可以根据需要灵活调整格子数量。如图所示为九宫格布局界面。253九宫格布局界面3. 抽屉式布局抽屉式布局是指将导航隐藏在左侧或右侧，用户通过滑动的方式，像打开抽屉一样将导航部分拖出。这种布局方式适合主要内容较多，不希望菜单栏占据固定位置而消耗空间的应用程序。如图所示为抽屉式布局界面。254抽屉式布局界面4. 顶部导航布局整个应用的导航位于顶部，用户可以通过左右滑动来切换不同的导航选项卡。当用户点击导航条目或左右滑动手指时，主内容区域的动态面板状态会随之切换。如图所示为顶部导航布局界面。255顶部导航布局界面5. 卡片式布局卡片式布局方式能根据页面内容的变化及时更新，适合以图片为主的内容，如美食、旅行、新闻类App，通常作为二级导航。如图所示为卡片式布局界面。256卡片式布局界面6. 底部导航布局底部导航布局是最常见的App界面布局之一，这种经典设计符合用户习惯，能够帮助用户一目了然地找到所需内容。如图所示为底部导航布局界面。257底部导航布局界面视觉设计任务32581.了解移动应用UI界面视觉设计的概念和设计原则。2.熟悉移动应用UI界面设计规范。3.熟悉图标在移动应用UI界面设计中的使用规范。4.能使用AdobeXD软件制定AppUI界面的视觉设计规范，并完成AppUI界面的视觉设计。259UI设计师小李已经完成“时代楷模”App界面线框图的绘制，App的大体框架和布局已得到客户认可。按照移动应用UI界面设计流程，小李现需制定该AppUI界面的视觉设计规范，并使用AdobeXD设计与制作该App的视觉界面。260在视觉设计规范制定过程中，UI设计师需确定App的色彩搭配、字体样式、图标风格及界面控件元素样式等内容。在视觉界面设计与制作的过程中，UI设计师需从界面尺寸、字体样式、颜色搭配、元素间距等方面遵循统一设计规范，确保App界面美观。“时代楷模”App的视觉界面效果如图所示。261262“时代楷模”AppUI界面的视觉设计263“时代楷模”AppUI界面的视觉设计264“时代楷模”AppUI界面的视觉设计265一、移动应用UI界面视觉设计的概念和原则移动应用UI界面视觉设计，是基于人机交互理论、视觉传达原理及移动设备特性，对应用界面进行色彩、图形、文字、动效等视觉元素的系统性设计，旨在构建符合用户认知习惯、提升操作体验且强化品牌识别的可视化界面。国际标准化组织（ISO）在人机交互设计标准（ISO9241）中明确，视觉设计需在保证功能性的基础上，通过美学表达优化用户与界面的交互过程。移动应用UI界面视觉设计原则通常包括一致性、准确性和布局合理性等方面。1. 一致性原则一致性原则是指坚持以用户体验为中心的设计导向，体现为界面直观简洁、操作便捷高效，设计风格与设计规范统一，用户接触软件时能对界面功能一目了然，无须过多培训即可直接使用应用系统等方面。2. 准确性原则准确性原则是指使用一致的标记、标准缩写和颜色，确保显示信息的含义清晰明确，用户无须参考其他信息源。同时需显示有意义的错误提示信息，而非单纯的程序错误代码。2663. 布局合理性原则布局合理性原则是指进行UI设计时需充分考虑布局的美观性与合理性，遵循用户“从上到下、自左向右”的浏览与操作习惯；避免常用业务功能按键排列过于分散，造成用户手指滑动鼠标距离过长的弊端；多做“减法”，将不常用的功能区块隐藏，以保持界面简洁，使用户专注于主要业务操作流程，进而提升软件的可用性与易用性。267二、移动应用UI界面设计规范1. iOS系统设计规范iOS是运行于iPhone、iPodTouch和iPad等设备上的较为常用的移动操作系统之一。互联网应用的开发者、产品经理、体验设计师均应理解并熟悉iOS平台的设计规范，这有助于提高工作效率，并保障用户体验。268（1）iPhone的设备型号、设计尺寸及倍率等可参考下表。269iPhone屏幕尺寸（2）iPhone的启动图标、AppStore图标、Spotlight图标和设置图标可参考下表。270iPhone常用系统图标尺寸（3）iPhone的导航栏、工具栏图标及标签栏内的图标和其他图标的常用尺寸可参考下表。271iPhone常用自定义图标尺寸（4）字体规范见下表。272字体规范2. Android系统设计规范（1）AndroidSDK模拟机屏幕尺寸见下表。273AndroidSDK模拟机屏幕尺寸（2）Android图标尺寸见下表。274Android图标尺寸（3）Android系统字体规范见下表。275Android系统字体规范（4）Android系统中dp与px的换算关系见下表。276Android系统中dp与px的换算关系三、移动应用UI界面设计中图标的使用图标是UI中重要的交互视觉符号之一，用于引导用户进行操作。图标具有简洁性、象征性、记忆性的特点，能够有效提高用户的操作效率，简化产品的交互步骤，提升用户的使用体验。2771. 注册与登录访问阿里巴巴矢量图标库官网（https：//），如图所示。278阿里巴巴矢量图标库官网2. 搜索与选择图标 登录成功进入官网首页后，在页面顶部显眼位置找到搜索栏。在此处输入与所需图标相关的关键词，精准定位目标图标。点击搜索按钮后，页面将展示大量搜索结果。可通过浏览缩略图，筛选出符合设计风格与功能需求的图标。阿里巴巴矢量图标库支持多种筛选方式，如按照图标风格（扁平风、写实风、线性风等）、颜色、热度等进行筛选，以提高查找效率。找到心仪图标后，点击图标下方的“添加到购物车”按钮，将其暂存至购物车中，便于后续统一操作，如图所示。279280“购物车”图标的搜索和加入购物车3. 下载图标资源 完成所需图标的挑选后，点击页面右上角的购物车图标，进入购物车页面，如图所示。在此页面可看到已添加的所有图标；若需管理购物车中的图标，如删除不再需要的图标，点击图标右上角的删除按钮即可。281“购物车”图标的预览与管理在“下载”面板中确定图标的填充颜色、大小和类型后，即可批量下载所选图标，如图所示。282图标的批量下载4. 使用图标资源打开AdobeXD，把下载好的图标资源导入画板中，调整图标的大小和位置，如图所示。283图标的使用交互设计任务42841.了解移动应用UI界面交互设计的基本流程。2.了解移动应用UI界面交互动画的类型。3.了解移动应用UI界面交互设计的原则。4.能使用AdobeXD进行移动应用UI界面常见交互的设计和制作。285UI设计师小李已经完成“时代楷模”AppUI界面的设计，按照移动应用UI界面设计流程，现需完成该AppUI界面的交互设计，以提高App的可用性和易用性，使用户能够快速找到所需信息并完成所需操作，提升用户体验。286在进行AppUI界面交互设计的过程中，设计师需在视觉美感的基础上，以用户为中心，充分考虑用户的行为习惯，注重用户与App之间的互动和体验，设计易用的交互方式，提供清晰的导航和反馈，以此创建引人入胜的AppUI界面。“时代楷模”App部分UI界面交互设计最终效果如图所示。287288“时代楷模”App部分UI界面的交互设计289一、移动应用UI界面交互设计的基本流程1. 提出交互设计的想法（1）结合产品定位设计。进行动效设计前，需围绕产品核心目标展开思考，确保设计思路符合提升用户体验的需求，经过严谨论证再落地。（2）了解动效基本常识。进行动效设计前，需先掌握核心常识，包括运动规律、开发逻辑、操作方法及实现成本预估。只有扎实掌握这些内容，才能保障动效设计顺利推进。（3）从生活中汲取灵感。用户对“美”的认知多源于生活体验，例如自然事物的运动状态（温柔、激烈、震撼等）。若已明确动效的风格定位，可从生活中的同类场景提炼灵感，优化设计表达。（4）多看多思，借鉴优秀案例。除观察生活外，还需广泛研读优质动效作品，思考设计逻辑（为何这样设计）、实现技巧（采用的方法策略）及节奏把控等核心问题，积累设计经验。290（5）拆解复杂动效，总结规律。多数复杂动效由基础属性变化组合而成。需通过观察与拆解优秀作品，总结设计逻辑，再通过合理编排，打造专属动效。（6）紧跟行业设计潮流。需持续关注动效设计领域的新趋势、新方法与新表现形式，既不落后于行业发展，也不盲目跟风，形成自身独特的设计风格。2912. 实现交互设计的想法（1）动手实践，熟能生巧。掌握理论知识后，必须通过实际操作验证设计思路。只有持续尝试，才能提升技术水平，确保设计方案的可行性。（2）注重细节，精益求精。细节直接影响交互设计的最终效果。与单界面视觉设计一样，交互设计需精准把控每一个细节，保障用户体验的连贯性与完整性。292二、移动应用UI界面交互动画的类型1. 欢迎动画欢迎动画通常以闪屏页形式呈现，多使用企业宣传动画或动态标志动画，核心目的是强化品牌辨识度、传递品牌情感。流畅合理的动画不仅能树立良好的品牌形象，还能为用户带来轻松愉悦的初始体验。需注意，欢迎动画时长不宜过长，避免引发用户等待焦虑，降低使用兴趣。如图所示为“12306”App闪屏页，通过欢迎动画展示核心元素。293294“12306”App启动页2. 跳转动画 跳转动画应用于页面转换场景，可填补页面切换的空白，避免过渡生硬，帮助用户清晰地感知页面层级关系，使操作体验感更自然流畅。如图所示为“美团”App的店铺列表页和店铺详情页，可通过跳转动画实现界面的顺滑切换。295“美团”App的店铺列表页和店铺详情页3. 加载动画 当网络卡顿等导致页面无法及时加载时，加载动画可有效缓解用户的等待焦虑。早期加载动画多为形式单一的沙漏效果，随着技术发展和用户审美需求的提升，加载动画的表现形式越发丰富多样，如图所示。296常见的加载动画三、移动应用UI界面交互设计的原则1. 动画风格统一移动设备界面显示区域有限，要在有限空间内清晰地呈现内容，需对App界面进行整体规划；而动画作为界面的重要组成部分，应力求简单、清晰且风格统一。设计时可从企业标志、标准色等方面延伸创意，在构成元素风格上严格把控，同时协调动画的表现形式。需特别注意：同一App中切忌出现风格迥异的构成元素动画，避免破坏用户对产品的统一认知。2972. 谨慎增加动画动画效果设计需结合App整体风格，以用户体验为中心。使用过多动画易导致界面杂乱，分散用户注意力，降低使用体验，还可能拖慢界面加载速度。因此，界面设计中应注重“动静结合”，仅在需聚焦用户注意力的关键场景添加动画，避免无意义的视觉干扰。2983. 简化界面信息部分App为吸引用户会使用绚丽的视觉动画，同时包含大量复杂视觉元素。若要理顺各视觉元素的逻辑关系，高效传递信息，需通过动画设计优化：借助动画简化界面信息层级与交互流程，降低软件操作门槛、优化操作逻辑，最终提升用户体验。2994. 把握动画节奏单调无趣的动画已无法满足用户需求，动画需具备一定表现力。App动画设计需以用户为中心，符合用户视觉认知习惯，以运动规律为指导；设计时常以自然界物象运动为参照，结合物理学原理，对动作进行适度夸张，打造视觉流畅的动画效果。300测试与交付任务53011.理解移动应用UI界面设计中倍图的定义和规范。2.掌握优化移动应用UI界面的方法。3.能编写移动应用UI界面设计测试用例。4.能编写移动应用UI界面设计测试报告。5.能使用AdobeXD软件导出移动应用UI界面设计资源和视觉界面。6.能使用标注软件对移动应用UI视觉界面进行标注。7.能合理对项目文件进行整理归档。302UI设计师小李已经完成“时代楷模”AppUI界面的视觉设计和交互设计，按照移动应用UI界面设计流程，小李下一步需要对视觉设计和交互设计进行测试，检查作品是否符合用户需求；随后将设计资源和视觉界面导出，导出后使用标注软件对视觉界面进行标注；最后将设计过程中的相关资料整理打包，交付给开发人员或客户。303在作品测试过程中，UI设计师需根据需求分析结果，对照信息架构图，检验移动应用UI界面的内容是否完整且合理，同时检验UI界面的交互是否正确且流畅。在导出设计资源时，需根据实际需求选择合适的导出文件格式。在对视觉设计效果图进行标注时，需针对重要元素或关键信息进行标注，确保设计稿在开发阶段能高效、准确地转化为实际产品。304305“时代楷模”AppUI界面设计的最终交付文件夹“时代楷模”AppUI界面交付的文件资料如图所示。306一、移动应用UI界面设计中倍图的定义倍图是指在移动应用UI界面设计中，为适配不同屏幕分辨率和像素密度设备而制作的多套不同比例的图像资源。其本质是基于1x基准的设计稿，通过倍数关系生成对应物理像素尺寸的图像文件，常见倍数包括1倍图（1x）、2倍图（2x）、3倍图（3x）等。二、主流平台倍图规范1. iOS系统倍图规范iOS系统倍图规范见下表。307iOS系统倍图规