軟件交互設(shè)計[72頁]

1、軟件交互設(shè)計,課程介紹,軟件交互設(shè)計,什么是人機界面與交互,誰來做軟件界面與交互設(shè)計,UI設(shè)計中的常見問題,UI設(shè)計準(zhǔn)則與規(guī)范,對UI設(shè)計進(jìn)行評估,聯(lián)創(chuàng)軟件學(xué)院,Page-2,第一章,什么是人機界面與交互,聯(lián)創(chuàng)軟件學(xué)院,Page-3,什么是人機界面與交互,1 人機交互（Human-Computer Interaction）： 關(guān)于設(shè)計、評價和實現(xiàn)供人們使用的交互計算機 系統(tǒng)以及有關(guān)這些現(xiàn)象進(jìn)行研究的科學(xué)。,2 人機界面（Human-Computer Interface）： 人與計算機之間傳遞、交換信息的媒介和對話接 口，計算機系統(tǒng)的重要組成部分。,聯(lián)創(chuàng)軟件學(xué)院,Page-4,生活中的人機交互-

2、減速板的困擾,住宅區(qū)或?qū)W校道路上的減速板，是凸 起的一道鐵板，用于限制機動車的行駛 速度，是增強行人安全性的好辦法。 但騎自行車的人只能溜邊，從減速板 和馬路牙子間的狹小縫隙中穿過。,聯(lián)創(chuàng)軟件學(xué)院,Page-5,生活中的人機交互-減速板的困擾,解決方案：把長長的減速板分 成若干塊短板，短板間留出十幾 厘米的空隙便于自行車通過。,這就是“人性化”思維方式在人 機交互設(shè)計中的體現(xiàn)，考慮了“可 用性”和“用戶體驗”，才能真正提 升用戶在使用產(chǎn)品時的感受。,聯(lián)創(chuàng)軟件學(xué)院,Page-6,生活中的人機交互-失敗的產(chǎn)品設(shè)計,如果你不考慮用戶，或者說沒有考 慮所有的用戶，那么有可能就會出現(xiàn) 類似下面這種情況：

3、,聯(lián)創(chuàng)軟件學(xué)院,Page-7,為什么沒有設(shè)計UI的產(chǎn)品還能被用戶接受,只有在沒有選擇的條件下，用戶才忽略用戶界面,在功能相似的條件下，用戶會重點關(guān)注用戶界面,不幸的是，很多產(chǎn)品或服務(wù)在原始 設(shè)計的時候，雖然從功能的角度來看 或許可以工作，但往往忽略了真實用 戶如何方便地使用系統(tǒng)的要求。,聯(lián)創(chuàng)軟件學(xué)院,Page-8,軟件界面與交互設(shè)計的目標(biāo),軟件界面與交互設(shè)計的目標(biāo)：優(yōu)化人機界面，讓 軟件界面更具可用性，讓用戶有更好的體驗，使用 戶更方便地完成任務(wù)，從而提高我們的商業(yè)價值。,軟件界面與交互涉及人體工程學(xué)、 軟件工程學(xué)、心理學(xué)、美學(xué)、計算機 科學(xué)、社會科學(xué),聯(lián)創(chuàng)軟件學(xué)院,Page-9,軟件界面上存

4、在什么問題？,聯(lián)創(chuàng)軟件學(xué)院,Page-11,不容樂觀的現(xiàn)狀,盡管國內(nèi)有很多技術(shù)出色、聰明過人的軟件 工程師，但開發(fā)的軟件產(chǎn)品卻既難用又難看， 客戶很不滿意，導(dǎo)致經(jīng)常要修改軟件的用戶界 面，造成極大的生產(chǎn)力浪費。,聯(lián)創(chuàng)軟件學(xué)院,Page-12,不容樂觀的現(xiàn)狀,我們見到的用戶界面設(shè)計缺陷不勝枚舉：,界面措辭含糊，甚至有錯別字。 連簡單的消息框都設(shè)計不好，經(jīng)常存在文不對題的語病。 界面布局混亂，缺乏邏輯，凡是能放的東西都堆積在屏幕 上，讓用戶不知從何下手。 沒有出錯處理，不對用戶輸入的數(shù)據(jù)進(jìn)行檢驗。 不根據(jù)用戶權(quán)限自動隱藏或禁用某些功能。 不提供進(jìn)度條、動畫反映正在進(jìn)行的耗時過程。 對于重要的操作也

