一 需求

以用户登录为例，一步步完成交互设计。

先明确字段规则，然后设计字段的交互。

先明确业务规则，然户设计业务的交互。

最后是外围需求的完善。

这个过程可以称为规则驱动的交互设计。

主要是通过下面三个步骤来完成的。

步骤一：字段规则的交互。

步骤二：业务规则的交互。

步骤三：外围需求的完善。

二 字段规则的交互

1 定义字段规则

在登录过程中，用户要输入手机号和密码。所以需要定义这两个字段的规则。

1）手机号字段规则

必须是 11 位数字，且第一位是1。

手机号除了这个简单的规则，还可以有更多规则。全国的手机号是统一分配的，前三位有特定含义，如130-133 号段是联通的，134-139 号段是移动的。如果做严格限制，可定义不是这些号段不允许注册，避免用户输入错误号码。但不要漏掉号段，否则将导致正常手机号无法注册。而物联网的号段是 146、148等，可禁止物联网手机号进行注册。

2）密码字段规则

不同系统的安全要求不同，因此规则也不同。本案例中，可要求密码必须是6位以上，并且是数字和字母的组合，且不能有特殊字符，如空格等。

2 设计字段交互

基于用户操作的事件，来思考用户每操作一步，系统能做什么事情。用户操作的事件包括获得焦点、输入字符、失去焦点、单击按钮等。系统要对这些事件做出响应，包括改变颜色、限制输入、显示功能、弹出键盘等。这些响应要符合四大交互原则。

1）手机号输入框部分

（1）系统的初始显示

用户打开界面后，先要明确初始显示信息。比如，显示上次登录成功的手机号，或者自动获取手机号并显示。本案例中，显示的是自动获取的手机号。

（2）单击“其他方式登录”

在登录界面，假设用户单击的是“其他方式登录”。此时，系统仍可显示上次成功登录的手机号（非本机号码）。

为了说明交互，我们可忽略上面这种情况，即假设不显示手机号。

在这种情况下，系统响应是：手机号输入框获得焦点，并弹出数字键盘，且只允许输入数字，输入其他字符无效。这些限制体现了防错原则，即避免用户输错。

（3）输入一个字符

在用户输入一个字符后，显示如下图。

系统的响应有去掉“手机号”几个灰字，并显示删除标。其中去掉原有的字，体现了反馈原则，让用户知道操作成功了；显示删除标，体现了撤回原则，让用户可快速删除错误输入。

（4）输入若干字符

在用户输入若干字符后，系统显示如下图。

系统的响应有手机号显示为三段，且不允许超过 11 位数字。这些都体现了防错原则，通过提示避免用户输错，通过禁止不必要的操作，来避免错误的产生。

到此，我们分析完了手机输入框的交互。

2）密码输入框部分

（1）单击密码输入框

在单击密码输入框后，手机输入框失去焦点，并且密码输入框获得焦点。此时系统的响应有手机号输入框的删除标消失，并改为字母键盘。

（2）输入一个字符

在用户输入一个字符后，显示如下图。

系统的响应有：去掉“请输入密码”几个灰字，并显示删除标，输入的字符会在2秒后变成小黑点。其中去掉原有的字，体现了反馈原则，让用户知道操作成功了，显示删除标，体现了撤销原则。

3）登录按钮部分

首先，当手机号为 11 位 数字且密码不为空时，登录按钮为可单击状态；其次，在用户单击登录按钮后，页面显示登录成功或登录失败，

三 业务规则的交互

该步骤主要实现业务规则的交互。业务的考虑点包括主要流程、分支流程、异常流程和业务规则。

主要流程：用户输入手机号、密码、之后登录成功，这就是主要流程。

分支流程：用户用邮箱登录、第三方账号登录等，这就是分支流程。

异常流程：用户输错密码等，这是用户不希望发生的，是异常流程。

业务规则：登录的业务规则是安全规则，如用户用新设备，新 IP 地址登录处理流程，或者用户被禁的判断标准和解除条件等。在实战中，业务规则可不断加入，不断完善，不是一次完成的。

针对登录流程，我们重点梳理异常流程和业务规则。

1 如果被加锁：则提示稍后再来。

2 如果被禁用：则提示被禁用，并引导解禁操作。

3 如果是新设备，则除了密码正确，还要进行手机验证码的验证。

4 如果密码错误，如在 N 分支内连续输错，则

（1）错误次数 >= 1且 <= 2，提示账号或密码错误，请重新输入。

（2）错误次数 >= 3且 <= 4，提示账号或密码错误，还剩 6-M 次机会，M 为错误次数。

（3）错误次数 >= 5且 <= 6，则要求进行手机号验证。

（4）错误次数 >= 6，则提示账号已经被锁定。

四 外围需求的完善

登录的外围需求见下表。

| <br>名称<br> | <br>内容<br> |
| <br>前置条件<br> | <br>考虑网络异常和是否登录两种条件。<br><br>网络异常：在单击登录后，要有网络异常提示。<br><br>是否登录：不需要考虑。<br> |
| <br>后置条件<br> | <br>考虑跳转页面、创建的数据和进行的操作三种结果。<br><br>跳转的页面：登录完成后回到登录前页面。<br><br>创建的数据：无。<br><br>进行的操作：无。<br> |
| <br>最小保证<br> | <br>考虑保留信息和记录日志两种保证。<br><br>保留信息：无。<br><br>记录日志：需记录用户登录成功或失败信息，含有 IP 地址、登录设备等。<br> |