[干货分享]AXURE整套高保真UI框架和元件组(白色风格)
![](https://upload-images.jianshu.io/upload_images/6332485-c4aac72950a30802.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
写在前面
强烈建议开始之前阅读以下第一篇高保真UI框架的前面部分,以了解设计思想,这篇文章不再重复介绍:
本次共享模板的UI规范
注:由于篇幅问题,截图中省略了部分规范内容(比如语义规范,内容显示规范,动效规范)。后期会整理出一份完整的规范文档共享出来,敬请期待。
![](https://upload-images.jianshu.io/upload_images/6332485-280b4d11c1afdb2a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
界面整体预览
![](https://upload-images.jianshu.io/upload_images/6332485-a174005b6322bb9b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
注:本来做了一个界面操作演示,由于生成gif太大,有10M多,所以就不上传了,下面分别截图显示,具体动效可在元件文件里查看。
主要元件效果
主要元件包括:输入框、数值输入框、下拉框,滑块(silder)、时间控件、单选、多选、分页、页签、弹框、提示信息等。
![](https://upload-images.jianshu.io/upload_images/6332485-ec3b277a12c17693.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
时间控件
![](https://upload-images.jianshu.io/upload_images/6332485-e4d5f52f85a5b38b.gif?imageMogr2/auto-orient/strip)
页签(tab)
![](https://upload-images.jianshu.io/upload_images/6332485-a36e218be645de54.gif?imageMogr2/auto-orient/strip)
页签(tab)
下拉框
![](https://upload-images.jianshu.io/upload_images/6332485-f096a6e95d56c077.gif?imageMogr2/auto-orient/strip)
On/Off Switches
![](https://upload-images.jianshu.io/upload_images/6332485-f053a30d0b4d0648.gif?imageMogr2/auto-orient/strip)
On/Off Switches
slider
![](https://upload-images.jianshu.io/upload_images/6332485-41155525ec7aeec3.gif?imageMogr2/auto-orient/strip)
表格
![](https://upload-images.jianshu.io/upload_images/6332485-04ac7f5ed7521da9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
提示元件
![](https://upload-images.jianshu.io/upload_images/6332485-ac6124a5ae37eb29.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
气泡
![](https://upload-images.jianshu.io/upload_images/6332485-584cb207103f42eb.gif?imageMogr2/auto-orient/strip)
以上便是本次分享元件的主要部分,原始文件截图如下:
![](https://upload-images.jianshu.io/upload_images/6332485-4c79739188399df7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
通过axure的元件导入之后就可以用啦
![](https://upload-images.jianshu.io/upload_images/6332485-a701e8bfd2a34c6a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
~以上便是本次分享的全部内容~
福利
欢迎大家留言,如果有需要要我帮组实现什么风格,比如:Easyui风格,bootstrap风格。只要建议超过20人。我就抽时间实现并发布。
原件下载
为防止地址失效,所有下载链接都在公众号维护,请关注公众号后,回复“A036” 获取本次分享的文件下载地址。
感谢阅读和关注!
![](https://upload-images.jianshu.io/upload_images/6332485-113d5c205df59aba.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
公众号“dawanqiao”内容更全,欢迎关注!