印象笔记这次改版，让我有点惊喜

作为一名经常码字的人，云笔记软件是我写稿时离不开的工具之一，最近打开了印象笔记，突然发现整体设计页面变得更简约了，于是我找了印象笔记的设计师Knight问了一下，发现果然如此：

这个改版，乍看一眼，整体页面莫名变得更加整洁、高级了。

仔细研究一下，发现里面大有讲究，很多想法都值得借鉴。

接下来就按照以下四个方面，给大家分析一下这次印象笔记移动端改版的重点：

视觉重心修正

增强可读性

丰富层次感

视觉统一

视觉重心修正

1. 弱化导航

以前的首页，模糊一下后，发现最抢视线的，是底部那个深色的导航。

但是对于任何产品来说，最重要的是核心功能和核心内容，导航不过是一个辅助工具罢了。

所以，让导航过于抢眼，显然是喧宾夺主了。

况且，这几年来，国内外很多app都把页头和导航的重色块换成了浅灰色，降低非重要内容的存在感，「褪色」也符合设计趋势。

所以，印象笔记把底导航换成浅灰色的做法，是很明智的：

2. 弱化菜单

之前的首页，浅灰底底上，最突出的就是菜单了，阴影很重。

前面导航是辅助工具，其实菜单的地位也半斤八两。

毕竟大部分人打开印象笔记，都是来查看编辑自己的笔记的，没人会盯着导航和菜单看。

所以新版的首页，不但弱化了菜单的阴影，还把整体尺寸改小了。

另外，笔记编辑底部的菜单，也增加了滑页隐藏功能，让底部菜单在用户上滑查看笔记时自动消失。

3. 强化笔记

导航和菜单都弱化了，那什么要加强呢？

自然就是印象笔记的核心内容——笔记了。毕竟是用户自己创建出来的 ，能不在意吗？

新版的笔记和旧版相比，不但尺寸更大了（尤其是图片），而且和背景的对比更明显了。

整体上而言，新版的笔记存在感更强了。

再仔细看看，笔记卡片更突出是因为背景色和阴影都加重了，高度增加是因为图片和行间距都加大了。

单看每一个改动都很细微，但组合到一起，就很有力量了。

增强可读性

作为一款笔记工具，文字阅读就是其核心需求，所以让文字易于阅读是非常重要的。

印象笔记这次改版，对可读性的提升是明确而全面的，如果你不知道可读性如何增强，真的值得借鉴参考一下。

4. 降低密度

视觉密度高，会让信息辨识更加吃力。

举个极端的例子，「一」和「壹」哪个可读性更高？显然是前者，这也是当初费大力气改用简体字的原因之一。

那么还有其它办法，进一步降低视觉密度吗？

印象笔记这次改版，就一下子用到了3种降低文字视觉密度的技巧：

首先是增加行间距，这样同样尺寸页面里，容纳的文字行数减小了，视觉密度自然也降低了。

其次是用更浅的字色，这样同样的字体可以显得更细一些，从而达到降低视觉密度的作用。

最后是增加段落间距，这样不但减少了视觉密度，还让信息之间层次更加分明。

5. 强化标题

新版印象笔记把标题加大加粗加深，而标题又是笔记重点内容的总结，所以能够让用户更清楚地看到重点内容，从而增强可读性。

同时，还增加标题和主体内容的间距，让标题更加凸显出来。

6. 左右对齐

如果严格按照每个文字、字符的宽度去排列文字，不管是中文还是英文是无法左右对齐的。

层次不齐的右侧不但不好看，还会让读者在自行扫视时，拿不准该什么时候停下来。

所以很多网页、文档和印刷品都是用左右对齐的方式，通过拉伸字符之间间距，来让后侧和左侧一样，形成一条整齐的边缘。

印象笔记这次改版就把左右对齐加上了，可以看到下图的对比，改版后更加整洁、易于阅读了。

(为了增加理解，找了几张官方图做对比更直接）

丰富层次感

要把大量信息和功能整合到一个页面，层次感是避免混乱的关键要素。

这就好比你把桌面一摊杂物，整理到了橱柜里。

而这次印象笔记的改版，在层次感方面也做得不错。

7. 首页层次

以前的首页上的信息模块都很分散，尤其下拉菜单、搜索框和笔记卡片之间的关系，因为间距过大而不明确。

改版之后，可以比较明显地分辨出，页面有两大模块，第一是头像和功能菜单，第二块是下拉菜单和后面的笔记。

虽然整体的间距缩小，但因为层次更分明，所以反而让人容易理解了。

8. 卡片层次

之前首页，给人的层次感是这样：底部导航>>>顶部菜单>>搜索框和右侧图标>笔记列表。

首先是不合乎情理，笔记列表应该是使用频率最高的，居然最不起眼。

其次是均衡比例低，前面两项过于抢夺实现，把内容都掩盖掉了。

改版之后的首页，变成了这样：底部菜单>笔记列表>顶部菜单>搜索框和右侧图标。

首先是更合理了，把最常用的笔记列表提到了前面，把搜索框和右侧图标这种纯辅助功能降到了末尾。

其次是更均衡了，各个层级之间相差不大，哪一项都不至于过于抢夺实现，给用户增加无意义的视觉噪音。

9. 图标层次

之前的笔记编辑页，标题栏的图标都分散排布，降低了视觉上的层次感。

改版之后，很明显地把撤回重做图标和操作图标分开，看起来清晰多了。

视觉统一

东西多了就容易乱，让页面看起来更加复杂。印象笔记这次改版也没忘记通过加强视觉统一，来让产品看起来更加清爽。

10. 统一色彩

之前的印象笔记用的灰色没有什么色彩倾向，几乎是纯灰色，跟绿色按钮和深蓝导航放到一起，显得背景偏黄了，整体色调不统一。

改版之后，把所有的颜色都同一色调，整体和谐度上升。

11. 统一文字

笔记软件的本质还是记录，于是编辑、预览、剪藏的字体样式全面统一，对于用户而言会提高记录跟阅读感，改版后的印象笔记，从不同内容源剪藏的内容，样式都是统一的。

12.  统一图标

之前的图标有点参差不齐，例如下图改版前，「相机」和「素材库」（中间）的图标看起来很大，而「语音」和「回形针」图标看起来又小很多。

下图改版前的图标也是这样，「首页」显得太大，「我的」显得太小。

改版之后，各个图标的尺寸和线条粗细都更加均匀了，看起来更加整洁统一。

总结一下

这次印象笔记的改版，确实是在想方设法地降低理解成本、提升用户和产品的沟通效率。

我觉得方向是找得很对的，期待未来能看到更多新的探索。