QQ影像 for iPhone 设计分享_交互设计指南

[摘要]项目背景：如果说有什么可以随时随地记录生活的点滴，那一定非手机莫属了。手机的看家本领就是移动性，再加上卡片机似的成像效果，通过手机拍照、处理、分享的需求在日益增长。去年圣诞季上线的QQ影像 for...

　　项目背景：

　　如果说有什么可以随时随地记录生活的点滴，那一定非手机莫属了。手机的看家本领就是移动性，再加上卡片机似的成像效果，通过手机拍照、处理、分享的需求在日益增长。去年圣诞季上线的QQ影像 for iPhone(以下简称iPhone影像)应运而生，跟在了经过一段时间试水的QQ影像 for iPad之后。经过几个版本的迭代，先是滤镜的精细打磨，再是交互流程上的陪伴式图片编辑的改版，iPhone影像逐渐从编辑工具为重心转换到图片感情表达为重心上来，清晰了一切为了图片记录的生活的app理念。

　　接下来选取一些iPhone影像在视觉、交互和产品创意上的点滴与大家分享。

　　影像环境：

　　营造一个具有带入感的影像处理环境是视觉处理的首要目标。

　　首页的变迁是体现影像环境营造的代表。最初的首页利用拟物的手法搭建生活中处理图片的场景达到沉浸的目的，但在可扩展和清晰表义上仍有欠缺。随后，图标+文字这种可用性较强的设计占据了较长时间的首页，尽管表义清晰、扩展性也有一定的保证，但此种导航工具感强。因此在最近的版本中，将首页进一步发展为编辑生活瞬间的入口，将功能入口融入生活场景，增强影像处理带入感。

　　为了将影像处理工具融入影像处理的大环境，工具栏舍弃了常规的不透明背景，代替以半透明甚至渐变透明的工具承载背景，使工具与图片相得益彰。同时，为了赋予图片以尽可能大的视觉空间，将普通(3：4比例图片如相机拍摄照片)图片以系统相册般全屏呈现。

　　整体界面UI采用暗环境突出图片主体。经过一系列对比实验，暗环境最广泛适合各种照片的编辑，也在一定程度上提升app的专业感。

　　影像本身：

　　滤镜作为便捷的一步见效图像处理操作，特别适合在调节空间有限的移动设备上应用。经过文艺范滤镜处理过的图片可以增强互动性，评论积极性也更高，在sns时代更是如此，因此图像处理类app都争相加入滤镜。

　　经过对几十款图像处理app的分析，总结出滤镜的8个维度：

　　在以上8个维度基础上，将原创滤镜在轴线上做了可视化排布。从中可以看出，iPhone影像滤镜在颜色倾向上已经覆盖到冷、暖色调，个别特效也涉及了红色、紫色倾向;一些轴线如颜色饱和度、复古做旧、摄影胶片等从弱到强分布均匀;绘画艺术化纬度在项目初期没有深入尝试，主要靠引进Q拍的滤镜补齐，后续版本则进行了更符合iPhone影像产品气质的优化;失焦和扭曲这两纬度上均未深入，只有柔光、移轴、鱼眼等比较保守的特效。

　　在滤镜缩略图的选择上，经历了固定图像缩略图 -> 当前图像滤镜后缩略图 -> 固定图像缩略图的回归性调整。总结出，用实时处理出的当前图像做缩略图，尽管在一定程度上反映滤镜用于该图像后的效果，但这种效果一般并不显著，不能全面诠释滤镜本身的特色，因此，给出一个最能平衡反映各滤镜特色的缩略图成为最终选择。下图即为在固定图像缩略图上的iPhone影像原创滤镜。

　　贯穿始终的图片：

　　图片是影像处理的核心，怎么让它成为陪伴全程的主线、怎么给它以最大的展示空间是需要思考的问题。

　　为了让图片自身提起选择->编辑->分享的功能主线，为用户营造影像处理的掌控感，时时可见图片算是一种解决方案，而动画就成为该方案的最佳载体。在分享部分，改进了较早版本的单独分享页面，代之以画板抽动露出功能的动画方式。在该主线的最后一步，加入从画板拿下图片并分享的动画，使图片作为生活印记的存在感一气呵成。

　　在最大空间展示图片上，如"影像环境"中所述，将普通图片全屏呈现，并让其具有系统相册的基本操作。只有在进入具体编辑功能时，才在导航区隐去的同时动态缩小显示，尽量保证图片的最大化。

　　手指的点击和手势：

　　在移动触屏的使用场景中，拇指的点击最常见，因此iPhone影像专门针对拇指辐射的点击区域做了优化;手势则为主要操作提供了便捷自然的入口，灵动所有的手指。

　　对应点击的是触发位置和触发区域大小。位置设定，如模态化的编辑功能界面中，确定或取消是必须操作，将其置于下部方便拇指点击的区域，而非通常位于屏幕上部的导航栏，这一调整也省出了导航栏区域，给图片更大的展示空间;大小设定，如在拼图选择时的图片篮子里，可点击删除图片的区域扩大至整个缩略图大小，而非仅仅删除按钮的大小。很大程度上方便了拇指的单指操作。