第11章、UI設(shè)計(jì)UI簡(jiǎn)介與設(shè)計(jì)原則|UI設(shè)計(jì)的工作流程與界面布局|UI設(shè)計(jì)的色彩搭配|常見Ui分類|案例分析UI設(shè)計(jì)是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)，也叫界面設(shè)計(jì)。UI設(shè)計(jì)分為實(shí)體UI和虛擬UI，互聯(lián)網(wǎng)說的UI設(shè)計(jì)是虛擬UI，UI即UserInterface(用戶界面)的簡(jiǎn)稱。好的UI設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品位，還要讓軟件的操作變得舒適簡(jiǎn)單、自由，充分體現(xiàn)軟件的定位和特點(diǎn)。本章主要介紹了UI設(shè)計(jì)的的基本流程和操作技巧，掌握UI設(shè)計(jì)的排版構(gòu)成、元素使用。【本章學(xué)習(xí)目標(biāo)】通過本章的學(xué)習(xí)，讀者能夠掌握：1.熟悉UI的種類以及構(gòu)成2.掌握UI設(shè)計(jì)的基本創(chuàng)意方法和制作流程目錄1UI的簡(jiǎn)介及設(shè)計(jì)原則2Ui設(shè)計(jì)流程及界面布局3UI設(shè)計(jì)的色彩搭配4常見Ui設(shè)計(jì)分類5案例分析

UI即User

Interface(用戶界面)的簡(jiǎn)稱。UI設(shè)計(jì)是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。好的UI設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品味，還要讓軟件的操作變得舒適、簡(jiǎn)單、自由，充分體現(xiàn)軟件的定位和特點(diǎn)。

UI設(shè)計(jì)發(fā)展至今可分為：PC端UI（網(wǎng)站和軟件）、移動(dòng)端UI以及游戲UI。3大領(lǐng)域看似相差不多，但就偏重點(diǎn)、設(shè)計(jì)思路、制作規(guī)則等實(shí)際操作上其實(shí)是大相徑庭的。我們將著重介紹網(wǎng)站UI、軟件UI和手機(jī)UI。第一節(jié)UI的簡(jiǎn)介和設(shè)計(jì)原則1、個(gè)性化的視覺程現(xiàn)2、便捷的交互體驗(yàn)3、統(tǒng)一的整體風(fēng)格4、精致的細(xì)節(jié)訴求UI設(shè)計(jì)原則第一節(jié)UI的簡(jiǎn)介和設(shè)計(jì)原則UI設(shè)計(jì)的工作流程

分析?

了解產(chǎn)品

的市場(chǎng)定

位、產(chǎn)品

定義、客

戶群體、

運(yùn)營方式

等，提出

可用性設(shè)

計(jì)建議。

架構(gòu)?

制定交互

方式、操

作與跳轉(zhuǎn)

流程、結(jié)

構(gòu)、布局、

信息和其

他元素。

界面?

對(duì)前面所

有工作加

以設(shè)計(jì)，

色調(diào)、風(fēng)

格、界面、

窗口、圖

標(biāo)、皮膚

的表現(xiàn)是

最關(guān)鍵的。

輸出?

配合好開

發(fā)人員完

成相關(guān)的

界面結(jié)合。

完善?

可用性的

循環(huán)研究、

用戶體驗(yàn)

回饋、測(cè)

試回饋，

UI人員把

可行性建

議進(jìn)行完

善。第二節(jié)Ui設(shè)計(jì)流程及界面布局界面構(gòu)成要素：互聯(lián)網(wǎng)與傳統(tǒng)媒體最大的不同就在于除文字和圖像以外，還包含聲音、視頻和畫等新興多媒體元素，增加了網(wǎng)頁界面動(dòng)性。第二節(jié)Ui設(shè)計(jì)流程及界面布局

