美叶研学
美叶研学
最新主题
美叶研学美叶研学

2026 启航,以原理、方法、规范为基,构建一套面向未来、可持续升级的知识体系

美叶 © 2026京ICP备18053775号-2    京公网安备 11010502047597号
1. 流动性的历史:从过去学到的东西2. 光谱偏移3. 基础形状4. 有意为之的动效5. 在变化中拥抱柔软6. 设计师作为制图师
规范指南

为 Gemini 应用绘制插画体系

2026年6月15日
本文由研学小组研学小组分享,Ta已累计分享 93 篇文章查看全部

动态线索如何帮助用户发现、学习并掌握我们不断进化的 AI 助手功能

要如何在一款“永远在变化”的工具里建立信任?我们的 AI 助手 Gemini 持续学习、不断适应,这意味着那些传统的设计方法(多数是线性的、可预测的、以控制为核心)必须暂时退场。

设计团队迎着挑战,像绘制新大陆地图那样去勾勒一片全新的数字世界:如何弥合用户对 AI 的概念鸿沟,尤其是让人理解 Gemini 如何“简化信息、扩展想法”?又如何邀请用户去探索、去尝试、去搜索,从而在一件不断变化的工具上建立使用信心?这些问题背后有一组清晰的目标在牵引:让 Gemini 直觉、沉浸、亲近、令人向往——并且最重要的是,值得信赖。

Gemini 的“闪光”图标也许是品牌里最常见的视觉元素,但在产品的插画系统中,还有许多同样关键的组成值得被看见。在这次深度拆解里,插画体系背后的设计师将掀开幕布,展示渐变、响应式容器与有意为之的动效如何无缝协作,在 Gemini 的体验里同时营造出魔法感、清晰度与熟悉感。


1. 流动性的历史:从过去学到的东西

针对不同使用场景,团队探索了多种“光的密度”变化


在未知的设计疆域里探索,并不是新鲜事。想想设计师 Susan Kare——她为最初的 Macintosh 界面奠基。她用朴素的视觉隐喻,把抽象的数字过程变成新手也能一眼理解的东西:垃圾桶、画笔、带笑脸的电脑。那些图标不是简单的像素堆叠,而是连接“人类理解”与“机器逻辑”的桥梁。Gemini 也面临类似挑战:如何更可及、更可见,并且化解用户可能产生的担忧?那么,Gemini 版的“微笑电脑脸”会是什么?

设计团队最终选择了“渐变”。它能温和地把用户引入与 Gemini 协作的新世界。这是一种无定形、可适配的方式,和过去那些“静态”的数字助手(很多人还记得微软的 Clippy 小回形针)很不一样,但它同样能唤起“可被发现”的感觉。渐变表达的更多是能量而不是“物体性”:Kare 的插画里,垃圾桶是一件具体的物;渐变更像一种氛围。但正是这种氛围,为 Gemini 注入了精神气质与方向感。

团队探索了用简洁的序列来引导用户激活 Gemini,例如长按电源键,或从屏幕角落滑动唤起


2. 光谱偏移

渐变是 Gemini 视觉叙事的核心:它像“上下文搭建器”一样,带着用户穿过产品体验的各个阶段。为了表达能量的传递与方向性的动量,渐变往往在前端呈现锐利、几近不透明的“领头边缘”,在尾端逐渐扩散、变轻,像一枚清晰的视觉指针,把用户注意力指向最重要的地方。

为了让系统像“活着”一样,设计师希望把 Gemini 主动思考与综合信息的过程可视化——让 AI 助手更具人格化,而不是显得高不可攀、难以理解。

在语音转写时,会使用“聚拢”与“扩散”两种渐变形态


带方向性的渐变暗示“人类输入”,捕捉能量从用户流向 Gemini 的过程


3. 基础形状

Gemini 的视觉语言既要建立自身身份,又要能融入 Google 既有的审美体系。设计团队把灵感回溯到公司熟悉的 Logo,聚焦在最基础的形状——圆。这个选择并非偶然:圆形往往传递简洁、和谐与舒适感。甚至 Gemini 自身的 Logo,也是在四个相邻圆形的负形空间中精心构建出来的。

为了表达 Gemini 的“思考状态”,我们探索了多种基础形状,并大量借鉴 Google 的设计基因。团队尝试了标志性的四色小圆点——它是品牌圆润、乐观语言的象征;也尝试了多种在 Material 体系中与语音、以及 Android 系统 UI 历史关联紧密的形状。借助这些既有元素,新框架得以扎根在熟悉的历史里,同时再把它们推进为更动态、更流动的 AI 智能表达。

四色圆点为 Gemini 圆润、乐观的视觉语言提供了参照坐标


Material 的形状被进一步柔化与虚化,以呈现一种空灵感


Pro 会员文章
开通美叶 Pro 会员,即可阅读此篇文章的全部内容,同时可阅读全站 Pro 会员文章
开通美叶 Pro
本文原创作者是 Google Design,文章转自:https://design.google/library/gemini-ai-visual-design

有 0 人收藏了本文

Material3设计规范:轮播(Carousel)
规范指南
Material3设计规范:轮播(Carousel)
2026/6/13会员阅读
Apple HIG:页面控制(Page controls)
规范指南
Apple HIG:页面控制(Page controls)
2026/6/11会员阅读
Apple HIG:提醒(Alerts)
规范指南
Apple HIG:提醒(Alerts)
2026/6/9会员阅读
Apple HIG:操作表单(Action sheets)
规范指南
Apple HIG:操作表单(Action sheets)
2026/6/8会员阅读
Apple HIG:进度指示符(Progress indicators)
规范指南
Apple HIG:进度指示符(Progress indicators)
2026/6/5会员阅读
Material3设计规范:开关(Switch)
控件规范指南
Material3设计规范:开关(Switch)
2026/6/5会员阅读
Apple HIG:材质(Materials)
规范指南
Apple HIG:材质(Materials)
2026/6/2会员阅读
Material3设计规范:标签页(Tabs)
控件规范指南
Material3设计规范:标签页(Tabs)
2026/6/1会员阅读