導(dǎo)語(yǔ)：平時(shí)生活中，我們會(huì)使用各種各樣的APP，不論是打個(gè)車(chē)、買(mǎi)個(gè)菜還是看個(gè)電影都可以用互聯(lián)網(wǎng)產(chǎn)品完成。在使用這些APP產(chǎn)品的時(shí)候，我們會(huì)感受到這個(gè)好，那個(gè)不好，但是要問(wèn)到底為啥這個(gè)好那個(gè)不好，就說(shuō)不上來(lái)了。下面為大家淺析一下這些好到底好在哪里？

一、愛(ài)奇藝綠鏡功能

愛(ài)奇藝進(jìn)度條上的綠色波浪線(xiàn)，盲猜這個(gè)是音量的起伏，相當(dāng)于在視頻中展示音頻，但是又不明白加音頻有什么作用，又盲猜音量高的地方是精彩片段？更激烈？給想要跳著觀(guān)看的讀者提供一個(gè)參考？但是音量的高低與劇情的精彩之間并非正相關(guān)，所以此種解釋不太合理。

然后搜索一番，得出結(jié)論：跳過(guò)的人或者高倍速觀(guān)看越多的地方曲線(xiàn)頻率就越低，觀(guān)眾集中觀(guān)看熱度高的片段曲線(xiàn)頻率就高。觀(guān)眾可以根據(jù)該曲線(xiàn)預(yù)判哪一段倍速略過(guò)，哪一段正常速度觀(guān)看，不會(huì)錯(cuò)過(guò)精彩片段。

二、叮咚買(mǎi)菜找相似功能

叮咚買(mǎi)菜APP首頁(yè)底部模塊產(chǎn)品列表，第一次到達(dá)這里，會(huì)有一個(gè)長(zhǎng)按[找相似]的圖文提示，當(dāng)用戶(hù)長(zhǎng)按該產(chǎn)品展示區(qū)域，就會(huì)出現(xiàn)“找相似”按鈕，雖說(shuō)這個(gè)組件起到一個(gè)按鈕的作用，但是造型設(shè)計(jì)為搜索框樣式，暗示用戶(hù)這就相當(dāng)于搜索該款產(chǎn)品相似的其他產(chǎn)品。

因?yàn)檫@個(gè)交互是在猜你喜歡模塊，所以預(yù)判這個(gè)主要是針對(duì)無(wú)具體購(gòu)物目標(biāo)瞎逛的用戶(hù)，本來(lái)沒(méi)打算買(mǎi)什么，翻了翻界面，看到一個(gè)商品，覺(jué)得想要，直接就長(zhǎng)按搜索了。如果沒(méi)有這個(gè)功能設(shè)計(jì)，那就需要回到頂部，在搜索框內(nèi)輸入名稱(chēng)，點(diǎn)擊搜索才可以完成。

其實(shí)這個(gè)功能幾乎是在所有的電商類(lèi)購(gòu)物平臺(tái)都有，只是有些是通過(guò)長(zhǎng)按，有些是直接展示出來(lái)，有些不僅包括長(zhǎng)相似，還會(huì)有其他不感興趣、引起不適等屏蔽圖片的選項(xiàng)。

三、Airbnb首屏banner輪播下方圓點(diǎn)展示設(shè)計(jì)

Airbnb頂部banner輪播區(qū)的一個(gè)細(xì)節(jié)設(shè)計(jì)，共三張圖輪播，但不能循環(huán)播放。

底部的小圓點(diǎn)設(shè)計(jì)與一般的有所區(qū)別，一般都是三個(gè)小圓點(diǎn)，當(dāng)前banner的小圓點(diǎn)高亮，其余弱化，這里是將當(dāng)前播放的banner的圓點(diǎn)設(shè)計(jì)為圓角矩形，有”播放“功能，就是當(dāng)切換到當(dāng)前banner以后，圓角矩形會(huì)變成一個(gè)進(jìn)度條，從弱化的顏色逐漸變成全白的一個(gè)過(guò)程，當(dāng)圓角矩形完全變白以后這張圖片就播放結(jié)束，輪播下一張，依次繼續(xù)。

