UI 模式类之一----数据输入模式

一表单类

       1)      宽松格式

      问题：

              用户需要快速的输入数据并能够自动解释用户的输入.

      使用场景：

               当太多的选择框、单选按钮和复选框造成用户进入系统的输入过程太复杂时。

               当用户填充表单的时间比想完成的实际工作占用更多的时间。

               当你想收集关于一个主题而需要输入时，例如一个物理位置或者一个给定开始时间的一个事件。

               当期待的输入能容易的被程序解释时。

               而当用户可能询问一些事情时不要使用。仅适用于可以严密定义的功能。

      方案：   

               一个文本输入域连同一个文本标签描述想输入什么。宽松格式的整个理念是转换用户输入接口问题为一个可编程问题。在整个背后，有一个解释器按照模式检查输入，并转换它们为格式化的值。

 

       2)      结构化数据

      问题：

            用户需要快速输入数据进入系统，不用强制从选择框中选择数据或者其它的选择机制。

        适用情景：

               当填充成了每天的任务，而填充数据需要太多的选择框、单选按钮和复选框使输入过程太复杂。

               当用户填充表单时间相对要完成的工作占用更多的时间。

               当你想收集特定类型的数据，例如邮政编码、一个日期或时间、一个电话号码。

               当你期待的输人遵从特定的格式能容易的由软件来解释。

               而当输入数据能以多种方式解释时不要使用。

        方案：

                一个文本输入域连同一个文本标签描述期待什么输入。标签描述输入有效数据用户必须遵守的格式。

                通常认为这是为用户提供的帮助机制，例如一个日期选择日历来帮忙以正确的方式填充输入框。当多次这样做时，用户慢慢地从帮助机制中学习到如何以格式化方式正确的输入数据。                    

        3)      填空模式

      问题：

               用户进入系统需要输入数据

      使用情景：

               当你发现你为输入域创建的文本标签不能清楚解释输入域时.

               当你发现你为输入域创建了一个长的复杂的标签,转而使它难以使用户理解.

               当你把输入域放入句子中能够有效表达它的上下文时.

               当填充输入域是强制的或者是必须时，而给句子留下未填充部分给用户制造了麻烦。

               使用一个相对小的输入域并作为一个句子的一部分。如果你有许多输入域，把它们都放到一个句子中看上去更令人讨厌，因为所有的输入域都在句子的上下文中，句子结构强制用户从头到尾读所有的句子。

              如果有许多输入域不用填充时不要使用.

     方案:

             组织你的输入域(一个文本框、单选按钮、复选框、组合框)好像它们是一个句子的一部分。写一个句子让用户通过选择或填充输入域为句子填空。

             当输入域不是插在句子的开始或结尾时，使界面具有大体的可读性和可理解性是重要的，如输入域不能占用多于一个文本行的高度的空间。因此输入框和下拉列表更适合该类功能。

             这个模式通常在应用中借助条件过滤大的列表中使用。如在APPLE的iTune应用中，这个模式用来创建为智能播放列表的过滤条件。

 

        4)      输入提示

      问题：

              用户需要输入数据来进入系统

      适用情景：

              当输入框标签不能完全解释输入框应该输入什么或者当使用这样的标签对界面感觉多余时。

              当一个输入例子或者问题答案可以填入输入框并可以作为输入框的解释时。

              当你想节约标签占用的空间时。

             与一个标签组合使用，并进一步解释需要什么种类的输入时。

      方案：

              一个输入编辑框用输入例子或问题填充，并提示用户应该做什么或者填入什么。

              输入提示模式大多使用下拉列表或文本输入框。当下拉列表有一个用户可以选择的固定集合，可以使用Select 或Choose单词来提示。对于文本输入框，提示字符串的开始可以使用：ENTER、TYPE、SEARCH等字符串，结束字符串使用一个名词描述。例如ENTER CITY 或者ENTER an Address.

            对于文本输入框，输入提示模式通常与脚本结合，一旦用户聚集在输入框，提示文本就消失。用户进入输入编辑框输入内容时，提示文本自动消失，编辑框被空出让用户来填充实际内容。

 

        5)      好的默认

        问题：

             用户需要输入数据来进入系统，而一些选项很可能匹配默认值。

      适用情景：

              当用户必须在许多选项中选择，而一些选项很可能匹配其它用户已选择的默认值。

              当系统可以做一些用户可能选择什么合理猜测的时候。

              当填充没有默认值的复杂表格或者当有许多项需要选择从而阻碍用户完成填充表格时。

              而在输入域需要用户考虑时不要使用该模式，例如对新闻的订阅或接受网站的条款或协定时。

      方案：

              下拉列表或文本域预填充或预选择一些合理的默认值。这些默认值是对用户可能选择的合理的建议值。

 

        6)      验证码

       问题：

                应用需要校验用户提交的数据。

      适用情景：

             网站具有让参观者评论、登记会员的特征，或其反面，主动提交内容到网站经常会受到来自垃圾机器人的攻击。由这样的垃圾机器人提交的内容可以比作垃圾邮件。然而垃圾机器人主要的功能是创建到特定网站的链接，使网站能够在搜索结果中提高名次，例如GOOGLE.COM。这些垃圾机器人很少做与网站主题相关的任何事情，因此归类为垃圾软件。

             为了避免这样的垃圾，校验需要被引入。整个想法是创建一种区分用户和自动机器人的方式。

             该模式用在：

                 当你的WEB应用受到来自恶意WEB机器人试图在网站上提交恶意内容的攻击时。

                 用来保护你的网站，避免来自自动机器人的攻击。

                  当提交内容到你的网站的能力在没有登录（包括登记过程）时需要屏蔽时。

       方案：

                校验的最流行的形式是图形校验码。用户在一个分离的表格输入域中输入图形中读到的字母或数字。为了预防垃圾邮件制造者使用OCR软件读取图像，图像使用不同的方式制作，使它难以由计算机解释，而同时维持可读性。

               如果用户按照图像中的符号成功输入，用户的内容被提交到网站，否则，内容被拒绝。由于一些校验图像因为强壮的图像操作已经暴露因此甚至不具有可读性，因此通常允许用户许多次来输入校验文字。

         7)      原地编辑

       问题：

                用户需要容易和快速地编辑页面上的值。

        适用情景：

                  当用户仅需要编辑一个值（或者很少几个），不是许多时。

                  当用户需要编辑的值是一个简单的格式，例如一个文本字符串。

                  当你已经对用户进行认证（已经登录）或者如果你不关心他的真实性时。

                  如果你想使用户无需进入管理页面而是呆在相同的页面就能够编辑一个值时。

         方案：

                  页面的一个元素,例如一个标题,在没有登录时以它正常显示的方式显示到页面,可是,一旦登录,用户使用鼠标划过这个元素,它的背景色高亮显示,并且一个提示出现提示用户可以点击该元素编辑它.一旦用户点击这个元素,它就转变成一个输入域(文本框,下拉框等) ,也有一个保存按钮和一个取消按钮.通常输入域匹配原先元素的式样.所以如果原先元素是一个20pt尺寸的header,输入域的字体尺寸也是20pt。相同式样确保用户在原先的元素与新的可编辑元素之间可以产生联系.

                  用户然后能够编辑输入域的值(和旧元素的值相同) ,点击保存或取消.如果保存按钮被点击,值通过AJAX调用被保存到底层的数据库.元素的视图重新变成原先的式样(例如无输入域的header) ,但现在是新的值.如果取消按钮被点击,元素视图变成原先的式样,无任何变化.

                  这个模式通常与AJAX技术(通过JAVASCRIPT异步调用服务器,不需要页面刷新的一种技术)配合使用。目前有许多JAVASCRIPT库,可以提供即时能用的原地编辑器功能。

           8)      所见即所得（WYSIWYG）

         问题：

                   用户想增加格式化的文本内容，但不知道如何写HTML。

         使用情景：

                  当你想给用户对于他的内容当发布时像什么一个清楚的指示时。

                  当网站用户对于使用HTML编辑软件（例如textile或markdown）来格式化文本不熟悉时。

                  用在通过降低门槛让你的用户能增加格式化的内容到你的网站时。

                  当你想使用一个容易的方式在你的站点的一格式化的内容中集成媒体，而不需要HTML或任何其它语法知识时。

                  当用户倾向于花费时间来纠正小的布局细节。或当用户编辑时能够即时看到格式化的结果，从而他们被信心鼓励，可以快速开发出好的外观结果。

                  而如果你想保持HTML语法干净请不要使用该模式。许多WYSIWYG编辑器能产生可怕的HTML代码。

                  如果你想编辑器在所有的浏览器中能够工作也不要使用该模式。很少有WYSIWYG编辑器能支持所有的浏览器，如果那样，它们通常仅支持浏览器的最新版本。

        方案：

                  使用许多JAVASCRIPT脚本库之一来转换<textarea/>HTML域进入全功能的WYSIWYG编辑器，转换结果作为输入，编辑输出被格式化显示到用户的屏幕上，除此以外当内容被发送到服务器存储到数据库时还以HTML进行格式化。

                  通常需要定制编辑器适合你的需要，取消不需要的功能。你可能选择不允许图像插入，或不允许篡改字体颜色或字体—或甚至强制用户仅使用一个预定义的CSS类列表。

 

         9)      实况预览

       问题：

               用户想尽可能快的检查表单域如何变化影响最终的结果。

       使用情景：

                当你想为用户提供他创建内容的一个实时预览时。

                当用户在没有一个预览时对领会最终的输出有困难的时候。

                而当输入比较简单和输出结果不依赖特定的布局时不要使用该模式。

       方案：

                修改表单并即时更新实时预览且贯穿与表单的整个交互过程。该模式不用等待用户提交表单，而代替可以使改变能即时在预览中显示。每个用户输入的有意义的事件都导致一个浏览器端的处理。

 

        10)   密码强度仪表

       问题：

                为了预防恶意攻击，你想确保你的用户口令足够强大。

        适用情景： 

                  当你想使你的用户能为他们的用户帐号选择口令，且口令足够强大难以被人或计算机破解或猜测。

                  当你想给攻击者提高进入系统来启动篡改你的系统的门槛。

                  当你想确保用户知道什么是好的口令，并使他们遵从这样的指导选择口令。

       方案：

                在口令输入域输入的口令被一个水平比例尺测量（从无到最大安全）。如果口令是弱的，仅水平比例尺的一小部分高亮，相反如果口令强大，那么水平比例尺大部分高亮。

             口令强度也可以由着色条指示，着色颜色与好或坏口令相关：绿色指示一个强度高的口令，红色指示口令强度不够。

 

        11)   输入反馈

       问题：

                用户想输入数据来进入系统和期待接收提交结果的反馈。

       适用情景：

                当你想提供给用户一个提交到你的网站内容的反馈时。

                当你想在提交表格发生有关错误能反馈给你的用户时。

                当你想让你的用户知道按计划提交的每个内容在什么地方时。

        方案：

                 在用户通过表单提交内容到你的站点，用户已经提供的数据的错误被绑定到发生的时刻。该模式的目的是通过减少输入错误增强用户体验。

 

 

       12) 日期选择器

     问题：

            用户想基于日期或日期范围来寻找或提交信息。

     适用情景：

             当用户为了提交、跟踪、排序或过滤数据时能容易的选择日期或者日期范围。

             而当用户使用另外的方式输入日期更熟悉和更有效时不要使用该模式。一些用户宁愿通过文本域输入日期。

             当输入的日期更容易通过以文本方式输入日期时也不要使用该模式---一个例子是生日（向后返回18、30、50或70年—为了选择需要更多的点击）。

      方案：

              使用日期选择器并以各种方式激活：

              当点击一个提示选择一个日期的连接时。

              当选中一个输入日期的输入域时。

              当点击一个通常与一个用作输入日期的域绑定在一起的日历图标时。

              一旦激活，一个具有月历的框停留在当前页面，提示用户在月历中选择一个时间。通常仅显示一个月，但一些界面能够显示三个互相挨着的月历，来减轻用户的点击负担，且提供更好的概览。

                                                      翻译自http://ui-patterns.com/patterns/网站

                                                      一些UI模式网站链接:  http://ui-patterns.com/patterns/

                                                                                          http://www.androidpatterns.com/