在日常交互體驗(yàn)過程中，不知道你有沒有注意過這些交互細(xì)節(jié)？作者結(jié)合自己各項(xiàng)目實(shí)施過程中，容易踩的一些細(xì)節(jié)坑，分享給你，希望對你有所幫助。

本文主要是總結(jié)了我在各項(xiàng)目實(shí)施后，發(fā)現(xiàn)容易踩的細(xì)節(jié)坑，希望對大家有幫助。

一、帶吸頂?shù)暮Y選或頁簽，要增加動態(tài)高度

踩坑指數(shù) ??????????

我們在滾動頁面或展開篩選條件時，若要求將篩選控件吸頂，則需要特別注意內(nèi)容要增加動態(tài)高度，使得篩選控件可以始終保持吸頂。

反面示例：

若不增加動態(tài)高度，則篩選后的內(nèi)容特別少甚至沒有時，篩選控件就會突然掉下來。且再次點(diǎn)擊篩選時，原來的位置便會顯示空白，操作體驗(yàn)較差。如美團(tuán)外賣的“天天神券”頁面：

預(yù)期效果：

增加動態(tài)高度，使得篩選后內(nèi)容較少甚至缺省時篩選控件仍然能保持吸頂。如美團(tuán)外賣的“蔬菜水果”功能模塊首頁：

tab頁簽時也是同樣的道理，當(dāng)需要tab頁簽吸頂時，同樣需要注意某些頁簽下的內(nèi)容特別少時，在切換時仍然能保持吸頂。

反面示例：

在某頁簽下，空數(shù)據(jù)的缺省狀態(tài)高度不夠，導(dǎo)致切換時頁簽會突然掉下去，如小紅書“我”的頁面：

(小紅書這里缺省狀態(tài)的高度是可以吸頂?shù)?，但還是存在“掉下來”的情況，所以就拿來舉例了)

預(yù)期效果：

如美團(tuán)外賣點(diǎn)單頁面，盡管“商家”tab頁簽內(nèi)容很少，也仍然能保持吸頂，以保證用戶流暢的操作體驗(yàn)：

二、使用頁簽時，要注意切換后的滾動位置

踩坑指數(shù) ??????????

在一些數(shù)據(jù)量不大的頁面，不需要分各個tab頁簽請求數(shù)據(jù)時，開發(fā)可能采用同一個滾動條，會導(dǎo)致在第一個頁簽下滾動后，切換到第二個頁簽時，第二個頁簽下的內(nèi)容也是從剛剛第一個頁簽下相同的滾動位置來展示內(nèi)容的。并不是第二個頁簽下，從頭開始展示的。包括app和pc都可能存在這個問題。

反面示例：

如翼支付app的“權(quán)益”頁面，首次進(jìn)入時，直接在“食品酒飲”tab頁簽下滾動到底，再切換到“數(shù)碼家電”時，內(nèi)容竟然也同樣滾動到了底部：

預(yù)期效果：

切換到未點(diǎn)擊過的新頁簽時，從頭開始展示；切換到點(diǎn)擊過的頁簽時，從上次滾動位置或從頭開始。如翼支付app首頁：

三、使用錨點(diǎn)頁簽時，要注意將頁簽自動滾動到可視范圍內(nèi)

踩坑指數(shù) ??????

當(dāng)錨點(diǎn)頁簽較多時，需要橫向滾動才能看到屏幕外的更多頁簽時，要注意滾動頁面后，對應(yīng)的錨點(diǎn)正好在屏幕外時，應(yīng)自動滾動到可視范圍內(nèi)。（包括橫向和豎向tab頁簽）

四、滾動邊界需要定義清楚

踩坑指數(shù) ??????????

當(dāng)內(nèi)容在默認(rèn)有邊距的模塊下，需要滾動展示時，要特別注明滾動的邊界。如美團(tuán)“超市便利”頁面，同一個列表下，不同的商家產(chǎn)品展示在橫向滾動時，存在兩種滾動邊界。這些細(xì)節(jié)就會影響app的品質(zhì)感。橫向、豎向以及app、pc都可能出現(xiàn)這種問題。

五、滾動條是否要隱藏

踩坑指數(shù) ????

在app上基本不會展示滾動條，但是這個最好也提前約定好，避免溝通成本。因?yàn)椴惶崆罢f好，真的可能會給你把滾動條露出來。

還是以翼支付為例，同樣是一級頁面，其他如“借貸”下沒有滾動條，唯獨(dú)“權(quán)益”下有滾動條：

六、點(diǎn)擊翻頁后，列表應(yīng)自動回滾動到頂部

踩坑指數(shù) ??????

翻頁在pc上是一個常見控件。但是當(dāng)一個列表頁面很長，翻頁控件在下一屏幕時，我們發(fā)現(xiàn)沒做特殊說明，開發(fā)默認(rèn)做出來的效果是不會自動滾動到第一屏去的。導(dǎo)致看下一頁的東西還得往上手動滾一下才能從頭看起。

反面示例：

如“騰訊課堂”的搜索結(jié)果頁，每次翻頁時要手動滾動頁面頂部：

預(yù)期效果：

如“學(xué)堂在線”，就很好的處理了滾動問題，讓用戶自然的從新一頁的第一條看起：

七、記得定義瀏覽器標(biāo)簽文案

踩坑指數(shù) ????????

在pc上新開頁面時，不要忘了瀏覽器標(biāo)簽上的文案也需要定義：

八、攔截操作應(yīng)繼續(xù)上次行為

踩坑指數(shù) ??????

有時點(diǎn)擊某個功能后，會觸發(fā)“登錄”等各種攔截操作，當(dāng)用戶完成對應(yīng)操作后，應(yīng)自動繼續(xù)攔截前的動作，不用讓用戶再點(diǎn)擊一次。

反面示例：

如iconfont，在未登錄時，點(diǎn)擊“下載”會彈出登錄彈窗，但是登錄完畢后，并沒有自動進(jìn)入下載流程，反而會到了首頁！

還有抖音也是，視頻看一半在評論區(qū)登錄后，直接刷新了全部推薦內(nèi)容，還得從歷史里去找剛看的視頻。

預(yù)期效果：

像嗶哩嗶哩，登錄后仍然能保持剛剛視頻播放頁面。

更多細(xì)節(jié)坑，持續(xù)更新中…