UI發展史

UI設計做爲一個相對新興的專業設計門類，UI（UserInterface）泛指用戶的操做界面，包含移動APP，網頁，智能穿戴設備等的可視、非可視的操做區域，目前UI設計主要指界面的樣式，美觀程度。UI設計目前既沒有歸於平面設計也沒有官宣獨立門派，甚至尚未進到設計史裏。下面咱們將以時間爲順序，以設備界面和網頁設計語言爲兩個線索穿插敘述一下UI發展歷程。

一.萌芽時代

1983年蘋果的Lisa電腦，1984年蘋果的麥金塔我的電腦搭載的SystemSoftware系統（mac系統的前身，至7.5.1正式更名爲Mac OS（麥金塔操做系統）。Mac OS至今已經推出了十代。蘋果宣佈將Mac OS X改名爲OSX，「Lisa」的問世能夠做爲「UI設計」的開端，由於已經有意識的爲爲用戶在用戶體驗上在屏幕上進行有針對的設計。

apple Lisa（1983 ）

Mac早期操做界面（1984）

1985年微軟推出的Windows1.0操做系統，1985年6月由俄羅斯人阿列克思·帕基特諾夫發明的俄羅斯方塊。這些都是早期的UI設計，那時的UI設計基本都是在系統默認頁面上加以設計，更多的是在操做體驗上進行更多的改革，好比蘋果創造的文件夾拖動、微軟創造的「開始按鈕」等。不過當時蘋果在UI上仍是作了不少超前的設計，好比系統嵌入了除默認字體之外的字體，一改單一顏色的屏幕加入了色彩等。爲後來UI的發展奠基了基礎。

Windows1.0（1985）

俄羅斯方塊（1985）

因爲二十世紀八十年代的互聯網還不是很發達，因此那時的界面基本全是電腦原生自帶的頁面，因此當時UI設計並無一個確切的行業，UI設計的工做基本都是電腦工程師順帶作出來。

當時雖然有了Mac和windows的系統，但是畢竟沒有普及。大多數的電腦顯示屏僅能顯示單色的像素。所以當時的網頁設計是「極簡風」，沒有圖像，只有單色像素風格的純文字，Web Design僅僅意味着符號+製表（Tab鍵）的排列組合。

二.擬物化時代

1990年微軟推出的Windows3.0開始有了「浮雕、陰影」的頁面元素，能夠視爲擬物化的開端

1995年微軟推出的windows95應該是咱們認識裏最開始電腦界面的模樣，95的界面浮雕凸起、凹陷等效果，包括文件夾窗口的凹陷，把模擬真實物理狀態和操做下壓釋放的物理效果作到了極致。不過所謂微軟的擬物一致沒有在質感和材質上進行深挖，只是在體積、光影上進行了應用。

1995年在網頁代碼中誕生了JavaScript，JavaScript，能夠解決HTML一些侷限性，好比，須要一個彈提示，這時就須要JS來實現了。那時背景圖像、GIF動畫、閃字、計數器等工具迅速成爲網頁必須的噱頭。給UI在網頁中帶來了更多的可能性。

1996年Flash出現，它使設計師在設計形狀、佈局、互動以及一些很棒很弦的動畫均可以在這一個工具上執行，完成後只是一個單獨的文件輸出，並能顯示在瀏覽器中。但用戶瀏覽它時須要安裝插件並等待FLASH加載完成後方可瀏覽。因爲它須要消耗計算機大量的運算能力，2007年，當蘋果發佈他們的第一臺iPhone的時候，就決定完全放棄Flash，也正是在這個時候，Flash開始走下坡路——至少在網頁設計領域。

1998年CSS出現，CSS稱爲 層疊樣式表（Cascading Style Sheets）。差很少是在Flash崛起的同時，一種更好的網頁結構化設計工具CSS誕生。CSS的基本概念是將網頁內容的樣式分離，因此網頁的外觀和格式等屬性將會在CSS中被定義，但內容依然保留在HTML中。

蘋果在2000年以前界面風格和微軟一模一樣，一致在微軟的陰影下基本沒有亮點。

