首頁(yè)

輪播設(shè)計(jì)總結(jié)-提高用戶(hù)點(diǎn)擊

純純

如果需要設(shè)計(jì)一個(gè)輪播,我們應(yīng)該考慮哪些因素?如何讓輪播更具有價(jià)值?如何讓輪播的體驗(yàn)更好?如何避免輪播常見(jiàn)的問(wèn)題。

提到輪播首先可能想到的是廣告,我們經(jīng)常在移動(dòng)端首頁(yè)或網(wǎng)站首頁(yè)會(huì)看到各式各樣的輪播banner,不管在移動(dòng)端還是網(wǎng)頁(yè)上通常點(diǎn)擊數(shù)據(jù)都是非常差的,本篇文章帶你深入了解banner輪播。

如果需要設(shè)計(jì)一個(gè)輪播,我們應(yīng)該考慮哪些因素?如何讓輪播更具有價(jià)值?如何讓輪播的體驗(yàn)更好?如何避免輪播常見(jiàn)的問(wèn)題。

本篇文章通過(guò)以下幾點(diǎn)探索輪播的特性,預(yù)計(jì)閱讀20分鐘

目錄

1、用戶(hù)真的使用輪播嗎

2、輪播的輪換形式

3、輪播的進(jìn)度展示

4、輪播定位

5、輪播的切換

6、對(duì)輪播進(jìn)行分類(lèi)

7、使用縮略圖進(jìn)行預(yù)知

8、輪播異形化

9、輪播時(shí)間

10、總結(jié)

一、用戶(hù)真的使用輪播嗎

用戶(hù)是否對(duì)輪播有感知,這個(gè)則需要根據(jù)不同的場(chǎng)景進(jìn)行判斷,包括每個(gè)產(chǎn)品中的每個(gè)輪播對(duì)用戶(hù)用戶(hù)的定位也不相同,常見(jiàn)的應(yīng)用場(chǎng)景品牌曝光、活動(dòng)營(yíng)銷(xiāo)、產(chǎn)品展示,每個(gè)場(chǎng)景下相關(guān)的數(shù)據(jù)也不相同。

促銷(xiāo)輪播banner

品牌推廣輪播banner


產(chǎn)品介紹輪播banner

同時(shí)還有個(gè)關(guān)鍵因素,輪播的占比,這里以pc端為例若是產(chǎn)品是以品牌效應(yīng)吸引用戶(hù)的,大多輪播是以大的屏幕占比為主通常會(huì)占首屏的50%,如果是以營(yíng)銷(xiāo)、內(nèi)容為主的產(chǎn)品,輪播通常以16:9、7:4的常規(guī)比例進(jìn)行展示。


輪播的頁(yè)數(shù)

用戶(hù)在使用產(chǎn)品時(shí)會(huì)默認(rèn)忽略輪播區(qū)域,一般輪播都會(huì)有自動(dòng)輪換機(jī)制,一定時(shí)間后自動(dòng)輪放下一張banner,那么每當(dāng)頁(yè)面上進(jìn)行輪播時(shí)便會(huì)吸引用戶(hù)進(jìn)行關(guān)注,效果上會(huì)有一定的提升,所以在輪播中第二張第三張的效果往往會(huì)比第一張輪播的效果更有效一些。

還有一種用戶(hù)比較喜歡關(guān)注輪播過(guò)去的banner以此來(lái)滿(mǎn)足好奇心。

如果banner是作為內(nèi)容傳播希望用戶(hù)通過(guò)banner了解內(nèi)容,那么則要避免放在最后一位置,對(duì)于用戶(hù)而言最后一張輪播路徑過(guò)于長(zhǎng),并且用戶(hù)很少會(huì)手動(dòng)滑動(dòng)banner。

國(guó)外一家公司在針對(duì)輪播中進(jìn)行了相關(guān)的研究測(cè)試,隨著頁(yè)數(shù)的增加用戶(hù)的點(diǎn)擊逐步下降。

那么如果想讓產(chǎn)品中的輪播更具有效果,則需要根據(jù)不同的場(chǎng)景設(shè)定策略達(dá)到目的。

二、輪播的輪換形式

不管在移動(dòng)端還是手機(jī)端,輪播都有各種交互形式和尺寸,以pc為例在交互上會(huì)多樣化一些,常見(jiàn)的幾種則是通過(guò)滾輪滑動(dòng)、通過(guò)點(diǎn)擊切換兩種。

如下圖某藝術(shù)網(wǎng)站,它則是通過(guò)鼠標(biāo)滾輪進(jìn)行切換輪播banner,并且banner的占比也是鋪滿(mǎn)首屏,這種輪播形式適合一些品牌、產(chǎn)品宣傳等相關(guān)的網(wǎng)站以此來(lái)突出產(chǎn)品的亮點(diǎn),同時(shí)也符合用戶(hù)目標(biāo)。

在看下面這個(gè)醫(yī)美網(wǎng)站它的切換方式則是通過(guò)鼠標(biāo)點(diǎn)擊進(jìn)行切換,并且占比也是鋪滿(mǎn)首屏,在醫(yī)美領(lǐng)域用戶(hù)更關(guān)注美感,而輪播形態(tài)也是符合用戶(hù)的心理預(yù)期更加沉浸美觀。

而在移動(dòng)端輪播的形式就比較統(tǒng)一,大多都是自動(dòng)播放+手指滑動(dòng)進(jìn)行切換。

三、輪播的進(jìn)度展示

在網(wǎng)頁(yè)中輪播都會(huì)有當(dāng)前的定位點(diǎn),許多用戶(hù)的習(xí)慣是點(diǎn)擊進(jìn)度條進(jìn)行切換banner這樣能夠更快的達(dá)到目標(biāo),不用一張一張切換,但是在有些產(chǎn)品中會(huì)忽略這一點(diǎn),設(shè)計(jì)中會(huì)做的非常小導(dǎo)致用戶(hù)在點(diǎn)擊上可用性不太友好,如下圖中的banenr進(jìn)度點(diǎn)設(shè)計(jì)上過(guò)于小導(dǎo)致點(diǎn)擊上有些阻礙。

如以下網(wǎng)站去除進(jìn)度定位的方式,通過(guò)縮略圖預(yù)覽來(lái)告知用戶(hù)下一個(gè)banner的內(nèi)容,空白區(qū)域也可以添加縮略圖引導(dǎo)介紹等關(guān)鍵信息,幫助用戶(hù)提前預(yù)知在體驗(yàn)上相對(duì)較好。

以下國(guó)外某網(wǎng)站在進(jìn)度定位的設(shè)計(jì)上采用了標(biāo)簽文案方式進(jìn)行設(shè)計(jì),能夠幫助用戶(hù)更加全局的了解banner內(nèi)容


四、輪播的定位

定位主要是用來(lái)指示當(dāng)前輪播的進(jìn)度,像上圖中講的便于用戶(hù)更加全局的觀看banner的張數(shù)和當(dāng)前進(jìn)度。

以下網(wǎng)站的設(shè)計(jì)中則把定位與進(jìn)度相結(jié)合,進(jìn)度條展示該banner預(yù)計(jì)多久會(huì)切換下一張,對(duì)于自動(dòng)切換的產(chǎn)品輪播這個(gè)更直觀的進(jìn)度展示體驗(yàn)上相對(duì)較好。

以下是某個(gè)國(guó)外網(wǎng)站,不管是pc還是移動(dòng)端都在輪播底部添加了水平條,告知用戶(hù)當(dāng)前位置

隨著市場(chǎng)上產(chǎn)品同質(zhì)化嚴(yán)重,產(chǎn)品的競(jìng)爭(zhēng)力也更依賴(lài)體驗(yàn),在下圖中的數(shù)據(jù)可視化的網(wǎng)站上,在進(jìn)度條上就利用了產(chǎn)品的特性以餅狀圖的形式進(jìn)行展示。

五、輪播的切換

在剛才上面舉的例子中很多優(yōu)秀的網(wǎng)站在設(shè)計(jì)上都很有創(chuàng)新性,但是需要注意一個(gè)點(diǎn),在輪播中不只有自動(dòng)播放,還需要考慮用戶(hù)手動(dòng)切換,因?yàn)樵趯?shí)際用戶(hù)瀏覽中可能會(huì)對(duì)產(chǎn)品的播放時(shí)間達(dá)不到預(yù)期,此時(shí)則會(huì)使用手動(dòng)切換,除去可點(diǎn)擊的進(jìn)度點(diǎn),還需要上一張和下一張的入口切換。


在此基礎(chǔ)上需要注意,在處于最后一張banner時(shí),下一張切換還能不能點(diǎn)擊,第一張時(shí)上一張切換還能不能切換,這個(gè)取決于產(chǎn)品特性和輪播張數(shù),如果輪播張數(shù)過(guò)小的話(huà)則需要進(jìn)行循環(huán)播放,如果過(guò)多的頁(yè)數(shù)則第一步和最后一步不可點(diǎn)擊。

切換的距離和位置

上一張和下一張的距離遠(yuǎn)近取決于banner的大小,如果輪播banner占比較大時(shí)則需要考慮用戶(hù)的操作時(shí)長(zhǎng),距離越短時(shí)間越快,為了避免用戶(hù)操作失誤在相對(duì)較近的切換按鈕則需要在視覺(jué)上做的比較突出,便于用戶(hù)尋找。

如果banner占比在首屏中占比較少的情況下則需要讓切換按鈕的間距拉大,保持視覺(jué)平衡,因?yàn)樾^(qū)域banner用戶(hù)能夠更加全局的觀看,在使用上不會(huì)猶豫。

反觀移動(dòng)端在輪播中除了展示banner進(jìn)度外很少展示切換按鈕,移動(dòng)端更加依賴(lài)手勢(shì)交互。

六、對(duì)輪播進(jìn)行分類(lèi)

當(dāng)輪播banner過(guò)多時(shí)利用標(biāo)簽進(jìn)行分類(lèi),用戶(hù)通過(guò)點(diǎn)擊標(biāo)簽進(jìn)行查看相關(guān)的輪播組合。

此方式更適合一些電商平臺(tái)、新聞網(wǎng)站這種內(nèi)容過(guò)多的產(chǎn)品


如下圖國(guó)外社交媒體網(wǎng)站則使用了標(biāo)簽進(jìn)行分類(lèi),此處提一句輪播不僅限于首屏banner。他的用處可落地在各個(gè)場(chǎng)景。

七、使用縮略圖進(jìn)行預(yù)知

在banner首屏中,顯示的內(nèi)容越多,越能激發(fā)用戶(hù)進(jìn)行點(diǎn)擊,像上面講過(guò)的農(nóng)業(yè)產(chǎn)品網(wǎng)站就使用下一張預(yù)覽圖的形式進(jìn)行展示,當(dāng)然不僅局限于這種形式,如下圖中的餐飲網(wǎng)站把所有的輪播banner展示給用戶(hù)觀看。

相對(duì)于縮放圖,圖標(biāo)展示效果上也較好,空間占用更少,使用這種方式需要謹(jǐn)慎,對(duì)圖標(biāo)的識(shí)別性要求較高,我印象中能夠使用的這種方法的網(wǎng)站是蘋(píng)果官網(wǎng),讓產(chǎn)品抽象化展示。

在移動(dòng)端也存在這種設(shè)計(jì)手法,但是基于分辨率原因移動(dòng)端的縮略圖展示過(guò)少,最常見(jiàn)的如下圖中的馬蜂窩和企鵝電競(jìng)。

八、輪播個(gè)性化

輪播最大的缺陷則是像剛開(kāi)始講的用戶(hù)會(huì)默認(rèn)為廣告,對(duì)此可以使用個(gè)性化設(shè)計(jì)突破用戶(hù)心理障礙,使輪播banner更具備親和力。

如下圖中的數(shù)碼科技網(wǎng)站,利用產(chǎn)品與背景的結(jié)合營(yíng)造出一種功能性的展示。

再例如下圖中蘋(píng)果官網(wǎng)入口,結(jié)合百度的定制化功能在大搜中進(jìn)行個(gè)性化處理,把常規(guī)的banner輪播以功能卡片形式進(jìn)行展示,同時(shí)卡片承載產(chǎn)品動(dòng)畫(huà)引導(dǎo)用戶(hù)進(jìn)行點(diǎn)擊。

蘋(píng)果官網(wǎng)進(jìn)入后隨意點(diǎn)擊產(chǎn)品介紹頁(yè)后會(huì)發(fā)現(xiàn),蘋(píng)果把輪播結(jié)合鼠標(biāo)滾輪營(yíng)造沉浸式觀看,每個(gè)屏效內(nèi)都展示產(chǎn)品一個(gè)功能特點(diǎn),打破傳統(tǒng)banner的展現(xiàn)形式。


九、自動(dòng)輪播時(shí)間

自動(dòng)播放的輪播會(huì)根據(jù)用戶(hù)的耐心和用戶(hù)的訴求進(jìn)行調(diào)整優(yōu)先級(jí),如我們平常使用產(chǎn)品時(shí)會(huì)忽略banner廣告,我們會(huì)更加關(guān)注移動(dòng)中的東西,特別是在移動(dòng)端上通常是banner進(jìn)行輪播時(shí)才會(huì)關(guān)注。

谷歌設(shè)計(jì)團(tuán)隊(duì)曾對(duì)banner輪播的時(shí)間進(jìn)行測(cè)試,測(cè)試結(jié)果得出5s-7s的輪播時(shí)間最佳,在這個(gè)時(shí)間內(nèi)用戶(hù)有足夠的時(shí)間對(duì)輪播banner上的產(chǎn)品內(nèi)容進(jìn)行了解。

如下圖谷歌商店的輪播時(shí)間設(shè)定在6s。

同時(shí)還需要注意,在自動(dòng)播放的過(guò)程中如果用戶(hù)鼠標(biāo)hover上去后,則需要判定播放暫定,避免用戶(hù)錯(cuò)過(guò)感興趣的內(nèi)容。


十、總結(jié)

本文從輪播的樣式、特性、用戶(hù)對(duì)輪播的認(rèn)知等多方面的介紹,在實(shí)際產(chǎn)品中輪播有很多可用性上的問(wèn)題存在,我們?cè)谠O(shè)計(jì)中則需要根據(jù)自己產(chǎn)品的特性、用戶(hù)群體特點(diǎn)等多維度去思考適合什么樣的輪播形式。

文章來(lái)源:UI中國(guó)   作者:愛(ài)吃貓的魚(yú)____
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(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ì)sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)




淺談交互設(shè)計(jì)

純純

一、什么是交互設(shè)計(jì)?

先來(lái)看一下百度百科的定義

交互設(shè)計(jì)(英文Interaction Design, 縮寫(xiě)IXD),是定義、設(shè)計(jì)人造系統(tǒng)的行為的設(shè)計(jì)領(lǐng)域,它定義了兩個(gè)或多個(gè)互動(dòng)的個(gè)體之間交流的內(nèi)容和結(jié)構(gòu),使之互相配合,共同達(dá)成某種目的。交互設(shè)計(jì)努力去創(chuàng)造和建立的是人與產(chǎn)品及服務(wù)之間有意義的關(guān)系,以“在充滿(mǎn)社會(huì)復(fù)雜性的物質(zhì)世界中嵌入信息技術(shù)”為中心。交互系統(tǒng)設(shè)計(jì)的目標(biāo)可以從“可用性”和”用戶(hù)體驗(yàn)“兩個(gè)層面上進(jìn)行分析,關(guān)注以人為本的用戶(hù)需求。簡(jiǎn)而言之,交互設(shè)計(jì)是解決特定場(chǎng)景下的人群如何高效使用機(jī)器或軟件的目標(biāo)行為。


為什么要做交互設(shè)計(jì)

在使用網(wǎng)站,軟件,消費(fèi)產(chǎn)品或各種服務(wù)的時(shí)候(實(shí)際上是在同它們交互),使用過(guò)程中的感覺(jué)就是一種交互體驗(yàn)。隨著網(wǎng)絡(luò)和新技術(shù)的發(fā)展,各種新產(chǎn)品和交互方式越來(lái)越多,人們也越來(lái)越重視對(duì)交互的體驗(yàn)。當(dāng)大型計(jì)算機(jī)剛剛研制出來(lái)的時(shí)候,可能為當(dāng)初的使用者本身就是該行業(yè)的專(zhuān)家,沒(méi)有人去關(guān)注使用者的感覺(jué);相反,一切都圍繞機(jī)器的需要來(lái)組織,程序員通過(guò)打孔卡片來(lái)輸入機(jī)器語(yǔ)言,輸出結(jié)果也是機(jī)器語(yǔ)言,那個(gè)時(shí)候同計(jì)算機(jī)交互的重心是機(jī)器本身。當(dāng)計(jì)算機(jī)系統(tǒng)的用戶(hù)越來(lái)越由普通大眾組成的時(shí)候,對(duì)交互體驗(yàn)的關(guān)注也越來(lái)越迫切了。因此交互設(shè)計(jì)作為一門(mén)關(guān)注交互體驗(yàn)的新學(xué)科在二十世紀(jì)八十年代產(chǎn)生了。


從用戶(hù)角度來(lái)說(shuō),交互設(shè)計(jì)是一種如何讓產(chǎn)品易用,有效而讓人愉悅的技術(shù),它致力于了解目標(biāo)用戶(hù)和他們的期望,了解用戶(hù)在同產(chǎn)品交互時(shí)彼此的行為,了解“人”本身的心理和行為特點(diǎn),同時(shí),還包括了解各種有效的交互方式,并對(duì)它們進(jìn)行增強(qiáng)和擴(kuò)充。

通過(guò)對(duì)產(chǎn)品的界面和行為進(jìn)行交互設(shè)計(jì),讓產(chǎn)品和它的使用者之間建立一種有機(jī)關(guān)系,從而可以有效達(dá)到使用者的目標(biāo),這就是交互設(shè)計(jì)的目的。


二、交互設(shè)計(jì)常用原則和定律有哪些?


尼爾森十大可用性原則


1、狀態(tài)可見(jiàn)原則

系統(tǒng)應(yīng)該讓用戶(hù)時(shí)刻清楚當(dāng)前發(fā)生了什么事情,也就是快速的讓用戶(hù)了解自己處于何種狀態(tài)、對(duì)過(guò)去發(fā)生、當(dāng)前目標(biāo)、以及對(duì)未來(lái)去向有所了解,一般的方法是在合適的時(shí)間給用戶(hù)適當(dāng)?shù)姆答?,防止用?hù)使用出現(xiàn)錯(cuò)誤。

即在用戶(hù)操作界面功能時(shí)給予實(shí)時(shí)反饋,例如:頁(yè)面加載狀態(tài)提示、按鈕點(diǎn)擊后的狀態(tài)變化、進(jìn)度條提示等。

2、環(huán)境貼切原則

