首页

这两天火遍全球的沉浸式新媒体设计,是如何让想象力爆炸的?

资深UI设计者

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

在传统行业打滚数年后的设计师,总是难以回避灵气和匠气的博弈,日常创作逐渐走入某种定式,失去了挑战 Brief 的胆量和与打破规则的底气。与此同时,异军突起的新媒体互动设计却似乎毫无包袱,以一股体验式的视觉狂潮快速站稳了自己的商业位置,既保留了创意人的酷,也能为新型体验创造服务。

2012年,Random International 的作品《雨屋》正式开启了大众对沉浸式体验的认识,近年随着 teamLab、Punchdrunk 等互动体验展演的火爆,沉浸式新媒体设计不仅成为了炙手可热的包装概念,同时也透露出人们对于新型互动的好奇心与强需求。提起新媒体作品,我们通常会自动联想到黑科技和脑洞,却容易忽视这些作品除了具有前卫的艺术性表征,同时也暗含着严谨而延展的设计内核。

2019 年初夏,Mindpark 邀请了两位数字媒体界的先锋代表:Moment Factory与Studio Swine,和我们共同探讨了沉浸式设计在商业性实践与实验性探索上的思路与价值。

透过数字篝火,人们重聚在一起

总部位于蒙特利尔的 Moment Factory 是一家专业打造沉浸式互动体验设计的多媒体公司,以跨界和合作著称的他们拥有一个超 350 人的庞大团队。自千禧年成立以来,MF 已经成功打造了近 400 个场景设计商业项目,客户包括微软、索尼、NFL、麦当娜等,形式从立体光雕、数据互动到空间展览、演唱会工程都样样精通,几乎每个作品在面世时都颠覆了人们对惊艳的定义。

△ Demo Reel ©️Moment Factory

Moment Factory 的业务主要分为三大模块:内容、互动与场景。植根于公众场域创作的他们,善于根据场地的特点策划和开发因地制宜的故事内容,继而在声光电的效果设计上加强环境与人之间的联结,最后两者结合形成互动闭环以构造出全局的沉浸式体验。

△ ©️Moment Factory

Moment Factory 的工作流也基于这三大模块多线程并行。与传统行业不同的是,客户对于 MF 而言并不是甲方爸爸,而是项目的共创者。他们会邀请客户参与并确认每一个设计环节,一来可以增加客户对项目的认知与信任度,二是考虑到多媒体物料制作成本较高,也预防阶段性推翻对项目进程造成影响。

△ ©️Moment Factory

因地制宜的创造性内容

「Aura」是 Moment Factory 耗时超过一年,动用超过 100 人团队制作的梦幻级沉浸式光雕作品。它集合了极其的视效投影技术及独立打造的交响乐声效,为蒙特利尔圣母大教堂打造了 40 分钟震撼而灵动的超感官体验。

△ AURA ©️Moment Factory

基于天主教堂自身「诞生-受难-升天-审判」的故事脉络,AURA 的设计概念以 the Path of Light(光明之路)为主线,并根据建筑动线分为 the Birth of Light(光的诞生), the Obstacles(苦路),the Open Sky(升天)三个章节。

△ ©️Moment Factory

在确定故事线与情绪板同时,考虑到教堂内部结构的复杂性及壁画的还原准确性,团队使用 3D 扫描重塑建筑模型,并进行了大量的动效推演及真实光影测试,最终利用自研的工业投影体系,让建筑实体与投影内容的结合达到型与神的高度统一。

△ Behind the Scenes ©️Moment Factory

在细节的雕刻上,作品对主殿圣像的层级结构进行分解,营造出空间错位的效果。另外也对苦路长廊的画像进行精准投影,以光的扩散作为线索,一步一步引导观众的视线,展开故事叙述。

△ Behind the Scenes©️Moment Factory

无论是故事设定还是效果设计,Aura 都根据教堂题材顺势而为,在不破坏建筑原有气质的前提下,放大环境硬件中的可用元素,从而达到「概念-动线-效果」的全方位合一。视觉互动的起承转合不但将观众的沉浸式体验最大化,同时也升华了圣母大教堂的神性与历史精神。

环境与人的联结

LAX 项目是 Moment Factory 在 2013 年为洛杉矶机场打造,以时间旅行为主题的商业项目。它既是全美最大的机场多媒体环境设计项目,也是品牌体验拓展的空间实验。

虽然洛杉矶机场整体以「时间旅行」作为品牌主题,但出发者和到达者的动线终归不同:除了机场主体以外,旅客的体验还涉及到另外两个环境——旅行目的地和洛杉矶。因此,本项目根据不同的触点(登机口与到达大厅)针对性地设计了不同互动内容,让出发者与到达者都能找到与环境的联结和延伸,使整个机场体验形成通路。

Moment Factory 为登机口都设计了实时更新的互动墙,不但能捕捉行人的动态并融入画面,更能实时切换目的地的本土特色内容作为动画元素,使准备出发的游客身未动而心先远。

