Redesigning – 微信公众号 Inline Editor 探索

继第一次使用微信公众号后台编辑器撰写文章后,便心生重设计之意。微信的这个编辑器很古早,是类似 CKEditor、wangEditor 一类编辑器的经典。所以这次的方向以更现代一点的 inline editor 为主,更加突出选中文字属性的即时预览,而不是像现在这样隐藏在图标下边层级。

上图是目前个人公众号的工具栏,从上到下从左到右分别为插入媒体、插入内容和编辑工具栏。实际上都是针对正文编辑的交互,却不知为何以奇怪的样式分开,导致我把右上方当成某种导航(毕竟还有个省略号菜单)。

整体

而这次就要把双层工具栏去掉——

结果变为:

  • 导航:显示预览(可收起)、文章导入、字数与错字提示、原创声明、文章设置与发布(可收起)
  • 文字编辑:原工具栏
  • 插入内容:右上角模块以及引用。

封面预览在左边有保留,右边是新加的侧栏,把底部那些文章设置信息挪了上来,而原本是要滑到底部去设置的。但这样紧凑的双栏可能有失「沉浸写作」氛围,所以把两边都设计为可收起。同时也为窄屏做响应式处理。

顺便可以看到,正文字数那里可以切换显示「自动保存」状态。

文章设置与发布的内部在于它们都不能是空信息。所以原创声明就被单独提出来了,又能凸显后者的重要性。

选中文字 Inline Editor

接下来就是 Inline Editor 部分,采用 8-grid 结构。你在 Figma 里也可以看到(右边属性选择器)。图标也全部重新画了一遍,比如之前的四条横线图标现在都简化为三条。

下图为只是选中文字情况下的弹框。如第二个状态所展示的那样,每个图标都会有名称和快捷键提示。

只加入了常用的几个功能:字号、加粗倾斜下划线、字号颜色、文字样式。

点击更多展开:下划线、表格、表情。如果激活了这些默认隐藏样式,那么便会主动显示出来。

下图为文字颜色样式部分,需要注意的是文字颜色和背景颜色是同时存在的,所以用了这种切换导航而不是二选一的样式。

下图文字样式的灵感来源于 Sketch、Figma 等设计软件中的共用样式。相比格式刷更加直观、可视化和方便管理。

实际文中的效果:

选中段落 Inline Editor

当选中段落时,就会出现另一种针对段落的工具弹框。

「居左居中居右两端对齐」这里,没有采用下拉选择是因为来回切换查看效果不会增加操作次数,如果是下拉选择的话每次就需要两次操作。中间部分行距、字距和两端缩进是最开始的展示数值需求。原本繁琐的段前距和段后距删掉,写公众号不是写论文,过多的选项反而会增加使用成本。接着是首行缩进与列表样式。最后是 文字样式,用于批量操作。

下图为实际文中效果:

这里设定的触发方式为,点击段落前面的「拖动」标识即可快速进入段落编辑模式。经过考察现在的一些产品,最后决定手动选中一整段文字通过段落标识选中整段文字逻辑上是不同的场景。

当然也没有忘记图片的处理方式:

分别为裁剪、替换图片、居左、居中、居右、自适应移动端(都是原有的)。

插入内容

这里基于自己的理解给插入部分做了个分类,是一个3×5的布局,支持键盘操作。没采用 Notion 那种长列表是因为选起来很麻烦,采用这种形式的话,最多只需五次按键便可定位到需求的功能。

顺便这里说一下,two-tone 的图标并非我本意,我更期待的是微信官方能再这些地方做出更符合他们品牌调性的设计。Redesign 也是有着不小的成本,所以我就不在这种涉及到信息差的方面浪费时间了。

wolai 方面的启发,「/」和「、」都可以呼出此弹框,同样(希望)支持首字母或者首字快速筛选。比如打了「、y」这两个字节的话、弹框则会只筛出「音频、引用」两个。

比如我们想要上传图片,按下回车:

出现左边的弹框,二选一。所以并不能做成右边那种。返回箭头更想体现的一是用键盘 backspace 键返回,二是此弹框层级并不是首层,是派生出来的。但实际上可能最方便的是,直接按下 backspace 删掉前面的「/」或者「、」再打出来触发新的弹框。

精力有限,就不再做其他模块的演示了。

深色模式

这么长时间了,微信依然没有对编辑器进行深色模式的所见即所得适配……

初始配色以手机上的暗色模式微信公众文章为主,然后根据明暗对比度去搭配其他暗色。

总结

本文所有设计均是工作外的业余时间所做,这是一个碎片化的思考过程,初衷依然是脱离传统编辑器的繁琐与不直观,去专注于内容本身。而事实上大部分组织类个人公众号运营者都在使用第三方编辑器,套用着各种动画模板,大量的居中段落,复杂而不成体系的颜色,微信也为此开放了方便的接口,让人感叹语义与体裁齐齐堕落。

本次以微信编辑器为出发点,实则是梳理了一些 Inline Editor 的设计过程。涉及细节的比如,工具弹框的高度、阴影样式、图标的粗细、间距、整体长度、浮动间距等。像是居左居中居右对齐、段落两端缩进更是想用非数值化的手段去实现。比如拖动:

但这样是不行的,两端对齐便没有办法体现。其他方案的探索(比如专门设置出一个负责调整布局的栏)也表明,过多的视觉化也会产生不必要的麻烦。

另外下次写设计心得时,我一定要带上这句话——Redesign 一直要控制成本,不计代价的 Redesign 只会演变成拖延症。

发表评论

Fill in your details below or click an icon to log in:

WordPress.com 徽标

您正在使用您的 WordPress.com 账号评论。 注销 /  更改 )

Google photo

您正在使用您的 Google 账号评论。 注销 /  更改 )

Twitter picture

您正在使用您的 Twitter 账号评论。 注销 /  更改 )

Facebook photo

您正在使用您的 Facebook 账号评论。 注销 /  更改 )

Connecting to %s

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理

%d 博主赞过:
search previous next tag category expand menu location phone mail time cart zoom edit close