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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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