编辑器产品背后的设计技巧

社区产品,最重要的是打造UGC内容闭环。让内容产生、内容曝光、内容消费3点形成闭环。

编辑器产品背后的设计技巧

内容生产离开不了编辑器。而编辑器基于内容长短的不同,和平台的不同。也有不同的设计方案。考虑产生内容的类型,所谓的”编辑器“形态也不同。比如移动端中有输入选项涉及密码输入口

编辑器产品背后的设计技巧

也有内容输入版块,如下Facebook的产品朋友圈内容:

编辑器产品背后的设计技巧

最近在重构PMTalk产品经理社区的编辑器。围绕着内容闭环与内容产生,编辑器是关键节点,聊聊我们在其中的设计考虑点。

第一:提供专注于创作的工具

Kevin本身也是一个自媒体工作者。所以在编辑器创建上我特别专注2点

第一编辑器带来的效率问题

第二编辑能不能让我有创作的归属感

第一个效率问题,比较容易理解。

即编辑器可以快速的帮助我有居中、突出标题、插入引言、排版的功能。在码字搬砖后我也可以通过上面功能快速生成我想要的文章效果。

在此基础之上,还可以增长素材和笔记类似功能。帮助创作者在创作的时候有更多的素材,帮助创造更高质量的文章。

编辑器在产品设计上,本身属性:“工具”

工具是参与完成创新活动的重要手段之一,选择合适的工具会使创新活动的效率更高、甚至会达到倍增的效果。创新活动反过来又对工具的改进和新工具的需求起着强大的推动作用。

所以编辑器设计上,面对互联网作者们。提供一套高效、有创新的工具是我们这一期版本考虑的。

有归属感

编辑器的归属感我们拆分为3个方向,分别是专属、定向、业务亲和力。同时编辑器面向的作者也存在行业之分,不同的行业因为素材类型、案例特征、甚至是写作规范也会有区别。导致现在市面上所有编辑器无法针对某个用户做特别处理。

在产品设计上都是以文本+富文本输出形式大同小异。这里分别以知乎、简书、产品100、豆瓣为例

简书中,编辑器支持全屏模式。

编辑器产品背后的设计技巧

知乎中,支持插入公式与代码块。考虑是方便代码表达与公式表达

编辑器产品背后的设计技巧

豆瓣的编辑器支持标题下导语,并且没有在格式上支持加粗与多级标题。同时支持在编辑器中插入豆瓣自身的影音。

编辑器产品背后的设计技巧
编辑器产品背后的设计技巧

致力于归属感的产品设计,一定要考虑能够为某类人群设计特别的模板或编辑输入,就可以营造这类归属感。

因此在PMTalk社区中,我们考虑产品经理人群除了写作外,还会在写作中举例什么样的案例?

由此我们取样了100篇产品内容文章,涉及到产品、运营、交互设计、人工智能、大数据5个话题,抽查了23名作者的写作案例。

同时通过朋友圈与社群问答的形式进行了调研,围绕Markdown 的使用习惯、编辑器的需求建议做了收纳。

编辑器产品背后的设计技巧

搞懂用户的需求外,才可能完成归属感的产品设计,成为这类人群反复高频率使用后,最终社区会成为这类作者的归属之地。

因为保密问题,就编辑器的优化方案我们在后期更新。

编辑器的控件

编辑器中围绕着文字、格式、特殊符号有各种不同的组件。因此在设计中注意控件的交互样式和文案。

这里举例2个方向,一个是单独控件的设计

第一个是九宫格

编辑器产品背后的设计技巧

通过九宫格的选中区域让用户感知网格大小和覆盖区域。

第一个是插入链接

编辑器产品背后的设计技巧

选中组件后要弹窗聚焦在选中区域。其次要加入模板文案,类似上图的插入链接。通过模拟:地址+文案。

第二个是考虑编辑器存在哪些控件

比如简书的还有全屏模式,支持作者沉浸式创造

编辑器产品背后的设计技巧

另外掘金的编辑器还支持Markdown输入模式

编辑器产品背后的设计技巧

因为掘金社区中用户属性属于开发者,对Markdown语言的熟悉层度远远高于其他行业作者。加上Markdown自带高效、排版方便,编辑器输入的方式因为人群的特殊在产品设计上就大不相同。所以会默认要求用户选择Markdown。

作者:Kevin改变世界的点滴

本文由用户@Dalson发布于新媒体运营,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议。

业界动态

2019上半年营销案例盘点:洗脑、沙雕、怀旧、国潮……

2019-7-2 15:39:39

业界动态

私域流量有效部署的三个环节:建立、转化、培养

2019-7-2 16:43:11

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索