2010-07-13 94 views
4

滾動條真的很無聊。我已經看到了一些真正有創意的新用戶界面來更新這些界面。我相信有很多更好的方法花10px然後用純色和靜態按鈕。這裏有兩個例子,我發現:Cool滾動條的用戶界面備選方案和改進

你有什麼其他的想法添加到這個列表?我們如何才能更好地瞭解文檔中的視圖狀態,而不會浪費太多房地產?我們怎樣才能爲臭名昭着的死亡空間添加更多功能?

+0

你可能想考慮問這個問題在ux exchange ux exchange(http://uxexchange.com/) – 2010-07-13 16:35:42

+0

那個信息卷軸非常酷,但它看起來還是很噁心 – fearofawhackplanet 2010-07-13 16:36:07

+0

FWIW,在信息槽裏畫,就像在infoscroller的例子中上面已經有相當一段時間了。例如tkdiff至少在90年代中期以來一直在使用它。 – 2010-07-13 16:39:01

回答

0

我喜歡Google Wave滾動條 - 看起來他們似乎已經將滾動條與Fitt定律對齊了。

+0

我不明白Fitt的法律如何適用。如果您的鼠標位於窗口的底部,則必須將其向上移動以調整垂直位置,這意味着目標難以擊中。他們所做的一切都是讓滾動條變小。你能否詳細說明你如何看待費特法則? – 2010-07-13 19:48:34

2

首先,應該非常小心「更新」滾動條。滾動條是一個偉大的成功故事,一個簡單,優雅,功能強大的控件,對於成功使用計算機至關重要,並且幾乎可以普遍被用戶理解。試圖改進滾動條就像試圖改進圓珠筆。它長期以來一直保持不變,因爲實際上你可以做的不多。 「無聊」並不是改進它的好理由。用戶不使用應用程序或網站,因爲它有新的和「酷」的控件。他們使用應用程序或網站,因爲它可以讓他們完成任務。要改進滾動條,請考慮更改如何改進任務完成。

好東西不起眼的滾動條均有:

  • 容量滾動一個窗格滿。

  • 能夠滾動一行(微調)。

  • 在不移動鼠標的情況下重複執行上述操作的能力(因此用戶只需在最初將鼠標放在正確位置後偶爾點擊某些內容即可偶爾點擊)。

  • 允許通過簡單的線性拖放功能隨機訪問窗格中的任何位置。直觀地顯示內容中的相對位置(例如,允許用戶判斷他/他到底有多近)。

  • 直觀地顯示內容相對於滑塊相對於軌道大小的相對大小。

  • 支持通過光標鍵進行直觀的鍵盤激活 - 良好的快捷方式,以及良好的可訪問性。

  • 支持clickamatic(按下並按住鼠標按鈕以滾動多行或面板滿)。

  • 非常流暢的用戶操作實時反饋。

  • 所有這些都在一個非常緊湊和不顯眼的控制中,不會分散內容(用戶真正感興趣的內容)。

你不想惹什麼。特別是,您鏈接到的彈出式滾動條可能是一個糟糕的主意,因爲它會干擾通過單擊軌道來滾動窗格的容量。這也許是最常見的用戶操作,因此它應該獲得最大數量的像素(即軌道)。另一方面,建立在現有滾動條功能的基礎上,就像您所鏈接的Infoscroller一樣,這是一個值得進一步研究的問題。關於這個概念的原創性研究,請參見:

McCrickard DS和Catrambone R(1999) 除了滾動條:一個演進和替代導航 技術 評價。喬治亞州研究所 技術技術報告 GIT-GVU-97-19。

很顯然,您在滾動條軌道中顯示的內容取決於您的內容。內容的縮略圖不適用於文本列表或列表。爲此,Greg Raiz建議指出values for the current sort order。如果沒有足夠的空間,可能會出現工具提示或標註,指向要拖到的軌道中的關鍵位置。 MS Word做了與此類似的工作,顯示了一個工具提示,指示當前拖放點的頁面和部分。

我這裏還有我們可以建立滾動條上一些其他的方法:

  • 更多的按鈕。我已經看到了在頂部和底部同時包含向上和向下按鈕的建議,因此用戶可以在向下滾動和向下滾動之間切換,而無需滾動窗格的整個高度。或者您可以使用按鈕立即滾動到內容的開始和結束位置,對於不知道Ctrl-Home和Ctrl-End的用戶,可以方便地保存這些用戶長時間拖動滑塊。微軟Word包括執行最後的查找或轉到,以及其他可能性的按鈕。

  • 拆分欄。在MS Word,MS Word和Excel滾動條的主題中包含一個分割控件,可以將窗口分成兩個窗格。對於很多其他應用程序來說,這很方便,例如瀏覽器和大型列表和表格。

  • 專家激活。如果你不想讓雜亂的滾動條更多的按鈕和控件,考慮通過元鍵提供專家快捷方式。按住Ctrl鍵單擊箭頭按鈕可以將用戶滾動到內容的開始和結束處。按住Ctrl點擊曲目可以立即滾動到內容中的相應位置,如果您已經實施了Infoscroller,則特別有用。按住Ctrl單擊滑塊可以彈出一個迷你對話框或文本框,以輸入頁碼,列表項標識符或查找條件以跳轉到。

  • 左側滾動條。有一些研究表明我們通常應該把vertical scrollbar on the left side,而不是正確的(見Kellener E,Barnes GM,& Lingard R(2001),滾動條方向和項目理由的影響,人類因素和人體工程學會第45屆年會會議)。使滾動條位置與內容對齊一致意味着更快滾動條使用的平均轉換距離更短。同樣,將瀏覽器左側的滾動條放在瀏覽器中將縮短滾動條和後退按鈕之間的距離,以加快導航速度。但是,滾輪的出現可能使這種想法變得過時了。

+0

我同意你的改進列表,但我發現你的分析非常遙遠..我想知道有多少人使用單窗格跳轉功能。滾動條作爲頁面導航控件的源代碼對我來說似乎很差勁,滾動條作爲頁面狀態顯示的來源對我來說也似乎很差。我使用vimperator並以百分比的方式瞭解我的查看窗格的進度,並且'[查看頁面/總頁數]'比滾動條的可視指示符更有用。我不把它的壽命大部分歸功於控制和進度指示的重疊。 – 2010-07-14 15:10:04

+0

@EvanCarroll,我不知道這方面的統計數據,但對我來說,點擊做PageUp或PageDown是我最常用的點擊,尤其是現在鼠標滾輪可以處理最小的跳轉。 滑塊的拖放是我另一個主要用途。 (我知道,我是一個數據點。) – 2018-02-21 19:39:52

+0

順便說一句,我在搜索皮包骨頭或自動隱藏滾動條設計時遇到了此頁面。這些讓我覺得比傳統的滾動條行爲更有用,而且我已經看到它們在某些情況下運行良好。 – 2018-02-21 19:40:58

2

偉大的問題。請參閱RockScroll,這是now standard in Visual Studio 2013 Previewhttp://www.hanselman.com/blog/IntroducingRockScroll.aspx

RockScroll反過來啓發MetalScroll

enter image description here

這反過來又激發了RockMargin

另外,Visual Studio的Jetbrains Resharper插件在垂直滾動條的右側放置了一個垂直可供選擇的示例。信息顯示爲不同顏色的小水平條。這些條表示可以改進的一段代碼。點擊一個滾動條的代碼頁,使有問題的代碼眼簾:

enter image description here

此外,大多數文件比較軟件使用花哨的滾動條。請參閱Scooter Software的Beyond Compare 3.0,其中將類似「infoscroller」的可供件與滾動條分開。左側的可供性可以像滾動條一樣拖動。此外,爲了減少用於水平滾動的必要性,有一個底部窗格這使當前行從在頂部的左窗格和從下面的右窗格中的當前行。移動信息滾動器允許用戶同時滾動兩個文檔,這使得同一文檔的兩個版本之間的「合併」變化更容易。請參閱:

http://www.scootersoftware.com/images/TextCompare1.jpg

的WinMerge有不同,同樣可滾動,左窗格中,像一個滾動條功能,並複製現有的滾動條。 http://winmerge.org/about/screenshots/filecmp.png

enter image description here

最後,谷歌Chrome整合搜索功能(以下簡稱 「find bar」)到滾動條。

enter image description here

和Greg Raiz想出了ABC Scrollbar

enter image description here

而且Overlay Scrollbars其最小化非客戶區:

enter image description here

和一個研究, gaze-enhanced scrolling techniques