中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語：設(shè)計成長在于日常的學(xué)習(xí)積累，多看多想多寫是最基礎(chǔ)的一種方式，體驗產(chǎn)品的一些設(shè)計點，思考并記錄能讓自己學(xué)習(xí)理解的更深。除了可以豐富自己的設(shè)計體系之外，也能從優(yōu)秀的設(shè)計中吸收更多的東西賦能在自己的日常工作當(dāng)中。

產(chǎn)品體驗其實是一個很好的培養(yǎng)自己閱讀習(xí)慣的方法。簡單便捷易獲取，但閱讀并把自己理解的東西寫出來呈現(xiàn)給別人確是一個很艱難的過程。因為大家對于設(shè)計理解的也會千差萬別，所以內(nèi)容的表達(dá)理解若有不恰當(dāng)或站友不認(rèn)同之處，歡迎指摘和交流討論。

內(nèi)容不求有多出彩，只希望能彼此共勉，設(shè)計總結(jié)均由自己思考編寫，體驗中注明使用機(jī)型和產(chǎn)品版本、設(shè)計點類型，便于大家了解，文章篇幅過長，多達(dá)1w+字，閱讀時間會比較久，感謝你的細(xì)心閱讀，如你有建議可反饋留言！

2021產(chǎn)品體驗思考第2彈目錄：

1. 支付寶—轉(zhuǎn)賬付款中的支付方式和流程
2. 高德地圖—路線查詢中的一些設(shè)計驚喜
3. Soul—新穎的3d星球交友方式
4. QQ郵箱—它竟然能夠幫助我翻譯英文
5. 途家民宿—這樣的日期設(shè)計，有點贊啊
6. 小紅書—原來你是這樣“窺測”用戶的
7. 喜馬拉雅—信息收納能力真的很強(qiáng)
8. 豆瓣—1個小頁面這么多效果，好厲害
9. QQ音樂—這些設(shè)計小細(xì)節(jié)真的不錯
10. 知乎—淺談首頁改版和內(nèi)容按鈕切換設(shè)計

一、支付寶—轉(zhuǎn)賬付款中的支付方式和流程

1. 設(shè)計描述

（1）支付方式

支付寶的支付方式新增“銀聯(lián)卡+余額寶/余額”組合支付方式，目前僅支持兩種支付方式的組合，支付寶至支付設(shè)置中可設(shè)置扣款順序，當(dāng)轉(zhuǎn)帳時，按「付款」按鈕時，底部彈窗彈出首先會選擇默認(rèn)選取設(shè)置的第一個付款方式，且付款方式文字下方有一個Tips提醒選擇另外一種方式直接支付，當(dāng)點擊付款方式列表時，底部彈窗左滑推出更多扣款方式選擇，支付寶讀取用戶“余額寶/余額”的余額信息，進(jìn)行判斷組合，且在對應(yīng)“余額寶/余額”列表中有提示“可組合付款”的文案。

（2）支付流程

流程主要有兩個，支付方式的選取和確認(rèn)支付方式，支付方式可以選擇單一或組合方式，確認(rèn)支付方式中可以選擇面容/指紋或者輸入密碼。

2. 設(shè)計思考

（1）支付方式

單個支付方式，第一個彈窗的支付方式下的Tips可直接一鍵使用另外方式就行扣款，增加扣款方式的選擇，扣款方式選擇比較多樣性。

組合支付方式不管在c端還是b端產(chǎn)品中算是一個比較復(fù)雜的邏輯算法。支付寶中的組合目前也是針對“余額寶/余額”的兩種支付方式組合支付或是兩者其一和銀聯(lián)卡進(jìn)行組合支付。這個功能確實能夠幫助用戶在支付選擇上更加靈活和方便。當(dāng)轉(zhuǎn)賬支付大額的數(shù)目，單一的任一扣款方式里面不足以支付時，就可以選擇組合的方式來解決這個問題。

支付作為一個用戶日活上億的工具類產(chǎn)品。覆蓋的支付場景很多，在穩(wěn)定期階段的產(chǎn)品，每一個支付場景中衍生出來的問題，解決問題的背后付出的代價都將變的很大。

這個功能讓我聯(lián)想到幾年前做的B端產(chǎn)品，那時候也是在做一個混合支付的功能，用戶希望產(chǎn)品能夠提供一個多種方式組合的扣款方式，被技術(shù)人員一口否定，當(dāng)時直接坦言這個功能的開發(fā)成本高，算法復(fù)雜。其實回頭想想有些問題真的還是需要結(jié)合實際情況和資源來考量。

（2）支付流程

轉(zhuǎn)賬體驗過程中發(fā)現(xiàn)支付寶真的強(qiáng)大，首先是支付方式的選擇，可以支持組合支付或單個支付扣款，比如單個支付扣款（以使用兩張銀行卡扣款為例），當(dāng)你進(jìn)行轉(zhuǎn)賬時，如果轉(zhuǎn)賬金額過大，比如第一個綁定的銀行不足以支付時，支付確認(rèn)后會提示你。你可以重新進(jìn)行操作，此時用戶對于自己賬戶的數(shù)目金額不太了解會再次確認(rèn)支付并還是選同一張卡。

