軟件交互設(shè)計(jì)課件

軟件交互設(shè)計(jì)課程介紹軟件交互設(shè)計(jì)課程介紹軟件交互設(shè)計(jì)什么是人機(jī)界面與交互誰來做軟件界面與交互設(shè)計(jì)UI設(shè)計(jì)中的常見問題UI設(shè)計(jì)準(zhǔn)則與規(guī)范對(duì)UI設(shè)計(jì)進(jìn)行評(píng)估聯(lián)創(chuàng)軟件學(xué)院2軟件交互設(shè)計(jì)什么是人機(jī)界面與交互誰來做軟件界面與交互設(shè)計(jì)UI第一章什么是人機(jī)界面與交互聯(lián)創(chuàng)軟件學(xué)院3第一章什么是人機(jī)界面與交互聯(lián)創(chuàng)軟件學(xué)院3什么是人機(jī)界面與交互[1]人機(jī)交互（Human-ComputerInteraction）：關(guān)于設(shè)計(jì)、評(píng)價(jià)和實(shí)現(xiàn)供人們使用的交互計(jì)算機(jī)系統(tǒng)以及有關(guān)這些現(xiàn)象進(jìn)行研究的科學(xué)。[2]人機(jī)界面（Human-ComputerInterface）：人與計(jì)算機(jī)之間傳遞、交換信息的媒介和對(duì)話接口，計(jì)算機(jī)系統(tǒng)的重要組成部分。聯(lián)創(chuàng)軟件學(xué)院4什么是人機(jī)界面與交互[1]人機(jī)交互（Human-Compu生活中的人機(jī)交互-減速板的困擾住宅區(qū)或?qū)W校道路上的減速板，是凸起的一道鐵板，用于限制機(jī)動(dòng)車的行駛速度，是增強(qiáng)行人安全性的好辦法。但騎自行車的人只能溜邊，從減速板和馬路牙子間的狹小縫隙中穿過。聯(lián)創(chuàng)軟件學(xué)院5生活中的人機(jī)交互-減速板的困擾住宅區(qū)或?qū)W校道路上的減速板，生活中的人機(jī)交互-減速板的困擾解決方案：把長(zhǎng)長(zhǎng)的減速板分成若干塊短板，短板間留出十幾厘米的空隙便于自行車通過。這就是“人性化”思維方式在人機(jī)交互設(shè)計(jì)中的體現(xiàn)，考慮了“可用性”和“用戶體驗(yàn)”，才能真正提升用戶在使用產(chǎn)品時(shí)的感受。聯(lián)創(chuàng)軟件學(xué)院6生活中的人機(jī)交互-減速板的困擾解決方案：把長(zhǎng)長(zhǎng)的減速板分生活中的人機(jī)交互-失敗的產(chǎn)品設(shè)計(jì)如果你不考慮用戶，或者說沒有考慮所有的用戶，那么有可能就會(huì)出現(xiàn)類似下面這種情況：聯(lián)創(chuàng)軟件學(xué)院7生活中的人機(jī)交互-失敗的產(chǎn)品設(shè)計(jì)如果你不考慮用戶，或者說沒為什么沒有設(shè)計(jì)UI的產(chǎn)品還能被用戶接受只有在沒有選擇的條件下，用戶才忽略用戶界面在功能相似的條件下，用戶會(huì)重點(diǎn)關(guān)注用戶界面不幸的是，很多產(chǎn)品或服務(wù)在原始設(shè)計(jì)的時(shí)候，雖然從功能的角度來看或許可以工作，但往往忽略了真實(shí)用戶如何方便地使用系統(tǒng)的要求。聯(lián)創(chuàng)軟件學(xué)院8為什么沒有設(shè)計(jì)UI的產(chǎn)品還能被用戶接受只有在沒有選擇的條件下軟件界面與交互設(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é)院9軟件界面與交互設(shè)計(jì)的目標(biāo)軟件界面與交互設(shè)計(jì)的目標(biāo)：優(yōu)化人機(jī)軟件界面上存在什么問題？聯(lián)創(chuàng)軟件學(xué)院11軟件界面上存在什么問題？聯(lián)創(chuàng)軟件學(xué)院11不容樂觀的現(xiàn)狀盡管國(guó)內(nèi)有很多技術(shù)出色、聰明過人的軟件工程師，但開發(fā)的軟件產(chǎn)品卻既難用又難看，客戶很不滿意，導(dǎo)致經(jīng)常要修改軟件的用戶界面，造成極大的生產(chǎn)力浪費(fèi)。聯(lián)創(chuàng)軟件學(xué)院12不容樂觀的現(xiàn)狀盡管國(guó)內(nèi)有很多技術(shù)出色、聰明過人的軟件聯(lián)創(chuàng)軟不容樂觀的現(xiàn)狀我們見到的用戶界面設(shè)計(jì)缺陷不勝枚舉：界面措辭含糊，甚至有錯(cuò)別字。連簡(jiǎn)單的消息框都設(shè)計(jì)不好，經(jīng)常存在文不對(duì)題的語病。界面布局混亂，缺乏邏輯，凡是能放的東西都堆積在屏幕上，讓用戶不知從何下手。沒有出錯(cuò)處理，不對(duì)用戶輸入的數(shù)據(jù)進(jìn)行檢驗(yàn)。不根據(jù)用戶權(quán)限自動(dòng)隱藏或禁用某些功能。不提供進(jìn)度條、動(dòng)畫反映正在進(jìn)行的耗時(shí)過程。對(duì)于重要的操作也不返回結(jié)果，讓用戶干著急。執(zhí)行破壞性的操作之前，不提醒用戶確認(rèn)，總之，如果用戶執(zhí)行了錯(cuò)誤的操作，那他活該。。。。聯(lián)創(chuàng)軟件學(xué)院13不容樂觀的現(xiàn)狀我們見到的用戶界面設(shè)計(jì)缺陷不勝枚舉：界面措辭第二章誰來做軟件界面與交互設(shè)計(jì)聯(lián)創(chuàng)軟件學(xué)院16第二章誰來做軟件界面與交互設(shè)計(jì)聯(lián)創(chuàng)軟件學(xué)院16誰來做軟件界面與交互設(shè)計(jì)很多從事界面圖形設(shè)計(jì)的人經(jīng)常會(huì)彼此發(fā)牢騷：“那個(gè)程序員剛才又在叫我‘美工’了。”聯(lián)創(chuàng)軟件學(xué)院17誰來做軟件界面與交互設(shè)計(jì)很多從事界面圖形設(shè)計(jì)的人聯(lián)創(chuàng)軟件學(xué)誰來做軟件界面與交互設(shè)計(jì)很多管理者并不了解美術(shù)設(shè)計(jì)師和UI設(shè)計(jì)師的區(qū)別。認(rèn)為用戶界面只是一個(gè)應(yīng)用程序的外殼，漂亮和酷就等于好用，所以安排美術(shù)設(shè)計(jì)師來設(shè)計(jì)用戶界面，往往產(chǎn)品演示看起來很吸引人，而一旦真正工作起來就不好用或者不實(shí)用了。聯(lián)創(chuàng)軟件學(xué)院18誰來做軟件界面與交互設(shè)計(jì)很多管理者并不了解美術(shù)設(shè)計(jì)師和UI誰來做軟件界面與交互設(shè)計(jì)軟件設(shè)計(jì)師or美術(shù)設(shè)計(jì)師對(duì)于軟件設(shè)計(jì)師來說即使是拔尖的程序員，即便是在時(shí)間和資源都很充足的情況下，也仍然可能開發(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é)。不同程序員開發(fā)的界面風(fēng)格嚴(yán)重的不統(tǒng)一，每個(gè)人都按自己的理解去做界面開發(fā)。聯(lián)創(chuàng)軟件學(xué)院19誰來做軟件界面與交互設(shè)計(jì)軟件設(shè)計(jì)師or美術(shù)設(shè)計(jì)師對(duì)于軟件誰來做軟件界面與交互設(shè)計(jì)軟件設(shè)計(jì)師or美術(shù)設(shè)計(jì)師對(duì)于美術(shù)設(shè)計(jì)師來說擅長(zhǎng)設(shè)計(jì)各種元素和控件的藝術(shù)外觀，形象地表達(dá)功能，為軟件創(chuàng)建一致的藝術(shù)風(fēng)格，讓數(shù)據(jù)排列起來更美觀，讓用戶感覺軟件確實(shí)漂亮或很酷。但美術(shù)設(shè)計(jì)師很少關(guān)心怎樣使用戶更方便地使用產(chǎn)品，漂亮和酷并不等于好用，很可能產(chǎn)品只是“看上去很美”，但其實(shí)只是個(gè)繡花枕頭。聯(lián)創(chuàng)軟件學(xué)院20誰來做軟件界面與交互設(shè)計(jì)軟件設(shè)計(jì)師or美術(shù)設(shè)計(jì)師對(duì)于美術(shù)誰來做軟件界面與交互設(shè)計(jì)

