首页

美团为何一夜之间变“黄”了?

资深UI设计者

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

在昨天引爆互联网的一个热点想必就是美团 APP 更新了,已经刷爆了朋友圈,相信大家也都看见了。

△ 文中配图均来自美团官方和产品截图,仅作为设计交流使用

这是在设计群看见的一个启动页视频,第一感觉就是品牌色由「青绿色」变成了「黄色」,采用 C4D 渲染出各种使用场景和产品的各种服务品类,表明产品内部依然囊括了吃喝玩乐等一系列服务。风格比较年轻化,第一感觉还是蛮不错的,所以我立马去 App Store 升级了产品,发现 APP 启动图标也变了。

△ APP图标目前是第二个,猜测是想给用户一个过渡期

为什么美团突然要进行品牌升级?

官方给的说法是:为了「将所有线上线下曝光进行视觉化统一,流量到品牌的一体化」。同时希望以统一品牌色为起点,未来实现从线上到线下,从流量到品牌的四者一体。

确实是这样,就是为了品牌的统一,这就是这次升级的核心意义。这是典型的由公司经营战略为导向而进行的一次产品升级,这样做也是为了抢占用户心智,为了以后让人一看到黄色,就只会想到美团,而不是其他品牌,毕竟现在的产品太多元化了,每家大厂都应该有自己的一个独有的品牌色,这样品牌就不会过于分散。比如微信的绿色、淘宝的橘黄色、天猫的红色……如何让用户第一时间就想到你的产品,对于竞争异常激烈的今天这真是太重要了。

说到用户心智,前两天看见一篇关于品牌的文章,里面提到:早期的品牌战略是「定位理论」,它告诉了我们:品牌的竞争,是关于潜在用户心智的竞争,如今这一理论也一样适用。

为什么品牌升级,只升级品牌色?

因为品牌颜色的变化是用户最直接、最容易感知出的变化,品牌色是最容易吸引用户,占领用户心智的方式。

为什么是黄色,而不是青绿色?

为什么是黄色,而不是将所有色系都变为青绿色?

我们都知道,美团升级前是「青绿色」、美团外卖是「黄色」、大众点评是「橘黄色」,是各自不同的色系。

美团的四大业务支柱是:外卖、到店、酒店&旅游、出行。其中外卖的流量最大,每天外卖的订单有数百万计,这是一个巨大的流量,所以变身外卖「黄」也是为了流量和品牌更好地绑定。并且大街上奔忙的穿黄色衣服的外卖小哥,你一眼就知道是美团外卖,这些都是无形中的广告,也早已扎根于你的心智之中。相信很多人心中的美团 = 美团外卖,所以变成「黄色」是最合适的。

但是「美团黄」和美团外卖的「黄色」还有所区别,只能算是一个色系,美团外卖的黄色更显年轻一点。而「美团黄」官方的解释是:黄色代表着热情、温暖,象征着美团始终坚守「帮大家吃得更好,生活更好」的使命,致力于为用户提供更优质、有温度的一站式生活服务,帮助人们向美好生活靠近。

下面再来对比一下产品页面 UI 的变化:

△ 升级前主页面UI

△ 升级后主页面UI

单从页面对比来看,整体布局结构没有什么变化,不出所料,主要的区别就是将新的品牌色「美团黄」进行了视觉上的强化。

这种大块的品牌色比较突出的设计似乎和当下流行的简洁优雅的设计风格背道而驰,似乎只有在电商产品中比较常见,但我认为,这样的设计应该只是暂时的,相信在经过一段时间占据了用户心智之后,美团势必会顺应当下的流行趋势,在此期待一下。

去年被收购的摩拜一直亏损严重,继改名为「美团单车」之后,扫码骑车入口也整合进了美团 APP,如今为了让线下场景都统一成一个色系,单车也要变成黄色了:

对此,网上有人喊话美团:顺便把小黄车也收购了吧,毕竟黄色的单车给我们的第一印象就是 OFO,这样线下黄色的单车就全都是你家的了,我们的押金也就有着落了……

另外,还有一些其他线下场景品牌色运用:

这次美团的升级,不管你喜欢与否,它已经发生,就像年前的微信升级一样。一开始势必会有很多人不习惯,这其实也是受用户心智的影响,我们都会带有一种现状偏见来看待事物的新旧变化,这是很正常的心理状态,但是过了一段时间以后,都会淡忘,直到习惯,都逃不过「真香」理论。

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

浅谈高质量的Banner设计

资深UI设计者

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

想要设计出高质量的banner,首先你得了解什么是banner?

banner是网络广告中最常见的广告形式。一般也被人们称之为网幅广告、旗帜广告、横幅广告以及大标题广告等等,它可以是静态的图形,也可以是动画的图像。其作用就是为了体现产品的中心意旨,利用鲜明的内容去表达最主要的情感思想, 从而给整个产品起到宣传的效果!

在如今炙手可热的互联网领域,banner被广泛运用在各个不同类型的互联网平台间,例如网页设计,APP设计中都经常会使用banner这一载体来展现商家的活动以及的产品等等,因此banner在如今的互联网行业里越来越被很多的公司重视,对设计的要求也就越来越高,那么初入行的设计师该如何设计出高质量的banner呢?

一.首先了解你的banner设计需求

