序言
UI設計作為一個相對新興的專業設計門類，目前既沒有歸於平面設計也沒有官宣獨立門派，甚至還沒有進到設計史裡。我們學設計學藝術有『近代設計史』『世界美術史』『中國美術史』等，既然UI設計已經成為了一個設計門類我覺得了解它的歷史是很有必要的，瞭解來龍去脈也可以很好的幫助我們理解設計去做更好的作品。
互聯網在2010年左右開始爆發，精確的說是移動互聯網的爆發。上網從坐著在電腦前到隨時隨地手機上網，改變的不僅是我們上網的方式，改變更多的是生活方式、商業模式，還帶來一個行業的興起-UI設計師。
UI設計其實早就有這個行業的存在。1969年互聯網誕生，到1973施樂公司設計了首次使用桌面比擬的個人電腦『奧托』的問世。1983年蘋果計算機公司推出Apple Lisa個人計算機，是全球第一款搭載圖形用戶界面（GUI）的個人計算機（施樂的奧托和蘋果的Lisa究竟哪個是真正意義上第一臺搭載GUI的電腦有待進一步考證），到現在UI設計其實一直都存在。2000年以前國內的UI設計剛開始萌芽，但當時做UI等於做平面設計。
施樂公司奧托
在我大三的時候第一次接觸到了UI設計，然後就從平面漸漸轉到了UI設計，並且畢業進入了百度從事了UI設計的工作。由於近些年UI設計的爆火和人員需求的持續，越來越多的人想從事這個行業，也就催生了很多院校開設相應的專業，和越來越多的培訓機構。
最近兩年，尤其是2018年，好多公司歷經了市場的篩選和資本的洗禮很多互聯網公司退出了舞臺，一部分小企業走對了方向異軍突起。市場格局發生了變化，從而對UI設計師的供需也發生了改變。首先是現在各個大廠紛紛在縮進招人名額，縮減員工人數，逐漸進入人員飽和狀態。同時隨著市場的完善，和VR、AI等技術的成熟對設計師的質量越來越高，複合性設計人才逐漸成為了趨勢（關於複合型設計師可以關注之前的文章《要做一個什麼樣的UI設計師，才能更好的發展？》）同時湧入的設計師越來越多，所以這個行業編的越來越嚴峻。
言歸正傳繼續聊UI設計的歷史。UI（User Interface）泛指用戶的操作界面，包含移動APP，網頁，智能穿戴設備等的可視、非可視的操作區域，目前UI設計主要指界面的樣式，美觀程度。
這篇文章我將以時間為順序，以設備界面和網頁設計語言為兩個線索穿插敘述。
一、萌芽時代
1983年蘋果的Lisa電腦，1984年蘋果的麥金塔個人電腦搭載的SystemSoftware系統（mac系統的前身，至7.5.1正式改名為Mac OS（麥金塔操作系統）。Mac OS至今已經推出了十代。蘋果宣佈將Mac OS X更名為OS X）我個人理解將『Lisa』的問世作為『UI設計』的開端，因為已經有意識的為為用戶在用戶體驗上在屏幕上進行有針對的設計。
1985年微軟退出的Windows1.0操作系統，1985年6月由俄羅斯人阿列克思·帕基特諾夫發明的俄羅斯方塊。這些都是早期的UI設計，那時的UI設計不像現在這樣百花齊放千奇百怪，基本都是在系統默認頁面上加以設計，更多的是在操作體驗上進行更多的改革，比如蘋果創造的文件夾拖動、微軟床創造的『開始按鈕』等。不過當時蘋果在UI上還是做了很多超前的設計，比如系統嵌套初默認字體以外的字體，一改單一顏色的屏幕加入了色彩等。為後來UI的發展奠定了基礎。
Windows 1.0 （1985）
1983 apple Lisa
1985 俄羅斯方塊
由於當時互聯網還不是很發達，所以這些界面基本全是電腦原生自帶的頁面，所以當時UI設計並不是一個獨立的行業，UI設計的工作基本都是電腦工程師順帶做出來。
當時雖然有了Mac和windows的系統，可是畢竟沒有普及。大多數的電腦顯示屏僅能顯示單色的像素。因此當時的網頁設計是“極簡風”，沒有圖像，只有單色像素風格的純文字，Web Design僅僅意味著符號+製表（Tab鍵）的排列組合。
二、擬物化時代
1990年微軟的windows3.0已經開始有了『浮雕、陰影』的頁面元素，擬物化的萌芽已經出現。
1995年微軟推出的windows95應該我們認識裡最開始電腦界面的模樣，95的界面浮雕凸起、凹陷等效果，包括文件夾窗口的凹陷，把模擬真實物理狀態和操作下壓釋放的物理效果做到了極致。不過所謂微軟的擬物一致沒有在質感和材質上進行深挖，只是在體積、光影上進行了應用。
1995年在網頁代碼中誕生了JavaScript
JavaScript 的出現補足了尚且原始的HTML。不過它處於整個網頁佈局的頂層並且需要單獨加載。很多時候它僅僅被懶惰的開發者用作一個簡單的補丁，但如果使用得當，JS可以非常強大。JavaScript 可以解決HTML一些侷限性，比如，需要一個彈提示，這時就需要JS來實現了。那時背景圖像、GIF動畫、閃字、計數器等工具迅速成為網頁必須的噱頭。給UI在網頁中帶來了更多的可能性
1996年Flash的出現
作為一門新技術，Flash為網頁開發者/設計師帶來了前所未有的自由，它打破了之前網頁設計所固有的限制。設計師在設計形狀、佈局、互動以及一些很棒很弦的動畫都可以在這一個工具上執行，完成後只是一個單獨的文件輸出，並能顯示在瀏覽器中。用戶瀏覽它時需要安裝插件並等待FLASH加載完成後方可瀏覽。
不幸的是，這種設計並不開放，也不利於搜索，還需要消耗計算機大量的運算能力。2007年，當蘋果發佈他們的第一臺iPhone的時候，就決定徹底放棄Flash，也正是在這個時候，Flash開始走下坡路——至少在網頁設計領域。
1998年CSS的出現
CSS稱為 層疊樣式表（Cascading Style Sheets）。差不多是在Flash崛起的同時，一種更好的網頁結構化設計工具CSS誕生。CSS的基本概念是將網頁內容的樣式分離，所以網頁的外觀和格式等屬性將會在CSS中被定義，但內容依然保留在HTML中。
CSS的第一個版本很不靈活，但最大問題是瀏覽器的兼容性，不同瀏覽器對CSS支持不一樣，這個花了好幾年時間才得到改進。需要明確的是CSS不是一個程序言語(coding language)，是一個聲明性的語言。
蘋果在2000年之前界面風格和微軟如出一轍，一致在微軟的陰影下基本沒有亮點。
但是2000年9月蘋果發佈了由柯戴爾·瑞茨拉夫(Cordell Ratzlaff) 主持設計的全新用戶界面Aqua（Aqua是Mac OS X的GUI商標名稱）我們普遍認知的擬物化正式登上歷史舞臺。
隨後iphone的ios系統也延用了這種設計語言，並且真正的發揚光大。從此進入了擬物化長達13年的視覺統治，包括WinXP和Win7的問世在設計界也沒有撼動擬物化設計地位。知道2013年蘋果發佈了IOS7才自己打破了自己視覺語言的統治。
2001年微軟發佈windowsXP
緊隨蘋果的Aqua微軟發佈了跨時新世紀影響了電腦頁面設計足足15年的XP系統，操作系統中最長壽的長者。Windows XP那著名的桌面——位於美國加州納帕的一座綠色山丘——可以說是這個系統最具個性的特色之一。這個全新的用戶界面可以給人一種友好的感覺，讓第一次進入系統的用戶感到格外清新。界面相比之前的界面更加清新、絢麗、柔和。色彩方便更加協調豐富，頁面元素效果更加柔和，一改之前生硬的浮雕樣式，並且在操作和體驗上更加順暢。Windows XP加入與界面整合的主題機制後，自定義主題一下子就火了起來。XP強化了主題的概念，你可以在網絡上尋找無數的系統主題，這種專為自己打造的個性感讓Windows XP變得更加流行。對後續的win7甚至win10都產生了影響。
2008年IphoneOS/安卓發佈
2008年蘋果發佈了自己的手機系統IphoneOS（後改名iOS），和此前與配有觸筆的 Newton 不同，iPhone 是圍繞著一面高分辨率的大觸摸屏設計的。iPhone OS（後來更名為 iOS）擁有全新的基於 OS X 的用戶界面，按鍵設計與 Aqua 的相同，列表滾動與 iPod 的相似。這個界面風格決定後來5年移動互聯網的UI設計方向。
同年另一個在以後的市場中和iOS評分天下的手機系統發佈，那就是Google的安卓系統。
安卓系統在誕生初期和iOS的風格非常相似，所以在Material Design發佈之前就不單獨提安卓了。
2007年蘋果發佈OS X 10.5 Leopard豹
2007年10月發佈，用戶界面上改進幅度比較大的一個版本，雖然基本的界面仍為Aqua和其糖果滾動條，但新加入了一些鉑灰色和藍色，另外重新設計的3D Dock和更多的動畫交互使得新界面看上去3D效果更強，此外還改進了Finder、半透明菜單條並新增了最初只用於iTunes的Cover Flow界面。
整體來說這一版本的界面相比之前有了翻天覆地的變化。
2007年MOBILE——柵格和框架
移動端網頁本身就是一個挑戰，除了各種不同設備對應不同尺寸的佈局，它的內容應該和小屏幕上的相同或是單獨剝離出來？是否添加廣告到小屏幕上？訪問速度也是問題，因為內容太大，訪客瀏覽網頁慢、流量增加，從而成本也增加。
第一個重大的改進是柵格系統的出現。經過摸索，960柵格系統最終勝出，經典的12欄柵格被設計師們廣泛的接納，甚至成為許多設計師最常用的設計工具。接下來，各種常見的設計元素諸如表格、導航、按鈕被標準化，打包成為可複用的套件，這基本上就構成了視覺元素庫，其中還納入了常見的代碼。其中最典型的代表就是 Bootstrap 和 Foundation ，它們也使得網站和APP之間界限逐漸模糊。
2009年Windows7
2009年也是微軟發佈Windows7
微軟發佈了Windows7，也是革命性的一個系統。相比XP Win7界面更加清爽、清晰。並且加強了透明的樣式設計，為Win10亞格力得設計語言奠定了設計語言基礎。
此後蘋果先後發佈了『獅子』『美洲獅』『 Mavericks』等系統，在UI歷史上都有很大的價值，只不過都是在Aqua基礎上進行的優化
2010年響應式網頁設計
驚才絕豔的設計師Ethan Marcotte決定挑戰傳統的網頁設計，它讓網頁在內容不變的前提下，佈局隨著窗口和屏幕的變化而變化，並且將這種設計命名為響應式網頁設計（Responsive Web Design）。網頁設計師依然只需要HTML和CSS就可以實現這種功能，不得不承認這種設計理念非常超前。不過大家對於響應式設計依然有些許誤解。對於設計師而言，響應式設計意味著為設計許多不同的佈局。對於用戶而言，響應式設計就意味著這個網頁可以在手機上完美瀏覽。對於開發者而言，響應式設計意味著如何控制好網站圖片應付移動端和桌面端，在不同情形和語義下，擁有良好的下載速度和呈現效果，等等。簡而言之，就是一個網站能在任何情況下良好展現。至少在這一點上，所有人能達成共識。
三、扁平化時代
2010年微軟 推出他的第一代智能手機 Windows Phone 7，這可以說是扁平化設計第一次在資訊產品上向世人展現其樣貌，使用簡單的方格狀色塊與無襯線字體的界面，圖標也不再以擬物化呈現，而是去除了細節與陰影。
Microsoft 把這種界面稱為「Metro UI」（後來因為和德國零售業龍頭 Metro AG 有衝突而改名叫 Modern UI），之後便開始整合到公司旗下的產品，如 Xbox 360 和 Office 系列軟件，2012年更是使用在 Windows 8 的動態磚上。
2011同時安卓3.0（專屬用於平板電腦的系統）和4.0系統也開始有了扁平化的趨勢
2013年顛覆人類視覺的設計iOS7
由喬納森伊夫主持設計的iOS7一發布就引起設計界和科技界的震盪，摒棄了之前所有的擬物化設計，去掉了投影、去掉了機理，出現了全新的扁平化設計，加入了毛玻璃的理念和設計。同時產生了及其，甚至前所未有對設計的影響，後期出現Material Design和Win10亞格力無不和iOS7有關。
2014年Mac電腦的變革
iOS7歷經了一年的發佈，蘋果發佈了又一次震驚世界的OS X 10.10 Yosemite優勝美地。屆時蘋果所有產品的UI界面全部蛻變成了扁平化設計。
從而提升了移動互聯網性能和體驗，再一次促進了移動互聯網的飛速發展。同時扁平化設計的對內存損耗大大降低，設計成本和效率大大提升，也讓更多的APP和網頁設計紛紛效仿，從而將互聯網設計徹底顛覆。
2014年出現了足以抗衡蘋果設計語言的Google Material Design
2014年的夏天，Google正式發佈了Android5.0與全新的設計語言——Material Design。基於扁平化設計，加入半擬物化3D空間，著重強調了光影的仿物理化的設計語言。同時強調了模擬真是物理運曲線的動畫效果，進而引發了一種動畫設計語言的大火-Motion動畫。又一次影響大眾得設計語言。隨後大眾的設計語言慢慢融合了iOS和Material Design得設計語言。
網頁編寫技術的進一步升級，為UI設計帶來更多的空間和可能性。新誕生的概念正在推動網頁設計。CSS中新誕生的屬性，諸如vh和vw（viewport height 與 width），就使得網頁元素的位置控制更加靈活自由，一次性解決了設計師糾結多年的頑疾。作為CSS一部分的Flexbox則是另一個新事物，它可以快速創建佈局，輕鬆修改屬性而無需編寫過多代碼。
2015將是前端框架相互借鑑相互融合的一年，隨著webcomponent的落地，大家都在向標準靠近。實際上所謂的MVVM框架的關鍵技術就一個：數據與視圖的綁定。在Angular/polymer/knockout/vue/avalon 中，這項技術的實現又可以拆分成兩個關鍵點：模板分析和數據監測。而 React 本質上只是View（視圖層），它是Facebook所開發的JavaScript框架，它的唯一目標就是構建高性能的用戶接口。開發React就是為了解決其他JavaScript框架都未能解決的一個問題-高效地渲染大型數據集。它採用了虛擬文檔對象模型(DOM)和拼接機制，這樣，每一次對網頁做了更改後，React就只更新與更改相關的部分，而不需要重新對整個站點進行渲染。
四、百花齊放
2010年小米的米UI
2012年魅族flyme
2014年錘子SmartisanOS
2017年Airbnb Desgin
世界UI設計風格在微軟、Google、蘋果三家行業巨頭的影響下進入了百花齊放、百家爭鳴的環境。值得一提的是SmartisanOS和Airbnb Desgin兩家設計語言的出現。
SmartisanOS
錘子科技14年推出了SmartisanOS，發佈之後又引起了設計界和科技家的激烈討論，逆趨勢的回頭來做擬物化，而且擬物化的很徹底，並且重新二次繪製各種軟件的icon，可見老羅對擬物化的偏執。
暫且不說錘子推出的擬物化設計是否好看，是否順應趨勢，至少我們看到了不一樣的設計價值觀，沒有出現完全趨炎附勢的設計。期間老羅還推出了各式各樣有意思的體驗升級的交互模式，18年推出了全面屏的交互UI模式，這種探索的精神是我們設計師真正要學習的地方。設計是依附在產品和商業上才能體現其價值，但是我們設計師在專業角度上也不能僅靠商業的成功評價一個設計的好壞和成功與否。
Airbnb Desgin
17、18年爆火的『傻、大、黑』大多數人都覺得出自iOS11，其實這種設計語言是2017年Airbnb Design發佈的，並且在Airbnb APP上加以運用。同時Airbnb也發佈了一款造福軟件業的應用程式動畫工具 Lottie ，提供 iOS 、 Android 和 React Native 框架的動畫文件庫，幫助開發者更容易在原生應用程式中加上動畫。有了 Lottie ，設計師在 After Effects 設計完動畫後，只需透過After Effects的擴充套件 Bodymovin 將動畫轉成 JSON 檔，再使用 Lottie 渲染JSON檔，不用重寫程式、便可以直接將動畫套用於應用程式中。我們在日常設計中現在就用Lottie只做動效，真的非常好用。
近些年在UI設計中更多的風格蜂擁而至，故障風、孟斐斯風格、C4d 3D、2.5風、簡約日本風格等。
百家爭鳴的時期對每個設計師都很有機會，也具有很大的挑戰性。作為設計師的我們一定要把握當下的趨勢，並且具有前瞻性。這篇UI設計歷史的文章只是對UI設計行業一個粗略的總結，目的是讓大家回過頭看一看歷史的發展，俗話是以史為鑑，是為了更好的為以後發展做出前瞻性的探索。
參考文檔：
簡書《UI的發展史和UI設計師的界面》
設計之家《微軟WINDOWS界面演化史》
極客《Material Design》
Sik《網頁簡史》
閱讀更多 二四二七設計 的文章
