上个月的法兰克福车展上,宝马首次对外发布了经过扁平化处理的单色LOGO,并将传承百年的经典配色调整为黑白色。据悉这个新LOGO专为旗下高端的“精英”车型使用。新logo的简约和纯粹更加凸显了德国品牌的悠久历史和引以为傲的奢华品质。
▲宝马高端车型新logo
这样大胆的改变和最新发布的ios11不谋而合。苹果引以为傲的ios系统一直以高端、精致、体验好著称,是界面设计的典范。新版ios11的设计中同样加重了黑白的用色对比。粗重的文字和大面积留白,让页面显得简洁通透,也让内容更加突出。
▲ios11界面
是什么样的动力让的传统品牌作出如此突破性的尝试?又是什么样的缘由让ios的扁平风更加极致?这其实是一种新的设计风格在界内的酝酿和发酵。
近年来硅谷一大批主流App设计,例如 Instagram,Airbnb,都开启了新一轮的改版。和宝马的新logo一样,他们都用黑白的强对比覆盖了以前的标准色运用。而这种风格就是被Swarm UX/UI设计师 Michael Horton称作「Complexion Reduction」的设计美学风潮。
▲ ins新版设计对比——左(旧版)右(新版)
▲airbnb新版设计对比——左(旧版)右(新版)
从以上的界面设计中, Michael Horton总结了Complexion Reduction风格最核心的几大要素。
1、克制用色
黑白色之外,最多只能多加一种颜色,用来引导用户进行操作。最好是能让 App 的内容本身来为产品增加亮色。
2、标题字号「大」「黑」「粗」
如同上面图例中显示的一样,标题字体增加 20 到30 的像素,那样看起来会有一种厚重 feel。
3、图标 look 三要素:简洁、纤瘦和好认
图标不要加颜色,从左至右图标排序最好为:HOME 键、搜索、主操作键盘、二级操作键、个人资料。
4、大面积的留白区域
三倍甚至是四倍的留白。
5、闪闪发亮的 App 图标
与众不同的图标才是展现个性和品牌的地方。因此,在图标上加一些亮色的元素能让你的产品更加出众。
国内App的新风格试水
互联网行业带来了快节奏的时代,你不得不感叹流行蔓延的速度。新风格刚刚开始兴起, 就能在手机百度(以下简称手百)的改版中初见端倪。
作为国内互联网巨头BAT中的一员,手机百度7月份发布的9.0版本率先尝试了使用Complexion Reduction设计风格,这一大胆尝试在产品的视觉表现上也算是可圈可点。
1、色彩精简提取
手百在新版本改版中将整个界面清零重组,大面积减少了非必要色相,采用黑白的主要配色,来彰显内容的精品化。只在关键功能点缀了标准蓝色,强调品牌性。
▲左(旧版)右(新版)
▲左(旧版)右(新版)
▲左(旧版)右(新版)
2、更舒适的内容排版
利用更大更粗的标题和小字正文,增加留白,拉开对比差异和节奏,保持页面的透气和呼吸感。搜索结果页也去掉了原来红绿蓝的搭配,用纯粹的黑色文字来呈现内容,保证用户浏览的沉浸感和舒适度。
▲ 左(旧版)右(新版)
▲左(旧版)右(新版)
3、减少装饰,凸显内容
由于手百是一个偏工具类型的软件,设计中的复杂图形本就不多。而更新之后的手百则更加极致的省略了所有冗余的设计元素,将诸多界面中的分割线,button外形,都简化去掉,降低理解和阅读成本,让用户从繁琐的界面装饰和复杂的交互逻辑中解放出来。
▲左(旧版)右(新版)
「Complexion Reduction」风格在原来扁平化的基础上更加极致的突出了设计语言的纯粹和功能展现的严谨合理。随着现代社会的发展和生活节奏加快,我们每天所接收的信息非常繁多,此刻用户对效率的追求以及对品质的渴望,也让这种风格流行成为必然。
「Complexion Reduction 」风格的流行只是一个起点,相信不久的未来就将有更多新鲜和大胆的设计在国内市场上诞生,也期待国内能涌现更多好的设计能引领全球互联网行业设计风潮。