Medium.com 是做什么的?有什么优势?
产品上大家已经说得很多了,我觉得 Medium 在设计上也是非常出色的。
一、阅读体验
Medium 的阅读体验一直没有太多变化,从上线那时就做得非常好。作为阅读写作平台,阅读体验自然是 Medium 设计的重点。
1. 字体、段落与布局
以前 Medium 用的是我非常喜欢的一个英文字体
FF Tisa Pro,现在改为了字重更全、字形更为锐利清晰的
Freight Text Pro. 我个人非常喜欢 FF Tisa,非常漂亮的衬线字体,令 Medium 的文章看起来赏心悦目。 在 Quora 上有个关于 Medium 选取字体的问答:
Why did Medium choose FF Tisa Web Pro as the font for posts?字体字号选取 22px,在网页里算是比较大的,但是更加清晰易读。
每行宽度控制在大概 75 个字符左右,适当行宽利于阅读,减少单行阅读疲劳和换行错位的问题。
正文行高 33px,结合字号就是 1.5 倍,使用大字体和高行高使得留白空间加大,同样令人阅读起来更加舒适。
Medium 上就有篇文章专门介绍字体与排版设计原理,里面就用 Medium 自己当例子:
Fonts have feelings too.
其实这些都是很基本的版式设计原理,但是往往很多产品没有做好,太小的字体、太小的行高和太宽的行宽都再损害阅读体验,对于长文阅读更是煎熬。
Medium 还采用了非常简单的单栏布局,把其他操作和入口都放到左侧抽屉里,在左上角有个 M 的标志可以打开左侧抽屉。非常简洁,用户阅读的时候就只看见文章本身。
想一下现在的门户网站、个人博客大多采用两栏设计,多一个侧栏放分类、放广告、放推荐、放关于... 虽说是增加了空间利用率,但这对阅读本身来说,是一种干扰。
2. 节奏
当我们阅读一本小说的时候,情节跌宕起伏那是小说的节奏。跟随文章的节奏是阅读体验的一部分。区别于传统的文字载体,在电子产品里文章更容易利用各种元素来把握节奏。Medium 提供各种文本图片样式,令阅读者更容易跟随作者的节奏。对于图片,有 4 种样式;对于文本,有 2 种标题、2 种引用的样式。
在上面这篇文章里,首先是全屏的题图,然后正文里有两处居中斜体的强调,两张大图分别是居中和左侧浮动的,还有小标题与分割线。这些样式都把文章分成几个小部分,阅读者在阅读的时候很自然地根据这些样式,跟着作者的节奏阅读文章。
现在有的电子书平台,仅仅是对原有文章进行屏幕的适配,然后放到各种设备上阅读,但是这样并没有充分利用电子产品的优越性。 电子产品上的文章应该拥有更灵活的样式,我想除了 Medium 外,还有
iBooks在做这样的事情。
@Liki Du回答里提到的 Teehan+lax 设计 Medium 的故事
Teehan+Lax - Defining Experience就是一个很好的控制节奏的例子,页面里不同的背景色、超大字体、可交互元素等等。虽然故事很长,但读下来一点也不觉得无聊。大胆地猜测,如果 Medium 想更好地为多图文章服务,会在后续推出更多的样式,甚至是可交互的元素。
二、写作体验
Medium 在最初就设计为「可见即所得」的写作模式,省去烦人的预览,这也是写作产品的设计趋势。其他的写作体验一直在改进,总体来说变得更加的简洁,我觉得可以总结为「内容先行,样式随后」。
Medium 的写作设计得让作者首先专注于内容上,其次才是文章的样式问题。
我们可以先看看 Office Word 的写作体验:
关于样式的选择非常多,然后再看看知乎的:
知乎就简单多了,最后我们看看 Medium 的:
没有比这更简单的写作体验了,Medium 在默认情况下没有任何样式的选项,一眼望去都是添加内容。
那么要如何修改样式呢?在添加内容之后:
这种写作模式可能会带来一些困惑,比如用户在添加内容的时候在想,我需要加一个标题、一段引用怎么加?设计上并没有提示用户应该怎么做,不过再尝试几次之后就能很快明白。
Medium 这种极其简洁的写作体验设计,驱使用户在写作的过程中,优先考虑内容,在添加内容之后再考虑内容的样式和排版。
Medium 在设计上还有很多小亮点,总体来说我认为是非常出色的,虽然中英文内容在设计上不太一样,但有很多地方还是值得参考借鉴的。