萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> google drive、dropbox、115等雲存儲列表交互

google drive、dropbox、115等雲存儲列表交互

  列表常用的交互:hover、click、double-click、right-click、multiselect、Gdrive、Dropbox、115等雲存儲的思考,以及他們對列表的操作的對比。

  Gdrive沿用了Google Docs的風格,使用了簡潔的圖標代替了文字操作。Gdrive和Dropbox整體的界面風格屬於清新、簡潔類型,也是極簡主義設計趨勢。

  1、Gdrive的hover態:

google drive、dropbox、115等雲存儲列表交互 三聯教程

  注: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的操作,符合本地操作文件習慣)

  專注,簡單而不簡陋的設計……

  文章來源:簡單而不簡陋

copyright © 萬盛學電腦網 all rights reserved