UI設計范式之三：實時預覽 - 網頁設計

http://webdesign.zoapcon.com

問題綜述
用戶總是希望第一時間就能知道自己填寫的表單遞交以后會是什么樣的結果。

舉例

適用范圍

當你原意為用戶提供其填寫內容的實時預覽功能的時候
當你覺得要求用戶填的內容比較復雜，以至于用戶較難預料遞交以后會是輸出什么效果的時候
簡單的表單輸入無需實時預覽；最終輸出內容不涉及到排版的情況也無需使用
解決方案
頁面里實時更新著用戶在表單中輸入內容的預覽效果。用戶不在需要等到遞交或保存以后才能看到結果。瀏覽器直接是根據用戶在頁面上的關鍵操作把該處理的數據都處理掉然后預覽給用戶看。
(譯者：使用成熟的AJAX技術可以輕松實現這一效果)

更多例子

當你在www.interaction-design.org網站上添加文章的時候(圖片下半部分), 你無需點"Add note"就能實時看到文章的預覽效果(圖片上半部分)。

原理總結

這個設計范式增加了頁面的交互性。用戶不在需要點擊遞交或者保存按鈕并等待頁面刷新后才能檢查自己剛才輸入的內容是對是錯。取而代之的是實時預覽。

TAG: 網頁設計 | web design |