文字元素作為網(wǎng)站內(nèi)容傳達(dá)的主體，有著其他任何元素?zé)o法取代的重要作用。首先是文字信息符合人類的閱讀習(xí)慣，其次因?yàn)槲淖炙即嫒】臻g小，節(jié)省了下載和瀏覽時(shí)間。網(wǎng)頁中的文字主要包括標(biāo)題、信息、文字鏈接等形式。文字作為占據(jù)頁面重要比率的元素，同時(shí)又是信息重要載體，它的大小、字體、顏色和排布對(duì)頁面整體設(shè)計(jì)影響極大。以文字排布為主的網(wǎng)頁界面，只要文字排布得當(dāng)，版面同樣可以生動(dòng)活潑，分類條例清晰，不會(huì)給人單調(diào)感覺。第二節(jié)Ui設(shè)計(jì)流程及界面布局第二節(jié)Ui設(shè)計(jì)流程及界面布局圖形元素包括標(biāo)題、背景、主圖、鏈接圖標(biāo)四種。圖形往往能引起人們的注意，并激發(fā)閱讀興趣，合理的運(yùn)用圖形，可以生動(dòng)直觀、形象地表現(xiàn)設(shè)計(jì)主題。以圖像作為標(biāo)題和鏈接可以使網(wǎng)頁具有更好的視覺效果，配合文字增強(qiáng)生動(dòng)和形象性。主圖與背景在裝飾性上小有不同，背景是襯托主題，主圖則是突出表現(xiàn)主題。主圖是整個(gè)網(wǎng)頁的視覺中心，可以為單調(diào)的文字信息增強(qiáng)活力，能給人強(qiáng)烈的視覺信息。第二節(jié)Ui設(shè)計(jì)流程及界面布局網(wǎng)頁構(gòu)成中的多媒體元素主要包括音頻、視頻和動(dòng)畫。這些是界面構(gòu)成中最吸引人的元素，好的多媒體元素不但可以增加網(wǎng)站的活力還可以有效的提高網(wǎng)站與瀏覽者之間的互動(dòng)交流。網(wǎng)頁界面布局網(wǎng)頁設(shè)計(jì)源于平面設(shè)計(jì)但又與平面設(shè)計(jì)有所區(qū)別不同，相同的是在設(shè)計(jì)中多運(yùn)用平面構(gòu)成的基本原理，不同的是它的大小比較固定，傳載的媒體只限于電子顯示器，這樣就為設(shè)計(jì)者提出了更為苛刻的要求。第二節(jié)Ui設(shè)計(jì)流程及界面布局電腦顯示器第二節(jié)Ui設(shè)計(jì)流程及界面布局手機(jī)顯示器第二節(jié)Ui設(shè)計(jì)流程及界面布局第二節(jié)Ui設(shè)計(jì)流程及界面布局平面的視覺影響力上強(qiáng)下弱，左強(qiáng)右弱，上部和中上部被稱為“最佳視域”，在網(wǎng)頁設(shè)計(jì)中一些突出的信息，如主標(biāo)題、每天更新的內(nèi)容等通常都放在這個(gè)位置。第二節(jié)Ui設(shè)計(jì)流程及界面布局在電腦上對(duì)畫面進(jìn)行分割，確定好在什么地方布置什么欄目、大小等。粗略布局使色彩，LOGO，導(dǎo)航條，內(nèi)容圖片等一一實(shí)現(xiàn)。布局細(xì)化在網(wǎng)頁設(shè)計(jì)中同樣離不開平面設(shè)計(jì)中最基本的點(diǎn)、線、面的運(yùn)用。點(diǎn)線面的運(yùn)用第二節(jié)Ui設(shè)計(jì)流程及界面布局UI設(shè)計(jì)的色彩搭配第三節(jié)Ui設(shè)計(jì)的色彩搭配冷暖色第三節(jié)Ui設(shè)計(jì)的色彩搭配互補(bǔ)色、對(duì)比色、類似色和臨近色第三節(jié)Ui設(shè)計(jì)的色彩搭配色彩與心理情感第三節(jié)Ui設(shè)計(jì)的色彩搭配一個(gè)與項(xiàng)目相匹配的色彩方案，能夠引導(dǎo)用戶更好地使用網(wǎng)站，這是件很酷的事情。色彩有冷暖色之分，冷暖色的巧妙運(yùn)用可以讓網(wǎng)站產(chǎn)生意想不到的效果。色彩與人的心理感覺和情緒也有一定的關(guān)系，一般情況下，各種色彩給人的感覺是：紅色代表熱情、活潑、熱鬧、溫暖、幸福、吉祥；橙色代表光明、華麗、興奮、甜蜜、快樂；黃色代表明朗、愉快、高貴、希望；綠色代表新鮮、平靜、和平、柔和、安逸、青春；藍(lán)色代表深遠(yuǎn)、永恒、沉靜、理智、誠實(shí)、寒冷；紫色代表優(yōu)雅、高貴、魅力、自傲；白色代表純潔、純真、樸素、神圣、明快；灰色代表憂郁、消極、謙虛、平凡、沉默、中庸、寂寞；黑色代表崇高、堅(jiān)實(shí)、嚴(yán)肅、剛健、粗莽。除了考慮界面設(shè)計(jì)本身的特點(diǎn)外，還要遵循一定的藝術(shù)規(guī)律，從而設(shè)計(jì)出色彩鮮明、性格獨(dú)特的網(wǎng)站。第三節(jié)Ui設(shè)計(jì)的色彩搭配色彩搭配要注意的問題通過調(diào)整色彩的飽和度和透明度產(chǎn)生變化，使網(wǎng)站避免單調(diào)產(chǎn)生。使用單色例如綠色和藍(lán)色，紅色和黃色就互為鄰近色。采用鄰近色設(shè)計(jì)網(wǎng)頁可以使網(wǎng)頁避免色彩雜亂，易于達(dá)到頁面的和諧統(tǒng)一。使用領(lǐng)近色產(chǎn)生強(qiáng)烈的視覺效果，能夠使網(wǎng)站特色鮮明、重點(diǎn)突出。以一種顏色為主色調(diào)，對(duì)比色作為點(diǎn)綴，可以起到畫龍點(diǎn)睛的作用。使用對(duì)比色黑色是一種特殊的顏色，往往產(chǎn)生很強(qiáng)烈的藝術(shù)效果，黑色一般用來作背景色，與其它純度色彩搭配使用。黑色的使用一般采用素淡清雅的色彩，避免采用花紋復(fù)雜的圖片和純度很高的色彩作為背景色，同時(shí)背景色要與文字的色彩對(duì)比強(qiáng)烈一些。背景色的使用一般控制在三種色彩以內(nèi)，通過調(diào)整色彩的各種屬性來產(chǎn)生變化。色彩的數(shù)量第三節(jié)Ui設(shè)計(jì)的色彩搭配網(wǎng)站UI發(fā)展簡(jiǎn)史

