GUI用戶界面設計課件

用戶界面設計阜外心血管病醫(yī)院信息中心梁方舟1.Guide/Intro小例子GUI發(fā)展史定義領域狀況設計原則和禁忌GUI設計中的具體內(nèi)容關于PB的界面設計GUI的展望2.一個設計實例3.GUI設計上的問題從材料和加工工藝來看，屬于廉價制品。簡單但不嚴格的水溫控制。排水口很隨意，說明主要不用在池中蓄水。香皂被水淋了之后，需要排殘水。排水不干凈。水龍頭的位置很尷尬，不說洗手不方便，如果想用盆子接點水估計只能斜著接，也只能接到一點，接滿了也拿不下來。若水壓開的很大，更不用說濺的滿身都是。商標在哪？4.餐巾擺放的設計？？5.二十世紀最偉大的人機界面擴音器按鍵式電話方向盤磁卡交通燈遙控器陰極射線管液晶電視鼠標/圖形用戶界面條碼掃描器6.GUI的發(fā)展史圖形用戶界面這一概念是70年代由施樂公司帕洛阿爾托研究中心提出。我們現(xiàn)在據(jù)說的普遍意義上的GUI便是由此產(chǎn)生的。1973年施樂公司帕洛阿爾托研究中心施樂研究機構工作小組最先建構了WIMP(也就是視窗，圖標，菜單和點選器/下拉菜單)的范例，并率先在施樂一臺實驗性的計算機上使用。1983年VisiOn，此圖形用戶界面最開始是一家公司為電子制表軟件而設計的，這軟件就是具有傳奇色彩的VisiCalc.其“視窗”和鼠標的概念，其先于“微軟視窗”的出現(xiàn)，但VisiOn并沒有成功研制。1984年蘋果的Lisa與Macintosh，是首例成功使用GUI并用于商業(yè)用途的產(chǎn)品。1985年AmigaIntuition，Amiga計算機公司研究的一款運用GUI的電腦。AmigaGUI在當時獨一無二，在那時候GUI還不能提供足夠的控制功能，AMIga已經(jīng)能使用彈出式的命令行界面了。1986年GEM，基于IBM電腦系統(tǒng)發(fā)明的一種可選擇性視窗系統(tǒng)，可在MS-Dos或者CPM-86上運行。1987年AppleMacintoshII,是第一臺有顏色的MAC蘋果機.1988年RISCOS，RISCOS是一種彩色GUI操作系統(tǒng)，使用三鍵鼠標、任務欄及一個文件導航器。1988年GEOS，GEOS是另外一個非常早期的圖形桌面系統(tǒng)。1990年MicrosoftWindows3.0。Window1.0是基于MS-DOS操作的GUI，是基于MACOS的GUI設計，Windows2.0是后續(xù)版本。后來的一系列GUI視窗版本都類似于windows3.0的界面。1992年起，AmigaWorkbench3

WindowsNT

QNXr

Windows95

IBMReleasesOS/2Warp4

MacOS8

Windows98

APPLEMacOSX

APPLEAQUA

WindowsXP

