首頁

用戶體驗基礎(chǔ)篇·人體結(jié)構(gòu)特性

ui設(shè)計分享達(dá)人

關(guān)于用戶體驗

隨著技術(shù)及經(jīng)濟(jì)的發(fā)展,人們對計算機系統(tǒng)、機器等的要求,從單純的「 可以用 」逐漸變?yōu)橄胍?nbsp;更好用、容易用、用得舒服 」等更加豐富的使用體驗,也就是常聽到的好的「 用戶體驗 」。
「 用戶體驗(User Experience )」這個概念,最早由唐納德·諾曼(Donald Arthur Norman)提出,他希望用這個詞,來涵蓋個人使用系統(tǒng)時的體驗、各個方面的體驗 ,包括工業(yè)設(shè)計圖形、交互界面、物理交互,以及與人的交互。

而「 用戶體驗 」產(chǎn)生的基礎(chǔ),是「 用戶使用了機器 」,即人跟機器有發(fā)生接觸、交流、互動等,然后用戶會形成主觀上的體會、感受。這里的「 機器 」泛指各種「 產(chǎn)品 」,類比諾曼所說的,即物理界面、虛擬界面、系統(tǒng)、硬件等。
因此,好的「 用戶體驗 」是基于好的交互設(shè)計。而對交互設(shè)計「 好/壞 」的影響因素,涉及到人、產(chǎn)品、使用環(huán)境這三者,也就是人機工程的內(nèi)容。
概括一下百科對「 人機工程學(xué) 」的解釋:

將 「 使用物的人 」和 「 設(shè)計的物 」以及 「 人與物共處的環(huán)境 」作為一個系統(tǒng)來研究(人-機-環(huán)境系統(tǒng))。在人、機、環(huán)境這三個要素 本身特性 的基礎(chǔ)上,科學(xué)地利用三個要素間的 有機聯(lián)系,來尋求系統(tǒng)的 最佳參數(shù)。 


其中關(guān)于人的「 本身特性 」包括人體結(jié)構(gòu)和機能特性。主要有人體各部位的尺寸、重量、面積、活動、相互關(guān)系等,眼耳鼻舌身對應(yīng)的視、聽、嗅、味、觸覺,以及動作習(xí)慣和認(rèn)知。這部分大愚認(rèn)為可以把「 結(jié)構(gòu)特性 」當(dāng)作人的硬件,具有一定的普遍/通用性;而「 認(rèn)知 」則是人的軟件,個體間存在一定差異。



然后,就到了這篇文章的主要內(nèi)容,人的「 結(jié)構(gòu)特性 」部分。


注:下文中提及的人體結(jié)構(gòu)特征是基于大部分人的情況描述,內(nèi)容也是圍繞人機交互有關(guān)的方面,不是人體結(jié)構(gòu)特征的全面介紹。

人體結(jié)構(gòu)特性

人體結(jié)構(gòu)中對人機交互產(chǎn)生影響的主要有眼、耳、身(皮膚)對應(yīng)的:視覺、聽覺、觸覺,以及四肢、頸椎的尺寸、受力情況和活動幅度等。下文將對這四部分的基礎(chǔ)內(nèi)容進(jìn)行整理,還有聊聊一些交互、體驗設(shè)計上的應(yīng)用。



人與周圍環(huán)境發(fā)生聯(lián)系的感覺通道,最重要的就是「 視覺 」,約占80%的信息是通過視覺來獲得。因此「 視覺顯示 」是人機交互系統(tǒng)中用的最廣泛的一種形式。

視覺的形成



感受光(電磁波)

人眼正常感受光譜的波長約在400nm-780nm之間(大概這個范圍,網(wǎng)上相關(guān)資料關(guān)于這個數(shù)值存在微小差異),對應(yīng)的色相是紫色-深紅色,也就是常說的彩虹色。


而負(fù)責(zé)感受光的細(xì)胞是視錐細(xì)胞和視桿細(xì)胞。


視錐細(xì)胞,約占95%,復(fù)雜感受強光及有顏色(彩色)的視覺,環(huán)境光線亮?xí)r起作用,用來區(qū)分色彩。研究數(shù)據(jù)表明視錐細(xì)胞對光譜中波長為555nm的「 黃綠色 」部分最敏感。


視桿細(xì)胞 ,約占5%,復(fù)雜感受弱光及沒有顏色(黑白)的視覺,環(huán)境光線暗時起作用,用來區(qū)分黑白。研究數(shù)據(jù)表明視桿細(xì)胞對光譜中波長為507nm的「 青綠色 」部分最敏感,對極弱的光刺激敏感。


如果涉及一些特定的工作環(huán)境(昏暗)的應(yīng)用設(shè)計時,就可以考慮下此時作用細(xì)胞的特性,進(jìn)行合理的設(shè)計設(shè)置。

識別物體

正常情況下,瞳孔會根據(jù)環(huán)境中的光量來調(diào)整大小。當(dāng)有光線較強時,瞳孔會收縮變窄;當(dāng)光線很暗時,瞳孔會膨脹來讓更多的光進(jìn)入眼球。
可以把這個理解為一個保護(hù)機制,在強光下,通過收縮來減少光對眼睛的高強度刺激;而弱光下,對感光細(xì)胞刺激不足,為了不讓眼睛過分費力地去尋找目標(biāo)和識別目標(biāo)而引起視覺疲勞,所以瞳孔會放大,讓更多的光進(jìn)入。
而接收光的刺激,看到物體后,是否可以準(zhǔn)確獲取信息(看清物體、識別文本、圖像等)則跟視敏度相關(guān)。


視敏度 ,就是眼睛能分辨物體細(xì)微結(jié)構(gòu)的能力,也就是看清物體的能力。相關(guān)實驗數(shù)據(jù)表明,增強亮度可以提高視敏度。也就是說,亮度越強,人眼對物體的識別能力就越強。




下面提到兩個實驗,其中「 正對比極性 」,指在淺色背景上顯示深色字體文本,就是對應(yīng)我們界面設(shè)計中的「 淺色模式 」;而「 負(fù)對比極性 」,指在深色背景上顯示淺色字體文本,即「 深色/暗黑模式 」。

實驗1. 德國杜塞爾多夫精神病研究所的Cosima Piepenbrock等相關(guān)人員,對「對比極性對視敏度和校對的影響」的研究結(jié)果表明:人眼在「淺色模式」下的視敏度要優(yōu)于「暗黑模式」下,字體越小,淺色模式的優(yōu)勢就更明顯。 
實驗2. Agelab實驗室的喬納森·多布雷斯(Jonathan Dobres)等相關(guān)人員,對「 環(huán)境光照條件(模擬白天/夜間)是否影響正對比度極性的優(yōu)勢」的研究表明:夜間,深色模式下閱讀小字體文本比淺色模式下閱讀要困難得多。 而人們對文本的識別,「淺色模式」下比在「深色模式「要快,白天比晚上更快

對上面兩個實驗可以用環(huán)境光的強弱對視敏度的影響來理解:為方便理解,可以假設(shè)我們的界面尺寸足夠大,大到覆蓋我們視野范圍,那就可以將淺色模式中的淺色背景類比為白天(環(huán)境光度亮),深色模式中的深色類比為夜間(環(huán)境光度弱),而屏幕內(nèi)的文本、信息,就是我們要識別的物體。亮度越強,人眼對物體的識別能力(視敏度)就越強。


從上面的實驗來看,無論在白天或夜間環(huán)境下,「 淺色模式 」都要比「 深色模式 」更好用


但根據(jù)德國蒂賓根大學(xué)的Andrea Aleman等相關(guān)人員的一項研究表明,長時間處于「淺色模式」下可能會導(dǎo)致近視。其表現(xiàn)為,閱讀「淺色模式」下的文本時,脈絡(luò)膜(跟近視有關(guān)的一層膜)會明顯變??;而閱讀「深色模式」下的文本時,這層膜明顯變厚。

可以理解為長時間處于「淺色模式」下,意味著視敏度的持續(xù)維持在較高狀態(tài),就像人在長時間高強度工作下可能會導(dǎo)致健康受損一樣,眼睛同樣也可能會受到損傷。因此相對長期來說,「深色模式」則是更友好的一種形式


那通過適當(dāng)?shù)脑O(shè)計,是否有可能找到這兩者之間的最優(yōu)解呢?



視覺疲勞/傷害

注視區(qū)域光照不足、光線過強、光線分布不均勻、光源閃爍、眩光、反光、目標(biāo)過小、目標(biāo)不穩(wěn)定等,都會造成眼睛超負(fù)荷工作,導(dǎo)致視覺疲勞。

光照不足,對應(yīng)界面交互,可以指屏幕亮度過低,也可以理解為內(nèi)容和深色背景間的對比度不足。


光線過強,則是屏幕亮度過高,也可以理解為內(nèi)容和淺色背景間的對比度不足。還有大面積高明度色彩的使用。而像汽車遠(yuǎn)光燈,也是常見的一種光線過強的產(chǎn)品,并且常常被錯誤使用。


閃爍,會對眼睛造成很大的負(fù)荷。在高亮度下,眼睛除了視敏度會增強外,對閃爍的感知也會增強。這方面涉及的產(chǎn)品設(shè)計,如顯示器的刷新頻率,要到達(dá)某一程度,人眼才感覺不到屏幕的閃爍。


目標(biāo)過小,在可識別及相同環(huán)境下,目標(biāo)過小,識別所需的時間越長,也就是更費眼。像界面中的元素,文本字號、圖標(biāo)等,都需要有舒服的可讀性。


反光,跟工業(yè)產(chǎn)品設(shè)計的關(guān)系比較密,反光是很容易引起視覺疲勞的和視力傷害。但生活中好像處處有反光,高樓大廈連片的鏡面窗戶/墻、我們正在看的電腦屏幕、手機屏幕、公交車廣告牌的保護(hù)罩、汽車的后視鏡等等,都會在某些瞬間讓你覺得眼睛受到了億點傷害,這也是很常見的一種光污染。

視角范圍

1. 水平方向

水平方向上,雙眼視野角度通??蛇_(dá)到120°視角。其中「 有效視域 」為30°,即人眼能立刻看清物體的存在和動作軌跡的范圍。其余部分稱為誘導(dǎo)視野,也就常說的「 余光 」。


而眼動(頭部不動)「 舒適轉(zhuǎn)動區(qū) 」通常為60°。

如果以眼睛距離屏幕40cm為例,水平最佳視野寬度大概就是21.6cm,在72dpi下,約為600px。在進(jìn)行文本寬度設(shè)定時,可以以此作為依據(jù),來設(shè)計內(nèi)容的顯示寬度。



2. 垂直方向

垂直方向上,視野角度通??蛇_(dá)到135°視角,「 有效視域 」為30°,「 舒適轉(zhuǎn)動區(qū) 」為55°



關(guān)于「 最佳視角范圍 」及「 眼動舒適區(qū) 」的應(yīng)用,在汽車領(lǐng)域的HMI設(shè)計和一些較為復(fù)雜的交互活動中有比較多的體現(xiàn)。



聽覺對信息傳遞的感知僅次于視覺,同視覺一樣,利用以前的經(jīng)驗來解釋輸入。

相比視覺,聽覺更容易引起注意,且反應(yīng)速度快,可以捕捉各個方向的信息,不受照明條件限制。




人類聽覺系統(tǒng)對聲音的解釋可幫助設(shè)計人機交互界面中的語音界面,而對有能力缺陷的人,如視障人士來說,「 聽覺(語音交互) 」更是一種替代視覺顯示的重要形式。

聽覺的形成



感知范圍

聲音有三個要素:音調(diào)(頻率)、響度(振幅)、音色(材質(zhì))。


人類可以聽到的聲音頻率范圍為20Hz-20kHz,正常情況下人耳可分辨出約 40多萬種 不同的聲音。


對語音的辨認(rèn)頻率范圍為260Hz-5600Hz。正常情況下,人類語言的頻率在:500Hz-3000Hz之間。


感受性、識別性最高的頻率范圍在1000Hz-4000Hz,低于500Hz,或高于5000Hz時,要達(dá)到一定響度才能被聽到。

響度

0-20dB,幾乎感覺不到
20-40dB,相當(dāng)于低聲說話,輕柔的響聲
40-60dB,正常談話的聲音
60-70dB,會感到吵鬧、長時間會損害神經(jīng)細(xì)胞
超過70dB,讓人感覺煩躁,無法集中注意力
85-90dB,短時間內(nèi)影響人的聽力,破壞神經(jīng)細(xì)胞
超過90dB,聽力受損


超過140dB時,引起的是痛覺,而不是聽覺,會完全損害聽力(歐盟界定的導(dǎo)致聽力完全損害的最高臨界點)

對音色的辨識和記憶

人耳對各種音色的分辨能力非常強,對經(jīng)常聽到的音色也具有很強的記憶力。



比如在同一頻段同時演奏不同的樂器,人耳依然可以分辨出有哪些樂器在進(jìn)行演奏,也能識別出不同動物的叫聲。


而對于熟悉的人,比如對父母兄弟姐妹等,經(jīng)常只通過說話的聲音,就能知道是誰;通過腳步聲,也可以辨認(rèn)出來是誰來了等等。

辨別方向

除了對聲音的「 音調(diào)、響度、音色 」這三個要素的感知之外,人耳還能辨別出聽到的聲音是「 從哪里/哪個方向傳來的 」,也就是聲源方位感。

粗糙的聲音

瑞士的神經(jīng)科學(xué)家通過研究發(fā)現(xiàn):粗糙的聲音(上限約為130 Hz)激活了大腦某些特別的區(qū)域。

當(dāng)重復(fù)的聲音被認(rèn)為是刺耳的、無法忍受的時候(特別是在40-80Hz之間),會引起持續(xù)的反應(yīng),刺激杏仁核、海馬體和腦島,特別是跟突出、厭惡和疼痛相關(guān)的區(qū)域,而正因為有這些區(qū)域參與聲音的處理,才會使這類聲音會讓人感覺到難以忍受。


這也是警報聲的應(yīng)用原理,通過快速重復(fù)的頻率來引起人們的注意。再結(jié)合聲音傳播不受光照、方向、角度等影響的特性,來提高警報聲被人耳檢測到的概率。

其他讓人感到煩躁、難受的聲音,如汽車?yán)嚷?、尖叫聲、嬰兒哭聲等等通常也是在這一頻段。

聚焦效應(yīng)

視覺上的三維圖效果,是眼睛先呈「 散焦?fàn)顟B(tài) 」,視焦點前后位移產(chǎn)生層次感,從而看到三維平面圖畫的立體效果。

而人耳的聽覺跟視覺相反,可以從眾多的聲音中「 聚焦到某一點 」上,也就是聽覺的「 聚焦效應(yīng) 」。
比如我們聽交響樂時,大腦皮層可以抑制其它樂器的演奏聲,把精力和聽力集中到其中的一種樂器聲音上。還有在公交地鐵上,我們同樣可以集中精力聽廣播報站的聲音,而忽略車上的其他喧鬧聲。

這個特性也讓語音交互的場景擁有更多的可能性。



觸覺屬于動覺交流領(lǐng)域,即通過身體的運動/動作來交流。


跟視覺、聽覺的感知相比,「 觸覺 」最大不同是它的非局部性(全身皮膚),以人體為介質(zhì),對皮膚、肌肉的感受器進(jìn)行刺激,能夠 敏感強烈更迅速 的被用戶感知,及時傳遞信息。也 不易受環(huán)境影響,無論環(huán)境吵雜,或是光線不佳,對其體驗效果的影響都不大。



但「 觸覺 」傳遞的信息遠(yuǎn)少于視覺和聽覺,通常作為視覺和聽覺反饋的補充。對有能力缺陷的人,如聽障、視障人士來說,「 觸覺交互 」的應(yīng)用則是一種很重要的形式。


同時也是用戶體驗過程中重要因素之一,會直接影響用戶對產(chǎn)品的情感體驗與交流。在工業(yè)產(chǎn)品設(shè)計中感受較多,如日常工作生活中常見的家居用品、鼠標(biāo)、鍵盤、手機等的外形設(shè)計、材質(zhì)觸感等。

觸覺的形成

人類的皮膚表面散布著觸點,一般指腹最多(人類手指的觸覺敏感度是前臂的10倍),其次是頭部,最少的是背部和小腿。觸點的大小不盡相同,分布不規(guī)則。



作用

通過對冷、熱、尖銳物體的判斷,讓身體及時遠(yuǎn)離危險和傷害,可以對人體起到保護(hù)作用。


同時也具有表達(dá)情感,辨別情緒的功能。有說法認(rèn)為「觸覺」可能是用來傳達(dá)人的情感的最佳途徑,就像「 擁抱 」和「 安慰的文字/語言 」,體現(xiàn)的情感強度就很不一樣。

觸覺反饋-觸覺學(xué)Haptics

借助Haptics技術(shù),通過作用力、振動等「 觸覺反饋 」,可以起到傳遞信息的作用。但想通過「 觸覺體驗 」來傳達(dá)恰當(dāng)?shù)?、有用的信息,需要先理解人類是如何詮釋不同的「觸覺體驗」的。


比如想要通過「 振動感知 」來傳遞有用的信息,需要先了解怎樣的振動頻率、強度、節(jié)奏可以讓使用者意識到其代表的是什么意思:成功、失敗還是其他呢?這涉及到「 認(rèn)知 」方面的內(nèi)容。
通常情況下,「 觸覺反饋 」是作為視覺、聽覺反饋的一種補充。
如在觸控屏上用虛擬鍵盤輸入文字時,通過按鍵的「 振動反饋 」,讓用戶清晰及時地了解到自己已經(jīng)成功按下了某一個按鍵。相關(guān)研究的結(jié)果也表明:虛擬鍵盤加入振動反饋后,是可以提升用戶輸入時的準(zhǔn)確度。


而一些特定場景下,「 觸覺反饋 」可以很好的替代視覺和聽覺反饋。
比如駕駛汽車時,駕駛員需要將大部分的注意力放在道路環(huán)境上,那么通過「 觸覺反饋 」,將部分操作結(jié)果傳遞給駕駛員,這一可以在一定程度上減輕駕駛員在視覺和聽覺上的負(fù)擔(dān)。



人類的動作通常分為三類:先天、模仿、訓(xùn)練得來的。



由于肢體的結(jié)構(gòu)特點,「 先天 」和「 模仿 」的動作,通常存在一定的局限性。

頭部/頸椎

頸椎前屈幅度35-45°,后伸35-45°,左右側(cè)屈各45°,左右旋轉(zhuǎn)各60-80°。

當(dāng)頸部前傾時,頸椎承受的壓力逐漸增大:
前傾0°時,為頭部重量,約為4.5-5kg;
前傾15°時,承受壓力約為12kg;
前傾30°時,承受壓力約為18kg;
前傾45°時,承受壓力約為22kg;
前傾60°時,承受壓力約為27kg。



