有道云笔记新版UI大变身, 终于和Instagram、Airbnb站在一起了
时间：2017-09-23 04:13:05 来源: 互联网 复制分享
如果你对设计圈有所关注的话，会发现一种新的设计风格开始在蔓延。
从2016年起，硅谷的设计圈已经开始争相采用这种设计风格“更加简化的界面颜色，更大更突出的标题字体，以及更简化的图标”。
如果你对此还没有太大感知的话，可以先来看看几个例子：
Instagram最新的改版相比于以前，大刀阔斧的去掉了原来深蓝色的顶栏和黑色的底栏，取而代之是大量的留白，用色也只采用黑白和少量的字体的蓝色。图标也进行了简化，整体看上去界面很干净、功能模块很清晰。
Airbnb的新版本也做了一次“大变身”，可以看到，新版中字体变得大又粗，而且把之前大量的图片都去掉了，而只是突出了功能和标题;颜色也同样是黑白灰，图标也进行了简化。
无论是时尚圈，还是科技界，设计永远都在追求最潮流、最前沿。而这种正在风靡的设计风格，也有一个酷酷的名字，叫做Complexion Reduction。
知乎上曾有帖子针对Complexion Reduction。总结过其美学的终极指南就是：
1、请克制用色
黑白色之外，最多只能多加一种颜色，用来引导用户进行操作。最好是能让 App 的内容本身来为产品增加亮色。
2、标题字号「大」、「黑」、「粗」
如同上面图例中显示的一样，标题字体增加 20 到30 的像素，那样看起来会有一种厚重 feel。
3、图标 look 三要素：简洁、纤瘦和好认
图标不要加颜色，从左至右图标排序最好为：HOME键、搜索、主操作键盘、二级操作键、个人资料。
4、大面积的留白区域。
三倍甚至是四倍的留白。
那么，该如何打造一款「Complexion Reduction 」风格的 App 呢?有道云笔记的设计师，拿他们最新的6.0版本做了一次试验，看起来效果不错。
先看一下有道云笔记之前的设计风格：
其实个人觉得有道云笔记的旧版设计风格也还行，不至于丑，但是仔细看也会发现几个问题。
首先，颜色太多了，细数一下，蓝(主色)、红、黄、绿、灰、紫、粉，简直像一个彩色花板，这样的问题在于视觉上容易花，不易集中，特别是对于一个工具类产品来说，这样的多色系并不有益。
其次，模块太多了，大量的分割线、每一篇笔记里还有图片、还有蓝色块灰色块，看上去显得很乱，也不干净。
有道云笔记的设计貌似也意识到了这些问题，同时参照着Complexion Reduction的美学精神，对产品UI进行了脱胎换骨的改变，新版6.0的UI是这样的：
看完新版设计，第一个感觉是干净了，而且笔记的内容得到了很好的突出。
如果把前后的UI对比看：
从上面的对比，可以看出，有道云笔记新版6.0至少遵循了下面几点原则：
1、新版基本只用了黑白色，而且去掉了大量的蓝色块和分割线(Complexion Reduction美学第1点：克制用色)
2、大面积留白，相比以前的填满式界面，增强了呼吸感(Complexion Reduction美学第4点：大面积的留白区域)
3、字体明显变得更粗，突出标题的内容(Complexion Reduction美学第2点：标题字号「大」、「黑」、「粗」)
4、此外，新版依然巧妙的保留了蓝色的主色，但只用在新增笔记的“+”上。
内行看门道，外行看热闹。从专业的设计角度来看，有道云笔记新版6.0的确很好的践行了Complexion Reduction美学精神，作为国内最先“吃螃蟹”的产品，的确有意想不到的效果。对于普通用户来说，很多用户觉得“说不出哪里好了，但很舒服”“感觉一下变高级了”。
实际上，每个产品都有实际的特殊属性，一种设计风格也很难满足所有产品的需求。但就有道云笔记而言，Complexion Reduction 看上去的确很适合。主要有以下三点：
1、克制用色，让注意力在内容本身之上。有道云笔记本身的知识产品属性，用户更希望聚焦于知识的吸收和沉淀，不被分散精力，因此一切与会打扰用户的图标、色彩、模块都要抹掉。
2、字体要放大和加粗，让一切与内容本身得以突出。
3、增加留白，使用有道云笔记用户多为在办公场景下，一般工作强度高、精神紧绷，而留白可以潜意识让用户情绪放松，增加呼吸感即是这个目的。
好了，今天的教学久到这里，Complexion Reduction的设计风格你学会了吗?
以下为网友评论：
网友“RPC9”：升级后,数据都丢失了。都没给个说话,界面在好你让使用者时刻都担心数据会丢失,那有什么用
首先，小IN是为知笔记的会员，从14年开始使用为知笔记，16年末开始使用印象笔记，印象笔记使用的是免费账户。 为知笔记作为国产笔记软件，前期通过免费和多级文件夹管理笔记的...【详细】
开学季伊始，网易有道旗下有道云笔记就顺势推出一项惠及广大高校生的服务——“教育特权”服务，即为学生提供1000次免费OCR识别以及10G的超大存储空间、价值相当于数百元会...【详细】
给吴恩达三块白板和一支马克笔，听他讲一节精彩的课。 刚刚，在O’reilly举办的AI Conference上，吴恩达做了个25分钟的演讲，主题依然是“AI is the new electricity”，但内...【详细】
对于谷歌笔记本，国内可能比较陌生。因为政策原因，Chromebook Pixel主要面向国外市场。而且Chromebook Pixel定位轻度笔记本，有点类似之前的上网本，只不过功能和性能上要强一...【详细】
俗话说：“好记性不如烂笔头。”上课时把教师讲的概念、公式和解题技巧记下来，有利于减轻复习负担，提高学习效率。但在实际学习中，不少同学忙于记笔记，没有处理好听、看、记和...【详细】
这一章分享的是关于君子之道。在整个论语中，“君子”出现了100多次，原来“君子”也是孔子心目中理想的人格标准。透过于丹心得，我们来看看，平时所认为的君子和孔子心目中的...【详细】
法律规范，从某个角度来说，具备着这三个要素：行为模式、条件以及法律后果。 法学是一门逻辑性十分强大的学科，可以说，如果没有逻辑性、明确性作为支持，那么法学也就无从谈起...【详细】
女生提一个内心疑问很久的问题, 男生来回答, 直男们记得做笔记
今天看到一个测试：给个机会，女生提一个内心疑问很久的问题，男生来回答。于是就看到了这些个问题和答案，嗯哼，把笔和纸都拿出来，记得做笔记。 第一、男生整天撩一个女生，并不...【详细】
大家都知道中医四诊法：望、闻、问、切。儿科在中医中被称为“哑科”，毕竟孩子的表达还不能那么明确，故小儿生病，最重要的是望诊。望诊主要为望色、望舌。不同的面色、舌质会...【详细】
要学小儿推拿，没有一点中医理论是万万不行的～师傅很诚恳滴说。当然，越往后学，越会发现自己对理论的熟悉度越来越高，再回头看会有恍然大悟之感，我想很多热爱学习之人都有过此感...【详细】
透过创业者的光环，每个人都在书写着自己故事，每个故事都是一个传奇，而每个传奇背后都有血、有泪、有屎（史），谨以此《创业笔记》连载形式向自己也向同样在创业泥潭中挣扎的老铁...【详细】
今天托哥给大家带来笔记速记诀窍，听力速记大法！字母、符号、长单词及常用缩写词表，平时练习多多使用，考试时能够帮助大家省时省力！ 1.字母 A表示农业: agriculture. ag...【详细】
爱看八卦是人类的天性，古人也不例外，而笔记小说这种体裁就是为迎合古人喜爱八卦的天性而诞生的。笔记小说于魏晋时期出现，主要为“志人小说”和“志怪小说”两种主要类型，内...【详细】
刨也笔记丨重撸《超凡蜘蛛侠》, 除了捡情怀竟然还有这么多收获
前一段时间《蜘蛛侠·英雄归来》（Spider-Man: Homecoming） 上映了，按根儿的习惯，必须要强撸一波之前的《蜘蛛侠》系列。 作为漫威最标志性的动漫人物，蜘蛛侠系列早已是最...【详细】
焦距是什么？ 焦距是镜头上最重要的参数之一。 比如一支镜头：Canon EF 70-200mm f/2.8L IS II USM。其中70-200mm就是表示了这支镜头的焦距，是从70mm开始的，到200mm结...【详细】
自古以来，兵器的好坏，都堪称一个政权的底气之一（小编说之一，意思是不光是兵器，有时候还包括政治状态、经济状态）。 战国时代，战国七雄里面，韩国的地盘，是最小的，并且韩国与秦国...【详细】
如果一个人生在唐朝，然后犯法了，那么会受到什么样子的惩罚？其实这个问题的答案不固定，因为在唐朝犯法了要受到什么惩罚，有时候得看这个人是什么身份，因为按照《唐律》，唐朝对不...【详细】
考研复习需要记忆背诵的知识点有很多，不记笔记怎么行？俗话说得好，好记性不如烂笔头，笔记记得好，不仅可以有效概括重点，梳理知识框架，反复复习的时候可以更省事儿，考研小伙伴们，要...【详细】
夏朝，是一个距今十分遥远的王朝，遥远到了有不少人质疑，夏朝是否存在？ 不过，汉代学者认为，夏朝是存在的，并且，还著有《夏小正》，来记录先民对于一年十二个月份的划分和判断依据...【详细】
“媚俗 ”一词反复出现在《不能承受的生命之轻》，是勘测米兰·昆德拉的切入点，作者本人在《六十七个关键词》中，承认了这个关键词的作用。他说，“媚俗”是艺术的敌人。伟大...【详细】
- [LOL盒子]鼠标滚轮损坏，导致无法正常使用无限视距功能该如何处理(2014-09-25)
- [LOL盒子]盒子首页一加载就出现调试界面该如何去解决(2014-09-25)
- [LOL盒子]为什么会出现游戏角色绑定YY的时候提示绑定失败稍后再试，但过了一会还是绑定不了(2014-09-25)
- [LOL盒子]盒子上很多地方不显示字体的原因(2014-09-25)
- [LOL盒子]打开盒子上的链接为何物不是默认浏览器？(2014-09-25)
- 迅雷7.9.13最新版正式发布(2014-07-03)
- 12306手机客户端来也匆匆 去也匆匆(2014-07-03)
- 谷歌修复了FFmpeg中上千个bug(2014-07-03)