盘点|主流界面设计语言的变革

[设计思维] [用户体验]

封面用研整编文章(附视频)

目前全球的主流界面设计语言为苹果、谷歌、微软三家 ,它们在大的发展方向都是一致的,而在细节上却分道扬镳。本文我们梳理了这三个设计语言近几年发展中重要的变革点,随后一篇我们将针对占领移动端的两大语言进行实测分析。

注:本文的设计语言非编程(Programming Language),指的是Design Language可以理解为一种风格指导规范。

Material Design 将物理世界的体验带进屏幕

从Android 4.0开始,谷歌确定了明晰的设计规范-Holo设计范式,效果有点像电影创战纪,光感极强。在2014年的开发者大会上,谷歌表示不欣赏设计,对设计毫无感觉的Google已是昨日,随着Android 5.0的发布Material Design被高调推出,重新统一了Google的设计语言,确立了未来Google的设计方向。

Material Design是一门跨平台和终端的设计语言,它是思考事物本质的设计,将电子屏幕里的UI元素看成是一种不存在于现实世界的新的材质,并赋予它物理特性。这一点映射到设计语言效果层面,就是Google将一系列人与真实世界的交互反馈效果应用到人机交互规范上来,也就是说,Material Design虽然没有拟物,但它在尽可能的还原人与现实世界交互时的反馈。

Material Design提出z轴的概念,深度不仅仅是装饰。利用z轴的深度,更好的打造空间的感觉,并且使界面元素层级鲜明,便于理解、使用整个软件。


Google Material design
通过引入z轴来打造界面的空间概念,将二维设计规范到三维
Material的界面层级关系

1. 纸的形态模拟

Material design中,最重要的信息载体就是纸片。纸片层叠、合并、分离,拥有现实中的厚度、惯性和反馈,同时拥有液体的一些特性,能够自由伸展变形。电子屏幕是完全平面化的,不像现实当中的物体是3D的 。一本书里每一页纸之间的空间关系是很清楚的,但电子屏幕的所有物体都在一个平面上,虽然电子屏幕没有空间感,但信息内容是有空间层级的关系。

Material Design的解决方式就是把现实世界中纸张的特性挪到电子屏幕里,把信息内容呈现在这个虚拟的纸上,纸跟纸之间有上下层级关系,用投影模拟纸张的空间感。Material Design的投影并不是过去我们常用的使用图片或者样式代码实现的投影,而是系统根据纸张层级所在位置实时渲染的,投影会随着纸张的空间关系而改变大小。

2. 真实的动作

Material design重视动画效果,它反复强调一点:动画不只是装饰,它有含义,能表达元素、界面之间的关系,具备功能上的作用。物理世界中的运动和变化都是有加速和减速过程的,忽然开始、忽然停止的匀速动画显得机械而不真实。比较典型的案例有:按钮的按下效果会有“触控涟漪”、点击汉堡菜单图标会优雅的变成返回图标、优雅的转场效果等。

2.1 有意义的转场动画

过去我们的页面只有X与Y轴,打开一个新的页面则是生硬地直接跳转到新的页面,并没有点出页面的空间层级关系。而Material强调Z轴,即页面之间的空间层级关系。通过转场动画告诉我们,这个页面从哪里来,到哪里去,在整个APP或者系统里的空间位置是什么。另外,不仅仅是页面层级的动画过渡,对象操作也伴随着动画过渡,从动画里能感受到操作的过程变化。例如删除时,垃圾桶图标会有一个倾倒的动画,或者通过指示条的旋转告诉你删除的过程。另一方面,过渡动画赋予了界面控件一种物理特性,在空间被拉伸、回弹时模仿了橡皮筋的物理特性。

谨慎编排的动画可以在有多步操作的过程中有效地引导用户的注意力;在版面变化或元素重组时避免造成困惑;提高用户体验的整体美感。动画设计不仅应当优美,更应当服务于功能。

2.2 打动用户的细节动画

