超多產(chǎn)品細(xì)節(jié)剖析,看看大廠是如何做設(shè)計(jì)的!

越體驗(yàn)產(chǎn)品越感受到產(chǎn)品的設(shè)計(jì)都是對人性的一個(gè)精細(xì)化研究后的一個(gè)產(chǎn)出,它不是畫幾個(gè)圖標(biāo),做幾個(gè)動效那么簡簡單單,后面都隱藏著大量對人性的思考,每個(gè)產(chǎn)品都在努力提供自己的情緒價(jià)值,都在努力做好人文關(guān)懷,非常的走心,所以我覺得一個(gè)優(yōu)秀的設(shè)計(jì)師應(yīng)該是一個(gè)非常懂人非常能夠同理他人的人吧! 下面我們來一起欣賞這些藏在產(chǎn)品中的小精彩。

推薦閱讀

一、字體設(shè)計(jì)提升頁面的效果

在 UI 設(shè)計(jì)中運(yùn)用字體設(shè)計(jì)可以提升頁面的設(shè)計(jì)感,同時(shí)也能提升頁面信息傳達(dá)的效率。

高德地圖產(chǎn)品欄,可以看到把"高德指南"幾個(gè)字進(jìn)行了字體設(shè)計(jì),用一個(gè)代表指南的箭頭打破來進(jìn)行的字體設(shè)計(jì),提高了用戶對他的關(guān)注,強(qiáng)化了信息傳達(dá)的重點(diǎn);進(jìn)行了字體設(shè)計(jì)的文字更像一個(gè)圖形,跟其他的文字進(jìn)行了強(qiáng)區(qū)分,讓信息層級區(qū)分更加的明顯。

CCtalk 的標(biāo)題設(shè)計(jì)也對文字進(jìn)行了微微的設(shè)計(jì),通過把一個(gè)文字的某一個(gè)筆畫的顏色進(jìn)行區(qū)分設(shè)計(jì),然后旁邊再配一個(gè)圖標(biāo)的設(shè)計(jì),整個(gè)標(biāo)題的圖形化設(shè)計(jì)一下提升了很多,美感和提示性也增強(qiáng)了很多。

CSDN 在我的頁面的主菜單圖標(biāo)中,直接運(yùn)用字體設(shè)計(jì),將“贈"字圖形化表達(dá),還跟一個(gè)皇冠的圖形進(jìn)行了完美的結(jié)合,設(shè)計(jì)感滿滿,而且識別度也很高,讓人一眼就能知道這是個(gè)什么入口。

淘寶也是直接應(yīng)用了字體設(shè)計(jì),把秒殺的秒進(jìn)行了筆畫替換,一撇換成了閃電圖形;百億補(bǔ)貼的圖標(biāo)沒有直接運(yùn)用圖形,而是對補(bǔ)字進(jìn)行了字體設(shè)計(jì);還有那個(gè)超值購的"購",簡直設(shè)計(jì)不要太好,用諧音圖形“勾”代替了,非常的巧妙,整個(gè)產(chǎn)品處處都是小細(xì)節(jié)小心思,感受到各大產(chǎn)品越來越追求直接明了的表達(dá)方式,都在盡可能的減少用戶的思考成本。

超多產(chǎn)品細(xì)節(jié)剖析,看看大廠是如何做設(shè)計(jì)的!

二、用動效輪番展示很多人購買的氛圍

在日常生活中,我們?nèi)コ燥埖臅r(shí)候,往往都喜歡去人多的店面,特別是有很多人排隊(duì)的店面,因?yàn)槿硕嘁馕吨鴸|西很好,在產(chǎn)品中用動效輪番展示很多人購買的氛圍,可以增加人們購買的欲望。

淘寶在促銷首頁輪番展示很多人購買的場景,讓人覺得當(dāng)前產(chǎn)品很受歡迎,搶購的人很多,從側(cè)面也在鼓舞人們可以多多購買。

拼多多在產(chǎn)品促銷頁也是,可以看到很多人在購買,頭像不停在滾動,表示又有新的客戶在購買,右邊還有倒計(jì)時(shí),造成了局勢很緊張,促銷很快就結(jié)束的氛圍,通過這樣的產(chǎn)品思考和表現(xiàn),都極大的增強(qiáng)了人們購買的欲望。

