網頁滾動條在交互設計上有哪些需要考慮的點？

01-16

嘿，滾動條！這是一個細節見真章的東西，需要較強的設計能力。由於顯示設備的區域限制，當顯示內容超出時，就有必要用到這個控制項了。

先從我們最常見的滾動條介紹吧，大家都熟悉的windows滾動條，一般分為滾動框、滾動滑塊和滾動箭頭。這個很傳統，傳統到很少有人或公司想去改變它。滾動框代表顯示內容的長度或寬度、滾動滑塊影射當前顯示區域（與顯示內容成比較顯示）、雞肋式的滾動箭頭。

在上面這個傳統試的滾動條基礎上，有許多創新的設計，挑一個最有代表性的設計吧，Google Wave（見下圖），初見Wave時我個人對這個滾動條印象很深刻，純從理念上來講wave scrollbar設計得不錯。將傳統滾動滑塊的大小固定了，也就是說滾動滑塊並不會因為顯示內容佔整體內容的比例而變化（保證了點擊區域），滾動箭頭集成至滾動滑塊內，不再是像傳統那樣一上一下的蛋痛設計了，並跟隨滾動滑塊，保證了功能的集中。

但缺點也是很明顯的，固定了滑塊大小，又需要顯示當前顯示內容在整個內容中所在位置，引申出半透明灰色塊的設計，半透明灰色塊與滾動滑塊之前的邏輯複雜，這讓用戶從本質上就產生了歧義（與習慣相違背）。另外還有終止條，根據官方的說明，因為移動設備和上網本的區域有限，為了這樣的用戶考慮，他們將游標移動範圍進行了限定，所以有了這個玩意，除了讓我不至一次嘗試去點擊它，並使我迷惑外，再無其它作用。

雖然，wave的scrollbar並沒有得到大多數設計者的認同，但google的設計師對於細節的研究和嘗試還是值得我們學習的，這比微軟萬年不變的滾動條設計強太多了。

有興趣的朋友可以去down個Demo嘗試一下，放個下載鏈接：https://github.com/rastasheep/google-wave-scrollbar

Wave的例子是一個極端，再回到頭來講一個優雅的例子，OS X Lion系統對原生滾動條的改進，滾動條只在執行滾動操作時才會出現。因此，它不會遮擋屏幕上的內容，並且只在滑鼠移至滾動條位置時整個滾動條區域才放大以供操作，將滾動箭頭也去掉了（實際使用當中用戶對滾動箭頭的需求較少）。這種設計最初出現在iOS系統里，因其簡潔並具有相當優秀的特性被移植入OS X系統內。可能也有一些人會問「如何在用戶未進行任何操作時體現整體內容的大小呢？」，蘋果在Finder里的處理方式是：滾動條出現 --&> 消失，提示用戶，但不干擾用戶。

Less is More在這裡被體現到極致，在我（用戶）需要時它出現，在我（用戶）拖動時才放大。以用戶為基礎，以操作狀態為區分，很好的體現了滾動條最本質的設計訴求。

除了上述這些滾動條，還有一些因其它需求而對滾動條加以設計的例子，如果您正在使用Chrome的話，請使用它搜索一下當前頁面，看看滾動條會發了什麼變化。

以及為了使用戶快速查找到以某種架構化的信息而設計的滾動條，如：聯繫人的字母表或Timeline等

另外，你可以根據需求重新整理一下滾動條，以使之能夠提供更好的用戶體驗！ over...

在交互設計中需要注意避免左右滑動，這一點需要注意頁面寬度，兼容多數目標用戶所使用顯示器的最小寬度，或者嘗試頁面響應式布局排版。