軟件交互設計[72頁]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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