行业趋势

还在用 iPad 看剧吗?苹果全新发布的 iPadOS 不止能让你做图了!

雪涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

WWDC19 可能是最近几年最令人激动的苹果开发者大会了。

重回高端专业领域的 Mac Pro 不仅仅是性能怪兽,在专业度、设计感甚至细节的模块化的设计上,体现出了苹果这一顶尖大厂应有的底蕴,说实话,考验民间硬件评测玩家们的资金实力和评测能力的时候到了。在发布Mac Pro 这一系列产品的环节,空耳几乎完全听不懂说的是啥,不过可以全程感知到每一个单词都是牛X的,苹果官方页面的介绍现在肯定是最有说服力的,因为最近的评测起码是要等到今年年底。

属于 iOS 13 的 Dark Mode 正正好好满足了所有人的想象,但是和简单直接的 Android Dark Mode 相比,又多出一丝优雅,非常苹果。拥有 App Store 和一连串新功能的 watchOS 终于成为了一个更加独立、功能强大的硬件设备了,而 tvOS …… 不是重点。

重点是,在 iOS 和 macOS 之间,硬生生多出了一个 iPadOS,这才是整个发布会上,最亮眼的星。

1、下沉:为更细分应用场景所设计的 iPadOS

屏幕尺寸介于 iPhone 和 Mac 之间的 iPad ,一直沿用着交互机制相对比较简约的 iOS 。也正是因此,绝大多数的用户的重度需求,被电脑尤其是Mac 所分走了,而高频轻量的需求则被 iPhone 给分走了,iPad 系列产品在很多时候都是作为家庭娱乐设备而存在,你听到更多关于它的功能应用场景,是看视频追剧。

Apple Pencil 是这个系列的转折点。书写,创作,搭配键盘输入,屏幕尺寸从9.7 一路上探到 12.9,iPad 开始在触摸为王的时代,开始切入更多的使用场景。在学校里面越来越多的学生开始使用一台iPad 来作为 All in one 学习/娱乐设备,艺术家和音乐者开始使用 iPad 替代手绘板和合成器,AR和娱乐的结合也越来越紧密,从创作到专业领域,iPad 成为了越来越多轻应用场景的核心。

吃灰的 iPad 拥有了更多的可能性,而 iOS 的功能限制反倒成为了 iPad 短板,这大概也是 iPadOS 在整个生态中独立出来的最重要原因之一吧。

使用单一屏幕作为输入核心,围绕触摸来交互,以原有 iOS 作为开发核心,深入到更多的细分应用场景,连通 macOS 和 iOS ,iPadOS 的定位看似暧昧,实则在这个多元和高度垂直的时代,帮苹果趟出了第三条路。

2、分屏:向着桌面端进发的多任务交互

iPadOS 的新布局看起来终于不那么 iPhone了,原有最左一屏的小组件汇集到主屏幕之后,看起来越来越有桌面的意思的。

……专为多点触摸的显示屏而设计,通过直观的手势实现多任务……它现在被称为iPadOS。

这是苹果给 iPadOS 所写的出道宣言。

比起 iOS 12 时代更强的分屏模式,发布会现场演示的时候,展示了使用托拽在多个应用之间快托拽内容和元素的操作,多屏互通效率极高。

而多任务不仅仅体现在多个应用之间的互动,同一个应用同样可以多屏存在——也就是我们常说的多任务。比如打开两个「提醒事项」应用,在两个笔记之间,来回编辑内容。点击Dock 中的特定应用图标,你就能看到它到底开了多少个页面。

仔细想想,这是不是和桌面端的系统的逻辑越来越接近了?

3、编辑:无需键鼠一样精细化处理内容

想成为了一个独立的设备,iPad 在用户输入端的短板需要补足,而为了解决这一问题,苹果为 iPadOS 精心定制化了一套组合拳:编辑手势,输入提速,外设支持。

快速输入是 iPad 的短板之一。不借助键盘而能快速输入的方法之一,就是单手快速输入。苹果在iPadOS 上使用了一个全局的小键盘,使用双指捏合快速呼出,全局浮动,使用QuichPath 滑动手势输入法,减少输入的难度。这就是使用输入法和键盘输入提速的方法之一。

长段落或者是其他内容,又要怎么编辑呢?苹果巧妙地将 Macbook 系列触控板的三指手势微调了一下,给迁移过来了:三指捏合是复制,三指散开是粘贴,而三指滑动是撤销。

而辅助快速编辑手势的, 是智能选取功能,光标定位比以往更加智能和精准,把编辑输入的最后一个短板也给补上了。

iPad 的多点触摸屏幕本就支持大量不同的手势,功能支持不是难点,难点在于用尽可能少、且认知度足够高的常见手势,以的认知负荷,让用户更快上手,更舒适地做到各种各样的事情。

以触摸为核心的交互,以及的指针的交互,在iPadOS 上交汇了。这种交互模式无疑是实验性的,但是这也是未来所有的移动端和数字产品的设计者都要考虑的问题,而iPadOS 就是最重要的试验田。

当然,外置键盘输入也并不是难事。iPad 本身的配套键盘套和第三方蓝牙键盘,多数有输入需求的用户都已经购置了,为此,苹果给iPadOS 搭配了丰富的快捷键,来辅助输入:

当然,输入这件事情上,Apple Pencil 也是非常重要的组成部分。苹果将系统自带的备忘录应用进行了重设计,其中很大一部分原因,就是为 Apple Pencil 提供更为强大的绘图功能:

这样一来,即使你没有购买第三方的绘图工具,同样可以用它画出足够漂亮的插画作品。除了特定APP中的手写输入和绘图这样的使用场景之外,Apple Pencil 还作为日常截图批注的主力,方便日常作笔记:

更好的输入,最终的目的,始终是为了更好地输出内容。

4、输出:屏幕输出,手绘板,还有应用

iPadOS 的野心很大。作为一块10英寸上下的屏幕之内的操作系统,它作为内容承载的硬件,是一个很合理的想象,不然也不会有那么多开发者一直在开发将iPad 作为外接屏幕的应用,而现在,用户只需要连上Wifi ,它就能作为 Mac的外接屏幕。

打通了这一个环节之后,后面的事情就自然而然了:Apple Pencil 可以在屏幕上画画,这样一来,它很自然而然就成了手绘板。发布会上,苹果官方所放出的图片当中,涵盖了多数设计师都在使用的设计软件,其中不乏 AI、AE、Pr、Sketch、C4D、Zbrush 这些大热设计工具。

更重要的一点在于,Apple Pencil 原本 20ms 的反应延迟,在这次的更新之后,将会达到9ms,反应速度提升了一倍以上!它已经是一个称职的手绘板了。

有意思的地方在于,并没有 PS。为什么?答案很简单啊,iPadOS平台上的原生 PS 马上就要来了啊!连上Adobe 的创意云,两个平台又呼应上了……

毕竟,想要打通细分的应用场景,iPadOS 是需要自身具备强大生产力的,这意味着大量的独立功能、服务和应用支撑。

5、独立:一切都是为了让 iPad 独立生存

想要 iPadOS 能够独立完成视觉创造的工作,对于多种字体的支持是肯定需要的。在iPad 上独立运行 Photoshop 也同样是需要这样的功能支撑的,所以,干脆官方提供支持了:

而值得注意的是,作为一个设计公司,苹果的想象力并不止于此。这次更新的功能当中,有一个非常引人瞩目的功能是 SF Symbols。

苹果将1000多个常见的 iOS 和 macOS 的图标和苹果官方的旧金山字体融为一体,这些图标和符号支持 iOS 13、iPadOS以及的 watchOS 6 和 tvOS 13,而且你还可以在官方的文档支持之下,自己创造!

具体可以戳这里了解:SF-symbols 使用文档

完全独立的 iPadOS 将会需要好好管理本地和云端的文件系统,官方将文件管理器进行了升级,确保它无需借助另外一台电脑来完成操作。

核心应用没有问题,和外接内容进入口也要一并升级。功能强大的 TypeC接口能够直接读取U盘和存储卡:

而作为主要的浏览器,Safari 浏览器也向着桌面端浏览器的方向进了优化和调整,比如支持下载:

此外,图片、照片和视频的本地管理和剪辑功能,也一并进行了升级,这也是为了让iPad 能够成为一个更加独立的产品而存在。

而真正改变游戏玩法的东西,在开发和设计上。

6、融合:彻底打通平台的应用开发模式

多年以前,苹果为了统一全平台的应用开发,开发语言从原本的 Obj-C 迁移到自家的 Swift 语言。随着移动端应用量的快速增长,移动端的应用数量其实早已超过 macOS 平台的开发数量和频度,这种变化也催生了 Project Catalyst。

图片来自 engatget

这个名为「催化剂」的项目的目标是希望开发者可以更加便捷地将 iOS 应用迁移到 macOS 上,比如说 Twitter 的开发者只花了几天时间,就将现有的 iOS APP 迁移到 macOS 上。紧随其后,成千上万的移动端应用将都可以逐步地反哺到 macOS 上。

但是 Project Catalyst 只是权宜之计,真正治根又治本的东西,则是这次的新的UI框架,SwiftUI。SwiftUI 是一个典型的原生应用框架,是苹果在磨合了上十年的经验之后,所创造出一个的UI开发框架,开发者仅仅只需要极少量的代码和交互式的设计,就能够调用这一框架。这一改变对于 iOS 平台的设计和开发都会有直接的影响。

在现场演示的时候,原本复杂无比的开发代码,在换用 SwiftUI 之后仅需几行代码声明就可以搞定:

新的 Xcode 11 当中,开发者可以使用托拽的方式来增删组件,而右侧的实时预览则能够呈现每一点改变。而基于 SwiftUI 的代码开发模式,可以快速复用迁移到整个苹果的产品平台上,比以往任何时候都要快:

关于SwiftUI 的相关文档:https://developer.apple.com/documentation/swiftui/

官方教程:https://developer.apple.com/tutorials/swiftui/

在新的 iPadOS 和 iOS13 中,系统的整体速度和性能得到了进一步的提升,解锁速度提升了30%,启动速度是以往的2倍,而应用的容量也比以往要小。

7、沉浸:深色模式无处不在

对,深色模式也是苹果这次 iOS 产品更新的最核心特点,甚至整个WWDC19 主题演讲环节的整体视觉设计也是完全沿用这种沉浸感极强的深色模式视觉来进行构建的。目前苹果的 HIG 当中 iOS 的章节中新增了 Dark mode 的章节,而 iPadOS 相关的系统的设计设计指南还未更新。

「在 iOS 13 及以上的版本当中,用户可以选择深色模式为默认的外观风格。在深色模式下,系统界面、视图、菜单和控件都会使用较暗的配色方案,并且让前景元素更加鲜艳,确保突出。用户可以选择选择深色模式作为默认的视觉风格,也可以通过设置,让它在光线较暗的时候,自动切换过去。需要注意的是,深色模式可以让人更加专注。在设计的时候,需要在浅色模式和深色模式中都进行测试,因为有些元素和配色在一种模式下可用,在另一种模式下并不一定适用。」

苹果目前在设计规范中所提供的设计要求相对比较简略,感兴趣的同学可以借助翻译工具看一下:Dark Mode

如果你对于深色模式感兴趣,我们还有文章提供给你:

由于目前苹果官方暂时没有更多的内容,我们可以把深色模式更多的内容留到今后来聊。

8、安全:更私密的网络,更安全的生活

觉得社交网络帐号登录不够安全?Google 和 Facebook 两大巨头在发布会上成了反面案例,苹果适时地推出了自家的帐号登录服务。

苹果将产品和用户之间的边界划分得非常清晰,包括借助 Homekit 为用户提供基于本地存储的安全服务,在网上登录的时候使用经过加密的邮箱帐号,等等。

而被苹果点名的两家著名科技企业,Google 和 Facebook 也是在之前的 Google I/O 大会以及F8 大会上,相继针对隐私策略、安全服务进行了提升。

如果你对于这些大会感兴趣可以看看之前的文章:

结语