Icon主要分为入口功能和操作功能,操作功能的icon在完成点击操作之后,通常会转为对应的另外一种形态。如“返回”与“菜单,”“选择”与“未选择”,“收藏”与“已收藏”“点赞”与“取消点赞”的状态之间切换。现在的设计里,icon在两种状态之间的切换通常显得生硬,icon动画将使得点击之后的反馈更佳强烈,并且让界面活起来,这种服务间的无缝切换不仅仅能让用户感知,更是让完美的细节和精湛的设计充满你的应用。用户真的会感受到这些小细节。

目前HTML5已经可以实现icon动画的绘制,原理是设计师提供svg格式的图标,有前端通过html+css+js绘制转场效果。svg格式的图标,可以通过代码控制图标的每一个节点,从而进行形状变形。

3. 板式鲜明、形象、深思熟虑

除了丰富的交互动画外,在基本元素的处理上,Material design借鉴了传统的印刷设计——排版、网格、空间、比例、配色、图像使用——这些基础的平面设计规范。在这些设计基础上下功夫,不但可以愉悦用户,而且能够构建出视觉层级、视觉意义以及视觉聚焦。精心选择色彩、图像、选择合乎比例的字体、留白,力求构建出鲜明、形象的用户界面,让用户沉浸其中。

强调大胆的阴影和高光。引出意想不到且充满活力的颜色。过去的Android让人觉得冰冷科技感,让人有一种距离感。而新的设计采用了与过去相反的做法,在系统里大面积使用色块,用色块来突出主要内容和标题,让界面的主次感更佳突出,也让原本灰黑色为主的界面拥有了时尚和活力。

4. 组件轻盈,富有联想力

在Google的宣传片里,最引人注目的新玩意就是FAB浮动按钮了。这个按钮的功能并不局限于“新建”“播放”“收藏”“更多”等功能。它于整体界面的配色形成比较大的反差,因此会让这个按钮在界面里显得非常耀眼,从这样的设计来看,这个按钮所背负的任务将会是整个界面的主要操作。虽然有点类似与Path里的“+”按钮,但由于iOS系统本身并没有这样的设计,这会成为最区别于iOS的一种交互设计,形式上的醒目足以保证它于 Material 语言的标识性,类似于毛玻璃之于iOS。

Material Design的action bar直接用icon来表达按钮功能。尤其是Material的键盘设计风格,这次走得更极端,把键盘的按钮边框全部去掉,只保留了英文字母的按钮,好处是在屏幕不大的手机上,去掉边框的拥挤感会给字母更大的空间。另外,无边框按钮的设计也体现在提示框的按钮上。如何让无边框的按钮区别于内容文字,这需要设计师除了考虑配色外,还需要考虑按钮出现的场景,对设计师的在应用场景的解读上也是一个挑战。

卡片也是Material Design非常大的一个亮点。它解决了很多内容不一,杂乱显示的问题。通过一张张卡片将内容有序的整理在卡片内,达到简洁干净的视觉效果。


iOS7从质感走向扁平化,iOS10 大而简,简而精

iOS7是iOS面世以来在用户界面上做出改变最大的一个操作系统,总计有上百项改动,抛弃了以往的拟物化设计,让整个界面中充满了扁平化和色彩元素。

iOS7借鉴了微软以及谷歌的设计语言,令界面元素更有层级,使用了更简单的图标,更清爽的字体,以及整体的扁平化生态系统。iOS7中,苹果抛出了磨砂玻璃的概念,纤细的字体(Helvetica Neue Light)、现代感的外观,整体界面的感觉更加轻盈、更加顺畅。

iOS7与iOS6天气应用对比

1. 以内容为核心

充分利用整个屏幕。无需使用边框、底图等等多余的UI元素,让内容扩展到屏幕边缘。尽量减少视觉修饰和拟物化设计的使用。UI面板、渐变和阴影有时会让UI元素显得很厚重,致使抢了内容的风头。应该以内容为核心,让UI成为内容的支撑。尝试使用半透明底板。半透明的底板可以让用户看到后面的内容,在某些场景下起到了上下文提示的作用,另一个角度上来说,也让用户(比以前)看到了更多内容。