1.确定banner文案的内容,以及将会涉及到的设计素材、包括准备投放在什么平台以及它的尺寸大小,这些前期的工都是需要我们和需求方沟通确认定夺下来的。因为这些基本的因素如果没有被确定下来,1.会阻碍设计师的设计灵感!2.在设计的过程中也会给设计师带来很多不确定的因素,导致大大增加改稿的几率,所以前期的准备工作我们一定要做好。

2.确定banner是为了实现什么目的而设计

例如需求方给到的信息是「秒杀」,那我们首先需要了解的就是这个秒杀活动针对的产品是哪一类产品,针对的人群又是哪些,这些不同的因素都会影响到设计的整体风格以及使用元素的搭配。同时还需要考虑到需求方希望这个banner,它能起到什么样的效果以及作用,是引流还是曝光新品又或者是促进交易等等,这些需要和需求方在前期全部确定好,以免在设计的过程中走很多不必要的冤枉路。

二. 确定banner的设计风格

在这里我们可以单独把设计风格理解成小说里各个人物的性格特点,不同性格特点的人物所散发出来的魅力也是不相同的。沉着,紧张,外向,阳光,忧伤等等,这些词语代表着不同的族群,也代表着不同的情绪状态。每一种状态的表现手法肯定也是不一样的,下面就简单介绍几种常见的风格。

1.典型词语:冷傲、时尚      

这一风格最大的特点就是文案特别精辟。色系基本都以黑白灰为主。拍摄的素材呈现很高逼格的感觉。

2.典型词语:活力、年轻 

这一风格最大的特点就是朝气蓬勃。整个视觉的色彩感和饱和度,纯度都很高。版式的设计也非常的多样化

3.典型词语:素雅、安逸                                                                                           

这一风格最大的特点就是大面积的留白。色彩以灰色以及白色系为主,多运用在一些茶品、家居,纺织棉麻用品等等。

4.典型词语:节假、促销

这一风格最大的特点就是热情洋溢,色彩大多以红、黄、橙偏多,画面很少有留白的空间,大多数都非常丰富饱满,文字刚硬,有菱有角,视觉的冲击感很强

5.典型词语:萌萌哒、甜蜜

这种风格的banner使用点缀和矢量手绘的元素相对于其他类型的banner会较多,整体色感也大多呈现暖色调,给人一种很软的感觉。

6.典型词语:智能、科技

这一风格最大的特点就是概念感和未来感特别强烈,整体颜色多用于蓝,黑色等偏冷的色系,同时光晕、金属、线条和点等元素都是这一类型banner常用的点缀方式

三. 搭建banner的构图框架

确定好需求和设计风格之后,首先要做的就是内容确定一个大概的构图样式之后再去丰富版式里的设计细节

1.左右构图

这种构图在所有banner的设计中最为常⻅也最易掌握,同时也最不易出错,它分为2种形式,一种是左图右字,另一种是右图左字

2.左中右构图 

这种构图相比较左右构图形式上会更加丰富些,但是比较难把握。它也分为2种形式,一种是左图中字右图,另一种是左字中图右字,有时我们想要重点突出⼈物,也可以把文案放在画面两侧让人物居中

3.上下构图 

这一类型的banner一般为上字下图,虽简洁但却有很多的局限性

4.以⽂字居中的构图

这一类型的banner更多的是为了突出文字的内容,多用于大促一类的banner,同时对字体的设计也非常讲究,好的字体设计往往会更加发挥出这一构图的优势

5.多角度构图 

多角度构图最难把握,他属于一个不规则的构图,但却最具有设计感的层次感。这一类型的构图丰富的视觉感给人眼前一亮的感觉,也更容易吸引住人的眼球

四.确定配色方案

好的配⾊一定程度上决定了这个banner质量的好坏,一般运色最基本的方法大致可以分为2种:

一种按照配色规则进行配色:同色系、类似色、补色系。

1.同色系

同色系也称为单色,这种色系的搭配在产品本身颜色比较统一的情况下,可以吸取产品上面较近的颜色,再针对产品特性添加一些合适产品调性的辅助元素,让画面的整体变得统一和协调。

2.类似色

类似色 相比较单一的颜色,它的丰富性和可变化性都比较大,在基于banner整体的主色调以后通过添加辅助的与主色相似的颜色,使整个画面变得丰富活跃起来同时这些配色方式也相对比较好掌握一些

3.补色系

所谓补色,就是在色相环上相距180°的色相,如红色与青色、黄色与蓝色、绿色与品红色等色组。补色之间的调和搭配能够给画面带来华丽、跳跃、浓郁的视觉美感,然而,若补色以高纯度、高明度、等面积搭配,会产生比对比色组更强烈的刺激感,使人无法接受。所以相对于类似色,往往我们利用补色做设计时会考虑补色之间的面积比例,纯度比例,明度比例和空间间隔的比例,平衡画面之间的视觉感!

另一种就是将画面做反差的设计

一般我们会把素材变成黑色感的照片,在然后根据文案内容和整体banner的气质选择一个合适的颜色,已达到突出画面视觉点的目的,让主要的东西可以凸显出来,保证一个视觉冲击感。

五.字体设计

设计banner时候,千万不要把一行文字直接放上去,这样会使你的banner看起来特别的愚蠢,整体的视觉效果也会看上去很无趣、很僵硬。因此我们需要给不同的banner做不同的文字设计,去吸引我们的用户。下面就教大家几个字体设计的方法。(注意商用字体的版权,这很重要)

1.选择合适的系统字体

好的系统字体有时候也可以让banner更具有观赏性,但前提是字体的气质必须和banner的整体视觉气质统一,例如素雅、安逸的banner风格就不适合用粗犷硬朗的字体,而宋体和细黑体这一类字体则表达了文艺、品质的气质。

2.文字排列的倾斜与斜切

有时候设计banner,需要更有视觉冲击力的表现方式,我们可以尝试将文字进行倾斜或斜切透视等处理,因为普通的文字排列形式有时候过于平稳,过于有矩,反而凸显不出来整个banner的动感和层次感。

3.在相对独立的区域中表现文字

在背景颜色比较复杂,或者背景有较多产品需要呈现的时候,我们可以尝试将文字放在一个相对独立的区域或色块中,这样更便于文字阅读,也可以突出主题内容。

4.字体变形的魅力设计banner的时候,设计师经常用到文字变形,将原有的系统字体进行2次加工设计出一种新的字体。这种变形的手法可以大大提升文字的视觉性和趣味性,让整个画面的气氛被烘托得相得益彰。

5.中国风文字

有时候我们设计一些历史文化题材的banner,或者中国传统节日的banner,经常会用到一些中国风的元素,例如毛笔字、粉笔字、钢笔字,书法字等,而这些元素我们也可以把它运用在banner的设计当中,让banner的特性感更加的明显

六.画面内元素的点缀

点缀的元素常见于点、线、面或者一些手绘矢量元素,在确定基本成形的banner后适当的加入这种出彩的小元素会让画面的设计细节感和层次感更加丰富,可以提升整个画面一定程度上的品质感和细腻入微的美

备注(本分享中所有的图只用作于文字说明,不产生任何商业用途)

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

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

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

移动端和PC端交互设计上的区别

资深UI设计者


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

这篇文章我们来谈谈移动端和PC端交互设计上的区别。



Image title


经常遇到一些设计师,他们之前负责的都是pc端产品,突然改做移动端,会不自觉的把pc端的一些设计理念“移植”到移动端,出现了水土不服。有经验的设计师一看你设计的移动端页面就知道你之前做的都是pc端,这是一件非常尴尬的事情。就好像你说了一句“nice to meet you”,别人就知道你老家是哪里一样。那么移动端和pc端交互设计上的区别究竟在哪呢?



大屏到小屏


开门见山,移动端和pc端最根本的区别就是屏幕的大小。屏幕的大小直接决定了界面信息量,pc端一个页面可以展示完全的信息可能需要移动端好几个页面来承载。


Image title


可能有的设计师觉得,屏幕尺寸不一样做自适应不就行了,移动端页面做长一点,让用户滑动就可以了。这是一个非常简单的处理方案,但是忽略了一个重要前提:用户愿不愿意滑动?根据埋点数据显示,多数移动端页面超过一屏的内容的曝光与点击量会急剧下滑,说明用户很少主动滑动去查看一屏以外的内容。对于移动端产品来说,一些重要的内容必须保证用户在一屏内可以看到。


1)信息架构重构


因此,如果你要为一个pc端网站做一个移动端app,首先要做的就是信息架构的重构。pc端有足够的空间可以把所有的功能直接展示给用户,而移动端只能展示一些主要的功能,一些次要的功能需要放在下一层级。


Image title


例如,appstore中用户是可以评价这条评论对自己是否有帮助的。PC端的处理方式很简单,直接展示给用户。而移动端是需要用户长按这条评论才可以弹出评价列表的,可能很多用户今天看了这篇文章才发现原来还有这个功能。没关系,之前虽然不知道,但是并没有影响你正常使用啊。对次要功能进行适当的降低信息层级是移动端设计师必须要考虑的。


2)一个页面,一个任务


对于上面信息架构重构的观点可能会有人存在异议,对于一些表单类页面来说,例如用户要借钱、转账,有些信息是用户必须要填的。在这些场景中,我们不担心用户不滑动,因为用户不滑动就无法完成操作。那么在这种情况下,是否可以继续延续pc端的布局样式?


Image title


以上面的转账流程为例,pc端是直接在一个页面展示,而移动端是分成了两个页面。为什么这样?把备注/付款说明也放在第一个页面不行吗?


因为移动端用户使用环境更加的复杂多变,更容易受到干扰,所以必须保证界面信息的简单直观。如果在一个页面中展示过多的信息量,容易让用户混乱。这里所说信息量并不是指绝对信息量,更准确的说法应该是用户主观感受上的信息量。同样的几个输入框,可能在pc端只占了页面的1/4,而移动端占了一整个页面,给用户的感观是完全不一样的。页面塞的满满当当,容易让用户焦虑。


一个页面可以完成的任务现在要跳转好几个页面,增加了操作步骤。用户害怕“内容多”,难道不害怕“步骤多”吗?不害怕,因为页面内容量是用户一眼就可以看出来的,用户无法立刻感知这个任务有多少步骤。因为无知,所以无畏。等到用户知道这个任务步骤数的时候,整个任务都已经完成了。


Image title


借呗的这次改版,用户要借钱必须先输入借款金额,其余的借款期限还款方式利息等信息才会展示给用户。这些信息都是跟用户借款金额相关的,用户没有输入借款金额,这些信息展示给用户意义也不大,不如隐藏,让用户的注意力聚焦于完成输入借款金额。


Image title


