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

141 天前
 bojue

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

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

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

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

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

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

3758 次点击
所在节点    分享发现
18 条回复
murmur
141 天前
这标题看的我直反胃

dify 已经很好看了

你还能怎么样

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

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

想要好看第一点必然是阉割功能,至少能藏就藏,少了才能清爽
bojue
141 天前
@murmur

1. 无论是兴趣还是工作,需要接触到 web 编辑器这类产品,和其他好看的产品没有关系
2. 不是任何事情都可以是“少即多”,相同的功能扣子的编辑器 Ui 设计和交互是最好看到
katwalk
141 天前
比特福翻译得真好,楼主再翻译一下 Idiot
mauve
141 天前
@katwalk 意迪厄特 🤣
dcatfly
141 天前
楼主可以贴个对比图吗?没有 get 到好看在哪里
zogwosh
141 天前
trae 的 ui 也比 cursor vscode 好
bojue
141 天前
@dcatfly 可能主要是和自己比,我测试过的编辑器大部分都偏 toB 的交互方式。

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

大部分类似这样的交互:


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



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



哈哈

最后看个扣子缓解一下心情:
murmur
141 天前
@bojue 我的理解是,如果放弃兼容性,就可以做很炫酷的功能,我们现在的 OA ,也有低代码,但是 IE11 都可以保证基本功能

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

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

什么系统可以不要功能只要界面,最典型的就三个:记账 待办 笔记
murmur
141 天前
字节这个是什么,拖拉拽开发么,我们的 OA 都有六十多个组件,字节这个真不够用的
NotLongNil
140 天前
@murmur #9 打住吧,人家只是在夸字节的设计好看,楼主根据就不在意什么功能多少和兼不兼容。你说它功能少,兼容性低,也证明不了它设计不好看
NotLongNil
140 天前
字节的设计一直很在线,国内这些大厂肯在设计上下功夫的,也就只有字节了
bojue
140 天前
@NotLongNil #11 哈哈,XD 懂行呀,产品设计部分真的是独一档
daolanfler
140 天前
tiktok 网页版设计不错,但是抖音网页版就不太耐看
murmur
140 天前
@NotLongNil 你说的对,但是 to b 系列的应用,比如飞书,lark ,似乎用户量并不如竞品

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

当然,美丑都是个人观点,我不喜欢花架子,只不过楼主这标题一下就激起了我战斗的欲望
murmur
140 天前
给楼主道个歉啊,本来不想抬杠的,看你标题这用词我真是没憋住。
littlewing
140 天前
扣子 是啥
比特福 是啥
prosgtsr
138 天前
@littlewing 我想了半天,是 beautiful
我也很反感这么打
RyougiShiki
137 天前
1 楼,UI 是重要的一部分,复杂软件 UI 不好因为他们精力有限、功能方面优先级高、当随着时间发展或有竞品出现时 UI 也会发生改变,PS 在 sketch 和 Affinity 出线之后版本更新明显会快一些,我记得有一个版本开始多了鼠标悬浮在工具上的简易动图教程就更易用,金蝶这种管理后台类软件近些年 UI 也提升了不少。

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

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

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1129085

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX