用戶體驗、用戶習(xí)慣、交互設(shè)計課件

用戶體驗、用戶習(xí)慣、交互設(shè)計.pptx用戶體驗、用戶習(xí)慣、交互設(shè)計.pptx一、什么是用戶體驗？用戶體驗（UserExperience，簡稱UE）是一種純主觀的在用戶使用一個產(chǎn)品（服務(wù)）的過程中建立起來的心理感受。因為它是純主觀的，就帶有一定的不確定因素。個體差異也決定了每個用戶的真實體驗是無法通過其他途徑來完全模擬或再現(xiàn)的。但是對于一個界定明確的用戶群體來講，其用戶體驗的共性是能夠經(jīng)由良好設(shè)計的實驗來認識到的。一、什么是用戶體驗？用戶體驗（UserExperiencePeterMorville在2004年一篇關(guān)于

用戶體驗的文章，他認為信息架構(gòu)包含了三部分，及用戶(user)、內(nèi)容(content)和上下文(context)。在此基礎(chǔ)上整理出用戶體驗蜂窩圖：二、如何評價用戶體驗的好壞？PeterMorville在2004年價值點有用性滿意度可及性可靠性可發(fā)現(xiàn)性易用性用戶體驗蜂窩圖價值點有用性滿意度可及性可靠性可發(fā)現(xiàn)性易用性用戶體驗蜂窩圖useful(有用性)：產(chǎn)品所包含的功能是否能夠滿足用戶的需求。usable(易用性)：包含易學(xué)性和效率性。desirable(滿意度)：功能是否滿足用戶的各種情感體驗，可參考

