夜雨聆风
【APP】AI助手设计灵感分享
严选好文，学设计，少走弯路
作者：网络，仅供交流学习
案例
01
注：设计作品，仅供学习交流，设计灵感，不可作为商用，版权归原作者所有！
哈喽朋友们！最近收到了好些小伙伴的私信，说自家的产品在移动端加了AI新功能，但页面设计总感觉“哪里不太对”，视觉效果不够和谐，体验上差点意思。
你们的心声我听到啦！这不就立刻安排上？这一期，我决定化身“有求必应”设计小助手，专门针对【移动端AI助手功能】的界面，出一系列视觉优化效果图！
 |
 |
无论是对话交互、智能推荐，还是视觉识别、语音助手……任何让你觉得“有点秃然”的排版、配色或动效，我们都一起来琢磨打磨。目标很明确：让AI不仅聪明好用，更要看得顺眼、点得顺手、用得流畅。
 |
 |
设计从来不是单打独斗，灵感往往来自碰撞。所以这次，我也期待看到大家的界面截图或设计思路，我们可以一起讨论、一起优化。放心，不藏私，不保留，所有思考过程和视觉方案都会分享给大家。
 |
 |
功能要强大，体验要温柔。咱们一起，把那个“不太协调”的角落，变成产品里最亮的闪光点✨
 |
 |
准备好了吗？我们评论区见，或者私信我你的需求！一起加油，让设计为AI赋能～
注：作品仅供学习交流，不可作为商用，版权归原作者所有！
设计理念
02
怎么把一个AI聊天页面设计得好看又好用？
一、画面怎么摆？别死板！
别把对话弄得像记账一样一条一条排下来，太无聊。
-
搞个“C位”焦点：可以把AI想象成一个发光的“大脑”，在屏幕中间。你的问题像小星星一样飞过去，它的回答像光芒一样散开，一看就很智能。
-
让气泡“飘”起来：对话泡泡可以大小不一、高低错落地放，重要的回答就做大卡片，随口聊的就用小气泡。这样画面有主有次，不死板。
-
背景要“会呼吸”：背景别用一张死图。可以有些很淡的颜色渐变，或者微小的光点。当AI思考时，光点慢慢聚拢；回答时，像水波纹一样散开，感觉页面是“活”的。
二、颜色怎么配？有情绪！
颜色不只是为了好看，还能帮你感受对话的“温度”和“心情”。
-
你VS AI，颜色分开：你说的话，用暖色（比如橙色、黄色），显得积极、有人情味。AI说的话，用冷色（比如蓝色、紫色），显得冷静、靠谱。这样一眼就能分清谁在讲话。
-
颜色跟着“心情”变：AI回答不同内容时，颜色可以有点小变化。
-
认真回答复杂问题：用深蓝色，显得专注。
-
帮你写诗写故事：用紫粉色，显得有创意。
-
跟你随便聊聊：用浅灰色或米色，显得轻松。
三、功能怎么放？别让用户找！
东西摆哪儿，决定了用起来顺不顺手。
-
上头亮身份，下头好操作：
-
屏幕最上面，清楚地告诉用户“我是谁”（比如“CueMe”、“通义”）。
-
屏幕最下面，固定放着输入框和最重要的几个功能按钮（比如写作、翻译），这是我们大拇指最容易点到的地方，不用抬手去够。
-
中间是“主舞台”，精彩在这里：
-
屏幕最核心的中间大片区域，就用来展示精彩的对话内容。新来的用户，这里可以放些“示例问题”吸引他点击；聊起来之后，这里就是你和AI思想碰撞的舞台。
-
引导要像“贴心提示”：
-
别让用户对着空输入框发呆。用“猜你想问…”、“试试这样问我”或者“点击这里写文案”这类的话，像朋友一样给点小提示，降低使用门槛。
总结一下：
设计一个好的AI页面，就是要把它当成一个有生命的、聪明的伙伴来打扮。画面要动感不死板，颜色要有温度能变通，布局要顺手不费劲。最终目的就是让用户觉得，和它聊天不仅有用，而且是一种舒服、甚至有点愉悦的视觉体验。
视频号
03
注：作品仅供学习交流，不可作为商用，版权归原作者所有！
【学习加群方式】
差不多就写完了...大家觉得有帮助的话，记得点赞，推荐，转发～
