1、用戶(hù)體驗(yàn)交互設(shè)計(jì)用戶(hù)習(xí)慣一、什么是用戶(hù)體驗(yàn)？用戶(hù)體驗(yàn)（User Experience，簡(jiǎn)稱(chēng)UE）是一種純主觀(guān)的在用戶(hù)使用一個(gè)產(chǎn)品（服務(wù)）的過(guò)程中建立起來(lái)的心理感受。因?yàn)樗羌冎饔^(guān)的，就帶有一定的不確定因素。個(gè)體差異也決定了每個(gè)用戶(hù)的真實(shí)體驗(yàn)是無(wú)法通過(guò)其他途徑來(lái)完全模擬或再現(xiàn)的。但是對(duì)于一個(gè)界定明確的用戶(hù)群體來(lái)講，其用戶(hù)體驗(yàn)的共性是能夠經(jīng)由良好設(shè)計(jì)的實(shí)驗(yàn)來(lái)認(rèn)識(shí)到的。 Peter Morville 在2004年一篇關(guān)于 用戶(hù)體驗(yàn)的文章，他認(rèn)為信息架構(gòu)包含了三部分，及用戶(hù)(user)、內(nèi)容(content)和上下文(context)。在此基礎(chǔ)上整理出用戶(hù)體驗(yàn)蜂窩圖：二、如何評(píng)價(jià)用戶(hù)體驗(yàn)的好壞？?jī)r(jià)值點(diǎn)

2、有用性滿(mǎn)意度可及性可靠性可發(fā)現(xiàn)性易用性用戶(hù)體驗(yàn)蜂窩圖useful(有用性)：產(chǎn)品所包含的功能是否能夠滿(mǎn)足用戶(hù)的需求。usable(易用性)：包含易學(xué)性和效率性。desirable(滿(mǎn)意度)：功能是否滿(mǎn)足用戶(hù)的各種情感體驗(yàn)，可參考 情感化設(shè)計(jì)。valuable(價(jià)值點(diǎn))：設(shè)計(jì)的產(chǎn)品是否有商業(yè)價(jià)值。findable(可發(fā)現(xiàn)性)：是否提供良好的導(dǎo)航和定位元素，能很快的找到所需信息，并知道自身所在的位置。accessible(可及性)：更確切的說(shuō)法是無(wú)障礙性。credible(可靠性)：產(chǎn)品是否能讓用戶(hù)信任，是否有安全感。三、常見(jiàn)的用戶(hù)體驗(yàn)問(wèn)題1.超長(zhǎng)的頁(yè)面下載時(shí)間如果頁(yè)面下載時(shí)間超過(guò)30秒,很難有用

3、戶(hù)會(huì)喜歡你的網(wǎng)站2.無(wú)限制地使用flash和圖片適當(dāng)?shù)挠靡恍﹫D片及flash,可以增加網(wǎng)站的生動(dòng)性,增加視覺(jué)沖擊力.但無(wú)限制的使用flash及圖片.會(huì)造成頁(yè)面文件超大,占用瀏覽者的cpu資源,并且不利于頁(yè)面更新及搜索引擎對(duì)網(wǎng)站的抓取。3.網(wǎng)站頁(yè)面過(guò)長(zhǎng)在一個(gè)網(wǎng)站的首頁(yè),能看到第三屏內(nèi)容的人只有10%以下 ，一個(gè)過(guò)長(zhǎng)的網(wǎng)站很容易引起瀏覽者的視覺(jué)疲勞,更何況大部分瀏覽者很有可能已經(jīng)被前兩屏的內(nèi)容吸引到別的頁(yè)面去了。4. 不友好的導(dǎo)航不友好的導(dǎo)航是最影響用戶(hù)操作的, 不能讓用戶(hù)很方便的找到自己想到的內(nèi)容.用戶(hù)來(lái)到一個(gè)頁(yè)面不知如何返回上一頁(yè),不知道當(dāng)前頁(yè)面是在哪個(gè)欄目下的.5.過(guò)期的信息6.死連接或連接

