字节扣子的 UI 编辑器设计真的比特福

[bojue]

web 编辑器多多少少使用了很多款了，

包括 H5 ，小程序，大屏，IDC 业务，低代码，落地页，在线邮件编辑器，

扣子的 UI 编辑器我感觉最好看，

很多交互也是打破了一些常规思维，包括调试交互，展开收起的按钮设计，页面路径很容易固定思维的设计在这个产品上真的很细节。

最近看了蔡澜一段文字：讲得是日本产品很注重包装，产品可以效果不明显，但是一定不能让用户方案，包装是最容易的一个环节。

好的 UI 设计真的对产品提分不少。

上面的一句话修正蔡澜一段文字：讲得是日本产品很注重包装，产品可以效果不明显，但是一定不能让用户反感，包装是最容易的一个环节。

每个人都是表达自己的主管的"客观"偏见。

对于扣子UI编辑器这个产品模块来说，前端交互是相对很重的环节。

从UI设计和交互这个评判维度上，作为一个普通用户我非常喜欢，至少长在我的审美点上，乐意测试使用并分享给别人。

没有涉及到评判这个产品成功与否。

为什么特别关注编辑器UI和交互

1. 一直从事相关的开发工作，下面是个人从2018年开始的编辑列表 个人开发编辑器历史列表

2. 前两年有人联系客制IDC编辑器工作，类似 [Web Page 产品Prewview] 效果，因为UI设计沿用这个版本的UI效果，客户的甲方演示效果不出彩错过了很好的机会。 UI不是产品的决定性因素，但是至少这个机会是。

3. 最近个人在开发一款基于Web的H5编辑器，没事也查看一些交互设计素材，包括站酷，pinterest的一些编辑器设计作为参考，只有这个编辑器给人眼前一亮。

[murmur]

这标题看的我直反胃

dify 已经很好看了

你还能怎么样

好看的一个问题就是功能有限，因为要保证边距，间距

所以你看强大的系统 ui 都不咋地，包括 ps ，cad ，一众 3d 设计、视频编辑、科学仿真的软件

想要好看第一点必然是阉割功能，至少能藏就藏，少了才能清爽

[bojue]

@murmur

1. 无论是兴趣还是工作，需要接触到 web 编辑器这类产品，和其他好看的产品没有关系
2. 不是任何事情都可以是“少即多”，相同的功能扣子的编辑器 Ui 设计和交互是最好看到

[katwalk]

比特福翻译得真好，楼主再翻译一下 Idiot

[mauve]

@katwalk 意迪厄特 🤣

[dcatfly]

楼主可以贴个对比图吗？没有 get 到好看在哪里

[zogwosh]

trae 的 ui 也比 cursor vscode 好

[bojue]

@dcatfly 可能主要是和自己比，我测试过的编辑器大部分都偏 toB 的交互方式。

一成不变的 UI 布局和交互方式，包括：
1. h5 编辑器：稿定，易企秀，兔展，
2. 大屏：DataV ，goView
3. 原型：墨刀
4. 低代码：百度 Amis ，阿里低代码引擎，力软
5. 表单：金数据

大部分类似这样的交互：


扣子的交互一看就眼前一亮：



在给你看下之前照着国外竞品的一个编辑器样式：



哈哈

最后看个扣子缓解一下心情：

[murmur]

@bojue 我的理解是，如果放弃兼容性，就可以做很炫酷的功能，我们现在的 OA ，也有低代码，但是 IE11 都可以保证基本功能

如果你的目标不是最近两年的浏览器版本，很多炫酷的特效、布局、美术设计，都会成为 bug

所以 tob 系统我还是认为保守点保功能比较好（或者是这种专业系统）

什么系统可以不要功能只要界面，最典型的就三个：记账 待办 笔记

[murmur]

字节这个是什么，拖拉拽开发么，我们的 OA 都有六十多个组件，字节这个真不够用的

[NotLongNil]

@murmur #9 打住吧，人家只是在夸字节的设计好看，楼主根据就不在意什么功能多少和兼不兼容。你说它功能少，兼容性低，也证明不了它设计不好看

[NotLongNil]

字节的设计一直很在线，国内这些大厂肯在设计上下功夫的，也就只有字节了

[bojue]

@NotLongNil #11 哈哈，XD 懂行呀，产品设计部分真的是独一档

[daolanfler]

tiktok 网页版设计不错，但是抖音网页版就不太耐看

[murmur]

@NotLongNil 你说的对，但是 to b 系列的应用，比如飞书，lark ，似乎用户量并不如竞品

问题出在哪里呢，至少按楼主说的，他一直在讲产品，设计，交互，所以界面的好看并不是决定性条件吧。

当然，美丑都是个人观点，我不喜欢花架子，只不过楼主这标题一下就激起了我战斗的欲望

[murmur]

给楼主道个歉啊，本来不想抬杠的，看你标题这用词我真是没憋住。

[littlewing]

扣子 是啥
比特福 是啥

[prosgtsr]

@littlewing 我想了半天，是 beautiful
我也很反感这么打

[RyougiShiki]

1 楼，UI 是重要的一部分，复杂软件 UI 不好因为他们精力有限、功能方面优先级高、当随着时间发展或有竞品出现时 UI 也会发生改变，PS 在 sketch 和 Affinity 出线之后版本更新明显会快一些，我记得有一个版本开始多了鼠标悬浮在工具上的简易动图教程就更易用，金蝶这种管理后台类软件近些年 UI 也提升了不少。

美丑其实不是主观的，实际对称、视觉重量分布、色彩都会影响到界面，职业设计师做出来界面就好看。相同的功能下，按用户心理、视觉流向、使用频率设计的交互会更加舒心。举一个例子，jetbrains 的软件在一年前进行过一次 UI 改版，相同的功能下更改了常用功能的图标位置把常用功能提前，隐藏不常用元素，交互略微改动，就比以前好用了一点。程序员想学习这方面可以看站酷、追波、找本 UI 书练下画界面，看 about face 之类的书。慢慢就会理解苹果切个圆角为什么花时间研究和小米为什么花一百多万画了个 logo 。

夸一个产品 UI 好看和产品界面对产品重要不重要没有逻辑关系。