UI設(shè)計(jì)師（UserInterfaceDesigner，用戶界面設(shè)計(jì)師）：對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的進(jìn)行設(shè)計(jì)。使軟件的操作變得更舒適、簡(jiǎn)單、自由，體現(xiàn)軟件的定位和特點(diǎn)。聯(lián)創(chuàng)軟件學(xué)院21誰來做軟件界面與交互設(shè)計(jì)UI設(shè)計(jì)師（UserInterfUI設(shè)計(jì)師的具體工作擅長(zhǎng)分析和理解用戶的任務(wù)需求，使控件和信息的安排更合理，簡(jiǎn)化產(chǎn)品復(fù)雜度。能認(rèn)識(shí)到用戶在學(xué)習(xí)或使用產(chǎn)品的過程中，可能會(huì)在哪些地方遇到問題。協(xié)助為擬定開發(fā)的產(chǎn)品定義用戶模型。參與產(chǎn)品的可用性測(cè)試和評(píng)估，并提出修改建議。將完成一個(gè)普通任務(wù)所需要的鼠標(biāo)動(dòng)作減少一半。將網(wǎng)站中彈出窗口的總數(shù)量從27個(gè)減少到15個(gè)以內(nèi)。修改菜單中的命令，將原來不一致的、令人困惑的短語改成容易理解的詞。