1991年，全球第一個(gè)網(wǎng)站誕生，網(wǎng)址為http://info.cern.ch。早期的網(wǎng)頁完全由文本構(gòu)成，只有一些小圖片和毫無布局科研的標(biāo)題與段落。接下來出現(xiàn)了表格布局，然后是Flash，最后是基于CSS的網(wǎng)頁設(shè)計(jì)。到目前為止，我們可以把網(wǎng)站建設(shè)的發(fā)展分為4個(gè)階段。這四個(gè)階段分別代表了互聯(lián)網(wǎng)技術(shù)的發(fā)展歷程。第四節(jié)常見Ui分類第一

純靜態(tài)

代

網(wǎng)站第二

數(shù)據(jù)庫

代

管理第三

智能建

代

站智能可視化建

站第四

代第四節(jié)常見Ui分類設(shè)計(jì)細(xì)節(jié)的發(fā)展早期的網(wǎng)頁完全由文本構(gòu)成，接下來出現(xiàn)了表格布局，圖文并茂的純靜態(tài)網(wǎng)站，然后是加入了Flash、視頻、音頻等多媒體動(dòng)畫的網(wǎng)站，最后是基于web2.0技術(shù)，用CSS設(shè)計(jì)出更具視覺沖擊力，但加載速度更快的網(wǎng)站。在這期間，文字、鏈接、圖片、按鈕、動(dòng)畫以及背景都發(fā)生了極大變化。第四節(jié)常見Ui分類單一英文字體各個(gè)國家的文字文字

各種文字的上百種的字體第四節(jié)常見Ui分類單一的文字鏈接圖文混排和按鈕鏈接鏈接

第四節(jié)常見Ui分類flash動(dòng)畫鏈接圖片靜態(tài)的圖片GIF動(dòng)態(tài)圖片第四節(jié)常見Ui分類按鈕文字按鈕圖標(biāo)按鈕動(dòng)態(tài)按鈕第四節(jié)常見Ui分類文字、圖片GIF動(dòng)畫FLASH動(dòng)畫動(dòng)畫

第四節(jié)常見Ui分類3D動(dòng)畫和視頻背景顏色背景圖片背景動(dòng)畫背景第四節(jié)常見Ui分類

