FinClip为企业提供小程序生态圈技术产品,开发者可在FinClip小程序开发帮助中心找到相关FinClip小程序指引

# 视觉指引

# 1. 说明

FinClip小程序支持多种灵活的自定义方式,为使小程序整体视觉统一,做如下约定,开发者可根据本约定进行UI设计。

# 2. 小程序菜单

# 2.1 胶囊控件

小程序“更多”菜单可通过小程序右上角中的“…”图标打开,默认打开后出现“转发”、“回到首页”(当已经处于首页时、默认置灰)以及“投诉反馈”三个按钮。

胶囊控件默认尺寸如下(查看如何设置):

  • 总宽度尺寸:88;
  • 总高度尺寸:32;
  • 胶囊右边距:10;
  • 胶囊圆角半径:5;
  • 胶囊边框宽度:0.8;

除这三个基础按钮功能外,开发者还可以自行注入其他功能,对于自行注入的功能,请按照下方所示进行图标设计。

# 2.2 小程序菜单深浅配色方案(iOS和Android)

开发者可根据界面需要,选择深色或浅色小程序菜单,打造适合小程序的设计风格。

# 3.字体/颜色

# 3.1 字体

# 3.2 颜色

# 4. 基础控件

# 4.1 启动加载

# 4.2 选项卡

提供平级的区域将大块内容进行收纳和展现,保持界面整洁。


# 4.3 底部标签栏

一般固定于底部,作不同分页入口。标签数不少于 2 个,最多不超过 5 个。

# 4.4 按钮

使用的按钮主要分为主要按钮、次要按钮、文字按钮。

  • 主要按钮:用于主行动点,一个操作区域只能有一个主按钮。
  • 次要按钮:用于最次级的行动点。
  • 文字按钮:用于作为外链的行动点。


按钮的响应状态包含 3 种,分别是:Normal 普通态 、Press 点击态、Disable 禁用态。

# 4.5 列表



© 2021 凡泰极客

👋🏻 嘿,你好!

「FinClip」是一套基于云原生框架设计的小程序容器。能够让任何移动应用在集成小程序SDK之后,获得可用、安全的小程序运行能力。

>> 点我免费注册体验

查看产品文档
了解与 FinClip 相关的一切信息

产品博客 👈  了解产品更新与核心功能介绍
资源下载 👈  获取小程序 SDK 与开发工具
文档中心 👈  查询 FinClip 小程序开发指南与答疑

商务咨询热线
预约 FinClip 产品介绍,咨询商务报价或私有化部署事宜

400-066-00210755-86967467

获取产品帮助
联系 FinClip 技术顾问,获取产品资料或加入开发者社群

联系线上
人工客服

或 👉  点击这里,提交咨询工单