確認(rèn)支付后，系統(tǒng)已經(jīng)讀取了第一張卡的信息，會選擇再讀取第二張卡，判斷是否能夠完成支付，若第一張卡不足額，會發(fā)現(xiàn)最終完成扣款的是第二張卡。其次就是支付確認(rèn)這個流程，支付寶會根據(jù)你經(jīng)常使用的支付方式選擇讓你操作。但基本同時支持兩種支付方式。比如ios系統(tǒng)的面容支付識別，當(dāng)面部識別連續(xù)嘗試失敗后，會直接跳到密碼輸入，即使密碼輸入錯誤，也會立馬提示直接可以更改密碼。

所以在流程中不管是選擇支付方式還是確認(rèn)支付的方式，支付寶都會及時幫用戶解決問題或給明確的告訴你如何操作，讓用戶對流程中體驗很流暢。這兩個用戶行為是貫穿了整個支付流程。既能讓用戶有超越預(yù)期的感受又能保留方便地操作著實不容易。

二、高德地圖—路線查詢中的一些設(shè)計驚喜

1. 設(shè)計描述

（1）路線查詢

當(dāng)輸入目的地進(jìn)行路線查詢時，平臺會記憶你上一次離開app后選擇的交通方式，并默認(rèn)選擇上一次的交通方式，同時推送相匹配的多條路線，當(dāng)選擇某一條線后，進(jìn)入到路線明細(xì)頁面，頁面分為上中下，上方顯示地圖和路程的起始點和用戶目前位置，中間部分為路線選擇，可左右滑動切換推薦路線，下方為換乘路線具體的信息說明?？缮匣榭锤鄵Q乘信息。

（2）班次查詢

在已選擇的路線中可查看「實時公交」的班次信息，點擊之后，進(jìn)入公交班次信息展示頁面，頁面分為上下部分，上方地圖顯示公交行駛的軌跡路程和用戶起始點和目的地。下方展示公交車的具體信息包括公交班次、最近的兩班車的到達(dá)用戶位置的時間、公交的行駛路線信息。

當(dāng)下拉公交班次信息區(qū)域，在地圖中會顯示一個提示框，可以進(jìn)行點贊或者吐槽的操作，點擊“準(zhǔn)時或不準(zhǔn)時”文字之后，在頁面中間會有對應(yīng)的特效展示效果。

2. 設(shè)計思考

（1）路線查詢

在生活中，地圖導(dǎo)航的使用場景非常多，我平時對于高德使用也是很頻繁。頁面中間模塊為路線方式選擇，可以切換其他路線進(jìn)行查看。

這個功能確實最近才發(fā)現(xiàn)到，也不知道說自己什么好，可能自己的洞察沒有那么仔細(xì)或自己的產(chǎn)品使用習(xí)慣有問題，例如平時在查選路線的時候，輸入地點之后會有很多路線選擇，經(jīng)常會點一個路線進(jìn)去之后，了解具體信息后想去查看其他路線，就會返回上一級頁面再去選擇，這樣頻繁的切換操作確實讓自己多花很多時間。而且在路線查詢的時候，需要了解的信息又多又雜，頻繁返回偶爾也會讓自己對信息的記憶下降和誤判。同時路線切換時，上方地圖中也會重新刷新并有路線引導(dǎo)。

但對于這個功能，有一些個人設(shè)計想法，因為路線也會根據(jù)用戶的需求（步行少、換乘少、時間短等）來分類。所以在選擇路線模塊可以加個信息分類提示，讓用戶可以更有效率的抉擇。

（2）班次查詢

作為常用交通工具之一的公交車，很多時候用戶在換乘的時候十分關(guān)注乘坐班次的實時信息，因為這樣用戶可以更放松的的安排自己的行程。

下方有一塊區(qū)域是公交的行駛路線信息圖，可以看到有個公交車小圖標(biāo)在行進(jìn)中的位置，這種環(huán)境貼切原則設(shè)計在一定程度上緩解用戶焦慮，實際場景中每一站的距離間隔其實還是比較遠(yuǎn)的，不管是在地圖中還是路線圖中都有類似的這種設(shè)計手法，在一定程度上確實讓用戶減少距離感，會給用戶心理暗示“沒多遠(yuǎn)了，快到了”。

（3）情感化設(shè)計

當(dāng)?shù)却^程中，班次經(jīng)常會有不準(zhǔn)時的情況，不準(zhǔn)時的原因可能有很多，比如路況問題，車拋錨等。在實際等車過程中，很多人其實不會那么理智和抱著理解的心態(tài)。覺得不準(zhǔn)時，不排除會將情緒發(fā)泄在產(chǎn)品上，此時點擊不準(zhǔn)時進(jìn)行吐槽，頁面中間會彈出一只雞發(fā)出憤怒的火焰，并配上文案“不準(zhǔn)！垃圾”。

這種情感化的設(shè)計也是平臺對用戶的反饋表示認(rèn)同，能降低用戶對產(chǎn)品的不滿，所以高德地圖除了在技術(shù)上做到定位信息精準(zhǔn)之外，這些俘獲用戶情感的細(xì)節(jié)是做的也很極致。

三、Soul—新穎的3d星球交友方式

1. 設(shè)計描述