未來趨勢(shì)和走向

網(wǎng)站UI設(shè)計(jì)風(fēng)格從清新到復(fù)古，插畫手繪到擬真設(shè)計(jì)，無奇不有。無論是版面版式，還是設(shè)計(jì)元素，用標(biāo)新立異這個(gè)詞形容絕不為過。web2.0技術(shù)的支持，使得網(wǎng)站程序更加人性化，而設(shè)計(jì)上也更加追求感官化，網(wǎng)站UI設(shè)計(jì)將向以下的設(shè)計(jì)走向持續(xù)發(fā)展。

技術(shù)上1、響應(yīng)式網(wǎng)頁設(shè)計(jì)2、全屏網(wǎng)頁設(shè)計(jì)3、滾動(dòng)設(shè)計(jì)

版面設(shè)計(jì)1、歐美簡(jiǎn)潔風(fēng)（扁平化）2、韓國絢麗風(fēng)3、中國風(fēng)第四節(jié)常見Ui分類響應(yīng)式網(wǎng)頁設(shè)計(jì)能夠適應(yīng)不同尺寸顯示屏的網(wǎng)頁是現(xiàn)在的潮流，是未來很長(zhǎng)一段時(shí)間的設(shè)計(jì)趨勢(shì)，那么響應(yīng)式網(wǎng)頁設(shè)計(jì)就是來解決這個(gè)問題的。這種特別的開發(fā)方式能保證網(wǎng)頁適應(yīng)不同的分辨率，讓網(wǎng)頁要素重組，使其無論在垂直的平板電腦還是智能手機(jī)上，都能達(dá)到最好的視覺效果。第四節(jié)常見Ui分類全屏網(wǎng)頁設(shè)計(jì)利用精心挑選設(shè)計(jì)的漂亮背景，加上合理的頁面布局，視覺沖擊力大可以很好的吸引觀者注意。主要以圖片展示為主，少量文字加上精美的排版使之變得更加吸引人。這個(gè)樣子的網(wǎng)站多用于攝影團(tuán)隊(duì)或個(gè)人作品集展示，雖然簡(jiǎn)單養(yǎng)眼，但是承載信息有限，公司部門的主頁很少見這樣的設(shè)計(jì)。第四節(jié)常見Ui分類滾動(dòng)設(shè)計(jì)滾動(dòng)設(shè)計(jì)又可分為視差滾動(dòng)設(shè)計(jì)、滾動(dòng)偵測(cè)設(shè)計(jì)和無限滾動(dòng)模式（瀑布流）三種。視差滾動(dòng)是讓多層背景以不同速度滾動(dòng)，以形成一種3D立體的運(yùn)動(dòng)效果，給觀者帶來一種獨(dú)特的視覺感受。鼠標(biāo)滾輪的流暢體驗(yàn)，讓用戶在觀看此類網(wǎng)站時(shí)有一種控制感，簡(jiǎn)單來說這是有響應(yīng)的交互體驗(yàn)。