設(shè)計(jì)的一切表現(xiàn)和表述,盡可能貼近用戶(hù)所在的環(huán)境,將現(xiàn)實(shí)環(huán)境的操作功能巧妙的轉(zhuǎn)化為線上功能,使其貼近用戶(hù)。使用用戶(hù)能聽(tīng)懂的專(zhuān)業(yè)術(shù)語(yǔ),涉及到專(zhuān)業(yè)化語(yǔ)言時(shí)要轉(zhuǎn)化成用戶(hù)熟悉的語(yǔ)言。

即模擬真實(shí)的事物,使用戶(hù)更容易理解。例如:天氣應(yīng)用中的天氣插圖、音樂(lè)播放器的膠片都是生活中熟悉的場(chǎng)景和物品,降低理解成本。

3、操作可控原則

對(duì)于用戶(hù)的誤操作,提供二次確認(rèn)或者撤銷(xiāo)的功能,這樣可提高用戶(hù)的操作可控性。

例如:刪除聯(lián)系人二次確認(rèn)提示、消息可撤回操作。

4、一致性原則

遵循統(tǒng)一的產(chǎn)品設(shè)計(jì)規(guī)范/邏輯。這里的一致性包含產(chǎn)品和跨平臺(tái)產(chǎn)品之間的一致性。

一致性包含視覺(jué)交互、文案描述、組建樣式等,例如:微信小程序設(shè)計(jì)規(guī)范。

5、防錯(cuò)原則

設(shè)置防錯(cuò)的機(jī)制,減少用戶(hù)犯錯(cuò)。在用戶(hù)選擇動(dòng)作發(fā)生之前,就要防止用戶(hù)容易混淆或者錯(cuò)誤的選擇。

例如:用戶(hù)名稱(chēng)校驗(yàn)提示、手機(jī)號(hào)碼位數(shù)限制等。

6、易取原則

減少用戶(hù)記憶負(fù)荷,在適合的時(shí)機(jī)給用戶(hù)需要獲取的信息。

例如:驗(yàn)證碼讀取、找人轉(zhuǎn)賬提示等。

7、靈活高效原則

提供靈活的操作和高效的獲取信息能力。

例如:手機(jī)號(hào)碼一鍵登錄、消息關(guān)鍵字識(shí)別等。

8、優(yōu)美簡(jiǎn)約原則

保留產(chǎn)品最主要的信息,如果不是優(yōu)先級(jí)最高,要盡一切可能避免去影響產(chǎn)品的簡(jiǎn)潔和美觀。

9、容錯(cuò)原則

用戶(hù)在使用產(chǎn)品過(guò)程中出現(xiàn)了問(wèn)題,及時(shí)準(zhǔn)確的告知用戶(hù)出現(xiàn)問(wèn)題的原因。

例如:信息輸入提示、搜索無(wú)結(jié)果等。

10、提供人性化幫助

在用戶(hù)需要的時(shí)候提供必要的幫助說(shuō)明。

例如:新功能引導(dǎo)、解釋說(shuō)明文案等。



七個(gè)交互設(shè)計(jì)定律


1、菲茲定律

點(diǎn)擊一個(gè)目標(biāo)的時(shí)間同以下兩個(gè)因素有關(guān):

(1)設(shè)備當(dāng)前位置和目標(biāo)位置的距離(D)。距離越長(zhǎng),所用時(shí)間越長(zhǎng);

(2)目標(biāo)的大小(S)。目標(biāo)越大,所用時(shí)間越短。

該定律經(jīng)常運(yùn)用于鼠標(biāo)從點(diǎn)A到點(diǎn)B的運(yùn)動(dòng)。

例如常用按鈕的尺寸設(shè)計(jì)等。

2、??硕?

一個(gè)人面臨的選擇(n)越多,所需要作出決定的時(shí)間(T)就越長(zhǎng)。

交互設(shè)計(jì)中要合理設(shè)置選項(xiàng),以免用戶(hù)使用中決策時(shí)間過(guò)長(zhǎng),降低使用效率。

3、米勒7±2定律

喬治米勒對(duì)短時(shí)記憶能力進(jìn)行了定量研究,他發(fā)現(xiàn)人類(lèi)頭腦最好的狀態(tài)能記憶含有7(±2)項(xiàng)信息塊,在記憶了 5-9 項(xiàng)信息后人類(lèi)的頭腦就開(kāi)始出錯(cuò)。

例如:手機(jī)號(hào)碼的分位顯示、應(yīng)用中標(biāo)簽欄數(shù)量等

4、鄰近性法則

人們通常將距離近的事物劃分為一組。

界面設(shè)計(jì)中可以用對(duì)象間的相對(duì)距離來(lái)區(qū)分信息層級(jí)。

5、復(fù)雜性守恒定律

每個(gè)應(yīng)用程序都具有其內(nèi)在的、無(wú)法簡(jiǎn)化的復(fù)雜度。無(wú)論在產(chǎn)品開(kāi)發(fā)環(huán)節(jié)還是在用戶(hù)與產(chǎn)品的交互環(huán)節(jié),這一固有的復(fù)雜度都無(wú)法依照我們的意愿去除,只能設(shè)法調(diào)整、平衡。

例如:在智能手機(jī)出現(xiàn)之前,手機(jī)上的操作按鈕都是實(shí)體按鈕。在智能手機(jī)出現(xiàn)手,手機(jī)被整個(gè)屏幕占據(jù)后,所有的操作都集合在了手機(jī)系統(tǒng)之中,等于把物理操作轉(zhuǎn)移到了系統(tǒng)操作中,其本身的功能復(fù)雜程度并沒(méi)有發(fā)生改變,只是轉(zhuǎn)移了而已。


6、防錯(cuò)原則

大部分的意外都是由設(shè)計(jì)的疏忽,而不是人為操作疏忽。因此,在設(shè)計(jì)中要有必要的防錯(cuò)機(jī)制;在此,特別要注意在用戶(hù)操作具有毀滅性效果的功能時(shí)要有提示,防止用戶(hù)犯不可挽回的錯(cuò)誤。

例如:登錄時(shí)用戶(hù)名校驗(yàn),手機(jī)號(hào)碼位數(shù)限制等。

7、奧卡姆剃刀原則

“切勿浪費(fèi)較多東西去做,用較少的東西,同樣可以做好的事情。

”這個(gè)原理稱(chēng)為“如無(wú)必要,勿增實(shí)體”,即“簡(jiǎn)單有效原理”。

在設(shè)計(jì)中可以使用戶(hù)關(guān)注最主要的信息而非其它無(wú)關(guān)緊要的事物,從而提升使用效率。




三、交互設(shè)計(jì)如何開(kāi)展工作


首先在交互設(shè)計(jì)師拿到需求后不要急著打開(kāi)軟件開(kāi)始繪制線框圖,而是要先分析需求,了解產(chǎn)品的戰(zhàn)略層和范圍層的業(yè)務(wù)目標(biāo)。把握產(chǎn)品設(shè)計(jì)大方向,只有方向?qū)α撕竺娴墓ぷ鞑攀怯袃r(jià)值的。

把握了產(chǎn)品方向,下面就該進(jìn)行需求的分析,

首先針對(duì)需求考慮5個(gè)問(wèn)題:

1、為什么要做這個(gè)功能?(業(yè)務(wù)需求)

2、產(chǎn)品期望得到怎樣的成果?(業(yè)務(wù)目標(biāo))

3、誰(shuí)來(lái)使用?(目標(biāo)用戶(hù))

4、他們要怎樣使用?(用戶(hù)需求)

5、如何讓他們都來(lái)使用?(將業(yè)務(wù)目標(biāo)轉(zhuǎn)化為用戶(hù)行為)

清楚這5個(gè)問(wèn)題后,再根據(jù)交互設(shè)計(jì)流程進(jìn)行一步一步的進(jìn)行

這實(shí)際上就是對(duì)需求的戰(zhàn)略層分析。

我們進(jìn)一步分析業(yè)務(wù)需求(業(yè)務(wù)目的、業(yè)務(wù)目標(biāo))和用戶(hù)需求(目標(biāo)用戶(hù)、用戶(hù)體驗(yàn)?zāi)繕?biāo)),把握關(guān)鍵因素(用戶(hù)的動(dòng)機(jī)、擔(dān)憂(yōu)和影響目標(biāo)達(dá)成的障礙)。

歸納這些需求,明確設(shè)計(jì)策略。


將“業(yè)務(wù)目標(biāo)”轉(zhuǎn)化為“用戶(hù)行為”,通過(guò)引導(dǎo)用戶(hù)的使用來(lái)幫助產(chǎn)品實(shí)現(xiàn)目標(biāo)。

從設(shè)計(jì)“用戶(hù)行為”到設(shè)計(jì)“用戶(hù)界面”,用戶(hù)行為決定了用戶(hù)界面,用戶(hù)界面也導(dǎo)致了用戶(hù)會(huì)出現(xiàn)什么樣的行為。

設(shè)計(jì)需求分析方法就是要幫助用戶(hù)創(chuàng)造動(dòng)機(jī)、排除擔(dān)憂(yōu)、解決障礙。



四、如何進(jìn)行用戶(hù)研究,方法有哪些


評(píng)估的形式及方法


常見(jiàn)的評(píng)估形式分為三類(lèi):

1、評(píng)估主體:根據(jù)評(píng)估的主體不同來(lái)進(jìn)行區(qū)分,即誰(shuí)來(lái)做評(píng)估。

按照評(píng)估主體來(lái)區(qū)分主要有兩個(gè)主體:用戶(hù)和專(zhuān)家

用戶(hù)評(píng)估主要靠收集用戶(hù)使用數(shù)據(jù),也就是用戶(hù)測(cè)試,它的數(shù)據(jù)相對(duì)客觀,但時(shí)間和費(fèi)用較多,評(píng)估范圍較窄。

專(zhuān)家評(píng)估是讓工程師及設(shè)計(jì)師等專(zhuān)家基于自身的專(zhuān)業(yè)知識(shí)和經(jīng)驗(yàn)進(jìn)行評(píng)估的一種方式。專(zhuān)家評(píng)估相對(duì)主觀,但費(fèi)時(shí)少、費(fèi)用少、評(píng)估范圍窄。

兩種評(píng)估方法可以相互補(bǔ)充,并結(jié)合使用。


2、評(píng)估性質(zhì):例如定性評(píng)估、定量評(píng)估或著其它方式。

按照評(píng)估的性質(zhì)來(lái)區(qū)分可以分為定量評(píng)估和定性評(píng)估。

定量評(píng)估是指對(duì)可以計(jì)量的部分進(jìn)行評(píng)價(jià),如點(diǎn)擊量、使用率等,可以用數(shù)據(jù)來(lái)說(shuō)明。

定性評(píng)估是指對(duì)非計(jì)量性的部分進(jìn)行評(píng)價(jià),如流暢度、舒適性、創(chuàng)造性等進(jìn)行評(píng)價(jià)。它只能表示一個(gè)度,無(wú)法準(zhǔn)確用數(shù)據(jù)來(lái)說(shuō)明問(wèn)題。


3、評(píng)估過(guò)程:按照評(píng)估的過(guò)程來(lái)進(jìn)行區(qū)分。

從評(píng)估的過(guò)程來(lái)區(qū)分可以分為理性評(píng)估和感性評(píng)估。

理性評(píng)估相對(duì)客觀,從客觀的角度出發(fā)判斷客觀事物。

感性評(píng)估更為主觀,評(píng)估結(jié)果并沒(méi)有客觀規(guī)律。

在實(shí)際應(yīng)用中也需要將理性評(píng)估和感性評(píng)估結(jié)合使用,才能完整的完成我們的任務(wù),達(dá)到我們的目標(biāo)。


常見(jiàn)的評(píng)估方法有四種:

1、原型評(píng)估方法:在產(chǎn)品研發(fā)過(guò)程中,對(duì)于界面設(shè)計(jì)以及程序的測(cè)試來(lái)獲得用戶(hù)的反饋是至關(guān)重要的。以用戶(hù)為中心和交互式設(shè)計(jì)的重要因素之一就是原型方法,原型方法的目的是將界面設(shè)計(jì)與用戶(hù)的需求進(jìn)行匹配。

一般來(lái)說(shuō)原型評(píng)估方法分為三大類(lèi)型:

(1)快速原型:原型迅速成型并分配實(shí)施,在原型實(shí)驗(yàn)收集的信息基礎(chǔ)上,系統(tǒng)從草案中得以完善。

(2)增量原型:應(yīng)用與大型系統(tǒng),從系統(tǒng)的基本骨架開(kāi)始,需要階段性的安裝,及系統(tǒng)的本質(zhì)特征是在初次安裝完成后允許階段性測(cè)試,以減少遺漏的重要特征。

(3)演化原型:對(duì)前期的設(shè)計(jì)原型不斷進(jìn)行補(bǔ)充和優(yōu)化,直到成為最后的系統(tǒng)。


2、簡(jiǎn)易測(cè)試評(píng)估方法

在條件不允許的情況下,可以采取簡(jiǎn)易的方法來(lái)對(duì)用戶(hù)體驗(yàn)進(jìn)行評(píng)價(jià)。步驟是:

(1)實(shí)驗(yàn)室環(huán)境準(zhǔn)備:準(zhǔn)備好測(cè)試用的電腦或其他媒介。兩個(gè)房間,房間1用來(lái)對(duì)被測(cè)試者進(jìn)行測(cè)試,房間2用于設(shè)計(jì)師和工程師的觀察。

(2)被試選擇:分為用戶(hù)組和專(zhuān)家組。

(3)進(jìn)行測(cè)試:房間1中被試者根據(jù)自己的選擇進(jìn)行操作和測(cè)試,同時(shí)說(shuō)出自己的內(nèi)心想法,觀察員在調(diào)查表上記錄被試者的每一次的操作情況,包括出錯(cuò)情況和被試者的口語(yǔ)描述,當(dāng)被試者在測(cè)試過(guò)程中遇到困難或操作無(wú)法進(jìn)行時(shí),觀察員要給予一定的客觀提示。房間2中通過(guò)相關(guān)設(shè)備將房間1的情況傳輸?shù)椒块g2,設(shè)計(jì)師和工程師實(shí)時(shí)觀察和記錄被試者的情況,以便今后對(duì)產(chǎn)品做進(jìn)一步的修改和完善。

(4)結(jié)果分析:通過(guò)多次測(cè)試后,將測(cè)試結(jié)果匯總,提取出交互設(shè)計(jì)中存在的問(wèn)題,以及對(duì)交互設(shè)計(jì)有益的建議形成測(cè)試報(bào)告。


3、眼動(dòng)評(píng)估方法

眼動(dòng)追蹤可以用來(lái)評(píng)價(jià)對(duì)產(chǎn)品(包括硬件產(chǎn)品和軟件產(chǎn)品)設(shè)計(jì)的感性意象,評(píng)測(cè)產(chǎn)品設(shè)計(jì)特征。眼動(dòng)評(píng)估的主要指標(biāo)有注視熱點(diǎn)圖、搜索過(guò)程測(cè)量指標(biāo)、興趣區(qū)域即用戶(hù)視覺(jué)注意的焦點(diǎn)區(qū)。可以結(jié)合口語(yǔ)分析法了解用戶(hù)的所想 和所做。


4、腦電評(píng)估方法

通過(guò)對(duì)腦電信號(hào)的分析,研究者可以探索大腦的認(rèn)知加工過(guò)程和受試者的心理狀況。近年來(lái)腦電評(píng)估方法在人機(jī)交互心理學(xué)等領(lǐng)域應(yīng)用廣泛,被用來(lái)評(píng)估交互設(shè)計(jì)、人機(jī)界面、產(chǎn)品設(shè)計(jì)等方面的內(nèi)容。但是腦電評(píng)估也有一定的缺陷,例如空間分辨率上的局限性,因而對(duì)某些認(rèn)知過(guò)程和腦區(qū)的定位并不是很準(zhǔn)確。第二,在許多相似的實(shí)驗(yàn)研究中,由于研究者采用了不同的實(shí)驗(yàn)材料和方法等,實(shí)驗(yàn)結(jié)果也存在差異性。第三 ,由于采集記錄時(shí)間的滯后性,腦電所記錄的并不一定是當(dāng)下被試者所想到的內(nèi)容。


采取哪種方法來(lái)開(kāi)展用戶(hù)測(cè)試和評(píng)估,要根據(jù)不同的任務(wù)結(jié)合不同的環(huán)境來(lái)開(kāi)展,比如:時(shí)間、成本、資源等。



啟發(fā)式評(píng)估法

是專(zhuān)家評(píng)估法的一種,也被稱(chēng)為經(jīng)驗(yàn)性評(píng)估,最初由Nielsen博士提出。簡(jiǎn)單來(lái)說(shuō),啟發(fā)式評(píng)估是一種簡(jiǎn)易的可用性評(píng)估方法,使用一套相對(duì)簡(jiǎn)單、通用、有啟發(fā)性的可用性原則,讓幾個(gè)評(píng)審根據(jù)專(zhuān)業(yè)知識(shí)和經(jīng)驗(yàn)來(lái)進(jìn)行評(píng)估,發(fā)現(xiàn)產(chǎn)品潛在的可用性問(wèn)題。


啟發(fā)式評(píng)估的兩大要素:評(píng)估者和評(píng)估參照的原則。   


對(duì)評(píng)估者的要求主要有四個(gè)方面:

(1)人數(shù):推薦3-5人,有時(shí)會(huì)更少

(2)知識(shí):最好同時(shí)具有可用性知識(shí)及設(shè)計(jì)知識(shí)

(3)身份:最好是非設(shè)計(jì)者本人,否者不具有客觀性

(4)崗位:設(shè)計(jì)師或用戶(hù)研究員


評(píng)估參照的原則有:尼爾森十大可用性原則、八項(xiàng)黃金法則、首頁(yè)可用性指南、ios設(shè)計(jì)指南、拓展原則、HHS網(wǎng)頁(yè)設(shè)計(jì)與可用性指南等。具體需要根據(jù)實(shí)際項(xiàng)目來(lái)選擇,常用的是尼爾森十大交互原則。


什么時(shí)候適合使用啟發(fā)式評(píng)估法?

交互設(shè)計(jì)和UI設(shè)計(jì)階段、測(cè)試優(yōu)化和產(chǎn)品發(fā)布后的階段。


啟發(fā)式評(píng)估的優(yōu)缺點(diǎn)有哪些?

優(yōu)點(diǎn):成本低、效率高、發(fā)現(xiàn)大多數(shù)可用性問(wèn)題,甚至是用戶(hù)測(cè)試時(shí)不會(huì)出現(xiàn)的問(wèn)題。

