如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
在传统行业打滚数年后的设计师，总是难以回避灵气和匠气的博弈，日常创作逐渐走入某种定式，失去了挑战 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 是 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
和场景设计不同，影片同样也是另一种常见的沉浸式表现手法。近几年越来越多的新媒体作品采用纪录电影、开放式互动短剧、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端交互设计上的区别。
经常遇到一些设计师，他们之前负责的都是pc端产品，突然改做移动端，会不自觉的把pc端的一些设计理念“移植”到移动端，出现了水土不服。有经验的设计师一看你设计的移动端页面就知道你之前做的都是pc端，这是一件非常尴尬的事情。就好像你说了一句“nice to meet you”，别人就知道你老家是哪里一样。那么移动端和pc端交互设计上的区别究竟在哪呢？
大屏到小屏
开门见山，移动端和pc端最根本的区别就是屏幕的大小。屏幕的大小直接决定了界面信息量，pc端一个页面可以展示完全的信息可能需要移动端好几个页面来承载。
可能有的设计师觉得，屏幕尺寸不一样做自适应不就行了，移动端页面做长一点，让用户滑动就可以了。这是一个非常简单的处理方案，但是忽略了一个重要前提：用户愿不愿意滑动？根据埋点数据显示，多数移动端页面超过一屏的内容的曝光与点击量会急剧下滑，说明用户很少主动滑动去查看一屏以外的内容。对于移动端产品来说，一些重要的内容必须保证用户在一屏内可以看到。
1）信息架构重构
因此，如果你要为一个pc端网站做一个移动端app，首先要做的就是信息架构的重构。pc端有足够的空间可以把所有的功能直接展示给用户，而移动端只能展示一些主要的功能，一些次要的功能需要放在下一层级。
例如，appstore中用户是可以评价这条评论对自己是否有帮助的。PC端的处理方式很简单，直接展示给用户。而移动端是需要用户长按这条评论才可以弹出评价列表的，可能很多用户今天看了这篇文章才发现原来还有这个功能。没关系，之前虽然不知道，但是并没有影响你正常使用啊。对次要功能进行适当的降低信息层级是移动端设计师必须要考虑的。
2）一个页面，一个任务
对于上面信息架构重构的观点可能会有人存在异议，对于一些表单类页面来说，例如用户要借钱、转账，有些信息是用户必须要填的。在这些场景中，我们不担心用户不滑动，因为用户不滑动就无法完成操作。那么在这种情况下，是否可以继续延续pc端的布局样式？
以上面的转账流程为例，pc端是直接在一个页面展示，而移动端是分成了两个页面。为什么这样？把备注/付款说明也放在第一个页面不行吗？
因为移动端用户使用环境更加的复杂多变，更容易受到干扰，所以必须保证界面信息的简单直观。如果在一个页面中展示过多的信息量，容易让用户混乱。这里所说信息量并不是指绝对信息量，更准确的说法应该是用户主观感受上的信息量。同样的几个输入框，可能在pc端只占了页面的1/4，而移动端占了一整个页面，给用户的感观是完全不一样的。页面塞的满满当当，容易让用户焦虑。
一个页面可以完成的任务现在要跳转好几个页面，增加了操作步骤。用户害怕“内容多”，难道不害怕“步骤多”吗？不害怕，因为页面内容量是用户一眼就可以看出来的，用户无法立刻感知这个任务有多少步骤。因为无知，所以无畏。等到用户知道这个任务步骤数的时候，整个任务都已经完成了。
借呗的这次改版，用户要借钱必须先输入借款金额，其余的借款期限、还款方式和利息等信息才会展示给用户。这些信息都是跟用户借款金额相关的，用户没有输入借款金额，这些信息展示给用户意义也不大，不如隐藏，让用户的注意力聚焦于完成输入借款金额。
没有一个放之四海而皆准的设计原则，所有的设计理论都不能罔顾实际的应用场景而机械的套用。如果前后步骤关联性比较强，我建议不要分页展示。例如，目前很多的短信验证码都选择把“输入手机号”和“输入短信验证码”放到两个页面，我个人对此持保留意见。设想一个场景，如果用户迟迟没有收到短信验证码，那么他需要确定是手机号输错了、网络故障还是其他什么原因。用户需要返回到上一个页面查看，如果手机号和短信验证码放在同一个页面就简单多了。
3）突出重要信息
前面我们提到的主要是控制移动端页面的信息量。页面信息量少就可以了？当然不是，我们来看一下火车换乘的场景，如果你要从南京去新疆阿克苏，没有直达的车次，只能从西安换乘。我们来看看下面两款产品的处理方式，左边是12306，右边是飞猪。12306还是一股pc端风格迎面扑来，问题出现在哪？12306跟飞猪展示信息量差不多，唯一的区别在于12306展示了两趟车次各自的起止时间，而飞猪只告诉用户整趟旅程的起止时间。
显然问题不是出现在信息量上，而是对信息的展示形式上。用户更关注的信息，应该让用户更容易发现。对于一趟车次来说，用户更加关注出发/到达站、出发/到达时间和票价。对飞猪界面进行高斯模糊处理，发现用户的视觉焦点正好落在这些重点信息上。
12306所有的信息都属于同一层级，让人抓不到主次。而且界面中出现了过多的配色，更增加用户的信息获取成本。
鼠标到手指
pc端用户与界面进行交互靠的是鼠标，移动端用户靠的是手指。鼠标的操作更加精准，因此移动端界面中元素的尺寸和间距比pc端的大。以下图为例，左边是pc端，右边是移动端。移动端的输入框沿用的还是pc端样式，而且关于利率和手续费的详情icon过小，用户的手指点击的时候容易误操作。
给你的界面做减法
前面我们主要强调了移动端产品要尽量减少界面中信息量。可不可以在不改变产品信息架构的前提下，通过交互设计上的改动来完成目标呢？我给大家介绍两个方法：场景化和关联化。
1）场景化
在一个页面中，虽然内容很多，但是用户真正感兴趣并且会与之交互的内容很少。如果我们可以获知用户在特定的场景下对于某个内容诉求很高，那么我们突出展示；反之如果诉求很低的话，我们可以隐藏。
举一个之前说过的例子，知乎中，用户在搜索结果页滑动大概3屏后，会出现“向知友提问”按钮。因为用户滑动了3屏，说明用户可能对当前的搜索结果不满意，这时引导用户去提问，用户的意愿更高。如果我们全程展示这个去提问按钮，反而会减少用户的实际浏览区域，造成干扰。
上面主要提到了，同一个流程，需要根据用户不同的使用场景提供不同的功能。其实即使是同一个功能，我们也要根据用户不同的使用场景选择不同的展示形式。
还是知乎，为了方便用户可以快速的查看下一个回答，给用户提供了一个浮动按钮。但是这个浮动按钮，当用户开始滑动页面时候就会改变样式。这个很容易理解，当用户刚进入这个页面，为了降低用户的学习成本，我们需要直接告诉用户这个按钮是干什么的。当用户开始滑动进入阅读答案的状态，缩小按钮的形态避免对界面信息造成遮挡。
2）关联化
我们需要梳理信息之间的关联性，将相互关联的信息整合在一起，进而减少页面中信息量。支付宝账单的月份筛选功能，对入口进行了修改。之前用户需要点击日历图标，现在用户直接点击月份就可以了。用户要筛选的就是月份，那么直接把月份作为入口更加合适。
总结
以上就是我对移动端和pc端交互设计上区别的简单分析和总结，如果你有不同的建议和看法欢迎留言讨论。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
项目概述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页动画导出序列
创建了四款全新的 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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
视觉设计师作为展示产品最终形态的执行层，产品上线前走查视觉与交互还原是必经环节，而留给设计师走查修改的时间其实非常少，有时候为了配合产品上线时间，通常只能牺牲一些细节，在下一次迭代进行优化。为了每一次上线的产品都能够得到更好地还原，这就需要设计师去了解开发到底是根据哪些规则还原我们的设计稿，以及在每一次制作和交付设计稿的时候，我们应如何设定好每一个细节的规则。开发：这里已经完全对齐了。
视觉：看起来还没完全对齐，我的图也没有切错吧？
开发：字体大小和间距都是按照视觉稿来的。
视觉：这里间距偏差这么大，为什么不按照视觉稿？
开发：视觉样式好多，每个设计师的间距好像都不一样。
视觉：……
我们经常会听到身边的设计师与开发小哥的一些对话，关于对齐、大小、间距等设计还原问题经常会讨论很久，有时甚至会觉得，几个像素的间距是不是没有必要这么纠结。以我较常接触的云产品官网为例，云产品官网体量庞大，单个页面或信息模块的样式复用可高达上百个子产品页面，此时第一个模块设计的规范性、扩展性、复用性则变得尤为重要，所以为了让设计方案更加合理，为了让合作更加，这里总结一些设计经验，与大家一起探讨。
本文将从以下三个方面，思考作为视觉设计师，应当如何让设计更加合理有效：
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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
WWDC19 可能是最近几年最令人激动的苹果开发者大会了。重回高端专业领域的 Mac Pro 不仅仅是性能怪兽，在专业度、设计感甚至细节的模块化的设计上，体现出了苹果这一顶尖大厂应有的底蕴，说实话，考验民间硬件评测玩家们的资金实力和评测能力的时候到了。在发布Mac Pro 这一系列产品的环节，空耳几乎完全听不懂说的是啥，不过可以全程感知到每一个单词都是牛X的，苹果官方页面的介绍现在肯定是最有说服力的，因为最近的评测起码是要等到今年年底。
属于 iOS 13 的 Dark Mode 正正好好满足了所有人的想象，但是和简单直接的 Android Dark Mode 相比，又多出一丝优雅，非常苹果。拥有 App Store 和一连串新功能的 watchOS 终于成为了一个更加独立、功能强大的硬件设备了，而 tvOS …… 不是重点。
重点是，在 iOS 和 macOS 之间，硬生生多出了一个 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 的定位看似暧昧，实则在这个多元和高度垂直的时代，帮苹果趟出了第三条路。
iPadOS 的新布局看起来终于不那么 iPhone了，原有最左一屏的小组件汇集到主屏幕之后，看起来越来越有桌面的意思的。
……专为多点触摸的显示屏而设计，通过直观的手势实现多任务……它现在被称为iPadOS。
这是苹果给 iPadOS 所写的出道宣言。
比起 iOS 12 时代更强的分屏模式，发布会现场演示的时候，展示了使用托拽在多个应用之间快托拽内容和元素的操作，多屏互通效率极高。
而多任务不仅仅体现在多个应用之间的互动，同一个应用同样可以多屏存在——也就是我们常说的多任务。比如打开两个「提醒事项」应用，在两个笔记之间，来回编辑内容。点击Dock 中的特定应用图标，你就能看到它到底开了多少个页面。
仔细想想，这是不是和桌面端的系统的逻辑越来越接近了？
想成为了一个独立的设备，iPad 在用户输入端的短板需要补足，而为了解决这一问题，苹果为 iPadOS 精心定制化了一套组合拳：编辑手势，输入提速，外设支持。
快速输入是 iPad 的短板之一。不借助键盘而能快速输入的方法之一，就是单手快速输入。苹果在iPadOS 上使用了一个全局的小键盘，使用双指捏合快速呼出，全局浮动，使用QuichPath 滑动手势输入法，减少输入的难度。这就是使用输入法和键盘输入提速的方法之一。
长段落或者是其他内容，又要怎么编辑呢？苹果巧妙地将 Macbook 系列触控板的三指手势微调了一下，给迁移过来了：三指捏合是复制，三指散开是粘贴，而三指滑动是撤销。
而辅助快速编辑手势的， 是智能选取功能，光标定位比以往更加智能和精准，把编辑输入的最后一个短板也给补上了。
iPad 的多点触摸屏幕本就支持大量不同的手势，功能支持不是难点，难点在于用尽可能少、且认知度足够高的常见手势，以的认知负荷，让用户更快上手，更舒适地做到各种各样的事情。
以触摸为核心的交互，以及的指针的交互，在iPadOS 上交汇了。这种交互模式无疑是实验性的，但是这也是未来所有的移动端和数字产品的设计者都要考虑的问题，而iPadOS 就是最重要的试验田。
当然，外置键盘输入也并不是难事。iPad 本身的配套键盘套和第三方蓝牙键盘，多数有输入需求的用户都已经购置了，为此，苹果给iPadOS 搭配了丰富的快捷键，来辅助输入：
当然，输入这件事情上，Apple Pencil 也是非常重要的组成部分。苹果将系统自带的备忘录应用进行了重设计，其中很大一部分原因，就是为 Apple Pencil 提供更为强大的绘图功能：
这样一来，即使你没有购买第三方的绘图工具，同样可以用它画出足够漂亮的插画作品。除了特定APP中的手写输入和绘图这样的使用场景之外，Apple Pencil 还作为日常截图批注的主力，方便日常作笔记：
更好的输入，最终的目的，始终是为了更好地输出内容。
iPadOS 的野心很大。作为一块10英寸上下的屏幕之内的操作系统，它作为内容承载的硬件，是一个很合理的想象，不然也不会有那么多开发者一直在开发将iPad 作为外接屏幕的应用，而现在，用户只需要连上Wifi ，它就能作为 Mac的外接屏幕。
打通了这一个环节之后，后面的事情就自然而然了：Apple Pencil 可以在屏幕上画画，这样一来，它很自然而然就成了手绘板。发布会上，苹果官方所放出的图片当中，涵盖了多数设计师都在使用的设计软件，其中不乏 AI、AE、Pr、Sketch、C4D、Zbrush 这些大热设计工具。
更重要的一点在于，Apple Pencil 原本 20ms 的反应延迟，在这次的更新之后，将会达到9ms，反应速度提升了一倍以上！它已经是一个称职的手绘板了。
有意思的地方在于，并没有 PS。为什么？答案很简单啊，iPadOS平台上的原生 PS 马上就要来了啊！连上Adobe 的创意云，两个平台又呼应上了……
毕竟，想要打通细分的应用场景，iPadOS 是需要自身具备强大生产力的，这意味着大量的独立功能、服务和应用支撑。
想要 iPadOS 能够独立完成视觉创造的工作，对于多种字体的支持是肯定需要的。在iPad 上独立运行 Photoshop 也同样是需要这样的功能支撑的，所以，干脆官方提供支持了：
而值得注意的是，作为一个设计公司，苹果的想象力并不止于此。这次更新的功能当中，有一个非常引人瞩目的功能是 SF Symbols。
苹果将1000多个常见的 iOS 和 macOS 的图标和苹果官方的旧金山字体融为一体，这些图标和符号支持 iOS 13、iPadOS以及的 watchOS 6 和 tvOS 13，而且你还可以在官方的文档支持之下，自己创造！
具体可以戳这里了解：SF-symbols 使用文档
完全独立的 iPadOS 将会需要好好管理本地和云端的文件系统，官方将文件管理器进行了升级，确保它无需借助另外一台电脑来完成操作。
核心应用没有问题，和外接内容进入口也要一并升级。功能强大的 TypeC接口能够直接读取U盘和存储卡：
而作为主要的浏览器，Safari 浏览器也向着桌面端浏览器的方向进了优化和调整，比如支持下载：
此外，图片、照片和视频的本地管理和剪辑功能，也一并进行了升级，这也是为了让iPad 能够成为一个更加独立的产品而存在。
而真正改变游戏玩法的东西，在开发和设计上。
多年以前，苹果为了统一全平台的应用开发，开发语言从原本的 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倍，而应用的容量也比以往要小。
对，深色模式也是苹果这次 iOS 产品更新的最核心特点，甚至整个WWDC19 主题演讲环节的整体视觉设计也是完全沿用这种沉浸感极强的深色模式视觉来进行构建的。目前苹果的 HIG 当中 iOS 的章节中新增了 Dark mode 的章节，而 iPadOS 相关的系统的设计设计指南还未更新。
「在 iOS 13 及以上的版本当中，用户可以选择深色模式为默认的外观风格。在深色模式下，系统界面、视图、菜单和控件都会使用较暗的配色方案，并且让前景元素更加鲜艳，确保突出。用户可以选择选择深色模式作为默认的视觉风格，也可以通过设置，让它在光线较暗的时候，自动切换过去。需要注意的是，深色模式可以让人更加专注。在设计的时候，需要在浅色模式和深色模式中都进行测试，因为有些元素和配色在一种模式下可用，在另一种模式下并不一定适用。」
苹果目前在设计规范中所提供的设计要求相对比较简略，感兴趣的同学可以借助翻译工具看一下：Dark Mode
如果你对于深色模式感兴趣，我们还有文章提供给你：
由于目前苹果官方暂时没有更多的内容，我们可以把深色模式更多的内容留到今后来聊。
觉得社交网络帐号登录不够安全？Google 和 Facebook 两大巨头在发布会上成了反面案例，苹果适时地推出了自家的帐号登录服务。
苹果将产品和用户之间的边界划分得非常清晰，包括借助 Homekit 为用户提供基于本地存储的安全服务，在网上登录的时候使用经过加密的邮箱帐号，等等。
而被苹果点名的两家著名科技企业，Google 和 Facebook 也是在之前的 Google I/O 大会以及F8 大会上，相继针对隐私策略、安全服务进行了提升。
如果你对于这些大会感兴趣可以看看之前的文章：
和每年9月的新品发布相比，WWDC 的信息量一点都不小。尤其今年还有超赞的 Mac Pro，单开2篇文章都不一定聊得完。但是在我看来，和设计关系最紧密的产品，应该就是 iPadOS了。这个独特操作系统，巧妙地卡在一个独特的需求点上，它本身的设计和定位、用户体验的考量、服务用户的思路、牵涉到的功能和服务乃至于它对于设计的影响，都是巨大的。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
我们已经生活在未来，那些曾经只出现在科幻剧太空飞船上的酷炫技术，如今正以不可思议的速度出现在汽车中。近年，一个量产车中出现了最令人感兴趣的技术叫做抬头显示（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 设计充满诸多限制。
△ 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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
有句话叫：神造了世界，荷兰人用设计造了荷兰。到底怎么回事呢，今天我们一起来揭晓。话说现代主义设计的形成如果要追溯，离不开三驾马车，分别是德国包豪斯、俄国构成主义跟荷兰风格派，而荷兰的现代设计起源跟荷兰风格派分不开，包豪斯及俄国构成主义我们均已在之前的分享里详细谈过，所以今天我们聊一聊最后一架马车 —— 荷兰设计。
相比英国、美国及日本，荷兰这个国家于大家而言未免有点陌生，但如果在欧洲设计圈，国家之间要投票排坐次的话，撇开爱国热情，荷兰挺进前三甲是毫无问题的。至于设计水平发达的原因有几种说法，其中广受公认的是因为荷兰的生存空间太狭窄。
荷兰 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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
我们在设计中除了接触到图形，还需要了解文字的设计。特别的文字设计或者排版可以使整体的画面效果更加有氛围，甚至超过图形表达的感受，更加直观地表达出内容的主旨。文字的设计方式有很多种，例如通过字体变形，结构重组等方式来让文字变得更加特别，但往往会让我们耗费比较多的时间。
因此我一直在思考有没有一些既简单又的设计方式来提高文字的设计感。在浏览国外的一些设计网站的过程中，做了一下文字设计形式方面的收集，并整理出十种我认为具有代表性的文字设计形式。另外还参考这些设计方式，使用中文字体进行了一些尝试。
拉伸的处理手法，让文字更具有张力，整体氛围更具标题感和图形化，但依然保留着文字该有的识别度。常见于纯文字排版的海报，既满足阅读需要，同时具有设计感。
拉伸与文字本身的字形、字体有着很大程度的关联，并不是所有的文字都适合拉伸，例如下面的案例。
1. 不同字体对比
从方案尝试中看出，左边字体在进行拉伸之后，文字本身的结构会遭到破坏，而右边的效果可以较为接受。因此在设计的过程中尽量选择可适用于拉伸的字体，另外在拉伸的过程中需要对细节重新处理，使字体保留原有字体的细节美感。
2. 不同字形的对比
从下面案例中对比，O 在进行上下拉伸的时候效果比较好，而左右拉伸的时候会失去字体本身的美感，而 Y 在上下左右拉伸后整体视觉效果都相对平衡。
3. 细节处理对比
优化字体线条的细节可以使得整体文字更加规整、方正（右边）。而未进行细节的设计则会显得笔画参差不齐（左边）。
4. 传统与现代对比
传统的字体拉伸后（如下图中间的字体），字体本身的韵味就失去了，因此不建议对一些较为传统的字体进行拉伸设计。
5. 设计尝试
中文字的笔画比较多样性，因此在细节的设计上比英文来得更加复杂，在处理「撇、捺、点、折、弯、勾」时需要保持原本的笔画结构性。
6. 拓展案例
结合实际要表达的内容，使用拉伸的设计手法，例如结合物体，叠加颜色或者交错拉伸等。
虚实结合即为线面/阴阳的设计手法，通过虚实的处理，可以突出一组或一段文字中的重点信息。在一些强调主次的设计中，可以尝试这种方式来做区分，线面结合的处理手法让原有都是面的字体多了一些透气感和空间感。
虚实处理的方法需要考虑本身字体的粗细，过分纤细的字体效果可能并不明显。
1. 尝试对比
从对比中，发现粗体相比于细体来得更加直接更容易出效果，对比明确。
2. 中文字体的尝试
从尝试中来看，与上面中的结论较为一致，较细的字体使用虚实结合效果并不理想。对于书法体的应用，更多需要考虑字体的收边效果是否工整，收边过碎，会影响在描边之后的细节美感。
3. 设计尝试
通过递增或者递减的设计手法，让原本简单重复的文字元素，变得更加具有层次感和节奏感，让文字的生命力变得更加丰富多样。
在设计的过程中需要提前规范好各个字体之间的差异关系及变化的效果过程。按照一定的数值倍数差异比进行变化。
1. 不同方式的尝试对比
在尝试的时候发现，粗细变化的模式可能更多会依赖于字体本身的模式。
2. 中文字体的尝试
中文在使用递进渐变的方式中需要考虑整体文字的结构感和块状感，由于字形较为复杂，整体视觉效果会过于零碎。
与递进渐变接近但却又有差别的文字设计形式。扩展变化的文字具有张力的同时有一定的速度感和发射性，就像向四周展开的波纹效果，具有延续性。
按文字的行高或者字宽作为基础值，按一定的比例，对文字进行破形切割处理，上下左右进行扩展发散。
1. 比例值示意效果
2. 中文字体的尝试
外观的完整度还算可以，但由于中文本身自有的特性（笔画较为丰富多样），因此在扩展层次的数量上需要进行一定的控制，不宜过多，以短语或标题使用较好，避免过于形式而导致文字识别性降低。
3. 设计尝试
文字作为纹理出现在画面中，区别于图形化的纹理。既有图形感，同时可以辅助传达一定的信息和态度。
在字体的选择上尽量适用字形较为简洁的字体，避免影响前景内容的展示。设计上可以结合其他的设计形式，例如虚实结合/拉伸变形/扩展变化等方式，提升画面的丰富程度。
1. 中文字体的尝试
常规的中文字体，整体效果还算不错。但结合中国书法字作为底纹，可以让整体的设计更具有不同于英文的设计感，整体效果更具有力量感，因此建议在设计中文底纹的时候可以大胆尝试中文书法字。
通过叠加的方式，让原本简单的文字和背景产生了融合。既提升了背景的层次感，又让文字变得具有设计感。
粗细的字体会产生不一样的视觉感受，较细的字体会产生若隐若现的视觉效果，文字的识别性会稍弱，较粗的字体识别度基本上没有太大问题，因此在设计的过程中可以结合实际的情况选择不同粗细的文字。
1. 粗细对比尝试
穿透的文字设计，对于打造设计的大片感具有很突出的视觉效果。例如漫威的电影片头设计。
2. 中文字体的尝试
结合不同的语意使用不同的字体，再结合穿透的设计方式，使画面具有中文的文艺感。
3. 拓展案例
结合实际的内容设计，穿透文字的玩法还可以拓展出更多不一样的设计，例如下面这些例子。
扭动的设计，让文字具有曲线的动态感，提升了文字的装饰性。不同曲线的动态变化，赋予文字不同的律动感。变形的文字并未影响到文字该有的识别性和阅读感，却具有了设计感。
如下面的三个案例，曲率的差别，赋予文字不同的动态规则，有不同的视觉感知，有时柔美，有时却具有速度感。因此在设计的时候，可根据具体的内容设计不同的扭动趋势。
1. 中文字体的尝试
对比可见较细的字体使用扭动的设计，效果并不理想。由于中文笔画的差异点，经过扭动之后整体外形较为不规整，而粗体的效果则较为规整，动态曲线趋势也较为明显。
2. 设计尝试
扭动+虚实+底纹的效果。
3. 拓展案例
更高级的设计手法是利用自然环境的介质结合文字，起到扭曲的视觉效果。
与扩展变化有异曲同工之妙，文字通过一定的角度和位移间隔，由二维向三维的视觉效果进行变化，让文字更加多变化和有重量感、层次感。
立体层叠的设计对于字体本身具有一定的要求，较为纤细的字体出来的效果并不理想。
1. 不同的字体尝试
从对比中看出，细体或较细的衬线字体，层叠后会出现衔接不上或视觉黑点的情况（如下面左图和右图）。因此设计时建议使用粗体，并且整体笔画较为平均的字体（中间的图）。
2. 中文字体的尝试
虽然具有了层次感和空间感，但也会让整体变得更加复杂，因此需要根据文字的多少情况进行使用。
3. 拓展案例
立体层叠还不止单向的设计，例如可以进行轨迹变化，向外扩展层叠，或是增加一些颜色渐变来丰富整体的设计。
文字通过错位，叠加，颜色变化，透明度变化，切割等方式的设计之后，具有故障的视觉偏差感受。整体视觉感知类似双重曝光的照片，文字具有丰富的层次感。
颜色叠加的效果，对于颜色的选择极为重要，两个颜色交错之间的颜色可以为过渡色或者互补色。
细体的效果并不理想（如上图左边第一个），建议设计的过程中使用较粗的字体，另外在使用的过程中需要考虑文字的识别度（如右边的效果），重叠之后文字的识别度或多或是会受到影响。
1. 中文字体的尝试
由于中文字比英文复杂，因此使用中文字在设计的时候，可以寻找一些共笔的地方进行重叠（如下图左边的设计），利用字体笔画粗细一致的情况下，进行了边与边的重叠。另外在设计的过程中建议加大字间距，这样可以避免不同文字的重叠，产生过度复杂的效果，影响文字的识别性（如下图最右边的设计）。
2. 拓展案例
在简单的叠色之外，结合不同质感和肌理，可以让整个文字具有不一样的视觉感受。
文字按照立方几何结构进行排版，通过颜色差异，阴阳，线面等方式设计处理后形成空间感和立体感。相比于平面排列的文字更具有空间感和层次感，提升整体画面的设计感。
1. 设计尝试
使用空间错位结合虚实的设计，让简单重复的文字变得具有空间感和立体感。
2. 拓展案例
除了常规的空间打造，甚至可以融入到场景中或者结合物体本身的设计。
以上设计风格，常常会在一些运动品牌的设计中看到。例如，Nike 的设计中应到的文字，也会结合这些方式，来丰富和提高整体的设计感。
火箭队出场片头的字体应用，线形字体叠加渐变的效果，具有层次感又有未来感。
阿迪达斯的广告：
Converse 的广告：
Under Armour 的广告：
除了一些品牌的设计，音乐唱片的封面也有应用到这些类型的设计手法。
我们除了在一些常规的媒介上会看到相关的文字设计，在这两年的耐克或阿迪达斯的鞋子设计中，也会加入文字元素的设计，甚至球员会直接在鞋子上写上文字。
文字设计的拓展叠加
文字的设计已经成为一种新的设计趋势，结合实际需要表达的想法，对于设计手法进行活学活用是做出好设计的关键。当然只有掌握了基础手法才可能做到举一反三的设计思考。在实际设计的过程中，我们往往不会是单独使用某一种方式，而是对不同的设计手法进行重组再设计，或者使用 2~3 种方式叠加设计来打造整体的画面效果。如下：
在这十种基础的文字设计中，通过结合发散可以迸发出远远不止于十种的创意设计。本次收集总结除了自身学习提高之外，希望可以起到抛砖引玉的作用，激发设计师对于文字的设计思考。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
动效有助于让UI具有更好的表现力及更易于使用，尽管具有如此大的潜力，但可能由于它是UI设计家族中的新成员之一，所以它大概是所有设计学科中最不被大众所了解的。视觉设计和交互设计可追溯到早期的GUI，但由于动画必须由现代硬件来顺畅的渲染，而且UI动效和传统动画之间的重叠区间也使得两者之间的区分变得复杂。传统动画需要掌握迪斯尼的12个基本原则，那么这是否意味着UI动效也像传统动画一样复杂？我经常能听到人们说，动效设计很复杂，不知道如何选择相对应的动画模式，但是我认为至少在UI领域，动效设计是可以很简单的。
从哪里开始
动效主要是通过UI元素之间关系过渡来帮助用户浏览App。当然还可以通过使用图标、勋章以及插画动效来为App增色，但是建立产品可用性应该优先于增加动效表现力。在展示你的动效设计技巧之前，让我们先从设计一个基本的动效开始，即产品导航之间的过渡。
过渡模式
在设计导航之间进行动效过渡时，简单性和一致性是最关键的点。为了达到这个目的，我们将以下2种动画模式中进行选择：
1、基于容器的过渡。
2、没有容器的过渡。
基于容器的过渡
文本、图标和图片等元素在容器内进行分组
如果动画涉及像按钮，卡片或列表这样的内容，则使用基于容器的动画设计，容器通常有很明显的边界，这种模式分为三个步骤：
1.使用Material的标准缓动为容器设置动画（意味着它可以快速加速，然后逐渐的慢下来）。在下图的示例中，容器的尺寸和圆角半径从圆形按钮动画过渡到填充整个屏幕的矩形。
2.缩放容器中的元素进行宽度自适应，将元素固定在顶部但是仍然存在容器内，这样在容器和内部元素之间创建了清晰的关系链。
*放慢动画速度以说明元素在容器内如何缩放
3.随着容器加速，在过渡期间逐渐淡出消失。当容器减速时输入的元素逐渐淡入。当元素进行快速移动时，通过淡入淡出来实现元素的更替。
*放慢动画速度以说明元素如何使用淡出淡出
将此模式应用于所有涉及容器过渡的动效，这样会建立起来一致的动效规则。这样还使得开始和结束之间的关系更加清晰，因为它们是由两个动画容器互相衔接的。为了展示这种模式的灵活性，这里将它分为五种不同使用场景：
*放慢动画速度以说明容器如何连接开始和结束
有的容器只是使用Material的标准缓动从屏幕外滑入，它滑动的方向取决于与之关联的组件位置。例如点击左上角的抽屉导航，图标将从左侧滑动容器。
如果容器从屏幕边界进入，则它会淡入并放大。它并不是从0％的比例制作动画，而是从95％开始，以避免元素之间的过渡幅度太大。缩放动画使用Material的减速缓动，这意味着它以峰值速度开始并逐渐减速停止。在元素退出时，容器会在没有缩放动画的情况下淡出。为什么退出动画会有这样微妙的设计呢，这样做是便于将注意力集中在新内容上。
*放慢动画速度以说明容器如何通过淡入淡出进行缩放动画
没有容器的过渡
有些作品将使用没有容器的过渡来构建动效设计，例如点击底部导航中的图标，将用户带到新的页面，在这些情况下，将使用以下两个步骤：
1、起始元素通过淡出消失，然后最终元素通过淡入进入。
2、随着最终元素逐渐出现，使用Material的减速运动来巧妙的展现。但同时缩放仅适用于新旧内容的替换。
*放慢动画速度以说明没有容器的过渡如何使用淡入淡出和缩放
如果开始和结束的组合元素具有清晰的空间或顺序关系，则可以使用共享动画来强化它。例如当下图触发导航组件时，开始和结束的动画都在垂直维度进行滑动，这加强了他们的垂直布局。当点击下右图入门流程中的下一个按钮时，从左向右水平动画强化了序列进行的的概念。共享动画使用Material的标准缓动。
*减慢动画以说明垂直和水平共享动画
最佳方案
把事情变的更简单一些
鉴于其动画频率高低与产品可用性密切相关，导航过渡通常应该优先于功能展示。引人注目的动画通常最适用于小图标，勋章，加载或空状态等元素。下面这个简单的案例可能不会得到Dribbble的那么多关注，但是它更像一个真实的产品。
*放慢动画速度以显示不同的动画风格
选择合适的时间及缓动类型
导航过渡应该使用合适的时间，快速过渡优先考虑功能，但是速度也不要太快，防止动画路径迷失。根据动画占用的屏幕比例来选择动画持续时间。由于导航过渡通常占据屏幕的大部分，因此300ms是一个比较有经验的动画时长。相比之下，像开关按钮这种小组件动画持续时间很短，大概在100ms左右。如果过渡感觉太快或太慢，请以25ms的增量调整其持续时间，直到它达到合适的动画节奏。
Easing描述了动画加速和减速。大多数导航过渡使用Material的标准缓动，这是一种不对称的缓动类型。这意味着元素会快速加速运动，然后缓慢减速以将注意力集中在动画结束时。这种类型的缓动为动画提供了自然的感觉，因为现实世界中的物体不会立即开始或停止移动。如果动画看起来很僵硬或死板，那么可能是由于你选错了缓动类型。
*放慢动画速度以说明不同的缓动类型
本文所说的动效模式在建立一种实用而又微妙的动画风格。这适用于大多数产品，但某些品牌可能需要更激进的动效表达。要了解更多有关动效的内容，请阅读Material motion指南。
一旦处理好了导航之间的过渡动画，在你的产品中添加角色动画的挑战就开始了。这意味着简单动画模式是不够的，这时候动传统的动画工艺会真正闪耀起来。
角色动画可以增加趣味性
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com