結(jié)合前面我們講過的人眼轉(zhuǎn)動的舒適角度和視野范圍,可以為一些物品的設(shè)計提供參考。

腰部/腰椎

直立,腰伸直自然體位時,腰部可前屈90°、后伸30°、左右側(cè)屈各20-30°、左右旋轉(zhuǎn)各30°。


人體平(仰)臥位時,腰椎承受的壓力最小。

腿部/膝關(guān)節(jié)

膝關(guān)節(jié)屈膝角度可達(dá)120-150°(小腿后部和股后部相貼)。人坐立時,膝關(guān)節(jié)彎曲90°,小腿和地面垂直放置對腿部最好的,屈膝小于90°時,長時間保持會影響下肢的血液循環(huán)。


伸直時一般為0°,有過伸狀態(tài)5-10°。膝關(guān)節(jié)屈曲時,有輕微的內(nèi)旋和外旋運動,約為10°。

手臂/肘關(guān)節(jié)


肘關(guān)節(jié)彎曲角度可達(dá)140°、過伸角度為0-10°、旋前80-90°、旋后80°-90°。

打字時,手肘彎曲接近90°(水平放置)是最放松的。


手指/手掌

1. 拇指動作幅度

掌側(cè)可以外展約70°,指間關(guān)節(jié)屈曲約90°,掌拇關(guān)節(jié)屈曲約20-50°。
和手腕連接處的腕掌關(guān)節(jié),能夠進(jìn)行較大程度的屈伸,收展,完成對掌運動。這是拇指特有的,是拇指骨外展,屈和旋內(nèi)運動的總和,使拇指尖能跟其他的手指和掌面接觸。

2. 其他手指動作幅度

掌指關(guān)節(jié)屈曲約60-90°,近節(jié)指間關(guān)節(jié)屈曲時約為90°,遠(yuǎn)節(jié)指間關(guān)節(jié)屈曲時約為60-90°。 

3. 手指觸控

在使用手機等數(shù)字界面時,用「 食指 」和「 拇指 」進(jìn)行觸控是比較自然和常見的行為。


根據(jù)麻省理工對人類觸覺的實驗,食指、拇指的寬度和觸控區(qū)域有以下數(shù)據(jù):


食指平均寬度約16~20mm、指腹觸摸區(qū)域尺寸約10~14mm、指尖觸摸區(qū)域尺寸約8~10mm。
拇指平均寬度約25mm、指腹觸摸區(qū)域尺寸約12~16mm、指尖觸摸區(qū)域尺寸約10~12mm。

觸控控件的最小尺寸要大于觸摸的最小尺寸。控件過小,一方面會增大準(zhǔn)確觸控的難度,另一方面手指會造成遮擋,導(dǎo)致用戶無法明確是否已經(jīng)正確觸摸了相應(yīng)的控件。


(手指觸控這部分本來放在上面關(guān)于觸覺的內(nèi)容里,后面想了下,「觸覺」更多的是指「反饋信息」層面的作用,所以還會歸在肢體動作、范圍里比較合適。)

4. 手指擊鍵

用鍵盤打字時,在某些瞬間,多數(shù)手指只是放在鍵位上,沒有擊鍵行為,因此鍵盤按鍵的驅(qū)動力需要大于手指重量產(chǎn)生的力,才足以支撐手指。


ANSI 1988 年建議鍵盤擊鍵的理想壓力應(yīng)該在0.5N-0.6N之間,一般0.25N-1.5N的壓力都是可以接受的。


而對于一些特殊的設(shè)備按鍵,比如工業(yè)鍵盤類的,則需要更大的按鍵驅(qū)動力,因為這類產(chǎn)品的工作環(huán)境和活動相對復(fù)雜,需要更謹(jǐn)慎的操作。

5. 單手操作

單手對手機等觸屏設(shè)備進(jìn)行操作時,一般以四個手指和手掌為依托,用大拇指操作為主,而成年人拇指長度約為6-10cm。


數(shù)據(jù)表明,一般成年男性,單手全屏操控的屏幕尺寸最大約為4.5英寸,而成年女性,單手操控的極限約為4.0英寸。超過這個尺寸,單手進(jìn)行全屏操控會有一定困難。


而目前主流的智能手機基本在5英寸以上,根據(jù)拇指關(guān)節(jié)的活動幅度,單手操作時在手掌位置不動的情況下,拇指觸及的區(qū)域只是很局限的一部分:



以上就是體驗設(shè)計中涉及人體結(jié)構(gòu)特性的內(nèi)容部分。
感謝閱讀,期待交流。


作者:大魚小魚蝦米
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

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


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


藍(lán)藍(lán)設(shè)計www.yvirxh.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è)計公司

如何進(jìn)行高質(zhì)量B端用戶訪談?用戶研究方法

ui設(shè)計分享達(dá)人

前言

在上一篇《如何設(shè)計高質(zhì)量B端調(diào)研問卷?用戶研究方法(一)》一文中,詳細(xì)介紹了如何通過調(diào)研問卷的方式,整理發(fā)現(xiàn)用戶的淺層需求。

本文將分享另一個更為深層全面的B端用戶研究方法——用戶訪談。通過面對面地溝通,以及觀察用戶的表情、行為去挖掘更深層的需求。(文末附模板下載鏈接)


下面是本次分享的文章結(jié)構(gòu),標(biāo)??的為重點部分。

01

用戶訪談的兩種路徑

用戶訪談通??梢圆捎?strong>線上會議、電話或者線下面對面交流兩種形式。


線上會議和電話訪談的優(yōu)勢顯而易見,可以不受地域限制展開調(diào)研訪談,整體的成本也比較低,設(shè)計師可以自己找領(lǐng)導(dǎo)或者協(xié)調(diào)資源去推動。

缺點也是比較明顯,溝通起來效率低下,比如我們一定有過“電話里說不清,我們見面詳談”的經(jīng)歷。

所以,相較而言線下訪談無疑是最佳的調(diào)研形式。首先當(dāng)面溝通更加高效,其次對于搭載硬件設(shè)備的產(chǎn)品來說,讓受訪者在真實場景里操作演示,可以發(fā)現(xiàn)更多隱性問題。


02

常見的3種受訪者類型

在訪談過程中通常會接觸到以下3種類型的受訪用戶,不同類型的用戶我們應(yīng)該怎么接觸交流呢?

1.話癆型

話癆型的受訪者占大多數(shù),通常就是想法、意見比較多。他們不僅有一大堆不滿意的點要訴說,甚至連對應(yīng)的解決方案都想好了。

整體接觸下來,我覺得該類型的受訪者,可提供的有價值信息會更多一點。只不過我們要學(xué)會過濾信息。因為他們的修飾用詞通常比較多,例如:“太難用”、“超級麻煩”、“哎  我真的是受不了啊”...

訪談話癆型的受訪者,我們需要注意無論怎么聊都要緊扣主題,防止變成了吐槽專場。

其次也要表達(dá)肯定,安撫情緒,并對問題進(jìn)行進(jìn)一步提問:“您的這些建議真的很棒,也給我們提供新的思路,我都記下來了,我還想確認(rèn)下,剛才您說的3個關(guān)于結(jié)算環(huán)節(jié)的問題,哪一個給您造成的困擾最大?”

2.牙膏型

顧名思義,受訪者可能是因為性格內(nèi)向或害怕說錯了不好意思等緣故,在受訪過程中問一句答一句,比較容易冷場。答案的價值也比較低,例如:“對,是的”、“還行吧”、“沒啥感覺啊”、“反正就這樣用用吧”、“說不上來”。

這種情況下要嘗試緩解下氛圍壓力,換個形式溝通:“就是隨便聊聊,公司派我們來呢,就是因為非常關(guān)注用戶的使用感受,想收集一波用戶反饋與建議,您有啥不滿意的地方都可以跟我講講,越多越好?!?/span>

其次我們在提問的時候也要帶有引導(dǎo)性,例如:“還有呢、然后呢、具體說說呢”,如果對方實在說不出所以然,最有效的辦法就是進(jìn)入上機操作環(huán)節(jié),通常操作過程中那些問題也會隨之暴露出來。


3.專業(yè)型

專業(yè)型的受訪者一般是老板或者店長、經(jīng)理崗位的員工,他們對于產(chǎn)品或整個門店乃至行業(yè)都了解的比較透徹。

和這樣的受訪者溝通,不僅是局限于產(chǎn)品的一些問題挖掘,他們會從這個行業(yè)的角度闡述一些個人的見解觀點,給我們提供一些有價值的優(yōu)化方案或者改進(jìn)方向。

例如餐飲的老板其實并不是很關(guān)心點餐、結(jié)算的流程有多么的順暢高效,畢竟他們不需要親自去做這些執(zhí)行,而且坦率的說,對于絕大部分產(chǎn)品而言,好用并不能成為其核心競爭力。

他們關(guān)心的是如何帶來更大的商業(yè)價值,類似于如何提升坪效,如何提升門店會員的儲值能力等等。而這些老板的關(guān)注點,也會給我們未來的產(chǎn)品優(yōu)化方向打開新的思路,去思考如何給我們的用戶創(chuàng)造更高的商業(yè)價值。


03

采訪者需注意的5個要點

1.多了解行業(yè)&業(yè)務(wù)背景

我們在做訪談之前,首先一定要熟悉產(chǎn)品業(yè)務(wù)的相關(guān)背景、受訪商戶的基本情況。

訪談過程中可能會提及一些專業(yè)名詞,例如餐前餐后模式、明檔、一魚多吃、坪效、估清等等。我們具備了這些基礎(chǔ)相關(guān)知識以后,省去了不必要的解釋環(huán)節(jié),可以使訪談推進(jìn)地更順利。

其次建議要了解下行業(yè)相關(guān)的基礎(chǔ)知識。尤其是餐飲業(yè)態(tài),華南、北方、四川等地都因為飲食習(xí)慣的不同,在產(chǎn)品的功能和使用上的需求也是相差很大。具備了這些知識點以后,在提問過程中,也更利于提出一些深刻的問題,而不是浮于表面的提問。

行業(yè)相關(guān)的分析報告,可以去艾瑞、36氪、發(fā)現(xiàn)報告等網(wǎng)站進(jìn)行查詢收集,在此不做贅述。

2.訪談框架不設(shè)限

在訪談初期,需要準(zhǔn)備一份訪談框架,但并不意味著我們整個過程只能按提綱來提問。尤其是B端這種千載難逢的訪談機會,只按規(guī)定的框架提問屬實是太吃虧了。所以在時間允許的情況下,除了框架以內(nèi)的問題,盡可能多發(fā)散的去提問。

例如餐飲業(yè)態(tài),會有各種不同載體的終端設(shè)備聯(lián)動使用,一體機POS、手持的POS、廚房KDS、廚顯大屏、各類打印機等等都可以順便了解、調(diào)研下,讓我們對于全鏈路的協(xié)作流程也會有更深刻的認(rèn)知。

再例如后廚會涉及到KDS大屏顯示,可以問問目前的大屏顯示是否夠清晰(字夠大),也可以和負(fù)責(zé)海鮮稱重的工作人員聊聊,海鮮的售賣、計價流程,以及菜品雙單位(例如:1【條】魚,重量1【公斤】)的使用等等。

在溝通過程中,一定會有一些觸類旁通的收獲與問題被發(fā)現(xiàn)。這些問題也許來自一個模塊、或者某個特定角色,又或者是主產(chǎn)品關(guān)聯(lián)的其他后臺產(chǎn)品。


3.講大白話

在提問的時候要考慮到受訪者的年紀(jì)和理解能力,如果措辭過于專業(yè),可能會導(dǎo)致受訪者理解不到位,因此溝通的過程中要盡可能的說大白話。


4.多看多問多感受

我們都知道沒有經(jīng)歷過的事,很難感同身受。有時候看到客戶群里,因為產(chǎn)品的各種原因?qū)е律虘羟榫w激動,我們理智上非常理解,但是情感上很難共鳴

因此每次的門店調(diào)研,我都會抓住機會觀察整個門店的運營情況,去感受那種忙碌的氛圍。有時候開始進(jìn)入營業(yè)高峰期,機器出現(xiàn)卡頓或者外賣不接單等情況時,自己的情緒都會一下子緊張起來,也能夠深刻感受到產(chǎn)品給客戶帶來的困擾

當(dāng)再次有產(chǎn)品迭代優(yōu)化時,這些體驗總能讓自己能更容易代入用戶的角度思考問題。

除了去體會產(chǎn)品對情緒的直接影響,還可以關(guān)注下整個門店的布局、收銀產(chǎn)品的數(shù)量與擺放位置、不同產(chǎn)品的協(xié)同使用等等。

這些都會幫助我們發(fā)現(xiàn),到底什么是門店運營環(huán)節(jié)里最重要的模塊。

5.做事有始有終

在訪談過程中,不排除受訪客戶會反饋一些暫時無法解決的問題。這時候一定要告訴受訪商戶:“您的問題我已經(jīng)記錄下來,回去會針對這個問題反饋上報,最遲X天我會讓顧問給您回復(fù)的”。

這么做一方面也是細(xì)節(jié)處維護(hù)公司品牌的整體售后體驗,其次也有助于我們再次回訪時,受訪商戶樂意花時間跟我們聊。


04

用戶訪談的3個階段

了解了用戶訪談的一些基本信息和注意點以后,到了本文核心部分,關(guān)于整個訪談的推進(jìn)過程,一共分為3個階段。

1.準(zhǔn)備階段

① 訪談的3種類型

首先明確訪談的類型,用戶訪談的類型主要分為以下三種,最常見的就是第三種類產(chǎn)品使用回訪。

新品場景調(diào)研

新品調(diào)研的訪談,一般是由于業(yè)務(wù)的發(fā)展,可能需要升級或者打磨一款新產(chǎn)品來滿足市場的需求。

在訪談的過程中,我們需要關(guān)注的點就是用戶畫像、商戶訴求、使用場景、終端載體等一系列因素。


潛在商戶拜訪

當(dāng)去往一個城市進(jìn)行批量客戶調(diào)研的時候,偶爾會有拜訪潛在客戶的調(diào)研機會。這種類型訪問的關(guān)注點集中在商戶的痛點與需求上。

由于是潛在客戶,我們勢必是要了解他們想要購買或者替換產(chǎn)品的前因后果。也是借此機會了解到競對的優(yōu)劣勢,他們放棄競對的原因,以及我們當(dāng)前產(chǎn)品的功能是否滿足客戶的需求,還有哪些點不滿足,客戶重點關(guān)注的是什么。


產(chǎn)品使用回訪

使用回訪是最常見的訪問類型,主要目的是對商戶進(jìn)行售后維護(hù)、提升使用體驗

且由于B端產(chǎn)品的復(fù)雜性和遠(yuǎn)距離特點,以及新功能同步給商戶存在的滯后性,公司會安排定期的上門回訪。如果有這樣的機會,UED一定要盡量申請跟著去門店調(diào)研。


 問題設(shè)計3步走

到了最關(guān)鍵的一步,就是關(guān)于訪談的問題設(shè)計。

總結(jié)一下,問題的設(shè)計渠道來源主要有3種。主要還是根據(jù)調(diào)研目標(biāo)進(jìn)行問題設(shè)計,另外兩種方式,作為輔助。

那具體問題應(yīng)該怎么設(shè)計,這邊我們分為3個步驟,從面到點依次拆解進(jìn)行問題設(shè)計。

第一步:了解產(chǎn)品全場景能力

B端產(chǎn)品的特點可以借用《U一點料》的9個字概括,“多場景、全鏈路、多角色”,所以設(shè)計問題前,我們可以從場景+鏈路+角色/節(jié)點功能的維度來設(shè)計問題。

以餐飲行業(yè)的產(chǎn)品舉例,首先建議了解自家產(chǎn)品的全場景業(yè)務(wù)能力。即從商家端到消費端會經(jīng)歷的產(chǎn)品模塊和具備的現(xiàn)有功能,做到心中有數(shù)即可,畢竟不會一下子調(diào)研這么多模塊和功能。

第二步:確定要調(diào)研的流程主線

其他ToB產(chǎn)品同理,可根據(jù)某個操作鏈路為主線,確定主流程后進(jìn)行問題設(shè)計。其實就可以理解為確定調(diào)研的目標(biāo)。例如下圖要調(diào)研的主流程,就是提取點餐>下單>結(jié)算為主線。

第三步:關(guān)鍵節(jié)點問題展開設(shè)計

根據(jù)剛才確定的主流程  我們找到所有關(guān)鍵節(jié)點進(jìn)行問題框架設(shè)計。

以上3個步驟可以理解為,如何在功能極其復(fù)雜的B類產(chǎn)品當(dāng)中,篩選出與訪談目標(biāo)緊密相連的功能鏈路。避免我們的訪談提綱做的過于冗余沒有核心。


③ 2種提前準(zhǔn)備工作

提前告知

這點也非常重要,每一次去門店調(diào)研之前,先由當(dāng)?shù)刎?fù)責(zé)的顧問與受訪商戶提前溝通。


一方面是需要與對方預(yù)約時間,另外一方面這種訪談對商戶而言就相當(dāng)于優(yōu)質(zhì)的售后服務(wù),會有受訪商戶提前列框架,準(zhǔn)備問題。


那么這種情況更有利于調(diào)研,因為受訪者明確自己的問題點在哪里,就等著調(diào)研團(tuán)隊(售后團(tuán)隊)來門店后,好好拉扯一番。

準(zhǔn)備材料與設(shè)備

萬事具備,只欠東風(fēng)。我們再盤點確認(rèn)下本次訪談的各類工具是否備齊,準(zhǔn)備進(jìn)入訪談階段,大致需要準(zhǔn)備的東西是以下4種材料工具。

2.訪談階段

在了解了受訪者類型、采訪者需要注意的點,以及帶著我們設(shè)計好的問題,下面正式進(jìn)入訪談階段。

① 開場白

到達(dá)門店后,我們的顧問會給受訪客戶做一下來訪成員介紹,并講明此次到店的目的。一般都是產(chǎn)品使用回訪,或者新功能推薦培訓(xùn)。


通常來說,受訪商戶對來訪團(tuán)隊總是有很多”心里話“想嘮一嘮,因此暖場氛圍比較容易起來,也有助于我們接下來的溝通


② 訪談中

進(jìn)入正題以后,我們會先大致了解下受訪者最近使用的體驗以及遇到的問題,而后會根據(jù)問題框架進(jìn)行提問。在整個過程中也需要注意觀察用戶在描述問題時候的表情和肢體語言,搜集用戶對于產(chǎn)品的真實態(tài)度。

其實整個訪談流程我們歸納一下,需要關(guān)注的就是四個關(guān)鍵點,手+口+心+顏。

手-實操演示

關(guān)于實操演示放在第一個講,是因為這個環(huán)節(jié)非常重要。線下訪談時強烈不建議“脫機訪問”,這種形式對受訪者而言需要花更多的時間去思考問題的答案。


