在日常交互體驗過程中，不知道你有沒有注意過這些交互細節？作者結合自己各項目實施過程中，容易踩的一些細節坑，分享給你，希望對你有所幫助。

本文主要是總結了我在各項目實施后，發現容易踩的細節坑，希望對大家有幫助。

一、帶吸頂的篩選或頁簽，要增加動態高度

踩坑指數 ??????????

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

反面示例：

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

預期效果：

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

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

反面示例：

在某頁簽下，空數據的缺省狀態高度不夠，導致切換時頁簽會突然掉下去，如小紅書“我”的頁面：

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

預期效果：

如美團外賣點單頁面，盡管“商家”tab頁簽內容很少，也仍然能保持吸頂，以保證用戶流暢的操作體驗：

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

踩坑指數 ??????????

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

反面示例：

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

預期效果：

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

三、使用錨點頁簽時，要注意將頁簽自動滾動到可視范圍內

踩坑指數 ??????

當錨點頁簽較多時，需要橫向滾動才能看到屏幕外的更多頁簽時，要注意滾動頁面后，對應的錨點正好在屏幕外時，應自動滾動到可視范圍內。（包括橫向和豎向tab頁簽）

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

踩坑指數 ??????????

當內容在默認有邊距的模塊下，需要滾動展示時，要特別注明滾動的邊界。如美團“超市便利”頁面，同一個列表下，不同的商家產品展示在橫向滾動時，存在兩種滾動邊界。這些細節就會影響app的品質感。橫向、豎向以及app、pc都可能出現這種問題。

五、滾動條是否要隱藏

踩坑指數 ????

在app上基本不會展示滾動條，但是這個最好也提前約定好，避免溝通成本。因為不提前說好，真的可能會給你把滾動條露出來。

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

六、點擊翻頁后，列表應自動回滾動到頂部

踩坑指數 ??????

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

反面示例：

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

預期效果：

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

七、記得定義瀏覽器標簽文案

踩坑指數 ????????

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

八、攔截操作應繼續上次行為

踩坑指數 ??????

有時點擊某個功能后，會觸發“登錄”等各種攔截操作，當用戶完成對應操作后，應自動繼續攔截前的動作，不用讓用戶再點擊一次。

反面示例：

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

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

預期效果：

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

更多細節坑，持續更新中…