Inplace Replacement是一種普遍的互動模式,常用來表現大量資料的有限空間中為user展現更多資訊。Sunny同學以前曾經在Design Pattern的presentation中提起過,也叫”Details on demand”, 而在開發眼裡,即是“Row Expander”。這裡稱為Inplace Replacement,意指廣義範圍的具體內容呈現模式,並不拘泥於表單內容擴充的互動,甚至包括“Retractable Menu”。 不管叫什麼,我們來探討一下如何應用這種互動模式。
使用前提
針對目前所給內容,使用者需要更詳細資料,但是由於空間限制和過多元素排列的困難,我們會將一些額外詳細資料隱藏,從而既保持介面簡潔類目明晰,又能夠展示細節而不破壞主體層次。
軟體經常展示給使用者一些圖形化的表單或頁面,由於空間限制,並為了方便絕大多數使用者瀏覽關鍵資料, 每個item所顯示的通常只包括每個條目的幾個關鍵屬性。然而,使用者可能需要更多比最初顯示對象屬性的資訊,此時我們會添加額外的細節,方便他們按需查看。
互動方法
有互動動作才show detail。
由於是按需給予,只有在使用者對相應item作出互動動作時才顯示額外內容。我無法想象如何在包含了所有詳細屬性的資料森林中去定位某個具體條目,這樣對資訊架構者的工作量或者使用者的搜尋能力而言,都是極大的挑戰。Give them what they want才是解決問題的關鍵,因此我們需要根據使用者的輸入(點擊、划動或者滑鼠停留)來觸發展示額外內容。
表現形式
•Details on demand
當選中一個條目時,建立一定的控制項用來展示額外資訊。
•Overview by Detail
顯示對所有對象的預覽資訊並且對於所選對象進行詳細展示。
•Retractable Menu
當導覽列或者資訊組織面板太占螢幕空間時,建立一個並行的很容易反覆點擊的菜單,不用時可以隱藏。
注意事項
•這種互動模式在視覺設計中要做顯著的視覺暗示,比如在結構樹之前加上展開節點,選中對象要加以提示選中狀態。
•確保這種附帶額外資訊的視覺控制項逐漸形成使用者心智模型,使用者在初次看到後就能領悟互動方法。
•確保視覺效果在開關兩種狀態有明顯區別,帶進一步資訊的條目和正常狀態的條目應該區別開來,方便定位。
一個反例,Wifi-Photo裡選中的圖片沒有具體視覺區分。
•只顯示單層額外細節,避免細節嵌套細節。
Inplace replacement只適合單層額外細節,並不適合用在額外資訊中包含清單或表格內容。那樣會形成過多的資訊層次,不利於進一步查看。