編輯導(dǎo)語：產(chǎn)品體驗是一個很好的培養(yǎng)自己閱讀習(xí)慣和設(shè)計思維的方法，但閱讀并把自己理解的東西寫出來呈現(xiàn)給別人確是一個很艱難的過程。本篇文章作者為我們分享了他自己在產(chǎn)品體驗中培養(yǎng)和運用設(shè)計思維的過程，從產(chǎn)品設(shè)計到對設(shè)計的思考，作者自己思考分析了自己關(guān)于設(shè)計的理解和經(jīng)驗，一起來看。

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

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

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

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

• 01 飛書—好“特別”的首頁底部導(dǎo)航欄
• 02 釘釘—這個日歷功能設(shè)計細(xì)節(jié)滿滿
• 03 飛豬—好用的“始發(fā)-終點”站點篩選條件
• 04 掌上英雄聯(lián)盟—真的完全被你套路到了
• 05 鯊魚記賬—賬單內(nèi)容竟然可以這樣修改
• 06 滴滴出行—多方式觸達(dá)打車出行頁面
• 07 微博—不同維度的用戶評論內(nèi)容查看
• 08 極客時間—瀏覽和專注兩種學(xué)習(xí)模式
• 09 自如—Banner設(shè)計的無限可能性
• 10 招商銀行—主題的豐富程度的快趕上QQ了

01 飛書—好“特別”的首頁底部導(dǎo)航欄

1. 設(shè)計描述

（1）飛書底部tab導(dǎo)航欄框架主要是“業(yè)務(wù)功能”按鈕和“更多”按鈕組成，最多只能展示5個功能按鈕，主要功能總共有7個：消息、日歷、工作臺、云文檔、視頻會議、任務(wù)和通訊錄；點擊“更多”在底部會彈出 Actionbar（動作欄），顯示其他功能，點擊任一功能，在“更多”模塊下顯示相對應(yīng)的頁面內(nèi)，同時彈窗右上方有文字“編輯”按鈕，可以對7個主要功能就行編輯（顯示、隱藏、調(diào)整功能順序）。

（2）在功能編輯頁面中分為“底部導(dǎo)航”和“更多”模塊，在底部導(dǎo)航模塊可以點擊“減號”按鈕，對應(yīng)的功能會自動落到更多模塊中，在底更多模塊可以點擊“加號”按鈕，對應(yīng)的功能會自動添加到底部導(dǎo)航模塊中，按鈕點擊可以控制業(yè)務(wù)功能的現(xiàn)實隱藏，手勢拖動可以在兩個模塊之間調(diào)整功能的順序和隱藏展示，在操作過程中，下方的底部導(dǎo)航欄可以實時預(yù)覽調(diào)整效果。

2. 設(shè)計思考

（1）在工具類應(yīng)用中，飛書的底部tab導(dǎo)航欄的功能按鈕的設(shè)計比較特別和富有新意，正常產(chǎn)品應(yīng)用底部tab欄下方最多展示五個按鈕，在交互設(shè)計原則中有描述，“4+/-1”的數(shù)量是比較符合人的記憶習(xí)慣。飛書的底部最多也是5個功能，只是多增加了一個“更多”的模塊，讓模塊變?yōu)?個部分，用于業(yè)務(wù)功能的編輯。

編輯的內(nèi)容包括對功能展示、隱藏和順序的調(diào)整。用戶在使用產(chǎn)品的過程中可以針對自己比較高頻的應(yīng)用場景去選擇功能。靈活的功能編輯在某種程度上確實可以讓用戶選擇更加的方便。

（2）對于飛書的底部tab欄的交互設(shè)計方式類似工具類應(yīng)用的金剛區(qū)編輯方式，飛書將這種可編輯的交互設(shè)計嫁接到底部tab上。創(chuàng)新的設(shè)計固然有可取之處，但是難免也會打破很多用戶的操作使用習(xí)慣。