這樣設(shè)計(jì)的好處是如果我想自由切換看那一張既可以自己控制，左右滑動(dòng)實(shí)現(xiàn)，也可以預(yù)判總共有幾張，還需多長(zhǎng)時(shí)間可以到我想看的那張。

Airbnb的頂部banner輪播

四、嗶哩嗶哩進(jìn)度條設(shè)計(jì)

bilibili的進(jìn)度條采用吉祥物小電視，將品牌元素融入細(xì)節(jié)，很贊。

bilibili的進(jìn)度條采用吉祥物小電視，將品牌元素融入細(xì)節(jié)，很贊。

五、xmind新用戶(hù)首次登錄操作引導(dǎo)

首次登錄xmind，會(huì)有一個(gè)新手引導(dǎo)提示彈窗，若是選擇跳過(guò)，彈窗關(guān)閉；若是選擇引導(dǎo)繼續(xù)，那彈窗就自動(dòng)從屏幕正中央位移至右下角。然后引導(dǎo)界面的屏幕會(huì)自動(dòng)緩緩向上滑動(dòng)，然后停止在步驟1，當(dāng)用戶(hù)做了步驟一中的操作之后，引導(dǎo)界面會(huì)繼續(xù)上滑到步驟2，用戶(hù)做完步驟2，又會(huì)上滑至步驟3。

體驗(yàn)很舒服，對(duì)于新手入門(mén)來(lái)說(shuō)，照著步驟操作的成功體驗(yàn)，會(huì)增強(qiáng)對(duì)這款軟件使用的信心，從而增強(qiáng)用戶(hù)對(duì)這款軟件的喜好度。

引導(dǎo)彈窗位于界面中央

選擇繼續(xù)之后引導(dǎo)彈窗自動(dòng)轉(zhuǎn)移到右下角

按照指示步驟完成后，彈窗界面自動(dòng)上滑

同上

六、微信讀書(shū)模擬實(shí)際場(chǎng)景翻書(shū)的效果

擬物設(shè)計(jì)曾經(jīng)在互聯(lián)網(wǎng)設(shè)計(jì)中流行過(guò)一段時(shí)間，后來(lái)被扁平化的趨勢(shì)沖淡。

但是在某些場(chǎng)景中，擬物化或者寫(xiě)實(shí)的設(shè)計(jì)手法依然會(huì)比扁平更加適合，比如下方微信讀書(shū)翻頁(yè)的效果設(shè)計(jì)，當(dāng)用戶(hù)點(diǎn)擊書(shū)籍詳情界面的書(shū)籍封面，交互方式做成現(xiàn)實(shí)中的翻書(shū)效果，將紙質(zhì)媒介中的體驗(yàn)應(yīng)用到虛擬屏幕，這種移植的體驗(yàn)會(huì)讓人有熟悉的感覺(jué)，會(huì)心一笑。

點(diǎn)擊左圖中的書(shū)籍封面，就會(huì)跳轉(zhuǎn)到右側(cè)，跳轉(zhuǎn)小動(dòng)畫(huà)就是封面由小到大，翻頁(yè)

七、自如APP頂部banner輪播效果

一般banner是一整張圖，輪播的時(shí)候整體左右滑動(dòng)展示，但是自如的banner輪播有些與眾不同，是將banner分成兩部分，一部分是背景信息A，一部分是文案等重要前景信息B。背景與前景的輪播方式不一致，背景采用淡隱淡出的切換效果，前景采用左滑的切換。

這樣設(shè)計(jì)的好處一方面新穎，讓人眼前一亮；另一方面信息層次更鮮明，因?yàn)楸尘皾u變效果的“靜變”與前景左滑的“動(dòng)變”形成了鮮明的對(duì)比，再加上人容易被動(dòng)態(tài)的東西吸引，所以更加凸顯了重要的前景信息。

靈動(dòng)的banner設(shè)計(jì)

八、美團(tuán)單車(chē)用車(chē)界面展示設(shè)計(jì)

