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