Effie 的退让设计哲学

上一篇文章中说到,我始终不会把 Effie 当作一块很大的蛋糕,我也清楚这不是一个能赚大钱的项目,但这是我个人作为一个产品经理和一个创作人对写作软件的终极追求。

所以接下来,我以 Effie为例,分享一下在我看来,一款好的写作软件应该满足什么要求。

第一个要求:颜值

好的写作环境在一定程度上是会影响作品的质量的。这里说的颜值绝对不是酷炫,而是一种内敛的美感。

Effie 的设计哲学就是退让。尊重创作者的内容,而不是喧宾夺主去展示软件本身。为了达到这个目的,我们在设计方面暗藏了很多“小心机”。

无主色调

和喜欢亮色或者在配色上有很大的反差的软件开发者不同,我认为一个好软件,不需要有很强的存在感,甚至最好没有主色调。

Effie 本身没有主色调。决定 Effie 主色调的是电脑系统的色调:系统是什么颜色,Effie 的主色调就是什么。所以,你的注意力不会被不必要的东西吸引走。

三栏式设计

Effie 整体是三栏式的结构,因为很多笔记类软件甚至系统自带的备忘录都是三栏式的架构,在这种架构下做出的自己的风格,用户使用习惯不受影响,也会更容易上手。

三栏对应三个功能区:

  • 左边是文稿箱
  • 中间是文稿预览
  • 右边是文章编辑区

但其实左边和中间的区域都集中在一快毛玻璃上,这样的整体感更强,简洁度更高。所以实际上,Effie 整个页面只有两块:左侧是所有的文件和文件夹管理,右侧是你的文稿。而且它们可以隐藏起来,只留下文章编辑区。真正做到退让,给你最大自由度。

Effie 的无主色调和三栏式设计

毛玻璃效果

然而做过产品的都知道,让一个没有颜色的界面显得精致,有多难实现。许多其他软件会选择用几个框和不同的颜色将三栏分开,但这样就太平凡了。

Effie 的设计整体就像铺在一片毛玻璃上,和其他分块的软件比起来,更加简洁。

为了做到简洁而不失实用性,在没有颜色的界面上,我们也做了一些交互措施。如,鼠标移动时,创作者会感觉非常跟手,因为阴影会跟着鼠标而动;点击按钮的时候,颜色也会变深一些,这是为了增强确认。

文稿卡片

Effie 中栏的文稿预览是卡片样式的,这是 Effie 的独创设计。

当鼠标在卡片区域滑动时,文稿卡片会跟着创作者的鼠标一起微微跳动,就像创作者自己的思维在跳动一样;当移动鼠标点击某卡片时,该卡片就会带上一个突出显示的加深色;当鼠标悬浮在某个卡片上,这个卡片会微微放大,让用户更轻松地看到里面的内容。

被选中的 Effie 文稿卡片颜色加深、卡片微微变大,你能更方便看到文稿里面的内容

这些精致的设计绝不是无意的花哨,相反,它们让人感觉舒适,而且不会喧宾夺主。可以说,每一个设计都有它独特的意义。

第二个要求:沉浸式的创作环境

Effie 的右侧是写作区。

在写作区,Effie 的设计目的只有一个 – 给用户一个沉迷写作的环境,摒弃一切干扰。写字的地方就要能专心写字,不要分散视线,不用操作鼠标。

如上文所说,你可以通过左上角的按钮或快捷键 ⌘ + 1 来隐藏文稿管理区域,只留下写作区。

即便你不隐藏文稿管理区,只要你在写作区进入了创作状态,左侧区域的亮度也会在不知不觉中黯淡下去。只有当你的鼠标重新移动到左侧,它才会瞬间恢复到原本的亮度。

这些小细节在写作区无处不在:

简洁无干扰的创作界面

Effie 非常激进地删去了写作区的所有按钮,使得界面非常干净、纯粹。 这种设计看起虽然来非常简单,但几乎没有其他产品能做到。

Effie 干净纯粹的创作区

很多以极简著称的产品,在文章滚动的时候,还是可以看到界面顶部有一个包含很多按钮的标题栏,在我看来,这样的设计并不是简洁的极致。

Effie 顶部的标题栏只有一个最基础的功能:窗口的拖动和位移。标题栏可以随着鼠标动作出现和隐藏,只有当鼠标移动到界面窗口上方,提示条才会出来。而且,在 Effie 的全屏状态下,这个提示条会彻底隐藏。

