揭秘!UI设计“性冷淡”风格的真相

作为21世纪的全球偶像,Steve Jobs的影响力可以说是摧枯拉朽式的,潜移默化的影响了当前各个行业。有趣的是,从90年代末期开始,Steve Jobs一直坚持黑套头衫加牛仔裤和旧球鞋的打扮,脖子以下的部分几乎是一模一样的。Steve Jobs的着装风格正是现在最为流行的“Normcore”,俗称性冷淡风格。

文本从“Normcore”的缘由开始,探索“Normcore”在UI界面中的影响。

乔布斯从1998年——2010年着装示意图

何为“Normcore”?

Normcore是一个混合的单词“norm”(正常)和“core”(硬核),趋势预测公司K-Hole在2013年十月的《青年模式:自由报告》中提出,K-hole用“Normcore”特指一种态度。

原文如下:

  • “Mass Indie responds to this situation by creating cliques of people in the know, while Normcore knows the real feat is harnessing the potential for connection to spring up. It’s about adaptability, not exclusivity.”

这里的“Normcore”指的是一种超脱解放的生活态度。纽约的一份杂志在2014年将这一概念普及,杂志称之为“Acting Basic”,并将这一概念引用到时尚圈,泛指一切中性化,简约,舒适,单色调的,弱化品牌的存在感同时又不失自己的格调。在一系列高端品牌,如Celine的带动下,Normcore开始在各大时装周,以及社交媒体如Twitter和Instagram上遍地开花。

Celine官方品牌宣传海报

Muji品牌店陈列

“Normcore”存在有多久了?

“Normcore”一词是近几年提出的,但是Normcore风格一直都在,当下的Normcore浪潮是我国的宋代美学,日本物哀、侘寂美学的集中体现;更是对极简主义风格的延续。

《瑞鹤图》宋徽宗赵佶

电影《寻访千利休》截图

“Normcore”对UI设计的影响有多大?

如今Normcore风已经侵入我们生活的方方面面,连美学、设计行业也不例外。在这股风潮的推动下,UI领域诞生出Complexion Reduction——一种超越极简的UI美学新风潮,这种风潮也是Ascetic aesthetic(性冷淡艺术)在移动端上的体现。这个概念率先由纽约数字设计公司SWARM的用户体验与界面设计师Michael Horton在 < Complexion Reduction: A New Trend In Mobile Design > 一文中提出。

Michael Horton是这样解释“Complexion Reduction”:

  • 最近我注意到这样一种超越扁平设计、超越极简设计,独立的一种简约设计。有人可能会说这是移动端极简设计的下一步,但是我注意到它与极简设计有许多不同。所以我决定将它命名为Complexion Reduction。

Complexion Reduction的这种简化又和“认知简约”不同,后者的英文是 Progressive Reduction,是指在设计符号时,由于用户的学习不断深入,逐渐简化复杂和先前用于“解释”的信息。而Horton认为Complexion Reduction是一种更为特征鲜明的改变,虽然你第一眼看这些Complexion Reduction的APP,好像它们都变成同一家的了。

Complexion Reduction风格的四个特征:

1、去掉多余的颜色

使用单色系,最好就是黑白色系,以突出操作本身,让App的内容成为产品最亮眼的地方。例如,这种风格最早的实践者Instagram:

Instagram界面

Instagram 是一家图片社交媒体,在UI改版时有明确的设计目标,是为了突出Instagram这个产品最最核心的东西——照片。新的界面利用纯白底色减少干扰,让用户更内容,除了遵循平台设计规范,大部分改变都是为了让内容更突出。

Enjoy界面

Complexion Reduction风格也已经在国内流行开,ENJOY是一款从中高端人群切入,为用户提供高端餐饮体验的生活化电商平台。ENJOY的界面主要以黑白为主,给人以高级感觉,凸显出所售卖商品的品质。

2、变大,加黑,变粗的标题

Apple Music界面

Apple Music最新的改变是对于市场变化反馈的应对。上一版中,很多用户反映字体过小导致无法阅读,此次改版中Apple Music将字号变大,加黑(甚至用到了纯黑色),变粗,也去除了原本花哨的唱片背景,使得用户打开Apple Music的目的更明确——听歌。就像Reddit上的高票评论说“I just want it to play my damn music.”。

Uber界面

标题字体的变大,加黑,变粗还反映在几个当下较为流行的App中。Uber国际版本中,我们直观的感觉到在字体方面做了调整。

3、简单,纤细,可辨的图标

简单、纤细、更好识别的图标。适用性的图标,也不要使用颜色。

魅力惠界面

魅力惠是一家时尚奢品限时折扣网站,致力为顾客提供奢侈购物体验的App。在最新的改版中,可以明显的体现Complexion Reduction风格,在图标上面使用了2像素的纤细线形图标,选中后使用的是黑色渐变面形图标。

