由于最近公司的产品要做扫码功能以辅助web端完成订单支付，所以就研究了一些主流APP中的扫码页面，这里就从页面元素、权限获取、提示信息、交互方式等维度做个简单的分析总结，希望能对你的设计有所帮助。

　　就我个人而言，平常用到扫一扫功能比较多的APP是支付宝、微信和摩拜。一般来说，常见的扫码界面主要包括扫描框、扫描动画、页面标题及返回按钮、扫描类型切换、使用帮助等视觉元素，会涉及到相册、相机焦距调节、手电筒等系统功能权限的获取。

　　1.相机权限获取

　　获取手机系统权限的时机可分为APP安装时、首次启动时、使用特殊功能需要获取重要敏感权限时。APP安装时一般能获取大多数基本权限，而随着用户对隐私权的重视，用户首次启动APP时往往会选择拒绝权限代替认真阅读以便快速进入应用内部。如果未获取相机权限(即用户首次点击扫一扫打开扫码页面或判断出用户关闭的相机权限时)，一般会在扫码页面弹窗提示用户开启相机权限(iOS)或在弹窗中直接允许或拒绝开启相机权限(Android)。

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

　　相册权限的获取跟容易，或者会和相机一同获取，但并非所有的扫码都要支持从相册中识别，比如摩拜。

　　2.扫码页面标题

　　扫码页面导航栏标题可以像网易云音乐一样叫做扫一扫，或者像支付宝页面一样干脆不要标题。当然也可以做些体验的细微提升，比如微信会随着扫描对象的不同发生变化，如扫描封面时标题会变成“封面/电影海报”，和底部扫描对象类型相呼应。摩拜则是“扫码开锁”，算是集成了两个页面的功能(如支付宝扫码和支付是两个独立的页面)，告知用户在一个页面可以完成扫码和开锁两个功能。

　　3.扫描框位置和大小

　　参看上图微信扫一扫页面，除了页面标题的变化，我们发现扫描框的位置、大小也值得拿捏。位置一般建议居中偏上，因为用户手持手机时的视觉焦点更偏上方。大小不宜过大，获取过多的图像反倒会降低二维码识别的速度。摩拜的扫描框比较大，估计是因为其二维码本身涵盖的信息不多，而且二维码标牌偏小。其实，扫码框大小还体现在页面遮罩的透明度上，比如QQ就没有用遮罩，扫描区域和非扫描区域仅通过几个顶角区分。

　　4.扫码动画

　　扫码动画效果除了给用户提供最直接的反馈之外，也传递品牌情感的有效手段。一般常见的形式是细长光条或网格(微博)向下移动，此外，也有高亮被扫描对象边缘突显高科技质感的(如QQ)，以及符合AR调性的炫酷动效(如支付宝AR)。

　　5.无网处理机制

　　又要拿微信举例了，大多数APP是没有明确处理无网情况给用户反馈的(可能考虑到大家手机常年不断网)，一打开扫码页面就在那一直傻扫，虽然在别的页面有统一的无网络提示栏，而微信则在扫码页面明确给出提示网络不可用。

　　6.帮助提示

　　常规的提示信息指的是显示在扫描框下方的文字信息，如微信提示“将二维码/条码放入框内，即可自动扫描”，不过摩拜还加入了图像指示告知用户车辆上二维码的位置，而且有专门的“使用帮助”弹窗。不过支付宝的似乎更值得借鉴，它的提示语会随时间发生变化，默认是“放入框内，自动扫描”，一直没有扫描出结果时则会变成“请对准二维码、条码，耐心等待”。

　　未扫到二维码：支付宝长时间未扫描二维码，会弹出提示“未扫描到二维码?点此帮助”，点击“点此帮助”跳转到客服页。QQ提示“未识别到有效内容，请换个角度重试”，底部浮出toast，但仅展示一次。

　　扫到其他二维码：微信打开新页面提示：如需浏览，请长按网址复制后使用浏览器访问。天猫对话框提示：该链接将跳转至外部页面，可能存在风险。按钮是取消/打开链接。

　　7.可识别类型