手持移動(dòng)設(shè)備UI設(shè)計(jì)第一節(jié)(3次課)

1、手持移動(dòng)設(shè)備UI設(shè)計(jì),第一節(jié) 關(guān)于UI設(shè)計(jì),一、什么是UI,通過什么操作汽車？,通過什么操作ATM機(jī)？,通過什么控制電視機(jī)？,通過什么控制數(shù)控車床？,通過什么操作Photoshop程序？,通過什么操作手機(jī)？,UI即User Interface(用戶界面)的簡(jiǎn)稱。廣義上來講，UI界面是人與機(jī)器進(jìn)行交互的操作方式，即用戶與機(jī)器相互傳遞信息的媒介，其中包括信息的輸入和輸出。,機(jī)器,用戶,界面,好的UI界面美觀易懂、操作簡(jiǎn)單且有引導(dǎo)功能，使用戶感覺愉快、增強(qiáng)興趣，拉近用戶和機(jī)器之間的距離，從而提高使用效率。所以，對(duì)整個(gè)產(chǎn)品設(shè)計(jì)來說，UI界面設(shè)計(jì)是其重要的組成部分。,但對(duì)于我們多媒體和圖形設(shè)計(jì)方向來說，

2、UI界面則主要是指GUI，即Graphical User Interface（圖形用戶界面），是對(duì)屏幕產(chǎn)品的視覺效果和互動(dòng)操作進(jìn)行設(shè)計(jì)。 GUI 是一種結(jié)合美學(xué)、計(jì)算機(jī)科學(xué)、心理學(xué)、行為學(xué)、人機(jī)工程學(xué)以及市場(chǎng)的綜合性學(xué)科，強(qiáng)調(diào)人機(jī)環(huán)境三者作為一個(gè)系統(tǒng)進(jìn)行總體設(shè)計(jì)。 思考常見的GUI界面。,UI的本意是用戶界面，是英文User和 interface的縮寫。從字面上看是用戶與界面2個(gè)組成部分，但實(shí)際上還包括用戶與界面之間的交互關(guān)系，所以這樣可分為3個(gè)方向，他們分別是：,用戶研究、交互設(shè)計(jì)、界面設(shè)計(jì),用戶研究包含兩個(gè)方面： 一是 可用性工程學(xué)（usability Engineering），研究如何提

3、高產(chǎn)品的可用性，使得系統(tǒng)的設(shè)計(jì)更容易被人使用、學(xué)習(xí)和記憶； 二是 通過可用性工程學(xué)的研究，發(fā)掘用戶的潛在需求，為技術(shù)創(chuàng)新提供另外一條思路和方法（consumer insight）。,用戶研究是一個(gè)跨學(xué)科的專業(yè)，涉及可用性工程學(xué)、人類功效學(xué)、心理學(xué)、市場(chǎng)研究學(xué)、教育學(xué)、設(shè)計(jì)學(xué)等等學(xué)科。用戶研究技術(shù)是站在人文學(xué)科的角度來研究產(chǎn)品，站在用戶的角度介入到產(chǎn)品的開發(fā)和設(shè)計(jì)中。 用戶研究通過對(duì)于用戶的工作環(huán)境、產(chǎn)品的使用習(xí)慣等研究，使得在產(chǎn)品開發(fā)的前期能夠把用戶對(duì)于產(chǎn)品功能的期望、對(duì)設(shè)計(jì)和外觀方面的要求融入到產(chǎn)品的開發(fā)過程中去，從而幫助企業(yè)完善產(chǎn)品設(shè)計(jì)或者探索一個(gè)新產(chǎn)品概念。,2 交互設(shè)計(jì) 這部分指人與機(jī)

4、之間的交互工程，在過去交互設(shè)計(jì)也由程序員來做，其實(shí)程序員擅長(zhǎng)編碼，而不善于與最終用戶交互。 3 界面設(shè)計(jì) 界面設(shè)計(jì)不是單純的美術(shù)繪畫，他需要定位使用者、使用環(huán)境、使用方式并且為最終用戶而設(shè)計(jì)，是純粹的科學(xué)性的藝術(shù)設(shè)計(jì)。,一個(gè)通用消費(fèi)類軟件界面的設(shè)計(jì)大體可分為五個(gè)步驟： 1.需求階段 2.分析設(shè)計(jì)階段 3.調(diào)研驗(yàn)證階段 4.方案改進(jìn)階段 5.用戶驗(yàn)證反饋階段,UI的分類 Graphics User Interface 圖形用戶界面 有時(shí)也稱為WIMP=Window/Icon/Menu/Pointing Device 窗口、圖標(biāo)、菜單、指點(diǎn)設(shè)備 HUI Handset User Interface

