首頁

輪播設(shè)計總結(jié)-提高用戶點擊

純純

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

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

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

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

目錄

1、用戶真的使用輪播嗎

2、輪播的輪換形式

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

4、輪播定位

5、輪播的切換

6、對輪播進(jìn)行分類

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

8、輪播異形化

9、輪播時間

10、總結(jié)

一、用戶真的使用輪播嗎

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

促銷輪播banner

品牌推廣輪播banner


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

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


輪播的頁數(shù)

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

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

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

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

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

二、輪播的輪換形式

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

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

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

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

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

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

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

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


四、輪播的定位

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

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

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

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

五、輪播的切換

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


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

切換的距離和位置

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

如果banner占比在首屏中占比較少的情況下則需要讓切換按鈕的間距拉大,保持視覺平衡,因為小區(qū)域banner用戶能夠更加全局的觀看,在使用上不會猶豫。

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

六、對輪播進(jìn)行分類

當(dāng)輪播banner過多時利用標(biāo)簽進(jìn)行分類,用戶通過點擊標(biāo)簽進(jìn)行查看相關(guān)的輪播組合。

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


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

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

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

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

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

八、輪播個性化

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

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

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

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


九、自動輪播時間

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

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

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

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


十、總結(jié)

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

文章來源:UI中國   作者:愛吃貓的魚____
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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




淺談交互設(shè)計

純純

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

先來看一下百度百科的定義

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


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

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


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

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


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


尼爾森十大可用性原則


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

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

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

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

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

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

3、操作可控原則

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

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

4、一致性原則

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

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

5、防錯原則

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

例如:用戶名稱校驗提示、手機(jī)號碼位數(shù)限制等。

6、易取原則

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

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

7、靈活高效原則

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

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

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

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

9、容錯原則

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

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

10、提供人性化幫助

在用戶需要的時候提供必要的幫助說明。

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



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


1、菲茲定律

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

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

(2)目標(biāo)的大?。⊿)。目標(biāo)越大,所用時間越短。

該定律經(jīng)常運用于鼠標(biāo)從點A到點B的運動。

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

2、??硕?

一個人面臨的選擇(n)越多,所需要作出決定的時間(T)就越長。

交互設(shè)計中要合理設(shè)置選項,以免用戶使用中決策時間過長,降低使用效率。

3、米勒7±2定律

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

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

4、鄰近性法則

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

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

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

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

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


6、防錯原則

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

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

7、奧卡姆剃刀原則

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

”這個原理稱為“如無必要,勿增實體”,即“簡單有效原理”。

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




三、交互設(shè)計如何開展工作


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

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

首先針對需求考慮5個問題:

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

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

3、誰來使用?(目標(biāo)用戶)

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

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

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

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

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

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


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

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

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



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


評估的形式及方法


常見的評估形式分為三類:

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

按照評估主體來區(qū)分主要有兩個主體:用戶和專家

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

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

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


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

按照評估的性質(zhì)來區(qū)分可以分為定量評估和定性評估。

定量評估是指對可以計量的部分進(jìn)行評價,如點擊量、使用率等,可以用數(shù)據(jù)來說明。

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


3、評估過程:按照評估的過程來進(jìn)行區(qū)分。

從評估的過程來區(qū)分可以分為理性評估和感性評估。

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

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

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


常見的評估方法有四種:

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

一般來說原型評估方法分為三大類型:

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

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

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


2、簡易測試評估方法

在條件不允許的情況下,可以采取簡易的方法來對用戶體驗進(jìn)行評價。步驟是:

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

(2)被試選擇:分為用戶組和專家組。

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

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


3、眼動評估方法

眼動追蹤可以用來評價對產(chǎn)品(包括硬件產(chǎn)品和軟件產(chǎn)品)設(shè)計的感性意象,評測產(chǎn)品設(shè)計特征。眼動評估的主要指標(biāo)有注視熱點圖、搜索過程測量指標(biāo)、興趣區(qū)域即用戶視覺注意的焦點區(qū)??梢越Y(jié)合口語分析法了解用戶的所想 和所做。


4、腦電評估方法

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


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



啟發(fā)式評估法

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


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


對評估者的要求主要有四個方面:

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

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

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

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


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


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

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


啟發(fā)式評估的優(yōu)缺點有哪些?

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

缺點:不能代表真實用戶,相對主觀、有時候發(fā)現(xiàn)問題過多、對評估人員知識背景要求較高。


什么時候適用?

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

(2)版本變動不大的情況下,小成本檢驗。

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


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

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

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

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



可用性測試


先來看一下我們在平時工作中常常會聽到這樣的問題

