【你说我画】WEB端基础元件库-RP9

兼容性提醒:此作品只兼容Axure RP 9.0及以上版本,低版本软件无法使用。

2026-1-29更新内容:

增加了WEB端和移动端常用的页面栅格,可以直接套用。
详见【00Basic基础规范】->【001栅格】->【WEB端栅格】/【移动端栅格】

WEB页面尺寸页宽列数量列宽间距边距FHD1920X108019201216000FHD1920X108019201215284FHD1920X1080192012144168FHD1920X10801920121362412FHD1920X10801920121282460FHD1920X10801920248000FHD1920X10801920247284FHD1920X108019202464168FHD1920X10801920245624122K2560×14402560122080322K2560×14402560122008362K2560×144025601219216402K2560×144025601218424442K2560×14402560241040322K2560×1440256024968362K2560×14402560248816402K2560×14402560248024444K3840×2160384012320004K3840×2160384012312844K3840×21603840123041684K3840×2160384024160004K3840×2160384024152844K3840×2160384024144168
手机型号页面尺寸页宽列数量列宽间距边距iPhone17/Pro1206×26224021224813iPhone17 Air1320×28684201226810iPhone17 Pro Max1260×27364401226820Huawei Pura 80/Pro/Pro+2760×1256418122689Huawei Pura 80 Ultra2848×13124361226818Huawei Mate 80/Pro2700×12244081224816Huawei Mate 80 Pro Max/RS非凡大师3200×1440480123284小米17 标准版2712×12204061224815小米17 Pro/Pro Max3200×1440480123284小米17 Ultra3840×21607201248828

2025-12-02 更新内容:

1)优化数据表格的交互功能,提供了一个完成功能的数据表格,包括数据表格的增删改查,排序,分页,自定义列。详见【08Table 数据表格】->【081 基础数据表单】

2)增加了树状结构部件,包括单选树和多选树,用来制作路径选择功能。详见【15Tree 树形结构】

3)优化了标签页部件,标签页出现的位置不再固定,而是按照交互点击的次序排列;标签之间的空隙保持固定,不会因为删除标签页,导致前后标签页空隙变大。详见【07Tabs 标签页】

你来说,我来画,不定期更新,不间断充实牛马们的武器库,让牛马们有充足的弹药厮杀,不再为缺少称手的元件而脱发。

要脱我来脱,反正已经秃了……

00Basic基础规范

这里为本元件库的视觉样式确定了基础规范,包括页面整体的栅格切分方法,WEB 端主要布局结构的长宽大小,所有元件的配色、字体样式、元件边框样式等,保证元件库内的所有元件有统一的样式。

01Navigation导航

导航元件包括常见的顶部导航和侧边导航,以及与导航配套的面包屑元件。

顶部导航

侧边导航

提供了页面面包屑元件,查看元件属性和交互事件,很容易明白其工作原理。在导航元件中,也匹配了页面面包屑元件,两者可以配套使用。

02Frame框架

提供了两套页面结构,分别是【上、左下、右下】和【左、右上、右下】,可以根据自己的需要选择使用。

每套页面结构都涵盖了 7 种侧边导航样式,大家可以根据自己的设计要求选择其中一种使用。

另外在页面结构一的基础上,增加了标签页元件,提供了多个功能子页面同时打开,快速切换的功能效果。

除了页面的整体结构外,页面表单内容部分还提供了锚点的浏览结构。

03Button按钮

基础的标准按钮元件,覆盖了标准色和浅色(朴素),每一类按钮都包含主要、成功、消息、警告和危险五种样式。

04Link文字链接

提供主要、成功、消息、警告、危险五种颜色样式的文字链接,基本满足常见的元件要求。

05Input输入框

主要提供了基础、时间两类输入框,其他两类搜索和文本域还在完善中。

基础类输入框提供了带图标样式、限制输入长度、可清楚输入内容和信息搜索的常用输入框,所有输入框都具备输入移入和点选的交互样式。

时间类输入框十分全面,包含了年份、季度、月份、日期、时间、时段输入框,基本覆盖了所有的时间输入需求。

06Select选择框

选择框元件提供了基础、级联和穿梭三类选择框元件。基础选择框提供了基本的单选和多选选择框,非常基础,这里就不截图介绍了。

级联类选择框包括多级协同的选择框,以及多个条件项在一起的综合选择框。

级联选择框

多选选择框

穿梭选择框是较为常见的元件。但在 Axure 内实现起来较为复杂,且存在软件本身的 Bug,需要优化逻辑避坑。

07Tabs标签页

在 Axure自带的基础选项栏元件的基础上,增加了可删除选项栏的元件,以及固定首个选项栏,删除其余选项栏的扩展元件。

同时,还提供了动态面板和子页面两种内容容器的选项栏元件。

08Table数据表格

提供了多种基础表单,包括单选、多选表单,带查询条件的表单,数据增减的表单。

此外,还拆分出数据表格的多种分页控件,供大家选择合适的分页控件使用。

09Dialog对话框

提供了两类对话框,分别是标准信息对话框和简约信息对话框。

标准信息对话框包含基础信息和交互按钮。信息的内容和按钮的多少可以根据实际的需求进行调整。

简约信息对话框仅提供了基础样式的对话框,其交互动作和标准信息对话框一样。

10Message消息提示

消息提示元件提供顶部悬浮提示和提示页面两类元件。

顶部悬浮提示是在页面顶部出现的,显示较为简短的信息提示的元件,通常会自动出现和消失。

提示页面提供了常见的交互结果提示,如操作成功、失败的提示页面,网站出现 403、404、500 等异常情况的提示。

11Collapse折叠面板

折叠面板包括非关联面板(可以全部展开)和关联面板(一次只能展开一个面板)。

12Card卡片

提供了基础的小卡片和通用的背景板。

13Slider滑块

14ProgressBar进度条

98Icon图标

提供了三种常用类型的图标,包括线框风格、实底风格和双色风格,以及常见的企业 LOGO 图标。

99Other其他

收纳了几个暂未归类的元件。

2 条评论 发表评论

可以的,找到【15Tree 树形结构】这个部分,有你想要的树形结构列表。
如果仅仅只是属性结构的展开和收拢,看前面三个【基础属性结构】【基础树形结构-一键开合】【基础属性结构-带图标-一键开合】就可以了
如果需要多树形节点做勾选,就看第四个【多选树形结构】。这个原型在处理上下级节点的多选效果时,对应的交互事件处理较为复杂,可以加我的QQ15336393交流。

发表回复

以下作品你可能也喜欢:
推荐

作品名称:水库运行管理平台高保真原型 作品类型:管理平台 主要适用:W…

继续阅读 →

售价:¥ 49.90 销量: 22 3684
推荐

软件版本:Axure9 页面数量:76 产品类型:高保真App原型 当…

继续阅读 →

售价:¥ 58.80 销量: 44 9852
推荐

         本原型是作者根据多年的原型制作经验总结提取而出来的一…

继续阅读 →

售价:¥ 78.00 销量: 191 34275
推荐

作品介绍 作品名称:ERP进销存系统原型V1.0 软件版本:Axure…

继续阅读 →

售价:¥ 49.00 销量: 81 15167
推荐

作品名称:智慧灌区后台管理系统高保真原型模版 作品类型:大屏&…

继续阅读 →

售价:¥ 59.99 销量: 22 4267
推荐

前言 hi~大家好,前一段时间我刚刚分享了一篇《打造高品质Axure组…

继续阅读 →

售价:¥ 99.00 销量: 50 7466