年初小程序即将发布的时候，几乎所有互联网从业者都会讨论，甚至希望在第一波中有所作为，打开新局面。2017年已经过去了一大半，小程序只是默默的作为一些产品的附加入口。不过作为第一个试水的设计师，我或许可以分享一下自己打磨一个小程序的经验。
灰评是对商品进行客观评价的UGC产品。我们赶上了第一波小程序，产品本身是试用产品，所以产品设计是产品+愿景，然后有幸参与了很多交互设计。
从首页自上而下看灰评的主要体验流程:
搜索——搜索你想要查看的商品或者品牌测评文章——浏览当下热点商品的评测查看/添加清单——查看自己已经列出的商品清单或者新建清单我的积分——查看积分、累积积分和使用积分商品评价列表——查看当下热点商品的评价
小程序本身的特点决定了其设计的特殊性:
因为不需要安装，占用内存空间忽略不计；但扫描二维码时要方便加载，所以要尽量控制本地数据、精简界面控件，做减法设计。不然加载失败很有可能是空白页面，为此我们还做了预加载的界面，防止加载失败后太尴尬。一次开发多终端适配。因为产品的性质，我们定位的用户是较高端小众，所以设计上是以苹果iPhone6/iPhone7尺寸为准，在***尺寸上属于中等大小，为了能尽量在各种终端清晰良好显示，在界面上的图像元素选择是：简单形状＞多种效果形状＞摄影图，也就是要求设计元素尽量单纯。小程序的设计都是在微信的大环境里做的，相对于APP的8、9年开发历程，有很多效果（如某些动画）是不成熟无法实现的，就规模大如大众点评，小程序上功能也很少。
总的来说，它比普通APP更注重扁平化设计，并把它作为一个非常重要的评判标准。产品设计在视觉上应该轻盈、干净、高效；在功能层面上，要结构简单，跳转少，层次简单；其次，内容要高效展示，设计风格要统一和谐。
一、光视觉
视觉上的轻盈是首先要承受的，给用户的直观感受会影响用户的第一次体验。
弱化次要功能
在产品迭代的过程中，有些功能会逐渐被边缘化，这一点要在视觉处理上表现得很清楚。
因为是新产品，数据量比较少，可以搜索的东西也比较有限，所以搜索功能逐渐弱化，特别是当页面出现文章、积分等内容时，搜索会弱化显示。于是搜索框逐渐变成了右上角的图标。需要的时候可以找，但不会打扰你平时的浏览。
删除多余的行
其实这是一个视觉扁平化的过程，去除了界限和明显的区分，更多的是让内容本身展现和区分。
△旧卡列表，新细线列表
旧版随便看看列表：原来是构想出刷新上下翻转的动效，但是由于小程序的限制无法实现这种动画效果，如果没有动画效果那么这种卡片+投影的表现方式完全可以由更简单的形状代替。新版的随便看看列表：由原来的3张圆角卡片变成了整块细线分隔列表，这样会减少粗线条带来的割裂感，让这块内容更整体精致、轻盈。
评测页面的内容本身就比较复杂，自上而下的内容需要用户自己编辑和填充，所以让页面清晰化和优先化就更加重要了。
△星级和长评的变化
所以整个界面首先去除了用户已知的商品信息；长评论输入区摆脱了轮廓线条的束缚，用自己的文字块和空将文字和图片分开；
最上面的星评是对当前商品的整体评价，所以区别于下面用于评价的其他色块，星的形状也从原来的细线框变成了浅色块，让整个页面的感觉更强烈，强调主次。
视觉统一，操作简单
个人认为，界面中视觉效果的高度统一会使页面清晰协调，用户在操作过程中的认知成本较低，因此简单易用。
△ 从搜索到添加，以及详情页的上滑标题位置，界面高度统一。△从搜索到添加，以及详情页的上滑标题位置，界面高度统一。
在添加宝宝到列表的操作中，创建列表、搜索宝宝、添加宝宝的页面结构基本相同，操作过程是连续的。并且标题与列表详细信息的标题相同。所以视觉上，标题样式高度统一，列表控件和搜索框高度统一，在略显复杂的搜索添加过程中给用户更好的体验。
二。光相互作用
优化标签编辑逻辑
写标签是灰评区别于其他测评软件的一个标志，所以前期写标签是一个很重要很重要的功能。
△ 旧版输入标签流程△旧版输入标签流程
首先，写作评价的整体流程如上图所示。只有最后两步涉及复杂的交互逻辑。具体可以参考豆瓣写电影评价标签的方式。但这个难点在于产品初期用户和数据较少，用户可以选择的标签较少，填写的较多。而且一般有两种:写的好的和评的差的。**框的操作会让用户在界面和**框之间来回穿梭。因为小程序的环境问题，在弹框上输入文字的体验并不好，网页链接上的弹框也比较重。
旧版本:写新标签时，必须点击-选择好/差评-输入标签-确认，然后返回写评价的页面。每输入一个标签，键盘弹出，弹出框界面闪烁。
△新标签的输入法
新版本:
点击+新标签——-页面底部会弹起输入框滑动选择填写好评或者差评——-右边输入框相应变电影或者灰色输入评价文字——–右边的收起箭头变成发送按钮点击空白区域——– 整条输入tab消失，露出原来的发出去按钮
差评的选择从复杂的平面设计变成了简单的切换形式。好坏标签的颜色+对应的文字可以直观的表达其属性，发送按钮和折叠图标可以通过框内有无文字进行切换。优化后可以连续输入，看到当前的输入情况，减少了写标签的繁琐过程和盒**跳的突兀感，整个过程会更加统一。
重用灵活的职位变化缓解页面
在一些内容较多的页面中，编辑或滑动时，灵活控制一些控件的变换，可以在不影响操作体验的情况下，有效利用有限的空空间，但前提是控件变化不影响操作和使用。
△列表详情页处于正常状态，列表详情页处于编辑状态。
在列表详情页，编辑状态有很多变化，而且不只是简单的删除。如果在底部加一个tab键，很难一次性编辑完所有的需求，而且会让页面变得很厚。点击编辑后，商品的排名标记就没有必要了，折叠和评论也可以暂时搁置，所以改变商品删除操作就是重新使用排名形式和位置，可以感觉到变化但不会有太多突兀的感觉；列表中的编辑和置顶图标重用原控件的位置，并保持较大距离，避免误操作。
△列表详情页面顶部屏幕和列表详情页面向下滑动。
在浏览列表详情页时，仍然需要保持列表标题可编辑，所以设置列表标题等操作停留在黑色标题栏上，以保证显示统一清晰，便于编辑。
三。倒影
无法跳出产品给出的框架做出突破性和根本性的总结
好坏标签是这个产品的灵魂和基础，是区别于其他测评产品的本质。
起初，产品经理打算将标签分为两类，并用好的和不好的标志以及过长的赞美进度条来标记它们。首先，这种方式比较笨拙，设计度不高:进度条样式的显示更适合各种比较(比如排名靠前)，对一个产品有更直接简洁的方式；再者，用好坏词标注标签是一种相当生硬低效的分类，要做出自己的风格，让用户容易区分其属性(比如你不能标注好人坏人)；但是正反评论分开显示，不利于排版优化。
△老版本和新版本都有好差评标签显示。
在标签混合显示和视觉优化后，约10人被要求访问颜色对应的属性，几乎所有人都能够快速说出***和灰色对应的标签属性，对分级设计更容易接受。
作为视觉，想表达自己喜欢的形式感，忽略内容展示
作为视觉设计，大家可能都有一种终于有机会表达自己喜欢的形式的感觉，但在具体的产品设计中可能并不合适，在形式感和内容展示上做出了错误的选择。当然，经过更长时间的深思熟虑，可能会有更好的解决方案。
△旧版本和新版本分享页面
旧版：特别痴迷于所有元素居中的排版方式，会感觉比较大气唯美；但是在本产品中经过居中的排版难以在定位器的首屏中展示出标签和长评论，占据篇幅的不是标签而是已知的商品信息。新版：界面上部采用左对齐版式，图片、Logo、名称和星级组合在左上角；左对齐的标签最大限度的呈现标签（最多10条10个字的标签）图片和长评论下面居中显示；图标简化成清晰简明的按钮。改版后可以在第一屏呈现出所有的标签、配图及部分长评论。规整内容，最后一版的内容是较多的，但是也是比较整齐干净的。
摘要
很荣幸能够在第一波小程序中发布自己设计的产品。虽然小程序和这个产品的未来是未知的，但是在设计探索的过程中成长迅速。也感谢同事们给了我很多意见和经验，尤其是经常启发我的产品经理们。希望他们的设计见解和克服困难的方法能给别人带来一些帮助。
本文来自清杉投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/633246.html
微信扫一扫 
