无论是 PC 端还是移动端，用户登录已经必不可少，相较于十几年前的产品而言，越来越多的平台已经不支持游客模式。登录页的设计也成为平台抓取用户的关键入口，从交互路径到感官体验等都在不断优化，以获取用户的登录信任度。
本期和大家一起拆解一下 B-Web 登录页的案例，希望可以带给大家更多设计灵感。
交互路径
B-Web 登录页设计，从交互路径出发主要有两种区别：弹窗式和跳转式。弹窗式的登录是在用户操作当前页面时弹出，跳转式登录是新开页面完成操作，属于独立页登录。
从用户体验的角度出发，弹窗式登录不离开当前页，操作上下文不丢失，体验较为连贯。但是浮层遮挡内容容易误关，也容易与“钓鱼弹窗”混淆，用户安全感知较弱。
跳转式登录干扰少，独立页面无背景噪音，可进行品牌背书或者业务曝光等。由于交互路径长、步骤多、等待久，容易造成体验断裂，用户流失率增加。
无论何种登录方式都有其优劣差异，根据业务性质的不同而选择，也可以在设计层面进行调整，进行扬长避短。
布局分类
登录页布局形式主要分为 4 种主流结构：左右分栏、居中表单、顶部导航内嵌、悬浮表单。
左右分栏布局是最常见的形式，视觉平衡度强，信息对比清晰。配图可以是品牌强化、功能宣传等，适用场景非常广泛。
居中表单是页面空白，登录表单居中布局，具备简洁、专注、加载快等优点，适用于后台系统、工具类、B 端产品。
顶部导航内嵌属于轻量型登录，登录入口在顶部，点击弹窗小表单，不占空间，十分轻量化。
全屏背景+悬浮表单登录页设计，背景图采用全屏大图、色彩渐变、视频等形式，其视觉张力强，高级感、氛围感、品牌调性强。
案例分析
下面分享一些大厂 B-Web 登录页案例，加深大家对登录页设计的理解。
登录页居中布局，弹窗式和跳转式均可选择，可以通过背景样式渲染界面视觉氛围感。
左右分栏布局时，登录操作区域可以在左边也可以在右边，通过配图或者功能服务介绍进行视觉平衡。
以上案例仅作为示意，希望可以加深大家对 B-Web 登录页设计的理解。案例来源于各平台截图，仅作为学习欣赏。
本文由 @黑马青年 发布。如有侵权联系删除。
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
