Axure元件库：TailwindUI抽象元件库 2.0

Maokai
1,987 阅读1分钟

前言

去年在Tailwind CSS官网发现了Tailwind UI，发现预览图非常适合做抽象原型（PS：“零保真”😁）

image-20210619144348291.png

不使用具体文字，仅用颜色和轮廓表现的原型

image-20210617143708897.png

Tailwind UI官网以前是灰色，🤐用Axure复刻（chao xi）了一套自用，最近发现官网有了更新，趁摸鱼的空闲更新一下，分享出来。

image-20210619145258934.png

因为是复刻（chao xi）TailwindUI，所以名字就叫 TailwindUI抽象元件库

至于版本号，之前自用的版本是1.0，这次公开的版本就用2.0吧。

TailwindUI抽象元件库 2.0

软件

image-20210619155054595.png

元件库使用Axure 9制作，emm，其他版本自测🤪

导入

点一下 + 号就能导入Axure啦

image-20210619155207649.png

下载

链接: pan.baidu.com/s/10stlheV4… 提取码: s4fq

少啰嗦，先看东西

放两张用新版做的原型图

image-20210619150152517.png

image-20210619150329265.png

颜色

主色

image-20210619150810693.png

文字

image-20210619150821576.png

边框

image-20210619150838968.png

背景

image-20210619150855518.png

尺寸

首屏尺寸1440px × 820px

Q：为什么不按宽度1920px来做？

A：作为一个抽象元件库，可以用但是没必要。1440足以展示一些模块的概念

Q：为什么高度不是900px？

A：浏览器页签 + 地址栏 ≈ 80px，需要减去这部分

制作原型时，推荐使用24栅格来对齐

image-20210619151641700.png

组件

顶部导航

image-20210619152422167.png

侧边导航

image-20210619152553423.png

按钮

image-20210619152721869.png

文字

image-20210619152846541.png

表单

image-20210619152925989.png

其他元素

image-20210619153028572.png

列表

image-20210619153107574.png

image-20210619153137557.png

image-20210619153201629.png

图片

image-20210619153240204.png

模块

image-20210619153331092.png

image-20210619153407254.png

最后再说两句

截图里已经展示里大部分元件，全部元件数量

分类数量
基础6
布局12
顶部导航8
左侧导航6
按钮7
文字9
表单16
元素14
列表13
图片4
模块9
页面9

如果需要新的元件请留言。

😏再说一遍下载地址

链接: pan.baidu.com/s/10stlheV4… 提取码: s4fq

avatar
文章
阅读
粉丝