亲爱的小伙伴如有帮助请订阅专栏跟着老师每课一练系统学习AI产品经理课程《AI产品经理入门实战》https://edu.csdn.net/course/detail/41126《Axure原型设计精品课》https://edu.csdn.net/course/detail/40420前两天跟一个做AI产品的朋友聊天他说团队做了个智能问答助手功能都实现了但用户反馈找不到入口、不知道该怎么用、看着乱。他挺郁闷模型效果挺好的怎么用户就是不买账我问他原型设计的时候有没有想过格式塔原理。他愣了一下那是UI设计师该考虑的吧这就是问题所在。很多AI产品经理觉得我把需求写清楚、功能设计好就行了界面好不好看是设计师的事。但事实上用户对产品的第一感知来自界面而界面好不好用底层逻辑就是格式塔原理。这篇文章我们引入格式塔原理也是为了增加AI产品经理的使用技能请往下耐心阅读。一、先搞清楚格式塔原理到底在说什么格式塔原理也叫完形心理学核心就一句话人看东西时大脑会自动把零散的信息组织成整体而不是一个一个像素去读。比如你看到三个点排成三角形你不会觉得这是三个独立的点而是直接感知到这是一个三角形。这就是格式塔——整体大于部分之和。这个原理在设计里之所以重要是因为它解释了用户是怎么看界面的。用户不会从左上角开始逐行扫描你的页面而是靠大脑自动分组、补全、简化几秒钟内形成对页面的整体认知。所以AI产品经理做设计的时候如果能顺着这种认知习惯来排布信息用户就会觉得一眼能看懂。反过来如果违背了这些规律用户就会觉得乱、找不到、不知道点哪。二、页面布局用接近性和共同区域告诉用户什么是一组的格式塔里的接近性原则说的是距离近的元素会被看成一组。共同区域原则说的是同一背景或框内的元素会被视为一组。这两个原则在页面布局里怎么用举个例子你做一个AI智能客服的首页。页面上有这几个东西搜索框、热门问题、历史记录、客服入口。如果你把它们均匀地铺在页面上用户第一眼是懵的——不知道哪些是相关的。正确的做法是搜索框和热门问题放在一起因为它们都属于发起对话这个动作历史记录单独放一个区域用卡片或色块框起来跟上面的内容拉开距离客服入口放在底部或侧边作为兜底选项不跟主要内容混在一起。这样用户扫一眼就知道上面那块是问问题的中间那块是看历史的下面那块是找人工的。大脑自动完成了分组不需要用户思考。AI产品尤其要注意这一点因为AI功能往往比较虚——用户不知道能干什么。布局上的清晰分组能帮用户快速建立认知。三、页面分割用相似性和闭合性划分模块边界相似性原则说的是颜色、形状、大小相似的元素会被归为一类。闭合性原则说的是大脑会自动补全不完整的图形。这两个原则在页面分割里特别好用。比如你做一个AI写作助手页面上有三个功能模块文章润色、文案生成、摘要提取。你怎么让用户一眼知道这是三个独立的功能用相同的卡片样式相似性用户一看就知道它们是同一层级的功能卡片之间留出间距接近性的反面——距离远的被认为不相关用户自然知道它们是分开的卡片只露出部分内容闭合性比如标题下面只露一行描述用户会下意识觉得点进去还有更多同时也能感知到卡片的边界在哪里。反过来如果三个模块用了三种完全不同的样式用户会困惑它们是什么关系哪个更重要是不是有什么特殊含义AI产品的功能模块往往比较多用相似性和闭合性做好分割能让页面看起来清爽用户也不容易迷失。四、交互按钮用图形与背景突出核心操作图形与背景原则说的是人会把视觉焦点放在图形上而把其余部分当成背景。这个原则在按钮设计上太重要了。AI产品里最常见的错误就是所有按钮长得差不多用户不知道该点哪个。比如一个AI对话页面底部有这几个按钮发送、清空对话、导出记录、设置。如果它们都是同样的灰色边框按钮用户第一反应是懵的——哪个是主操作正确的做法是发送按钮用实心填充品牌色让它成为图形从背景里跳出来其他按钮用描边或纯文字样式让它们退到背景里清空对话这种危险操作可以用红色文字但不加填充既醒目又不抢主按钮的风头。这样用户不需要思考手指自然就会往那个最醒目的按钮上点。AI产品里还有一个特殊场景模型正在生成内容时怎么让用户知道现在别操作可以用遮罩层把整个对话区域变成背景只保留一个加载动画作为图形用户自然就知道现在要等。五、重点区域用简单性降低认知负担简单性原则说的是人更偏好简单、稳定、对称的形式。大脑会自动把复杂的视觉信息简化成容易理解的结构。这个原则在呈现AI输出结果时尤其重要。AI生成的内容往往比较长、比较杂。比如你做一个AI会议纪要工具模型输出了一大段文字里面包含会议结论、待办事项、关键决策。如果你直接把这段文字丢给用户用户会觉得信息量太大看不下去。正确的做法是用标题列表的结构呈现把长文本拆成几个清晰的模块关键信息加粗或高亮让用户扫一眼就能抓住重点待办事项用复选框样式用户一看就知道这是要做的去掉多余的装饰和干扰元素让内容本身成为焦点。简单性原则的核心就是别让用户费劲。AI产品本身就有认知门槛界面越简洁用户越愿意用。六、流程展示用连续性和共同命运引导用户走完流程连续性原则说的是人眼会顺着线条、路径继续看下去。共同命运原则说的是一起运动的元素会被认为相关。这两个原则在流程展示里非常好用。比如你做一个AI智能体Agent产品用户需要完成选择任务→配置参数→确认执行→查看结果四步。你怎么让用户知道这是一个连续的流程而且知道自己在哪一步用进度条或步骤条把四步连起来连续性用户一眼就能看到整体流程和当前位置当前步骤高亮已完成步骤打勾未完成步骤置灰形成清晰的视觉路径步骤切换时用过渡动画共同命运让用户感知到我从这一步到了那一步而不是页面突然跳变每一步里的相关元素同时出现或同时消失用户会觉得它们属于同一个阶段。AI产品的流程往往比传统软件复杂因为涉及模型调用、结果生成、人工审核等多个环节。用连续性和共同命运把流程串起来用户才不会觉得断片。七、补充一点AI产品里容易被忽略的不确定性呈现前面聊的都是通用设计原则但AI产品有一个特殊问题输出结果是不确定的。同样的输入模型可能给出不同的回答有时候模型会答不上来有时候置信度很低。这些不确定状态怎么用格式塔原理呈现加载状态用骨架屏Skeleton代替转圈骨架屏的形状和最终内容一致用户能预判这里会出来什么闭合性相似性置信度低用浅色背景或虚线边框把这条回答框起来跟其他高置信度回答区分开共同区域模型拒答用一个独立的提示卡片呈现跟正常回答拉开距离接近性的反面用户一看就知道这条不一样用户纠错反馈点赞/点踩按钮跟回答放在同一行、距离很近接近性用户自然知道这些按钮是针对这条回答的。这些细节看起来小但直接决定了用户信不信你的AI产品。八、总结格式塔原理不是UI设计师的专属工具AI产品经理同样得懂。因为产品设计的本质就是帮用户降低认知负担而格式塔原理恰恰是在讲人脑是怎么组织视觉信息的。具体到AI产品里页面布局用接近性和共同区域告诉用户什么是一组的页面分割用相似性和闭合性划清模块边界交互按钮用图形与背景突出核心操作重点区域用简单性降低认知负担流程展示用连续性和共同命运引导用户走完流程不确定状态用组合原则让用户感知到AI的特殊性。掌握这些你的产品设计真的会更懂用户。不是靠猜而是靠对人脑认知规律的理解。其他专栏直通车《Axure疑难杂症专题》https://blog.csdn.net/benleiqiang/category_12961170.html《Axure应用交互设计》https://blog.csdn.net/benleiqiang/category_12803093.html如有其他相关问题欢迎私信沟通关注结构化知识课堂-CSDN博客明天的产品大咖就是你创作不易麻烦关注一下点赞收藏感谢大家
亲爱的小伙伴如有帮助请订阅专栏跟着老师每课一练系统学习AI产品经理课程《AI产品经理入门实战》https://edu.csdn.net/course/detail/41126《Axure原型设计精品课》https://edu.csdn.net/course/detail/40420前两天跟一个做AI产品的朋友聊天他说团队做了个智能问答助手功能都实现了但用户反馈找不到入口、不知道该怎么用、看着乱。他挺郁闷模型效果挺好的怎么用户就是不买账我问他原型设计的时候有没有想过格式塔原理。他愣了一下那是UI设计师该考虑的吧这就是问题所在。很多AI产品经理觉得我把需求写清楚、功能设计好就行了界面好不好看是设计师的事。但事实上用户对产品的第一感知来自界面而界面好不好用底层逻辑就是格式塔原理。这篇文章我们引入格式塔原理也是为了增加AI产品经理的使用技能请往下耐心阅读。一、先搞清楚格式塔原理到底在说什么格式塔原理也叫完形心理学核心就一句话人看东西时大脑会自动把零散的信息组织成整体而不是一个一个像素去读。比如你看到三个点排成三角形你不会觉得这是三个独立的点而是直接感知到这是一个三角形。这就是格式塔——整体大于部分之和。这个原理在设计里之所以重要是因为它解释了用户是怎么看界面的。用户不会从左上角开始逐行扫描你的页面而是靠大脑自动分组、补全、简化几秒钟内形成对页面的整体认知。所以AI产品经理做设计的时候如果能顺着这种认知习惯来排布信息用户就会觉得一眼能看懂。反过来如果违背了这些规律用户就会觉得乱、找不到、不知道点哪。二、页面布局用接近性和共同区域告诉用户什么是一组的格式塔里的接近性原则说的是距离近的元素会被看成一组。共同区域原则说的是同一背景或框内的元素会被视为一组。这两个原则在页面布局里怎么用举个例子你做一个AI智能客服的首页。页面上有这几个东西搜索框、热门问题、历史记录、客服入口。如果你把它们均匀地铺在页面上用户第一眼是懵的——不知道哪些是相关的。正确的做法是搜索框和热门问题放在一起因为它们都属于发起对话这个动作历史记录单独放一个区域用卡片或色块框起来跟上面的内容拉开距离客服入口放在底部或侧边作为兜底选项不跟主要内容混在一起。这样用户扫一眼就知道上面那块是问问题的中间那块是看历史的下面那块是找人工的。大脑自动完成了分组不需要用户思考。AI产品尤其要注意这一点因为AI功能往往比较虚——用户不知道能干什么。布局上的清晰分组能帮用户快速建立认知。三、页面分割用相似性和闭合性划分模块边界相似性原则说的是颜色、形状、大小相似的元素会被归为一类。闭合性原则说的是大脑会自动补全不完整的图形。这两个原则在页面分割里特别好用。比如你做一个AI写作助手页面上有三个功能模块文章润色、文案生成、摘要提取。你怎么让用户一眼知道这是三个独立的功能用相同的卡片样式相似性用户一看就知道它们是同一层级的功能卡片之间留出间距接近性的反面——距离远的被认为不相关用户自然知道它们是分开的卡片只露出部分内容闭合性比如标题下面只露一行描述用户会下意识觉得点进去还有更多同时也能感知到卡片的边界在哪里。反过来如果三个模块用了三种完全不同的样式用户会困惑它们是什么关系哪个更重要是不是有什么特殊含义AI产品的功能模块往往比较多用相似性和闭合性做好分割能让页面看起来清爽用户也不容易迷失。四、交互按钮用图形与背景突出核心操作图形与背景原则说的是人会把视觉焦点放在图形上而把其余部分当成背景。这个原则在按钮设计上太重要了。AI产品里最常见的错误就是所有按钮长得差不多用户不知道该点哪个。比如一个AI对话页面底部有这几个按钮发送、清空对话、导出记录、设置。如果它们都是同样的灰色边框按钮用户第一反应是懵的——哪个是主操作正确的做法是发送按钮用实心填充品牌色让它成为图形从背景里跳出来其他按钮用描边或纯文字样式让它们退到背景里清空对话这种危险操作可以用红色文字但不加填充既醒目又不抢主按钮的风头。这样用户不需要思考手指自然就会往那个最醒目的按钮上点。AI产品里还有一个特殊场景模型正在生成内容时怎么让用户知道现在别操作可以用遮罩层把整个对话区域变成背景只保留一个加载动画作为图形用户自然就知道现在要等。五、重点区域用简单性降低认知负担简单性原则说的是人更偏好简单、稳定、对称的形式。大脑会自动把复杂的视觉信息简化成容易理解的结构。这个原则在呈现AI输出结果时尤其重要。AI生成的内容往往比较长、比较杂。比如你做一个AI会议纪要工具模型输出了一大段文字里面包含会议结论、待办事项、关键决策。如果你直接把这段文字丢给用户用户会觉得信息量太大看不下去。正确的做法是用标题列表的结构呈现把长文本拆成几个清晰的模块关键信息加粗或高亮让用户扫一眼就能抓住重点待办事项用复选框样式用户一看就知道这是要做的去掉多余的装饰和干扰元素让内容本身成为焦点。简单性原则的核心就是别让用户费劲。AI产品本身就有认知门槛界面越简洁用户越愿意用。六、流程展示用连续性和共同命运引导用户走完流程连续性原则说的是人眼会顺着线条、路径继续看下去。共同命运原则说的是一起运动的元素会被认为相关。这两个原则在流程展示里非常好用。比如你做一个AI智能体Agent产品用户需要完成选择任务→配置参数→确认执行→查看结果四步。你怎么让用户知道这是一个连续的流程而且知道自己在哪一步用进度条或步骤条把四步连起来连续性用户一眼就能看到整体流程和当前位置当前步骤高亮已完成步骤打勾未完成步骤置灰形成清晰的视觉路径步骤切换时用过渡动画共同命运让用户感知到我从这一步到了那一步而不是页面突然跳变每一步里的相关元素同时出现或同时消失用户会觉得它们属于同一个阶段。AI产品的流程往往比传统软件复杂因为涉及模型调用、结果生成、人工审核等多个环节。用连续性和共同命运把流程串起来用户才不会觉得断片。七、补充一点AI产品里容易被忽略的不确定性呈现前面聊的都是通用设计原则但AI产品有一个特殊问题输出结果是不确定的。同样的输入模型可能给出不同的回答有时候模型会答不上来有时候置信度很低。这些不确定状态怎么用格式塔原理呈现加载状态用骨架屏Skeleton代替转圈骨架屏的形状和最终内容一致用户能预判这里会出来什么闭合性相似性置信度低用浅色背景或虚线边框把这条回答框起来跟其他高置信度回答区分开共同区域模型拒答用一个独立的提示卡片呈现跟正常回答拉开距离接近性的反面用户一看就知道这条不一样用户纠错反馈点赞/点踩按钮跟回答放在同一行、距离很近接近性用户自然知道这些按钮是针对这条回答的。这些细节看起来小但直接决定了用户信不信你的AI产品。八、总结格式塔原理不是UI设计师的专属工具AI产品经理同样得懂。因为产品设计的本质就是帮用户降低认知负担而格式塔原理恰恰是在讲人脑是怎么组织视觉信息的。具体到AI产品里页面布局用接近性和共同区域告诉用户什么是一组的页面分割用相似性和闭合性划清模块边界交互按钮用图形与背景突出核心操作重点区域用简单性降低认知负担流程展示用连续性和共同命运引导用户走完流程不确定状态用组合原则让用户感知到AI的特殊性。掌握这些你的产品设计真的会更懂用户。不是靠猜而是靠对人脑认知规律的理解。其他专栏直通车《Axure疑难杂症专题》https://blog.csdn.net/benleiqiang/category_12961170.html《Axure应用交互设计》https://blog.csdn.net/benleiqiang/category_12803093.html如有其他相关问题欢迎私信沟通关注结构化知识课堂-CSDN博客明天的产品大咖就是你创作不易麻烦关注一下点赞收藏感谢大家