缺點(diǎn):不能代表真實(shí)用戶(hù),相對(duì)主觀、有時(shí)候發(fā)現(xiàn)問(wèn)題過(guò)多、對(duì)評(píng)估人員知識(shí)背景要求較高。


什么時(shí)候適用?

(1)適合時(shí)間、資源有限的情況下快速發(fā)現(xiàn)可用性問(wèn)題,降低風(fēng)險(xiǎn)及成本。

(2)版本變動(dòng)不大的情況下,小成本檢驗(yàn)。

(3)作為可用性測(cè)試的之前準(zhǔn)備。


啟發(fā)式評(píng)估流程是什么?

(1)準(zhǔn)備階段:確定范圍、背景調(diào)查、參考評(píng)估原則、評(píng)委邀約、材料準(zhǔn)備

(2)執(zhí)行階段:任務(wù)走查、整體走查、結(jié)果記錄

(3)分析階段:匯總討論、報(bào)告總結(jié)、優(yōu)化方案



可用性測(cè)試


先來(lái)看一下我們?cè)谄綍r(shí)工作中常常會(huì)聽(tīng)到這樣的問(wèn)題

產(chǎn)品經(jīng)理:我們的用戶(hù)覺(jué)得產(chǎn)品好不好用?使用過(guò)程中會(huì)不會(huì)遇到問(wèn)題?他們是否滿(mǎn)意?

設(shè)計(jì)師:設(shè)計(jì)的過(guò)程有一些糾結(jié)的地方,不知道實(shí)際用戶(hù)是怎么理解和操作的怎么辦?

產(chǎn)品開(kāi)發(fā)后:想在大推前檢驗(yàn)一下產(chǎn)品是否靠譜,適不適合大推?


當(dāng)我們遇到這樣的一些問(wèn)題時(shí),如何找到方法快速得到答案呢?

那就是接下來(lái)要介紹的可用性測(cè)試方法。


可用性測(cè)試是一種常用的、高效的方法。

它的定義是:通過(guò)觀察具有代表性的用戶(hù),完成產(chǎn)品的典型任務(wù),從而找出產(chǎn)品可用性問(wèn)題并解決,目的是為了改善產(chǎn)品,讓產(chǎn)品更容易使用。


什么時(shí)候適合做可用性測(cè)試呢?

一般是在:交互設(shè)計(jì)或UI設(shè)計(jì)、測(cè)試優(yōu)化、正式發(fā)布三個(gè)階段來(lái)做。當(dāng)然是越早做越好,可以盡早發(fā)現(xiàn)問(wèn)題并及時(shí)調(diào)整。


類(lèi)型分為兩種:形成式和總結(jié)式

形成式特點(diǎn):小樣本、發(fā)現(xiàn)問(wèn)題為主、不能做定量對(duì)比。

總結(jié)式特點(diǎn):大樣本(30人以上)、定量的評(píng)估、可以做對(duì)比評(píng)估


可用性測(cè)試可以解決什么樣的問(wèn)題?

1、發(fā)現(xiàn)問(wèn)題,產(chǎn)品在體驗(yàn)上是否存在問(wèn)題

2、檢驗(yàn)實(shí)現(xiàn),期望的設(shè)計(jì)目的有沒(méi)有達(dá)成,是否滿(mǎn)足了用戶(hù)的期望

3、產(chǎn)品評(píng)估,用戶(hù)是否會(huì)滿(mǎn)意

4、理解用戶(hù),了解用戶(hù)行為習(xí)慣,了解用戶(hù)認(rèn)知,找到某些問(wèn)題的原因


測(cè)試流程是什么?

整體上分為4個(gè)階段:1、準(zhǔn)備  2、測(cè)試  3、分析  4、優(yōu)化


1、準(zhǔn)備階段要做的有哪些?


確定目標(biāo):確定測(cè)試目標(biāo)決定了后面測(cè)試過(guò)程要怎樣去設(shè)計(jì)

常見(jiàn)的測(cè)試目標(biāo)有:

·對(duì)整個(gè)產(chǎn)品做可用性評(píng)估

·對(duì)新增的功能模塊進(jìn)行評(píng)估

·提前觀察新方案對(duì)新老用戶(hù)有怎樣的影響

·提前檢測(cè)改版是否達(dá)到預(yù)計(jì)目標(biāo)

·設(shè)計(jì)時(shí)存在爭(zhēng)議,如何選擇解決方案

·某個(gè)環(huán)節(jié)流失率較高,檢測(cè)是否為設(shè)計(jì)原因?qū)е?

·需要拓展某一類(lèi)特殊用戶(hù),測(cè)試針對(duì)這類(lèi)用戶(hù)在設(shè)計(jì)上是否需要作出調(diào)整


準(zhǔn)備測(cè)試方案

方案中應(yīng)當(dāng)包含以下內(nèi)容:

·測(cè)試目的:明確測(cè)試的目的及范圍,測(cè)試目的決定了測(cè)試方案

·測(cè)試關(guān)注點(diǎn):與負(fù)責(zé)的設(shè)計(jì)師一起梳理測(cè)試中要關(guān)注的問(wèn)題

·用戶(hù)招募:招募要求,樣本配比,招募渠道

·經(jīng)費(fèi)預(yù)算:獎(jiǎng)勵(lì)的形式和額度

·時(shí)間計(jì)劃:用于把控時(shí)間計(jì)劃


撰寫(xiě)測(cè)試腳本:設(shè)計(jì)測(cè)試任務(wù),通過(guò)用戶(hù)行為去觀察提問(wèn)來(lái)獲得我們想要的內(nèi)容

基本的流程有:

·暖場(chǎng):3min,簡(jiǎn)單聊天,消除用戶(hù)的緊張情緒

·測(cè)試說(shuō)明:2min,對(duì)測(cè)試內(nèi)容規(guī)則做說(shuō)明

·測(cè)試前訪談:10min,了解用戶(hù)基本信息

·簡(jiǎn)單試用:3min,讓用戶(hù)熟悉產(chǎn)品

·測(cè)試執(zhí)行:30-45min,提示任務(wù)并觀察

·事后訪談:15min,針對(duì)疑點(diǎn)問(wèn)點(diǎn)追問(wèn),填寫(xiě)評(píng)價(jià)表

·道別:5min,支付禮金,送用戶(hù)離開(kāi)


招募用戶(hù)

招募什么樣的用戶(hù)呢?

·根據(jù)測(cè)試目的來(lái)定,找出與測(cè)試目標(biāo)有關(guān)的篩選緯度

·特別考慮用戶(hù)使用行為相關(guān)的特征,例如競(jìng)品使用經(jīng)驗(yàn),使用產(chǎn)品的目的,用戶(hù)的活躍度等

·挑選最核心的緯度,轉(zhuǎn)化成用戶(hù)招募的條件,并盡量客觀化,具體化,可衡量

·避免設(shè)置交叉條件過(guò)多,導(dǎo)致樣本代表性降低

·學(xué)會(huì)辨別真假的用戶(hù)信息


招募多少用戶(hù)合適?

·以發(fā)現(xiàn)問(wèn)題為目的快速可用性測(cè)試,6-8名即可

·考慮產(chǎn)品的復(fù)雜性,覆蓋人群差異性,適當(dāng)做調(diào)整,拓展到10-15名


招募渠道有哪些?

·公司內(nèi)部

·現(xiàn)有產(chǎn)品用戶(hù)庫(kù)

·公司其他產(chǎn)品用戶(hù)庫(kù)

·熟人,朋友等

·推廣渠道:官微、公眾號(hào)、門(mén)戶(hù)網(wǎng)等

·社區(qū),論壇,qq群等

·第三方調(diào)研公司


準(zhǔn)備測(cè)試素材:低保真或高保真原型,或線上已經(jīng)可以使用的產(chǎn)品,也可以準(zhǔn)備一些量表工具來(lái)輔助測(cè)試。在測(cè)試

過(guò)程中需要用到的電腦或手機(jī)設(shè)備,攝像頭,紙,筆,桌椅等。


測(cè)試場(chǎng)地選擇:

·專(zhuān)業(yè)可用性測(cè)試實(shí)驗(yàn)室:一般對(duì)測(cè)試質(zhì)量要求較高,旁聽(tīng)人數(shù)較多且需要采集豐富的數(shù)據(jù)的時(shí)候采用此方法。實(shí)驗(yàn)室有兩個(gè)房間,一個(gè)測(cè)試間,一個(gè)觀察間,中間有單向玻璃分隔。測(cè)試間中有多角度的攝像頭,用來(lái)記錄測(cè)試過(guò)程,觀察間可以同步看到測(cè)試間里的情況,

·普通測(cè)試環(huán)境:在觀察人數(shù)較少(小于3人),條件有限時(shí)使用。


預(yù)測(cè)試階段:正式測(cè)試前進(jìn)行預(yù)測(cè)試,保證測(cè)試流程通暢

·走查:記錄可能出現(xiàn)的問(wèn)題

·預(yù)測(cè)試:找人先測(cè)試一下

·調(diào)整:調(diào)整測(cè)試流程


正式測(cè)試階段

測(cè)試參與人員有

·主持人:引導(dǎo)整個(gè)測(cè)試流程

·記錄員:記錄操作行為,訪談內(nèi)容,發(fā)現(xiàn)問(wèn)題等

·產(chǎn)品團(tuán)隊(duì):參與旁聽(tīng),觀察,結(jié)束后交流

·用戶(hù):完成測(cè)試及訪談任務(wù)


測(cè)試過(guò)程中需要觀察的要點(diǎn):

·用戶(hù)是否獨(dú)立完成了任務(wù)

·是否存在無(wú)效操作或不知所措的情況

·用戶(hù)是否滿(mǎn)意


結(jié)果分析

邊測(cè)試邊總結(jié),越及時(shí)越好

·測(cè)試完一個(gè)用戶(hù),做一次小結(jié)

·測(cè)試結(jié)束當(dāng)天寫(xiě)小結(jié),與設(shè)計(jì)師當(dāng)場(chǎng)討論

·重要問(wèn)題反饋后再總結(jié)分析報(bào)告

·邊測(cè)邊改,邊改邊測(cè)

結(jié)果分析4個(gè)步驟:1、對(duì)發(fā)現(xiàn)分類(lèi)  2、整理不確定項(xiàng)  3、評(píng)定優(yōu)先級(jí)  4、結(jié)果記錄


撰寫(xiě)報(bào)告

從4個(gè)方面來(lái)寫(xiě):

·總體如何

·有哪些問(wèn)題

·嚴(yán)重程度如何

·建議是什么

·除此之外,還可以圍繞關(guān)注的問(wèn)題,未滿(mǎn)足需求補(bǔ)充分析


優(yōu)化跟蹤

在測(cè)試之后需要出優(yōu)化的方案,測(cè)試優(yōu)化的過(guò)程是循環(huán)的。

測(cè)試之后如果還有其他問(wèn)題沒(méi)有得到解決,可以結(jié)合其他的一些測(cè)試方法來(lái)得到。



問(wèn)卷調(diào)研

問(wèn)卷調(diào)查法是以書(shū)面提出問(wèn)題的方式搜集數(shù)據(jù)的一種研究方法,研究者將所要研究的問(wèn)題編制成問(wèn)題表格,讓受訪對(duì)象以郵寄、當(dāng)面作答、在線作答或追蹤訪問(wèn)的方式填寫(xiě),從而了解被試者對(duì)某一現(xiàn)象或問(wèn)題的看法和意見(jiàn)。問(wèn)卷調(diào)研可以用于需求挖掘階段,也可以用于產(chǎn)品上線后的評(píng)估階段。

如果是想了解用戶(hù)對(duì)產(chǎn)品上線后的滿(mǎn)意度,可以使用問(wèn)卷調(diào)研的方法。它比較適合去了解用戶(hù)的認(rèn)知態(tài)度,也可以附帶了解用戶(hù)的行為習(xí)慣,


問(wèn)卷調(diào)研的優(yōu)缺點(diǎn)

優(yōu)點(diǎn):統(tǒng)一性、靈活性、量化性、匿名性

缺點(diǎn):(1)只能獲得書(shū)面的信息,而不能了解到生動(dòng)、具體的情況。(2)缺乏彈性,很難做深入的定性調(diào)研。(3)調(diào)查者難以了解被調(diào)查者是否認(rèn)真作答,是不是自己填寫(xiě)的。(4)填寫(xiě)問(wèn)卷比較容易,有些別調(diào)查者會(huì)隨意選擇,或者按照社會(huì)主流觀點(diǎn)選擇,這樣會(huì)使調(diào)查失去真實(shí)性。(5)回復(fù)效率低,對(duì)無(wú)回答者的研究比較困難。


問(wèn)卷調(diào)查的使用場(chǎng)景

適用于:(1)需要進(jìn)行定量分析的調(diào)研。(2)需要匿名進(jìn)行調(diào)研的問(wèn)題。(3)對(duì)已有假設(shè)進(jìn)行檢驗(yàn)。(4)尋找問(wèn)題隱藏的關(guān)聯(lián)。(5)對(duì)產(chǎn)品設(shè)計(jì)用戶(hù)認(rèn)知及態(tài)度的評(píng)估。

不適用于:(1)發(fā)現(xiàn)和描述具體問(wèn)題。(2)探索受訪對(duì)象的模糊態(tài)度。(3)獲取創(chuàng)新想法。(4)獲取精確的行為數(shù)據(jù)。


問(wèn)卷調(diào)研流程

1、確定目標(biāo):確定調(diào)研目的、對(duì)象、分析目的和應(yīng)用對(duì)象。

2、調(diào)研方案:通過(guò)訪談、經(jīng)驗(yàn)、理論等,確定調(diào)研框架,題目選項(xiàng),分析思路,投放渠道,相本配比等。

3、問(wèn)卷設(shè)計(jì):?jiǎn)柧碓O(shè)計(jì),問(wèn)題美化,投放渠道。

4、問(wèn)卷測(cè)試:多人測(cè)試,確保問(wèn)卷的可讀性,邏輯通暢

5、問(wèn)卷投放:按照計(jì)劃好的投放渠道進(jìn)行投放,回收數(shù)據(jù),數(shù)據(jù)清洗

6、問(wèn)卷分析及填寫(xiě)報(bào)告:分析及報(bào)告填寫(xiě),調(diào)研結(jié)果落地



數(shù)據(jù)分析

概述:通過(guò)在網(wǎng)站或應(yīng)用中進(jìn)行數(shù)據(jù)埋點(diǎn),獲取用戶(hù)對(duì)產(chǎn)品的使用和行為數(shù)據(jù),并進(jìn)行基于產(chǎn)品體驗(yàn)優(yōu)化的數(shù)據(jù)進(jìn)行分析。


數(shù)據(jù)分析可以做什么?

1、可以做到用戶(hù)從哪里來(lái),來(lái)了多少

2、獲取用戶(hù)屬性,用戶(hù)地域,用戶(hù)設(shè)備

3、訪問(wèn)了哪些頁(yè)面,使用了哪些功能,消費(fèi)了多少錢(qián),消耗了多少時(shí)間

4、哪些流量可能存在問(wèn)題,忠誠(chéng)度如何,活躍度如何,有沒(méi)有達(dá)到目標(biāo),和行業(yè)相比如何

5、流失情況如何,離開(kāi)之后是否還回來(lái)

可以作為產(chǎn)品的眼鏡和大腦,提供客觀衡量的依據(jù),可以持續(xù)優(yōu)化改進(jìn)。


數(shù)據(jù)獲取方式的對(duì)比

日志文件:優(yōu)勢(shì),完整的服務(wù)端請(qǐng)求記錄。

                  缺點(diǎn),日志的獲取和清洗有過(guò)濾成本,許多頁(yè)面操作無(wú)法記錄。

JS頁(yè)面標(biāo)記:優(yōu)勢(shì),數(shù)據(jù)獲取可控、靈活,可以對(duì)頁(yè)面操作記錄進(jìn)行記錄,獲取數(shù)據(jù)比較完整豐富。

                      缺點(diǎn),需要在頁(yè)面植入JS標(biāo)記代碼,某些情況下無(wú)法獲取,如當(dāng)用戶(hù)禁用JS功能時(shí)。


常用的數(shù)據(jù)監(jiān)控平臺(tái)

1、第三方監(jiān)控平臺(tái):如Google Analytics、百度統(tǒng)計(jì)、騰訊云分析等

2、自研平臺(tái)


數(shù)據(jù)分析流程

1、監(jiān)控  2、定義  3、埋點(diǎn)  4、測(cè)量  5、分析  6、優(yōu)化


Web分析常用的指標(biāo)

PV:是指頁(yè)面瀏覽量,網(wǎng)頁(yè)瀏覽數(shù)實(shí)施評(píng)價(jià)網(wǎng)站流量最常用的指標(biāo)之一,用戶(hù)每一次訪問(wèn)網(wǎng)站中的頁(yè)面均被記錄,對(duì)統(tǒng)一頁(yè)面多次訪問(wèn),訪問(wèn)量累計(jì)

UV:是指獨(dú)立訪客,是通過(guò)互聯(lián)網(wǎng)訪問(wèn)、瀏覽這個(gè)頁(yè)面的自然人

UPV:是指唯一身份綜合瀏覽量

訪問(wèn):是指在一定時(shí)間范圍內(nèi),網(wǎng)站所有訪問(wèn)者對(duì)網(wǎng)站發(fā)起訪問(wèn)的總次數(shù),從訪客來(lái)到網(wǎng)站到最終關(guān)閉網(wǎng)站所有頁(yè)面,記為一次訪問(wèn)

識(shí)別用戶(hù)的方式:IP、IP+User Agent、cookie、User ID、設(shè)備ID、其他


復(fù)合指標(biāo)

跳出率:指用戶(hù)來(lái)到網(wǎng)站,只瀏覽了一個(gè)頁(yè)面就離開(kāi)的訪問(wèn)次數(shù),占全部訪問(wèn)次數(shù)的百分比,簡(jiǎn)稱(chēng)“來(lái)了就走”。跳出率可以被用來(lái)衡量流量和頁(yè)面質(zhì)量,高跳出率表示訪問(wèn)者對(duì)著陸頁(yè)面不感興趣,沒(méi)有繼續(xù)訪問(wèn)更深入的頁(yè)面。也可能頁(yè)面設(shè)計(jì)存在問(wèn)題,也可能是導(dǎo)入的用戶(hù)不匹配。跳出率可以通過(guò)調(diào)整廣告渠道,優(yōu)化頁(yè)面內(nèi)容來(lái)降低。

退出率:訪問(wèn)者離開(kāi)網(wǎng)站一次被記錄為一次退出,某一范圍內(nèi)退出的數(shù)量/該范圍的綜合訪問(wèn)量就是退出率。如果關(guān)鍵流程中的某一頁(yè)面退出率高,代表某一頁(yè)面可能出現(xiàn)了問(wèn)題。