會遺忘甚至想不起來當(dāng)時的具體情況,隨便的敷衍回答“嗯,還行”、“挺好的”,或者干脆彼此都不在一個頻道上。


其次,在操作過程中,建議用手機進(jìn)行拍攝記錄。因為每個人對產(chǎn)品的理解方式與程度不同,在用戶操作的過程中,會發(fā)現(xiàn)一些有意思的代償方案。這些也是思考的切入點。代償方案是否比原先設(shè)定的實現(xiàn)方法更便捷。


回去通過視頻仔細(xì)分析受訪者的操作路徑,以及每個操作之前是否有遲疑等等。并且將問題點一一記錄下來。


口-問具體操作

這個就是根據(jù)問題框架進(jìn)行提問。在這個過程中,通常會穿插著上機操作演示,在現(xiàn)場記錄的時候可以先記錄個大概,等結(jié)束后再仔細(xì)整理。

心-問心里感受

問受訪者的心理感受,其實就比較偏主觀了,我們可以從“我們家的產(chǎn)品”和“人家的產(chǎn)品”兩個維度去對比詢問心里感受。值得注意的是,即使是這樣開放式的提問,也有提問技巧。


比如“你覺得現(xiàn)在還有什么不好用的地方”就比“你感覺現(xiàn)在的產(chǎn)品好用么”這樣的提問方式更有效。

因為產(chǎn)品一定是有可有優(yōu)化的空間,“有什么不好用的地方”這樣提問的方式就是具體到了某個點上面,具體什么點不好用


而后者的提問方式是基于整個產(chǎn)品,受訪者可能會出于不好意思等原因直接說“你們的東西還行吧,還可以”。


顏-關(guān)注動作表情

當(dāng)我們提問產(chǎn)品優(yōu)缺點的時候,受訪者大部分都會帶上表情和肢體語言,并且情緒表現(xiàn)和性格有比較大的關(guān)系。

性格比較雷厲風(fēng)行、急躁一點的,通常會像連珠炮一樣瘋狂輸出,并且措辭會比較極端。例如:“真的太難用了”、“太麻煩了”、“嚴(yán)重影響門店營業(yè)了啊”。

接受到這種信息我們首先要做的就是安撫對方的情緒,其次對于這些信息要學(xué)會剔除一些夸張描述。

性格溫和一點的受訪者,在闡述問題的時候也會比較婉轉(zhuǎn)。“不是太方便”、“這個改動沒啥感覺”、“也還行、都可以”,如果某個高頻操作真的很影響日常工作效率,往往會表現(xiàn)得很無奈,甚至還有點委屈。

那么無論是哪種表現(xiàn),其實都要考驗采訪者的經(jīng)驗,結(jié)合產(chǎn)品的功能去考慮,找到反饋中真實有效的部分。

通過以上4個環(huán)節(jié),其實就可以收集到很多有用的信息,語言信息、視頻信息、動作表情信息等等。接下來的任務(wù)就是信息的梳理歸納。

③ 結(jié)束語

訪談結(jié)束后,我們需要做個簡單的總結(jié)回顧。將關(guān)鍵問題再次復(fù)述確認(rèn),進(jìn)行查漏補缺并且再次感謝受訪者,表達(dá)他們今天提的建議價值很大,后續(xù)會梳理出可落地的點優(yōu)化到產(chǎn)品當(dāng)中。


如果說聊得比較開心,大多數(shù)的受訪商戶都會邀請來訪團(tuán)隊吃個飯再走,也算是額外的福利。在就餐過程中的非正式場合交流,也可以聊聊門店的一些運營情況等等,幫助我們更深入的了解這個行業(yè)。


3.收尾階段

① 資料梳理

我們在訪談過程中會有大量未整理的一手記錄,結(jié)束后需盡快的梳理,盡可能詳細(xì)的記錄下用戶描述的細(xì)節(jié)、肢體動作表情語言等等。建議使用石墨、語雀、騰訊文檔等在線編輯工具,方便分享修改。(本文提供模板可下載)如果是連續(xù)訪談幾位商戶,我會在訪談結(jié)束以后,迅速地將剛才的訪談內(nèi)容整理出一份原始資料。并羅列出一些受訪者反饋但訪談提綱里沒有的問題,去下一家受訪商戶的時候可以驗證下該問題的普遍性。

② 整理落地

輸出后我們需要再次進(jìn)行提煉,將有價值可落地的問題點提取出來,進(jìn)行匯報分享,并找到相對應(yīng)的產(chǎn)品研發(fā)進(jìn)行探討排期,這樣就形成了一個完整的閉環(huán),真正做到了發(fā)現(xiàn)問題、解決問題.

③ 流程概括

前文絮絮叨叨說了很多,其實關(guān)于用戶訪談這事用6個字就可以概括,簡單理解:


問誰?問啥?答啥?改啥?

能夠回答清楚這4個問題,那么這就是一次有價值的訪談經(jīng)歷。

最后

ToB業(yè)務(wù)的特點就是會有一定的行業(yè)壁壘,設(shè)計師在剛接觸的時候一定會有很多茫然時刻。對于各種專業(yè)詞匯的一臉懵,對于行業(yè)的不了解。


或者很多人對于B端的認(rèn)知還停留在,B端好像沒啥好設(shè)計的,都是現(xiàn)成的組件庫拖一拖,成就感比C端差遠(yuǎn)了。


那么做訪談、體驗優(yōu)化的意義是什么呢?


在《U一點料》一書中提到,B端產(chǎn)品做體驗設(shè)計創(chuàng)新時,有2個要訣

要訣1:更好地幫助用戶降低經(jīng)營成本,增加企業(yè)收入 
要訣2:更好地在業(yè)務(wù)鏈路上促進(jìn)用戶協(xié)同,提升工作效率 
《U一點料》 

所以,無論我們采取何種方式去研究用戶,去挖掘需求,最終的目標(biāo)與意義都是為了使整個系統(tǒng),更貼合用戶的真實使用場景,讓系統(tǒng)可以成為用戶在工作過程中一件“稱手的工具”。


如何真正理解用戶需求,給他們最想要的東西,比如高效協(xié)同、效率提升,或者創(chuàng)造更多的商業(yè)價值。這不僅僅是業(yè)務(wù)方的事,也值得每一位設(shè)計師參與深思。

模板下載鏈接: https://pan.baidu.com/s/15EaUUlqZUvq77wN197hUIw 密碼: mn2g 


作者:B端設(shè)計情報局
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

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


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


藍(lán)藍(lán)設(shè)計www.yvirxh.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è)計公司


這篇導(dǎo)流條設(shè)計方法,讓我打開了新思路

ui設(shè)計分享達(dá)人

// 寫在前面


端到端導(dǎo)流是指在產(chǎn)品矩陣體系內(nèi)引導(dǎo)優(yōu)質(zhì)產(chǎn)品的用戶使用另外一款產(chǎn)品,帶來使用量的提升,從而實現(xiàn)用戶規(guī)模提升的一種增長手段。隨業(yè)務(wù)快速增長,有駕從百度汽車頻道衍伸出了有駕小程序、M站、PC站以及APP等多緯度的產(chǎn)品矩陣,依托各端流量實現(xiàn)矩陣產(chǎn)品間的導(dǎo)流,逐步積累用戶規(guī)模,是有駕目前獲客渠道中占比最高的方式。本文將以有駕導(dǎo)流體驗升級的項目為例,分享導(dǎo)流增長探索的設(shè)計思路與實踐經(jīng)驗。



// 為什么要做導(dǎo)流


導(dǎo)流的目的

對于業(yè)務(wù)本身而言,隨著移動互聯(lián)網(wǎng)流量紅利期的結(jié)束,獲取新用戶的成本越來越高,不管是新產(chǎn)品還是成熟型產(chǎn)品,都需要通過導(dǎo)流的手段來持續(xù)擴(kuò)充新用戶。其次,對于有駕產(chǎn)品生態(tài)而言,需要各端產(chǎn)品間的相互聯(lián)動,協(xié)同發(fā)揮優(yōu)勢,實現(xiàn)流量價值最大化。


導(dǎo)流的優(yōu)勢

  • 成本低,相較于投放、活動等渠道流量獲取方式,矩陣導(dǎo)流成本低;

  • 高意向,用戶購車意向明確更容易實現(xiàn)商業(yè)轉(zhuǎn)化;

  • 可共享,用戶數(shù)據(jù)及行為關(guān)聯(lián)互通。


// 如何做好導(dǎo)流設(shè)計


1.問題分析

通過梳理核心場景的4種導(dǎo)流條,發(fā)現(xiàn)各個場景導(dǎo)流形式各異,用戶缺乏統(tǒng)一認(rèn)知,導(dǎo)流引導(dǎo)語單一內(nèi)容吸引力弱。在用戶在瀏覽頁面時,點擊功能入口或想要繼續(xù)查看更多內(nèi)容,需要下載APP才能繼續(xù)阻礙用戶瀏覽

  • 缺乏統(tǒng)一認(rèn)知:視覺表達(dá)形式不成體系,用戶感知不夠;

  • 內(nèi)容吸引力弱:內(nèi)容單一缺乏吸引力,用戶沒有點擊欲望;

  • 阻礙用戶瀏覽:打斷用戶正常使用功能,影響用戶體驗。



從導(dǎo)流鏈路的用戶行為來看,整個流程下載路徑過長,發(fā)現(xiàn)用戶流失較大的轉(zhuǎn)化點:

  • 從小程序落地頁到下載頁:在進(jìn)入小程序瀏覽頁面時,用戶沒有注意到導(dǎo)流條就滑走了;

  • 點擊導(dǎo)流條進(jìn)入下載頁:點擊導(dǎo)流條會先調(diào)起導(dǎo)流彈窗,點擊確認(rèn)后再進(jìn)入到下載頁,用戶未選擇下載就退出了。



2.明確設(shè)計方向

針對導(dǎo)流現(xiàn)狀缺乏統(tǒng)一認(rèn)知,內(nèi)容吸引力弱、阻礙用戶瀏覽、下載路徑過長的問題,我們搭建了一個完整的導(dǎo)流鏈路圖,根據(jù)用戶增長模型,把用戶生命周期各節(jié)點的用戶行為與產(chǎn)品觸點一一羅列出來,找到增長路徑的設(shè)計機會點。



通過以上的問題分析,如何建立用戶和產(chǎn)品的鏈接,保障友好的體驗,是本次導(dǎo)流升級要解決的問題。根據(jù)用戶關(guān)鍵行為,我們可以將整個導(dǎo)流鏈路拆分為3個階段來挖掘主要機會點:

  • 下載前:興趣激發(fā)導(dǎo)流吸引,建立用戶穩(wěn)定認(rèn)知;

  • 下載中:強化用戶轉(zhuǎn)化動機,刺激用戶完成下載;

  • 下載后:保障還原體驗暢通,提升首次使用體驗。



下面將分別介紹導(dǎo)流下載前階段的設(shè)計落地實踐,以及下載中、下載后階段的延伸設(shè)計思考。


// 下載前


1.強化觸點吸引

是否能成功引起用戶注意,是轉(zhuǎn)化開始的第一步,統(tǒng)一的視覺風(fēng)格和滿足用戶訴求的內(nèi)容,有利于增強導(dǎo)流條的吸引力。


1)收斂導(dǎo)流條類型

針對【阻礙用戶瀏覽】打斷用戶正常使用功能、用戶沒有跳轉(zhuǎn)預(yù)期的體驗問題,下線了阻斷式和截斷式兩種體驗不友好的導(dǎo)流類型,將原來4種導(dǎo)流類型收斂為2種,僅保留通用導(dǎo)流條和功能延展導(dǎo)流條,基于這2種導(dǎo)流形態(tài)進(jìn)行深入的設(shè)計探索。



2)建立通用視覺標(biāo)準(zhǔn)

針對【缺乏統(tǒng)一認(rèn)知】視覺表達(dá)形式不成體系、用戶感知不夠的視覺問題,建立了通用導(dǎo)流條標(biāo)準(zhǔn)化規(guī)范。統(tǒng)一視覺形態(tài),優(yōu)化為頁面內(nèi)通欄嵌入式,同時融入品牌色強化用戶感知,根據(jù)頁面布局制定了不同的展示規(guī)則。



上線后,內(nèi)嵌導(dǎo)流條在展現(xiàn)受限的情況下,導(dǎo)流轉(zhuǎn)化數(shù)據(jù)與改版前基本持平,為了進(jìn)一步提升導(dǎo)流的點擊效果,開始探索場景化定制提轉(zhuǎn)的設(shè)計方向。


3)定制場景化內(nèi)容

針對【內(nèi)容吸引力弱】內(nèi)容單一缺乏吸引力、用戶沒有點擊欲望的內(nèi)容問題,在通用標(biāo)準(zhǔn)化形態(tài)的基礎(chǔ)上,根據(jù)不同場景用戶訴求點,豐富導(dǎo)流內(nèi)容。分別從內(nèi)容定制、按鈕文案優(yōu)化、以及氛圍強化3個方向驗證對轉(zhuǎn)化的影響。

  • 內(nèi)容定制:豐富導(dǎo)流利益點、場景化內(nèi)容更能激發(fā)用戶興趣,促進(jìn)轉(zhuǎn)化達(dá)成;

  • 按鈕文案:轉(zhuǎn)化按鈕文案導(dǎo)向性明確、內(nèi)容與導(dǎo)流利益點匹配,可以助力按鈕轉(zhuǎn)化提升;

  • 氛圍強化:導(dǎo)流樣式上適度弱化氛圍、樣式更傾向于原生功能,有助于提升導(dǎo)流條點擊。



2.拓展場景擴(kuò)量

復(fù)利通用標(biāo)準(zhǔn)導(dǎo)流條的成功經(jīng)驗,應(yīng)用到功能延展類導(dǎo)流條中繼續(xù)驗證有效性,從產(chǎn)品價值點出發(fā),挖掘高流量場景的機會點從而帶來轉(zhuǎn)化增量。


1)價值傳遞

根據(jù)小程序和APP兩端各自的不同點,分別從功能差異及體驗差異兩個方向進(jìn)行優(yōu)化。

  • APP特有功能:APP完善的功能體驗可以更好滿足用戶訴求,例如參配瀏覽場景下,引導(dǎo)用戶體驗搜索及橫屏查看的高頻功能,對于導(dǎo)流轉(zhuǎn)化有正向幫助;

  • 各端體驗差異:小程序和APP兩端體驗存在差異,例如圖片瀏覽場景下,APP清晰流暢的瀏覽體驗及放大全屏查看圖片的交互體驗,能夠刺激用戶轉(zhuǎn)化。



2)價值延續(xù)

當(dāng)用戶完成核心內(nèi)容消費后,是否可以引導(dǎo)用戶去APP繼續(xù)瀏覽更多相關(guān)內(nèi)容,進(jìn)而引導(dǎo)用戶下載呢?

  • 服務(wù)透傳:平臺服務(wù)內(nèi)容傳遞,例如在內(nèi)容落地頁文末增加品牌廣告導(dǎo)流條,幫助用戶建立品牌認(rèn)知;

  • 相關(guān)推薦:引導(dǎo)相關(guān)內(nèi)容消費,例如在文章或視頻頁增加相關(guān)推薦導(dǎo)流條,引導(dǎo)用戶瀏覽更多相似內(nèi)容。




// 下載中


當(dāng)用戶通過導(dǎo)流條進(jìn)入到下載流程時,還有哪些手段可以刺激用戶激活減少流失呢?

  • 強化下載動機:下載頁前置APP落地頁內(nèi)容,例如將通用下載頁優(yōu)化為場景化下載頁,給用戶超前產(chǎn)品體驗吸引轉(zhuǎn)化;

  • 減少用戶流失:縮短鏈路簡化流程,例如可在下載中間頁完成應(yīng)用下載,同時退出下載頁時增加挽留。




// 下載后


當(dāng)用戶在應(yīng)用商店下載完成后,我們還能做哪些提升首次啟動APP的體驗?zāi)兀?/span>

  • 還原鏈路暢通:提升場景還原成功率,減少頻繁提示信息干擾;

  • 建立用戶心智:引導(dǎo)新用戶探索功能,根據(jù)用戶興趣推薦適合的內(nèi)容。


以上內(nèi)容是下載中和下載后階段導(dǎo)流優(yōu)化方向的一些延伸設(shè)計思考,為大家提供可以繼續(xù)探索的方向。



// 寫在最后


總結(jié)一下本篇文章關(guān)于導(dǎo)流的體驗設(shè)計要點:

  • 全鏈路洞察,對導(dǎo)流鏈路進(jìn)行拆解,通過盤點導(dǎo)流鏈路的用戶行為,明確每個節(jié)點的設(shè)計方向;

  • 降低廣告干擾性,減少用戶瀏覽過程中的阻斷感,適度弱化廣告氛圍;

  • 用戶的視角引導(dǎo),讓用戶專注于產(chǎn)品本身傳遞的價值,引領(lǐng)用戶完成對產(chǎn)品的探索從而完成下載激活。


希望以上的設(shè)計思考,可以帶給大家一些啟發(fā)。


作者:百度MEUX
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

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


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


藍(lán)藍(lán)設(shè)計www.yvirxh.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è)計公司


分析2022年大廠新孵化的App,一起發(fā)現(xiàn)它們設(shè)計的獨特之處

資深UI設(shè)計者

以下是碳水Sir在App Store發(fā)現(xiàn)的幾款“寶貝”,之所以稱為“寶貝”是因為產(chǎn)品中可學(xué)到的東西太多了,每個產(chǎn)品視覺UI以及動效都有其獨特風(fēng)格(當(dāng)然網(wǎng)上也有別人總結(jié)過的產(chǎn)品,我這里就不拿出來重復(fù)說了)我僅針對未總結(jié)的大廠產(chǎn)品,進(jìn)行設(shè)計細(xì)節(jié)拆解,看看優(yōu)秀的產(chǎn)品設(shè)計到底好在哪里,請君細(xì)細(xì)品味。





(淘寶 - 屋顏 - 一站式潮流家居平臺)
(字節(jié) - 抖音盒子 - 潮流時尚電商平臺)
(騰訊 - doX多克斯 - 生活碎片視頻社交)
(淘寶 - 吃貨筆記 - 記錄美食好生活)
(得物旗下 - 95分 - 奢潮二手平臺)
(騰訊 - PODO漫畫 - 獨特交互體驗漫畫閱讀平臺)
(荔枝 - 皮玩 - 語音社交平臺)
(陌陌 - 咔咔 - 實拍互動交友平臺)

排名不分先后,從以上幾款產(chǎn)品logo中不難看出,圖形設(shè)計都偏向于具像化,傳遞出正向的情緒,顏色方面使用熒光黃、青綠、漸變粉等凸顯年輕、大膽,富有朝氣。


1.屋顏


