1.1　UI設計發展史

UI設計是指對網站的人機交互、操作邏輯、界面美觀的整體設計。好的UI設計不僅可以使軟件具有鮮明的個性和獨特的品位，還可以使軟件的操作變得舒適、簡單和靈活，充分展現網站的定位和特點。

網頁設計可分為兩個部分：編碼設計與UI設計。編碼設計就是用戶熟知的代碼編譯程序，目的是完成網站的功能建設。UI設計則是網頁界面的設計與制作，目的是建設風格和主題，如圖1-1所示。

圖1-1

目前在國內，UI已經被普遍大眾所熟知。用戶們經常可以看到一些招聘廣告上寫著“招聘界面美工、界面美術設計師”等，如圖1-2所示。

圖1-2

這同時表明大眾對UI的理解還停留在美術設計方面，缺乏對交互設計重要性的理解，認為UI的工作只是描邊畫線；另一方面，軟件開發過程存在重技術而輕應用的現象，如圖1-3所示。

圖1-3

提示：許多人認為軟件產品的核心是技術，而UI僅僅是次要的輔助，這點在人員比例與待遇上可以表現出來。一般互聯網公司產品人員、技術人員、UI人員的配備比例是1：2：1，大公司的話可能是1：4：1。

1.1.1　早期UI設計的風格

用戶接觸UI這個名詞是最近幾年的事情，但是實際上，UI設計在設計行業一直存在。從最初的電子產品、軟件再到網站的建設，這些都是UI設計的范疇，計算機和手機顯示屏中的各種圖標也都是UI設計。可以說，自從有了設計這個行業，UI這個名詞就出現了。

19　85年，美國的微軟公司成功研發并投入使用計算機系統Windows 1.0，如圖1-4所示。同年，一位名叫阿列克思·帕基特諾夫的俄羅斯人發明了一款叫作俄羅斯方塊的游戲，如圖1-5所示。廣告燈箱、在屏幕上閃動的文字和圖片也都是可追溯的早期UI設計。

圖1-4

圖1-5

提示：最早的操作系統畫面為黑白或單色畫，圖標、窗口設計基本以線框為主。圖標形狀來源于用戶日常生活中常見的機器、按鈕的形象，受顯示器分辨率的影響，圖形外框呈現鋸齒狀馬賽克效果。后來受系統技術開發影響，計算機的大部分操作界面有一個用戶需要的信息界面窗口，還有一個DOS系統下的根目錄?運算過程窗口，因此抽象性語言命令字符占據操作界面的大部分面積，系統操作界面親和力不足。

1.1.2　中期UI設計的興起

20　00年UI傳入我國，金山公司是我國最早從事UI設計的公司，公司成立之初只有兩個人，但是之后卻為UI設計行業培養了眾多優秀的設計領袖，也是從那時起，國內開始出現各大UI設計公司。

提示：這時的UI設計風格偏向抽象化，抽象信息化階段的計算機UI設計與移動UI設計風格共性在于圖標造型抽象、粗糙、不美觀，雖然能夠傳遞基本信息功能，但傳遞過程易使人產生視覺枯燥感。2000年后，具象裝飾風格擬物化設計席卷系統界面設計。蘋果公司2000年發布Aqua系統，UI設計呈現多彩、小清新的圖形界面，圖標所有尖銳的直角都被打磨成圓弧，并且有半透明外殼和曲線美感的半透明菜單，窗口增加動效和聲音。

20　03年，騰訊入股金山公司使騰訊QQ的界面得到革命性的升級，如圖1-6所示。由于外觀和交互方面給用戶帶來了比較人性化的改變，因此QQ用戶激增，隨后，國內各大IT公司開始重視UI設計。

圖1-6

提示：微軟于2001年發布了Windows XP系統，該系統以曲線裝飾、大量立體效果運用為UI設計風格。

20　07年中期，蘋果公司對官網進行了重新設計，而當年的主角毫無疑問是橫空出世的iPhone。設計師們清楚這款產品的意義重大，其極具代表性的圓角矩形圖標將擬物化設計推向整個世界。

