AxureRP产品原型设计课件 第10章 商业案例实战

本章介绍：前面几章对AxureRP进行了深入的讲解并进行了实操，本章将结合多个不同应用领域的商业案例，通过项目背景、项目要求、项目要点、项目设计与制作这一流程进一步详解AxureRP强大的功能和原型制作技巧。通过对本章的学习，读者可以快速掌握商业案例的设计理念、AxureRP的技术要点和AI辅助设计技巧，制作出具有专业水准的原型。第10章商业案例实战知识目标理解商业案例的项目背景理解商业案例的项目要求熟悉商业案例的项目要点能力目标具备制作中式茶业官网低保真原型、高保真交互原型的能力具备制作企业招聘H5低保真原型、高保真交互原型的能力具备制作旅游出行App低保真原型、高保真交互原型的能力具备制作家具电商平台、中式糕点H5、家具电商App高保真交互原型的能力掌握UXbot的使用技巧素质目标培养完成AxureRP商业案例的能力培养应对AxureRP商业案例中的问题的能力培养良好的责任心和团队合作精神10.1制作中式茶业官网的低保真原型10.1.1项目背景10.1.2项目要求10.1.3项目要点10.1.4项目设计10.1.1项目背景1．客户名称品茗茶业股份有限公司。2．客户需求品茗茶业股份有限公司是一家致力于传承和弘扬中国传统茶文化的现代企业，其精选优质的茶叶原料，结合传统制茶工艺与现代科技，生产出一系列口感纯正、香气独特的茶叶产品。目前需要为该公司官网设计一套低保真原型，要求体现公司品牌的核心价值和特色，并能为后续的高保真原型设计和交互制作打下基础。10.1.2项目要求（1）展示品茗茶业官网的核心业务逻辑和功能模块。（2）采用清晰的网站结构和布局，确保内容的逻辑性和易读性。（3）使用直观的交互元素，确保用户能够通过原型了解网站的操作流程，并能轻松完成操作。（4）使用简洁的线条、基本形状和有限的色彩来传达设计意图，避免过于复杂的视觉效果。（5）符合网页设计的规范与标准，其中设计宽度为1920像素，高度不限。10.1.3项目要点使用“页面”面板建立页面结构，使用“创建辅助线”命令创建全局辅助线，使用多种元件绘制页面，使用“导出所有页面为图片”命令导出所有页面使用“生成HTML文件”命令生成HTML文件。10.1.4项目设计本项目的设计和制作流程。效果图10.1.4项目设计本项目的设计和制作流程。效果图10.1.4项目设计本项目的设计和制作流程。效果图10.2制作企业招聘H5的低保真原型10.2.1项目背景10.2.2项目要求10.2.3项目要点10.2.4项目设计10.2.1项目背景1．客户名称灵感源泉文化传播有限公司。2．客户需求灵感源泉文化传播有限公司是一家专注于文化传承与创新的现代企业。公司业务涵盖文化活动策划、艺术展览策划、文化产品开发、数字媒体内容制作等。目前需要为该公司设计一套企业招聘H5的低保真原型，要求体现公司品牌的核心价值和特色，并能为后续的高保真原型设计和交互制作打下基础。10.2.2项目要求（1）展示企业招聘H5的核心业务逻辑和功能模块。（2）采用清晰的H5页面结构和布局，确保内容的逻辑性和易读性。（3）使用直观的交互元素，确保用户能够通过原型了解H5页面的操作流程，并能轻松完成操作。（4）使用简洁的线条、基本形状和有限的色彩来传达设计意图，避免过于复杂的视觉效果。（5）符合H5页面设计的规范与标准，其中设计宽度为375像素，高度为603像素。10.2.3项目要点使用“页面”面板建立页面结构，使用“创建辅助线”命令创建全局辅助线，使用多种元件绘制页面，使用“导出所有页面为图片”命令导出所有页面，使用“生成HTML文件”命令生成HTML文件。10.2.4项目设计本项目的设计和制作流程。效果图10.2.4项目设计本项目的设计和制作流程。效果图10.2.4项目设计本项目的设计和制作流程。效果图10.3制作旅游出行App的低保真原型10.3.1项目背景10.3.2项目要求10.3.3项目要点10.3.4项目设计10.3.1项目背景1.客户名称游儿旅行有限公司。2.客户需求游儿旅行有限公司致力于提供沉浸式和高品质的国内旅游体验。公司团队由一群热爱祖国山河、对各地文化和风情有深刻理解的旅行规划师组成，他们致力于让游客在每一次旅行中都能发现不同地域的独特魅力。目前需要为该公司设计一套旅游出行App的低保真原型，要求体现公司的品牌价值和功能特色，并能为后续的高保真原型设计和交互制作打下基础。10.3.2项目要求（1）展示旅游出行App的核心业务逻辑和功能模块。（2）采用清晰的App结构和布局，确保内容的逻辑性和易读性。（3）使用直观的交互元素，确保用户能够通过原型了解App的操作流程，并能轻松完成操作。（4）使用简洁的线条、基本形状和有限的色彩来传达设计意图，避免过于复杂的视觉效果。（5）符合App设计的规范与标准，其中设计宽度为393像素，高度为852像素。10.3.3项目要点使用“页面”面板建立页面结构，使用“创建辅助线”命令创建全局辅助线，使用多种元件绘制页面，使用“导出所有页面为图片”命令导出所有页面，使用“生成HTML文件”命令生成HTML文件。10.3.4项目设计本项目的设计和制作流程。效果图10.3.4项目设计本项目的设计和制作流程。效果图10.3.4项目设计本项目的设计和制作流程。效果图10.3.4项目设计本项目的设计和制作流程。效果图10.4制作中式茶业官网的高保真交互原型10.4.1项目背景10.4.2项目要求10.4.3项目要点10.4.4项目设计10.4.1项目背景1．客户名称品茗茶业股份有限公司。2．客户需求品茗茶业股份有限公司是一家致力于传承和弘扬中国传统茶文化的现代企业，其精选优质的茶叶原料，结合传统制茶工艺与现代科技，生产出一系列口感纯正、香气独特的茶叶产品。现阶段需要根据公司官网的低保真原型，为公司官网设计一套高保真交互原型，要求精确呈现网站的页面和交互效果，以便模拟真实用户的操作。10.4.2项目要求（1）根据低保真原型，准确反映出网站的信息结构和页面布局。（2）展示中式茶业官网的交互细节，模拟用户与网站进行交互的过程。（3）动画和过渡效果自然，保证网站页面的流畅性和动态性。（4）体现出中式茶业网站的特色，并确保所有页面元素和间距与实际网站一致。（5）符合网页设计的规范与标准，其中设计宽度为1200像素，高度不限。10.4.3项目要点使用“样式”面板设置元件属性，使用“转换为母版”命令转换元件为母版，使用“添加交互样式”超链接设置交互样式，使用“交互编辑器”对话框添加各类交互，使用“动态面板”元件实现动态效果，使用“中继器”元件处理动态数据，使用“生成HTML文件”命令生成HTML文件。10.4.4项目设计本项目的设计和制作流程。效果图10.4.4项目设计本项目的设计和制作流程。效果图10.4.4项目设计本项目的设计和制作流程。效果图10.5制作家具电商平台的高保真交互原型10.5.1项目背景10.5.2项目要求10.5.3项目要点10.5.4项目设计10.5.1项目背景1．客户名称东方木品家具制造有限公司。2．客户需求东方木品家具制造有限公司是一家专注于中式家具的公司，其产品线涵盖传统红木家具、新中式家具以及东方风情家饰，其每一件产品都是对东方美学的深刻诠释和对工艺极致追求的体现。目前需要为公司的家具电商平台设计一套高保真交互原型，以提高用户对产品的信任度，从而增加转化率。10.5.2项目要求（1）体现电商平台的核心业务逻辑和功能模块。（2）展示电商平台的交互细节，模拟用户与电商平台进行交互的过程。（3）动画和过渡效果自然，保证平台页面的流畅性和动态性。（4）体现出中式家具平台的特色，并确保所有页面元素和间距与实际平台一致。（5）符合平台设计的规范与标准，其中设计宽度为1200像素，高度不限。10.5.3项目要点使用“页面”面板建立页面结构，使用“创建辅助线”命令创建辅助线，使用多种元件绘制页面，使用“样式”面板设置元件属性，使用“转换为母版”命令转换元件为母版，使用“添加交互样式”超链接设置交互样式，使用“交互编辑器”对话框添加各类交互，使用“动态面板”元件实现动态效果，使用“中继器”元件处理动态数据，使用“生成HTML文件”命令生成HTML文件。10.5.4项目设计本项目的设计和制作流程。效果图10.5.4项目设计本项目的设计和制作流程。效果图10.5.4项目设计本项目的设计和制作流程。效果图10.6制作企业招聘H5的高保真交互原型10.6.1项目背景10.6.2项目要求10.6.3项目要点10.6.4项目设计10.6.1项目背景1．客户名称灵感源泉文化传播有限公司。2．客户需求灵感源泉文化传播有限公司是一家专注于文化传承与创新的现代企业。公司业务涵盖文化活动策划、艺术展览策划、文化产品开发、数字媒体内容制作等。现阶段需要根据企业招聘H5的低保真原型，为公司设计一套高保真交互原型，要求精确呈现H5的页面和交互效果，从而模拟真实用户的操作。10.6.2项目要求（1）根据低保真原型，准确反映出H5页面的信息结构和布局。（2）展示企业招聘H5的交互细节，模拟用户与H5页面进行交互的过程。（3）动画和过渡效果自然，保证H5页面的流畅性和动态性。（4）体现出现代企业的特色，并确保所有页面元素和间距与实际H5页面一致。（5）符合H5页面设计的规范与标准，其中设计宽度为375像素，高度为603像素。10.6.3项目要点使用“页面”面板调整页面结构，使用“样式”面板设置元件属性，使用“转换为母版”命令转换元件为母版，使用“交互编辑器”对话框添加各类交互，使用“动态面板”元件实现动态效果，使用“生成HTML文件”命令生成HTML文件。10.6.4项目设计本项目的设计和制作流程。效果图10.6.4项目设计本项目的设计和制作流程。效果图10.6.4项目设计本项目的设计和制作流程。效果图10.7制作中式糕点H5的高保真交互原型10.7.1项目背景10.7.2项目要求10.7.3项目要点10.7.4项目设计10.7.1项目背景1．客户名称谷韵坊中式糕点有限公司。2．客户需求谷韵坊中式糕点有限公司是一家致力于传承和创新中式糕点的企业。自成立以来，公司始终坚持以传统工艺为基础，结合现代食品科技，精心制作每一款中式糕点。目前需要为公司的各类中式糕点设计一套H5的高保真交互原型，用于有效地传递商品信息，帮助用户全面了解公司产品，提升用户对品牌的认知度和好感度。10.7.2项目要求（1）体现中式糕点H5的核心功能和热销商品。（2）展示中式糕点H5的交互细节，模拟用户与H5页面进行交互的过程。（3）动画和过渡效果自然，保证H5页面的流畅性和动态性。（4）体现出中式糕点的特色，并确保所有页面元素和间距与实际H5页面一致。（5）符合H5页面设计的规范与标准，其中设计宽度为375像素，高度为603像素。10.7.3项目要点使用“样式”面板设置图片属性，使用“交互编辑器”对话框添加各类交互，使用“动态面板”元件实现动态效果，使用“生成HTML文件”命令生成HTML文件。10.7.4项目设计本项目的设计和制作流程。效果图10.8制作旅游出行App的高保真交互原型10.8.1项目背景10.8.2项目要求10.8.3项目要点10.8.4项目设计10.8.1项目背景1．客户名称游儿旅行有限公司。2．客户需求游儿旅行有限公司致力于提供沉浸式和高品质的国内旅游体验。公司团队由一群热爱祖国山河、对各地文化和风情有深刻理解的旅行规划师组成，他们致力于让游客在每一次旅行中都能发现不同地域的独特魅力。现阶段需要根据公司App的低保真原型，为公司App设计一套高保真交互原型，要求精确呈现App的页面和交互效果，从而模拟真实用户的操作。10.8.2项目要求（1）根据低保真原型，准确反映出App的信息结构和页面布局。（2）展示旅游出行App的交互细节，模拟用户与App进行交互的过程。（3）动画和过渡效果自然，保证App页面的流畅性和动态性。（4）体现出旅游出行App的特色，并确保所有页面元素和间距与实际App一致。（5）符合App设计的规范与标准，其中设计宽度为393像素，高度为852像素。10.8.3项目要点使用“页面”面板调整页面结构，使用“样式”面板设置元件属性，使用“转换为母版”命令转换元件为母版，使用“添加交互样式”超链接设置交互样式，使用“交互编辑器”对话框添加各类交互，使用“动态面板”元件实现动态效果，使用“中继器”元件处理动态数据，使用“生成HTML文件”命令生成HTML文件。10.8.4项目设计本项目的设计和制作流程。效果图10.8.4项目设计本项目的设计和制作流程。效果图10.8.4项目设计本项目的设计和制作流程。效果图10.8.4项目设计本项目的设计和制作流程。效果图10.9制作家具电商App的高保真交互原型10.9.1项目背景10.9.2项目要求10.9.3项目要点10.9.4项目设计10.9.1项目背景1．客户名称木潮家具有限公司。2．客户需求木潮家具有限公司专注于现代简约风格的家具设计，其产品涵盖客厅、卧室、餐厅等多个系列，每一件家具都经过精心设计和严格挑选，在满足现代审美的同时兼顾了舒适性和实用性。目前需要为公司的家具电商App设计一套高保真交互原型，以识别潜在的用户流失点，从而降低用户流失率。10.9.2项目要求（1）体现电商家具App的核心业务逻辑和功能模块。（2）展示电商家具App的交互细节，模拟用户与App进行交互的过程。（3）动画和过渡效果自然，保证App页面的流畅性和动态性。（4）体现出简约家具的特色，并确保所有页面元素和间距与实际App一致。（5）符合App设计的规范与标准，其中设计宽度为393像素，高度为852像素。10.9.3项目要点使用“页面”面板建立页面结构，使用“创建辅助线”命令创建全局辅助线，使用多种元件绘制页面，使用“样式”面板设置元件属性，使用“转换为母版”命令转换元件为母版，使用“添加交互样式”超链接设置交互样式，使用“交互编辑器”对话框添加各类交互，使用“动态面板”元件实现动态效果，使用“中继器”元件处理动态数据，使用“生成HTML文件”命令生成HTML文件。10.9.4项目设计本项目的设计和制作流程。效果图10.9.4项目设计本项目的设计和制作流程。效果图10.9.4项目设计本项目的设计和制作流程。效果图10.10课堂练习——制作职业教育管理系统的高保真交互原型10.10.1项目背景10.10.2项目要求10.10.3项目要点10.10.4项目设计10.10.1项目背景1．客户名称设计课堂在线教育有限公司。2．客户需求设计课堂在线教育有限公司致力于打造专业的在线设计教育平台，公司汇聚了高校教师与行业专家，精心策划课程内容，课程覆盖从基础入门到高级进阶的各个层次。目前需要为公司的职业教育管理系统设计一套高保真交互原型，以加强学员的学习体验，激发学员的创造力，提升学员的专业技能。10.10.2项目要求（1）体现职业教育管理系统的核心业务逻辑和功能模块。（2）展示职业教育管理系统的交互细节，模拟用户与职业教育管理系统进行交互的过程。（3）动画和过渡效果自然，保证系统页面的流畅性和动态性。（4）体现出在线教育系统的特色，并确保所有页面元素和间距与实际系统一致。（5）符合网页设计的规范与标准，其中设计宽度为1440像素，高度不限。10.10.3项目要点使用“页面”面板建立页面结构，使用“创建辅助线”命令创建全局辅助线，使用多种元件绘制页面，使用“样式”面板设置元件属性，使用“转换为母版”命令转换元件为母版，使用“添加交互样式”超链接设置交互样式，使用“交互编辑器”对话框添加各类交互，使用“动态面板”元件实现动态效果，使用“中继器”元件处理动态数据，使用“生成HTML文件”命令生成HTML文件。10.10.4项目设计本项目的设计和制作流程。效果图10.10.4项目设计本项目的设计和制作流程。效果图10.10.4项目设计本项目的设计和制作流程。效果图10.11.1项目背景10.11.2项目要求10.11.3项目要点10.11.4项目设计10.11课后习题——制作美食外卖App的高保真交互原型10.11.1项目背景1．客户名称三餐美食信息科技有限公司。2．客户需求三餐美食信息科技有限公司是一家专注于美食外卖的创新型公司，致力于通过先进的技术平台连接食客与美食。平台汇聚了众多优质餐厅，为用户提供丰富多样的美食选择，从快餐小吃到高端料理，应有尽有，满足不同用户的口味和需求。目前需要为公司的美食外卖App设计一套高保真交互原型，为用户提供更好的用餐体验。10.11.2项目要求（1）体现美食外卖App的核心业务逻辑和功能模块。（2）展示美食外卖App的交互细节，模拟用户与App进行交互的过程。（3）动画和过渡效果自然，保证App页面的流畅性和动态性。（4）体现出美食外卖App的特色，并确保所有页面元素和间距与实际App一致。（5）符合App设计的规范与标准，其中设计宽度为