和每年9月的新品发布相比,WWDC 的信息量一点都不小。尤其今年还有超赞的 Mac Pro,单开2篇文章都不一定聊得完。但是在我看来,和设计关系最紧密的产品,应该就是 iPadOS了。这个独特操作系统,巧妙地卡在一个独特的需求点上,它本身的设计和定位、用户体验的考量、服务用户的思路、牵涉到的功能和服务乃至于它对于设计的影响,都是巨大的。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

神造了世界,荷兰人用设计造了荷兰

雪涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

有句话叫:神造了世界,荷兰人用设计造了荷兰。到底怎么回事呢,今天我们一起来揭晓。

话说现代主义设计的形成如果要追溯,离不开三驾马车,分别是德国包豪斯、俄国构成主义跟荷兰风格派,而荷兰的现代设计起源跟荷兰风格派分不开,包豪斯及俄国构成主义我们均已在之前的分享里详细谈过,所以今天我们聊一聊最后一架马车 —— 荷兰设计。

相比英国、美国及日本,荷兰这个国家于大家而言未免有点陌生,但如果在欧洲设计圈,国家之间要投票排坐次的话,撇开爱国热情,荷兰挺进前三甲是毫无问题的。至于设计水平发达的原因有几种说法,其中广受公认的是因为荷兰的生存空间太狭窄。

荷兰 41000 平方公里的土地上容纳了 1675 万人口(2018数据),成为人口密度最高的国家之一,因为缺乏土地资源,所以在 1920 年政府动手排干一个叫伊塞米地区的海水,形成低于海平面的人造陆地,是欧洲最大的填海工程之一,项目成功后的荷兰故技重施,陆陆续续进行填海,最后有四分之一的陆地是低于海平面的,所以整个国家在跟大自然搏斗中不得不进行各种设计思考,否则生存都成为问题,所以荷兰设计总体而言发展到当代是特别功能主义及理性主义的。

所以荷兰可谓是「因设计而生的国家」。

荷兰的发展历史

荷兰位于西欧,东接德国,南接比利时,有悠久的文明历史,文艺复兴之后还曾经一度是海上霸权国家,比方说印度尼西亚就是它的殖民地之一。第二次世界大战后的荷兰开始高速发展资本主义,经过几十年进取,进入了「世界最富有国家」俱乐部。

荷兰的社会福利在江湖上令很多国家闻风丧胆,比方随便列举的三个第一:

  • 全球养老金指数世界第一
  • 欧盟各国医疗体系排名第一
  • 全球儿童福利世界排名第一

这样可能有点不够具体,我罗列一个儿童福利的具体数据,比方小孩从出生至 18 岁,政府每月发放约 300 多欧元(大致2500元人民币)儿女金,政府补贴儿童日托或幼儿园的费用达 70%,而且从小学到大学一直享受超过学费的现金补贴。说白了就是以各种不同形式给你钱花,等于说父母只是负责生,政府来养,甚至一不小心还能赚到钱。

荷兰是一个工业高度发达的国家,拥有 1891 年成立的百年跨国大企业飞利浦,全球员工 13 万人,在 28 个国家拥有生产基地,所以飞利浦是荷兰的国家电器制造业中心,同时也是欧洲及世界最大的电器企业之一,它的设计系统非常完善,属于战后早期成立内部设计部的大型企业之一。设计带动了整个公司的发展,甚至在战后一度成为荷兰的经济核心,能与德国的 AEG(德国现代设计之父彼得贝伦斯设计世界最早的VI系统就是AEG)及西门子公司竞争,其中荷兰有 45% 的出口产品都是飞利浦公司的,所以地位非常显赫。

由于荷兰的「风格派」设计过于知名,所以一谈荷兰设计大家都认为是红黄蓝这种类型,也正因为如此所以很多荷兰当代杰出的设计师往往不为荷兰以外的设计界所熟知,但其实这不能完全怪罪风格派,造成这个状况还有一个更重要的原因,就是荷兰政府跟社会都太过重视设计了。

除了设计师本身,荷兰很多产品也没有被世界普遍认识,比方汽车,荷兰有一个跑车品牌叫「世爵(spyker)」,在中国基本看不到,我在网上找了很久才找到一个深圳二手车信息:

这台 09 款的汽车原价 550 万,9 年后仍需要 200 万出手。没错,「世爵」的跑车全部只做纯手工定制,所以只服务美国、西欧、中东及一些小型而富裕的国家,比方瑞士跟摩纳哥。我们也可以从下面的图片感受一下荷兰的奢华汽车设计,还有纯手工打造的内饰质感。

因为设计与荷兰的国计民生密切相关,大量的围海造田,强大安全的排水系统,农村的防潮汐堤坝、拥堵城市的合理交通网络,都需要高水平的精心设计。荷兰人民的历史就是一场以设计建立生存空间的斗争史,荷兰的鹿特丹布宁根博物馆馆长威廉·科罗威尔曾经说过:只有依靠设计,我们才能使我们的国家成为一个可以日夜生存的地方。

所以荷兰设计师在国内地位非常高,也因为如此设计市场非常繁荣,所以单单政府与市场需要消化的设计项目就忙不过来,也就少到其它国家行走,自然在名声上也相对局限。

荷兰政府对设计的重视犹如中国人对面子的重视,我们搞的是面子工程,而他们搞的工程都是面子。

比方以下几个荷兰本土项目,被视为世界上「教科书级」的设计范本。

荷兰的货币设计

全世界的货币设计都有一种无言的默契,就是爱使用名人肖像为设计的中心元素,而荷兰的货币设计是第一个打破这种规则,不使用任何人物的。如果一个国家并非重视设计行业,并非充分尊重设计师的话,这完全是匪夷所思的事情。

荷兰的货币由财政部统一管理,在荷兰财政部当中的设计管理部门的提议与组织下,聘请了荷兰最知名的平面设计师来参与,其中也有不少独立设计师,比方在去年很遗憾离世的荷兰纸币设计大师奥克斯纳,他曾经在 1964 年受邀参加纸币设计,他回忆说:每种面额纸钞的设计周期需要 3 年,所以当最后一种面额投入流通,距离我刚刚开始纸钞设计工作相隔整整 30 周年。

不以人物为中心的荷兰货币设计主要是使用抽象图案进行创作,体现出荷兰从「风格派」以来的立体主义、构成主义形式传统,所以世界上有诸多收藏家是专门收藏荷兰纸币的。比方 250 吉德(荷兰货币单位)被视为艺术品,极具收藏价值,这是世界货币设计中的一种创举。

荷兰西佛尔国际机场

荷兰的首都阿姆斯特丹国际机场又称为西佛尔国际机场,它的设计面貌完整代表了荷兰战后政府对于基本建设及现代设计的积极态度和正确引导。

荷兰长期以来一直没有卷入地区性或者世界性的战争,比方第一次世界大战它始终保持中立,但无奈第二次世界大战中被德国短暂占领,时间为 1940-1945 年,随后继续独立。西佛尔机场就是战后 1967 年 4 月建成及投入运营的,当时世界各国都在着手建立自己的国际机场,但是一个为世界服务的现代化机场需要什么特征与设计考虑呢,几乎没有一个国家可以拿出成熟方案。

荷兰政府牵头组织了大量社会的优秀设计人员,技术人员成立项目组,充分考虑机场未来的交通流量、国际乘客的共同性要求及乘客特征,尽量让机场达成中性、合理、理想等设计特点,跟著名的国际主义设计特点吻合,达到了能为广泛乘客服务的目的,机场落成之后在整体性与功能性上都让欧洲国家感到震惊。这座巨大的标志性建筑在建筑设计、室内设计、平面设计及导视设计等方面所具备的现代主义风格在长达 20 年的时间里,都成为欧洲国家设计国际机场时的重要参考。

荷兰铁路系统

荷兰的铁路系统是在机场完工之后相继落成的,荷兰设计有一个非常厉害的特点就是总体化规划。如果设计师是演员,那么总体化规划就是导演技能,荷兰设计师善于此道,所以它的铁路系统视觉化高度统一,形象与导视系统清晰简明,功能性强,而且设计项目中包含的内容非常多,比方火车厢、火车站、客户内部、车票、路牌、标识、乘务员制服等等,所以如果缺乏总体规划,这是一项难以出色完成的设计工作。

经过一段时间的运营,荷兰的这个铁路系统在效率、安全性、舒适性上在全球都名列前茅,甚至被评为世界上设计得最完善的铁路系统。

荷兰的设计业为何如此的发达成熟,原因总的来说有几个方面,国家相对比较小,拥有悠久的艺术历史;拥有伦勃朗、梵高、蒙德里安等世界知名的艺术家;同时经济富裕,需要通过设计与自然搏斗等几个因素综合起来,形成一个具有很浓厚创作性的社会氛围。

其中尤为重要的还有荷兰政府对文化事业非常慷慨,形成一个宽松的文化赞助系统。设计师在一个资金充裕的环境里工作,很多时候不太需要考虑经济效益,所以更加专注于设计的合理性及艺术性上,自然就有更高层次的输出。

谈到荷兰设计自然无法绕过其标签式的「风格派」运动,因为当代设计其实受其影响非常深远,下面来聊一聊荷兰的风格派产生、特点、代表人物,及对现代设计的影响。

荷兰风格派是如何形成的?

荷兰风格派设计及其相关的一些大咖已经在之前的各种分享当中客串走场,比方杜斯伯格出现在包豪斯的分享,蒙德里安出现在俄罗斯的构成主义分享等,今天他们终于要唱主角了。大家经过今天的了解,就会发现风格派一直以来都不容小觑。

首先我们来了解一下,风格派的特点是什么。其实风格派单单看名称就特别牛气,比方我们会说这个汽车叫奔驰,或者这个汽车叫捷豹,不会说这个汽车就叫汽车,然而当我们说起风格派时跟这个汽车就叫汽车一样,这个风格派别就叫风格派。

风格派有一句名言,出自杜斯伯格,叫「剥去本质的外形,你就会得到风格。」

这句话有点抽象,但有这种感觉已经对了,因为风格派确实是抽象的,而且属于「冷抽象」。关于冷热抽象这个概念大家可以回顾我们之前的分享《用一篇超全面的好文,带你了解俄罗斯设计史的前世今生》,因为这种冷是相对俄国康定斯基的热抽象而言的。

冷抽象大致是这样的:

这是多数人对风格派的一种理解及印象,说白了就是红黄蓝三原色的组合设计,然后很多纵横错落的线条。因为风格派几乎没有曲线,直线让人感觉很冷静,很理性,很稳定,所以被定义为冷酷抽象。

我们再看看下面这几个图:

其实这也叫风格派设计,但并没有出现红黄蓝,所以风格派设计一定就有红黄蓝是一个认识误区,其实风格派的形式定义是这样的:

把传统建筑、家具、产品、绘画、雕塑的特征完全去除,变成最基本的元素集合,甚至把某个元素单独孤立起来绝对化,这些元素最后基本都以几何形态呈现,形成简单的结构组合,强调纵横运用及不对称,并且只使用三原色及黑白色(极色)。

看完这个解释再回味杜斯伯格那句「剥去本质的外形,你就会得到风格」就相对好理解了。

那么这种风格到底是怎么形成的呢?这不是源于某一个人,某一个时间及地点,它就像一个集体完成的雕塑,其实大部分的风格都是如此,但自然离不开一些关键的大咖。

在叙述这些大咖之前,我们先来了解一下时代背景,是在什么样的外部环境中孕育了风格派。

第一次世界大战 1914-1918年期间,欧洲列强为了重新瓜分殖民地及争夺世界霸权而打得不可开交时,位于西欧的荷兰宣称保持中立,欧洲列强自然清楚荷兰曾经也是海上霸主及殖民地大国,不是省油的灯,所以荷兰就在一战期间获得了安静发展文化的环境。

由于中立,荷兰成为欧洲各国艺术家的避难圣地,一时间人才济济,各种野兽主义、立体主义、未来主义等现代探索名家开始纷纷在此聚义,趁世界大乱之际研究如何形成一种新的艺术形式。

这个时候出现了一位人物,叫托马斯·里特维尔德,他 1888 年生于荷兰乌得勒支,是一位木工的儿子,从小自学绘画,后来从事建筑设计。似乎那个年代的设计师都是建筑设计师起家,或者具备建筑设计技能,就好比当代很多 UI 设计师都是平面设计出身居多,这也属于时代发展一种特征。里特维尔德在 1917 年做了一件大事,设计了一个划时代的椅子叫「红蓝椅」,这个椅子被视为家具设计史上第一件现代家具,在色彩计划上就是红黄蓝加极色(黑白)。虽然是一百年前的椅子,但就算放到当代展览馆也一点不显得过时。

