【UED】明源云·天际开放平台登录界面设计体验升级
前言
Honeycomb Design
登录界面作为产品的入口，给予用户情感基调与对产品的基本认知，登录体验是指用户通过入口进入应用、网站或服务，建立自己的身份。登录流程通常由主登录流程和恢复流程组成，其中主登录流程包括填写用户名、手机号、密码等，恢复流程包括忘记密码、重置密码、其他登录方式等。
登录体验的目标是确保用户成功登录帐户。
作为网站结构中极为重要的一个页面，需要优秀的外观设计和良好的用户体验并存，增加产品品牌认知与产品质感，并给予用户对产品的正向期待！
设计目标
Honeycomb Design
• 符合流行趋势
• 提高产品认知
• 给予用户期待
• 聚焦登录信息
• 提供操作效率
思考
Honeycomb Design
我们将登录页体验设计归纳为3个大的层面：
• 基础层
• 风格层
• 体验层
拆解各个层面的内核，最终总结出天际产品登录页的设计方法和理论依据，希望这些内容可以帮助到未来的产品，让我们更轻松更准确的完成更多的高质量的产品登录页设计，用设计创造价值。
布局
Honeycomb Design
首先是页面布局，我们对产品登录页做出了三种切分尝试：
呈现
Honeycomb Design
通过对互联网登录界面优秀设计的分析和总结，我们将界面布局做了标准分类：
经典，流行，卡片，错落。
通过比较，发现他们拥有各自的页面特性。
经典：布局沉稳，舒适，拓展性强
流行：层次丰富，画面有序
卡片：贯穿画面超大的背投配图，主题清晰，大气
错落：卡片样式的一个亚类型，多国外网站使用，跳跃感强烈，画面活泼，富有视觉落差
从场景，功能，交互，视觉四个体验层面出发综合思考，并结合天际产品实际情况以及主观感受，最终我们选择了5:5的经典布局方式作为标准的产品登录页。
这种布局比较契合天际的现有产品，登录页左侧为登录配图区域用于表意产品定位，提升页面品质，服务于用户的场景与视觉体验，右侧为登录框功能区域，用于满足用户的功能与场景诉求，二者各占比一半，左侧画面丰富，右侧简洁干净！
整个画面统一，平衡，经典。
基于设计一致性原则，优先考虑登录界面的延展性和易用性，所以我们选择了较为沉稳，经典的呈现方式，未来在面对不同产品时，输出高品质的产品配图，搭配标准的登录组件，即可产出丰富且统一的产品登录页。
特性
Honeycomb Design
产品登录页具备的5个特性如下：
• 高效：聚焦于登录信息，高效的使用
• 统一：采用统一的UI基础控件与交互逻辑，既量化了产品组件，也保持了产品统一性
• 平衡：经过尝试与选择，天际产品登录页面都是沿着中心线左右对称的（5：5）
• 相得益彰：登录页配图是对产品的映射，好的登录页配图可以增加产品品牌认知与产品质感
• 时尚：关注当下主流的设计语言，制造时尚且高级的与时俱进的产品入口
设计建议
Honeycomb Design
• 设计时建议采用半屏图片背景风格，重点以信息录入为主，通过添加一些具有产品特性的设计元素或装饰来体现界面细节，增加产品品牌感，图片与录入信息的比例可根据产品调性自行调整。
• 在色彩选择上可根据产品特性来定义。不建议选择纯度过高的色彩，在大屏下，过于鲜亮的颜色会给眼睛带来不适感且降低产品品质。
• 登录框的信息，包括信息分布、LOGO尺寸，输入框高度，间距，登录按钮都不能随意调整，宽度可根据界面比例自行调整。
设计实践
Honeycomb Design
01
玻璃拟态与磨砂质感
类玻璃柔光材质」轻盈与通透的视觉感受，能营造出未来感十足的场景，很适合阐述科技智能的概念。
• 透气磨砂
• 层级空间
• 简洁拟物
相关案例：
The Future Vision of Microsoft 365 宣传视频
身份认证中心登陆页
02
3D
3D设计仍然是 2021 年的设计趋势，3D设计目前更容易应用在企业的品牌或产品应用中，以无可比拟逼近现实的真实光感，材质，以及深度的画面能使产品更具吸引力。
• 直观感受
• 立体真实
• 模拟现实
相关案例：云产品
集成开放平台登录页
开发云登录页
数据分析平台登陆页
还有更多的设计风格（插画、微动效、3D与UI相结合、IP角色等等）都还在探索中，陆续将在新的产品中与大家见面，敬请期待！
明源云天际开放平台UED
UED的职责是给用户带来更好更适合的使用体验,从体验设计的角度为设计师和开发者提供PC、移动、可视化设计资产及设计解决方案。用设计驱动开发,不断提升产品易用性,是我们研究的目标方向。
欢迎访问:
https://honeycomb.mingyuanyun.com/
往期回顾：
我们一直在路上,未完待续...
DevOps平台如何快速创建应用？
【集成】如何“零”代码实现售楼在线电子签约的交付上线
技术分享｜介绍sqlc-sql生成安全的数据库访问代码
技术分享｜To B复杂系统的性能测试要注意哪些？