底部導(dǎo)航欄中的每一個模塊在產(chǎn)品中是一個個比較獨立的功能，主要功能相對于次要功能，重要性會更強?！案唷本褪亲鳛橐粋€對其他功能的編輯輔助，當(dāng)點擊更多按鈕時，彈出 Actionbar（動作欄），會有其他的一些功能，當(dāng)點擊某一功能時，這個功能的內(nèi)容還是處于更多模塊中，如點擊“消息”模塊時，消息還會是在更多的模塊中，但是這個會使內(nèi)容和標(biāo)題模塊不對應(yīng)，雖然頁面左上方也會顯示頁面標(biāo)題，但在內(nèi)容表意上，讓用戶感知不明顯。

當(dāng)用戶只選擇一個功能時，底部只有兩個模塊，會顯示的底部導(dǎo)航很空。飛書的設(shè)計可能在時考慮用戶的使用場景，讓用戶自己靈活選擇，但是否可以限定最小數(shù)量展示，讓功能更多被使用，空間合理利用。

02 釘釘—這個日歷功能設(shè)計細(xì)節(jié)滿滿

1. 設(shè)計描述

（1）釘釘日歷默認(rèn)進(jìn)入至展示一周的時間，當(dāng)查看其他時間，當(dāng)選擇“非今天”的日期，今天和選擇的日期會有明顯的樣式區(qū)分。如上右圖，16號為深藍(lán)底白色文字，農(nóng)歷時間為藍(lán)色字，今天的日期為淺藍(lán)底背景作區(qū)分。釘釘日歷中增加未來7天天氣情況查看的功能，今日至后面一周的天氣，在日期時間下方會有天氣情況的圖標(biāo)樣式。

當(dāng)左右滑動查看臨近一周的時間信息時，中間會僅顯示此一周的開始和截止日期時間的文字（如：上右圖左滑，中間顯示“12月 19日-25日”字段，停頓數(shù)秒后再顯示下一周的具體時間）。

當(dāng)手動操作下滑拉動日期，會顯示更多的時間內(nèi)容，背景底部會有當(dāng)月月份的數(shù)字顯示，此狀態(tài)下也可以左右滑動查看相鄰月的時間信息。

若選擇非今日的時間時，右下方會有一個返回按鈕，點擊可以直接回到今天。選擇的時間<今天，返回按鈕朝右，選擇時間>今天，返回按鈕朝左。同時日歷視圖還可以根據(jù)日、3日、月、列表進(jìn)行設(shè)置展示。

2. 設(shè)計思考

（1）釘釘日歷可以作為一個用戶日?；顒邮录挠涗浌δ?，日歷視圖可以根據(jù)分類有多種形式的展示，相關(guān)日期的天氣情況展示，切換中的數(shù)字時間段提示，下方的返回按鈕的設(shè)計。

（2）日歷視圖根據(jù)分類可以將頁面上下分或整個平鋪。用戶可以根據(jù)自己的時間或閱讀習(xí)慣選擇自己所需要的展示方式，用戶可以根據(jù)“日，3日”分類選擇內(nèi)容上下展示的方式，瀏覽時間和日程，同時還可以也可以使用“月”的展示方式，讓內(nèi)容平鋪整個頁面，閱覽當(dāng)月時間日程的更多信息，用戶還可以在已有的日期中直接點擊修改或者新建。用戶還可以根據(jù)“列表”形式時，讓日程會以文字列表的方式從上往下排列去瀏覽。

日歷的豐富形式可以滿足不同類型用戶的使用需求。日歷對應(yīng)的日期會展示未來一周的天氣情況，可以幫助用戶的出行安排。周時間段的切換過程中，有幾個細(xì)節(jié)，首先切換中增加時間段的顯示，用戶在工作中比較關(guān)注對應(yīng)的工作日期，日常工作安排都是以具體時間為準(zhǔn)，時間段的增加能很好幫助用戶記憶一周的開始和結(jié)束時間。

其次就是文字字段的處理如“12月 19日-25日”，將月和“日時間段”單獨分離開，將本來的一個整體時間段拆分成兩個部分，一連串的文字對于用戶記憶花費的時間更多，這樣的設(shè)計更便于用戶理解和記憶。