……聯(lián)創(chuàng)軟件學(xué)院22UI設(shè)計(jì)師的具體工作擅長(zhǎng)分析和理解用戶的任務(wù)需求，使控件和UI設(shè)計(jì)師與美術(shù)設(shè)計(jì)師的區(qū)別頁面上需要放置一個(gè)按鈕。美術(shù)設(shè)計(jì)師考慮的是讓按鈕更好看，顯得時(shí)髦，或者符合界面中其它元素的美術(shù)風(fēng)格。UI設(shè)計(jì)師考慮的是按鈕的擺放位置、顯示什么文字，或者要不要這個(gè)按鈕。聯(lián)創(chuàng)軟件學(xué)院23UI設(shè)計(jì)師與美術(shù)設(shè)計(jì)師的區(qū)別頁面上需要放置一個(gè)按鈕。美術(shù)設(shè)廣義的UI設(shè)計(jì)崗位交互式產(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)站的視覺效果，例如排版和按鈕信息規(guī)劃師：規(guī)劃和組織信息的架構(gòu)，尤其是網(wǎng)站用戶體驗(yàn)工程師：組織用戶測(cè)試、分析結(jié)果并且協(xié)助制定改進(jìn)方案

……聯(lián)創(chuàng)軟件學(xué)院24廣義的UI設(shè)計(jì)崗位交互式產(chǎn)品的范圍已經(jīng)大大拓寬，人們對(duì)界面UI設(shè)計(jì)工作的分工聯(lián)創(chuàng)軟件學(xué)院25UI設(shè)計(jì)工作的分工聯(lián)創(chuàng)軟件學(xué)院25第三章UI設(shè)計(jì)中的常見問題聯(lián)創(chuàng)軟件學(xué)院26第三章UI設(shè)計(jì)中的常見問題聯(lián)創(chuàng)軟件學(xué)院26人員意識(shí)上的誤區(qū)用戶界面是次要的工作很多軟件開發(fā)人員和產(chǎn)品經(jīng)理都認(rèn)為，用戶界面與其它工作相比是次要的，覺得雇一個(gè)只是寫點(diǎn)代碼（或者干脆不寫）的人來做用戶界面設(shè)計(jì)和可用性測(cè)試，這簡(jiǎn)直是一種浪費(fèi)。聯(lián)創(chuàng)軟件學(xué)院27人員意識(shí)上的誤區(qū)用戶界面是次要的工作很多軟件開發(fā)人員和產(chǎn)品人員意識(shí)上的誤區(qū)可用性不太重要，又很浪費(fèi)錢有些人認(rèn)為用戶界面的好壞對(duì)于產(chǎn)品銷售影響不大，重視可用性在開發(fā)初期增加了開銷（人員、時(shí)間、資金），但今后可以從增加的收入中收回投資，并節(jié)省后期開銷（例如售后服務(wù)費(fèi)用）。一個(gè)更為可用的產(chǎn)品，會(huì)很快被市場(chǎng)和客戶接納。如果產(chǎn)品未考慮可用性而匆匆上市，必定減緩銷售量的增長(zhǎng)，導(dǎo)致用戶的抱怨。聯(lián)創(chuàng)軟件學(xué)院28人員意識(shí)上的誤區(qū)可用性不太重要，又很浪費(fèi)錢有些人認(rèn)為用戶界人員意識(shí)上的誤區(qū)用戶界面不過就是“字體和顏色”有些人對(duì)于“用戶界面”的理解很狹隘，認(rèn)為不過就是讓界面更清晰、漂亮一些而已，可以等到發(fā)布之前再做，甚至干脆不做。用戶界面包含深層次的問題：用戶學(xué)習(xí)使用產(chǎn)品的時(shí)候是否感到費(fèi)力產(chǎn)品功能是否能滿足用戶的目標(biāo)用戶完成任務(wù)的效率如何這些問題不能在開發(fā)后期才考慮，如果不進(jìn)行用戶界面設(shè)計(jì)及測(cè)試，那么最終版本一定不能滿足要求。聯(lián)創(chuàng)軟件學(xué)院29人員意識(shí)上的誤區(qū)用戶界面不過就是“字體和顏色”有些人對(duì)于“人員意識(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)品更加容易使用，也提供相似的功能。不管什么原因，只要用戶覺得你的產(chǎn)品“有點(diǎn)討厭”，他們就不會(huì)去購(gòu)買和使用你的產(chǎn)品。誰受到了損失？不是用戶，而是你自己。聯(lián)創(chuàng)軟件學(xué)院30人員意識(shí)上的誤區(qū)認(rèn)為用戶能夠適應(yīng)所有的情況有些人堅(jiān)信，只要人員意識(shí)上的誤區(qū)資源不足時(shí)可以放棄用戶界面設(shè)計(jì)有些產(chǎn)品經(jīng)理在預(yù)算緊張、資源不足或時(shí)間進(jìn)度很緊的情況下，認(rèn)為只能“挑重要的事情來做”，而用戶界面這種“不太重要”的事情可以放在一邊。

用戶界面不是產(chǎn)品的一種特性，而是超越了產(chǎn)品的所有特性，可以決定每一個(gè)特性的好壞，進(jìn)而決定了整個(gè)產(chǎn)品的好壞。一個(gè)無有效用戶界面的產(chǎn)品就像一個(gè)沒有窗戶和門的倉(cāng)庫(kù)：貨物就在里面，但沒有人能拿到。聯(lián)創(chuàng)軟件學(xué)院31人員意識(shí)上的誤區(qū)資源不足時(shí)可以放棄用戶界面設(shè)計(jì)有些產(chǎn)品經(jīng)理常見的UI設(shè)計(jì)缺陷界面視覺表達(dá)不清沒有明顯的視覺順序和用戶焦點(diǎn)。例如頁面的內(nèi)容之間沒有明確分類、用戶不清楚什么地方可以點(diǎn)擊、到處都是閃動(dòng)的信息等，用戶很難把注意力集中到關(guān)鍵信息上。用戶想得到的信息才是屏幕中最應(yīng)明確顯示的部分！聯(lián)創(chuàng)軟件學(xué)院32常見的UI設(shè)計(jì)缺陷沒有明顯的視覺順序和用戶焦點(diǎn)。例如頁面的常見的UI設(shè)計(jì)缺陷操作步驟非常繁瑣哪怕是最常見的基本任務(wù)也需要執(zhí)行很多步驟。即使產(chǎn)品功能再?gòu)?qiáng)大，開發(fā)人員夜以繼日地開發(fā)代碼，如果用戶做一個(gè)操作需要超過20分鐘的時(shí)間，其間經(jīng)過一系列繁瑣、緩慢地步驟，而到頭來卻發(fā)現(xiàn)往往不能如愿，這個(gè)軟件不會(huì)受到歡迎。聯(lián)創(chuàng)軟件學(xué)院33常見的UI設(shè)計(jì)缺陷哪怕是最常見的基本任務(wù)也需要執(zhí)行很多步驟。常見的UI設(shè)計(jì)缺陷提示信息十分混亂例如：沒有明確告訴用戶所要執(zhí)行的操作到底是什么意思，是否能達(dá)到自己的目標(biāo)。<典型界面分析>請(qǐng)稍候再試什么樣的操作？聯(lián)創(chuàng)軟件學(xué)院34常見的UI設(shè)計(jì)缺陷提示信息十分混亂例如：沒有明確告訴用戶所常見的UI設(shè)計(jì)缺陷使用難以理解的詞匯例如：使用了很多用戶不太能理解的詞匯，或者容易引起誤解的詞匯。<典型界面分析>難以理解的詞匯聯(lián)創(chuàng)軟件學(xué)院35常見的UI設(shè)計(jì)缺陷例如：使用了很多用戶不太能理解的詞匯，<常見的UI設(shè)計(jì)缺陷強(qiáng)迫用戶接受糟糕的界面系統(tǒng)提供的一些元素讓用戶難以接受。例如：難聽的按鈕點(diǎn)擊聲音，或強(qiáng)制播放的背景音樂。<界面分析>精美絕倫、眼花繚亂的Flash演示片頭，從美術(shù)角度來看很完美，但用戶要花上數(shù)分鐘的下載時(shí)間，也許他們?cè)谙螺d完之前就不耐煩地把頁面給關(guān)掉了，連一個(gè)畫面都沒顯示出來。聯(lián)創(chuàng)軟件學(xué)院36常見的UI設(shè)計(jì)缺陷系統(tǒng)提供的一些元素讓用戶難以接受。例<界常見的UI設(shè)計(jì)缺陷……當(dāng)然這也有點(diǎn)夸張聯(lián)創(chuàng)軟件學(xué)院37常見的UI設(shè)計(jì)缺陷……當(dāng)然這也有點(diǎn)夸張聯(lián)創(chuàng)軟件學(xué)院第四章UI設(shè)計(jì)準(zhǔn)則與規(guī)范聯(lián)創(chuàng)軟件學(xué)院38第四章UI設(shè)計(jì)準(zhǔn)則與規(guī)范聯(lián)創(chuàng)軟件學(xué)院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)。聽取人們想要些什么，并讓他們參與設(shè)計(jì)。在設(shè)計(jì)過程中，讓用戶來嘗試和驗(yàn)證。聯(lián)創(chuàng)軟件學(xué)院39軟件界面與交互設(shè)計(jì)的關(guān)鍵設(shè)計(jì)的關(guān)鍵：如何優(yōu)化用戶與產(chǎn)品之間UI設(shè)計(jì)流程第一步：用戶需求分析了解誰是目標(biāo)用戶、他們需要哪些支持，才可能設(shè)計(jì)出能支持這些用戶的產(chǎn)品。首先找到真正的用戶，然后從他們那里找到需求。用戶需求是所有設(shè)計(jì)、開發(fā)工作的基礎(chǔ)。簡(jiǎn)而言之，在這個(gè)階段我們需要知道：用戶想要什么？我們要做什么？聯(lián)創(chuàng)軟件學(xué)院40UI設(shè)計(jì)流程第一步：用戶需求分析了解誰是目標(biāo)用戶、他們需要練習(xí)：分析軟件用戶的類型和特征？要求：試分析軟件用戶分為哪幾種類型，不同類型的用戶對(duì)軟件界面與交互有哪些不同的需求。聯(lián)創(chuàng)軟件學(xué)院41練習(xí)：分析軟件用戶的類型和特征？要求：試分析軟件用戶分為哪幾用戶分類偶然型用戶：既沒有計(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ī)系統(tǒng)也有相當(dāng)多的知識(shí)和經(jīng)驗(yàn)，并且能熟練地操作、使用。專家型用戶：對(duì)需要計(jì)算機(jī)完成的工作任務(wù)和計(jì)算機(jī)系統(tǒng)都很精通的，通常是計(jì)算機(jī)專業(yè)用戶，稱為專家型用戶。用戶分類偶然型用戶：既沒有計(jì)算機(jī)應(yīng)用領(lǐng)域的專業(yè)知識(shí)，也缺少計(jì)UI設(shè)計(jì)流程第一步：用戶需求分析用戶界面需求舉例：<REQ_GIM_INPUT_NEED_U>在客戶資料錄入界面中，應(yīng)明確標(biāo)示哪些信息是必填信息，哪些信息是選填信息。