5、不返回結(jié)果，讓用戶干著急。 執(zhí)行破壞性的操作之前，不提醒用戶確認(rèn)，總之，如果用 戶執(zhí)行了錯誤的操作，那他活該。 。,聯(lián)創(chuàng)軟件學(xué)院,Page-13,第二章,誰來做軟件界面與交互設(shè)計,聯(lián)創(chuàng)軟件學(xué)院,Page-16,誰來做軟件界面與交互設(shè)計,很多從事界面圖形設(shè)計的人 經(jīng)常會彼此發(fā)牢騷：“那個程序 員剛才又在叫我美工了?！?聯(lián)創(chuàng)軟件學(xué)院,Page-17,誰來做軟件界面與交互設(shè)計,很多管理者并不了解美術(shù)設(shè)計師和UI設(shè)計師的 區(qū)別。認(rèn)為用戶界面只是一個應(yīng)用程序的外殼， 漂亮和酷就等于好用，所以安排美術(shù)設(shè)計師來設(shè) 計用戶界面，往往產(chǎn)品演示看起來很吸引人，而 一旦真正工作起來就不好用或者不實用了。,聯(lián)創(chuàng)軟件學(xué)

6、院,Page-18,誰來做軟件界面與交互設(shè)計,軟件設(shè)計師 or 美術(shù)設(shè)計師,對于軟件設(shè)計師來說,即使是拔尖的程序員，即便是在時間和資源都很充足 的情況下，也仍然可能開發(fā)出拙劣的用戶界面。,缺乏設(shè)計用戶界面的經(jīng)驗 編程經(jīng)驗豐富的程序員并不一定具有 很多設(shè)計用戶界面的經(jīng)驗。進(jìn)行用戶界 面設(shè)計也不一定需要太多編程知識。,拔尖的程序員往往意志堅強 不愿意和他人協(xié)商，不輕易妥協(xié)。不 同程序員開發(fā)的界面風(fēng)格嚴(yán)重的不統(tǒng)一， 每個人都按自己的理解去做界面開發(fā)。,聯(lián)創(chuàng)軟件學(xué)院,Page-19,誰來做軟件界面與交互設(shè)計,軟件設(shè)計師 or 美術(shù)設(shè)計師,對于美術(shù)設(shè)計師來說,擅長設(shè)計各種元素和控件的藝術(shù)外觀，形象地表

7、達(dá)功能，為軟件創(chuàng)建一致的藝術(shù)風(fēng)格，讓數(shù)據(jù)排列 起來更美觀，讓用戶感覺軟件確實漂亮或很酷。 但美術(shù)設(shè)計師很少關(guān)心怎樣使用戶更方便地使用 產(chǎn)品，漂亮和酷并不等于好用，很可能產(chǎn)品只是 “看上去很美”，但其實只是個繡花枕頭。,聯(lián)創(chuàng)軟件學(xué)院,Page-20,誰來做軟件界面與交互設(shè)計,UI設(shè)計師（User Interface Designer，用戶界 面設(shè)計師）：對軟件的人機交互、操作邏輯、 界面美觀的進(jìn)行設(shè)計。使軟件的操作變得更舒 適、簡單、自由，體現(xiàn)軟件的定位和特點。,聯(lián)創(chuàng)軟件學(xué)院,Page-21,UI設(shè)計師的具體工作,擅長分析和理解用戶的任務(wù)需求，使控件和信息的 安排更合理，簡化產(chǎn)品復(fù)雜度。能認(rèn)識到

8、用戶在學(xué)習(xí) 或使用產(chǎn)品的過程中，可能會在哪些地方遇到問題。,協(xié)助為擬定開發(fā)的產(chǎn)品定義用戶模型。 參與產(chǎn)品的可用性測試和評估，并提出修改建議。 將完成一個普通任務(wù)所需要的鼠標(biāo)動作減少一半。 將網(wǎng)站中彈出窗口的總數(shù)量從27個減少到15個以內(nèi)。 修改菜單中的命令，將原來不一致的、令人困惑的短語 改成容易理解的詞。 ,聯(lián)創(chuàng)軟件學(xué)院,Page-22,UI設(shè)計師與美術(shù)設(shè)計師的區(qū)別,頁面上需要放置一個按鈕。美術(shù)設(shè)計師考慮的 是讓按鈕更好看，顯得時髦，或者符合界面中其 它元素的美術(shù)風(fēng)格。UI設(shè)計師考慮的是按鈕的擺 放位置、顯示什么文字，或者要不要這個按鈕。,聯(lián)創(chuàng)軟件學(xué)院,Page-23,廣義的UI設(shè)計崗位,交