03 飛豬—好用的“始發(fā)-終點”站點篩選條件

1. 設(shè)計描述

（1）飛豬在使用乘坐火車的交通方式時，在選擇好“始發(fā)-終點”地點開始搜索火車票后，車次列表頁面可以展示當(dāng)日所有的列表班次信息，在標(biāo)題欄的中間會顯示始發(fā)終點站和當(dāng)天次班次數(shù)量的信息。

如上右圖，進(jìn)入頁面前我選擇出發(fā)地的時候是自動定位選擇了上海市，進(jìn)入頁面后會顯示所有的“上?！蔽淖珠_頭的車站到終點站的班次。在頁面提示信息的下面。是始發(fā)和終點車站的條件選擇。

若進(jìn)入頁面之前選擇的是（始發(fā)/城市-終點/車站），那頁面中的篩選條件中的終點車站會有選中的標(biāo)記，當(dāng)再次點擊此標(biāo)記，終點站的搜索會變成整個城市所有的站點。如進(jìn)入頁面前選擇（上海市-銅陵站），進(jìn)入車次頁面，“銅陵站”會被標(biāo)記，標(biāo)題欄上的文字變?yōu)椤吧虾Ｊ?銅陵市”，若再點擊“上海站”和“銅陵站”，選擇始發(fā)站點后，車次列表信息就會重新刷新，始發(fā)和終點會變成唯一的地點。

2. 設(shè)計思考

（1）飛豬的火車票購買流程中，在車次列表頁面中將重要且頻繁的篩選條件（“始發(fā)-終點”站點）單獨放出來。這個篩選設(shè)計也滿足了用戶針對性的場景使用需求：用戶如何去有效率選擇的合適的站點，進(jìn)行搜索。

市面上的購票應(yīng)用中，所有的車票信息展示都是按照時間去排序。時間選擇確實也是用戶購票的第一需求。相比較地點，車次時間的選擇也更方便用戶進(jìn)行合理的安排。但在平時的購買火車票的環(huán)節(jié)，我們有時候不會第一時間去鎖定車次信息，進(jìn)行購買。

用戶會去考慮自己出發(fā)和到達(dá)的位置，會去挑選距離自己最近的車站去乘車，考慮去選擇離最終目的地更近的終點站。當(dāng)沒有任何條件篩選時，也會出現(xiàn)不同始發(fā)站但相鄰近的時間點車次。這樣對于用戶選擇的干擾很強。

實際購票過程中我確實也因為這個問題，不止一次錯誤的的完成車次購買，很容易增加誤操作的幾率。車站的條件篩選不會影響時間維度的車次信息展示。車次不管在什么篩選條件下時間都是正序的排列展示方式。

這樣的篩選結(jié)束后，我們可供選擇的車次信息會更加精準(zhǔn)，不過任何設(shè)計也不可能百分百的避免發(fā)生錯誤，但是合理的設(shè)計能讓錯誤在某種程度上有效的被避免，盡可能的解決用戶操作中的問題。

站點篩選條件的位置至于車次上方，不干擾頁面車次信息，更易于操作點擊，選擇點擊站點后可實時在列表查看車次信息。飛豬購票的設(shè)計也不是最完美的，比如說他沒有往返車次的購買，車次信息展示也沒有攜程全。

04 掌上英雄聯(lián)盟—真的完全被你套路到了

1. 設(shè)計描述

（1）打開掌上英雄聯(lián)盟app，在首頁會彈出一個異性彈窗圖，彈窗圖展示一些運營活動信息，引導(dǎo)用戶去進(jìn)去相關(guān)活動頁面。彈窗內(nèi)容主要包括關(guān)閉按鈕，運營活動異性圖，頁面入口按鈕，“不再顯示”的選框，彈窗彈出時默認(rèn)勾選“不再顯示”，點擊關(guān)閉按鈕，彈窗不會再出現(xiàn)，當(dāng)不勾選“不再顯示”彈窗，點擊關(guān)閉按鈕，彈窗消失，當(dāng)點擊頁面中的內(nèi)容進(jìn)入查看后再退出，會再次彈窗運營活動過彈窗引導(dǎo)用戶點擊。直到用戶勾選“不再顯示”，點擊關(guān)閉按鈕，彈窗才會消失，不然在點擊頁面中的內(nèi)容退出后都會彈出彈窗。

