拼图APP分析 重设计

简介


拼图应用:把几张图片合成为一张图片。

用户目标:做出一张好看的拼图。

使用人群: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、我想想

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,165评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,720评论 1 298
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,849评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,245评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,596评论 3 288
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,747评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,977评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,708评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,448评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,657评论 2 249
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,141评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,493评论 3 258
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,153评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,108评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,890评论 0 198
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,799评论 2 277
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,685评论 2 272

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,623评论 4 59
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,577评论 25 707
  • 高中时代看过《傲慢与偏见》之后,立即给自己起了英文名:伊丽莎(Elizabath),同学们还以为我想当英国女王...
    珣xun阅读 237评论 0 0
  • 第二章我是“小伙”我怕谁 从儿时开始起,我就不喜欢我妈头脑里那个想把我打扮成可爱小女孩的思想,可算她生了个姑娘,总...
    SeoulJYH阅读 250评论 0 1