滾動(dòng)偵測(cè)網(wǎng)頁設(shè)計(jì)利用CSS將導(dǎo)航欄固定在網(wǎng)頁頂部、側(cè)面或底部，并將版面內(nèi)容按照導(dǎo)航順序垂直或橫向排布，使得用戶點(diǎn)擊相應(yīng)導(dǎo)航tab時(shí)頁面自動(dòng)滑到相應(yīng)頁面，而點(diǎn)擊內(nèi)容，導(dǎo)航也將隨之改變。這樣的網(wǎng)頁設(shè)計(jì)頁面基本不會(huì)跳轉(zhuǎn)，每一個(gè)tab所指向的頁面內(nèi)容也基本一屏顯示完整，所以在頁面內(nèi)容的呈現(xiàn)上會(huì)有所局限。無限滾動(dòng)模式（瀑布流）大大減少了分頁的數(shù)量，有一些網(wǎng)站內(nèi)容很多，但他們并沒有簡(jiǎn)單分頁，而是將那些內(nèi)容垂直排布，當(dāng)用戶縱向滾動(dòng)時(shí)，內(nèi)容會(huì)不斷更新好像永無止境。對(duì)于這類信息量大，每日更新數(shù)據(jù)塊的網(wǎng)站是比較不錯(cuò)的方案。第四節(jié)常見Ui分類歐美簡(jiǎn)潔風(fēng)（扁平化）它提供了一種新的設(shè)計(jì)思維，設(shè)計(jì)僅僅采用二維元素，可以說是去繁從簡(jiǎn)的設(shè)計(jì)美學(xué)，去掉所有裝飾性的設(shè)計(jì)——陰影、斜面、突起、漸變，拒絕特效，從圖片框到按鈕，再到導(dǎo)航欄都干脆有力，需要極力避免羽化、陰影這樣的特效，注重排版和色彩，可以說是對(duì)之前所推崇的擬物化設(shè)計(jì)的顛覆。第四節(jié)常見Ui分類韓國絢麗風(fēng)韓國的商業(yè)性網(wǎng)站很具代表性，色彩豐富獨(dú)特，但又不雜亂。韓國設(shè)計(jì)者運(yùn)用色彩非常得當(dāng)，給人的感覺要不是淡雅迷人，要不就是另類大膽。網(wǎng)站的各個(gè)欄位在表達(dá)不同主題時(shí)，比較喜歡采用不同的色調(diào)?；疑撬麄冏顑A向使用的顏色，因?yàn)榛疑m然顯得比較中庸，但能和任何色彩搭配，極大地改變色彩的韻味，使對(duì)比更強(qiáng)烈。其正文文字也大都采用灰色，局部則喜歡用色彩絢麗的色帶或色塊來區(qū)分。第四節(jié)常見Ui分類中國風(fēng)中國風(fēng)格的網(wǎng)站，因其氣勢(shì)磅礴，高貴典雅，獨(dú)具韻味而受到很多人的喜愛，近年來被大量應(yīng)用于傳統(tǒng)文化、歷史人文景點(diǎn)、地產(chǎn)項(xiàng)目等網(wǎng)站中。數(shù)千年的文明傳承下來，中國人有其獨(dú)特的構(gòu)圖審美。對(duì)稱美是中國傳統(tǒng)美學(xué)中重要的一部分，網(wǎng)頁由于其特殊性，一般用到最多的是左右對(duì)稱，再加上文字的豎排以及國畫留白的運(yùn)用，使得整個(gè)畫面有了平衡、和諧、莊重之美。第四節(jié)常見Ui分類手機(jī)UI發(fā)展簡(jiǎn)史從1983年第一部手機(jī)誕生以來，從最初的“大哥大”到蘋果多點(diǎn)觸控用戶界面，界面屏幕所占據(jù)手機(jī)的比例越來越大。在整個(gè)手機(jī)用戶界面中，容括屏幕圖像、觸控按鍵、文字等無形界面和按鈕、屏幕等有形界面。

手機(jī)ui設(shè)計(jì)是手機(jī)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)，手機(jī)UI設(shè)計(jì)一直被業(yè)界稱為產(chǎn)品的“臉面”，好的UI設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品味，還要讓軟件的操作變得舒適、簡(jiǎn)單、自由，充分體現(xiàn)軟件的定位和特點(diǎn)，界面也從狹義的圖形界面發(fā)展到廣義的交互界面設(shè)計(jì)。下面，我們首先從智能手機(jī)系統(tǒng)的發(fā)展歷史開始說起，梳理一下交互設(shè)計(jì)的發(fā)展：第四節(jié)常見Ui分類（手機(jī)UI）設(shè)計(jì)風(fēng)格的發(fā)展

在蘋果一統(tǒng)高端智能手機(jī)市場(chǎng)的時(shí)期，喬布斯曾帶領(lǐng)蘋果的設(shè)計(jì)師團(tuán)隊(duì)打造了一個(gè)擬真化UI體驗(yàn)的傳奇，而隨著喬納森·

艾維操刀iOS

7，擬真化被蘋果拋棄，扁平化設(shè)計(jì)成為2013年移動(dòng)應(yīng)用平臺(tái)設(shè)計(jì)的潮流。第四節(jié)常見Ui分類（手機(jī)UI）擬真與扁平化的界面特點(diǎn)和優(yōu)缺點(diǎn)

擬真特點(diǎn)界面：模擬真實(shí)物體的材質(zhì)、質(zhì)感、細(xì)節(jié)、光亮等。交互：人機(jī)交互也擬真化，模擬現(xiàn)實(shí)中的交互方式。優(yōu)點(diǎn)：界面令用戶感到熟悉，而且傳達(dá)了豐富的人性化的感情。缺點(diǎn)：過度追求設(shè)計(jì)會(huì)造成不必要的信息誤解和過載負(fù)擔(dān)，影響用戶體驗(yàn)。增加開發(fā)者的負(fù)擔(dān)，與日趨簡(jiǎn)潔的硬件設(shè)備風(fēng)格背道而馳。