（1）Soul的星球板塊，以“星球”為模型的設(shè)計樣式呈現(xiàn)給用戶，將Soul友作為一個個點匯聚成為了動態(tài)的三維立體星球。每個點代表了一個人，均可以點擊進(jìn)入對應(yīng)的他的個人主頁，進(jìn)行關(guān)注或者聊天。無操作干預(yù)過程中，星球中的每個點都按照對應(yīng)的軌跡移動，用戶使用手勢進(jìn)行操作時，可以改變星球的轉(zhuǎn)向和軌跡。

（2）3d星球下方是用戶可以社交認(rèn)識Soul的各種方式，有靈魂匹配、群聊派對、語音、視頻、游戲（目前內(nèi)測）、戀愛鈴等交友方式。而且每個對應(yīng)的交友方式中的設(shè)計元素都增加了小動效。

（3）戀愛鈴?fù)娣ǎ菏紫乳_啟戀愛鈴模式底部會彈出提示框引導(dǎo)用戶填寫相關(guān)信息，并完成交友的目的。愛心按鈕上會有愛心迸發(fā)而出的小特效。點擊愛心打開開啟模式，下方的戀愛鈴小卡片位置直接落到靈魂匹配方式旁邊。

2. 設(shè)計思考

（1）Soul作為一款年輕化的社交產(chǎn)品。首先通過“星球”的概念把交友聊天這樣一件事緊密綁定起來。以前也有朋友和我聊過它的3d設(shè)計樣式，這款產(chǎn)品最讓他覺的有意思的設(shè)計就是這個3d星球，他覺得想法很有創(chuàng)意，很新穎。星球作為一個互動的地方，容納趣味相投的這樣一群人。

這個設(shè)計想法就已經(jīng)能吸引很多小青年了，設(shè)計樣式的差異化也讓Soul在社交領(lǐng)域獨領(lǐng)風(fēng)騷，能夠更快被年輕用戶接受。Soul的定位是年輕化，旨在建立一個年輕人可以表達(dá)自己，并分享生活和交流，尋找好友或知己的社群。但年輕人的愛好和想法有時候太過多元化。所以設(shè)計形式上需要有更有意思，能有契合年輕人想法的設(shè)計，顯然Soul成功的激活了一大批年輕用戶。

（2）交友形式的差異化和趣味性也是很多社交產(chǎn)品著重考慮的點，Soul通過增加交友方式來提高產(chǎn)品競爭力，平臺通過幫用戶匹配和自己默契的朋友，也能自己去尋找，可以通過在平臺展示自己聲音、視頻連接的方式去匹配好友、參加群聊尋找好友。目前Soul交友形式也在逐步結(jié)合游戲化的方式，交流場景的覆蓋也越來越廣泛，譬如校園吧。

（3）戀愛鈴?fù)娣ㄩ_啟時，會提示直接引導(dǎo)用戶描述自己的交友目的和自己想對別人說的話。平臺會根據(jù)用戶需求可以直接幫助用戶精準(zhǔn)匹配志趣相投的好友。當(dāng)用戶重啟app后，頁面會彈出幫你匹配到的人直接進(jìn)行交流溝通。首先這個可以幫用戶篩選人群，提高用戶尋找高質(zhì)量Soul友的效率。其次可以吸引用戶注意力并更高頻的使用產(chǎn)品，增加用戶粘性。

四、QQ郵箱—它竟然能夠幫助我翻譯英文

1. 設(shè)計描述

（1）顯示翻譯：打開郵件，若郵件內(nèi)容為全英文時，郵件詳情頁面右下角有一個“翻譯郵件”的文字按鈕，也可以直接點擊關(guān)閉按鈕關(guān)閉翻譯，點擊“翻譯郵件”，進(jìn)行內(nèi)容識別，文字按鈕變成提示文字“翻譯中”，同時按鈕框向左延展，原來最右邊的的文案變?yōu)椤革@示原文」文字按鈕，最左邊變?yōu)檫x擇翻譯語種（翻譯語種支持12種主流語言），點擊語言文字，吊起Actionbar語言選擇列表。點擊最右邊“顯示原文”文字按鈕，按鈕框收起，最右邊展示“顯示翻譯”文字按鈕。關(guān)閉按鈕消失。

郵件詳情頁面上方tab欄上右上角有兩個按鈕，對應(yīng)的是點擊可切換查看“上下篇”郵件的功能。拖動內(nèi)容下滑可以進(jìn)行郵件撰寫。

2. 設(shè)計思考

（1）“顯示翻譯”這種功能對于語言能力相對薄弱的用戶真的是太方便了。QQ郵箱發(fā)展已經(jīng)有很長一段時間了。使用人群已經(jīng)非常的廣泛。而且很多人在進(jìn)行國外業(yè)務(wù)付費(fèi)的時候，經(jīng)常會使用郵箱工具作為一個聯(lián)系方式。當(dāng)國外網(wǎng)站給你發(fā)送郵件的時候，很多信息閱覽和使用操作都要通過郵箱。

比如作為設(shè)計師的我，之前在國外網(wǎng)站想要查找下載一些樣機(jī)源文件時，當(dāng)時網(wǎng)站的樣機(jī)資源來源于不同的供應(yīng)方，最后找到那個合適的樣機(jī)之后，想去下載，但是需要提供郵箱地址，關(guān)于下載的一些重要信息就會通過郵件方式發(fā)送到你提供的郵箱。當(dāng)一頓操作完之后，登錄郵箱去操作時，如果看到滿屏的英文你是否會一臉茫然呢？。