第一眼看到這個名就有被驚艷。首先屋顏是屋檐的斜譯,檐變成顏,中華文字博大精深,讀起來也不違和,同時也直觀呈現(xiàn)出產(chǎn)品定位屬性。logo采用字體設(shè)計手法,“屋”字經(jīng)過設(shè)計手法使線條呈現(xiàn)出立體空間感,也間接體現(xiàn)出產(chǎn)品是和房屋軟裝相關(guān),同時為屋內(nèi)添置“顏色”(軟裝)相關(guān)的產(chǎn)品。一個logo兩層含義,通過字體設(shè)計以及諧音表現(xiàn),巧妙的融入其中。

·




直觀來看,頁面大量留白,圖片質(zhì)量高級且風(fēng)格統(tǒng)一,均采用素底作為產(chǎn)品首圖,很好的提升產(chǎn)品整體調(diào)性。
圖形方面均采用直角元素,配圖、banner、按鈕、icon無一例外;細(xì)線風(fēng)格設(shè)計使產(chǎn)品極具品質(zhì)感,有種無印良品的現(xiàn)代極簡主義風(fēng)潮。也叫MUJI風(fēng)。
瓷片區(qū)的配圖采用線性+2.5D風(fēng)格,使畫面富有空間層次,能撐住頁面頭部重要位置,且再次突出產(chǎn)品極簡主義風(fēng)格。當(dāng)然還有空狀態(tài)、無網(wǎng)絡(luò)環(huán)境下的配圖等等都很統(tǒng)一。




動效方面最值得關(guān)注的是下拉刷新,使用吊燈作為下拉效果,當(dāng)向下滑動時電線被拉扯長,但斷不了,給人以安全可靠的產(chǎn)品透傳,也算是通過創(chuàng)意設(shè)計助力產(chǎn)品體驗的手段之一。釋放刷新時,輪播不同的家居icon圖標(biāo),再次強化定位產(chǎn)品屬性,且刷新時不至于乏味。
加載狀態(tài)采用+號線條旋轉(zhuǎn)表現(xiàn),同時在結(jié)尾變成一個方形,這么極簡的設(shè)計之前其他產(chǎn)品從未出現(xiàn)過,同時它也符合屋顏的產(chǎn)品調(diào)性(新家軟裝要做加法,僅個人理解)也算是一個設(shè)計亮點。




最新穎的是產(chǎn)品特有的【3D實景逛店】功能,進(jìn)一步強化家具與室內(nèi)的強相關(guān)性,為什么這么說,單從買家具上,線上買前只能靠照片來間接聯(lián)想買后填入家中的情況,并不能按照自己習(xí)慣多角度查看家具。又或者因為忙,沒時間去線下家具館,或者怕白去一趟,通過【3D實景逛店】快速解決這部分用戶需求。同時,也給線下家具館增加了更多曝光度的可能性。




至此,屋顏的設(shè)計細(xì)節(jié)講解就結(jié)束了,希望產(chǎn)品體驗越做越好。


2.抖音盒子


抖音旗下的電商平臺,整體風(fēng)格清爽直觀,綠色與紫色搭配也是一種時尚風(fēng)。相比其他電商產(chǎn)品,抖音盒子沒有金剛區(qū)圖標(biāo)設(shè)計以及營銷類的占位圖,相反金剛區(qū)僅展示奢侈品實物圖,產(chǎn)品圖大小做了統(tǒng)一,視覺呈現(xiàn)很高級,同時下列瀑布流商品中首圖沒有活動促銷等信息干擾,只展示商品圖,突出其時尚潮牌好物的特性,同時也與當(dāng)前清爽、高級的設(shè)計風(fēng)格相一致。




幾處設(shè)計細(xì)節(jié)值得參考,首先是底部Tab欄點擊動效,承載抖音logo的故障風(fēng)效果,黑色+紫色故障效果一來告知與抖音具有相關(guān)聯(lián)性,是旗下電商產(chǎn)品;二來黑色Tab圖標(biāo)能很好的壓住“紫綠主色調(diào)”的跳躍感,不至于太過俏皮脫離電商屬性。
并且圖標(biāo)的整體性與統(tǒng)一性都做得很好,“小紅點”的設(shè)計采用品牌色“小紫點”呈現(xiàn)(小小的顏色改變),更加強化了產(chǎn)品風(fēng)格與調(diào)性的統(tǒng)一,(小紅點并不是只能用紅色)這點值得學(xué)習(xí)。




最后想告訴大家,產(chǎn)品在每個階段設(shè)計形式都會發(fā)生改變,比如1.0.1-1.0.2可能是輕微調(diào)整,1.0.0-2.0.0就是大的視覺升級??赡芤驗楫a(chǎn)品發(fā)展或用戶變化,使得產(chǎn)品設(shè)計風(fēng)格發(fā)生改變, 但要知道每個上線版本一定是當(dāng)前方案的最優(yōu)解。就如你看到的“抖音盒子”現(xiàn)在是1.9.0版本號,或許在不久的將來就會全新升級。這就不得而知了。


3.doX多克斯


是一款短視頻社交平臺,與其他社交產(chǎn)品不同,doX主打短視頻內(nèi)容社交,用戶通過拍攝上傳有趣的短視頻內(nèi)容,來認(rèn)識志同道合的朋友。雖然與抖音同為短視頻平臺,但抖音更側(cè)重視頻分發(fā),而doX側(cè)重于通過視頻與用戶建立聯(lián)系,一個視頻下可以跟拍多條,有點像qq以前的漂流瓶,只是換種呈現(xiàn)方式。這種陌生人視頻交友有一絲“探探”的味道。




設(shè)計上面單看logo以為會沿用手繪線稿類似的風(fēng)格。整體使用下來,僅在我的頁面頂部背景中用到,其余均采用斷線像素風(fēng)icon設(shè)計,綠+白的設(shè)計風(fēng)格,可能也是為了營造出一種陌生人交友的科幻感覺吧。
發(fā)起拍攝頁,背景會有噪點動效,也是營造一種拍攝前無鏡頭的感覺,引導(dǎo)用戶隨手記錄。




最后產(chǎn)品的切入方向很新穎,但是否能在短視頻風(fēng)口分出一杯羹就不知道了,但目前來說整體設(shè)計風(fēng)格框架已搭建起來,剩下的就是不斷填補及完善設(shè)計,使其更加統(tǒng)一,希望doX越來越好。


4.吃貨筆記


第一次接觸“吃貨筆記”就被頁面整體設(shè)計風(fēng)格吸引。粗線圖標(biāo)+擬物圖標(biāo)形式空前新潮,給人眼前一亮的感覺。它類似于“大眾點評”,是個寶藏探店美食分享的平臺。通過線上探店選擇報名-自行到店-發(fā)表動態(tài)-上傳票據(jù)-提取飯票,來獲得優(yōu)惠消費的同時提高平臺UGC內(nèi)容的產(chǎn)出。可惜的是目前僅支持【廣州】店鋪(可能是先做小范圍本土化嘗試然后再逐漸擴(kuò)大地域),外地用戶只能看看界面并不能真實使用,這點很遺憾。
動態(tài)布局也很有創(chuàng)意,第一張大圖,其他小圖呈現(xiàn),五宮格的樣式使布局統(tǒng)一,且更好突出第一張圖的主視覺層級。




如今本地餐飲服務(wù)平臺已經(jīng)做得很好了,“吃貨筆記”在嘗試從優(yōu)化福利流程、視覺表現(xiàn)、設(shè)計手法等多維度探索新的操作形式,這種身先士卒的精神值得尊敬,單說設(shè)計表現(xiàn)的細(xì)致,就以超過了大部分產(chǎn)品。當(dāng)然,每一款好的產(chǎn)品離不開設(shè)計,更離不開產(chǎn)品功能是否真實滿足用戶需求,讓用戶使用輕松、解決需求后是否帶來爽點。




圖標(biāo)用色很鮮明,均采用3D質(zhì)感表現(xiàn)形式,能看出設(shè)計上面下了很多功夫。底部Tab欄選中圖標(biāo)也采用3D質(zhì)感表現(xiàn),與金剛區(qū)和空狀態(tài)圖標(biāo)形成呼應(yīng),增強產(chǎn)品風(fēng)格記憶點。產(chǎn)品目前的評論和下載量都不像沒推過一樣,可能產(chǎn)品分享度不高導(dǎo)致很多一部分人不知道,所以增加徽章模塊評價打卡獲得獎勵,并以此成就來滿足用戶心里預(yù)期,從而增加使用黏性和傳播分享。




最后這款產(chǎn)品設(shè)計表現(xiàn)都特別出眾,通過空狀態(tài)文案等內(nèi)容也能看出產(chǎn)品的個性特征。例如:“蝦米都沒有,快看看其他的”,還有很多小的設(shè)計細(xì)節(jié),這里就不一一說了,大伙兒自行下載體驗一下吧。


5.95分


95分是得物旗下的分離出來的全新App,主打潮流閑置交易平臺,而得物定位是新一代潮流網(wǎng)購電商,兩者還是有所區(qū)別。但從UI設(shè)計角度,還是能看到得物的影子,潮流前線,并且整體風(fēng)格時尚統(tǒng)一,很多細(xì)節(jié)值得在這里展開說說。




整個設(shè)計清爽直觀、沒有多余裝飾元素,這就要求圖標(biāo)必須做到極致,才能撐住整個頁面。我羅列了一下可能出現(xiàn)的圖標(biāo),輕質(zhì)感毛玻璃效果,結(jié)合統(tǒng)一的漸變元素使得每個圖標(biāo)都精致耐看,值得研究。線性圖標(biāo)也是一樣,整體配套,這套圖標(biāo)應(yīng)該下了不少功夫。




在二手平臺存量競爭的時代,能有一款產(chǎn)品嘗試新的設(shè)計風(fēng)格,并且把近幾年火起來的毛玻璃風(fēng)格相融合,這種走在設(shè)計前線的作風(fēng)與95分產(chǎn)品潮流前線的調(diào)性一致,單說設(shè)計嘗試這種做法就已經(jīng)超越了大多數(shù)產(chǎn)品了。


6.PODO漫畫


毫不夸張,這款產(chǎn)品打開了我對交互表現(xiàn)與實現(xiàn)的新認(rèn)知。我看了一下最早發(fā)布是去年9月27日,到目前為止短短8個月時間,就能讓PODO這款產(chǎn)品的交互設(shè)計做到如此優(yōu)秀,背后依靠騰訊,也有游戲元素的影子,這就不足為奇了。




使用下來基本沒有太多圖標(biāo)元素,更多是把屏幕空間分給了動漫封面,一行三個動漫排列,背景與主體人物分開,滑動時二者在空間層進(jìn)行錯位,營造一種錯層的空間感,使原本扁平的圖像瞬間立體了許多很是新奇。




點開動漫詳情,圖文信息依次從上到下展開,引導(dǎo)用戶視覺享受,并且頭圖中的動漫人物也做了動效設(shè)計,全覽下來很是細(xì)致。除此之外,還有三個明顯的交互細(xì)節(jié),分別是:設(shè)置頁展開交互、閱讀頁底部導(dǎo)航交互以及目錄頁的交互樣式,都以新的表現(xiàn)形式呈現(xiàn)出來,作為設(shè)計師的我們現(xiàn)在不能再說:“設(shè)計已經(jīng)玩不出新的花樣”這樣的說法了。




太多的交互動效就不一一列舉了,趕緊收入囊中吧!


7.皮玩


通過了解得知“皮玩”是荔枝App旗下控股產(chǎn)品,同樣也在入局陌生人社交領(lǐng)域。但值得注意的是該產(chǎn)品上線1個月,內(nèi)部框架及UI界面已相對完整,卡片、插圖、動效、圖標(biāo)、以及一些趣味設(shè)計都已上線,應(yīng)該是一個成熟團(tuán)隊孵化的項目,上線前的測試應(yīng)該沒少下功夫,才能在產(chǎn)品初期做的如此完善。logo采用漸變黃底+吐舌頭表情相結(jié)合,搞怪趣味要用嘴說話這樣的印象。定位:更好玩的語音社交算說得過去 。




初次體驗,第一感受就是采用貼紙風(fēng)的設(shè)計元素,icon與元素都具有較強的設(shè)計感,飽和度較低的配色加上白色描邊,就如產(chǎn)品說的“玩一下、皮一下”相呼應(yīng),產(chǎn)品的整體顏色采用漸變黃和漸變綠,配色很大膽,同時體現(xiàn)出該產(chǎn)品用戶所代表的具有興趣多元化、喜歡嘗鮮這樣一個群體。同時產(chǎn)品也是想通過這種設(shè)計吸引用戶使用。




產(chǎn)品中處處都能看到微動效,使靜態(tài)的畫面變得活潑許多,這種做法也是為了給用戶營造一種活躍的氛圍,增加平臺活躍度。


8.咔咔


咔咔是陌陌孵化的一款社交產(chǎn)品,最近發(fā)現(xiàn)一些大廠旗下產(chǎn)品都在獨立運營,目的也是為了和主產(chǎn)品脫離關(guān)系,防止激烈競爭導(dǎo)致產(chǎn)品停止運營。年前很火的“啫喱”想必就是吃虧在這方面?;貧w正題,首頁是以視頻為主圖片為輔的瀑布流形式呈現(xiàn),停到某一位置則直接循環(huán)播放該視頻,排版方式極具新穎,當(dāng)體驗下來眼球左右移動總是會打斷我信息的獲取,有點強制引導(dǎo)用戶看大圖視頻內(nèi)容的感受。點開則可以與對方進(jìn)行互動點贊評論。




看看模塊,采用類似“探探”卡片交互左滑不喜歡右滑喜歡來讓用戶進(jìn)行操作,但與“探探”不同的是此互動是開放的,用戶選擇滿意的動態(tài)內(nèi)容添加到卡片后,陌生人可看到展示內(nèi)容,并且她被多少人喜歡都會展示出來,相當(dāng)于是個人名片,有種抖音+探探的味道。并不具有一對一的個人隱私性,這是與探探最直接的區(qū)別。




看看模塊中,“打招呼”是與對方建立私聊的唯一方式,如果該用戶已關(guān)注但未打招呼,把卡片劃走,那再也不能與對方建立私聊,除非對方通過“看看”模塊與你打招呼。這個產(chǎn)品細(xì)節(jié)很容易因為用戶不理解或者手滑就無法與上個用戶進(jìn)行“打招呼”私信,且私信功能僅在觸發(fā)“打招呼”后才能交流,入口少、且不易理解,不知道是產(chǎn)品經(jīng)理的有意為之還是被遺漏掉的地方。




消息頁的添加入口,用折疊手法展示,降低頻繁跳頁的割裂感,同時縮起時也不會占用消息列表。
消息列表是通過“打招呼”保存下的私密消息,聊天形式極具特色,黑色背景加上紅紫漸變列表有種夜店嗨皮的即視感觀,這里就不過多評價,大家領(lǐng)悟吧。




設(shè)計中還值得關(guān)注一點,就是個人主頁中的個性標(biāo)簽,我羅列出22個,當(dāng)用戶發(fā)表三個同類動態(tài)即可點亮一個標(biāo)簽,此標(biāo)簽也會代替文字描述承載動態(tài)內(nèi)容的作用,用戶選擇已點亮 的icon即展示對應(yīng)標(biāo)簽內(nèi)容了,相當(dāng)于動態(tài)中的標(biāo)簽分類,但前提發(fā)表動態(tài)時選擇對應(yīng)你標(biāo)簽,不然發(fā)表后的動態(tài)不能二次修改。這種通過標(biāo)簽點亮的功能也是為了讓用戶UGC內(nèi)容更加多元化,同時也想通過標(biāo)簽來吸引用戶多多發(fā)動態(tài)的。創(chuàng)意點是好的,但是否能達(dá)到好的效果,還是要拭目以待。




相比其他產(chǎn)品,咔咔是我一直關(guān)注的產(chǎn)品,同時也是特別喜歡的產(chǎn)品之一,所以我分享給你們。


9.結(jié)語


設(shè)計師要有發(fā)現(xiàn)美的眼睛。美不僅是視覺,還有好的體驗流程。不要讓用戶思考,這是每個設(shè)計師所追求的。
認(rèn)真記錄產(chǎn)品細(xì)節(jié),了解背后的思考,也是不斷提升自己邏輯思維和表達(dá)能力的一種方式。

本期產(chǎn)品細(xì)節(jié)分析結(jié)束,點擊原文鏈接查看更多,我們下期再見!

作者:碳水Sir;公眾號:草蓉三石



作者:碳水sir

鏈接:https://www.zcool.com.cn/article/ZMTQwMzM4OA==.html

來源:站酷

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


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


藍(lán)藍(lán)設(shè)計www.yvirxh.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è)計公司


                         

WWDC22|從獨立開發(fā)者中發(fā)掘小而美的設(shè)計奧秘

資深UI設(shè)計者


WWDC22 全球開發(fā)者大會結(jié)束,有太多小眾產(chǎn)品脫穎而出。無形中有一股巨大的力量,在慢慢崛起,那便是來自世界各地的小型開發(fā)團(tuán)隊和獨立開發(fā)者。他們的產(chǎn)品小而美,小到僅靠一個功能撐起產(chǎn)品,美到完全忘記這是工具產(chǎn)品。那么具體都有哪些產(chǎn)品細(xì)節(jié),不妨聽我細(xì)細(xì)道來~




其中,我精挑細(xì)選出一個海外和三個國區(qū)優(yōu)秀產(chǎn)品進(jìn)行產(chǎn)品設(shè)計細(xì)節(jié)分析,一探小眾產(chǎn)品究竟好在哪里!

(專注面條 - 輕松重獲專注力)2022年Apple設(shè)計大獎入圍名單之一
(謎底時鐘 - 讓時間看得見)2022年Apple設(shè)計大獎入圍名單之一
(Waterllama - 開啟喝水時間)2022年Apple設(shè)計大獎入圍名單之一
(OffScreen - 自律番茄鐘,不做手機控)Apple Store精品推薦64次

排名不分先后,從以上幾款產(chǎn)品logo中可以看出產(chǎn)品之間設(shè)計風(fēng)格基本不一樣,不存在借鑒抄襲,各自都在細(xì)分領(lǐng)域深耕播種。

也正是因為開發(fā)者的敬業(yè)、精益、專注、創(chuàng)新的“工匠精神”,才能讓產(chǎn)品突出重圍,優(yōu)秀的呈現(xiàn)在用戶面前使用。


一、專注面條


Slogan:專注,可以做出一碗好面條。


你以為這只是讓人做泡面的App!那就錯了。這是用“煮一碗好面條是需要時間的”為理念,讓用戶專注工作,類似番茄工作法。

有趣的是,這款效率工具被插畫元素完美包裹起來,一點感受不到工具給人帶來的疏遠(yuǎn)感。相反,極具趣味性的畫面讓工具使用起來也充滿樂趣充滿愛。