没有一个放之四海而皆准的设计原则,所有的设计理论都不能罔顾实际的应用场景而机械的套用。如果前后步骤关联性比较强,我建议不要分页展示。例如,目前很多的短信验证码都选择把“输入手机号”“输入短信验证码”放到两个页面,我个人对此持保留意见。设想一个场景,如果用户迟迟没有收到短信验证码,那么他需要确定是手机号输错了、网络故障还是其他什么原因。用户需要返回到上一个页面查看,如果手机号和短信验证码放在同一个页面就简单多了。


3)突出重要信息


前面我们提到的主要是控制移动端页面的信息量。页面信息量少就可以了?当然不是,我们来看一下火车换乘的场景,如果你要从南京去新疆阿克苏,没有直达的车次,只能从西安换乘。我们来看看下面两款产品的处理方式,左边是12306,右边是飞猪。12306还是一股pc端风格迎面扑来,问题出现在哪?12306跟飞猪展示信息量差不多,唯一的区别在于12306展示了两趟车次各自的起止时间,而飞猪只告诉用户整趟旅程的起止时间。


Image title


显然问题不是出现在信息量上,而是对信息的展示形式上。用户更关注的信息,应该让用户更容易发现。对于一趟车次来说,用户更加关注出发/到达站出发/到达时间票价。对飞猪界面进行高斯模糊处理,发现用户的视觉焦点正好落在这些重点信息上。


Image title


12306所有的信息都属于同一层级,让人抓不到主次。而且界面中出现了过多的配色,更增加用户的信息获取成本。


Image title




鼠标到手指


pc端用户与界面进行交互靠的是鼠标,移动端用户靠的是手指。鼠标的操作更加精准,因此移动端界面中元素的尺寸和间距比pc端的大。以下图为例,左边是pc端,右边是移动端。移动端的输入框沿用的还是pc端样式,而且关于利率和手续费的详情icon过小,用户的手指点击的时候容易误操作。


Image title



给你的界面做减法


前面我们主要强调了移动端产品要尽量减少界面中信息量。可不可以在不改变产品信息架构的前提下,通过交互设计上的改动来完成目标呢?我给大家介绍两个方法:场景化关联化


1)场景化


在一个页面中,虽然内容很多,但是用户真正感兴趣并且会与之交互的内容很少。如果我们可以获知用户在特定的场景下对于某个内容诉求很高,那么我们突出展示;反之如果诉求很低的话,我们可以隐藏。


举一个之前说过的例子,知乎中,用户在搜索结果页滑动大概3屏后,会出现“向知友提问”按钮。因为用户滑动了3屏,说明用户可能对当前的搜索结果不满意,这时引导用户去提问,用户的意愿更高。如果我们全程展示这个去提问按钮,反而会减少用户的实际浏览区域,造成干扰。


Image title


上面主要提到了,同一个流程,需要根据用户不同的使用场景提供不同的功能。其实即使是同一个功能,我们也要根据用户不同的使用场景选择不同的展示形式。


Image title


还是知乎,为了方便用户可以快速的查看下一个回答,给用户提供了一个浮动按钮。但是这个浮动按钮,当用户开始滑动页面时候就会改变样式。这个很容易理解,当用户刚进入这个页面,为了降低用户的学习成本,我们需要直接告诉用户这个按钮是干什么的。当用户开始滑动进入阅读答案的状态,缩小按钮的形态避免对界面信息造成遮挡。


2)关联化


我们需要梳理信息之间的关联性,将相互关联的信息整合在一起,进而减少页面中信息量。支付宝账单的月份筛选功能,对入口进行了修改。之前用户需要点击日历图标,现在用户直接点击月份就可以了。用户要筛选的就是月份,那么直接把月份作为入口更加合适。


Image title



总结


以上就是我对移动端和pc端交互设计上区别的简单分析和总结,如果你有不同的建议和看法欢迎留言讨论。

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


QQ 20周年H5刷屏幕后的设计故事

资深UI设计者

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

项目概述

QQ 20周年,是互联网产品长青的一个传说,就在 20 周年的时间节点,QQ 向用户提供一份关于他自己的、真诚热切的 QQ 数据总结。通过数字,汇集出每个人自己的 QQ 时光历程,从而牵引出每个人对于成长、青春、沟通、时代流动的感知与回忆,引发 2019 年一场集体的情感共鸣。

△ QQ 20年来的一路变迁

项目流程

项目历时两个月,从项目初期,视觉和产品密集沟通,了解需求,进行头脑风暴,输出多个视觉方案纵向对比,最后确定视觉风格,分配视觉工作(插画,动画,3D)。项目后期,包括开发还原,数据调配等众多环节,环环相扣,缺一不可,一路过关斩将,整个 H5 需要不同岗位的高度配合和各专业的高度默契。

△ H5的项目流程图

项目难点

1. 异地合作

本次 H5 联动了动效,3D,插画设计师的共同合作,由于支持 3D 的设计师在韩办公,所以大部分都是在线上全英沟通,包括前期的项目进度同步,还有后期的模型调整等环节都能及时反馈,快速反应,最后如期打磨出五款 spaceQQ。算是一次顺利的异地合作。

△ 五款3D spaceQQ最终效果

2. 3D spaceQQ视觉还原

3D 鹅从设计软件转化为 H5 展示过程中,存在模型文件过大、材质缺失等问题,直接影响用户体验。在开发的过程中同学通过模型减面、重新选择材质,还有模型拆分等解决方法,在视觉观感和性能中建立了平衡的杠杆,最终实现了 15 个 SPACE QQ 的视觉还原。