红蓝椅整体是木结构,13 根木条互相垂直,组成椅子的空间结构,结构间用螺丝紧固而非传统的榫接方式,最初曾经是灰黑色的,后来里特维尔德希望用单纯明亮的色彩来强化结构,于是参考了蒙德里安的三原色风格,而且被认为简直是蒙德里安《红黄蓝相间》这个绘画作品的立体版。椅子就这样产生了红色的靠背和蓝色的坐垫,但手和椅腿仍保持黑色,少量黄色被用来强化端面,于是成了一个典型的风格派作品。

但这个作品其实历史意义与形式主义大于其功能意义,因为很多有机会试坐这个椅子的人都感觉坐得很不舒服,特别对腰椎间盘突出者来讲简直是灾难。我们很多时候衡量一个设计作品的好坏主要是两把尺子,就是形式与功能,有时候很难去界定哪一个更加重要,但总的来说很多人是能够忍受形式上的缺憾而无法忍受功能上的不足。比方你可以忍受一对鞋子颜色不太满意,但无法忍受它比你的脚少了3码,所以很多时候这两者是优先级问题,假设三对鞋子都合脚,那么你选择的时候形式就很重要了。

在设计红蓝椅之前里特维尔德还是一个无名之辈,他的工作仍然以建筑及室内设计方面为主。比方为一名与丈夫分居的女子设计房间,让这位女士对其设计水平非常肯定。直到 1917 年后里特维尔德成名后,这位女士也成了寡妇,凭借过往交情,她希望里特维尔德能为其孤儿寡母再设计一栋生活的寓所,并且任由里特维尔德发挥,于是历时五年这个房子在 1924 年落成,就是历史上非常著名的「施罗德住宅」:

而经过五年相处,里特维尔德与这名女士日久生情,两人谈起恋爱并且在这座共同完成的房子生活了一辈子,直到 1964 年里特维尔德去世,而这名女士一直在这所房子里活到 95 岁。这是继上一期《用一篇超全面的好文,带你了解英国设计史的前世今生》里威廉莫里斯与简伯顿之后第二个关于房子的浪漫故事。

我们可以看看房子内部,简洁的体块,大片的玻璃,明快的三原色,错落的线条,被视为现代设计建筑及室内设计教科书级的作品,同时也是风格派建筑当中重要的代表作品之一。

其实在我印象中,似乎九十年代初的广东地区有很多住宅或者室内设计是模仿了这种风格的,特别是一些工装设计,所以一直有种莫名的熟悉感,而且也分不出是在电影里看到还是现实中见过,不知道屏幕前的广东朋友有否有同感。

跟里特维尔德差不多时期,有一名画家叫莱克,画风是这样的:

很多人第一眼看到这种作品通常都会惊呆,他将很多视觉元素降低到了的界限,基本上就是使用三角形、四边形跟不规则的多边形来表达,可谓是将设计上的减法做到了。网上已经很难找到这位画家详细的资料,但当时风格派已经形成气候,所以很多人都开始使用这种风格来进行探索。

△ 莱克

很多人看到风格派的表达形式时都觉得很容易伪装,其实这种想法是很天真的,比方我们看看内地某个房产项目在模仿风格派时的建筑效果图,就明白东施效颦的含义了。

风格派有另外一个别称叫新造型主义,至于风格派的形成除了客观的一战时代背景外,也跟其核心思想有关,曾经有一种分析认为,风格派的的思想与哲学里的「二元论」有关。简单来说二元论就是物质与精神都是世界的本原,好比风格派里坚持使用的横线与竖线,但是把设计说到这个份上就很容易上神坛,而且很多时候也是后来者的一种臆想或者牵强附会,这并非史太浓倾向的叙述方式。风格派里的重要人物蒙德里安有过一些接触通神论的经历,所以他认为设计与艺术是一种纯粹自我的精神表达,因而放弃写实风格,而重视内心世界的表达一直是荷兰人的一种艺术特色。

总结一下风格派作品的三个特点:

  • 纵横交错的简约构建方式;
  • 形式元素间的平衡构成和谐整体;
  • 三原色(红黄蓝)的选用是内心世界最精简的表达。

关于三原色的选用我最后多说几句,就是设计上的三原色特别像音乐当中的主和弦、下属和弦及属和弦,比方 c 调当中的 c、f、g,这统称正三和弦,在自然调式当中基本一首歌用正三和弦就可以基本演奏完整。

而很多时候很多老设计师都会跟新手强调一个 Logo 不要超过三种颜色,或者说一个页面的主色不要超过三种等等,是否说明艺术间冥冥之中存在的同构。

这些留给爱设计又爱音乐的朋友慢慢思考。下面就聊聊荷兰设计当中两个最重要的人物,也是风格派当中最重要的两个人物 —— 蒙德里安与杜斯伯格。

蒙德里安与杜斯伯格

在荷兰的现代设计当中,有两个人物无法绕开,那就是风格派里的 twins,杜斯伯格与蒙德里安。根据出生年份,蒙德里安是比杜斯伯格年长 11 岁的,长者为尊,所以我们先来聊聊蒙德里安。

去年荷兰搞了一个活动,叫「风格派100年」,意思是从 1917 年开始计算到 2017 年,而海报上面就用了一个人物,就是蒙德里安,而且最后还将 2017 年定为「蒙德里安年」。

但其实按历史上的盖棺论定,风格派的创始人是杜斯伯格,那为什么不放他呢?其实原因很简单,蒙德里安比杜斯伯格红。

△ 杜斯伯格

蒙德里安最广为人知的特点自然就是画格子跟讨厌绿色,画格子好理解,但为什么要讨厌绿色呢?他讨厌绿色的程度是要将家里的绿色植物的叶子涂成白色,至于为什么这样始终是一个谜团,但是多数人接受的一个答案是,他讨厌自然。

蒙德里安被称为「一辈子画格子的男人」其实是一种误解,他并非一开始接触画画就画格子,反而是画他后来被认为很讨厌的大自然,比方荷兰风车,教堂,苹果树,色彩鲜明,造型准确,所以 20 出头已经是绘画界的一股清流及潜力股,但为什么后来他变了呢,据说是因为一个男人。

这个男人出现在 1911 年,那就是西班牙鼎鼎大名的画家毕加索先生,毕加索和布拉克在荷兰的阿姆斯特丹举办了一场立体主义画派展。在设计史太浓当中如果大家注意一些年份数字就会发现原来如此多的大师是在同一个时期存在、彼此认识或者彼此影响的,如果要归纳原因只能说是一种时势造英雄,因为时势的形成会让一些有共同特点的人同时顺应机会出现,比方中国 90 年代的摇滚人物,及后来中国互联网创业大潮中的腾讯百度及阿里巴巴等,都成为顺势而为的既得利益者。

蒙德里安参观了毕加索跟布拉克的画展,被他们的作品感动到一塌糊涂,因为立体派讲究的立体事实和明确客观都是蒙德里安当时希望追求的目标,于是他那根潜在的抽象神经开始膨胀和律动,他如饥似渴地吸收着立体主义的养分,同年画出了一张习作叫《灰色的树》。画中的树带有一些椭圆形构图,这是模仿了毕加索与布拉克的立体派风格,但其仍然带有不少具象元素,而他在 1912 年创作的相似尺寸的树系列习作《花丛中的苹果树》(Apple Tree in Flower)中,虽然大致构图和《灰色的树》很相像,但这幅画已经明显更加抽象,更具形式感,画面被一个个小的块面鱼鳞般拼接起来。

坦白说从《花丛中的苹果树》开始,蒙德里安就不容易看懂,这个时候的蒙德里安去了巴黎发展,因为他觉得那边的环境更加适合从事艺术探索,在法国巴黎他遇到一群同他一样在寻求现代性、革新艺术形式的艺术家、作家、思想家,对他的蜕变产生了不同程度的影响。

随着对立体主义的探索跟创作,他又慢慢觉得立体主义仍然达不到自己想要的纯粹实在,他希望有更加本质的表达。

在巴黎的那段岁月后期蒙德里安已经开始尝试从立体主义绘画变成一个画格子的男人,只是这个时期的格子一般都没有鲜明的颜色,体现的只是类似音乐里的节奏与韵律。玩热抽象的康定斯基和玩冷抽象的蒙德里安都十分热爱音乐,他们都曾借用音乐的概念放到自身的创作上,比方节奏与韵律。康定斯基本身就是一名业余大提琴手,而蒙德里安人生中最后的一张作品就叫《百老汇爵士乐》。

1914 年时候,蒙德里安因为一战世界大乱所以回到荷兰,遇到他生命中第二个重要的男人,就是杜斯伯格,两人在抽象艺术上有很多共同话题,越来越欣赏对方,于是决定组队一起玩。他们在一次很偶然的机会中见到一名彩色玻璃艺术家的作品,其中仅仅使用三原色的色彩计划让蒙德里安深受启发,而这个时候时间已经去到 1917 年,他跟杜斯伯格创立了一本奠定风格派江湖地位的杂志,就叫《风格》。而这一年也正是里特维尔德创作「红蓝椅」的同一年,而更准确的说法是,这个椅子在早几年已经创作出形态机构,而受《风格》杂志的影响,才涂上了红蓝黄颜色,不知道这算不算靠蹭热点成名的典型案例。

这个时候的蒙德里安就开始一直创作不同的红黄蓝格子画,这些画甚至连名字都懒得改,基本就是《红黄蓝》大哥,二嫂,表弟,堂弟之类的关系,普遍以《红黄蓝构图》加数字来命名。我们看到这批作品时,会想这不就是扁平化风格的鼻祖大师吗?

好了,这个时候我们要留一点戏份给杜斯伯格,杜斯伯格 1883 年出生于荷兰的乌得勒之。他在早期撰写过寓言、剧本以及通过临摹博物馆的名画自学绘画。25 岁那年,他首次举行个人作品展。其后,他开始发表艺术评论,创作诗歌作品《满月》,说明是有文学根基的。自 1916 年(33岁)起,他参加了先锋派的所有重要活动,这个时候他已经认识了回国的蒙德里安,随后和他在荷兰莱德创建「风格派」及其同名杂志。

△ 年轻的杜斯伯格

所以严格一点来说,杜斯伯格类似抢注域名的性质,这个风格可以说是他跟蒙德里安一起探索形成的,但是他拿到了奠基人名分,当然我们也可以看看杜斯伯格的作品,其实跟蒙德里安的作品非常接近,都喜欢玩格子,区别是我们会在他的作品中看到一样差异,就是他玩了斜线与对角线,这一点后来导致了他跟蒙德里安的决裂。

这个时候时间已经去到 1920 年,也就是德国包豪斯也已经成立了,而蒙德里安在跟杜斯伯格闹翻后去了巴黎,在巴黎他因为这种全新的艺术形态加上不断通过写作、演讲、发表作品等方式而成了大名,并成为风格派的代表人物,所以在抢注域名这个竞争中,蒙德里安顺利地掰回了一局。

而 1921 年时候杜斯伯格也开始到德国包豪斯参观,期间他对这所学校非常感兴趣,甚至决定将《风格》杂志迁移到包豪斯来出版,他在讲学中高度赞扬包豪斯的行动,却又同时批评包豪斯的发展方向,他的《风格》杂志就类似现在的自媒体大号,拥有非常巨大的影响力,所以这对格罗比乌斯也造成困扰,这也是杜斯伯格一直以来的性格,就是性情变幻无常。当时正值俄国构成主义观光团在德国游学,他可以当天对他们的作品高度赞扬,但是隔天又提出猛烈批评,完全不按常规套路出牌。另外关于他的一些故事也可以详见《用一篇超全面的好文,带你了解包豪斯的前世与今生》,他跟包豪斯的伊顿在着装上喜欢一黑一白,相映成趣。

