[[登录 login - pubili]] ## 概念 必备页面，绕不开，做的有特色可以给用户留下深刻的印象。 ## 风格 ### 1. 简约 比较简洁，没有太多滑头，纯色背景或者配合一些非常简单的小插图。 - Slack![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20220503193613.png) - Pitch![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/Login%20to%20Pitch.png) - 来源未知![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20220503193202.png) - Loom![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20220503193523.png) - Atlassian![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20220503193553.png) ### 2. 大图突显品牌调性 常见效果，一般可以展示突显品牌调性的图片 - Behance ![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20220503192951.png) - Adobe 20190926![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/%E7%99%BB%E5%BD%95.png) - 来源位置![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20220503194619.png) - Framer![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20220503194739.png) - [来源](https://pipettebaby.com/account/login?return_url=%2Faccount)![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/Account%20%E2%80%93%20Pipette.png) ### 3. 左右布局 一些有利于业务的产品宣传点，或者加入[[客户谏言模块 Testimonial Section]]模块。 - 带有客户谏言![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20220503195903.png) - Dribbble![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20220503194704.png) - 飞书 ![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/%E9%A3%9E%E4%B9%A6%20-%20%E7%99%BB%E5%BD%95.jpg) ### 4. 居中卡片 - Pinbox![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/Pinbox%20-%20%E8%B7%A8%E5%B9%B3%E5%8F%B0%E6%94%B6%E8%97%8F%E5%B7%A5%E5%85%B7.png) ## 最佳实践 ### 体验细节 #### 键盘开启大写时，有图标提示。 对于键盘上没有大写灯的用户来说，体验非常好。 案例 - 微软 - 苹果 #### 未注册用户，通过手机短信登录完成注册 案例： - [我的 - 面包多](https://mianbaoduo.com/o/desk?) - Teambition ![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20220423084438.png) - 掘金![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20220423084454.png) ### 业务增长 #### 登录界面展示特色 1. 利用您的登录来展示产品的核心价值。 2. 人们经常访问您的登录页面。提醒他们为什么您的产品如此有价值，以及他们最初选择您的原因。![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/%E9%A3%9E%E4%B9%A6%20-%20%E7%99%BB%E5%BD%95.jpg) ## 资源 - 界面参考 - [lookup.design - ui examples](https://lookup.design/search?query=login&page=1)