江苏龙网

  1. 主页 > 生活百科 > >

小程序如何制作，免费自制小程序教程

早期计划
即将发布时 ， 几乎所有的互联网从业人员都会讨论甚至希望在第一波浪潮里能有所为 ， 打开一个新的局面 。2017年已过大半 ， 小程序只悄声作为一些产品的附加入口 。然而作为第一批试水的设计师 ， 我或许可以分享一点自己对一款小程序打磨的经验 。
灰评是对商品进行客观评价的UGC产品 。我们赶上了第一波小程序 ， 产品本身是试用产品 ， 所以产品设计是产品+愿景 ， 然后有幸参与了很多交互设计 。
从首页自上而下看灰评的主要体验流程:
搜索——搜索你想要查看的商品或者品牌 测评文章——浏览当下热点商品的评测 查看/添加清单——查看自己已经列出的商品清单或者新建清单 我的积分——查看积分、累积积分和使用积分 商品评价列表——查看当下热点商品的评价【小程序如何制作，免费自制小程序教程】小程序本身的特点决定了其设计的特殊性:
因为不需要安装 ， 占用内存空间忽略不计；但扫描二维码时要方便加载 ， 所以要尽量控制本地数据、精简界面控件 ， 做减法设计 。不然加载失败很有可能是空白页面 ， 为此我们还做了预加载的界面 ， 防止加载失败后太尴尬 。一次开发多终端适配 。因为产品的性质 ， 我们定位的用户是较高端小众 ， 所以设计上是以苹果iPhone6/iPhone7尺寸为准 ， 在手机尺寸上属于中等大小 ， 为了能尽量在各种终端清晰良好显示 ， 在界面上的图像元素选择是：简单形状＞多种效果形状＞摄影图 ， 也就是要求设计元素尽量单纯 。小程序的设计都是在微信的大环境里做的 ， 相对于APP的8、9年开发历程 ， 有很多效果（如某些动画）是不成熟无法实现的 ， 就规模大如大众点评 ， 小程序上功能也很少 。总的来说 ， 它比普通APP更注重扁平化设计 ， 并把它作为一个非常重要的评判标准 。产品设计在视觉上应该轻盈、干净、高效；在功能层面上 ， 要结构简单 ， 跳转少 ， 层次简单；其次 ， 内容要高效展示 ， 设计风格要统一和谐 。
一、光视觉
视觉上的轻盈是首先要承受的 ， 给用户的直观感受会影响他们的第一次体验 。
弱化次要功能
在产品迭代的过程中 ， 有些功能会逐渐被边缘化 ， 这一点要在视觉处理上表现得很清楚 。
因为是新产品 ， 数据量比较少 ， 可以搜索的东西也比较有限 ， 所以搜索功能逐渐弱化 ， 特别是当页面出现文章、积分等内容时 ， 搜索会弱化显示 。于是搜索框逐渐变成了右上角的图标 。需要的时候可以找 ， 但不会打扰你平时的浏览 。
删除多余的行
其实这是一个视觉扁平化的过程 ， 去除了界限和明显的区分 ， 更多的是让内容本身展现和区分 。
△旧卡列表 ， 新细线列表
旧版随便看看列表：原来是构想出刷新上下翻转的动效 ， 但是由于小程序的限制无法实现这种动画效果 ， 如果没有动画效果那么这种卡片+投影的表现方式完全可以由更简单的形状代替 。新版的随便看看列表：由原来的3张圆角卡片变成了整块细线分隔列表 ， 这样会减少粗线条带来的割裂感 ， 让这块内容更整体精致、轻盈 。评测页面的内容本身就比较复杂 ， 自上而下的内容需要用户自己编辑和填充 ， 所以让页面清晰化和优先化就更加重要了 。
△星级和长评的变化
所以整个界面首先去除了用户已知的商品信息；长评论输入区摆脱了轮廓线条的束缚 ， 用自己的文字块和空将文字和图片分开；
最上面的星评是对当前商品的整体评价 ， 所以区别于下面用于评价的其他色块 ， 星的形状也从原来的细线框变成了浅色块 ， 让整个页面的感觉更强烈 ， 强调主次 。
视觉统一 ， 操作简单
个人认为 ， 界面中视觉效果的高度统一会使页面清晰协调 ， 用户在操作过程中的认知成本较低 ， 因此简单易用 。
△从搜索到添加 ， 以及详情页的上滑标题位置 ， 界面高度统一 。
在添加宝宝到列表的操作中 ， 创建列表、搜索宝宝、添加宝宝的页面结构基本相同 ， 操作过程是连续的 。并且标题与列表详细信息的标题相同 。所以视觉上 ， 标题样式高度统一 ， 列表控件和搜索框高度统一 ， 在略显复杂的搜索添加过程中给用户更好的体验 。


推荐阅读


上一篇：火遍全球的抖音海外版TikTok，有怎样的设计思考？

下一篇：家用投影机哪个牌子好，2020年家用投影仪推荐