用戶體驗(yàn)設(shè)計(jì)定義&詳細(xì)案例

2022-5-25    ui設(shè)計(jì)分享達(dá)人

一、什么是用戶體驗(yàn)?


用戶體驗(yàn)(User Experience,簡(jiǎn)稱UE/UX)這個(gè)詞是在上世紀(jì)90年代中期,由用戶體驗(yàn)設(shè)計(jì)師 唐納德·諾曼(Donald Norman)所提出和推廣。

定義:用戶在使用產(chǎn)品過(guò)程中建立起來(lái)的一種純主觀感受。即用戶在使用一個(gè)產(chǎn)品或系統(tǒng)之前、使用期間和使用之后的全部感受,包括情感、信仰、喜好、認(rèn)知印象、生理和心理反應(yīng)、行為和成就等各個(gè)方面。




二、可用性原則


可用性指的是產(chǎn)品對(duì)用戶來(lái)說(shuō)有效、易學(xué)、高效、好記、少錯(cuò)和令人滿意的程度,即用戶能否用產(chǎn)品完成他的任務(wù),效率如何,主觀感受怎樣,實(shí)際上是從用戶角度所看到的產(chǎn)品質(zhì)量,是產(chǎn)品用戶體驗(yàn)的核心,不好的可用性會(huì)導(dǎo)致用戶放棄使用產(chǎn)品。

可用性由易學(xué)性、效率、可記憶性、容錯(cuò)性、滿意度、實(shí)用性、個(gè)性化、可預(yù)測(cè)性組成。




01 易學(xué)性


指的是用戶學(xué)習(xí)如何與產(chǎn)品進(jìn)行交互,以實(shí)現(xiàn)目標(biāo)所花費(fèi)的時(shí)間和精力,即用戶能否在初次使用產(chǎn)品時(shí)完成簡(jiǎn)單的任務(wù)或?qū)崿F(xiàn)用戶目標(biāo)。




02 效率


用戶在使用產(chǎn)品一段時(shí)間后,能否在合理的時(shí)間完成想要達(dá)成的目標(biāo)任務(wù)。這里以騰訊視頻為例,用戶能否快速的下載想要的東西,在同一系列中,可以快速下載更多的相關(guān)內(nèi)容。




03 可記憶性


我們常說(shuō)互聯(lián)網(wǎng)是有記憶的,好的產(chǎn)品體驗(yàn)是幫助用戶去記憶。用戶在體驗(yàn)中,要對(duì)一些有意識(shí)、無(wú)意識(shí)的行為進(jìn)行記憶是一個(gè)比較大的負(fù)擔(dān),如果在一些環(huán)節(jié)通過(guò)系統(tǒng)能幫用戶記錄,會(huì)降低用戶的負(fù)擔(dān)。比如在搜索、歷史記錄、瀏覽記錄等。




04 容錯(cuò)性


用戶在使用產(chǎn)品時(shí),發(fā)生錯(cuò)誤后,能否快速幫助用戶識(shí)別和糾正錯(cuò)誤,幫助用戶從錯(cuò)誤中恢復(fù)的能力。如常見(jiàn)的注冊(cè)登錄,當(dāng)用戶屬于郵箱格式不對(duì)的時(shí)候,給出提示,并且告知錯(cuò)在哪里。如果提示語(yǔ)只是:"請(qǐng)輸入正確的郵箱" 用戶可能會(huì)疑惑,錯(cuò)在哪里。




05 滿意度


滿意度指的是用戶與設(shè)計(jì)互動(dòng)產(chǎn)生的愉悅程度,可以是用戶使用產(chǎn)品時(shí)流暢的交互和優(yōu)秀的視覺(jué)設(shè)計(jì),也可以是用戶在產(chǎn)品中得到的滿足感。比如sir語(yǔ)音交互,王者榮耀等級(jí)(滿足感)





06 實(shí)用性


產(chǎn)品能否提供用戶在完成任務(wù)時(shí)所需要用到的基本功能,例如P圖類軟件,用戶需要對(duì)圖片進(jìn)行裁剪、添加濾鏡、摳圖、美顏、補(bǔ)妝、添加文字、去除水印、添加文字等操作。




07 個(gè)性化


在滿足實(shí)用性的基礎(chǔ)上 針對(duì)用戶提供不同場(chǎng)景下的功能定制,如美圖秀秀,在提供圖片美化的同時(shí),針對(duì)用戶不同的使用場(chǎng)景還提供視頻剪輯、視頻美容等功能。




08 可預(yù)測(cè)性


