User Interface

Designing Web Interfaces

直接了當

  • 讓頁面可以直接反應用戶的動作,直接編輯、直接移動、直接選擇
  • 頁內編輯:行內編輯、覆蓋編輯圖層、表格編輯、群組編輯、模塊編輯
    • 行內編輯:不脫離上下文
      • 怎麼讓用戶發現這個功能?Flickr 的方法基本上屬於被動式,如果一個頁面會有很多處需要這樣編輯的地方、則或許適合用被動式,否則或許可以更主動地以其他視覺提示來告知使用者
      • 怎麼存檔?onblur 自動存,或者提供儲存鈕都不錯。(onblur 自動存可能還不算直覺就是了。使用者適應 ajax 技術,還要一段時間)
      • 易用:觸控螢幕沒有 hover,所以提示不能僅僅仰賴 hover 來做。Flickr 其實還是有提供傳統編輯介面,又有些網站會加個 edit 連結
      • 多欄位的話可以用「編輯模式」的想法,切換後全部可編、儲存後又都不可編。
      • Yahoo 1-7 的例子表達「需要即時反應」的想法,切換時後面的談話泡泡樣式也會即時變動。
    • 覆蓋編輯圖層
      • 類似為「切換到編輯模式」,適合使用者不會「常常用」,且有多個東西為整體一起編輯的複雜版面。
      • 喪失部分 context (事實上為了讓使用者專心修改,跳出的圖層盡量要搶奪視線)
    • 表格式編輯
      • 首要考慮外觀可讀(不然就不用做成表格)
      • 盡量模仿 Excel
    • 群組編輯
      • 就是一個 switch 把目前的畫面直接變成可編輯
      • 需要考量易見、易退出、Switch 的方式盡量一致(切過來、切過去)
    • 「設定」區塊
      • 點選 switch 在頁面上拉出面板(不是用覆蓋的)
Creative Commons License
本站文字除特別聲明者外,係採創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣授權條款授權,利用前請見說明