1.调研方向：

调研gui开发组建需求，是否有无必要丰富元件库，以满足个性化需求

2.调研目的：

产出：开发库组件需求方向，类别

3.调研分析

目前组件及元件库市场按照大的方向主要分为两类：

1. 页面模版
2. 个性化组件套装（小组件 如小按钮）

下面按照这两个分类逐一进行分析：

3.1页面模版类型：

提供整个页面模版类型的平台主要以国内提供自主建站的saas平台为主，如凡科建站，华为云，建站之星，以及电商平台自主建站的各大saas厂商。

模版类型涵盖：

广告、文化、设计服务、学校、教育、培训机构、五金、 设备、工业制品、门窗、卫浴、灯光照明、IT、软件、互联网 化工、原材料、环保、建筑建材、能源、科技、运输、房产 物业管理、金融、投资、理财保险、工商、法律、知识产权 休闲、娱乐、生活服务、服装饰品、鞋帽箱包、医疗、保健 医药仪器、装修、装饰、室内设计、摄影、婚礼、婚庆策划 数码、家具、家居百货、食品饮料、蔬果、茶酒、政府部门 机构组织、餐饮、酒店、旅游服务、汽车、汽配、汽车服务 农业畜牲、种植养殖、体育、健身、运动器材、礼品、玩具 小商品、企业集团、工作室、个人、家政、保洁、月嫂服务

凡科建站 典例：
1.选择使用场景：

2.选择模版后进行模块化功能组件操作

在选择使用模版后进行功能组件及内容的替换

总结：模版建站主要会为用户提供各类场景下的模版，在选定模版后，根据提供的功能模块进行个性化组建的修改与重建。所提供的功能组件有：文本、图片、按钮、图文展示、轮播多图、导航栏、在线视频、容器、标签、产品分类、商城导航、在线商城、在线客服、表单、投票、天气、动态数字、链接、时间、收藏、公告等等

3.2个性化元件库

个性化元件库分为 PC端web开发/移动端小程序开发/移动端app开发/Gui设计模版 四类，并借助爬虫获取Axureshop和SOOUI两个网站上的相关元件库信息，详情如下：

词云展示关键词在爬取数据中所出现的比例（关键词为元件库标题）

3.2.1PC端Web元件库

1.SOOUI_Web设计模板词云 （网页爬取后 按照出现频率统计词云）

