微信小程序商城ui界面设计怎么做，微信小程序商城ui界面设计技巧

　　现在的手机功能很多，仅仅微信就有很多衍生和附加的功能，比如在微信小商城里面就有很多我们喜欢的小程序。今天就让faceui为大家介绍微信小程序商城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的倍数进行栏与间距的划分，不要出现奇数与小数点，小数点不好书写，奇数不好对齐。

　　微信小程序商城ui界面设计技巧

　　1、路径单一

　　小程序和App不同，APP的功能点可以很多，但是小程序的用户路径要尽量单一，满足用户某一场景的需求即可，千万不要贪多嚼不烂。

　　图片来源于网络

　　2、减少页面跳转

　　跳转新页面会增加用户适应新页面元素的成本，同时小程序的页面层级过多，会让用户感觉到繁琐焦虑。页面跳转越少、对用户的干扰越小，用户浏览体验会更好。

　　3、注重页面逻辑

　　小程序的主页是由各个不同版块组成的，图片banner、快捷按钮、商品及分类、标题、视频、各种营销优惠功能等等。

　　一般来说，人们浏览习惯是从上到下，从左到右，所以你尽量在小程序顶部放上显眼banner来吸引访客。

　　4、色彩平衡

　　小程序是轻量级应用，所以不需要太花里胡哨的色彩，尽量走简洁清爽风。不同的颜色会给人不同感觉：红色色感热烈，对人刺激性很强，易引起注意；蓝色冷静、朴实，会给人提供一个深远平静的空间；紫色的明度较低，给人一种沉闷神秘的感觉。

　　具体用什么主色调，要根据小程序的类型来选择，色调要与品牌主题一致，这样能给客户留下尽量深刻的印象。

　　5、内容充实

　　小程序要轻而美，但并不是说你就要做一个空壳子。在排版简单、明晰的情况下，小程序的内容应尽量丰富，可以添加多个版块、文章。千万别做无实质内容的小程序，那样通常很难通过微信审核。

　　以上就是faceui为大家介绍的关于微信小程序商城ui界面设计的相关内容。微信小程序是现在很多用户喜欢登陆软件的一个渠道，做好微信小程序商城ui界面设计非常重要。