如何设计登录表单，包括作品集注释和层次结构条带
让我们来探索一个简单、极简的登录表单，同时也讨论一些可能的改进选项。
说到登录表单，有很多不同的用户体验设计模式适用于特定场景。有些情况下，你可以使用魔术链接登录，因此只需提供一个电子邮件字段即可。
还有社交媒体账号登录、Apple 隐藏邮箱登录、基于 Token 的登录和双因素认证的登录方式。
这里我们讨论的是一个简单的登录方式，使用 Twitter 账号和密码。当然，Twitter 账号也可以是一个电子邮箱，这同样有效。
我们希望用户能快速理解表单中有三个主要部分。
为便于处理，将最终确认按钮与字段通过较大的内边距隔开。
这里有三个主要部分（步骤）且有明显的分隔，因此用户可以专注于每一个部分——包括专注于填写表单字段，准备好后再按下按钮。
这就是为什么蓝色距离明显大于其他所有距离的原因——为了清晰地分隔这三个主要部分。
这种划分在早期规划中很重要，甚至在你开始选择字体大小、定义间距、颜色等之前。你需要知道你想让用户逐步如何与表单互动。你可以在这里了解更多关于我们开发的方法——层次结构条带：
当这部分完成后，我们终于可以...
许多在线教程，尤其是 Instagram 上的一些教程，只会向你展示一些像素间距然后就结束了。然而，如果没有上下文，你会得到割裂、不匹配的组件和断裂的流程。
最流行的网格是8点网格，这正是我们在这里使用的。但重要的是要指定那个网格，因此其他查看、使用、编写代码的人知道设计存在哪种上下文。
我还喜欢指定实际间距值——4, 8, 16 和 24，这些都是基于8点网格的（4是它的一半）。我们还指定基于网格的圆角（圆度）。
指定网格是重要的，因此查看/编写代码的人将了解设计存在的上下文
我们使用邻近法则，用较小的间距来自然地将元素分组，使用较大的间距来分隔它们为单独的组。
蓝色组是这里的主要组，设置如层次结构条带中概述的层次结构。
这就是操作的地方！
现在让我们来看其中一个独立的元素——表单字段。
它应该遵循相同的整体指南，使用较小的间距，因为它是一个名为输入按钮的内部组。
忽略顶部/底部填充（🅰️）
根据字体大小、厚度和其他因素，更重要的是垂直居中！
在表单字段内对齐图标可能会很困难。一个好的规则是使用字段内文本大写字母高度的0.8到1.0之间的高度，并将图标设为此高度。这样它不会压过文本，看起来也不错。
图标在字段内过大是个大问题，这是许多初级设计师常犯的错误。
使用这个规则来正确处理！:)
现在是指定字体的时候了。我们这里只使用了一种字体——Plus Jakarta Sans。这是一个不错的选择，适合初级设计师，看起来很棒，而且是免费的，对于大多数项目都很安全。
至于尺寸，实际表单只使用了16，其它两个尺寸用于装饰性的标题。
对于字体大小和样式，少即是多。
让我们的表单保持尽可能一致是好的，而限制使用的不同字体是实现这一目标的最佳方式之一。
你可以突出显示操作元素（比如按钮上的标签，用粗体字体，保持相同的大小）
下一步？
这是大多数设计师容易忽略的事情，但很重要，因为它有助于让你的表单可访问，当在你的作品集中使用时，向招聘人员和公司展示你对细节的高度关注以及考虑到每一个可能的元素。
有许多在线工具可以用来检查对比度，包括你最喜欢的设计工具的插件。
需要注意的是，装饰性元素（比如一些背景形状）不需要通过对比度检查，因为它们是完全可选的。
必须至少通过基本对比度水平的是所有可操作的东西——在我们的例子中，是完成表单所必需的东西。
当然这可以进一步改进。例如，你可以在主按钮下添加一个注册链接，以供尚未创建账户的人使用。
这种全面的方法，从层次结构条带和适当逻辑分组开始，到为表单的每个小元素指定和定义，可以在你的作品集和案例研究中大放光彩。
设计不是随意的。
确保你涵盖所有细节是重要的。