扁平化特點(diǎn)界面：去掉所有裝飾性的設(shè)計(jì)——陰影、斜面、突起、漸變，拒絕特效，從圖片框到按鈕，再到導(dǎo)航欄都極力避免羽化、陰影這樣的特效，注重排版和色彩。交互：去掉了冗余的界面和交互，而使用更直接的設(shè)計(jì)完成任務(wù)。優(yōu)點(diǎn)：界面和交互簡(jiǎn)約，信息更直觀，信息量更大。缺點(diǎn)：新用戶使用需先學(xué)習(xí)與適應(yīng)，且傳達(dá)的感情不豐富。第四節(jié)常見Ui分類（手機(jī)UI）擬真與扁平化的設(shè)計(jì)要點(diǎn)擬真扁平化1、可用性2、熟悉3、美學(xué)/懷舊1、幾何擬物2、復(fù)色方案3、矩陣語言第四節(jié)常見Ui分類（手機(jī)UI）手機(jī)UI設(shè)計(jì)尺寸

移動(dòng)端設(shè)備屏幕尺寸非常多，碎片化嚴(yán)重。尤其是Android，你會(huì)聽到很多種分辨率：480x800,

480x854,

540x960,

720x1280,

1080x1920，而且還有傳說中的2K屏。近年來iPhone的碎片化也加劇了：640x960,

640x1136,

750x1334,

1242x2208。手機(jī)尺寸在最新的規(guī)范網(wǎng)址中，官方為我們提供了有mdpi,hdpi,xhdpi

xxdhpi,xxxdhpi幾種分辨率的機(jī)器。第四節(jié)常見Ui分類（手機(jī)UI）注意事項(xiàng)光線明暗細(xì)

微的把握學(xué)會(huì)在圖片上呈現(xiàn)文字黑白優(yōu)先保持干凈簡(jiǎn)潔做好強(qiáng)調(diào)和

弱化增加空白空

間只用適合的

字體第四節(jié)常見Ui分類（手機(jī)UI）設(shè)計(jì)規(guī)范整體性、一致性個(gè)性化視覺元素的規(guī)范第四節(jié)常見Ui分類（手機(jī)UI）軟件UI發(fā)展簡(jiǎn)史2000年傳入國內(nèi)，國內(nèi)最早專業(yè)從事UI的公司還是我們的民族軟件——金山，據(jù)說在2000年已成立人機(jī)界面組，只有2個(gè)人。2001年2月出版的《軟件創(chuàng)新之路》中文版，在技術(shù)專著角度強(qiáng)調(diào)了交互與界面的重要性，為UI概念被廣泛認(rèn)可做好了鋪墊。

2001年到2003年之間，國內(nèi)大小公司相繼設(shè)立UI職位。因?yàn)楫?dāng)時(shí)從事web

design非常不景氣，整體水平低下，市場(chǎng)環(huán)境糟糕。2003年隨著ChinaUI論壇的上線，此概念開始在數(shù)字設(shè)計(jì)領(lǐng)域聲名鵲起。同年5月，由金山轉(zhuǎn)會(huì)騰訊的唐沐主導(dǎo)了QQ發(fā)展史上革命性的界面升級(jí)。耳目一新的QQ界面給粉絲們帶來了極大驚喜，在外觀和人性化方面做了較大改善。從此各大IT公司開始重視UI，中國的PC端UI從此開始正式走上舞臺(tái)。下面，我們看一下windows的發(fā)展史，來了解PC界面設(shè)計(jì)的發(fā)展變化。第四節(jié)常見Ui分類（軟件UI）Windows

1.0

的UI還完全是MS-DOS的風(fēng)格。1985年，微軟發(fā)布了Windows

1.0。這款系統(tǒng)雖然使用了圖形操作界面，不過看上去也只不過是給MS-DOS加了一張皮。Windows

1.0允許使用鼠標(biāo)，可以在程序之間進(jìn)行切換，可以調(diào)整窗口大小和最小化窗口。這套系統(tǒng)在當(dāng)時(shí)非常流行。第四節(jié)常見Ui分類（軟件UI）Windows

