2026年7月9日 周四晚上19:30,报名腾讯会议了解“如何构建自进化的动态知识库(Brain)”(限30人)
免费POC, 零成本试错
FDE知识库

FDE知识库

学习大模型的前沿技术与行业落地应用


收藏

AIGC应用案例-视觉设计与UI设计

发布日期:2024-09-27 18:23:55 浏览次数: 3339
作者:人机交互与智能设计研究中心

微信搜一搜,关注“人机交互与智能设计研究中心”



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产品体验设计的广阔天地里,技术虽易成为万众瞩目的焦点,但“回归用户需求本质”这一核心理念却不容忽视。秉持这一原则,我们能够有效规避过度设计的陷阱,确保每一次创新都紧密围绕用户的真实需求与期望,从而打造出真正以用户为核心、触动心灵的产品体验。

53AI,企业落地大模型首选服务商

产品:场景落地咨询+大模型应用平台+行业解决方案

承诺:免费POC验证,效果达标后再合作。零风险落地应用大模型,已交付160+中大型企业

联系我们

售前咨询
186 6662 7370
预约演示
185 8882 0121

微信扫码

添加专属顾问

回到顶部

加载中...

扫码咨询

扫码登录
登录即表示您同意《53AI网站服务协议》
服务协议

欢迎您使用【53AI 官方网站】(以下简称“本网站”或“我们”)。本《会员服务协议》(以下简称“本协议”)是您(以下简称“会员”或“用户”)与【深圳市博思协创网络科技有限公司】之间关于注册、登录及使用本网站会员服务所订立的法律协议。

在您注册或登录前,请务必审慎阅读、充分理解各条款内容,特别是免除或限制责任的条款、知识产权条款、争议解决条款等。此类条款将以加粗形式提示您注意。 当您通过微信公众号授权、手机验证码验证或其他方式成功登录本网站时,即视为您已完全理解并同意接受本协议的全部内容。

一、 定义

本网站:指由【深圳市博思协创网络科技有限公司】运营的,域名为【53ai.com】的网站及相关移动端页面。

会员服务:指本网站向注册会员提供的知识库文章查阅、内容检索及其他相关增值服务。

知识库内容:指本网站发布的包括但不限于文字、图表、数据、研究报告、行业分析等数字化内容资源。

二、 账号注册与登录

登录方式:本网站支持以下登录方式,您可根据实际情况选择:

微信公众号授权登录:您同意将您的微信OpenID信息授权给本网站,用于创建或关联会员账号。

手机验证码登录:您需提供真实有效的手机号码,并通过短信验证码完成身份验证与登录/注册。

账号安全:您的账号仅限您本人使用,禁止赠与、借用、租用、转让或售卖。因您保管不善导致的账号被盗、密码泄露等损失,由您自行承担。

实名认证:根据相关法律法规要求,我们可能要求您在特定功能下完成实名认证。如您拒绝提供,可能无法使用部分或全部服务。

未成年人保护:若您未满18周岁,请在法定监护人的陪同下阅读本协议,并在征得监护人同意后使用本服务。

三、 服务内容与规范

知识库查阅权限:会员登录后,有权按照其会员等级对应的权限范围,在线浏览、检索本网站知识库中的相关文章及内容。

服务变更:我们有权根据业务发展需要,调整、变更或终止部分服务内容,并将以网站公告、公众号消息等方式提前通知。

禁止行为:您在使用服务时不得实施以下行为:

利用技术手段批量爬取、下载、转存知识库内容;

将知识库内容用于商业目的或未经授权地向第三方传播;

干扰本网站正常运行或侵犯其他用户合法权益;

发布违法违规信息或从事违反公序良俗的活动。

四、 知识产权声明

权利归属:本网站知识库中的排版设计、软件代码等内容的知识产权均归【公司全称】或原权利人所有,受《中华人民共和国著作权法》等法律保护。

有限许可:本网站授予会员一项非独占、不可转让、不可转授权的普通许可,仅限于个人学习、研究之目的在线查阅知识库内容。

侵权追责:未经书面许可,任何单位或个人不得以任何形式复制、转载、摘编、镜像、汇编或以其他方式使用上述内容。一经发现,我们保留追究其法律责任的权利。

五、 个人信息保护

我们重视对您个人信息的保护。关于我们如何收集、使用、存储和保护您的个人信息,请单独阅读 《隐私政策》。

您通过微信公众号授权或手机号验证所提供的信息,我们将严格按照《个人信息保护法》的规定处理,仅用于身份识别、服务提供及安全验证等必要用途。

您可以随时通过网站设置或联系客服行使查阅、更正、删除个人信息及撤回授权同意的权利。

六、 免责声明

内容准确性:知识库内容仅供参考,不构成专业建议。我们不对其完整性、准确性、时效性作任何明示或暗示的保证,您应自行判断并承担使用风险。

不可抗力:因自然灾害、政策法规变化、网络故障、第三方平台接口异常(如微信接口维护、运营商短信通道故障)等不可抗力导致的服务中断或延迟,我们不承担违约责任。

第三方链接:本网站可能包含指向第三方网站的链接,该等网站的内容和服务不受我们控制,请您自行甄别风险。

七、 违约责任

如您违反本协议约定,我们有权视情节采取警告、限制功能、暂停服务、注销账号等措施,并保留要求赔偿损失的权利。

如因您的违约行为导致我们遭受行政处罚、第三方索赔或商誉损失,您应承担全部赔偿责任(包括但不限于罚款、赔偿金、律师费、公证费等)。

八、 法律适用与争议解决

本协议的订立、执行和解释均适用中华人民共和国大陆地区法律。

因本协议产生的或与本协议有关的任何争议,双方应友好协商解决;协商不成的,任何一方均可向【公司所在地】有管辖权的人民法院提起诉讼。

九、 其他

本协议构成双方就本服务达成的完整协议,取代此前任何口头或书面约定。

本协议任一条款被认定为无效或不可执行的,不影响其他条款的效力。

我们对本协议享有最终解释权,并在法律允许的范围内保留随时修改的权利。修改后的协议一经公布即生效,继续使用服务即视为同意修订内容。


已查阅