<REQ_GIM_INPUT_MEANING_U>在客戶資料錄入界面中，輸入框如果是選擇項(xiàng)方式錄入，必須顯示信息的中文意義，不能用0、1、2或a、b、c等數(shù)字或英文代碼代替。

<REQ_GIM_INPUT_FONT_U>在客戶資料錄入界面中，所有中文均為宋體，12號(hào)字，英文和數(shù)字均為Arial，12號(hào)字。聯(lián)創(chuàng)軟件學(xué)院42UI設(shè)計(jì)流程第一步：用戶需求分析用戶界面需求舉例：<REQ_UI設(shè)計(jì)流程第二步：概念設(shè)計(jì)與物理設(shè)計(jì)形成多個(gè)設(shè)計(jì)方案，進(jìn)行評(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é)院43UI設(shè)計(jì)流程第二步：概念設(shè)計(jì)與物理設(shè)計(jì)形成多個(gè)設(shè)計(jì)方案，進(jìn)行UI設(shè)計(jì)流程第三步：制作軟件界面原型軟件界面原型并不是能夠運(yùn)行的最終軟件版本，可以采用很多工具來實(shí)現(xiàn)“交互”設(shè)計(jì)。比如使用AxureRPPro工具軟件來設(shè)計(jì)WEB軟件界面原型，可在設(shè)計(jì)的早期階段發(fā)現(xiàn)問題。聯(lián)創(chuàng)軟件學(xué)院44UI設(shè)計(jì)流程第三步：制作軟件界面原型軟件界面原型并不是能案例：使用AxureRP工具繪制的軟件界面原型聯(lián)創(chuàng)軟件學(xué)院45案例：使用AxureRP工具繪制的軟件界面原型聯(lián)創(chuàng)軟件學(xué)院PUI設(shè)計(jì)流程第四步：用戶測(cè)試和評(píng)估制作某個(gè)設(shè)計(jì)方案的軟件界面原型，請(qǐng)用戶進(jìn)行評(píng)估，從而得到反饋，比如進(jìn)行哪些界面修改，或哪些需求仍未滿足等。再次明確需求，提出修改設(shè)計(jì)的方案。這個(gè)相互聯(lián)系并且重復(fù)進(jìn)行的特征被稱為“迭代”，是交互設(shè)計(jì)過程的關(guān)鍵特征之一。不論設(shè)計(jì)人員多么優(yōu)秀，也不論用戶對(duì)新產(chǎn)品多么有想象力，都必須使用反饋來修正構(gòu)思，而且需要反復(fù)若干次。聯(lián)創(chuàng)軟件學(xué)院46UI設(shè)計(jì)流程第四步：用戶測(cè)試和評(píng)估制作某個(gè)設(shè)計(jì)方案的軟件界UI設(shè)計(jì)遵循的原則可行性用戶能否通過產(chǎn)品達(dá)到意圖，還有達(dá)到意圖的程度有多少。例1：用戶提出的界面需求，哪些需求得到了實(shí)現(xiàn)，哪些需求未被實(shí)現(xiàn)。例2：用戶通過系統(tǒng)操作，是否可以得到預(yù)期的輸出結(jié)果。聯(lián)創(chuàng)軟件學(xué)院47UI設(shè)計(jì)遵循的原則可行性用戶能否通過產(chǎn)品達(dá)到意圖，還有達(dá)到UI設(shè)計(jì)遵循的原則有效性用戶在執(zhí)行任務(wù)時(shí)，產(chǎn)品支持用戶的方式是否有效，從而避免繁瑣的操作。例如：在查詢框中輸入關(guān)鍵字后，按“回車”鍵就觸發(fā)搜索動(dòng)作。如果還要把手從鍵盤挪到鼠標(biāo)上，再點(diǎn)擊“查詢”按鈕，很明顯就不夠靈活有效。目標(biāo)：用最少的操作步驟完成操作任務(wù)，獲得最高的使用效率。聯(lián)創(chuàng)軟件學(xué)院48UI設(shè)計(jì)遵循的原則有效性用戶在執(zhí)行任務(wù)時(shí)，產(chǎn)品支持用戶的方UI設(shè)計(jì)遵循的原則安全性保護(hù)用戶以避免發(fā)生錯(cuò)誤，以及令人不快的情形。不管是新手還是老手，他們都有可能會(huì)犯錯(cuò)誤。例1：降低用戶按錯(cuò)鍵或按鈕的風(fēng)險(xiǎn)，從而預(yù)防用戶犯嚴(yán)重的錯(cuò)誤（例如不要把“退出”或“刪除”命令與“保存”命令安排在一起）；