可是2000年9月蘋果發佈了由柯戴爾·瑞茨拉夫(Cordell Ratzlaff) 主持設計的全新用戶界面Aqua（Aqua是Mac OS X的GUI商標名稱）自此擬物化正式登上歷史舞臺。

隨後iphone的ios系統也延用了這種設計語言，而且真正的發揚光大。今後進入了擬物化長達13年的視覺統治，包括WinXP和Win7的問世在設計界也沒有撼動擬物化設計地位。直到2013年蘋果發佈了IOS7才本身打破了本身視覺語言的統治。

三.扁平化時代

2013年顛覆人類視覺的設計iOS7

由喬納森伊夫主持設計的iOS7一發布就引發設計界和科技界的震盪，摒棄了以前全部的擬物化設計，去掉了投影、去掉了機理，出現了全新的扁平化設計，加入了毛玻璃的設計理念。同時對設計產生了史無前例的影響，後期出現Material Design和Win10亞格力無不和iOS7有關。UI設計自此進入扁平化的新紀元。

2014年Mac電腦的變革

iOS7歷經了一年的發佈，蘋果發佈了又一次震驚世界的OS X 10.10 Yosemite優勝美地。屆時蘋果全部產品的UI界面所有蛻變成了扁平化設計。從而提高了移動互聯網性能和體驗，再一次促進了移動互聯網的飛速發展。同時扁平化設計的對內存損耗大大下降，設計成本和效率大大提高，也讓更多的APP和網頁設計紛紛效仿，從而將互聯網設計完全顛覆。

四.百家爭鳴

如今米ui、魅族flyme、錘子SmartisanOS、Airbnb Desgin等世界UI設計風格在微軟、Google、蘋果三家行業巨頭的影響下進入了百花齊放、百家爭鳴的環境。值得一提的是SmartisanOS和Airbnb Desgin兩家設計語言的出現。

SmartisanOS

錘子科技14年推出了SmartisanOS，發佈以後又引發了設計界和科技家的激烈討論，逆趨勢的回頭來作擬物化，並且擬物化的很完全，而且從新二次繪製各類軟件的icon，可見老羅對擬物化的偏執。

Airbnb Desgin

1七、18年爆火的『傻、大、黑』大多數人都以爲出自iOS11，其實這種設計語言是2017年Airbnb Design發佈的，而且在Airbnb APP上加以運用。同時Airbnb也發佈了一款造福軟件業的應用程式動畫工具 Lottie ，提供 iOS 、 Android 和 React Native 框架的動畫文件庫，幫助開發者更容易在原生應用程式中加上動畫。

近些年在UI設計中更多的風格蜂擁而至，故障風、孟斐斯風格、C4d 3D、2.5風、簡約日本風格等。

五.UI設計的大趨勢

1減負設計

少便是多！在設計中作減法一直都能有不錯的效果，目前在全部設計領域都看到或多或少這類負空間的使用，而將來幾年將更大量的使用於網頁設計和應用程序設計中。

2.定製插畫

插圖一直是近幾年中不斷增加的主要設計趨勢。在2019年從登錄i頁面到整個網站，定製插圖正在逐漸風靡整個ui設計行業。

3.情感化圖標

好的圖標能夠天然的把用戶的視線，引到須要重點關注的信息或功能上。同時也能天然地將與服務相關聯的信息，透過良好的視覺層次結構展示出來。 同時搭配好使人會心一笑的情感化設計，就更完美了。

4.動效

動效設計早已經是UI設計行業中不可或缺的展示手段，試着在你的移動產品或網頁設計裏，加入一些順暢的平滑過渡或漂亮的懸停效果，可讓你的設計更加地吸引人。

5.微交互

微交互效果是移動端上，經常使用於建立微妙視覺效果的小動畫。用戶愈來愈關注這些微觀互動。

6.柵格突破與元素重疊

網頁設計中柵格突破在2018年底開始盛行，能夠預見在2019年能夠看到更多結合柵格突破的方式，與元素重疊的網頁設計組合，但在使用時，記得始終要牢記移動端的體驗！

7.3D插圖