如何设计一个好的[扫描码]界面？作者分享了他自己的一些想法。

由于公司的产品最近已被扫描以帮助网络完成订单支付，我们已经研究了一些主流APP中的扫描代码页。在这里，我们将从页面元素，权限获取，提示信息和交互模式中创建一个简单的维度。分析总结，希望对您的设计有所帮助。

就我而言，通常用于清扫的最常见的应用程序是支付宝，微信和Moby。一般来说，常见的扫描码界面主要包括扫描帧，扫描动画，页面标题和返回按钮，扫描类型切换，使用帮助和其他视觉元素，这将涉及获取系统功能权限，如相册，相机焦点调整，手电筒等。

　1.相机权限获取

获得移动电话系统权限的时间可以分为安装APP的时间，首次启动时的时间，以及特殊功能何时需要获得重要的敏感权限。安装APP时，通常会获得大多数基本权限。当用户关注隐私时，用户经常选择拒绝许可而不是仔细阅读以快速进入应用程序。如果未获得相机权限（即，当用户首次单击扫描以打开扫描代码页或判断用户关闭相机权限时），将提示用户打开相机权限（iOS）或直接在弹出窗口中。允许或拒绝相机权限（Android）。

值得一提的是，淘宝支持切换前后摄像头，虽然我想不出在哪里使用它们，但绝对领先一步。

可以轻松访问相册权限，也可以使用相机获取，但并非所有扫描代码都需要从相册中识别，例如Moby。

　　2.扫码页面标题

扫描页面导航栏标题可以像网易云音乐一样被称为扫描，或者就像支付宝页面一样。当然，您也可以在体验上做一些微妙的改进。例如，微信将随扫描对象而变化。例如，当扫描封面时，标题将变为“前/电影海报”，其对应于底部的扫描对象的类型。 Mobai是“扫描码解锁”，这是一个集成了两个页面的功能（如支付宝扫描码和支付是两个独立的页面），告诉用户扫描和解锁的两个功能可以在一个页面上完成。

　　3.扫描框位置和大小

看到上面的微信扫描页面，除了页面标题的变化外，我们发现扫描盒的位置和大小也值得捏。通常建议将该位置置于居中位置，因为握住手机时用户的视觉焦点较高。尺寸不应太大，并且获得太多图像将降低QR码识别的速度。 Moby的扫描帧相对较大，估计是因为QR码本身不包含太多信息，并且QR码符号太小。实际上，扫描码帧的大小也反映在页面掩码的透明度中。例如，QQ不使用掩模，扫描区域和非扫描区域仅通过几个顶角区分。

　4.扫码动画

除了为用户提供最直接的反馈外，扫描码动画效果还传递了品牌情感的有效手段。常见的形式是向下移动的细长灯条或网格（微博）。此外，扫描对象的边缘突出显示高科技纹理（如QQ），以及与AR色调相匹配的炫酷效果（如支付宝AR）。

　5.无网处理机制

我们也想以微信为例。大多数APP没有明确处理没有网络的情况向用户提供反馈（可能考虑到每个人的手机一年四季都在线上）。一旦打开扫描代码页，即使它在其他页面上，它也总是很愚蠢。统一的无网络提示栏，而微信在扫描代码页上清楚地表明网络不可用。

　　6.帮助提示

一般提示信息是指扫描框下方显示的文本信息，例如微信提示“当QR码/条形码放在盒子里时，它可以自动扫描”，但是Moby还添加了一个图像来通知车辆的用户。 QR码的位置，并有一个特殊的“使用帮助”窗口。但是，支付宝似乎更值得学习，它的提示会随着时间的推移而改变，默认是“放在盒子里，自动扫描”，结果会不会变成扫描结果“;请瞄准二维码，条形码，耐心等待。

未扫描二维码：支付宝长时间没有扫描二维码，会弹出提示“请勿扫描二维码？单击此帮助“，单击”单击此帮助“以跳转到客户服务页面。 QQ提示“ldquo;没有有效的内容被识别，请从另一个角度再次尝试”，在底部吐司，但只有一次。