△ THE PORTALS ©️Moment Factory

与登机口不同的是,到达大厅的巨幕内容则根据机场的建筑结构设计,以跳水、跳跃等蒙太奇片段营造出洛杉矶惬意、清爽、惊喜的城市品牌形象;系列影片也同时在长廊和行李大厅中展映,以保持品牌语意的一致性与连续性。

△ WELCOME WALL©️Moment Factory

在机场中央,MF 团队还打造了一个呼应主题的重点装置——时间钟楼。除了播放实时更新的故事短片外,设计师考虑到屏幕过于虚拟和冷感,故以机械咕咕钟为灵感,让钟楼和环绕屏幕在准点切换真人报时舞蹈,既达到提醒旅客时间的作用,也让他们在候机的空隙获得环抱式的娱乐化体验。

△ TIME TOWER ©️Moment Factory

从手稿到成型,LAX 项目历时 16 个月,在三个大洲拍摄了超过 4 小时的视频内容。而且因为机场常年不能关闭,也极大增加了项目的施工与调试难度。

△ ©️Moment Factory

《通用设计法则》中曾提到,「沉浸」即是让人专注于当前环境,并在设计者提供的目标情境中进行互动而获得愉悦,从而忘记真实环境的存在。Moment Factory 十分善于提取及串联实体环境与观众之间的触点,利用不同的互动技术对每一个触点进行感官的复合强化,并以完整的叙事结构对品牌进行包装,才屡屡在 Lumina、Kontinuum 等系列作品中打造出连贯又有趣的体验心流。

对互联网产品设计而言,我们能调用的触点也许仅有区区一屏,但用户在获取虚拟体验时的沉浸式感知却和实境式体验是相似的,因此设计师也可以参考以下几点:

  • 利用五感塑造场景:不仅从视觉层雕琢,更要调动触觉(设备震动、阻尼感)、听觉(声效、音乐、声场)等感官以模拟真实世界中的物理反应,打破虚拟环境和实境的时差和次元壁。
  • 减少环境干扰项:收起不必要操作,最大化界面视野,让用户尽可能全程聚焦在目标场景。
  • 强化叙事性引导:利用开屏动画、转场动效、角色故事等元素增加场景代入感并进行自然过渡。
  • 即时性反馈:给予用户简单而反馈感强的任务,以延续他们对互动的把控感和积极性,从而增加用户在环境中逗留的时间和意愿。

We do it in the public. We bring people together.

过去,由于娱乐产品的复制成本较高,人们大都以群体形式到电影院或剧院里进行活动,因此促进了社交互动与环境共融。但随着媒介的升级,娱乐不仅从大众走向个人,同时也将个人和群体进行隔离,使个人和社群、环境之间的互通性越来越弱。Moment Factory 坚持在公共场域中探索新型的体验形式,正是因为他们坚信娱乐活动虽然可以由个人进行,但沉浸式的情感体验仍旧需要透过真实环境下的社交互动来完成。利用数字篝火为体验设计融合升温,才能让人们真正地共聚与共享真实的情感和生活。

用转瞬即逝创造世界

如果说 Moment Factory 利用新媒体在环境创意、娱乐性与商业价值之中找到了发展的平衡,Studio Swine 则是利用新媒体设计的实验性为人们开辟了观察世界的全新角度。

Studio Swine 中的「SWINE」全称是 Super Wide Interdisciplinary New Explorers,意味着无限跨界与探索主义。它由新派英国艺术家 Alexander Groves 及日本建筑师 Azusa Murakami 于 2011年创立,作品领域涵盖思辨设计、装置艺术、电影、雕塑等。他们的创作以独特的世界观、空间感及美学体系征服了世界各大顶尖艺术展览,伦敦V&A博物馆、巴黎蓬皮杜艺术中心与威尼斯双年展等都曾邀请他们展出。

△ ©️Studio Swine

在西方,越来越多像 Studio Swine 这种设计师团队选择以跨界的形式进行研究及创作,他们也不再拘泥于设计与艺术之间的所谓界限,逐渐衍生出了新的设计流派与理论。传统行业的设计焦点往往会落在商业策略与 Design Thinking 上,而新形态的设计则更多地向批判性与未来性上倾斜。

△ An Unresolved Mapping of Speculative Design ©️Elliott P Montgomery | EPMID.COM

2013 年前后,英国设计师 Anthony Dunne 和 Fiona Raby 提出了 Speculative Design(思辨性设计)来概括此类在艺术与设计之间的交叠学科。对比起传统设计基于现有场景来解决现有问题,思辨性设计旨在扩充场景的可能性,以引导人们想象和思考未来社会生活、生产的状态或矛盾。Speculative Design 以设计作为跨领域的思维实验及方法,不仅突破了媒介、工艺的疆域,选题上也常常挑战甚至跳脱社会伦理、文化定式、现世哲学的桎梏,而这种敢为人先的创作理念也是此类作品争议性的源头。

