《UI设计-AIGC驱动赋能界面完美设计》课件 2.2 任务实施

022.2任务实施2.2.1

分析“校缘通”App的项目定位“校缘通”平台目标用户主要为18～26岁的在校大学生，采用校园精准定位模式：新用户完成学校信息认证后，将自动匹配至对应校区界面；未完成认证的用户仅拥有浏览权限，无法进行发帖、接单、评论等互动操作。平台打造丰富多元的校园社区服务体系，覆盖跳蚤市场、代拿跑腿、兼职对接、学术交流、校园通告、游戏开黑、社团活动、校园动态、宿舍神器、寻人寻物、二手闲置、书籍共享、表白墙、宿舍零食、驾照备考、教资备考等各类场景，吃喝玩乐、学习生活相关需求一站式满足。“校缘通”App以校园综合服务平台为核心定位，通过提供全面、便捷的校园专属服务，一方面提升大学生的学习生活品质，另一方面助力校园管理效率优化；用户可通过App端随时随地获取所需信息、完成各类操作与社交交流，为校园生活注入更多便利与活力。

2.2.2分析“校缘通”App的项目背景在社会进步与科技发展的双重推动下，数字化校园建设已成为教育行业的主流发展趋势，学校与学生群体对于校园服务的便捷性、高效性提出了更高要求，校园服务类App凭借数字化技术优势，成为满足这一需求、提升师生校园生活与学习效率的重要载体。2.2任务实施校园作为多元需求聚集的场景，师生在学习、生活、社交、校园管理等方面存在多样化诉求，而校园服务类App通过整合各类服务与功能，搭建起统一的服务平台，能够针对性地覆盖校园内不同用户的差异化需求，实现服务的集中化、高效化供给。这类平台既可为学生提供课程表查询、考试安排、作业提交等学术支持服务，助力学生科学规划学习计划、跟踪学习进度；也能覆盖餐饮订餐、图书馆借阅管理、社交互动等生活服务场景，全方位提升学生的校园生活品质与幸福感。同时，校园服务类App也为学校管理赋能，通过资产管理数字化、设备借用线上化、报修服务便捷化等功能，优化校园资源的管理与维护流程，大幅提升校园管理效率。当下互联网技术飞速发展，“00后”已成为当代大学生的主体群体，追求潮流、时尚与科技化体验成为其显著特征。尽管当下电子产品与网络工具普及，但专为大学生量身打造的综合性校园社交服务平台仍较为稀缺：传统贴吧、论坛的功能与体验已无法匹配当代学生的需求，新生入学后想要了解校园情况、向学长学姐请教问题时，仅能依托贴吧、微信、QQ等渠道，却存在同学间互动零散、信息杂乱的问题，多数新生甚至难以找到对应的校园社群入口，各类校园诉求也缺乏统一的发布与解决渠道。在此背景下，打造一款整合校园全维度资源、覆盖多元服务场景的专属校园社交服务平台，成为校园生活的迫切需求。2.2任务实施2.2.3分析“校缘通”App的用户需求1.用户研究对在校大学生进行问卷调查，并进行结果汇总，如图2-14、图2-15所示。图2-14问卷调查结果图2-15问卷调查汇总2.2任务实施2.2.3分析“校缘通”App的用户需求2.用户分布根据问卷调查结果，对大学生用户使用社区服务类产品的动机、习惯等进行发布结果展示（见图2-16）。图2-16用户分布数据汇总3.需求分布图结合在校大学生问卷调查结果与用户分布数据，梳理出核心用户需求如下：希望结识同校同学组队游戏开黑、寻求代拿快递与外卖的便捷服务、通过平台找到靠谱的校园跑腿资源、实现同校范围内的二手物品转卖交易，以及性格内向的学生期望依托校内专属平台，找到同校可倾诉交流的伙伴等，如图2-17所示。图2-17需求分布图2.2任务实施2.2.4分析“校缘通”App的用户画像

通过对在校大学生的基本需求人群进行调研，总结该用户群体的核心特征和痛点，建立了核心用户群体的用户画像，如图2-18所示。

