译文:Complexion Reduction—一种超过极简的UI美学新风潮正流行硅谷

本文编译自 Swarm UX/UI 设计师 Michael(Michael) Horton 发表在 Medium
上的篇章《Complexion Reduction: A New Trend In Mobile
Design》,作品解剖了正风靡硅谷科技圈的 UI 设计美学新风潮——Complexion
Reduction,并付诸了怎么着创制一款「Complexion Reduction 」美学风格 App
的顶峰指南。墨刀有幸拿到作者授权翻译了这篇小说。

作者:Michael Horton

原文https://medium.com/swarm-nyc/complexion-reduction-a-new-trend-in-mobile-design-cef033a0b978\#.frctlhzw1

译文:

比方你对统筹美学丰富敏锐,你会意识似乎又有一种新的宏图风潮正在硅谷设计圈蔓延发酵。不仅仅是
Instagram,Airbnb ,连 Apple Music
也起初拥抱这种规划风格,证据就是这几款明星 APP
改版后的用户界面展现出一些同一的特质:进一步简化的界面颜色,更大更卓越的标题字体,以及更简化的图标。而这种作风就是被
Swarm UX/UI 设计师 Michael Horton 称作 「Complexion Reduction」
的规划美学风潮。

改版后的 Instagram,Airbnb 和 Apple Music UI
界面风格:更简化的界面颜色,更大更优秀的标题字体,以及更简化的图标。

「Complexion Reduction 」到 底 是 什 么 鬼?

莫不你会问,「Complexion Reduction
到底是哪些鬼?我怎么一直没听过?」其实这是 Michael Horton
生造的一个词,用来叙述最近面世在移动设计领域的新风潮,姑且翻译成肤色简约。它和大热的扁平设计不同,也不是指极简风,当然更谈不上是
「渐进式简约」 。

注:渐进式简约,英文为 Progressive Reduction,它是指 UI
界面设计中,随着用户对产品的熟知程度大增而展开渐进式地简化改革。这背后的见地非凡简短,
可用性是一个动态的对象,用户对拔取的敞亮程度将随时间逐渐强化,由此用户界面也亟须依此即时更新。(图:creo.co.uk)

有人认为 Complexion Reduction 是极简设计风格在运动端的延伸衍生和变化,但
Michael认为,显然这种作风独具更为精晓的性状,即更简化的界面颜色,更大更非凡的题目字体,以及更简化的图标。最后导致众多运用在风格上尤其趋同,不精晓的还以为是同一家产品的吧。

Michael(Michael) 第一次注意到这种风格是在 Instagram 发表了新的UI。

相比较以上三个页面,我们发现,新版中去掉了本来顶栏、底栏的深蓝、黑灰背景象,并简化了图标。新版只保留黑白两色,粗体字标题,出色了情节和效应,一目精晓。

这般清新简洁的界面设计显著更受人喜欢,不由得令人记念另一个黑白色系的网站
Medium。从 2012 年上线以来,Medium
就径直是走黑白色系,之后的每便改版都在做减法。现在记忆起来,Medium
应该是践行 「Complexion Reduction 」
的创办者,但是当下还没形成浪潮,也远非那一个词。

说到此地,插一则安利,向大家推荐一个网站——greatappstimeline。在互联网科技行业的新生态之下,产品的迭代和衍生和变化速度变得越来越快,每三回改版几乎都是“大手术”,在如此的背景下,出现了greatappstimeline那样一个网站,通过记录互联网现存出色产品的外观设计,让大家看尽互联网产品更迭变迁史。

greatappstimeline 网站截图

然后大家再来看 Airbnb
的改版,有一回打开的时候猛然发现,咦,怎么这么明白,好像在什么地方见过。这不就跟
Instagram 一样嘛。

密切看看,确实能从中看到有些相似性。相比方面六个页面,新版中字体加大、加粗,去掉了不必要的图样和颜色,简化了图标,更加好认。黑白色
UI,突显内容,效能清晰。

