登录页面UI如何设计?

即时设计资源广场提供了许多最新手机尺寸和流行设计风格的登录页面设计样式和布局，非常适合初学者学习和研究。本文将以一套登录页面为例，从原型图开始，逐步手把手地完成高保真设计稿。该登录页面包含四个部分，我们将根据这四个部分进行设计。

1、登录页面标题:

登录页面的标题与首页标题不同，它的主要目的是引导用户。因此，在设计标题时，应保持简洁明了，避免冗长的描述。只需简单地使用 "登录" 两个字即可，无需添加 "欢迎" 等词语，这样会显得啰嗦。登录页面的关键作用是为用户提供明确的登录指引。

登录页面样式合集👇

2、字体选择:

登录页面中使用了思源黑体（特粗）字体，字号为 20px，段落样式居中，颜色为 #35383A。需要注意的是，在 UI 设计中，字体颜色一般不使用纯黑色，因为这会导致字体与背景对比度过高，长时间观看可能会对眼睛造成不适。通常使用深灰色作为字体颜色。

网页端登录页界面设计👇

3、登录页面表单控件:

登录页面的表单控件包括表单和控件两部分。表单内容通常是固定的，包括登录账号和密码，而控件通常是登录按钮。此外，还可以添加第三方登录和忘记密码的提示，这两个功能主要是辅助性的。

尽管这个页面的内容看似固定，但实际上它是登录页面中可以发挥创意的组件之一。以下是一些简单列举的设计选择:

• 表单形状：可选择大圆角矩形边框、小圆角矩形边框、下划线无边框、连续矩形圆角边框等等。

• 表单颜色：可选择浅色底纹深色边框、深色底纹浅色边框、内容与背景同色下划线深色等等。

• 控件样式：可选择独立的大圆角控件、独立的小圆角控件、与表单结合的控件等等。

4、登录页面头部尾部:

头部和尾部是 UI 页面中不可或缺的部分，但每次设计都很繁琐。幸运的是，即时设计插件中有一个产品组件库，其中包含了各种 PC 端和移动端的基础形式，只需将其拖拽到页面中即可使用，非常便捷。点击免费使用即时设计插件即可体验。

5、登录页面背景:

背景是页面整体氛围和风格的延续，主要用于突出页面的氛围感。可以选择一幅卡通人物插画作为背景图，因为人物插画是当前最流行的设计元素之一，具有良好的装饰感和设计感，能够突出页面的氛围。

加入背景图后，整个登录页面就基本完成了。下面让我们来看一下整体效果，页面效果还是很不错的。整体页面给人一种轻松舒适的感觉，表单控件也清晰明确。背景色与按钮色相互呼应，形成了一个不错的登录页面。

6、登录页面 UI 设计工具:

实际上，登录页面在整体 UI 项目中只是一个小小的页面，也是逻辑框架相对简单的部分。但它作为用户首次接触 APP 的页面，对于用户对产品的印象非常重要。因此，在设计时尽量避免过于复杂的设计，以免让用户感到过于繁琐。同时，也不要设计过于平淡无奇的页面，否则用户会觉得缺乏亮点。这两种情况都可能导致用户不喜欢，从而无法吸引用户注册和使用，使得后续辛苦制作的产品功亏一篑。

手机端通用登录页👇