用户画像能够帮助设计团队深度洞悉目标用户的核心需求、使用偏好与行为习惯，进而为其提供更具针对性的产品与服务。同时，用户画像还能为产品设计与市场营销工作提供高价值的决策指引，帮助开发者精准锚定目标用户群体，打造贴合用户真实需求的产品与服务体系。图2-18用户画像2.2任务实施2.2.5分析“校缘通”App的竞品结合用户需求，选取了同类型的3款App作为竞品分析对象。通过对App的定位、功能优势与劣势等方面的分析，我们找到了“校缘通”这款App的节优点和应避免的问题，如图2-19所示。竞品分析是一个持续的过程，需要不断关注市场变化和竞争对手的动态，以保持自身的竞争优势。通过竞品分析，可以更好地理解市场的竞争环境，找到自身产品的优势和改进空间，并制定相应的策略来提升自身产品的竞争力。图2-19竞品分析2.2任务实施2.2.6“校缘通”App的情绪板建立以年轻、热情、活力、青春、社交为核心设计关键词，作为情绪板的设计探索方向。通过头脑风暴发散创意，围绕关键词检索并关联对应情绪情感类图片；对筛选后的图片进行马赛克模糊化处理，提取画面的色差范围，同时提炼适配的产品设计元素，最终结合色彩与元素特征，明确App的整体设计风格，具体如图2-20所示。图2-20情绪板图片建立2.2任务实施2.2.7制作“校缘通”App的产品结构图梳理App的所有功能，并根据功能的优先级别制作产品的结构图。

使用工具XMind制作产品结构图，如图2-21所示。产品结构图能够清晰展秺产品的整体架构视图，帮助设计师、开发人员和利益相关者更好地理解产品的组织和功能。设计团队可以更清晰地查看和沟通产品的各个组件之间的关系，帮助他们规划功能和设计用户体验。图2-21产品结构图2.2任务实施2.2.8绘制“校缘通”App的产品原型图采用Axure制作低保真原型图，具体步骤如下：（1）打开Axure软件，单击欢迎弹框下方的“新建文件”按钮，如图2-22所示。图2-22新建文件（2）页面面板右键重命名为“首页”，如图2-23所示。图2-23页面重命名2.2任务实施2.2.8绘制“校缘通”App的产品原型图（3）元件库面板选择“矩形2”元件，将其拖拽到页面中，如图2-24所示。在样式面板中修改元件的大小和半径值，如图2-25所示。图2-24添加矩形元件图2-25修改元件样式（4）元件库选择“文本标签”元件，拖拽到页面中，输入一级标题“首页”并修改文字大小及字体，如图2-26所示。图2-26添加文本标签元件2.2任务实施2.2.8绘制“校缘通”App的产品原型图（5）拖拽文本标签输入二级标题“重庆机电职业技术大学”，在ICON元件库拖入“AngleDown”元件，放置在二级标题右侧，如图2-27所示。图2-27添加“二级标题”和图标元件（6）在ICON元件库内拖拽“Navicon”元件，放置在原型图界面右侧位置，在样式面板修改大小及线框粗细，如图2-28所示。图2-28添加图标元件2.2任务实施2.2.8绘制“校缘通”App的产品原型图（7）将“图片”元件从元件库面板中拖拽到页面中并修改大小，此位置一般为广告Banner区域，如图2-29所示。图2-29添加图片元件（8）将“占位符”元件从元件库面板中拖拽到页面并修改样式大小，此位置为功能入口区，一般摆放6～8个图标，如图2-30所示。图2-30添加占位符元件2.2任务实施2.2.8绘制“校缘通”App的产品原型图（9）使用相同的方法完成首页界面中的其余内容，如图2-31所示。图2-31首页原型效果（10）使用上方工具栏连接工具将每个版块标注所属内容，如图2-32所示。“校缘通”App界面原型图绘制效果，如图2-33所示。图2-32连接线标注2.2任务实施图2-33“校缘通”App原型图绘制效果2.2.8绘制“校缘通”App的产品原型图2.2任务实施2.2.9总结“校缘通”App的设计理念“校缘通”作为校园服务类App，设计理念紧扣在校学生核心需求，以提供全方位校园服务为核心，助力学生便捷获取各类校园信息、享受多元服务，进而提升学习效率与校园生活品质。产品设计遵循表现层、框架层、结构层三大维度，通俗概括为好看、好用、深入人心，具体如图2-34所示。图2-34设计的三个维度本次设计设定核心目标：打造简洁高效的界面，让视觉信息层次清晰，降低用户交互学习成本；实现操作反馈的有效与及时，增强使用体验感；融合新鲜创意与趣味功能，贴合年轻人喜好，为校园生活增添乐趣；同时持续简化操作流程、降低用户认知负荷，全方位提升整体使用体验。2.2任务实施2.2.10整理“校缘通”App的视觉规范色彩选择：以明亮清新的视觉调性为核心，主色选用蓝色，具体参数为：RGB（19，127，254）、HSB（212，93，99）、色彩代码#137FFE；辅助色选用橙色，用于区分不同功能与板块，具体参数为：RGB（255，167，3）、HSB（38，99，100）、色彩代码#FFA703；点缀色选用红色，具体参数为：RGB（248，30，6）、HSB（4，98，97）、色彩代码#F81E06。具体色彩规范如图2-35所示。图2-35色彩规范字体选择：统一选用苹方作为中文字体，不同文本层级字号与字重规范如下：主标题为38px