9、互式產(chǎn)品的范圍已經(jīng)大大拓寬，人們對界面重要性 的認(rèn)識也隨之提高，廣義的UI設(shè)計崗位包括：,UI設(shè)計師：參與交互設(shè)計，不僅是界面美術(shù)設(shè)計 可用性工程師：使用可用性方法及原理進(jìn)行產(chǎn)品優(yōu)化 Web 設(shè)計師：設(shè)計網(wǎng)站的視覺效果，例如排版和按鈕 信息規(guī)劃師：規(guī)劃和組織信息的架構(gòu)，尤其是網(wǎng)站 用戶體驗工程師：組織用戶測試、分析結(jié)果并且協(xié)助 制定改進(jìn)方案 ,聯(lián)創(chuàng)軟件學(xué)院,Page-24,UI設(shè)計工作的分工,聯(lián)創(chuàng)軟件學(xué)院,Page-25,第三章,UI設(shè)計中的常見問題,聯(lián)創(chuàng)軟件學(xué)院,Page-26,人員意識上的誤區(qū),用戶界面是次要的工作,很多軟件開發(fā)人員和產(chǎn)品經(jīng)理都認(rèn)為，用戶界面 與其它工作相比是次要的，覺得雇

10、一個只是寫點代 碼（或者干脆不寫）的人來做用戶界面設(shè)計和可用 性測試，這簡直是一種浪費。,聯(lián)創(chuàng)軟件學(xué)院,Page-27,人員意識上的誤區(qū),可用性不太重要，又很浪費錢,有些人認(rèn)為用戶界面的好壞對于產(chǎn)品銷售影響不大， 重視可用性在開發(fā)初期增加了開銷（人員、時間、資 金），但今后可以從增加的收入中收回投資，并節(jié)省后 期開銷（例如售后服務(wù)費用）。 一個更為可用的產(chǎn)品，會很快被市場和客戶接納。如 果產(chǎn)品未考慮可用性而匆匆上市，必定減緩銷售量的增 長，導(dǎo)致用戶的抱怨。,聯(lián)創(chuàng)軟件學(xué)院,Page-28,人員意識上的誤區(qū),用戶界面不過就是“字體和顏色”,有些人對于“用戶界面”的理解很狹隘，認(rèn)為不過就是 讓界面更

11、清晰、漂亮一些而已，可以等到發(fā)布之前再 做，甚至干脆不做。用戶界面包含深層次的問題：,用戶學(xué)習(xí)使用產(chǎn)品的時候是否感到費力 產(chǎn)品功能是否能滿足用戶的目標(biāo) 用戶完成任務(wù)的效率如何,這些問題不能在開發(fā)后期才考慮，如果不進(jìn)行用戶 界面設(shè)計及測試，那么最終版本一定不能滿足要求。,聯(lián)創(chuàng)軟件學(xué)院,Page-29,人員意識上的誤區(qū),認(rèn)為用戶能夠適應(yīng)所有的情況,有些人堅信，只要軟件提供足夠的功能，用戶就 能學(xué)會使用。但一個潛在用戶會不顧用戶界面的糟 糕狀況，只是為了產(chǎn)品功能而購買產(chǎn)品，這種邏輯 是錯誤的。 如果競爭者的產(chǎn)品更加容易使用，也提供相似的 功能。不管什么原因，只要用戶覺得你的產(chǎn)品“有點 討厭”，他們就

12、不會去購買和使用你的產(chǎn)品。,誰受到了損失？不是用戶，而是你自己。,聯(lián)創(chuàng)軟件學(xué)院,Page-30,人員意識上的誤區(qū),資源不足時可以放棄用戶界面設(shè)計,有些產(chǎn)品經(jīng)理在預(yù)算緊張、資源不足或時間進(jìn) 度很緊的情況下，認(rèn)為只能“挑重要的事情來做”， 而用戶界面這種“不太重要”的事情可以放在一邊。 用戶界面不是產(chǎn)品的一種特性，而是超越了產(chǎn) 品的所有特性，可以決定每一個特性的好壞，進(jìn) 而決定了整個產(chǎn)品的好壞。,一個無有效用戶界面的產(chǎn)品就像一個沒有窗戶 和門的倉庫：貨物就在里面，但沒有人能拿到。,聯(lián)創(chuàng)軟件學(xué)院,Page-31,常見的UI設(shè)計缺陷 界面視覺表達(dá)不清,沒有明顯的視覺順序和用戶焦點。例如頁面的內(nèi)容 之間

