10

AI如何应用到产品视觉设计流程中?来看独角兽团队的实战案例!

 8 months ago
source link: https://www.uisdc.com/aigc-17
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
AI如何应用到产品视觉设计流程中?来看独角兽团队的实战案例!

前言

目前,人工智能技术的发展已经取得了令人瞩目的成就。不论是自然语言处理还是计算机视觉,人工智能都有了显著的进展。就视觉设计师而言,我们不得不承认 AI 通过不断的算法学习与技术更新,其生成的图像着实令人惊叹,但我们也不难发现,当下 AI 绘图还是有很多的局限性,比如生成质量不稳定、缺乏抽象能力等。

那么本文也将延续前文《AIGC 对设计行业的影响与启发》、《AI 在 UX 设计流程中的应用大全》,继续谈一谈 AI 在视觉设计工作中的应用。

AI如何应用到产品视觉设计流程中?来看独角兽团队的实战案例!

一、AI 绘图能代替视觉设计师吗?

在实际使用中我们发现,AI 往往对于具象的需求表现得更好,而对于抽象需求表现得较差。

比如,AI 可能无法稳定地绘制出如下靠左的相机图标,但可以快而稳定地绘制出右边的相机图像,而人工去绘制右边的相机可能至少需要一天,还不一定有 AI 的效果好。

AI如何应用到产品视觉设计流程中?来看独角兽团队的实战案例!

因此作为视觉设计师,AI 绘图充当的依旧是协作伙伴的角色,而实际的产出还是依赖于我们本身的设计判断和审美能力。

但哪怕仅仅只是这点,它能所带来的改变也是无与伦比的。

以往面对大部分的设计需求,设计师首先需要在网上搜寻大量的参考,进行脑暴、制定情绪版、确定设计风格,然后才能开始设计。期间还要与需求方唇枪舌战、来回改稿。而现在我们通过输入指令、图片和相关信息,AI 工具就可以快速生成满足需求的视觉内容,这可以极大地缩减整体设计的时间。

而这种变革与提效,也正是 AI 为我们带来的最大价值。

二、什么 AI 工具更好用?

当前市面有非常多的 AI 绘图软件可供选择,典型如 Midjourney、Stable diffusion、Dall E 等,多是基于大模型通过文生图、图生图的方式得到结果。

其中,Stable diffusion 的学习成本和部署难度不太友好,Dall E 的能力和可控度都相对较弱,Midjourney 算是其中综合能力较强且上手难度较低的选择。

AI如何应用到产品视觉设计流程中?来看独角兽团队的实战案例!

下面我们也将以 Midjourney 为例,来为大家展现 AI 工具在视觉设计需求中的实际使用。

三、如何在产品视觉设计流程中应用 AI?

目前在群核科技的视觉设计团队内部,AI 辅助设计工作已经有一段时间了,从前期需求沟通到设计方向确认、再到设计产出和调整都有对于 AI 工具的应用。

AI如何应用到产品视觉设计流程中?来看独角兽团队的实战案例!

下面我们将从两个实际案例出发,来为大家进行 AI 应用的展示:

案例一、VIP 会员日

Step1 需求沟通

①使用飞书妙计进行会议记录,并使用 ChatGPT 总结需求(示意)

AI如何应用到产品视觉设计流程中?来看独角兽团队的实战案例!

②使用即时 AI/UIzard 生成页面框架,并确定需要由 AI 生成的主画面内容(示意)

AI如何应用到产品视觉设计流程中?来看独角兽团队的实战案例!

Step2 设计方向

①使用 Chatgpt 辅助构思核心创意

②书写中文自然语言,让 ChatGPT 翻译成标准的提示词

输入主画面描述:

画面的中心是一个圆形平台,周围是城市中的高楼大厦,白色背景和白色建筑

得到英文文案:

The center of the picture is a circular platform surrounded by tall buildings in the city, with a white background and white buildings

添加风格,材质以及图像参数设定

风格:艺术 3D,pop mart,,c4d

材质:粘土材料

参数:高品质,8k --s 50 --ar 16:9 --style scenic --niji 5