例2：為用戶提供出錯(cuò)后的復(fù)原方法，從而讓他們更有信心，敢于嘗試新操作；例3：采用其他安全機(jī)制，包括取消選項(xiàng)和確認(rèn)對(duì)話框，讓用戶有機(jī)會(huì)再次考慮自己的意圖。

例4：用戶有權(quán)自主中斷某進(jìn)程，而不是當(dāng)系統(tǒng)出錯(cuò)或誤操作后，只能看著錯(cuò)誤繼續(xù)發(fā)展而無可奈何。聯(lián)創(chuàng)軟件學(xué)院49UI設(shè)計(jì)遵循的原則安全性保護(hù)用戶以避免發(fā)生錯(cuò)誤，以及令人不UI設(shè)計(jì)遵循的原則易學(xué)性對(duì)于任何產(chǎn)品，用戶都希望能立即開始操作，而且不費(fèi)多大力氣就能學(xué)會(huì)使用。所有界面元素提供必要的提示，圖標(biāo)按鈕的含義直觀明了，輔之以文字說明，防止用戶誤解。當(dāng)鼠標(biāo)移動(dòng)到圖標(biāo)按鈕時(shí)，該圖標(biāo)旁出現(xiàn)功能提示。界面結(jié)構(gòu)能夠清晰地反映工作流程，以便用戶按部就班地操作。為幫助用戶學(xué)習(xí)使用產(chǎn)品，或者解決實(shí)際問題，應(yīng)該提供易于檢索和學(xué)習(xí)的幫助信息。聯(lián)創(chuàng)軟件學(xué)院50UI設(shè)計(jì)遵循的原則易學(xué)性對(duì)于任何產(chǎn)品，用戶都希望能立即開始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：使用用戶的語言，使用他們熟悉的那些詞匯、慣用語和概念，而不是高深莫測(cè)的技術(shù)用語。聯(lián)創(chuàng)軟件學(xué)院51UI設(shè)計(jì)遵循的原則易記性用戶在學(xué)會(huì)使用某個(gè)產(chǎn)品后，是不是能UI設(shè)計(jì)遵循的原則一致性在設(shè)計(jì)界面時(shí)使用相似的操作，并且為相似的任務(wù)使用相似的元素。例1：一般點(diǎn)擊鼠標(biāo)左鍵選取界面對(duì)象。如果有個(gè)界面，某些對(duì)象用左鍵選取，另一些對(duì)象卻用鼠標(biāo)右鍵選取，這種不一致性導(dǎo)致用戶很難記住，當(dāng)然也更容易出錯(cuò)。