5、 手持設(shè)備用戶界面 WUI Web User Interface 網(wǎng)頁(yè)風(fēng)格用戶界面,二、主要研究?jī)?nèi)容： GUI是一種綜合性設(shè)計(jì)，要想設(shè)計(jì)出好的圖形界面，我們必須要掌握設(shè)計(jì)藝術(shù)、計(jì)算機(jī)技術(shù)、人機(jī)工程學(xué)等學(xué)科領(lǐng)域的內(nèi)容。,1、設(shè)計(jì)藝術(shù) 主要涉及到平面構(gòu)成、色彩構(gòu)成以及立體構(gòu)成等基礎(chǔ)知識(shí)，同時(shí)也需要有一定的平面設(shè)計(jì)經(jīng)驗(yàn)。,2、計(jì)算機(jī)技術(shù) UI界面的互動(dòng)必須要通過計(jì)算機(jī)技術(shù)來實(shí)現(xiàn)，例如用FLASH做的互動(dòng)程序，必須要用AS語(yǔ)言才能夠?qū)崿F(xiàn)。,3、人機(jī)工程學(xué) 人機(jī)工程學(xué)就是應(yīng)用人體測(cè)量學(xué)、人體力學(xué)、勞動(dòng)生理學(xué)、勞動(dòng)心理學(xué)等學(xué)科的研究方法，對(duì)人體結(jié)構(gòu)特征和機(jī)能特征進(jìn)行研究，提供人體各部分的尺寸、重量、體表面

6、積以及人體各部分在活動(dòng)時(shí)的相互關(guān)系和可及范圍等人體結(jié)構(gòu)特征參數(shù)；分析人的視覺、聽覺、觸覺以及膚覺等感覺器官的機(jī)能特性；探討人在工作中影響心理狀態(tài)的因素以及心理因素對(duì)工作效率的影響等。,三、GUI(圖形界面)主要組成部分： 1、桌面 在啟動(dòng)時(shí)顯示，也是界面中最底層，有時(shí)也指代包括窗口、文件瀏覽器在內(nèi)的“桌面環(huán)境”。在桌面上由于可以重疊顯示窗口，因此可以實(shí)現(xiàn)多任務(wù)化。一般的界面中，桌面上放有各種應(yīng)用程序和數(shù)據(jù)的圖標(biāo)，用戶可以依此開始工作。 典型代表：Windows桌面、手機(jī)桌面等,2、窗口 應(yīng)用程序?yàn)槭褂脭?shù)據(jù)而在圖形用戶界面中設(shè)置的基本單元。應(yīng)用程序和數(shù)據(jù)在窗口內(nèi)實(shí)現(xiàn)一體化。在窗口中，用戶可以在窗

7、口中操作應(yīng)用程序，進(jìn)行數(shù)據(jù)的管理、生成和編輯。通常在窗口四周設(shè)有菜單、圖標(biāo)，數(shù)據(jù)放在中央。,3、菜單 將系統(tǒng)可以執(zhí)行的命令以階層的方式顯示出來的一個(gè)界面。一般置于畫面的最上方或者最下方，應(yīng)用程序能使用的所有命令幾乎全部都能放入。重要程度一般是從左到右，越往右重要度越低。命定的層次根據(jù)應(yīng)用程序的不同而不同，一般重視文件的操作、編輯功能，因此放在最左邊，然后往右有各種設(shè)置等操作，最右邊往往設(shè)有幫助。一般使用鼠標(biāo)的第一按鈕進(jìn)行操作。,4、按鈕 菜單中，利用程度高的命令用圖形表示出來，配置在應(yīng)用程序中，稱為按鈕。 應(yīng)用程序中的按鈕，通?？梢源娌藛?。一些使用程度高的命令，不必通過菜單一層層翻動(dòng)才能調(diào)出

8、，極大提高了工作效率。但是，各種用戶使用的命令頻率是不一樣的，因此這種配置一般都是可以由用戶自定義編輯。,四、GUI的設(shè)計(jì)原則： 1、減少用戶的認(rèn)知負(fù)擔(dān) 2、保持界面的一致性 3、滿足不同目標(biāo)用戶的創(chuàng)意需求 4、用戶界面友好性 5、圖標(biāo)功能的一致性 6、建立界面與用戶的互動(dòng)交流,五、GUI的主要應(yīng)用領(lǐng)域： 手機(jī)通訊移動(dòng)產(chǎn)品、電腦操作平臺(tái)、軟件產(chǎn)品 、PDA產(chǎn)品 、數(shù)碼產(chǎn)品 、車載系統(tǒng)產(chǎn)品、 智能家電產(chǎn)品 、游戲產(chǎn)品 、產(chǎn)品的在線推廣等。,GUI 定義 GUI-Graphical User Interface即人機(jī)交互圖形化用戶界面設(shè)計(jì)。準(zhǔn)確來說GUI就是屏幕產(chǎn)品的視覺體驗(yàn)和互動(dòng)操作部分。,GUI 應(yīng)用領(lǐng)域 手機(jī)通訊移動(dòng)產(chǎn)品,電腦操作平臺(tái) 軟件產(chǎn)品 PDA產(chǎn)品 數(shù)碼產(chǎn)品 車載系統(tǒng)產(chǎn)品 智能家電產(chǎn)品 游戲產(chǎn)品,實(shí)驗(yàn)一：臨摹平板電腦操作界面,要求： 1、分析界面的布局、版式、色彩以及功能，領(lǐng)會(huì)界面的設(shè)計(jì)