訪問(wèn)時(shí)長(zhǎng):網(wǎng)站停留時(shí)長(zhǎng),頁(yè)面停留時(shí)長(zhǎng),應(yīng)用使用時(shí)長(zhǎng)。訪問(wèn)量是訪問(wèn)質(zhì)量的一個(gè)衡量指標(biāo),較長(zhǎng)的訪問(wèn)時(shí)間說(shuō)明用戶(hù)與產(chǎn)品進(jìn)行了較多的互動(dòng)。

訪問(wèn)深度:可以理解為單個(gè)用戶(hù)平均訪問(wèn)的頁(yè)面數(shù),是PV/UV的比值。訪問(wèn)深度也是訪問(wèn)質(zhì)量的一個(gè)衡量指標(biāo),可以考察用戶(hù)是否和網(wǎng)站進(jìn)行了較多互動(dòng)。這個(gè)比值越大,代表網(wǎng)站的粘性越高。

轉(zhuǎn)化率:指在一個(gè)統(tǒng)計(jì)周期內(nèi),完成轉(zhuǎn)化目標(biāo)行為的次數(shù)占總訪問(wèn)次數(shù)的比率。根據(jù)設(shè)置不同目的進(jìn)行計(jì)算,例如注冊(cè)轉(zhuǎn)化率、付款轉(zhuǎn)化率等,是一個(gè)重要的分析指標(biāo)。


移動(dòng)端基礎(chǔ)指標(biāo)

移動(dòng)端的基礎(chǔ)指標(biāo)監(jiān)測(cè)與web端略有不同,但分析思路大致相同。指標(biāo)分為:新增設(shè)備、累計(jì)設(shè)備、啟動(dòng)次數(shù)、單詞使用時(shí)長(zhǎng)。


常見(jiàn)分析內(nèi)容

流量分析(哪里來(lái)?)、用戶(hù)分析(什么樣的用戶(hù)?)、行為分析(如何使用的?)、路徑轉(zhuǎn)化(表現(xiàn)如何?)、流失分析(粘性如何?)



A/B test

A/B測(cè)試是一種幫助網(wǎng)頁(yè)優(yōu)化實(shí)驗(yàn)的方法。A/B測(cè)試的目的在于通過(guò)科學(xué)的實(shí)驗(yàn)設(shè)計(jì)和采集數(shù)據(jù)的方式,來(lái)獲得具有代表性的實(shí)驗(yàn)結(jié)論,從而尋找到更好的產(chǎn)品策略。

簡(jiǎn)單來(lái)說(shuō),就是為同一目標(biāo)制定兩個(gè)方案,讓一部分用戶(hù)使用A方案,另一部分使用B方案,記錄用戶(hù)的使用情況,對(duì)比兩個(gè)方案的結(jié)果,選擇更符合的方案。

A/B test一般會(huì)在產(chǎn)品改版正式上線之前使用,來(lái)驗(yàn)證新的設(shè)計(jì)是否可以提高產(chǎn)品的表現(xiàn)。


A/B test可以測(cè)試的元素有:標(biāo)題、圖片、顏色、社交元素、段落文本、按鈕、導(dǎo)航、任務(wù)流程、頁(yè)面布局、價(jià)格、視頻等??梢淮沃桓淖円粋€(gè)元素或一次改變多個(gè)元素的方式來(lái)測(cè)試,這就是兩個(gè)測(cè)試類(lèi)型單變量測(cè)試和多變量測(cè)試。


A/B test工具

Google Website Optimizer:搜索巨頭提供的免費(fèi)A/B test工具,一個(gè)很好的入門(mén)級(jí)工具,但是沒(méi)有一些先進(jìn)的功能。

Visual Website Optimizer:一個(gè)易于使用的A/Btest測(cè)試工具,包含功能有所見(jiàn)即所得的編輯器,單機(jī)地圖,訪問(wèn)者分割和標(biāo)簽等。

Unbounce and Performable:集成著陸設(shè)計(jì)的A/B測(cè)試工具。

Vertster,SiteSpect,Webtrends Optimize and Omniture's Test&Target:企業(yè)級(jí)測(cè)試工具

App Adhoc Optimizer:國(guó)內(nèi)A/B Test工具,同時(shí)支持前端(Web/H5、IOS、Android)及后端(Node.JS、PHP、Java)AB測(cè)試服務(wù)的專(zhuān)業(yè)Saas平臺(tái)

Optimizely:是網(wǎng)上現(xiàn)有的最專(zhuān)業(yè)的AB測(cè)試工具之一,它的價(jià)格要比其他的工具高很多(也可以免費(fèi)使用一個(gè)月),它提供了一些非常好的功能。

Unbounce:對(duì)于登錄頁(yè)面的測(cè)試來(lái)講非常不錯(cuò),而且它不僅僅是個(gè)測(cè)試工具,還可以在無(wú)需自己編寫(xiě)任何代碼的情況下來(lái)創(chuàng)建登錄頁(yè)面。


如何做A/Btest

1、確定目標(biāo),例如提高網(wǎng)站的付費(fèi)轉(zhuǎn)化率,降低跳出率等

2、測(cè)試方案,建立假設(shè):購(gòu)買(mǎi)按鈕的顏色會(huì)影響點(diǎn)擊率?縮短流程可以提高復(fù)費(fèi)率?改變導(dǎo)航可以降低跳出率等?

3、創(chuàng)建相比較的兩個(gè)版本,改變其中的變量

4、發(fā)布測(cè)試,將部分流量導(dǎo)向B方案,但不一定是5:5

5、數(shù)據(jù)分析,收集數(shù)據(jù),對(duì)比AB版本的轉(zhuǎn)化率、跳出率、留存率等


感謝閱讀!

文章來(lái)源:站酷   作者:_微光
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(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ì)sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)



如何提升B端界面的精致度

純純

于B端,我想剛開(kāi)始很多同學(xué)就直接拿Ant Design套套界面,因?yàn)楣疽蟛⒉桓?,隨后字節(jié)Arco Design也推出了對(duì)應(yīng)的模版和規(guī)范,能讓我們快速作出一個(gè)不出錯(cuò)的方案。

但是隨著公司對(duì)B端越來(lái)越重視,這些模版顯然就太爛大街了。公司、市場(chǎng)的要求顯然不止于此,我們的設(shè)計(jì)追求也不止于此。 

那么我們?nèi)绾尾拍軘[脫套模版,提高界面的精致度,提升界面的交互體驗(yàn)?zāi)兀?

其實(shí)很簡(jiǎn)單,王陽(yáng)明先生告訴我們知行合一,知是行之始行是知之成。我們?nèi)绾尾拍芴嵘鼴端界面端精致度?

第一,需要知道什么是好的設(shè)計(jì);

第二,需要不斷的去實(shí)踐去練習(xí),缺一不可。

本文先和大家談?wù)勚膶用妫岣呶覀兊难劢?,下面就和大家分享一些不錯(cuò)的B端產(chǎn)品,大家有時(shí)間可以去慢慢體驗(yàn)。 

PS:作為B端設(shè)計(jì)師,一定要去多拆解競(jìng)品,多研究好的產(chǎn)品,別面試的時(shí)候,面試官問(wèn)你研究的B端產(chǎn)品是什么,你只知道阿里云、騰訊云、百度云哦! 


1、Hubspot

做B端的同學(xué),尤其是做CRM的同學(xué)應(yīng)該都知道Salesforce,他是全球最大的 CRM(客戶(hù)關(guān)系管理) 工具公司。 

Hubspot同樣是提供客戶(hù)管理相關(guān)的應(yīng)用,雖然成立相對(duì)Salesforce晚,但是在市場(chǎng)上也占有一席之地。

從設(shè)計(jì)的角度來(lái)看,他的界面風(fēng)格更加簡(jiǎn)潔舒適,從體驗(yàn)上來(lái)看和國(guó)內(nèi)的CRM系統(tǒng)完全不同,其體驗(yàn)更加自然和舒適。 

這種風(fēng)格大家看了有沒(méi)有覺(jué)得很熟悉呢?

大家在去看看 GoDoddy , Airbnb ,Zillow,是不是發(fā)現(xiàn)風(fēng)格有一點(diǎn)類(lèi)似,大家可以對(duì)比國(guó)內(nèi)產(chǎn)品去拆解下他們的交互細(xì)節(jié)有什么不同,完成同樣的任務(wù)他們采用的方案有何不同,相信你會(huì)有很多的收獲。 

國(guó)外的界面看著總讓人覺(jué)得很舒適,僅僅是因?yàn)榭酥频脑O(shè)計(jì)、中性灰使用得好嗎?當(dāng)然不是,是因?yàn)橛⑽谋旧砭褪菆D形化的文字。

如果翻譯成中文,你會(huì)發(fā)現(xiàn)好像不是特別理想。 

這個(gè)樣子拿給領(lǐng)導(dǎo)過(guò)稿,怕是分分鐘被拍死,因此我們還是需要多看看國(guó)內(nèi)優(yōu)秀的產(chǎn)品。


2、神策

神策的設(shè)計(jì),我想B端的朋友不陌生吧,國(guó)內(nèi)產(chǎn)品中他的設(shè)計(jì)一直是我們的參考對(duì)象。

不同于其他產(chǎn)品,他的體驗(yàn)門(mén)檻比較低,注冊(cè)后就可以去體驗(yàn)他的demo,也沒(méi)有試用期限,參考對(duì)象從可視化報(bào)表,到界面交互均能找到參考。

不過(guò)當(dāng)你參考一次后發(fā)現(xiàn),做出來(lái)的界面怎么還是少了一些靈魂,雖然界面風(fēng)格上了一個(gè)臺(tái)階,但為什么用戶(hù)還是覺(jué)得產(chǎn)品難用。

 

3、項(xiàng)目管理類(lèi)

這里不得不和大家推薦項(xiàng)目管理類(lèi)產(chǎn)品了,這類(lèi)產(chǎn)品是專(zhuān)門(mén)給互聯(lián)網(wǎng)公司的開(kāi)發(fā)團(tuán)隊(duì)使用,他們都是專(zhuān)業(yè)用戶(hù),同時(shí)這些都是提高他們工作效率的工具,因此這些產(chǎn)品投入的成本更高,優(yōu)化得更好,拆解他們的產(chǎn)品,就是直接觀看高手的成長(zhǎng)之路。

Jira

Jira是Atlassian公司出品的一款事務(wù)管理軟件,JIRA的界面效果交互都非常不錯(cuò)。大型互聯(lián)網(wǎng)公司如LinkedIn、Facebook、eBay等內(nèi)部都在使用Jira。

同時(shí)他也是國(guó)內(nèi)項(xiàng)目管理類(lèi)產(chǎn)品的學(xué)習(xí)研究對(duì)象,因此大家可以通過(guò)文章、B站、界面截圖,自己申請(qǐng)?bào)w驗(yàn)等方式全面的進(jìn)行體驗(yàn)。

同時(shí)也可借助群的力量,調(diào)研下有使用Jira的小伙伴,看看他們?cè)谑褂弥杏惺裁磫?wèn)題,下面是我收集Jira網(wǎng)頁(yè)版和本地配置版的問(wèn)題截圖,這些都來(lái)自不同角色的真實(shí)體驗(yàn),會(huì)更有分析的價(jià)值。(這部分截圖涉及到公司的數(shù)據(jù),同時(shí)數(shù)量多不太方便打碼,就不分享給大家了。)

當(dāng)然國(guó)內(nèi)的項(xiàng)目管理類(lèi)產(chǎn)品也得去看,我們要對(duì)比哪里做得好,哪里還需要改進(jìn)。國(guó)內(nèi)的有Worktile、Gitee、Tower、Ones、PingCode、TAPD、Teambition,這些產(chǎn)品不管從視覺(jué)還是體驗(yàn)都非常不錯(cuò),大家一定要去體驗(yàn)。


5、文檔管理類(lèi)產(chǎn)品

通過(guò)不斷對(duì)競(jìng)品進(jìn)行拆解,你已經(jīng)不是當(dāng)初那個(gè)小白了,你的行業(yè)認(rèn)知,方案設(shè)計(jì)能力應(yīng)該趕超了一大波人。

成長(zhǎng)的同時(shí),又發(fā)現(xiàn)你設(shè)計(jì)的界面,不太精致,少了些溫度,這時(shí)候推薦你看文檔管理類(lèi)產(chǎn)品。

WPS

第一個(gè)和大家推薦的是WPS,界面簡(jiǎn)潔,配色舒適。 


飛書(shū)

在管理類(lèi)的軟件中,不得不提飛書(shū)的管理界面,從設(shè)計(jì)到使用體驗(yàn),他給我的感覺(jué)終于不是那么千遍一律,用組件庫(kù)搭建起來(lái)的感覺(jué)。

他開(kāi)始有了溫度,開(kāi)始注重品牌感的打造,用戶(hù)的引導(dǎo),符合品牌調(diào)性的插畫(huà)。 

 

對(duì)一些體驗(yàn)的細(xì)節(jié)進(jìn)行優(yōu)化,比如傳統(tǒng)的編輯都是放在頁(yè)面頂部,它采用了離光標(biāo)更近的位置。 

根據(jù)菲茲定律,光標(biāo)當(dāng)前的位置和目標(biāo)位置的距離D越短,所用的時(shí)間越短,具體好不好用,歡迎大家在評(píng)論區(qū)留言哦。 


6、概念稿

到這時(shí)候如果你覺(jué)得線上的產(chǎn)品太禁錮思維,那么推薦你看看dribbble、behance,搜索data、web、dashboard等關(guān)鍵詞,去看看有沒(méi)有新的靈感。

我的花瓣收集了一部分,如果不嫌棄,可以去看看,順藤摸瓜應(yīng)該可以找到很多不錯(cuò)的設(shè)計(jì)。

圖片標(biāo)題

 

7、畫(huà)重點(diǎn)

如何提升B端界面的精致度?

第一,要知道什么是好的設(shè)計(jì),多拆解國(guó)內(nèi)外優(yōu)化的B端產(chǎn)品。

第二,多在工作中時(shí)間,有時(shí)間多做ABC方案,鍛煉自己的方案設(shè)計(jì)能力,多踩一些坑,時(shí)刻保持學(xué)習(xí)能力,慢慢就成長(zhǎng)了。

文章來(lái)源:UI中國(guó)   作者:風(fēng)箏KK
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(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ì)sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


UI界面設(shè)計(jì)基礎(chǔ)

博博

互聯(lián)網(wǎng)設(shè)計(jì)的一些基礎(chǔ)知識(shí),寫(xiě)給剛?cè)腴T(mén)或想入門(mén)的童鞋們,希望有所幫助


    • 文章來(lái)源:站酷   作者:凌坤_Maxidea

      分享此文一切功德,皆悉回向給文章原作者及眾讀者.

      免責(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ì)( sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、
      BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

圓形元素在界面設(shè)計(jì)中的運(yùn)用

博博

圓形元素在界面設(shè)計(jì)中被廣泛運(yùn)用,從常見(jiàn)的圓形圖標(biāo)到圓形的頭像,又或是圓形的輪廓形狀。圓形是一種特殊的形狀,它能夠在眾多幾何形狀中被我們快速地注意到。也正因?yàn)槿绱?,在使用圓形元素設(shè)計(jì)界面時(shí)會(huì)有一些注意事項(xiàng)。

圓形元素在界面設(shè)計(jì)中被廣泛運(yùn)用,從常見(jiàn)的圓形圖標(biāo)到圓形的頭像,又或是圓形的輪廓形狀。圓形是一種特殊的形狀,它能夠在眾多幾何形狀中被我們快速地注意到。也正因?yàn)槿绱耍谑褂脠A形元素設(shè)計(jì)界面時(shí)會(huì)有一些注意事項(xiàng)。


一、圓形頭像


放眼望去,圓形頭像已然占領(lǐng)了我們的手機(jī)。不妨看看下面舉的這些例子,如下圖所示。

43e456a455da32f875520f6db95d.jpg

從左到右依次是搜狗地圖、QQ、Instagram。當(dāng)然,還有很多其它的例子,就不一一列舉啦。此刻,肯定有同學(xué)已經(jīng)按耐不住要跳出來(lái)反駁了,微信和Facebook就不是圓形頭像,不信你看下面兩張圖。d1df56a455f56ac7256cb095c8b4.jpg

方與圓之間,孰對(duì)孰錯(cuò),請(qǐng)繼續(xù)看下文分解。


1.用戶(hù)使用頭像的目的

不管是圓形頭像,還是方形頭像,其歸根結(jié)底都是頭像。用戶(hù)使用頭像的目的,主要是作為個(gè)人身份的象征。區(qū)別于其他用戶(hù)的特征有很多,例如用戶(hù)名、用戶(hù)ID、用戶(hù)頭像。在這些備選項(xiàng)中,頭像最便于快速識(shí)別和記憶,尤其是帥哥美女。


除此之外,還有一部分通過(guò)頭像來(lái)彰顯自己的個(gè)性,例如美女通常會(huì)使用自己的性感自拍作為頭像來(lái)表現(xiàn)自己的魅力,又或是使用卡通人物或形象作為頭像來(lái)表現(xiàn)自己的藝術(shù)氣息,再或是使用萌寵作為頭像來(lái)表現(xiàn)自己的愛(ài)心或是呆萌。


2.用戶(hù)使用什么照片作為頭像

隨著智能手機(jī)的越來(lái)越普及,人們拍攝照片的門(mén)檻也變得越來(lái)越低,越來(lái)越多的用戶(hù)使用自拍的照片作為頭像。照片的內(nèi)容五花八門(mén),例如人物、風(fēng)景、花草、寵物。即使是正常的人物照片,背景中也會(huì)摻雜著很多其它的元素,例如下圖所示。

5cf056a456106ac7256cb020a2c8.jpg

第一張照片中人物背景雖然虛化了,但背景仍然很凌亂,一些微弱的對(duì)比色很容易就搶奪了用戶(hù)的視線。第二張照片中人物是配角,豪車(chē)才是真正的主角,這類(lèi)型的自拍照不再少數(shù)。第三張照片人物拍攝的光線陰影錯(cuò)亂,故意露出一線背景內(nèi)容,其用意如何昭然若揭。此外,用戶(hù)手機(jī)的好壞、拍照水平也不一致,拍攝出的照片質(zhì)量也參差不齊。


使用這些照片作為頭像時(shí),人物不但不被突出,反而被弱化了。雖然智能手機(jī)屏幕越來(lái)越大,但是當(dāng)頭像集體在界面中展示的的時(shí)候,每個(gè)頭像依然較小。


3.方形頭像和圓形頭像的區(qū)別

方形頭像和圓形頭像的區(qū)別可以用兩張對(duì)比圖來(lái)說(shuō)明,如下圖所示。

5d5c56a456266ac7256cb013db0c.jpg

