列表常用的交互:hover、click、double-click、right-click、multiselect、Gdrive、Dropbox、115等雲存儲的思考,以及他們對列表的操作的對比。
Gdrive沿用了Google Docs的風格,使用了簡潔的圖標代替了文字操作。Gdrive和Dropbox整體的界面風格屬於清新、簡潔類型,也是極簡主義設計趨勢。
1、Gdrive的hover態:
注:hover時高亮,幫助用戶定位和聚焦當前行。
click態:
注:單擊為選擇一行,列頭操作會根據需求顯示對應的功能。
double-click不支持
right-click態:
注:鼠標右擊提供選擇當前行、列頭出現對應功能操作和右鍵操作菜單,展現給用戶過多和重復的信息、阻礙用戶使用的流暢感和保持操作入口的唯一性。用戶只想進行右鍵對當前文件操作,而此時提供過多信息超出用戶預期。
multiselect(多選)
為高級用戶提供了便捷的多選操作,Ctrl進行非連續文件多選,Shift進行連續文件多選,符合用戶本地操作文件的習慣。
2、dropbox的hover:
注:hover時高亮,且在行末尾預設"獲取連接"操作。
click態:
注:click時,選中行,列頭內容變換為功能操作和選擇信息,此處的變換有些超出用戶的預期。
double-click時為查看操作,對於文件夾為打開操作
right-click態:
注:右鍵操作功能和單擊時列頭出現功能保持一致,鼠標右擊僅提供右鍵操作;而google drive鼠標右擊則提供選擇當前行、列頭出現對應功能操作和右鍵操作菜單,展現給用戶過多和重復的信息、阻礙用戶使用的流暢感和保持操作入口的唯一性。
multiselect(多選)
此處和Gdrive的操作相同
3、115的hover:
注:鼠標hover時,出現"標星"、"雙擊預覽文件"、背景高亮等信息;"雙擊預覽文件"的提示作為額外的信息干擾用戶操作,此提示信息可以作為用戶教育、在初次使用提示即可。
click態:
注:click時,列頭出現"設置"圖標,點擊後展開操作菜單,此處圖標為灰色且表達不明確,操作隱藏太深。
double-click為打開文件操作
right-click態:
注:right-click時,選中行、列頭出現設置圖標、以及右鍵操作菜單,此處和Gdrive操作相同。
multiselect(多選)
支持Ctrl進行非連續文件多選,不支持Shift進行連續文件多選。
小結:
怎樣的列表交互能愉悅用戶。。。
Gdrive的hover(無需展示過多信息,幫助用戶快速定位聚焦)
Gdrive的click(選中當前行,展現可執行操作)
dropbox的right-click(僅僅是當前行的操作)
dropbox的double-click(打開文件或文件夾)
Gdrive的multiselect(Ctrl和Shif的操作,符合本地操作文件習慣)
專注,簡單而不簡陋的設計……
文章來源:簡單而不簡陋