用戶能夠預(yù)測(cè)到下一步操作或者整個(gè)流程的交互,將會(huì)發(fā)生什么。舉例淘寶的購(gòu)買流程。點(diǎn)擊購(gòu)買按鈕> 選擇商品屬性> 付款> 輸入密碼> 購(gòu)買成功; 用戶在點(diǎn)擊購(gòu)買按鈕開(kāi)始就能夠預(yù)測(cè)到下一步或者整個(gè)流程的步驟會(huì)發(fā)生什么。




三、可見(jiàn)性原則


可見(jiàn)性是用戶根據(jù)界面中可見(jiàn)元素確定產(chǎn)品可以做什么的設(shè)計(jì)原則。



01 物理功能可見(jiàn)性


物理功能可見(jiàn)性是基于對(duì)象的物理外觀。在視覺(jué)上,這種類型的功能可見(jiàn)性使用戶能夠立即清楚地看到在設(shè)計(jì)界面中能干什么。例如當(dāng)我們使用音樂(lè)類軟件,最常使用的就是播放/暫停,上一曲/下一曲。我們就會(huì)尋找去這些圖標(biāo)。其次是分享、收藏、下載、評(píng)論等功能需要用到的功能展示在頁(yè)面中,這就是功能可見(jiàn)性。




02 狀態(tài)可見(jiàn)性


當(dāng)信息或者列表過(guò)多時(shí)區(qū)分狀態(tài)的展示,將重要的狀態(tài)信息呈現(xiàn)在盡可能高的信息層級(jí)當(dāng)中。如iOS信息和QQ郵箱中區(qū)分未讀信息的微標(biāo)。如果將這些徽標(biāo)隱藏起來(lái),會(huì)極大地破壞易用性,因?yàn)槿藗儗⒉坏貌贿M(jìn)入一個(gè)個(gè)郵件詳情頁(yè)當(dāng)中進(jìn)行確認(rèn),才能獲取到原本由徽標(biāo)提供的狀態(tài)信息,這樣的互動(dòng)非常低效且乏味。




03 步驟可見(jiàn)性


當(dāng)用戶在執(zhí)行某項(xiàng)任務(wù)的時(shí)候應(yīng)該清晰明了的告知用戶目前在什么步驟,后面還有多少步驟,完整清晰的流程展示。如果將這些信息隱藏起來(lái),用戶會(huì)困惑當(dāng)前進(jìn)行到哪一步,接下來(lái)還有多少步驟。




四、可供性原則


強(qiáng)調(diào)需要明確的視覺(jué)線索向用戶展示產(chǎn)品可以做什么。例如用戶界面中的交互元素(如滾動(dòng)條、命令按鈕和圖標(biāo)等)的設(shè)計(jì)必須能夠?yàn)橛脩籼峁┳銐蚯宄慕ㄗh,讓用戶可以清晰地辨別出這些元素所代表的意思是什么、它們的功能是什么,以及如何與它們進(jìn)行交互行為(點(diǎn)擊、長(zhǎng)按、滑動(dòng) 等)




五、反饋


給用戶及時(shí)、恰當(dāng)?shù)姆答?,是體驗(yàn)設(shè)計(jì)中非常重要的一項(xiàng)原則;對(duì)每個(gè)用戶的操作都應(yīng)該有恰當(dāng)?shù)南到y(tǒng)反饋(包含視覺(jué)、聽(tīng)覺(jué)、觸覺(jué))。



01 告知性


明確告知用戶當(dāng)前操作發(fā)生了什么。如點(diǎn)擊下載和下載過(guò)程給出相對(duì)應(yīng)的反饋及進(jìn)度條。




02 動(dòng)作連接性


當(dāng)用戶產(chǎn)生某個(gè)動(dòng)作時(shí),給予相對(duì)應(yīng)的連接反饋。如大概用戶點(diǎn)擊某個(gè)按鈕時(shí),按鈕默認(rèn)的外觀與點(diǎn)擊后的外觀發(fā)生變化,結(jié)合現(xiàn)實(shí)世界的開(kāi)關(guān)去思考(按下 開(kāi)燈)動(dòng)作與反饋是連接的,即時(shí)的。




六、希克定律


??硕?,是1951年由威廉·埃德蒙·??耸紫忍岢龅模J(rèn)為人們從數(shù)組中選擇目標(biāo)的時(shí)間取決于可用選項(xiàng)的數(shù)量。也就是當(dāng)一個(gè)人所面臨的選擇越多,做出選擇所花的時(shí)間就越多,當(dāng)面臨選擇的數(shù)量增加,做出決定的時(shí)間也會(huì)跟著增加。




如京東篩選,在搜索結(jié)果頁(yè)會(huì)將篩選條件收起,因?yàn)槔锩娴暮Y選條件內(nèi)容過(guò)多。用戶會(huì)在當(dāng)前頁(yè)面選擇的時(shí)間增加.將一些項(xiàng)目分組放入二級(jí)下單,并且做好歸類,用戶能夠更迅速的作出決定。