包豪斯里有一位著名的教员叫费宁格,他倒是喜欢杜斯伯格直接凌厉的性情,因为杜斯伯格虽然不按常规套路出牌,但是批评的时候理据都非常充分,而且杜斯伯格本身具备深厚扎实的艺术素养,并且当时他拥有自媒体大号,被他骂也是出名的一种渠道,所以费宁格建议格罗比乌斯可以游说杜斯伯格干脆在包豪斯开课程,成为特聘教员,开明的格罗比乌斯同意了这个建议。

但是这样导致了包豪斯一场噩梦,因为杜斯伯格虽然在艺术理论上有主张,但是教学上倾向无政府主义,说白了就是完全不服从组织的管理与安排,在当时位于德国魏玛的包豪斯搞结构主义与达达主义大会,但是在教学上这些激进思想并没有给学生带来太多实质性的支持与帮助,课堂上的杜斯伯格大吵大叫,而他的夫人则在一旁用钢琴演奏构成主义的非调性音乐。关于什么是无调性音乐,大家可以看看网易音乐里的评论:

所以现场非常混乱,简直无法进行下去,而且他还经常在包豪斯的课堂上批评包豪斯是非理性的,是浪漫主义的,而自身却在进行非理性的行为。于是在 1922 年,格罗比乌斯跟其他教员都实在无法忍受,决定由格罗比乌斯为代表对杜斯伯格进行劝退,最后杜斯伯格虽然是离开了包豪斯,但很快就在包豪斯附近建立自己的培训学校,他传授「风格派」抽象主义艺术思想与创作原则,这也吸引了大量的包豪斯学生前去听他的讲学,但期间他继续对包豪斯的教学方向进行批评,可谓非常执着。

但不管如何,杜斯伯格是将风格派思想带到德国包豪斯的关键人物,他主张的「风格派」(style-less),期望找到更加简单、更加国际的术语来建立国际风格基础。

这种艺术观点为包豪斯所吸纳并产生重大影响,抽象艺术也因此逐渐成为现代设计的一种国际风格,引导了整个 20 世纪的产品造型。他其实也通过包豪斯提升了「风格派」在国际上的地位,所以相辅相成。「风格派」也因此与俄国的「构成主义」、德国现代设计运动一起成为现代艺术设计运动的重要组成部分。

杜斯伯格与蒙德里安在个性及气质上形成比较鲜明的对比:蒙德里安温和且有耐性,总是缓慢前进,不断精益求精;杜斯伯格则常常显得冲动,性格中更多的是挑衅和攻击,而较少有建设性成分。但不管如何,两人仍是风格派中的 twins,缺一不可。

杜斯伯格 1931 年时候在瑞士去世,享年 48 岁,而蒙德里安 1944 年在纽约去世,享年 72 岁,相信两人在另一个空间会再次不期而遇,然后冰释前嫌重修盟好,继续探讨艺术与设计。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

如何为产品快速构建合理的UI动效

雪涛


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

动效有助于让UI具有更好的表现力及更易于使用,尽管具有如此大的潜力,但可能由于它是UI设计家族中的新成员之一,所以它大概是所有设计学科中最不被大众所了解的。视觉设计和交互设计可追溯到早期的GUI,但由于动画必须由现代硬件来顺畅的渲染,而且UI动效和传统动画之间的重叠区间也使得两者之间的区分变得复杂。传统动画需要掌握迪斯尼的12个基本原则,那么这是否意味着UI动效也像传统动画一样复杂?我经常能听到人们说,动效设计很复杂,不知道如何选择相对应的动画模式,但是我认为至少在UI领域,动效设计是可以很简单的。



从哪里开始


动效主要是通过UI元素之间关系过渡来帮助用户浏览App。当然还可以通过使用图标、勋章以及插画动效来为App增色,但是建立产品可用性应该优先于增加动效表现力。在展示你的动效设计技巧之前,让我们先从设计一个基本的动效开始,即产品导航之间的过渡。


过渡模式


在设计导航之间进行动效过渡时,简单性和一致性是最关键的点。为了达到这个目的,我们将以下2种动画模式中进行选择:


1、基于容器的过渡。


2、没有容器的过渡。



基于容器的过渡 


Image title

文本、图标和图片等元素在容器内进行分组


如果动画涉及像按钮,卡片或列表这样的内容,则使用基于容器的动画设计,容器通常有很明显的边界,这种模式分为三个步骤:


1.使用Material的标准缓动为容器设置动画(意味着它可以快速加速,然后逐渐的慢下来)。在下图的示例中,容器的尺寸和圆角半径从圆形按钮动画过渡到填充整个屏幕的矩形。

Image title


2.缩放容器中的元素进行宽度自适应,将元素固定在顶部但是仍然存在容器内,这样在容器和内部元素之间创建了清晰的关系链。

Image title

*放慢动画速度以说明元素在容器内如何缩放


3.随着容器加速,在过渡期间逐渐淡出消失。当容器减速时输入的元素逐渐淡入。当元素进行快速移动时,通过淡入淡出来实现元素的更替。 

Image title

*放慢动画速度以说明元素如何使用淡出淡出


将此模式应用于所有涉及容器过渡的动效,这样会建立起来一致的动效规则。这样还使得开始和结束之间的关系更加清晰,因为它们是由两个动画容器互相衔接的。为了展示这种模式的灵活性,这里将它分为五种不同使用场景: 

Image title

*放慢动画速度以说明容器如何连接开始和结束


有的容器只是使用Material的标准缓动从屏幕外滑入,它滑动的方向取决于与之关联的组件位置。例如点击左上角的抽屉导航,图标将从左侧滑动容器。 


如果容器从屏幕边界进入,则它会淡入并放大。它并不是从0%的比例制作动画,而是从95%开始,以避免元素之间的过渡幅度太大。缩放动画使用Material的减速缓动,这意味着它以峰值速度开始并逐渐减速停止。在元素退出时,容器会在没有缩放动画的情况下淡出。为什么退出动画会有这样微妙的设计呢,这样做是便于将注意力集中在新内容上。

Image title

*放慢动画速度以说明容器如何通过淡入淡出进行缩放动画


没有容器的过渡


有些作品将使用没有容器的过渡来构建动效设计,例如点击底部导航中的图标,将用户带到新的页面,在这些情况下,将使用以下两个步骤:


1、起始元素通过淡出消失,然后最终元素通过淡入进入。


2、随着最终元素逐渐出现,使用Material的减速运动来巧妙的展现。但同时缩放仅适用于新旧内容的替换。 


Image title

*放慢动画速度以说明没有容器的过渡如何使用淡入淡出和缩放


如果开始和结束的组合元素具有清晰的空间或顺序关系,则可以使用共享动画来强化它。例如当下图触发导航组件时,开始和结束的动画都在垂直维度进行滑动,这加强了他们的垂直布局。当点击下右图入门流程中的下一个按钮时,从左向右水平动画强化了序列进行的的概念。共享动画使用Material的标准缓动。

Image title

*减慢动画以说明垂直和水平共享动画



最佳方案


把事情变的更简单一些


鉴于其动画频率高低与产品可用性密切相关,导航过渡通常应该优先于功能展示。引人注目的动画通常最适用于小图标,勋章,加载或空状态等元素。下面这个简单的案例可能不会得到Dribbble的那么多关注,但是它更像一个真实的产品。

Image title

*放慢动画速度以显示不同的动画风格



选择合适的时间及缓动类型


导航过渡应该使用合适的时间,快速过渡优先考虑功能,但是速度也不要太快,防止动画路径迷失。根据动画占用的屏幕比例来选择动画持续时间。由于导航过渡通常占据屏幕的大部分,因此300ms是一个比较有经验的动画时长。相比之下,像开关按钮这种小组件动画持续时间很短,大概在100ms左右。如果过渡感觉太快或太慢,请以25ms的增量调整其持续时间,直到它达到合适的动画节奏。


Easing描述了动画加速和减速。大多数导航过渡使用Material的标准缓动,这是一种不对称的缓动类型。这意味着元素会快速加速运动,然后缓慢减速以将注意力集中在动画结束时。这种类型的缓动为动画提供了自然的感觉,因为现实世界中的物体不会立即开始或停止移动。如果动画看起来很僵硬或死板,那么可能是由于你选错了缓动类型。

Image title

*放慢动画速度以说明不同的缓动类型


本文所说的动效模式在建立一种实用而又微妙的动画风格。这适用于大多数产品,但某些品牌可能需要更激进的动效表达。要了解更多有关动效的内容,请阅读Material motion指南。


一旦处理好了导航之间的过渡动画,在你的产品中添加角色动画的挑战就开始了。这意味着简单动画模式是不够的,这时候动传统的动画工艺会真正闪耀起来。

Image title

角色动画可以增加趣味性

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务



腾讯顶尖设计团队总结的 2019 – 2020 设计趋势:图形篇

雪涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

为了和大家分享关于设计趋势的见解,ISUX 研究了 2019 年至 2020 年的设计趋势。没有必要去遵循年度设计趋势报告,但是否意识到这一趋势,对设计师来讲却非常重要。首先,我们总结了平面设计的总体趋势,同时也研究了从 Zepeto app 和 Memoji 开始的,最近扩展出来的 IP 形象设计和角色设计趋势。

在本文中,我们想分享 ISUX 设计趋势报告的第一部分「图形设计趋势」。在这一部分里,我们展示了当下各种品牌和动态图形的案例,总结了 12 个值得注意的平面设计趋势。

强大和可变的排版

排版一直是设计的重要元素,也是传达品牌强烈信息的手段。从去年开始,粗大的无衬线字体和强有力的排版被应用到许多品牌设计当中,这使得它成为平面设计趋势的一部分。此外,也有越来越多的品牌采用动态和反映了 3D 趋势的三维字体版式设计。

1. 动力学排版海报

△ @Andrei Robu

这张动态排版海报不是简单地放置图形和文字,而是将移动的 3D 文字放在固定的图形上,传达新的视觉印象。这些图形主要通过 SNS 以短循环视频的形式共享。

2. Uber 品牌识别

△ @Wolffolins

Uber 开发了一种无衬线字体用于品牌 logo 的再设计,并将其贯穿于整个品牌系统。采用了这些品牌字体的动态海报,更为有力地传达出 Uber 的品牌信息。

3. Squarespace 品牌识别

△ @Dia studio

Dia studio 常将动态文字应⽤于品牌项⽬,「Squarespace」是其代表作品之一。

4. FAD 视觉图形

△ @Practica Studio

以 3D 形态传递活动信息的版面设计,就像礼品包装一样。这种循环的 GIF 图也作为品牌主图形被运用。

5. 韩国女性耐克运动广告

△ @Wieden&Kennedy Tokyo

韩国艺人支持女性主观活动的耐克运动广告,也采用了大胆的哥特式字体。这些由 Guteform 设计工作室设计的字体有基本的延展形式,同时有一个系统能延展成更为宽大的形式以适配媒体的比例。这种动态化的强烈的排版传递了活动信息,和其他设计元素的互动,最大限度地发挥了图形效果。

鲜明的颜色和渐变

随着 Instagram 用彩色渐变作为品牌色,渐变趋势已经持续好几年。最近品牌,UI 和包装的图形设计都采用明亮而强烈的对比色,这种趋势不仅应用于设计,也应用于摄影。强烈的色彩组合,梦幻的色调和彩色渐变有望应用于 2019 年的整体设计。

1. APP 图标设计

△ 越来越多的手机 APP 图标使用渐变色

最近,许多移动应用程序在其图标设计上应用了彩色渐变。

2. 欧洲体育 – 2018 平昌冬奥会品牌识别

△ @DixonBaxi

欧洲体育台 2018 年平昌冬奥会的转播也将强对比和渐变色运用于多数场景中,包括标志、图形和摄影。荧光图形和深⾊背景的对比,尤为深刻地凸显了冬季运动的感觉。

3. 篮球永远品牌识别

△ @Notreal

NBA 新闻广播公司品牌重塑项目所使用的,诸如彩色渐变和大胆排版的设计方法,也反映了的趋势。他们创作了一个系统,通过各种颜色,字体和布局的应用,可以产生各种图形输出。

4. 明日之子品牌识别

△ @Plus X

腾讯视频和哇唧唧哇联合出品的选秀节目明日之子,用多种渐变色圆形表达不同选手的才华。随着节目的进行,图形主题也会随选手的变化而变化。