△ 五款3D spaceQQ最终视觉还原效果

3. 视觉工作的同步进行

由于项目时间比较紧迫,而且 H5 加入了 3D 模型,还有需要大量的动效,所以需要在同一时间线上,同步进行,视觉稿输出,动画制作和 3D 模型打磨。考验设计师的沟通和执行能力。与此同时,需要随时和开发同步动画 demo 以确保动画可实现。和产品密集沟通,及时根据文案调整画面。

设计理念

因为 QQ 是陪伴了大多数用户的一个产品,见证了整个互联网社交的演变过程,容易引起用户的情感共鸣。设计的初期,围绕「个人轨迹」的主题发散了不同方向的视觉概念,在引起客户共鸣感的复古元素和传递不断「探索」未来的概念间寻找平衡点。最后沿用了 20 周年的太空概念贴合「探索」的主题,结合有年代特征的代表性视觉符号来引起「个人轨迹」的这一概念的用户情感共鸣。另外,H5 运用了 3D 打造了 15 只太空鹅,打造「个人轨迹」的专属感,既联动用户温暖的回忆之余,也增添了一些小惊喜。

概念设计

1. H5整体视觉风格

QQ,是陪伴了大多数人成长的一个互联网产品,其本身带有很多高辨识度的视觉元素,例如对话框,提醒上线的音效等。因为 H5 本身是一个大数据总结,专属感非常强的一个产物,所以希望是唤醒用户一些封尘已久的记忆,就像打开时间胶囊般的期待和感动。同时也象征着 QQ 一直陪伴在身边,从而引起用户的共鸣。

设计方面,除了通过一些标志性的视觉元素唤醒用户的回忆之外,也加入 QQ 20周年的太空「探索」主题的元素,响应 20 周年的主题之余,也寓意 QQ 不断地对外探索,从多个维度来看世界,寻找有趣的内容。

对话框,是承载数据的视觉符号,也是贯穿整个 H5 的重要视觉符号之一。寓意着 QQ 一直致力于「沟通」,而且不同时代的 QQ 对话框都各有特点,也是见证 QQ 时代变迁的重要元素,所以提取了三个阶段代表性的对话框样式来承载数据,并且加入有时代特征的视觉元素(如bb机,像素化的小箭头等)作为辅助,增加 H5 的氛围感,也算是视觉上的「小彩蛋」。

△ QQ原始对话框

H5 加入一些趣味感的元素,如笑脸,爱心等元素,背景辅以流动的彩色不规则图案,来增加对话框的玩味。也寓意 QQ 20年来给用户带来源源不断的乐趣,留下了不可取代的时代印记。

△ 重绘对话框

H5 中也加入了很多好玩的元素,不同时代所用的移动设备,融合贴近太空「探索」主题的背景;利用带手套的手和不同的元素进行互动;增加重绘经典头像的互动动画,加入 QQ 空间的植物等怀旧元素,增加 H5 的可玩性和惊喜感。

△ 经典头像的重绘

△ 经典头像穿插在H5中的小彩蛋

△ 带手套的手和有时代标签的元素互动

动画设计

1. 视觉动态化方案

在动画制作前期会出一份详细的动态化分页策划,以及一份尽可能表达完整的动画 demo,能便于设计与开发能准确的估算出制作周期。在开发完成预研测试后,基于动画 demo 共同制定一个大致的动态化方案──对话框等大面积使用代码实现,其他装饰性小元素全部使用序列帧。在观众每滑一页即可触发当前页的动画,且能保证大体动画的流畅度。

2. 动画制作

为了尽可能减少 H5 的运算体积,又保证画面动态的流畅程度,导出的序列必须满足以下所有条件:

  • 全部元素可循环
  • 尽可能少的帧数
  • 可重复使用的素材

△ 设计了4个不同的色块流动loop,方便开发安插在每页合适的位置

3. 导出与同步

在配合开发导出的阶段,为了能明确序列的标记,所有序列文件命名为 xx-in/xx-loop/xx-out。使用同步工具以实现 AE 动画序列导出和开发提取素材能同步进行,并保持实时更新和迭代。

△ 第6页动画导出序列

太空QQ形象设定

创建了四款全新的 spaceQQ,根据用户的 QQ 年龄而设计。根据用户的 QQ 年龄,分了四个款式的鹅:奢华,智能,闪亮和神秘四个概念,一个递进的尊贵程度,刺激用户分享欲。包括基础款的 QQ 在内,共创造了 5 个类型的 spaceQQ。每个设计都基于基本 spaceQQ 的形式,但是套装的颜色和细节根据各自的概念各有特色。

△ spaceQQ总览图

配色方案

用户可以根据自己的喜好更改这 5 款 spaceQQ 的装扮颜色。

关于运营

1. 专属感

整个 H5 始终紧扣 QQ 20周年的太空「探索」主题,整个 H5,除了用数据唤醒用户和 QQ 多年的点点滴滴之外,5 个 spaceQQ 概念设定,既能增加用户的新鲜感,又能刺激用户的分享欲,C4D 建立的 3D 形象丰富了整个 H5 的视觉层次,深化了 QQ 品牌的影响力,寓意鹅厂一直与时俱进,紧贴潮流。

2. 情绪调动

