軟件工程之界面設(shè)計(jì)篇

《軟件工程之界面設(shè)計(jì)篇》由會(huì)員分享，可在線閱讀，更多相關(guān)《軟件工程之界面設(shè)計(jì)篇（58頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

1、Better User Experience Colourful Future 用 戶 體 驗(yàn) 、 交 互 設(shè) 計(jì) 及 案 例 介 紹 幾 張 看 似 不 相 關(guān) 的 圖 片 幾 個(gè) 網(wǎng) 站 主 要 內(nèi) 容 用戶體驗(yàn)？交互設(shè)計(jì)？設(shè)計(jì)？ 實(shí)現(xiàn)模型和心理模型 用戶體驗(yàn)與交互設(shè)計(jì)基本原則介紹 交互細(xì)節(jié)案例介紹 小任務(wù) 交互設(shè)計(jì)所需要技能 概 念 區(qū) 分 用戶體驗(yàn)：UE 用戶體驗(yàn)并不是指產(chǎn)品本身是如何工作的，而是指產(chǎn)品如何和外界聯(lián)系并發(fā)揮作用，也就是人們?nèi)绾巍敖佑|“或者“使用”它。 Web中的用戶體驗(yàn)是指用戶在訪問(wèn)平臺(tái)的過(guò)程中的全部體驗(yàn)，它包括平臺(tái)是否有用，疑惑或者bug程度，功能是否易用、簡(jiǎn)約，界面

2、設(shè)計(jì)和交互設(shè)計(jì)是否友好等方面。用戶體驗(yàn)的核心是UCD，即“以用戶為中心的設(shè)計(jì)”。 “AJAX之父”的Jesse James Garrett早在2000年就提出了以用戶為中心的Web設(shè)計(jì)的流程和用戶體驗(yàn)的要素 交 互 設(shè) 計(jì) 交互：用戶通過(guò)某種方式發(fā)出指令，且系統(tǒng)對(duì)此作出相應(yīng)的反應(yīng) 交互設(shè)計(jì)是關(guān)于創(chuàng)建新的用戶體驗(yàn)的問(wèn)題，目的在于增強(qiáng)和擴(kuò)充人們的工作、通信及交互方式，使他們能夠更加有效地進(jìn)行日常工作和學(xué)習(xí)。 UI設(shè) 計(jì) User Interface Design 用戶界面設(shè)計(jì)，在很大程度上就是在探討如何讓產(chǎn)品的界面更加具有可用性，如何讓用戶有更良好的體驗(yàn)。這是一種優(yōu)化后的界面，通過(guò)這種界面，用戶能

3、更方面地完成任務(wù)，獲得良好的感覺(jué)。 例如：一個(gè)按鈕的設(shè)計(jì)，美工設(shè)計(jì)考慮如何好看，而用戶界面設(shè)計(jì)師則考慮按鈕如何擺放，上面顯示什么文字，甚至到底要不要這個(gè)按鈕的問(wèn)題。 軟 件 設(shè) 計(jì) ， 設(shè) 計(jì) ， 交 互 設(shè) 計(jì) 軟件設(shè)計(jì)的藝術(shù)Terry Winograd (2004年度的ACM人機(jī)交互院士)開(kāi)發(fā)軟件建房子土木工程師裝修設(shè)計(jì)師 建筑設(shè)計(jì)師軟件設(shè)計(jì)設(shè)計(jì)交互設(shè)計(jì) 實(shí) 現(xiàn) 模 型 和 心 理 模 型心 理模 型 表 現(xiàn)模 型 實(shí) 現(xiàn)模 型容易使用，體驗(yàn)良好 記憶負(fù)擔(dān)，體驗(yàn)較差最好的技術(shù)是消失在生活當(dāng)中的技術(shù) 幾 個(gè) 通 用 的 原 則 就進(jìn)設(shè)計(jì)原則對(duì)功能進(jìn)行恰當(dāng)?shù)姆诸?lèi)和組織 幫 助 用 戶 探 索