△ Redrawn from Speculative Design Practice ©️ Ivica Mitrović | Speculative.hr

NEW SPRING

New Spring 是 Studio Swine 与 COS 合作的装置互动项目,作品以意大利建筑的拱廊结构及樱花树在四季中的形态为意象设计,并将气泡比喻花的绽放与凋亡,旨在讨论时间与物质的瞬息性。在创作伊始,设计师提出了一个假设场景:在未来,物质将越来越多,而空间越来越少,植物与园林可能朝着机械化、人工化的方向发展,那么我们要怎么去模拟四季变化下生物从生到灭的过程呢?

△ COS x NEW SPRING ©️Studio Swine

为了全感官地营造未来园林的场景感与沉浸感,除了樱花树的意境外,Studio Swine 更与化学家合作,研制出带有混合香味且不会立即爆破的气泡,为互动者带来意料之外的触感体验。在听觉上,编曲家 Gavin Singleton 也特意为展览场景打造了专属的音乐EP。

△ ©️Studio Swine

2018年,Swine Swine 再度利用气泡作为原型,以世界上最小且最古老的生物之一——蓝细菌的光合供氧为主题,制作了高达 9 米的大型环境装置 Infinity Blue 来模拟地球大气层的历史,礼赞蓝细菌赐予了地球第一口呼吸。雕塑中内嵌 32 个旋涡气孔不断喷发出圈装烟雾,用以比喻光合作用生产氧气的过程。

△ Infinity Blue ©️Studio Swine

HAIR HIGHWAY

和场景设计不同,影片同样也是另一种常见的沉浸式表现手法。近几年越来越多的新媒体作品采用纪录电影、开放式互动短剧、VR 短片等形式对作品进行呈现:一是影片能突破作品篇幅,更全貌地介绍项目背后的概念与调研故事;二来基于自媒体环境的蓬勃,作品能以较低的复制成本获得更高的传播度;三则是影片天然的叙事结构能快速激活观众的代入感。

Hair Highway(丝绸之路)是以纪录片与家具设计复合呈现的极富争议性的新媒体实验。Studio Swine 意识到在自然资源逐渐减少的情况下,人类毛发作为一种代谢物质,也许可以成为新型的可再生资源。基于这个洞察,他们尝试以头发作为原料去创造一种近似木料的全新媒材,以挑战现有的美学标准和诠释物质的可能性。

△ Hair Highway ©️Studio Swine

亚洲人头发的生长速度是热带硬木的 16 倍,而中国作为热带硬木最大的进口国也是人类毛发最大的出口国,因此也被他们选为了项目的起源地。两人在创作过程中不仅探访了 9 个位于山东的假发工厂,更拍摄大量假发制作的工序与买卖流程作为纪录片的生态调研资料。

△ ©️Studio Swine

Hair Highway 以丝绸为概念,用树脂封印毛发制作出一种模拟琥珀、玳瑁纹理的板材,并糅合清代及上海 20 年代装饰主义的纹理设计与西方抽象几何的轮廓特征,创造出了一套极具古典神韵的系列家饰。

△ ©️Studio Swine

不破不立,Studio Swine 的作品始终紧扣着三个思辨性的特征:探索时间性、想象未来社会的形态、创造新型的物质组合,以新锐的角度挑动人们的思维的底线,而量产和商业化却从不是他们眼中的第一要义。或许怪诞,或许不安,但设计在他们的哲学里只是一条探索世界的未竟之路,而不是一个实用主义诞下的结果。

新媒体的特点之一,就是他基于时间的艺术形式。新媒体的表现很多都是时间累积的缩影,每一帧,每一个图层,每一个数据库的建立,以及观众在与之互动的时候也同时在进行一个时间的旅行。我希望互动是更加内隐和内省的,而不是仅仅基于科技的娱乐程度。——著名新媒体策展人 Richard Castelli

从对娱乐效果喜闻乐见,对创作理念心悦诚服,再到如今被作品激活出新的灵感、批判或讨论,受众与作品之间的互动升维或许才是创作者最乐意观望的局面。沉浸式新媒体设计为人们提供了孵化情感和思想的超感官空间,而互动场域中的人才是成就作品的最终环节。

真正的沉浸是思维的沉浸,环境的营造只是想象力的引路人。

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

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

资深UI设计者

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

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界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

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

资深UI设计者

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

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

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

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

荷兰 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具有更好的表现力及更易于使用,尽管具有如此大的潜力,但可能由于它是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 设计趋势:图形篇

资深UI设计者

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

为了和大家分享关于设计趋势的见解,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界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

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

资深UI设计者

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

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


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设计,送你一份大厂出品的设计指南(下)

资深UI设计者

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

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


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

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

基于目前的 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界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务


日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档