UI設(shè)計的發(fā)展史？客觀了解一下在歷史上發(fā)展的過程?

時間：2024-02-12 21:25:01 | 來源：網(wǎng)站運營

時間：2024-02-12 21:25:01 來源：網(wǎng)站運營

UI設(shè)計的發(fā)展史？客觀了解一下在歷史上發(fā)展的過程?：作為一個相對新興的專業(yè)設(shè)計門類，UI（UserInterface）泛指用戶的操作界面，包含移動APP，網(wǎng)頁，智能穿戴設(shè)備等的可視、非可視的操作區(qū)域，目前UI設(shè)計主要指界面的樣式，美觀程度。UI設(shè)計目前既沒有歸于平面設(shè)計也沒有官宣獨立門派，甚至還沒有進到設(shè)計史里。下面我們將以時間為順序，以設(shè)備界面和網(wǎng)頁設(shè)計語言為兩個線索穿插敘述一下UI發(fā)展歷程。

一.萌芽時代

1983年蘋果的Lisa電腦，1984年蘋果的麥金塔個人電腦搭載的SystemSoftware系統(tǒng)（mac系統(tǒng)的前身，至7.5.1正式改名為Mac OS（麥金塔操作系統(tǒng)）。Mac OS至今已經(jīng)推出了十代。蘋果宣布將Mac OS X更名為OSX，“Lisa”的問世可以作為“UI設(shè)計”的開端，因為已經(jīng)有意識的為為用戶在用戶體驗上在屏幕上進行有針對的設(shè)計。

apple Lisa（1983 ）

Mac早期操作界面（1984）

1985年微軟推出的Windows1.0操作系統(tǒng)，1985年6月由俄羅斯人阿列克思·帕基特諾夫發(fā)明的俄羅斯方塊。這些都是早期的UI設(shè)計，那時的UI設(shè)計基本都是在系統(tǒng)默認頁面上加以設(shè)計，更多的是在操作體驗上進行更多的改革，比如蘋果創(chuàng)造的文件夾拖動、微軟創(chuàng)造的“開始按鈕”等。不過當(dāng)時蘋果在UI上還是做了很多超前的設(shè)計，比如系統(tǒng)嵌入了除默認字體以外的字體，一改單一顏色的屏幕加入了色彩等。為后來UI的發(fā)展奠定了基礎(chǔ)。

Windows1.0（1985）

俄羅斯方塊（1985）

由于二十世紀(jì)八十年代的互聯(lián)網(wǎng)還不是很發(fā)達，所以那時的界面基本全是電腦原生自帶的頁面，所以當(dāng)時UI設(shè)計并沒有一個確切的行業(yè)，UI設(shè)計的工作基本都是電腦工程師順帶做出來。

當(dāng)時雖然有了Mac和windows的系統(tǒng)，可是畢竟沒有普及。大多數(shù)的電腦顯示屏僅能顯示單色的像素。因此當(dāng)時的網(wǎng)頁設(shè)計是“極簡風(fēng)”，沒有圖像，只有單色像素風(fēng)格的純文字，Web Design僅僅意味著符號+制表（Tab鍵）的排列組合。

二.擬物化時代

1990年微軟推出的Windows3.0開始有了“浮雕、陰影”的頁面元素，可以視為擬物化的開端

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

1995年在網(wǎng)頁代碼中誕生了JavaScript，JavaScript，可以解決HTML一些局限性，比如，需要一個彈提示，這時就需要JS來實現(xiàn)了。那時背景圖像、GIF動畫、閃字、計數(shù)器等工具迅速成為網(wǎng)頁必須的噱頭。給UI在網(wǎng)頁中帶來了更多的可能性。

1996年Flash出現(xiàn)，它使設(shè)計師在設(shè)計形狀、布局、互動以及一些很棒很弦的動畫都可以在這一個工具上執(zhí)行，完成后只是一個單獨的文件輸出，并能顯示在瀏覽器中。但用戶瀏覽它時需要安裝插件并等待FLASH加載完成后方可瀏覽。由于它需要消耗計算機大量的運算能力，2007年，當(dāng)蘋果發(fā)布他們的第一臺iPhone的時候，就決定徹底放棄Flash，也正是在這個時候，F(xiàn)lash開始走下坡路——至少在網(wǎng)頁設(shè)計領(lǐng)域。

1998年CSS出現(xiàn)，CSS稱為 層疊樣式表（Cascading Style Sheets）。差不多是在Flash崛起的同時，一種更好的網(wǎng)頁結(jié)構(gòu)化設(shè)計工具CSS誕生。CSS的基本概念是將網(wǎng)頁內(nèi)容的樣式分離，所以網(wǎng)頁的外觀和格式等屬性將會在CSS中被定義，但內(nèi)容依然保留在HTML中。

蘋果在2000年之前界面風(fēng)格和微軟如出一轍，一致在微軟的陰影下基本沒有亮點。

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

隨后iphone的ios系統(tǒng)也延用了這種設(shè)計語言，并且真正的發(fā)揚光大。從此進入了擬物化長達13年的視覺統(tǒng)治，包括WinXP和Win7的問世在設(shè)計界也沒有撼動擬物化設(shè)計地位。直到2013年蘋果發(fā)布了IOS7才自己打破了自己視覺語言的統(tǒng)治。

三.扁平化時代

2013年顛覆人類視覺的設(shè)計iOS7

由喬納森伊夫主持設(shè)計的iOS7一發(fā)布就引起設(shè)計界和科技界的震蕩，摒棄了之前所有的擬物化設(shè)計，去掉了投影、去掉了機理，出現(xiàn)了全新的扁平化設(shè)計，加入了毛玻璃的設(shè)計理念。同時對設(shè)計產(chǎn)生了前所未有的影響，后期出現(xiàn)Material Design和Win10亞格力無不和iOS7有關(guān)。UI設(shè)計自此進入扁平化的新紀(jì)元。

2014年Mac電腦的變革

iOS7歷經(jīng)了一年的發(fā)布，蘋果發(fā)布了又一次震驚世界的OS X 10.10 Yosemite優(yōu)勝美地。屆時蘋果所有產(chǎn)品的UI界面全部蛻變成了扁平化設(shè)計。從而提升了移動互聯(lián)網(wǎng)性能和體驗，再一次促進了移動互聯(lián)網(wǎng)的飛速發(fā)展。同時扁平化設(shè)計的對內(nèi)存損耗大大降低，設(shè)計成本和效率大大提升，也讓更多的APP和網(wǎng)頁設(shè)計紛紛效仿，從而將互聯(lián)網(wǎng)設(shè)計徹底顛覆。

四.百家爭鳴

現(xiàn)在米ui、魅族flyme、錘子SmartisanOS、Airbnb Desgin等世界UI設(shè)計風(fēng)格在微軟、Google、蘋果三家行業(yè)巨頭的影響下進入了百花齊放、百家爭鳴的環(huán)境。值得一提的是SmartisanOS和Airbnb Desgin兩家設(shè)計語言的出現(xiàn)。

SmartisanOS

錘子科技14年推出了SmartisanOS，發(fā)布之后又引起了設(shè)計界和科技家的激烈討論，逆趨勢的回頭來做擬物化，而且擬物化的很徹底，并且重新二次繪制各種軟件的icon，可見老羅對擬物化的偏執(zhí)。

Airbnb Desgin

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

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