此主题用于跟踪在 meta 上通过以下链接提供的全屏登录/创建帐户样式的反馈：Discourse Design team experimentation topic
7 个赞
它会被预加载吗？
我非常喜欢。对于普通互联网用户应用程序来说，小尺寸模态框已经过时了。
6 个赞
感觉非常好！很棒 
一些反馈：
- 桌面端 – 大屏幕上社交按钮的宽度可能太大了，显得有些突兀。不过，如果缩小它们，可能需要更多努力才能协调左右面板之间的视觉效果。
- 桌面端 – 为了可访问性，关闭图标的颜色可能需要更高的对比度。
截图
- 移动端 – 非常挑剔
。似乎行高可能有点太高了。
- 移动端 – 我不确定这一点。这取决于屏幕对比度。社交按钮的边框颜色似乎几乎看不见（这是我在手机上首先注意到的，但在我的第二个屏幕上看起来还可以）。我明白如果这太多了，肯定会让人不知所措。也许使用
primary-300会有一点帮助。
6 个赞
感谢您提供如此详细的反馈！
2 个赞
目前，我们在元（meta）上安装了它，以便进行实验和收集反馈。如果反响良好，我们最终会将其设为核心产品的默认设置。
4 个赞
在 iOS 的 Safari 上，“欢迎”文字被截断了。
上下滑动也无法解决此问题。另请注意，模态框的“x”位于表情符号的上方。
我想知道在这里最好的选择是否是为模态框的全页面处理设置最大宽度限制。超过一定宽度后，仍然使用整个视口可能没有意义。
2 个赞
你知道，我认为这可能是因为我坚持在身份验证登录选项存在时模态框中的左右布局。
我将探索将替代登录选项移至主登录区域下方。
2 个赞
我已经根据大部分反馈进行了一些调整，请查看并告诉我您的想法
@pmusaraj 也请看一下，我已经放弃了两栏布局，合并成了一个全屏中央的单一视图，类似于谷歌和其他许多网站的登录页面。
3 个赞
这是一个有趣的想法，但说实话，我并不完全信服。也许是我有肌肉记忆，我确实已经习惯了这些屏幕上的白色/蓝色（或者深色主题的黑色/蓝色）分割，但对我来说，这也是 Discourse 身份的一部分。移除它似乎是一个重大的改变。
让我放一些并排的截图，这有助于将事物置于上下文中（它们是不同的实例，但只是为了说明这个变化）。
此外，在注册模态框中，“创建您的账户”的号召性用语（CTA）需要滚动才能看到，你无法立即看到它。
另外，还有一件事需要考虑，在所有全屏登录屏幕中，网站的徽标都丢失了。用户通常知道他们身在何处，但徽标是重要的附加验证，证明你确实在正确的网站上输入敏感数据（电子邮件、密码）。在旧屏幕中，它以某种方式存在，这要归功于模态框框架。
8 个赞
这里有一些反馈！
看起来不错。不过，我觉得它缺少一些视觉标识。 
. (编辑：我和 Penar 对身份认同的感觉完全一样)
移动端
在纵向模式下看起来不错。
在横向模式下存在一些问题：
- 标题被截断了。您无法向上滚动，但可以向下滚动。
关于横向模式。大多数人不会使用它，但它可能会发生，而且用户体验不佳。我认为您可以调整一些 CSS，让块围绕欢迎消息浮动。不是最理想的，但还可以：
然而，对我来说，最吸引人的是将凭据和社交按钮一分为二：
- 不直接相关。在移动设备上，第一个输入框会获得焦点，并直接弹出键盘。（我不知道其他地方是否也是如此）
我认为这会使用户体验变差，原因有两个：
- 您一开始看不到完整的页面，而且不吸引人。
- 您看不到所有的登录选项。（特别是对于使用社交登录的用户——您每次都必须关闭键盘）
桌面端
大部分看起来不错，但存在一些问题。
- 在中等屏幕尺寸下看起来不错：
- 在大屏幕上，我不确定。看起来不错；但是，虽然将所有社交按钮放在一行似乎很方便，但看起来很不寻常（内容很少居中，下方是内容很多）。这没有错，看起来还可以——这可能是因为之前的样式习惯，您的注意力集中在一个居中的地方。
您之前所做的实际上非常优雅，并且正如 Penar 所建议的，设置一个最大宽度就足以使其看起来不错。我乐于看到在大屏幕上显示两列，然后在某个限制以下自动换行。
- 在响应式方面——在某个最小高度下，左侧面板会出现滚动条。我无法在真实设备上测试是否也会发生这种情况。我认为用户滚动页面比滚动内部组件更自然。
通用
- 当登录模态框打开时，论坛滚动条会显示出来，您可以与之交互。这可能会让用户误以为有什么东西，但实际上什么都没有。如果模态框滚动条同时出现，可能会让人感到困惑。
示例
4 个赞
今天又进行了一轮调整和优化
4 个赞
旧：
新：
在窄屏幕上，使用社交账户注册感觉非常受压制。我同意它看起来视觉效果更好，但现在并没有突出这些操作。
侧边栏……在注册时，我们可能想将文本更改为“使用 Google 注册”。另外，有些是 sign in（登录）而有些是 log in（登录），这令人困惑。
4 个赞
这也将违反他们关于社交登录的准则，过去我们曾有几个网站因不合规的 Facebook 按钮而被通知（社交登录要求也可能是有些人说“登录”而不是“注册”的原因，尽管我对此并不完全确定）。
4 个赞
看起来像是页脚的另一个分享/关注图标。一点也不好，我敢肯定大多数用户都没有意识到这些实际上是用于登录的。
1 个赞
没问题。
移动端
-
竖屏模式下，看起来不错！
可能的改进：- 我的手机（Android, FDH+, 2220x1080）上的社交按钮显得有点小。作为比较，我手机屏幕上的手指宽度约为 1.5 厘米，按钮宽度为 0.5 厘米。这可能是一个可访问性问题。我会尝试让它们稍微大一点（间距也一样）。
- 我的手机（Android, FDH+, 2220x1080）上的社交按钮显得有点小。作为比较，我手机屏幕上的手指宽度约为 1.5 厘米，按钮宽度为 0.5 厘米。这可能是一个可访问性问题。我会尝试让它们稍微大一点（间距也一样）。
-
- 当键盘出现时，它会向上移动模态框。我认为这与此处的最新更改有关 FIX: Modals on Android when keyboard is visible by pmusaraj · Pull Request #24442 · discourse/discourse · GitHub – 但是，我认为这不应该应用于全屏登录模态框。出现布局偏移不是很好。
-
- 横屏模式下，我猜它没有被触及。这方面需要一些改进。
- 横屏模式下，我猜它没有被触及。这方面需要一些改进。
桌面端
总体看起来不错！
我绝对支持这个设计。感谢您将其带回来！
大屏幕
我对此有两个担忧：
- 这两个面板仍然有点太远了
- 社交按钮有点太大了。
关于第 2 点 – 您可以引入更多断点
@media screen and (min-width: 1536px) {
.d-modal.create-account #login-buttons .btn, .d-modal.login-modal #login-buttons .btn {
width: 70%;
}
}
@media screen and (min-width: 1920px) {
.d-modal.create-account #login-buttons .btn, .d-modal.login-modal #login-buttons .btn {
width: 60%;
}
}
@media screen and (min-width: 2560px) {
.d-modal.create-account #login-buttons .btn, .d-modal.login-modal #login-buttons .btn {
width: 50%;
}
}
在 2K 分辨率下，看起来像：
关于第 1 点 – 我不确定。这是一个可能的替代方案。优点是用户视图始终居中，同时保持视觉识别度。蓝色面板的宽度可以调整。这不是完全相同的感受，但非常接近。
注意：当按钮宽度减小时，我对当前设计非常满意。我分享这个建议以防您获得灵感。我有点喜欢它。
我注意到了一些 CSS：
- 左侧面板确实有
3rem的padding-top– 这似乎没有用，并且使面板与右侧面板不对齐。
.login-left-side {
padding: 0 3rem 0 3rem
}
- 注册表单未垂直居中。它使用了这个 CSS。有什么原因吗？
.d-modal.create-account .login-left-side {
height: calc(80% - 6rem);
@media screen and (max-width: 900px) {
height: calc(100% - 6rem);
}
}
居中看起来不错。
- 关闭按钮的颜色对比度可能需要根据可访问性进行调整。我将使用
--primary-very-high替代。
.d-modal__header .modal-close .d-icon {
color: var(--primary-very-high);
}
以上就是我的全部内容！
3 个赞
这就是原因。我认为在小屏幕上进行社交登录的最后手段就是只显示徽标，但我需要被核实/做一些检查。
2 个赞
我现在也无法摆脱这个想法了，谢谢你提出来！
嗯……
看起来我找到的关于该按钮的唯一样式指南是针对 Facebook 和 Google 的。
Facebook 只希望你有一个矩形按钮，上面写着“用 Facebook 登录”。他们也不希望你有很多选项通过 除 Facebook 以外 的服务进行身份验证。
如果需要，Google 可以使用其徽标作为登录按钮。
我在元（meta）上快速看了一下，看起来很棒。不过对我来说影响不大，因为我主要使用的论坛只支持 SSO。
1 个赞