13、沒有明確分類、用戶不清楚什么地方可以點擊、 到處都是閃動的信息等，用戶很難把注意力集中到關(guān) 鍵信息上。,用戶想得到的信息才是屏幕 中最應(yīng)明確顯示的部分！,聯(lián)創(chuàng)軟件學(xué)院,Page-32,常見的UI設(shè)計缺陷 操作步驟非常繁瑣,哪怕是最常見的基本任務(wù)也需要執(zhí)行很多步驟。,即使產(chǎn)品功能再強大，開發(fā)人員夜以繼日 地開發(fā)代碼，如果用戶做一個操作需要超過 20分鐘的時間，其間經(jīng)過一系列繁瑣、緩慢 地步驟，而到頭來卻發(fā)現(xiàn)往往不能如愿，這 個軟件不會受到歡迎。,聯(lián)創(chuàng)軟件學(xué)院,Page-33,常見的UI設(shè)計缺陷,提示信息十分混亂,例如：沒有明確告訴用戶所要執(zhí)行的操作 到底是什么意思，是否能達(dá)到自己的目標(biāo)。,請稍候

14、再試什么樣 的操作？,聯(lián)創(chuàng)軟件學(xué)院,Page-34,常見的UI設(shè)計缺陷 使用難以理解的詞匯,例如：使用了很多用戶不太能理解的詞匯， 或者容易引起誤解的詞匯。,難以理解的詞匯,聯(lián)創(chuàng)軟件學(xué)院,Page-35,常見的UI設(shè)計缺陷 強迫用戶接受糟糕的界面,系統(tǒng)提供的一些元素讓用戶難以接受。例 如：難聽的按鈕點擊聲音，或強制播放的背 景音樂。,精美絕倫、眼花繚亂的Flash演示片頭，從 美術(shù)角度來看很完美，但用戶要花上數(shù)分鐘的 下載時間，也許他們在下載完之前就不耐煩地 把頁面給關(guān)掉了，連一個畫面都沒顯示出來。,聯(lián)創(chuàng)軟件學(xué)院,Page-36,常見的UI設(shè)計缺陷,當(dāng)然這也有點夸張,聯(lián)創(chuàng)軟件學(xué)院,Page-3

15、7,第四章,UI設(shè)計準(zhǔn)則與規(guī)范,聯(lián)創(chuàng)軟件學(xué)院,Page-38,軟件界面與交互設(shè)計的關(guān)鍵,設(shè)計的關(guān)鍵：如何優(yōu)化用戶與產(chǎn)品之間的交互， 從而使產(chǎn)品滿足用戶的期望，設(shè)計依據(jù)涉及到：,考慮人們擅長什么、不擅長什么。 考慮什么可能對用戶的當(dāng)前做法有所幫助。 考慮如何提供高質(zhì)量的用戶體驗。 聽取人們想要些什么，并讓他們參與設(shè)計。 在設(shè)計過程中，讓用戶來嘗試和驗證。,聯(lián)創(chuàng)軟件學(xué)院,Page-39,UI設(shè)計流程,第一步：用戶需求分析,了解誰是目標(biāo)用戶、他們需要哪些支持， 才可能設(shè)計出能支持這些用戶的產(chǎn)品。 首先找到真正的用戶，然后從他們那里找 到需求。 用戶需求是所有設(shè)計、開發(fā)工作的基礎(chǔ)。 簡而言之，在這個階

