AIGC辅助教育网站界面设计实操面向人工智能的UI界面设计18课件讲解.pptxVIP

面向人工智能的UI界面设计UIDesignforArtificialIntelligenceAIGC辅助教育网站界面设计实操主讲人：何坚

AI-orientedUIDesign面向人工智能的UI界面设计

AIGC辅助教育网站界面设计实操

案例不知道从哪开始布局？配色总是搭配不好？案例图标、Banner做不出来？设计稿总是被说不够专业？

案例即梦AI+AdobeXD，快速完成一个职业技能教育网站的高保真界面设计。学会用AI工具辅助创意落地

提示词生成教育科技门户网站首页布局方案（3版不同风格），必须包含：导航栏（Logo+5个一级菜单+搜索框+登录按钮）；Banner区（1920x500px，支持轮播）；课程推荐区（6门课程卡片，3列2行）；师资展示区（4人头像+名称+简介）；企业合作区（5个企LOGO）；Footer区。要求：响应式适配PC端（1920px）与平板端（768px），标注各模块间距（单位px），输出线框图样式。界面布局设计

提示词生成教育科技网站课程列表页布局，左侧为筛选栏，要包含课程分类、难度和价格筛选；右侧为课程列表，采用下拉卡片式，每张卡片要有封面图、标题、价格和评分；顶部要有面包屑导航和排序下拉框。同样要支持响应式适配，在移动端隐藏左侧筛选栏，改为顶部下拉筛选。界面布局设计

注意提示词越详细，AI生成的结果就越符合你的预期。输入完毕后，点击生成，AI会给你几个不同风格的版本。配色设计色彩是设计的灵魂，好的配色能让你的网站瞬间提升档次，我们可以继续使用即梦AI来生成配色方案。

提示词基于简约科技风加教育属性，为教育科技门户网站生成配色方案，包含一个主色、两个辅助色、三个中性色，提供Hex色值，并说明各颜色的应用场景，比如主色用于按钮，辅助色用于强调文字，还要解释配色的心理学依据。配色设计1

核心视觉素材设计一个网站不能只有骨架，还要有血有肉，要为网站设计LOGO、图标系统和Banner图。

提示词StartsEducationalTechnologyCompany用这个英文公司名设计成LOGO，适合教育科技公司，主要业务包含在线课程、名师讲坛、软硬件开发等。设置画布比例为1比1，分辨率1k，生成几个版本供选择。核心视觉素材设计

图标设计需要在AIllustrator中进行精细化重绘。然后用矩形工具和路径查找器绘制图形部分，对于特殊的手写体效果，可以先用PS处理，再导入AI进行矢量化，这样还能避免字体版权问题，最后把完成的LOGO导入XD，放在网页的左上角。核心视觉素材设计先用文字工具创建LOGO的文字部分，选择合适的字体和颜色；1

提示词生成一组教育科技网站功能图标，包含课程、搜索、下载、师资、报名、消息、收藏、分享、评价、筛选，共十个图标。核心视觉素材设计

图标设计如果说“生成一组图标”，AI会在一张图里生成多个图标，比“批量生成”更节省资源，且风格更统一。核心视觉素材设计1

提示词未来科技感，通透玻璃质感，微软风，UI设计，主体位于画面右边，一个蓝色的毕业帽位于图像中央，帽沿颜色为金色。毕业帽下方，透明的方框中叠放着几本书，颜色为浅色、浅蓝色和浅紫色，象征着学习的进程。周围环绕着透明的几何图形，例如立方体和矩形，颜色为白色和浅蓝色，营造出轻盈、简洁的视觉效果。蓝白渐变，色彩鲜艳白色背景。核心视觉素材设计

核心视觉素材设计核心主体加核心视觉效果加效果细节补充加附加图案信息。比如：云朵图标呈现磨砂玻璃效果，带有模糊的边缘与透明质感。图标设计

图标设计完成了首页的设计后，其他页面如课程详情页、个人中心页等，都可以沿用同样的方法进行设计，保持整体风格的一致性。核心视觉素材设计1

优化与交付使用AI工具进行设计审查，将XD中的设计稿导出为PNG格式，上传到豆包AI中。

提示词这是一个职业技能教育网站的设计方案。请基于UI设计准则和无障碍设计要求，评估以下方面：颜色搭配度、文字层级的可读性、信息架构的清晰度、核心操作按钮的识别度、视觉动线的合理性等。请分点列出具体问题和改进建议。优化与交付

在XD中进行优化：调整色彩对比度，确保文本清晰可读，优化字号和字重层级，增强信息层次，检查交互热区尺寸，保证操作便捷性。优化与交付切换到XD的原型模式，制作交互效果，比如为“登录”按钮设计悬停和点击两种状态，让前端开发者能清楚了解交互细节。1

优化与交付通过XD的分享功能生成可编辑的原型链接，邀请产品经理、运营、开发等相关人员进行评审，根据反馈进行设计迭代。优化与交付当设计定稿后，我们将设计资源导出并上传到蓝