建站知识库

建站知识库

作者:admin日期:2023-07-12阅读量:1000

  

  登录表单是移动应用程序和具有会员专区的网站中最重要的用户界面元素之一。为什么它们如此重要?它们是通往您所创造的世界的大门。人们在尝试填写登录表单时总是有逃跑的风险。即使是最微小的细节也会吓跑他们。而且别无选择,您不能删除登录表单并让所有人进入。


  让我们了解登录表单的基础知识,考虑好的UX技巧,从漂亮的登录表单示例中获取线索,以找出如何创造愉快的体验并消除用户障碍。

 

  登录表单要点


  与其他类型的用户界面表单不同,登录表单的形状和大小不尽相同。它们仅限于使用的字段数。采用这种最小和胶囊方法的原因很简单:人们不喜欢填写表格。你不能因为要求太多信息而急于求成。这些表格应该简单、熟悉且开门见山。


  通常,登录表单包括两个输入、指向替代方案的链接和一个提交按钮。即使你必须简洁,仍然有很多选择:


  您是否曾经仔细关注过注册特定网站时出现的登录页面?每当您登录时出现的第一页是网站的第一印象。登录表单的设计本身将定义网站的性质,因此它应该与它要访问的网站相关。


  确实,登录或注册表单是网页包含的最重要元素之一,因此设计这些在线表单是设计网站时最重要的功能之一。成功创建的注册表单还鼓励并允许访问者成为特定企业的会员、订户或客户。如果所有其他功能都得到适当的协调,那么外观简洁、富有创意且具有视觉吸引力的注册表单肯定会鼓励访问者取得丰硕的转化率。


  设计一个有效且干净的登录/注册表单需要设计师的大量创造力,因为对于一个网站来说,为了它的成功和功效,拥有一个吸引人的和杰出的形式是很重要的。


  一些高效且有吸引力的登录表单设计


  有一些注册表格由基本的联系表格组成,这些表格是在一些基本的网页设计概念的帮助下创建的。除了这些基本的,很少有在某种程度上看起来有点不同的。但是,还有其他一些非常令人印象深刻且富有创意,可以明确地吸引访问者进入网站。


  其中一些表格可以选择详细输入个人联系信息,包括姓名、电子邮件、联系电话和其他内容。这些表格的风格非常不同寻常,有的甚至还提供了手写书法的选项。


  除了一些高度创新的选项或选择菜单之外,很少有登录页面会提供各种创新的文本输入样式。这些类型的表格确实要求设计师具有高水平的创造力,尤其是在设计各层之间的空间、创建大而易读的文本以及创建连接到电子邮件的侧边栏链接时直接地。


  特定类型的表单提供了对新数据输入字段的戏剧性洞察。用户可以利用从主页本身获取登录链接并调用由jQuery提供支持的登录框。这种特殊类型的表单带有一个Ajax,用于引导PHP的外部脚本。它评估用户在登录时使用的信息,处理后,它要么授予用户权限,要么拒绝用户。


  我们现在看到的许多登录表单设计确实非常动态,并且包含一些最新的设计。这些新时代的设计之一提供了对各种数据输入字段的精彩洞察。用户可以轻松进入主页,并可以单击登录页面上的链接调出一个由jQuery提供支持的动态登录框。这个特定的登录表单提供了链接外部PHP脚本的选项,该脚本有助于评估各种登录信息并取决于结果的结果;它要么允许用户进入,要么拒绝它。


  登录表单的未来


  我们在电子商务网站上看到的一种做法是,平台不使用用户名字段或电子邮件字段作为第一选项,而是使用电话号码。


  提交后,您会在手机上获得一个唯一代码,您需要将其输入到下一个字段中。就这些。您不必记住用户名或回忆密码。


  这个解决方案简单、快速、无痛且无忧,肯定会给人留下积极的印象。是的,它需要您的电话号码;有些人可能会觉得无法接受。您最终可能会与平台共享您的电话号码。其次,随着手机变得更加安全,这种紧张可能会消失。


  随着手机行业的发展,我们也开始看到其他选项,例如登录表单示例,您只需用手指进入网站即可。这只是一个开始,但很难不注意到TouchID和人脸识别的潜力。因此,强烈建议牢记这两种方法。


  项目中登录表单的用途


  在开始探索为您的登录表单创建最佳设计的用户体验技巧之前,问问自己“登录表单在您的项目中的用途是什么?”


  另请阅读:33个登录表单设计示例,激发您的灵感您应该包括哪些输入字段才能使登录表单的体验舒适愉快?您想立即让所有潜在客户进来吗?或者你想过滤?您想满足目标受众的期望和行为模式吗?或者你想让体验成为标准?


  另外,问自己有关设计目的的问题。您是否只想将登录表单用于此目的?或者你想让它成为你品牌标识的一部分吗?你想让它成为阅读流程或营销活动的一部分吗?


  构建摇滚登录表单的最佳用户体验技巧


  在网站设计中,用户体验就是一切;登录表单也不例外。如果你想避免创建登录墙,与表单的交互应该是完美的。有十几种最佳实践可以帮助构建流行的登录表单。


  使登录表单的链接脱颖而出。不要隐藏它。如果您的网站不立即进入就无法正常运行,请在英雄区域显示登录表单。在菜单中使用“注册”链接而不是“注册”,因为后者很容易与“登录”混淆。永远不要在登录表单标记中使用“注册”,只能使用“注册”。


  不要并排使用两种形式。最佳做法是为每个表单创建一个单独的页面。不要为登录表单使用小角弹出模式。仅包括重要的输入字段。两个输入通常就足够了。使用电子邮件字段或电话号码字段而不是用户名字段。


  自动让用户保持登录状态,但让他们可以选择撤消此操作。立即验证字段。立即告诉用户哪里出了问题。不要等到提交按钮被按下。不要使用很多安全规则。如果大写锁定打开,立即通知用户。


  制作一条醒目但不打扰的错误消息。自动聚焦应该填写的字段。因此,不用说第一个字段默认应该有自动聚焦。使用占位符或标签,以便用户可以立即看到他们应该在字段中放入哪些信息。


  始终添加“忘记密码”链接。你不必让它引人注目。然而,它应该是显而易见的。更重要的是,请记住人们总是忘记他们的密码。因此,您应该仔细考虑这个流程。


  允许用户查看他们在密码字段中键入的内容。这样,您将避免输入错误密码的烦恼。两次尝试失败后不要锁定帐户。首先将这种情况告知用户,然后让他们再试一次,至少4-5次。


  添加使用社交媒体配置文件或其他流行平台登录网站的替代选项。例如,如果您有一个常规网站,则允许客户使用他们的Facebook、Google或Twitter帐户进入。如果您的网站可以与Pinterest、LinkedIn、Instagram、Adobe、Apple等其他服务相关,那么您也可以添加它们。


  与此相关的是,如果您决定添加多个登录选项,最好不要过度。用户的选择越多,决策过程就越困难。因此,坚持使用2-3个选项以避免混淆。清单很长,但这些技巧并不难实施,只是需要一些时间。请记住,如果您遵循这些最佳实践,您无疑会将您的登录表单提升到一个新的水平。


  网站和应用程序的漂亮登录表单示例


  我们为网站和应用程序编制了一个漂亮的登录表单示例列表,以便您可以彻底检查概念和现实生活中的项目,以获得有关如何将我们的技巧付诸实践并使您的下一个登录表单成为超级明星的有用见解。


  Darin的Yeti Login几年前引起了很大的轰动。这个概念非常鼓舞人心,它推动了那里的许多项目。问题是,Darin向我们展示了如何使用插图,不仅可以营造适当的氛围或添加一点品牌标识,还可以协助整个过程。


  如何?简单。他创建了一个动画雪人,它会跟随用户的动作,从而将与登录表单的交互转变为一种有趣的游戏。这个技巧肯定会减少空气中的紧张感。即使你做错了什么,把所有的套路再重复一遍也是一种乐趣。Darin的概念是其中一个登录表单示例,它演示了如何使艺术方法为您工作并为用户提供难忘的体验。


  结论


  尽管网站和应用程序的登录表单和山丘一样古老,但人们在正确处理它们时仍然遇到问题。很多事情都会吓跑他们:太多的选项、花哨的输入字段、令人困惑的设计、可疑的元素等等。因此,您的任务是将登录表单转换为提供舒适用户体验的UI单元。


  作为网站设计中与用户交互的主要方法,表单在设计方面经常被误判和忽视。当然,虽然不是每个项目都需要对组件进行创意处理,但体验一个美观、制作精良、平衡的登录框总是令人愉快和愉快的,它带有辛辣的味道并与整体设计相得益彰.


  遵循我们的指南,使用用户体验技巧,并从我们收集的最佳登录表单示例中获得一些灵感来实现这一目标。


1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。4.用户投稿或转载的文章,发布目的仅为传递信息,并不代表本网赞同其观点和对其真实性负责。

《免责声明》 如对文章、图片、字体等版权有疑问,请联系我们

热门文章

热门文章

也许您需要专业的服务,欢迎留言咨询

填写报价单

开发服务

  • 网站定制开发
  • APP定制开发
  • SEO优化服务
  • 小程序定制开发
  • 新媒体营销服务
  • 其他

开发服务

  • 网站定制开发
  • APP定制开发
  • SEO优化服务
  • 小程序定制开发
  • 新媒体营销服务
  • 其他
  • 其1他

需求描述

联系电话

填写报价单
  • 开发时间

     天

  • 设计费有

     元

  • 开发费用

     元

  • 测试费用

     元

  • 售后服务

    第一年免费

  • 云服务器

    2500 元

开发预算 包年包月 按月购买及续费,为预付费模式 若购买中国内地地域的 ECS 用于网站 Web 访问,请及时备案 若 ECS 用于 SLB,请前往 SLB 新购页面购买带宽,ECS 仅需保留少量带宽以便您管理

0.084714s