內部代號為Purple的智能手機催生了Android操作系統的誕生，同時也為興盛了長達30年左右的摩托羅拉、諾基亞和黑莓手機的沒落埋下了伏筆，圖1-7所示為早期較為流行的手機品牌。

圖1-7

知識點睛：擬物化設計風格初現端倪時，計算機還并不普及，手機更是僅支持接打電話功能，因此，擬物化的出現并沒有給設計行業和大眾帶來較大改變。直到以iPhone為代表的智能手機風靡全球，擬物化正式開始引領UI設計潮流。

20　09年蘋果公司正式把iPhone引入中國，移動UI設計開始在國內興起。時至今日，國內UI設計已經大步發展，如圖1-8所示。

圖1-8

提示：移動UI設計——以智能手機為例。20世紀90年代，伴隨無線通信與網絡技術的進步，智能手機逐漸進入市場。受當時科技的局限，早期手機UI設計簡單粗糙，圖標、文字受到屏幕分辨率的影響，呈現像素化。

1.1.3　后期UI設計的發展

iPhone的出現不僅開啟了UI設計的新時代，也使智能手機、平板電腦成為UI設計的主流形式。如今觸控效果與技術發展越來越成熟，Web UI用戶體驗也越來越專業，無論是設計師還是用戶對體驗都表現得很重視。其他UI形式也開始興起，對于UI設計師而言這是一個美好的時代，如圖1-9所示。

圖1-9

提示：擬物化設計開始在全球流行，它模擬真實物體材質、質感、細節、光亮，視覺效果華麗，界面友好，模擬現實生活中的人機交互方式。這時計算機的操作系統設計也趨于具象化，圖標、界面窗口裝飾化效果初見端倪。例如，界面窗口從原來的抽象的線框轉變成色條，抽象不友好的語言命令窗口轉為后臺操作。

同時，越來越多的企業意識到設計的重要性和用戶使用感受也就是用戶體驗對產品的影響。為了迎合大眾的用戶體驗，主流設計風格由擬物化風格轉變為扁平化風格，如圖1-10所示。

圖1-10

知識點講解——iOS系統

iOS是由蘋果公司開發的移動操作系統。蘋果公司最早于2007年1月9日在蘋果Macworld大會上公布這個系統，最初的設計計劃是給iPhone使用的，后來陸續套用到iPod touch、iPad以及Apple TV等產品上。

iOS與蘋果的Mac OS X操作系統一樣，屬于類Unix的商業操作系統。原本這個系統的名稱為iPhone OS，后因為iPad，iPhone，iPod touch產品均使用iPhone OS系統，所以蘋果公司在蘋果2010全球開發者（WWDC）大會上宣布改名為iOS。圖1-11所示為蘋果公司圖標與最新的蘋果手機產品。

圖1-11

小鏈接：iOS為美國Cisco公司網絡設備操作系統注冊商標，蘋果改名時已獲得Cisco公司授權。

知識點講解——Android系統

Android是一種基于Linux的自由及開放源代碼的操作系統，主要使用于移動設備，如智能手機和平板電腦。Android由Google公司和開放手機聯盟領導及開發，尚未有統一中文名稱，中國大陸地區大都稱其為“安卓”。

Android操作系統最初由Andy Rubin開發，主要支持手機系統使用，2005年8月由Google收購注資。2007年11月，Google與8家硬件制造商、軟件開發商及電信營運商組建開放手機聯盟共同研發改良Android系統。

Google以Apache開源許可證的授權方式發布了Android的源代碼。第一部Android智能手機發布于2008年10月。隨后Android逐漸擴展到平板計算機及其他領域，如電視、數碼相機、游戲機等，如圖1-12所示。

圖1-12

提示：2011年第一季度，Android在全球的市場份額首次超過塞班系統，躍居全球第一。2013年第四季度，Android平臺手機的全球市場份額已經達到78.1%。2013年9月24日谷歌開發的Android操作系統迎來了5歲生日，全世界采用這款系統的設備數量已經達到10億臺。