4、錯(cuò)誤7.孤立的頁(yè)面用戶(hù)不知用什么方法返回首頁(yè).8. 頁(yè)面沒(méi)有視覺(jué)差異頁(yè)面沒(méi)有視覺(jué)差異,頁(yè)面設(shè)計(jì)很平缺少層次感,缺少視覺(jué)沖擊力和亮點(diǎn).或者視覺(jué)沖擊力突出的并不是網(wǎng)站的主體內(nèi)容.四、用戶(hù)瀏覽網(wǎng)頁(yè)的習(xí)慣1.對(duì)比圖像，文字更具吸引力2.眼球的第一運(yùn)動(dòng)聚焦于網(wǎng)頁(yè)的左上角3.根據(jù)視覺(jué)鎖定，一欄格式比多欄格式擁有更好的表現(xiàn)力4.簡(jiǎn)短的段落相對(duì)于長(zhǎng)段落來(lái)說(shuō)有更好的表現(xiàn)力5.人們大都只瀏覽網(wǎng)頁(yè)的小部分內(nèi)容6.用戶(hù)瀏覽網(wǎng)頁(yè)時(shí)，首先觀(guān)察網(wǎng)頁(yè)的左上部和上層部分，之后再往下閱讀，瀏覽右邊五、尼爾森F形狀網(wǎng)頁(yè)瀏覽模式Step1:用戶(hù)會(huì)把目光停留在頁(yè)面的左上角。Step2:用戶(hù)會(huì)從左上角第一行橫向?yàn)g覽。Step3:用戶(hù)會(huì)繼

5、續(xù)往下進(jìn)行左右橫向?yàn)g覽，但是瀏覽寬度比上一步短了很多。Step4:用戶(hù)會(huì)從左上角向下進(jìn)行瀏覽。對(duì)照此圖可以得到以下結(jié)論：圖1 尼爾森實(shí)驗(yàn)室經(jīng)過(guò)長(zhǎng)時(shí)間的研究測(cè)試，給出了不同類(lèi)型網(wǎng)站的用戶(hù)瀏覽熱圖，用來(lái)更加形象生動(dòng)的解釋這一理論。一般類(lèi)網(wǎng)頁(yè)商務(wù)類(lèi)網(wǎng)頁(yè)搜索類(lèi)網(wǎng)頁(yè) 三個(gè)不同類(lèi)型網(wǎng)頁(yè)熱圖，紅色紅色是瀏覽者停留時(shí)間最長(zhǎng)的區(qū)域，黃色黃色次之，藍(lán)色藍(lán)色表示較少關(guān)注，灰色灰色基本不關(guān)注?？梢钥吹饺龔垷釄D都表現(xiàn)出了F形狀。不同的應(yīng)用：不同的應(yīng)用：作為廣告商：主要目的是宣傳，引起關(guān)注。1.依據(jù)F形狀網(wǎng)頁(yè)瀏覽熱圖，網(wǎng)頁(yè)頂部和左邊的廣告更能吸引眼球。2.現(xiàn)在培養(yǎng)的客戶(hù)都會(huì)對(duì)類(lèi)似廣告的圖片或文字視覺(jué)上本能地忽略，因此廣告

6、不易太花哨。3. 研究表明，讀者常忽視大部分的橫幅廣告，視線(xiàn)往往只停留幾分之一秒。因此需創(chuàng)新廣告位，合理配置網(wǎng)站廣告形式。對(duì)于信息類(lèi)網(wǎng)站：主要目的是傳達(dá)讀者感興趣的信息，以保持足夠的網(wǎng)站吸引力。1.讀者在閱讀文章的時(shí)候并不是逐字逐句，而會(huì)習(xí)慣跳躍掃視，因此，關(guān)鍵信息Highlight出來(lái)更易于讀者把握重要信息。2.標(biāo)題的設(shè)置要精煉，且要傳達(dá)足夠的信息量。這是讀者決定是否閱讀這篇文章的關(guān)鍵。另還可增加副標(biāo)題作為補(bǔ)充，如果副標(biāo)題仍不夠吸引，基本上我們就不會(huì)感興趣去點(diǎn)擊了。六、2013年交互設(shè)計(jì)的主流扁平化設(shè)計(jì)扁平化設(shè)計(jì)擬扁平化設(shè)計(jì)長(zhǎng)投影設(shè)計(jì)1.扁平化設(shè)計(jì)扁平化設(shè)計(jì) 從整體的角度來(lái)講，扁平化設(shè)計(jì)是一