左圖是方形頭像,右圖是圓形頭像。通過(guò)對(duì)比,可以發(fā)現(xiàn)以下幾點(diǎn):


a、圓形頭像能夠更好地幫助用戶(hù)聚焦到人臉。雖然左圖能夠完整地呈現(xiàn)人物特征,但是干擾信息較多,例如背景中的燈光、門(mén)柱、屏風(fēng)。對(duì)比之下,右圖更為清晰地展示了人物的臉部特征,例如錐子臉、美瞳、假睫毛。在前面的分析中也提到,手機(jī)拍攝的照片質(zhì)量參差不齊。在這種現(xiàn)實(shí)情況下,圓形頭像更有利于忽略照片的背景,提高頭像的識(shí)別效率。


b、嚴(yán)格意義上講左圖并不能稱(chēng)之為頭像,而更應(yīng)該稱(chēng)之為照片。原因很簡(jiǎn)單,頭像嘛,自然應(yīng)該以展示“頭”為主,而左圖中頭像只占畫(huà)面四分之一不到的區(qū)域。從這個(gè)角度來(lái)說(shuō),顯然右圖更為合適。在選擇照片作為頭像時(shí),如果是圓形,用戶(hù)更愿意選擇臉部的照片作為頭像;如果是方形,用戶(hù)則相對(duì)更隨意,通常是全身或是半身照。不信,你可以打開(kāi)自己的微信,看看自己的好友頭像,或者往前滑滑看看前面的配圖。


c、日常生活中,我們看到的大多數(shù)相框都是方形的,圓形的相框較少,這是因?yàn)榇蠖鄶?shù)照片都是方形的。因此,使用圓形的輪廓來(lái)表現(xiàn)頭像,能夠快速地和照片區(qū)分開(kāi)來(lái),更加突出。

當(dāng)然,使用圓形的輪廓作為頭像,還有一些其它的原因,例如技術(shù)上的進(jìn)步。

早期由于CSS等技術(shù)的不成熟,圓形、圓角圖形的處理非常麻煩,現(xiàn)在變得容易很多。


二、圓形的icon


在APP的UI設(shè)計(jì)中,我們會(huì)經(jīng)??吹揭慌排艌A形的icon,例如下圖所示。


fc6956a4564232f875520ff01b89.jpg

上圖中,前面兩個(gè)分別是美團(tuán)和淘寶。在設(shè)計(jì)上,都有兩行橫排的圓形圖標(biāo)。最后一張圖是搜狗地圖的服務(wù)tab頁(yè),可以發(fā)現(xiàn)也有縱向排列的一溜圓形圖標(biāo)。

在這里,要回答兩個(gè)問(wèn)題:

1.為什么要用圓形?

2.為什么要用圓形而非矩形?


第1個(gè)問(wèn)題很方便回答。每個(gè)功能入口的圖標(biāo)都不相同,如果去掉圓形輪廓,勢(shì)必會(huì)顯得十分凌亂。大家都知道圓形是一個(gè)封閉的形體,加上圓形之后就能夠弱化圖標(biāo)的差異性,讓其變得更加規(guī)整,看起來(lái)也更加清爽,整齊劃一。同時(shí),在功能上也表明各個(gè)圖標(biāo)之間的平等地位,不會(huì)因?yàn)槟硞€(gè)圖標(biāo)形狀特殊而有所偏袒。


在回答第2個(gè)問(wèn)題之前,首先回歸圓形和方形的基本特征,

圓形:動(dòng),曲線,運(yùn)動(dòng),靈動(dòng),流動(dòng)

方形:靜,直線,規(guī)則,嚴(yán)肅,理性

圓形和方形比起來(lái),顯得要靈動(dòng)很多,不至于那么呆板、嚴(yán)肅。如此,不難理解為什么用圓形而非矩形。


其次,圓形能夠使圖標(biāo)在方形頁(yè)面中脫穎而出——不覺(jué)得這幾個(gè)圓形圖標(biāo)在頁(yè)面中非常突出搶眼么?原因嘛,很簡(jiǎn)單。我們的手機(jī)屏幕大多是方形的,界面中的大多數(shù)元素也是方形的,這時(shí)候用一點(diǎn)少量的圓形,自然在界面中形成焦點(diǎn),這一點(diǎn)在后面的分析中還會(huì)見(jiàn)到。


除了這種形式之外,還有一些單個(gè)的圓形圖標(biāo)浮于頁(yè)面底部,通常執(zhí)行的是返回至頂部的操作。


三、圓形和方形的結(jié)合


圓與方就像太極中的陰與陽(yáng),相生相克,而又生生不息。巧妙地將圓形與方形進(jìn)行結(jié)合,能夠讓頁(yè)面變得生動(dòng)活潑的同時(shí),也能夠更好實(shí)現(xiàn)功能上的引導(dǎo),如下圖所示的幾個(gè)案例。

ebb456a4567032f875520fafc8f5.jpg

第一幅圖是谷歌手機(jī)地圖,地點(diǎn)右上角的出行方式圖標(biāo)剛好被方形的臨時(shí)層一分為二。從功能上來(lái)講,出行方式是下一步的行為,不屬于臨時(shí)層里的內(nèi)容,因此置于右上角的位置是比較合適的。從UI角度來(lái)說(shuō),圓形與方形結(jié)合,使的圓形變得更加突出顯眼;同時(shí)圓形置于右上角,頁(yè)面也不那么死板,反而讓頁(yè)面變得生動(dòng)、活潑起來(lái)。


第二幅圖是宜人貸,微微鼓起的弧度讓這個(gè)理財(cái)項(xiàng)目變得十分突出,同時(shí)也打破了頁(yè)面沉悶的布局。


第三幅圖是kitchen stories,整個(gè)頁(yè)面保持左右居中,作者的頭像居中現(xiàn)實(shí),對(duì)頁(yè)面進(jìn)行了分割的同時(shí)起到了承上啟下的作用。


在頁(yè)面設(shè)計(jì)中,圓形元素通常不是獨(dú)立存在的,而是和其他元素相生相息,相互包容。尋求好的視覺(jué)效果的同時(shí),也要弄清楚頁(yè)面元素之間的相互關(guān)系,這樣產(chǎn)出的設(shè)計(jì)才是真的好設(shè)計(jì)。


四、圓形的輪廓


結(jié)合現(xiàn)實(shí)物體,借用圓形輪廓,打造頁(yè)面點(diǎn)睛之筆。還是舉幾個(gè)栗子給大家看看吧,如下圖所示。

a29156a4568e6ac7256cb0899d80.jpg

第一幅圖所示的是網(wǎng)易云音樂(lè)的播放界面。圓形輪廓與唱片保持一致,雖然占據(jù)了頁(yè)面的主要空間,但是使的整個(gè)頁(yè)面變得文藝簡(jiǎn)潔。


第二幅圖所示的是搜易貸的賬戶(hù)頁(yè)面。可用余額采用瓶裝水的設(shè)計(jì),余額較多則水漲的越高,同時(shí)會(huì)有晃動(dòng)的效果,栩栩如生的同時(shí)讓頁(yè)面變得靈動(dòng)起來(lái)。


第三幅圖所示的是樂(lè)動(dòng)力的首頁(yè)。步數(shù)越多,則描邊進(jìn)度條越多,暗色變得越暖。與現(xiàn)實(shí)生活中的儀表盤(pán)相對(duì)應(yīng),漸變色搭配圓形,使的頁(yè)面變得主次分明,極富視覺(jué)沖擊力。


可以發(fā)現(xiàn),在使用圓形元素時(shí)要注意頁(yè)面的平衡,例如左右和上下的對(duì)齊居中。為了保證頁(yè)面的均衡和清爽,通常會(huì)在圓形元素周?chē)A糨^多的空白。這些都是在使用圓形元素時(shí)需要注意的事項(xiàng)。


    • 文章來(lái)源:站酷   作者:Sim_H

      分享此文一切功德,皆悉回向給文章原作者及眾讀者.

      免責(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ì)( sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、
      BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

7個(gè)基礎(chǔ)的用戶(hù)體驗(yàn)設(shè)計(jì)細(xì)節(jié)

seo達(dá)人


1、專(zhuān)注于20%

maggelato

你可曾聽(tīng)說(shuō)過(guò)80/20法則?簡(jiǎn)而言之,80%的用戶(hù)通常只會(huì)使用你網(wǎng)站內(nèi)容和功能的20%,絕大多數(shù)的用戶(hù)只是在掃視網(wǎng)站內(nèi)容,并且只會(huì)挑選真正感興趣的瀏覽。

同時(shí)這也意味著,剩余的20%就相當(dāng)重要了。大多數(shù)的點(diǎn)擊將源自于這一區(qū)域,它也是近乎完美的內(nèi)容和互動(dòng)區(qū)域。

你可以借助數(shù)據(jù)分析來(lái)決定哪個(gè)部分是整個(gè)網(wǎng)站最被關(guān)注的那20%。對(duì)于剛剛上線的網(wǎng)站,這個(gè)數(shù)據(jù)搜集的過(guò)程可能長(zhǎng)達(dá)好幾周,隨后再進(jìn)行調(diào)整。

當(dāng)然,你也可以通過(guò)引導(dǎo)將用戶(hù)引流到你希望用戶(hù)去的那20%的區(qū)域。借助視覺(jué)引導(dǎo)和行動(dòng)召喚設(shè)計(jì)來(lái)引流,用有趣和有意思的設(shè)計(jì)來(lái)營(yíng)造令人有興趣的區(qū)域,讓他們樂(lè)于點(diǎn)擊,從而達(dá)到目的。

2、架構(gòu)式的思維

goldhill

設(shè)計(jì)一個(gè)網(wǎng)站和搭建一所房子其實(shí)差不多。首先,它需要一個(gè)堅(jiān)實(shí)的基礎(chǔ),然后是能夠承載所有內(nèi)容的框架,做好后要好好裝飾一下。同樣的思維模式可以套用在網(wǎng)站的設(shè)計(jì)上。

更重要的是,你并不需要為此創(chuàng)造出過(guò)去從未在框架中出現(xiàn)過(guò)的東西,換言之,框架內(nèi)的素材、組件和我們常見(jiàn)的并無(wú)二致。就像導(dǎo)航設(shè)計(jì)模式一樣,現(xiàn)在的設(shè)計(jì)都趨于一致,因?yàn)檫@樣的導(dǎo)航好用。

當(dāng)網(wǎng)站的整體結(jié)構(gòu)搭建起來(lái)之后,可以將相同的思路套用到內(nèi)容體系的構(gòu)建上來(lái)。主要的正文內(nèi)容是整個(gè)網(wǎng)站內(nèi)容的基礎(chǔ),輔以吸引人的標(biāo)題、圖片,配合上其他的次要元素,整個(gè)內(nèi)容體系可以很快搭建起來(lái)。

3、不要要求太多

assos

現(xiàn)如今的世界可以說(shuō)是由數(shù)據(jù)所驅(qū)動(dòng),越來(lái)越多的應(yīng)用開(kāi)始要求用戶(hù)注冊(cè),要用戶(hù)提供更多的權(quán)限,更多的信息,以期為用戶(hù)提供更加個(gè)性化的體驗(yàn)。但是從體驗(yàn)的角度上來(lái)看,要盡量規(guī)避這一點(diǎn)。

站在用戶(hù)的角度稍加思考你就明白了。找到一個(gè)令你感興趣的炫酷網(wǎng)站,如果要深入了解更多內(nèi)容,就需要內(nèi)容,而如果要注冊(cè)的話(huà),網(wǎng)站卻需要你提供下面10個(gè)類(lèi)型的信息:姓名、郵件、國(guó)家、地區(qū)、城市、電話(huà)、Twitter權(quán)限、個(gè)人網(wǎng)站、工作職位、以及如何發(fā)現(xiàn)這個(gè)網(wǎng)站的。

那么接下來(lái),你會(huì)怎么做?絕大多數(shù)的用戶(hù)會(huì)直接轉(zhuǎn)身離開(kāi),這個(gè)注冊(cè)信息填寫(xiě)起來(lái)太費(fèi)勁,體驗(yàn)太差了。

那么,如果你當(dāng)你點(diǎn)擊注冊(cè)的時(shí)候,只需要一鍵從Facebook或者twitter授權(quán)即可,那么你會(huì)不會(huì)立刻點(diǎn)擊呢?至少?gòu)哪壳耙延械臄?shù)據(jù)來(lái)看,絕大多數(shù)的用戶(hù)會(huì)這么選擇。

4、令人愉悅的微交互

evernote-1

可能很多時(shí)候你都沒(méi)注意到,你和各種微交互進(jìn)行的互動(dòng)一直都存在。

·谷歌日歷彈出框提示你每周例會(huì)要開(kāi)始了
·短信提醒
·午睡的鬧鐘
·微博上的新粉絲和轉(zhuǎn)發(fā)提醒

這樣的例子我們可以連續(xù)不斷地說(shuō)上一個(gè)小時(shí)。這些帶有微交互的提醒和動(dòng)作會(huì)推動(dòng)用戶(hù)進(jìn)行下一步操作,帶來(lái)愉悅的體驗(yàn),它們不能設(shè)計(jì)得非常醒目,但是又需要適當(dāng)?shù)匚脩?hù)注意。

這些有趣的微交互的加入讓用戶(hù)從中獲得好處。而你需要思考的是,有哪些東西是你的網(wǎng)站或者APP當(dāng)中,用戶(hù)想要立刻知道和獲得、想被提醒的?

5、甚至幼兒都能輕松使用

statusshop

如果要給小孩子設(shè)計(jì)產(chǎn)品,那么它應(yīng)該是什么樣子?你可能會(huì)更專(zhuān)注于色彩的使用,讓每一個(gè)區(qū)塊都可以輕松點(diǎn)擊,明顯的標(biāo)簽,加上拼圖式的連接方式。

所以,當(dāng)我們?cè)谠O(shè)計(jì)網(wǎng)站或者APP的時(shí)候,我們會(huì)說(shuō)這個(gè)產(chǎn)品要足夠易用,那么怎么才算得上“足夠”呢?讓小孩子都可以輕松使用,這就叫足夠易用。換句話(huà)說(shuō),即使是不經(jīng)常使用網(wǎng)站和APP的成人,也不會(huì)存在明顯的使用障礙。

超大的設(shè)計(jì)元素和標(biāo)簽是設(shè)計(jì)的關(guān)鍵因素。這些視覺(jué)線索是幫助用戶(hù)引導(dǎo)用戶(hù)的核心,是整體體驗(yàn)設(shè)計(jì)中最重要的部分。大膽的色彩選擇,會(huì)鼓勵(lì)用戶(hù)點(diǎn)擊和探索。

如果它足夠易用,用戶(hù)會(huì)繼續(xù)嘗試使用和探索。而難于理解操作不便的導(dǎo)航自然會(huì)被用戶(hù)所嫌棄。如果網(wǎng)站包含太過(guò)復(fù)雜的媒體和內(nèi)容,那么不妨從一個(gè)設(shè)計(jì)簡(jiǎn)單的首頁(yè)開(kāi)始,幾個(gè)簡(jiǎn)單的導(dǎo)航點(diǎn)擊將用戶(hù)引導(dǎo)到對(duì)應(yīng)的位置。在深入到更復(fù)雜的頁(yè)面之前,用梳理清晰、簡(jiǎn)單明了的分頁(yè)讓用戶(hù)感到舒適,這是帶來(lái)好的瀏覽體驗(yàn)的不錯(cuò)解決方案。

6、輕拍(Tap)還是點(diǎn)擊(Click)?

espns

這一點(diǎn)要說(shuō)的并不是設(shè)計(jì)問(wèn)題,而是一個(gè)常見(jiàn)的開(kāi)發(fā)代碼的問(wèn)題。雖然Tap和Click兩者都能在點(diǎn)擊的時(shí)候觸發(fā),但是在移動(dòng)端網(wǎng)頁(yè)上使用Click事件 的時(shí)候,會(huì)有200ms 到300ms 的延遲,所以在移動(dòng)端上最好替換為T(mén)ap事件。在進(jìn)行響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的時(shí)候,一個(gè)事件從頭用到尾的錯(cuò)誤出現(xiàn)得很普遍,但是有太多的移動(dòng)端網(wǎng)頁(yè)在這樣的設(shè)計(jì)下會(huì)有明顯延遲,更惡劣的情況是無(wú)法識(shí)別,這樣會(huì)直接損害到整個(gè)頁(yè)面的易用性和功能本身。

此外,移動(dòng)端上使用 Tap事件的時(shí)候,它所對(duì)應(yīng)的按鈕應(yīng)當(dāng)相對(duì)更大一些,便于小屏上進(jìn)行交互。

7、像用戶(hù)一樣思考

justact

我們一直在說(shuō):“像用戶(hù)一樣思考”。但是實(shí)際的情況往往是,我們很難走出設(shè)計(jì)者和開(kāi)發(fā)者的思維方式,因?yàn)槲覀兊乃季S方式壓根就和用戶(hù)不同,面對(duì)每一個(gè)交互、每一個(gè)元素的下意識(shí)反應(yīng)是不一樣的。

所以,還是同設(shè)計(jì)圈、開(kāi)發(fā)圈和產(chǎn)品圈以外的人去聊聊吧,看看他們對(duì)于網(wǎng)站和APP的真實(shí)反應(yīng)到底是怎樣的。你可能會(huì)在觀察中發(fā)現(xiàn),他們對(duì)于產(chǎn)品、對(duì)于交互、對(duì)于界面的反應(yīng)和你的預(yù)期完全不同。將用戶(hù)的真實(shí)反饋記錄下來(lái),反饋給項(xiàng)目組,這樣可以幫你打造更好的用戶(hù)體驗(yàn),創(chuàng)造更優(yōu)秀的產(chǎn)品。

原文地址:designshack

譯文地址:優(yōu)設(shè)

作者:Carrie Cousins

優(yōu)設(shè)譯者:@陳子木

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》7個(gè)基礎(chǔ)的用戶(hù)體驗(yàn)設(shè)計(jì)細(xì)節(jié)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話(huà),可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(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ì)sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(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咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司



你的設(shè)計(jì)有依據(jù)嗎?詳解用戶(hù)體驗(yàn)設(shè)計(jì)中的規(guī)律與邏輯

seo達(dá)人


shejiyiju_001 shejiyiju_002 shejiyiju_003 shejiyiju_004 shejiyiju_005 shejiyiju_006 shejiyiju_007 shejiyiju_008 shejiyiju_009 shejiyiju_010 shejiyiju_011 shejiyiju_012 shejiyiju_013 shejiyiju_014 shejiyiju_015 shejiyiju_016 shejiyiju_017

原文地址:站酷

作者:孔雅軒LineVision

 

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》你的設(shè)計(jì)有依據(jù)嗎?詳解用戶(hù)體驗(yàn)設(shè)計(jì)中的規(guī)律與邏輯

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話(huà),可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(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ì)sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(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咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司



在不同屏幕和設(shè)備上創(chuàng)建用戶(hù)體驗(yàn)設(shè)計(jì)的8個(gè)步驟

seo達(dá)人


1. 確定核心用戶(hù)體驗(yàn)

每個(gè)產(chǎn)品都有核心的用戶(hù)體驗(yàn),這基本上是它存在的原因。它解決了人們所面臨的問(wèn)題,而且為他們提供有意義的價(jià)值。關(guān)鍵內(nèi)容和功能的組合代表了核心的用戶(hù)體驗(yàn)。要查找你的產(chǎn)品核心用戶(hù)體驗(yàn),就要問(wèn)自己一個(gè)問(wèn)題:“客戶(hù)需要完成哪些最常見(jiàn)和最重要的任務(wù)?”在你用于產(chǎn)品的每個(gè)渠道上支持這些核心任務(wù)的本質(zhì)至關(guān)重要。例如,Uber的核心用戶(hù)體驗(yàn)是任何時(shí)間隨叫隨到。無(wú)論屏幕尺寸如何,此功能都能在每個(gè)設(shè)備上正常工作實(shí)現(xiàn)這一目的。

Image title

                             預(yù)約出租車(chē)是Uber用戶(hù)最重要的任務(wù)。用戶(hù)可以使用Apple Watch完成此任務(wù)。圖片來(lái)源: Techcrunch

 

2. 定義產(chǎn)品的設(shè)備組

盡管存在大量不同屏幕尺寸的設(shè)備,但絕對(duì)不能定位各個(gè)設(shè)備,可以根據(jù)用戶(hù)可能關(guān)注的任務(wù)定義產(chǎn)品的設(shè)備組。最常見(jiàn)的設(shè)備組是:

移動(dòng)手機(jī)

平板電腦

臺(tái)式電腦

智能電視

智能手表

Image title

不同的設(shè)備組在不同的上下文中提供不同的服務(wù):用戶(hù)根據(jù)他們正在查看的屏幕的類(lèi)型參與不同的交互模式。例如,手機(jī)主要用于微任務(wù),并且具有較短的用戶(hù)會(huì)話(huà)。平板電腦主要用于內(nèi)容消費(fèi),目前不被視為大多數(shù)人的工作工具。在了解各種設(shè)備類(lèi)型的基本上下文的假設(shè)對(duì)于構(gòu)建一個(gè)好的用戶(hù)體驗(yàn)是至關(guān)重要。

 

3. 適應(yīng)每個(gè)上下文使用的體驗(yàn)

確定產(chǎn)品的核心用戶(hù)體驗(yàn)后,選擇一組你希望支持的設(shè)備組,你需要調(diào)整每個(gè)組的體驗(yàn)(對(duì)于每個(gè)上下文的使用)。上下文的設(shè)計(jì)在不同設(shè)備組設(shè)計(jì)時(shí)尤為重要。

第一,并非所有功能都在所有設(shè)備上都有意義。你需要確定你的產(chǎn)品在多個(gè)設(shè)備組中使用的不同場(chǎng)景,并設(shè)計(jì)適合每個(gè)場(chǎng)景的體驗(yàn)。例如,通常移動(dòng)用戶(hù)比電腦用戶(hù)想要的不同于產(chǎn)品。以 Evernote為例,可以在多臺(tái)設(shè)備上使用流行的筆記本產(chǎn)品。其電腦版本針對(duì)內(nèi)容消費(fèi)進(jìn)行了優(yōu)化:

Image title

                           用于電腦版本的Evernote應(yīng)用程序被優(yōu)化用于閱讀文本和查看媒體。

 

而移動(dòng)版本是針對(duì)拍攝筆記、照片和捕獲音頻進(jìn)行了優(yōu)化的:

Image title

Evernote了解移動(dòng)環(huán)境:它利用設(shè)備功能,并提供快速保存想法的方式(添加文本筆記,捕獲照片或設(shè)置提醒)。

 

第二,不同的屏幕允許不同的輸入法。以觸摸輸入為例。在設(shè)計(jì)具有觸摸輸入(移動(dòng)手機(jī)和智能手機(jī))的設(shè)備時(shí),設(shè)計(jì)師會(huì)犯的幾個(gè)常見(jiàn)錯(cuò)誤包括:

小的點(diǎn)擊目標(biāo)。點(diǎn)擊目標(biāo)(如CTA按鈕)必須具有足夠大的尺寸。通常至少7毫米是足夠的,但最好使用10mm觸摸目標(biāo)尺寸。

Image title

                                      圖片來(lái)源:UXMag

 

將項(xiàng)目過(guò)于緊密地放在一起。你應(yīng)該考慮點(diǎn)擊目標(biāo)的大小以及它們之間的間距,因?yàn)殚g距有助于分離控件,并給你的用戶(hù)界面提供呼吸的空間。建議的間距至少為23pt以防止輸入錯(cuò)誤。

Image title

                                                                                      按鈕之間的間距

使用懸停狀態(tài)。但在觸摸屏上,沒(méi)有“懸停”。

 

4. 最小屏幕設(shè)計(jì)

歷史上,設(shè)計(jì)師一直從事大屏幕到小屏幕的設(shè)計(jì)工作,這意味著第一個(gè)也是主要設(shè)計(jì)是為了完整的電腦桌面視圖(它具有最多的功能)。只有電腦桌面設(shè)計(jì)完成后才移植到移動(dòng)設(shè)備和其他設(shè)備組。但當(dāng)設(shè)計(jì)電腦桌面時(shí),我們通常面臨“廚房水槽”問(wèn)題:許多功能被添加到產(chǎn)品中,特別是當(dāng)涉及多個(gè)利益相關(guān)者時(shí)。這并不奇怪,,當(dāng)你有很多不動(dòng)產(chǎn)時(shí),添加功能是比較容易。實(shí)踐經(jīng)驗(yàn)清楚地表明,最好使用移動(dòng)方法進(jìn)行設(shè)計(jì),并通過(guò)與用戶(hù)相關(guān)的最小屏幕創(chuàng)建應(yīng)用程序。

當(dāng)你首先設(shè)計(jì)相關(guān)屏幕的最小尺寸時(shí),它會(huì)強(qiáng)制你決定最重要的。一段時(shí)間后,你將采用同樣的方法仔細(xì)選擇產(chǎn)品的其他版本,無(wú)論是電腦桌面設(shè)備,平板電腦還是電視。

Image title

在大多數(shù)情況下,手機(jī)將是相關(guān)屏幕的最小尺寸。如果可穿戴設(shè)備對(duì)你很重要,那么你將需要考慮具有更小分辨率的微型屏幕。

 

5. 不要忘記大屏幕

想想大屏幕以及小屏幕,給大屏幕和小屏幕提供同樣的注意力:

不只是縮小設(shè)計(jì),使其適合那些大屏幕。充分利用你可以使用的額外空間。

Image title

                                                                                           圖片來(lái)源:Wikipedia

 

確保圖像不會(huì)因?yàn)槠聊怀叽绲姆糯蠖ベ|(zhì)量。

Image title

                                                左:低質(zhì)量圖像。右:正確的分辨率。

 

考慮大屏幕細(xì)節(jié)。每個(gè)設(shè)備組都有自己的不同。例如,電視屏幕的設(shè)計(jì)被稱(chēng)為“設(shè)計(jì)10英尺體驗(yàn)”,因?yàn)閺纳嘲l(fā)的距離來(lái)看,與電腦桌面屏幕相比,屏幕上元素的明顯尺寸明顯更小。

Image title

                                                                 電視的用戶(hù)界面元素應(yīng)大于電腦桌面。圖片來(lái)源:Samsung

 

6. 提供一致的體驗(yàn)

一致的體驗(yàn)意味著應(yīng)用程序及其在所有屏幕尺寸上的體驗(yàn)都是相似的。無(wú)論設(shè)備如何,一致的用戶(hù)體驗(yàn)是成功的全通道用戶(hù)體驗(yàn)的關(guān)鍵組成部分之一:

對(duì)未來(lái)與產(chǎn)品的交互設(shè)定期望,并建立用戶(hù)信心。

一致的體驗(yàn)使得你的產(chǎn)品在其他設(shè)備上與用戶(hù)的交互更容易。

你可以將它們視為相同體驗(yàn)的方面,而不是將設(shè)計(jì)定制到越來(lái)越多的屏幕和設(shè)備中。例如,Google搜索應(yīng)用在所有設(shè)備上提供相同的搜索體驗(yàn)。

Image title

                                                 當(dāng)設(shè)計(jì)和功能一致時(shí),用戶(hù)可以在他們選擇的設(shè)備上更快更有效地完成任務(wù)。

 

7. 創(chuàng)造無(wú)縫體驗(yàn)

跨不同設(shè)備組創(chuàng)建無(wú)縫體驗(yàn)對(duì)你的用戶(hù)非常重要。人們可以自由地在設(shè)備之間來(lái)回移動(dòng),完成任務(wù),或當(dāng)他們從設(shè)備轉(zhuǎn)移到另一設(shè)備時(shí),他們期望他們的產(chǎn)品和服務(wù)與他們一起轉(zhuǎn)移。這意味著用戶(hù)不必考慮他們正在使用的設(shè)備,環(huán)境的變化或上下文的變化,并且可以依賴(lài)于設(shè)備良好的功能性和獨(dú)立于設(shè)備的易用性。

Image title

                  大多數(shù)人如何走過(guò)他們的一天,他們?cè)L問(wèn)的主要屏幕。圖片來(lái)源:Intercom

 

根據(jù)使用情況,你可能希望確保每個(gè)設(shè)備上的內(nèi)容消耗量同步。以Apple Music為例:你可以在Mac上設(shè)置播放列表,并在iPhone上即時(shí)播放,也可以開(kāi)始聽(tīng)iPhone上的歌曲,當(dāng)你轉(zhuǎn)到電腦桌面時(shí),你將被拍攝回到你在iPhone上。

Image title

                                                                  Apple Music可以很好地處理多個(gè)設(shè)備的同步。

 

8. 測(cè)試你的設(shè)計(jì)

在測(cè)試環(huán)境中有效的并不總是在現(xiàn)實(shí)世界中。在實(shí)際設(shè)備上為實(shí)際用戶(hù)運(yùn)行可用性測(cè)試,你可以在發(fā)布之前發(fā)現(xiàn)用戶(hù)體驗(yàn)的問(wèn)題并解決它。

 

結(jié)論

在設(shè)計(jì)多個(gè)屏幕和設(shè)備時(shí),最好的策略是保持最終的用戶(hù)體驗(yàn)。作為用戶(hù)體驗(yàn)設(shè)計(jì)師,你必須評(píng)估產(chǎn)品的使用時(shí)間,位置和方式,以評(píng)估用戶(hù)的最佳體驗(yàn)。無(wú)論你的內(nèi)容是什么尺寸的屏幕,用戶(hù)都希望在各種設(shè)備之間獲得流暢的體驗(yàn)。

 

原文地址:ADOBE BLOG

譯文地址:UI中國(guó)

作者:Nick Babich

譯者:SKYUI

 

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》在不同屏幕和設(shè)備上創(chuàng)建用戶(hù)體驗(yàn)設(shè)計(jì)的8個(gè)步驟

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話(huà),可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(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ì)sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(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咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司



動(dòng)效賦能 助力用戶(hù)體驗(yàn)設(shè)計(jì)

seo達(dá)人


起源發(fā)展

動(dòng)畫(huà)發(fā)展大致經(jīng)過(guò)了三大階段,分別是從傳統(tǒng)動(dòng)畫(huà)(紙筆)>>CG動(dòng)畫(huà)(離線渲染)>>互動(dòng)動(dòng)畫(huà)(實(shí)時(shí)渲染)。隨著時(shí)代變遷、設(shè)備以及技術(shù)升級(jí),新的動(dòng)畫(huà)形式以及呈現(xiàn)載體不斷的被創(chuàng)造出來(lái)。
動(dòng)畫(huà)發(fā)展的三大階段

 

傳統(tǒng)動(dòng)畫(huà)注重理論基礎(chǔ)以及扎扎實(shí)實(shí)的基本功,并且是藝術(shù)學(xué)院必修課,宮崎駿的早期的動(dòng)畫(huà)就是傳統(tǒng)的手繪動(dòng)畫(huà)。每一張都是純手繪的作品,所以我們看到宮崎駿的動(dòng)畫(huà)會(huì)有完全不同于純工業(yè)的動(dòng)畫(huà)的感覺(jué)。

CG動(dòng)畫(huà)是隨著電影行業(yè)與游戲行業(yè)一并發(fā)展起來(lái)的,由于電影的工業(yè)化程度太高,技術(shù)積累也越來(lái)越深厚,所有游戲使用的工具與技術(shù)偏向電影那一套,但不同的是電影是離線渲染的,一部短片渲染幾千個(gè)小時(shí)都算很正常。而游戲與電影不同,實(shí)時(shí)渲染必須保證幀速率,所以游戲行業(yè)最重要的技術(shù)核心就是改進(jìn)游戲引擎。
互動(dòng)動(dòng)畫(huà)想必大家更加熟悉,也就是游戲、web/app、VR/AR/AI、新媒體這些領(lǐng)域的動(dòng)畫(huà),這篇文章我們主要講的就是Web/App動(dòng)畫(huà)。
初期蘋(píng)果Mac桌面文件夾的打開(kāi)與關(guān)閉

 

從初期的MAC電腦到現(xiàn)在的iPhone X 不過(guò)短短的幾十年,產(chǎn)品設(shè)計(jì)中動(dòng)效的運(yùn)用已經(jīng)獲得了巨大的進(jìn)步。動(dòng)效其實(shí)對(duì)于用戶(hù)體驗(yàn)這個(gè)大專(zhuān)業(yè)來(lái)講是一種新的學(xué)科,隨著我們的設(shè)備的硬件條件越來(lái)越好,動(dòng)效才被支持的越來(lái)越好,可實(shí)現(xiàn)的難度也才越來(lái)越低。
交互動(dòng)畫(huà)里有一部分依然是歸為傳統(tǒng)動(dòng)畫(huà)的,比如說(shuō)Loading/插畫(huà)動(dòng)畫(huà)/載入動(dòng)畫(huà)等等。這些可以動(dòng)畫(huà)需要多關(guān)注迪士尼12大動(dòng)畫(huà)原則(節(jié)奏&時(shí)間、運(yùn)動(dòng)曲線、預(yù)備動(dòng)作、夸張、擠壓&拉伸、次要?jiǎng)幼?、慣性、關(guān)鍵幀動(dòng)畫(huà)&連貫動(dòng)畫(huà)、動(dòng)作表現(xiàn)力、感染力、角色個(gè)性),但是另外一部分則是扎根于產(chǎn)品設(shè)計(jì)的“交互”中。
CG動(dòng)畫(huà)與交互動(dòng)畫(huà)的區(qū)別

 

CG動(dòng)畫(huà)更加注重片子所表達(dá)的故事的完整性以及趣味性,大部分運(yùn)用的都是超現(xiàn)實(shí)的手法,時(shí)長(zhǎng)一般都5s以上,只需要開(kāi)動(dòng)腦洞只要軟件技術(shù)能實(shí)現(xiàn)都可以發(fā)揮出來(lái)。
而交互動(dòng)畫(huà)更注重的是動(dòng)效的合理性和可用性,動(dòng)力學(xué)需符合真實(shí)的物理世界,還要注重整個(gè)產(chǎn)品內(nèi)的動(dòng)效的統(tǒng)一與協(xié)調(diào)。一般持續(xù)時(shí)間都很短在1s內(nèi),大部分動(dòng)畫(huà)在200-500ms內(nèi)完成。整體來(lái)說(shuō)動(dòng)效都相對(duì)簡(jiǎn)單,不會(huì)太復(fù)雜因?yàn)橐紤]技術(shù)可實(shí)現(xiàn)性。

 

 應(yīng)用場(chǎng)景

這里我們只針對(duì)我們互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)講一下交互動(dòng)效的應(yīng)用場(chǎng)景,我總結(jié)了以下七大應(yīng)用場(chǎng)景,分別是圖標(biāo)動(dòng)畫(huà)、界面交互、插畫(huà)動(dòng)效、HUD大屏、汽車(chē)系統(tǒng)、項(xiàng)目包裝、品牌宣傳等等。

 

圖標(biāo)動(dòng)效

一般來(lái)說(shuō)圖標(biāo)動(dòng)效適用于App或者web產(chǎn)品中,單個(gè)持續(xù)時(shí)間在100ms左右,根據(jù)圖標(biāo)的復(fù)雜程度以及實(shí)際使用的場(chǎng)景最長(zhǎng)時(shí)間也不超過(guò)400-500ms。圖標(biāo)動(dòng)效更注重微弱的變化帶來(lái)的趣味性以及流暢性,常用于狀態(tài)反饋以及導(dǎo)航引導(dǎo),通過(guò)小小的變化可以為產(chǎn)品體驗(yàn)增色不少,優(yōu)秀的還可以給用戶(hù)留下深刻的印象。

 

界面交互 

一方面界面交互動(dòng)效可以讓人對(duì)產(chǎn)品產(chǎn)生深刻的印象,甚至是帶來(lái)驚喜,另一方面表達(dá)了界面之間的交互過(guò)程,吸引用戶(hù)的注意力。通過(guò)減少預(yù)判誤差、增加連貫性、強(qiáng)調(diào)敘述、清晰關(guān)系四個(gè)方面來(lái)增加產(chǎn)品的可用性。

 

汽車(chē)系統(tǒng) 

汽車(chē)系統(tǒng)的用戶(hù)界面以及動(dòng)效一般都來(lái)說(shuō)比較有科技感,動(dòng)畫(huà)會(huì)更加的酷炫。本質(zhì)上來(lái)說(shuō)汽車(chē)系統(tǒng)其實(shí)跟我們?nèi)粘S玫漠a(chǎn)品是一樣的,由于行業(yè)定位的不同以及用戶(hù)使用場(chǎng)景的不同造成了這些差異。

 

插畫(huà)動(dòng)效 

適用于App的引導(dǎo)頁(yè)、運(yùn)營(yíng)活動(dòng)、空狀態(tài)頁(yè)面、錯(cuò)誤頁(yè)面,展示型網(wǎng)站等等。在產(chǎn)品設(shè)計(jì)中插畫(huà)動(dòng)效一般有2種實(shí)現(xiàn)形式,一種是視頻或者動(dòng)態(tài)圖片直接加載即可,另外一種就是開(kāi)發(fā)同學(xué)通過(guò)技術(shù)手段來(lái)實(shí)現(xiàn),SVGA、lottile、apng等等。

 