七、費(fèi)茨定律


費(fèi)茨定律,是1954 年 由保羅.菲茨首次提出,在人機(jī)交互中指的是通過(guò)圖形用戶界面使用鼠標(biāo)或其他類型的指針從一個(gè)起始位置移動(dòng)到一個(gè)最終目的所需的時(shí)間。


T:代表完成移動(dòng)所需的平均時(shí)間

A:代表光標(biāo)開(kāi)始/停止時(shí)間

B:代表光標(biāo)移動(dòng)速度

D:代表從起點(diǎn)到目標(biāo)中心的距離

W:代表目標(biāo)的尺寸


簡(jiǎn)單來(lái)說(shuō)就是指:隨著目標(biāo)的距離增加,移動(dòng)到目標(biāo)的時(shí)間更長(zhǎng),并且隨著目標(biāo)的尺寸減小,選擇目標(biāo)的時(shí)間也會(huì)增加。


所以在界面設(shè)計(jì)當(dāng)中會(huì)遵循越重要的功能,占據(jù)面基會(huì)越大。重要圖標(biāo)的點(diǎn)擊熱區(qū)也會(huì)增大。便于用戶快速點(diǎn)擊。




屏幕外邊緣和四個(gè)角部比屏幕中的其他位置都更容易被定為和選中,所以我們?cè)谶M(jìn)行產(chǎn)品設(shè)計(jì)的過(guò)程中,會(huì)將常用/重要的操作放置在屏幕邊緣處,便于用戶操作。



八、神奇數(shù)字 7 ± 2


神奇數(shù)字7±2法則是1956年由 喬治·米勒 所提出的,根據(jù)喬治·米勒的研究,人類短期的記憶一般一次只能記住5-9個(gè)。也就是為什么大多數(shù)APP底部導(dǎo)航為5個(gè)的原因。




由于人類的大腦處理信息的能力有限,大腦會(huì)將復(fù)雜信息劃分成 塊 和小的單元。如:京東和每日優(yōu)鮮的分類處理。




人類短期的記憶一般一次只能記住5-9個(gè),所以人們總是傾向于把一串?dāng)?shù)字拆分為多個(gè)較短的部分進(jìn)行記憶。如銀行卡號(hào)和手機(jī)號(hào)碼等。




九、復(fù)雜守恒定律


復(fù)雜守恒定律是1984年由 拉里·泰斯勒 所提出的,也稱作泰斯勒定律。認(rèn)為每一個(gè)產(chǎn)品設(shè)計(jì)的過(guò)程中,都有其固有的復(fù)雜性,存在著一個(gè)臨界點(diǎn),超過(guò)了這個(gè)點(diǎn)產(chǎn)品設(shè)計(jì)的過(guò)程就不能再簡(jiǎn)化了,你只能將固有的復(fù)雜性從一個(gè)地方轉(zhuǎn)移到另外一個(gè)地方。


在產(chǎn)品設(shè)計(jì)中,會(huì)盡量的簡(jiǎn)化界面。當(dāng)功能過(guò)多時(shí)進(jìn)行一個(gè)整合的處理,跳轉(zhuǎn)或者滑動(dòng)操作。如查看更多或者常見(jiàn)的漢堡導(dǎo)航。




十、新鄉(xiāng)重夫:防錯(cuò)原則


新鄉(xiāng)重夫認(rèn)為遺忘有兩種:一種是疏漏,另一種是忘卻。他建議采用一些措施來(lái)預(yù)防產(chǎn)品的缺陷。


防錯(cuò)原則認(rèn)為大部分的意外都是由設(shè)計(jì)的疏忽,而不是人為操作疏忽。因此,在設(shè)計(jì)中要有必要的防錯(cuò)機(jī)制;比如常見(jiàn)的信息輸入狀態(tài),未輸入置灰不可點(diǎn),輸入變?yōu)榭牲c(diǎn)擊狀態(tài)。




微信拍一拍:微信在出了拍一拍功能之后,很多時(shí)候點(diǎn)擊頭像的時(shí)候會(huì)不小心拍到別人,現(xiàn)在的拍一拍是可以撤銷的,在客戶端鼠標(biāo)懸浮上就可以進(jìn)行撤回,移動(dòng)端長(zhǎng)按出現(xiàn)撤回彈窗,兩分鐘內(nèi)有效。




微信朋友圈動(dòng)態(tài):點(diǎn)擊返回圖標(biāo)會(huì)出現(xiàn)的彈窗,避免誤操作。利用防錯(cuò)原則,可以避免用戶重新編輯。微信當(dāng)中有很多友好的體驗(yàn)細(xì)節(jié)??梢远喽嗳ジ惺堋?