知識點講解——Windows系統

Microsoft Windows，是美國微軟公司研發的一套操作系統，它問世于1985年，起初僅僅是Microsoft DOS模擬環境，但微軟不斷更新升級且后續的系統版本更加易用，因此逐漸成為各大開發商最喜愛的操作系統。Windows采用了圖形化模式GUI，比起從前的DOS需要鍵入指令使用的方式更為人性化。

隨著計算機硬件和軟件的不斷升級，微軟的Windows系統也在不斷升級，從架構的16位、32位再到64位，系統版本從最初的Windows 1.0到大家熟知的Windows 95、Windows 98、Windows ME、Windows 2000、Windows 2003、Windows XP、Windows Vista、Windows 7、Windows 8、Windows 8.1、Windows 10和Windows Server服務器企業級操作系統，微軟一直致力于Windows操作系統的開發和完善，如圖1-13所示。

圖1-13

知識點講解——擬物化風格設計

擬物化設計（Skeuomorphism），指追求模擬現實物品的造型和質感，通過疊加高光、紋理、材質、陰影等各種效果對實物進行再現。

◆特點：界面模擬真實物體的材質、質感、細節、光亮等；人機交互也擬物化，模擬現實中的交互方式。

◆代表作品：Android部分圖標以及iOS 7.0以下的大部分App，如圖1-14所示。

◆界面：模擬真實物體的材質、質感、細節、光亮等。

◆交互：人機交互也擬物化，模擬現實中的交互方式。

◆好處：擬物設計具有高度還原性，而且可以準確傳達豐富的人性化的感情，所以家居類物品適合擬物化設計，如圖1-15所示。

◆壞處：擬物化本身就是一個約束，會限制功能本身的設計。

圖1-14

圖1-15

提示：2012年蘋果公司推出iOS 7操作系統，其UI設計開始擺脫擬物風格，圖標采用更鮮艷的配色、更簡單的背景及可愛的設計。同時，清晰的圖標與模糊的背景之間的高反差凸顯了層次。

知識點講解——扁平化風格設計

扁平化設計（Flat），指去掉冗余的裝飾效果，即去掉多余的透視、紋理、漸變等能做出3D效果的元素，讓“信息”本身重新作為核心被凸顯出來，并且在設計元素上強調抽象、極簡、符號化。

◆代表作：iOS 7.0及以上，微軟的Metro UI，Windows Phone 8，Windows 8，如圖1-16所示。

◆界面：簡單純色的簡單組合（iOS系）和單色極簡的抽象矩形色塊（微軟系）運用大字體，光滑、現代感十足，有種蒙德里安的感覺。

◆交互：因為扁平化設計的核心是對功能本身的使用（對內容本身的消費），所以去掉了冗余的界面和交互，而是使用更直接的設計來完成任務，如圖1-17所示。

◆好處：界面和交互簡約，信息更直觀，信息量更大。總結起來就是簡單易懂，如圖1-18所示。

◆壞處：需要一定的學習成本，且傳達的感情不豐富，甚至過于冰冷。

圖1-16

圖1-17和圖1-18

知識點睛：縱觀UI設計發展歷史，其設計風格經歷了早期豪放粗獷的抽象信息化階段——抽象的語言信息、單調的文本傳達、冰冷的外觀體驗、枯燥的用戶感受，到后來的具象化裝飾階段——高度擬物化裝飾下對用戶體驗真實感的追求，直至當今抽象簡約圖像化階段——現代主義的理性簡潔式扁平化、視覺傳達功能優良、務實高效下“人性溫度”的回歸。這種風格的流變與工業設計所經歷的從萌芽階段到新藝術運動再到功能主義階段交相輝映，共同書寫著科技引領下產品形式與內容、風格、功能的發展圖景。

提示：抽象簡約圖像化階段——扁平化風格。近兩年計算機操作系統、移動終端UI設計發展不再有時間間隔。人們關注的重點轉為視覺信息繁雜的環境下，更方便、快捷、準確地進行信息傳播，UI設計向著抽象簡約圖像化的方向邁進。