柏強的網路探險記

Designing Web Interfaces

• Patten: 描述遇到某個常見問題時，解決問題的方法核心理念
• 本書大致是互動設計模式
• 前言的 VI 就是全書中心
• http://www.flickr.com/photos/designingwebinterfaces/ BY-NC-SA

直接了當

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

http://shenyas.wikidot.com
http://qingda.wikidot.com
http://xians.wikidot.com
http://ensh.wikidot.com