超多產(chǎn)品細(xì)節(jié)剖析,看看大廠是如何做設(shè)計(jì)的!

三、觸發(fā)式的頁面展示方式讓頁面更加簡潔

動效真的是個(gè)好工具,他可以讓冗雜的頁面信息更加的簡潔。

聯(lián)想應(yīng)用商店在 AI 應(yīng)用欄部分運(yùn)用了一個(gè)很好的交互方式,當(dāng)應(yīng)用沒有被選擇的時(shí)候,安裝按鈕是被隱藏的,正常瀏覽的時(shí)候,應(yīng)用旁邊展示的是應(yīng)用的一個(gè)基本的簡介和安裝量的展示,只有當(dāng)用戶在觸碰到軟件區(qū)域的時(shí)候,安裝按鈕才會蹦出來,這樣極大的提高了頁面的利用率,同時(shí)也簡化了頁面的信息排布,如果像常規(guī)的一樣,應(yīng)用旁邊又展示信息又要放安裝按鈕,那么在相同的面積下一定擺放不了那么多的應(yīng)用,同時(shí)頁面也不會像現(xiàn)在這般的簡潔耐看。

還有就是這樣的展示方式會豐富頁面的一個(gè)交互方式,讓用戶覺得這個(gè)頁面是活的,互動感會很強(qiáng),體驗(yàn)感也會提升,是個(gè)很值得學(xué)習(xí)的設(shè)計(jì)方式。

超多產(chǎn)品細(xì)節(jié)剖析,看看大廠是如何做設(shè)計(jì)的!

四、游戲增加產(chǎn)品的粘性和趣味性

特殊的小游戲?qū)υ鰪?qiáng)用戶粘性,促進(jìn)拉新有幫助,通過游戲的方式,為非游戲化的場景或產(chǎn)品賦能,讓用戶在使用產(chǎn)品過程中獲得更多的樂趣,創(chuàng)造更大的產(chǎn)品價(jià)值。

淘寶、拼多多、蘇寧易購、京東等各大電商平臺都引入了游戲應(yīng)用,極大的增強(qiáng)了產(chǎn)品的趣味性和愉悅性,而且這種游戲的開發(fā)成本比較低,但是情緒價(jià)值卻比較高。

超多產(chǎn)品細(xì)節(jié)剖析,看看大廠是如何做設(shè)計(jì)的!

五、進(jìn)度條中的游戲化設(shè)計(jì)

在進(jìn)度條里面加入人物滑行的動效,提高了產(chǎn)品的趣味性,讓人眼前一亮。

淘寶在游戲的加載頁面,運(yùn)用了一個(gè)戴著獅子帽的人頭在進(jìn)度條上滑行,看著非常的有趣有料,淘寶產(chǎn)品里面真的有很多這樣的小心思小設(shè)計(jì)。

湘行一卡通的進(jìn)度條也很有意思,用一個(gè)小車子做了進(jìn)度條上的滑塊,特別符合它本身交通的一個(gè)屬性,同時(shí)它運(yùn)用的卡通車的造型,本身又帶點(diǎn)可愛的造型感覺,很有意思。

超多產(chǎn)品細(xì)節(jié)剖析,看看大廠是如何做設(shè)計(jì)的!

六、設(shè)計(jì)場景生活化能夠拉進(jìn)與人們的距離

當(dāng)在產(chǎn)品中能看到生活中見到的場景,人們一定會感覺非常的親近,距離感一下拉進(jìn)。

淘寶促銷,它想表達(dá)實(shí)惠經(jīng)濟(jì)的概念,用了一個(gè)小女孩子撒錢的動效場景,這個(gè)就是很好的設(shè)計(jì)生活化的例子,人物形象也設(shè)計(jì)的非常萌和可愛,迎合了大眾的審美需求,也很好的表達(dá)了促銷理念。

超多產(chǎn)品細(xì)節(jié)剖析,看看大廠是如何做設(shè)計(jì)的!

七、新的交互和聯(lián)動方式很好的突出了產(chǎn)品信息

不去體驗(yàn)新的產(chǎn)品,就很容易陷入固有的思維、固有的交互模式和聯(lián)動方式。

