本文主要是关于app登录页的设计合理性的相关思考，希望对大家帮助！

一、怎么理解登录页？

每一产品app都会有一个登录页面，它是产品第一次接触用户的页面，也是第一个传递信息给用户的媒介，由此可见它非常重要的，作为一个招牌或者是门面，一个好的登录页往往会给用户留下深刻印象，无论是界面视觉表现，还是流程交互体验，都是不可或缺的。

上述部分是对登录页面作了一个总体的概括，深入理解就要去观察登录页具体包含了哪些内容，这是我们做设计前必须要了解的。

来看看现有app登录页的案例：

以上我列举了四类不同的产品app：分别是音乐类——网易云/动漫类——腾讯动漫/体育类——企鹅体育/电影类——淘票票，相信大家的手机里面应该都装有这些app，毕竟是这几款app的使用频率还是挺高的，视觉上面观察，几款app的登录页设计差异并不是特别大。

接下来用模块的方法来梳理一下页面的内容和结构：

小结：通过上面的举例分析和模块划分，我们大致了解了一般产品的常规登录页所包含的内容有哪些，知道了设计的具体内容。那么接下来我们要去了解一下现有登录页面设计的一些技法或是样式，也可以是一些表现样式。

二、登录页设计样式有哪些？（技法或是表现方式）

在进行设计样式的分析之前，我想和大家聊聊关于如何去规划登录页面的相关内容以及为什么要放置这些内容的原因？因为设计背后总会有目的和理性思考在里面，并不是凭空去设计的，所以也就是登录页的核心作用是什么？

登录页的核心作用：

接下来就是设计样式分析了：

这种设计方法应是最常规且效率最高的一种方式了，背景纯白色，把其余元素放置中央，留白处理，有空间感和透气性，没有任何色彩倾向和视觉元素干扰，让用户专注于品牌和登录路径，算是一种很好的常规设计样式！

品牌色的填充应用，大量运用品牌色来支撑整个画面，简洁直观，且容易让用户感知，界面比较干净，品牌符号+大量品牌色的应用+常规登录路径以及辅助登录路径，就可以构成了一个登录界面，而且能够传递品牌信息以及产品信息。

没有大量运用品牌色，而是运用与产品行业相关特性的图片来作为背景支撑，显然是为了强化品牌行业属性，因为图片比颜色的视觉冲击力更强，也比较容易感知到产品的用途，所以运用品牌行业相关的图片来设计登录页面也是一种可行的方法，加上常规的登录路径和辅助登录路径即可。

这种氛围感更强，画面感也是十分突出，也更容易让用户感知到一些内容，并对产品初步产生一些认识和理解，也是当下比较流行的设计样式！

第三种运用产品符号或是品牌符号来作为设计主要元素，一是可以传递品牌感，二是可以渲染产品行业属性特征，两者都能兼顾，可以是视觉冲击力和氛围渲染力都非常强了，给予用户的视觉感官也是满满的，这也是一种可采用的设计样式方法！

三、如何设计登录页的内容？（如何布局内容？）

通过上面的内容的阐述，我相信大家已经了解了登录页的含义/登录页所包含的大致内容/登录页常规的设计样式，那么接下来我们就聊聊如何设计布局登录页的内容，也就是如何在界面中进行板式设计！

居中板式：让所有信息集中在界面中央，可以让用户一眼看到所有信息，信息内容突出性很强且十分集中：

两端对齐：上下两端预留出相同的间距，然后将内容居中与界面，这样做可以很好的平衡画面，不会让界面失去重心，还有一点就是整个界面也会相对饱满许多，更加有看点和视觉感。

底对齐：这种情况比较特殊，背景采用了一张游戏图来作为主体内容视觉，为了不干扰信息，所以把按钮放在了底部，重点是突出游戏氛围图，让用户沉浸在氛围中！

分析到这里，关于如何思考且合理的去设计登录页，我相信大家应该有了一个明确的方向了吧！从理解什么是登录页，到了解登录页所包含的内容方向，再到登录页所发挥的作用以及登录页的设计样式，还有登录页内容布局的方式。

我简单做一下思路总结：

本文由 @Moredesign 原创发布于人人都是产品经理，未经许可，禁止转载。

题图来自 Unsplash，基于CC0协议。