16、段我們需要知道：,用戶想要什么？ 我們要做什么？,聯(lián)創(chuàng)軟件學(xué)院,Page-40,練習(xí)：分析軟件用戶的類型和特征？,要求：試分析軟件用戶分為哪幾種類型，,不同類型的用戶對軟件界面與交互有哪些,不同的需求。,聯(lián)創(chuàng)軟件學(xué)院,Page-41,用戶分類,偶然型用戶：既沒有計算機應(yīng)用領(lǐng)域的專業(yè)知識，也缺少計算機系統(tǒng)基本知識的用戶。 生疏型用戶：他們更常使用計算機系統(tǒng)，因而對計算機的性能及操作使用，已經(jīng)有一定程度的理解和經(jīng)驗。但他們往往對新使用的計算機系統(tǒng)缺乏了解，不太熟悉，因此對新系統(tǒng)而言，他們?nèi)耘f是生疏用戶。 熟練型用戶：這類用戶一般是專業(yè)技術(shù)人員，他們對需要計算機完成的工作任務(wù)有清楚地了解，對計算機系

17、統(tǒng)也有相當(dāng)多的知識和經(jīng)驗，并且能熟練地操作、使用。 專家型用戶：對需要計算機完成的工作任務(wù)和計算機系統(tǒng)都很精通的，通常是計算機專業(yè)用戶，稱為專家型用戶。,UI設(shè)計流程,第一步：用戶需求分析,用戶界面需求舉例：,在客戶資料錄入界面中，,應(yīng)明確標(biāo)示哪些信息是必填信息，哪些信息是選填信息。 在客戶資料錄入界面 中，輸入框如果是選擇項方式錄入，必須顯示信息的中文意 義，不能用0、1、2或a、b、c等數(shù)字或英文代碼代替。 在客戶資料錄入界面中，所 有中文均為宋體，12號字，英文和數(shù)字均為Arial，12號字。,聯(lián)創(chuàng)軟件學(xué)院,Page-42,UI設(shè)計流程,第二步：概念設(shè)計與物理設(shè)計,形成多個設(shè)計方案，進(jìn)行

18、評審，確定最優(yōu)方案。,概念設(shè)計：用一種用戶能夠理解的方式去描述產(chǎn)品 應(yīng)該做些什么、如何運作、外觀如何；,物理設(shè)計：考慮的是產(chǎn)品的細(xì)節(jié)，包括要使用的色 彩、聲音和圖像，還有菜單設(shè)計和圖標(biāo)設(shè)計。,聯(lián)創(chuàng)軟件學(xué)院,Page-43,UI設(shè)計流程,第三步：制作軟件界面原型,軟件界面原型并不是能夠運行的最終軟件版本， 可以采用很多工具來實現(xiàn)“交互”設(shè)計。比如使用 AxureRP Pro工具軟件來設(shè)計WEB軟件界面原型， 可在設(shè)計的早期階段發(fā)現(xiàn)問題。,聯(lián)創(chuàng)軟件學(xué)院,Page-44,案例：使用AxureRP工具繪制的軟件界面原型,聯(lián)創(chuàng)軟件學(xué)院,Page-45,UI設(shè)計流程,第四步：用戶測試和評估,制作某個設(shè)計方

19、案的軟件界面原型，請用戶進(jìn) 行評估，從而得到反饋，比如進(jìn)行哪些界面修 改，或哪些需求仍未滿足等。再次明確需求，提 出修改設(shè)計的方案。,這個相互聯(lián)系并且重復(fù)進(jìn)行的特征被稱為“迭代”， 是交互設(shè)計過程的關(guān)鍵特征之一。,不論設(shè)計人員多么優(yōu)秀，也不論用戶對新產(chǎn)品 多么有想象力，都必須使用反饋來修正構(gòu)思，而 且需要反復(fù)若干次。,聯(lián)創(chuàng)軟件學(xué)院,Page-46,UI設(shè)計遵循的原則,可行性,用戶能否通過產(chǎn)品達(dá)到意圖，還有達(dá)到 意圖的程度有多少。,例1：用戶提出的界面需求，哪些需求得到了 實現(xiàn)，哪些需求未被實現(xiàn)。 例2：用戶通過系統(tǒng)操作，是否可以得到預(yù)期 的輸出結(jié)果。,聯(lián)創(chuàng)軟件學(xué)院,Page-47,UI設(shè)計遵循

