这是 Ali Grids 发布在X 上的一段工具栏交互设计方案。第一眼看上去很简单,但越看越觉得他处理得很聪明。这个方案实现了在同一块有限空间里,让两种完全不同的任务模式自然切换。

要知道很多设计师在做工具栏设计时,很容易陷入一个误区,那就是会把所有功能都平铺出来,希望“看起来功能很多、很全”。但真实使用中,用户并不是同时在做所有事。用户通常只处在某一种任务状态里,比如我现在要调音乐相关功能(剪辑、计时、录音等)或我现在要输入一句话,让 AI 帮我处理内容
这两类行为的操作方式完全不同,前者偏“点击型操作”,后者偏“输入型操作”。如果强行把这两类能力并排塞在一起,结果往往是工具栏变长、信息密度变高、用户注意力被分散、输入区和按钮区彼此抢空间。
Ali Grids 这套方案的亮点在于,它没有试图“兼容展示”,而是做了更合理的判断,既然任务模式不同,那就让界面形态跟着任务模式切换。这是一种很成熟的交互思路。
这套设计里最值得夸的地方之一,就是左侧两个按钮和右侧按钮的视觉关系。左侧两个按钮被做成一个独立区域,明显区别于右侧工具按钮。
这一步非常关键,因为它在视觉上提前告诉用户,左边这两个不是普通工具,它们更像“模式开关”或“上下文入口”,右边内容会受左边选择影响。也就是说,用户不需要先点一遍才知道规则,光看结构就能猜到一部分逻辑。
这就是优秀界面的一个特征:规则尽量通过布局表达,而不是靠说明文字补救。
很多设计会把“模式切换”和“普通功能按钮”做成一模一样的图标按钮,结果用户会误以为它们是同一层级的操作。点击后界面突然大变,心理预期会断裂。而这个方案通过“左侧独立分组 + 不同样式处理”,在操作前就建立了认知缓冲。这会让切换行为显得更自然,也更可控。
很多类似场景里,设计师容易做成工具图标还在,旁边再塞一个输入框,或者在原有工具栏上方弹出输入层。这样做的问题是,界面会变得拥挤,而且用户不清楚“我现在到底在用哪一套系统”。
Ali Grids 这个方案用了更干净的处理方式,切换到 AI 模式后,直接隐藏右侧图标,替换为输入框。这个动作看似简单,但它有几个很强的优点:
工具图标是高识别、高对比的元素,输入框里的占位文字也是高权重元素。两者同时出现时,会争抢注意力。现在做成替换关系后,焦点就非常明确。
当右侧内容整体变化时,用户会明显意识到:“我已经进入另一个操作模式了。”这比只改一个小状态更清晰。
输入是一种需要空间的行为。你给它更长的输入区域,本质上是在尊重这个任务的操作需求,而不是让用户在狭窄区域里勉强输入。这也是这套设计最让我喜欢的一点,它不是在做‘形式变化’,而是在做‘资源重新分配’。
如果从信息架构角度看,这个方案其实是在同一个组件内完成“模式切换”。它没有跳页、没有弹窗、没有二级面板,也没有让用户离开当前操作流。整个变化都发生在同一个圆角条形容器里。这会带来一个很重要的体验收益:上下文连续。
用户会感觉自己一直在同一个操作区域内,只是这个区域根据目标发生了变化。这种连续性会让界面显得“聪明”,也会降低切换带来的打断感。尤其在创作类、编辑类、音视频类产品里,这一点非常重要。因为用户常常会在“快速调整”和“输入指令”之间反复切换。如果每次切换都需要:
用户很快就会感到疲惫,而这个方案通过局部替换,把切换成本压得很低,这是典型的高质量微交互思路。
从画面风格上看,这套方案整体比较轻,灰白底、黑色图标、圆角容器,视觉非常收敛。这种处理不是“寡淡”,反而恰好服务了交互逻辑。因为这个组件真正的重点不是视觉装饰,而是模式切换是否清晰、状态变化是否可感知、输入与工具是否不冲突。
当视觉风格足够克制时,用户更容易注意到结构变化本身。比如左侧选中状态变化,右侧从图标组变成输入框,输入框右侧发送按钮出现,这类交互层级的变化,才是这个方案的主角。
很多时候,设计稿之所以“看起来不高级”,并不是因为颜色不够炫,而是因为视觉元素过多,导致结构信息被淹没。Ali Grids 这个方案恰恰反过来:用低噪音视觉,让结构与行为成为主信息。这很值得做工具类界面的设计师学习。
Ali Grids 这套工具栏方案之所以打动人,不是因为它做了多复杂的动画,也不是因为用了多新奇的样式。它真正好的地方在于,它把三个问题同时处理好了
这种方案很适合成为设计师的“参考样本”,它至少给我们三条启发
这类设计稿表面是 UI 方案,底层其实是交互建模能力。而这正是很多工具型产品最缺、也最难做好的部分。
有0人收藏了本文