对于当下的运营活动来说,趣味性是引爆转发量的重要元素,H5 结合 QQ 用户创作的背景音乐和能够调动用户情感的设计语言来释放用户的情绪,比如惊喜感(用户结合 QQ 的标志性音效创作的背景音乐),荣誉感(不同 Q 龄获取相应的 spaceQQ)等,让用户产生持续的惊喜感,在怀旧和新鲜感中得到满足,提升用户活跃性。

总结

QQ 20周年 H5 设计,尝试结合了 3D,动画,插画等设计形态,为每一位用户打造专属的「个人轨迹」,通过数字,拼凑出和 QQ 的过往朝夕,引起用户共鸣。鹅厂不断创新探索的同时,也为用户温存属于用户自己的专属回忆,深化 QQ 的品牌价值。

福利

考虑到部分同学想更仔细地查看、保存或收藏高清大图的需求,我们设置了关键词,微信公众号后台以「spaceQQ+序号」的方式回复,例如「spaceQQ1」,即可逐一获取对应的高清头像和壁纸。

扫码领取专属「个人轨迹」:

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

腾讯设计师:如何让你的设计稿做到95%还原?

资深UI设计者

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

视觉设计师作为展示产品最终形态的执行层,产品上线前走查视觉与交互还原是必经环节,而留给设计师走查修改的时间其实非常少,有时候为了配合产品上线时间,通常只能牺牲一些细节,在下一次迭代进行优化。为了每一次上线的产品都能够得到更好地还原,这就需要设计师去了解开发到底是根据哪些规则还原我们的设计稿,以及在每一次制作和交付设计稿的时候,我们应如何设定好每一个细节的规则。

开发:这里已经完全对齐了。

视觉:看起来还没完全对齐,我的图也没有切错吧?

开发:字体大小和间距都是按照视觉稿来的。

视觉:这里间距偏差这么大,为什么不按照视觉稿?

开发:视觉样式好多,每个设计师的间距好像都不一样。

视觉:……

我们经常会听到身边的设计师与开发小哥的一些对话,关于对齐、大小、间距等设计还原问题经常会讨论很久,有时甚至会觉得,几个像素的间距是不是没有必要这么纠结。以我较常接触的云产品官网为例,云产品官网体量庞大,单个页面或信息模块的样式复用可高达上百个子产品页面,此时第一个模块设计的规范性、扩展性、复用性则变得尤为重要,所以为了让设计方案更加合理,为了让合作更加,这里总结一些设计经验,与大家一起探讨。

本文将从以下三个方面,思考作为视觉设计师,应当如何让设计更加合理有效:

  • 视觉处理(设计)
  • 设计逻辑(方法)
  • 交付走查(合作)

视觉处理

1. 字体结构

网页设计中,我们总避免不了与字体打交道,字体也是我们在设计中经常容易忽视的部分,而经常出错的原因往往是因为我们对文字的理解不够清晰。相比西文字体,中文字体结构复杂,字库庞大,网页的渲染效果会比西文字体艰难很多。

但无论是中文还是西文,我们经常需要用到的无非是字体大小、字重、字色,还有就是经常被我们忽视的行高和行宽,我们从西文字体提取三个最主要的因素,即字高、行高、行宽。基于西文字体的结构转换为中文,我们可以理解为,字高指的就是我们肉眼所能看到的字体的实际高度,而行高指的是字高+上边距+下边距,反过来说,行高减去字高除以 2 就能得到我们的上下边距,行宽指的就是整个文本的宽度。

举一个图文模块的例子,图(1)中我们肉眼所看到间距,在我们做标注时,看到的其实是图(2)中的三个色块,我们实际给到开发的标注,是色块的尺寸和色块之间的间距,以及详细的文本属性。

2. 文字行宽

关于行宽,以设计 banner 的标题及描述文字为例,定义行宽是为了让文本在极限宽度的时候进行换行,再固定好配图的尺寸,从而得到文本与配图之间的间距,定义行宽、行数、字数,能够更好地为运营人员规范输出的文案,避免因字数过多或过少所造成的视觉不平衡。

当我们处理无序列表时,四个短句文本,长短不一,同样我们需要限制一行文本宽度,定义一行能承载的最多字数,以及跟产品确认可能出现的最多字数的情况,确认模块设计的可行性,保证后续运营人员在替换文案的时候不会出错。

以上两个例子都是我们设计文字经常出错的地方,正确的定义规范,无论是交付开发或者其他下游,都能保证模块设计的可扩展性及规范化,保证最终上线质量。

3. 图标视错觉

关于图标,这里提到一个几何学错觉的概念,视觉上的大小、长度、面积、方向、角度等几何构成,和实际上测得的数字有明显差别的错觉,称为几何学错觉。人眼所接受的视觉平衡,往往不是设计软件上精准的对齐,我们总是会通过调整间距、大小或角度来补齐一些负空间,让画面保持视觉平衡。

以客户案例的卡片样式为例,客户案例在 to B 产品中是必不可少的模块,我们的客户 logo 有的圆形,有的长方形,有的纯文字,尺寸差距比较悬殊,这种情况下我们需要给他限制一个高度,在这个高度以内,再根据 logo 本身的体量来调整图形的大小,处理好 logo 的视觉平衡,最后红色区域是 logo 的实际尺寸,蓝色区域则是我们实际给到开发的尺寸,从开发的角度来看其实就是占位符,而规范的作图则是把占位符的透明度调整为 0,以占位符为实际有效作图区。

