AIGC协同XD制作高保真效果页面面向人工智能的UI界面设计99课件讲解.pptxVIP

面向人工智能的UI界面设计

UIDesignforArtificialIntelligence

AIGC协同XD制作高保真效果页面

AIGC协同XD制作高保真效果页面

在启动XD之前，我们需对小程序整体结构心中有数。基于前期规划，我们的主要界面模块包括：

入口页(Auth)：

启动页、登录页、注册页、忘记密码页。

首页(Home)：个性化推荐、搜索栏、分类导航、动态信息流。

发现页(Explore)：非遗项目库、分类筛选以及热门排行。

在启动XD之前，我们需对小程序整体结构心中有数。基于前期规划，我们的主要界面模块包括：

学习/打卡页(Practice)：项目详情、动作解析、打卡发布。

个人中心(Profile)：我的足迹、徽章墙、贡献记录、设置。

第一部分：

登录页设计——简洁高效的回归之门

我们的设计目标很明确：在确保流程清晰、操作便捷的基础上，于方寸之间悄然传递出项目的文化气质。

登录页的核心任务：让老用户无障碍地回归。

我们在XD中创建一个375x667px（iPhone8标准）的艺术板。

1.视觉氛围营造

2.核心表单区域

2.核心表单区域

3.行动召唤按钮

提供“微信一键登录”等快捷方式，降低用户门槛。

4.第三方登录与注册引导

一行清晰的文案“还没有账号？立即注册”，其中“立即注册”同样使用芽绿色并链接到注册页。

注册页需要收集用户信息，设计的关键在于减轻用户的心理负担，将流程变得轻松甚至有趣。

注册页设计——循序渐进的文化邀约

视觉延续：保持与登录页一致的背景、字体和色彩体系，建立家族感。

步骤指示器：在页面顶部，我们设计一个三步走的步骤条（1.填写信息-2.设置密码-3.完成），使用圆点和文字结合，当前步骤高亮为赭石色；这能清晰告知用户进度，降低因过程不明而产生的焦虑。

实操分解：登录页与注册页的设计哲学与XD实现

1.延续性与渐进感

实操分解：登录页与注册页的设计哲学与XD实现

2.分步表单设计（以第一步为例）

密码强度提示：随着用户输入密码，下方提供一个可视化的密码强度提示条，颜色从灰到红再到绿，动态变化，给予用户即时正向激励。

查看：在密码框右侧提供一个“眼睛”图标，点击可以切换明文/密文显示，方便用户核对。

实操分解：登录页与注册页的设计哲学与XD实现

3.密码设置页的体验优化

成功反馈：注册成功后，不再是一个冰冷的“注册成功”文字。我们设计一个Lottie动画区域——一个欢快跳动的小人成功踢出一个毽子，动画下方配上文字：“欢迎你，文化传承者！”。

明确引导：紧接着提供一个巨大的按钮“立即探索非遗世界”，直接引导用户进入首页，开启核心旅程。

实操分解：登录页与注册页的设计哲学与XD实现

4.完成页的仪式感

对小程序界面设计中的组件化、状态管理、原型链接、微交互、登录与注册页有了基础的认识。

课堂小结