最终得到完整的提示词文案:

The center of the picture is a circular platform surrounded by tall buildings in the city, with a white background and white buildings,Pop Mart and Cinema 4D,create 3D characters with cartoon-style,best quality,clay material,8k --s 50 --ar 16:9 --style scenic --niji 5

③输入提示词,用 Midjourney 产出相对应的风格图片

AI如何应用到产品视觉设计流程中?来看独角兽团队的实战案例!

Step3 设计素材

①基于情绪版提案,输入初步确定方案的提示词和相关风格图片,产出对应图片素材

主体:画面中心是一个圆形平台,周围是城市中的高楼大厦

场景细节:白色背景和白色建筑,金线装饰着建筑

风格:艺术 3D,pop mart,c4d

材质:粘土材料

参数:高品质,8k--s 50-ar 3:4--niji 5--niji 5The center of the picture is a circular platform surrounded by tall buildings in the city, with a white background and white buildings,Gold lines adorn the building,Pop Mart and Cinema 4D,3D characters,best quality,clay material,8k --s 50 --ar 16:9 --style scenic --niji 5

②多次调试得到满意的初稿,挑选合适方向的画面进行二次调整

③最终选取以下图片为最终素材

Step4 设计产出

①将选定素材进行调色处理、局部调整

②根据画面需要,使用 MJ 生成装饰图形,并在群核星辰素材平台找到适合主题的 IP 形象

③合成画面,加入 UI 界面元素,整体调整并输出最终视觉稿

案例二、认证中心探索

Step1 需求沟通

①使用飞书妙计进行会议记录,并使用 ChatGPT 总结需求

②使用即时 AI/UIzard 生成页面框架,并确定需要由 AI 生成的主画面内容

Step2 设计方向

①找到合适风格和构图的灵感图

Step3 设计素材

①基于情绪版提案,输入初步确定方案的提示词和相关风格图片,产出对应图片素材

主体:魔方颗粒

材质:磨砂玻璃白色丙烯酸材料

背景:黑色背景

风格:透明科技感

参数:8k,-iw 1-v 5-q 2-ar 16:9

Rubik's Cube Particle,frosted glass white acrylic material,white beckground,transparent technology sense,8k,—iw 1 —v 5 —q 2 —ar 16:9

垫图:同上

②多次调试得到满意的初稿,挑选合适方向的画面进行二次调整

Step4 设计产出

①合成画面,加入 UI 界面元素,整体调整并输出最终视觉稿

四、AI 还能为我们带来什么?

AI 工具所能带来的颠覆性变化毋庸置疑,但我们也发现了一个问题,在设计同学利用 AI 工具进行业务产出时,大家的设计风格愈加地不统一,包括每个案例间的共性和差异都是盲盒。

所以我们也藉由 AI 探索小组的契机,去对一段时间内的产出进行了搜集与归类,并将盲盒拆开,沉淀出了 AI 指令库。毕竟业务在设计规范的框架下,设计产物都是指向明确且可被复制的。

而通过 AI 指令库,我们可以快速定位到类似案例,并通过指令准确地生成我们想要的产物。

以上是我们在视觉设计工作中应用 AI 的一些探索,虽然 AI 概念已经从热转冷,但整个行业其实仍处于起步阶段。未来 AI 会怎么发展?我觉得大概有三点:

  1. 能力增强:硬件必然会提升,AI 也将持续提升技术水平,不仅仅是生图的快速和准确,还包括增强学习、迁移学习和自适应学习。
  2. 交互升级:不局限于当前文生图、图生图的方式,语音、视频等自然语言处理技术的发展将使人与 AI 之间的交互更加多变且顺畅。
  3. 门槛降低:随着行业发展和各方入局,未来的使用门槛必定会进一步降低,包括也会随着竞争而使其拥有更准确和定制化的服务和产品。

当然,时代一直在转,不知道什么时候新的变革就会到来,我们裹挟其间,只能不断改变自己以更加适应时代。

保持热爱、积极拥抱,谨此献给仍处一线却依旧迎难而上的每个我们。

欢迎关注作者微信公众号:「群核科技用户体验设计」


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK