最近在和奶奶视频的时候，在引导她注册抖音，让她有时间看看外面更加精彩的世界，而不是围绕着我们的一日三餐，但是注册的时候，要让她滑动滑块验证码去得到短信验证码（要我说，这真的很无语，直接发送手机验证码不行吗？），但是她的手指没有那么灵活，老是滑不到合适位置，我只能说等我五一回去再给注册了。
因为这件事，我突然想到，是不是可以设计一个适配老人的验证码，说干就干！
当然，我也只是简单的从几个方面去做适配，而不会太深入，毕竟只是个小菜鸟啦。
ok，我们开始吧。
老人的认知和技术水平不同，会导致他们在使用最新的APP的时候，会碰到不会使用、看不清图片、触摸不灵敏等问题，因此，我们可以从几个方面去做优化：
1.使用简单的验证码： 这是最基础的一步。对于老年人来说，图形、语音或文字验证码都可能很难理解。所以，我们在设计验证码的时候，需要尽量使用简单的、易于识别的验证码，这样他们就能更容易地完成验证过程。举个例子，使用简单的数学问题或选择题等（可能即使这样，对于老人来说，也是过于困难了，因为他们可能理解不了。）相反的例子就是12306那种，各种奇葩问题和图形，完全是隔绝了老人使用的可能性。
2.增加可访问性选项： 老年人的问题可能是多种多样的，比如眼神不好，或者听力不行，因此，我们如果能为老年人提供可访问性选项，如语音验证码或通过邮件或短信收到验证码等，那么久可以使他们更容易地完成验证过程。
3.增加反馈机制： 这个是很必要的。如果我们在设计验证码的时候，为老年人提供明确的反馈，告诉他们他们是否已经正确地输入验证码，那么可以帮助他们避免犯错和挫败感（老是输错，可能也是不行的，哎）。
4.优化验证码设计： 这个是上面所有方案的基础。对于老年人来说，使用明亮的颜色、更大的字体、更清晰的字体等设计元素可以使验证码更容易识别和使用。这样，才能让上面所有的建议都变得可行。
列举完之后，我们就来看看具体代码吧。
1. 使用简单的代码
a. 数学问题验证码示例：
1 2 3 4 5 6 7 8 9 | var a = Math.floor(Math.random() * 10);var b = Math.floor(Math.random() * 10);var answer = a + b;var userAnswer = prompt("What is " + a + " + " + b + "?");if (userAnswer == answer) { alert("You are human!");} else { alert("Wrong answer.");} |
b. 选择题验证码示例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <div class="captcha"> <p>What color is a banana?</p> <label><input type="radio" name="captcha" value="yellow">Yellow</label> <label><input type="radio" name="captcha" value="red">Red</label> <label><input type="radio" name="captcha" value="blue">Blue</label></div><style> .captcha p { font-size: 20px; font-weight: bold; } .captcha label { font-size: 16px; display: block; margin-bottom: 10px; }</style> |
如果有其他合适的，也可以补充~
2. 增加可访问性选项
a. 语音验证码示例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | // 生成随机数字验证码$code = rand(1000, 9999);// 使用文字转语音API生成语音验证码$text = "Your verification code is $code";$url = "https://texttospeech.googleapis.com/v1/text:synthesize?key=YOUR_API_KEY";$data = [ "input" => [ "text" => $text, ], "voice" => [ "languageCode" => "en-US", "ssmlGender" => "FEMALE", ], "audioConfig" => [ "audioEncoding" => "MP3", ],];$options = [ "http" => [ "header" => "Content-type: application/json", "method" => "POST", "content" => json_encode($data), ],];$context = stream_context_create($options);$result = file_get_contents($url, false, $context);$file = fopen("captcha.mp3", "w");fwrite($file, $result);fclose($file);// 播放语音验证码echo '<audio src="captcha.mp3" autoplay></audio>'; |
b. 邮件验证码示例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | import randomimport smtplibfrom email.mime.text import MIMEText# 生成随机数字验证码code = str(random.randint(1000, 9999))# 发送邮件验证码sender = "example@example.com"receiver = "user@example.com"message = MIMEText("Your verification code is " + code)message["From"] = sendermessage["To"] = receivermessage["Subject"] = "Verification code"smtp = smtplib.SMTP("smtp.example.com")smtp.login(sender, "password")smtp.sendmail(sender, receiver, message.as_string())smtp.quit() |
其实这块用的比较少，因为实际上，老人不一定会使用邮件（除了那些还没退休的哈哈哈）
3. 增加反馈机制
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <label for="captcha">验证码：</label><input type="text" name="captcha" id="captcha" required><span id="captcha-feedback"></span><script>document.getElementById("captcha").addEventListener("input", function() { var feedback = document.getElementById("captcha-feedback"); if (this.value == "1234") { feedback.textContent = "验证码正确"; feedback.style.color = "green"; } else { feedback.textContent = "验证码错误"; feedback.style.color = "red"; }});</script> |
上面的代码还是很基础的，实际运用过程中，可能还需要在用户输入错误的验证码后，提供更具体的错误提示，帮助他们找到错误的原因。当然，针对老人，我们害可以考虑为验证码增加声音或震动效果，提供更加直观的反馈。（这个可能更加重要，下次有机会补充一下代码）。
4. 使用更明亮、更大的字体等
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | <label for="captcha">验证码：</label><input type="text" name="captcha" id="captcha" required><img src="captcha.php" alt="验证码" id="captcha-image"><button type="button" id="captcha-refresh">刷新</button><span id="captcha-feedback"></span><style>#captcha { font-size: 24px; font-weight: bold; letter-spacing: 4px; text-transform: uppercase; color: #333; background-color: #eee; border: none; border-radius: 4px; padding: 8px 16px;}#captcha-image { display: block; margin: 16px 0; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);}#captcha-refresh { background-color: #fff; color: #333; border: none; border-radius: 4px; padding: 4px 8px; margin-left: 8px;}#captcha-feedback { font-size: 14px; font-weight: bold; margin-top: 8px; display: block;}</style><script>var captchaImage = document.getElementById("captcha-image");var captchaRefresh = document.getElementById("captcha-refresh");var captchaFeedback = document.getElementById("captcha-feedback");// 为刷新按钮添加点击事件，重新加载验证码图片captchaRefresh.addEventListener("click", function() { captchaImage.src = "captcha.php?" + new Date().getTime();});// 为验证码输入框添加输入事件，检查用户输入的验证码是否正确document.getElementById("captcha").addEventListener("input", function() { var xhr = new XMLHttpRequest(); xhr.open("POST", "check_captcha.php", true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { if (this.responseText == "1") { captchaFeedback.textContent = "验证码正确"; captchaFeedback.style.color = "green"; } else { captchaFeedback.textContent = "验证码错误"; captchaFeedback.style.color = "red"; } } }; xhr.send("captcha=" + this.value);});</script> |
可以看到，我们是使用了24像素的字体大小、加粗的字体、以及更大的字母间距，使验证码更易于识别。颜色的话，使用了明亮的背景色（#eee）和暗色的字体颜色（#333），以增加验证码的对比度。以及，为验证码输入框和验证码图片添加了圆角和阴影效果，使它们看起来更加美观。最后是，使用了一个<span>元素，用于显示用户输入的验证码是否正确。
每个人都会随着时间的流逝，慢慢发现，自己变成了以前看不懂的人。老年现在面临的问题，就是我们以后会面临的问题。看着爷爷奶奶们有点羡慕地看着我们使用手机，是有点心酸的。但是他们在使用手机时，我又会担心他们被欺骗，毕竟他们对网络世界的扁平和恶意还不够了解。
验证码能够阻挡一些来自网络的恶意，但是自己本身却也带着一些让他们不适应的元素，所以希望社会企业家们能够在这一方面花点精力，虽然可能不能带来很大的收益，但总归是积少成多，集腋成裘。
验证码产品：免费体验