登录页面 UI 设计教程：多八多 Ai 助手的实战演示

大家好,欢迎来到多八多Ai应用开发助手的登录界面开发教程,我是讲师小多。在这第一课里,我们主要来学习如何使用多八多Ai应用开发助手设计登录页面的UI界面。

登录页面 UI 设计教程：多八多 Ai 助手的实战演示

首先,我们需要在多八多Ai应用开发助手上创建一个新的项目,可以起一个名字叫“登录Demo”。创建完成后,我们就可以开始设计页面了。

在页面里,我们首先拖动一个布局组件,用它来设置页面的整体结构。这个布局包含了页头、内容区和页脚三个部分。

然后我们要在内容区里添加一个卡片,就是一个小的矩形卡片。这个卡片里面就是放登录表单的。所以我拖一个Card组件进去,设置它的大小为适中的宽度,比如333像素。

卡片做好了,我们就可以开始做登录表单了。表单里需要用户名和密码两个输入框,所以我拖动一个Form组件进卡片,它可以快速生成表单。在Form里面拖两个Form.Item组件,分别设置用户名和密码的label。然后在每个Form.Item里面再拖一个Input组件,就制作好了用户名和密码输入框。

最后,我们要加一个登录按钮。所以再拖个Button组件,设置它的类型为Primary,并且点击提交表单。到这里,登录页面的UI界面设计就完成了。

可以看到,使用多八多Ai应用开发助手通过拖拽和设置属性的方式就可以很快速地设计出登录页面的布局和样式。第一次使用也很简单易上手。

那么UI界面我们就设计完成了,接下来将在第二课学习如何实现登录功能。我是小多,感谢大家的收看,第二课再见!