inspirr

跳到主文

歡迎光臨inspirr在痞客邦的小天地

部落格全站分類:

  • 相簿
  • 部落格
  • 留言
  • 名片
  • 8月 20 週一 201219:59
  • UI設計范式之三:實時預覽_網頁設計

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

http://webdesign.zoapcon.com

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

舉例

適用范圍

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

更多例子


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

原理總結

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


TAG: 網頁設計 web design
文章標籤
全站熱搜
創作者介紹
創作者 inspirr 的頭像
inspirr

inspirr

inspirr 發表在 痞客邦 留言(0) 人氣(0)

  • 全站分類:
  • 個人分類:
▲top

個人資訊

inspirr
暱稱:
inspirr
分類:
好友:
累積中
地區:

熱門文章

  • ()HTML5標記div、section、article使用說明_19
  • ()臉頰長斑的原因_507
  • ()英文親情名言_31
  • ()4種常見英文祝賀信的寫法及其范文_313
  • ()骨髓移植_1682
  • ()畫Web流程圖的一點心得_網頁設計
  • ()應聘網頁設計師常見的8個面試試題和答案_433
  • ()羊膜移植基礎及眼科臨床應用_1695
  • ()CSS制作網頁技巧-單圖片按鈕實例_475
  • ()維生素缺乏與皮膚病_934

文章分類

  • 未分類文章 (1)

最新文章

    最新留言

    動態訂閱

    文章精選

    文章搜尋

    誰來我家

    yongxjb
    PIXNET Logo登入

    參觀人氣

    • 本日人氣:0
    • 累積人氣:106,178