UI 设计中通常以「向右箭头」来表示当前链接可跳转,使用箭头作图时,当我们把箭头和文字右对齐,箭头其实会更加的往外突出,这时候我们会人为的往里边推 1 至 2 像素,最后实际给到开发的也应该是红框的尺寸,也就是 16×16 的占位图尺寸。

「按钮」也是 UI 设计中常用的组件,当我们在按钮里使用图标加文字时,由于文字的体量更大,整体重心会往右偏,所以我们通常会认为让图标和文字整体往左偏移,使整体的视觉更加平衡,实际给到开发的,也是两个不同等的边距。

设计逻辑

1. 理性的设计

在 iOS 和 Android 的设计规范中,都有提到过使用「8点栅格」的概念,即建议使用 8×8 的网格系统进行设计,我们都知道 0.5px 的渲染在屏幕上会变模糊,之所以使用 8 的倍数是因为市场上主流的屏幕都能被 8 整除,使用 8 点栅格能够的让我们所设计的内容样式在屏幕上保持高清显示,而在日常的网页设计中,我其实更加倾向使用 4 点栅格系统。

我们以下图 4 组数列为例,大家可能都曾使用过上面三组蓝色数列中的数值应用到设计中,或以 5 为倍数,或以 10 为倍数、或以偶数为设计逻辑,而实际上以 5 为倍数则会包含奇数,奇数会导致控件文字对不齐,当 5 的倍数和偶数同时使用时,则会出现类似 14、15、16 这种相差为 1 的相邻数,这样会导致我们的尺寸规范不好定义规则,难以形成逻辑,而使用 4 的倍数,他们的公差为 4,不会出现奇数,也不会出现相邻数。

我们再看看一些通用的尺寸定义,例如常见的 icon 设计尺寸都是以 4 为倍数。

常见的网页栅格及其所均分的卡片和间距,也都是 4 的倍数,如果我们的控件尺寸,图标尺寸和间距都使用 4 的倍数来定义,那所有的信息模块自然都能更好的相互适应,层层递进的逻辑关系也会更加明显。

我们把 4 点栅格的设计逻辑套用到卡片设计上,第一眼我们可能比较难去评判两者的好坏,但仔细看,我们就会发现第一个卡片的按钮没有水平对齐,相互之间的间距尺寸也是没什么逻辑性。假如今天调整一个 8px 的间距,明天调一个 10px 的间距,设计师走查起来也很难发现有问题,对接的开发也难以有一个可以参考的规范标准。而相对的,以 4 为倍数,我们会发现所有的信息都会完美对齐,而且倍数为 4 的每个数值之间公差为 4,即使设计稿微调了 1px 我们都能很快发现,开发在还原设计稿时也会有一个衡量标准。

网格设计在报纸、杂志、海报等平面设计领域中也是十分常见的设计手法,通过建立网格,考究每一个信息模块在页面中的摆放位置,大小占比,颜色占比,从而使得页面信息保持秩序、均衡。

使用 4 点栅格系统,通过理性、秩序、逻辑的设计方式赋予画面秩序感以及阅读体验,而以 4 为倍数,每个数字之间都相差为 4,不会太大,也不会太小,同时保持着秩序,让设计更加理性。对于团队合作,设计师与开发也将更有默契,不必再为不清不楚的间距浪费时间。

交付走查

1. 有效切图

关于切图,切图之前应跟开发确定好输出的格式和尺寸,确定应该用 SVG,一倍图或是两倍图。SVG 体量小渲染质量好,单色使用时还能替换颜色,PNG 则通常用在实景图,一倍图和二倍图则根据实际需要进行输出。

如果要做分层动画,那我们就需要分层切图,如果桌面端和手机端样式差别较大,那我们需要和开发沟通好如何实现,是否需要特殊切图,所有的特殊切图和特殊样式,我们都应该提前跟开发沟通好。

2. 交互细节

如果某个控件或信息模块交互样式较多,那我们可以有一个空白画板来清晰地标注这些状态和样式,很多开发在还原过程中都是一手视觉稿一手交互稿,但视觉设计师作为展示产品最终形态的执行层,很多情况下,视觉阶段依然会有很多需要跟交互和产品沟通修改的地方,所以为了避免遗漏修改点,视觉稿应该呈现最完整的设计细节,这样也会很大程度上节省开发的时间,减少出错的几率。

当页面内容有一定的更新频率,我们则需要标明视觉样式规范,以及后续的运营规则,完整的收尾,可以避免产品经常过来寻求上线素材和规范。有些需要隔三个月或半年才上线的需求,清晰的标注也能帮助我们快速回忆起需求背景,让我们在日常工作中保持头脑清晰,有条不紊,这其实也是在给我们自己节省时间。

3. 重构稿走查

走查还原的时候,在 Chrome 浏览器的空白处右键点击检查,找到里面的 Computed 窗口,我们可以找到具体的文字、间距、投影等属性,有时候一些比较细微的调整,我们可以双击具体的数值进行调整,调整到自己满意之后再把具体的数值给到开发,这样就不用在我们摇摆不定的情况下,造成双方的困扰。

最后,在预发布的时候,我们可以利用 SwitchHosts 的客户端来配置开发环境进行体验,保证最终上线的效果。

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

25个专业设计师分析了8家汽车厂商,总结了 7 个 HUD 设计细节!

资深UI设计者

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

