小程序如何制作,免费自制小程序教程( 二 )


二 。光相互作用
优化标签编辑逻辑
写标签是灰评区别于其他测评软件的一个标志 , 所以前期写标签是一个很重要很重要的功能 。
△旧版输入标签流程
首先 , 写作评价的整体流程如上图所示 。只有最后两步涉及复杂的交互逻辑 。具体可以参考豆瓣写电影评价标签的方式 。但这个难点在于产品初期用户和数据较少 , 用户可以选择的标签较少 , 填写的较多 。一般有两种:写的好的和评的差的 。子弹框的操作会让用户在界面和子弹框之间来回穿梭 。因为小程序的环境问题 , 在弹框上输入文字的体验并不好 , 网页链接上的弹框也比较重 。
旧版本:写新标签时 , 必须点击-选择好/差评-输入标签-确认 , 然后返回写评价的页面 。每输入一个标签 , 键盘弹出 , 弹出框界面闪烁 。
△新标签的输入法
新版本:
点击+新标签——-页面底部会弹起输入框 滑动选择填写好评或者差评——-右边输入框相应变黄色或者灰色 输入评价文字——–右边的收起箭头变成发送按钮 点击空白区域——– 整条输入tab消失 , 露出原来的发出去按钮差评的选择从复杂的平面设计变成了简单的切换形式 。好坏标签的颜色+对应的文字可以直观的表达其属性 , 发送按钮和折叠图标可以通过框内有无文字进行切换 。优化后可以连续输入 , 看到当前的输入情况 , 减少了写标签的繁琐过程和盒子弹跳的突兀感 , 整个过程会更加统一 。
重用灵活的职位变化缓解页面
在一些内容较多的页面中 , 编辑或滑动时 , 灵活控制一些控件的变换 , 可以在不影响操作体验的情况下 , 有效利用有限的空空间 , 但前提是控件变化不影响操作和使用 。
△列表详情页处于正常状态 , 列表详情页处于编辑状态 。
在列表详情页 , 编辑状态有很多变化 , 而且不只是简单的删除 。如果在底部加一个tab键 , 很难一次性编辑完所有的需求 , 而且会让页面变得很厚 。点击编辑后 , 商品的排名标记就没有必要了 , 折叠和评论也可以暂时搁置 , 所以改变商品删除操作就是重新使用排名形式和位置 , 可以感觉到变化但不会有太多突兀的感觉;列表中的编辑和置顶图标重用原控件的位置 , 并保持较大距离 , 避免误操作 。
△列表详情页面顶部屏幕和列表详情页面向下滑动 。
在浏览列表详情页时 , 仍然需要保持列表标题可编辑 , 所以设置列表标题等操作停留在黑色标题栏上 , 以保证显示统一清晰 , 便于编辑 。
三 。倒影
无法跳出产品给出的框架做出突破性和根本性的总结
好坏标签是这个产品的灵魂和基础 , 是区别于其他测评产品的本质 。
起初 , 产品经理打算将标签分为两类 , 并用好的和不好的标志以及过长的赞美进度条来标记它们 。首先 , 这种方式比较笨拙 , 设计度不高:进度条样式的显示更适合各种比较(比如排名靠前) , 对一个产品有更直接简洁的方式;再者 , 用好坏词标注标签是一种相当生硬低效的分类 , 要做出自己的风格 , 让用户容易区分其属性(比如你不能标注好人坏人);但是正反评论分开显示 , 不利于排版优化 。
△老版本和新版本都有好差评标签显示 。
在标签混合显示和视觉优化后 , 约10人被要求访问颜色对应的属性 , 几乎所有人都能够快速说出黄色和灰色对应的标签属性 , 对分级设计更容易接受 。
作为视觉 , 想表达自己喜欢的形式感 , 忽略内容展示
作为视觉设计 , 大家可能都有一种终于有机会表达自己喜欢的形式的感觉 , 但在具体的产品设计中可能并不合适 , 在形式感和内容展示上做出了错误的选择 。当然 , 经过更长时间的深思熟虑 , 可能会有更好的解决方案 。
△旧版本和新版本分享页面
旧版:特别痴迷于所有元素居中的排版方式 , 会感觉比较大气唯美;但是在本产品中经过居中的排版难以在手机的首屏中展示出标签和长评论 , 占据篇幅的不是标签而是已知的商品信息 。新版:界面上部采用左对齐版式 , 图片、Logo、名称和星级组合在左上角;左对齐的标签最大限度的呈现标签(最多10条10个字的标签)图片和长评论下面居中显示;图标简化成清晰简明的按钮 。改版后可以在第一屏呈现出所有的标签、配图及部分长评论 。规整内容 , 最后一版的内容是较多的 , 但是也是比较整齐干净的 。摘要


推荐阅读