简介
拼图应用:把几张图片合成为一张图片。
用户目标:做出一张好看的拼图。
使用人群:10-30岁,学生和上班族,女性偏多。考虑配色偏暖色。
盈利模式:增值服务付费,比如贴纸,文字字体,模板等。比较明确的套现模式。
非刚需,算是痛点,非高频。对于图片社交用户来说算是痛点。还有对于拼图粉丝来说也是痛点。由于有可靠的变现模式,产品还是有一定价值的。
场景
没有特别明确的场景
旅行分享、美食分享、生活照分享、节日生日祝福、合照纪念、微博长条图、自拍拼图
产品类型
现有产品的形态
海报拼图:用户从一个已经拼好的模板开始,修改里面的内容,傻瓜式的拼图。目前比较火的模式,优点是很快可以拼出一张漂亮的图,缺点无法定制化,没办法发挥创造力,需要开发者不断的推出新模板。
传统拼图:选择格子模板,从零开始拼图。可玩性最强的一种模式,直观的感受是功能很多。缺点是审美不足的用户比较难玩,对功能和交互设计要求比较高,用户上手难度比较大。个人猜测是拼图粉丝比较喜欢的一种。
社交分享拼图:专门针对社交分享平台的拼图,比如ins的layout,功能非常简单,只能拼正方形的图片。属于辅助类应用,可玩性很小。
*本次重设计为传统拼图
产品要点
产品成败的关键
贴纸质量:对于小白用户来说,贴纸是最容易驾驭的,也是最容易取得效果的,好看的贴纸能够抓住用户的心。因此把资源用在设计贴纸上绝对不亏。贴纸应符合用户的使用场景。
操作方便:拼图是一个需要反复操作的过程,大部分用户可能会不断的尝试,不断的修改达到满意的效果,因此优化交互就很关键,减少一个效果的点击步骤可能会大幅度提升效率。
模板样式:和贴纸不同,我想很多人会在选择模板上纠结。这是一道单选题,用户难免会患得患失。因此,模板的在设计上要注重差异化,而不是同一个模板做四个不同方向的。
滤镜:允许不同的图片使用不同的滤镜。滤镜样式符合使用场景。专门针对美食的,针对风景的等等。
需求发散
滤镜:美食滤镜、人物滤镜、风景滤镜
贴纸主题:表情、天气、动物、装饰、爱心、卡通等
添加形状:矩形、三角形、圆形、线条
邮戳:旅行、节日
自拍:连拍
*注释:本次重设计不包括形状,邮戳,自拍
当前问题
原项目的问题
交互
贴纸放大超出画板,无法移动无法点击。选中贴纸,超出画板的按钮依然显示。
操作按钮太小。修改工具栏交互,底部工具栏高度加大,去掉文字。二级工具栏顶部增加反悔按钮,二级工具栏高度增加一倍。把一级工具栏的选项合为边框、文字、贴纸、背景。边框里的二级选项为模板、边距、圆角、比例。
对图片的操作。点击图片在图片上弹出操作栏。而不是在工具栏上操作。
图片默认底。使用透明底,边框使用虚线。
保存完成后找不到图片。显示图片,保存到相册。显示分享到社交平台fb/tw/ins/更多。
ICON不够个性化。风格和使用人群不搭。白色,风格统一。
选中图片的边框显示不全。
自由画板的图片没有阴影。
产品
增加贴纸内容。增加和场景相关的贴纸,比如美食、旅行。
去掉图片编辑模块。第三方的很多功能是多余的,和拼图没有关系,UI无法自定义。
减少重复的和质量差的模板。很多模板只是换了方向,对于拼图的效果并没有提升。
滤镜过多,有些重复。滤镜在于场景,美食、风景、黑白等等,不需要太多。
流程
三种模式各有优劣
可选的3种模式
1、选择模板-选择图片-拼图-保存分享(传统模式)
2、进入拼图-选择模板或图片-保存分享(直接进入拼图界面)
3、选择图片-选择模板-拼图-保存分享(根据图片数量缩小模板范围)
我的理解
1、避免一开始就进入让用户难以选择的情况。多达几十个甚至上百个模板,难免让人眼花缭乱。无形中增加了用户跳出应用的风险。
2、用户喜欢在拼图的过程中频繁点击随机模板,这点在统计数据里已经被证实。
3、在拼图的过程中反复切换不同的模板,符合“允许用户反复修改”的交互原则。
4、用户可能还没有准备好图片,无法选择图片,用户可能无法继续。
5、受制于模板数量,数量很多需要单独的模板界面,参考MOLDIV。
6、先选择图片,还是先选择模板,各有各的道理,难以取舍。
我主张把选择模板和选择图片后置,让用户直接进入拼图界面,看看应用都有哪些功能,给他们感受到应用的好处,再去选择模板和图片。如此也不影响二次使用的用户,在拼图界面一样可以方便的选择模板和图片。另外精简模板的数量,避免类似的模板。同时提供进入全屏模板选择界面的按钮。
下面设计流程按直接进入拼图为准。
工具栏的设计
工具栏的设计属于本次重设计的关键点
布局
传统拼图应用的底部工具栏,是把所有的功能罗列出来,超出屏幕的部分需要左右滑动才能看到。
而新式的布局,更偏向于收拢相似功能,使用部分的二级工具栏,去掉左右滑动的设计模式。
返回
点击空白处返回,没有实质的按钮,可能会导致小白用户疑惑,在页面很挤的时候没地方点,容易导致误操作,作为一种备选。
在工具栏里放一个返回按钮,最为保险的做法,缺点是导致工具栏变拥挤。
另外,在不隐藏一级工具栏的条件下,不需要返回按钮。如此设计工具栏占用的面积更大。
不赞成的做法,把返回按钮放在顶部状态栏,距离过远。违反了“距离相近”的交互原则。
本次重设计采用,二级工具栏的方式,缩减一级工具栏按钮数量,减少为四个,去掉文字说明。避免频繁的左右滑动操作,避免图标超出屏幕的问题,逻辑更加清晰。尽管增加了点击次数,但同时减少了认知负担,因此并没有增加操作的复杂度。
界面设计
具体设计流程就不一一展现了,直接放图
总结
读完一本书要总结,做完一个项目要总结,设计也要总结
1、反复推敲竞品的流程,在原型阶段反复打磨。原型阶段反复打磨并不会消耗太多时间,好过走到视觉阶段再推倒重来。
2、在关键部分投入更多精力。拼图应用的关键设计为拼图流程和工具栏设计。通过关键部分的设计,可以更好理解整个产品的脉络。特别是在产品初期,理顺了关键部分,细节可以慢慢改进。
3、感知当前设计的模式,和为什么要使用这种模式。把交互抽象成一个模型,这个通用的模型称为模式。即使是常见的模式,多思考就能得到收获。为什么底部工具栏的左右滑动设计这么少,其中一点:单手操作的时候,大拇指在屏幕最下方滑动是很不方便的,并且规范也写明了按钮数量不超过5个。学会融汇贯通,举一反三。
4、界面是动态的。在老式设计中,容易以点击跳转来区分界面。在视觉稿阶段的时候,不单以链接区分界面,还应考虑不同状态,不同事件等等。在设计原型时,不再固定某个组件,而是用页面流的方式看待。
5、我想想