如果沒有顯示翻譯的功能，你就要像英語考試中閱讀理解那樣，去理解每一個單詞的意思去進(jìn)行翻譯。但這個譯文的準(zhǔn)確度也是因人而異。這樣的操作確實讓用戶很花時間。在線下信息發(fā)達(dá)的互聯(lián)網(wǎng)時代，大家接觸國外業(yè)務(wù)信息的場景有很多。而我們大多數(shù)都是通過注冊郵箱。所以郵箱是一個很重要的溝通媒介，很多重要信息和通知，國外網(wǎng)站都要通過郵箱傳遞給你。

同時也QQ郵箱支持多種主流語言的翻譯，方便不用國家的人進(jìn)行工作交流和信息獲取。“翻譯”場景其實只是這個小功能的其中應(yīng)用場景，當(dāng)你使用信用卡時留下郵箱的聯(lián)系方式。你查看一份信用看還款的郵件時，右下方的按鈕會顯示「還款提醒」等文案。隨著功能的開發(fā)應(yīng)用，之后應(yīng)該也會針對不同的內(nèi)容考慮不同的提示場景。能幫助解決實際問題的功能都是值得稱贊的！

QQ郵箱是一個在覆蓋多領(lǐng)域場景的工具。除了是正常的日常工作，個人，交流傳遞信息的工具，郵箱也可以對接更多的商業(yè)業(yè)務(wù)，我之前看到一篇文章，故事是說企業(yè)高管通過郵件工具，挽救了一個公司。隨著郵箱的發(fā)展越來越成熟，給用戶帶來的影響也會越來越大。

tab上方右上角對應(yīng)的郵件切換功能幫用戶較少操作路徑，節(jié)省用戶時間。但是上下兩個按鈕的示意性容易讓用戶誤讀，第一感覺有點像「收起」和「展開」的意思。當(dāng)前郵件頁面下可以直接向下拖動內(nèi)容進(jìn)入寫郵件頁面。很多產(chǎn)品的交互操作都是比較隱蔽的。當(dāng)你發(fā)現(xiàn)并反復(fù)使用思考之后，才能知道這個體驗感是不是很好，值不值得讓你養(yǎng)成習(xí)慣去使用！

五、途家民宿—這樣的日期設(shè)計，有點贊啊

1. 設(shè)計描述

（1）日期樣式

日期顯示格式使用了日歷國內(nèi)節(jié)氣和國外節(jié)日的規(guī)則，日期選擇主要分為可選和不可選，對應(yīng)具體的節(jié)日使用節(jié)日名字而不是數(shù)字，如不可選日期，使用灰色文字樣式提示不可選（如“11月1日”顯示灰色“萬圣節(jié)”字樣），可選日期，使用黑色文字樣式提示可選（如“12月7日”顯示亮橙色“大雪”字樣），且對應(yīng)日期下方會顯示當(dāng)天價格。當(dāng)選中初始和結(jié)束日期時，初始和結(jié)束日期使用深橙色底部色塊，并分別對應(yīng)增加“入住”和“離店”字段。

結(jié)束時日期下方顯示具體“多少晚”，這個字段契合時間邏輯，設(shè)計也是充分的利用頁面空間。

（2）可用性原則

通過上方截圖觀察到“不可選日期”除了使用灰色文字樣式提示不可用之外，在頁面不可選日期字體上，有斜向135度的斜線將日期劃掉，這樣不可選提示更加強(qiáng)烈。

2. 設(shè)計思考

（1）對于日期的選擇設(shè)計樣式，市面上同類產(chǎn)品的樣式設(shè)計很相似，基本是使用不同顏色或顏色深淺來區(qū)分用是否可用是一種比較常見的設(shè)計方式，途家的日期處理更加細(xì)節(jié)，增加日歷的節(jié)氣和國外節(jié)日形式，讓用戶了解具體節(jié)日，更合理的安排和選擇，這樣的文字設(shè)計讓信息更豐富，初始日期和中間時間使用色塊顏色深淺來區(qū)分，并結(jié)束日期使用“共多少晚”文字進(jìn)行提示，頁面利用率很高。

（2）操作選擇日期時，第一次點擊默認(rèn)時選擇初始日期，第二次點擊選擇結(jié)束時間，當(dāng)?shù)诙x擇時間在初始時間前面，選擇機(jī)制刷新，默認(rèn)選擇早于的結(jié)束時間重新為初始時間。當(dāng)?shù)诙x擇時間在初始時間后面，即成功選擇時間段，底部固定的“確認(rèn)”按鈕高亮可點擊。日期選擇功能的業(yè)務(wù)邏輯很清晰。

（3）不可選日期中，通過斜向135度的斜線，將日期劃掉的方式，符合「尼爾森十大可用性原則」之環(huán)境貼切原則 ，所以這一點設(shè)計也是「途家」日期設(shè)計中的一個很贊的點。

人們經(jīng)常會畫橫線或者斜線的方式去記錄完成的一些事情，代表它已經(jīng)被完成或已經(jīng)成為過去。針對環(huán)境貼切原則的定義：利用用戶熟悉的概念讓產(chǎn)品中的信息應(yīng)該盡量貼近真實世界，讓信息更自然，邏輯上也更容易被用戶理解。途家通過斜線劃掉日期的設(shè)計樣式也是提示用戶這些時間已經(jīng)過去，不可以再被選擇。