2. 保证清晰度

大量留白。空白让重要内容和功能显得更加醒目。此外,空白可以传达一种平静和安宁的视觉感受,它可以使一个app看起来更加聚焦和高效。让颜色简化UI。一个主题色——比如在记事本中使用的黄色——让重要区域更加醒目并巧妙地表示交互性。这同时也给了一个app一个统一的视觉主题。通过使用系统字体确保易读性。iOS7的系统字体自动调整行间距和行的高度,使阅读时文本清晰易读,无论用户选择何种大小的字号都表现良好。使用无边框的按钮。按钮名称、箭头以及系统颜色向用户展示了交互元素,这些内容替代了原先的带有形状的按钮。联系人界面使用了系统色蓝色箭头文字展示了按钮的导航性。

3. 用深度来体现层次

iOS7经常在不同的层级上展现内容,用以表达分组和位置,并帮助用户了解在屏幕上的对象之间的关系。通过使用一个在主屏幕上方的半透明背景浮层来区分文件夹和其余部分的内容。用户在使用备忘录里的某个条目时,其他的条目呈现在屏幕底部的其他分层上,这样用户可以通过滑动展开所有分类条目。

iOS 10是「The biggest iOS release ever」全新的设计去掉了任何可能会给用户带来视觉干扰的东西,变的极度的纯粹。

Apple Music改版

1.「清晰」这一设计准则应当会是以后的设计趋势和重点

在iOS人机交互指南最重要的设计原则部分仍然是Deference(顺从)/Clarity(清晰)/Depth(深度),其中有了一个非常细微的变化,就是万年老二的Clarity(清晰)原则,这次成了老大。在Clarity(清晰)原则中,增加了一段解释:留白、色彩、字体、图形和界面元素要强调重要内容并且对交互进行指引。

2. 加大字号,加粗字体,加多留白,减少页面的视觉层级,加大控件

如上图(Apple Music改版)在锁屏播放界面中,播放和音量的控件都被明显放大了,并且控件之间的间距也被加大了,大大降低了被误触的概率,以及给重要控件赋予色彩。新的控制中心的按钮都有了不同的颜色,从而让他们具有更明显的区分度以及视觉注意度,同样的,按钮也被加大了不少,Night Shift、AirPlay和AirDrop更是被独立了出来。

在这股趋势下,未来的设计将更注重产品的内容和操作体验,降低其他因素对用户使用上的干扰,这对设计师来说,是不小的挑战,因为越简单的东西越难设计,特别是如何在界面设计中去把握「大」和「简」的程度以及如何通过更有限的手段和空间来传达更多的信息和指引用户来达到「精」的目标,这是我们在未来需要不断考虑、探索和解决的问题。

今年的 iOS 11 设计语言上没有做全新的突破,但用户体验方面还是下了不少功夫,视觉及交互体验都或大或小有了各种变化。


再见Metro / Modern UI ,Win10再颠覆

Metro UI是微软在Windows Phone 7中正式引入的一种界面设计语言。Modern UI,是微软开发的Win8操作系统中所带的一种全新风格的界面设计,它的前身即是Metro UI。

微软用Win8的Metro化设计语言一开扁平化设计先河。这种设计语言实则受到包豪斯运动的影响,也深受地铁交通标识中字体和图标的影响。这种瑞士风格般的界面减少了繁杂元素,将内容放在了第一位。网格线对齐、字体、留白、动态磁贴构成了整个界面。

微软试图打造一种愉悦、沉浸式的全屏幕视觉体验,主攻触摸屏幕

Win8开始屏幕不仅仅是开始菜单的替代品,它占据了整个屏幕,取代了以前的桌面和开始菜单,成为一个强大的应用程序启动和切换工具,一个提供通知、可自定义、功能强大并且充满呼吸感的动态界面。