Airbnb界面

Airbnb在最新改版中,图标上沿用了线形,在选中状态下也是线形展示,只是换用警示级别比较高的红色。原本只有图标的底部导航,现在也变为了图标 文字的形式,降低了用户的学习成本。

4、大胆留白

移动端屏幕尺寸有限,所以这个区域寸土寸金,所有的内容都想抓人眼球,但是往往要突出所有的内容却变的所有内容都不突出,Complexion Reduction风格却逆道行之,将页面大面积留白,留白面积2倍、3倍甚至是4倍,在白底上面的功能自然就变得重要和抓人眼球了。

特赞界面

特赞是一个对接设计师和需求方的互联网设计平台。页面上大胆留白,使得用户很容易发掘App的核心功能,同时Complexion Reduction风格也很符合设计师这一群体的审美。

Keep界面

Keep是一款专注健身的移动健身工具App,页面也是大面积留白。

Complexion Reduction风格是好还是坏?

Complexion Reduction风格的流行使得很多App看起来都很相似,那这是一个有益的事情吗?笔者认为这是一个很好的事情,因为这可以让设计师更加App的功能逻辑本身,而不是一个“把这里做的更好看一点”的执行者,设计师应该把更多的视线放在功能上面,怎样让体验更流畅。因为在功能和美观两者之中,用户更在乎功能,功能大于形式。所以Complexion Reduction风格对于设计师来说,是有很积极的作用。

小结

“Normcore”这个风格会存在多久?笔者认为这个风格会存在很长的时间,设计以人为本,设计的发展必然会越来越注重功能化。Normcore这个风格正是让事物回归原本功能本身,去除一些浮夸的装饰。同样UI的大趋势发展也是如此,一名界面设计师的职责,不仅仅是让界面看起来“美”,更重要的是用户使用时更便捷。

众安ZED(微信号zhongan_zed)

作者: Miaaaaa

(0)

相关推荐

  • UI设计之Sidebar(侧边栏)设计欣赏

    现在网页设计流行兼容手机端,一些导航或其它小元素都喜欢用侧边栏的方式展示.侧边栏就这么点大小,那么如何设计才更美观且用户体验更好呢? 今天设计达人网小编为大家整理一系列设计美观的侧边栏UI设计作品,风 ...

  • 32个扁平风格网站UI设计

    小编:今天来带大家欣赏学习一下扁平风格网站的设计.扁平风格就是去除冗余.厚重和繁杂的装饰效果,让"信息"本身重新作为核心被凸显出来.扁平风使UI界面变得更加干净整齐,使用起来格外简 ...

  • UI设计新手必知的7条法则(Part 2)

    小编:2015年进入倒计时,UI设计你到底了解了多少?来看看这些法则你都会了吗?有2部分哦.当然,如果你想要更系统的学习方法,来看看虎哥写的"学UI入门阶段到底要掌握哪些知识(UI第一阶段课 ...

  • 干货!UI设计的6条黄金原则

    作为一名UI设计师,除了要具备分析并梳理产品需求的能力,视觉基础力,更是会直接影响到该设计师水平的几大点之一.那么其实视觉基础能力,是可以通过刻意练习,来进行提升的.很多设计师朋友盲目的对Dribbb ...

  • 手机ui设计教程

    3 3界面元素的分解与组合 界面的版式构成依赖于界面的点线面的构成,手机软件由于自身运行环境小,那就决定了必须控制自身的大小.因此我们的界面图形必须根据需要进行切分,能够用程序实现的效果尽量用程序实现 ...

  • Apple Watch与Android Wear的交互设计哪个好?UI设计大比拼

    Apple Watch与Android Wear哪个更优秀?除了硬件上的对比,UI设计优劣也是一个很重要的参考条件。在11月18日,苹果公司正式发布了WatchKit开发工具,向大家展示了更多的App ...

  • 【译】UI设计中使用插图的十大理由

    在过去的几年里,UI插图一直是最流行,最持久的设计趋势之一.一起来讨论下在网站和移动UI设计中运用插图的原因. 插画是什么? 基本上,插图是对特定概念.文字或过程的视觉解释,旨在支持.澄清甚至扩展人们 ...

  • Ps改进UI设计的一些技巧

    UI设计不像平面设计那样随性,期间可以用点技巧来减少痛苦. 1. 设置网格线 保持像素完美 不在1:1分辨率下也能保持像素完美,可以通过创建网格线来避免虚边的出现.编辑> 首选项 >参考线 ...

  • 安卓UI设计系列知识(一)(设计经验谈)

    搜集了很多朋友的问题,有一个比较明显的问题是现在网络上没有相关的教程or说明,书店里卖的相关书籍不是大篇大段的讲photoshop的使用技巧,就是讲一些宏观的问题,所以看到上次的帖子,很是有效. 打算 ...