其實在愛必迎上也有這樣相同的設(shè)計。但是對于斜線的方向有一點區(qū)分。愛彼迎中的斜線角度為180度，途家中的斜線角度為135度。但大部分用戶劃橫線的操作習(xí)慣是斜向45度。

所以根據(jù)環(huán)境貼切原則的定義，設(shè)計也應(yīng)該更趨近于真實生活中的大部分用戶行為。對于產(chǎn)品中這樣的設(shè)計能夠使結(jié)合設(shè)計一些相關(guān)原則去考慮，產(chǎn)品思考的很深，在用戶體驗方面做的也很細(xì)膩。

六、小紅書—原來你是這樣“窺測”用戶的

1. 設(shè)計描述

（1）首頁

在「發(fā)現(xiàn)」和「當(dāng)前城市」模塊的內(nèi)容列表中，長按列表中的內(nèi)容（圖片或者視頻）,會出現(xiàn)一個彈出框提示用戶選擇對該內(nèi)容不感興趣的原因和對內(nèi)容進(jìn)行反饋，在「關(guān)注」模塊時，若是圖片內(nèi)容，長按底部彈出彈窗可以直接保存到相冊，若是視頻，長按不能進(jìn)行保存。

（2）大圖詳情頁

「發(fā)現(xiàn)」和「當(dāng)前城市」模塊的列表內(nèi)容可點擊進(jìn)入大圖詳情頁，若內(nèi)容為圖片，長按大圖內(nèi)容，底部彈出Action Sheets選擇列表，選擇選項分別為“不感興趣”、“不喜歡該作者”、“不喜歡的類型”、“舉報”、“保存到本地相冊”。若內(nèi)容為視頻，點擊可進(jìn)入全屏瀏覽，長按視頻，底部彈窗的列表多一個選項為視頻倍數(shù)選擇，從0.75x-2.0x，一共5個倍數(shù)，每個倍數(shù)相差0.25x。在「關(guān)注」模塊時，若是圖片內(nèi)容，點擊圖片不能進(jìn)入大圖詳情頁。若為視頻內(nèi)容，點擊可直接全屏瀏覽，長按彈出選擇列表。

2. 設(shè)計思考

（1）小紅書是一個以UGC內(nèi)容為基礎(chǔ)的種草社交平臺，主要以圖片和視頻推送為主。UGC平臺主要根據(jù)用戶的行為數(shù)據(jù)、用戶基本特征、用戶關(guān)聯(lián)特征數(shù)據(jù)來推薦內(nèi)容。新用戶注冊使用小紅書，平臺不了解用戶的行為和喜愛偏好，在進(jìn)入內(nèi)容推薦之前都會引導(dǎo)用戶感興趣的內(nèi)容分類。用戶行為數(shù)據(jù)包括搜索、瀏覽、點贊、收藏、評論、標(biāo)簽及話題等。

用戶基本特征涵蓋用戶的一些基本信息、年齡層次等，用戶關(guān)聯(lián)特征是你所喜歡的內(nèi)容的點贊、收藏、評價等數(shù)據(jù)信息。

（2）小紅書核心的功能是內(nèi)容推薦流和搜索結(jié)果，內(nèi)容是基于用戶的一些行為和特征進(jìn)行推薦。所以小紅書能做好精準(zhǔn)內(nèi)容推送原因也是基于用戶信息。圖片和視頻這種內(nèi)容形式上去做設(shè)計也是獲取用戶行為幫助精準(zhǔn)推薦的方式。

在保持推送精準(zhǔn)的前提下，也看到了小紅書希望維持良好且文明的內(nèi)容生態(tài)，讓用戶對于內(nèi)容進(jìn)行舉報監(jiān)管等操作。小紅書對于用戶操作行為的反應(yīng)是很及時明顯的。比如當(dāng)你對某一類內(nèi)容不感興趣之后將不會再推送，當(dāng)你再次搜索內(nèi)容時，會再次定位你的偏好屬性進(jìn)行推薦。

（3）首頁或者大圖詳情頁，長按內(nèi)容彈出彈窗，設(shè)計的兩個主要目標(biāo)都是旨在獲取用戶偏好和篩選不良內(nèi)容。無論是首頁彈出的popup彈窗還是詳情大圖彈出的Action Sheets選擇列表，首先是引導(dǎo)用戶對目前推送的內(nèi)容、作者、內(nèi)容屬性做出判斷，抉擇是否是自己喜歡的，其實UGC平臺內(nèi)容數(shù)量龐大且雜亂，很多低俗的內(nèi)容比較隱晦，平臺依靠敏感內(nèi)容搜索機(jī)制不能完全的杜絕劣質(zhì)內(nèi)容，所以依靠用戶進(jìn)行內(nèi)容監(jiān)管更方便有效，成本也低。

圖片和視頻閱覽查看、保存都是最基礎(chǔ)的用戶行為。平臺很好的利用了這一特點，去聯(lián)系這些行為嘗試做一些關(guān)聯(lián)性的設(shè)計，讓用戶在擁有良好的使用體驗基礎(chǔ)上，還能了解用戶的喜愛偏好，做精準(zhǔn)化內(nèi)容推薦。