正因這上乘的設(shè)計質(zhì)感,《專注面條》曾數(shù)次登上 App Store 推薦頁,至今收獲 7000+ 個評價、4.9 的評分。





1.核心理念

想象一下你正在烹飪一碗面條。


在烹飪時間結(jié)束前.不要試圖拿起你的手機,這樣會讓水蒸汽流失,面條就不好吃了。日后,你可以使用專注面條完成你希望專注的任何事情。


它把工作比喻成煮面,煮面要專心,把控火候,合適時間放入主料和調(diào)料;工作同樣要專心,遵循自己的方法論,把每個步驟和流程都執(zhí)行到位。工作完成了,一碗面也就煮好了。


專注力在哪里,效率就在哪里。

「專注面條」希望輔助你以一種詼諧有趣的方式,重獲這個時代最稀缺的專注力。放下你的手機,煮一碗面,我們一起對抗手機成癮!


時間一到,你的面條就做好了,你也完成了一次有意義的專注。




2.品牌元素

打破常規(guī),不用系統(tǒng)默認(rèn)蘋方字體,而是選擇手寫體風(fēng)格的「素材集市康康體」字體(文末領(lǐng)取可商用字體包)作為通篇文字載體。

這也是為統(tǒng)一界面風(fēng)格做的一個優(yōu)化嘗試。

不得不說,這個選擇是非常適合的。(體量較小的產(chǎn)品可以適當(dāng)選用設(shè)計字體,一旦產(chǎn)品功能做多做大還是乖乖用默認(rèn)字體規(guī)范靠譜些)。


打開App,你能明顯看到簡潔的手繪風(fēng)格元素,使整個產(chǎn)品透傳出清新可愛的一面。這也是Alex作者受到女兒啟發(fā),畢竟小孩子總有天馬行空的想象,但大人們卻很難跳脫現(xiàn)實產(chǎn)生有趣想法。


App界面極其簡潔,只有黑白灰三種顏色,搭配手繪風(fēng)格的設(shè)計元素,使產(chǎn)品整體清新脫俗,與眾不同。

圖標(biāo)設(shè)計脫離設(shè)計規(guī)范,采用更加符合產(chǎn)品氣質(zhì)的手繪風(fēng)格,這樣使得界面統(tǒng)一性極高,氛圍感十足。

這也間接告訴設(shè)計師們圖標(biāo)設(shè)計上一定要跟著產(chǎn)品形態(tài)去做設(shè)計,而不要一味以第三方規(guī)范為唯一衡量標(biāo)準(zhǔn)來設(shè)計,結(jié)果就是同質(zhì)化泛濫。




3.專注時長-插圖設(shè)計

計時是產(chǎn)品核心功能,點擊首頁左上角專注時長,會出現(xiàn)不同的煮面方案。

可設(shè)置5分鐘-180分鐘之內(nèi)任意時長的專注時間,同時為5、10、15、20、25、30、35、40、45、50、55、60、180分鐘,這13個時間段繪制了專屬面條配方。你不用手機的時間越長,你煮的泡面配料就越豪華越高級。設(shè)計元素也越豐富。當(dāng)你碰到手機,就會震動十閃光。

面條設(shè)計方案與功能的完美呈現(xiàn)是產(chǎn)品最吸引人的地方。




4.設(shè)計細(xì)節(jié)

根據(jù)累積的專注時長還可以獲得相應(yīng)的稱號,配合幸苦工作后汗水落下動畫,很是生動有趣。

不僅如此,專注面條還特意為女性男性做了兩套插圖設(shè)計方案,充分考慮不同群體的使用體驗,僅僅是效率型產(chǎn)品就做到如此細(xì)節(jié),不好才怪。

這也是除了故事卡片第二種用總時長配圖來增加產(chǎn)品使用黏性產(chǎn)生記憶點的設(shè)計之處。




5.商業(yè)模式-永久買斷與付費項目

1.永久買斷制


【專注面條】一次買斷制,面條價格¥18。購買后產(chǎn)品內(nèi)的功能都可使用。但“故事卡片”需要鑰匙來解鎖,¥6.00=鑰匙*6,不想付費那就乖乖完成計時任務(wù)來隨機獲得故事卡片。


作為一個功能單一的產(chǎn)品,賣點在哪里?核心競爭力在哪里?依碳水Sir來看付費用戶大多在為品牌理念買單。

就是產(chǎn)品自身的品牌調(diào)性,區(qū)別于市面上任何一款產(chǎn)品,不隨波逐流,用全新的面條理念代替時間,并且有其鮮明的手繪風(fēng)格和插圖元素,即使被抄襲也只能抄到“外殼”,內(nèi)在的東西是偷不走的。


2.購買鑰匙


專注完成后,靠概率獲得鑰匙,用來解鎖故事卡片以及 “腦洞大開” 的結(jié)局作為獎勵。緩解你專注后的緊張感,增加趣味互動性,同時為下一次專注做好準(zhǔn)備。

故事中皮諾曹、烏鴉喝水、長發(fā)公主等雖然都是我們耳熟能詳?shù)耐?,但作者?Alex )給他們加上了一些彩蛋。譬如在《猴子撈月》的卡片里,解謎前三個猴子看到河流中有一個圓圈,當(dāng)我們找到面條的位置時,會發(fā)現(xiàn)猴子們看到的不過是一個香菇都大為震驚,畫面里充滿奇妙的想象力。

當(dāng)用戶看到未解鎖的故事會出于好奇點進(jìn)去,這時就需要鑰匙來解鎖,畢竟不是靠專注獲得的卡片就要用別的辦法(購買鑰匙)打開,這就是第二個商業(yè)轉(zhuǎn)化點。


目前已有的27張故事卡片,每一個都與面條結(jié)合進(jìn)行故事綁定,讓用戶在效率軟件中也能感受到游戲的樂趣,把故事卡片當(dāng)成解鎖過關(guān)元素,引發(fā)用戶對故事卡片更多的渴望。這也是通過獎勵機制提高用戶參與感進(jìn)而提高使用黏性以及提升付費轉(zhuǎn)化的一種方式。




一個動作,一堆腦洞,組成了一個能量滿滿的 app。

6 月 1 日,蘋果發(fā)布了 2022 年度設(shè)計大獎入圍名單,在「創(chuàng)新思維」類別中出現(xiàn)了中國區(qū)《專注面條》的身影,雖然止步于決賽圈,但我覺得這并不是結(jié)束,而是全新的開始。


優(yōu)秀的產(chǎn)品總有其相似之處,也有其不同。要想做一款好的小眾產(chǎn)品,除了把產(chǎn)品本身所解決的用戶痛點做好做精外,植入產(chǎn)品理念,與用戶產(chǎn)品某種關(guān)聯(lián)。

就如它把專注計時比作烹飪時間,當(dāng)完成專注,你將獲得一碗香噴噴的泡面一樣,給用戶感受并不是冷冰冰的機器“?!钡母嬖V用戶專注結(jié)束,而是通過巧妙的設(shè)計與用戶之間產(chǎn)生真實聯(lián)系,這或許就是成功的秘密。

借用「專注面條」Slogan說的:專注,可以做出一碗好面條。

各位設(shè)計師們不妨學(xué)習(xí)一下背后的思考。


二、謎底時鐘 - 讓時間看得見


謎底時鐘是一款設(shè)計精美的時鐘應(yīng)用。

Slogan:陪伴你學(xué)習(xí)、工作與生活。

你沒看錯!它僅有時間和計時功能。

作為一款時鐘App,UI設(shè)計有什么不同,才被入選2022 蘋果設(shè)計大獎!成為中國開發(fā)者之光!我們一起來看看。




1.首次引導(dǎo)

第一次下載,就會啟動引導(dǎo)流程,切換頁面時配合錯幀動畫,使設(shè)計細(xì)節(jié)更加突出明顯,強化品牌調(diào)性。產(chǎn)品中的引導(dǎo)頁都可以嘗試這種表現(xiàn)形式。

進(jìn)入首頁,展示文字+動效的引導(dǎo)流程,統(tǒng)一的表現(xiàn)形式,讓使用者更容易理解。首頁交互引導(dǎo),讓用戶對產(chǎn)品隱藏的交互功能得到二次記憶,具有增強產(chǎn)品記憶的作用。




2.品牌元素

2-1.設(shè)計元素


品牌風(fēng)格設(shè)計很前沿,采用2020年大火的新擬態(tài)設(shè)計風(fēng)格,也能看出設(shè)計表現(xiàn)緊跟市場潮流走,是一款個性且年輕的App。

整體使用下來,印象最深的就是模塊列表、圖標(biāo)的微質(zhì)感設(shè)計,以及彈窗布局的規(guī)范化設(shè)計,還有部分組件采用毛玻璃設(shè)計手法等。

值得注意的是,產(chǎn)品對iOS原生組件進(jìn)行大量重新設(shè)計,結(jié)合新擬態(tài)風(fēng)格繪制了一套更符合產(chǎn)品調(diào)性的組件出來。讓人使用一次就記憶猶新。


2-2.核心力-交互感知


我分別羅列出計時切換器、計時完成動效、時間選擇器、鬧鐘動效、刪除交互、浮窗切換交互這六個來簡單談?wù)効捶?。以下幾個動效交互基本涵蓋市面上的多半產(chǎn)品的基礎(chǔ)功能,之所以展示出來,是因為「謎底時鐘」在原有的基礎(chǔ)組件上大膽創(chuàng)新,摒棄原生組件。

這樣做對于功能簡單的產(chǎn)品來說絕對是錦上添花有助于產(chǎn)品形成記憶點的設(shè)計細(xì)節(jié)。這也從側(cè)面反映出市面上的部分產(chǎn)品,只注重功能堆疊而完全忽視原生組件還可以二次設(shè)計的方向。


什么是好的交互,操作時無感知是一種,操作時有記憶點也是一種。顯然「謎底時鐘」是后者。要知道優(yōu)秀的交互自成一派,把單一的功能做到極致,你的產(chǎn)品就不會差到哪里。




3.彩蛋-圖標(biāo)變化與提醒

時鐘就是要長時間靜默展示,除了極簡、擬物、科技、馬賽克、霓光、積木、微質(zhì)感、電子屏、睡眠屏、卡通風(fēng)、各類鐘表材質(zhì)等等19種風(fēng)格高顏值時鐘外,霓光時鐘具有不一樣的功能。

當(dāng)你早晨使用它文案“早安晨之美”中午“午安好心情”下午“飲啖茶食個包”,除了文案變化,圖標(biāo)也跟隨名稱而變,又一個用美食來拉近與用戶距離的設(shè)計細(xì)節(jié)。


不僅如此,在低電量情況下,霓光效果不顯示,底部會持續(xù)閃爍電量不足的指示燈,告訴用戶手機沒電信號,請及時充電。當(dāng)用戶插上電源,霓光時鐘會重新啟動亮光模式,給予用戶通電感知。

雖然很小的設(shè)計點,但誰又能想到時鐘與電量不足產(chǎn)生聯(lián)系。看來開發(fā)者對時鐘的創(chuàng)意聯(lián)想是豐富多彩的。




4.彩蛋-積木時鐘墜落

無意間觸碰手機時發(fā)現(xiàn)積木零星掉落下幾個,在好奇的驅(qū)使下又晃動了一下手機,所有積木都掉落下來了。

具有數(shù)字屬性的積木依然不斷變換數(shù)字,并且配合手機陀螺儀可以模擬現(xiàn)實空間進(jìn)行移動,交互玩法趣味十足,讓我忍不住多玩了幾次。

這種用到iOS系統(tǒng)功能做的大膽嘗試,有時會給產(chǎn)品帶來意想不到的好處,各位總監(jiān)們不妨試試。




5.商業(yè)模式-細(xì)節(jié)之處

采用終身會員與月會員模式,月會員很好理解,為了產(chǎn)品能持續(xù)做下去,而推出的付費模式,目的是能持續(xù)有營收。終身會員是一個很有意思的模式。

據(jù)了解,產(chǎn)品前期功能相對單一時,推出的一種買斷制,但隨著新功能不斷增加,原有¥25定價相比較低,早期買斷的用戶獲利更大,為了商業(yè)與產(chǎn)品平衡,使其具備良性發(fā)展空間,于是又推出月會員模式。


這也牽扯到另一點,凡是未上線新功能都可以輕松決定是否開發(fā)上線,一但功能上線,想要取消或抹掉功能,就沒那么輕松簡單了。這也是早期App都一次買斷,后期改為訂閱模式也必須有終身買斷的內(nèi)購入口。




如果我們是“匠人”就會把 App 當(dāng)藝術(shù)品,雖然只有也僅有一種功能,但只要花費了大量的時間去想創(chuàng)意,去做到設(shè)計、交互的完美融合,甚至一遍一遍地優(yōu)化各種細(xì)節(jié)部分,埋設(shè)彩蛋,最后的最后呈現(xiàn)出來讓自己滿意。那么它就很可能成為一款小而美的產(chǎn)品。


三、Waterllama


烏克蘭開發(fā)團(tuán)隊出品。讓喝水變成一件快樂輕松的活動。僅有的喝水記錄功能,卻用大量動物角色來獎勵喝水后的你,讓你欲罷不能。保持水分保持快樂!從截圖中不難看出,該App內(nèi)置大量動物插圖,通過喝水來解鎖小動物,解鎖前僅展示動物輪廓,讓用戶產(chǎn)生好奇從而保持喝水好習(xí)慣,這個概念很好,產(chǎn)品很棒,那我們一起來看看吧。




1.品牌元素

產(chǎn)品中icon展示較少,更多是用小插畫來代替,頁面中大量的banner以及動物卡片,豐富產(chǎn)品的同時營造一種輕松的感覺。并沒有很多圖標(biāo)干擾用戶操作。與水相關(guān)的插圖用動效來承載,讓簡單的元素變得趣味橫生,很是新穎。除了普通的水以為,Waterllama還為各種飲料酒水做了全套icon,共計48+之多,可見產(chǎn)品對于水的核心功能做足了努力,才有如此多的類型與選擇供用戶記錄。




2.核心功能

無論您是想休息一下咖啡因,還是想通過果汁和冰沙來增強免疫系統(tǒng) - 選擇任何挑戰(zhàn),盡情享受吧!
遠(yuǎn)離含糖飲料和酒精,或者在 10 天內(nèi)只喝水補充水分。看看你的進(jìn)展如何,別忘了與朋友分享你的結(jié)果。
Waterllama 應(yīng)用程序中已有超過 45 個可愛的動物角色,我把解鎖與隱藏的都羅列到上放品牌元素中,可以看下總有一款是你的菜。你也可以使用隨機模式,讓每一天都變得不同。當(dāng)天喝水目標(biāo)達(dá)成就會解鎖一個動物,精美的插圖讓人賞心悅目,期待第二天繼續(xù)喝水打卡挑戰(zhàn)。




3.交互手法

首頁下方的動物挑戰(zhàn)卡片,交互形式采用App Store卡片點擊交互,無論是轉(zhuǎn)場過度,還是下拉放大主體都給畫面賦予趣味性操作體驗。一邊體驗交互細(xì)節(jié),一邊了解喝水的各種好處,娛樂加學(xué)習(xí)兩不誤,很是輕松。




4.商業(yè)模式-細(xì)節(jié)之處

內(nèi)購頁面采用icon輪播的動效展示,優(yōu)點是在一小塊區(qū)域通過消失漸現(xiàn)可以展示所有內(nèi)容,使內(nèi)購頁面干凈清爽能更好的閱讀頁面信息。按鈕通過循環(huán)放大,引導(dǎo)用戶進(jìn)行付費操作,雖然很刻意,但絲毫沒有感受到強制性選擇。
當(dāng)產(chǎn)品想要在內(nèi)購頁強化品牌背書,給到用戶可靠穩(wěn)定感,可以選出具有代表性的優(yōu)質(zhì)評價,展示在內(nèi)購頁下方,通過左右切換查看更多評價。
每年¥28,終身買斷制¥48.00。兩個價格是利用價格差來制造價格錨點,引導(dǎo)用戶購買終身會員,這對用戶來說最實惠劃算的方案,同時也是產(chǎn)品所希望的。大量的終身用戶長時間使用產(chǎn)品,成為核心用戶群體,助力產(chǎn)品越做越好。




現(xiàn)在不難看出,優(yōu)秀的產(chǎn)品往往更關(guān)注細(xì)節(jié)表現(xiàn),用動態(tài)展示內(nèi)容,讓玩法更具趣味性,頁面簡約而不簡單。并不是頁面元素越多越好,相反把簡單的功能做到極致就會帶來正向有價值的反饋。


四、OffScreen - 自律番茄鐘,不做手機控


這款產(chǎn)品雖然沒出現(xiàn)在WWDC22上,但與「謎底時鐘」是同一家公司。無論設(shè)計或功能使用都相媲美。
手機已成為人人必備的物品,內(nèi)置的各種App占有著人們的生活,手機依賴已成為這個時代普遍的一種現(xiàn)象。雖然人們都知道長時間看手機不好,下意識的克制看手機行為,以為這樣脫離手機依賴患者這個稱號。往往碎片化看手機,一天下來使用手機的時長不降反增?!窸ffScreen」通過細(xì)分時間屬性為用戶直觀呈現(xiàn)各種場景下使用手機的詳細(xì)數(shù)據(jù),通過數(shù)據(jù)展示以及專注時間,防止用戶沉迷手機無法自拔。




1.品牌元素

「OffScreen」背景色使用極其大膽。

淺色模式下采用暖橘色作為品牌主色調(diào),暗色模式下采用海藍(lán)色作為主色調(diào),相比Apple設(shè)計規(guī)范中的顏色,這種帶有傾向性的色彩更容易營造一種產(chǎn)品氛圍,強化產(chǎn)品感知度。

圖標(biāo)方面,具有操作屬性的圖標(biāo)采用線性(相對好理解),具有展示屬性的圖標(biāo)采用面性風(fēng)格(設(shè)計表現(xiàn)更強且有文字描述相對好理解)。




2.動效表達(dá)1

引導(dǎo)流程專場用了大量位移、漸變效果,使原本單調(diào)的靜態(tài)頁賦予生動表現(xiàn)力。吸引用戶眼球,達(dá)到品牌傳播效果。




3.動效表達(dá)2

動效貼合操作效果,用戶還沒使用就能一眼明白產(chǎn)品如何使用,這就是引導(dǎo)動效的好處。

當(dāng)你專注番茄鐘時,只需在番茄上滑動標(biāo)尺選擇準(zhǔn)確時間,就能開始專注。

當(dāng)完成專注會提供統(tǒng)計數(shù)據(jù),并且有彩帶飄落效果,營造打卡勝利的儀式感,強化產(chǎn)品感知,為用戶下一次專注做準(zhǔn)備。




4.商業(yè)模式-細(xì)節(jié)之處

