首页 » 科技 » UI设计范式之三:实时预览

UI设计范式之三:实时预览

问题综述 用户总是希望第一时间就能知道自己填写的表单递交以后会是什么样的结果。 举例 适用范围 *当你原意为用户提供其填写内容的实时预览功能的时候 *当你觉得要求用户填的内容比较复杂,以至于用户较难预料递交以后会是输出什么效果的时候 *简单的表单输入无需实时预览;最终输出内容不涉及到排版的情况也无需使用 解决方案 页面里实时更新着用户在表单中输入内容的预览效果。用户不在需要等到递交或保存以后才能看到结果。浏览器直接是根据用户在页面上的关键操作把该处理的数据都处理掉然后预览给用户看。 (译者:使用成熟的AJAX技术可以轻松实现这一效果) 更多例子          当你在www.interaction-design.org网站上添加文章的时候(图片下半部分), 你无需点"Add note"就能实时看到文章的预览效果(图片上半部.....

问题综述

用户总是希望第一时间就能知道自己填写的表单递交以后会是什么样的结果。

举例


Example image showing 'Live Preview'

适用范围

  1. 当你原意为用户提供其填写内容的实时预览功能的时候
  2. 当你觉得要求用户填的内容比较复杂,以至于用户较难预料递交以后会是输出什么效果的时候
  3. 简单的表单输入无需实时预览;最终输出内容不涉及到排版的情况也无需使用

解决方案

页面里实时更新着用户在表单中输入内容的预览效果。用户不在需要等到递交或保存以后才能看到结果。浏览器直接是根据用户在页面上的关键操作把该处理的数据都处理掉然后预览给用户看。
(译者:使用成熟的AJAX技术可以轻松实现这一效果)

更多例子


 
   
   当你在www.interaction-design.org网站上添加文章的时候(图片下半部分), 你无需点"Add note"就能实时看到文章的预览效果(图片上半部分)。   
 

原理总结

这个设计范式增加了页面的交互性。用户不在需要点击递交或者保存按钮并等待页面刷新后才能检查自己刚才输入的内容是对是错。取而代之的是实时预览。


 
  该范式最后编辑于 10/31, 2007

【本文翻译仅为外语学习及阅读目的,原文作者个人观点与译者及译言网无关】

0

返回正文评论