不对称布局

与过去基于固定网格系统的布局相比,最近越来越趋于使用仅显示图像一部分的非对称布局。虽然好像只显示整个图像的一部分,设计师却可以在大系统中无限延展每个图形。你可以认为平衡被打破了,设计师却可以更加自由地应用图形元素,呈现更强烈的视觉印象,还可以有很酷的图形组成。

1. 平面海报设计

△ @Vasjen Katro

设计了各种各样图形的 Vasjen Katro,不断尝试的形状,颜色和布局也反映了的趋势,特别是不对称和开放式布局。

2. Easy Peasy 品牌识别

△ @CFC

Easy Peasy 是韩国著名化妆品公司 Amore 推出的独立化妆品品牌,以品牌关键词轻松、活跃、有趣和大胆为基础,尝试给用户更加简单和亲切的感觉。品牌用看似自由的手绘波浪线贯穿于整个图形设计,打造不对称之美,展现了自由和亲近的形象。

不断演化的识别度

移动图标已成为趋势很多年了,现在应用交互元素的品牌案例也很多。比起强而有力,灵活而简单,能随内容做出响应和更改的交互图标俨然已成为一种新的趋势。

1. 国际光影艺术节品牌识别

△ @George&Harrison

这是交互图标的其中一个案例,用简单的方形作为基础,延展出各种各样的形状和图案。这些基本元素保持了简单和最大化的交互式图像效果。

2. SM 娱乐品牌识别

△ @CFC

韩国最大娱乐公司之⼀,SM 娱乐开发了一种新的品牌标识来反映其不断扩展的业务。它将基本圆形改变成了不同形状与小号和中号产生关联。灵活的符号和各种颜色的圆形图案是 SM 娱乐视觉识别的核心。

3. 第 59 届塞萨洛尼基国际电影节品牌识别

△ @Beetroot Design

这是电影节一个有趣的识别案例,用卷轴缠绕的图像代替寻常的电影节标志。它不是固定的,而是复杂紊乱的,以复杂的方式排列各种不同的颜⾊和图形,表达了电影节的目的──通过电影传达多种多样的故事和情感。

4. 第 6 届广州三年展品牌识别

△ @Another Design

传递展览核心信息,反复复制到三维空间的基本矩形,显示了展览的特征。在整个展厅中,你可以看到它以多种变动的形态被应用,同时也以不同的形状被运用到各式各样的场景中。

3D 中的高端纹理

3D 趋势如此流行,以至于在平面设计趋势中也不得不讨论它。当下有很多的 3D 图像尝试用复杂的纹理给大众展示生动逼真和新鲜感十足的印象。通过在三维几何形态中,添加逼真的纹理,创造在现实中不可能存在的图形,人们正在定义一种新的现实主义。

1. 3D 插画

△ @George Stoyanov

George Stoyanov 通过组合各种几何形态来表达形状之美。这种视觉尝试很有意思,因为它很难在现实中制作。

2. Adobe Think Tank 视觉图形

△ @Omar aqil design

这张图像由不同形状,纹理和颜色的几何物体设计而成,表达了 Adobe Think Tank 包含各种主题论坛的品牌特征。

3. 现代「超级消费者」品牌视频

△ @Universal everything

将各种各样的材料和颜色运用到人类行走的形状当中,传递出一种非现实和新鲜感十足的视觉印象。

4. 耐克PG3「舒适体验」广告

△ @GRIF

用柔软的毛皮材料营造耐克的主要感觉──舒适感,非现实的图形里有着生动的质感,让人耳目一新。

流体和液体形状

使用有机图形并不是一种新的潮流,但我们发现今年也有大量的图形使用水和油等液体来表达效果。它有时被用作品牌的主图形,你可以在 3D 短动态图形中明显地感受到这种倾向。这种具有强烈色彩和渐变的有机形状,传达出一种精致而梦幻的感觉。

1. 有机形态的 3D 视频

△ @cmttat

有机形态通常以 3D 形式被应用,并且广泛应用于 SNS 共享的短视频作品中。今年尤其有很多透明质感的案例,这些透明材质运用各种颜色,使色彩搭配产生变化,营造出神秘的气氛。

2. 孔雀学会 2018 品牌识别

△ @Irradie

将明亮多彩的渐变色应用于有机形态,这些图像表达了巴黎电子音乐节的特征。

定制插画和角色设计

各式各样的平面插画曾经退出过潮流,但现在已经成为一种强烈的设计趋势。很多品牌都通过聘请知名插画家的方式,用平面插画给大众新的印象。去年以来,除了 2D,3D 角色插画也成为一种趋势被应用到越来越多的品牌设计当中。

1. Uber 品牌插画

△ @Leo Natsume

运用于尤伯杯品牌新形象的插画,是其简洁有序品牌系统中有趣的一部分。

2. Spotify「音乐与你同在」插画

△ @Circus

这是 Spotify 运用了 2D 插画的品牌视频。手绘质感,色彩简单,人形的四肢都很大是最近的插画趋势。

3. Belif 品牌插图

△ @Superfiction

这是基于三维角色的 2D 图案设计示例,运用于包装设计和品牌视频。

等距

等距设计是一种将二维图形绘制成三维的方法,最近已成为一种趋势,在图形和动画视频中被广泛应用。许多设计师通过运用这种技术,在一个框架中显示整个图形,创造有趣和独特的氛围,呈现出一种全新的视觉印象。和去年一样,等距设计在今年似乎也会越来越流行。

1. 等距插画

△ @Mohamed Samir

经常使用等距技术和彩色渐变的插画家 Mohamed Samir 设计了一系列富有趣味性的海报。

2. 等距视频

△ @Matthieu BRACCINI@Panic Studio

将大物体变成微小模型的等距设计方法能给人留下印象,最近可以看到很多运用了这种方法后,屏幕变得更加特别和有趣的案例。

混合媒介

结合不同媒介的各种图形,创建有趣的效果是过去常见的一种方式。最近,结合大胆色彩,逼真照片和 3D 图像给大众新鲜感受的案例也很多。含有扁平化元素的真实图片和视频是 2019 的主要趋势之一。

1. 3D视频+2D图形

△ @Sergio Fuego@giantantstagram

当 2D 和 3D 图像组合在一起,立体效果可以更加独特和突出。这是使用了此方法的优秀视频案例。

2. 真人实拍视频+2D插画

△ @+CRUZ

匡威活动视频是一个很好地混合了拍摄视频和 2D 图形的案例。

3. 真人实拍视频+发光涂鸦动画

△ @blottermedia@jamiethraves

在真人视频中添加发光的涂鸦动画,可以使视频更具动态性和趣味性。当下,SNS 平台上越来越多舞者和歌手的视频都使用这种效果。

4. 运动 3D 的 2D 插画视频

△ @phellaz@blublustudios

有很多作品很难知道它是 2D 还是 3D。用 3D 表达物体运动,而不是简单地使用 2D 图形,这种视频能传达一种新的视觉感受。

短而无缝的动画

当通过 SNS 共享图形图像变得非常普遍时,短小和重复的动态图形也变得很易见。logo、2D 插画、3D 图像和各种各样的图形都以短循环动画的形式共享。

1. 2D 短动画

△ @motionmarkus

这些短视频通过在简单的扁平插画里重复使用短动作,传达了一种独特而有趣的形象。

2. 3D 短视频

△ @arbenl1berateme

由于 3D 是主要趋势,小而重复的 3D 图像也值得注意。添加 3D 真实纹理和效果,可以带来独特的视觉感受。

AR/VR

AR 和 VR 技术的发展,对平面和多媒体的设计趋势产生了很大的影响。这些新技术使人们对品牌有更加立体的体验。

1. Le Graphisme Augmente 图形海报

△ @Laura Normand

尽管是印刷海报,它也允许人们通过印刷材料使得 3D、AR 技术获得交互式体验。印刷海报只包含简单的几何图形和极小的信息,但当你通过手机查看时,将获得更多的信息和看到立体的形状。

2. Apple Music x Memoji 广告

△ @Apple

Apple 使用基于 AR 技术的 memoji 来推广 Apple 音乐。著名艺术家如 Ariana Grande 推出了他们的歌曲,通过这支广告,Apple 一起宣传了 Apple Music 和 memoji。

3. Nike:上海 Never Done 运动店铺网站

△ @AKQA

上海耐克通过 AR 技术实现 360° 网上零售的项目,可以让消费者根据运动的出汗量来进行购买和体验服务。

4. 奥迪 Quattro Coaster 广告

△ @POL

这是奥迪利用 AR 技术的项目,它能让消费者将汽车从银幕上带到自己的位置,从而积极体验开车的感觉。

5. 2018 年英雄联盟全球总决赛开幕式

△ @League of Legends

2018 年英雄联盟的开幕舞台利用 AR 技术,使演唱 POP/Stars 的真人歌手和游戏里 K/DA 角色一起同台演出。这些被实时跟踪的角色,在实际舞台上带来了真实的表演效果。

新复古

新复古,用现代感觉诠释复古,已成为一种新趋势。新复古是一个结合了「新」和「复古」的词,是对过去怀旧的现代诠释,不仅是设计,在时尚、建筑、流行文化等各领域都是一种新趋势。

1. 复古风格视频

△ @dennybusyet  @thekidzzzzz

流行于 80 年代和 90 年代的电子游戏,和好莱坞电影的复古图像与视频,被重新诠释后,再一次流行起来。

2. Fritz Coffee Company 公司品牌识别

△ @Jo In Hyuk

韩国著名咖啡品牌,Firtz Coffee 创造了的,具有复古 logo 和图形的品牌标识。

结语

趋势不会朝一个方向发展,它可以扩展成各种各样的方式,就像我们看到的反映了趋势的 3D,AR/VR 技术也包含了复古风格一样。我们希望这些不同的趋势能以新的方式被应用,从而创造出新颖而有趣的设计。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

浅析插画设计中的风格和例子

雪涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

什么是插图呢?或者艺术中插画的定义是什么?插图的样式有哪些?将在本文揭晓!


Image title



写在前面


什么是插画呢?或者艺术中插画的定义是什么?插画的样式有哪些?


插画是指艺术家将一段文字,甚至是社会意义翻译成一幅图画。


插画是用来创造情感或传达信息的。它在风格上很有表现力,不需要注意。插画用于书籍,杂志,广告,漫画书,漫画,时装设计,故事板和视频游戏。没有单一的方法来说明,有很多的说明风格。




插画风格


虽然有许多不同的插图风格,但这些可以分为以下几组:


Image title



文字插画


文字插画风格以与非小说类书籍相似的方式描绘现实。这幅画描绘了一个可信的场景,即使使用幻想或戏剧。我们来举一些文字说明的例子:


Image title


创造一个摄影图像


艺术家以照片为素材,以细腻的细节创造出逼真的复制品。


在现实主义摄影中,艺术品常常被误认为是照片。绘画、透视和色彩的选择对这种艺术形式至关重要。艺术家经常使用喷枪,或手画与丙烯酸或油达到最终的结果。


展示历史或文化的插画


Image title


这种类型的插画用于描述历史或文化事件。通常被一种文化用来描述场景或环境,这种形式的插画也可以用来描述情绪或增加戏剧感,甚至在摄影的时代。


虽然有时用来美化或贬低文化或人物,这些插图是现实的,足以被视为文字图像。



超现实主义



这种形式的插画试图抹去艺术和现实之间的界限,被认为是对摄影现实主义的一种进步。


有时,一些额外的功能被添加到一个代表或艺术家可能与单色铅笔工作,以创建一个社交信息。然而,我们的目标是创造一个尽可能接近现实的形象。这种形式的插画试图抹去艺术和现实之间的界限,被认为是对摄影现实主义的一种进步。


概念插图


Image title


概念插画是隐喻性的,以思想或意象取代了现实主义。虽然这部作品可能包含现实的元素,但其目的是传达情绪、隐喻和主观性。这种形式的插画可以与小说相比,在任何地方。我们来举几个例子:



图像顺序


Image title


按顺序排列的图像讲述一个故事,可以用于卡通、漫画小说,甚至是电影场景的规划。风格可能有所不同,从快速素描,以喷枪的细节微调图纸。根据信息的不同,一幅图像可以使用清新干净的颜色,也可以使用墨水、锯齿状的线条和混乱的布局来描述政治的混乱事务。