PS場景：首次進(jìn)入app時，勾選“不再提示”后，點擊關(guān)閉按鈕后，彈窗短暫消失后會再次重新彈窗，進(jìn)行第二次重復(fù)操作，當(dāng)再次點擊關(guān)閉按鈕后，彈窗才消失不再出現(xiàn)。

2. 設(shè)計思考

（1）掌上英雄聯(lián)盟這個彈窗設(shè)計，在設(shè)計體驗上個人認(rèn)為挺奇怪的，甚至有點被強制和“欺騙”的味道，但是在引導(dǎo)用戶運營活動轉(zhuǎn)化率上應(yīng)該是非常有效果的。下方勾選框的作用，主要是控制彈窗的出現(xiàn)，但設(shè)計上默認(rèn)是勾選“不再提示”，用戶點擊關(guān)閉按鈕就不會再出現(xiàn)了，但它根據(jù)用戶心智和操作習(xí)慣做了些的微小調(diào)整。

我們在使用app過程中經(jīng)常會有一些操作提示彈窗，但是這種默認(rèn)勾選，如果再沒有注意到旁邊文案的時候，會讓人下意識的去認(rèn)為這個勾選了是不是對我會有什么影響，下一步都會選擇取消掉，這樣讓用戶覺得我已經(jīng)規(guī)避了什么麻煩的事情。

當(dāng)你取消的時候你就掉進(jìn)了產(chǎn)品設(shè)計的坑了，這樣彈窗會再次彈出，增加用戶點擊的幾率。正常的用戶操作習(xí)慣，如電腦中文件夾多個同名文件的替換時，彈窗中的選框都是默認(rèn)未勾選，用戶選擇再確認(rèn)，所以掌上英雄聯(lián)盟的彈窗就很“反常識”的設(shè)計。

（2）產(chǎn)品設(shè)計彈窗機制的時候，目標(biāo)是為了增加彈窗的轉(zhuǎn)化率，若用戶勾選了“不再提示”，用戶在進(jìn)入其他內(nèi)容頁面后，還是會有退出彈窗，彈窗強制展示給用戶。首先產(chǎn)品設(shè)計了這樣的彈窗機制，考慮到用戶體驗，如果一直彈出會讓用戶很反感，所以在彈窗的下方增加取消彈窗提示的操作。這樣讓用戶可以有地方能將煩人的彈窗提示取消掉。不至于太影響用戶體驗。

05 鯊魚記賬—賬單內(nèi)容竟然可以這樣修改

1. 設(shè)計描述

鯊魚記賬首頁的賬單列表中，每一個列表支出賬單都是有三個部分組成：支出圖標(biāo)類型，支出備注、支出費用，每個部分都可以單獨點擊進(jìn)行修改。

點擊圖標(biāo)進(jìn)入支出類型頁面，重新選擇類型圖標(biāo)進(jìn)行替換，點擊支出備注，支出備注內(nèi)容區(qū)域以外部分會有黑色遮罩效果，備注修改時，鍵盤上方有一個常用（系統(tǒng)會記錄每一次修改的備注作為常用備注）的備注選項，點擊支出費用是和修改支出備注的效果一樣，都會有遮罩效果，鯊魚記賬自帶的數(shù)字鍵盤中會有日期選擇，可以進(jìn)行支出日期選擇，若選擇非當(dāng)天的日期后，這條列表的內(nèi)容會從當(dāng)日的記賬列表內(nèi)容中抽離出來，自動落到當(dāng)天記賬內(nèi)容的下面。在同一天的記賬列表中對其中的一個內(nèi)容進(jìn)行修改，修改完成后，當(dāng)前列表會自動置于列表內(nèi)容的頂部。

2. 設(shè)計思考