2.0發(fā)布于1987年。為我們帶來了第一版Microsoft

Word和Excel軟件。這個(gè)還是沒有脫離dos，已經(jīng)初具規(guī)模。第四節(jié)常見Ui分類（軟件UI）1991年的Windows

3.1讓W(xué)indows成為IBM-PC的標(biāo)配系統(tǒng)，這也是最后一款看上去還殘存MS-DOS風(fēng)格的Windows系統(tǒng)。第四節(jié)常見Ui分類（軟件UI）Windows

95讓1995年成為PC歷史上的一個(gè)里程碑。這套系統(tǒng)完全洗掉了MS-DOS的痕跡，整個(gè)界面煥然一新，帶來了在當(dāng)時(shí)猶如從科幻電影走出來的UI；IE瀏覽器，回收站，還有開始菜單這些元素成為Windows的經(jīng)典標(biāo)志。Windows

95也成為至今為止所有Windows系統(tǒng)的界面藍(lán)本。第四節(jié)常見Ui分類（軟件UI）Windows

98界面設(shè)計(jì)看不出有什么大的改動(dòng)只是功能上稍微有些改進(jìn)。第四節(jié)常見Ui分類（軟件UI）2000年發(fā)布的Windows

ME基本上也是Windows

98的加強(qiáng)版，具備一些沒有很大突破性的新功能，這套系統(tǒng)的銷量并不好。因?yàn)榇蠹叶贾啦痪弥缶蜁?huì)有Windows

XP。第四節(jié)常見Ui分類（軟件UI）Windows

XP標(biāo)志性的桌面。第四節(jié)常見Ui分類（軟件UI）Windows

Vista的半透明UI是這套系統(tǒng)最大的價(jià)值。2006年微軟發(fā)布了Windows

Vista，這套系統(tǒng)最終并沒有流行起來，人們寧愿選擇硬件要求不那么高的Windows

XP。Vista的真正價(jià)值可能是它的界面風(fēng)格。第四節(jié)常見Ui分類（軟件UI）Windows

10保留Windows的傳統(tǒng)操作界面，不過在這之上加入一層Metro

UI作為有利于觸控的界面。第四節(jié)常見Ui分類（軟件UI）軟件UI設(shè)計(jì)原則易用性規(guī)范性幫助設(shè)施合理性美觀與協(xié)調(diào)性菜單位置

設(shè)定獨(dú)特性快捷方式

組合安全性多窗口的應(yīng)用與系

統(tǒng)資源第四節(jié)常見Ui分類（軟件UI）軟件UI設(shè)計(jì)技巧暫時(shí)不可操作的菜單命令項(xiàng)一般要

屏蔽變灰建立動(dòng)態(tài)菜單，提高軟件的靈活性正在起作用的菜單命令旁打上選中標(biāo)記（√）生成彈出式菜單，增強(qiáng)軟件的可操

作性為命令選項(xiàng)增加快捷鍵

窗體設(shè)計(jì)用右指向的箭頭引出級(jí)

聯(lián)菜單

菜單設(shè)計(jì)對(duì)相關(guān)的命令用分隔條

進(jìn)行分組照顧用戶的

感覺第四節(jié)常見Ui分類（軟件UI）第五節(jié)案例分析

案例一：本項(xiàng)目是通過illustrator和Photoshop設(shè)計(jì)和制作結(jié)伴APP用戶登錄界面UI。登陸注冊(cè)頁面在APP設(shè)計(jì)當(dāng)中的重要程度從業(yè)者想必也是很清楚的，一個(gè)優(yōu)秀的美觀的登陸設(shè)計(jì)讓人留戀忘返，在第一眼愛上這款A(yù)PP；而一款很糟糕的APP登陸注冊(cè)界面設(shè)計(jì)可能在第一眼就惹惱用戶，莫名流失了用戶。除了界面設(shè)計(jì)美觀外，基本的功能信息也必須保證出現(xiàn)。在illustrator中，制作結(jié)伴L(zhǎng)OGO。在Photoshop中，進(jìn)行APP登錄界面的設(shè)計(jì)，使用文本工具進(jìn)行文字排版，使用矩形工具進(jìn)行圖形裝飾，效果圖如下圖所示。第五節(jié)案例分析第五節(jié)