墨刀新手教程：5分钟搞定登录页面设计」 「小白必看！墨刀原型工具快速入门教程」 「从零开始用墨刀设计登录界面，超详细新手指南」 「产品经理新手福利！墨刀一步步教你完成第一个原型」 「登录页面原型设计：

效果图

---

墨刀新手教学示例：设计一个简单的移动端登录界面

---

教程目标

通过墨刀设计一个基本的登录界面，包含：

1. 应用 Logo
2. 用户名和密码输入框
3. 登录按钮
4. 跳转注册页面的链接

---

教学步骤

1. 注册并登录墨刀

• 操作：
  1. 打开 墨刀官网。
  2. 注册一个账户或直接登录（支持邮箱或手机号）。
     

---

2. 创建一个新项目

• 操作：
  1. 在工作台中，点击右上角的「新建项目」按钮。
  2. 在弹出的窗口中：
     • 选择设备类型：「移动端」。
     • 设置名称： 输入如「登录页面原型」。
     • 选择画布尺寸： 默认的 iPhone 14 大小即可。
  3. 点击「创建」进入设计界面。

---

3. 添加页面元素

**操作：**从左侧的组件库拖拽以下元素到画布中，调整位置和大小。

1. Logo

   • 步骤：
     1. 从「图形」组件中拖入一个 圆形。
     2. 调整大小，放置在页面顶部中央。
     3. 添加「文本组件」，输入「APP LOGO」，作为标识。
   • 提示： Logo 的颜色可以在右侧样式设置中调整为品牌主色。
     

2. 用户名输入框

   • 步骤：
     1. 从「表单」组件中拖入一个 输入框。
     2. 设置占位文本为「请输入用户名」。
     3. 将输入框宽度调整为画布宽度的 80%，并放置在 Logo 下方。
        

3. 密码输入框

   • 步骤：
     1. 复制用户名输入框，放置在其下方。
     2. 将占位文本改为「请输入密码」。
        

4. 登录按钮

   • 步骤：
     1. 从「按钮」组件中拖入一个 按钮。
     2. 修改按钮文本为「登录」。
     3. 在右侧设置按钮颜色（如蓝色）和文字样式（加粗）。

5. 注册链接
   • 步骤：
     1. 从「文本」组件中添加一段文字「没有账号？注册」。
     2. 将其放置在按钮下方，调整文字为蓝色，表示为链接。
     3. 为该文字添加一个交互跳转动作（在右上角的【外观】旁边的【事件】里设置，因为需要先有可以跳转过去的页面，所以我们先新增一个注册页）。
        

---

4. 添加页面跳转交互

• 操作：
  1. 在画布右上角点击「添加页面」，创建一个「注册页面」。
  2. 返回登录页面，选中「注册链接」文本。
  3. 在右侧交互面板中，添加「跳转页面」的动作，设置为点击后跳转到「注册页面」。
  4. 在注册页面中，设计一个简单的注册表单（输入框 + 提交按钮）。
     
     
     

---

5. 预览效果

• 操作：
  1. 点击右上角「预览」按钮。
  2. 在弹出的预览窗口中，可以直接查看登录界面及交互跳转效果。
  3. 还可以生成一个二维码，扫码在手机上查看。

---

6. 分享原型

• 操作：
  1. 点击右上角「分享」按钮。
  2. 生成一个分享链接，发送给团队成员。
  3. 其他人可以通过链接直接查看原型，也可以在项目中添加反馈。

---

示例设计完成效果

最终，您将看到一个简洁的登录界面，支持输入用户名和密码，并提供一个跳转到注册页面的交互。

---

提示与注意事项

1. 简洁优先： 在设计登录页面时，确保界面简洁、重点突出。
2. 合理布局： 使用墨刀的「参考线」功能，对齐页面元素。
3. 添加动画： 如需进一步美化，可为按钮添加点击时的微交互动画。

通过以上教程，您应该能够快速上手墨刀，设计出属于自己的原型界面！如果有其他问题，欢迎进一步交流！

---

🌟【定制化开发服务，让您的项目领先一步】🌟

如有需求，直接私信留下您的联系方式。谢谢。
我的邮箱：2351598671@qq.com

---