如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
我们已经生活在未来，那些曾经只出现在科幻剧太空飞船上的酷炫技术，如今正以不可思议的速度出现在汽车中。近年，一个量产车中出现了最令人感兴趣的技术叫做抬头显示（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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
本文介绍了两种在 JavaScript 读取文件的方法
文件读取在当今的编程语言中应该算是一项比较 trivial 的工作了,语言的标准库一般都会帮助我们做好文件抽象与读写缓存,我们仅需要熟悉和运用相关的 API 即可.
但是 JavaScript 由于安全性的原因,一直以来都没有提供相关的文件读取接口,但有时我们确实需要读取本地文件内容,下面是两种可能的读取方法.
1. 使用 HTML5 中的 FileReader
HTML5 引入的 FileReader 可以帮助我们读取本地文件,但是有一个限制,就是我们不能直接使用文件路径的方式来访问文件,而是首先需要用户选择文件(通过文件选择或者拖动文件至网页等方式)
代码还是比较简单的,首先你需要在 html 文件中添加文件选择表单:
<input type="file" id="file-input" />
<div id="file-content" />
1
2
接着就可以在 JavaScript 中进行(用户选择的)文件读取了:
function readSingleFile(e) {
// file from "file-input"
var file = e.target.files[0];
if (!file) {
return;
}
// create FileReader
var reader = new FileReader();
// load callback
reader.onload = function(e) {
var contents = e.target.result;
// process file contents here
// ...
};
// do read
reader.readAsText(file);
}
// add file input change listener
var fileInput = document.getElementById("file-input");
fileInput.addEventListener("change", readSingleFile, false);
2. 使用 XMLHttpRequest
XMLHttpRequest 一般用于实现 Ajax,通过他我们也可以实现本地文件的读取(但是有同源等限制),示例代码如下:
var contents = "";
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.status == 200 && xmlhttp.readyState == 4) {
contents = xmlhttp.responseText;
// process file contents here
// ...
}
};
// send read request
xmlhttp.open("GET","abc.txt",true);
xmlhttp.send();
更多资料
http://researchhubs.com/post/computing/javascript/open-a-local-file-with-javascript.html
https://www.html5rocks.com/en/tutorials/file/dndfiles/
https://www.liaoxuefeng.com/wiki/1022910821149312/1023022332902400
蓝蓝整理
提到创新,领导者们的脑海里首先会想到的问题包括:什么样的人、流程和组织环境可以促进创新?我们能否培训哪些天生不具备创新力的员工变得有创新力?如何做呢?创新力又是什么呢?
在我们尝试回答该问题之前,先了解多一点创新力，这种要求很高,又很难定义的能力(已经超出了职位描述所及)。
约翰·霍普金斯大学的神经学家Charles Limb的研究提供了一些有趣的线索,在他早期的实验中,有一些非结论性的发现,指向了一个有趣的方向:创新力似乎不是与大脑特定区域的活动有关,而是与前脑一些区域的关闭有关,这些区域负责逻辑分析和自上而下地控制决策。
创新力是否是一些不必要去刻意获取的东西?因为它已经在那里了,只是由于经常处于分析性思
维的压制之下而难以显现出来?对于创新领袖的发展和培训,这又揭示了什么?组织中的哪些设置和模式需要被“关闭”,以便创新力能够在内部变得丰富起来?
这些问题的答案涉及设计所掌握的宝贵的价值——同理心、灵活性、自由和参与。以下两个设计思维实践的案例不是关于个别公司的,而是关于一些企业为了变得更具创新力适应力和弹性,而选择很多公司少走的路径。
这里有两个案例，第一个案例说明企业把员工派到几千里外的地方去，在环境流程完全不同的情况下，让他们接受项目和培训，变得更有创造力和具有设计思维。
第二个案例通过让他们自由地在地下室和车库或者离他们最近的DY创客空间闲逛,也能收到良好的效果。
第一个案例：国际企业志愿者服务:在同理心中历险
“全球化思维”这个词经常出现在关于领导力的讨论中,但它的真正含义是什么?是否只是描述上世界脚步的领导者的一种说辞?是否意味着拥有在外国文化背景下生活或工作的经验?如果我们用“北/南”这样一种粗鲁的说法代表发达工业国家和世界其他国家各自的经济阵营,那么“全球化思维”是否就是一种让来自全球北方阵营的商界人士来了解南方阵营的现实的有礼貌的说法?或者只是社会特权阶层的商业主营业务脱离了全球主体现实的仟悔之辞,让他们来补上同理心这一课，不管你认为是哪种情况,很值得深入了解的是企业培养更多全球思维领袖的路径-----国际企业志愿者服务（国际企业志愿者服务包含一系列有着多方面目标的、范围很广泛的项目,它为成员们提供特别的环境与来自不同地域、历史背景和社会阶层的人们分享经验、发展同理心。）
让我们深入探寻这样一个项目的具体细节,更好地理解这一现象和其中所包含的设计思维原则。
百事企业是一个为期一个月的国际商业体验项目,在深化员工对公司的引领哲学—“带着目的,做出成绩”的认同企业全球范围的员工(可以跨职能),只要是公司的领导力发展培养对象,就可以申请加入项目，随后企业会仔细挑选出由7-8个人组成的团队到海外的项目上工作,他们将要运用商业上的精明采断去解决各种挑战,包括洁净水资源、可持续发展的农业、可负担的营养和妇女发展(这些都是公司关注的领域)。项目团队需要与他们帮助的社区一起生活和工作,避开行政商务差旅的特别津贴，有助于团队融入当地的文化和环境。
例如,百事企业最早的一支志愿者队伍花了一个月的时间在加纳的代努,与当地政府和南科图地区的部落委员会一起工作,改善村民获取干净和安全的饮用水的方式,推广可持续发展的生态旅游业，一半队员负责做研究,向该区水务及卫生处提出改进流程的提议,并和当地政府官员一起举办“培训培训师”的课程,帮助把这些提议更好地落实。另一半队员邀请当地政府、部落首领和社区其他利益相关方共同制定吸引中央政府和私人机构对生态游进行投资的方案和概念,每周五,整个团队会在当地学校义务支教,面向1000多名小学生教授个人卫生习惯,通过把基础设施的供给与经济发展、教育和健康连接起来，团队在用系统的方法解决社区发展问题上树立了一个很好的典型，并激发了团队成员在日后就后更能运用其商业技术能和专长，为解决复杂问题贡献有形和持久的解决方案。
通过强调实地学习和面对极端限制性因素的创造性解决问题的方式，百事企业项目和类似项目在公司不断扩大的圈子里播下了“设计”的意识和设计工具的种子，有趣的是,国际企业志愿名服务是服务于不同公司的，每个项目都是基于反映公司文化和战略重点而设计的，因此结果也非常具有多样性,一些企业(如1BM)希望在员工中宣传一种服务和公民的普遍意识，另一些企业是为了培养新一代的领袖，希望他们在解决复杂问题过程中的导向是具备全球视野、充满目的感、适应力强、能够跨学科协作的，还有一些企业的需求可以定义为产生同理心的体验，为创新而进行的场景式学习,为处于社会经济金字塔底层的人们带来积极影响。
随着百事企业项目对百事公司社群的激发,项目参与者已经开始专注于程的下一个阶段--面对不断成长的、已经转变为在商业中能够带着目的去行动的员工骨干，要做些什么？
如何把他们和相应的角色、责任相连,进一步推动“通过促进社会发展来获得好的财务收益
共同使命?这个问题其实是企业乐于拥有的。
第二个案例：俭约创新(Jugaad)—印度企业鼓捣创新的艺术
印度的“曼加里安”号火星探测器于2013年11月成功发射到太空,已经完成了预定目标一半之
截至写这本书的时候)。这是亚洲国家成功发射的首个火星探测器,将使印度与其他21个经尝
但失败的亚洲国家拉开距离。“曼加里安”号背后的故事还有很多,它可能是世界舞台上最引
目的“俭约创新(Jugaad)的例子,即以印度式的态度和方式进行创新(和生活),其原则正在被全世界顶尖跨国公司学习和应用。
在印度语里面,俭约创新(Jugaad)的意思就是在解决问题的过程中要足智多谋，并且很节俭。
印度火星任务只花了印度空间研究组织约75，000，000元，相反,美国家航空航天局
“MARVEN”火星探测器花费671，000，000元。前者耗费15个月来建造,后者用了5年。
如果更进一步来说明,俭约创新的精神既是深深植根于印度(这种聪明才智是这个超过10亿人口的国家在应对各种难以想象的限制性因素的情况下做出的应变反应),同时也是具有明显的普适性的,因为还有数十亿人每天也要面对和解决相似的冲突,从巴格达、开罗、底特律、德班、拉各斯马尼拉、墨西哥城到圣保罗。俭约创新和设计思维的精神也是紧密交织在一起的,例如它也是聚焦于问题背后的环境因素、模块化组合拼凑和重复运用,也采用了在不断测试中学习的方法。
在“曼加里安”号这个案例中,俭约创新的方法具体表现在:充分利用其他太空飞行任务中已经发展出来的发射能力和设计元素,快速和更有效地测试,以及非常机敏地运用一些有利条件。
这是一个普遍的设计哲学——最大限度地充分运用已有的资源(相反的做法是构建一组理想的规格)的具体应用。
正如印度空间研究组织主席K· Radhakrishnan对《卫报》解释说:“我们使用我们能获得的、具备最佳效力的发射装备,特别定制了发射时间和发射角度,以确保它到达正确的轨道。”
简要地说,作者们从丰富而多样化的观察中,总结出了三个关键的结论：
(1)创新的关键驱动力,是不断生长的自由,而不是不断增加的预算。这个发现打破了一个流行的说法—创新是一件昂贵的事情,需要大量的研发投入和高科技带动。这并不是说研发和技术不能帮助创新,关键是看企业如何更有创意地运用研发和高科技,而不是在上面投入多少资金,所以企业创新向前的关键,是提供适合的环境和工具促使员工用自己的双手来做创新。
(2)说到创新的成功,灵活的方法比传统分阶段的流程化控制更胜一筹。
Naii和sm所经历的最激动人心的时刻,就是把实证的斧头挥向了传统对于创新的商业思考----认为创新是另外一种企业行为,像技术一样可以通过六西格玛来管理和优化。
如果创新管理这个说法本身是自相矛盾的,怎么办?企业不得不从“漏斗式”的创新管理方式转变为创造一个生态系统,各个部分是共生的,可以自适应特定的需求,例如速度、干扰、规模等。“对模糊的舒适感”是设计和前瞻很常用的创新原则,可以很好地匹配一些任务,帮助企业适应新的创新模式,使用框架和流程作为导向和航线,而不是被框住,这是在企业当中可以有很多方面运用的设计思维的一个方面。
(3)驱动创新的是参与式网络,而不是秘密的孤岛作业。对于俭约创新也是同样,在历史上它也根植于社会最贫困的阶层,俭约创新本质上是主张民主化,憎恶阶层和精英主义的透明和合作。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
有句话叫：神造了世界，荷兰人用设计造了荷兰。到底怎么回事呢，今天我们一起来揭晓。话说现代主义设计的形成如果要追溯，离不开三驾马车，分别是德国包豪斯、俄国构成主义跟荷兰风格派，而荷兰的现代设计起源跟荷兰风格派分不开，包豪斯及俄国构成主义我们均已在之前的分享里详细谈过，所以今天我们聊一聊最后一架马车 —— 荷兰设计。
相比英国、美国及日本，荷兰这个国家于大家而言未免有点陌生，但如果在欧洲设计圈，国家之间要投票排坐次的话，撇开爱国热情，荷兰挺进前三甲是毫无问题的。至于设计水平发达的原因有几种说法，其中广受公认的是因为荷兰的生存空间太狭窄。
荷兰 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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
最近折腾自己的网站，在自适应方面发现有了很多新的方法，感叹前端的技术真是日新月异，从以前只能这样，到现在除了这样，还可以那样，甚至再那样......技术永无止境啊。
回到主题，自适应响应式布局这个话题古老而新颖，从最早的不同分辨率的屏幕，到现在遍布各个生活角落的移动设备，响应式布局已经成了几乎所有互联网公司必备的条件。在我的映像中，bootstrap一直是响应式的头号选择，的确，其中的各种xl，xs，栅格布局让响应式变得很容易。
话说，这Vue做响应式，其实一点都不复杂：一个生命周期钩子，一个条指令，一套js判断语句解决，说到这，高手们应该早已经明白如何操作了， 这篇文章就给广大刚入门的同学们拓宽一下吧（不熟悉Vue的同学，还是先恶补一下Vue基础吧）。
一个生命周期钩子——mounted：挂载时操作；一条指令——v-show（本例中采用，非绝对）：根据条件显示；一套js判断语句：if/else或者switch/case。具体操作起来很简单：（代码直接展示）
<!--这是一段导航html-->
<nav id="nav-part" class="easyUtil-backImgPostion easyUtil-flexContainerRow">
<ul class="easyUtil-flexContainerRow">
<li class="nav-list" :class="nav.className" v-for="(nav,i) in navs">
<a :href="nav.href">{{nav.name}}</a>
</li>
</ul>
<div id="serach-part" v-show="show"><input type="search" id="search" :placeholder="placeholder" class="easyUtil-input"><button id="searchBtn" class="easyUtil-btn">{{btn}}</button></div>
</nav>
var head = new Vue({
el : "#head",
data : {
//此处省略一千字
show : true
},
mounted : function(){
//可用于设置自适应屏幕，根据获得的可视宽度（兼容性）判断是否显示
let w = document.documentElement.offsetWidth || document.body.offsetWidth;
if(w < 1000){
this.show = false;
}
})
我的目的是在移动设备中不显示搜索栏（search-part）部分，那么利用v-show,和mounted配合，在挂载时检测一下屏幕可视宽度，如果小于1000，则认为是手机，v-show设为false,不显示即可。
看，很简单吧，简单到我觉得自己好像在忽悠。其实到这里，原理已经说完，具体的应用大家可以自行发挥，而且也不一定就用v-show，我这里是为了显示与否，如果大家想添加样式什么的，还可以写别的，甚至于计算属性，watch都可以。只要记住在挂载的时候完成即可，不然页面会有跳动，不利于体验。
可能有人会问，用css的@media就可以完成了，为啥用js，我这里想说的是，我并没有否认@media，这里只是写出更多一种方式，同时结合一下现在很火的前端框架。多一种方法，就多一种解决思路，不至于再回到以前"只能这样"的道路上。具体到实际应用中，当然是最适合的方法为主。前端水深，前端的路子也越来越多，越来也丰富，敞开思维，就会看见不同的天空。
ps一句，js确实需要刷新页面重新加载才会显示，也就是说如果用户将页面从大屏移动到小屏幕，就可能出现布局不响应问题，但是在实际使用中，这种情况几乎不会出现，因为用户不能可能将电脑打开的网页，直接移动到手机上，操作永远都是重新打开，所以js，css在显示效果上是没有区别的（当然如果js太过复杂，性能会有影响）。另外，文中方法的兼容性问题，只要支持Vue的浏览器，都没问题。
就说到这吧，欢迎大神指正，不胜感激！
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
1、用px2rem配合lib-flexible，让网页适配。
lib-flexible
作用：让网页根据设备dpr和宽度，利用viewport和html根元素的font-size配合rem来适配不同尺寸的移动端设备
安装：
npm install lib-flexible
1
引入：入口文件main.js中：
import "lib-flexible/flexible.js"
1
2、手写一个js小工具，省略rem的计算，加快开发速度。
在src目录下增加一个utils目录，在里面新建一个js文件，写入以下内容：
// 基准大小
const baseSize = 32
// 设置 rem 函数
function setRem () {
// 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
const scale = document.documentElement.clientWidth / 750
// 设置页面根节点字体大小
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}
在main.js中引入改js文件：
import "./utils/rem"
1
然后就可以直接用px写页面啦，而不用去计算rem的值，是不是很舒服呢。
3、使用VW。了解下vw 与 vh单位，以viewport为基准，1vw 与 1vh分别为window.innerWidth 与 window.innerHeight的百分之一
安装：
npm i postcss-px-to-viewport -save -dev
1
在package.json中配置如下：
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-pxtorem": {
"rootValue": 32,
"propList": ["*"]
}
},
"plugins": {
"autoprefixer": {},
"postcss-px-to-viewport": {
"viewportWidth": 750,
"minPixelValue": 1
}
}
},
4、利用bootstrap实现响应式图片
在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。
对于图片的大小限制一定要在图片的父级元素进行限制。
5、利用bootstrap的栅格系统，下面列一下栅格系统的参数：
超小屏手机 (<768px) 小屏幕平板(>=768px) 中等屏桌面(>=992px) 大屏桌面(>=1200px)
类前缀 .col-xs .col-sm .col-md .col-lg
列数 12 12 12 12
.container最大宽度 None(自动) 750px 970px 1170px
举个移动设备和桌面的例子：
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
还有更多对响应式的支持，就不一一列举了。
蓝蓝设计的小编 http://www.lanlanwork.com