（1）鯊魚記賬的賬單列表數(shù)據(jù)修改更加簡單和獨立細(xì)致了，支出賬單的核心三個內(nèi)容主要是消費支持類型、消費備注和消費金額，簡單在于用戶可以在修改備注和支出金額時，都可以直接在當(dāng)前頁面掉起鍵盤對文字進(jìn)行編輯。點擊消費支出類型圖標(biāo)進(jìn)入支出類型的選擇。獨立細(xì)致的設(shè)計是在操作使用中，點擊和輸入是兩個完全不一樣的用戶行為，消費類型時通過點擊圖標(biāo)的形式進(jìn)行修改和選擇，備注和金額是通過文字來展示。

這個相比較“口袋記賬”。口袋記賬的賬單內(nèi)容修改是在同一個頁面中。實際操作時，進(jìn)入頁面就會出現(xiàn)數(shù)字鍵盤，上方展示所有的類型圖標(biāo)，但是鍵盤的存在會占據(jù)頁面空間，擋住下方的圖標(biāo)顯示。這樣操作的區(qū)域和靈活性就不會那么容易被把控。

（2）簡單獨立的的設(shè)計讓用戶賬單內(nèi)容修改的效率也會高更多，在記賬過程中，整個賬單都要重新修改的問題應(yīng)該是比較少見的，因為如金額的信息都是很準(zhǔn)確的，修改比較頻繁可能是比較有疑惑的描述或類型選擇。

例如我只是想修改備注描述，那我可以直接在當(dāng)前頁面點擊備注文字區(qū)域直接進(jìn)行修改，這樣修改觸達(dá)的時間非?？於珳?zhǔn)。修改類型可以直接類型頁面，進(jìn)入頁面就能看到圖標(biāo)，沒有冗余的操作和信息干擾。鯊魚記賬也是秉承工具類產(chǎn)品的原則：風(fēng)格樸素，操作簡單。有記賬習(xí)慣的朋友還是可以試試它的！

06 滴滴出行—多方式觸達(dá)打車出行頁面

1. 設(shè)計描述

（1）滴滴出行首頁中，可以有三種操作方式進(jìn)入到出行打車頁面，點擊功能按鈕、地點信息輸入模塊下拉、地圖觸控等都可以進(jìn)入打車頁面。首頁第一屏默認(rèn)主要顯示地圖，地點選擇、其他業(yè)務(wù)功能等。點擊按鈕，整個頁面從右至左滑動顯示，首頁地點信息輸入?yún)^(qū)下拉拖動，地圖顯示區(qū)域增多，信息地點選擇模塊消失后重新從底部彈出，完成打車頁面切換過渡。地圖區(qū)域觸控操作的轉(zhuǎn)場過程和“地點選擇模塊”下拉一致。

（2）打車頁面中，地圖中會展示和很多標(biāo)記性的設(shè)計樣式，進(jìn)入頁面會自動定位，之前的定位圖標(biāo)會抖動變?yōu)橐粋€指示牌，里面展示定位的地點名稱。點擊可以進(jìn)入地點選擇頁面，地圖中還有行駛的模擬小車、用戶目前的位置和提供兩個附近建筑的可以上車的點。

2. 設(shè)計思考

（1）打車是滴滴出行的主要業(yè)務(wù)。在首頁的整個頁面布局里面可以看到，打車功能占據(jù)了首頁的一半以上的空間，由于新業(yè)務(wù)的滲透和新功能的增加，滴滴首頁也是為這些內(nèi)容省出了一些空間。但是主營業(yè)務(wù)的打車出行功能還是主推的。在基礎(chǔ)功能的第一個位置就是“打車”。

打車功能在頁面空間上的收縮，也讓滴滴在交互形式上做了很多補充。打車頁面觸達(dá)方式和路徑有很多，方式有點擊和下拉、觸控三種方式。首頁中地圖和地點信息輸入，在視覺設(shè)計上獨立又統(tǒng)一。信息輸入覆蓋在地圖上，整個模塊外邊框又增加粗描邊效果讓兩部分包在一起，和其他內(nèi)容有區(qū)分。