品牌宣傳

http://mpvideo.qpic.cn/tjg_3563468614_50000_27353420971e4cc9bfc680ecff137bc3.f10002.mp4?dis_k=77967b65644a687675ed4f1eb1920a8c&dis_t=1568711387
這是韓國(guó)一家咨詢(xún)公司Plus X做的一個(gè)App的宣傳動(dòng)畫(huà),這里說(shuō)的品牌宣傳更像是一個(gè)產(chǎn)品的解析以及意義的傳達(dá),更輕量化、片長(zhǎng)更短、制作技法也相對(duì)簡(jiǎn)單一些。

 

HUD 

HUD可能很多同學(xué)都不知道是什么,給大家科普一下。HUD(Head Up Display)又叫平視顯示器,最開(kāi)始呢是運(yùn)用在航空器上的飛行輔助儀器。平視的意思是指飛行員不需要低頭就能夠看到他需要的重要資訊。平視顯示器最早出現(xiàn)在軍用飛機(jī)上,降低飛行員需要低頭查看儀表的頻率,避免注意力中斷以及喪失對(duì)狀態(tài)意識(shí)(Situation Awareness)的掌握。因?yàn)镠UD的方便性以及能夠提高飛行安全,民航機(jī)也紛紛跟進(jìn)安裝,汽車(chē)也開(kāi)始安裝。后面延伸到像大家在科幻電影里面看到的那種智慧大屏,以及政府機(jī)關(guān)等等我看看到的那種藍(lán)色動(dòng)態(tài)LED大屏都屬于HUD。

 

項(xiàng)目包裝 

https://v.qq.com/x/page/r0824uenul0.html
上面的視頻是騰訊的ISUX部門(mén)2018項(xiàng)目包裝的視頻,當(dāng)時(shí)這個(gè)視頻上線后,各大公司的UED部門(mén)競(jìng)相模仿,這個(gè)項(xiàng)目包裝里面有很多項(xiàng)目都用到動(dòng)效設(shè)計(jì),包括禮物動(dòng)效,表情動(dòng)效、插畫(huà)動(dòng)效、logo演繹等等,這說(shuō)明動(dòng)效設(shè)計(jì)在互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中的應(yīng)用已經(jīng)相當(dāng)?shù)膹V泛了,作品本身的效果加上簡(jiǎn)單的動(dòng)畫(huà)包裝就可以做成一個(gè)動(dòng)態(tài)的作品集,對(duì)于宣傳團(tuán)隊(duì)是一個(gè)很不錯(cuò)的點(diǎn),個(gè)人作品集也可以按照這個(gè)思路來(lái)做,肯定也會(huì)有很不錯(cuò)的效果。

 

設(shè)計(jì)語(yǔ)言

設(shè)計(jì)語(yǔ)言是指導(dǎo)統(tǒng)一產(chǎn)品設(shè)計(jì)的大腦,所以了解設(shè)計(jì)語(yǔ)言對(duì)于我們無(wú)論是做界面還是做交互設(shè)計(jì)以及動(dòng)效設(shè)計(jì)等等都有很大的指導(dǎo)性作用。
上圖中的6個(gè)是國(guó)內(nèi)外比較知名的設(shè)計(jì)語(yǔ)言系統(tǒng),大家應(yīng)該或多或少了解一點(diǎn),推薦大家有興趣可以去看看他們的設(shè)計(jì)系統(tǒng),相信會(huì)對(duì)你們有很大的幫助,對(duì)幫助構(gòu)建你的個(gè)人設(shè)計(jì)體系也有很大的參考作用。
這里我們以Material Design為例進(jìn)行講解,給大家介紹一下這套設(shè)計(jì)語(yǔ)言以及設(shè)計(jì)語(yǔ)言?xún)?nèi)的動(dòng)畫(huà)模塊在我們的工作中是如何運(yùn)用的。
Material Design,是由Google在I/O 2014大會(huì)上推出的全新的設(shè)計(jì)語(yǔ)言,其靈感來(lái)自與真實(shí)物理世界及其紋理,包括真實(shí)物理世界如何反射光線和投射陰影,通過(guò)材料來(lái)重新構(gòu)想紙張和墨水的一種介質(zhì)。

 

其主要目標(biāo)是:
創(chuàng)建:創(chuàng)建一種視覺(jué)語(yǔ)言,將經(jīng)典的優(yōu)秀設(shè)計(jì)原則與技術(shù)和科學(xué)的創(chuàng)新和可能性相結(jié)合。
統(tǒng)一:開(kāi)發(fā)單一的底層系統(tǒng),統(tǒng)一跨平臺(tái),設(shè)備和輸入方法的用戶(hù)體驗(yàn)。
定制:擴(kuò)展Material的視覺(jué)語(yǔ)言,為創(chuàng)新和品牌表達(dá)提供靈活的基礎(chǔ)。

 

基本設(shè)計(jì)原則:
大膽,圖形,有意:Material Design以印刷設(shè)計(jì)方法為基本指導(dǎo):排版、網(wǎng)格、空間、比例、顏色和圖像。即創(chuàng)造層次、意義和焦點(diǎn),讓觀眾沉浸在體驗(yàn)中。
動(dòng)效有意義:通過(guò)微妙的反饋和連貫的過(guò)渡,集中注意力并保持連續(xù)性。當(dāng)元素出現(xiàn)在屏幕上時(shí),它們會(huì)轉(zhuǎn)換和重新組織環(huán)境,交互產(chǎn)生新的轉(zhuǎn)換。
基礎(chǔ)靈活:Material Design系統(tǒng)旨在實(shí)現(xiàn)品牌表達(dá)。它與自定義代碼庫(kù)集成,允許無(wú)縫實(shí)現(xiàn)組件,插件和設(shè)計(jì)元素。
跨平臺(tái):Material Design使用跨Android,iOS,F(xiàn)lutter和Web的共享組件跨平臺(tái)維護(hù)相同的UI。
Material Design的要解決的問(wèn)題以及設(shè)計(jì)原則大家應(yīng)該都了解了,我們針對(duì)設(shè)計(jì)語(yǔ)言?xún)?nèi)的動(dòng)效有意義做一下延伸,讓大家對(duì)動(dòng)畫(huà)有一個(gè)再深入一些的了解。

 

那么Material Design動(dòng)效的用途主要有以下四點(diǎn):
層級(jí)關(guān)系:通過(guò)動(dòng)效反映父級(jí)元素(收件箱)與子級(jí)元素(收件箱郵件)之間的層次結(jié)構(gòu)關(guān)系。
狀態(tài)與反饋:動(dòng)效提供及時(shí)的反饋和用戶(hù)操作狀態(tài)。
用戶(hù)引導(dǎo):動(dòng)效為用戶(hù)如何執(zhí)行操作提供有用的建議。
個(gè)性化:動(dòng)效為產(chǎn)品設(shè)計(jì)提供可更多的趣味性、個(gè)性以及吸引力,對(duì)品牌的提升和認(rèn)知有很大的促進(jìn)作用。

 

了解了設(shè)計(jì)語(yǔ)言的動(dòng)效模塊,相信大家應(yīng)該有一個(gè)系統(tǒng)的認(rèn)識(shí),在方寸之間進(jìn)行動(dòng)畫(huà)設(shè)計(jì),考慮的就是毫秒之內(nèi),而在毫秒之內(nèi)最應(yīng)該考慮的就是速度,研究發(fā)現(xiàn),在界面設(shè)計(jì)中最合適的動(dòng)畫(huà)時(shí)間為200-500ms之間,時(shí)間太短,用戶(hù)難以感知,時(shí)間太長(zhǎng),用戶(hù)又會(huì)覺(jué)得整個(gè)過(guò)程太緩慢不夠流暢。
當(dāng)然了根據(jù)設(shè)備的不同動(dòng)畫(huà)內(nèi)容的不同,動(dòng)畫(huà)持續(xù)的時(shí)間自然也是不相同的。動(dòng)畫(huà)時(shí)間的長(zhǎng)短與動(dòng)畫(huà)路徑的遠(yuǎn)近是成正比的一般。另外平臺(tái)的不同,動(dòng)畫(huà)持續(xù)的時(shí)間也是不相同的,在pc端內(nèi)的動(dòng)畫(huà)要比移動(dòng)端的動(dòng)畫(huà)持續(xù)時(shí)間普遍少50%左右,這是因?yàn)槠脚_(tái)的屬性所造成的。但是要是單純的做裝飾動(dòng)畫(huà)是可以單純發(fā)揮的,不用遵守上面的幾個(gè)原則,所以進(jìn)行動(dòng)畫(huà)設(shè)計(jì)的時(shí)候都需要考慮到具體的場(chǎng)景以及具體的需求,靈活運(yùn)用。
說(shuō)完了時(shí)間,我們來(lái)說(shuō)說(shuō)跟時(shí)間息息相關(guān)的動(dòng)畫(huà)曲線,我們都知道在幾百ms內(nèi)表現(xiàn)出動(dòng)畫(huà)的特點(diǎn)是有點(diǎn)難度的,所以精細(xì)的運(yùn)動(dòng)曲線對(duì)我們就顯得格外重要,這里我總結(jié)一下Material Design內(nèi)提到的幾個(gè)常用的動(dòng)畫(huà)運(yùn)動(dòng)曲線,大家有興趣可以去Material Design的官方文檔內(nèi)詳細(xì)查看:
上述的幾個(gè)運(yùn)動(dòng)類(lèi)型以及動(dòng)畫(huà)曲線我們?cè)诋a(chǎn)品設(shè)計(jì)內(nèi)經(jīng)常會(huì)用到,希望大家打好基礎(chǔ),靈活運(yùn)用。
我們知道任何一件事情都有存在的價(jià)值和必要,動(dòng)畫(huà)也不例外,如果動(dòng)畫(huà)沒(méi)有體現(xiàn)出他應(yīng)該有的價(jià)值,那么做的再好看也只是僅僅局限在了好看這一個(gè)層面,下面我們就看看動(dòng)畫(huà)到底能在產(chǎn)品設(shè)計(jì)中帶來(lái)什么樣的價(jià)值。

 

動(dòng)畫(huà)價(jià)值

有時(shí)候現(xiàn)代科技產(chǎn)物使用起來(lái)非常復(fù)雜,但是其實(shí)“復(fù)雜”本身沒(méi)有好壞之分:不好是因?yàn)闆](méi)有處理好這個(gè)復(fù)雜所以產(chǎn)生了“混亂”,所以應(yīng)該被批評(píng)的不是復(fù)雜而是因復(fù)雜所產(chǎn)生的混亂?!萍{德·諾曼

優(yōu)秀的動(dòng)效可以幫我們解決產(chǎn)品設(shè)計(jì)中的很多問(wèn)題,可以從用戶(hù)體驗(yàn)的五大要素來(lái)進(jìn)行價(jià)值的拆解:

 

戰(zhàn)略層

戰(zhàn)略層本質(zhì)上來(lái)說(shuō)大部分設(shè)計(jì)師其實(shí)是接觸不到的,當(dāng)然接觸不到戰(zhàn)略并不能代表我們不需要了解,作為設(shè)計(jì)師我們必須了解公司對(duì)產(chǎn)品的戰(zhàn)略定位以及期望,也必須要了解用戶(hù)的目標(biāo)和心理預(yù)期。戰(zhàn)略層是整個(gè)產(chǎn)品的核心也是底層,所以單純來(lái)講,動(dòng)畫(huà)在這一層面上可以發(fā)揮的余地是是不多的,因?yàn)楦嗟倪@一層更加關(guān)注意識(shí)形態(tài)的戰(zhàn)略思考。

 

范圍層

范圍層是通過(guò)戰(zhàn)略思考來(lái)思考明確產(chǎn)品的大概功能和內(nèi)容,有很多產(chǎn)品的功能復(fù)雜,交互繁重,內(nèi)容很多,在這種情況下動(dòng)效就派上了用場(chǎng),我們可以嘗試通過(guò)動(dòng)效來(lái)解決內(nèi)容過(guò)載,優(yōu)化交互模塊,擴(kuò)展產(chǎn)品內(nèi)容功能范圍。

 

結(jié)構(gòu)層

這一層主要確定產(chǎn)品的功能結(jié)構(gòu)以及層級(jí),主要設(shè)計(jì)用戶(hù)如何快速,準(zhǔn)確的觸達(dá)某個(gè)界面完成某個(gè)任務(wù),要考慮用戶(hù)體驗(yàn)地圖,用戶(hù)整個(gè)的任務(wù)路徑,簡(jiǎn)單來(lái)說(shuō)就是用戶(hù)要做什么事情,如何做,做完之后應(yīng)該干什么,如果能對(duì)動(dòng)效巧妙的運(yùn)用,就可以做到引導(dǎo)用戶(hù),練習(xí)上下流程的作用,降低用戶(hù)理解成本,提搞產(chǎn)品的操作效率,提高產(chǎn)品的可用性和易用性。

 

框架層

從這一層開(kāi)始,UI設(shè)計(jì)師接觸的內(nèi)容逐漸多了起來(lái),大家也會(huì)更加熟悉工作的內(nèi)容以及范圍,這一層主要體現(xiàn)在優(yōu)化頁(yè)面布局,確定元素?cái)[放位置,涉及到具體的信息、界面、導(dǎo)航設(shè)計(jì)等等。通過(guò)利用格式塔,柵格,設(shè)計(jì)語(yǔ)言等方法確定產(chǎn)品功能具體頁(yè)面內(nèi)容布局,我們可以通過(guò)動(dòng)效來(lái)進(jìn)行輔助設(shè)計(jì),例如強(qiáng)化元素的位置、顏色、大小,優(yōu)化頁(yè)面的切換、跳轉(zhuǎn)的流暢度以及自然度等等。

 

表現(xiàn)層

表現(xiàn)層具體涉及到視覺(jué)、聽(tīng)覺(jué)、觸覺(jué)的體驗(yàn)設(shè)計(jì),也是做為視覺(jué)設(shè)計(jì)師、UI設(shè)計(jì)師發(fā)揮最多的一層,在表現(xiàn)層動(dòng)效的展現(xiàn)形式會(huì)多種多樣,這里不展開(kāi)講解,大家應(yīng)該都明白。在表現(xiàn)層加入適當(dāng)?shù)膭?dòng)畫(huà)能夠提升產(chǎn)品趣味性,加強(qiáng)用戶(hù)與產(chǎn)品的情感鏈接,增加用戶(hù)對(duì)產(chǎn)品的友好度。

 

未來(lái)發(fā)展

5G

5G時(shí)代已經(jīng)到來(lái),5G的普世將會(huì)為科技發(fā)展帶來(lái)更多的可能性,眾所周知5G的速度是4G的百倍,那么意味著我們的設(shè)計(jì)的動(dòng)畫(huà)會(huì)加載的更快,動(dòng)畫(huà)文件的大小限制將會(huì)被打破,另外也可以在某些領(lǐng)域的產(chǎn)品內(nèi)設(shè)計(jì)更復(fù)雜更酷炫的動(dòng)畫(huà)。

 

人工智能(AI)

它是研究、開(kāi)發(fā)用于模擬、延伸和擴(kuò)展人的智能的理論、方法、技術(shù)及應(yīng)用系統(tǒng)的一門(mén)新的技術(shù)科學(xué)。該領(lǐng)域的研究包括機(jī)器人、語(yǔ)言識(shí)別、圖像識(shí)別、自然語(yǔ)言處理和專(zhuān)家系統(tǒng)等。在我們?nèi)粘I钪羞\(yùn)用的包括不限于人機(jī)對(duì)弈、模式識(shí)別、自動(dòng)工程、知識(shí)工程等等。所以未來(lái)在這些領(lǐng)域內(nèi),我們能參與到的動(dòng)畫(huà)設(shè)計(jì)必然會(huì)更多樣,形式也會(huì)更豐富,挑戰(zhàn)也會(huì)更大??赡軙?huì)不斷有新的動(dòng)畫(huà)形式以及設(shè)計(jì)方法被創(chuàng)造出來(lái),讓我們拭目以待。

 

虛擬現(xiàn)實(shí)(VR)

是20世紀(jì)發(fā)展起來(lái)的一項(xiàng)全新的實(shí)用技術(shù)。虛擬現(xiàn)實(shí)技術(shù)囊括計(jì)算機(jī)、電子信息、仿真技術(shù)于一體,其基本實(shí)現(xiàn)方式是計(jì)算機(jī)模擬虛擬環(huán)境從而給人以環(huán)境沉浸感。隨著社會(huì)生產(chǎn)力和科學(xué)技術(shù)的不斷發(fā)展,各行各業(yè)對(duì)VR技術(shù)的需求日益旺盛,VR技術(shù)也取得了巨大進(jìn)步,并逐步成為一個(gè)新的科學(xué)技術(shù)領(lǐng)域。相信在未來(lái)的工作中必然會(huì)慢慢的接觸到VR界面設(shè)計(jì)以及動(dòng)畫(huà)設(shè)計(jì),并且我相信未來(lái)會(huì)逐漸的變成主流。

 

參考資料

material.io/design/motion
https://www.zcool.com.cn/article/ZODIzMzky.html
https://zhuanlan.zhihu.com/p/27114894

 

原文地址: 小凱的設(shè)計(jì)筆記(公眾號(hào))
作者:小凱君
轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》動(dòng)效賦能 助力用戶(hù)體驗(yàn)設(shè)計(jì)


藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話(huà),可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(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ì)sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(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咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司



你想要的,用戶(hù)體驗(yàn)設(shè)計(jì)中的心理學(xué)

seo達(dá)人


變色龍效應(yīng)/鏡像效應(yīng)

圖片

俗話(huà)說(shuō),“有樣學(xué)樣(Monkey see, monkey do)”,包括人類(lèi)在內(nèi)的靈長(zhǎng)類(lèi)動(dòng)物都擅長(zhǎng)模仿。這個(gè)詞表示無(wú)意識(shí)鏡像或模仿我們周邊人行為的狀態(tài)。根據(jù)我們?cè)诋a(chǎn)品方面的經(jīng)驗(yàn),我們進(jìn)行的互動(dòng)具有親密性和即時(shí)性。

你有沒(méi)有試過(guò)聽(tīng)了朋友說(shuō)的話(huà)之后又說(shuō)給對(duì)方聽(tīng)?這是變色龍效應(yīng)的完美例子。

 

啟動(dòng)效應(yīng)(Priming)

圖片

指由于之前受某一刺激的影響而使得之后對(duì)同一刺激的知覺(jué)和加工變得容易的心理現(xiàn)象。我們半夜三更看了電視的恐怖電影之后,跟看喜劇相比,屋子里面聽(tīng)到的任何吱吱聲或者噪音更有可能讓你毛骨悚然、心驚肉跳。

