小程序案例-微信小程序案例大全

因此，整体界面首先去除用户已知的商品信息； 长评论输入区去掉了外框线的束缚，文字和图片用自己的文字块和空格分开；

最上面的星级是当前产品的综合评分，所以和下面的其他评价用色块区分开来，星星的形状也从原来的细线框变成了浅色块，加强了整个页面的整体感，强调主次。

视觉统一，操作简单

个人认为，界面高度统一的视觉效果会让页面清晰协调，用户在操作过程中的认知成本较低，易上手。

△ 从搜索到添加，以及详情页上滑标题的位置，界面高度统一。

在添加宝贝到列表的操作中，由于创建列表、搜索宝贝、添加宝贝的页面结构基本相同，操作过程是连续的。 在标题上，也与列表详情的标题保持一致。 因此，标题风格在视觉上保持了高度的统一，列表控件和搜索框也保持了高度的统一小程序案例，让用户在稍微复杂的搜索和添加过程中有更好的体验。

2.轻交互

优化标签编辑逻辑

写标签是灰度测评区别于其他测评软件的一个标志，所以在前期写标签是一个非常重要和值得强调的功能。

△ 老版本输入标签流程

首先，写评论的整体流程如上图所示。 只有最后两步涉及到复杂的交互逻辑。 具体可以参考豆瓣写影评标签的方法。 但难点在于产品初期的用户和数据都很少。 用户可以选择更少的标签，而必须填写更多； 而且一般有写和差评两种。 弹出操作会让用户在界面上来回切换。 和弹框来来回回，又因为小程序的环境问题，在弹框上输入文字的体验并不好，网页链接上的弹框也很粗。

旧版：写新标签需要点击-选择好评/差评-输入标签-确定小程序案例，然后返回写评论页面，每次输入标签时弹出界面会闪一下键盘弹出。

△ 新标签的输入法

新版本：

好评和差评的选择从复杂的图形设计变成了简单的切换形式。 好坏标签的颜色+对应的文字可以直观的表达出它们的属性。 发送按钮和存储图标由框开关中有无文本决定。 优化后可以连续输入并查看当前输入情况，减少了每次都要写标签的繁琐过程和弹出框的突然弹跳，整个过程会更加统一。

复用位置灵活变化缩小页面

在一些内容比较多的页面，在编辑或者滑动的时候，能够灵活的控制一些控件的变换，可以有效的利用有限的空间，不影响操作体验，但是前提是控件的变化不会影响到操作和使用。

△ 列表详情页正常状态，列表详情页编辑状态

在列表详情页面，有很多地方可以在编辑状态下进行更改，并不是简单的删除。 如果在底部加一个tab按钮来操作，很难一下子编辑完所有的需求，也会让页面变厚。 点击编辑后，不需要该商品的排名标识，也可以暂时搁置收藏和评论，所以更改商品的删除操作就是复用排名形式和位置，变化可以感受到但不要太突然； 列表中的edit和top图标复用了原控件的位置，并保持较大的间距，避免误操作。

△ 列表详情页首屏，列表详情页向下滑动

浏览列表详情页下滑时，由于仍保持列表标题的可编辑性，设置列表标题等操作停留在黑色标题栏，保证显示统一清晰，便于编辑。

3. 反思点

不能跳出产品给的框架去突破和根本总结

好坏标签是这款产品的灵魂和基础，区别于其他评价产品。

一开始产品经理的意思是把标签分成两类，分别用好坏标志和进度条来标注，太长了。 首先这个方法比较笨拙，设计感不高：进度条样式的展示更适合多品类对比（比如封面排名），对于一个产品还有更直接精简的方法; 而且，最好将label标注为Bad fonts，是一种相对生硬且效率低下的分类。 它的样式应该使用户可以轻松区分他们的属性（例如，你不能标记好人和坏人）； 并且正面和负面评论分开显示不利于排版优化。

△ 旧版新版好差评标签展示

在标签混合显示和视觉优化后，大约 10 个人被要求访问与颜色对应的属性。 几乎都能快速分辨出黄色和灰色对应的标签属性，更容易被评分设计所接受。

作为视觉，想表达自己喜欢的形式感而忽略了内容展示

作为视觉设计师，我可能觉得终于有机会表达自己喜欢的形式了，但在具体的产品设计中可能并不适合，在形式感和内容展示之间做出了错误的选择。 当然，经过更长时间的推敲，或许会有更好的解决方案。