UI设计项目式教程 课件 第5章 餐饮 APP 项目的界面设计

UI设计项目式教程课程介绍案例分析设计流程实战练习

本章节聚焦餐饮APP项目的界面设计核心内容，市场研究：明确产品市场定位，进行市场分析。用户调研：通过用户分析、竞品分析和用户画像，定义产品风格。交互原型：总结需求、搭建功能框架，输出交互原型，再次定义产品风格。视觉规范：制定文字、图标、颜色等规范，明确产品风格。执行方案：完成低保真、高保真方案及设计评审，最终完成界面设计。UI设计项目式教程课程介绍案例分析设计流程实战练习

绘制产品架构的方法有很多种，AdobePhotoshop、AdobeIllustrator、Xmind产品架构图是一种将产品的各个组成部分及其相互关系以可视化方式呈现的图形。在作用方面，它有助于团队成员（包括产品经理、开发人员、设计师等）清晰地理解产品的整体结构。

在产品架构的设计中，以用户为中心是至关重要的理念。这意味着要深入了解用户的需求、偏好和行为模式，将其作为设计的出发点。通过用户研究、用户测试和反馈收集等方法，获取真实的用户数据，以此来指导功能的规划和布局。设计流程UI设计项目式教程课程介绍低保真原型图设计流程实战练习

绘制原型图的软件有很多，如AxureRP、墨刀、AdobeXD等，AxureRP是经典的原型工具

低保真原型通常使用很少的颜色来突出基本功能，大部分则采用灰色调，且低保真原型能够清晰地展示产品的基本架构和功能布局，为后续的设计迭代提供坚实的基础UI设计项目式教程课程介绍低保真原型图设计流程实战练习

原型根据页面的保真程度可以划分为草图、低保真和高保真。低保真原型首要的也是最重要的作用是检查和测试产品功能，而不是产品的视觉外观，UI设计项目式教程课程介绍高保真原型图设计流程实战练习

高保真原型图是在低保真原型图的基础上进一步深化，对比图如图所示，更接近实际产品页面的效果，高保真原型是一种精确呈现产品界面和交互的原型设计图形，它结合了视觉设计、交互设计，可以更准确地模拟最终产品的外观和功能。制作高保真原型，首先要了解不同类型产品的设计规范，如要设计iOS、Android等移动终端产品，就先要了解它们的页面尺寸、设计结构和方法、字体、字号等规范，将设计元素进行合理的摆放与搭配。在做高保真原型时，要有足够的细心和耐心。UI设计项目式教程课程介绍案例分析设计流程实战练习

旅游APP为设计主线，结合出行、居住等的功能，凸显项目智慧出行的核心使命。为突出项目特色，需从视觉设计、低保真原型图、高保真原型图等方面入手

视觉设计以绿色为主色，搭配黄色辅助色，整体风格现代简约与场景化体验融合。

使用原型设计工具进行页面布局设计，包括页面尺寸、边距、元素位置等。高保真原型图根据概念设计文档和低保真原型图，进行APP的视觉设计，包括色彩搭配、图标设计、字体选择等。UI设计项目式教程课程介绍案例分析设计流程实战练习从功能上来讲，旅游APP包含首页、行程、消息、我的四大页面，分为四大核心模块。UI设计项目式教程课程介绍案例分析设计流程实战练习

制作低保真原型图时，尺寸通常根据适配机型来确定，没有固定要求。为保证低保真原型图协调统一，需注意字体规范，如图所示。旅游APP的UI字体规范需从字体选择、字号、字重、颜色、排版等维度制定，确保视觉统一性与阅读体验。设计低保真原型图时需要注意以下几点：UI设计项目式教程课程介绍注意事项设计流程实战练习1.保证交互中的字号、间距等尽量符合视觉要求，以免给视觉造成不必要的困扰。2.交互阶段的产出方案，应该更聚焦于信息布局、内容层次、操作流程。不建议在交互稿上使用色彩，避免对视觉设计师造成不必要的干扰。3.注重用户体验，以最直接、简便的方式呈现功能。设计低保真原型图时需要注意以下几点设计低保真原型图时需要注意以下几点：UI设计项目式教程课程介绍注意事项设计流程实战练习

在制作高保真原型之前，需要完成规范手册的制作。制作规范手册主要是为了便于设计团队或设计师之间统一产品的视觉设计风格；

同时，保证设计师与开发人员之间沟通和工作交接的顺利进行，使开发出的产品界面和视觉稿高度统一。制作规范手册，包括字体、颜色、按钮、图标等要求，如图所示。在规范手册的基础上，根据规范自定义矩形组件可以方便地进行取色，提高设计效率，这样可以快速准确地获取所需的颜色，避免手动输入色值的繁琐过程，同时也能保证颜色的统一性。UI设计项目式教程课程介绍案例分析设计流程实战练习一、APP包含首页、行程、消息、我的四大页面，

UI字体规范需从字体选择、字号、字重、颜色、排版等维度制定，确保视觉统一性与阅读体验。二、设计低保真原型图时需要注意1.保证交互中的字号、间距等尽量符合视觉要求，以免给视觉造成不必要的困扰。2.交互阶段的产出方案，应该更聚焦于信息布局、内容层次、操作流程。不建议在交互稿上使用色彩，避免对视觉设计师造成不必要的干扰。3.注重用户体验，以最直接、简便的方式呈现功能。三、在制作高保真原型之前，需要完成规范手册的制作包括字体、颜色、按钮、图标等要求总结UI设计项目式教程课程介绍案例分析设计流程实战练习完成以下任