0.0°

Ant Design活学活用，用20...

经验类型教程
经验属性原创文章
经验版权署名-非商业性使用

墨刀_MockingBot

关注

14882 1 6 2020-03-20

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

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

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

◆ ◆ ◆

什么是 Ant Design

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

它源自于蚂蚁金服，是一套非常强大的 UI 组件库，服务于企业级产品的设计。整套设计都基于「确定性」、「意义感」、「生长性」、「自然」、的设计价值观。

图片源自：Ant Design 官网

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

图片源自：Ant Design 官网

◆ ◆ ◆

Ant Design 能做什么

1.注册登录页面

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

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

2.工作台

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

3.导航栏

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

就像这样：

展开

折叠

或者这样：

展开

折叠

4.列表页

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

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

还是简单的卡片就行：

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

5.表单页

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

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

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

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

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

6.表格页

提起 Web ，怎么能没有表格呢？

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

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

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

这次的素材上新还满意吗？请在留言区，告诉我们吧～

Powered by Froala Editor

全部评论：1条

点解点解
2020-04-08 12:42
@墨刀_MockingBot: 早用过了
JUSTIN_BAI
2020-04-03 16:29
怎么在UI中国上投放广告啊
豆豆子酱
2020-03-26 09:48
@墨刀_MockingBot: 太棒啦！
墨刀_MockingBot
2020-03-25 17:25
@豆豆子酱: 已反馈给产品，会天天push他们改的！争取早日解决~
豆豆子酱
2020-03-25 09:40
墨刀原型界面复制文字啥时候能改，根据菲茨定律，移动到目标路径的距离也太长了吧！每次复制我都要点一下文字再点到右边，为啥不能直接复制呢！啥时候能优化这个问题啊，你们自己用的时候难道没有感觉极其不方便嘛！

更多作品

发表评论

取消

每人每天仅限5票，快给你心仪的作品鼓励的一票。

投票