现在的手机不论是什么软件，基本上都有很多功能。就拿大家生活中最常用的微信来说，在微信小商城里面就有很多我们喜欢的小程序。今天就让蓝橙视觉为大家介绍商城小程序UI设计怎么做：

一、字号大小

一个好的小程序UI界面，首先映入眼帘的就是页面字号大小，下面是眼睛距离与常用的字号大小关系：

(1) 视距近：30cm以内

(2) 字号使用：9pt(点)--12pt(点)

网页中会稍微大些为12pt/14pt，在应用响应式网页布局的情况下在手机里显示会按照百分比进行放大的，手机APP(2倍手机)里正文字号大小为20px/24px。

(3) 视距中：300cm以内

(4) 字号使用：2cm以上，当然是越大越能看清楚但需要符合版式美感。建议童鞋们自己带个格尺到显示中找寻需要制作的物品进行实际测量看在3米以内是否能够看清楚以及是否得当。

(5) 视距远：300cm以外

(6) 字号使用：正文字比较少根据版式需要一定设计的非常大。

二、色彩

设计中讲究形与色的组合，具体用什么主色调，要根据小程序的类型来选择，比如美妆、女装类可用比较温暖的色调;数码、电子类可用冷硬的蓝、黑色调。但千万不可太多颜色混搭在一起，用色过多会导致访客眼花缭乱，UI页面设计没有主次之分。

三、布局排版

布局，就是小程序内各版块、图标、文字的排列。通过合理的布局，我们能让访客分清主次，抓住重点。比如哪个商品是小程序中的“主角”，那就把它放在显眼的位置;哪些比较次要，那就放在底部。布局设计尤其要遵循CRAP原则：

1、C--Contrast(对比)，通过图标大小和位置等的对比，区分出谁是主角，谁是配角，谁是群演。

2、R--Repetition(重复)，一个级别的信息尽量使用一种设计来保持用户的认知，避免用户认为是另一种信息分类。

3、A--Alignment(对齐)，你的图标、海报、列表等应该对齐，不可随意摆放、

4、P--Proximity(亲密性)，有关系的两个图标尽量放在一起，比如衣服，你的“短袖”、“长袖”分类最好相邻，这样的排列会更具逻辑性。

运用网格系统排版可以让画面更加统一，在平衡的基础上可以变换层次感，让画面更加有条理，让内容更易读，体验度更强

(1) 平面：尊重常用分栏进行划分，尺寸可以有小数点但需要达到均衡感。

(2) 网页：为了符合程序员开发代码，一般按2的倍数进行栏与间距的划分，不要出现奇数与小数点，小数点不好书写，奇数不好对齐。

以上就是蓝橙视觉为大家介绍的关于商城小程序UI设计的相关内容。微信小程序是现在很多用户喜欢登陆软件的一个渠道，做好商城小程序UI设计非常重要。需要帮助的话，尽可以来咨询，我们是一家专业的小程序UI设计公司。