随着微信小程序的热度逐日递增，小程序UI设计在企业产品中也越来越被关注，UI界面是产品与人的交互，如果无法通过UI向用户传递价值，那将大大减分！ 如何设计微信小程序的UI界面，今天就来探讨一下。
设计小程序的过程，其实是组织图片、文字、快捷按钮等信息架构。这些元素附着某个信息，比如商品分类、文章说明、某个商品……等。我们的设计，就是为了这些信息服务的。
1.字号大小
一个好的小程序UI界面，首先映入眼帘的就是页面字号大小，下面是眼睛距离与常用的字号大小关系：
视距近：30cm以内
字号使用：9pt（点）——12pt（点）
网页中会稍微大些为12pt/14pt，在应用响应式网页布局的情况下在手机里显示会按照百分比进行放大的，手机APP（2倍手机）里正文字号大小为20px/24px。
视距中：300cm以内
字号使用：2cm以上，当然是越大越能看清楚但需要符合版式美感。建议童鞋们自己带个格尺到显示中找寻需要制作的物品进行实际测量看在3米以内是否能够看清楚以及是否得当。
视距远：300cm以外
字号使用：正文字比较少根据版式需要一定设计的非常大。
2.色彩
设计中讲究形与色的组合，具体用什么主色调，要根据小程序的类型来选择，比如美妆、女装类可用比较温暖的色调；数码、电子类可用冷硬的蓝、黑色调。但千万不可太多颜色混搭在一起，用色过多会导致访客眼花缭乱，页面没有主次之分。
3.布局排版
布局，就是小程序内各版块、图标、文字的排列。通过合理的布局，我们能让访客分清主次，抓住重点。比如哪个商品是小程序中的“主角”，那就把它放在最显眼的位置；哪些比较次要，那就放在底部。
布局设计尤其要遵循CRAP原则：
C——Contrast（对比），通过图标大小和位置等的对比，区分出谁是主角，谁是配角，谁是群演。
R——Repetition（重复），一个级别的信息尽量使用一种设计来保持用户的认知，避免用户认为是另一种信息分类。
A——Alignment（对齐），你的图标、海报、列表等应该对齐，不可随意摆放、
P——Proximity（亲密性），有关系的两个图标尽量放在一起，比如衣服，你的“短袖”、“长袖”分类最好相邻，这样的排列会更具逻辑性。
运用网格系统排版可以让画面更加统一，在平衡的基础上可以变换层次感，让画面更加有条理，让内容更易读，体验度更强
平面：尊重常用分栏进行划分，尺寸可以有小数点但需要达到均衡感。
网页：为了符合程序员开发代码，一般按2的倍数进行栏与间距的划分，不要出现奇数与小数点，小数点不好书写，奇数不好对齐。
APP：为了适配不同手机能够方便工程师开发，请按2、4、6的倍数来划分。
这些都是新人刚入行的基本小程序UI设计规范，希望对你有帮助。
网友评论