信息图形


Image title


这些是知识的图形表示。它们通常用于帮助理解复杂的信息。 


虽然它们向观众展示了他们正在看的内容,但这通常以包含其他见解的方式表示。有些可能看起来像文字插画。



抽象或扭曲的设计


Image title


一种表现形式的说明,从现实中分离出来,从想象中显现出来。因为它是如此主观,两个抽象的艺术品看起来会非常不同。



手绘数字图纸或插画


Image title


在这种类型的插画中,艺术家在一个数字画板上作画,允许光影之间的平滑过渡。艺术家可以使用图像层来创建复杂的背景和添加精细的细节。许多这样的图像使用栅格(或点)格式,限制了它们在失去质量之前可以放大到的大小。



矢量图形和插画


Image title


利用矢量图形,用数学方程进行设计。由于矢量图不像徒手数字绘图那样使用笔画,图像不像徒手设计那样平滑。然而,它们可以在不损失质量的情况下被炸毁。这些图像有清晰的形状和轮廓,非常受欢迎的网络插画。




儿童插画


Image title


儿童插画讲述一个故事,或给予一个故事,甚至一个虚构的存在的视觉表现。插图的风格取决于孩子的年龄。有些可能是复杂和现实的,而另一些可能是天真的。许多儿童插画色彩丰富,包含许多动作或活动。人物通常是明亮的,丰富多彩的和友好的。



社区书籍和图形小说插画


Image title


漫画书或超级英雄通常会让角色参与到行动中。样式通常很复杂,从线条图到喷绘图像都有。然而,漫画通常是漫画中最常用的风格之一。


漫画图片通常以小组形式出现,并经常涉及到对话框或叙事。有些词可能与动作结合在一起,比如POW!面板的大小以及它们出现的频率有助于设定故事的节奏。


书籍封面和出版物


Image title


在许多旧书中,例如那些侧重于地理或自然历史的书,插图都是手工设计的,然后再版。然而,现在,书籍插画被设计成许多不同的方式,然后印刷。


插画家经常被用来设计书籍的封面,以便使他们在书店中脱颖而出。封面常常暗示书中的内容,并给人以幽默、严肃、文化或运动的印象。


书籍插画从卡通风格的图画到历史或文化形象。虽然“不要以貌取人”这句话经常被重复,但它实际上是能卖书的封面,并能帮助书吸引正确的读者。


标志或品牌设计


Image title


logo是一种非常特殊的插画风格。通常他们的目标是提供有关产品的信息,使用颜色、字体或图像。流行的和容易辨认的标志包括耐克勾或与麦金塔相关的苹果。标识通常很简单,但却能抓住人们对产品的注意力,将其定义为属于某个特定品牌。


通常,这个品牌与想象中的品质有关,比如速度、力量或创造力,而商标有助于唤起这种情感信息。有时,企业不仅仅使用一个标志来辅助品牌建设。


许多公司使用吉祥物或员工形象来传达信息。这有助于超越鞋子这样的产品,让它在顾客心中有更深的含义。



发展你的插画风格的技巧


Image title


使用互联网,我们经常被介绍到插画在网上新闻文章,我们可以下载的音乐,漫画书,广告,甚至电子邮件。这向我们展示了广泛的样式,这是一件好事,因为它创建了广泛的示例供我们借鉴。


Image title


然而,如果你经常被许多高质量的插画轰炸,你如何发展自己的风格?这里有一些建议:



了解基本原则


Image title


虽然可以通过实践来学习插画,但这往往意味着要模仿其他已经形成自己风格的插画家的风格。释放你自己的创造潜力是非常重要的,这样你才能建立和成长,发展你自己的才能和分享你自己的信息。


Image title


没有复制,你可能会问“什么是插画师?”“正规的教育将教会你插画的基本原则、动机和技巧,这样你就可以用这些积木来创造你自己的设计。”


除了向那些已经在这个领域内的人学习,你还会学到一些哲学,这些哲学将使你能够加入其中,在你这样做的时候表达你自己的风格。



探索新的插画风格


Image title



如如果你觉得自己陷入了风格的窠臼,重复做了很长时间的工作,你可能想学习一些新的插画风格或技巧,进一步发展自己的作品。


Image title


然而,请记住,没有理由强迫自己进入不舒服的空间。如果你觉得停滞不前,或者不喜欢你正在尝试的工作,请记住,没有一个艺术家能够做所有的事情,如果有些事情感觉不太好,准备好继续前进。



尝试新媒体


Image title


如果你因为你的钢笔画而出名,试试丙烯酸树脂怎么样?转换你使用的媒介可能会给你的工作带来一个新的维度,专注于一个新的氛围,颜色或闪光。如果您已经使用多种介质,您可以尝试纹理、蚀刻、模板甚至金属。


Image title


您可以将您的格式从小型绘图更改为大型画布,或者从大型绘画更改为漫画书大小的图像。尽管一开始你的结果可能并不出众,但探索新的媒介会让你走出舒适区,走出你的风格窠臼。你的实验是值得的。


做真实的自己


Image title


当定义你的插画风格时,不要围绕当前市场上销售的东西来设计它。你的第一个委托是一个巨大的成就,从艺术中赚钱是值得的。


然而,在市场上分享你自己的风格,这样你才能发展自己的艺术身份。随着市场的不断变化,试图模仿或模仿当前的趋势会让你落后一步。


Image title


通过发展你自己的风格,你将不断地在你自己的技术上工作,改进和发展他们,而不是保持一个二流版本的插画家你钦佩。发展你自己的风格意味着分享你自己的意思,把你自己的想象带到前台。


没有这些,你就不会有创造性的能量来帮助你定义你的工作和保持你的动力。没有这些,你可能会失去你对插画的热爱。



最后说一下对插画风格的思考


有许多不同的插画风格或技术。有些是重复的。然而,理解不同的风格和它们所使用的技术使您能够了解每种不同设计背后的原则,使您能够探索和扩展您的插图实践。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

今年超火的放置类AR设计,送你一份大厂出品的设计指南(下)

雪涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

模型交互的设计分析及体验建议模型交互的作用范围及交互特点


当用户在真实环境的场景中稳定放下物体模型后,会有与模型进行进一步互动的需求。这类模型交互,通常会改变模型本身的物理属性。例如:

  • 移动:改变物体在环境中的位置。
  • 缩放:改变物体的大小。
  • 旋转:旋转物体便于用户不改变自身位置观察物体。
  • 删除/重置:让模型在环境中消失或出现。

基于目前的 AR技术和手机设备限制,目前的模型交互主要是通过屏幕利用二维交互驱动 AR 三维场景中的模型,从而与模型进行互动。屏幕二维交互设计,主要是利用二维手势和界面控件去达到交互的目的。例如:

  • 按钮/摇杆:在手机界面中设计按钮、摇杆。
  • 手势:目前技术支持的瞬间的手势操作、连续的手势操作。比如单指点击、单指长按、双指缩放、双指旋转等等,我们在日常使用APP常用的手势操作。

通过进行合理的分析设计,赋予这些手势和界面控件具体的功能,去控制三维场景中模型的移动、旋转、缩放。

模型移动的交互定义及设计形式

用户会与模型进行互动,移动是最为常见的一种操作行为。通过在手机屏幕的手势操作或按钮操作,控制模型在现实场景中的位移。

我们需要通过设计用户使用常用并熟知的手势与模型进行交互,利用二维手势驱动三维空间中的模型在X轴、Y轴、Z轴的位移。

放置模型后根据移动范围X轴、Y轴、Z轴,与在现实环境的虚拟模型进行移动互动操作,设计手段包括手势、摇杆的方式。可以参考以下五种设计内容:

  • 单指按住左右移动:模型移动以屏幕有效的外侧边沿为限。
  • 单指按住前后移动:纵深移动遵循近大远小的透视效果。
  • 单指按住上下移动:模型以中轴线上下移动,实际为改变模型所在平面位置,投影以暗示高度。(需注意,单指按住前后和上下移动不会同时出现。)
  • 点哪去哪:模型从原位置向目标位置移动。
  • 界面摇杆:若屏幕手势交互有可能对控制对象造成持续遮挡,或者无法很好的完成复杂操作要求,可以通过屏幕控件满足需求。

模型移动并非需要X、Y、Z三个轴均开放,实际是根据模型位移交互的具体需求去选择开放维度,并设计合理的交互方式去响应模型的移动。可参考以下案例:

模型旋转的交互定义及设计形式

在现实场景中除了移动模型的位置,还可以通过旋转360°来观察模型细节,不仅控制模型还能把玩模型,赋予模型生命感,让用户更好地与模型进行互动。设计手段主要是针对手势的设计。可以参考以下三种设计内容:

  • 双指顺/逆时拧:一只手双指顺时/逆时拧旋转模型。
  • 双指向左/向右滑动:一只手双指左右滑动。
  • 单指向左/向右滑动:一只手单指左右滑动。

旋转模型是为了全方位观察模型,让用户更好地把玩模型。通过以下案例来进行说明:

模型缩放的交互定义及设计形式

移动模型、旋转模型都是与模型互动,如果想深入了解模型则需要对模型进行缩放操作。设计手段包括手势、滑动条、缩放倍数的按钮。可以参考以下三种设计内容:

  • 双指扩展/捏合缩放:以模型的中心点等比缩放。
  • 拖动滑动条缩放:拖动滑动条在0-100%的范围内进行缩放,当标尺拖动到极限时,则模型不再响应缩放。
  • 固定缩放倍数按钮:倍数已经固定,限定缩放的大小。

双指扩展/捏合缩放是在二维手机界面被大家熟知的手势操作,而滑动条、固定缩放倍数按钮的缩放形式,在AR场景多用于游戏类产品,一般在模型放置时固定模型大小,进入游戏后不支持手持操作。可以参考以下案例:

有一种特殊的情况,当支持放置多个模型时,如何设计呢?此时,需要通过点击选中模型,模型进入选中态,与其他模型区分开,选中后进行的操作只作用于该模型,并支持删除模型的功能。

为了增加模型交互时体验的丰富和细腻程度,模型交互(过程中、成功后)会有相应的反馈设计。包括:模型自身的动效、符合真实世界的视觉表现、音效、震动、语音反馈等。

模型交互的设计原则和建议

1. 根据模型需要定义交互自由度

模型的交互程度,需根据特定模型的自身属性/产品的类型去定义,并非所有可交互类型都需要涉及。跟核心模型体验无关的交互可禁止或增加操作难度。例如科普类模型固定放置在平面后,需要便捷地旋转以查看模型细节,但Y轴移动查看的需求不大,部分场景可考虑禁止Y轴操作。又例如游戏类 AR 模型位置相对固定,更多的体验在于与固定模型进行的细部交互。

2. 手势设计简单且符合直觉

手势设计优先使用通用的方式,若没有通用的方式,则尽可能使用简单和符合用户直觉的方式进行设计。若违反该原则可能造成用户的理解和记忆障碍,需要加重用户引导,避免给用户造成操作困难。

3. 手势设计按需搭配且不可冲突

在设定模型的交互自由度后,可选择合适的手势进行搭配使用。但一种操作方式只可匹配一个交互结果,不可出现手势冲突。手势的搭配需要成套考虑。例如以下搭配:

异常处理的设计分析及体验建议

1. AR中异常情况的定义及设计内容

传统APP设计存在异常情况,比如无网络加载失败,登录发生错误等情况,那在放置类AR 中是否存在异常情况呢?

在放置类AR 场景中体验时,由于使用者操作不当,导致模型出屏或模型丢失,无法与其再进行交互,我们统称为异常情况。还有一种情况比较特殊,当正在体验放置类AR时,其它应用突然被唤起,再重新返回放置类AR 场景的处理。所以我们从交互设计层面需要对异常情况进行及时处理,正确引导用户解决困惑,给使用者一个良好的 AR 体验。

在与模型互动过程中,会出现异常情况,需要通过一些设计形式可以及时地帮助使用者解决异常问题,设计手段包括:文字、动图、语音、辅助图形、重置、复位,具体运用根据实际设计需求而定。可以参考以下设计内容:

  • 模型出屏:模型出屏后视觉线索引导用户找到模型,可以搭配文字、动图、语音等形式,按照设计场景来自由组合。
  • 模型丢失:当视觉线索引导未找到模型时,通过点击按钮将模型复位。按钮可以常驻或非常驻。