內(nèi)購頁采用依次呈現(xiàn)的交互方式,頭圖是一個人在看手機,采用線性風(fēng)格手法,這種形式區(qū)別于其他產(chǎn)品,會給人以眼前一亮的感覺,加深用戶對產(chǎn)品的記憶。

付費按鈕吸附與頁面底部,根據(jù)菲茨定律,起始于目標(biāo)位置越近,到達(dá)目位置的時間就會越短,從而用戶更容易點擊。


一次買斷制,¥30.00解鎖終身會員。

作為一款時間統(tǒng)計、番茄鐘、專注時間與一身的產(chǎn)品,對于時間管理有強需求的用戶來說價格還算不錯。流暢的交互呈現(xiàn)以及有趣的配圖描述,間接感受到Off Screen產(chǎn)品的細(xì)膩之處,用戶為此買單也不是說。




OffScreen的成功在于能把單一的屏幕使用時間進(jìn)行多維度分析呈現(xiàn),就說“呆呆的看”與“邊走邊看”這兩項數(shù)據(jù),就是調(diào)用系統(tǒng)運動數(shù)據(jù)來判斷使用屏幕的場景。

況且每項數(shù)據(jù)都支持時間軸可視化圖表的方式呈現(xiàn),細(xì)節(jié)之處方見專業(yè),這也是好產(chǎn)品所要具有的垂直領(lǐng)域?qū)I(yè)度。


五、產(chǎn)品總結(jié)


想要產(chǎn)品脫穎而出,一定要嘗試將軟件與硬件結(jié)合,可以是陀螺儀、眼動追蹤、閃光燈等等,總之系統(tǒng)推出新的功能,就盡量把它用到產(chǎn)品里去。

不僅如此,看以上幾個產(chǎn)品,截圖模塊內(nèi)容都頂滿了,說明App想要展示的細(xì)節(jié)還有很多,從側(cè)面也能看到開發(fā)者們不留一塊“空白”的用心。


大廠產(chǎn)品固然很好,做法更符合大眾市場符合消費者需求,隨著不斷新增功能,產(chǎn)品變得越來越普適大眾,無產(chǎn)品獨特風(fēng)格可言。因為背后有龐大的員工要養(yǎng)活。

相反小團(tuán)隊獨立開發(fā)者們沒有太多顧慮,一心想把一個點做好做緊致,哪怕只是計時,也要做的自己滿意為止,才會交卷,時代在變,匠人之心從未改變。值得致敬這些開發(fā)者們。




跳脫大廠的產(chǎn)品,來看看獨立開發(fā)者和小型開發(fā)團(tuán)隊,一人即團(tuán)隊,遇到各類問題都要獨自進(jìn)行解決,可想而知工作量會有多大。

他們的產(chǎn)品或許沒有龐大的生態(tài)體系來滿足大眾用戶使用需求,但App Store十余年的發(fā)展,建立起細(xì)顆粒的開發(fā)環(huán)境,正是這種良性生態(tài),讓那些有光的開發(fā)者,隨心所欲讓心中的想法變成現(xiàn)實,讓夜里的小路燈照亮了整片街道。


就連開發(fā)者們都這么拼搏,作為設(shè)計師的我們哪還有抱怨之說,這么多好的產(chǎn)品擺在眼前,真是難得的學(xué)習(xí)機會,習(xí)他人之處,補自我之短。一起加油一起進(jìn)步。


六、結(jié)語


設(shè)計師要有發(fā)現(xiàn)美的眼睛。美不僅是視覺,還有好的體驗流程。不要讓用戶思考,這是每個設(shè)計師所追求的。 認(rèn)真記錄產(chǎn)品細(xì)節(jié),了解背后的思考,也是不斷提升自己邏輯思維和表達(dá)能力的一種方式。

本期產(chǎn)品細(xì)節(jié)分析結(jié)束,點擊原文鏈接查看更多,我們下期再見!

作者:碳水Sir;公眾號:草蓉三石

本文由 @碳水Sir 原創(chuàng)發(fā)布。未經(jīng)許可,禁止轉(zhuǎn)載。


作者:碳水sir
鏈接:https://www.zcool.com.cn/article/ZMTQwODQ3Mg==.html
來源:站酷

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


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


藍(lán)藍(lán)設(shè)計www.yvirxh.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è)計公司


                       

多身份|體驗B站 嗶哩嗶哩 bilibili 小破站 產(chǎn)品設(shè)計細(xì)節(jié)

資深UI設(shè)計者

前言


眾所周知,B站是一個二次元、鬼畜、學(xué)習(xí)、娛樂等等于一身的綜合視頻社區(qū)。近82%的用戶是Z世代用戶(90-09年出生的人群),他們也是生長在互聯(lián)網(wǎng)下的一代人。用戶規(guī)模與活躍度都持續(xù)高位,除了其產(chǎn)品側(cè)的發(fā)力,設(shè)計中的體驗感知也功不可沒,本次分享bilibili中用戶最常能感知到的產(chǎn)品設(shè)計細(xì)節(jié),幫助你豐富B站玩法的同時,學(xué)習(xí)產(chǎn)品中的過人之處,以便了解設(shè)計發(fā)力點。

越往下看你越驚嘆,總有一個你不知道的彩蛋設(shè)計細(xì)節(jié)。






1.【防偷窺】登錄頁 - 2233娘遮眼


1.使用場景
再熟悉不過的頁面了吧。登錄頁面是除首頁外,每個用戶大概率要進(jìn)入的頁面。如何給予用戶安全感知,同時增強產(chǎn)品記憶點。




2.設(shè)計思考
設(shè)計目標(biāo):提升用戶登錄B站時的安全感知。
設(shè)計方案:當(dāng)用戶在輸入驗證碼或者密碼等較為敏感的信息時,2233娘會遮住眼睛,暗示隱私信息我們是不會偷看的。強化B站對安全隱私的重視度。增強用戶信任感。同時B站的品牌IP2233娘從兒時到成年產(chǎn)品中都有體現(xiàn)。用戶登錄注冊賬號時,兒時Q版的2233娘呈現(xiàn)在眼前,暗示著2233娘未來的一路陪伴,共同成長的愿景。這是第二層含義。


2.【選封面】開屏頁 - 自選模式


1.使用場景
作為一個二次元發(fā)展起來的視頻社區(qū),用戶對于產(chǎn)品品牌具有親切感。但B站發(fā)展至今二次元內(nèi)容逐漸被多元生態(tài)所代替,類目占比逐漸變小,老用戶的情感記憶那里體現(xiàn)。




2.設(shè)計思考
設(shè)計目標(biāo):提升品牌IP傳播,讓用戶享受更加豐富的開屏頁,從而滿足用戶情緒。
設(shè)計方案:在「設(shè)置」-「開屏畫面設(shè)置」中,你可以隨機展示或者自定義選擇畫面,總共為用戶提供20張圖片,每一個都是2233娘和B站重要日子的組合插畫,其中不乏幾張經(jīng)典頁面。當(dāng)用戶選擇特定畫面時,不僅能強化IP記憶點,同時也體現(xiàn)出產(chǎn)品對用戶的重視程度。


3.【彈幕清屏】視頻頁 - 雙指點擊快速隱藏


1.使用場景
B站彈幕是出了名的有趣,當(dāng)彈幕狂熱者看一個熱門爆款視頻,很可能彈幕全程霸屏,氣雖然氛感十足,但也會存在遮擋用戶查看所關(guān)注的內(nèi)容,從而錯過精彩瞬間。如何解決?




2.設(shè)計思考
設(shè)計目標(biāo):優(yōu)化彈幕開關(guān)的便捷操作,給予用戶優(yōu)質(zhì)的交互體驗。
設(shè)計方案:在視頻播放頁面,常規(guī)開關(guān)彈幕的方式是點擊左下角彈幕按鈕。想要在便捷一些,你可以雙指點擊屏幕,觸發(fā)開關(guān)彈幕功能,相比常規(guī)「先點擊屏幕」「再關(guān)閉彈幕」兩步操作,雙指點擊屏幕更加高效,雖然多指操作學(xué)習(xí)成本高,但這種隱藏交互會大大提升觀感體驗。如今的產(chǎn)品功能不斷堆疊,有時候常用的功能要進(jìn)入3個層級才能使用,何不換種思路,運用多指交互來提升用戶操作體驗,未嘗不是一種好的體驗升級。


4.【進(jìn)度條】視頻頁 - 眼睛跟隨方向


1.使用場景
一個產(chǎn)品除了空狀態(tài)、界面元素外,如何在視頻頁中給予用戶品牌感知,增加趣味體驗。




2.設(shè)計思考
設(shè)計目標(biāo):提升視頻頁進(jìn)度條的趣味性,從而強化B站品牌透傳。
設(shè)計方案:在視頻頁中,當(dāng)你對視頻進(jìn)度進(jìn)行左右拖拽時,進(jìn)度條的指示圖標(biāo)「小電視」的眼睛會左右移動,當(dāng)你向左滑動眼睛跟隨左邊,向右滑動小眼睛跟隨右邊,很是有趣,通過IP結(jié)合進(jìn)度條的交互設(shè)計讓原本單一的形態(tài)變得趣味橫生。當(dāng)然,進(jìn)度條的樣式不止一種,還有很多彩蛋視頻也有不同的樣式,快去找一找吧。(對了,最近在使用【優(yōu)酷】時也發(fā)現(xiàn)進(jìn)度條的微設(shè)計,感興趣的朋友不妨看看。)


5.【一鍵三連】視頻頁 - 長按點贊觸發(fā)聯(lián)動


1.使用場景
一鍵三連最早的發(fā)源地,或許你此時才知道這個功能吧。




2.設(shè)計思考
設(shè)計目標(biāo):提升在同質(zhì)化產(chǎn)品中的特殊功能點設(shè)計,強化產(chǎn)品一鍵三連功能。
設(shè)計方案:在視頻頁瀏覽時,看到超級喜歡的UP主視頻,激動到想要一鍵三連,可以長按點贊按鈕,你會看到右邊投幣和收藏顯示進(jìn)度條占比,當(dāng)一圈走完,點贊、投幣、收藏同時完成,這就是一鍵三連的激活功能。不僅如此,移動端、網(wǎng)頁端、以及接下來的「寫筆記」中都可觸發(fā)一鍵三連功能,產(chǎn)品特有的功能感知滿滿。


6.【快速聽歌】視頻切換 - 你的下一款聽歌軟件何必是一款聽歌軟件


1.使用場景
想聽周董的歌,網(wǎng)易云音樂沒有,QQ音樂又要付費聽,好難受啊~




2.設(shè)計思考
設(shè)計目標(biāo):解決用戶聽歌時視頻彈幕干預(yù),將視頻切換音樂模式,專注聽歌。
設(shè)計方案:在視頻頁,點擊「更多」選擇「聽視頻模式」,當(dāng)前視頻會切換成音樂頁面,這難道不就是音樂軟件嘛。常用的循環(huán)、上一首、下一首功能都有、收藏、評論、轉(zhuǎn)發(fā)也有,簡直不要太棒。因為B站是UGC(用戶生產(chǎn)內(nèi)容)、PGC(專業(yè)生產(chǎn)內(nèi)容)視頻平臺的獨特性,自身就不會太擔(dān)心侵權(quán)問題。難怪B站中Z世代的用戶更多,一款產(chǎn)品,滿足多場景多人群使用,怪不得能俘獲民心,有它的道理。



7.【視頻放大】雙指移動 - 放大縮小畫面


1.使用場景
當(dāng)你用B站學(xué)習(xí)時,小小的手機屏幕很難看到細(xì)節(jié),該怎么解決?




2.設(shè)計思考
設(shè)計目標(biāo):提升細(xì)節(jié)放大展效果,讓用戶看清具體信息,提高學(xué)習(xí)效率
設(shè)計方案:在視頻頁,除了上面說的雙指點擊觸發(fā)彈幕開關(guān),你可以通過雙指拉伸把視頻任意放大,當(dāng)然你也可以捏和把視頻縮小。當(dāng)改變了原始視頻尺寸,底部會有一個「還原屏幕」的按鈕,點擊即可快速矯正視頻。還不快快用起來~


8.【學(xué)英語】老友記 - 學(xué)習(xí)注釋


1.使用場景
是不是還在邊看英文電影邊學(xué)英語,這樣雖然是個辦法,但遇到不懂得單詞或是語法你還要在第三方翻譯軟件中翻譯,效率性大打折扣。




2.設(shè)計思考
設(shè)計目標(biāo):提高音樂學(xué)習(xí)效率,在視頻中增加實時英文解析,幫助快速學(xué)英語。
設(shè)計方案:目前已知在「老友記」中,用戶可以通過點擊左側(cè)「學(xué)音樂」進(jìn)入到英文學(xué)習(xí)分欄中,演員的每段對話,以及出現(xiàn)時間,都清晰羅列出來,你可以重復(fù)收聽某段對話,也可以針對當(dāng)前對話中不理解的單詞或語法進(jìn)行學(xué)習(xí),簡直就是學(xué)習(xí)英語者的福音。


9.【一起看】放映廳 - 學(xué)習(xí)氛圍瞬間拉滿


1.使用場景
一起刷B站、一起看視頻、一起聊天等等這樣的場景可能只在現(xiàn)實中存在。真的是這樣嗎?




2.設(shè)計思考
設(shè)計目標(biāo):解決異地分開刷B站的阻隔感,提升隨時隨地一起刷劇學(xué)習(xí)的幸福感。
設(shè)計方案:在視頻頁,點擊「一起看」進(jìn)入放映廳,你可以自己新建放映廳,也可以進(jìn)入別人的放映廳,總之可以多些朋友一起看視頻,一起交流,完美解決異地或者獨處的孤獨感~


10.【寫筆記】筆記功能 - 教學(xué)視頻的高效學(xué)習(xí)工具


1.使用場景
同樣是看視頻學(xué)習(xí),當(dāng)你身邊只有手機時,需要做筆記,還在通過備忘錄等形式在App之間來回切換記錄嗎?




2.設(shè)計思考
設(shè)計目標(biāo):解決看視頻時難以記錄重點知識的情況,提升記錄筆記效率,從而高效學(xué)習(xí)。
設(shè)計方案:在公開課等教學(xué)類視頻中,通過點擊「更多」找到「筆記功能」就能解決一邊看視頻一邊記錄的痛點了。不僅如此,還能查看其他用戶的筆記內(nèi)容并且可以一鍵三連進(jìn)行互動,具有雙向?qū)W習(xí)性,簡直不要太棒。筆記做完還可以一鍵復(fù)制,粘貼到你的知識庫中,解決內(nèi)容遷移問題。在B站學(xué)習(xí)的用戶不妨快來試試~



11.【彈幕撤回】2分鐘內(nèi)可撤回 - 避免文字誤傷


1.使用場景
B站是個彈幕網(wǎng),很多時候觀看者頭腦一熱隨意發(fā)表的彈幕言論,會給其他用戶帶來觀影不適以及平臺污染,如何解決。




2.設(shè)計思考
設(shè)計目標(biāo):為用戶增加彈幕刪除功能,從而提升彈幕評論的綠色言論,凈化彈幕內(nèi)容。
設(shè)計方案:在視頻頁發(fā)送了一個彈幕,用戶可在視頻中看到自己的彈幕,鼠標(biāo)進(jìn)入,選擇撤回,要注意只能在2分鐘內(nèi)進(jìn)行撤回,并且一天之內(nèi)只能撤回5次彈幕。目的也是為防止用戶頻繁撤回的操作。手機端可點擊彈幕列表,找到自己的彈幕,長按會出現(xiàn)撤回選項,點擊撤回即可。


12.【鬼畜秘密】網(wǎng)頁端鬼畜區(qū)長按「返回頂部」按鈕10s輸入對應(yīng)字母進(jìn)入經(jīng)典鬼畜區(qū)


1.使用場景
人們總對好奇的事物產(chǎn)生興趣,尤其是在自己不知道的前提下。




2.設(shè)計思考
設(shè)計目標(biāo):增加鬼畜區(qū)彈幕彩蛋功能,提升此類目視頻曝光。
設(shè)計方案:在鬼畜區(qū)頻道,長按10s右下角的返回頂部按鈕,會激活底部黑色輸入列表,文案寫著:“嘗試輸入字母,發(fā)現(xiàn)鬼畜秘密...”帶你進(jìn)入另一個神秘空間。


13.【鬼畜霸屏】在鬼畜搜索下長按A鍵頭會有另一個彩蛋等你


1.使用場景
文案的引導(dǎo)會激發(fā)用戶好奇產(chǎn)生嘗試。




2.設(shè)計思考
設(shè)計目標(biāo):引導(dǎo)用戶進(jìn)行隨機字母輸入,提升彩蛋互動玩法。
設(shè)計方案:在搜索框隨機輸入英文字母,會出現(xiàn)提示輸入的字母,當(dāng)你輸入完點回車,網(wǎng)頁會出現(xiàn)經(jīng)典的一句話彈幕。如果你長按AAAAAAAA...,網(wǎng)頁彈幕伴隨音效不斷出現(xiàn),很是鬼畜。當(dāng)你對某個彈幕頭像產(chǎn)生好奇,可點擊進(jìn)入視頻頁,進(jìn)行視頻瀏覽,同時可以后評論區(qū)同樣是彩蛋進(jìn)來的伙伴一起交流,很是熱鬧。


14.【小黑屋】了解規(guī)則 - 查看案情加深學(xué)習(xí)


1.使用場景
當(dāng)B站上傳視頻以及評論不加以管制和制度教育,會帶來流失用戶的風(fēng)險。




2.設(shè)計思考
設(shè)計目標(biāo):為了建立良好的視聽環(huán)境和用戶體驗,規(guī)范產(chǎn)品的內(nèi)容形式。
設(shè)計方案:在社區(qū)中心,小黑屋中,可以查看已經(jīng)被關(guān)小黑屋用戶的案情,針對案情的嚴(yán)重程度,進(jìn)行封禁時間限制,相比長篇文章的制度規(guī)范,這種實際案例,更能讓用戶了解平臺規(guī)則,防止關(guān)進(jìn)小黑屋出不來。



15.【代碼良言】小黑屋 右箭源代碼 - 金石良言


1.使用場景
程序員在小黑屋頁面,想要越獄查看代碼等行為。




2.設(shè)計思考
設(shè)計目標(biāo):告知程序員,開發(fā)者們小黑屋不僅是用來規(guī)范視頻用戶做出的行為,同樣也是針對開發(fā)者以及程序員的。
設(shè)計方案:在「小黑屋」頁面,右鍵「顯示 網(wǎng)頁源代碼」,在一行代碼中間,你會看到一句話:“一朝耍流氓,十年掛南墻;不乖的孩子統(tǒng)統(tǒng)都要打屁股;越獄是不可能越獄的,這輩子是不可能越獄的”極具搞笑的語言讓本就是嚴(yán)肅的事情變得輕松許多,同時增強小黑屋的準(zhǔn)則態(tài)度,讓B站用戶做一個遵守準(zhǔn)則的好用戶。


