原型设计资源组件库分享

这一次一口气分享七个模板：

1)Clarity UI Library - dark 5.0.0

2)ADS Components

3)Slack UI Kit

4)信息服务平台APP

5)银行类APP

6)登录/注册流程精选合集

7)大屏数据可视化

其中有大量日期、形状、列表、分页器、表格等组件都可以被反复使用的内容快来保存到自己项目中去！

1  Clarity UI Library - dark 5.0.0 

UI Kit for Clarity - dark 5.0.0是一套参考了Vmware官方规范的UI kit，可以提升用户界面的设计效率。

目前包括的组件有：

1）Alerts
2）Accordion & Cards
3）Buttons
4）Dropdown
5）Datapicker & Timeline
6）Tree
7）Modal & Wizard
8）Tab
9）Progress & Spinner
10）Label

可直接将模板项目的“设计资源”共享至团队，实现大家一键复用哟~~

下载链接：

https://www.mockplus.cn/example/rp/100087/

2  ADS Components 

ADS 组件库是Atlassian的组件包的一部分，在这里我们将部分基础的组件进行了整理。

本项目中既提供了常见的Badge、Banner、Breadcrumbs组件，也罗列了在B端产品设计中广泛应用的Datetime picker、Dropdown menu、Empty state较为复杂的组件，这些可重复引用的组件能在实际工作中帮助你高效、便捷的完成设计工作。

下载链接：

https://www.mockplus.cn/example/rp/100088/

3  Slack UI Kit 

Slack UI 套件是其中Slack协作工具中用于UI设计的一套组件，此次模板中使用了很多基础元素，例如矩形，线条，输入框，文本框等。

 

一些必要的交互在按钮，下拉框，多选框中体现；其中也涉及了图片的处理，对于不同客户端如iOS, Android和Desktop，一些元素在UI的呈现上有些微的差异。

下载链接：

https://www.mockplus.cn/example/rp/100089/

4  信息服务平台APP 

本套原型模板为信息服务平台APP，主要的信息分类包括招聘求职、房屋租售、二手市场、拼车租车、本地商家、生活服务、相亲交友、社区茶座等。

本原型将涉及到的信息分类页面以高保真的形式还原，添加了必要的交互跳转，利用辅助画板实现图片轮播等效果，完整还原页面交互流程。

下载链接：

https://www.mockplus.cn/example/rp/100090/

5  银行类APP 

本套原型模板为银行类APP，其中分为最爱、智服务、惠精选、我的四大板块，分别覆盖了银行类常用的理财产品，数据分析，各类充值，资产信息等板块。

本原型中，使用了RP饼图图表、柱状图表、下拉框、选项卡、辅助面板实现了内容切换的效果。

下载链接：

https://www.mockplus.cn/example/rp/100091/

6  登录/注册流程精选合集 

本案例包含了4组典型的APP登录/注册流程设计，还原了关键页面的线框设计和交互效果。

案例共计15个页面，使用的组件有：输入框，按钮，内容面板（及辅助画板），列表，选项卡等。

赶紧保存至项目中，自己来试试吧~~

下载链接：

https://www.mockplus.cn/example/rp/100092/

7  大屏数据可视化 

本套原型模板以“杭州气象局数据”为例，展现了“大屏数据可视化”的典型运用，原型包含了三个主要部分：

1）时间、地域等维度下的气象数据变化曲线展示
2）访问终端分布的数据对比展示

3）数据动态列表展示

本原型中，使用了RP钢笔工具对折线图进行绘制，同时运用布尔运算对饼状图等进行绘制，也使用了选项卡、辅助面板实现了内容切换的效果。

下载链接：

https://www.mockplus.cn/example/rp/100093/

如果你喜欢以上的模板例子

并想要收藏和使用的话按照下面的方式就可以快速保存和复用啦！ 

01  点击右上角的编辑/保存按钮 

 

02  在编辑状态下，戳"点击保存" 

03  回到项目首页，就能看到保存的模板