这样的设计自然比做出一个系统本来就支持的标题栏复杂很多,但是通过这样复杂的设计,我们最终得到的是简洁。

所以,想变复杂很容易,想变简单反而更难做到。盲目地大量做减法导致的结果可能是简陋,而不是简洁。而简洁的背后,反而是复杂:我们需要通过大量的工作去达到简洁的效果。

这些费心的设计最终通向的是极致的简洁,文字可以无拘无束地跃上屏幕。

手指不离键盘的沉浸创作

在我看来,沉浸创作不仅仅是当前的界面没有干扰,更重要的是,你的眼睛盯着屏幕,你的手指敲着键盘,你的思想随着键盘的敲击不断输出,最终获得创作的心流体验。

这种状态难能可贵,又最难保持。而这时,任何需要鼠标操作的动作,都会打断或者破坏体验。于是你只能重新集中精神,期望能再次进入心流状态。

为了避免这种情况,在 Effie 上,我们把大量需要鼠标点击才能完成的操作转移到了键盘上。

比如,输入一个井号和一个空格,就可以创建一级标题;输入两个星号就可以输入粗体;输入一个下划线就可以输入斜体;输入三个减号就可以生成一条分隔线。

Effie 中的简单语法

在支付了平均一分钟的学习成本后,你会发现,你能做到手指完全不离键盘就完成整个文稿的创作。

创作的确定感

Effie 追求创作的确定感,让你能更加踏实地写作。

如果写作区完全是一片纯白,在为创作者提供确认感上就稍显不足,而如果能让创作者感受到他是扎扎实实地写在一张稿纸上,而不是在虚空中,写作的界面需要一点微弱的存在感。

如果只能用一个元素,来表现这个界面是一张稿纸,既要呈现美感和秩序感,又不显得多余,那么行号(或者说段落号)是我最终的选择。

行号的存在感不强,但是却一直陪伴在你旁边,承载着丰富的含义:

  • 让你知道光标所在的位置,不在纯白的创作空间内迷失;
  • 让你看到自己已经写了多少行,跟踪创作成果;
  • 在设计上,它让界面的构图重心稍稍右移,整个界面外观更具稳定性。

和其他带有行号的写作软件不同,Effie 的行号是在抽离了所有的元素、窗体和按钮后留下的可以被人感知的客体。

极简主义的精髓,不在乎你拿走了什么,而在乎你留下了什么。

好的写作软件,应该配得上世间的所有美好,配得上良辰美景,配得上创作者本身的文字和才华。

第三个要求:帮你理清思路

我是一个非常注重逻辑的人,在工作中经常要用到大纲和思维导图。但就我个人的使用体验而言,市面上几乎所有的大纲和思维导图工具都是半成品。因为绝大部分思维导图软件都不支持写文章,只能单纯地做导图。

而我在创作的时候,习惯先画思维导图再写文章,这样一来,我就必须在导图软件和写作软件之间频繁切换。

而文章和思维导图本质上都是思想的产物,如果两者分别储存在两个不同的工具里,那么查找的时候就会有一种“割裂感”。

为了打破这种“割裂感”,Effie 在排版、编辑和分享上又做了许多创新。

文章和思维导图混排

包括市面上流行的写作软件在内,几乎没有其他软件能像 Effie 一样做到文章和思维导图的混排。

在 Effie 中,只要你输入一个减号和一个空格就进入大纲编辑模式。写完之后点击右侧的转换按钮,就能一键切换成一张思维导图,并且能更改导图样式。

这个切换按钮乍一看似乎违背了编辑区没有按钮的设计原则,但其实这是担心对新手不友好而特意设计的。如果你喜欢用快捷键,可以在设置中关闭思维导图切换按钮。

Effie 列表模式到思维导图模式

其中一个亮点是,Effie 支持编辑思维导图,也就是说,你可以直接在导图里面增加、删除、拖动、修改、甚至改变顺序和层级。修改完回到写作区,你会发现,导图和文章大纲的修改是同步的。

多格式分享

当我们写完文章,可以直接发表在 octopath 上。也可以导出成 PNG, PDF, DOCX 等几种格式。其中 PNG 图片格式非常适合在手机上观看。你能够随时随地转换各种使用场景,随时随地分享给不同的人。

导出 Effie 文稿为各种通用格式

综上所述,具备了以上要素的 Effie 是我最重要的生产力工具,直接影响到我的创作质量,所以即使她只能满足和我相似的一小部分人的需求,我也觉得值得。