20、的原則,有效性,用戶在執(zhí)行任務(wù)時，產(chǎn)品支持用戶的方式 是否有效，從而避免繁瑣的操作。,例如：在查詢框中輸入關(guān)鍵字后，按“回車”鍵 就觸發(fā)搜索動作。如果還要把手從鍵盤挪到鼠標(biāo) 上，再點擊“查詢”按鈕，很明顯就不夠靈活有效。,目標(biāo)：用最少的操作步驟完成操作任務(wù)， 獲得最高的使用效率。,聯(lián)創(chuàng)軟件學(xué)院,Page-48,UI設(shè)計遵循的原則,安全性,保護(hù)用戶以避免發(fā)生錯誤，以及令人不快的 情形。不管是新手還是老手，他們都有可能會 犯錯誤。,例1：降低用戶按錯鍵或按鈕的風(fēng)險，從而預(yù)防用 戶犯嚴(yán)重的錯誤（例如不要把“退出”或“刪除”命令與 “保存”命令安排在一起）； 例2：為用戶提供出錯后的復(fù)原方法，從而讓他

21、們 更有信心，敢于嘗試新操作； 例3：采用其他安全機制，包括取消選項和確認(rèn)對 話框，讓用戶有機會再次考慮自己的意圖。 例4：用戶有權(quán)自主中斷某進(jìn)程，而不是當(dāng)系統(tǒng)出 錯或誤操作后，只能看著錯誤繼續(xù)發(fā)展而無可奈何。,聯(lián)創(chuàng)軟件學(xué)院,Page-49,UI設(shè)計遵循的原則,易學(xué)性,對于任何產(chǎn)品，用戶都希望能立即開始操作， 而且不費多大力氣就能學(xué)會使用。,所有界面元素提供必要的提示，圖標(biāo)按鈕的含義 直觀明了，輔之以文字說明，防止用戶誤解。當(dāng)鼠 標(biāo)移動到圖標(biāo)按鈕時，該圖標(biāo)旁出現(xiàn)功能提示。 界面結(jié)構(gòu)能夠清晰地反映工作流程，以便用戶按 部就班地操作。 為幫助用戶學(xué)習(xí)使用產(chǎn)品，或者解決實際問題， 應(yīng)該提供易于檢索和

22、學(xué)習(xí)的幫助信息。,聯(lián)創(chuàng)軟件學(xué)院,Page-50,UI設(shè)計遵循的原則,易記性,用戶在學(xué)會使用某個產(chǎn)品后，是不是能迅速 回想起使用方法。不應(yīng)該每次都需要重新學(xué)習(xí) 如何執(zhí)行任務(wù)，借助一些簡單提示就能回想起 操作方法。,例1：使用簡潔明了的圖形或文字提示用戶某項操 作的功能、目的以及可能發(fā)生的結(jié)果；或者把同類 型的命令或選項歸置在同一個區(qū)域內(nèi)。 例2：使用用戶的語言，使用他們熟悉的那些詞 匯、慣用語和概念，而不是高深莫測的技術(shù)用語。,聯(lián)創(chuàng)軟件學(xué)院,Page-51,UI設(shè)計遵循的原則,一致性,在設(shè)計界面時使用相似的操作，并且為相似的任務(wù) 使用相似的元素。,例1：一般點擊鼠標(biāo)左鍵選取界面對象。如果有個界面

23、， 某些對象用左鍵選取，另一些對象卻用鼠標(biāo)右鍵選取，這種 不一致性導(dǎo)致用戶很難記住，當(dāng)然也更容易出錯。 例2：如果用戶無法確定不同詞匯/情景/動作，是否具有相 同含義，比方說軟件中的確定按鈕都是“確定”兩個字，但突 然冒出個“OK”或者“好的”，用戶就會很莫名其妙。,例3：所有需要用戶確認(rèn)操作的對話框都至少包含“確,認(rèn)”和“放棄”兩個按鈕。,聯(lián)創(chuàng)軟件學(xué)院,Page-52,UI設(shè)計遵循的原則,信息最小化,避免使用無關(guān)或極少使用的信息，最簡 單的方法：把每個認(rèn)為可能不必要的元素 逐一去掉，如果沒有它系統(tǒng)仍能很好的工 作，那么就撤銷它。,如果把過多的信息塞進(jìn)有限 的屏幕空間中去，用戶便很難 找到自己