例2：如果用戶無法確定不同詞匯/情景/動(dòng)作，是否具有相同含義，比方說軟件中的確定按鈕都是“確定”兩個(gè)字，但突然冒出個(gè)“OK”或者“好的”，用戶就會(huì)很莫名其妙。例3：所有需要用戶確認(rèn)操作的對(duì)話框都至少包含“確認(rèn)”和“放棄”兩個(gè)按鈕。聯(lián)創(chuàng)軟件學(xué)院52UI設(shè)計(jì)遵循的原則一致性在設(shè)計(jì)界面時(shí)使用相似的操作，并且為UI設(shè)計(jì)遵循的原則信息最小化避免使用無關(guān)或極少使用的信息，最簡(jiǎn)單的方法：把每個(gè)認(rèn)為可能不必要的元素逐一去掉，如果沒有它系統(tǒng)仍能很好的工作，那么就撤銷它。如果把過多的信息塞進(jìn)有限的屏幕空間中去，用戶便很難找到自己感興趣的東西！聯(lián)創(chuàng)軟件學(xué)院53UI設(shè)計(jì)遵循的原則信息最小化避免使用無關(guān)或極少使用的信息，案例：信息繁雜的軟件界面聯(lián)創(chuàng)軟件學(xué)院54案例：信息繁雜的軟件界面聯(lián)創(chuàng)軟件學(xué)院54UI設(shè)計(jì)規(guī)范常見的界面配色方案聯(lián)創(chuàng)軟件學(xué)院55UI設(shè)計(jì)規(guī)范常見的界面配色方案聯(lián)創(chuàng)軟件學(xué)院55案例：界面配色方案-SP服務(wù)門戶聯(lián)創(chuàng)軟件學(xué)院56案例：界面配色方案-SP服務(wù)門戶聯(lián)創(chuàng)軟件學(xué)院56案例：界面配色方案-動(dòng)感地帶聯(lián)創(chuàng)軟件學(xué)院57案例：界面配色方案-動(dòng)感地帶聯(lián)創(chuàng)軟件學(xué)院57UI設(shè)計(jì)規(guī)范系統(tǒng)響應(yīng)時(shí)間時(shí)間長(zhǎng)度：系統(tǒng)響應(yīng)時(shí)間過長(zhǎng)，用戶會(huì)感到不安和沮喪；響應(yīng)時(shí)間過短，會(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é)院58UI設(shè)計(jì)規(guī)范系統(tǒng)響應(yīng)時(shí)間時(shí)間長(zhǎng)度：系統(tǒng)響應(yīng)時(shí)間過長(zhǎng)，用戶會(huì)UI設(shè)計(jì)規(guī)范系統(tǒng)響應(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é)院59UI設(shè)計(jì)規(guī)范系統(tǒng)響應(yīng)時(shí)間系統(tǒng)響應(yīng)時(shí)間長(zhǎng)度遵循的界面設(shè)計(jì)規(guī)則：UI設(shè)計(jì)規(guī)范屏幕信息顯示屏幕信息顯示遵循的界面設(shè)計(jì)規(guī)則：只顯示與當(dāng)前用戶語境環(huán)境有關(guān)的信息。不要用數(shù)據(jù)將用戶包圍，使用便于用戶迅速吸取信息的方式表現(xiàn)信息。使用一致的標(biāo)記：標(biāo)準(zhǔn)縮寫和可預(yù)測(cè)的顏色顯示，信息含義非常明確，用戶不必參考其它信息源。在頁面上分隔不同類型的信息。聯(lián)創(chuàng)軟件學(xué)院60UI設(shè)計(jì)規(guī)范屏幕信息顯示屏幕信息顯示遵循的界面設(shè)計(jì)規(guī)則：只UI設(shè)計(jì)規(guī)范數(shù)據(jù)輸入數(shù)據(jù)輸入遵循的界面設(shè)計(jì)規(guī)則：盡量減少用戶輸入動(dòng)作的數(shù)量；應(yīng)對(duì)鍵盤和鼠標(biāo)輸入的靈活性提供支持；對(duì)輸入數(shù)據(jù)進(jìn)行正確性校驗(yàn)；讓用戶控制交互流，可跳過不必要的動(dòng)作，改變動(dòng)作的順序，在不退出系統(tǒng)的情況下從錯(cuò)誤狀態(tài)中恢復(fù)。消除冗余輸入，提供缺省值，絕不要讓用戶計(jì)算和填寫可自動(dòng)獲取或計(jì)算出來的數(shù)據(jù)。聯(lián)創(chuàng)軟件學(xué)院61UI設(shè)計(jì)規(guī)范數(shù)據(jù)輸入數(shù)據(jù)輸入遵循的界面設(shè)計(jì)規(guī)則：盡量減少用UI設(shè)計(jì)規(guī)范預(yù)防錯(cuò)誤在系統(tǒng)設(shè)計(jì)中可以合理限制用戶的操作，預(yù)防錯(cuò)誤現(xiàn)象的發(fā)生。例如：把某些按鈕或菜單選項(xiàng)設(shè)置為灰色，無法點(diǎn)擊，把用戶活動(dòng)限制在允許范圍內(nèi)，無法進(jìn)行不正確操作，錯(cuò)誤就不會(huì)發(fā)生。聯(lián)創(chuàng)軟件學(xué)院62UI設(shè)計(jì)規(guī)范預(yù)防錯(cuò)誤在系統(tǒng)設(shè)計(jì)中可以合理限制用戶的操作，UI設(shè)計(jì)規(guī)范出錯(cuò)信息和警告用戶操作出現(xiàn)問題時(shí)系統(tǒng)應(yīng)給出出錯(cuò)信息和警告，遵循的界面設(shè)計(jì)規(guī)則：信息以用戶可以理解的術(shù)語描述；信息應(yīng)提供如何從錯(cuò)誤中恢復(fù)的建設(shè)性意見；信息應(yīng)指出錯(cuò)誤可能導(dǎo)致那些不良后果，以便用戶檢查是否出現(xiàn)了這些情況或幫助用戶進(jìn)行改正；信息應(yīng)伴隨視覺的提示，如特殊圖像顏色或信息閃爍；信息不能帶有判斷色彩，即任何情況下不能指責(zé)用戶。屏幕上冷冰冰地出現(xiàn)一行文字：“由于類型2錯(cuò)誤，本程序意外終止”。聯(lián)創(chuàng)軟件學(xué)院63UI設(shè)計(jì)規(guī)范出錯(cuò)信息和警告用戶操作出現(xiàn)問題時(shí)系統(tǒng)應(yīng)給出出錯(cuò)UI設(shè)計(jì)規(guī)范常見提示信息常見的提示信息遵循的界面設(shè)計(jì)規(guī)則：當(dāng)操作會(huì)帶來嚴(yán)重后果時(shí)，默認(rèn)按鈕為“否“