講到設計初期的頁面構圖規劃問題，其實這個構圖是服從你的展示方式的，即故事線。設計前期規劃階段，先想好打算怎么表達，再選擇對應的構圖方式。表達上我們講究總分主次關系 ，那么構圖上依舊遵循這個規則，先具體再抽象。
全屏平鋪式的構圖方式是最常見的一種構圖方式，如下圖無意中構成橫平豎直的輔助線將內容一格一格展現出來，界線清晰分割明確。因此模塊之內的內容就會顯得格外的清楚和突出，給人一目了然的感覺。注意哦，平鋪并不代表完全一個一個格子碼好，比如下圖中的深紅色區域，沒有被網格框住但也碼的很清楚，淺紅色區域中有一對一的也有一對二的對應關系，故此類型的構圖中加上這些靈活的變化就會顯得沒那么生硬。并且這種構圖方式是遵循F型網頁閱讀習慣的，因此重要內容放哪大家知道了吧~
圓形就是一個典型的中心放射式，圓是有圓心的，通過構造不同大小的同心圓起到聚焦、凸顯作用。伴隨一個一個同心圓自然而然形成放射線，把重要表述放中間，其他表述按照放射線編排起來。引導用戶的視線聚集在我們重點突出的功能點上，先主后次，有起有落。
視線引導式主要是依靠點線面的關系形成一條清晰的視覺引導線，引導用戶的視線，避免雜亂無章的堆砌。視線流動的軌跡多則是從上至下從左到右移動，故在大屏上從左到右，從主到次，減小用戶的負擔和閱讀疲勞。如下圖是我同事做的一張大屏，指標瑣碎，每個指標與指標間沒有太強的相關性。當時發現大方向上有一定的前后關系，故最后用這種方式把數據串起來。設計稿上需要把樣式給全，看上去有點碎，實際開發后效果還是蠻不錯。
水平羅列式的構圖方式有點像全屏平鋪式，同樣是利用人從左至右的閱讀習慣。如下圖，不一樣的是四個大類有明顯的前后關系，并且彼此之間存在對比。利用無形之中形成的水平線條把內容串在一起，將同級且對比的意思表達出來。
三角排列式的構圖方式，核心思想就是一個穩！從上至下的三角構圖，能把信息層級羅列得更為規整和明確。這張大屏是我做的某地數字駕駛艙中的一個分頁，用來總覽這個分支的三個內容，每塊內容上面是政策解讀下面是數據結果，清晰明確。
頁面的氛圍個人主要認為是通過恰到好處的細節堆砌出來，這些細節要自然合適不突兀，講究一個“巧”字。對于我來說這些細節就好像歐亨利小說的結局一樣，意料之外又在情理之中。不過講道理這些氛圍的東西并沒有很明顯的一定之規，有些方法在這個場景下合適在那個場景下就不合適了，需要設計師在做的時候不斷嘗試，也是一個緣分。
抄現實是我們在設計中最直接的也是最常用的一種表達方式，它的含義就是提取現實中存在事物的點線面關系。因此往往在發散思維中找到與主題相關的靈感點后，用方式提取其中的內容后，能緊密的結合主題。它將抽象的主題通過實體表達出來，并以之作為內容信息的載體，能夠合適的存在于頁面之中。這個緯度的內容我直接舉幾個案例描述下。
公安的項目是我同事做的，在用戶那邊得到了一致的好評，并且也是團隊前期重點研究的一個DEMO。這個項目好在業務邏輯清晰，并且在表達方式上做到合理合適的程度。如下是項目其中一張大屏的一處細節，需求是需要排列公安系統中處置人員的不同分布，在大屏中也是核心區域。
一般在頁面核心區域我們會花點心思將這塊的內容做充實做飽和，畢竟第一眼需要留下好印象。設計的時候提取了警徽的基礎形狀、警徽的構成、胸徽的線條排布、旌旗的基礎形狀、放射線的構圖方式，然后將文案排布形成設計結果。最后客戶這邊對于這塊內容直接過稿，認為設計環節帶出了警隊的特色，給了高度的評價。
駕駛艙的項目是我直接參與主導的，當時這個項目的歡迎屏風格稿做了好幾版本的，用戶一直都不認可。過程中去除主觀因素，總結用戶對于駕駛艙的認知和理解?？蛻舻男枨笫邱{駛艙需要在“駕駛”的時候，眼中不光有艙內的內涵，也要有艙外的風景。如下是歡迎屏的基礎狀態（交互操作并未展開），設計的時候提取了汽車儀表盤的基礎形狀和風格組成、星光點與點的關系、逆光山體風景的天空漸變，然后組合在一起形成設計結果。最后客戶這邊看到后過稿，這個設計也留到了項目最后。
如下的作品是behance上一個大佬的作品，作品的名字叫做山海經，我們也是經常拿出來學習參考。在人物設定中，作者將古代的烏紗帽、官服、官徽紋樣等內容融入角色的道化服之中，并且角色周邊環境中大量融入一些官府的元素，比如官兵舉得牌子、衙門的建筑體等。整個作品雖然融入大量的古代元素，但是用賽博朋克的方式表達出來，成品沒有一絲違和感。確實給了大家一個方向，原來國風的東西可以這么玩。
1.使用足夠并且容易區分層級的顏色去構造頁面。數據可視化的項目往往信息的量級是不可控的，準備工作需要做充分。
2.合適的字體能讓你的頁面事半功倍。挑選字體得對比，確保不同的使用場景下有一致性的顯示。條件允許下，針對自身業務場景打造對應的顯示字體（羨慕臉.jpg）
3.好的構圖可以讓表達更上一個臺階。根據故事線的講述，挑選對應的構圖方式，做到從總到分、有主有次。
4.氛圍彰顯作品的細膩程度。細節決定成敗，在作品中增添“巧”的細節，會讓觀賞者更加投入獲取信息的節奏中。
文章來源：tob.design 作者：王亮亮同學
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
從入行到如今的這些年中，眼中的設計風格不斷變化。伴隨這些年行業的興起，從最早的擬物風到現在的內容當道，越來越多的設計師參與其中，為行業貢獻著自己的理解。但也發現同質化的現象越趨明顯，個人認為這里面有設計師本身的問題，也有行業風氣的問題。同質化的現象有很多的組成因素，可能是頁面視覺是直接的拿來主義，亦可能是脫離不了舒適圈的習慣為之。
我很擔心的一件事情就是我們一味的反對同質化的假，最后會演變成另外一種假。是一味的擯棄，還是部分的接納。這是一個界限的問題，而這個界限我還沒想明白。如今風格太現成，都像麥當勞一樣，思想的麥當勞，短暫的吃下去了，飽了，不去想了。這個慣性思維很可怕，最可怕的是可能有段時間自身都意識不到這個問題。
那么如何跳出這個慣性思維？我這邊借用馮小剛導演在十三邀里說的一段話來解釋。創作過程太正常很多時候是經驗在發揮作用，每次都和自己的經驗作斗爭，最后可能會出現一個在經驗之外又讓自己激動的東西。簡而言之就是革了自己的命?？赡苣奶煳蚁朊靼走@個問題，會再寫一章如何創新來講這個問題。
那么本章主要講我們是如何在前期定義一張大屏的風格？主要可以從幾個方面來講：配色、字體、構圖、氛圍。
定義大屏配色的前提是對于用戶的政務有著充分的調研，明白是主管哪個行業的，分別用對應的色系去定調子。
舉個例子，生物醫藥、環保等行業通常選用能表達健康安全的綠色；公安、教育、政府等通常選用能表達科技未來的藍色；消費業、服務業等行業通常選用能表達熱鬧、朝氣的暖色調。
它們有個共性就是主色調不管傾向于哪個顏色，背景通常是對應顏色的暗色系。因為可視化大屏使用環境通常是在室內、展廳等這種外部環境比較暗的地方，避免對于觀賞者視覺上的不適應。而且這也有幫助觀賞者對于數據的聚焦比對的工作，暗色調的背景加上高亮的配色，也容易在界面中將層次做出來，這點特別適用與3D城市的構建，以后我們會講述如何在城市中做出層次對比的方法。
色彩心理學普遍還是適用于可視化大屏的，顏色對于人意識的傾向性還是比較強烈的。但是需要明確的是在數據可視化領域中，有些配色規則并不適用。在傳統UI設計中我們一般會擬訂主色輔色特殊狀態色，甚至在灰階會把標題、正文、背景的顏色區分做全。這樣做的好處就組件一致性，給人統一的感覺。數據可視化一般會定一個主基調，圍繞這個主基調會用至少5-6中以上的調色板進行設計。
假設我們需要做一個政務的可視化系統，在設計初期敲定了以靛藍（H:200）為主色調的設定。那么我們會尋找在這個顏色周邊的鄰近色去做這個靛藍色調的搭配，比如在青（H:180）和深藍（H:220），使得整個大面積的色彩整體上過渡會比較自然。通過對純度S和明度B的調節，我們可以找到很多色調用于數字、文字、點線面等視覺元素。然后在靛藍色調的對比色上去尋找用于高亮的展示，比如綠（H:120）這類的，起到強化主色調的層級作用。最后找到靛藍色的互補色左右的紅（H:10）和黃（H:45）用于重點強調內容。主色調的互補色需要少量并且珍惜的使用，需要有但不是大面積得使用。
色彩是為了突出內容的重要信息，請有選擇、有策略的使用顏色，切勿濫用。配色沒有絕對的好壞，只有在當前場景下是否適合，色環理論只能大致告訴你一些配色的方式，最重要的是靠設計師自己眼睛去感受顏色帶來的沖擊力。上述的配色方式僅僅是我們工作的一個慣用方式，不同項目敲定的內容也不同，請靈活使用。
當然我們在這邊提及的色調并不是一個確定的值，而是圍繞選定顏色周邊的一個色域?？赡茉谖淖只蛘邤底稚蠒赜脗鹘yUI的規則，保持特定的統一。但是在點線面、配飾、特殊狀態的觸發等元素上使用這些色域去提高整個界面的層次和細節，使得畫面沒有那么硬，各個板塊之間是有舒服得過渡。這里的色域以前是需要自己將色調于黑白二色融合的漸變中選取不同位置的顏色組成色板，如今AntDesign的輪子比較友好，填入主色就可以對應生成有層級的顏色。
我們上述的配色方案是有傾向觀賞展示型的，由于用戶使用大屏普遍都是匯報展覽并且用戶樣本容量小。故在表達的過程中大量借鑒了運營設計的方式方法，因此配色方式存在包容性不夠的現象，對于色盲色弱的人群是有障礙的。比如青色、藍色、紫色在色域展開的過程中，選取其中幾個顏色做疊加色板樣式時，灰色模式下存在顏色拉不開的現象?？赡苁恰八{色”是對色障人群最友好的顏色，AntV保留MPC疊加色板，但同時在使用建議中也寫明推薦使用MOB疊加色板。
在數據可視化領域中，還需要界定清楚你做的是偏向觀賞展示型的還是偏向實戰分析型。這兩者的區別主要在觀賞性的數據可視化往往需要大量的視覺語言去烘托氣氛、用輔助性的元素去增強觀賞的趣味。實戰分析型的主要是需要消除不必要的視覺雜音、強化傳達的力度。因此這就是一個尺度的問題，是偏向品牌創意的手法多一點，還是偏向傳統UI的手法多一點，君可自決~
以下的案例是我自己工作中犯的錯誤，拿出來共勉（捂臉233333）。做的時候由于可視化的經驗并不是很多，在選用顏色的過程中并沒有把顏色的層級拉的特別開，導致長時間觀賞容易產生識別不清的問題，進一步講有可能在比對數據過程中產生認知障礙?；厥滓豢矗醒氲暮诵膮^插畫的比重大于數據本身要表達的內容，出現了喧賓奪主的情況。這也是一些設計師容易犯的錯誤，需要再次明確所有的手法和表達方式都是服從一個原則，即清晰有效地傳達與溝通信息。
設想一下，一個充滿數據的界面本身就是會伴隨視覺疲勞的。人是有惰性的，會自然的抗拒一些不清晰不明確的展現方式。數據可視化在我們理解中就是通過設計師清晰有效地傳達與溝通信息，使人有能力抗拒自己的惰性去從枯燥的數據中分析出超額信息。
數據可視化和大量數字打交道，選對數字的字體挺重要的。涉及到字體版權的問題請自行解決，在推薦字體之前有兩件事情需要注意下：
第一、文字習慣左對齊，數字習慣右對齊。文字左對齊是人一般從左至右閱讀，數字右對齊能夠快速識別數據量的大小，容易與其他數據比對。因此在選用數字字體的時候，盡量使用字間距相同的字體（比如Lato字體和DIN字體，注意PS中比對的時候需要選擇度量標準，使用視覺的字間距會有問題），這樣比對數據的時候字間距相同更容易產生比對結果。
第二、選用數字字體的時候需要檢查下常用字符是否有缺失、是否顯示正常。比如錢幣的符號“￥”和“$”以及“%”。還有就是“1”和“7”、“0”和“O”這兩個需要能夠清晰識別。（國外的很多字體是沒有人民幣的符號的，DIN的0和O并不是特別好識別，故很多公司會自己改良字體滿足自身業務的要求）
我們最長使用的就是思源黑體、思源宋體，開源并且字體庫全。缺點就是比較中性，在數字上辨識度不是很友好，因此我們在數字上最常使用的就是DIN字體。DIN 是德國標準協會，Deutsches Institut für Normung 的首字母縮寫。1975年起，德國政府把DIN作為國家標準體系，DIN 標準在國際和歐洲范圍內被廣泛使用。DIN 字體繼承了嚴謹可識別度高，被廣泛運用。
DIN也是有缺陷的，支付寶設計師SKY在專欄里也講過4的開頭較大，以及5，6字體的圓形不夠一致，7縮小后識別度問題，所以很多公司都會基于這些問題進行二次設計，比如微信錢包、京東金融、百度金融都在一些地方對DIN字體進行了微調后使用。
接下來我們直接推薦幾個有風格的英文和數字字體給大家（私貨環節！）：
Futura這個字體是我自己特別喜歡的一個字體，字體表現很現代，看上去特別利落，繼承了包豪斯的設計理念。
Optima也是我個人比較心水的一款，字體充滿人文主義。字體本身嚴格遵循了黃金分割原則，比例優美，字里行間充滿了變化。
Garamond簡直就是襯線體之中的典范，就這么說吧，經典的設計中一定會出現他的身影。
Bodoni被譽為“現代主義風格最完美的體現”。字體粗細對比強烈，給人浪漫的感覺。
Didot和Bodoni很相似，都是給人浪漫的感覺，不同的是Didot在數字上面做了不一樣的處理，兩者在電商上使用都蠻多的，一般用做價格顯示。
DIN被德國人視為“國民字體”，有著悠久的歷史。德國的路標和路牌的標準字體就是DIN。其中的4這個設計挺有個性和特點的，容易辯識出來。除了前面說的問題，真的是精準的徳國工藝阿（dog臉~）
lcdD是常見的電子表數字的字體風格，更加端正鮮明的視覺效果，運用在數字提示等內容上，傾斜風的設計讓字體更有自己的獨特魅力。
Lato就是那種非?，F代科技感的一款，并且具備了很多常用自己的特點，屬于那種用了不會出錯的字體。
Avanti和DIN在字形上是很相似的，但是它的字形更加飽滿。差異主要在3、5、8這三個數字以及G、Q都做了不一樣的處理，上半部較小而下半部較大，多了一些變化和趣味性。這個字體還有一個細體，一粗一細，靈活使用。
Tensans和Avanti也很相似，如5和8上下部分的比例，6和9的轉折以及中圈部分都挺相似的，有點像Avanti字體的加粗版本。但是Tensans特征更加明顯，比如2、3、4、7的轉角尖銳，切角鋒利，具有很濃重的現代工業氣息，比較適合速度、剛猛、游戲等主題的設計。
Impact這個字體第一感覺就是厚重醒目，視覺沖擊力很強。特粗的筆畫、緊縮的間距以及狹窄的中宮，特別適合大標題和醒目的價格展示。
字體字面比較秀長，筆畫流暢，簡約大方。適用于化妝品、服裝等女性向。
和上面哪個BebasNeue是有點相像的，字面細瘦，挺拔優美。多了一些襯線體的字重和體勢的變化，設計感與裝飾感更強，尤為時尚，在女性、文化、時尚類中用的格外多。
Gaoel有著Avanti的韻味，但是更加年輕、圓潤，令人驚喜的是大寫的字母有著統一的特點，特別未來。不過需要注意的是該款沒有小寫，小寫就直接變成如下樣子。整體字體設計很圓潤，年輕化，可愛非常適合一些偏年輕化的產品，同時字重非常適合金融產品的字重效果！
Proxima Nova的style還是比較多的，我個人用的比較多還是在它的細體上做修改，比較纖細現代。
Gotham號稱發布會字體，特別現代干凈的一款字體，這些年看到的較多是手機發布會的海報設計，纖細的字體壓在海報上很有力量。
Expansiva也是特別有個性的一款字體，用于做數字的也比較多，目前看到的可視化設計中存在，但是使用量并不多，由于字形骨骼的因素，用于數字上比較多。
文章來源：tob.design 作者：王亮亮同學
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
黑川雅之，世界著名工業設計師，將建筑的思維融入工業設計中，并開創東方日式美學和西方工業設計思維融合的先河，甚至對后來原研哉和深澤直人的創作都有重要的影響。黑川雅之被稱為日本設計圈的達芬奇，作為日本建筑和工業造型設計界的代表人物，他個人本身就像是一部活的工業文明發展史。
說黑川雅之是日本戰后將日本傳統文化和西方現在工業設計完美結合的第一代設計師一點也不夸張。
在工業設計的世界里，黑川雅之將日式禪意美學與西方工業設計世界注重完整和功能性做了完美的融合。從他的工業設計中都可以看出來對空間和時間的反思和理解。
黑川雅之老師提倡設計應該關注通感，而不該只是注重外在的表象和造型。所以，黑川老師強調在視覺設計之余，要更加關注設計對象對其余感官的刺激，尤其是觸覺。
代表作賞析——
結合傳統的手工藝與現代感的設計，最有代表性的作品系列是Irony鑄鐵壺系列。沙模鑄鐵本身記錄了鐵的演變過程，在鐵的表面能夠清晰地看到這一由溫度和時間共同留下的痕跡，驅散人們印象中光滑金屬表面的冷質和距離感，金屬表面也可以被打造得溫潤自然，既粗糙又美麗。
GOM系列
上世紀70年代是塑料和金屬的全盛時期，也是注重視覺美感的年代，而GOM第一次以“材料”這個關鍵詞登場，對于黑川來說帶有向現代主義挑釁的意味。在他看來，如果說現代設計是日耳曼的理性審美意識和基督教價值觀下白皙光亮的形象，而橡膠吸光的、黯黑的表面含有危險和不安的成分，黑色暗影有壞的意味，似乎是對明快現代設計的一種對抗。
PLPL餐具系列
在西方培養了盤子文化，在日本則演變為了碗的文化。 設計最重要的是通過款式、材料及材料的原始意義，將該物品周圍的獨特韻味表現出來。設計韻味，從而在人的內心深處引起情感上的共鳴。
黑川雅之說——
含而不露
日本設計講求意境，不需要表達得太多，其余的要留給觀賞和使用者以想象的空間。強化觸感可以讓材料當主角，款式的簡單給視覺上禪意之美。
返璞歸真
比起工業時代大規模生產語境下“追求體驗”的產品，日本設計更加關注對“留白和空”的運用。不刻意去追求完美，天然的情景下或許存在雜質、存在結節、存在傷疤，但不完美本身也是一種完美，自然的哲理本身也包含著宇宙萬物制衡的道理。
關注偶然
不是什么事情都會在計劃下發生，人生充滿了偶然和不確定性，承認并順應偶然的存在才能迸發出無限的可能，設計也是一樣。就好像在制造鑄鐵壺的過程中，由于不可控的溫度和時間的作用，自然而隨機地形成大大小小的氣孔，這是偶然之力造就的美。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
設計思維（Design Thinking）是通過提出有意義的創意和想法，來解決特定人群的實際問題。設計思維可以幫助各個專業背景的人通過創新的解決方案解決問題。在“設計思維”在被不同的學者提出之后，IDEO是第一家將設計思維應用于商業問題的解決之中。IDEO的創始人，David Kelley，后來又在美國斯坦福大學創建了著名的D.School，斯坦福設計學院。
斯坦福設計學院將設計思維分成5大步驟：“Empathy同理心思考”、“Define需求定義”、“Ideate創意構思”、“Prototype原型實現”、“Test實際測試”。下面具體闡述。
第1步：移情／同理心
移情就是對他人的情感或情緒感同身受的能力。
第一步的目的是進行用戶研究，從而了解人們真正關心的東西，我們需要真正了解他們的處境，比較常用的方法是用戶訪談。
舉個例子，如果你想幫助老年人進行設計，你可能會發現他們行動能力下降，但是他們想保持走動的能力。 在和他們進行訪談的過程中，他們可能會與你分享他們實現目標的不同方法。 在訪談后期可以進行深入挖掘，尋找個人故事或比較極端的場景。 理想情況下，你可以與多個訪談者人重做此過程。
當然用戶研究的方法不僅于此，還可以：
·進行民意調查或組件焦點小組進行調查。
·勤發電子郵件，了解受眾對當前活動的反饋。
·統計數據、視覺跟蹤軟件也能派上大用場。
·嵌入代碼，觀察設計元素對交互的影響。
·通過社交網絡、親身交流對交互效果進行監控。
·對你的受眾進行群體劃分，了解不同群體對相似的產品、品牌或設計的反應。
第2步：定義問題
通過訪談，你現在可以了解人們在特定活動中實現的實際需求。 一種方法是對受訪者在談論他們的問題時提到的動詞或活動進行重點分析：比如他們會說，他們喜歡去散步，結識老朋友喝茶，或者在街角商店購物。 通過深入分析，透過表面你可能會意識到，這不是老年人喜歡外出，而是他們希望彼此保持聯系。 分析后，制定一個問題陳述：“有些老人害怕孤獨。 希望保持聯系。
第3步：創意
現在只關注問題陳述并提出解決問題的想法。 重點不在于獲得一個完美的想法，而是要想出盡可能多的想法，比如針對我們的例子，我們可以提出許多想法：獨特的虛擬現實體驗，高級友好懸停板或改裝的手推車。 不管它是什么，請畫出你的最佳想法，并將它們展示給你正在嘗試提供幫助的人，這樣你才能得到他們的反饋。
第4步：原型制作
現在花一點時間思考一下你從對話中了解到的不同想法。 問問自己，你的想法如何適應人們的實際生活。 你的解決方案可能是一個新想法和已經被使用的組合。 然后連接點，勾勒出最終的解決方案，并建立一個真正的原型，以進行測試。
第5步：測試
現在尋找實際用戶測試你的原型。 如果人們不喜歡它，要敢于接受意見，關鍵是要了解哪些是有效的，哪些沒有，所以任何反饋都很好。 然后回到理念或原型，并運用你的技能。 重復這個過程直到你有一個能夠解決實際問題的原型。
第6步：重復以上步驟進行迭代
反饋——原型——測試——反饋——原型.......
荷蘭埃因霍芬理工大學工業設計系博士在讀
公眾號：“用設計做研究”
知乎專欄：“用設計，做研究”
設計與研究/工業設計/荷蘭留學 原創文章發布
原創：
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
大屏可視化界面設計可謂是當今行業、企業發展的見證，生動直觀地再現了行業、企業的全貌。不僅作為展示，方便了解、監督；同時可以作為一個有效的管理平臺，帶來效益。大屏界面面向范圍廣，協同性好，易于被采用。下面幾個大屏的界面設計，沉穩的背景上，加上亮色作為點綴和強調。既不失其風格，又富有靈動性。
（圖片均來源于網絡）
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
更多精彩文章：
大數據可視化界面設計賞析（一）
大數據可視化界面設計賞析（二）
大數據可視化界面設計賞析（五）
哈珀開創了廣告行業新紀元。
無論是羅瑟·瑞夫斯提出的“USP”，還是奧格威所推廣的“品牌形象”，又或是里斯和特勞特提出的“定位”……這些都可以看成是一種單一的主張。
而行業中成立時間更早也更大的一批元老級公司，他們并不推崇這些創意先鋒們的單一廣告主張。他們認為廣告公司要根據企業的不同，自由地從所有門派中組合出最有效果的方法。
BBDO一位資深人士自豪地說，“你常?？梢钥闯鲞@是奧格威的廣告，那是達彼思的廣告，但你無法認出哪個是我們的廣告，因為我們會去整合每個人的構想?！?/strong>麥肯則更加瘋狂。他們認為做廣告并不是它最重要的工作，他們要處理“整個營銷”的問題。
本文便是麥肯的傳奇故事。
一、麥肯早期的發展
麥肯的歷史最早可以追溯到1902年成立的埃里克森廣告公司。在1930年，埃里克森與晚自己九歲的麥肯合并，合并后的新公司名稱是這兩者的組合。不過不叫埃里克森-麥肯，而叫麥肯-埃里克森廣告公司，也就是后來的麥肯世界，一般仍然簡稱麥肯。
合并后的麥肯迅速發展，最主要是把握住了兩大先機。第一個先機是新媒體的興起。
當時兩家公司的合并，正趕上了廣告業第一次變革。全行業正新興起一個新媒體——廣播媒體。由于無需識字，廣播收聽量遠遠超過報紙的閱讀量，當時每個家庭平均每天要收聽四個小時的廣播節目。在合并的前一年，麥肯就收購了一家廣播節目制作公司，得到一批廣播創作人才。合并后的麥肯高度重視廣播媒體，而公司的規模也直追當時的巨頭。
在廣播之后，又興起一種有圖像的“廣播”——電視。按照人們的習慣，美國的電視臺不叫某某電視臺，而叫做某某廣播公司。盡管當時電視才剛剛起步，而且還只是黑白的，但麥肯認為電視的傳播威力有超過傳統報刊媒體的趨勢，便投入大量精力將已有的廣播業務優勢發展到電視上。到了1950年代電視占據主導地位，成為媒體之王，麥肯也水漲船高成為電視廣告業務量最大的公司。
第二個先機是拓展海外市場。
創始人哈里森·麥肯早在1917年就說，“海外其他國家的生活與生產水平比我們要低，所以他們的產品會以極低的價格在當地銷售，我國的制造商在海外市場將面臨巨大競爭，我國制造商在海外必須大做廣告才能在競爭中站穩腳跟?！?nbsp;
1927年，麥肯在歐洲建立了分公司。雖然發展得十分艱難，但它還是跟隨標準石油公司的腳步，開設各地分公司，這樣廣告創作可以在當地進行，可以提高服務效率。
第二次世界大戰使麥肯在歐洲的分公司受到嚴重威脅。倫敦分公司有人回憶，在戰爭激烈的時候，公司員工要沖上屋頂，清除燃燒彈，夜間還要輪流放哨。二戰后情況還沒有好轉，海外業務讓哈里森·麥肯很頭痛。沒有盈利，加上各國反對情緒和高壓管制，讓海外業務前景不容樂觀。不過1947的實施馬歇爾計劃，西歐各國接收美國包括金融、技術、設備等各種形式的援助合計131.5億美元。經濟的逐漸恢復，讓麥肯的海外業務起死回生，并成為海外廣告市場的領跑者。
麥肯把握住了新媒體與海外市場的時代機遇，成為了行業中堅。不過，它帶給行業最大的驚喜，是哈珀的到來。
二、哈珀的到來
1939年，耶魯大學心理學專業畢業生哈珀進入麥肯公司，當時他只有23歲。
一開始，哈珀在郵件收發室工作。心理學專業的學習經歷，讓哈珀對研究很癡迷。由于他對研究的諸多見解對公司內部有很大啟發，三年后哈珀成為文案測試部門主管，四年后哈珀又成為研究部總監。
在研究部，他發起一個名為“因素分析”的關于廣告如何吸引讀者的研究項目，并在全公司推廣，他說服創意部，因素分析不會危及他們的創造性。
在哈珀成為研究部門主任的兩年后，也就是1948年，32歲的哈珀被哈里森·麥肯指定為公司新總裁。哈里森·麥肯說，“他在研究領域所取得的成就，使得他對重要事實的了解獨特而有見地，而這正是一切策劃的基礎。我覺得像哈珀一樣能把研究做得有生有色的人會成為公司鼓舞人心的總裁?！?/span>
成為總裁的哈珀聘請了多位博士加入麥肯傳播研究所，不斷研究改進廣告方法論，使得麥肯公司在廣告研究及業務應用等方面處于領先地位。
傳播研究所擁有很多研究工具，這些工具僅從名字上就讓客戶覺得很放心。比如：相對銷售傾向測試、感知實驗室……這些金光閃閃的名字，讓人覺得廣告只要通過這些測試，就一定能獲得成功。這些測試在當時是十分創新的，比如在分析觀眾對廣告的反應時，引入眼球攝影新技術與廣告效果研究結合起來，記錄瞳孔對視覺刺激擴張程度。
這些引領時代的研究成果，吸引了大量客戶的青睞。而哈珀并未滿足，他在多年研究心得的基礎上，創造性地提出了他對“未來廣告公司”的構想。
哈珀對“未來廣告公司”的構想是采用平行子公司的結構組建廣告集團。這看似簡單的構想，實在是了不起的創想。集團公司在其他行業中雖然已被普遍采用，但廣告行業卻受到天生的限制，一直無法集團化運作。
主要原因是當時廣告公司的客戶們不喜歡和競爭對手共用同一家廣告公司。這意味著廣告公司在每一個行業只能有一家客戶，他們只能為一個品牌的汽車、一個品牌的啤酒、一個品牌的計算機做廣告。如果一家廣告公司收購了另一家，那么兩家公司此前可能擁有的同一領域的兩家客戶就必須放棄一家。
這個問題是致命的，而哈珀構想的“未來廣告公司”則解決了這個問題。
三、哈珀發明廣告集團
1934年，麥肯公司的大客戶標準石油公司，被一家叫馬肖爾&普拉特的小型廣告公司插了一腳。當時報刊行業利用自身的主流地位阻止新興的廣播媒體進入廣告市場，導致企業無法順利投放廣播廣告。這家小型廣告公司建議標準石油暫不投放廣播廣告，轉而贊助制作一個全新的廣播節目，這樣可以繞開廣告投放的限制，這個全新的節目在全國各大廣播上播出。由此，馬肖爾&普拉特成為標準石油在美國主要的廣播廣告代理商，然后又成為電視廣告代理商之一。
馬肖爾&普拉特公司非常小，卻奪走了標準石油的一大塊廣告資源。這讓麥肯創始人哈里森·麥肯對此耿耿于懷，而一直琢磨如何創建“未來廣告公司” 的哈珀，卻在馬肖爾&普拉特公司那里看到一個絕好的機會。
1954年，麥肯收購了馬肖爾&普拉特公司。但哈珀并沒有簡單地把它合并到麥肯，而是讓它成為一個單獨的公司，讓它擁有原來的名稱和客戶，甚至可以與麥肯的客戶之間存在競爭關系的客戶。哈珀跳出傳統管理方式的藩籬，以平行子公司的結構成立廣告集團。讓被收購公司獨立于收購公司運作，兩家公司的財務由集團公司來控制，而業務上則由各自獨立經營，無需放棄業務相沖突的客戶。
這一大膽的做法震驚業界，受到業界的抨擊。也有不認可的客戶中止了合作，但最終吸引了更多的客戶。
隨著質疑的聲音漸漸減少，哈珀的廣告集團慢慢體現出自身的優勢。集團公司擁有大量后臺人員同時為旗下所有廣告公司提供行政和財務，更重要地的是將媒體采購獨立出來，這種集團集中采購媒體的方式大大強化了自己的地位，這就能夠實現廣告行業的規模經濟。在此之前，廣告公司被視為創意經濟，很難形成規模。不要小看規模優勢，列寧有一句名言：“數量本身就是質量。”
麥肯于1954年買下馬肖爾&普拉特公司初嘗成果之后，陸續又收購了其他一些小型廣告公司。1960年，哈珀將集團公司更名為IPG，這原本是旗下一家公關公司的名字。1971年，IPG集團上市，有了資本市場的加持，收購更加大手筆。1990年收購了著名的靈獅廣告；2001年更以21億美元將行業元老FCB納入旗下（FCB的前身是拉斯克兒和霍普金斯奮斗過的洛德暨托馬斯廣告公司）。哈珀用極具創想的方式，一手締造了自己的廣告帝國。
哈珀締造的IPG廣告帝國，為全行業集團化發展指明了方向。麥肯這一模式后來也被其他廣告集團廣泛采用。到1990年代，全行業進入了集團化時代，形成WPP、宏盟、IPG、陽獅、電通、哈瓦斯六大廣告集團。
這些廣告集團也像IPG一樣瘋狂并購知名廣告公司。比如WPP收購了智威湯遜、奧美、楊羅必凱；宏盟則擁有恒美、天聯；陽獅則并購李奧貝納、盛世長城。
這些廣告集團正是用哈珀的平行子公司模式組建的。
四、哈珀的另一個偉大想法
在IPG集團取得成功后，哈珀的視野早就超出廣告集團之上。他又想一個新概念，這個概念不僅改變了麥肯，也改變了整個行業。
在1950年代，由于新媒體——電視的強勢崛起，大家一致認為進入了“電視為王”的時代。但是哈珀并沒有將注意力僅僅局限在電視上，而是十分重視新老媒體的整合運作，乃至營銷傳播的整合運作。
所以，哈珀另一個偉大的想法，就是“整合營銷傳播”。麥肯公司認為：哈珀是實事上第一個提出此思想的人，比舒爾茨教授整整早了30年，但是哈珀并沒有得到“整合營銷傳播之父”的榮耀。
哈珀認為整合營銷傳播的目標是創作過程的核心，它是一種站在戰略高度促進創意思維的手段。在1952年，哈珀就強調，應當擴展廣告業務范圍，建立起一個能夠適應營銷活動從產品概念、產品設計一直到把產品送到消費者手中的各環節的需求的組織體系。但在傳統廣告公司結構中，這些重要形式常被廣告的風頭蓋過。它們被認為與廣告公司現有業務沒有多大關系。
哈珀覺得需要重建廣告業務方式本身，廣告公司也應該向生產廠家一樣，研究和開發自己的產品。1956年哈珀說，“我們為客戶所做的并不僅僅是充當版面購買的經紀人或只為那些版面做設計與文案。我們為客戶做的更多，我們幫助他們特色營銷經理，幫助他們設計新產品，并安排生產。現在我們經常參與他們的銷售會議，評估營銷方式，參與他們的高層決策。我們還要在許多與廣告不相關的領域幫助他們?！?
對于提供營銷附加服務，麥肯也早有這個傳統。早在1933年麥肯就設立了促銷部。專門為客戶制作各種促銷品，包括目錄、小冊子、掛歷等，還提供櫥窗設計、柜臺、賣場、陳列等服務，并負責直郵廣告活動的執行。在哈珀的時代，麥肯除了并購其他廣告公司之外，還成立一批專職營銷附加服務公司。包括市場研究公司、公關公司、品牌咨詢公司、銷售渠道拓展公司等。他要在原有的廣告公司之外為客戶提供全面的營銷服務。
1960年，哈珀公開宣講要“整體性”解決營銷問題。他認為做廣告并不是他們最重要的工作，麥肯要處理“整個營銷”的問題。
麥肯為什么要從做廣告變成處理“整個營銷”呢？喬治·帕克解釋道：“廣告公司一定要與客戶最高層做經常性聯絡。然而如果你只帶著廣告設計稿來，你就無法接觸那個階層。要接觸客戶最高層，你必須提出營銷咨詢意見。”
哈珀是第一個將廣告描述為營銷傳播的人，等到30年后“整合營銷傳播”才被廣泛使用，到1990年代，哈珀首創的理念仍然是廣告行業討論的重點。他幾乎以一人之力完成了行業管理模式與業務模式的升級?！皬V告集團+整合營銷傳播”也成為下一個階段行業大發展的兩大引擎。
五、哈珀拿下可口可樂全球廣告業務
哈珀的努力沒有白費，麥肯在1955年成功接下可口可樂的全球廣告業務。
此時的可口可樂正面臨百事可樂日益強勁的挑戰。可口可樂營業收入下降，新任總裁比爾·魯濱遜終止與達美高長達50的合作，因為他意識到有必要進一步統籌其海外和美國本土廣告。而此時麥肯由于哈珀的前瞻性布局，已經建立起跨國業務體系，差不多是當時唯一的選擇。
哈珀帶領團隊克服重重困難，全力以赴，匯報提案長達6小時，充分展示麥肯全球服務能力以及“整合營銷傳播”思維與市場調研強度結合起來所能達到效果的大好機會。最終贏得了可口可樂的全球廣告業務。麥肯隨即組建的可口可樂工作組，一開始就有121名職員，涵蓋了麥肯公司各個部門的職能。此外，還有20人的推銷小組被派往18個重要的食品分銷中心城市。像可口可樂這種跨國廣告業務，需要協調進行，又要適應不同的市場條件。麥肯的原則是“分散行動，集中策劃”，由一批分公司在世界各地分別運作，而總部則負責協調整個組織在全球范圍的活動。
可口可樂在品牌史上占有重要地位，全球各大品牌排行榜，只有可口可樂一家公司從來沒有跌出過前10名。因此，我們簡單回顧一下它的歷史。
1885年，美國頒布禁酒令，禁止銷售各類酒水，關閉各地酒館，這給酒業帶來滅頂之災。一個叫彭伯頓的藥劑師，手下擁有一家古柯酒廠。為了減少禁酒令帶來的損失，他改進當時古柯酒的配方，仍以古柯為原料，加入可樂果，經過不斷實驗，終于在1886年研制出一種不含酒精的全新飲料。
這種冒著氣泡的飲料被魯濱遜取名為“Coca-Cola”。這個名字包含飲料的兩種主要成分，還十分押韻，得到了彭伯頓和其他股東的認可。（Coca-Cola最早的中文譯名是——蝌蚪啃蠟，導致當時進入中國的產品無人問津。后來由蔣彝重新譯為——可口可樂，這個新譯名在音譯的基礎上還具有實際含義，成為品牌中文譯名的典范。）
魯濱遜早些年通過推銷印刷機認識了彭伯頓，入伙了彭伯頓的公司。魯濱遜不但為產品取名，還手寫了延用至今的斯賓賽體可口可樂標志，同時他策劃從零起步的廣告宣傳。1886年3月29日，魯濱遜發布了第一個報紙廣告，上寫著“可口可樂，美味、清爽”?？煽诳蓸窂拇碎_始了萬里長征第一步。
六、可口可樂成為美國文化象征
最早的可口可樂是在藥房及店鋪的冷飲柜中以5美分的價格出售，由售賣者將可口可樂糖漿加冰水現場制作。
到1899年，有兩位律師向當時的負責人阿薩·坎德勒提出建議采用瓶裝生產。這樣在沒有冷飲柜的鄉村地區，瓶裝可口可樂的銷售前景會跟城市的冷飲鋪現做的一樣好。
但阿薩·坎德勒怕力不從心，因為“瓶裝項目有太多細節需要處理”。為了打消阿薩·坎德勒的顧慮，兩位律師做出承諾：保證瓶裝可樂不會爭搶冷飲柜的生意，而且可以擴大糖漿的銷量，還不用花公司一分錢，廣告都由瓶裝廠自己投放。最終雙方簽訂了合同，公司以每加侖1美元的價格賣給他們糖漿，允許對方使用可口可樂品牌。這個合同沒有約定有效期，也沒有約定價格是否可以浮動。這為后面雙方長期糾纏埋下隱患，但也正由于各地瓶裝廠的加盟，真正讓可口可樂全國暢銷。
隨著瓶裝可口可樂的暢銷，各地紛紛出現仿冒品。仿冒品采用相同的筆直的瓶子，采用相同的鉆石形標簽，裝著同樣焦糖色的飲品。普通不認字的消費者常常無法分辨誰是可口可樂。
可口可樂公司的赫希認為，應該拋棄現有大家都在用的瓶子，另外生產一種特征鮮明的新瓶子。他勸說瓶裝廠不要將眼光局限在換用新瓶的短期花費上，要生產一眼就消費者被看出的瓶子，“在黑暗中僅憑觸覺即能辨認，甚至摔碎在地上也能一眼識別”，這瓶子根本不用貼紙質商標，商標要直接印在瓶子上。
1915年，設計師迪安以當時流行的一種裙子為靈感，設計出弧形瓶。這個瓶子手感很好，拿取非常方便，而且十分獨特，人們一眼就能看出這是可口可樂?；⌒纹亢芸毂簧暾埩送庥^專利，其他廠家不能仿制這種瓶子，這讓仿冒者們紛紛陷入絕境。此后40多年，可口可樂堅持以弧形瓶作為唯一的產品包裝。最終，弧形瓶就像手寫體的商標一樣，成了可口可樂的品牌“視覺錘”。
弧形瓶讓可口可樂大獲成功。使得公司越來越重視品牌形象，在1931年，邀請藝術家海頓·珊布為可口可樂創造了一個全新的圣誕老人形象。他一改之前嚴肅的精靈形象，成為一個永遠樂呵呵、胖乎乎的圣誕老人。他紅色的外衣，白白的胡子，與可口可樂紅白形象一脈相承。
圣誕老人的推廣，大大增加了冬季的銷量。此后，可口可樂的廣告不斷強化紅白衣服打扮的圣誕老人形象，圣誕老人派發可口可樂成為小孩子們的最愛。隨著強大的營銷攻勢，“可口可樂版”圣誕老人漸漸定格在了人們的腦海中，并流傳至今。
1942年，美國參加第二次世界大戰。董事長伍德拉夫希望將可口可樂列入軍需品的行列，這樣可以隨著軍隊的步伐征戰世界，但軍方一開始并不同意。伍德拉夫召開多次新聞發布會。將可口可樂抬到“戰時休息”、“鼓舞士氣”至關重要的地位，宣講可口可樂對調整士兵狀態的意義。伍德拉夫還宣布“不管我國軍隊在什么地方，也不管公司的代價有多大，我們一定保證每個軍人只花5分錢就能買到一瓶可口可樂?！币粫r民意沸騰，最終軍方同意讓可口可樂走向前線，并幫助可口可樂在當地建廠。
道格拉斯·霍爾特在《品牌如何成為偶像》中說，這是有史以來最成功的公關。
可口可樂不惜工本，滿世界送可樂，無論是歐洲小鎮，還是亞洲孤島，只要5美分，駐扎美軍都能買到?？煽诳蓸凡粌H緩解著戰爭之痛，更成為士兵們對家鄉的寄托。在前線，可口可樂被送到每一位士兵手中；在后方，它又印刷大量廣告來慶祝每一場戰斗的勝利。當戰爭結束時，人們對可口可樂懷有宗教般的虔誠，喝出一種民族自豪感，成為美國文化的象征。
七、“給世界來瓶可口可樂”
在麥肯與可口可樂合作期間最經典的作品，當屬1971年推出的“山頂”廣告。
這支廣告教全世界唱一首廣告歌，成為前所未有的、最為流行的廣告歌曲。也是電視廣告史上巔峰杰作之一。廣告內容如下：
在意大利的某座小山頂，兩名短發的青春少女在歌唱：“我想給世界一個家，用愛來灌溉它……”隨著歌聲悠揚，鏡頭拉遠，越來越多不同國家、不同種族的年輕人加入歌唱隊伍。歌聲越來越洪亮，匯成美妙的合唱：“我想讓世界學會歌唱，人們和諧歡暢……”最后成百上千不同種族的年輕人齊聚山頂，每個人手里捧可口可樂，仿佛手擎著一面旗幟，高聲歌唱：“我想給世界來瓶可口可樂，讓它永遠陪伴我的快樂！”
這個廣告先在歐洲播出，不溫不火。但在美國一播出，迅速引起巨大轟動，沒有人對可口可樂誓志拯救世界感到荒謬，人們紛紛點播這首廣告歌曲，寄來超過10萬封信函索取樂譜，可口可樂公司將歌曲唱片贈送給索取者們。這首廣告歌去掉了中間的商品信息后，被重新錄制成一首單曲，在各大電臺播出，最終登上一些音樂排行榜冠軍寶座?！都~約周刊》寫道：“這是肯定會紅火的潛意識廣告?！彪m然歌詞中沒有提及可口可樂，但是每個人只要聽到這首歌，都自然會想起可口可樂。
這個創意據說源自麥肯創意總監比爾·巴克爾。他乘坐的航班，因為重霧而在香農機場迫降。原本要乘坐飛機的旅客們，不得不擠在條件簡陋的旅館房間里熬過一晚。人群中到處彌漫著憤怒與不滿。第二天早晨，在等待航班放行時，令人意外的一幕出現了，前天晚上情緒最激動的那些旅客，正一起邊吃著零食喝著可口可樂，邊“吐槽”開著玩笑，怒火似乎已被手中的可口可樂澆滅，平靜放松下來了。比爾·巴克爾回憶道：“那一刻，可口可樂的意義早已超越了一瓶飲料。它是把人們聯結在一起的紐帶，是提供陪伴的一劑良方。”之后就創作出“我想給世界來瓶可口可樂”的廣告歌曲。
不過，提出“文化品牌戰略”的道格拉斯·霍爾特認為“山頂”廣告巨大成功的關鍵，并不是廣告公司所說普通人的陪伴良方，而是可口可樂緩解當時激烈的種族文化沖突。
在二戰后很長的時間內，可口可樂一直擁有美國文化象征的這份殊榮。然而到了20世紀60年代，美國爆發民權運動，美國黑人民眾為獲得平等權利而進行斗爭達到高峰，引起強烈的文化沖突。民權運動的吶喊，撕碎了原有的民族團結，可口可樂原有的品牌力量隨之消減。
在這個背景下，“山頂”廣告吸收了嬉皮士反文化的形象與和平運動的內容，認識到當時充滿沖突的社會現實，呼喚對人性的理解和容忍。廣告中溫暖人心的歌詞和朗朗上口的旋律，以及一群不同膚色、不同國籍的年輕人共唱“給世界來瓶可口可樂”，這一“世界大合唱”告訴人們：想平息看上去十分激烈的社會沖突，最簡單的方法莫過于拿起一瓶可口可樂。
麥肯公司的李·塔利認同道格拉斯·霍爾特的觀點，他說：“百事可樂更擅長定位，只瞄準一個市場——二戰結束后的嬰兒潮一代年輕人。而我們努力使可口可樂成為適合所有人的東西，這樣做反而使我們迷失了方向，并且不記得自己本該有的形象?！?百事可樂保持與充滿活力的年輕人市場同步前進的策略讓可口可樂一度十分被動。麥肯公司連續三年進行深入調查，最終確認可口可樂的主要作用是作為社會催化劑，聯結人們情感的紐帶。
可口可樂作為聯結情感的紐帶，通過象征性地化解美國社會中尖銳的文化沖突，增加了人們的凝聚力，也增加了人們與可口可樂之間的情感紐帶。難怪有人說：“無論膚色是白是黑，也無論是總統還是平民，我們喝的都是相同的可口可樂。”
可口可樂這種“平等”性，捍衛了自身作為美國文化象征的殊榮，這一超然地位，讓可口可樂在大多數的時間里，始終壓住百事可樂一頭。
八、可口可樂引發的危機
時間來到1985年，可口可樂發生了史上最大危機。
此次危機讓人們發現：盡管可口可樂是一個超級品牌，但卻沒有一個成體系的品牌理論來指導實踐，以至發生此次危機。
從這次危機后，品牌理論成為全行業關注的焦點，迅速構建起品牌理論的大廈。
文章來源：站酷 作者：趙義
還記得今年年初大家追捧的 新擬物化（Neumorphism）風格嘛？這種風格最初在社交媒體上風靡，很大程度上，來源于資深設計師 Michal Malewicz 的文章《Neumorphism in user interfaces》，這篇文章透過 Medium 平臺，開始在各個設計師社區當中發酵，隨后被不少平臺預測為 2020 年會逐漸流行的一種視覺設計風格。
事實上，也確實有很多產品和 UI 界面跟進了這種設計風格。包括三星在內的很多品牌甚至會使用這種風格來制作宣傳視頻，油管主播 MKBHD 也在自己的視頻中使用到了這種風格：
從美學價值上來說，新擬物化足夠現代，看起來也頗為時尚，科技感也很足，不過在在實際的應用上，新擬物化本身確實不算是一種系統全面的設計風格，因為在很多具體的 UI 元素上，是難以保證可用性和易用性的。
在需要體現出視覺縱深（Z軸方向的高程、高度）的地方，新擬物化的 UI 元素很難做到顯著，而這也使得用戶很難立刻馬上意識到「這是一個可交互的元素」：
此外，彩云還梳理了新擬物化可以應用的范疇和場景，可以說非常貼心了。不過，這不是今天要說的重點。
Michal Malewicz，對，就是去年年底讓我們注意到新擬物化風格的這個小哥，他又搞事情了：他在油管和 Medium 上又預測了可能會流行的新設計風格：Glassmorphism。
顯而易見，Glassmorphism 這個詞是 Glass（玻璃）和 Skeumorphism（擬物化）的結合，我們姑且將其稱之為「玻璃擬物化設計」。
Malewicz 小哥對于這種風格特征歸結為4點：
簡單的來說，「玻璃擬物化」在某些方面和「新擬物化」是一脈相承的，但是它有著相對更加具體的視覺隱喻，也就是我們日常接觸的「玻璃」。
如果你和經常翻看 Dribbble 或者 Behance ，你會注意到有很多設計師在有意識地采用「玻璃擬物化」美學的設計。
比如這是 Figma 團隊的設計師 Rogie 所設計的小圖標
大家著迷于這種風格到底原因何在？
1、愉悅感
首先，當然是視覺愉悅感。
使用「玻璃擬物化」來設計的界面，由于毛玻璃的通透性，在有多個控件的情況下，呈現出一種獨特的「虛實結合」的美感。
2、層次感
來自 Paperpillar 團隊的 Ghani Pradita 設計的 UI 控件
用戶可以很清晰地感知到多個不同的層次，看不清楚但是可以透過「玻璃」的「背景層」，創造朦朧效果的「玻璃層」，前景的UI控件，這已經比原有的 UI 界面多了一層，當然，實際上如果你用的巧妙，可以讓層次更多但是協調地存在。
3、呈現語境
這是設計師 Ilham Maulana 為 Plainthing Studio 團隊所設計的網頁
有些東西應該是不言自明的。比如「我在哪」「我是從哪里來的」這種事情，可以透過「玻璃」看到的背景層就能夠很好地暗示出此刻的位置。
4、微妙高級
設計師 Ghulam Rasool 設計的 UI 范例
經過「玻璃層」處理之后的背景顯得非常柔和，無論是動態還是靜態的都不會影響前景元素的呈現。同時，位于前景的文本、色彩、UI 控件依然可以保證良好的可讀性。
在設計中間的「玻璃層」的時候，可能需要你控制好這個「微妙」的程度。不過不論怎樣，這種呈現方式都非常的雅致，甚至有那么一絲「詩意」存在。
那么，這種設計風格到底是如何被塑造出來的？如果要追根溯源，「玻璃擬物化」到底是從哪里來的？
老實說，玻璃擬物化，Glassmorphism，追根溯源還是在蘋果頭上。
我之前在《Mac 視覺史 vol.3：浴「水」重生的 Mac 視覺美學》這篇文章當中，曾詳細回顧了設計師 Cordell Ratzlaff 是在怎樣的背景之下，發掘并延展出了蘋果的整套 Aqua 視覺美學：
這種對于光影的追求也促使老競爭對手微軟做出了改變，很難說幾年后微軟在Windows Vista 上所推行的「Aero」（光）視覺風格不是從「Aqua」上衍生出來的：
而「Aero」這種視覺風格當中，就使用了非常引人矚目的玻璃的質感，只不過陰影的設計毫無疑問「參考學習」了同時期 Mac OS X 當中相對明顯的黑色投影。
只是這種設計風格經歷了 Windows 7 之后，一直在自家 MP3 播放器 Zune 上使用實驗性的設計得到了青睞，并逐漸普及到整個微軟系產品，甚至因此犧牲了同時期的社交手機產品 Kin：
值得注意的是，在 Kin 系列的界面當中，「玻璃」式的半透明元素是存在的，并且很明顯是延續自「Aero」美學，只是受限于屏幕分辨率（320×240 px，320×480 px），很難呈現出更多細節。
隨后，Windows Phone 誕生，Windows 8 問世，包豪斯十足的 Metro 視覺風格成為微軟的選擇。
不過在此過程中，還有一些更重要的事情：Android 和 iOS 全面擁護扁平化設計。全新的 iOS 系統當中，全新的通知系統會使用半透明材質，用來暗示用戶當前所處的環境：
這種對于毛玻璃材質的選擇，很大程度上和時任設計高級副總裁的喬納森艾維分不開——這是一個對于材質、場景、暗喻有著清晰認知和感知力的工業設計大師，而這一點也體現在他為 iOS 7 所制作的設計語言的介紹視頻當中。至于喬納森對于玻璃材質的迷戀我們可以回頭在聊。
值得一提的是，在 移動端 UI 界面當中，成體系地使用「玻璃」的隱喻，是從 iOS 7 開始的。但是 iOS 的設計美學是一個更加龐大的東西，真正的「文藝復興」應該是在 Windows 10。
之所以說是文藝復興，很大程度上是因為微軟設計團隊在2016年的時候開始構建的 Fluent Design 這套設計美學體系，而它所使用的核心設計隱喻是「Acrylic」，也就是亞克力，是從「Aero」繼承而來。
實際上，最初的 Windows 10 更多的是在設計體系和交互上花心思，「Acrylic」其實是在發布之后很久，大概2017 年的某次重要更新中加入的「新材質」。
相比于 Windows Vista/7 時代的 「Aero」，「Acrylic」更加具體，量化，功能性更強，美學上更加優雅，而在具體的實施上，微軟的 Fluent Design 和如今的「玻璃擬物化」更加接近，而近年來很多接近「玻璃擬物化」的設計，也和這種設計美學架構近似。
微軟的 Fluent Design 當中，背景和前景之間的「Acrylic」層，其實是由5個部分構成：
當然，使用這么多手段這也是盡可能讓最終的色調盡可能地在前景的 UI 當中，顯得自然不突兀。如果你想了解更多，可以看這里：
雖然 Fluent Design 并沒有如同最初大家所期待的一樣，像 Material Design 或者蘋果的 HIG 那樣成為一種極為主流、廣泛應用的設計系統，但是它隨著 Windows 10 在世界范圍內的普及而始終潛移默化地影響著整個設計領域。
一方面，在的 Windows 10 20H2 版本當中，從開始菜單到具體的 UI 界面當中，徹底將 Windows 8 時代 Metro 風格去掉了，扎眼的動態磁貼都用上了 Fluent Design 風格的毛玻璃效果：
另外一邊，的 macOS Big Sur 也在整個 UI 界面當中大規模使用了接近「玻璃擬物化」的半透明毛玻璃視覺效果，在系統自帶的 APP 當中尤其顯著：
而值得一提的是，macOS Big Sur 和當下的 iOS 14 在視覺美學上也保持著高度的一致，尤其是在系統的設計美學邏輯上是統一的：
這種主流操作系統的背書，「玻璃擬物化」的進一步推行和普及，無疑有著重要的影響。相比于看起來高級但是炫技多于實用性的「新擬物化」，「玻璃擬物化」這種風格在各大操作系統的踐行和驗證之下，實用性更強，視覺美學上也得到目前的操作系統的驗證。
相比于 iOS 14，macOS Big Sur 和 Windows 10 20H2，我們此刻所討論的「玻璃擬物化」在視覺效果上無疑是更加激進、強化的。
設計師 Malewicz 在他的文章當中對于這種設計風格有一個非常直觀的總結：
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
設計行業里幾乎沒有什么是保持不變的，如果有，那就應該是“堅持創新”這四個字，很多設計師覺得自己沒有亮眼的作品，或者老被客戶說設計沒新意，就是因為缺乏創造力，缺乏堅持創新的態度。所以，蔥爺今天給大家分享一波作品，看看人家是怎么打破常規、做出新意的。
注:文中圖片整理于網絡,如有侵權,請聯系刪除。
分享一波APP產品體驗日記，看看別人眼中的APP亮點是什么？不足處是什么？有哪些可以讓我們在工作中優化借鑒的呢？一起來看看產品體驗日記4.0吧～
越來越雜食了，開始膽敢加移動端外的產品體驗了，以后日常生活例子估計也能拿來湊湊數~
奧卡姆剃刀原理
微信轉賬提示金額數位這個功能其實出了蠻久，不過最近才發現一個小細節。就是百千萬這樣的位數提醒，只有超過千時才會出現，左圖500塊是不需要的，因為百位算日常生活非常常用的數位，用戶識別速度快。即使是小功能也要做到盡可能克制，如無必要，勿增實體。
緊跟熱點，保持觸覺
追熱點不僅僅是廣告媒體的事，設計師也應該保持對外界的關注?？梢赃m當留意貼合品牌調性的實時熱點將他們運用到產品中?！芭囊慌摹边@種輕松幽默的調性很符合開眼推送的整體感覺，用起來毫無違和感。偶爾能給用戶制造小驚喜，增加趣味性。
快速觸達，原路返回
在中文處點擊評論圖標，可以快速定位到底下的評論區，很好滿足了一部分瀏覽正文關鍵點同時看看其他用戶評論觀點的需求。再次點擊也能回到上次看到的位置繼續瀏覽動作。
調動用戶情緒
作為內容產品，文章也是內容生產不可缺的一部分。如何讓用戶生產高質量的內容，提高平臺內容質量。左圖評論發布的暗提示文案“優質評論將會被優先展示”，提醒了用戶用心組織評論的價值是會被優先展示，展示評論等于滿足了我們需要被“看見”的心理需求。
右圖如果用戶進行點贊，只要手速快，界面會隨著連續點贊次數的增加不斷變換動畫效果，各種表情蹦出和連續點擊次數如“48”會持續刺激用戶進行點擊，也使用戶點贊得到正向反饋，增強下次的點贊欲望。用過調動用戶情緒達到目的。
定制化內容
無論是feed流文章還是評論，用戶都可以關閉自己不喜歡的內容，甚至舉報！舉報機制如果僅讓平臺審核工作量巨大，通過用戶舉報再審核可以篩選掉很大部分，減少運營成本。而純粹因不喜歡關閉，可以給用戶貼標簽，使平臺推算更精準。不得不說國內的內容產品幾乎只讓我們看到自己感興趣和認同的觀點，時候讓我們活在的同溫層中。
差異化品牌元素
如今產品同質化嚴重，雖然戰略、范圍層能決定產品的差異性，可不是設計師能左右的部分?；貧w到日常工作中，差異性更多可以表現在界面表現和交互上。綠洲作為一個年輕群體的內容社交平臺，年輕、有趣是主要的用戶特性，結合自身品牌基因，將仙人掌和沙漠等其他相關元素運用到了界面的不同地方，增加了產品趣味性又強調了品牌感，跟其他產品拉開了差異。
分享動機
分享作為引流的其中一個手段，怎么引導用戶進行分享是每個產品想增張都需要思考的。這里分享他人的動態可以選擇生成海報，海報模板可以更換樣式排版，用戶可以根據自身人設選擇相應的分享海報風格，塑造人設。這滿足了用戶需要被看到甚至被認可的人性需求。表面上是分享一張海報，一款產品，實際是自我價值觀的曝光。
明星效應
利用明星的粉絲效應和熱點可以很好的吸引用戶，產生情感連接。通過不消小紅點不舒服的強迫行為讓用戶注意到明星的入駐，當然這可能產品甚至更高的范疇~（這里的小紅點被我按掉了手動補一個）
品牌感&差異化
一零零一是一款以貓為品牌形象的漫畫閱讀產品，除了常見的加載，空頁面和引導頁等地方出現小貓的品牌形象，很多頁面也用了同樣的視覺元素加強品牌感。多個地方出現的元素如何做到提現相同的品牌要素而不重復，這里主要提取了主形象的關鍵因素比如貓耳朵，貓爪，尾巴，毛線球等有辨識度的獨有視覺元素。
邏輯清晰，操作輕便
極簡匯率是一款貨幣換算的小工具。印象中這種工具邏輯可能是一個搜索框，輸入價格，搜索框左邊可以選擇貨幣，然后出來一些不用貨幣換算結果，比較普通。然鵝這里的邏輯是展示常用的6種貨幣，直接顯示他們的相對價值，因為一般用戶換算需求最多就幾種。要切換只需點擊對應的幣種比如RMB，下面即可輸入并實時顯示換算結果。
因為下方鍵盤常駐，沒有收起和展示的過程，整體上更直接也減少誤觸收起鍵盤的可能性。（說是誤觸因為沒有收起鍵盤的必要）右下角“交叉”點擊刪除最后一位，長按清空，細節也考慮得很周到。
元素的取舍
不同幣種切換可以通過右滑實現，即使用戶第一次使用，因為界面中沒有可切換幣種的按鈕或提示，但是切換又幾乎是一個必須的功能，IOS使用習慣者很可能會嘗試左右滑試圖找到切換功能。通過隱藏部分操作讓內容更聚焦在匯率換算上。
左邊界面勾選表示了選中的貨幣，返回按鈕變成了向右箭頭，暗示了界面之間的跳轉邏輯，每個元素都有意義。
操作慣性&錨定效應
Geist 是一款集冥想、腦力鍛煉、放松練習等放松身心的APP。新用戶一進入首先會看到左邊界面，通過連續回答幾個明知故問的問題（正常人應該都會選是），最后拋出是否想設置提醒，由于前面用戶已然形成了慣性，很可能讓用戶毫無察覺的設置了提醒功能~
其次當我體驗完一個小游戲，選擇關閉時，會有“優惠僅限一次”這種挑戰用戶損失厭惡心理的付費引導彈窗。值得一說的是仔細一看定價：一年費用398；終身才238？？？排除有錢任性的豪，用戶對產品的定價預期會首先被一年的398錨定，然后發現永久的238相比之下簡直過于良心。這種看似毫無意義的定價策略被用在日常生活的方方面面如餐牌上首先展示貴價的商品，使之后出現的低價顯得更加劃算。
精準定位用戶
網易課堂首次使用需要選擇感興趣的只是領域。雖然這種模式并不新鮮，不過最近看到做產品要，感覺有必要再強調一下?，F在算法和人工智能做的就是不斷給用戶貼標簽，然后不斷讓數據庫里的人更“真實”，從而讓用戶看到他想看的甚至幫用戶決定他需要什么。如果你在電商平臺搜索瑜伽墊，相關推薦是雞胸肉，這就是理解用戶。
交互層級思考
可以看到，左圖是內容的默認界面，底部有點贊，評論，分享，收藏四個功能，可以說是信息閱讀的標配功能。隨著用戶上滑時，為了一屏展示更多內容，同時提供沉浸式體驗，原來右側的三個功能分別隱藏和移到了界面的右上角（右圖）。收藏增加了用戶回訪的可能，分享則可能帶來用戶增張，所以都保留到右上方，唯獨評論雖然能增加內容熱度，但是用戶操作成本高，屬于較低頻操作，且如果放到右上角，不符合用戶預期~
沉浸式體驗
時間膠囊類似一種日記的變體，有點像小時候把自己的寶貝放一個地方藏起來多年以后再打開。有一種時光依舊的美好感覺，界面的配色除了一般日記產品的文藝感，還多了一種紙質的溫馨感。為了讓用戶相信這種美好的想像，里面的很多文案都讓人沉浸在對未來的憧憬和當下的珍惜里。
替用戶做決定
相信評價APP或者叫給APP打分都見過不少，這里直接將這種需要用戶思考的表述轉為：給我好評，不讓用戶啟動心理防線，紅色的愛心處理除了突出了評價功能的視覺，還暗示了好評這一潛移默化的概念。
數據可視化
Yahoo天氣跟一般天氣預報APP類似，首先視覺上用不同氣候的實物圖作為背景，數據表格則使用模糊的背景承載內容，比較有臨場感。每小時的天氣和氣溫排列成高低不同的豎向矩形，矩形的高度暗示了當時的溫度，從而將溫度具象地表現成視覺圖形更快速的進行識別?？梢钥焖俚亓私庖惶斓臍鉁刈兓头?，搭配根據時間點變化的天氣Icon（月亮和太陽），清晰直觀。
預判用戶行為
Halo是一款攝影和壁紙分享應用，每天都會有官方和用戶自發更新的圖像內容。在用戶分享的內容中，用戶可以通過切換頂部的：原圖和壁紙，模擬用作手機壁紙的效果，右邊的小眼睛還給壁紙效果中添加時間或者應用APP的實際預覽效果。清晰的判斷出用戶將要進行的行為，減少了重新到圖庫設置背景逐張比對效果的時間。
降低評論成本
評論作為內容產品常見的操作之一，其成本相對點贊，收藏來說比較高，需要用戶組織語言，輸入文字或者表情。為了增加評論的熱度，預設留言讓用戶自行選擇可大大降低評論的成本和心理負擔。通過搖篩子的方式，暗示評論將是隨機、不可預測的，通過不確定增加了用戶的好奇心。不過需要設置豐富的評論范本，才不至于一篇內容下看起來都是復制粘貼的發言~
制造稀缺
現實生活中，資源有限，東西不夠。同樣的產品，越是稀缺價格越高。本質是信息不對稱，就像紅酒其實大部分用戶不在乎或者分辨不出好壞，但是默認貴的即是稀缺和好的。通過制造稀缺引起緊迫感，給用戶造成機會難得，不容錯過的錯覺。
智能化降噪
說到智能化和降噪這兩個詞你一定不陌生，不就是AI和以內容為中心嗎？可是如果將他們合并起來看，其實設計可以有更多思考的空間。谷歌瀏覽器的首頁常用網站快捷入口，當鼠標滑到某個入口時，僅僅顯示獲取焦點狀態，需要稍微過一秒左右，獲取焦點狀態右上角才會出現刪除快捷入口按鈕。絕大多數用戶的使用場景是打開瀏覽器，在首頁快速點擊快捷入口進入對應網站，一般不容易注意到刪除功能的ICON，當他們真正需要的時候，圖標自然的出現了，機器仿佛會“觀察”用戶，再次驗證了好的設計不會讓用戶注意到~
考慮特殊場景
很多產品設計的時候，在用戶使用場景上的思考可能都會有一定的缺失。用戶研究總是理所當然的按自己的理想使用場景考慮，與真實的用戶場景脫節。這里語音播放的時候檢測到用戶的音量設置可能影響收聽，友好地提示了用戶，否則很可能讓用戶誤以為沒操作成功或功能出現問題，減少了使用障礙，非常貼心。
原文地址：站酷
作者：什么東東o
藍藍設計的小編 http://www.syprn.cn