產(chǎn)品經(jīng)理:我們的用戶覺得產(chǎn)品好不好用?使用過程中會不會遇到問題?他們是否滿意?

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

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


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

那就是接下來要介紹的可用性測試方法。


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

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


什么時候適合做可用性測試呢?

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


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

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

總結(jié)式特點:大樣本(30人以上)、定量的評估、可以做對比評估


可用性測試可以解決什么樣的問題?

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

2、檢驗實現(xiàn),期望的設(shè)計目的有沒有達(dá)成,是否滿足了用戶的期望

3、產(chǎn)品評估,用戶是否會滿意

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


測試流程是什么?

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


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


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

常見的測試目標(biāo)有:

·對整個產(chǎn)品做可用性評估

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

·提前觀察新方案對新老用戶有怎樣的影響

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

·設(shè)計時存在爭議,如何選擇解決方案

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

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


準(zhǔn)備測試方案

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

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

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

·用戶招募:招募要求,樣本配比,招募渠道

·經(jīng)費預(yù)算:獎勵的形式和額度

·時間計劃:用于把控時間計劃


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

基本的流程有:

·暖場:3min,簡單聊天,消除用戶的緊張情緒

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

·測試前訪談:10min,了解用戶基本信息

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

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

·事后訪談:15min,針對疑點問點追問,填寫評價表

·道別:5min,支付禮金,送用戶離開


招募用戶

招募什么樣的用戶呢?

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

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

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

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

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


招募多少用戶合適?

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

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


招募渠道有哪些?

·公司內(nèi)部

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

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

·熟人,朋友等

·推廣渠道:官微、公眾號、門戶網(wǎng)等

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

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


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

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


測試場地選擇:

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

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


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

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

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

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


正式測試階段

測試參與人員有

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

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

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

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


測試過程中需要觀察的要點:

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

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

·用戶是否滿意


結(jié)果分析

邊測試邊總結(jié),越及時越好

·測試完一個用戶,做一次小結(jié)

·測試結(jié)束當(dāng)天寫小結(jié),與設(shè)計師當(dāng)場討論

·重要問題反饋后再總結(jié)分析報告

·邊測邊改,邊改邊測

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


撰寫報告

從4個方面來寫:

·總體如何

·有哪些問題

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

·建議是什么

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


優(yōu)化跟蹤

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

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



問卷調(diào)研

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

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


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

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

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


問卷調(diào)查的使用場景

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

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


問卷調(diào)研流程

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

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

3、問卷設(shè)計:問卷設(shè)計,問題美化,投放渠道。

4、問卷測試:多人測試,確保問卷的可讀性,邏輯通暢

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

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



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

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


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

1、可以做到用戶從哪里來,來了多少

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

3、訪問了哪些頁面,使用了哪些功能,消費了多少錢,消耗了多少時間

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

5、流失情況如何,離開之后是否還回來

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


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

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

                  缺點,日志的獲取和清洗有過濾成本,許多頁面操作無法記錄。

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

                      缺點,需要在頁面植入JS標(biāo)記代碼,某些情況下無法獲取,如當(dāng)用戶禁用JS功能時。


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

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

2、自研平臺


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

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


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

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

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

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

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

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


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

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

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

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

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

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


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

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


常見分析內(nèi)容

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



A/B test

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

簡單來說,就是為同一目標(biāo)制定兩個方案,讓一部分用戶使用A方案,另一部分使用B方案,記錄用戶的使用情況,對比兩個方案的結(jié)果,選擇更符合的方案。

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


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


A/B test工具

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

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

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

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

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

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

Unbounce:對于登錄頁面的測試來講非常不錯,而且它不僅僅是個測試工具,還可以在無需自己編寫任何代碼的情況下來創(chuàng)建登錄頁面。


如何做A/Btest

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

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

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

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

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


感謝閱讀!

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

免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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



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

純純

于B端,我想剛開始很多同學(xué)就直接拿Ant Design套套界面,因為公司要求并不高,隨后字節(jié)Arco Design也推出了對應(yīng)的模版和規(guī)范,能讓我們快速作出一個不出錯的方案。

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

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

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

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

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

本文先和大家談?wù)勚膶用?,提高我們的眼界,下面就和大家分享一些不錯的B端產(chǎn)品,大家有時間可以去慢慢體驗。 

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


1、Hubspot

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

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

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

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

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

國外的界面看著總讓人覺得很舒適,僅僅是因為克制的設(shè)計、中性灰使用得好嗎?當(dāng)然不是,是因為英文本身就是圖形化的文字。

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

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


2、神策

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

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

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

 

3、項目管理類

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

Jira

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

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

