国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

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

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

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

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

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

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

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

1. 設(shè)計(jì)描述

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

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

2. 設(shè)計(jì)思考

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

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

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

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

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

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

1. 設(shè)計(jì)描述

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

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

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

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

2. 設(shè)計(jì)思考

（1）釘釘日歷可以作為一個(gè)用戶日?；顒?dòng)事件的記錄功能，日歷視圖可以根據(jù)分類有多種形式的展示，相關(guān)日期的天氣情況展示，切換中的數(shù)字時(shí)間段提示，下方的返回按鈕的設(shè)計(jì)。

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

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

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

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

1. 設(shè)計(jì)描述

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

如上右圖，進(jìn)入頁(yè)面前我選擇出發(fā)地的時(shí)候是自動(dòng)定位選擇了上海市，進(jìn)入頁(yè)面后會(huì)顯示所有的“上海”文字開頭的車站到終點(diǎn)站的班次。在頁(yè)面提示信息的下面。是始發(fā)和終點(diǎn)車站的條件選擇。

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

2. 設(shè)計(jì)思考

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

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

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

實(shí)際購(gòu)票過(guò)程中我確實(shí)也因?yàn)檫@個(gè)問(wèn)題，不止一次錯(cuò)誤的的完成車次購(gòu)買，很容易增加誤操作的幾率。車站的條件篩選不會(huì)影響時(shí)間維度的車次信息展示。車次不管在什么篩選條件下時(shí)間都是正序的排列展示方式。

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

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

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

1. 設(shè)計(jì)描述

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

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

2. 設(shè)計(jì)思考

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

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

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

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

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

1. 設(shè)計(jì)描述

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

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

2. 設(shè)計(jì)思考

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

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

（2）簡(jiǎn)單獨(dú)立的的設(shè)計(jì)讓用戶賬單內(nèi)容修改的效率也會(huì)高更多，在記賬過(guò)程中，整個(gè)賬單都要重新修改的問(wèn)題應(yīng)該是比較少見的，因?yàn)槿缃痤~的信息都是很準(zhǔn)確的，修改比較頻繁可能是比較有疑惑的描述或類型選擇。

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

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

1. 設(shè)計(jì)描述

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

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

2. 設(shè)計(jì)思考

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

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

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

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

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

1. 設(shè)計(jì)描述

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

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

2. 設(shè)計(jì)思考

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

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

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

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

1. 設(shè)計(jì)描述

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

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

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

2. 設(shè)計(jì)思考

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

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

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

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

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

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

1. 設(shè)計(jì)描述

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

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

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

2. 設(shè)計(jì)思考

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

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

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

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

1. 設(shè)計(jì)描述

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

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

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

2. 設(shè)計(jì)思考

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

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

在設(shè)定之后，用戶可以實(shí)時(shí)查看主題在頁(yè)面中的效果。用戶可以反復(fù)去嘗試裝扮自己的頁(yè)面，獲得趣味感。底部tab的icon全部換成主題元素了。這樣的設(shè)計(jì)讓頁(yè)面變得非常場(chǎng)景化，富于變化。聯(lián)名卡申請(qǐng)獲得對(duì)應(yīng)主題也讓辦卡業(yè)務(wù)能夠很好的被銜接起來(lái)。一網(wǎng)通登錄、積分兌換、聯(lián)名卡辦理等方式讓主題的獲得途徑也變的極其豐富。

總結(jié)

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

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

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

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

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