（2）在打車頁面，當(dāng)用戶定位后，提示附近建筑哪里是可以上車的點。這個讓用戶也是比較方便直接的去到合適的地點等待車輛。打車軟件的定位功能已經(jīng)越來越精準(zhǔn)了，用戶在移動過程中，隨時重新切換地點，司機都能找到你。但是對于路況復(fù)雜的城市，用戶和司機都是雙向努力的。

滴滴設(shè)計用戶可以上車的點的提示，除了讓自己乘車更有效率，同時也能幫助司機規(guī)避違規(guī)停車的風(fēng)險。比較了下同類的打車軟件，高德地圖基本覆蓋了滴滴出行的功能，唯一的變化是在那個定位后的文字展示上，除了地點名字之外還有一個到達(dá)時間的提示。哈嘍單車的打車流程基本是沒有什么好的體驗，操作很難受，需要點擊圖中的全屏按鈕才能進(jìn)入到完整的打車頁面。

07 微博—不同維度的用戶評論內(nèi)容查看

1. 設(shè)計描述

微博首頁“推薦”模塊，點擊列表中的博主或各大官方機構(gòu)發(fā)布的內(nèi)容，進(jìn)入到內(nèi)容詳情頁，在評論內(nèi)容查看區(qū)域的右上角，有個條件篩選的控件，用戶可以選擇不同的緯度去查看其他人的評論內(nèi)容，默認(rèn)按熱度排序，點擊控件，在文字下方會出現(xiàn)一個彈出框，彈出框中有幾個篩選條件選擇，分別為“按時間、按正序、按倒序、按熱度”，點擊篩選條件后，評論標(biāo)題一欄會直接吸頂，用戶可以上下滑動查看評論內(nèi)容，同時頁面下方會彈出可以博主關(guān)注的浮層。

點擊關(guān)閉按鈕浮層退出。當(dāng)進(jìn)入頁面上滑查看更多信息時，當(dāng)評論區(qū)內(nèi)容滑動頁面中間位置后，底部也會彈出浮層。

2. 設(shè)計思考

（1）微博的博主評論區(qū)一直是粉絲吃瓜討論的重要區(qū)域。評論區(qū)的留言多而龐雜。不是所有的精彩評論都會被看到，隨著評論的增加，很多有價值的評論會被覆蓋掉。評論增加條件篩選，時間維度上分為倒序、正序去調(diào)整評論區(qū)展示，按熱度可以講一些討論比較激烈，比較多的有價值的內(nèi)容放出來。

其實對于評論的內(nèi)容在任何終端頁面顯示上都是一個比較煩的存在，因為頁面的承載空間無法完全高校的將龐大的內(nèi)容信息展示給用戶。有很多評論信息還是不能被我們抓取。但是篩選條件的存在可以讓比較一部分有意思的評論能夠被用戶了解到。雖然還是不能最大化的錯過討論吃瓜的機會！用戶在瀏覽感興趣的討論內(nèi)容時，博主關(guān)注的浮層引導(dǎo)能夠讓用戶更加接近關(guān)注博主。

（2）在篩選功能也可以做一些交互優(yōu)化，現(xiàn)在的交互效果是點擊出現(xiàn)下拉框，下拉框展示曬選條件，評論條件的曬選其實可以參照旁邊“贊”的篩選控件設(shè)計，它將篩選條件平鋪左右滑動去點擊。目前評論展示的篩選條件比較少，而且針對不容博主內(nèi)容篩選條件都會有所不同，但是后續(xù)如果增加篩選條件，在交互操作簡易程度上：滑動>點擊>輸入，左右滑的查看方式也更加方便，也能和產(chǎn)品其他功能的交互控件設(shè)計統(tǒng)一。

08 極客時間—瀏覽和專注兩種學(xué)習(xí)模式

1. 設(shè)計描述

極客時間的學(xué)習(xí)模塊有兩種學(xué)習(xí)模式，分別為“專注模式”和“瀏覽模式”，默認(rèn)模式為瀏覽模式，展示學(xué)習(xí)歷程、學(xué)習(xí)軌跡、正在學(xué)習(xí)、輕松堅持學(xué)、熱門劃線等模塊，切換到另外的專注模式下，主要展示當(dāng)前正在學(xué)習(xí)的一些課程。