当发生模型出屏、模型丢弃复位的异常情况,根据产品类型和场景选择合适的设计手段,解决用户的困惑。结合具体案例以说明:

在异常情况中有一些相对特殊的情况,第一种情况:体验放置类AR时,手机来电后不得不离开,当再次返回时,根据技术能力来进行交互设计引导,保留场景及模型或引导用户重新获取平面建立AR场景。第二种情况:当进入AR场景后,模型是固定大小尺寸,在设计时,需要考虑让用户可以重新放置模型在新的位置,提供重置按钮。

游戏类、科普类设计时需要保留之前AR场景,有延续性的体验,技术做不到保留,则需要重新识别平面再次建立AR场景进行体验,如果支持放置多个模型的场景,建议不保留。当进入AR场景后,模型是固定大小尺寸,在设计时,要考虑界面上需要重置按钮,让用户可以重新放置模型在新的位置。下面结合案例具体说明:

此外,在AR内容体验中也会发生丢失平面的异常情况。这里的异常处理可以使用话术准确告知用户原因,还可以配以图片、动图、语音,更具象更清晰引导用户解决问题。需注意与平面识别引导的设计形式保持一致性,若平面识别未使用语音,则识别失败提示也不能使用语音,避免突兀感。可以参考以下设计内容:

  • 纯文字话术:通过简单明了的文字正确引导用户操作。
  • 图片/动图+文字话术:图片/动图诠释文字的含义,帮助用户理解如何操作。
  • 语音+文字话术:语音辅助文字,使信息更有效传达,从而引导用户操作。

2. 异常情况的设计原则和建议

模型出屏后需要及时引导用户找到模型,避免焦虑感。

模型丢失后需要通过设计形式的组合搭配,以操作便捷的交互引导用户。

建议在设计游戏类、科普类AR产品时,再次返回APP 需要保留之前的AR场景,保留延续性。

注意如果进入AR场景时无音效和语音,则异常情况引导不能出现音效和语音,避免突兀感。

平面识别失败后需要及时反馈用户如何操作,需注意设计形式保持前后一致。

放置类AR的设计核心原则

以上就是AR放置类交互节点的分析和设计建议的详细内容。我们希望设计师能围绕AR应用的真实场景,考虑到每个体验节点的细节,结合上文提到设计建议,在设计过程中关注以下关键目标,为用户创造更加友好和细腻的交互流程和体验过程。

  • 清晰:传达的内容清晰明了,不会产生疑惑或歧义。
  • 有效:能帮助用户成功达到交互目标。
  • 流畅:无停顿感,过程一气呵成。
  • 愉悦:用户感觉愉快、无压力。
  • 可控:可自主交互,过程反馈清晰,给用户尽在掌握中的感受。

希望通过我们提出的设计内容、设计原则建议能帮助到作为阅读的设计师、开发者们,在日后的产品设计、交互设计中能让用户在放置类AR场景有更好的体验,这也是我们编写的目的所在,为AI科技尽绵薄之力。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务


今年超火的放置类AR设计,送你一份大厂出品的设计指南

雪涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

AR的特点

  • 不隔离真实世界,而是将计算机生成的信息和物体叠加到现实场景中。
  • 借助AR设备,用户可以更自然地与增强现实环境进行交互,这类交互满足实时性,例如手势、语音。
  • 计算机生成的物体与真实环境无缝对接,并且用户在真实环境中运动时,也将继续维持正确的位置关系。

放置类AR的场景及类型

AR的场景多种多样,其中在手机设备的AR体验中,有一种基本且常见的场景:通过手机摄像头,用户在环境中放置虚拟物体(模型),用户与它有一些具体的互动操作,如移动、旋转等。

我们将这类场景统一称为放置类AR场景:放置对象可以是一扇虚拟场景的任意门,用户可走入门中互动;也可以是一件家居商品,用户可预览商品是否与室内环境搭配等。针对不同的放置对象和场景,设计侧重点也会有所不同。

基于真实环境放置虚拟模型,并与模型进行交互的AR场景。

放置类AR的交互框架及节点

无论放置的对象类型如何,用户打开相机,在屏幕中放下具体模型和进行互动的过程具有共性。我们把中间的完整流程拆分为了以下部分:

初始启动的节点分析和设计建议

1. 初始启动环节的作用

用户打开放置类AR功能后,进入环境识别前的过程,均属于初始启动的范围。放置类AR为何需要有初始启动环节,用户不直接进入AR场景进行体验?

由于技术和产品的需要,放置类AR初始启动承载帮助用户理解、AR素材准备,为用户带来更优的AR体验。

初始启动的流程中,包括启动页、引导页、加载页三个部分节点,三个节点可同时存在,也可只存在一个或两个节点,具体需要根据设计需求来决定。

启动页的定义及设计形式

在启动页游戏AR应用中比较常见,只有短暂停留。页面起到品牌露出的作用,或在启动APP后渲染氛围,迅速将用户带入。设计手段包含:音乐、音效、视觉、文字、动效,具体运用根据实际设计需求而定。可以参考以下两种设计内容:

  • 品牌露出。围绕 logo 进行设计,给用户强化品牌的印象。
  • 氛围烘托。围绕主场景/故事设计海报式的视觉设计,让用户对之后的AR应用的情节/人物/模型有初步印象。

启动页虽然不传递明确的含义和信息,但不同的设计手段可以给用户传递出不同的品牌调性和场景氛围感,其中音效和动效形式的应用会增加启动页设计的吸引力,下面将结合案例具体说明。

引导页的定义及设计形式

引导页促进用户进入后续的核心体验流程,传达有关体验的明确内容,根据 APP 的类型,引导内容有所不同。但不涉及后续具体细节操作。常见的引导包含:内容介绍、安全警告、体验建议、环境要求、玩法介绍、新手引导等。设计手段包含:语音、音乐、音效、视觉、文字、动效。具体运用根据实际设计需求而定。可以参考以下五种设计内容:

  • 产品介绍式引导。简明扼要地介绍AR应用的主要作用。
  • 辅助信息式引导。模型的补充理解信息,引导用户了解模型背景知识等。
  • 体验建议/要求式引导。简明扼要地提出会直接影响AR应用体验沉浸感的建议或者要求,以引导用户照做,获得后续最佳体验。
  • 背景故事式引导。通常以丰富的可视化形式展现于产品/模型交互相关的背景故事。
  • 试玩式引导。直接以某个模型举例,引导用户一步步进行交互,获得该模型的完整交互体验。

引导页有明确内容,根据设计需求可以考虑从产品介绍、展示辅助信息、在体验时的建议或要求等。每种设计内容有各自的适用场景、设计形式及优缺点,将结合具体的案例进行说明。

加载页定义及设计形式

加载页需要用户等待,加载时长根据加载内容的大小而变化。过程可能包含素材下载、模型加载、材质渲染、界面UI等。设计手段:文字、视觉、动效、音乐、音效。具体运用根据实际设计需求而定。可以参考以下五种设计形式:

  • 进度条式。常见的是浮层样式。感知最弱,通常设计样式跟随移动应用的框架样式。
  • 文案式。通过文案传达加载过程中的信息,让用户知道进行到哪个步骤了,后台正在做什么。但需要注意进程描述的文案不超过3条,且语言需要简单好理解,避免使用技术性语言迷惑用户。
  • 转场式。完整的转场页设计,视觉需要符合产品的整体调性,以保证整体的和谐统一。游戏中最常见。
  • 下载式。下载式的加载可取消加载,因为模型较大,需要较长时间进行下载体验。并且通常用户只对单一模型感兴趣,没有连续体验多个模型的需求。必须下载成功,才能进入后续的AR体验。
  • 静默式。将模型下载过程并入引导页,使用户无感知。该方法适合情节连贯的AR体验。

建议使用Jigspace、Lego AR、AliceARQuest等AR应用进行体验。

2. 初始启动设计原则及建议

整个初始启动环节包含启动页、引导页和加载页,整体的设计原则可总结为:

初始启动设计第一步是根据应用类型选择设计内容和形式

不管是启动页还是引导页的设计,都需要根据应用的类型去决定以何种形式给用户展现必要的信息。例如:游戏类注重用户的沉浸感,引导以故事介绍+体验建议为主。科普类的需要通过界面+三维的形式展示更多信息给用户,引导以产品介绍和信息补充为主。

启动页设计目标导向,不拖沓不无聊

根据APP类别选择恰当的形式,尽量简单直接,尽快进入后续内容页。游戏类可形式丰富,时长稍长。

引导页设计简单直接,使用多维度设计手段增加引导信息的丰富度

不管引导的内容是产品介绍,还是试玩引导,简单直接始终是目标,不在引导的部分占用用户过长的时间。另外也不能为了节约时间而使必要信息缺失,因此可以选择丰富的设计手段,让必要信息充分暴露。

加载页设计优先考虑无感知加载,否则根据加载时长使用不同形式

如无法无感知,则根据加载时长选择加载的设计形式。例如:时长较短的加载过程需要简单明快,不打扰用户。时长较长的加载过程需要过程明晰,给用户明确的预期。尽可能避免阻断式的加载过程。通过设计方法增加长时间等待的愉悦感,减少不耐烦。

场景搭建的节点分析和设计建议

1. 场景搭建环节的作用

AR应用启动后,经历完内容引导加载的过程,便正式进入了AR场景搭建环节。从技术的角度来说,想让模型稳定地融合于真实世界,我们首先需要让手机摄像头认识周围的环境,即为场景搭建的第一环节:环境的感知识别(环境识别包括平面识别、图片识别、物体识别等,本文聚焦在环境中的平面识别)。确定平面之后才能继续进行模型放置,直至用户成功把模型在真实环境中放下。

2. 平面识别的作用及完整节点

平面识别指通过对环境特征的感知,确定一个基于真实环境的平面。确定放置平面后,即可构建虚拟世界的坐标系,在虚拟世界中放置模型。平面识别是放置类AR体验的第一步,是后续所有体验内容存在的基石。因此在设计中我们需要保证平面识别的成功率,保证用户的顺畅体验。

这个环节本质上是个技术驱动的环节。程序启动后,系统以手机摄像头为原点建立了3D世界坐标系。相机界面打开后,系统开始识别拍摄到的真实环境。通过检测所捕获的图像之间的视觉差异点(即特征点),系统可以确立一个平面,并在世界坐标系中赋予平面一个位置信息,自此3D世界坐标系与真实环境中的平面建立了联系。找到平面后,系统仍会持续进行检测、更新平面的信息。

平面识别的成功需要用户将手机摄像头对准平面并移动手机,从而获得更多平面的特征点、确定平面。因此在设计中,首先需要引导用户做此动作配合;同时在用户动作中,应对识别状态给予实时反馈,让用户有把控感;识别失败时,有效的容错设计可以减少用户挫败感,提升识别成功率。设计节点可总结为以下几点:

动作引导定义及设计形式

动作引导需要引导用户做出配合的动作从而成功识别到平面。主要的引导内容是:引导用户将手机朝向一个平面任意方向移动,从而识别到平面。

表现用户动作的引导形式有多种,如:文字、图片、动图、语音以及这些方式的组合方案等等。每种单提示形式都有其各自的优缺点。如文字可准确传达信息但阅读时间较长;动图传达直观,但准确性不够等。因此建议使用组合方案的形式进行动作提示,结合单提示形式的优点,同时规避其缺点。可以参考以下2种:

  • 动图类组合引导。用动图直观展示用户需要配合做的动作,同时辅以文字说明,清晰直观。
  • 语音类组合引导。视觉+听觉双通道提示,使信息更有效传达。

动作引导建议使用组合方案来进行提示,可以根据产品类型和场景选择合适的方案。结合具体案例以说明:

平面识别中的定义及设计形式

程序识别平面的过程中,所花费时间往往受用户所处环境的影响,环境较复杂时,识别时间可能较长。因此建议在平面识别的过程中,反馈识别的状态,帮助用户了解系统的行为,知道自己所处的状态。状态反馈有两种建议的方式:

  • 动效过渡。用特征点闪动、平面延展等动效形式表示平面正在识别中的状态。
  • 可视化识别进度。通过量化平面识别进度来表示状态,让用户清晰了解自己所处的状态阶段。

