• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 功能大于形式!揭秘UI设计中“性冷淡”风格的真相

功能大于形式!揭秘UI设计中“性冷淡”风格的真相

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含ui设计,性冷淡风,极简主义,极简设计,经验分享等相关知识,希望在学习及工作中可以帮助到您

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

欢迎关注作者:众安ZED原创 ( 微信号zhongan_zed )

文本从“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的大趋势发展也是如此,一名界面设计师的职责,不仅仅是让界面看起来“美”,更重要的是用户使用时更便捷。

编者注:类似的风格之前有设计师称为无框界面,看看这篇《2017年流行的UI风格,可能是你从未听过的「无框界面」》,更早之前已有设计师注意到这种风格,认为这是一种超越了扁平化设计的新趋势:《设计新趋势!超越扁平化设计的「化繁为简」有哪些亮点?》

参考资料:

  • 维基百科“Normcore”定义
  • Complexion Reduction: A New Trend In Mobile Design,Michael Horton
  • Adobe权威发布: 2017年10大设计趋势

特此声明:本文图片部分来自于网络,如有侵权请联系删除

欢迎关注作者:众安ZED原创 ( 微信号zhongan_zed )

您可能想查找下面的文章:

  • 2013年网页设计UI最热趋势 最流行的UI设计
  • 通往优秀UI(用户界面)设计师之路的20个路标
  • 这10条认知,可能就是你和大厂UI 设计师的差距
  • 针对零基础新人,我给出这份可能是最详细的UI 自学流程总结
  • 想为iPhone X设计UI?给你这11个设计小贴士
  • 想成为互联网设计师?先来看这篇超全面的介绍!
  • 这篇超详细的教程,帮你全面掌握 APP 中的投影设计!
  • 超全UI设计规范,带你了解规范设计全流程
  • UI 设计新人如何接私单?来看高手的经验!
  • 用一篇文章,带你回顾桌面GUI 的设计发展史

相关文章

  • 2017-08-06JPG,GIF及PNG各类型的图片格式详细解说
  • 2018-08-23像鲶鱼一样的活着!成为设计师10年后的经验心得
  • 2018-08-23屏幕外的交互设计:界面设计 ≠ 屏幕设计
  • 2018-08-23Adobe XD免费中文版发布,优设独家专访Adobe 设计副总裁
  • 2018-08-23腾讯好文!如何设计内容精确、体验友好的Dashboard?(上篇)
  • 2018-08-23超全面!UI设计中的字体配色方法总结
  • 2018-08-23用一篇文章,帮你掌握基础实用的动效技能
  • 2018-08-232018 阿里巴巴 UCAN 回顾!张晶华:用户研究在产品定义上的新影响力
  • 2018-08-23这7种设计误区,会影响网页内容的体验
  • 2018-08-23如何从0到1建立设计规范?来看腾讯设计师的总结!

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 「竞品分析报告」系列:斗鱼 VS 虎牙
    • Banner设计宝典系列!玩转9种最常见的设计风格
    • 用好黄金比例,用协调自然的配比照亮你设计的UI
    • 上亿人使用的QQ空间萌宠形象,原来是这么设计出来的!
    • 高手帮你学规范!iOS和Android规范解析之标签导航和分段控件
    • 网络故障场景如何提示用户?来看这篇超详细的总结!
    • 趋势抢先知!2017年设计师都在讨论的服务设计到底是什么?
    • 修改网页中的FlashSWF文件的方法
    • 超实用!比较重要的设计方法论大整理
    • 想做AR类的APP?那么你应该从这三个关键点着手

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有