如何設計/實現一個有近百個選擇項的複選框?

1,大項10個;

2,每個大項下各有小項100個

請問:1,如何設計,能讓用戶最便捷地勾選到相關選項?

2,是否有相關的實例進行參考?

3,是否能符合METRO風格的設計?


這是一個錯誤的設計,因為沒有搜索的話基本不可用。


不要被形式給帶走了。

仔細看看你的需求,不就是個調查問卷的格式么。N多的題目,每個題目N多的選擇。就當成調查問捲來做,一頁一個大項帶幾個小項,看著也不多不複雜。提供一個回到總綱或者已回答題目的列表畫面即可。如果每個層級之間的數量相差太多(每個大項下各有小項100個),就需要引入「中項」,總之一頁超過十項沒人看。


select2 庫 Multi-values 直接解決

http://ivaynberg.github.io/select2/#multi


分步選擇,先選大類,再選該大類下的小類。跨大類多選就問用戶是否還要選別的,再返回選大類。最好能提示用戶的已選項目。確認沒別的要選了再下一步。每一步的選擇項別太多,10個還湊合…我想樓主說的小類100個應該是總和數目吧?要是不幸得設計單項小類100個的,再分分類吧,或者用Cat Chen提到的搜索框。


1、繼續分類

2、分步選擇和提交

3、重新回頭驗證需求,對所有選項進行重新糅合、組合,善用分組全選或預置選擇。別說這是辦不到的事情,我曾經開發一套後台許可權系統,按原先的需求,整合來算也有近千個可以勾選的複選框,當時懶人病發作,你妹的幾百個複選框,就算拖控制項、複製粘貼、動態生成,老子接收表單的時候可要被玩死。於是硬拉著產品經理重新討論需求,千方百計將大量選項合併,去掉眾多可有可無的小功能,成功縮減到一個頁面頂多30個複選框的程度——關鍵就是你的程序員懶人病一定要充分發作出來才行啊!

至於metro不metro,從用戶角度,無論你設計的有多漂亮,可選的東西太多,總會不耐煩的。沒有人會因為覺得選擇一個選項的過程很好玩而願意一直在那兒選吧?


你用手機群發簡訊,選人,試試摸索下規律。也可以多試幾個rom。


是有網路上嗎,還是要列印出來,復選的是不是太多了,沒有人有這樣的耐心


這些選項是否 每個/大多數 用戶都會去操作?

1、像LS所說,參考一下淘寶等有類似設計的產品的做法;

2、通過用戶引導、FAQ(建議只提供重要功能的介紹)或搜索等方式,讓用戶能夠找到要勾選的項在哪個位置;

3、調研出用戶常用的選項,並幫用戶默認勾選。

PS.那麼多選項,誰會有耐心看一遍呢?


分類

設置步驟

提供搜索

參考淘寶發布商品時候的那個選擇類別的功能


參考iOS 系統的 UITableView


將小選項中共有內容提煉為標籤。

通過勾選標籤來定位具體選項。

關鍵:

1、去除結構。

2、提煉信息。

案例:淘寶、易迅、京東。幾十個大類,每個大類下有幾百個小類,太常見了。

看看別人是怎麼做的。


用tab,分頁,側邊樹形結構,或者嚮導

不知道lz做的是移動app,網頁,還是電腦軟體

10個大項,每個大項下面100個,也就是1000個選項

要說例子,打開一個大型軟體,上面的菜單設置就是很好的例子


如非必要,建議不使用。用戶一般無耐心一項一項勾選。


你確定這樣選來選去人不會瘋魔,好的設計應該盡量精簡,選項過多就是你們對選項內容歸類不準確,應該根據產品功能和客戶需求對選項進行精準分類,如題注所說1000項,不必拘泥於10*100,可以分析產品功能和客戶需求進行大類小類劃分,竊以為超過十項都已經是在考驗人的耐心了,所以如果項數太多大可砍掉非必需的,有時候模糊分類相對來說還是要比精準分類好


沒辦法,只有再分分類了,用樹形目錄


推薦閱讀:

真理屠夫寇基雷這個名字是如何想到的?
一個樓盤如何制定修建性詳細規劃?
各大耳機品牌的logo都有什麼含義?
替換Adobe 系列amtlib.dll到底是什麼原理?

TAG:網頁設計 | CSS | 設計 |