平面识别中的状态反馈可以让用户了解系统行为,明晰所属状态。该步骤通常会和下一步合并设计。结合案例进行说明:

平面识别成功的定义及设计形式

平面识别成功后,建议可视化检测到的平面,给用户成功的反馈,同时让用户知道即将放置模型的平面在哪里。

  • 平面可视化。通过UI层直接可视化出识别到的平面,如使用网格等UI形式。
  • 模型放置位置的可视化。通过模型放置位置的UI侧面可视化识别到的平面局部,与下一步自然衔接。

平面识别成功的反馈是平面识别环节完成的节点,该步骤可能与之后的模型放置结合设计。结合案例进行说明。

平面识别异常的原因及设计

前文提到平面识别主要依赖对环境特征的检测,在一些情况下会很难识别到平面。当出现异常时,如何引导用户解决异常也是体验设计的重要内容之一。经过前期技术调研,平面识别异常的情况主要有以下几种:

  • 光线过暗,没有足够的光。
  • 光线过曝,光太强造成画面过曝。
  • 缺少纹理,扫描纹理很少的平面很难成功,例如扫描纯白的墙是无法成功识别平面的。
  • 图像模糊 ,如果用户快速移动手机,就会造成拍摄图像模糊,导致无法识别或识别不准确。

我们可以对每种异常进行具体的提示,也可以给出综合提示。这里建议的异常提示策略主要有两种:

  • 针对性提示。在用户长时间检测不到平面时,根据当前具体的异常情况给出针对性提示。如检测到光线太暗,就提示用户去光线充足的地方体验。
  • 总结式提示。若无法获得具体的异常情况,可总结、合并4个原因的解决方法进行提示。

进行提示内容话术设计时需注意:

  • 提示话术不能太技术,需要用户可理解;
  • 提示内容需保证用户可操作。

另外异常提示的设计形式也有多种:文字、图片、动图、语音、组合方案等等。在设计时需要结合「动作引导」的设计形式进行整体提示的组合方案设计。例如动作引导是文字+动图的形式,异常提示就不应该出现语音形式;动作引导是文字+语音形式,异常提示同样使用语音的形式更一致。

平面识别的设计原则及建议

平面识别的设计原则及建议:

  • 动作引导需要自然、直观、易学。减少用户认知成本。
  • 识别状态实时反馈,形式可以是视觉、声音甚至震动。给用户可控感、掌控感。
  • 需要有容错设计。避免用户因识别失败带来的挫败感。
  • 设计形式的一致性。动作引导与异常提示的设计形式需配套,保证设计的一致性。

模型放置的定义及作用

确定了放置平面后,下一步就是放置模型。模型放置指:通过一定的放置方式,让模型出现在平面的某个位置上。

在模型放置模块中,我们需要定义和设计放置方式以及放置位置。放置方式可以是自动放置,也可以是手动放置。放置位置可以是给用户体验效果最好的一个坐标点,即最佳放置位置;也可以是一片区域的任意一个坐标点,即可放置区域。

1. 放置方式的定义及设计形式

模型的放置方式主要有两大类:

  • 识别到平面后系统自动放置模型;
  • 经用户操作手动放置模型,可以是点击屏幕触发模型放置或拖拽模型进行放置。

可以参考以下三种设计形式:

  • 自动放置。检测到平面后,模型自动出现在场景中,用户无需做任何操作。此方式适合用户不需走动的AR场景,对模型的位置要求不高。
  • 点击手动放置。检测到平面后,用户需要点击屏幕触发模型放置。此方式适合场景互动类应用,需要用户在环境中走动,对模型位置有一定要求。
  • 拖拽手动放置。检测到平面后,将模型从屏幕的模型库中拖拽到平面上。

模型的放置方式主要有自动放置与手动放置,可根据不同场景设定适宜的放置方式,以下结合案例具体说明。

2. 放置位置的设计内容及建议

放置模型时,模型即将放置的位置需要根据具体互动场景进行设计,以保证用户的视觉体验和互动体验。如果模型放置过近,用户无法看到模型全貌;过远,需要用户走动才能进行互动的应用会增加互动难度。可以参考以下两种设计内容:

  • 最佳位置。自动放置场景和部分点击触发放置场景下,建议给模型设置一个默认最佳位置(具体的坐标点)。
  • 可放置区域。拖拽放置场景下,建议给模型设置一个可放置区域。

在做具体的放置位置设计时,需要考虑以下几方面的因素:

是时候布局 AR 了,它将彻底改变这个时代

雪涛


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

即使是进的技术,也通常有一个非常原始的起点。从最初的手机到如今大规模普及的智能电话,其实经历了差不多30年的演变。


随着硬件设备和各种技术的逐步成熟,每个人都想知道技术的下一个变革在哪里。在诸多被广泛关注的革命性技术当中,AR,也就是现实增强技术领域所发生的变化,是最引人瞩目的。

随着苹果、谷歌和亚马逊这样处于排头的公司开始在 AR 领域发力,这种技术正在逐步成为主流。

「AR能够将人的表现力放大,而不是孤立起来」——Tim Cook

虽然 AR 和 VR 经常会被混淆,但是两者其实并不相同。从关系上来讲,AR 和 VR 并非是对立的敌人,更像是血脉相近的堂兄弟。两者之间的区别其实很简单:在 VR 中,我们眼中的物理现实世界被计算机所生成的数字世界给彻底取代了。相比之下,AR技术让数字信息直接叠加在我们可见的物理世界中。如今很多人都已经借助类似 Snapchat 滤镜之类的东西感受到 AR 在现实生活中的运用。

这种集成于各种摄影和即使通讯类软件中的AR滤镜,和如今 iPhone 在设计和研发上隐约一脉相承。

Tim Cook 在接受采访的时候曾经提及,AR 在他眼中并非是一种孤立产品,而是一种核心技术。对于这一技术,Cook 是这样评论的:「智能手机是给每一个人的,我们没有必要将它孤立而片面地放在某一国家、地区或者某个垂直市场中来看待,它是面向每一个人的。我们认为 AR 是一个宏大的技术范畴,对此我感到非常振奋,因为在此基础上可以从方方面面来改善人们的生活。」

根据 Deloitte 所发布的一份报告,在年营收超过1亿美元的企业中,近 90% 都已经在其业务或者APP 中开始应用AR或者VR技术。就目前的数据来看,他们这方面的财务状况也相当乐观。到2023年,AR 和 VR 相关的全球市场估计将会达到944亿美元

当然,另外一方面企业和品牌也在竭尽全力地挖掘在未来商业领域的潜力,这也是他们推动AR技术的诸多原因之一。

接下来,我们可以深入讨论一下 AR 的内涵外延,以及它会如何改变我们和世界的互动方式。

AR 如何改变我们的世界

我们生活在一个大数据所驱动的世界当中,大型的结构化和非结构化的数据,包裹着我们地每一个动作。这些数据本身就已经是一个很大的话题了。设计师和技术革新者们一直在思考如何理解这些信息,并且合理地运用它们。

那么AR 将会如何切入到其中呢?

简而言之,数据是二维的。它存在于计算机屏幕上,而物理世界是三维的,这两个世界将会怎样协调一致?AR 的作用就在这个时候发挥出来了。

基本上, AR 技术所充当的就是将数字和物理现实接驳在一起的那个接口。AR 所带来的是一个全新的技术范例。在这个新领域当中,数据的复杂性将会被分析和转化,以更加直观的交互式图形和动画所替代,覆盖在现实世界层以上。

在这一点上,AR同法国哲学家鲍德里亚所梦寐以求的超现实主义在精神内核上高度统一。对于有想象力的技术革新者和科技企业而言,AR 技术的潜在应用场景是无止境的。这一技术将会被大规模普及开来,在未来,你不必像现在这样仅仅只能在游戏中体会这一技术。当然,像亚马逊和 Facebook 这样的商业巨头也开始认真探索如何更有意义、以更有影响力的方式来使用 AR 工具。

而这也是大势所趋。下面我将会拿出一些更为创新的方式,为你呈现 AR 技术是如何具体地改变我们的生活的。

  • AccuVein 使用 AR 技术帮助医生和护士更为精准地判断患者手臂静脉的位置,而不用猜测。通过热成像技术识别静脉位置,然后借助 AR 技术将静脉位置呈现处得来,从此避免扎漏的情况。
  • 波音公司使用 AR 技术来辅助安装飞机机翼,避免出错,这一技术已经非常成功了。
  • 通用电器 GE 使用 AR 技术来帮助员工提升效率。通过使用 Xbox 和 Kinect 运动跟踪器,员工可以更快完成复杂的布线,将指令投射到不同零件上,而电子传感器也能提供实时反馈,确保了这一机制能够构成合理有效的闭环。

原本在游戏中作为噱头的 AR 技术逐渐脱颖而出,在通信、商业和建筑领域开始展现出无尽的潜力。

而最能感受到AR的这种影响力的,是在品牌和营销市场上。

为什么品牌需要在意 AR 技术?

由于 AR 能够承载复杂的数据,并且将它们转化为可同现实世界进行沟通的交互,身为用户,我们能够从中吸收更多的信息。换句话说,AR 将可以更好、更快更加有效地影响用户的决策机制。我们如今常见的社交媒体和大量的信息,已经让人疲劳了,而 AR 这种全新的切入方式,将可以改变营销,进而影响世界。品牌能够在 AR 的协助下以前所未有的方式来宣传自己和产品。

举个简单的例子。AR 所带来的体验并非传统的二维平面的图像,它让用户可以走进商店,尝试产品,帮你判断产品的实际效果,它用 X射线一般的视觉帮你更好地了解眼前的一切,把所有的可能性明明白白地展示在你眼前,甚至提供360度无死角的视觉。

对于品牌而言有什么好处?

  • 更强的参与感:互动式的AR能让品牌更直接地同受众进行互动,帮助他们体验产品,并且发现他们通常无法看到的新功能。
  • 品牌知名度提升:通过出色的 AR 体验,品牌在用户心目中建立漆良好的口碑,由于 AR 所提供的实时的体验,因此在品牌价值上的转化也更加即时有效。
  • 创新的用户内容产出模式:新的用户产出模式让品牌能够更上一层楼,通过整合用户提供的实时数据,甚至可以让用户离开门店之前就能作出相应的调整和反馈。
  • 给用户更强的信心:通过实时的产品互动,用户将会更加准确地获得体验,迎合他们的期待,给用户决策提供更强的信心。

「在后网络时代,AR就是狼来了的故事——大家早已听说过,但是很少见到足够优秀的呈现形式。」——Om Malik

UX设计师如何应对这一挑战

对于一线的设计师而言,AR 技术是一件听起来非常令人兴奋的事情。但是事情的前后逻辑我们确实需要仔细捋一下。Pokemon Go 的成功到底是源于AR技术的加成,还是源自于品牌本身原有的吸引力?

另一方面,AR 技术改变生活各方面的巨大潜力直到现在才刚刚显现。别忘了,移动端设备的普及和成熟是经历了超过10年的酝酿,直到今天才说得上是比较成熟了。对于 AR 而言,想要立竿见影地看到某种效果,你可能要求有点高。

AR 是一种全新的媒介。设计师面对的最主要的挑战,是要进入三维空间进行思考。在接下来用户要如何同APP进行交互?他们会做出什么样的动作?附近会有其他的人和物体吗?这种情况下用户会做什么?它并非看起来那么简单,本质上这是一次概念上的彻底飞跃。设计师需要在脑海中开始反思这件事情了。

当然,只有时间能够最终证明 AR 是否会成为 iPhone 一样划时代的产物。一切是会因为 AR 彻底改变吗?又或者像 Hi-Fi 一样进入小众市场,逐渐收缩?可以确信的是,AR 技术是有相当大潜力的,这就是为什么你会听到越来越多相关的传闻。一旦一项技术开始每天都被提及,那么一切就皆有可能。我们很可能将会在未来以一种截然不同的方式来体验这个世界,谁敢轻易否定呢?

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务


日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档