同時也可借助群的力量,調(diào)研下有使用Jira的小伙伴,看看他們在使用中有什么問題,下面是我收集Jira網(wǎng)頁版和本地配置版的問題截圖,這些都來自不同角色的真實體驗,會更有分析的價值。(這部分截圖涉及到公司的數(shù)據(jù),同時數(shù)量多不太方便打碼,就不分享給大家了。)

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


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

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

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

WPS

第一個和大家推薦的是WPS,界面簡潔,配色舒適。 


飛書

在管理類的軟件中,不得不提飛書的管理界面,從設(shè)計到使用體驗,他給我的感覺終于不是那么千遍一律,用組件庫搭建起來的感覺。

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

 

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

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


6、概念稿

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

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

圖片標(biāo)題

 

7、畫重點

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

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

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

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

免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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


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

博博

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


    • 文章來源:站酷   作者:凌坤_Maxidea

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

      免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

圓形元素在界面設(shè)計中的運用

博博

圓形元素在界面設(shè)計中被廣泛運用,從常見的圓形圖標(biāo)到圓形的頭像,又或是圓形的輪廓形狀。圓形是一種特殊的形狀,它能夠在眾多幾何形狀中被我們快速地注意到。也正因為如此,在使用圓形元素設(shè)計界面時會有一些注意事項。

圓形元素在界面設(shè)計中被廣泛運用,從常見的圓形圖標(biāo)到圓形的頭像,又或是圓形的輪廓形狀。圓形是一種特殊的形狀,它能夠在眾多幾何形狀中被我們快速地注意到。也正因為如此,在使用圓形元素設(shè)計界面時會有一些注意事項。


一、圓形頭像


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

43e456a455da32f875520f6db95d.jpg

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

方與圓之間,孰對孰錯,請繼續(xù)看下文分解。


1.用戶使用頭像的目的

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


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


2.用戶使用什么照片作為頭像

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

5cf056a456106ac7256cb020a2c8.jpg

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


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


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

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

5d5c56a456266ac7256cb013db0c.jpg

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


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


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


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

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

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


二、圓形的icon


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


fc6956a4564232f875520ff01b89.jpg

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

在這里,要回答兩個問題:

1.為什么要用圓形?

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


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


在回答第2個問題之前,首先回歸圓形和方形的基本特征,

圓形:動,曲線,運動,靈動,流動

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

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


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


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


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


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

ebb456a4567032f875520fafc8f5.jpg

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


第二幅圖是宜人貸,微微鼓起的弧度讓這個理財項目變得十分突出,同時也打破了頁面沉悶的布局。


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


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


四、圓形的輪廓


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

a29156a4568e6ac7256cb0899d80.jpg

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


第二幅圖所示的是搜易貸的賬戶頁面??捎糜囝~采用瓶裝水的設(shè)計,余額較多則水漲的越高,同時會有晃動的效果,栩栩如生的同時讓頁面變得靈動起來。


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


可以發(fā)現(xiàn),在使用圓形元素時要注意頁面的平衡,例如左右和上下的對齊居中。為了保證頁面的均衡和清爽,通常會在圓形元素周圍保留較多的空白。這些都是在使用圓形元素時需要注意的事項。


    • 文章來源:站酷   作者:Sim_H

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

      免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

7個基礎(chǔ)的用戶體驗設(shè)計細(xì)節(jié)

seo達(dá)人


1、專注于20%

maggelato

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

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

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

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

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

goldhill

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

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

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

3、不要要求太多

assos

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

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

那么接下來,你會怎么做?絕大多數(shù)的用戶會直接轉(zhuǎn)身離開,這個注冊信息填寫起來太費勁,體驗太差了。

那么,如果你當(dāng)你點擊注冊的時候,只需要一鍵從Facebook或者twitter授權(quán)即可,那么你會不會立刻點擊呢?至少從目前已有的數(shù)據(jù)來看,絕大多數(shù)的用戶會這么選擇。

4、令人愉悅的微交互

evernote-1

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

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

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

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

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

statusshop

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

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

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

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

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

espns

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

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

7、像用戶一樣思考

justact

我們一直在說:“像用戶一樣思考”。但是實際的情況往往是,我們很難走出設(shè)計者和開發(fā)者的思維方式,因為我們的思維方式壓根就和用戶不同,面對每一個交互、每一個元素的下意識反應(yīng)是不一樣的。

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

原文地址:designshack

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

作者:Carrie Cousins

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

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

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

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

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

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

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



你的設(shè)計有依據(jù)嗎?詳解用戶體驗設(shè)計中的規(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)載請注明:學(xué)UI網(wǎng)》你的設(shè)計有依據(jù)嗎?詳解用戶體驗設(shè)計中的規(guī)律與邏輯

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

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

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

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

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



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