七、喜馬拉雅—信息收納能力真的很強(qiáng)

1. 設(shè)計描述

（1）喜馬拉雅的內(nèi)容詳情頁分為「內(nèi)外」兩層，內(nèi)頁主要是書籍內(nèi)容的一些主要信息，包括書籍名、分類標(biāo)簽、評分、播放量、訂閱量、書籍簡介、訂閱按鈕。外頁主要是選擇書籍的章節(jié)，查看書籍的評價、找相似、控制當(dāng)前頁面有聲播放等功能。頁面底部中間懸浮一個“有聲聽書”的按鈕。

（2）進(jìn)入詳情頁時，內(nèi)頁和外頁的信息展示屏占比大約為3:4，在外頁中，手勢操作向上輕觸滑動時，頁面滑動置頂，撐滿屏幕，tab有三個模塊功能可以進(jìn)行切換，外頁內(nèi)容區(qū)域上下滑動可展開查看信息或收起信息。

點擊內(nèi)頁區(qū)域內(nèi)容或者外頁進(jìn)行下滑操作時，外頁會收至屏幕底部，只展示tab功能的文案，同時“有聲聽書”按鈕消失。若點擊內(nèi)頁內(nèi)容，內(nèi)頁不向上滑動，可通過手勢控制外頁到頂部、3/7處（進(jìn)入詳情頁時的位置）、底部這些位置；若內(nèi)頁向上滑動時，當(dāng)內(nèi)頁內(nèi)容展示完畢，然后再向上滑動會銜接外部頁面一起向上移動，最終外部頁面置頂。

2. 設(shè)計思考

（1）作為一個6億人有聲聽書產(chǎn)品，喜馬拉雅內(nèi)容詳情頁承載了太多的信息。從內(nèi)容信息至章節(jié)選擇、評價等、再到底部懸浮的“有聲聽書”功能。在頁面空間利用上，通過3:4比例將內(nèi)外頁面的信息分開，信息的分割感很強(qiáng)，默認(rèn)進(jìn)入的時候，用戶可以去了解內(nèi)容的一些主要信息，同時在節(jié)目中可以去選擇章節(jié)、進(jìn)行有聲播放和下載等操作，查看其他用戶的評價，閱覽相似書籍內(nèi)容。所以分割設(shè)計將頁面信息最大化的被利用。讓用戶閱讀的效率變高。

（2）如果說內(nèi)外頁面比例的設(shè)置讓信息分割的很有層次。那內(nèi)外頁面的交互操作也讓兩部分內(nèi)容很好的銜接起來。當(dāng)需要看內(nèi)頁信息時，可以輕點內(nèi)頁區(qū)域，讓外頁面置底。此時內(nèi)頁可以上滑查看更多信息，當(dāng)內(nèi)頁上滑至內(nèi)容完結(jié)時銜接帶出外頁的其他內(nèi)容，上滑置頂固定，內(nèi)頁信息隱藏，展示外頁，上滑查看更多外頁內(nèi)容信息，除了內(nèi)頁銜接拖動的方式，還可以在外頁區(qū)域上滑滑動，也可以置頂固定。這種交互設(shè)計類似以前使用滑蓋手機(jī)開合的操作方式。

（3）框架層和交互層的設(shè)計確實讓頁面擁有的強(qiáng)大的信息收納能力，喜馬拉雅的內(nèi)容詳情頁，內(nèi)外兩部分是有強(qiáng)關(guān)聯(lián)的，外頁書籍章節(jié)信息也是承接了內(nèi)頁的書籍簡介，評價功能也是書籍很重要的一部分。所以，設(shè)計形式上讓用戶明白兩者的聯(lián)系，交互的操作讓用戶可以有重點和全面的的查看內(nèi)容信息，針對不同的使用場景，讓用戶的可操作性更強(qiáng)，更便捷。同時也可以幫助容納更多的產(chǎn)品業(yè)務(wù)，例如插入vip付費(fèi)功能或者運(yùn)營活動的入口圖。

八、豆瓣—1個小頁面這么多效果，好厲害

1. 設(shè)計描述

（1）頁面中間是一個影視內(nèi)容封面，有疊加效果，封面圖上方有文字提示(不感興趣，向上滑動)的互動操作和完成按鈕，下方是「想看」、「看過」、「跳過」的按鈕操作，底部是已選擇看過的影片內(nèi)容的進(jìn)度顯示，且看過的的影視數(shù)量疊加能夠提升等級稱號，每個等級稱號有對應(yīng)看過的影視數(shù)量要求。

若將影視封面圖向上滑動，上方背景色塊會根據(jù)影視封面的色系進(jìn)行更換；點擊封面下方的“跳過”按鈕，封面向上移出，封面圖更換。

若輕觸或拖動影視封面圖向下滑動，上方背景色塊底部會有彈性拉伸效果，“看過”功能的按鈕形狀變成「對勾」，表示選擇成功，按鈕周圍有彩帶爆炸效果，底部進(jìn)度條會向上彈出一個“+1”的提示圖標(biāo)信息；點擊下方“看過”按鈕，會有一樣的聯(lián)動動畫效果。點擊“想看”按鈕，影視內(nèi)容封面會自動縮小融入按鈕中消失。

