/印象笔记这次改版，让我有点惊喜
干货2023-06-04

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

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

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

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

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

🎯 视觉重心修正
🔍 增强可读性
🍰 丰富层次感
🧩 视觉统一
 
🎯 视觉重心修正
 
1. 弱化导航
以前的首页，模糊一下后，发现最抢视线的，是底部那个深色的导航。
 

但是对于任何产品来说，最重要的是核心功能和核心内容，导航不过是一个辅助工具罢了。
所以，让导航过于抢眼，显然是喧宾夺主了。
况且，这几年来，国内外很多app都把页头和导航的重色块换成了浅灰色，降低非重要内容的存在感，「褪色」也符合设计趋势。


 所以，印象笔记把底导航换成浅灰色的做法，是很明智的：
 
2. 弱化菜单
之前的首页，浅灰底底上，最突出的就是菜单了，阴影很重。
前面导航是辅助工具，其实菜单的地位也半斤八两。
毕竟大部分人打开印象笔记，都是来查看编辑自己的笔记的，没人会盯着导航和菜单看。
所以新版的首页，不但弱化了菜单的阴影，还把整体尺寸改小了。
 

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

 
3. 强化笔记
导航和菜单都弱化了，那什么要加强呢？
自然就是印象笔记的核心内容——笔记了。毕竟是用户自己创建出来的 ，能不在意吗？
新版的笔记和旧版相比，不但尺寸更大了（尤其是图片），而且和背景的对比更明显了。
整体上而言，新版的笔记存在感更强了。

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

单看每一个改动都很细微，但组合到一起，就很有力量了。
 
🔍 增强可读性
作为一款笔记工具，文字阅读就是其核心需求，所以让文字易于阅读是非常重要的。
印象笔记这次改版，对可读性的提升是明确而全面的，如果你不知道可读性如何增强，真的值得借鉴参考一下。
 
4. 降低密度
视觉密度高，会让信息辨识更加吃力。
举个极端的例子，「一」和「壹」哪个可读性更高？显然是前者，这也是当初费大力气改用简体字的原因之一。
那么还有其它办法，进一步降低视觉密度吗？
印象笔记这次改版，就一下子用到了3种降低文字视觉密度的技巧：

首先是增加行间距，这样同样尺寸页面里，容纳的文字行数减小了，视觉密度自然也降低了。
其次是用更浅的字色，这样同样的字体可以显得更细一些，从而达到降低视觉密度的作用。
最后是增加段落间距，这样不但减少了视觉密度，还让信息之间层次更加分明。
 
5. 强化标题
新版印象笔记把标题加大加粗加深，而标题又是笔记重点内容的总结，所以能够让用户更清楚地看到重点内容，从而增强可读性。
同时，还增加标题和主体内容的间距，让标题更加凸显出来。

  
6. 左右对齐
如果严格按照每个文字、字符的宽度去排列文字，不管是中文还是英文是无法左右对齐的。
层次不齐的右侧不但不好看，还会让读者在自行扫视时，拿不准该什么时候停下来。
所以很多网页、文档和印刷品都是用左右对齐的方式，通过拉伸字符之间间距，来让后侧和左侧一样，形成一条整齐的边缘。
印象笔记这次改版就把左右对齐加上了，可以看到下图的对比，改版后更加整洁、易于阅读了。

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

🍰 丰富层次感
要把大量信息和功能整合到一个页面，层次感是避免混乱的关键要素。
这就好比你把桌面一摊杂物，整理到了橱柜里。
而这次印象笔记的改版，在层次感方面也做得不错。
 
7. 首页层次
以前的首页上的信息模块都很分散，尤其下拉菜单、搜索框和笔记卡片之间的关系，因为间距过大而不明确。

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

 虽然整体的间距缩小，但因为层次更分明，所以反而让人容易理解了。
 
8. 卡片层次
之前首页，给人的层次感是这样：底部导航>>>顶部菜单>>搜索框和右侧图标>笔记列表。
首先是不合乎情理，笔记列表应该是使用频率最高的，居然最不起眼。
其次是均衡比例低，前面两项过于抢夺实现，把内容都掩盖掉了。
改版之后的首页，变成了这样：底部菜单>笔记列表>顶部菜单>搜索框和右侧图标。
首先是更合理了，把最常用的笔记列表提到了前面，把搜索框和右侧图标这种纯辅助功能降到了末尾。
其次是更均衡了，各个层级之间相差不大，哪一项都不至于过于抢夺实现，给用户增加无意义的视觉噪音。
 
9. 图标层次
之前的笔记编辑页，标题栏的图标都分散排布，降低了视觉上的层次感。
改版之后，很明显地把撤回重做图标和操作图标分开，看起来清晰多了。
 

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

10. 统一色彩
之前的印象笔记用的灰色没有什么色彩倾向，几乎是纯灰色，跟绿色按钮和深蓝导航放到一起，显得背景偏黄了，整体色调不统一。
改版之后，把所有的颜色都同一色调，整体和谐度上升。
 
 


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

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

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

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

 
总结一下
没想到印象笔记今年动作这么大，不知道是不是对未来的设计方向有什么不一样的想法呢？
于是我又问了一下Knight，他说：

第二大脑这个理念确实很不错，但要如何与用户的第一大脑连接起来，就靠好的体验设计了。这次印象笔记的改版，确实是在想方设法地降低理解成本、提升用户和产品的沟通效率。
我觉得方向是找得很对的，期待未来能看到更多新的探索。


本文来自微信公众号“体验进阶”（ID：Advanced_UX）。大作社经授权转载，该文观点仅代表作者本人，大作社平台仅提供信息存储空间服务。

TAGS:

相关文章