开始屏幕的一个个图块不再是简单的静态图标,而是实时动态更新的磁贴,开始屏幕使用单个进程从 Windows 通知服务获取通知,并保持图块的最新状态。因此很多时候不用点击打开应用,就可以直接从实时图块上获取如天气情况、股票报价、头条新闻、好友微博、更新等信息。对于用户来说,便用的原则是将最常用的应用程序放置到最便于访问的位置,因此目标越近、越大就容易寻找、点击。从上图可以看到在开始屏幕中,图块形式最容易使用鼠标到达,比“开始”菜单上的任何项目都更容易到达。

微软在Win8上做了非常大胆的变革,除了开创性的Metro设计语言,传统桌面和平板两种模式的融合也是一大特色,可这两种操作模式在使用体验上的不一致也成为Win8饱受用户诟病的原因之一,但微软自始至终都朝着平台大融合的目标坚定前行着。

经过一路探索,微软终于通过在Win10系统的公布,展示了一个更加清晰明了的战略方向:构建一个面向全部Windows设备的核心操作系统。

在Windows 10上将真正实现以尽可能少的开发量即可打造全平台都可运行的应用

1. 响应式设计成为通用应用核心结构

除了要应对通用应用在桌面模式下缩小放大的窗口变化,未来搭载Win10的设备尺寸也会多种多样,所以,灵活且高效的自适应布局理所当然是最符合通用应用跨平台、窗口化的特点的。

2. 横向滑动不再是典型的系统浏览形式

Metro UI的设计语言之一就是横向滑动浏览,但随着Surface系列设备的屏幕比例从前几代基于横向操作而设计的16:9变成了Surface Pro 3的3:2,如今我们可以看到Win10官方通用应用基本已经摒弃了整个信息流的横滑浏览,只是在个别分类下采用。对此变化,可以想到的原因之一是通用应用在桌面模式下为窗口模式,当窗口尺寸变得窄小时,自然不适合用横滑来浏览信息。

3. 探索新的导航解决方案

既然Win10已决定弱化横向浏览,那必然需要一种更好的导航形式来替代之前的大字号横滑导航,大部分的通用应用都开始尝试采用“汉堡菜单”来作为统一的导航形式。

4. 更多元化的设计风格

Metro UI这种去掉所有装饰只呈现信息的设计理念其实一定程度上等于剥离了带给用户情感化体验的元素,从而使用户越发审美疲劳,每一个应用看起来几乎都是大号字体+方块磁片的组合。还好在新的通用应用设计中,我们可以看到除了开始菜单以外,曾经那些单一的Metro元素已经越来越少,而线型图标、居中布局、圆形、分割线等等元素的加入使界面变得更加丰富起来,可以说Metro UI的设计语言已被逐渐弱化,微软开始鼓励并给予开发者更大的设计自由,未来Wind10将逐渐和IOS及Android平台的扁平化风格趋于统一。

这一次,微软再次彻底的颠覆了自己,也许我们开始从Win10身上看到其他平台的影子,也许曾经独树一帜的Metro UI即将与我们告别,但是从目前的体验来看,我们认为Win10毫无疑问是变得更优秀了,只不过跨平台统一这条路是否好走,未来还有待验证。


通过《微软未来愿景》这个视频,我们可以看到扁平化设计仅仅是自然用户界面的开端,结合触摸、语音、传感器的控制,多媒体+多种控制方式+云概念,打造更友好的体验。


微软未来愿景
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,395评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • 2006年9月的一个黄昏,烟台,我穿着短袖拖鞋在教学楼背后的阴影里亲吻了一个穿裙子的姑娘。 她的嘴唇尝起来有冰淇淋...
    文字撰稿人阅读 569评论 0 1
  • 有欲望,真好! 想学车,想学财商,想学收纳,想学的很多很多!这是不是叫欲望,拿别人的钱生钱,拿别人的故事找共通点,...
    透明的灰阅读 151评论 0 0
  • 一气呵成将余华的《活着》看完了。当一个人的命运、故事,让我用旁人的眼光将它迅速看完时,心情是那样沉重。合上书,眼前...
    沐伊520阅读 485评论 0 1