从好奇开始的 UI 探索
前几天出于好奇，我试用了一下前几个月 VSCode 发布的现代化 UI，发现 VSCode 又对新 UI 做了很多改进，确实刷新了我的认知。
如果你打开 VSCode 的实验性 Modern UI，会发现一些微小却很有情绪价值的东西。
之前 Modern UI 和旧 UI 最大的区别就是：侧边栏和底部面板会变成带圆角和间隙的悬浮卡片样式，整体风格向新版 Agents 窗口 看齐，视觉上更现代。
旧 UI 的模样
比如左上角的 file explorer 就是一个大的方形内嵌图标，而且界面各部分分割线很细，彼此之间几乎没有空间。
新 UI 的变化
而新 UI 是这样：
之前的方形变成了更柔和的圆角，界面各部分之间也有了明显的间隔。
一对比，确实感觉旧 UI 有些来自工程师的古板。
连体标签页：消除割裂感
除此之外，VSCode 还引入了一个新的标签页形态——连体标签页。
传统 Classic 标签是什么样子？每一个文件标签都是独立的圆角药丸块，标签栏和下方代码编辑区域之间有一条清晰的分割横线。视觉上，上面是一排按钮，下面才是编辑器，两块区域泾渭分明。
而连体标签的设计目标，就是消掉这道割裂感。
标签栏不再是悬浮在编辑器上方的独立框框。标签与下方代码编辑画布连成一块完整的视觉表面，看上去整个编辑器分组是一张连续的面板。标签仿佛就是这块大面板最顶部的一部分，而不是贴上去的一排控件。
微软希望重塑编辑器整体观感，走向更一体化、更简洁的现代界面风格。
老药丸标签是早年延续下来的 UI 范式，上下分割层次感很强，但割裂感同样明显。包括 IDEA、Zed 在内的很多其他编辑器，这块设计也大多偏传统。
在新的设计语言里，编辑器分组应该是一个完整容器，顶部标签就是容器的上沿。
这样设计还有一个好处：当存在多行标签时，它们是无缝衔接的，整体依旧保持一块完整面板的观感，而不是好几排互相隔开的独立标签。
视觉语言的一致性
其实，新版 Agents 聊天窗口同样使用连体式的头部。编辑器、AI 会话窗口保持同一套视觉语言，整个 IDE 界面风格统一。
如下是聊天的 tab：
侧边栏的 tab：
使用感受
有意思的是，这次更新依然保留了经典药丸标签模式给老用户选择。连体标签依旧属于 Modern UI 下面的实验性功能。
实际使用以后，我发现自己是越来越喜欢新 UI 设计 的风格了。我从来没觉得代码是一个艺术品，但这个 UI 设计给我的感觉就像是一个艺术品一样。
配合体验：VS Code 又整花活！Agent 聊天窗口支持自定义背景了
这篇文章最初发布在云栈社区，记录一下我对 VSCode 新 UI 的直观体验和思考。 | 
发表于 昨天 20:15
|
查看: 1|
回复: 0
