利器 | 设计平台元件库

# 利器 # 工具

作者 / jikunchong

献给产品经理和设计师！以上设计组件我已经全部下载打包好了，在后台回复关键词「 设计 」就可以直接获取，你也可以阅读本文按照自己的需求来下载。 注意是在公众号对话框发送关键词，不是评论本文。

实际使用效果如下图：

文中 标记为绿色的文字 均为超链接， 点击底部「 阅读原文 」即可阅读和点击。

安装 Axure RP 元件库：请将下载的 .rplib 文件放到 Axure RP 元件库目录下，然后重新打开 Axure RP 8 软件，并在元件库列表中选择相应元件库即可使用。元件库目录位置：

• Windows 系统：我的文档/Axure/Libraries

• macOS 系统：文稿/Axure/Libraries

另外，还有一些资源推荐给您：

• Axure RP 导出的网页原型界面汉化包： refscn/rphh （更新至 8.1.0.3382 版本）

• 提供知识索引的参考卡片： refscn/cards

设计平台元件库

☞ Material Design

基于 Google Material Design 准则创建，适用于 Android 手机、平板应用，以及跨平台桌面应用的原型设计。

• 下 载 refs-design-material.rplib ，包括常规、模式、基本、输入、列表、富列表、卡片、弹窗和扩展等分组元件。

• 下载 Noto Sans CJK SC 字体（可选安装） ，安装后原型页面有更好的显示效果。

• 更多 Noto 字体，请参见 Google Noto Fonts 官网 。

查看完整大图

• 更多信息，请参见 Material Design 官网 。

☞ Apple Design

基于 Apple iOS/macOS Human Interface Guidelines 创建，适用于 iPhone、iPad 和 macOS 桌面应用的原型设计（macOS 部分请关注后续更新）。

• 下载 refs-design-apple.rplib ，包括常规、导航/模式、基本、列表、列表左右件、选择/输入、弹窗和扩展等分组元件。

查看完整大图

• iOS 平台更多信息，请参见 iOS 设计准则 。

• macOS 平台更多信息，请参见 macOS 设计准则 。

☞ Fluent Design

基于 Microsoft Fluent Design System 创建，适用于 Windows 手机、平板和桌面 UWP 应用的原型设计。

• 下载 refs-design-fluent.rplib （进行中，稍后推出）

网页设计元件库

☞ 移动网页

基于微信 WeUI 和小程序设计指南等创建，适用于包括微信在内的移动网页或 HTML5 轻应用的原型设计。

• 下载 refs-webm-wechat.rplib ，包括常规、导航/模式、基础、列表、选择/输入、卡片、弹窗和扩展等分组元件，基于 iPhone 原型尺寸描述。

查看完整大图

• 微信 WeUI 更多信息，请参见 微信 WeUI 官网 。

• 微信小程序设计更多信息，请参见 微信小程序设计指南 。

☞ 桌面网页

包括通用官网，社交、电商和媒体等分类网站和控制台的设计元素。

• 推荐下载 Ant Design Library ，Ant Design 实现比较完整，同时与其技术框架匹配，推荐直接使用。

• 下载 refs-webd-console.rplib （稍后推出）

• 下载 refs-webd-site.rplib （稍后推出）

图表元件库

☞ 模型和数据图表

• 下载 refs-chart-model.rplib ，包括描述产品需求流程的 UML 状态图、活动图、序列图、用例图，以及商业等分组图表。

查看完整大图

• 下载 refs-chart-data.rplib， 包括适合移动端的点图、线图、区域图、柱状图、饼图、雷达图、股票图、仪表盘及混合等各类数据图表。

查看完整大图

图标/图片元件库

☞ Material Design 图标

基于 Material Design icons V1.0.2 图标创建。

• 下载 refs-icon-material-v1.rplib （官方图标 x24），包括 action, alert, av, communication, content, device, editor, file, hardware, image, maps, navigation, notification, social, toggle 等分组图标。

• 原始图标地址

查看完整大图

• 更多信息，请参见 Material Design 官网 。

☞ 品牌设计图标

基于 Apple、IBM 等品牌图标创建。

• 下载 refs-icon-brands.rplib （ 官方图标 x28/x24），包括 Apple 系统导航和工具栏、切换栏、快捷操作，IBM Design 操作、格式、对象等分组图标。

• 查看 Apple iOS 原始图标地址

• 查看 Apple macOS 原始图标地址

• 查看 IBM Design 原始图标地址

☞ Icons8 图标/图片

基于 Icons8 图标创建。

• 下载 refs-icon-s8flat.rplib （彩色图标 x32），包括照片和视频、基本、商业、工业、移动、箭头、数据和新增等分组图标。

• 原始图标地址

• 更多信息，请参见 Icons8 官网 。

☞ 图标平台图标/图片

基于 Easyicon、Smallicons、阿里妈妈 Iconfont 等图标创建。

• 下载 refs-icon-alibaba.rplib （官方图标 x24），包括 Alibaba 国际站、支付宝、支付宝记账等分组图标。

• 下载 refs-icon-colorful.rplib （彩色图标 x32），包括社交、社交（国外）、文档类型等分组图标。

• 下载 refs-image-colorful.rplib （彩色图片 x128），包括封面、生活小图、生肖地支春节、天气、图表、交通、乐器、生活等分组图片。

• 更多信息，请参见 Easyicon 官网 、 Smallicons 官网 和 Iconfont 平台官网 等。

☞ 手势图片

基于 Jeff Portaro 的 Touch Gestures Icons 创建，适用于所有移动平台触控、桌面触控，以及触控面板的操作手势表达。

• 下载 refs-image-gesture.rplib