點(diǎn)擊美團(tuán)APP首頁(yè)“騎車(chē)”，首先展示的是緩慢收縮展示當(dāng)前市區(qū)可騎行區(qū)域的整體范圍，還可以一目了然的看出自己是否在可騎行區(qū)域內(nèi)，停頓1s，切換到用戶(hù)當(dāng)前地點(diǎn)區(qū)域，微觀(guān)展示周邊單車(chē)情況，再停頓1s,正式來(lái)個(gè)微小又利落的收縮，指針再微微跳起來(lái)重新定位一次。短短3s，界面變化了3、4次，靈動(dòng)、有節(jié)奏，用戶(hù)體驗(yàn)舒適。

美團(tuán)騎行

九、墨跡天氣的啟動(dòng)頁(yè)面設(shè)計(jì)

墨跡天氣使用有幾年了，能感受到墨跡設(shè)計(jì)團(tuán)隊(duì)很有設(shè)計(jì)追求。啟動(dòng)頁(yè)的設(shè)計(jì)，是將品牌logo與節(jié)氣元素融合的設(shè)計(jì)，再增加一點(diǎn)點(diǎn)微動(dòng)效，讓人賞心悅目，百看不厭。

墨跡天氣部分啟動(dòng)頁(yè)

看完這篇文章你有什么感想呢，是不是覺(jué)得原來(lái)設(shè)計(jì)這么有趣，這么好玩，對(duì)設(shè)計(jì)的認(rèn)識(shí)是不是更進(jìn)一步了呢。體驗(yàn)并分析別人優(yōu)秀的設(shè)計(jì)能給我們提供很好的借鑒，將其中的設(shè)計(jì)思路、設(shè)計(jì)方法應(yīng)用到日后的工作中，提升自己的產(chǎn)品體驗(yàn)。

通過(guò)以上的案例分析可以給我們帶來(lái)如下啟示：

1. 對(duì)特定場(chǎng)景下用戶(hù)心理的細(xì)致把握。如案例1和案例3，只有完全沉浸在體驗(yàn)過(guò)程中，以用戶(hù)視角，才能在那個(gè)場(chǎng)景下會(huì)想到那么去設(shè)計(jì)，要求我們?cè)谄綍r(shí)的設(shè)計(jì)中，要多多把玩體驗(yàn)自己的產(chǎn)品，仔細(xì)揣摩用戶(hù)心理。
2. 直接借鑒。對(duì)于通用性強(qiáng)的設(shè)計(jì)，如果在自己的產(chǎn)品中也有相應(yīng)的功能模塊，可以將優(yōu)秀的設(shè)計(jì)直接借鑒過(guò)來(lái)。如案例2、案例7和案例9，相同的手法都可以直接應(yīng)用到自己的產(chǎn)品中。
3. 關(guān)注設(shè)計(jì)中品牌元素的體現(xiàn)。在產(chǎn)品同質(zhì)化如此嚴(yán)重的當(dāng)下，品牌標(biāo)識(shí)顯得更為重要，如何能夠在設(shè)計(jì)中優(yōu)雅適宜地融入品牌元素是設(shè)計(jì)師需要考慮的一個(gè)重要課題。案例4給了我們很好的啟示。
4. 移花接木。將用戶(hù)已經(jīng)熟悉的設(shè)計(jì)應(yīng)用到新的使用場(chǎng)景中有時(shí)會(huì)產(chǎn)生意想不到的效果。如案例3中進(jìn)度條在新場(chǎng)景中的應(yīng)用、案例6中將翻書(shū)的效果映射到屏幕中、案例8中整體-微觀(guān)-再校準(zhǔn)靈動(dòng)的三步走設(shè)計(jì)，既給用戶(hù)帶來(lái)熟悉感又能給用戶(hù)一種清新的感覺(jué)，增加用戶(hù)對(duì)產(chǎn)品的印象。

廣義來(lái)講，設(shè)計(jì)涉及生活的方方面面，所有需要提前規(guī)劃思考的事情都是設(shè)計(jì)，所以每一個(gè)人也都是在設(shè)計(jì)自己的生活，希望這篇文章能為你帶來(lái)一些啟發(fā)。

作者：厚厚（微信公眾號(hào)：厚厚的語(yǔ)和文），多年互聯(lián)網(wǎng)和傳統(tǒng)企業(yè)的跨界產(chǎn)品經(jīng)理。

本文由 @厚厚 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議