情感化設(shè)計。valuable(價值點)：設(shè)計的產(chǎn)品是否有商業(yè)價值。findable(可發(fā)現(xiàn)性)：是否提供良好的導(dǎo)航和定位元素，能很快的找到所需信息，并知道自身所在的位置。accessible(可及性)：更確切的說法是無障礙性。credible(可靠性)：產(chǎn)品是否能讓用戶信任，是否有安全感。useful(有用性)：產(chǎn)品所包含的功能是否能夠滿足用戶的需三、常見的用戶體驗問題1.超長的頁面下載時間如果頁面下載時間超過30秒,很難有用戶會喜歡你的網(wǎng)站2.無限制地使用flash和圖片適當(dāng)?shù)挠靡恍﹫D片及flash,可以增加網(wǎng)站的生動性,增加視覺沖擊力.但無限制的使用flash及圖片.會造成頁面文件超大,占用瀏覽者的cpu資源,并且不利于頁面更新及搜索引擎對網(wǎng)站的抓取。3.網(wǎng)站頁面過長在一個網(wǎng)站的首頁,能看到第三屏內(nèi)容的人只有10%以下，一個過長的網(wǎng)站很容易引起瀏覽者的視覺疲勞,更何況大部分瀏覽者很有可能已經(jīng)被前兩屏的內(nèi)容吸引到別的頁面去了。三、常見的用戶體驗問題1.超長的頁面下載時間2.無限制地使用4.不友好的導(dǎo)航不友好的導(dǎo)航是最影響用戶操作的,不能讓用戶很方便的找到自己想到的內(nèi)容.用戶來到一個頁面不知如何返回上一頁,不知道當(dāng)前頁面是在哪個欄目下的.5.過期的信息6.死連接或連接錯誤7.孤立的頁面用戶不知用什么方法返回首頁.8.頁面沒有視覺差異頁面沒有視覺差異,頁面設(shè)計很"平"缺少"層次感",缺少視覺沖擊力和亮點.或者視覺沖擊力突出的并不是網(wǎng)站的主體內(nèi)容.4.不友好的導(dǎo)航5.過期的信息6.死連接或連接錯誤7.孤立四、用戶瀏覽網(wǎng)頁的習(xí)慣1.對比圖像，文字更具吸引力2.眼球的第一運動聚焦于網(wǎng)頁的左上角3.根據(jù)視覺鎖定，一欄格式比多欄格式擁有更好的表現(xiàn)力4.簡短的段落相對于長段落來說有更好的表現(xiàn)力5.人們大都只瀏覽網(wǎng)頁的小部分內(nèi)容6.用戶瀏覽網(wǎng)頁時，首先觀察網(wǎng)頁的左上部和上層部分，之后再往下閱讀，瀏覽右邊四、用戶瀏覽網(wǎng)頁的習(xí)慣1.對比圖像，文字更具吸引力五、尼爾森F形狀網(wǎng)頁瀏覽模式Step1:用戶會把目光停留在頁面的左上角。Step2:用戶會從左上角第一行橫向瀏覽。Step3:用戶會繼續(xù)往下進行左右橫向瀏覽，但是瀏覽寬度比上一步短了很多。Step4:用戶會從左上角向下進行瀏覽。對照此圖可以得到以下結(jié)論：圖1五、尼爾森F形狀網(wǎng)頁瀏覽模式Step1:用戶會把目光停留在頁尼爾森實驗室經(jīng)過長時間的研究測試，給出了不同類型網(wǎng)站的用戶瀏覽熱圖，用來更加形象生動的解釋這一理論。一般類網(wǎng)頁商務(wù)類網(wǎng)頁搜索類網(wǎng)頁三個不同類型網(wǎng)頁熱圖，紅色是瀏覽者停留時間最長的區(qū)域，黃色次之，藍色表示較少關(guān)注，灰色基本不關(guān)注?？梢钥吹饺龔垷釄D都表現(xiàn)出了F形狀。尼爾森實驗室經(jīng)過長時間的研究測試，給出了不同類型網(wǎng)站不同的應(yīng)用：作為廣告商：主要目的是宣傳，引起關(guān)注。1.依據(jù)F形狀網(wǎng)頁瀏覽熱圖，網(wǎng)頁頂部和左邊的廣告更能吸引眼球。2.現(xiàn)在培養(yǎng)的客戶都會對類似廣告的圖片或文字視覺上本能地忽略，因此廣告不易太花哨。3.研究表明，讀者常忽視大部分的橫幅廣告，視線往往只停留幾分之一秒。因此需創(chuàng)新廣告位，合理配置網(wǎng)站廣告形式。對于信息類網(wǎng)站：主要目的是傳達讀者感興趣的信息，以保持足夠的網(wǎng)站吸引力。1.讀者在閱讀文章的時候并不是逐字逐句，而會習(xí)慣跳躍掃視，因此，關(guān)鍵信息Highlight出來更易于讀者把握重要信息。2.標(biāo)題的設(shè)置要精煉，且要傳達足夠的信息量。這是讀者決定是否閱讀這篇文章的關(guān)鍵。另還可增加副標(biāo)題作為補充，如果副標(biāo)題仍不夠吸引，基本上我們就不會感興趣去點擊了。不同的應(yīng)用：作為廣告商：主要目的是宣傳，引起關(guān)注。六、2013年交互設(shè)計的主流—扁平化設(shè)計扁平化設(shè)計擬扁平化設(shè)計長投影設(shè)計1.扁平化設(shè)計從整體的角度來講，扁平化設(shè)計是一種極簡主義美學(xué)，附以明亮柔和的色彩，最后配上粗重醒目，而風(fēng)格又復(fù)古的字體。扁平化設(shè)計簡化了諸如按鈕、圖標(biāo)一類的界面元素。大圖片取代了動效。

