【打卡教程】如何设计一个合格的B端登录页

打卡作业参考案例：

前言：

B端登录页，兼具视觉表现力与交互设计的思考，最能看出一个B端设计师综合能力的。

今天我们就来看一下，WEB端的B端登录页，应该如何科学的来进行设计。

常见布局分析：

B端登录页，视觉表现上千变万化，但是总结起来，大致有以下四个分类：

单色背景布局、大气背景布局、上下分割布局、左右分割布局。

————

● 单色背景布局：

特征： 登录窗体放在画面中心或者右侧，以简单背景辅以，强调整体的氛围感。

适合产品：后台操作类产品。

优点：背景简约干净，突出登录主体，实用性较强。

缺点：较难作出比较强的视觉表现，整体视觉比较单一。

————

● 大气背景布局：

特征： 登录窗体放在画面右边或者中心，以大气氛的背景作为衬托，强调整体的氛围感。

适合产品：适合消费级大众产品。

优点：气氛带入感强，依托于背景的大视觉，提升整体画面的颜值。

缺点：对于背景的要求较高，图选不好，直接影响最终整体视觉。建议选择元素较少的氛围性图片。

————

● 上下分割布局：

特征： 登录窗体放在画面右侧或者中心，视觉北京或者色块的上下分割，增加画面的层次感。

适合产品：适合大部分B端产品。

优点：视觉上更有层次感，较容易做出有表现力的视觉。

缺点：背景分割感如果处理不好，容易显得画面割裂影响视觉。

————

● 左右分割布局：

特征： 以色块进行分割，登录窗体出现在右侧，左侧通常是场景功能带入相关的内容以及产品功能的介绍。

适合产品：面向大众类的SAAS产品。

优点：内容展示结构清晰，视觉简洁，层级关系明确。

缺点：视觉较稳冷静，结构上变化不多，整体视觉表现上，不太有太大操作空间。

常见设计问题：

● 问题1：视觉表现过度化

虽然登录页面在B端设计中属于偏视觉表现的部分，但是其功能属性还是较强的，视觉部分过强

除了本身视觉不好看，也会导致视觉重点被左侧带偏，影响用户的阅读效率。

调整建议：

可以选择较为简单的图片，降低其反差和饱和度，适当的可以增加半透明色彩遮罩统一调性。

● 问题2：过渡滥用材质

B端设计大部分，是较冷静克制的，在登录页设计时，不少设计师忍不住会爆发洪荒之力，堆砌大量的视觉效果。

材质的叠加是能「一定程度」上提升视觉效果，但是过度使用，反而会降低整体视觉表现力。

调整建议：

适当的使用材质和效果，能提升视觉表现力，但是如果控制能力不能达标，那么至少确保界面清爽干净。

扁平错的概率更低，在对视觉表现没有把握的前提下，使用扁平设计，是比较保险的选择。

● 问题3：主交互窗体靠左设计

在登录页设计的时候，我们会看到一些概念稿「登录窗体」靠左设计，往往视觉不错，但是飞机稿的属性较强。

作为静态视觉稿，应该有比较不错的表现，但是用起来，我们就会觉得别扭。

调整建议：

从交互角度，鼠标的操作多用右手，所以操作角度角度，右侧的交互区域是最舒适的，其次是居中的位置

而左侧的操作相对别扭，因此建议尽量「不要」将登录的交互窗口放在左侧。

PS：当然，也有一些界面中的交互控件是出现在画面左侧的，这本身并不是问题，只是在登录界面这种交互控件高度集中展示的页面中，放在左侧的操作别扭感会比较突出。

● 问题4：过渡创新界面设计

设计师的本质是创造，但是我们对于设计的创造，本质上需要考虑到用户的接受程度。

大众对于登录界面已经有了根深蒂固的认知，这种情况下，按照标准结构的设计，用户一眼就能识别“这是登录界面”。

但一旦当我们调整了整体的结构，视觉表现上的确是丰富了，有变化了。但是从用户识别角度，成本就提升了，反而不利于用户操作使用。

调整建议：

我们有创新的心是好的，但是创新的前提，一定要基于不给用户造成困扰上，任何创新，我们一定要基于对原有认知的继承上

例如：登陆界面的「交互组件」从上到下的元素排列，这个已经成为了大众对于登录界面的普遍认知，这个时候，就不要挑战大众的认知底线了。

常见登录功能分类：

登录界面根据时代的发展，以及各自功能的不同，有着各种各样的结构变化。

但归根到底，可以分为3种类型：扫码登陆、验证码登陆、密码登陆。

