摘要:網頁滾動操作研究
全文共985字,閱讀大約需要2分鐘。
滾動操作非常簡單,貓也可以
設計師用它來優化這些的使用者體驗是乙個被稱為視覺動量的概念。
視覺動量的概念首先出現在電影業中。在攝影中,它是指從乙個剪輯到下乙個剪輯的平滑過渡,以使**者不會感到突然變化或引起**體驗的中斷。
在互動設計領域,滾動涉及兩件事:
在設計中,滾動操作旨在通過以下方式來增加使用者體驗到的視覺動量:
保持元素靜止
從認知心理學中我們知道,在我們的工作記憶中儲存某些東西是對認知的要求,因此理想情況下,我們不希望使用者在讀取連續資訊時將頁面的上半部分保留在他們的記憶中,在無奈地來回滾動幾次之後,普通使用者更有可能放棄最初顯示的上下文。
ux設計人員可以通過將滾動動作僅對映到頁面的特定元素,而上下文元素保持靜態來簡化資訊整合過程。
例如,有關covid-19大流行的文章經常在許多地方提及地圖和資訊圖表。這樣的網頁可以通過保持資訊圖表靜態和可滾動的支援文本來做得很好,從而增加資訊整合的便利性。
3d滾動
這才是真正有趣的地方。在我看來,這是使用滾動功能最有創意的方式之一。
3d滾動將滾動功能對映到除經典2d上下運動以外的其他運動。它可用於旋轉螢幕上的物件,放大或縮小,甚至圍繞某個點旋轉它們。
3d滾動使您可以在網頁中包括動畫,甚至包括主題物件的不同視角,在涉及單個英雄主題或物件的文章中特別有用。這種方法極大地平滑了同一頁面上不同檢視之間的過渡,並保持了使用者的參與度。
如前所述,使用者在頁面上時需要知道自己的位置,並且應該能夠輕鬆回答以下四個問題:我在**?**是我?我怎麼到這裡的 我該何去何從?
滾動條
滾動條的長度根據要滾動頁面的長度成比例地變化。由於滾動條直觀地讓使用者了解頁面有多長。
滾動條的長度表示頁面的長度;位置告訴我們在**
滾動條的位置
滾動時,頁面右側滾動條的位置會更改以反應使用者所處的位置。
參考資料
[1]
網頁滾動條樣式
網頁滾動條樣式 應用 沒有水平滾動條 沒有垂直滾動條 style overflow y hidden 沒有滾動條 style overflow x hidden overflow y hidden 或 style overflow hidden 2 自己定義滾動條的顏色 scrollbar 3d l...
網頁滾動條樣式
1 overflow內容溢位時的設定 設定被設定物件是否顯示滾動條 overflow x水平方向內容溢位時的設定 overflow y垂直方向內容溢位時的設定 以上三個屬性設定的值為visible 預設值 scroll hidden auto。2 scrollbar 3d light color立體...
CSS網頁滾動條
效果 不多說,上 css部分 滾動條樣式 table p table p webkit scrollbar table p webkit scrollbar thumb table p webkit scrollbar track html部分 1.webkit scrollbar 滾動條整體部分,...