兰州微信小程序制作设计指南|甘肃兰州品牌策划的产品|盖亚供

兰州微信小程序制作设计指南|甘肃兰州品牌策划的产品|盖亚供

首批小程序的轻设计

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

搜索——搜索你想要查看的商品或者品牌

测评文章——浏览当下热点商品的评测

查看/添加清单——查看自己已经列出的商品清单或者新建清单

我的积分——查看积分、累积积分和使用积分

商品评价列表——查看当下热点商品的评价

小程序本身的特点决定它设计上的特殊性：

因为不需要安装，占用内存空间忽略不计；但扫描二维码时要方便加载，所以要尽量控制本地数据、精简界面控件，做减法设计。不然加载失败很有可能是空白页面，为此我们还做了预加载的界面，防止加载失败后太尴尬。

一次开发多终端适配。因为产品的性质，我们定位的用户是较高端小众，所以设计上是以苹果iPhone6/iPhone7尺寸为准，在手机尺寸上属于中等大小，为了能尽量在各种终端清晰良好显示，在界面上的图像元素选择是：简单形状＞多种效果形状＞摄影图，也就是要求设计元素尽量单纯。

小程序的设计都是在微信的大环境里做的，相对于APP的8、9年开发历程，有很多效果（如某些动画）是不成熟无法实现的，就规模大如大众点评，小程序上功能也很少。

总的来讲就是比普通的APP更讲究扁平化的设计，把它当作非常重要的准则。产品设计在在视觉上要表现的轻盈、干净、效率高；功能层级上要结构单纯、跳转少、层级简单；其次要高效率地展现内容，设计风格统一和谐。

轻视觉

视觉上的轻盈是首当其冲的，给用户的直观感受会影响用户一 次的体验。

1.1 弱化次要功能

在产品不断迭代的过程中，有些功能会逐渐边缘化，这在视觉处理上要有明确的表示。

由于是新产品，数据量比较少，能搜索到的东西比较有限，所以搜索的功能是逐渐变弱的，尤其是当页面出现了文章、积分等内容后，搜索就要更要弱化显示。所以搜索由原来的的搜索框逐渐变成了一个右上角的icon。有搜索需求的时候可以找到，但是对平时的浏览不会有打扰。

1.2 去除冗余减少线条

其实这属于扁平化视觉的处理，去除边界和明显的区隔，跟多是让内容本身来展现和区隔。

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

旧版随便看看列表：原来是构想出刷新上下翻转的动效，但是由于小程序的限制无法实现这种动画效果，如果没有动画效果那么这种卡片+投影的表现方式完全可以由更简单的形状代替；

新版的随便看看列表：由原来的3张圆角卡片变成了整块细线分隔列表，这样会减少粗线条带来的割裂感，让这块内容更整体精致、轻盈；

撰写评价页面本身内容复杂，而且从上到下的内容都需要用户去编辑填充，继而使页面清晰、主次分明就更重要。

所以界面整体首先去掉了用户已知的商品信息；长评论输入区域去掉了外框线的束缚，用自身文字块和空间隔开文字和图片；

顶部的星级是对当前商品的整体评级，所以与下方其他评价用色块区分开，并且星星的造型也由原来的细线框式变成了浅色块，整个页面整体感变强，强调主次。

1.3 视觉统一轻松操作

个人认为，界面中视觉效果高度统一会让页面清晰协调，用户在操作过程中认知成本低，使用起来简单轻松。

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

在添加宝贝到清单的操作中，因为创建清单、搜索宝贝、添加宝贝等页面结构基本是一致的，并且在操作流程上是连续的；而在标题上，与清单详情的标题也是一致的。所以视觉上就保持了标题样式的高度统一，创建清单控件和搜索框也在高度上保持了统一，给用户在略复杂的搜索添加流程上有个较好的体验。

轻交互

2.1 优化标签编辑逻辑

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

 旧版输入标签流程

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

旧版：写新标签都要有个点击-选择好/差评-输入标签-确定然后回到写评价的页面，并且每次输入标签时，键盘弹起会顶起弹框界面闪动。

了解更多：gaiaworld.shop.88360.com
        联系电话：18193142995
         QQ：378284645
        邮箱：378284645@qq.com
        地址：甘肃省兰州市城关区雁南路12号西脉大厦20楼2027