词云数据来源：SOOUIWeb设计模板词云（统计模版数量1200个）
[sooui网页设计模版爬虫](https://www.yuque.com/hahaha-d7rgn/bydf3u/exlrkn?view=doc_embed&inner=6edd)
SOOUI_Web设计模板词云总结：
1.sooui网页中，出现频率最多的web设计元件库为：仪表盘、管理系统、教育、旅游、金融、用户界面、登陆、数据可视化、博客、按钮等等

2.Axureshop_Web元件库top20

在Axureshop中爬取Web相关元件库信息（top20如下——按照浏览量排名）：
Axureshop_付费 web元件库

典例分析：
其中出现和关注频率最高的为：ElementUI元件库+后台模板页面
包含：
元件库：包含导航、颜色、字体、边框、图标、按钮、文字链接、单选框、多选框、输入框、计数器、选择器、级联选择器、开关、滑块、时间选择器、日期选择器、日期时间选择器、上传、评分、颜色选择器、穿梭框、表单、表格、标签、进度条、树形控件、分页、标记、头像、数据统计、警告、加载、消息提示、弹框、通知、导航菜单、标签页、面包屑、页头、下拉菜单、步骤条、对话框、文字提示、气泡确认、弹出框、卡片、走马灯、折叠面板、时间线、分割线、日历、图片、回到顶部、无限滚动、抽屉、异常、结果、列表、评论、统计数值、描述列表、骨架屏扩展等常用组件。

后台页面模板：注册登录、工作台、数据统计、用户管理、应用管理、文章管理、分类管理、短信管理、邮件管理、表单管理、栏目管理、服务订购、个人/企业认证、工单管理、图片管理、消息中心、账户设置、权限管理、系统设置、操作日志等。

页面详情：
1.页面按钮Button

2.Progress进度条

3.Input输入框：
4.基础图标组件

5.管理后台_文章管理
典例分析总结：
ElementUI元件库+后台模板页面 该产品以自定义元件库➕后台模版为组合，可以让用户在模版框架的基础上，与自定义元件库进行组合，可以在框架基础上个性化设计，同时其常用元件库为：

导航、颜色、字体、边框、图标、按钮、文字链接、单选框、多选框、输入框、计数器、选择器、级联选择器、开关、滑块、时间选择器、日期选择器、日期时间选择器、上传、评分、颜色选择器、穿梭框、表单、表格、标签、进度条、树形控件、分页、标记、头像、数据统计、警告、加载、消息提示、弹框、通知、导航菜单、标签页、面包屑、页头、下拉菜单、步骤条、对话框、文字提示、气泡确认、弹出框、卡片、走马灯、折叠面板、时间线、分割线、日历、图片、回到顶部、无限滚动、抽屉、异常、结果、列表、评论、统计数值、描述列表、骨架屏扩展等常用组件。

3.2.2Gui设计模板

数据来源：SOOUI_Gui设计模板词云（统计模版数量1080个）
sooui_gui元件库爬虫
结论：在SOOUI_Gui设计模版中，出现频率最多的仍有仪表盘，数据可视化页面，金融，网页登陆注册，电子商务，小的UI组件（如下图），网页播放器，钱包，智能家居等等

3.2.3移动端小程序元件库类别

1.SOOUI小程序UI设计元件库词云

数据来源：SOOUI小程序元件库词云（统计模版数量28个 数据较少）
sooui_小程序元件库爬虫👆
典例介绍：SOOUI小程序组件库

2.Axureshop小程序元件库
数据来源：Axureshop小程序元件库词云（统计模版数量50个 所有）

AxureShop_小程序元件库爬虫👆
AxureShop_付费小程序元件库👇
Axureshop 小程序元件库付费top15：

小程序常见元件：
包含：基础组件、表单组件、反馈组件、展示组件、导航组件、业务组件、其他组件七大模块。
基础组件：颜色、字体、按钮、单元格、图标、图片、布局、弹出框、内置样式；
表单组件：日历、复选框、级联选择、时间选择、输入框、数字键盘、密码输入框、选择器、单选按钮、评分、搜索、滑块、步进器、开关、开关单元格、文件上传；
反馈组件：上拉菜单、弹出框、下拉菜单、加载、消息提示、遮罩层、下拉刷新、滑动单元格、轻提示；
展示组件：环形进度条、折叠面板、倒计时、分割线、图片预览、图片懒加载、通知栏、面板、进度条、骨架屏、步骤条、粘性布局、轮播、标记；
导航组件：宫格、抽屉、索引栏、导航栏、分页、侧边导航、标签页、标签栏、分类选择；
业务组件：地址编辑、地址列表、省市区选择、卡片、联系人、优惠券选择器、商品导航、提交订单栏、商品规格；
统计图组件：折线图、柱状图、条形图、饼图、面积图、散点图、雷达图、热力图、漏斗图；
其他组件：状态栏、头像、键盘、徽章、结果；

总结：
无论是SOOUI还是Axureshop的小程序元件库模版，均包含各类场景下的使用模版（电子商务、 医疗挂号、地图、在线教育、天气）以及个性化元件进行自定义设置，其元件包含：

基础组件：颜色、字体、按钮、单元格、图标、图片、布局、弹出框、内置样式； 表单组件：日历、复选框、级联选择、时间选择、输入框、数字键盘、密码输入框、选择器、单选按钮、评分、搜索、滑块、步进器、开关、开关单元格、文件上传； 反馈组件：上拉菜单、弹出框、下拉菜单、加载、消息提示、遮罩层、下拉刷新、滑动单元格、轻提示； 展示组件：环形进度条、折叠面板、倒计时、分割线、图片预览、图片懒加载、通知栏、面板、进度条、骨架屏、步骤条、粘性布局、轮播、标记； 导航组件：宫格、抽屉、索引栏、导航栏、分页、侧边导航、标签页、标签栏、分类选择； 业务组件：地址编辑、地址列表、省市区选择、卡片、联系人、优惠券选择器、商品导航、提交订单栏、商品规格； 统计图组件：折线图、柱状图、条形图、饼图、面积图、散点图、雷达图、热力图、漏斗图； 其他组件：状态栏、头像、键盘、徽章、结果；

在搜索小程序元件库时，其相应的搜索结果数量相对于app、web较少，小程序组件投稿频率没有web和app组件投稿的频率高。

3.2.4移动端App元件库类别

数据来源：SOOUI_app元件库词云（统计模版数量1140个）
sooui_app设计元件库爬虫👆

Axureshop app元件库词云：
数据来源：Axureshop app元件库词云（统计模版数量51个）
AxureShop_app元件库爬虫👆

Axureshop app元件库付费top15：
Axureshop_app付费元件库👇

总结：
app元件多以场景模版为主，如管理系统、电商、数据后台、线上教育、数据后台，短视频平台，智慧校园等等
元件库则多为：数据图表 数据统计 预加载 通话 错误页面 数据对比 步骤流程 进度条 弹出层样式 登录注册 播放界面 分享界面 导航栏 金刚区 瓷片区 聊天界面 图文列表 个人中心 搜索 步骤进度条图表弹窗。

4.总结

无论是在移动端还是PC端，页面设计均已模块化加个性化组件为搭配，所以给出关于组件的建议如下：
首先为用户提供针对其使用场景下的模版，然后根据其使用场景下，提供相应的个性化组件，以满足其网站的独特性。
综合小程序，app，web需求，其个性化组件按照出现频率生成词云如下，供参考：

1.web端多以可视化大数据、管理后台、saas等等使用场景为主要需求，其常用元件如下：

元件库：包含导航、颜色、字体、边框、图标、按钮、文字链接、单选框、多选框、输入框、计数器、选择器、级联选择器、开关、滑块、时间选择器、日期选择器、日期时间选择器、上传、评分、颜色选择器、穿梭框、表单、表格、标签、进度条、树形控件、分页、标记、头像、数据统计、警告、加载、消息提示、弹框、通知、导航菜单、标签页、面包屑、页头、下拉菜单、步骤条、对话框、文字提示、气泡确认、弹出框、卡片、走马灯、折叠面板、时间线、分割线、日历、图片、回到顶部、无限滚动、抽屉、异常、结果、列表、评论、统计数值、描述列表、骨架屏扩展等常用组件。

2.移动端小程序多以电子商务、 医疗挂号、地图、在线教育等等使用场景为主，其常用元件如下：

包含：基础组件、表单组件、反馈组件、展示组件、导航组件、业务组件、其他组件七大模块。 基础组件：颜色、字体、按钮、单元格、图标、图片、布局、弹出框、内置样式； 表单组件：日历、复选框、级联选择、时间选择、输入框、数字键盘、密码输入框、选择器、单选按钮、评分、搜索、滑块、步进器、开关、开关单元格、文件上传； 反馈组件：上拉菜单、弹出框、下拉菜单、加载、消息提示、遮罩层、下拉刷新、滑动单元格、轻提示； 展示组件：环形进度条、折叠面板、倒计时、分割线、图片预览、图片懒加载、通知栏、面板、进度条、骨架屏、步骤条、粘性布局、轮播、标记； 导航组件：宫格、抽屉、索引栏、导航栏、分页、侧边导航、标签页、标签栏、分类选择； 业务组件：地址编辑、地址列表、省市区选择、卡片、联系人、优惠券选择器、商品导航、提交订单栏、商品规格； 统计图组件：折线图、柱状图、条形图、饼图、面积图、散点图、雷达图、热力图、漏斗图； 其他组件：状态栏、头像、键盘、徽章、结果；

3.app多以管理系统、电商、数据后台、线上教育、数据后台，短视频平台，智慧校园等等使用场景为主，其常用元件库如下：

数据图表 数据统计 预加载 通话 错误页面 数据对比 步骤流程 进度条 弹出层样式 登录注册 播放界面 分享界面 导航栏 金刚区 瓷片区 聊天界面 图文列表 个人中心 搜索 步骤进度条图表弹窗等等 元件库与使用场景关联密切（如电商——购物车）（短视频——播放器）