2. 設(shè)計思考

（1）此頁面入口藏的比較深，是豆瓣的一個用戶可以記錄自己書影音生活的小功能，用戶通過豆瓣推送的影音資源去做選擇想看-看過-跳過，那「看過」模塊對應(yīng)的會給用戶一些等級稱號，隨著看過的內(nèi)容數(shù)量的增加獲得不同的等級稱號。產(chǎn)品根據(jù)游戲中八角行為原則中的“進(jìn)步與成就感”的驅(qū)動，等級設(shè)計讓用戶能夠不斷獲取正反饋。

等級稱號的狀態(tài)點如頁面中的進(jìn)度條，讓用戶在流程中每走一步都可以歡呼完成了一個小目標(biāo)，且能夠了解自己已完成了總體目標(biāo)的情況。豆瓣是一個為用戶篩選優(yōu)質(zhì)片源的產(chǎn)品。

所以這個記錄影音也是產(chǎn)品提升用戶粘性的一個小功能。但是對應(yīng)的等級介紹卻不是很詳細(xì)。

（2）除了上方的「完成」按鈕和底部等級信息之外，所有的按鈕操作都有交互效果，連手勢操作都可以聯(lián)動動畫效果。上下滑動封面圖，上滑不光背景顏色可以聯(lián)動封面進(jìn)行換色，下滑還可以直接有多種交互動畫效果（彩帶爆炸和字塊彈出），手勢拖動還可以讓背景圖有彈性效果。豆瓣為了如此一個頁面做了如此多的交互聯(lián)動效果，真的是太賣力了。

（3）操作體驗過程中，發(fā)現(xiàn)一個小小的問題，這個影視資源封面圖是平臺隨機(jī)推送的，當(dāng)用戶上滑或者下滑過程中，包括點擊按鈕進(jìn)行操作的時候，如果對應(yīng)的影視資源是用戶想放進(jìn)看過的分類中，但是因為誤操作，被放進(jìn)不感興趣的分類中，想重新撤回進(jìn)行選擇，但是卻沒有撤回的操作。個人在交互操作過程中，確實也有這種誤操作的場景，甚至因為無法重新撤回歸類，弄的體驗很差。所以個人也對應(yīng)這種場景想了一些設(shè)計方案：封面圖上可以設(shè)置操作「撤銷」按鈕，但可以針對撤銷次數(shù)做限制。因為只是需要針對用戶的誤操作增加容錯率。這樣設(shè)計是否可能會更加人性化一點呢？

九、QQ音樂—這些設(shè)計小細(xì)節(jié)真的不錯

1. 設(shè)計描述

QQ音樂播放頁面有三個模塊，分別為：推薦、歌曲、歌詞。默認(rèn)選中在中間的「歌曲」模塊，左滑動進(jìn)入「推薦」部分，上滑可以查看歌手的“短視頻”內(nèi)容。右滑動進(jìn)入「歌詞」部分。歌曲封面圖下方是歌曲信息，歌詞在播放中頁面僅展示一句。點擊歌詞文字進(jìn)入「歌詞」模塊。

可上下滑動可查看其他歌詞，滑動過程中，在頁面中間會顯示歌曲的時間進(jìn)度和一個小的播放按鈕，可以點擊按鈕直接跳至這一句歌詞開始播放，且當(dāng)前播放的整一行歌詞字體特別大，且歌詞顏色已唱（與背景同色系的顏色）和未唱（白色）。底部有彈幕，唱、歌詞設(shè)置、播放按鈕，若歌詞為外文，會有歌詞翻譯功能。

當(dāng)點擊某一句歌詞（點擊熱區(qū)為整一行），歌曲進(jìn)度也可以直接切到這一句開始播放。點擊彈幕文字按鈕時，歌詞在上方固定位置僅顯示一句，同時下方會有用戶的彈幕留言。再次點擊文字，彈幕關(guān)閉。歌詞設(shè)置中功能也很豐富，可以設(shè)置大小，制作海報等。

2. 設(shè)計思考

QQ音樂新的歌曲播放頁面的設(shè)計改動了很多。比如功能模塊上，一個頁面有三個常用模塊，由于最近幾年短視頻的沖擊，很多產(chǎn)品都在使用這樣的板塊設(shè)計方式，用戶使用過程中學(xué)習(xí)成本非常低。

QQ音樂內(nèi)容上也確實一直都有“短視頻”內(nèi)容。形式上更加豐富了。在歌詞板塊，歌詞的文字設(shè)計也做了很多改動，通過文字的大小來區(qū)分進(jìn)行中的歌詞。顏色來區(qū)分每一行歌詞的進(jìn)度。在使用過程中讓我感到方便設(shè)計的就是當(dāng)點擊某一句歌詞，直接跳到這一句開始播放。平時我們在找歌的過程中，經(jīng)常會去試聽歌曲的高潮部分。

以此來過濾一首歌。譬如網(wǎng)易云音樂中是通過手勢上下滑，頁面中間會有一條線來提示用戶當(dāng)前歌詞的位置，同時會有一個播放按鈕，點擊按鈕才能開始播放試聽，QQ音樂也保留這個設(shè)計，同時再增加這樣一步到位的設(shè)計操作，能夠更高效解決用戶的需求。視覺設(shè)計樣式上變化是字體排版，頁面中的文字內(nèi)容都是居左對齊展示。