7、種極簡(jiǎn)主義美學(xué)，附以明亮柔和的色彩，最后配上粗重醒目，而風(fēng)格又復(fù)古的字體。扁平化設(shè)計(jì)簡(jiǎn)化了諸如按鈕、圖標(biāo)一類(lèi)的界面元素。大圖片取代了動(dòng)效。 “扁平化設(shè)計(jì)”有著鮮明的視覺(jué)效果,整個(gè)界面的配色平均會(huì)采用到6-8種顏色(這個(gè)對(duì)于開(kāi)發(fā)團(tuán)隊(duì)的挑戰(zhàn)極大)，頁(yè)面效果更加絢麗、明亮。它所使用的元素之間有著清晰的層次和布局，這使得用戶(hù)能直觀(guān)的了解每個(gè)元素的作用以及交互方式。在需要展現(xiàn)強(qiáng)大信息流的界面內(nèi)，它讓用戶(hù)最大程度地減少學(xué)習(xí)使用成本。僅僅憑借用戶(hù)的直覺(jué)就大概能夠明白每個(gè)對(duì)象、按鈕的作用。扁平化大圖扁平化圖標(biāo)2.擬扁平化設(shè)計(jì)擬扁平化設(shè)計(jì)“似扁平化設(shè)計(jì)”(Almost Flat Design)是以扁平化設(shè)計(jì)為基

8、礎(chǔ)，但是添加了一些簡(jiǎn)單的效果，比如簡(jiǎn)單的投影，基本的漸變。3.長(zhǎng)投影設(shè)計(jì)長(zhǎng)投影設(shè)計(jì)“長(zhǎng)投影設(shè)計(jì)”圖標(biāo)設(shè)計(jì)中使用較多，一般是一道45度角的陰影從圖標(biāo)中延伸而出，最近的圖標(biāo)設(shè)計(jì)，大部分都采用”長(zhǎng)投影設(shè)計(jì)”。“類(lèi)扁平化設(shè)計(jì)”已成為一種必然趨勢(shì)，它到底好在哪里？1.具備非常好的兼容性，能很好的適配到不同的終端上。2.具備優(yōu)秀的組織和展現(xiàn)信息的能力，把紛繁復(fù)雜的內(nèi)容和功能有效的組織起來(lái)，以簡(jiǎn)單但合理的方式排列，最終使用戶(hù)界面變得簡(jiǎn)單易用。3.更適合屏幕較小的智能終端，它有更少的按鈕和選項(xiàng)，使整個(gè)界面干凈整潔、條理清晰，讓用戶(hù)減少認(rèn)知障礙，降低用戶(hù)的學(xué)習(xí)成本。觀(guān)點(diǎn)：隱形化的用戶(hù)體驗(yàn)業(yè)內(nèi)人士提出一個(gè)觀(guān)點(diǎn)：真正優(yōu)秀的用戶(hù)界面會(huì)被無(wú)視，而糟糕的設(shè)計(jì)則迫使用戶(hù)注意界面，而非內(nèi)容。 太多不必要的元素積少成多，最終界面成了一個(gè)障礙重重的迷宮界面，而非障礙 自然的界面并不限制各種探索性的點(diǎn)擊。當(dāng)用戶(hù)進(jìn)入死胡同，它不會(huì)輕易顯示錯(cuò)誤信息，而是將用戶(hù)引向別處。寬容的設(shè)計(jì)寬容的設(shè)計(jì) 以目標(biāo)為導(dǎo)向的設(shè)計(jì)，應(yīng)該圍繞用戶(hù)的目的展開(kāi)，挖掘用戶(hù)的需求，然后指引他們達(dá)成目標(biāo)。首要任務(wù)，達(dá)成目標(biāo)首要