啟動(dòng)效應(yīng)會(huì)塑造我們對(duì)環(huán)境的行為和反應(yīng),而且往往是有效的捷徑,讓我們可以迅速做出決定。這也是一種有效的說(shuō)服工具,已經(jīng)廣泛應(yīng)用到產(chǎn)業(yè)的營(yíng)銷(xiāo)和廣告領(lǐng)域。

 

馮·雷斯托夫(Von Restorff)效應(yīng)

圖片

德國(guó)精神病學(xué)家和兒科醫(yī)生海德維?!ゑT·雷斯托夫(Hedwig von Restorff)在1933年提出的理論。馮·雷斯托夫有一次實(shí)驗(yàn),涉及到讓受試者觀看一系列相似的物品。結(jié)果他發(fā)現(xiàn),如果其中某個(gè)很特別的話(huà),那么相比其他物品,受試者就更容易回憶起這件物品。

馮·雷斯托夫效應(yīng)又叫做隔離效應(yīng)(isolation effect),或者新奇效應(yīng)(novelty effect),其預(yù)測(cè)是當(dāng)存在多個(gè)相似的對(duì)象時(shí),跟其他有所不同的那個(gè)最有可能被記住。

 

序列位置效應(yīng)

圖片

該理論由赫爾曼·艾賓浩斯(Herman Ebbinghaus,著名的艾賓浩斯遺忘曲線也是他的發(fā)現(xiàn))提出。它描述了序列中項(xiàng)目的位置是如何影響回憶的準(zhǔn)確性的。

這種效應(yīng)是指記憶材料在系列位置中所處的位置對(duì)記憶效果發(fā)生的影響,包括首因效應(yīng)和近因效應(yīng)。系列開(kāi)頭的材料比系列中間的材料記得好叫首因效應(yīng)或者首位效應(yīng);系列末尾的材料比系列中間的材料記得好叫近因效應(yīng)或新近效應(yīng)。

用戶(hù)往往最容易記住系列中的第一項(xiàng)和最后一項(xiàng)。

把最重要的信息放到開(kāi)始和結(jié)尾。把最不重要的信息放在中間,這是吸引用戶(hù)注意力的高效方法。

 

格式塔原理

圖片

在格式塔原理之下,派生出了很多的其他原理。我們會(huì)在下面進(jìn)行簡(jiǎn)要討論:

 

負(fù)空間:

圖片

在設(shè)計(jì)周?chē)舭祝瑥亩鴦?chuàng)造出一塊大于其各個(gè)部分之和的區(qū)域。用最簡(jiǎn)單的措辭來(lái)說(shuō),格式塔理論是基于這樣一種思想,即人腦會(huì)下意識(shí)地把各個(gè)部分組織成一個(gè)系統(tǒng),從而創(chuàng)造出一個(gè)整體而不是一系列的離散元素,通過(guò)這樣來(lái)簡(jiǎn)化和組織包含有很多元素的復(fù)雜圖像或者設(shè)計(jì)。我們的大腦天生就是為了看清結(jié)構(gòu)和模式,從而更好的理解我們生活的環(huán)境而構(gòu)造出來(lái)的。

 

相似:

圖片

在格式塔里面,相似的元素不管彼此是否靠近也會(huì)在視覺(jué)上進(jìn)行分組。分組可以按顏色、形狀或大小進(jìn)行。相似性可用來(lái)將可能彼此不相鄰的東西聯(lián)系在一起。

 

連續(xù)性:

圖片

不管實(shí)際畫(huà)出來(lái)的線條如何,人眼在觀看線條的時(shí)候都會(huì)按照最平滑的路徑想象。當(dāng)目標(biāo)是引導(dǎo)訪客的眼睛朝特定方向看時(shí),這種連續(xù)性會(huì)是很有價(jià)值的工具。

 

閉合:

圖片

這條原理反映的是人會(huì)把設(shè)計(jì)或圖像缺失的部分自行腦補(bǔ),創(chuàng)建出一個(gè)整體來(lái)?;蛘哒f(shuō)得簡(jiǎn)單點(diǎn),在Adobe、Sun Microsystem、NBC、USA Network等的logo中就可以看到復(fù)雜的形狀。

 

相鄰性:

圖片

這條原理是指元素之間的距離如何。在UX設(shè)計(jì)當(dāng)中,運(yùn)用相鄰性是為了讓用戶(hù)將某些事物組合到一起。通過(guò)把它們放在一起,用戶(hù)就會(huì)感覺(jué)它們是相關(guān)的。

 

圖形與背景關(guān)系:

圖片

跟閉合原理類(lèi)似,這條也利用了負(fù)空間。我們的大腦會(huì)區(qū)分出圖像前景的對(duì)象。設(shè)計(jì)師如果想要突出某個(gè)焦點(diǎn)時(shí),用這條這真的很方便。

 

共同命運(yùn)律:

圖片

這條原理是指,沿同一個(gè)方向移動(dòng)的元素本身會(huì)被視為一組。如果我們看到一群鳥(niǎo)朝特定的方向飛行,我們就會(huì)把它們組合在一起,并將它們看作是單個(gè)刺激物。

 

認(rèn)知負(fù)荷

指在一個(gè)人的工作記憶使用的腦力綜合。是指你為了完成任務(wù)需要消耗的腦力。

認(rèn)知負(fù)荷是表示處理具體任務(wù)時(shí)加在學(xué)習(xí)者認(rèn)知系統(tǒng)上的負(fù)荷的多維結(jié)構(gòu)。

 

??硕?/strong>

以英國(guó)心理學(xué)家威廉·埃德蒙·??耍╓illiam Edmund Hick)命名,其理論指出當(dāng)選項(xiàng)增加時(shí),下決定的時(shí)間也增加。一個(gè)人做出決定所需的時(shí)間取決于他或她可以選擇的選項(xiàng)數(shù)。因此,如果選擇的數(shù)量增加,則做出決定的時(shí)間將對(duì)數(shù)增加。

決策所需的時(shí)間隨著選項(xiàng)的數(shù)量和復(fù)雜性增加而增加。

圖片

 

菲茨定律(Fitt’s Law)

圖片

這條定律規(guī)定,任意一點(diǎn)移動(dòng)到目標(biāo)中心位置所需時(shí)間與該點(diǎn)到目標(biāo)的距離和大小有關(guān),距離越大時(shí)間越長(zhǎng),目標(biāo)越大時(shí)間越短。

獲得目標(biāo)所需的時(shí)間取決于到目標(biāo)的距離以及目標(biāo)的大小。

可以利用這條定律來(lái)影響互動(dòng)按鈕的轉(zhuǎn)化率,尤其是用手指操作的移動(dòng)設(shè)備上的設(shè)計(jì),可以把希望互動(dòng)的按鈕設(shè)計(jì)得更大一點(diǎn),把不希望用戶(hù)點(diǎn)擊的按鈕設(shè)計(jì)得小一點(diǎn),更難點(diǎn)中一點(diǎn)。用戶(hù)任務(wù)/注意區(qū)域與任務(wù)相關(guān)的按鈕之間的距離應(yīng)盡可能的短。

 

美即適用效應(yīng)

圖片

這條指的是用戶(hù)往往會(huì)認(rèn)為有吸引力的產(chǎn)品更實(shí)用。大家往往會(huì)相信看起來(lái)更好的東西用起來(lái)也會(huì)更好——就算實(shí)際上效率和效能并沒(méi)有提高。

用戶(hù)往往會(huì)把美觀的設(shè)計(jì)看作是更實(shí)用的設(shè)計(jì)。

對(duì)視覺(jué)設(shè)計(jì)的積極情緒反應(yīng)會(huì)讓他們對(duì)可用性方面的小問(wèn)題更加寬容。

 

雙重編碼理論

這一理論是由心理學(xué)家佩維奧(Paivio)提出來(lái)的,他強(qiáng)調(diào)在信息的貯存、加工與提取中,語(yǔ)言與非語(yǔ)言的信息加工過(guò)程是同樣重要的。佩維奧(1986)指出:“人的認(rèn)知是獨(dú)特的,它專(zhuān)用于同時(shí)對(duì)語(yǔ)言與非語(yǔ)言的事物和事件的處理?!崩秒p重編碼系統(tǒng)可以讓用戶(hù)更容易記住我們網(wǎng)站上的重要內(nèi)容。

我們會(huì)根據(jù)你對(duì)現(xiàn)實(shí)世界的體驗(yàn)和感知為腦中想到的文字建立視覺(jué)形象。一想到“體育”,我們的大腦就會(huì)自動(dòng)想到球的形象,運(yùn)動(dòng)員的形象。通過(guò)將文字跟圖像配對(duì),可以更容易記住東西。

 

直覺(jué)檢查

我們一般不會(huì)用價(jià)值數(shù)千美元的眼動(dòng)追蹤軟件或者腦電圖來(lái)判斷設(shè)計(jì)是不是有效。但是5秒測(cè)試是個(gè)強(qiáng)大工具,用它就可以確定你的設(shè)計(jì)是不是一看就明白。

所謂5秒測(cè)試,就是讓受試者觀看網(wǎng)站或應(yīng)用5秒鐘,然后回答有關(guān)主題和設(shè)計(jì)的問(wèn)題。如果用戶(hù)的答案或者留下的印象跟你的設(shè)想不一樣,那就說(shuō)明設(shè)計(jì)沒(méi)有達(dá)到原先的目的,需要繼續(xù)改進(jìn)。

 

說(shuō)服心理學(xué)

圖片

這條原理來(lái)自羅伯特·西奧迪尼(Robert Cialdini)的著名著作《影響力:說(shuō)服心理學(xué)》(Influence: The Psychology of Persuasion),里面列舉了類(lèi)似互惠、一致性、社會(huì)認(rèn)同,權(quán)威以及稀缺性等原理。

這些原理往往決定了我們?cè)谏鐣?huì)當(dāng)中的行為方式,我們可以用它們來(lái)識(shí)別人類(lèi)行為。

互惠:這條原理是說(shuō)人都不喜歡虧欠別人。如果別人給了他們什么東西的話(huà),他們應(yīng)該會(huì)覺(jué)得有責(zé)任給予一定程度的回報(bào)。提供免費(fèi)的電子書(shū),博客文章,播客或其他免費(fèi)內(nèi)容,然后換取用戶(hù)提供的電子郵件地址,這就是現(xiàn)實(shí)生活當(dāng)中互惠的好例子。

權(quán)威:權(quán)威這條原理說(shuō)的是我們大多數(shù)人都意識(shí)到自己沒(méi)辦法在每一件事情上都是專(zhuān)家。我們最好的選擇是依靠專(zhuān)家的證詞。所以,我們?cè)试S專(zhuān)家和任何特定議題的“權(quán)威”人士影響我們。大家往往會(huì)對(duì)高水平的專(zhuān)家和權(quán)威人物的話(huà)言聽(tīng)計(jì)從,因?yàn)橛X(jué)得他們值得信賴(lài)。如果跟成功公司能扯上關(guān)系的話(huà)就會(huì)經(jīng)常被提及,好建立一定程度的尊重和可信性。

一致性:這條原理說(shuō)的是大家一般都希望自己行為跟自己的決策過(guò)程保持一致。西奧迪尼曾經(jīng)進(jìn)行過(guò)一項(xiàng)研究,他讓兩組志愿者挨家挨戶(hù)去詢(xún)問(wèn)房主愿不愿意在自家前面的草坪上立一塊寫(xiě)著“小心駕駛”的大廣告牌。

第一組的做法就是簡(jiǎn)單粗暴直接上門(mén)問(wèn)。而第二組是先做一個(gè)初訪,請(qǐng)求房主在他們前面的草坪放一塊很小的標(biāo)志牌,“做一位安全的駕駛員?!?

結(jié)果第二組的成功率高出450%。這就是(承諾與)一致的一個(gè)例子,因?yàn)榉恐鲿?huì)覺(jué)得自己有義務(wù)在這種情況下保持一致性。

社會(huì)認(rèn)同:大家未必總能知道自己為什么會(huì)這么做。大家是不是都在跳舞?如果是的話(huà)會(huì)有更多的人跟著跳。大家是不是都在看那個(gè)視頻嗎?是的話(huà)會(huì)更多人會(huì)點(diǎn)擊它。是不是每個(gè)人都在買(mǎi)你的產(chǎn)品嗎?是的話(huà),你想攔都攔不住。在電子商務(wù)的實(shí)踐當(dāng)中,我們使用的網(wǎng)站會(huì)社會(huì)認(rèn)同(比方說(shuō)點(diǎn)評(píng)、評(píng)論和推薦)來(lái)吸引其他用戶(hù),并引導(dǎo)他們做出購(gòu)買(mǎi)決定。亞馬遜有“購(gòu)買(mǎi)這個(gè)的客戶(hù)也購(gòu)買(mǎi)了那個(gè)”的提示,希望強(qiáng)化你跟商品的關(guān)聯(lián)性,讓用戶(hù)認(rèn)為“如果別人需要它的話(huà),那我也需要它”。

稀缺性:在塑造行為的原理方面,這是我的最?lèi)?ài)之一。稀缺性原理是說(shuō),如果東西有限的話(huà),大家就會(huì)更想得到它。能得到的人越少,吸引的人就越多。

為什么有的商店會(huì)推出限量版服裝?這就是原因,這樣可以吸引更多的顧客。

變化盲視(Change Blindness):指觀察者不能探測(cè)物體或情景所發(fā)生變化的現(xiàn)象。

 

記憶限制

圖片

記憶未必永遠(yuǎn)可靠。我們對(duì)信息的存儲(chǔ)方式會(huì)被我們的想法、感知信念以及周?chē)h(huán)境所重構(gòu)。

我們的工作記憶能力大概就只有10到15秒,一次只能記住3到4個(gè)東西。

研究表明,大家往往會(huì)制造出錯(cuò)誤的記憶,要么會(huì)記住了沒(méi)有發(fā)生過(guò)的事情,要么就是記得的東西跟實(shí)際不一樣。由于記憶具有提示性和可塑性,所以根據(jù)大腦的習(xí)慣或心智模式來(lái)進(jìn)行設(shè)計(jì)就非常重要,因?yàn)檫@樣會(huì)更容易記住。

盡可能為用戶(hù)提供幫助和反饋,并提供撤銷(xiāo)選項(xiàng),以減少用戶(hù)犯錯(cuò)時(shí)的沮喪情緒。讓體驗(yàn)個(gè)性化,好迎合我們用戶(hù)的喜好。

 

單純呈現(xiàn)效應(yīng)(Mere Exposure Effect)

圖片

單純呈現(xiàn)效應(yīng)是指圖片、符號(hào)、數(shù)字、聲音等外部刺激信息只要經(jīng)常暴露在人面前,就能增加人們對(duì)其喜歡程度的現(xiàn)象。這種社會(huì)心理會(huì)發(fā)生在我們所有人身上,我們?cè)诓贿B續(xù)的時(shí)間段內(nèi)見(jiàn)到某人的次數(shù)越多,我們覺(jué)得這個(gè)人討人喜歡或迷人的可能性就越高。這種效應(yīng)有時(shí)候又被叫做熟悉定律。

了解單純呈現(xiàn)效應(yīng)及其機(jī)制,會(huì)讓你在轉(zhuǎn)化率優(yōu)化的工作中具備重大優(yōu)勢(shì)。更多的呈現(xiàn)會(huì)帶來(lái)熟悉感,進(jìn)而帶來(lái)舒適感,從而讓轉(zhuǎn)化率優(yōu)化整體上得到顯著改進(jìn)。

 

色彩心理學(xué)

圖片

色彩也是影響人的選擇和行為的主要因素之一。我們經(jīng)常會(huì)發(fā)現(xiàn)兒童玩具顏色鮮艷,女孩玩具往往是粉紅色的。這方面研究的主要思想是色彩對(duì)用戶(hù)的感知有很大的影響。

所以,作為設(shè)計(jì)師我們應(yīng)選擇能夠傳遞含義與正確信息的色彩。

紅色。跟熱情、強(qiáng)烈或攻擊性的感覺(jué)關(guān)聯(lián)。同時(shí)是好和不好的感受,比如愛(ài)、自信、熱情、憤怒等的象征。

橙色。充滿(mǎn)活力的暖色,給人以興奮的感覺(jué)。

黃色。幸福的色彩。象征著陽(yáng)光、喜悅和溫暖。

綠色。大自然的色彩。給人以來(lái)平靜和新生的感覺(jué)。另外,也可能用來(lái)表示經(jīng)驗(yàn)不足。

藍(lán)色。一般用來(lái)表示企業(yè)形象。往往表現(xiàn)出冷靜的感覺(jué),但是作為一種冷色,也跟距離與悲傷有關(guān)。

紫色。由于很多國(guó)王都穿紫色的衣服,所以長(zhǎng)期以來(lái)就與皇室和財(cái)富聯(lián)系在一起。紫色也是代表神秘與魔力的顏色。

黑色。這種顏色有很多含義。往往跟悲劇和死亡相關(guān)聯(lián)。可以代表著未解之謎。可以是傳統(tǒng)的,也可以是現(xiàn)代的。一切都取決于怎么用,以及跟哪些顏色一起用。

白色。意味著純潔和純真,以及完整性和清晰度。

 

本能反應(yīng)

我們一般是從大腦負(fù)責(zé)本能的部分得到這種反應(yīng),本能反應(yīng)的速度比我們的意識(shí)要快得多。本能反應(yīng)會(huì)導(dǎo)致我們用了一下產(chǎn)品后就愛(ài)上了它。這些反應(yīng)植根于我們的DNA之中,所以很容易預(yù)測(cè)。

作為設(shè)計(jì)師我們就是要通過(guò)設(shè)計(jì)制造出視覺(jué)上極其出色的美感印象。為什么一個(gè)東西在用戶(hù)眼里好看,以及為什么他們是我們的目標(biāo)受眾,他們的需求是什么,這些都不難猜測(cè)。

用戶(hù)體驗(yàn)設(shè)計(jì)的概念根植于認(rèn)知和行為心理學(xué),那是人類(lèi)與機(jī)器交互的藍(lán)圖。當(dāng)然,本文仍還沒(méi)有涵蓋到所有的設(shè)計(jì)心理學(xué)原理。但是,作為設(shè)計(jì)師,我們還需要觀察和理解最終用戶(hù),并且加深對(duì)用戶(hù)的理解與共鳴。在產(chǎn)品開(kāi)發(fā)過(guò)程中,了解用戶(hù)的互動(dòng)、行為和情感可以增加更多的價(jià)值。

 

原文地址:追波范兒(公眾號(hào))

作者:terechen

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》你想要的,用戶(hù)體驗(yàn)設(shè)計(jì)中的心理學(xué)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話(huà),可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(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ì)sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(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咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司




日歷

鏈接

個(gè)人資料

存檔