所有信息僅一屏展示，不支持上下滑動，頁面標(biāo)題欄有上方是按鈕，在兩種模式下，點擊都會進(jìn)入有聲播放詳情頁面，退出頁面后，有聲播放按鈕消失，下方會出現(xiàn)有聲播放詳情頁浮層入口，關(guān)閉浮層，右上方按鈕恢復(fù)。

頁面中有個類似書籍的設(shè)計輪播展示樣式，可支持左右滑動，查看其他講師的課程，滑至最后一個課程時，最右邊會出現(xiàn)查看更多的課程按鈕。書籍封面展示課程的信息，包括講師頭像，課程名稱，課程的數(shù)量、學(xué)習(xí)進(jìn)程等，下方展示用戶的學(xué)習(xí)軌跡。

2. 設(shè)計思考

（1）針對用戶的學(xué)習(xí)目的性強和弱的場景，極客時間將學(xué)習(xí)板塊分為兩個模式，幫助用戶在學(xué)習(xí)過程中的的狀態(tài)切換，“瀏覽模式”和“專注模式”主要區(qū)別是頁面內(nèi)容上，瀏覽模式展示的信息會更多，專注模式讓用戶專注課程學(xué)習(xí)，收縮信息量，將課程更專一的推送給用戶。

不管在何種模式下，頁面下方的浮層入口的隱藏或顯示和右上角的按鈕聯(lián)動。有聲聽說已經(jīng)越來越被用戶適應(yīng)，在同等時間內(nèi)，有聲閱讀的成本相比較純文字的閱讀要低，所以這也是極客時間想要保留和極力促進(jìn)用戶使用的功能。但是對于有聲播放的入口和按鈕的聯(lián)動在其他模塊都會存在，但聯(lián)動的主要目的也是為了展示或者隱藏這個功能。

如果這個功能確實比較重要，其實也是可以考慮刪除浮層入口中的關(guān)閉按鈕，采用其他的設(shè)計方式，每一個模塊都要為了聯(lián)動而去增加一個按鈕來聯(lián)動確實比較浪費也看空間。因為如果不關(guān)閉它，就是需要一直顯示，也不會影響用戶使用和瀏覽。

（2）頂部的模式切換入口的文案，在語意理解上也是非常繞，比如上方顯示專注模式，那現(xiàn)在這個算是專注模式還是瀏覽模式。如果是“專注模式”，那這么多信息內(nèi)容符合“專注”的語意表達(dá)么？

還有一個模式中不同的模式還需要用不同的按鈕來表示，其實這個功能主要是用意圖就是模式切換。所以在按鈕和文案上我覺得可以略作修改。按鈕統(tǒng)一使用有“切換”語義的按鈕。文案可以做如下修改，在默認(rèn)模式瀏覽模式下，文字表達(dá)為“切換至專注模式”，雖然文案略長，但是讓用戶能明白我現(xiàn)在是什么模式，點擊按鈕切換的又是什么模式。

09 自如—Banner設(shè)計的無限可能性

1. 設(shè)計描述

（1）自如的首頁輪播Banner上有兩種非常富有新意的交互方式，一種是正常的左右滑動操作，輪播圖會出現(xiàn)元素拆分閉合的場景，另外一種是手握設(shè)備進(jìn)行不同角度晃動時，頁面中Banner區(qū)域相關(guān)元素給用戶的感應(yīng)反饋。

Banner的是由圖片背景和文字或小元素部分組成，當(dāng)用戶左右滑動操作時，前一張輪播背景圖在當(dāng)前位置消失，第二張的輪播背景圖慢慢漸現(xiàn)，文字內(nèi)容以及原本在背景中被拆分的元素也隨著滑動操作出現(xiàn)，和背景圖融合，在每次切換的過程中，輪播圖都會在水平方向進(jìn)行有次序的拆分和閉合。

