登录注册
最新博客
最新资源下载
扫描拍摄 体验自然而流畅的设计
达芬奇密码2018-07-16 13:41
前段时间应产品需求做了一个扫描拍摄的功能，项目过程中或多或少在方案思路、技术实现包括细节设计的问题上引起了不少的争议，项目还在不断尝试实践中，这里简单记录一下做这个需求设计的一些思路和想法，也算是自己对这个项目的阶段性总结。
扫描拍摄，即采用图像识别技术，自动扫描图片内容并进行图片处理，达到用户所需的内容。其中产品之间最大的差异化就是图片处理技术，也是产品的核心竞争力。扫描拍摄功能目前多见于拍照上传类的APP。如淘宝可以使用扫描拍摄产品进行搜索商品，在线教育类APP会给用户提供上传作业的服务，通常采用的也是扫描拍摄的功能。
目前现有的在线教育方案中，通常是采用自动扫描拍摄的功能将学生做作业答题、考试答题，通过图像技术方式处理后，最终将处理好的答题结果以图片的形式发送给老师，老师针对答题结果进行批改、发现学生的学习问题进行辅导。简单点讲，产品的目的则是希望用户使用该流程能够提升用户上传答案的照片质量，且优化用户拍照上传的体验，从而也可以提升教师批改效率。
用户使用系统拍摄和自动扫描拍摄的流程分别如下：
从以上的流程步骤中我们不难看到，自动扫描拍摄在界面理解、选取并确定取景框内的物体似乎是产品设计上的差异点，而相机自动拍摄则是技术上着重需要攻破的环节。在设计自动扫描拍摄整个流程中这些差异点的时候，将遇到的问题、用户测试及用户使用体验的反馈中总结出以下几点：
一、不可忽视那些决定用户体验而隐藏在产品中的细节设计
1.自动扫描模式状态告知
首先自动扫描拍摄的方式并不是一种常见的拍摄方式，这种拍摄方式通常是应特殊需求及场景而做，用户并没有形成一种产品认知和使用习惯，界面引导方式尤为重要。这也是我在做第一版交互设计时遇到的最致命问题（仅做了标题告知当前页面为自动扫描拍摄模式） — 但测试后，发现用户并不知道如何使用，将它与拍摄功能混淆！如果没有提示用户当前处于一种什么模式或状态时，用户可能会慌乱甚至乱点界面内的其他button，导致整个流程出现较大的体验问题。事实证明，在拍摄场景下，用户一般都不会看当前拍摄模式的标题文案。
那么，拍摄概念与自动扫描拍摄概念如何传达？
自动扫描拍摄要给予用户自动扫描中的状态，这一点非常重要。从界面元素上看（手动）拍照和扫描拍摄这两种拍摄方式。
1）目前比较简单的处理方式就是模糊镜头背景；
2）蓝色扫描线或其他扫描样式，动态跟踪；
3）稍复杂一点的处理方式就是类似于星星点缀的动态聚焦样式，给用户一种代入感，能过快速引导用户进入自动扫描模式的场景下，仅需等待，即可自动扫描。这种方式依赖于技术；
4）边框识别引导方式，同样依赖于图像识别技术；
5）
语音引导也是目前部分产品中采用的方案，算是一种强引导方式，该引导方式会比较清晰且快速让用户理解当前状态，但也会莫名给用户一种紧张感；
2.恰当的使用动效在扫描拍摄流程中是个不错的选择
不要忽视动效，有些小的动效因为时间或资源等其它原因省略了，恰好暴露了设计的盲点。另外，在如何拿捏设计与技术的博弈与妥协度上，切记首先要保证产品使用的流畅性。例如动效交互方式这种是否考虑以后再做或者demo跑通再做？若确实是因为时间或资源有限而不能做，那要究其设计动效的本质原因是什么，可以通过其他简单的交互方式替代，而不是省略，否则“小小”的疏忽可能会影响整个产品使用流程的体验，这也是交互设计师对产品负责的基本原则。
举个简单的栗子，且看iPhone系统相机，拍照成功后除去取景框会有切黑屏的反馈之外，左下角图片预览区在图片保存成功的同时也同样有一个小的动效反馈设计，即告知用户该图片已保存成功。而这两个动效缺一不可，都有着它存在的实际意义。
当前任务处理完成一般会给予用户成功反馈，反馈的方式：一种是常规的toast文案提示；另外一种是简单直接的动效场景转换方式。当然在拍摄场景下更推荐通过简单的动效去处理，拍摄这种快体验的功能通过文案去提示用户确实不是个太好的选择~
二、不要将产品的需求强加给用户去做
在设计过程中，要分清产品的需求和用户必要的操作流程，不要将产品的需求强加给用户去做。
在扫描拍摄中，产品需求要用户通过识别二维码的方式引导用户上传正确页码的图片，
即在设计中取景框右下角会有一个二维码引导框，用户需要将页面上的二维码放置在屏幕的二维码框内才能够识别成功。
按照惯性思维那我们是不是可以要求用户主动扫描该二维码去完成拍摄流程？那二维码的大小会不会对用户的操作体验有直接的影响？
初期为了
提高扫描识别的成功率，
我们调试了多种尺寸去引导用户寻找较为合适的拍摄扫描距离，同时还要求用户将完整的画面都放置在取景框内。但最终结果是二维码框过小，用户在扫描过程中会因手抖很难将二维码放置在屏幕中的二维码框内，这对用户来讲是一个高阶操作行为；二维码框过大时，用户也会本能的聚焦扫二维码而忽视了将整个页面放置在取景框内。
所以，通过二维码引导用户去扫描拍摄并不是一个特别好的设计。
仔细分析一下这个需求，通过二维码识别页码是产品的需求，而用户在这个页面最重要的操作流程仅是将页面放置在取景框内即可。
而在这个用户流程上最本质的原因是我们要求用户同时做两件事情，且操作难度高，这种设计很难有更好的优化空间或者能够提高扫描的成功率。（关于具体有效可实行方案，待续~）
三、场景实时跟踪
自动扫描拍摄与识别技术关系紧密，这就要求拍摄环境或拍摄条件达到一定的标准。而用户在操作过程中不可避免会出现各种不符合规范的场景，这就需要场景的实时跟踪。
不同场景下给予用户不同的文案提示，引导用户进入正确的扫描拍摄方式。
栗子1
栗子2 iPhone 7 Plus ios10.1以上版本的人像拍照
功能，可以实现类似单反相机的背景虚化拍照效果。
是针对静物拍摄的成品图拍摄场景，拍出来的图片背景虚化，无需再做部分图片的处理。
tips：这里提一下，闪光灯≠手电筒。对于设计师来讲，界面上似乎没什么区别，我只需要告诉开发闪光灯状态即可。但是对于开发而言，在扫描拍摄功能中，这完全是两种设置逻辑。闪光灯是配合拍摄瞬间的一个动作。而在扫描拍摄环境下，会有一个扫描识别的过程，此时的闪光灯确是手电筒的功能，开启可以改善并提亮当前拍照的环境。
好的设计是减少用户在整个使用流程中的操作步骤和时间消耗，如此才能获取到更高的用户体验评价。我们再做每一个需求之前，大多数设计师往往可以满足产品的需求，但真正的用户需求及产品使用体验并不能百分百被设计师掌控。用户所遇到的每一个细节使用流程，我们可以说他们都与设计有关，与思路、数据或逻辑有关。归根结底，交互设计师都是要把信息，把功能使用方法更直观、准确、快速、清晰的传达给人们，以获得理解和共鸣，甚至快速的被记住，将学习成本降至最低，将产品价值发挥至最大。
本文来自网易实践者社区，经作者王媛媛授权发布
分享至：