這個或許是QQ音樂在視覺差異化上的一些設(shè)計嘗試吧！還有一個設(shè)計也讓我很受用，當(dāng)我們經(jīng)常聽一些英文歌曲的時候，純英文加上了翻譯對于英文學(xué)習(xí)也有很大的幫助。

QQ音樂的社交功能是真的很豐富，比如彈幕、海報分享、短視頻內(nèi)容都是屬于比較強(qiáng)互動性的。設(shè)計風(fēng)格也是很年輕化，也是符合QQ音樂的一貫的設(shè)計人群定位和風(fēng)格，設(shè)計上也是推層出新。

再看看網(wǎng)易云音樂，它定位品質(zhì)音樂，更專一的做音樂內(nèi)容，弱社交化的軟件應(yīng)用，可能是因為只想聽音樂，所以平時使用網(wǎng)易云音樂會更多。個人認(rèn)為這兩款產(chǎn)品都非常優(yōu)秀。

十、知乎—淺談首頁改版和內(nèi)容按鈕切換設(shè)計

1. 設(shè)計描述

（1）改版的知乎首頁改版主要包括「內(nèi)容」和「框架層設(shè)計」，內(nèi)容新增了短視頻?？蚣苌戏譃闃?biāo)題欄、頁面內(nèi)容、底部tab欄三部分。標(biāo)題欄：搜索功能將輸入框改為輸入按鈕，消息按鈕、三大主流板塊（推薦、視頻、熱榜）。

中間部分是知乎內(nèi)容（視頻、文章、問答）。底部tab欄模塊位置也有變動，增加「關(guān)注」功能和發(fā)布內(nèi)容的功能，會員的位置被挪到第四個位置。關(guān)注功能中，若關(guān)注的人發(fā)布了最新內(nèi)容，按鈕和文字整個變成發(fā)布內(nèi)容者的頭像，并且有紅點提示。

（2）從推薦模塊中點擊查看視頻或者文字問答內(nèi)容，視頻：按鈕置于頁面下方，進(jìn)入頁面時，按鈕中有圖標(biāo)和提示文字“下一個視頻+圖標(biāo)”，點擊一次或停頓5秒后，文字消失，留下圖標(biāo)；文字回答：和視頻內(nèi)容唯一的區(qū)別是按鈕中的提示文字為“下一個”。

2. 設(shè)計思考

（1）知乎的新版本設(shè)計改動了不少東西，首先是框架層的搭建，關(guān)注功能的優(yōu)先級更高了。其次是內(nèi)容部分，增加短視頻內(nèi)容。這個設(shè)計信號也意味著短視頻今后也將成為知乎發(fā)展的核心業(yè)務(wù)之一了。新改版的首頁將主要業(yè)務(wù)功能拿捏的緊緊有條，視頻內(nèi)容的曝光率很高，除了視頻模塊之外，推薦模塊第一個內(nèi)容也是視頻。

關(guān)注功能的重要性也被提升。關(guān)注的人是用戶精挑細(xì)選的，他們發(fā)布的內(nèi)容是用戶會經(jīng)常去看的，這個查看行為是比較高頻的。同時也是很能刺激用戶積極性的一個點。當(dāng)關(guān)注的人發(fā)布內(nèi)容后，還會有頭像和小紅點提示更能引起用戶的注意力。

（2）推薦模塊點擊問答內(nèi)容或視頻內(nèi)容，都會有引導(dǎo)提示去查看下一個視頻或是下一個回答等，這個交互設(shè)計在知乎中一直都存在的，我在使用的過程中一直在想為什么要這樣去設(shè)計。

用戶對于文字的語義理解是不是要強(qiáng)于圖標(biāo)語義的呢？比如視頻內(nèi)容，“下一個視頻+圖標(biāo)”的文字加圖標(biāo)表達(dá)，用戶一看就能理解，就是可以點擊去查看。而“向下的圖標(biāo)”會讓用戶思考的時間拉長，甚至用戶僅僅是基于產(chǎn)品操作使用習(xí)慣下意識的去點擊，這種表達(dá)有時候會很模糊。不過文字按鈕會占用的區(qū)域很大，所以設(shè)計中也不是固定使用文字。

用戶點擊按鈕或停留5秒后，按鈕會有改變，就是「文字和圖標(biāo)」轉(zhuǎn)為只有「圖標(biāo)」按鈕展示。這樣的引導(dǎo)設(shè)計可能是產(chǎn)品希望加深用戶對于點擊提示的記憶。對于問答模塊，個人認(rèn)為之前的文案“下一個回答”比“下一個”表述會更全。

十一、總結(jié)

產(chǎn)品體驗思考用于自己的日常積累學(xué)習(xí)，助力自己養(yǎng)成勤于寫作和思考的習(xí)慣。提升自己的撰寫和表達(dá)能力！

案例內(nèi)容的表達(dá)和理解有不恰當(dāng)或站友不認(rèn)同之處，歡迎指摘和交流討論。

本期分享到此結(jié)束。持續(xù)學(xué)習(xí) 助力成長！

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

題圖來自 Unsplash，基于CC0協(xié)議。