24、感興趣的東西！,聯(lián)創(chuàng)軟件學(xué)院,Page-53,案例：信息繁雜的軟件界面,聯(lián)創(chuàng)軟件學(xué)院,Page-54,UI設(shè)計規(guī)范,常見的界面配色方案,聯(lián)創(chuàng)軟件學(xué)院,Page-55,案例：界面配色方案-SP服務(wù)門戶,聯(lián)創(chuàng)軟件學(xué)院,Page-56,案例：界面配色方案-動感地帶,聯(lián)創(chuàng)軟件學(xué)院,Page-57,UI設(shè)計規(guī)范,系統(tǒng)響應(yīng)時間,時間長度：,系統(tǒng)響應(yīng)時間過長，用戶會感到不安和沮喪；響應(yīng)時間過 短，會造成用戶加快操作節(jié)奏，從而導(dǎo)致錯誤系統(tǒng)易變性。,時間的易變性：,指相對于平均響應(yīng)時間的偏差，即使響應(yīng)時間較長，低的 響應(yīng)時間易變性，有助于用戶建立穩(wěn)定的操作節(jié)奏。,聯(lián)創(chuàng)軟件學(xué)院,Page-58,UI設(shè)計規(guī)范,系統(tǒng)

25、響應(yīng)時間,系統(tǒng)響應(yīng)時間長度遵循的界面設(shè)計規(guī)則：,0-10 秒：鼠標(biāo)顯示成為沙漏 10-15秒：由微幫助顯示處理進(jìn)度（狀態(tài)欄提示或 控件上提示文本） 15秒：顯示處理窗口或顯示進(jìn)度條 一個長時間的處理完成時，應(yīng)給予完成提示信息,聯(lián)創(chuàng)軟件學(xué)院,Page-59,UI設(shè)計規(guī)范,屏幕信息顯示,屏幕信息顯示遵循的界面設(shè)計規(guī)則：,只顯示與當(dāng)前用戶語境環(huán)境有關(guān)的信息。 不要用數(shù)據(jù)將用戶包圍，使用便于用戶迅速吸取信 息的方式表現(xiàn)信息。 使用一致的標(biāo)記：標(biāo)準(zhǔn)縮寫和可預(yù)測的顏色顯示， 信息含義非常明確，用戶不必參考其它信息源。 在頁面上分隔不同類型的信息。,聯(lián)創(chuàng)軟件學(xué)院,Page-60,UI設(shè)計規(guī)范,數(shù)據(jù)輸入,數(shù)據(jù)

26、輸入遵循的界面設(shè)計規(guī)則：,盡量減少用戶輸入動作的數(shù)量； 應(yīng)對鍵盤和鼠標(biāo)輸入的靈活性提供支持； 對輸入數(shù)據(jù)進(jìn)行正確性校驗； 讓用戶控制交互流，可跳過不必要的動作，改變動作 的順序，在不退出系統(tǒng)的情況下從錯誤狀態(tài)中恢復(fù)。 消除冗余輸入，提供缺省值，絕不要讓用戶計算和填 寫可自動獲取或計算出來的數(shù)據(jù)。,聯(lián)創(chuàng)軟件學(xué)院,Page-61,UI設(shè)計規(guī)范,預(yù)防錯誤,在系統(tǒng)設(shè)計中可以合理限制用戶的操作， 預(yù)防錯誤現(xiàn)象的發(fā)生。,例如：把某些按鈕或菜單選項設(shè) 置為灰色，無法點擊，把用戶活動 限制在允許范圍內(nèi)，無法進(jìn)行不正 確操作，錯誤就不會發(fā)生。,聯(lián)創(chuàng)軟件學(xué)院,Page-62,UI設(shè)計規(guī)范,出錯信息和警告,用戶操作出現(xiàn)問題時系統(tǒng)應(yīng)給出出錯信息和警告，遵 循的界面設(shè)計規(guī)則：,信息以用戶可以理解的術(shù)語描述； 信息應(yīng)提供如何從錯誤中恢復(fù)的建設(shè)性意見； 信息應(yīng)指出錯誤可能導(dǎo)致那些不良后果，以便用戶檢查 是否出現(xiàn)了這些情況或幫助用戶進(jìn)行改正； 信息應(yīng)伴隨視覺的提示，如特殊圖像顏色或信息閃爍；,信息不能帶有判斷色彩，即任何情況下不能指責(zé)用戶。,屏幕上冷冰冰地出現(xiàn)一行文字： “由于類型2錯誤，本程序意外終止”。,聯(lián)創(chuàng)軟件學(xué)院,Page-63,UI設(shè)計規(guī)范,常見提示信息,常見的提示信息遵循的界面設(shè)計規(guī)則：,當(dāng)操作會帶來嚴(yán)重后果時，默認(rèn)按鈕為“否“； 當(dāng)操作會帶來