“扁平化設(shè)計”有著鮮明的視覺效果,整個界面的配色平均會采用到6-8種顏色(這個對于開發(fā)團隊的挑戰(zhàn)極大)，頁面效果更加絢麗、明亮。它所使用的元素之間有著清晰的層次和布局，這使得用戶能直觀的了解每個元素的作用以及交互方式。在需要展現(xiàn)強大信息流的界面內(nèi)，它讓用戶最大程度地減少學(xué)習(xí)使用成本。僅僅憑借用戶的直覺就大概能夠明白每個對象、按鈕的作用。六、2013年交互設(shè)計的主流—扁平化設(shè)計扁平化設(shè)計擬扁平化設(shè)↑扁平化大圖↓扁平化圖標(biāo)↑扁平化大圖↓扁平化圖標(biāo)2.擬扁平化設(shè)計“似扁平化設(shè)計”(AlmostFlatDesign)是以扁平化設(shè)計為基礎(chǔ)，但是添加了一些簡單的效果，比如簡單的投影，基本的漸變。3.長投影設(shè)計“長投影設(shè)計”圖標(biāo)設(shè)計中使用較多，一般是一道45度角的陰影從圖標(biāo)中延伸而出，最近的圖標(biāo)設(shè)計，大部分都采用”長投影設(shè)計”。2.擬扁平化設(shè)計“類扁平化設(shè)計”已成為一種必然趨勢，它到底好在哪里？1.具備非常好的兼容性，能很好的適配到不同的終端上。2.具備優(yōu)秀的組織和展現(xiàn)信息的能力，把紛繁復(fù)雜的內(nèi)容和功能有效的組織起來，以簡單但合理的方式排列，最終使用戶界面變得簡單易用。3.更適合屏幕較小的智能終端，它有更少的按鈕和選項，使整個界面干凈整潔、條理清晰，讓用戶減少認知障礙，降低用戶的學(xué)習(xí)成本?！邦惐馄交O(shè)計”已成為一種必然趨勢，它到底好在哪里？1.具備用戶體驗、用戶習(xí)慣、交互設(shè)計.pptx用戶體驗、用戶習(xí)慣、交互設(shè)計.pptx一、什么是用戶體驗？用戶體驗（UserExperience，簡稱UE）是一種純主觀的在用戶使用一個產(chǎn)品（服務(wù)）的過程中建立起來的心理感受。因為它是純主觀的，就帶有一定的不確定因素。個體差異也決定了每個用戶的真實體驗是無法通過其他途徑來完全模擬或再現(xiàn)的。但是對于一個界定明確的用戶群體來講，其用戶體驗的共性是能夠經(jīng)由良好設(shè)計的實驗來認識到的。一、什么是用戶體驗？用戶體驗（UserExperiencePeterMorville在2004年一篇關(guān)于

用戶體驗的文章，他認為信息架構(gòu)包含了三部分，及用戶(user)、內(nèi)容(content)和上下文(context)。在此基礎(chǔ)上整理出用戶體驗蜂窩圖：二、如何評價用戶體驗的好壞？PeterMorville在2004年價值點有用性滿意度可及性可靠性可發(fā)現(xiàn)性易用性用戶體驗蜂窩圖價值點有用性滿意度可及性可靠性可發(fā)現(xiàn)性易用性用戶體驗蜂窩圖useful(有用性)：產(chǎn)品所包含的功能是否能夠滿足用戶的需求。usable(易用性)：包含易學(xué)性和效率性。desirable(滿意度)：功能是否滿足用戶的各種情感體驗，可參考