seo達(dá)人


1. 確定核心用戶體驗

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

Image title

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

 

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

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

移動手機(jī)

平板電腦

臺式電腦

智能電視

智能手表

Image title

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

 

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

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

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

Image title

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

 

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

Image title

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

 

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

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

Image title

                                      圖片來源:UXMag

 

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

Image title

                                                                                      按鈕之間的間距

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

 

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

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

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

Image title

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

 

5. 不要忘記大屏幕

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

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

Image title

                                                                                           圖片來源:Wikipedia

 

確保圖像不會因為屏幕尺寸的放大而失去質(zhì)量。

Image title

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

 

考慮大屏幕細(xì)節(jié)。每個設(shè)備組都有自己的不同。例如,電視屏幕的設(shè)計被稱為“設(shè)計10英尺體驗”,因為從沙發(fā)的距離來看,與電腦桌面屏幕相比,屏幕上元素的明顯尺寸明顯更小。

Image title

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

 

6. 提供一致的體驗

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

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

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

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

Image title

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

 

7. 創(chuàng)造無縫體驗

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

Image title

                  大多數(shù)人如何走過他們的一天,他們訪問的主要屏幕。圖片來源:Intercom

 

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

Image title

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

 

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

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

 

結(jié)論

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

 

原文地址:ADOBE BLOG

譯文地址:UI中國

作者:Nick Babich

譯者:SKYUI

 

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

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

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

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

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

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



動效賦能 助力用戶體驗設(shè)計

seo達(dá)人


起源發(fā)展

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

 

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

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

 

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

 

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

 

 應(yīng)用場景

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

 

圖標(biāo)動效

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

 

界面交互 

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

 

汽車系統(tǒng) 

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

 

插畫動效 

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

 

品牌宣傳

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

 

HUD 

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

 

項目包裝 

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

 

設(shè)計語言

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

 

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

 

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

 

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

 

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

 

動畫價值

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

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

 

戰(zhàn)略層

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

 

范圍層

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

 

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

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

 

框架層

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

 

表現(xiàn)層

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

 

未來發(fā)展

5G

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

 

人工智能(AI)

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

 

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

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

 

參考資料

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

 

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


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

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

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

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

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



你想要的,用戶體驗設(shè)計中的心理學(xué)

seo達(dá)人


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

圖片

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

你有沒有試過聽了朋友說的話之后又說給對方聽?這是變色龍效應(yīng)的完美例子。

 

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

圖片

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

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

 

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

圖片

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

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

 

序列位置效應(yīng)

圖片

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

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

用戶往往最容易記住系列中的第一項和最后一項。

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

 

格式塔原理

圖片

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

 

負(fù)空間:

圖片

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

 

相似:

圖片

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

 

連續(xù)性:

圖片

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

 

閉合:

圖片

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

 

相鄰性:

圖片

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

 

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

圖片

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

 

共同命運律:

圖片

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

 

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

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

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

 

??硕?/strong>

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

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

圖片

 

菲茨定律(Fitt’s Law)

圖片

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

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

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

 

美即適用效應(yīng)

圖片

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

用戶往往會把美觀的設(shè)計看作是更實用的設(shè)計。

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

 

雙重編碼理論

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

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

 

直覺檢查

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

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

 

說服心理學(xué)

圖片

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

這些原理往往決定了我們在社會當(dāng)中的行為方式,我們可以用它們來識別人類行為。

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

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

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

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

結(jié)果第二組的成功率高出450%。這就是(承諾與)一致的一個例子,因為房主會覺得自己有義務(wù)在這種情況下保持一致性。

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

稀缺性:在塑造行為的原理方面,這是我的最愛之一。稀缺性原理是說,如果東西有限的話,大家就會更想得到它。能得到的人越少,吸引的人就越多。

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

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

 

記憶限制

圖片

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

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

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

盡可能為用戶提供幫助和反饋,并提供撤銷選項,以減少用戶犯錯時的沮喪情緒。讓體驗個性化,好迎合我們用戶的喜好。

 

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

圖片

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

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

 

色彩心理學(xué)

圖片

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

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

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

橙色。充滿活力的暖色,給人以興奮的感覺。

黃色。幸福的色彩。象征著陽光、喜悅和溫暖。

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

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

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

黑色。這種顏色有很多含義。往往跟悲劇和死亡相關(guān)聯(lián)??梢源碇唇庵i??梢允莻鹘y(tǒng)的,也可以是現(xiàn)代的。一切都取決于怎么用,以及跟哪些顏色一起用。

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

 

本能反應(yīng)

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

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

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

 

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

作者:terechen

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

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

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

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

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

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




日歷

鏈接

個人資料

存檔