建設(shè)銀行就很好的打開了我的思緒,以前我從來沒想過曲線上的參數(shù)和上面的指標(biāo)數(shù)據(jù)可以聯(lián)動展示,而且隨著時(shí)間線的滑動,各類監(jiān)測指標(biāo)也都在發(fā)生著變化,交互感很強(qiáng);傳統(tǒng)的模式是點(diǎn)擊某個(gè)時(shí)間節(jié)點(diǎn),然后再彈出來一個(gè)彈窗,然后才能看到三個(gè)指標(biāo)點(diǎn)參數(shù),很明顯建設(shè)銀行的這個(gè)交互方式要更加的直接有效。

超多產(chǎn)品細(xì)節(jié)剖析,看看大廠是如何做設(shè)計(jì)的!

八、數(shù)字展廳的應(yīng)用增加了產(chǎn)品展示的渠道

隨著時(shí)代的發(fā)展,新技術(shù)也在層出不窮,現(xiàn)在看到很多產(chǎn)品把數(shù)字人和數(shù)字展廳都運(yùn)用到了產(chǎn)品中,產(chǎn)品得到了多維度的展示。

建設(shè)銀行在首頁的二樓設(shè)立了一個(gè) AI 元宇宙空間,點(diǎn)擊進(jìn)去看到了一個(gè)虛擬的時(shí)尚的產(chǎn)品科技展廳,視覺效果很驚艷、信息傳達(dá)很清晰,空間感也超強(qiáng)。

超多產(chǎn)品細(xì)節(jié)剖析,看看大廠是如何做設(shè)計(jì)的!

九、屏幕的亮暗變化隱藏著巨大的人文關(guān)懷

我們?nèi)粘J褂梦⑿艗叽a給電動車充電的時(shí)候,光線不亮不暗的情況下,很難調(diào)出帶有手電筒的掃碼界面,這個(gè)時(shí)候內(nèi)心是非常的焦慮。

一次偶然的機(jī)會,在不亮不暗的情況下體驗(yàn)了湘行一卡通,它真的太貼心了,正常為了護(hù)眼,屏幕亮度都會調(diào)整的不太亮但是當(dāng)進(jìn)入掃碼界面的時(shí)候,屏幕直接會自動變到最亮,省去了人們焦慮的時(shí)間,也省去了人們調(diào)節(jié)屏幕亮度的時(shí)間,不得不說這個(gè)舉動太感人了,這就是我經(jīng)常遇到的痛點(diǎn),它居然偷偷的幫我解決了。

超多產(chǎn)品細(xì)節(jié)剖析,看看大廠是如何做設(shè)計(jì)的!

十、語意跟動效的完美結(jié)合

當(dāng)一些視覺畫面跟業(yè)務(wù)內(nèi)容非常湊巧而又自然的結(jié)合到了一起的時(shí)候,會給人帶來非常驚喜的感覺。

湘行一卡通中有個(gè)江花購的產(chǎn)品,這個(gè)平臺展示的是江花村的一個(gè)農(nóng)產(chǎn)品和特色產(chǎn)品,設(shè)計(jì)師設(shè)計(jì)了一個(gè)小卡車奔馳在去江花村的路上,車上還貼著無比醒目的“江花購”,購物的引導(dǎo)非常的強(qiáng),這樣人們更加容易發(fā)現(xiàn)和駐留,可以幫助這個(gè)品牌產(chǎn)品更好的售賣。

超多產(chǎn)品細(xì)節(jié)剖析,看看大廠是如何做設(shè)計(jì)的!

產(chǎn)品體驗(yàn)總結(jié):

人類永遠(yuǎn)都面臨著種種問題,永遠(yuǎn)都需要這些問題的解決方案,如果我們設(shè)計(jì)師能夠洞悉他人立場,不斷提供溫暖人心而又符合業(yè)務(wù)場景的設(shè)計(jì),我想這樣的設(shè)計(jì)人人都會喜歡的,希望大家也多多的體驗(yàn)產(chǎn)品,多多積累好的靈感設(shè)計(jì),爭取每一稿都是一稿就過,做個(gè)快樂而不改稿的設(shè)計(jì)師。

本文觀點(diǎn)都為個(gè)人理解和總結(jié),不足之處也歡迎大家留言區(qū)多多點(diǎn)評指正,大家共同進(jìn)步!

收藏 37
點(diǎn)贊 43

復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場,未經(jīng)允許不得轉(zhuǎn)載。