WindowsServer20037.UIUI的本意是用戶界面，是英文User和Interface的縮寫。從字面上看是用戶與界面2個組成部分，但實際上還包括用戶與界面之間的交互關系.可分為3個方向：用戶研究、交互設計、界面設計。8.GUI的目的和定義目的：減少用戶的認知負擔滿足不同目標用戶的創(chuàng)意需求建立界面與用戶的互動交流定義：GUI——GraphicalUserInterface一種結合計算機科學、美學、心理學、行為學，及各商業(yè)領域需求分析等學科的人機系統(tǒng)工程，強調(diào)人—機—環(huán)境三者作為一個系統(tǒng)進行總體設計。人機交互圖形化用戶界面，經(jīng)常讀做“goo-ee”，準確來說GUI就是屏幕產(chǎn)品的視覺體驗和互動操作部分。9.GUI領域的國際國內(nèi)現(xiàn)狀縱觀國際相關產(chǎn)業(yè)在圖形化用戶界面設計方面的發(fā)展現(xiàn)狀，許多國際知名公司早己意識到GUI在產(chǎn)品方面產(chǎn)生的強大增值功能，以及帶動的巨大市場價值，因此在公司內(nèi)部設立了相關部門專門從事GUI的研究與設計，同業(yè)間也成立了若干機構，以互相交流GUI設計理論與經(jīng)驗為目的。隨著中國IT產(chǎn)業(yè)，移動通訊產(chǎn)業(yè)，家電產(chǎn)業(yè)的迅猛發(fā)展，在產(chǎn)品的人機交互界面設計水平發(fā)展上日顯滯后，這對于提高產(chǎn)業(yè)綜合素質(zhì)，提升與國際同等業(yè)者的競爭能力等等方面無疑起了制約的作用。10.GUI的應用領域手機通訊移動產(chǎn)品電腦操作平臺軟件產(chǎn)品PDA產(chǎn)品數(shù)碼產(chǎn)品車載系統(tǒng)產(chǎn)品智能家電產(chǎn)品游戲產(chǎn)品產(chǎn)品的在線推廣11.GUI設計原則用戶至上的原則交互界面要友好合理性：配色方案、位置、隱含順序協(xié)調(diào)性：初始化大小、控件擺放保證可用性：可理解、可達到、可控制保證一致性：設計目標、外觀、行為簡單易用就是好……12.GUI設計禁忌同一頁面包含功能重復的控件、將復選框用作單選按鈕、在非開/關設置中使用復選框、無初始值的多選一設置、單選按鈕之間間隔太大顯示對用戶無意義的錯誤提示、不同的類型頁面窗口顯示相同的標題、窗口的標題和調(diào)用的命令不一致、相似的功能卻有不一致的用戶操作界面、無效的控件不置灰取消按鈕無法真正取消操作、返回按鈕不能達到預期的目的、不考慮用戶可能的人為錯誤輸入功能選項過多過復雜、使用無提示或引導的隱性功能、需要向下滾動才能看到重要信息無意義的虛假進度條、執(zhí)行長時間的任務時鼠標指針不顯示成忙狀態(tài)認為好的UI就是漂亮的UI盲目的使用頁面模塊化設計13.GUI的設計步驟需求 3W1H，對使用者、使用環(huán)境、使用原因、使用方式的需求分析。分析設計 建立用戶定位的“品質(zhì)-形象”、“美觀-邏輯”等坐標。調(diào)研驗證 利用已生成的基本風格模版設計用戶調(diào)查問卷。方案改進用戶驗證反饋需求分析初步設計原型界面用戶評估結果評估完成設計修改設計修改原型界面14.GUI中的元素窗口：組織、顏色、布局、形式等。元素：界面上可有的元素，按鈕、圖片、文字等。排版：界面元素的位置以及元素間位置的關系。樣式：元素的大小、顏色等裝飾性的特性。文化：多國語言、語言間差異性的處理等。文件模型：將界面通過一個模型來展現(xiàn)，通過文件模型與UI腳本可以動態(tài)地定義界面。UI腳本：用來控制文件模型好實現(xiàn)一些動態(tài)效果，如動畫、限制、隱性幫助等。15.界面控件的設計符合Windows界面準則確定控件的位置界面元素的一致性控件的表現(xiàn)風格美化界面和控件布局、色彩、形狀、提示、文字、圖片、復雜性16.窗口設計界面要具有一致性常用操作要有捷徑提供簡單的錯誤處理提供信息反饋操作的可逆性設計良好的聯(lián)機幫助17.菜單的設計按照系統(tǒng)的功能來組織菜單廣而淺，而不是窄而深根據(jù)含義分組，并按一定的規(guī)則排序注意為常用選項設置快捷鍵彈出式菜單(PopupMenuMethod)的應用18.重視交互設計系統(tǒng)易用性交互流程簡便盲點測試出錯、異常提示和處理利用用戶環(huán)境測試人機交互設計遵循的認知原則：一致性原則兼容性適應性指導性結構性經(jīng)濟性19.人機交互的十大法則減少顯示器的視覺密度提供使用者搜尋工具及指引設計合理的文字區(qū)規(guī)劃增加視覺平衡感避免多色彩之應用選用清楚大方的字型使用組織化分類說明使用簡明扼要的詞句精簡圖像(Icon)避免界面設計之不一致性20.PB中的GUI界面一致性使用向?qū)шP于系統(tǒng)響應時間幫助設施出錯信息和警告一般交互信息顯示數(shù)據(jù)輸入21.PB中的GUI——關于系統(tǒng)響應時間響應時間長度界面設計0-10秒鼠標顯示成為沙漏10-18秒由微幫助來顯示處理進度18秒以上顯示處理窗口，或顯示進度條一個長時間的處理完成時應給予完成提示信息22.PB中的GUI——幫助設施進行系統(tǒng)交互時，提供部分幫助功能，即：提供主要工作的幫助用戶可以通過幫助菜單、F1鍵和幫助按鈕（如果有的話）訪問幫助表示幫助時根據(jù)需要提供三種方式的選擇：另一個窗體、微幫助和指出參考某個文檔用戶如何回到正常交互方式有兩種選擇：返回鍵和功能鍵幫助信息的構造：采用有邏輯結構的分層式幫助微幫助提供：由狀態(tài)欄，控件上的提示文本，或懸停提示等組成。23.PB中的GUI——出錯信息和警告以用戶可以理解的術語描述；應提供如何從錯誤中恢復的建設性意見；應指出錯誤可能導致那些不量后果，以便用戶檢查，或提供幫助用戶改正的支持；信息應伴隨著視覺上的提示，如特殊的圖像、顏色或閃爍；信息不能帶有判斷性或指責性。24.PB中的GUI——一般交互菜單選擇、數(shù)據(jù)顯示及功能都應使用一致的格式；提供有意義的反饋；執(zhí)行有較大破壞性的動作前要求確認；在數(shù)據(jù)錄入上允許取消大多數(shù)工作；減少在動作間必須記憶的信息數(shù)量；按功能對動作分類，并按此排列屏幕布局；提供語境相關的幫助機制；允許用戶非惡意錯誤，提供一定的容錯性。25.PB中的GUI——信息顯示只顯示與當前用戶語境環(huán)境有關的信息；不要用數(shù)據(jù)將用戶包圍，使用便于用戶迅速吸取信息的方式表現(xiàn)信息；使用一致的標記、標準縮寫和可預測的顏色；顯示信息的含義應非常明確，用戶不必再作參考；產(chǎn)生有意義的出錯信息；使用縮進和文本來輔助理解；使用窗口分隔控件區(qū)分不同類型的信息；顯示器的顯示空間的合理利用。26.PB中的GUI——數(shù)據(jù)輸入1）盡量減少用戶輸入動作的數(shù)量；2）保持信息顯示和數(shù)據(jù)輸入的一致性；3）交互應靈活，對鍵盤和鼠標輸入提供靈活的支持；4）在當前動作的語境中使不合適的命令不起作用；讓用戶控制交互流，用戶可以跳過不必要的動作、改變所需動作的順序（如果允許的話），以及在不退出系統(tǒng)的情況下從錯誤狀態(tài)中恢復；為所有輸入的動作提供幫助；消除冗余輸入?？赡艿脑捥峁┤笔≈?、絕不要讓