4、和 嘗 試 允 許 用 戶 犯 錯(cuò) 誤 讓用戶可以撤銷(xiāo)動(dòng)作 在執(zhí)行具體的破壞性操作中要求用戶確認(rèn)。 提 供 實(shí) 用 的 幫 助 設(shè)計(jì)幫助系統(tǒng) 入門(mén)和學(xué)習(xí)部分 使用指南 參考手冊(cè) 疑難解答 術(shù)語(yǔ)解釋 語(yǔ)言表達(dá)：采用具體的例子，幫助用戶理解 表達(dá)方式：按照使用流程來(lái)。 設(shè) 計(jì) 一 個(gè) 優(yōu) 秀 的 向 導(dǎo) 式 界 面 幫 助 用 戶 高 效 地 完 成 操 作支持批處理操作（google的picasa圖像處理軟件）提高常用操作的效率4A中的作業(yè)模塊 布 置 手 工 作 業(yè) 流 程 使 界 面 符 合 用 戶 的 使 用 習(xí) 慣 被動(dòng)調(diào)整策略：例如功能定制，界面定制 主動(dòng)自適應(yīng)調(diào)整策略：例如sogou

5、拼音輸入法 根據(jù)其他用戶的使用行為來(lái)主動(dòng)進(jìn)行自適應(yīng)調(diào)整 購(gòu)物網(wǎng)中，購(gòu)買(mǎi)這本書(shū)的用戶還購(gòu)買(mǎi)了以下書(shū)， 在長(zhǎng)尾理論中安德森叫過(guò)濾器法則，它是長(zhǎng)尾現(xiàn)象形成的一個(gè)因素 介于主動(dòng)自適應(yīng)和被動(dòng)調(diào)整之間的混合策略 減 少 用 戶 在 使 用 軟 件 時(shí) 出 現(xiàn) 錯(cuò) 誤 （ 一 ） 讓用戶能有效地看出或者知道如何進(jìn)行正確操作 減少用戶記憶的負(fù)擔(dān)； 自然匹配和預(yù)設(shè)用途； 盡可能采取一致性的設(shè)計(jì) 采用限制級(jí)因素防止用戶出錯(cuò) 減 少 用 戶 在 使 用 軟 件 時(shí) 出 現(xiàn) 錯(cuò) 誤 （ 一 ） 利用某種方式提醒用戶可能出錯(cuò) 如何設(shè)置出錯(cuò)信息 不要只告訴用戶操作無(wú)法完成或者操作失敗 不要僅僅給出出錯(cuò)代碼，還應(yīng)當(dāng)給出該錯(cuò)

6、誤的含義 不要在出錯(cuò)信息中使用用戶無(wú)法理解的術(shù)語(yǔ) 錯(cuò)誤要盡可能明確 錯(cuò)誤信息要有建設(shè)性，要讓用戶 看出怎樣才是正確的 不要給出誤導(dǎo)性的出錯(cuò)信息 向用戶提出解決問(wèn)題的建議 減 少 用 戶 的 等 待 感 Robert B miller 1968 Response time in man-computer conversational transactions 0.1秒鐘、1秒鐘、10秒鐘 總 結(jié) 就進(jìn)設(shè)計(jì)原則 對(duì)功能進(jìn)行組織和分類(lèi) 幫助用戶探索和嘗試 允許用戶犯錯(cuò) 提供實(shí)用的幫助 設(shè)計(jì)一個(gè)優(yōu)秀的向?qū)Ы缑?使界面符合用戶的使用習(xí)慣 減少用戶出錯(cuò) 減少等待感 交 互 細(xì) 節(jié) 案 例 介 紹 案 例