扫描到其他二维码：微信打开一个新页面提示：如果您需要浏览，请长按URL复制并使用浏览器进行访问。天猫对话框提示：此链接将跳转到外部页面，可能存在风险。该按钮用于取消/打开链接。

　7.可识别类型

不同类型的图像被不同的应用程序识别。微信包括常见扫描码（二维码，条码），封面（书籍，CD，电影海报），街景和翻译，支付宝，天猫扫描码和AR，QQ可识别二维码，文字，星面等。可以识别名片，字典更像是一种扫描工具。不过，与微信可以识别​​的CD封面相比，网易云音乐不支持专辑封面的识别。

如何切换识别类型取决于具体情况，大多数需要用户在页面顶部或底部切换，而QQ的方法更加独特，即“无法切换”（结果是基于扫描码对象），诸如QR码，文本，星面等信息可以被识别为在其他页面上显示的附加信息。尽管用户不太可能执行一步操作，但是不知道结果符号不满足用户的期望。

　　8.扫码历史

淘宝和天猫都提供了扫描代码和支持查询的历史记录，使扫描代码具有深远的意义。

　9.我的二维码

“我的二维码”是一个社交应用程序，指的是我的名片（如指甲，微信），以方便他人加我的朋友;在支付应用程序中，定义相当模糊，在我看来，更多应该参考我的支付代码，以便其他人可以收钱并收集自己的钱。但在支付宝中，“我的二维码”仍然是朋友，扫描码页无法直接调用，需要转到个人资料页面“我的支付码”“我的收据代码&rdquo也不在扫描代码页，你需要从主页输入，按照“扫描”和“代码”，认知的强相关性，扫描代码页应“提供我的xx码”。

个人意见：支付宝已支付+社交，扫描代码页不提供用户自己的代码非常不舒服。

　　10.手电筒

关于手电筒的功能许可，Mobai是最全面的。当环境光线太暗时，它会自动打开并可以手动关闭。它也可以手动打开和关闭。然而，就像相机的声音和闪光一样，有时用户想要低调，所以默认关闭比自动启动要好得多，“首先用户认为”等于“不要主动用户”。相机的自动光圈能够在大多数黑暗环境中识别QR码。另一种方法是微信和支付宝的“灯光”（触摸）灯亮，即默认不显示手电筒开关，手电筒开关显示在黑暗环境中。权衡是默认显示手电筒开关，用户可以根据所需的选择打开和关闭手电筒开关。

但是，微信在这里错过了一个细节。当手电筒打开时，按钮名称仍然是“轻触”，支付宝是正确的“照明/照明关闭”开关。

　　11.焦距调节

当扫描码太远而你需要放大时，支付宝和微信支持直接捏缩放和缩放。处理天猫有两种方法：打开扫描代码页后，默认显示拖动条，几秒后消失，然后点击屏幕后显示;另一个是捏。某些应用支持自动对焦。当相机识别出QR码太远时，它会自动前进以进行准确识别，但尚未找到任何示例。

　　12.输入机制

等效扫描码的输入机制。 QR码本身是一个信息载体，可以帮助用户快速输入信息。如果网络环境不好，则需要手动输入信息（在某些情况下，输入更快）。你可以参考Moby和ofo，你可以直接输入车辆。数字已解锁或获得密码。

　　13.辅助快速登录

扫描代码为PC端登录提供了一种新方法，例如钉子和老板。

　14.长按图片识别其中二维码

以上几种设计建议是针对有形扫描码页，并且有一种“不可见”，即长按图片，弹出选择菜单，然后识别图片中的二维码。目前，微信中有很多应用。其他地方不知道他们是否有类似的功能。

　　总结

以上所有内容都是从个人角度对扫描代码页的交互设计的调查结果进行总结分析，如果有任何不适当的欢迎。以上结论并未在实际工程中得到充分利用，需要根据实际情况选择最合适的解决方案。

本文最初由@张鹏涛TAO出版。未经许可，禁止复制。

该地图来自PEXELS，基于CC0协议