如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
有句話叫：神造了世界，荷蘭人用設計造了荷蘭。到底怎么回事呢，今天我們一起來揭曉。話說現代主義設計的形成如果要追溯，離不開三駕馬車，分別是德國包豪斯、俄國構成主義跟荷蘭風格派，而荷蘭的現代設計起源跟荷蘭風格派分不開，包豪斯及俄國構成主義我們均已在之前的分享里詳細談過，所以今天我們聊一聊最后一架馬車 —— 荷蘭設計。
相比英國、美國及日本，荷蘭這個國家于大家而言未免有點陌生，但如果在歐洲設計圈，國家之間要投票排坐次的話，撇開愛國熱情，荷蘭挺進前三甲是毫無問題的。至于設計水平發達的原因有幾種說法，其中廣受公認的是因為荷蘭的生存空間太狹窄。
荷蘭 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 年時候杜斯伯格也開始到德國包豪斯參觀，期間他對這所學校非常感興趣，甚至決定將《風格》雜志遷移到包豪斯來出版，他在講學中高度贊揚包豪斯的行動，卻又同時批評包豪斯的發展方向，他的《風格》雜志就類似現在的自媒體大號，擁有非常巨大的影響力，所以這對格羅比烏斯也造成困擾，這也是杜斯伯格一直以來的性格，就是性情變幻無常。當時正值俄國構成主義觀光團在德國游學，他可以當天對他們的作品高度贊揚，但是隔天又提出猛烈批評，完全不按常規套路出牌。另外關于他的一些故事也可以詳見《用一篇超全面的好文，帶你了解包豪斯的前世與今生》，他跟包豪斯的伊頓在著裝上喜歡一黑一白，相映成趣。
包豪斯里有一位著名的教員叫費寧格，他倒是喜歡杜斯伯格直接凌厲的性情，因為杜斯伯格雖然不按常規套路出牌，但是批評的時候理據都非常充分，而且杜斯伯格本身具備深厚扎實的藝術素養，并且當時他擁有自媒體大號，被他罵也是出名的一種渠道，所以費寧格建議格羅比烏斯可以游說杜斯伯格干脆在包豪斯開課程，成為特聘教員，開明的格羅比烏斯同意了這個建議。
但是這樣導致了包豪斯一場噩夢，因為杜斯伯格雖然在藝術理論上有主張，但是教學上傾向無政府主義，說白了就是完全不服從組織的管理與安排，在當時位于德國魏瑪的包豪斯搞結構主義與達達主義大會，但是在教學上這些激進思想并沒有給學生帶來太多實質性的支持與幫助，課堂上的杜斯伯格大吵大叫，而他的夫人則在一旁用鋼琴演奏構成主義的非調性音樂。關于什么是無調性音樂，大家可以看看網易音樂里的評論：
所以現場非?；靵y，簡直無法進行下去，而且他還經常在包豪斯的課堂上批評包豪斯是非理性的，是浪漫主義的，而自身卻在進行非理性的行為。于是在 1922 年，格羅比烏斯跟其他教員都實在無法忍受，決定由格羅比烏斯為代表對杜斯伯格進行勸退，最后杜斯伯格雖然是離開了包豪斯，但很快就在包豪斯附近建立自己的培訓學校，他傳授「風格派」抽象主義藝術思想與創作原則，這也吸引了大量的包豪斯學生前去聽他的講學，但期間他繼續對包豪斯的教學方向進行批評，可謂非常執著。
但不管如何，杜斯伯格是將風格派思想帶到德國包豪斯的關鍵人物，他主張的「風格派」（style-less），期望找到更加簡單、更加國際的術語來建立國際風格基礎。
這種藝術觀點為包豪斯所吸納并產生重大影響，抽象藝術也因此逐漸成為現代設計的一種國際風格，引導了整個 20 世紀的產品造型。他其實也通過包豪斯提升了「風格派」在國際上的地位，所以相輔相成。「風格派」也因此與俄國的「構成主義」、德國現代設計運動一起成為現代藝術設計運動的重要組成部分。
杜斯伯格與蒙德里安在個性及氣質上形成比較鮮明的對比：蒙德里安溫和且有耐性，總是緩慢前進，不斷精益求精；杜斯伯格則常常顯得沖動，性格中更多的是挑釁和攻擊，而較少有建設性成分。但不管如何，兩人仍是風格派中的 twins，缺一不可。
杜斯伯格 1931 年時候在瑞士去世，享年 48 歲，而蒙德里安 1944 年在紐約去世，享年 72 歲，相信兩人在另一個空間會再次不期而遇，然后冰釋前嫌重修盟好，繼續探討藝術與設計。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
新人設計師可能都會遇到這樣的問題：在設計一個復雜需求的時候，各種場景、可能性在腦中來回亂竄，常常覺得邏輯不夠嚴密。設計完成后，又被各方質疑，提出各種異常場景，導致頻繁修改，縫縫補補。本文將和大家分享下解決以上問題的小方法。本文就以「企業內部權限分配平臺」的需求為案例，整理了之前處理復雜需求的一些思路。講講在交互設計的過程中，如何避免以上兩種情況，讓我們的工作更好地服務用戶，體現價值。
首先，我想任何設計師在設計產品的時候第一步都是理解需求，這包括了需求的目標背景、角色場景、產品邏輯等，不同的需求側重點會不同。以「企業內部權限分配平臺」的需求為例，目標背景和角色都比較簡單，但是一般涉及權限的產品，背后的邏輯就會很復雜，場景情況也很多。
和產品溝通，和用戶溝通，甚至網上找資料，都是理解需求的一些好方法。比如本次設計的需求是關于權限分配，這一篇《網易高手：角色權限設計的100種解法》的文章，就很好地幫助我理解權限分配背后的設計邏輯。
包括理解需求內的專有名詞，為其建立特殊的標識樣式，也是幫助自己、團隊、用戶更好地理解產品需求的一種方式。
△ 名詞解釋
我們在最初思考需求的時候，肯定會從場景/問題出發，思考怎么去解決這個問題，是以「人」的思維來思考這個問題的，這是必然的，也是正確的。但此時我們的思維是散點式的，例如當我們想到權限分配的需求時，可能會說：這次我們要新增一個「崗位」的概念，讓權限和崗位綁定，不要和人綁定。對了，還有人員離職這個問題困擾業務很久了，我們這次要在人員離職的時候進行……
所以，在最初的需求框架確定后，我得到的是這樣兩段文字：
看上去已經非常全面了，但由于我們是散點式地收集需求，很多時候可能還是會有遺漏，或者說錯誤關聯了內在邏輯，導致一些邏輯沖突、漏洞。
此時，我們需要將我們的思維從「散點式收集」轉為「結構化梳理」。從需求說明里抽絲剝繭，我們可以得到：
各個對象之間的關系又是怎樣呢？我們把所有的對象兩兩組合，再把沒有關系的刪掉。
也就是：
這個具體的業務邏輯并不重要，不需要去費心理解，重要的是這樣一種結構化思考的方法，可以應用在后續各種各樣的設計中。
對象間的關聯，再和我們剛才梳理的人物、操作相結合，就可以還原成一系列的需求描述：「角色」可以在「A對象」下「操作」「B對象」，例如：超級管理員可以在部門下新增崗位。
至此，我們已經可以建立「需求→功能對應表」：
其中，紅色部分都是在之前散點式的需求羅列中沒有考慮到的功能點，通過結構化的梳理，我們可以提前把它們都一一補齊。
這個過程可以減少我們最小顆粒功能點的遺漏，避免在做完大部分設計后，突然發現遺漏了某個功能，任務時間點又已經到了，慌慌忙忙地加功能，就可能會影響整體的設計思路和框架。
完成了功能點的整理歸納后，就可以開始我們的界面設計了。在最初的界面設計中，這三點需要做減法：
當然，可以先把可能存在的異常、細節都記錄下來，以便后續補充。
比如，在人員權限分配的界面結構中，分為三個大模塊：
在有了界面框架和功能對應表后，我們做設計會變得比較簡單，按照之前整理的「需求→功能對應表」，把每個小顆粒的功能細節填充到界面框架內即可。
當主流程設計完畢之后，我們就要開始做加法了，在之前，我們一直是用一種純理性的視角來完成我們的設計，保持純理性的設計會有兩個問題：
例如，純從邏輯思維角度你能想到在一個企業里有人是沒有任何部門歸屬的嗎？然而現實中就存在這樣的情況──外包人員。不結合實際場景，我們也不知道用戶一天需要處理多少次重復操作，目前的設計對他是否足夠便捷。
作為一個企業內部權限分配平臺，我們可以把部?、崗位、人員等對象作為初始線索，站在不同的用戶使用角度，沿著線索去全面地思考場景，修改功能。有一些實在難以理解的業務，找用戶聊聊也是一個好方法。
很快，我們就找到了下面這些特殊場景。
1. 人員變動
處理方法：行政架構自動同步，紅點待辦。
我們與 OA 系統數據打通，自動形成四類待辦紅點：人員新增、人員離職、行政部門新增、行政部門刪除。
這樣 HR 就不需要重復做新人員的添加操作，只需要業務管理員把 OA 內無法覆蓋的人員崗位設定好就可以，也不會出現遺漏的情況。
2. 高管兼職
例如某位高管：本身為 A 部門負責人，臨時兼任 B 部門負責人，那么當他不再負責 B 部門時，該如何處理他的崗位？離職？轉崗？似乎都不合適。
處理方法：新增崗位移除功能。
3. 外包人員
了解到現實情況中，外包人員是沒有部門歸屬的，但是實際上他們肯定也有自己負責的業務范圍和崗位，在初始化時如何安置沒有部門的人？
處理方法：新增一個部門，叫做「無崗位人員」，并且標紅作為待辦，提醒操作者去處理這些「無崗位人員」。
4. 人員離職/轉崗
在進行功能設計整合時，我考慮是否「人員離職」應該叫「人員刪除」更系統化？是否可以直接整合為一個「人員編輯」的功能，將離職、轉崗的操作合并？（實際上這2個功能操作起來確實比較相似）
處理方法：最終我依然保留了「人員離職」、「人員轉崗」的功能，因為這樣更場景化，用戶清晰地知道自己當前該操作什么。
目前對一個人進行離職操作的路徑是：找到原部門→找到崗位→找到人→處理離職，而我們的企業有 2500+ 員工，對于離職操作者 HR 來說，這個路徑是否現實？是否快捷？
處理方法：新增搜索功能，直接搜索人名→處理離職，這個功能也方便了其他找人的場景。
5. 更多
諸如此類的考慮還有很多，例如新建部門的時候是否會有空部門，在企業進行組織架構重組時是否會有大批量的人員、組織變動，進而需要有批量操作等等。找到最初的線索，站在用戶的角度沿著線索思考，進行全局掃描，就會發現很多需要做加法的地方，發現的方式可以是觀察、訪談、思考等任何方式。
在已經保證了主流程的簡潔、清晰后，再用全局掃描的方式去搜集特殊場景，給我們的設計做加法，可以保證我們整體的設計框架是清晰可用的，而特殊場景是散落在骨干上的各種小分支。
如果我們可以做到，對所有的主干場景、分支場景了然于心，并且有自己的優先級考慮，那么對于項目成員、用戶提出的質疑，我們也有足夠的理由來證明自己設計的合理性。
當然，場景基本考慮全面后，還有最后一步，就是統一交互，完善細節，這一步也是設計上的加法。
以上，就是一個針對復雜需求的加減設計法案例，總結來說有四個大步驟：
所以，交互設計師是需要理性和感性的結合，要有抽絲剝繭，提煉總結的能力，也要有貼近用戶關注情感的細膩。把自己的工作規范化，減少無效付出，也是我們的一種能力。希望本篇文章對新人設計師有一些幫助，也歡迎大家一起探討交流。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
柵格系統在UI設計和前端開發中是被應用的很廣泛一套體系，但真正能掌握并很好運用的人卻不多，一起來學習吧！
環顧身邊常見的優秀設計很多都使用了柵格系統，你可能非常贊同在界面中使用柵格系統，但卻沒有人告訴你應該如何使用它們。
印刷中也會用到柵格，但就本文而言，我主要想討論的是用于PC和移動設備上的柵格系統設計。
紫色塊放內容
內容塊包括文本，圖片或者是兩者的組合形式，背景顏色實際上不能算是內容元素，除非是作為文本或者圖片的容器。
上圖中的粉色塊作為柵格中的列，它們構成了內容寬度。一般來說，列寬是不會變的，只是列數會隨著設備的不同而變化，比如從PC端的12列變為平板電腦上的8列，然后在移動端變為4列。嚴格來說，你其實可以定義任何想要的列寬，但大多數情況下的網格列寬都設置在60-80px之間。選擇合適的列寬是最重要的，因為它是內容寬度的主要決定因素。
水槽是在列與列之間的空間。20px是一個常見的尺寸設置，當設計塊狀或者卡片元素的網格時，這種間距非常重要，比如做照片類設計的時候。有些系統會隨著設備寬度的增加而增加水槽的寬度，但也可以保持固定。
外邊距也稱為外水槽，是內容寬度之外的空白區域。為了更方便的設計，外邊距會隨著設備寬度的增加而增加。移動設備的邊距通常為20-30px，而在平板電腦和PC端，這個間距通常會差異很大。
下面會介紹一些基本的準則，但要明白在實際設計中其實沒有任何硬性的規定。
1. 內容元素必須位于若干列上
其核心思想是內容元素必須位于若干列上，你可以任意分割，比如6x2,3x4,4x3。下面的例子中，我展示了不同分割方式設計的信息卡片。
不同柵格設計展示
很棒，這看起來很簡單對吧。有的時候，你想把內容嚴格的套用在柵格布局上，會發現可能不夠美觀，比如下面的例子。
如果我們把內容都放在網格上，文本內容會顯得很長，最佳的位置是不嚴格在任何網格上，這也是可以的，只要理解了整個元素實際上是一個不可見的，更大的容器就行。
這也是4x3的布局，只是給了它內部不可見的填充。當把這樣的設計稿給到開發時，他們就能很直觀的知道這一點，所以這更利于去理解如何實際地分配好內容。
2. 不要將內容元素留在水槽中
內容元素應該要在列寬以內，而不能流出在水槽之外，這樣會違背柵格化的目的。
3. 只要父級元素對齊柵格，子級可以不完全對齊列
有些時候，你想要將設計和卡片分成兩部分，一半是圖片，一半是文字。你可能遇到這樣尷尬的情況，圖片沒有完全落在一列上，文字被迫以一種奇怪的方式自適應。其實不用擔心，只要“父”容器對齊柵格，這就沒有關系。
父子級內容柵格排版示意
4. 除非有意，否則不要把列作為外部填充
所有重要內容都應該與柵格列寬相適應。一開始會覺得奇怪，因為如果不習慣使用網格，可能會把網格寬度當成全部內容區域，所以還需要給它設定一定的內邊距。此時外邊距就起到了留白的作用，它們充當了內邊距。不要在網格內部利用列寬當成內邊距，而是要與網格最外面保持對齊，利用網格外的間距來當做留白區域。根據代碼實現方式，要么網格內的內容按比例縮放，邊距固定，要么外邊距與內容同時縮放。
正確的內容填充方式和不正確的把柵格當做邊距
所以如果有人說“我需要一個1200px寬的設計”，這并不意味著你的設計就是1200px寬，這其實是說設計內容寬度在1200px的畫布內，實際內容占位是960px，這樣就會有空間留出外邊距。
5. 完全出血的元素或紋理圖形應該設計在畫板邊緣，并理解為出血的列網格
這個頁面布局的頂部圖片被設計成完全出血
這是一個例外的規則，當背景顏色或者圖片在完全出血的情況下，開發同學會把它理解為一個全屏的內容元素。
如果設計的是裝飾元素之類的內容，可以接受它被裁切掉，此時也可以脫離柵格化的設計。
一些圖片和文字的出血設計
頁眉和頁腳有時也有例外，它們不被認為是內容的一部分。有些設計將它們固定在瀏覽器邊緣，有些則喜歡保持內容的寬度，這取決于自身功能和內容的情況。將它們保持在內容寬度內的好處是，當用戶在寬屏顯示器上看頁面時，不需要來回掃視；將它們固定在瀏覽器上的好處是可以為導航元素提供更多的空間。
柵格化布局如何做到響應式
圖片來源Intuit
在傳統的柵格化系統設計中，列的寬度和水槽的寬度是保持不變的，只是列的“數量”發生變化。為什么要這么處理呢？這是為了讓設計更簡單。如果一組三張卡片分別放在桌面的四列上，那么在平板電腦上，會顯示兩張卡片，并把第三張卡片進行折行顯示在第二行上。不需要做任何的調整，因為已經知道它位于第四列上了。在手機上，答案也很簡單，只需要一張卡片，其他的就會自動堆到下面的行中。如果你愿意，也可以變得有創意，選擇只在手機上顯示一張卡片，或者做一個水平滾動。這些列的自適應對于代碼來說就是很簡單的參考。
實際上，web必須呈現任何瀏覽器的寬度。例如，有一個大顯示器，它可以看到1600像素寬的東西，實際上pc端的網頁設計是1200px寬，平板電腦上是768px寬，手機是360px寬。所以你會看到一個小于1200px的設計，有大量的留白。但是當你的瀏覽器再小一個像素，1199px，會發生什么呢？
固定網格
固定柵格示意
如果開發那邊寫了一個固定柵格，當你從桌面縮小到平板電腦，就像是在900px的瀏覽器寬度時，你不會看到任何變化，設計就像是被剪掉了一樣。但當達到768px臨界點時，設計馬上就會改變，平板電腦上的顯示效果就會好起來。如果繼續減小這個值，同樣的事情也會發生，在到達另一個臨界值之前，設計看起來都是不變的。
流動網格
流動網格的示例
現在來看看流動網格的特點，當窗口縮小時，內容將動態的發生變化，文本會進行換行，元素也會變窄。然而，這些元素在內容寬度縮小到下一個臨界值之前，布局是不會變化的。
所以我想說的是，設計的臨界值只是一個更改布局的參考點。這就是為什么列寬和水槽在網格中不會改變的原因，因為我們想讓設計師在考慮布局時能夠更容易地創建一致性。
混合網格
在實際項目中，使用流動網格和固定網格的組合也是常見的做法。網站通常是流動網格，因為它要去適應各種不同終端的大小。
一些做的很酷的柵格系統
不需要太死板地去堅持傳統柵格套路，12、8、4這樣的分布，甚至不需要20px的水槽。下面是一些在設計中使用柵格系統做的很棒的設計靈感。
Invision’s Genome Project
可以看到，他們的設計故意不去使用任何的水槽，所以看起來是無縫的。
這個網站不僅設計的很好，他們還利用了在設計中展示他們自己的柵格系統來讓整體的設計變得更加酷炫。
Dropbox Design
他們沒有設計水槽和外邊距，相反，整個頁面被分成兩半，然后將內容填充到這兩部分。
Wordpress
Wordpress創建賬號頁面
使用網格的方式取決于你自己。你可以在主要內容部分使用網格，次要內容則不使用。在Wordpress的例子中，頁面中間的部分使用柵格化設計，左側的側邊欄則沒有使用。
The Mockup Club
內容和網格也并不總是從中間開始，對于模型網站，內容在左邊也未嘗不可。
我非常確定的說，Instagram的PC端是用上了6列柵格布局。
要點總結
寫這篇文章的目的是想提供一些關于如何在響應式設計中使用柵格系統。我知道對于我自己來說，我花了很多年的時間寫了大量的代碼來理解網格是如何工作的。我在YouYube上看了很多視頻，也閱讀了大量的文章，但每個人都在關注它為什么重要，卻不去注重到底怎么在自己的項目中使用這些原則。
你要做的最好的事情就是從現在開始注意那些優秀設計是如何對齊元素的，你將會開始看到這些模式。為了幫助理解，這里有一些設計系統概述了它們的網格使用：
Google’s Material Design System
Intuit’s Design System
IBM’s Carbon Design System
…And here’s huge list of other systems you can look through
在完全理解了網格的工作原理之后，我已經成為了一名更好的設計師，因為我知道我的設計將如何在臨界值之間進行轉換。我也可以落地我的設計，使它們能夠有一個完美的像素對齊。這樣的規范帶來了更一致，更簡潔的設計，當用戶從一個界面到另一個界面流轉時，這真的提升了產品的檔次。我建議在你的設計中去應用這些網格，并和開發一起，以相同的方式將它們落地，這將會是一個非常不錯的進步。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
阿里巴巴副總裁、中國內貿事業部總經理汪海在對外分享時提出 1688 已經從信息平臺時代進入數字化營銷平臺時代，讓 1688 用戶在平臺內完成營銷和銷售一體化的整個商業閉環。1688 的使命也升級成「在數字化經濟時代，讓天下沒有難做的生意！」在全新的業務態勢下，為了更好的滿足用戶需求，阿里巴巴（1688）主客升級勢在必行。
首頁既是業務分流的中心場景，也是平臺賣家判斷平臺打法，買賣家感知平臺價值的重要「門面」。從 UED 專業視角來看，首頁是定義 APP 內體驗范式及視覺風格的核心場景。
1. 盤點現象，定義問題
滿足業務新的訴求：平臺階段性戰略不同，1688 從曾經的信息平臺過渡到交易平臺，如今向數字營銷平臺轉型，舊的內容框架難以承載業務的新發展。
提升分流質量：從過去的數據效果來看，需重新判斷，在 For 特色采購需求和服務大面采購需求之前，如何平衡調優，提升首頁的流量轉化效能。
體驗升級：移動端 APP 天然生長在手機系統上，系統的風格更迭也牽動著 APP 的變化和升級。在 8.0 升級前，1688APP 存在著 5.0、6.0、7.0 多個由不同設計師在不同時間點所設計的場景，到8.0，APP 趨待從框架層、表現層以及品牌等方面進行統一及升級。
APP 升級前與業務對焦，我們收到三點訴求：
在內容框架制定上，我們聚焦用戶價值，舍掉 7.0 時的內容版塊個性化，聚焦做商品的個性化，僅保留For大面用戶的營銷、內容場景，提升算法推薦區的曝光率，以此區域的商品做首頁的直接轉化。
視覺容器升級
做平視覺框架，選擇「大間距分隔」，為內容留出干凈、簡潔的視覺空間。
精簡內容柵格，避免形式給用戶閱讀帶來的負擔。
提高留白率，提升頁面整體的透氣性，為內容留出更清爽、輕松的閱讀空間。
拉大字體大小的梯度，加重字體顏色梯度，提升文字的清晰度和可讀性。
強調版塊特性，塑造買家心智感知，達成業務目標
強化搜索：7.0時，曾上線過將搜索做到「主觀上覺得顯眼」的測試方案，但相較于之前沉浸式搜索，數據幾乎沒變化。
8.0 階段，從視覺表現層跳出看：「強化搜索」并不意味把搜索設計得更「顯眼」，而是達成「讓更多用戶更高頻地使用搜索」這一目標。如提升搜索底紋詞、熱搜詞精準度和吸引力、增加搜索布點等，都可能助力達成業務目標。
基于用戶單手操作時，拇指在屏幕不同區域的點擊體驗，選擇將搜索組件移到更易于點擊、視線更聚焦的屏幕位置，上線后數據提升非常明顯。
Banner 升級：7.0 的 Banner 畫面豐富度高，加之描述字段多，用戶閱讀有一定成本，較難在 3 秒內掌握全 Banner 的信息。此外，相比于 C 類用戶，B 類用戶會更偏理性，我們選擇以更冷靜、克制的「視覺語氣」與 B 類商人對話，而非渲染氛圍引導點擊。（上線后，同樣的活動內容，按新、老兩版規范設計投放兩套 Banner，新版較老版 UV CTR 約高出 48%）
For 新人：以差異化的利益、個性化秒殺、新人攻略做用戶的承接。
營銷場景心智差異化表達：營銷由伙拼爆品、天天特賣兩部分組成，我們判斷爆品主打心智為「賣得火爆又便宜」，特賣主打心智是「限時限量搶便宜」，選擇將兩個區塊最關鍵的特質做強化表達。
內容場景（直播）動態化、互動感、實時性傳遞：抽象出直播間的方形版面+內容疊加形式來設計，大坑位以動圖傳遞給用戶直播的動態感，以紅包、個性化商品的多維實時輪播氣泡傳達直播的互動感、實時性。
為什么要做APP應用內的品牌設計？
品牌設計是將內容層（平臺價值）與接收層（用戶）做柔性鏈接的一環，譬如在 APP 場景中，由于有商品、商家、商機等「干貨」，即使不特意做品牌設計，用戶也能與平臺保持剛性、穩定的連接。而反過來看，品牌做得很好，但平臺沒有「干貨」，用戶也不會單奔著品牌設計來平臺。我們認為，做 APP 應用內的品牌設計，核心價值在于助力用戶認知到平臺特性，感知平臺價值。從設計專業視角來看，APP 應用內的品牌設計，有利于定義并統一 APP 內體驗范式及視覺風格，保障用戶的體驗。
每位設計師所處的業務環境不一樣，解決問題策略和方式也千差萬別，在 APP 應用內的品牌設計中，個人選擇是通過厘清內容層（平臺）多層次訴求及 For 用戶的價值點，認知、感知接收層（用戶）特質及內容傾向，基于內容層底料+接收層用戶特質確定設計底層范式，塑造用戶感知。
在阿里巴巴商業操作系統中，1688 聚焦做 B 類業務，直接服務對象是 B 類買賣家，業務細分出檔口尖貨、淘工廠、企業采購、淘貨源、微商代發、工業品超級店、跨境專供等，這些都是具有一定 B 類特質及體量感的場景，故在 APP 業務門洞及常規圖標的表達上，基于扁平 vs 寫實、輕盈 vs 厚重、活潑 vs 穩重的維度，圖形選定輕擬物、弱對比的設計范式，塑造 B 類場景 For 買家的沉穩、份量感。
此外，異常/空白場景也是平臺與用戶互動，塑造用戶感知品牌的機會。在空態情感化插圖部分的繪制上，力求塑形出有份量、易讀、有意味的場景以示對應空態，并佐以輕微動效，增強空態的互動感。（在收藏夾、我的供應商等工具型場景，基于空態信息的價值考慮，將空態與工具新手引導相結合，并未做常規的插圖。）
標準色
隨著業務的發展，我們基于新的業務態勢，豐富了 1688 品牌色，以橙紅色作營銷、利益屬性的表達，以商務藍作服務、數字化屬性的表達，以金色作權益屬性的表達。
輔助色
在實際產品設計中，品牌色并不足以表達各類業務場景中的多層次的內容。因此，基于 VI 品牌色，裂變出不同重量、層次更豐富的品牌輔助色。
場景用色規則
基于買家角色及場景特征定義用色規則。
1688色域及選色示意
以 HSB 模式劃定出偏沉穩的 1688 色域，在日常 banner 及業務場景中可靈活取用。
動效是設計的重要手段，良好的動效表達能增強信息表達強度，清晰信息層級關系，提升用戶體驗的舒適度。做動效之前，將 APP 信息結構平整到三層，保障內容在頁面簡潔明暢地呈現。
在實際落地中，動效實現非常依賴技術資源，故動效設計之前，應考慮一個前提：動效設計增益內容表達，價值可論證，效果可衡量；同時，考慮接收層用戶的商人特質，我們期望動效表達給用戶以穩定感，并且在設計表達上能兼顧效率。
在動效呈現部分，主要以緩入、緩出、緩動結合曲線來調節，總的來說，內容入場時節奏稍慢，速度緩，分層加載，交代清信息在 Z 軸上的層次關系，內容出場時節奏快，速度快，內容層級不用再做分層消失。
APP 內典型場景的動效案例及演示：
此外，除以上在圖形、色彩、動效等基礎維度收口外，我們也需要將業務品牌放聲給買賣家，以達成業務品牌的價值傳遞。在 1688 向數字營銷平臺轉型的階段，業務提出了「源頭廠貨通天下」的口號，我們通過設計手段，利用 APP 開機啟動頁及下拉刷新的空間，將「貨通天下」的概念強化表達。
以上便是此次首頁改版階段性的記錄。在 8.0 的視覺體系里，為更好地突出內容，視覺容器選擇盡可能做輕、做平，以冷靜、克制的「視覺語氣」與 B 類商人對話。當然，這是設計師和業務同學階段性的選擇。后續品牌的完善及產品的優化，仍需結合數據持續打磨。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
即便QQ已經陪伴大家20周年，我們依舊懷揣初心，保持科技改變生活的熱衷。應運而生我們設計了太空企鵝探索科技作為本次20周年的品牌理念，來寓意新的里程碑到來。
https://v.qq.com/x/page/l087071z1ua.html
01 概述 | Overview
QQ 20周年，是互聯網產品長青的一個傳說，也是家喻戶曉企鵝IP形象的成長，同時也代表了鵝廠精神的堅韌與奮進。即便已經陪伴大家20周年，但我們依舊懷揣初心，保持科技改變生活的熱衷。應運而生我們設計了太空企鵝探索科技作為本次20周年的品牌理念，來寓意新的里程碑到來。就像宇航員勇于探索未知宇宙知識一樣，QQ帶著初心不斷保持變革與成長，為用戶提供更具科技力與創新的服務！也寓意鵝廠不斷探索未來與科技向善的愿景！
02 logo設計?Logo Design
我們在設計的第一階段，logo設計，就是圍繞“有趣和科技”來展開發散設計。我們決定從數字“20”開始入手，把QQ和20不斷結合，同時融入宇宙太空元素，寓意QQ不斷的對外探索，從多個維度來看世界，尋找有趣的內容。我們為了貼合“宇宙探索”這風格，為這次展覽設計了專屬徽章，徽章設計沿用了太空的概念，結合星球，星空，宇航員等科幻元素。簡約的幾何形狀和大膽的配色貼合“QQ更好玩”的年輕潮流氣息。
03 概念設計?Concept & Design
1. Space QQ
太空QQ的太空服設計指的是科幻電影如《星際穿越》和《火星救援》中的太空服，我們也將的時尚潮流，2018年以來運動鞋領域最為明顯的趨勢，將 ugly & oversize 的潮流風格注入到運動鞋的設計當中。這種將時尚潮流與太空服相結合的新型運動鞋,使整體設計看起來時尚而風趣。如果沒有它，太空服可能只是一個淺顯的概念。
太空QQ創意草圖
運動鞋設計草圖
3D原型
2. QQ X PUPU
本次設定，由兩只企鵝背靠背組成，20周歲的QQ與1周歲的PUPU，鵝廠擁有著各種企鵝IP形象，除了經典的企鵝QQ，還有各種其他特色企鵝，包括PUPU，BabyQ等等，同時PUPU來自外太空也是企鵝FM產品的主形象，經典企鵝QQ攜帶了新生代PUPU共同探索科技太空，寓意企鵝在不斷創新與擁抱新生代相互合力，為年輕用戶提供更具科技力與社交娛樂化的服務。
04 最終設計?Final Design
05 8米QQ模型制作?8m QQ Model
對于實際生產出這個巨型模型是個大挑戰，我們先利用電腦三維模型生產出8米高的泡沫模型，反復檢查生產的泡沫模型是否和設計模型一致，不斷的打磨調整，待到確定泡沫模后開始翻模工作。
先給泡沫模噴上泥巴水，便于脫模，之后噴上石膏水，并加入麻絲增加石膏的牢固性，待石膏模晾干，把石膏里的泡沫模掏出后開始往里面涂一層泥巴水（便于后面玻璃鋼脫模），然后涂上樹脂和纖維布/氈，干了之后砸爛石膏模，里面的玻璃鋼模型就出來了。
玻璃鋼定型之后給內部焊接鋼鐵骨架，作為加固作用。剛脫模的玻璃鋼是非常粗糙的，于是對玻璃鋼的外觀進行打磨，使得表面光滑和調整細節，打磨完成后開始批灰和上底色，前后三次，為的是填補空隙瑕疵使模型更逼真完整。接著我們便調模型身上的顏色，在不斷嘗試中調出最接近效果圖的顏色，開始逐步上色。
上色完成后再噴保護漆防止褪色，待模型的漆干后清洗整個模型，為貼上專屬貼紙做準備，接著確定貼紙位置并逐一貼上。最后開始搭建安裝，因為在搭建過程中模型會有磨損，搭建完后再做最后的修補工作，最后巨型QQ模型完美地呈現出來。
06 貼紙設計?Sticker Design
配合QQ20周年慶，我們要給8m的巨型QQ模型搭配上了貼紙設計，以slogan “QQ更好玩” 為設計的出發點，希望把有趣好玩的態度注入各個品牌中，為品牌logo嚴肅的視覺帶來玩味感和潮流感。同時配合巨型QQ宇航員的造型，我們在設計貼紙時參考了航天飛機，科幻機器等機械圖案元素，每個品牌的設計方案除了有趣值得玩味外，同時需要貼合宇宙科技探險的風格。
我們針對這個大方向再進行了幾輪細化，選出能代表各個品牌的最終的設計方案，并把貼紙模擬在太空QQ模型上反復測試貼紙最適合的位置，讓貼紙和模型的整體風格可以完美契合。通過各個品牌的logo再設計貼紙和太空QQ的碰撞，把品牌推廣做到最大化。
07 搪膠玩具設計?Figure Design
作為QQ20周年慶的驚喜，我們制作了與巨型太空QQ同款的迷你搪膠玩具，在這次玩具設計上我們加入了小機關，在玩具內部放置了小磁鐵，使得QQ和PUPU可以方便拆卸組合。
同時為其設計了專屬包裝盒，包裝設計從“太空宇宙”的角度出發，以黑色為主基調，圖案印花設計選用了太空QQ來進行設計，把太空QQ模型線體化，配合QQ20周年logo進行設計，利用燙金工藝與醒目的圖形搭配，更有效的展現了QQ年輕化的品牌特點。同時為了減少后期生產制作之間的溝通誤會，我們同期將幾個較重要的角度的包裝3D效果圖快速渲染出來，有著非常直觀的參考對照作用。
08 品牌物料設計?Product Design
1. 海報設計
設計QQ20周年展的宣傳物料，我們采用了最能代表這次展覽的太空QQIP為主體，作為本次展覽的專屬元素，太空QQ貼近科技，同時又具有趣味性和潮流感。我們結合了太空探索的特性，提煉出宇宙元素作為宣傳的內容，讓海報設計具有更多內容可看性和觀賞性。
2. T恤設計
配合QQ20周年展，結合宇宙太空元素，并從QQ20周年logo圖形中延展設計出各類代表圖形，正面簡潔直接地顯示出本次主題，把醒目的圖形放置于T恤背后，利用坐標軸和經緯度的信息圖案配合各個抽象化的宇宙元素，增加T恤設計的科技感，更明確地展現了科技向善的愿景。
09 QQ20周年展覽?Exhibition Design
QQ聯合深圳福田星河COCO Park 舉辦了“QQ20周年主題展覽”，展館外形模擬宇宙太空站，以太空白灰色為主調，搭配簡潔的立方體造型，白色燈條勾勒大門，并以QQ20周年專屬徽章做門面，科技未來感撲面而來，就如大型QQ太空站坐落于地球。
展館大門旁的墻上安置了頗具科幻氣息的全息投影裝置，上面展示著QQ在不同時期的形象以及20年關鍵大事記。代表著不同時期的QQ形象用全息投影的方式展現出來，從最開始的胖QQ到現在的新版QQ，讓你一眼了解QQ演變史。中間放著QQ歷屆各個跨界Figure展示，總有一款捕獲你的心！
同時本次展覽還和% Arabica咖啡跨界合作，% Arabica咖啡展臺設計簡潔透氣與QQ20周年展覽風格完美融合。一邊喝美味咖啡，一邊暢游展館，兩全其美。
藍色發光的隧道科幻神秘，一進去馬上感受到了超強的氛圍感，仿佛時光碎片擦肩而過。用QQ掃描墻上的二維碼，立刻生成你的專屬時光隧道“QQ個人軌跡”，各種瞬間涌上心頭。
聯合天天P圖，用13個LED屏組成了“復古頭像畫廊”。走進互動裝置小屋里，往鏡頭前一站，稍作等待后，以你的形象即時合成的13個復古頭像就會出現在面前的13塊屏幕上，體驗即時“變臉”效果。讓自己的頭像和曾經用過的QQ經典頭像合二為一，形成專屬的復刻版頭像海報。
結語
QQ20周年展不僅包含了展館設計，還包含了市場營銷，運營活動，周邊商品等多個設計環節，環環相扣，缺一不可，一起構建了整個QQ20周年展的設計體系；展覽設計了太空企鵝攜帶著新生代PUPU共同探索科技，寓意鵝廠不斷創新探索與科技向善的愿景，為年輕用戶提供更具科技力與社交娛樂化的服務，在打造“QQ更好玩”的路上奮力前行。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
今天我們來講一講大家期待已久的配色方面的干貨。其實幾年以前我就寫過一篇關于配色的文章，早期的面粉估計還有印象，在那篇文章里我基本已經把設計師需要用的關于色彩構成的主要精華內容都匯總出來了（文末會附上文章鏈接的，別著急）。
但是因為不同設計行業的工作內容是有差別的，而且每個人的基礎和理解能力也不一樣，所以僅憑一篇文章是無法解決所有人的難題的，所以今天這篇文章算是關于那篇配色知識講解文章的補充篇。
不過在講解如何配色之前，我們還是先應該先記住一些關于色彩的理論知識，因為有了理論依據我們才能在做設計的時候有理有據，而不是胡亂配色和瞎試浪費時間。
所以這篇文章主要分為了以下幾個部分：
簡單點來說，色彩即顏色，顏色可以分成有彩色和無彩色兩大類，看有彩色主要看色相／純度／明度三個方面的屬性，無彩色也就是白色／黑色／各種深淺不同的灰色，也可以說無彩色是飽和度為零的色彩。
色相，即可以明確表示顏色色別的名稱，比如紅橙黃綠藍靛紫：
色彩有冷暖之分，我大致用溫度的概念標注一下，其中「0」是指中性色，「－0」是指中性偏冷，「＋0」是指中性偏暖（當然，這里的溫度是我自己為了具體化冷暖的概念而標記的，主要是方便大家理解，所以不用去糾結這個數值準不準確哈哈，你明白他們代表很冷／很熱／一般冷／一般熱就好了！～）
明度，就是指色彩的明亮程度（通俗點講，在某種色彩里添加的白色越多就越明亮，添加的黑色越多就越暗）。
純度（飽和度），就是指色彩的純凈度，我以紅色舉例，如下圖所示：
如果大家想看更加詳細的關于色彩構成原理的解說，可以看這個系列：《優設獨家配色專題》
不管我們做什么方面的設計，設計練習也好，實際項目也好，在設計之前，我們最好是能先明確我們的設計目的是什么，然后確定一個主題，依據這個設計目的和主題，去構思創意，有了創意后再去去探討具體的落地執行，其中包含了字體（標題文案）的設計排版配色、畫面整體的構圖和配色、細節優化、氛圍渲染等等；
當然，這一次關于其他方面的內容我只會附帶著講一點，因為我們今天的主要內容是講配色。
以我最近做的一張照片海報設計為例：
下面是我前幾天用手機拍的一張照片，照片里的內容是我的手拿著一朵花。
1. 設計之前先確定主題
比如這一次我是確定了設計主題為：浪漫。
因為我看了下這張照片里面花是粉色的，我的手指甲油也是粉色系的，而我也是一個（年紀越大就越）喜歡粉色的女人～同時因為我喜歡嘗試各種不同的風格主題，浪漫這個主題我之前是沒有做過的，所以要不這一次就浪漫一回好咯。
那么說到浪漫，大家腦海里的第一反應會是什么呢？我不知道大家會想到什么，反正我會想到很多場景畫面，比如2002年的韓劇《冬季戀歌》里，男女主角在雪地里相擁的畫面，天上飄著雪花，同時背景音樂響起了《My memory》；
△ 《冬季戀歌》因為是2002年的韓劇，所以現在看海報是有點過時了，但劇是好劇的
再比如2017年的電影《愛樂之城》里，男女主角在繁星點點的絕妙夜空下翩翩起舞和擁吻的場景，同時背景音樂響起了《City Of Stars》；
△ 電影《愛樂之城》海報
再比如1995年上映的宮崎駿動漫《側耳傾聽》的結尾情節，時隔2個月才見面的男女主角一早就偷跑到一個可以俯瞰城市和日出的角落互相表白，微風輕拂著女主的短發，一棟棟高樓彌漫在朦朧的霧氣當中，日出的余輝映射在波瀾的水面，同時背景音樂響起了《Take Me Home, Country Roads》；
△ 宮崎駿動漫《側耳傾聽》劇照
等等等，還有很多浪漫有關的畫面我就不多說啦。
總之，浪漫是有很多種表現形式和配色的，但是有一點是有共通性的，那就是要想打造出浪漫的感覺，背景音樂、色彩搭配和氛圍渲染很重要。
比如除去聽覺上的背景音樂渲染氛圍以外，視覺上還有《冬季戀歌》里的白雪凱凱和雪花飄、《愛樂之城》的藍紫色夜空和繁星點點、《側耳傾聽》里的暖黃色日出和微風波瀾。
那么回到我自己拍的這張照片上面，這種大面積的灰白色背景只能讓人感覺很性冷淡，一點都不浪漫，所以這張照片我肯定是要摳圖才可以用的；從我自己的年齡、喜好、原照片內容限定等角度，可能走《愛樂之城》那種類型的浪漫色彩可能就更適合一點：用暗色調的紫色搭配我原本圖片就有的粉色系。
ok，分析到這里先打住，我們先不要繼續著急去細化到底該怎么去配色了這時候我們只需要有一個大概的色彩感覺就好了，因為配色之前，我們還有很重要的一步沒有做，那就是構圖。
2. 配色之前先構圖
很多人之所以總是說自己不會配色或不管怎么配色都感覺不對勁，其實是因為，搭配顏色這個動作不能為時太早了，你得先把你整個畫面的構圖和基本框架先敲定了再去考慮配色。
先構圖再配色，先構圖再配色，先構圖再配色，重要的事情說三遍！～
因為構圖相當于化妝的時候先打好底子，底子不打好，你再怎么化妝都是徒勞的。同理，如果你的構圖很亂或者基本型都沒出來，你就去考慮配色，很有可能就是你磨半天都設計不出一個滿意的結果，這就是很多人磨蹭半天，做出來的設計依舊不好看的很重要的一個原因。
因為你的設計步驟錯了。
比如我今天要拿這朵花做一幅海報，我先不考慮配色和氛圍渲染的事情，我就這樣光溜溜的排個版出來再說，這里的排版方式和字體選擇主要考慮樂個方面，一個是照片原本的條件限制，一個是圍繞著浪漫這個主題去做，最終排版如下圖所示：
一個淺色一個深色，大家可以對比看看效果。
這幅海報就這樣隨便看看其實也是可以看的，只是缺少細節和情感，也沒有特別的吸引力罷了，最重要的是不夠浪漫。
那么到這一步，我們就可以繼續細化配色方案，分配色彩比例，優化細節，增加最重要的一些氛圍渲染步驟了。
所以我繼續優化海報，最終得到了下面這幅海報：
這張海報的背景是我用ps自帶的筆刷刷出來的，順著一個方向刷出一種墜感，這就是起到一種氛圍渲染的作用。
然后，雖然粉色和紫色也算是同色系的顏色了，但是因為明亮的粉色與暗色調紫色在明度上有很大的落差，所以等他們組合在一起就會有一種碰撞的感覺，給人的視覺記憶力就會強一點，暗色也給人跟多神秘的感覺，讓人琢磨不透。
畢竟，讓人琢磨不透的人比一眼就能看穿的人給人更多聯想和猜測，有插曲有意外的浪漫愛情給人的印象才會比較深刻一點，對吧～
同時，為了方便大家理解，我又做了以下幾個版本，大家可以對比看看色彩的差異給人感覺上的變化。
比如，如果我改變畫面的明度，提高畫面的明度，如下圖所示：
這樣看，是不是畫面給人的感覺要少女很多？而且給人一種很溫柔的感覺，但是盯久了會覺得甜膩膩的。
如果前面第一版暗色調的是為20-40歲左右的女人而設計的浪漫，那么上面這一版則像是為20歲左右的小姑娘而設計的浪漫。
在這個基礎上，如果我既改變明度，也改變配色，給畫面加入非同色系的顏色，如下圖所示：
這樣看，其實感覺也很美對不對？美歸美，但是卻感覺比上面那一版還要膩，因為像是為兒童或小蘿莉小公主而設計的浪漫了，適用的心理年齡段更小了。
ok，我們接著往下看。
如果我將背景隨便換什么顏色，但是保持背景顏色是同色系不同明度的，畫面里有明也有暗，如下圖所示：
最后出來的感覺其實也是可以的，也很美，但就是少了一些抓眼球的感覺，覺得中規中矩的，沒什么特別之處，就好比那種平平淡淡的感情，缺少激情的感情。
但是這種同色系的做法，卻是平臺和品牌為了統一形象方便視覺規范化管理最喜歡使用的一種配色方式，對此，大家可以去留意一下天貓或京東的一些頻道頁面或者大型活動各個分會場的頁面配色。
ok，前面的配色技巧大家估計發現了，我要么是用同色系配色，要么是同色系改變明度和純度，要么是用不同色系不同純度但是保持明度一致，所以以這種方式去配色，無論你怎么配其實最后出來的感覺都是不會太差的，只是針對的受眾不同罷了，可以各取所需。
所以如果你不會配色的話，那么就在這些基本的框架規則里去變化就好了。這是非常保險的一種配色方法。
但是如果你不遵守這種規則，而是胡亂瞎配色，則很有可能會出現下面這種情況，要么是畫面顯得臟，要么是畫面顯得艷俗、花哨和亂，如下圖這些錯誤示范所示：
上面這幾幅圖雖然是一些錯誤的配色示范，但是很多對色彩不敏感的孩子可能也會覺得：「誒，其實也還行啊」，其實主要是因為有構圖的基礎在那里硬撐著，底子在那里，所以色彩即使配的不夠好糊弄一下也還行。
拿化妝舉個例子，為什么那些本身樣貌底子就好的人，即使亂穿衣或亂化妝你也覺得看起來還行，一旦她好好的打扮畫個妝，那簡直就是神仙顏值了，可底子不好的人呢？可能你就算再會穿衣打扮，你也只能變成看起來還行，到達不了神仙顏值的地步。
所以我再強調一遍，配色之前先構好圖，把底子打好，這很重要。
總結起來就是，做設計之前先確定主題，然后搭框架搞定排版樣式，接下來再考慮配色，再然后氛圍渲染，最后一步優化細節，over。
下面這些知識點都是我平時總結出來的一些配色小心得，是我屢試不爽的一些方法，分享給大家。
總結來說，我的配色技巧主要有以下幾種：聯想法、提取法、目的導向法則。
1. 聯想法
所謂聯想法就是，類似于頭腦風暴那樣，當拿到設計需求或確定設計主題后，我會提取一些關鍵詞，根據關鍵詞去聯想很多相關的可能，然后再去篩選一些結果為我所用。
比如下面這張照片，原本照片的顏色是很簡單單一的。
但因為我給他確定的主題是「野花的回憶」，所以我就會去聯想：「野花都是什么樣的顏色？」「回憶又是什么樣的色調比較合適？」，后來我就確定了野花主要以比較艷麗的色彩居多，比如玫紅色、亮黃色、白色等等，至于回憶嘛，可能就是有年代感了，所以大的基調是暗色調的。
于是下面這幅海報的色彩搭配就出來了。
其他用聯想法配色的還有很多，比如下面這一組。
原照片：
做成海報后：
不過這里需要說明的是，聯想法要求你會聯想，所以大家平時最好是多留意身邊的事物，多觀察大自然什么的，還有適當去了解一下色彩心理學，你會明白每一種色彩都是可以代表不同的感情和事物的。
通過長時間的鍛煉自己對于色彩的敏銳度，可以幫助你快速的配出自己想要的色彩。
2. 提取法
所謂提取法，就是當我們拿到某一個產品或模特需要圍繞著它們做設計，我們就可以直接從它們身上吸取顏色，作為主色或點綴色都可以，這樣搭配顏色的好處就是：省時省事不容易出錯，而且還有呼應主題和畫龍點睛的效果。
比如下面這張照片，原本照片的顏色就是綠色和淡粉紫色。
那我最后做出來的海報配色也是這些顏色咯，只是文字部分單獨用了白色而已。
哦對了，一般白色和黑色這兩種無彩色都是最適合用來作為標題或文字內容部分的顏色的，也是最不容易出錯的，同時聯想法和提取法其實是可以互相搭配使用的，不沖突。
但是，有時候我們如果希望畫面可以更活潑一點，一般做那種比較卡哇伊風向的設計，標題也會用彩色，而不是黑白無彩色，至于標題用什么彩色，也是可以用聯想法和提取法啦，如下圖所示：
3. 目的導向法則
前面的聯想法和提取法的配色方法是教大家如何選取顏色，但具體到哪里該用什么顏色，該用什么明度什么色相的顏色，則就取決于你的設計目的是什么了，所以我將它稱之為目的導向法則。
比如，之前我給大家提到過，有的設計是走藝術路線（以傳遞情緒為主，重在情緒上的表達），而不是常人理解的一般的商業設計路線（以傳遞信息為主，重在信息產傳達準確），前者適用于一切與藝術有關的設計或設計師個人的自由創作，后者適用于所有以賣貨為目的的商業活動設計。
這2種類型的設計目的是不一樣的，面向的受眾群體也不一樣，所以在色彩選擇上就會有差異。
舉個例子，當我們提到某某平臺又做活動了打折了，他還做了一個賣場促銷頁面，你去看看，絕對基本是以紅色、橙色等暖色系為主色，并且頁面氛圍做的非常熱鬧，就跟你去逛商場，映入眼簾的就是各種sale、大減價標牌，并且還有人拿著喇叭大喊：「進來看看進來瞧瞧??！最后一天大減價買了不吃虧買了不上當??！」的即視感。
并且，頁面里一些特別希望消費者能注意到的信息，它一定會突出處理，不僅字號要夠大，而且在色彩上也會突出。
拿我的書《這么設計能熱賣》作為產品圖做個示范，我做了一個促銷海報，如下圖所示：
但是，如果你去看一些比較性冷淡或大牌畫風的店鋪或官網看看，它完全就是一副我根本就不care你買不買的調調，倒不是因為他不想做生意，而是他的調性就那樣，比較自我或端著。
好比人家的定位就是孤傲的，或則是你高攀不起的大小姐和公子哥類的，買ta東西的人本來也就是這種類型的，或者希望別人覺得自己就是這種類型的，畢竟要彰顯自己的身價和品味，不能掉價撒。
所以，你看ta基本不會給你看大大的字號，也不會用一些很花里胡哨的顏色在標題上，而是以黑白灰這些無彩色居多，更不會特地用一些突出的顏色去醒目的區分一些字眼，總之頁面看起來不會有太濃的促銷氛圍
雖然我的書籍封面設計本身其實就不是性冷淡和大牌的風格，但我依舊做個示范給大家看看，如下圖所示：
而介于這之間的，也就是那些時尚類型的，或時尚里帶點促銷的，或放得下身段走點接地氣路線的牌子，則是會在保持好看時尚的基礎上，依舊會適當的用大點的字號或顯眼的顏色去突出一些重要的信息，但色彩不會用的太花哨，如下圖所示：
而像上面這種比大牌感親切一點又比大賣場時尚一點這種介于之間的情況則是絕大多數的，畢竟小眾的是少數，成為大牌是少數，雖然現在是大賣場但是不想走大牌路線路線的是少數，不想賺錢的商家也幾乎沒有，于是最終都淪為了不高不低的大多數。
總結來說，目的導向法則可以分為2種情況：
如果你想低調一點內斂一點，你在配色上就保守一點，盡量少一點顏色比如三種顏色以內，或者是用同色系或柔和點的顏色等。
就像一個性格很溫和或者很內向的人一樣，沒有攻擊性，安安靜靜的。
拿我之前做的一幅照片海報為例。
原先我是考慮讓這幅海報看起來有視覺沖擊力一點，但是我又不想畫面太過于張揚，畢竟我那天穿的衣身衣服色彩是比較柔和的橘粉色，所以我用了對比色而沒有用同色系，同時控制畫面里的顏色不超過3種，并且這幅海報里色彩之間的明度是差不多的，如下圖所示：
但如果我用同色系不同明度和純度來配色，出來的感覺就是下面這樣的，你會感覺畫面更淑女安靜一點，沒有什么攻擊性：
可是如果你想更加高調張揚一點，那么你在配色上就可以多用一些顏色，比如三種以上顏色，或則是用對比色或互補色而不是同色系配色，或則是純度高一點明度高一點的顏色，然后不同明度純度的顏色互相碰撞。
就像一個脾氣火爆性格張揚的人，他們不愿意淹沒在人群里，而是要做人群中最醒目的那一個。
我還是那上面那張海報改個顏色給大家看看，結果如下圖所示：
如果我想繼續突出大標題文案，那么我還可以將標題的無彩色白色換成亮黃色，畫面里的顏色更多了，沖擊更大了，甚至你會覺得有點花哨：
ok，上面這幾張圖，大家對比一下就會知道這其中的差異了。
所以記住啊，配色不是亂來的，它一定是有章可循的，也是要依據你的目的來配的。
當然，可能有人會說：「有時客戶給的主題實在是太晦澀難懂了，我實在是聯想不出來啊」，或者給到你的產品本身的配色就丑的不行了，如果你直接吸取顏色那做出來的設計肯定也是丑爆了，那么，這時候就要看你是不是有一顆靈活的腦袋能夠隨機應變咯！～
如果聯想不出來說明你百度總可以吧，然后自己要多看多積累你的腦袋里才有貨的。
如果原產品本身配色就丑那你就分析它丑在哪里加以改進不就行了嘛？比如它是因為純度太高了很艷俗，那么用低一些純度的同色系是不是就可以了？比如如果它是因為本身的色彩太多了很花哨，那么我們只選取一兩種顏色用用是不是就可以了？
再比如還有人說，給我的產品根本就沒有顏色，純白、純黑、純灰色，那我該怎么吸顏色?。?
天哪！～這種類型最好搞定了，因為無彩色就是萬能色，無彩色無論是搭配無彩色或者其他任意有彩色都可以的，這就又回到我前面提到的目的法則了，不懂的可以回頭再仔細看看～
平時也經常會有人問我到底該看什么書來提高配色能力，其實我想說只要你掌握了我前面提到的基本的色彩構成原理這些基礎知識，剩下的其實都不需要你繼續去看其他的色彩書籍了。
因為看其他書籍無非就是要擴充你的知識面罷了，它只是其中一種增加知識儲備的途徑而已，但現實是很多人寫的書一看就讓人犯困，而且晦澀難懂，你買了也是浪費錢，倒不如通過看設計網站、看時尚雜志、看電影、多觀察大自然等有意思的途徑去培養自己對于色彩的敏銳度，然后看看我的干貨文章勤加練習，多實踐多思考來的有用。
尤其是大自然的色彩，那真的是一個超級大的配色寶藏啊，你隨便看看那些花花草草、藍天白云、日出日落、海底和大地，哪個配色不是美的讓人驚嘆？就連那些惡心的毛毛蟲都有一身好看的不行的顏色。
我們做的很多設計，不管是什么行業的設計有關顏色的，電影也好，三維也好，平面的也好，其實基本都是來源于大自然的。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
藍藍設計的小編 http://www.syprn.cn