————

● 扫码登录

这种登陆模式是当下比较流行的商业化B端产品的登录模式，整体操作较为简单，流程较短：

从整个交互流程来看，这个操作流程是三者当中最短的，尤其是扫码后判断没有账号的情况下，后台直接新建账号，这种操作对于用户而言非常友好。

但是这种用户体验的友好，是有「前提条件」的

用户登录扫码的工具，通常会使用「微信或支付宝」进行扫描后进行登录，所以这背后有比较复杂的技术逻辑，需要技术角度的支持。

另外此处的扫码登录，通常需要第三方软件（微信/支付宝）来进行扫码，也就意味着我们享受如此便捷的原因，是第三方软件提样的服务

一旦他们不提供这种服务了，也就意味着用户的登录会失去有效手段。

所以这类登录往往会用在「较为轻度、安全性要求较低」的商业化产品中。并且通常也会在扫码登录外，提供手机验证码登录的模式。

————

● 手机验证码登录

手机验证码是目前比较主流的验证登录模式。优点是不会因为长时间不使用产品而忘记用户名密码，并且安全性是三种里面相对比较高的。

当然缺点也是很明显的，整个交互流程较长。对于用户而言，体验并不是特别的好。

所以，安全性与用户体验，两者只能取其一。这类登录窗体，适合大部分的外网B端产品。

————

● 账号密码登录

最为传统的登录模式，此类模式的优点是流程简单易理解。

并且在内部局域网的情况下，确保登录功能正常使用。从用户体验而言，除长期不用容忘记密码外，其他体验还是不错的。

当然，账号密码登录最大的问题在于「安全性」，如果是在外网无法接入的局域网中，这种设计方式相对比较安全，但是在外网比较复杂的环境中，虽然都会增加验证码的安全机制，但是依然容易遭遇暴力破解。

交互设计流程：

整个登录界面是一个非常明确的线性流程，所以我们需要进行交互设计，首先需要对于整个线性流程进行梳理，并围绕此部分内容进行设计。

在这里，我们以目前最常见的手机验证码登录来进行梳理。

● 第一步：梳理线性流程

这部分的工作是交互设计的基础，只有梳理清楚了整个流程逻辑，后续的交互工作才能有效展开。

在整个线性梳理流程当中，有3个基础原则：

● 第二步：界面状态设计

基于上一步的流程梳理，针对主流程的每一个步骤，设计出对应的界面。

设计过程中，需要在脑海中树立清楚流程所在的位置，判断应该以怎样的状态进行设计。

● 第三步：界面状态设计

这个步骤中，优先设计基础的交互控件样式，基础的交互状态往往包含以下状态：

Link（正常）、Hover（上移）、Active（操作）、Visited（点击后）、Disable（不可点）

基本上所有「交互控件」的交互状态，都可以按照这五个状态来进行基础设计。

在基础的五状态梳理的基础上，我们需要根据之前的交互流程，将组件状态中的特殊情况进行细致的整理：

这一个步骤，必须考虑清楚，每一个主功能的节点上，当前的交互组件是否会发生变化，最好针对每一个步骤，都进行细致的思考。

● 第四步：消息提示

交互状态的提示信息设计，有3个核心的原则：

• 只要有交互动作，就应该有交互反馈（交互反馈未必通过提示信息展示，提示信息只针对异常状态）

• 不要滥用弹窗，弹窗容易打断用户当前操作，体验上较差（打断程度的不同，我们应选用不同的提示方式）

• 提示信息必须简单易懂，不应增加用户的理解负担（尽量不要出现「错误代码：XXXX」的表述，并且应该给予明确的提示，遇到了问题应该如何处理）

所以在提示设计的设计过程中，我们优先应该思考判断节点：

基于这些基础判断的节点，我们更容易判断在哪些节点我们应该设计交互提示。

然后需要思考的点往往是主流程之外的支线流程：

根据这些支线流程的判断，我们就大致知道异常状态的提示有哪些类型。

接着则是根据实际的提示强度，选择合适的交互组件进行归类：

最后，在这些分类的基础上，我们应该思考如何用最简单易懂的文案，让用户明白当前遇到了什么情况，应该如何处理。

总结：

对于刚入行B端或者准备入行B端的同学，登录页是一个很好的定点练习的方向。这里既有对与视觉的要求，也有对与交互的理解。

本文对于B端登录页的一些设计要点进行了分析，相对而言是属于比较入门的，希望对于刚入行B端的设计师朋友，能有所帮助。