7、一 Tecent 交互設(shè)計(jì)Dont make me think “返回”的位置和做法很重要：這是整個(gè)QQMail的交互的“樞紐”，如同圍棋中的“玉柱”，也定義了郵箱的交互風(fēng)格。 幫用戶自動(dòng)選中：在輸入獨(dú)立密碼或加密folder輸入密碼時(shí)錯(cuò)誤后，應(yīng)該把輸入框內(nèi)的內(nèi)容select上，這樣就可以直接打入而不用清除了 光標(biāo)定位：之前的點(diǎn)回復(fù)時(shí)光標(biāo)focus到正文的問(wèn)題改好了,但卻沒(méi)有注意到點(diǎn)轉(zhuǎn)發(fā)時(shí)光標(biāo),反而應(yīng)是在收件人處而不是正文處, 因?yàn)橐话憧傄顚?xiě)轉(zhuǎn)發(fā)人, 而回復(fù)(包括回復(fù)全部)則是直接輸入內(nèi)容. 交 互 設(shè) 計(jì) 符 合 用 戶 習(xí) 慣 與 預(yù) 期 先字母排序，再優(yōu)先顯示最近聯(lián)系人，減少鍵盤(pán)操作。

8、 交 互 設(shè) 計(jì) 符 合 用 戶 習(xí) 慣 與 預(yù) 期 兼容客戶端郵件菜單習(xí)慣 在用TT或QQ/TM/RTX截屏后的圖,mail原來(lái)在寫(xiě)信時(shí)用Ctrl-V可以貼出來(lái)，但右鍵則不能。 不隨意去掉用戶正在使用的功能 原來(lái)mail在做出了“HTML方式查看”后，去掉了“打開(kāi)”功能 符合用戶預(yù)期 點(diǎn)擊其他地方，WEBQQ的浮動(dòng)窗口隱藏到固定位置 交 互 設(shè) 計(jì) 適 時(shí) 的 提 醒 沒(méi)必要的提醒不需要出現(xiàn) 而適時(shí)出現(xiàn)的提示或功能，用得好，不但不會(huì)騷擾用戶，還是對(duì)用戶的細(xì)致的關(guān)懷 交 互 設(shè) 計(jì) 操 作 便 利 QQ魔法表情 交 互 設(shè) 計(jì) 操 作 便 利 問(wèn)卷星的設(shè)計(jì)頁(yè)面 視 覺(jué) 設(shè) 計(jì) 制 定 規(guī) 范

9、， 維 持 統(tǒng) 一 文字使用要規(guī)范，語(yǔ)法，大小，顏色，大小寫(xiě)都需要注意 能用一個(gè)詞表達(dá)的，不用一句話。能用一句話表達(dá)清楚的，不用兩句話 每個(gè)概念都只有唯一一種表達(dá)。如”VIP”的概念 能用一種字體顏色的，不多用一種顏色 能用一種字體大小的，不多用一種大小 視 覺(jué) 設(shè) 計(jì) 防 止 不 恰 當(dāng) 的 低 齡 化 在追求“簡(jiǎn)單”的過(guò)程中，QQMail不知不覺(jué)的變得“中性”、“成熟”化。 當(dāng)我們更加理性和嚴(yán)謹(jǐn)?shù)卦O(shè)計(jì)產(chǎn)品的時(shí)候，自然會(huì)遠(yuǎn)離“低齡”傾向?！俺墒臁痹醋院侠淼脑O(shè)計(jì)，“低齡”源自不合常理的設(shè)計(jì)。 不恰當(dāng)?shù)牡妄g化 交 互 設(shè) 計(jì) 尋 求 最 佳 方 案 爭(zhēng)執(zhí)： 騰訊QQ可以稱(chēng)得上及時(shí)通訊的老大，以前

10、往往看到的是騰訊的界面是多么的友好等等的贊美。但是一次偶爾的操作，發(fā)現(xiàn)騰訊的不完美，也可以說(shuō)是很大的失敗。 在QQ更改密碼的時(shí)候出現(xiàn)了要求在同一IP段才能修改，但是我想問(wèn)下，現(xiàn)在也不是所有互聯(lián)網(wǎng)用戶都會(huì)用電信或者網(wǎng)通。其實(shí)有很大一部分是用的其他網(wǎng)絡(luò)提供商的寬帶接入。這樣也就導(dǎo)致了隨機(jī)IP段產(chǎn)生。那么請(qǐng)問(wèn)他們?cè)趺葱薷拿艽a？ 他這么做也不在呼就是為了防止盜號(hào)的行為，但是即使這樣樣不應(yīng)該犧牲用戶的易操作性。為了防止盜號(hào)的行為還有很多其他方法。 個(gè)人覺(jué)得騰訊這樣做不是很好。希望大家發(fā)表一下自己的看法參考地址：http:/ 騰 訊 用 戶 體 驗(yàn) 室 騰 訊 用 戶 體 驗(yàn) 總 結(jié) Dont make

