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

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

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

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

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

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

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

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

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