誰拍扁了那些logo？網際網路行業拜倒在扁平主義之下
歡迎關注“創事記”微信訂閱號：sinachuangshiji
文/SerGawen
來源：灰機GAME（ID:huiji_game）
土豆→土豆餅
也許你已經發覺了，“扁平化”（Flat Design）已經改變了大多數網際網路產品的形象和使用體驗。而你還沒在意的可能是，如今這一趨勢也在深刻影響著電子遊戲——比如《全境封鎖2》，它就沿用了前代的“扁平化”UI設計風格，並廣受我司程式設計師（以及產品）們的好評。
從這張截圖，我們能夠直觀的感受到“扁平化”UI的特點—— “能拍平的絕不立體”、“能用純色、漸變的就不帶高亮”、“能用等線字型的就不用襯線字型”。
《刺客信條：起源》中的技能樹
這樣看來，育碧（Ubisoft）絕對是遊戲行業中“扁平化”的忠實擁躉和實際踐行者。
自《刺客信條》（Assassin’s Creed）始，育碧自家遊戲就拋棄了傳統的“擬物化”（Skeuomorph）設計，將遊戲logo、技能圖示、地圖示識等通通拍扁——《彩虹六號》(Tom Clancy’s Rainbow Six)、《全境封鎖》(Tom Clancy’s Division)、《榮耀戰魂》(For Honor)等遊戲均是如此。甚至不惜在2017年拿起革命的小錘，索性連自個兒也掄平了。
土豆餅！
相比之下，日系的廠商面對這一風潮則淡定許多——也許“簡約風”早已深植於日本文化之中，你會發現索尼、任天堂、光榮、史艾等日系廠商本就是純色字母logo。但嚴格要求自己的索尼還是在2007年“更進一步”，將本就很扁的“Playstation”直接塗成了純黑。而作為Playstation的“一生之敵”，XBOX跟著微軟爸爸的腳步，在2013年正式加入“扁平”大軍。
“扁平化”溯源
關於“扁平化”運動的起源，網際網路行業內比較公認的“始作俑者”是微軟於2006年推出的“Metro”設計方案，隨著Win7、Win8的升級，Metro確定了“又扁又平”的風格，並逐步進化為一種現代化的UI設計理念和正規化。憑藉著Windows作業系統的流行，這一理念得以迅速傳播，並很快“感染”了地球上的另外兩個網際網路大佬——蘋果和谷歌。
2013年堪稱是網際網路界“扁平化”的“元年”，這一年蘋果推出iOS 7，全面走向“扁平化”，谷歌、Facebook也在同年將自己的logo“拍扁”。2014年穀歌推出了Material Design，並將旗下的瀏覽器Chrome“扁平化”。
Google的“扁平化”之路頗堪玩味，也許是覺得第一次“拍”的不夠徹底，最終連字型也換成了等線。
“現代主義”（Modernism）及其支流“極簡主義”（Minimalism）被認為是造就“扁平化”思潮的“精神根源”，這是一種伴生於工業社會、科學信仰、啟蒙主義思潮的全新思維方式，從各個領域和角度掙脫傳統、繁瑣的教條和修飾，用抽象、普世的理念來塑造設計，自然深得矽谷精英們的青睞。
“扁平化”的最直接“啟發者”被認為是“國際主義設計風”（又叫做“瑞士體”），這是“現代主義”藝術風潮在設計領域生根發芽的直接產物，它追求重點突出、整潔可讀，以左對齊、非對稱設計、等線字型、純色快為突出特徵。
Akzidenz-Grotesk 設計於1896年，被認為是“瑞士體”的代表。
網際網路和電子資訊工業無法脫離現實社會而獨立存在，因此其設計理念也不可避免地受到現實世界藝術審美變革的影響。
這當中有趣的地方就在於，事實上在電腦誕生之初，由於顯示屏和軟體系統無力渲染出複雜的陰影，更沒有足夠的畫素點密度和豐富的色彩來呈現豐富的設計效果，因此在GUI（圖形化使用者介面）誕生之前，TUI（文字化使用者介面）是普通使用者與電腦唯一的互動方式，由是催生了抽象度極高的功能性指示圖示和以高亮色塊為主要呈現方式的指示風格。
一個典型的TUI互動介面（左）和1977年的TUI遊戲“Empire”（右），後者被認為深刻影響了“文明（Civilization）”系列。
在90年代後，電腦發展經歷了圖形化的一路狂飆，擬物化設計、玻璃高光成為了設計師們競相追逐的畫風和炫技的絕佳途徑——這幾乎是濃縮了人類社會審美的進化史，像極了飛簷斗拱、雕樑畫棟與金瓦琉璃。然而歷史總是會以一種有趣的方式重複著自己，“扁平化設計”幾乎可以看作是“包豪斯風格”（Bauhaus）的薩沃伊別墅在網際網路領域的精神重塑。
幾乎沒有太大的掙扎，網際網路行業就在一片“真香”聲中拜倒在了扁平主義的大旗之下。
充分體現”扁平化”建築理念的薩沃伊別墅，於1931建成於法國。
如果我們仔細回溯，會發現主機遊戲介面和UI“扁平化”端倪初現要略早於2013年，這也從另一個角度說明了，“扁平化”雖然由微軟發揚光大，但並非是由微軟在朝夕之間創造。可能是遊戲行業的美工們先於自己的網際網路同行更早發現了“扁平化”的另一個絕贊之處——更省工省力，那麼何樂而不為呢？
這股返璞歸真浪潮中，實用主義是扁平化得以迅速征服網際網路行業的重要原因。網際網路從業者們發現“扁平化”風格的圖案和logo可以使用SVG（Scalable Vector Graphics，可縮放向量圖形）來進行製作和儲存，相較於傳統圖片檔案（PNG、JPG等格式）體積縮小了十幾甚至幾十倍，可以作為“字型”隨意的嵌入到網頁和程式之中，並支援任意比例的無損縮放——從而剩下了客觀的儲存空間，並解決了各種棘手的顯示器尺寸適配問題。
使用svg的FontAwesome圖示庫。
“扁平化”並非萬能
濫用“扁平化”有時也會帶來一些問題，比如過度抽象讓人無法準確的理解設計者的本意，大家喜聞樂道的“田牌筆記本”和“香菇XBOX”梗都是在揶揄“扁平化”的倡導者微軟。
WB（華納兄弟）曾在2012年推出過一款《魔戒》主題的MOBA類遊戲《中土守護者》（Guardians of Middle-Earth），憑良心說遊戲製作水準還算不錯，然而除了推廣運營不利之外，一個讓很多DotA類玩家感到不適應的地方就在於其技能圖示全部用扁平化風格設計，五花八門的技能乍看上去幾乎毫無區別，導致學習和記憶成本大大提高。而無論是基於《魔獸爭霸 III》的DotA還是V社打造的《刀塔2》，技能圖示都極具色彩辨識度和動作感，讓人過目不忘。
《中土守護者》的技能圖示設計不得不說是一個敗筆。
一位叫做Jakob Nielsen的UI設計專家曾經對“扁平化”設計提出過批評，他認為這一趨勢會威脅到平板裝置的“可用性”。他在2017年的研究中指出，使用“扁平化”UI的使用者，相較於使用“擬物化”UI，會表現出更大的不確定性以及注意力不集中，從而導致操作的平均時間減慢22%。
同時Nielsen倡導，中和“擬物化”與“扁平化”，來彌補完全“扁平化”的不足。在《彩虹六號：圍攻》（Rainbow Six: Siege）中，設計者為圖示添加了不同的顏色來指代不同的概念，同時通過漸變、描邊、陰影來強化核心圖形的立體感，從而大大提升了辨識度，讓玩家更容易學習和記憶。
《彩虹六號：圍攻》（Rainbow Six: Siege）中的角色圖示。
當然，打根兒上講也不是所有型別的體裁都適合“扁平化”。大體來說，那些設定上更偏向未來，追求科技感遊戲才適合採用“扁平化”UI，比如《X-COM》系列、《守望先鋒》（Overwatch）等。而對於《魔獸爭霸》這種中古畫風或是朋克範兒《戰錘》，可能還是“擬物化”設計更搭。
《希德梅爾的文明6》（Sid Meier‘s Civilization VI）提供了一個“擬物化”和“扁平化”混搭的典範。
LOGO不平，何以平天下
“扁平化”的潮流並未侷限於傳統網際網路行業，伴隨著資訊爆炸，諸如影視、體育行業也在積極擁抱這一設計理念，英超（Premier League）自2016年開始就將其UI全部扁平，與此類似的還有美國的各大職業體育聯盟，以NBA為例，除了球隊紛紛設計更加“扁平”的隊徽之外，電視轉播臺也將直播介面徹底“掄平”。
“把LOGO掄平”成了各家品牌形象升級的一致選擇，一方面“扁平”看起來更“酷”，從而抬升品牌的藝術感和格調，二來“扁平”背後的“化繁為簡”邏輯也在幫助品牌打破地域文化侷限，用一種更“通用”的設計語言開拓全球市場。想來老子所講的“大道至簡”、“大巧若拙”，便是如此吧。
參考資料：
· https://en.wikipedia.org/wiki/Flat_design Wikipedia-Flat Design
· https://designmodo.com/flat-design-principles/ Carrie Cousins (May 28, 2013). "Flat design principles". designmodo.com.
· https://www.verve-design.co.uk/latest-news/history-of-flat-design-infographic/"The History of Flat Design". Xavier Bertels. Retrieved December 23, 2014.
· https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/
· Flat UI Elements Attract Less Attention and Cause Uncertainty