11、me think 符合用戶習(xí)慣與預(yù)期 做適時(shí)的提醒 不強(qiáng)迫用戶 選擇最佳方案 操作便利 觀 看 并 點(diǎn) 評(píng) 一 下 兩 個(gè) 視 頻 QQ 概念版http:/ Soso future http:/ 案 例 二 網(wǎng) 易 郵 箱 注 冊(cè) 初 體 驗(yàn) 注冊(cè)一個(gè)新的網(wǎng)易郵箱，請(qǐng)分析該郵箱在交互方面做的比較好的點(diǎn)，并指出可以供我們借鑒的地方。 并試著給自己發(fā)送幾個(gè)帶圖片的附件的郵件，感受其友好性。 網(wǎng) 易 體 驗(yàn) Amazon 重 點(diǎn) 突 出 明確強(qiáng)調(diào)產(chǎn)品搜索和在線購(gòu)買(mǎi) 一旦建立了網(wǎng)站的產(chǎn)品搜索與網(wǎng)上購(gòu)物等功能，用戶最有可能想利用這些特性的優(yōu)勢(shì)馬上開(kāi)始搜索。 動(dòng)態(tài)地定制用戶體驗(yàn) 亞馬遜使用Cookie來(lái)記

12、錄用戶登錄，而對(duì)用戶的購(gòu)物習(xí)慣進(jìn)行跟蹤并存儲(chǔ)到服務(wù)器端。 它以事先進(jìn)行搜索，網(wǎng)頁(yè)瀏覽，愿望清單添加，評(píng)價(jià)填寫(xiě)為基礎(chǔ)，并達(dá)到最終購(gòu)買(mǎi)目的。 相關(guān)產(chǎn)品顯示 基于先前行為的推薦產(chǎn)品 只要瀏覽器的cookies保持不變,這種定制相同類(lèi)型的內(nèi)容就會(huì)在隨后的訪問(wèn)中一連串出現(xiàn)： 各種”為什么我們購(gòu)物”的提示 亞馬遜購(gòu)物體驗(yàn)充斥著為何用戶應(yīng)該從亞馬遜購(gòu)買(mǎi)的提醒,而不是充斥著從其他來(lái)源（在線或其他方式）的提醒。 與市場(chǎng)零售價(jià)對(duì)比 用戶早先被通知“免費(fèi)送貨” 逼 真 圖 書(shū) 的 預(yù) 覽 和 內(nèi) 部 查 找 功 能 可 定 制 的 歷 史 推 薦瀏 覽 所 有 產(chǎn) 品 的 查 看 歷 史 記 錄 都 可 以 修 改

13、 。 看 一 看下 面 的 圖 片 。 方 便 的 導(dǎo) 航 元 素（ 1） （ 2） （ 5）（ 3）（ 4） 人 性 化 的 PayPhase 輸入一句話 輕松在線支付 買(mǎi)家可以把姓名/地址/付款資料通用一個(gè)句子與密碼存儲(chǔ)起來(lái)。結(jié)賬時(shí)，你只需要輸入你自設(shè)的這個(gè)句子與密碼即可 在線購(gòu)物程序的簡(jiǎn)化將會(huì)使得用戶更多地使用在線購(gòu)物方式購(gòu)買(mǎi)商品。據(jù)調(diào)查，在此之前有半數(shù)以上的網(wǎng)民已經(jīng)將商品放進(jìn)虛擬購(gòu)物車(chē)，但到最后因?yàn)橹Ц哆^(guò)程過(guò)于繁瑣而放棄購(gòu)物。 易 于 篩 選 和 用 戶 評(píng) 價(jià) 比 較 方便地訪問(wèn)正面和負(fù)面評(píng)論 讓 用 戶 感 到 舒 適 亞 馬 遜 購(gòu) 物 體 驗(yàn) 總 結(jié) 把握住網(wǎng)站的焦點(diǎn) 只要有可