五、結(jié)語


設(shè)計師要有發(fā)現(xiàn)美的眼睛。美不僅是視覺,還有好的體驗流程。不要讓用戶思考,這是每個設(shè)計師所追求的。
認(rèn)真記錄產(chǎn)品細(xì)節(jié),了解背后的思考,也是不斷提升自己邏輯思維和表達(dá)能力的一種方式。
本期產(chǎn)品細(xì)節(jié)分析結(jié)束,點擊原文鏈接查看更多,那我們下期再見!

作者:碳水Sir;公眾號:草蓉三石
本文由 @碳水Sir 原創(chuàng)發(fā)布。未經(jīng)許可,禁止轉(zhuǎn)載。


參考文獻(xiàn):
B站2022第一季度財報:https://mp.weixin.qq.com/s/ctzbvBqPxtbQxCV2_XAGDQ
MikuFans彈幕視頻網(wǎng) :https://www.bilibili.com/read/cv14244675/
Advertising:https://mp.weixin.qq.com/s/831jX19aq8cfI_WU7RQubw
時趣研究院:https://mp.weixin.qq.com/s/BUZoVle8ByLQjAFrCMm4ag


作者:碳水sir
鏈接:https://www.zcool.com.cn/article/ZMTQxODk1Mg==.html
來源:站酷

前言


眾所周知,B站是一個二次元、鬼畜、學(xué)習(xí)、娛樂等等于一身的綜合視頻社區(qū)。近82%的用戶是Z世代用戶(90-09年出生的人群),他們也是生長在互聯(lián)網(wǎng)下的一代人。用戶規(guī)模與活躍度都持續(xù)高位,除了其產(chǎn)品側(cè)的發(fā)力,設(shè)計中的體驗感知也功不可沒,本次分享bilibili中用戶最常能感知到的產(chǎn)品設(shè)計細(xì)節(jié),幫助你豐富B站玩法的同時,學(xué)習(xí)產(chǎn)品中的過人之處,以便了解設(shè)計發(fā)力點。

越往下看你越驚嘆,總有一個你不知道的彩蛋設(shè)計細(xì)節(jié)。






1.【防偷窺】登錄頁 - 2233娘遮眼


1.使用場景
再熟悉不過的頁面了吧。登錄頁面是除首頁外,每個用戶大概率要進(jìn)入的頁面。如何給予用戶安全感知,同時增強產(chǎn)品記憶點。




2.設(shè)計思考
設(shè)計目標(biāo):提升用戶登錄B站時的安全感知。
設(shè)計方案:當(dāng)用戶在輸入驗證碼或者密碼等較為敏感的信息時,2233娘會遮住眼睛,暗示隱私信息我們是不會偷看的。強化B站對安全隱私的重視度。增強用戶信任感。同時B站的品牌IP2233娘從兒時到成年產(chǎn)品中都有體現(xiàn)。用戶登錄注冊賬號時,兒時Q版的2233娘呈現(xiàn)在眼前,暗示著2233娘未來的一路陪伴,共同成長的愿景。這是第二層含義。


2.【選封面】開屏頁 - 自選模式


1.使用場景
作為一個二次元發(fā)展起來的視頻社區(qū),用戶對于產(chǎn)品品牌具有親切感。但B站發(fā)展至今二次元內(nèi)容逐漸被多元生態(tài)所代替,類目占比逐漸變小,老用戶的情感記憶那里體現(xiàn)。




2.設(shè)計思考
設(shè)計目標(biāo):提升品牌IP傳播,讓用戶享受更加豐富的開屏頁,從而滿足用戶情緒。
設(shè)計方案:在「設(shè)置」-「開屏畫面設(shè)置」中,你可以隨機展示或者自定義選擇畫面,總共為用戶提供20張圖片,每一個都是2233娘和B站重要日子的組合插畫,其中不乏幾張經(jīng)典頁面。當(dāng)用戶選擇特定畫面時,不僅能強化IP記憶點,同時也體現(xiàn)出產(chǎn)品對用戶的重視程度。


3.【彈幕清屏】視頻頁 - 雙指點擊快速隱藏


1.使用場景
B站彈幕是出了名的有趣,當(dāng)彈幕狂熱者看一個熱門爆款視頻,很可能彈幕全程霸屏,氣雖然氛感十足,但也會存在遮擋用戶查看所關(guān)注的內(nèi)容,從而錯過精彩瞬間。如何解決?




2.設(shè)計思考
設(shè)計目標(biāo):優(yōu)化彈幕開關(guān)的便捷操作,給予用戶優(yōu)質(zhì)的交互體驗。
設(shè)計方案:在視頻播放頁面,常規(guī)開關(guān)彈幕的方式是點擊左下角彈幕按鈕。想要在便捷一些,你可以雙指點擊屏幕,觸發(fā)開關(guān)彈幕功能,相比常規(guī)「先點擊屏幕」「再關(guān)閉彈幕」兩步操作,雙指點擊屏幕更加高效,雖然多指操作學(xué)習(xí)成本高,但這種隱藏交互會大大提升觀感體驗。如今的產(chǎn)品功能不斷堆疊,有時候常用的功能要進(jìn)入3個層級才能使用,何不換種思路,運用多指交互來提升用戶操作體驗,未嘗不是一種好的體驗升級。


4.【進(jìn)度條】視頻頁 - 眼睛跟隨方向


1.使用場景
一個產(chǎn)品除了空狀態(tài)、界面元素外,如何在視頻頁中給予用戶品牌感知,增加趣味體驗。




2.設(shè)計思考
設(shè)計目標(biāo):提升視頻頁進(jìn)度條的趣味性,從而強化B站品牌透傳。
設(shè)計方案:在視頻頁中,當(dāng)你對視頻進(jìn)度進(jìn)行左右拖拽時,進(jìn)度條的指示圖標(biāo)「小電視」的眼睛會左右移動,當(dāng)你向左滑動眼睛跟隨左邊,向右滑動小眼睛跟隨右邊,很是有趣,通過IP結(jié)合進(jìn)度條的交互設(shè)計讓原本單一的形態(tài)變得趣味橫生。當(dāng)然,進(jìn)度條的樣式不止一種,還有很多彩蛋視頻也有不同的樣式,快去找一找吧。(對了,最近在使用【優(yōu)酷】時也發(fā)現(xiàn)進(jìn)度條的微設(shè)計,感興趣的朋友不妨看看。)


5.【一鍵三連】視頻頁 - 長按點贊觸發(fā)聯(lián)動


1.使用場景
一鍵三連最早的發(fā)源地,或許你此時才知道這個功能吧。




2.設(shè)計思考
設(shè)計目標(biāo):提升在同質(zhì)化產(chǎn)品中的特殊功能點設(shè)計,強化產(chǎn)品一鍵三連功能。
設(shè)計方案:在視頻頁瀏覽時,看到超級喜歡的UP主視頻,激動到想要一鍵三連,可以長按點贊按鈕,你會看到右邊投幣和收藏顯示進(jìn)度條占比,當(dāng)一圈走完,點贊、投幣、收藏同時完成,這就是一鍵三連的激活功能。不僅如此,移動端、網(wǎng)頁端、以及接下來的「寫筆記」中都可觸發(fā)一鍵三連功能,產(chǎn)品特有的功能感知滿滿。


6.【快速聽歌】視頻切換 - 你的下一款聽歌軟件何必是一款聽歌軟件


1.使用場景
想聽周董的歌,網(wǎng)易云音樂沒有,QQ音樂又要付費聽,好難受啊~




2.設(shè)計思考
設(shè)計目標(biāo):解決用戶聽歌時視頻彈幕干預(yù),將視頻切換音樂模式,專注聽歌。
設(shè)計方案:在視頻頁,點擊「更多」選擇「聽視頻模式」,當(dāng)前視頻會切換成音樂頁面,這難道不就是音樂軟件嘛。常用的循環(huán)、上一首、下一首功能都有、收藏、評論、轉(zhuǎn)發(fā)也有,簡直不要太棒。因為B站是UGC(用戶生產(chǎn)內(nèi)容)、PGC(專業(yè)生產(chǎn)內(nèi)容)視頻平臺的獨特性,自身就不會太擔(dān)心侵權(quán)問題。難怪B站中Z世代的用戶更多,一款產(chǎn)品,滿足多場景多人群使用,怪不得能俘獲民心,有它的道理。



7.【視頻放大】雙指移動 - 放大縮小畫面


1.使用場景
當(dāng)你用B站學(xué)習(xí)時,小小的手機屏幕很難看到細(xì)節(jié),該怎么解決?




2.設(shè)計思考
設(shè)計目標(biāo):提升細(xì)節(jié)放大展效果,讓用戶看清具體信息,提高學(xué)習(xí)效率
設(shè)計方案:在視頻頁,除了上面說的雙指點擊觸發(fā)彈幕開關(guān),你可以通過雙指拉伸把視頻任意放大,當(dāng)然你也可以捏和把視頻縮小。當(dāng)改變了原始視頻尺寸,底部會有一個「還原屏幕」的按鈕,點擊即可快速矯正視頻。還不快快用起來~


8.【學(xué)英語】老友記 - 學(xué)習(xí)注釋


1.使用場景
是不是還在邊看英文電影邊學(xué)英語,這樣雖然是個辦法,但遇到不懂得單詞或是語法你還要在第三方翻譯軟件中翻譯,效率性大打折扣。




2.設(shè)計思考
設(shè)計目標(biāo):提高音樂學(xué)習(xí)效率,在視頻中增加實時英文解析,幫助快速學(xué)英語。
設(shè)計方案:目前已知在「老友記」中,用戶可以通過點擊左側(cè)「學(xué)音樂」進(jìn)入到英文學(xué)習(xí)分欄中,演員的每段對話,以及出現(xiàn)時間,都清晰羅列出來,你可以重復(fù)收聽某段對話,也可以針對當(dāng)前對話中不理解的單詞或語法進(jìn)行學(xué)習(xí),簡直就是學(xué)習(xí)英語者的福音。


9.【一起看】放映廳 - 學(xué)習(xí)氛圍瞬間拉滿


1.使用場景
一起刷B站、一起看視頻、一起聊天等等這樣的場景可能只在現(xiàn)實中存在。真的是這樣嗎?




2.設(shè)計思考
設(shè)計目標(biāo):解決異地分開刷B站的阻隔感,提升隨時隨地一起刷劇學(xué)習(xí)的幸福感。
設(shè)計方案:在視頻頁,點擊「一起看」進(jìn)入放映廳,你可以自己新建放映廳,也可以進(jìn)入別人的放映廳,總之可以多些朋友一起看視頻,一起交流,完美解決異地或者獨處的孤獨感~


10.【寫筆記】筆記功能 - 教學(xué)視頻的高效學(xué)習(xí)工具


1.使用場景
同樣是看視頻學(xué)習(xí),當(dāng)你身邊只有手機時,需要做筆記,還在通過備忘錄等形式在App之間來回切換記錄嗎?




2.設(shè)計思考
設(shè)計目標(biāo):解決看視頻時難以記錄重點知識的情況,提升記錄筆記效率,從而高效學(xué)習(xí)。
設(shè)計方案:在公開課等教學(xué)類視頻中,通過點擊「更多」找到「筆記功能」就能解決一邊看視頻一邊記錄的痛點了。不僅如此,還能查看其他用戶的筆記內(nèi)容并且可以一鍵三連進(jìn)行互動,具有雙向?qū)W習(xí)性,簡直不要太棒。筆記做完還可以一鍵復(fù)制,粘貼到你的知識庫中,解決內(nèi)容遷移問題。在B站學(xué)習(xí)的用戶不妨快來試試~



11.【彈幕撤回】2分鐘內(nèi)可撤回 - 避免文字誤傷


1.使用場景
B站是個彈幕網(wǎng),很多時候觀看者頭腦一熱隨意發(fā)表的彈幕言論,會給其他用戶帶來觀影不適以及平臺污染,如何解決。




2.設(shè)計思考
設(shè)計目標(biāo):為用戶增加彈幕刪除功能,從而提升彈幕評論的綠色言論,凈化彈幕內(nèi)容。
設(shè)計方案:在視頻頁發(fā)送了一個彈幕,用戶可在視頻中看到自己的彈幕,鼠標(biāo)進(jìn)入,選擇撤回,要注意只能在2分鐘內(nèi)進(jìn)行撤回,并且一天之內(nèi)只能撤回5次彈幕。目的也是為防止用戶頻繁撤回的操作。手機端可點擊彈幕列表,找到自己的彈幕,長按會出現(xiàn)撤回選項,點擊撤回即可。


12.【鬼畜秘密】網(wǎng)頁端鬼畜區(qū)長按「返回頂部」按鈕10s輸入對應(yīng)字母進(jìn)入經(jīng)典鬼畜區(qū)


1.使用場景
人們總對好奇的事物產(chǎn)生興趣,尤其是在自己不知道的前提下。




2.設(shè)計思考
設(shè)計目標(biāo):增加鬼畜區(qū)彈幕彩蛋功能,提升此類目視頻曝光。
設(shè)計方案:在鬼畜區(qū)頻道,長按10s右下角的返回頂部按鈕,會激活底部黑色輸入列表,文案寫著:“嘗試輸入字母,發(fā)現(xiàn)鬼畜秘密...”帶你進(jìn)入另一個神秘空間。


13.【鬼畜霸屏】在鬼畜搜索下長按A鍵頭會有另一個彩蛋等你


1.使用場景
文案的引導(dǎo)會激發(fā)用戶好奇產(chǎn)生嘗試。




2.設(shè)計思考
設(shè)計目標(biāo):引導(dǎo)用戶進(jìn)行隨機字母輸入,提升彩蛋互動玩法。
設(shè)計方案:在搜索框隨機輸入英文字母,會出現(xiàn)提示輸入的字母,當(dāng)你輸入完點回車,網(wǎng)頁會出現(xiàn)經(jīng)典的一句話彈幕。如果你長按AAAAAAAA...,網(wǎng)頁彈幕伴隨音效不斷出現(xiàn),很是鬼畜。當(dāng)你對某個彈幕頭像產(chǎn)生好奇,可點擊進(jìn)入視頻頁,進(jìn)行視頻瀏覽,同時可以后評論區(qū)同樣是彩蛋進(jìn)來的伙伴一起交流,很是熱鬧。


14.【小黑屋】了解規(guī)則 - 查看案情加深學(xué)習(xí)


1.使用場景
當(dāng)B站上傳視頻以及評論不加以管制和制度教育,會帶來流失用戶的風(fēng)險。




2.設(shè)計思考
設(shè)計目標(biāo):為了建立良好的視聽環(huán)境和用戶體驗,規(guī)范產(chǎn)品的內(nèi)容形式。
設(shè)計方案:在社區(qū)中心,小黑屋中,可以查看已經(jīng)被關(guān)小黑屋用戶的案情,針對案情的嚴(yán)重程度,進(jìn)行封禁時間限制,相比長篇文章的制度規(guī)范,這種實際案例,更能讓用戶了解平臺規(guī)則,防止關(guān)進(jìn)小黑屋出不來。



15.【代碼良言】小黑屋 右箭源代碼 - 金石良言


1.使用場景
程序員在小黑屋頁面,想要越獄查看代碼等行為。




2.設(shè)計思考
設(shè)計目標(biāo):告知程序員,開發(fā)者們小黑屋不僅是用來規(guī)范視頻用戶做出的行為,同樣也是針對開發(fā)者以及程序員的。
設(shè)計方案:在「小黑屋」頁面,右鍵「顯示 網(wǎng)頁源代碼」,在一行代碼中間,你會看到一句話:“一朝耍流氓,十年掛南墻;不乖的孩子統(tǒng)統(tǒng)都要打屁股;越獄是不可能越獄的,這輩子是不可能越獄的”極具搞笑的語言讓本就是嚴(yán)肅的事情變得輕松許多,同時增強小黑屋的準(zhǔn)則態(tài)度,讓B站用戶做一個遵守準(zhǔn)則的好用戶。


五、結(jié)語


設(shè)計師要有發(fā)現(xiàn)美的眼睛。美不僅是視覺,還有好的體驗流程。不要讓用戶思考,這是每個設(shè)計師所追求的。
認(rèn)真記錄產(chǎn)品細(xì)節(jié),了解背后的思考,也是不斷提升自己邏輯思維和表達(dá)能力的一種方式。
本期產(chǎn)品細(xì)節(jié)分析結(jié)束,點擊原文鏈接查看更多,那我們下期再見!

作者:碳水Sir;公眾號:草蓉三石
本文由 @碳水Sir 原創(chuàng)發(fā)布。未經(jīng)許可,禁止轉(zhuǎn)載。


參考文獻(xiàn):
B站2022第一季度財報:https://mp.weixin.qq.com/s/ctzbvBqPxtbQxCV2_XAGDQ
MikuFans彈幕視頻網(wǎng) :https://www.bilibili.com/read/cv14244675/
Advertising:https://mp.weixin.qq.com/s/831jX19aq8cfI_WU7RQubw
時趣研究院:https://mp.weixin.qq.com/s/BUZoVle8ByLQjAFrCMm4ag


作者:碳水sir
鏈接:https://www.zcool.com.cn/article/ZMTQxODk1Mg==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。                           
                       

網(wǎng)易云音樂|情感驅(qū)動設(shè)計的制勝法寶之產(chǎn)品亮點

資深UI設(shè)計者

一款口碑兩極分化的軟件。雖然它不是歌曲最多的聽歌軟件, 但絕對是聽歌軟件里情感體驗最好的。

事先聲明 /attention 。
1. 強烈建議使用電腦查看,用戶體驗更佳。
2. Gif 體積較大,請耐心查看。
3.為了讓設(shè)計細(xì)節(jié)更容易被看到,用GIf來呈現(xiàn)展示。

前言

碳水Sir|5年村齡|聽過上萬首歌|發(fā)布過幾首翻唱歌曲|黑膠·伍級|LV.9,眾多身份都不能表達(dá)我對網(wǎng)易云的喜歡程度。因為它不僅是一款音樂播放器,更像是一個有血有肉、有情感的虛擬人一直陪伴在我身邊,治愈著我~ 你很好奇它具有什么力量,能使用戶粘性如此持久,那么我不妨帶大家看看網(wǎng)易云音樂中情感化驅(qū)動的魅力所在。


一首【成都翻唱】送給在座的看官,請不要嫌棄~






1.【送信貓頭鷹】飛鷹傳信 - 在第43秒送你入學(xué)通知書


1.使用場景


在聽歌頁面,呈現(xiàn)貓頭鷹送信環(huán)節(jié),帶領(lǐng)粉絲回憶那個魔法學(xué)院,重溫經(jīng)典音樂。




2.設(shè)計思考


