微信小程序又复活了

 成都seo   2018-01-17 09:33   927 人阅读  0 条评论
摘要:

  年初小程序行将发布时,简直一切的互联网从业人员都会谈论乃至期望在第一波浪潮里能有所为,翻开一个新的局势。2017年已过多半,小程序只悄声作为一些产品的附加进口。  灰评是一个客观点评产品的UGC产品,咱们赶上了第一波小程序的浪潮,而且产品本身是个试研制的产品,所以产品规划上就是一个产品+一个视觉,继而有幸参加了许多交互上的规划。   从首页由上往下看灰评的主要体会流程:  查找——查找你想要检查的产品或许品牌  测评文章——阅读当下

  年初小程序行将发布时,简直一切的互联网从业人员都会谈论乃至期望在第一波浪潮里能有所为,翻开一个新的局势。2017年已过多半,小程序只悄声作为一些产品的附加进口。


  灰评是一个客观点评产品的UGC产品,咱们赶上了第一波小程序的浪潮,而且产品本身是个试研制的产品,所以产品规划上就是一个产品+一个视觉,继而有幸参加了许多交互上的规划。


成都seo.png

 


  从首页由上往下看灰评的主要体会流程:


  查找——查找你想要检查的产品或许品牌


  测评文章——阅读当下热门产品的评测


  检查/增加清单——检查自己现已列出的产品清单或许新建清单


  我的积分——检查积分、累积积分和运用积分

  产品点评列表——检查当下热门产品的点评


  小程序本身的特色决议它规划上的特殊性:


  由于不需求装置,占用内存空间忽略不计;但扫描二维码时要便利加载,所以要尽量操控本地数据、精简界面控件,做减法规划。否则加载失利很有可能是空白页面,为此咱们还做了预加载的界面,避免加载失利后太尴尬。


  一次开发多终端适配。由于产品的性质,咱们定位的用户是较高端小众,所以规划上是以苹果iPhone6/iPhone7尺度为准,在手机尺度上归于中等巨细,为了能尽量在各种终端明晰良好显现,在界面上的图像元素挑选是:简略形状>多种作用形状>拍摄图,也就是要求规划元素尽量单纯。


  小程序的规划都是在微信的大环境里做的,相对于APP的8、9年开发进程,有许多作用(如某些动画)是不成熟无法完成的,就规划大如群众点评,小程序上功用也很少。


  总的来讲就是比普通的APP更考究扁平化的规划,把它当作非常重要的原则。产品规划在在视觉上要体现的轻盈、洁净、效率高;功用层级上要结构单纯、跳转少、层级简略;其非必须高效率地展现内容,规划风格共同调和。


  轻视觉


  视觉上的轻盈是首当其冲的,给用户的直观感触会影响用户初次的体会。


  1.1弱化非必须功用


  在产品不断迭代的进程中,有些功用会逐步边缘化,这在视觉处理上要有明晰的表明。

 


  由于是新产品,数据量比较少,能查找到的东西比较有限,所以查找的功用是逐步变弱的,尤其是当页面出现了文章、积分等内容后,查找就要更要弱化显现。所以查找由本来的的查找框逐步变成了一个右上角的icon。有查找需求的时分能够找到,可是对平常的阅读不会有打扰。


  1.2去除冗余削减线条


  其实这归于扁平化视觉的处理,去除鸿沟和明显的区隔,跟多是让内容本身来展现和区隔。 


  旧版卡片列表、新版细线列表


  旧版随意看看列表:本来是构想出改写上下翻转的动效,可是由于小程序的约束无法完成这种动画作用,假如没有动画作用那么这种卡片+投影的体现办法完全能够由更简略的形状代替;


  新版的随意看看列表:由本来的3张圆角卡片变成了整块细线分隔列表,这样会削减粗线条带来的分裂感,让这块内容更全体精美、轻盈;


  编撰点评页面本身内容杂乱,而且从上到下的内容都需求用户去修改填充,继而使页面明晰、主次清楚就更重要。 


  星级和长谈论的改动


  所以界面全体首要去掉了用户已知的产品信息;长谈论输入区域去掉了外框线的捆绑,用本身文字块和空间隔开文字和图片;


  顶部的星级是对当时产品的全体评级,所以与下方其他点评用色块区分隔,而且星星的造型也由本来的细线框式变成了淡色块,整个页面全体感变强,着重主次。


  1.3视觉共同轻松操作


  个人认为,界面中视觉作用高度共同会让页面明晰和谐,用户在操作进程中认知成本低,运用起来简略轻松。 


  从查找到增加,以及概况页的上滑标题方位,界面高度共同


  在增加宝物到清单的操作中,由于创立清单、查找宝物、增加宝物等页面结构基本是共同的,而且在操作流程上是接连的;而在标题上,与清单概况的标题也是共同的。所以视觉上就坚持了标题款式的高度共同,创立清单控件和查找框也在高度上坚持了共同,给用户在略杂乱的查找增加流程上有个较好的体会。


  轻交互


  2.1优化标签修改逻辑


  写标签是灰评差异于其他测评软件的一个标志,所以在初期写标签是个非常重要且值得着重的功用。 


  旧版输入标签流程


  首要写点评的全体流程如上图所示,只要后两步涉及到杂乱的交互逻辑,详细就能够参考豆瓣的写观影点评标签的办法。但这个难点在于产品初期用户和数据都较少,用户能挑选的标签少,要填写的比较多;而且一般是要写好、差评两种,弹框式的操作就会让用户来回在界面和弹框间往复,又由于小程序的环境问题,弹框上输入文字的体会并不好,而且网页链接上的弹框也显得厚重。


  旧版:写新标签都要有个点击-挑选好/差评-输入标签-断定然后回到写点评的页面,而且每次输入标签时,键盘弹起会顶起弹框界面闪烁。

 


  新版标签的输入办法


  新版:


  点击”+新标签”——-页面底部会弹起输入框


  滑动挑选填写好评或许差评——-右边输入框相应变黄色或许灰色


  输入点评文字——–右边的收起箭头变成发送按钮


  点击空白区域——–整条输入tab消失,显露本来的发出去按钮


  好坏差评的挑选由杂乱的图形规划变成了简略形状的开关方法,好坏标签的色彩+对应文字可直观的体现其特点;发出去按钮和收起icon由框内文字的有无来切换。优化后能够接连输入并看到当时的输入状况,削减每次写标签的繁琐进程和弹框的弹跳突兀感,整个流程也会更共同。


  2.2复用方位灵敏改动减轻页面


  在一些内容较多的页面,修改或许滑动时,能灵敏把控一些控件的改换能够有用使用有限的空间而不影响操作体会,但条件是控件改动后不影响操作运用。


  清单概况页常态、清单概况页修改态


  在清单概况页,修改状况下有许多当地能够改动,而且不仅是单纯的删去。假如是在底部加个tab按钮来操作,一次很难修改一切的需求,而且也会让页面变的厚重。而点击修改后,产品的排名标识是不需求的,收起和点评也能够暂时放置,所以改换产品删去操作是复用排名方法和方位,能感遭到改动但不会有多少突兀感;列表中的修改和置顶icon复用本来控件的方位而且坚持大的距离以免误操作。

 


  清单概况页首屏、清单概况页下滑


  在阅读清单概况页下滑时,由于依然要坚持清单标题的可修改性,所以设置清单标题和其他操作停留在黑色的标题栏上,确保共同明晰的展现而且便利修改。


  反思点


  3.1不能跳出产品给的框架做突破性的、根本性的总结


  好坏标签是本产品的魂灵、根底,差异于其他点评类产品的本质。


  在开始产品经理的意思是把标签分为两类,并标上好、坏的的标识以及过长的好评度进度条。这种办法首要是笨拙的,规划度不高:进度条款式的展现比较适合多类对比(比方盖得排行),对于一种产品的话有更直接更精简的办法;再者对标签标上好坏的字样,是比较僵硬低效的归类,应该让它本身的款式来让用户容易差异其特点(比方你不能给好、坏人贴上标签);而正负面点评分隔展现不利于排版优化。 


  旧版、新版好差评标签展现


  标签混合展现而且视觉优化后,找了10人左右做了对色彩对应的特点拜访,简直一切人都能很快的说出黄色、灰色对应的标签特点,而且对评分规划也更能承受。


  3.2作为视觉想急于体现喜欢的方法感而忽略内容展现


  作为视觉规划,可能都有一种总算有机会宣布自己喜欢的方法的感触,但在详细的产品规划中不一定适宜,在方法感和内容显现上做了过错的取舍。当然,通过更久琢磨或许也会有更优的解决方案。 


  旧版、新版分享页


  旧版:特别痴迷于一切元素居中的排版办法,会感觉比较大气唯美;可是在本产品中通过居中的排版难以在手机的首屏中展现出标签和长谈论,占有篇幅的不是是标签而是已知的产品信息;


  新版:界面上部选用左对齐版式,图片、logo、称号和星级组合在左上角;左对齐的标签最大极限的出现标签(最多10条10个字的标签)图片和长谈论下面居中显现;图标简化成明晰简明的按钮。改版后能够在第一屏出现出一切的标签、配图及部分长谈论。规整内容,最终一版的内容是较多的,可是也是比较规整洁净的。


本文地址:http://www.iisya.com/information/477.html
版权声明:本文为原创文章,版权归 略懂SEO博客 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?