交互设计 · 产品设计 · 视觉设计

锁屏个性化编辑

Overview

2023年MIUI15版本中将基于全新美学宗旨，推出三套全新锁屏。将在增强锁屏的自定义能力的同时，展示在玻璃特效、AOD锁屏联动、抠图等技术上的领先性，提升用户对锁屏美学的满意度。

My Contributions

产品架构设计

交互流程设计

界面设计

原型设计与制作

可用性测试

Team

Design lead 1
Graphic Designer 4
Product Manager 2

项目背景

项目由锁屏视觉设计师发起，提供了7套锁屏新设计，2类新技术能力需求。
我作为交互设计师在经项目初步汇报成功后开始介入，需为锁屏个性化功能搭建编辑流程及框架。

锁屏新设计包括：

新技术能力包括：

壁纸玻璃特效

壁纸分层特效

🤔️ 潜在问题：

套餐种类繁多，各具特色，难以确保框架的普适性；

缺乏主流样式，客户在众多选项中可能感到迷茫；

个性化能力差距较大，用户难以对定制能力进行有效预期；

定制功能较多，为避免单页负载过重，可能导致增加页面层次。

竞品分析

苹果已公布相似功能，其产品架构及交互方式具备一定参考性：

1. 从新用户角度分析，用户应用一个新的锁屏需经以下步骤：

🤔️ 可优化点：

新模版的曝光较低，需点击右下角加号才能查看；

模版受布局方式影响，图片小，较难查看更多细节；

若用户无编辑需求，整体操作流程过长，需经历至少6步才能应用。

2. 从模版的通用性角度分析：

🤔️ 可优化点：

模版之间不互通，如模版1无法切换为其他同系列的壁纸，更无法切换为用户自己的照片；

不同的模版底部可编辑项差异较大，较难预期。

定义设计原则/目标：

经分析项目目标及竞品，最终与上级共识以下3点作为锁屏编辑的主要设计原则：

进入锁屏编辑，能够充分体现新设计的吸引力；
对于低自定义需求的用户，提供多套搭配方式，快速应用；
自定义交互框架需要具备高通用性、易用性。

定义产品策略

由于目前现有模版较多，差异较大。经过多轮讨论及尝试，最终敲定了以下产品策略：

策略一：以经典锁屏及菱形时间为主打方案，为用户预置多套搭配好的锁屏方案：

经典锁屏：基于原有锁屏改版，可配置每行信息的内容。

菱形时间：大字风格

策略二：将影像杂志作为逐年扩充的新锁屏风格，依据开发能动性决定是否跟随主要版本上线。

影像杂志：差异性较大，各有特色

策略三：所有套装均需支持最基础的自定义能力：

收敛视觉制定规范：

针对所有套装约定统一规则，如：

避开面部识别、指纹解锁提示，避开底部按钮功能区
需产出通知出现后的收起样式

设计交互框架：

主要流程包括以下三个部分：

入口及触发流程
锁屏应用流程
每个模版的自定义流程

由于入口及触发方式与苹果的方案没有太大差异，所以详细介绍另外两个部分。

锁屏应用流程

之前提到，相比苹果的方案，我们希望能够：

「缩短应用新锁屏的流程。对于低自定义需求的用户，提供多套搭配方式，能够快速应用。」

基于此我们衍生出了两种方案：

方案一：

相比苹果的方案，我们仍然保留了从锁屏库中添加新锁屏的流程，但用户在点击添加后，不会自动跳转至自定义页面，点击右上角可直接应用。

方案二：

排除其余不同，方案二则是更激进一些，取消了添加步骤，用户可以直接应用。

😊 经过一系列讨论，我们认为：

仍需保留用户从锁屏进入主页时，对当前锁屏的定位。他有助于理解用户所处在的状态和位置。
相比瀑布流，较大空间地显示每个新锁屏，能够增加选择锁屏时的吸引力及沉浸感。且左右滑切换套装中不同搭配好的样式，上下滑切换套装仍然是个高效的模型。
添加模型可以尝试去掉，可用性测试可验证是否存在理解上的困难。

最终方案：

创新十字型交互，打造极致沉浸的画廊体验。
用户可以随时选择任意锁屏，点击右上角按钮应用。

此方案主要关注以下两个重点：

沉浸感：使用了尽可能大的模版预览面板，可以让用户更好地预知其应用在锁屏上的效果和设计细节。每一行是一套模版，用户可以通过通过上下滑切换不同的模版，左右滑循环切换同个模版下的不同预制效果。
即用感：为了最小化用户编辑锁屏的成本，更好地服务于低自定义需求的用户，通过这个模型，用户可以随时点击右上角的应用，直接生效作为他的锁屏。