設(shè)計目標(biāo):通過增加彩蛋,紀(jì)念《哈利波特40周歲暨電影重映》,提升歌曲二次曝光度。
設(shè)計方案:首頁搜索哈利波特 第二首 【海德薇變奏曲】,當(dāng)音樂播放到 第43s時,黑膠唱片中會突然飛出一只叼著通知書的貓頭鷹,重現(xiàn)海德薇送入學(xué)通知書的經(jīng)典橋段。貓頭鷹飛過,你會看到評論區(qū)圖標(biāo)變成了一封信。用極具創(chuàng)意的動畫手法,引導(dǎo)用戶進(jìn)入評論區(qū)進(jìn)行后續(xù)操作。
這也給做產(chǎn)品設(shè)計同學(xué)一些靈感,當(dāng)有合作方時,嘗試著換種設(shè)計思路(例如:當(dāng)前影視與音樂結(jié)合的彩蛋),來綁定產(chǎn)品與合作方之間的聯(lián)系。形成高級記憶點,從而達(dá)到用戶主動傳播的裂變效應(yīng)。

2.【穿越9?站臺】雙擊評論 - 進(jìn)入魔法車站


1.使用場景


在上一個場景中,點擊信件進(jìn)入評論區(qū),通過評論區(qū)用戶引導(dǎo)繼續(xù)彩蛋探險之旅。




2.設(shè)計思考


設(shè)計目標(biāo):為了使上個彩蛋具有連續(xù)性,提升彩蛋引入玩法達(dá)到評論話題熱度。
設(shè)計方案:點擊通知書- 在評論區(qū)找到第9-10評論,在中間空隙位置雙擊兩下,出現(xiàn)一個縫隙隨后逐漸放大,映入眼簾的是魔法站臺,隨后飛速而來一輛通往霍格沃茨的列車,當(dāng)門打開時,又一個強光出現(xiàn),隨后穿梭回評論區(qū)。整體動畫一氣呵成,仿佛真的穿梭了一回。
當(dāng)用戶不知情下進(jìn)入評論區(qū),會看到其他用戶都在以“彩蛋”為話題,展開激烈討論,這時就激發(fā)出你的評論欲望,以及彩蛋入口探索,為彩蛋話題持續(xù)供熱發(fā)光。
該手法也是利用“圈內(nèi)?!睒?biāo)志事物,再結(jié)合穿梭般的動畫體驗,給【哈迷圈】用戶體驗了一波驚喜感,同時為后續(xù)【哈利波特魔法覺醒】游戲做好引流鋪墊。

3.【旗幟儀式感】分院帽之歌 - 評論區(qū)的特殊儀式感彩蛋


1.使用場景


正式入學(xué)前,怎么能少了入學(xué)典禮這么重要的儀式。




2.設(shè)計思考


設(shè)計目標(biāo):提升歌曲傳播性以及記憶度,通過彩蛋強化音樂儀式感。
設(shè)計方案:點擊【分院帽之歌】評論區(qū) 輸入學(xué)院名稱如格蘭芬多,,院旗降落,迎風(fēng)飄揚,出現(xiàn)代表學(xué)院的旗幟,分院儀式就完成啦!儀式感是不是瞬間拉滿。
沒看過哈利波特的用戶,我這里為大家收集好了四個學(xué)院名稱,分別是赫奇帕奇,格蘭芬多,斯萊特林,拉文克勞,想體驗的用戶快去試試吧~







4.【丁磊粉絲】99999以不變勝萬變


1.使用場景


用戶進(jìn)入CEO丁磊的主頁可以看到99999粉絲,在強迫癥驅(qū)使下為丁磊增加粉絲。




2.設(shè)計思考


設(shè)計目標(biāo):通過99999粉絲,來“騙取”新粉絲關(guān)注,提升粉絲量。
設(shè)計方案:可能是程序員們被產(chǎn)品或CEO的各種需求堆壓的透不過氣,想著拿CEO來整活一下,這就有了上面的神奇一幕。進(jìn)入首頁,搜索【網(wǎng)易CEO丁磊】進(jìn)入主頁,第一次和CEO這么近距離接觸,當(dāng)你看到99999粉絲時,心想我原來就是那幸運的第10萬粉絲,心中很是激動,當(dāng)你點擊關(guān)注后,返回首頁再一次進(jìn)去時,你會發(fā)現(xiàn),粉絲數(shù)從新回到了99999粉絲,你以為是有人取消關(guān)注!其實這是程序員寫的一個欺騙代碼。利用這種仿制數(shù)字,來為CEO騙粉。這是程序員想到的點還是CEO丁磊的陰謀。就不得而知了~
這么細(xì)小的改動,確實讓用戶對網(wǎng)易云音樂產(chǎn)生神秘感,或許還有很多彩蛋沒有發(fā)現(xiàn),從而激發(fā)用戶探索欲望~
感興趣的同學(xué)快去試試吧~


5.【無渴不爽】汽水特效 - 夏天的感覺就是如此清爽


1.使用場景


網(wǎng)易云音樂與雪碧達(dá)成的深度合作,要通過(音樂+設(shè)計)手段探索跨界營銷方式。




2.設(shè)計思考


設(shè)計目標(biāo):傳播品牌主張, 通過彩蛋提升品牌新主張“透心涼、渴釋放”。
設(shè)計方案:在播放【無渴不爽】時,在特定位置會激活雪碧動效,你能看到右上方一個雪碧瓶開啟,并傾倒而出,上深到一半高度清爽檸檬炸開效果,不仔細(xì)看還以為換手機進(jìn)水了。
通過對設(shè)計的高度還原,模擬真實世界汽水反饋,例如二氧化碳?xì)怏w等極具細(xì)節(jié)的動畫效果,以及開瓶時“呲”的音效聲讓用戶更好投身于音樂背后的情境中,以及緊扣歌名【無渴不爽】的“透心涼、渴釋放”理念。用“音樂彩蛋”來賦予用戶“視覺+聽覺+味覺”三覺的沉浸式體驗,讓品牌主張成為用戶切身感受。
這種營銷方式,作為用戶的我都很難拒絕,心里暗暗道:“這樣的營銷手段,多給我來一些,真的不錯,喜歡~”。換做是你,也同樣喜歡,對嘛~



6.【城南花已開】紀(jì)念云村人 - 滿屏花瓣飄落


1.使用場景


17年的一個遙遠(yuǎn)的往事,網(wǎng)易云團(tuán)隊為了紀(jì)念【音樂人-三畝地】給【城南花已開】ID用戶專門寫的音樂。




2.設(shè)計思考


設(shè)計目標(biāo):緬懷用音樂紀(jì)念的骨癌【南城花開時】用戶,放大產(chǎn)品人情世故的高度,從而提升品牌對于用戶的重視程度。
設(shè)計方案:在每年3-4月時,收聽【南城花開時】這首歌,在播放頁就能看到滿屏花瓣飄落,點擊最亮的一瓣,會看到花海中有一個少年。對于老用戶來說無疑勾起了往日回憶,通過彩蛋動畫來強化音樂緬懷的力量。同時吸引圍觀用戶的好奇,引導(dǎo)查看評論區(qū),翻找彩蛋根源,進(jìn)而提升評論區(qū)活躍度以及產(chǎn)品情感關(guān)聯(lián)。
畢竟產(chǎn)品本身是冰冷的,用產(chǎn)品本身的功能來安撫用戶以達(dá)到共鳴效果那就太棒了。這也正是網(wǎng)易云音樂依靠評論區(qū)獲得業(yè)界影響力的重要體現(xiàn)。即使版權(quán)少的可憐但依然穩(wěn)居前3寶座的原因之一。


7.【Light The Light】燈光彩蛋 - 完美結(jié)合硬件生態(tài)


1.使用場景


面對疫情,網(wǎng)易推出【光援行動】通過【Light The Light】歌曲【LTL】功能,給用戶傳遞音樂的治愈力量。




2.設(shè)計思考


設(shè)計目標(biāo):結(jié)合硬件生態(tài),提高閃光燈與音樂的多重組合玩法,用音樂與光傳遞希望給到用戶。
設(shè)計方案:網(wǎng)易團(tuán)隊通過歌曲《Light The Light》歌詞”每個人都是一處微光,每當(dāng)我們閃爍一次燈光,也許某處黑暗就會被我們照亮”中獲得靈感,配合歌曲中的鼓點來不斷閃爍節(jié)奏光,營造氛圍感的同時,傳遞出即使是一顆小小的微光,凝聚起來依然可以照亮一片天地。
同時表示面對防疫,人民團(tuán)結(jié)一致,互相幫助的社會凝聚力。宣揚音樂的力量以及對未來美好生活的祝福。


8.【抱抱安慰】評論區(qū) - 兩指捏合 送給陌生人一個抱抱


1.使用場景


為響應(yīng) “云村評論治愈計劃”,設(shè)計“抱抱彩蛋”,傳遞溫暖的社區(qū)氛圍。




2.設(shè)計思考


設(shè)計目標(biāo):通過彩蛋玩法,提升社區(qū)情感鼓勵,凈化社區(qū)良好氛圍。
設(shè)計方案:再任意歌曲評論區(qū),對著評論雙指向中間捏和的方式,去“抱”一個用戶的評論給予情感撫慰。視覺方面呈現(xiàn)兩個可愛的白、紅小人相互擁抱安撫的畫面,評論者的頭像也會出現(xiàn)“收到抱抱”的提示,以達(dá)到與陌生人之間互相鼓勵溫暖的目的。
這種方式挺暖的,通過音樂平臺送出抱抱以及接受抱抱的形式,更加體現(xiàn)出音樂無邊界的魅力所在。
以上是我第二次使用的感受分享。這個抱抱彩蛋設(shè)計,早在第四篇【產(chǎn)品細(xì)節(jié)洞察分析】中有寫道,但觀點已經(jīng)完全不同,感興趣的朋友可以回溯一下~


9.【銀河赴約】孔明燈 - 考生與家長的祝福


1.使用場景


每年高考時,【銀河赴約】都會收到來自音樂人以及網(wǎng)易的各種祝福,祝旗開得勝。




2.設(shè)計思考


設(shè)計目標(biāo):在高考前夕,通過孔明燈來收集用戶的祝福語錄提高評論話題統(tǒng)一性。,為用戶提供高考話題入口。
設(shè)計方案:在2020年疫情期間的高考階段,網(wǎng)易云音樂制作了助力高考自制【銀河赴約】曲目,用戶在聽歌時,能看到評論區(qū)占位符變成了孔明燈。要知道,孔明燈是中國特有的手工藝術(shù),又叫天燈,俗稱許愿燈、祈天燈。它的作用是祈福,許愿,保佑。用這種視覺效果,引導(dǎo)暗示用戶評論區(qū)特殊的意義,真誠的祝福,高考加油!帶話題輸入祝福,還能獲得“網(wǎng)易云音樂高考助力buff”。形式拉滿,意義非凡有沒有~



10.【搜索‘自殺’】云村治愈所 - 生活有你才更美好


1.使用場景


音樂是人心靈深處的對白,很多抑郁的用戶都有溝通障礙不想與人交流,唯有音樂可以獨自傾聽。




2.設(shè)計思考


設(shè)計目標(biāo):解決抑郁用戶危險的心理活動,通過治愈所提高用戶對生活的美好追求。
設(shè)計方案:在首頁搜索“自殺”等敏感詞匯,會立即跳出云村治愈所頁面,標(biāo)題寫著“生活沒有那么奇妙,但有你才會變得更好”。讓抑郁用戶感受到自我的重要性。
(2.1)開頭用生活中的美好事物來告訴用戶真實世界值得回味。
(2.2)精選了四類治愈歌單來溫暖用戶的心情。
(2.3)羅列了一線城市心理咨詢熱線,間接體現(xiàn)出在一線城市生活壓力指數(shù)。
(2.4)精彩評論,云村村民的八方支援,感受到網(wǎng)絡(luò)中溫暖純良一面。
以治愈的文字、音樂推薦、心理咨詢熱線、熱心評論來喚醒抑郁用戶,既有文字的力量也有音樂的力量,多維度努力,一起幫助云村用戶積極生活,健康快樂。
最后,當(dāng)我看到閱讀總?cè)藬?shù)863.7萬時,心情還是無比復(fù)雜,雖然很多都是聞聲前來,但大部分還是真實抑郁用戶搜索而來,衷心希望音樂的力量可以幫助他們戰(zhàn)勝困難,也感謝網(wǎng)易云音樂平臺用特殊的方式來治愈用戶。這真是很珍貴的用戶洞察點。


11.【黑膠故事】歌單 - 雙指下滑的視覺享受


1.使用場景


在聽歌時,播放頁用視頻展示歌曲背后的故事,聽覺視覺雙重享受。




2.設(shè)計思考


設(shè)計目標(biāo):滿足用戶“邊聽邊看”需求,通過視頻拉近用戶與音樂人的距離。
設(shè)計方案:在特定曲目中,對黑膠播放界面雙指下滑,激活“黑膠故事”,黑膠內(nèi)將自動播放30s的無聲視頻,再次點擊即可跳轉(zhuǎn)至完整的音樂視頻播放頁面。形成快速切換的視音交互鏈路。
這種嘗試,也是進(jìn)一步把音樂延伸,每首音樂都有屬于自己的故事,很多都是在聽音樂時才會引發(fā)共鳴,再去搜索音樂背后的故事,鏈路長、操作不便捷,網(wǎng)易推出的黑膠唱片,音樂人只需自主上傳,審核通過后,便可以最低成本,進(jìn)行歌曲宣傳,同時用戶能極大的節(jié)約時間,從而更加沉浸在音樂世界中。
想要體驗,直接搜索【黑膠故事】找到歌單就可以啦~



12.摸魚計算器


1.使用場景


計算上班摸魚聽歌的時間,看看朋友群里誰是摸魚之王。






2.設(shè)計思考


設(shè)計目標(biāo):通過熱點話題并結(jié)合數(shù)據(jù)分析,來提高H5活動玩法,達(dá)到裂變傳播。
設(shè)計方案:只需要在活動頁中輸入自己的名稱,就能分析出,摸魚總時長和具體流量。這個功能的開發(fā),起因網(wǎng)絡(luò)熱點話題吐槽包含網(wǎng)易云音樂等產(chǎn)品消耗10GB以上流量為基礎(chǔ),發(fā)掘出可結(jié)合產(chǎn)品自身做的測試嘗試,【摸魚計算器】依靠平臺數(shù)據(jù)流量分析,根據(jù)【上班聽歌時間在工作時間的占比】估算出全年的【摸魚流量】。來滿足用戶獵奇心。
雖然此活動只是休閑放松的形式,并非真的宣傳摸魚有多好。但為了說明一下,還是文字提醒:“摸魚”雖好,可不要貪摸哦,正確聽歌有助于提升工作效率!告訴用戶,正確的價值觀。


13.8級證明書


1.使用場景


在網(wǎng)易云大約需要聽上千首新歌,看很多故事,明白許多道理才是個好男孩??梢詫ν夥窒怼?




2.設(shè)計思考


設(shè)計目標(biāo):創(chuàng)造【網(wǎng)易云八級】梗,通過活動提升產(chǎn)品熱度。
設(shè)計方案:只需要在活動中,選擇性別,依靠聽歌數(shù)據(jù)分析,總結(jié)網(wǎng)易云等級段位。當(dāng)時也有女孩說,找男朋友就找網(wǎng)易云八級,因為懂得很多很沉穩(wěn)。當(dāng)然女孩子也是同理。
據(jù)了解,這個活動也是因為有網(wǎng)友曬出等級截圖,并且上了熱搜,而這一事件瞬間被網(wǎng)易云團(tuán)隊看到,迅速整活。同時間上線【8級證明書】,8級以上的用戶可獲愛好聽歌的“好男孩”“好女孩”認(rèn)證。
沒錯,看到配圖的朋友都知道了吧,我是8級哦~


14.表白翻譯機


1.使用場景


七夕節(jié),表白日,語言組織不行,說不了浪漫的情話。






2.設(shè)計思考


設(shè)計目標(biāo):結(jié)合音樂,提升表白語言的趣味呈現(xiàn),為用戶提供浪漫語言幫助。
設(shè)計方案:在搜索框輸入名字,就會隨機推薦表白歌詞,都是心動的感覺,幫助不會說情話的你。當(dāng)然我也可以輸入你的的名字,因為你的名字本身,也足以吸引我。有沒有被甜到~
除此之外,搜索特定名稱,會出來特殊的表白,一語中的。例如搜索蘇炳添,出來的是“我會用9秒83的速度出現(xiàn)在你面前”完全整活了,有木有~
不僅如此,頁面配圖,繪制了大量精美小線稿,在我嘗試了很多名稱后都沒遇到重復(fù)的圖形,可見這個小細(xì)節(jié)做了N個圖形出來,很是用心。是一個很棒的設(shè)計細(xì)節(jié)。


五、個人感受


早期受到“網(wǎng)抑云”的負(fù)面沖擊,評論區(qū)中存在太多抑郁情緒發(fā)言,導(dǎo)致很多用戶看到后都同情憐憫隨后一起陷入抑郁。

后來網(wǎng)易云音樂推出各種【治愈計劃】包括【云村治愈所】【抱抱功能】【治愈專輯】等等設(shè)計手段。

最終,越來越多的用戶用正能量回懟喪文化【網(wǎng)抑云】變成了【網(wǎng)愈云】,把人間美好給到大家。


這也是產(chǎn)品從用戶情感訴求出發(fā),反向驅(qū)動設(shè)計?;蛟S這才是網(wǎng)易云音樂取勝的重要法寶。





六、結(jié)語


設(shè)計師要有發(fā)現(xiàn)美的眼睛。美不僅是視覺,還有好的體驗流程。不要讓用戶思考,這是每個設(shè)計師所追求的。
認(rèn)真記錄產(chǎn)品細(xì)節(jié),了解背后的思考,也是不斷提升自己邏輯思維和表達(dá)能力的一種方式。
本期產(chǎn)品細(xì)節(jié)分析結(jié)束,點擊原文鏈接查看更多,我們下期再見!
作者:碳水Sir;公眾號:草蓉三石
本文由 @碳水Sir 原創(chuàng)發(fā)布。未經(jīng)許可,禁止轉(zhuǎn)載。

參考文獻(xiàn)及鏈接:


1.https://www.sohu.com/a/506317507_120099902
2.https://baijiahao.baidu.com/s?id=1667366524064453555&wfr=spider&for=pc
3.https://www.zhihu.com/question/404810159/answer/1326228938
4.https://xw.qq.com/cmsid/20210328A0A1JB00


作者:碳水sir
鏈接:https://www.zcool.com.cn/article/ZMTQyODQwOA==.html
來源:站酷

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


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


藍(lán)藍(lán)設(shè)計www.yvirxh.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è)計公司


                 

日歷

鏈接

個人資料

存檔