14、能，應(yīng)該為每個(gè)用戶提供個(gè)性化內(nèi)容。 給予用戶為什么做出次選擇的指導(dǎo)。 讓用戶盡可能多的接觸到產(chǎn)品（內(nèi)容）。 不要讓用戶感到有些產(chǎn)品/服務(wù)正在強(qiáng)迫他們購(gòu)買(mǎi) 在適當(dāng)?shù)臅r(shí)候可輕松地訪問(wèn)重要部分。 在任何時(shí)候讓顧客感到舒服和可控。 Jakob Nielson博 士 交 互 設(shè) 計(jì) 的 十 項(xiàng) 原 則 1.讓用戶隨時(shí)了解系統(tǒng)的狀態(tài) 例如導(dǎo)入導(dǎo)出的提示功能 2.系統(tǒng)應(yīng)該與真實(shí)世界相符合（使用用戶慣用的詞匯和概念） 3.給用戶控制權(quán)和自主權(quán) 當(dāng)系統(tǒng)出錯(cuò)或者誤操作后能夠緊急退出。4.提倡一致性和標(biāo)準(zhǔn)化 相似的任務(wù)提供相似的元素 5.幫助用戶診斷、識(shí)別和恢復(fù)錯(cuò)誤。告訴用戶大概的原因和解決辦法 6.預(yù)防錯(cuò)誤 7.

15、依賴于識(shí)別而不是記憶 8強(qiáng)調(diào)實(shí)用的靈活性和有效性：輸入搜索內(nèi)容后直接按回車(chē)鍵就能搜索而不一定要點(diǎn)擊搜索圖標(biāo)。 9最小化設(shè)計(jì) 10.提供幫助及文檔 Ben Shneiderman交 互 設(shè) 計(jì) 原 則 性 力求一致性：高度一致性的界面能夠給人清晰和整體的感覺(jué)。 提供明確的反饋 設(shè)計(jì)對(duì)話，告訴用戶任務(wù)已經(jīng)完成 提供錯(cuò)誤預(yù)防和簡(jiǎn)單的糾錯(cuò)功能 應(yīng)該方便用戶取消某個(gè)操作 用戶應(yīng)掌握控制權(quán)（授課計(jì)劃的跳過(guò)該動(dòng)畫(huà)） 減輕用戶的記憶負(fù)擔(dān) 小 任 務(wù) 請(qǐng)根據(jù)前面提到的原則，找出4A或者是學(xué)習(xí)超市設(shè)計(jì)上存在的一到兩個(gè)問(wèn)題，截圖并加以文字說(shuō)明，以作品發(fā)布的形式發(fā)表在序列化活動(dòng)中。 交 互 設(shè) 計(jì) 需 要 哪 些 能

16、 力 和 技 術(shù) ？ 交互設(shè)計(jì)師 Interaction Designer 1.有相關(guān)工作經(jīng)歷和作品者優(yōu)先；2.對(duì)各種常用軟件有強(qiáng)烈興趣并有靈敏觸覺(jué)，富有創(chuàng)造力和激情，并有動(dòng)手實(shí)踐良好習(xí)慣；3.邏輯思維能力強(qiáng)，熟練掌握業(yè)務(wù)需求分析、產(chǎn)品需求分解的技巧；4.有大局觀，可以在復(fù)雜的約束條件下找到平衡或創(chuàng)新的方法；5.主動(dòng)性高，具優(yōu)秀的理解、溝通與協(xié)調(diào)能力，很強(qiáng)的文字表達(dá)能力；個(gè)性樂(lè)觀開(kāi)朗，善于和各種背景的人合作；6.對(duì)交互設(shè)計(jì)過(guò)程有深入了解，能熟練應(yīng)用站點(diǎn)結(jié)構(gòu)圖、流程圖等交互設(shè)計(jì)方法；7.有相關(guān)崗位的技術(shù)和技能，如視覺(jué)設(shè)計(jì)、XHTML/CSS等；8.熟悉動(dòng)畫(huà)制作、高仿真原型制作者優(yōu)先；9.主動(dòng)性高

