2010-09-01 49 views
2

我有一個小小的網絡管理工具,我正在研究允許用戶查看&編輯DB對象的屬性。大多數設置是「是/否/不知道」類型屬性。使用CSS/JS/JQuery的自定義Radiobutton

有相當多的設置顯示,以便管理屏幕不動產& 可用性很重要。

alt text

當初腳手架的UI,我用試驗1以上圖像英寸 只需說它看起來很雜亂,並且在用戶界面中有多個列/類別組中的幾十個。測試2略好,但不是太多。

所以我正在考慮做一些類似測試3.根據在html中選擇哪個單選按鈕,出現差異圖像。然後點擊圖像重複循環選擇3個選項。

(如果你曾經使用過的Gmail實驗室功能,可以讓你有很多不同類型的爲您的電子郵件「星」的標誌,這就是想法)

所以我的問題的UI/CSS大師。

  1. 「測試3」是一種可接受/可用的解決方案嗎?

  2. 如果是這樣,是否可以改變一個單選按鈕(或選擇/選項)輸入到只使用CSS & JS? (或者,如果你能指出我朝着教程/資源,我會很感激的)

感謝,

約恩Ç

回答

3

騎自行車的東西似乎不適用於我。我認爲測試2是最好的選擇。 它可能看起來有點「混亂」,但至少可以使用。如果有人需要每天填寫這些表格5次,我認爲他會開始很快厭倦騎車。

另一個重要的觀點是:在測試2中你沒有默認值,這是很好的。因爲有人忘了1行,你可以做表單驗證。與騎自行車的事情一樣,默認值已經是答案之一,使得在輸入時更容易出錯。

如果我是你,我會參加測試2並將未知數放在右側,因此你有Yes,No,Unknown。

1

測試3是可以接受的,但測試2或選擇框對大多數用戶來說會更加熟悉。如果我知道我的用戶足夠精通技術來處理自定義小部件,那麼我只能使用測試3。它看起來不像交互式輸入。

+1

如果我要使用測試3,我肯定會包括一個工具提示或類似的東西。它不會爲非精明的用戶接受很多培訓,以瞭解如何使用它,並且使頁面更簡單。 – 2010-09-01 09:53:11

0

將點擊處理程序添加到圖像。 點擊打開與3個單選按鈕與圖像的div。 當用戶選擇一個單選按鈕時,關閉div並更改表格中的圖像。

0

測試3對我來說似乎是一個很好的解決方案。我個人唯一會改變的是圖標,紅色的意思是「取消」,而未定義的則用於警告,所以它們沒有太接近未定義/不支持的概念。

但是,如果問題是關於選項的數量,一個好的選擇是按類別對選項進行分組,並且僅在用戶必須與它們進行交互時才顯示/隱藏每個組(並且您可以使用Test2,這更清晰)。

1

案例三在我看來,有該圖標是可變的用戶兩大問題

  • 它是不是很明顯 - 即。他們是按鈕
  • 你不能一目瞭然地告訴圖標代表什麼。

問題二可以用圖表底部的一個小鍵區來解決,告訴他們每個按鈕的含義。問題一是......有點難。

我能想到的兩個最明顯的解決方案是在點擊時增加一些可點擊的三角形來改變它們的值,以說明這實際上是可以改變的。另一個是添加一個大的工具提示,它會在盤旋時出現,讓用戶可以選擇更改值並通知他們每個圖標的含義。

這裏的選擇基本上可以歸結爲實際使用情況 - 由於顏色編碼的值,情況三更加「可視化」,代價是可用性略有下降,學習曲線稍微更陡。


至於技術方案,也有很多,但如果你想案例二少了很多混亂,我建議你看看jQuery用戶界面的按鈕小部件 - 它真正需要的蛋糕出來必須實施這種事情。看看它在這裏:http://jqueryui.com/demos/button/#radio

相關問題