「素材播报」Ant Design活学活用,用20+案例教你做Web页面

北京/UI设计师/5年前/647浏览
「素材播报」Ant Design活学活用,用20+案例教你做Web页面

玩转Ant Design,轻松做出Web页面

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






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

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



  ◆  ◆

什么是 Ant Design 


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

服务于企业级产品的设计


图片源自:Ant Design 官网

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



图片源自:Ant Design 官网

  ◆  ◆

 Ant Design 能做什么


 1.注册登录页面 

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






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

undefined



 2.工作台 

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




 3.导航栏 

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

就像这样:


展开

折叠


或者这样:


展开

折叠



 4.列表页 

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



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



还是简单的卡片就行:


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



 5.表单页 

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

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


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



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





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





 6.表格页 

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


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

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


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

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




1
Report
|
6
Share
相关推荐
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
DESIGN NEW WAVE
Homepage recommendation
Heal丨概念网页设计
Homepage recommendation
相关收藏夹
设计规范
设计规范
设计规范
设计规范
作品收藏夹
每日观赏
每日观赏
每日观赏
每日观赏
作品收藏夹
动画图片素材
动画图片素材
动画图片素材
动画图片素材
作品收藏夹
IP形象——动物类
IP形象——动物类
IP形象——动物类
IP形象——动物类
精选收藏夹
作品收藏夹
企业展厅
企业展厅
企业展厅
企业展厅
精选收藏夹
作品收藏夹
ip形象设计+表情包
ip形象设计+表情包
ip形象设计+表情包
ip形象设计+表情包
精选收藏夹
作品收藏夹
大家都在看
Log in