17、，具優(yōu)秀的理解、溝通與協(xié)調(diào)能力，文字表達(dá)能力強(qiáng)；10.有良好的英文閱讀能力，英文六級(jí)優(yōu)先； 11.工業(yè)設(shè)計(jì)、計(jì)算機(jī)、軟件工程、心理學(xué)等相關(guān)專(zhuān)業(yè)本科及以上學(xué)歷。 工作職責(zé)：1.參與產(chǎn)品規(guī)劃構(gòu)思和創(chuàng)意過(guò)程；2.分析業(yè)務(wù)需求，并加以分解和歸納出產(chǎn)品人機(jī)交互界面需求；3.設(shè)計(jì)軟件的人機(jī)交互界面結(jié)構(gòu)、用戶操作流程等；4.參與公司前瞻性產(chǎn)品的創(chuàng)意設(shè)計(jì)；5.制作相關(guān)仿真原型。 1. 交互設(shè)計(jì)的經(jīng)驗(yàn)，或多或少，當(dāng)然經(jīng)驗(yàn)豐富者優(yōu)先。 2. 給出高質(zhì)量的產(chǎn)品原型，流程圖，線框圖，清晰的表達(dá)自己的設(shè)計(jì)方案。 3. 優(yōu)秀的溝通和協(xié)調(diào)能力，能準(zhǔn)確的挖掘用戶需求，結(jié)合商業(yè)目標(biāo)，快速調(diào)整設(shè)計(jì)方案，并獲得最終的認(rèn)可。 4.

18、良好的視覺(jué)設(shè)計(jì)能力，Photoshop，Dreamweaver等設(shè)計(jì)工具熟練運(yùn)用，能給出高保真度的原型。熟悉XHTML，Javascript，ActionScript 者優(yōu)先。 5. 基本的程序開(kāi)發(fā)知識(shí)，確保你在前期設(shè)計(jì)時(shí)能綜合開(kāi)發(fā)成本，給出高效可行的設(shè)計(jì)方案。 6. 人機(jī)交互，軟件工程，工業(yè)設(shè)計(jì)，視覺(jué)傳達(dá)，或者相關(guān)設(shè)計(jì)學(xué)科的學(xué)歷。我們并不注重學(xué)歷，當(dāng)然高學(xué)歷者優(yōu)先。 7. 英文，能閱讀專(zhuān)業(yè)資料，能應(yīng)付日常工作中和外籍同事的交流。（日文也可以，我們也在招日文站的設(shè)計(jì)師。） 8. 在各個(gè)有趣的網(wǎng)站都有自己的注冊(cè)帳號(hào)。眼界是能力的基礎(chǔ)。 9. 最重要的一條：學(xué)習(xí)的心態(tài)！ 參 考 資 料 Jesse

19、 James Garrett著,范曉燕譯.用戶體驗(yàn)的要素M.北京:機(jī)械工業(yè)出版社.2007,(9) Blackboard NG網(wǎng)站OL . http:/ (美國(guó)) Alan Cooper. Robert Reimann. David Cronin . About Face3: The Essentials of Interaction DesignM.電子工業(yè)出版社.2008(11) Robert Hoekman，Jr著，何瀟譯 一目了然，Web軟件顯性設(shè)計(jì)之路.機(jī)械工業(yè)出版社 。2007.8 張亮。細(xì)節(jié)決定交互設(shè)計(jì)的成敗。電子工業(yè)出版社。2009.3 產(chǎn)品設(shè)計(jì)和用戶體驗(yàn) 馬化騰 亞馬遜購(gòu)物網(wǎng)體驗(yàn)分析 向怡寧.就這么簡(jiǎn)單web開(kāi)發(fā)中的可用性和用戶體驗(yàn).清華大學(xué)出版社.2008(6) RB Miller Response time in man-computer conversational transactions. Proceedings of the December 9-11, 1968 Tencent CDC Blog，