最终再来看看 Apple Music 的统筹改版,尽管改版涉及 UX
更新和其他新职能,但设计师最关怀的仍旧规划美学方面的。正如 Macworld
的新闻记者 Caitlin McGarry 说的那么,全新的
look,巨大的卡片,加大加粗的书体,简洁干净的反动背景,让唱片封面展现出来。

是不是听起来很熟知?是的, 前边讲的 Instagram 和 Airbnb
的改版关键词也是加大加粗的书体、黑白
UI、简洁干净的背景、以及功用和情节的彰显。

这 意 味 着 什 么?

和风尚圈一样,科技圈也是一个追赶时髦,相互影响的本行。这表示继这 3
家明星设计公司今后,大家怀疑将会有更进一步多的 App
将会主动拥抱这种新的计划风潮,不久你会发觉各样亮色系 icon
像马尔默克一样充满你的 中兴 首屏。

无论是你是永葆如故反对,无疑,这将是计划领域涌起的一股具有前瞻性的新风潮。产品设计流程正摆脱此前这种单纯、各司其职的规划思路,向真正以用户为核心的全体性设计流程方向前行,这是一种更加健康的思绪。

从前的产品设计流程一般是这般的,UX 设计师或者产品经营画完流程图,丢给 UI
设计师,让她「整个雅观的。」然后就是设计师花时间为界面添加、去除,调整颜色…然则,最佳方案可能只需要一个原型图,就能驾驭无误地把自己的需要和想方设法传达给无论是产品主任、UI
设计师仍旧其外人。在前几日愈来愈依赖全部性的设计流程的方向下,UX 和 UI
设计师的底限变得越来越混淆,设计师不再关注细节部分,而是着眼全体,为用户打造极品的成品。

「Complexion Reduction 」美 学 的 终 极 指 南

怎么制作一款「Complexion Reduction 」风格的 App 呢?请看「Complexion
Reduction 」美学的极限指南:

1,请克制用色

黑白色之外,最三只可以多加一种颜色,用来辅导迷津用户展开操作。最好是能让 App
的始末本身来为产品增添亮色。

2,标题字号「大」、「黑」、「粗」

有如下面图例中显示的同一,标题字体扩展 20 到30
的像素,这样看起来会有一种厚重 feel。

3,图标 look 三要素:简洁、纤瘦和好认

图标不要加颜色,从左至右图标排序最好为:HOME
键、搜索、主操作键盘、二级操作键、个人资料。

4,大面积的留白区域。

三倍甚至是四倍的留白。

5,闪闪发亮的 App 图标

特另外图标才是展现个性和品牌的地点,由此,在图标上加一些亮色的元素能让你的成品更加非凡。

这就是说,该怎么样创建一款「Complexion Reduction 」风格的 App
呢?有道云笔记的设计师,拿他们最新的6.0本子做了两回考试,看起来效果不错。

先看一下有道云笔记此前的计划风格:

有道云笔记6.0在此以前的版本

实在个人认为有道云笔记的旧版设计风格也还行,不至于丑,然而仔细看也会意识多少个问题:

先是,颜色太多了,细数一下,蓝(主色)、红、黄、绿、灰、紫、粉,简直像一个多彩花板,这样的问题在于视觉上容易花,不易集中,特别是对此一个工具类产品来说,这样的多色系并不便利。

说不上,模块太多了,大量的分割线、每一篇笔记里还有图片、还有紫色块藏蓝色块,看上去显得很乱,也不到底。

有道云笔记的计划一般也发觉到了这个题目,同时参考着Complexion
Reduction的美学精神,对产品UI举办了脱胎换骨的改观,新版6.0的UI是这般的:

有道云笔记6.0

看完新版设计,第一个感觉是——到底了,而且笔记的始末得到了很好的隆起。

假定把前后的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、扩大留白,使用有道云笔记用户多为在办公场景下,一般工作强度高、精神

紧绷,而留白可以无意识让用户情感放松,扩张呼吸感即是这个目标。