AI正以惊人的速度改变着我们的生活和工作方式。淘宝设计团队也在探索如何借助AI的能力，打破谈及AI即聊天对话的思维惯性，构建更高效、实用、符合电商场景的体验范式，来帮助用户解决全链路购物场景问题，重塑用户的购物体验。
分享人：陈慧聪
研究方向：AIGC
关键词：AIGC；IP形象设计；UI设计；版面设计
01
重庆一锅IP形象设计
案例作者 ZhengKai Huang
案例介绍
设计师使用AIGC技术，为重庆的某食品公司设计了一款IP形象，并将此形象应用于后续的海报和KV设计中。该案例详细介绍了设计师在项目中训练IP形象Lora模型所用到的训练参数和KV设计的设计流程。
设计流程
01 场景梳理
从业务场景出发，梳理出其产品IP形象可覆盖的应用场景，从而得出品牌IP Lora模型能够应用的业务场景，方便设计师进行根据场景进行数据收集。
图1 场景梳理
02 模型训练
将不同动作的IP形象和丰富的场景作为数据集进行模型训练，得到IP Lora模型，方便后续其他业务场景的使用。
图2 动作数据集
图3 场景数据集
03 泛化性测试
为确保得到的IP Lora模型足够稳定，设计师使用不同关键词，动作，场景指示对生成模型的泛化性，还原性和拟合程度进行测试和优化，最终获得稳定的IP Lora模型。
图4 动作测试
图5 服装测试
04 重要训练参数
训练参数的设置很大程度上决定着训练成功与否，不同的图片分辨率与底层模型都对应不同的参数设置。
图6 重要训练参数
05 模型应用-海报设计流程
（1）描述角色场景及特征使用Lora模型进行生成。
（2）挑选合适的造型和场景。
（3）文本与细节优化。
图7 海报应用
图片及案例来源
https://www.behance.net/gallery/196240679/AIGC-IP
02
智能驱动电商UI设计
案例作者 Kiki & Keke
案例介绍
在AI技术的推动下，UI设计也在经历一场革命。淘宝设计团队正致力于利用AI的潜力，超越传统的聊天对话界面，创造更加直观、互动和个性化的购物体验。通过智能推荐系统、个性化界面定制以及实时互动反馈，AI正在帮助用户更快捷地发现他们感兴趣的商品，简化购物流程，并提供更加丰富的视觉和交互体验。这种创新的UI设计不仅提升了用户的购物效率，还增强了用户与电商平台之间的互动，为电商行业树立了新的标杆。
设计流程
01 回归需求本身
淘宝设计团队认为AI智能技术是手段，需求场景不同、产品功能不同，面向用户的UI设计形态自然也应该有所不同。要设计更高效、实用、符合电商场景的UI设计产品，核心逻辑是先梳理逛-找-看-对比-聊-买-售后完整购物链路下各个阶段的痛点，其次针对解决痛点所需功能选择对应智能技术和合适的UI设计形态。
图1 需求导向的智能设计逻辑
02 创建新的产品架构
通过总结当前市面上的AI产品的特点，设计团队总结出链路节点融入式和全功能集合中心式两种新的AI产品形态。
1 链路节点融入式
针对链路场景，既要让用户可见可用，也要保证原有链路体验的连续性和沉浸感，不干扰用户主链路。对此，需要设计一套匹配AI适时主动性，轻量、灵活的自适应组件模块融入各场景辅助给用户提供帮助，并统一UI范式保证体验一致性。
（1）自适应组件模块
通过分析对比各种页面组件的轻量感和灵活性，可以使用链路打断性弱和页面融合性相对平衡的底部提示气泡作为AI主动触达用户的通用性UI模块，页面内卡片元素和小浮卡为被动触发的内容结果模块。
图2 页面组件轻量感和灵活性对比
（2）嵌入内容流和从旁辅助两种形态
实际用户在购物过程中遇到的问题，有些是和当前页面某个内容点强相关的（比如商家无法及时回复）；有些是全局性的（比如不知道如何跟商家沟通），需要作为第三方角色从旁辅助去协助用户。
图3 两种形态举例
（3）AI主动UI范式
区别于传统被动式响应的交互方式，适时适度地主动前置感知、理解、判断、响应用户需求，是产品让人觉得智能懂我的重要原因。在用户和AI的交互过程中，通过对场景、触发、操作、结果和干预这五个要素的主动关系设计，可以使整个智能体验更符合用户预期。
图4 A-U交互主动关系图
2 全功能集合中心式
中心页核心帮用户解决脑海中有一个需求但不知道如何解决或链路太深不想逐步操作的问题，比如不知道怎么找到想买的东西、不知道怎么挑选礼物、大促要退的商品很多，挨个操作麻烦等，以及让用户知道有哪些AI能力。这类场景下，一问一答的聊天对话是一种解决方式。
03 四个体验原则
（1）次不妨主
在UI设计过程中，要确保原有主链路的体验连续性和操作习惯，避免为了强调AI功能做打断性交互设计，前面链路节点融入式产品架构的设计核心就是在遵循这个大原则。这种体验包括以下四个特征：
—在次级视觉区适度出现
—尽可能当前页面完成无跳转，避免多步重操作
—非强制性，不会阻断用户主操作
—未发生或结束操作后自觉退出
（2）感知有度
在视觉层级上，结果的呈现要适度，避免过度抢用户的视觉浏览焦点。
图5 感知有度
（3） 一步操作
尽可能让用户以最直接、最快捷的方式达到目的，能一步就不要两步操作，降低多步操作带来的跳转流失和用户误操作率
图6 一步操作
（4）结果直观
加强对结果的关注，确保用户能够快速、直观地看到其操作的结果。
图7 结果直观
04 结语
目前AI购物助手设计解决方案主要应用于手机天猫的UI设计中，链路节点融入式方案已在购前、中、后全场景主链路中推动落地，包括首页推荐、搜索、商详、IM、购物车和订单列表，全功能集合中心式交互方案目前正在开发中。
图片及案例来源
https://www.sohu.com/a/755783322_121124379
03
饿了么商家版年度报告版面设计
案例作者 Xu Fang
案例介绍
该案例是饿了么商家版年度报告版面设计，设计师在探索视觉叙事的过程中采用AIGC+传统三维渲染方式。从构思到执行，整个设计流程，都有AIGC工具的参与。AIGC工具的使用使得原本三维海报渲染制作流程变得高效，而3D建模人物在整个流程的使用又使最终复杂的效果变得更加真实。
设计流程
01 AIGC生成场景
使用MJ高效地生成设计师需要的多种系列图，并在生成的图库中挑选风格更为一致的系列图。
（1）选择清晰明确的场景关键词，并加入风格关键词，进行图片大量生成。
图1 关键词探索拓展
（2）通过MJ的大量生图测试，得出符合需求的较为稳定的关键词结构，并使用该结构连续生图。
图2 稳定关键词结构
（3）将得到的图片放大并调整合适的构图，在适当的位置加入品牌元素，从而得到场景。
图3 最终场景
02 3D渲染角色
将AIGC生成的场景图片，导入C4D，利用摄像机矫正，逆推出真实的坐标，调整IP角色动作并保持透视正确。然后将人物模型导入MD解算服装，并放入场景，加上道具进行整体的渲染输出。
图4 人物渲染
03 文案排版
选择合适的字体和配色进行整体画面的排版。
图5 字体排版
04 合成完整画面
最后，把AIGC生成的场景图和3D渲染图与文字排版进行合成，深入刻画，调整细节，输出切图进行交付。
图6 完整画面输出
图7 页面展示
图片及案例来源
https://www.behance.net/gallery/194339809/AIGC3D
学习与收获
本次案例充分展示了AIGC技术在设计领域的显著助力，为创作过程带来了前所未有的便捷，无论是对于学生还是设计师而言，AI技术归根结底仅是辅助工具的角色。我们需明智地驾驭这些工具，结合深厚的设计知识，共同推动工作效率的飞跃。在AI产品体验设计的广阔天地里，技术虽易成为万众瞩目的焦点，但“回归用户需求本质”这一核心理念却不容忽视。秉持这一原则，我们能够有效规避过度设计的陷阱，确保每一次创新都紧密围绕用户的真实需求与期望，从而打造出真正以用户为核心、触动心灵的产品体验。