情感化設(shè)計。valuable(價值點)：設(shè)計的產(chǎn)品是否有商業(yè)價值。findable(可發(fā)現(xiàn)性)：是否提供良好的導(dǎo)航和定位元素，能很快的找到所需信息，并知道自身所在的位置。accessible(可及性)：更確切的說法是無障礙性。credible(可靠性)：產(chǎn)品是否能讓用戶信任，是否有安全感。useful(有用性)：產(chǎn)品所包含的功能是否能夠滿足用戶的需三、常見的用戶體驗問題1.超長的頁面下載時間如果頁面下載時間超過30秒,很難有用戶會喜歡你的網(wǎng)站2.無限制地使用flash和圖片適當(dāng)?shù)挠靡恍﹫D片及flash,可以增加網(wǎng)站的生動性,增加視覺沖擊力.但無限制的使用flash及圖片.會造成頁面文件超大,占用瀏覽者的cpu資源,并且不利于頁面更新及搜索引擎對網(wǎng)站的抓取。3.網(wǎng)站頁面過長在一個網(wǎng)站的首頁,能看到第三屏內(nèi)容的人只有10%以下，一個過長的網(wǎng)站很容易引起瀏覽者的視覺疲勞,更何況大部分瀏覽者很有可能已經(jīng)被前兩屏的內(nèi)容吸引到別的頁面去了。三、常見的用戶體驗問題1.超長的頁面下載時間2.無限制地使用4.不友好的導(dǎo)航不友好的導(dǎo)航是最影響用戶操作的,不能讓用戶很方便的找到自己想到的內(nèi)容.用戶來到一個頁面不知如何返回上一頁,不知道當(dāng)前頁面是在哪個欄目下的.5.過期的信息6.死連接或連接錯誤7.孤立的頁面用戶不知用什么方法返回首頁.8.頁面沒有視覺差異頁面沒有視覺差異,頁面設(shè)計很"平"缺少"層次感",缺少視覺沖擊力和亮點.或者視覺沖擊力突出的并不是網(wǎng)站的主體內(nèi)容.4.不友好的導(dǎo)航5.過期的信息6.死連接或連接錯誤7.孤立四、用戶瀏覽網(wǎng)頁的習(xí)慣1.對比圖像，文字更具吸引力2.眼球的第一運動聚焦于網(wǎng)頁的左上角3.根據(jù)視覺鎖定，一欄格式比多欄格式擁有更好的表現(xiàn)力4.簡短的段落相對于長段落來說有更好的表現(xiàn)力5.人們大都只瀏覽網(wǎng)頁的小部分內(nèi)容6.用戶瀏覽網(wǎng)頁時，首先觀察網(wǎng)頁的左上部和上層部分，之后再往下閱讀，瀏覽右邊四、用戶瀏覽網(wǎng)頁的習(xí)慣1.對比圖像，文字更具吸引力五、尼爾森F形狀網(wǎng)頁瀏覽模式Step1:用戶會把目光停留在頁面的左上角。Step2:用戶會從左上角第一行橫向瀏覽。Step3:用戶會繼續(xù)往下進行左右橫向瀏覽，但是瀏覽寬度比上一步短了很多。Step4:用戶會從左上角向下進行瀏覽。對照此圖可以得到以下結(jié)論：圖1五、尼爾森F形狀網(wǎng)頁瀏覽模式Step1:用戶會把目光停留在頁尼爾森實驗室經(jīng)過長時間的研究測試，給出了不同類型網(wǎng)站的用戶瀏覽熱圖，用來更加形象生動的解釋這一理論。一般類網(wǎng)頁商務(wù)類網(wǎng)頁搜索類網(wǎng)頁三個不同類型網(wǎng)頁熱圖，紅色是瀏覽者停留時間最長的區(qū)域，黃色次之，藍色表示較少關(guān)注，灰色基本不關(guān)注?？梢钥吹饺龔垷釄D都表現(xiàn)出了F形狀。尼爾森實驗室經(jīng)過長時間的研究測試，給出了不同類型網(wǎng)站不同的應(yīng)用：作為廣告商：主要目的是宣傳，引起關(guān)注。1.依據(jù)F形狀網(wǎng)頁瀏覽熱圖，網(wǎng)頁頂部和左邊的廣告更能吸引眼球。2.現(xiàn)在培養(yǎng)的客戶都會對類似廣告的圖片或文字視覺上本能地忽略，因此廣告不易太花哨。3.研究表明，讀者常忽視大部分的橫幅廣告，視線往往只停留幾分之一秒。因此需創(chuàng)新廣告位，合理配置網(wǎng)站廣告形式。對于信息類網(wǎng)站：主要目的是傳達讀者感興趣的信息，以保持足夠的網(wǎng)站吸引力。1.讀者在閱讀文章的時候并不是逐字逐句，而會習(xí)慣跳躍掃視，因此，關(guān)鍵信息Highlight出來更易于讀者把握重要信息。2.標(biāo)題的設(shè)置要精煉，且要傳達足夠的信息量。這是讀者決定是否閱讀這篇文章的關(guān)鍵。另還可增加副標(biāo)題作為補充，如果副標(biāo)題仍不夠吸引，基本上我們就不會感興趣去點擊了。不同的應(yīng)用：作為廣告商：主要目的是宣傳，引起關(guān)注。六、2013年交互設(shè)計的主流—扁平化設(shè)計扁平化設(shè)計擬扁平化設(shè)計長投影設(shè)計1.扁平化設(shè)計從整體的角度來講，扁平化設(shè)計是一種極簡主義美學(xué)，附以明亮柔和的色彩，最后配上粗重醒目，而風(fēng)格又復(fù)古的字體。扁平化設(shè)計簡化了諸如按鈕、圖標(biāo)一類的界面元素。大圖片取代了動效。

“扁平化設(shè)計”有著鮮明的視覺效果