做为UI小程序你知多少？
2017年1月9日，小程序带着“不确定”性来到了这个世界上，作为UI的我们，应该知道哪些呢？
主要从以下两点来介绍～～
1.设计环境
1.微信小程序尺寸单位为rpx，可以根据屏幕宽度进行自适应（ 什么是rpx呢 ? rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应，规定屏幕宽为750rpx。在iPhone6上，设备分辨率为750px，则750rpx=750px，即1rpx=1px，所以设计稿使用设备宽度750px比较容易计算。）
2.开发微信小程序时设计师可以用 iPhone6 ( 2X ) 作为视觉稿的标准
3.页面深度不可超过5层
4.开发包限制2MB
2.与app的差异
小程序本身的特点决定它设计上的特殊性。
总的来讲就是比普通的APP更讲究扁平化的设计，这是非常重要的准则。产品设计在视觉上要表现的轻盈、干净、高效；功能层级上要结构单纯、跳转少、层级简单；其次要高效地展现内容，设计风格统一和谐。
因为不需要安装，占用内存空间忽略不计，所以进入时要方便加载，要尽量控制本地数据、精简界面控件，做减法设计。
为了能一次开发能在各种终端清晰良好显示，在界面上的图像元素选择的优先级是：简单形状＞多种效果形状＞摄影图，也就是要求设计元素尽量单纯。
小程序的设计都是在微信的大环境里做的，有很多动效因受限于微信本身，是无法实现的，所以要求动效必须简单、好用。
1.设计的精简
举个例子
在视觉上最直观的体现就是扁平化视觉的处理，尽量少用分割线，还有线框这些割裂感比较强的设计方式，图形的形状尽量简单，尽量让内容本身来展现和区隔。
在首页中，除了下方文章与文章之间用了灰色的间隔之外，整个首页去掉了其他的分割与线条。在书籍管理页中，上下的书籍之间，用自身文字块和空间做了区隔。在手机登录页面里，输入框和登录的按钮也使用了色块的样式，整个页面只保留了和登录最紧密相关的内容，使得页面整体感变强，去掉了其他元素的干扰。
关于动效
在动效的设计上，因为有些效果受限于微信本身，我们尽量用最简单但是也最好用的方式来实现需要达到的效果。
使得整个操作连贯，友好，用简单的动效贯穿了用户所有的操作。
2.功能都简洁
我们可以看一下腾讯视频app与腾讯视频小程序都区别有哪些？
在功能上，APP有很多附加功能，如：热点，当前热播的节目，广场（doki），游戏等。
APP中顶端的导航栏在小程序中移到了下方的tab里，被分成了两块：短视频和频道；
搜索栏右边的“游戏”、“离线下载”、在小程序中取消了，“观看历史”在小程序中移到了的“我的”tab里。
由于体量不同，设计的重心也不太一样，小程序的设计相对来说更加简单一些，因为小程序是承载于微信APP之中，所以功能的垂直是小程序价值最大的体现。
小程序和APP设计最大的一个区别在于顶栏的操作，微信小程序是没有顶栏操作内容的，它只有两个个按钮，前一个是关于和转发，后一个是关闭。在一般的APP中，顶栏一般会设计导航，但是在小程序中，由于顶栏的设计属于微信端内，所以在设计上，要考虑界面的重新分配。
从对摩拜的APP和小程序做对比后可以看到，在摩拜的APP中，个人中心和消息放置在了顶栏两侧，但是在小程序中，个人中心变成了悬浮按钮放在了屏幕右下方，去掉了消息按钮，精简了整个产品的功能。
对比滴滴出行APP和小程序可以看到，在APP中，点击首页左上角的个人中心图标，它的二级页面是以侧边栏弹窗的形式出现，这个功能只有在APP中才能独立实现，小程序中是无法实现的。
在滴滴出行小程序中，个人中心放到了顶栏下方的导航中，点击个人中心，进入了二级页面，左上角添加了返回按钮，返回按钮是目前小程序最依赖的页面跳转的交互方式。需要注意的是，小程序相较于APP的稳定性没有那么好，所以在功能层级上结构要尽量单纯，尽量减少跳转，而且小程序规定页面的深度不可超过5层，否则体验会变得很差。
每个页面都应有明确的重点，以便于用户每进入一个新页面的时候都能快速地理解页面内容。在确定了重点的前提下，应尽量避免页面上出现其它与用户的决策和操作无关的干扰因素。
在登录页进行登录，当有多个并列操作时，设计指南里规定，需要有明确的主次之分，在这个页面，我们希望用户更多的使用微信账号进行登录，所以在视觉上加重了微信账号登录的按钮颜色，和手机号登录的按钮在颜色上做了明显的区分，给用户一个明确的提示，主动去引导用户的行为。
在书籍搜索页进行搜索，当页面功能比较少时，设计指南里规定，界面要简明扼要，突出重点，不要出现过多的干扰项，所以其他和搜索功能不相干的功能，不要添加。
由于手机键盘区域小而且密集，输入困难的同时还易引起输入错误，因此根据设计指南，在设计小程序页面时因尽量减少用户输入，利用现有接口或其他一些易于操作的控件来改善用户输入的体验。
在书籍搜索页面，当不得不让用户进行手动输入时，提供了历史搜索的快捷选项，应尽量让用户做选择而不是键盘输入，选择比输入体验会更友好，另一方面也避免造成输入错误。当用户输入内容进行搜索时，及时根据用户的输入进行联想，尽可能减少用户的输入，当用户希望重新输入时，输入框右侧提供的清除按钮可以及时帮助用户清除现有的输入内容，进行重新输入搜索。
这一项虽然在APP里也有体现，但不是必要的，而在小程序设计指南里，这一项是被列为必要的。
这是微信小程序给的设计指南～～做为参考哦哦
https://developers.weixin.qq.com/miniprogram/design/index.html
加我微博 RuiJ_ 一起讨论设计问题，触碰更多灵感～
https://weibo.com/u/2991630622
更多的设计请关注：
