恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

Ant Design活学活用,用20+案例教你做Web原型

原创文章 分类: 教程 版权:
11000 80 184 3
2020-03-20
57.7
首页推荐
噔噔噔噔,欢迎刀友们收看本期「素材播报」。

犹记得 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

推荐人:

UI中国

墨刀_MockingBot

modao.cc 强大易用的原型设计与协同工具

958粉丝/3关注

诲人不倦分享帝lv.3老马识途小有名气首页达人
选错专业误终生?墨刀内部大揭秘,运营居然是保密专业iOS14风格组件新鲜出炉,直接拿去用就完事!
2
树上的树

墨刀原型界面复制文字啥时候能改,根据菲茨定律,移动到目标路径的距离也太长了吧!每次复制我都要点一下文字再点到右边,为啥不能直接复制呢!啥时候能优化这个问题啊,你们自己用的时候难道没有感觉极其不方便嘛!

精彩!

墨刀_MockingBot

墨刀_MockingBot

modao.cc 强大易用的原型设计与协同工具

诲人不倦分享帝lv.3老马识途小有名气首页达人

你确定要举报Ant Design活学活用,用20+案例教你做Web原型

如果查出恶意举报,十天内禁止提交任何举报申请。

0/200

上传证据: 超过10M的附件请使用网盘地址

点击上传附件

对谁可见:

全部设计师
  • 全部设计师
  • 推荐设计师和认证设计师

您确认要推荐?

该作品发布时间:2020年03月20日

评分

完整度

启发性

勤奋性

排版布局

推荐心得

建议20-200字以内

0/200

扫描二维码
去手机端查看海报

墨刀_MockingBot

TA已经获得11枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

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

投票

账号或密码错误,请重新输入

账号或密码错误,请重新输入

登录

账号或密码错误

发送验证码 120s 验证码错误

登录

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2020 UI.CN