许多着名电商企业都逐步加入到小程序的战队，，从最最先的蘑菇街小程序，，到现在热门电商平台小红书也前不久加入了小程序商城，，那么以这两个小程序商城来剖析一款商城小程序的ui页面的设计。。

蘑菇街App和小程序的界面临比很是典范。。如图：

蘑菇街小程序界面的第一印象就是间接、扁平，，并且去掉了APP首屏的banner，，换成了主题色配景。。实物icon到小程序中都酿成了简约的线性图标并配上了加大后的字体。。接下来的一栏使用了实物图片，，但整体增添灰度，，页面的统一性增强。。

其次，，比App少了水平转动列表，，直接在一级页面显示商品信息，，使用用户的一句话短评来取代直播、专题推荐。。

这样整体看上去界面显得更轻量，，切合小程序的设计需求。。

再来看下小红书的小程序端的界面

一级页面没有任何指导和功效分区，，只能看商品和搜商品。。不得不说，，在众多使用横线划分栏的小程序中，，使用卡片式竖排列的小红书很是吸引人。。二级页面就有点像淘宝的详情页，，这种极简风是很受各人接待的。。

以是，，总结上面小程序商城ui页面实例剖析，，小程序在ui设计上要注重以下几点?

1· 轻设计

总的来说，，小程序相较于App都化繁为简，，突出主要功效。；；；；；箍梢越⒘πЦ奈/触发功效来实现页面的简化。。

2· 注重统一性

小程序的色彩、图标、气概应和App内一致，，可是要思量目的受众的差别做适量更改。。镌汰banner、实物图标的使用，，要实现页面简化和色彩统一。。

3· 是否应当使用水平转动列表

现在大大都小程序都不接纳这样的做法，，但也有像豆瓣评分这样的小程序在使用。。水平转动列表和笔直转动列表在小程序中是二选一关系，，一个若为可以无限拉动，，另一个应为有限。。

4· 注重加载动效

小程序内容的轻量也有一个主要原因——镌汰翻开时间，，用户关于小程序的期待时间要比App少许多。。此时加载动效就能够作为一个留住用户的加分项。。

5· 导航栏样式

小程序的底部导航栏较为死板，，设置空间为2-5个，，且图标和文字空间划定严酷。？？？？梢远嗍褂枚ゲ康己嚼负托〉己桨磁ァ！：帽韧纺酝跽呔屯ü钢豕贰棺魑“磁サ剂饔没У街跞劝裥〕绦颉！

以上是小程序商城ui页面实例剖析，，若是你需要小程序商城系统的开发，，可以咨询小程序工具开发公司长沙，，提供多类型商城/门店小程序制作，，可视化编辑 1秒天生5步上线。。通过拖拽、拼接？？？？榻峁剐〕绦蛏坛且趁，，所看即所得，，只需要美工就能做出细腻商城。。更多小程序市肆请审查：小程序市肆