當(dāng)用戶手持手機通過三維空間進(jìn)行搖晃，背景圖和文字、小元素等會隨著要懂得方向進(jìn)行移動，背景圖會移動到屏幕里，小元素會移動到輪播圖區(qū)域之外，形成錯位移動的即視感。

2. 設(shè)計思考

自如的輪播圖設(shè)計真的刷新用戶認(rèn)知，讓設(shè)計充滿了無限的可能性。這種錯位聯(lián)動、搖晃感應(yīng)的操作給產(chǎn)品增加了不少亮點。用戶對于輪播圖的設(shè)計認(rèn)知，還停留在整張圖片讀秒切換階段。

輪播圖切換通過左右滑動的交互方式讓元素拆解拼合，同時進(jìn)行聯(lián)動，形成錯位感，晃動通過借助傳感器來獲取當(dāng)前手機傾斜的方向和角度，計算元素需要移動的距離，產(chǎn)生傾斜移動的的錯位效果。一個簡單的banner模塊也可以通過設(shè)計思考和結(jié)合技術(shù)手段呈現(xiàn)出富有創(chuàng)新型的玩法。

自如在輪播圖中具有差異化的設(shè)計方式，也支持了自己產(chǎn)品在用戶體驗方面負(fù)有競爭力。這個有趣的設(shè)計值得思考的是：當(dāng)技術(shù)壁壘被打破之后，設(shè)計就不會那么的被限制，能創(chuàng)造出更多的有趣的東西，賦予產(chǎn)品更多的價值。

10 招商銀行—主題的豐富程度的快趕上QQ了

1. 設(shè)計描述

招商銀行我的模塊的設(shè)置功能里，點擊主題中心進(jìn)入主題庫。里面有豐富的主題可供用戶選擇，主題庫中會提供用戶集中免費的主題。剩下的主題需要用戶用過積分兌換、活動領(lǐng)取等用戶行為來獲得。

當(dāng)用戶點擊免費主題時，可以進(jìn)行設(shè)定或預(yù)覽。當(dāng)點擊預(yù)覽時，會進(jìn)入主題應(yīng)用預(yù)覽頁面，使用“我的模塊”頁面作為預(yù)覽效果的呈現(xiàn)，點擊設(shè)定會直接返回到我的頁面。主題皮膚的主要應(yīng)用區(qū)域在解鎖頁面、底部導(dǎo)航欄的圖標(biāo)、我的頁面。

在底部導(dǎo)航欄每個模塊都會變成對應(yīng)主題的圖標(biāo)設(shè)計。我的模塊的頂部區(qū)域和賬戶總覽模塊也是對應(yīng)的添加了主題的元素和對應(yīng)的顏色，用戶頭像上也會有比較豐富的主題設(shè)計；應(yīng)用退出后再次點進(jìn)進(jìn)入，切換到我的模塊會出現(xiàn)頁面解鎖，也會有對應(yīng)主題元素。

2. 設(shè)計思考

銀行軟件中基本很少會看到這種功能，主題皮膚設(shè)置是和銀行業(yè)務(wù)相互綁定的。銀行現(xiàn)在都會出IP聯(lián)名卡，通過不同的IP形象來吸引客戶辦卡，提升銀行業(yè)務(wù)。

招行銀行主題種類非常繁多，在主題設(shè)置選擇中，將聯(lián)名卡業(yè)務(wù)也穿插進(jìn)來。有基礎(chǔ)的主題給用戶選擇，也有通過申請聯(lián)名卡獲得對應(yīng)主題。海量的皮膚選擇可以增加用戶粘性，主題設(shè)置更類似一個娛樂的功能。

在設(shè)定之后，用戶可以實時查看主題在頁面中的效果。用戶可以反復(fù)去嘗試裝扮自己的頁面，獲得趣味感。底部tab的icon全部換成主題元素了。這樣的設(shè)計讓頁面變得非常場景化，富于變化。聯(lián)名卡申請獲得對應(yīng)主題也讓辦卡業(yè)務(wù)能夠很好的被銜接起來。一網(wǎng)通登錄、積分兌換、聯(liá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é)議。