表单提交后再刷新页面是什么意思_Ant Design活学活用,用20+案例教你做Web页面...

提供20多个基于AntDesign的Web页面模板,包括注册登录、工作台、导航栏、列表页、表单页、表格页及错误页等,助力设计师和开发者高效构建高质量Web应用。

afc524ef81ecb36bc7aca10e158e29e9.png

噔噔噔噔,欢迎刀友们收看本期「素材播报」。

93e1bd281184b2e9bca0eb10201be52f.gif

犹记得 Element 组件上线的时候,刀友们一边夸,一边发问 Ant Design 呢?!不是我吹,我们墨刀对于刀友,那必须是一呼百应。

本期就将仔细来聊聊—— 用 Ant Design 做的 20+ 个 Web 页面,保证转手就能用,要多百搭有多百搭

b6e9e927c63b3d26c11511c944b9ca55.gif

什么是 Ant Design

在说如何搭建使用之前,先来了解一下 Ant Design

服务于企业级产品的设计

b2adbcfa061deaa6b1331bcf9894cd96.png
图片源自:Ant Design 官网

其设计理念是帮助使用者快速产出高质量的产品原型,让设计者和开发者有时间专注于更好的用户体验,快乐的工作。这一点跟我们素材广场的想法不谋而合。

83064bb11dae9a277cfa2dcca239ef13.png
图片源自:Ant Design 官网

Ant Design 能做什么

1.注册登录页面

网页搭建中,注册登录页面必须是第一步。先看看注册:

137b01ad937336d8fe4273409ddb063c.png

简单明了有没有?!我们也根据常用的登录方式,制作了两个页面:手机登录页及账号密码登录页。刀友们,也可以在这个基础上,模拟第三方登录的情况。

c365c96bfb81f50ddfbe6d49b1726720.png

ba147db2e6f7a3227024ea3ff2d8bb6c.png

2.工作台

登录注册之后,当然就是回到工作台的界面了。这个界面中包含了大量的模块,还运用了表格、图表的组件元素,非常的实用。

d98963d962d444a6242a14bb67029dfd.png

3.导航栏

任何一个产品都无法忽视的模块,就是导航栏了。常见的导航栏无非是侧边和顶部。

就像这样:

da70665cce25e0ff59cef117988ace5d.png
展开

f61b8645e48b4ebdb3d0dacbd76c58e3.png
折叠

或者这样:

4568c8ba17af443d6b62e5cde6e5eadd.png
展开

ba84a89c66923020338895da0affd3ff.png
折叠

4.列表页

任何一个后台,都必须要考虑到内容的呈现方式。

b1f164c2f5cae63ed6fd453928f27d9e.png

是以图片结合卡片形式的呈现:

273af816173153946697170ee02c828b.png

还是简单的卡片就行:

293c384c2817599d52348b10c910072f.png

也不能忘了,还需要具备检索性能。

7fe9d77aa6fe376d9df46440fea0a6cf.png

5.表单页

表单是用户和 Web 站点或应用程序之间交互的主要内容之一。不管是商城后台,还是财务后台,或者其他,表单页面在 Web 页面中都不可替代。

信息不需要太多的,选择基础的表单页面就行:

bb9f45014f41b3a04559d3de28678bed.png

针对填写信息较多的,我们也制作了高级的表单页面:

8703018fcd2bb3c936428a61757f64a3.png

为了帮助大家更好的交互,将表单提交的页面也全部制作了。

1169a0bb2ea73af91fbe18989e415a23.png

59a5da303f49df457ce5d92bf386333d.png

51730a2e54204cbc764fe74ed56ec460.png

表单提交之后的成功、失败页面,我们也考虑到啦。

420c91ba101f179ca29c3c43c9dc3fb2.png

85e3da98b0a18db67750da737477da27.png

6.表格页

提起 Web ,怎么能没有表格呢?

2d36b082d67cf52a55fdfdb20703e3b6.png

除此之外,我们还制作了报错页面,包含:403、404、500,刀友们可以去素材广场完整体验。

最后,再附赠一个通用的在线教育管理后台原型,整个原型包含了在线教育管理后台的首页、订单管理、课程管理、用户管理(讲师、学员)、资讯管理、促销管理等核心页面模块。

7aec04cf7ff9c80c4f6ea3f20ed6a745.gif

刀友们可以运用这些页面快速搭建美观的 Web 后台页面,也可以参考这些页面的组件构成,更加熟练灵活地使用 Ant Design 组件库。

这次的素材上新还满意吗?请在留言区,告诉我们吧~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值