Effie 背后的故事

之前我自己个人用的 Effie 是几个年轻的程序员用 HTML 5 写的,你可以理解成是用网页技术写的,所以性能并没有现在的好。所以在决定把 Effie 做成产品后,我让申旻 (CTO) 带团队用原生代码重写了整个产品。

申旻十分注重代码的效率,所以 Effie 的安装包只有 5 MB 左右。在这个开发商拿硬盘不当硬盘,拿钱不当钱的时代,我们可以说是一股清流了。

现在的 Windows 版重写工作还在进行中,所以基本上,Windows 版 Effie 还是基于我之前个人使用的用 HTML 5 做出来的,整体功能和 Mac 版差不多,但是性能和代码效率还没有能达到 Mac 版的水准。

关于云同步,决定产品化后,我们也决定自己搭建服务器,使得创作者不必被系统所绑架,在换设备的时候不用担心 Effie 是否还能继续使用,文稿是否还能继续打开。我们既然有决心做自己的云,就有决心做到很好地支持每个平台。

只是和其他已经发展了很多年的类似产品相比,我们目前还需要一点点时间追赶。

希望大家能给我们多点耐心。也希望有一天能看到你用 Effie 创造出满意的作品。

以上内容整理自 Bilibili 李自然说:一个人,一把椅子,一个没有舞台的产品发布会

评论
    1. 其实,您可以试试同时打开脑图页和文档页, 分屏显示,同步编辑。 我感觉除了字体有点小,脑图的显示效果绝对比目录好用。 如果要改善目录,其实可以直接在脑图的功能里面直接加一个目录视角的脑图排版方式就行。

  1. 我是设计师,我用了一个星期Effie,果断购买。现在Effie 已经取代我最爱的iA writer。虽然iA writer 已经足够好,但是Effie 的mind map 直接颠覆。我就一个需求,因为我在国外用英语,能不能加英语的word and grammar check,这还是有点重要的。

    1. 感谢你的支持和喜爱!

      我们开发 Effie 海外版时会考虑相关需求的。

      希望你能继续使用 Effie, 并提出更多宝贵意见 🙂

  2. 敬爱的李总:
    我是《李自然说》频道的粉丝,也是effie的用户。
    使用effie以来,感触良多。为中国人能做出这么优秀的极简主义写作软件感到自豪。希望effie越来越完善、越来越好用、越来越多人使用。
    软件的功能和操作逻辑99.99%都是非常满意的。也确实存在一些小小的瑕疵,期盼能够改进:
    1. 大纲模式下,如果把大纲折叠隐藏,并使用缩进的话,会出现只缩进父级,不能同时缩进子级的情况。希望能提供一种,将折叠后的大纲看作一个整体模块,整体缩进的解决方案。
    2. 大纲模式下,不能使用数字列表功能。而我相信很多用户会和我一样,希望在大纲功能组,不仅能够够实现父子级的缩进功能,同时也能够叠加同级数字列表模块。
    3.希望有序列表功能,不仅仅有数字列表一种。建议增加大小写英文字母形式的有序列表功能,和增加一二三四的汉字形式的列表功能。如果可以的话,也可以增加带圈1圈2圈3、圈一圈二圈三、圈a圈b圈c的有序列表功能。
    感谢您的内容及产品给我的生活带来的帮助。衷心祝愿李总越来越牛逼,越来越威武!

    1. 安卓版排期中啦~

      Windows 版本我们也正在开发中,很快很会大家见面了。新版 Windows 会有统计字数功能的~

      1. windows导出的word文档无法打开。
        还有我订购了会员体验,但是与试用版本比较有何不同呢?我并没有找到不同的功能。

        1. 第一个问题,请问可以直接发邮件给我们的技术支持到 吗?

          如果可以,在发送邮件的时候请附上导出后无法打开的 Effie 原文稿,以便我们做测试。

          第二点,目前的试用版和订阅版并没有明显的区别呢。这是因为我们想确保免费版的用户也能享受到订阅版的 Effie 的所有功能。

  3. 《李自然说》B站用户。搜索创业知识搜索到的。巧的是在学习BP的视频中看到了effie软件,视频应该是1-2年前的。今天看到这个软件可以使用,订阅,欣喜若狂。第一次感受到一个软件设计的如此精良,简洁的背后是更复杂的逻辑。谢了。

Sophie Luo进行回复 取消回复