十一、奧卡姆剃刀原理


奧卡姆剃刀 定律 :它是由14世紀(jì)英格蘭的邏輯學(xué)家、圣方濟(jì)各會(huì)修士奧卡姆的威廉 (William of Occam,約1285年至1349年)提出。 這個(gè) 原理 稱為“如無(wú)必要,勿增實(shí)體 ”,即“ 簡(jiǎn)單有效原理 ”




01、只放置必要的元素


不必要的元素會(huì)降低設(shè)計(jì)的效率,不管是實(shí)體、視覺(jué)或者認(rèn)知上,多余的設(shè)計(jì)元素,有可能造成失敗或者其它問(wèn)題。這并不意味著不能提供給用戶很多的信息,可以用「更多信息」來(lái)實(shí)現(xiàn)。如夸克瀏覽器,首頁(yè)只放置重要功能 搜索 和幾個(gè)整合內(nèi)容的圖標(biāo)入口。




02、減少點(diǎn)擊次數(shù)


讓用戶通過(guò)較少的點(diǎn)擊就能找到他們想要的東西或使用功能。如音樂(lè)類軟件,在播放音樂(lè)之后進(jìn)入其他的tab,在上面都會(huì)懸浮播放/暫停的區(qū)域。都能夠隨時(shí)操作。




03、“老人”規(guī)則


就是產(chǎn)品的易用性,如果年紀(jì)大點(diǎn)的人,也能夠輕松使用所設(shè)計(jì)的產(chǎn)品那么是成功的。如抖音沉浸式的體驗(yàn),簡(jiǎn)單的滑動(dòng)就能夠觀看想看的內(nèi)容。目前抖音的用戶老年人也逐漸包含在內(nèi),并且抖音會(huì)根據(jù)用戶的停留時(shí)長(zhǎng)等推送用戶感興趣的內(nèi)容。




04、減少“段落”個(gè)數(shù)


頁(yè)面的使用率,當(dāng)你想要在一屏新增很多內(nèi)容時(shí),頁(yè)面的布局就會(huì)變得擁擠和區(qū)域變小,容易過(guò)于干擾用戶做出選擇,重要功能不夠突出等。夸克瀏覽器首頁(yè)強(qiáng)化了搜索功能 和幾個(gè)整合內(nèi)容的圖標(biāo)入口;uc瀏覽器首頁(yè)內(nèi)容過(guò)多,當(dāng)用戶想要使用搜索功能時(shí)很容易被其他內(nèi)容干擾。




05、給予更少的選項(xiàng)


前面說(shuō)到的??硕烧f(shuō)到,當(dāng)選擇的數(shù)量越多,用戶做決定的時(shí)間就更長(zhǎng)。做過(guò)多的決定也是一種壓力,在展示內(nèi)容的時(shí)候要努力減少用戶的思維負(fù)擔(dān)。如攜程和馬蜂窩金剛區(qū)的內(nèi)容展示,馬蜂窩根據(jù)產(chǎn)品屬性放置了6個(gè)重要的功能入口,便于用戶更快的去選擇所想要的功能。




十二、設(shè)計(jì)和藝術(shù)的區(qū)別是什么?


最后我們來(lái)探討一下設(shè)計(jì)和藝術(shù)的區(qū)別是什么。我看到一句話覺(jué)得挺好的。設(shè)計(jì)和藝術(shù)的重要區(qū)別是:藝術(shù)拋出問(wèn)題,而設(shè)計(jì)解決問(wèn)題。


我們?cè)O(shè)想一個(gè)場(chǎng)景,當(dāng)你在藝術(shù)展廳站在一副名畫(huà)面前,你所思考的是什么?是驚嘆畫(huà)家的畫(huà)技還是整個(gè)畫(huà)面給你的感覺(jué)是一種故事,你會(huì)不會(huì)思考藝術(shù)家在作畫(huà)時(shí)的心情,處境,為什么要這么去畫(huà)?想表達(dá)怎么樣的情感?



然后我們?cè)僭O(shè)想一個(gè)場(chǎng)景,同樣在藝術(shù)展廳,你身上帶有手機(jī)和相機(jī)。你會(huì)選擇用相機(jī)拍照還是用手機(jī)。答案是 相機(jī) 對(duì)吧?因?yàn)橄鄼C(jī)的拍照效果在任何環(huán)境下都會(huì)比手機(jī)好。這就是設(shè)計(jì)。是能夠真真切切的解決用戶問(wèn)題的。能夠去感知到的。


原文地址:站酷
作者:左言右設(shè)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司


分享本文至:

日歷

鏈接

個(gè)人資料

存檔