我们已经生活在未来,那些曾经只出现在科幻剧太空飞船上的酷炫技术,如今正以不可思议的速度出现在汽车中。

近年,一个量产车中出现了最令人感兴趣的技术叫做抬头显示(Head-up Displays)。

虽然汽车 HUD 的出现让人无比着迷,但它的交互设计和视觉设计却与之相反。

为了解决这个问题,来自德国 Fachhochschule Potsdam 学院用户界面设计专业的 25 名学生和老师经过多轮讨论,最终总结出一系列新的观点和想法,并将它们制作成高保真原型。

在这次设计作业中,25 名学生分别为宝马、雪铁龙、雷克萨斯、Mini、梅赛德斯奔驰、Smart、特斯拉和大众等 8 个汽车厂商设计了接近未来概念的「HUD高保真原型」。

尽管不同的汽车厂商风格迥异且目标群体不尽相同,但驾驶者行车时的需求并没有太大的变化。因此,一些内容会反复地在不同厂商的高保真原型中出现。

可视化>数字

当使用图形而不是数字来展示速度和速度限制时,驾驶者更容易识别和理解。

△ Smart —— 速度与当前的限速标准有关,且可视化。

△ 雪铁龙 —— 地图外侧的圆圈是速度可视化的效果。当两个进度条在顶部重合时,代表达到限速标准。©Marie Claire Leidinger、Jonathan Jonas、David Brandau

△ 大众 —— 抽象的图形代表速度和限速标准之间的关系。©Dominic Rödel、Laurids Düllmann、Phillip Steinacher

△ 雷克萨斯 —— 速度被可视化,成为一条直线,限速标准在直线的中间,当车速超过车速限制时,直线变为黄色且车速线变粗。©Christian Franke、Sebastian Prein、Lennart Ziburski

冗余信息的不同展现方式

HUD 可以容纳仪表盘内容以外的其他信息,但这些信息应该用不同的图形展现,且设计时需注意充分利用车窗显示空间。

△ 特斯拉 —— 特斯拉的 HUD 展示仪表盘时速部分的简化版。©Constantin Eichstaedt、Steffen Gabel

△ BMW —— HUD 不仅显示车速,还显示混合动力汽车状态和活动。©Patricia Dobrindt、Simon Martin、Jakob Flemming

不展示无意义的内容

在不同场景下,车窗显示中的内容可能不同,但都必须是非常重要的信息。显然,大量的信息和装饰物会将重要的信息掩埋,导致重要的信息不能被快速、有效地识别。

△ Smart —— 导航提示仅在转向时出现,一些需要长时间显示的信息,例如「预计到达时间」没有被设计在 HUD 视觉界面中。©Cécile Zahorka、Fabian Archner、Sebastian Kaim

模糊状态下仍有辨识度

HUD 的视觉设计必须保证具有最大的对比度和清晰度,理想的 HUD 即使模糊不清,但仍然具有可读性。

△ 梅赛德斯奔驰(左)、大众(右)—— 尽管 UI 已经模糊不清,但重要信息,比如车速过快仍然可以识别。©left:David Rehman、Michael Dietz、Thomas Petrach;©right:Dominic Rödel、Laurids Düllmann、Phillip Steinacher

HUD是投影而非显示

与电影院昏暗的环境和纯色幕布不同,HUD 投影的幕布是车窗,而车窗后的世界是复杂多变的,有时甚至有强烈的阳光直射车窗,这也使得 HUD 设计充满诸多限制。

△ Mini —— 这一概念设计方案挑战如何在多变的复杂车窗环境中设计常显的菜单,菜单中包括导航、电话和音乐。©Kien Nguyen Canh、Moritz Kronberger

警告信息的出现需要有过渡

我们的研究报告显示,许多驾驶者对一些我们以为对他有帮助的行为感到不满,比如为了强调车速限制或其他交通规则而突然出现的警告信息。

的确,在驾驶者没有建立「速度上升会导致某些问题」这一预期时,突然弹出警告信息是很突兀甚至冒昧的做法。

因此在 HUD 设计中提供一个过渡顺畅的动画也许是一个解决方案,比如随着车速的上升,提示信息从相对缓和的提醒慢慢过渡到严重的警告会更加友好。

△ 梅赛德斯奔驰 —— 驾驶者超速越多,出现在车速圆环外部的红色圆环越多。©David Rehman、Michael Dietz、Thomas Petrach

图标需要文字说明

汽车仪表盘上,晦涩难懂的 icon 有着悠久的历史,「红色的三角形代表什么」。

这是因为以前的仪表盘是断码屏,文字的显示较难,但最近几年,液晶显示屏在汽车上被广泛应用,设计仪表盘的 UI 时,文字位置不再是一个问题。

另外,增加清晰的文字说明可以有效地降低用户的学习成本。

△ 如果没有文字说明,驾驶者很难明白大众 HUD 中 Steinschlag(碎石塌方)的图标代表什么。特斯拉 HUD 中低电量 icon 加上文字说明后也更容易被人理解。©left:Dominic Rödel、Laurids Düllmann、Phillip Steinacher;right:Constantin Eichstaedt、Steffen Gabel

总结

最近在研究汽车 HUD 设计,偶然间发现这篇文章中的一些细节,对自己正在着手进行的 HUD 设计很有参考价值,所以着手将它翻译下来,分享给大家,希望也能给大家带来一些帮助。

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

日历

链接

个人资料

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

存档