已复制
罗泽宇的个人照片
我叫😀罗泽宇,是一名现居深圳的💬用户体验设计师。过去六年,我在📱手机 OS 中设计🌐系统交互与✨个性化体验,致力于将复杂的信息、规则与操作,组织成🌿自然、💡清晰且能🔗持续扩展的产品体验。

工作项目

从真实问题到真实产品

这些项目记录了我如何做出设计判断,并将它们一步步推进到落地。

流动界面框架

面对折叠屏与多窗带来的窗口变化,我建立控件与内容的适配规则,定义它们何时保持、压缩、重排或切换结构,让同一套界面能够自然适应不同尺寸。

一体化壁纸装饰

把多样的壁纸效果整理为易于选择和调整的编辑体验,让用户从喜欢的风格开始,完成自己的搭配。

一体化壁纸装饰项目封面:锁屏装饰编辑界面

锁屏框架重构

随着通知、媒体、系统状态与个性化能力持续增加,我与产品重新构建锁屏的展示与编辑框架,让不同信息和操作有清晰的位置,也为后续能力扩展留下空间。

锁屏框架重构项目封面:信息展示与时钟样式编辑

更多实践

把经验变成可以分享的东西

工作之外,我也通过工具探索、带教与公开分享,持续整理经验,并尝试让它对更多人产生价值。

AI 设计探索专项素材

AI 设计探索专项(2026)。负责团队 AI 设计探索,从知识沉淀到工作流实践,推进 AI 在交互设计流程中的实际应用。

校招生导师素材

校招生导师(2026)。制定培养计划,通过真实项目中的讨论与反馈,帮助一名校招生完成转正,并逐步独立承担日常设计需求。

广州美术学院校招宣讲素材

广州美术学院校招宣讲(2025)。作为设计师校友代表完成两场分享,从真实工作经验出发,介绍交互设计岗位与成长路径。

IXDC 参会学习与组内分享素材

IXDC 参会学习与组内分享(2023)。参与 IXDC 工作坊与课程,并将关键方法整理为内部分享,帮助团队完成知识沉淀与传播。

联系方式

期待和有趣的人一起做有价值的事

如果你正在寻找关注复杂体验、系统交互与产品落地的设计师,欢迎和我聊聊。

📄 简历
📞 手机
📮 邮箱
微信
罗泽宇的微信二维码
罗泽宇的个人照片

你好,我是罗泽宇。一名现居深圳的💬用户体验设计师。

过去六年,我一直在手机 OS 中做设计。从最初关注界面如何呈现,到后来处理系统里的规则、框架和复杂关系,我越来越在意的,不只是一个页面够不够好看、好用,而是当产品不断变复杂时,怎样把信息和逻辑重新理清,让体验依然自然、清晰,也能适应后续的变化。

2026 年,我离开了工作六年的 vivo。现在我正在重新整理这些年的工作,也在寻找下一段值得认真投入的产品和团队。

学习与工作经历

从产品与视觉,走到系统体验

  • 工业设计学院 ·产品设计/交互设计

    大学时最早接触产品和视觉设计。那时更多关注一个东西怎样被看见、被理解,也是在这里,我开始对“人为什么会这样使用一个产品”产生兴趣。

  • 创意设计室 ·实习 GUI 设计师

    第一次进入真实产品团队。相比课堂作业,我开始意识到,一个设计背后还有需求、规范、技术和协作,设计稿只是整个过程中的一部分。

  • 海外体验设计中心 ·助理 GUI 视觉设计师

    毕业后正式加入 vivo,参与海外产品的视觉与体验设计。不同市场、语言和产品环境,让我开始从单纯关注视觉呈现,转向理解真实场景里的使用需求。

  • 原子设计工作室 ·UI 设计师

    参与 OriginOS 等系统体验设计。工作的对象逐渐从单个页面扩展到模块和完整使用过程,我也开始更关注状态之间的关系、操作逻辑,以及一个体验怎样真正进入系统。

  • 系统框架设计组 ·OS 交互设计师

    转向交互后,我长期负责锁屏、个性化与系统公共能力。随着项目越来越复杂,我开始更多处理跨模块的规则、信息结构和系统框架,也逐渐从解决单个问题,转向思考不同功能怎样在同一套系统里保持一致,又为后续变化留下空间。

  • 工作方式

    把问题说清楚,也一起把它做好

    2022 年原子设计工作室方案讨论
    2022 年原子设计工作室方案讨论

    实际工作里,很多问题一开始并没有明确答案。面对复杂需求时,我通常会先梳理信息和关系:真正的问题是什么,哪些限制不能动,不同现象背后是否来自同一个原因。

    在形成基本判断之后,我很喜欢尽早和其他设计师一起讨论。不同视角往往会暴露原本忽略的问题,也会带来新的可能。对我来说,共创并不只是获得更多想法,它也能让团队更早建立共同理解,让后续的评审、协作和推进更顺畅。

    随着方案进入原型、评审和实现,更多真实约束也会逐渐显现。我会据此验证前面的判断,把方案收得更完整、更稳妥,而不是在一开始就假设所有问题都已经被看见。

    对我来说,把问题想清楚是一部分,让大家一起把它做好,是另一部分。

    专业认可

    有些认可,来自事情真的被做成以后。

    2023 年 vivo 用户体验设计部部门评优颁奖典礼
    2023 年 vivo 用户体验设计部部门评优颁奖典礼

    这些年,我获得过部门年度优秀个人、公司级优秀项目成员,也和公共设计、个性化团队一起获得过年度优秀团队等认可。

    回头看这些评价,反复出现的其实是几件很朴素的事:面对复杂问题时把逻辑理清,在不同角色之间主动推动事情向前,以及在时间和现实限制下,尽可能守住体验的完整性。

    相比奖项本身,我更有成就感的通常是一些后来才能看出来的结果:一套规则仍然有人沿用,一个框架还能接住新的需求,或者一个原本需要反复讨论的问题,后来变成了团队可以自然工作的方式。

    工作之外

    在日常里继续观察「使用」

    2025 年深圳出租屋一角
    2025 年深圳出租屋一角

    下班以后,我会玩游戏、摄影和旅行,也很喜欢折腾自己的住处。

    做设计久了,我会不自觉地注意一些和“使用”有关的小事:东西放在哪里更顺手,一盏灯在什么位置更舒服,一个收纳方式到底是真的方便,还是只是看起来整齐。

    布置住处时,我也很少一次把所有东西安排好。更多时候是先用一阵,再根据真实的不方便一点点调整。

    我很喜欢这种状态。好的设计未必需要时刻让人注意到它,很多时候,它只是自然地融进日常,让使用这件事本身变得更轻松。

    我现在正在寻找下一段值得认真投入的产品和团队,如果你也在做这样的事情,☕️欢迎和我聊聊。

    查看联系方式

    流动界面框架

    为连续变化的窗口建立一套系统级适配规则,
    让内容与操作在不同尺寸下保持清晰可用。

    流动界面框架是一套面向不同设备形态和窗口尺寸的系统级适配方案。它处理的不只是某个页面在大屏上怎么排,而是当可用空间不断变化时,界面什么时候需要改变结构,什么时候只需要调整内容,以及不同区域之间应该怎样分配空间。

    项目总体方向由负责公共设计的专家提出。我参与框架层的讨论,主要负责几乎全部弹性控件的规则设计,以及布局组件中「内容列表」的规范定义;同时组织规范宣贯、跟进模块适配与方案评审,并持续参与开发沟通和验收。

    • 主要负责:弹性控件规则 / 内容列表组件 / 系统适配推进
    • 项目落地:2026 年 6 月随 vivo X Fold6 正式发布

    01 从一次多窗适配开始

    OriginOS 6 Fold 希望为 X Fold 内屏提供一套新的多窗体验。窗口开始支持连续调节大小之后,同一个应用不再只是面对几个固定画布,而是需要在不断变化的空间里始终保持可用。

    最直接的办法,是增加几种窗口状态,再让各个应用分别适配。但这样很快会遇到一个问题:下一种设备、下一种窗口形态出现时,我们是不是还要重新解决一次相同的问题?

    窗口变化也不只是简单的变宽和变窄。导航可能从底部移到侧边,单列可能变成双列,次要信息可能需要收起,控件本身也可能改变形态。如果这些判断都交给各个应用独立完成,相似场景很容易形成不同规则,设计和开发也会反复处理同一类问题。

    因此,这次项目没有停留在完成一次 Fold 多窗适配,而是进一步尝试建立一套公共规则,回答几个更基础的问题:什么应该保持稳定,什么可以随着空间变化,什么时候需要切换结构,以及有限的空间应该优先留给什么。

    02 先把变化分成两个层级

    为了让不同模块能够用同一种方式理解和讨论适配,我们先把界面变化拆成两个层级。

    • 宏观层处理整体结构的变化。系统沿用紧凑、扩展和沉浸三种布局模式,通过断点决定导航位置、单列或分栏等整体结构。
    • 微观层处理同一种结构里的连续变化。在两个断点之间,元素怎样伸缩、哪些信息先收起、多个区域怎样分配空间,都需要在这个层级继续判断。

    无论具体采用哪一种方式,我们都希望变化尽量满足四个基本要求:结构稳定、内容清晰、交互连续、变化可预期。

    流动界面框架的宏观和微观层级

    微观层首先需要统一界面“可以怎么变”。我们把常见变化归纳成拉伸、缩放、缩进、延伸、挪移、分栏等基础方式。但知道怎么变还不够,当多个区域同时存在时,更重要的问题往往是:谁应该先获得空间,谁又应该先承担压缩。

    基础布局变化方式

    03 当三列都能变化,空间应该先给谁?

    「侧边导航栏 + 分栏」是弹性控件里讨论时间最长的一类场景。一个典型界面同时包含侧边导航、列表和详情三个区域,三列本身都可以伸缩,但“都能变化”并不意味着它们应该一起变化。

    侧边导航、列表和详情三列的空间关系

    窗口变宽或变窄时,我们真正需要决定的是:新增的空间应该先给谁,空间不足时又由谁先承担压缩。

    团队当时讨论过两种方式。第一种是尽量保持侧边导航和列表的默认宽度,或者保留用户主动调节后的宽度,让详情区域优先吸收新增空间,也优先承担压缩;另一种则是给三列设置不同权重,让它们随着窗口共同伸缩。

    我更倾向第一种方案。

    默认宽度通常代表系统对信息密度、可读性和操作效率的建议,而当用户主动拖动列表宽度时,这个尺寸也开始包含用户自己的使用偏好。窗口尺寸变化只是外部环境发生了变化,并不意味着用户同时改变了自己的偏好。

    相比之下,详情区域通常承载当前任务的主要内容,本身也更适合消化连续的空间变化。因此,只要保证最低可用尺寸,让详情优先承担窗口伸缩,会比同时改变三列更加稳定。

    用动态原型把讨论放进真实变化里

    这轮讨论进行了一段时间后,我们发现,只看几张静态稿很难真正判断两种方式的差异。窗口变化是连续的,每个人脑中想象的过程又不完全一样,讨论很容易停留在各自的理解里。

    于是我用 Gemini 做了两套可交互 Demo,把当时已经确定的尺寸参数和两种空间分配逻辑放进同一个可调窗口。大家可以直接拖动窗口,连续观察三列怎样变化,而不是只比较几个被截取出来的状态。

    这个 Demo 并没有改变原本的设计方法,原型验证本来就是设计过程的一部分。真正发生变化的是制作成本和迭代速度:我可以更快把抽象规则变成一个能直接操作的体验,也能在讨论过程中修改参数、马上看到结果。

    最终,两种方案的差异和实现边界都变得更清楚,这个 Demo 也成为后续规则确认和开发讨论的重要输入。

    三列布局只是其中一个例子。项目中,我还继续定义了其他弹性控件在不同断点下的形态,以及区间内信息如何保持、压缩、重排或隐藏。它们面对的问题各不相同,但判断的基础是一致的:先保证当前任务和主要内容,再让次要信息承担空间变化。

    04 有限的模板,怎样覆盖不同业务?

    弹性控件处理的是单个界面元素怎样变化。再往上一层,还有另一类会反复出现的问题:一整组内容应该怎样一起变化。

    团队先盘点了系统一、二、三级中的大量真实界面,从中归纳高频出现的布局场景。另一位同事先完成了第一个布局组件,为规范结构打样;我沿用这套结构继续负责「内容列表」,并比较不同场景下的内容量、首屏曝光目标和浏览方式。

    系统中的高频布局组件场景

    最终,内容列表被归纳为两种变化逻辑。

    • 拉伸型适合内容量有限、希望尽量在当前界面直接展示的场景。内容会随着空间伸缩,并在达到特定宽度后增加或减少列数。
    • 延伸型更适合内容本身较多、原本就只能展示一部分的场景。单个项目保持相对稳定的尺寸,内容继续向一个方向延伸,并通过局部露出提示后面还有更多内容。

    真正困难的地方并不是把两种模板画出来,而是决定模板应该规定到什么程度。规则太固定,很多实际业务无法使用;开放得太多,不同模块又会重新形成完全不同的结构,公共组件也失去了意义。

    因此,我继续把既有界面拆成组件和子组件两个层级:跨应用反复出现、真正影响布局稳定性的关系由组件固定下来;具体业务内容和局部组合上的差异,则交给子组件和受控的自定义区域。

    这些自定义仍然需要遵守统一的断点、变化优先级和多语言规则。最终,我完成了两类内容列表在三个断点下的布局关系、区间变化和多语言处理方式。

    内容列表的组件与子组件关系
    内容列表组件的规范示例

    示例:拉伸型组件与子组件。

    05 规则写完之后,怎么进入整个系统?

    公共规则和组件完成之后,这个项目还有另外一部分工作:让不同模块真正知道怎样使用它们。

    公共能力可以解决反复出现的问题,但不可能提前覆盖每一个业务细节,也不能替模块设计师判断自己的内容。因此,我们还需要让所有模块知道从哪里开始、需要输出什么,以及遇到通用规则无法处理的情况时该怎么继续推进。

    公共团队一起讨论了配套方式,我主要负责内容组织、规范宣贯,并持续跟进交互侧的实际使用。具体包括三件事:在设计开始前,通过支持无级调节的 APK 提前检查不同窗口尺寸下的问题;在整体策划模板中增加「自适应布局」章节,统一必要的输出内容;适配过程中继续提供答疑和方案评审,处理无法直接套用公共规则的场景。

    提前自检、统一输出和持续支持

    这些工作并不是替模块完成设计,而是把一个范围很大、起点并不清楚的任务,变成一套大家知道怎么开始、怎么检查、怎么说明,也知道遇到问题后怎么继续推进的过程。

    06 从规则到真实产品

    OriginOS 6 Fold 多窗体验

    最终,全系统应用的核心界面完成了流动界面框架适配,规范、公共侧开发与模块开发均完成交付。相关能力于 2026 年 6 月 26 日随 vivo X Fold6 正式发布,作为多窗体验的公共基础能力进入产品。

    这个项目最后留下的并不只是几套 Fold 界面。更重要的是,面对新的窗口尺寸或设备形态时,很多基础问题不再需要每个模块重新从头判断,而是已经有了一套可以共同遵循的规则和实现基础。

    项目之后

    这个项目最开始只是为了处理一个可以不断改变大小的窗口。做到后面,我对系统设计也有了更具体的理解:很多时候,难点不是把某一个页面设计好,而是从大量场景里找到反复出现的问题,再判断哪些应该成为公共规则,哪些仍然需要留给具体业务处理。

    规则确定也不是结束。它还需要被验证、实现,并最终被不同团队真正使用。对我来说,这个项目也是工作视角的一次变化:从解决一个具体界面的问题,进一步走到一套系统能力如何被定义、验证并真正进入产品。

    一体化壁纸装饰

    把多样的壁纸效果整理为易于选择和调整的编辑体验,
    让用户从喜欢的风格开始,完成自己的搭配。

    一体化壁纸装饰项目封面

    在 OriginOS 5.0 中,个性化是版本的重要方向。熄屏、锁屏、桌面等能力被整合到同一个编辑空间中。壁纸装饰是其中的一项新能力:用户不仅可以更换壁纸,还能为照片或系统壁纸选择不同风格,进一步调整画面细节。

    我参与了一体化编辑框架的讨论与共创,提出预览区、底部操作区的定义和布局建议;整体框架后续的细化与落地由其他同事主要负责。在此基础上,我主要负责壁纸装饰的交互设计,包括归纳不同主题的编辑维度、组织风格选择与编辑路径,并跟进测试优化和开发落地。个性化方向与视觉主题由产品、视觉团队共同推进。

    • 主要负责:装饰编辑维度 / 交互流程 / 测试优化与开发跟进
    • 项目落地:随 OriginOS 5.0 上线,后续版本继续扩展

    01 从视觉主题到可编辑的体验

    项目最初并不是从一份已经定义好的装饰需求开始。视觉团队先探索了多种壁纸主题,每套主题都有希望开放给用户调整的内容:相框、文字、图形、颜色等,以及每个维度下可以变化的范围。随着方案逐渐丰富,交互设计需要与视觉探索同步推进。

    多种壁纸主题的视觉探索

    在成为产品能力前,这些效果需要进入 OS 5.0 的一体化编辑空间。我们与产品一起梳理已有能力,以锁屏壁纸为核心组织熄屏、锁屏和桌面的搭配关系,并共同讨论预览区与操作区的结构。我在其中提出了上方集中预览、下方集中操作的结构建议,让用户在调整设置时能够持续看见画面效果。

    一体化编辑空间的预览与操作结构

    在这套空间中,装饰还需要解决一个更具体的问题:视觉上不同的主题,应该让用户分别学习不同的操作,还是可以用相近的方式完成选择与调整?

    我的工作从梳理这些差异开始:先判断哪些变化属于同一种用户选择,再决定需要提供哪些编辑项,以及每一项开放到什么程度。这样才能在保留不同主题特点的同时,把用户需要理解和操作的内容控制在有限范围内。

    02 把相似效果整理为更少、更清楚的选择

    以「多彩相片」为例,早期视觉方案中有三种带相框的主题。它们呈现出的画面风格不同,但都围绕照片、相框和装饰元素进行组合。如果分别作为三个主题提供,用户需要在不同主题之间切换,而一些相近的调整也会重复出现。

    我在梳理时发现了它们的共性,便与视觉讨论:这些主题能否由同一套能力承接,同时在一个模板中保留各自的差异?经过整理,原本分散的带框效果被合并到一个主题模板下,相框的差异成为模板中的一个编辑维度,用户可以直接切换,而不必为了换一种相框重新选择主题。

    颜色调整也经历了类似的讨论。最初,相框颜色、图形颜色和背景颜色分别作为可调整内容。我提出将它们组织为配色组合,与视觉一起协调不同元素之间的颜色关系。用户选择配色后,整张画面的相关颜色一起变化,减少了逐项搭配的操作。

    多彩相片的主题归并与编辑维度

    最终,多彩相片的编辑内容被归纳为相框、文字、配色和图形四个维度。每合并一项,都需要确认原有风格是否仍能被表达;每开放一项,也要判断用户是否有必要单独调整。把彼此相关的变化放在一起,让用户通过有限的选择得到完整效果,是这部分设计的重点。

    03 先选风格,再调整细节

    编辑维度确定之后,还需要决定它们在什么时候出现。不同风格的编辑项并不相同,如果把风格缩略图和所有调整项同时放在同一屏,用户既要判断整体效果,又要处理局部设置,预览空间也会被进一步压缩。

    因此,我把风格浏览与细节编辑拆成连续的两个状态。用户先浏览整体风格,选定后再展开对应的编辑内容;想尝试另一种风格时,通过面板顶部的风格入口返回选择。浏览时先看画面,编辑时再处理细节,每个阶段只呈现当前需要的内容。

    先浏览风格,再进入细节编辑

    进入编辑后,底部面板通过页签组织不同维度。相框和图形主要通过样式选择完成,文字提供输入能力,颜色则以配色选项呈现。不同风格只组合所需的控件,不必分别建立整套编辑页面。

    共用结构也需要容纳不同壁纸的实际差异。个人照片可以调整相框、文字等装饰内容;系统壁纸则根据自身效果提供对应选项。例如,后续加入的「百变图形」提供图形、大小和颜色调整。它们沿用相近的入口、预览和面板结构,具体编辑内容则随效果变化。

    不同壁纸在共用结构中的编辑差异

    04 用户想换的,可能只是照片

    基础开发版本进入内部用户测试后,一个入口问题变得更加明确。部分用户已经选好了装饰风格,希望换几张照片比较效果,于是点击上层的“换壁纸”。但这个入口指向整体壁纸替换,与他们希望保留当前风格、只替换照片的意图并不一致。

    原方案已经支持局部换照片,只是入口藏在更深的编辑面板中,用户无法在当前页面直接找到。为了保持整体编辑空间简洁,我们此前保留了这样的层级安排;测试中的实际操作说明,局部换图需要更容易被发现。

    测试中暴露的局部换照片入口问题

    这两种操作需要保留的内容不同。重新选择整张壁纸,是从新的画面开始;在现有装饰中换照片,则希望继续使用已经选好的风格。对后者来说,相框和配色等选择已经是当前创作的一部分,下一步操作应当让这些选择继续有效。

    我据此调整了入口安排:保留“换壁纸”,同时把“换照片”提升到同一层级,并用当前照片的缩略图作为入口,帮助用户识别替换对象。两个操作分别对应整体替换和局部换图,用户可以直接选择自己希望改变的范围。

    整体换壁纸与局部换照片的并列入口

    后续内部复测中,用户能够明确区分两个入口的作用;产生换照片的需求时,也能直接找到对应入口并完成操作。调整随后进入线上版本。

    这次优化让我更具体地认识到,编辑界面需要考虑用户已经完成的选择。入口是否简洁,不能只看按钮数量,还要看用户能否判断操作会改变什么、保留什么。

    05 上线之后,新的效果继续加入

    壁纸装饰随 OriginOS 5.0 上线。基础装饰首先提供「多彩相片」和「胶片滤镜」,特殊装饰提供「花火时刻」。随着版本迭代,陆续加入「文字贴纸」「百变图形」;到 OriginOS 6.0 又继续扩展了「潮流标签」「元气挂件」「文字宣言」等效果。

    这些效果提供了不同的视觉表达,也有各自的编辑内容,但继续沿用既有的选择、预览与编辑关系。后续效果继续使用这套结构,也验证了早期围绕主题共性和编辑维度所做的整理。

    从整体产品表现看,2024 年 11 月,一体化编辑页月活为 41.6%,新建搭配月活为 19.2%;新情境壁纸在一体化编辑页内的选择使用人数,是设置页单独应用的 2.6 倍。

    这些数据反映的是 OS 5.0 整体一体化个性化编辑体验,其中也包含壁纸资源、入口和其他能力的同步更新,不能单独归因于壁纸装饰。在这个项目中,与我的工作联系更直接的结果,是装饰编辑路径完成上线、测试发现的换图问题得到调整,以及后续效果继续使用这套编辑结构。

    一体化编辑体验的整体数据

    这个项目让我更具体地理解了编辑体验中的两类判断:面对不断增加的视觉效果,需要先找到用户能够理解的编辑维度;面对已经开始创作的用户,则要弄清楚下一步操作应该改变什么、保留什么。前者决定能力怎样组织,后者决定用户能否顺着已有选择继续操作。

    锁屏框架重构

    把不断增加的信息与个性化能力,
    整理成清晰的显示、查看和编辑方式。

    锁屏框架重构的展示、流动信息与编辑能力

    OriginOS 4 希望进一步开放锁屏的个性化能力,但当时的锁屏已经承载了 30 多项信息与功能。时间、设备状态、媒体、通知和操作入口共用一块有限的空间,轻尚锁屏与 Origin 锁屏又有各自的内容结构。增加新的能力之前,需要先重新整理已有信息怎样显示、用户怎样查看,以及如何进入编辑。

    我负责整个锁屏模块的交互设计,提出显示区域的划分与流动信息全展态,完成两套锁屏的编辑方案、设置路径,以及后续的原型验证和开发验收。产品参与需求价值、信息优先级和准入标准的梳理,并协调相关模块共同确认方案。

    01 先理清锁屏已经承载了什么

    项目开始时,我先与产品一起盘点锁屏已有的内容。产品帮助判断需求价值和业务优先级,我则进一步梳理每项内容的显示类型、出现时机和操作方式。

    在此基础上,我提出将锁屏划分为设备信息、核心信息、流动信息和功能操作四个区域。设备信息帮助用户确认当前状态;核心信息用于快速查看时间;流动信息承载媒体和通知;解锁与快捷操作则集中在底部区域。

    锁屏的四个信息区域

    流动信息区最能体现这次整理的作用。原先媒体、原子通知和普通通知在顺序、宽度与样式上各不相同,看起来像几组分别增加的内容。

    我重新确认它们的优先级与显示关系,让媒体、原子通知和普通通知依次排列,并逐步统一卡片宽度和视觉样式。整理之后,不同来源的内容仍能被区分,又能作为同一类流动信息连续浏览。

    流动信息的显示关系与视觉样式

    同样的区域原则也用于 Origin 锁屏,但具体位置会随样式结构调整。它原有的底部控制区域继续承载音乐和原子通知,因此两套锁屏共享信息组织的逻辑,也保留各自原有的排布。

    02 怎样同时支持快速浏览和继续查看?

    重新整理后,通知的可用空间仍然有限。用户只能在时间与指纹图标之间上下滑动;当顶部信息较多、指纹图标位置较高时,极端情况下,一次只能看见约一条通知。

    我重新观察用户在锁屏上查看通知的过程,发现这里包含两个不同阶段。

    刚来到锁屏时,用户通常只想快速确认有没有新内容、分别是什么。此时意图还不明确,时间、设备状态和常用入口都应该保留,同时尽量露出通知。

    当用户上滑信息或点击图标栏时,才进一步表达了继续阅读的意图。此时,界面的重点可以从快速确认转向内容浏览,让更多空间暂时留给通知。

    从快速确认到继续阅读的两种状态

    当时我们也考虑过进入通知中心。但未解锁时,通知中心只能展示部分内容,一些操作也无法提供;从锁屏进入的方式,又与解锁后从屏幕顶部下拉不同。用户会进入一个熟悉却不完整的界面,需要重新判断当前能看什么、能做什么。

    我因此提出“全展态”:用户主动操作后,不离开锁屏,而是在当前界面中展开流动信息。上滑延续了原有的浏览习惯,点击图标栏则为收起的内容提供了直接入口。

    流动信息全展态的进入方式

    进入全展态后,时间、日期和星期缩小保留,方便用户在查看通知时参考;状态栏和锁头保持可见,让人知道自己仍在锁屏。指纹图标、快捷入口和多用户入口暂时隐藏,将主要空间交给流动信息。

    这里也包含一次明确的取舍:全展态优先支持阅读通知,屏下指纹需要回到常规态后使用。用户主动进入更深入的查看状态后,原本并列的任务不再拥有相同优先级。

    03 能进入,还要知道怎样回来

    为了尽早判断这个方向是否可行,我用 Origami 制作了可以在手机上体验的原型,邀请周边模块的产品和设计师试用:先找到被收起的通知,再返回常规锁屏。

    进入全展态基本不需要解释,返回却出现了问题。初版依靠点击空白区域退出,部分体验者没有发现这种方式;也有人把展开后的界面理解成通知中心,按照另一套界面的习惯继续操作。

    我随后增加了悬浮的“收起”按钮,让退出有一个明确可见的入口。同时保留锁头和清晰的壁纸,不使用通知中心的模糊背景,让展开后的界面继续保持锁屏的视觉线索。

    全展态的返回方式与锁屏视觉线索

    最终方案提供两种返回方式:点击“收起”按钮可以直接退出;向下滚动信息,在内容回到顶部后继续下滑,也能回到常规锁屏。按钮让出口容易发现,手势则延续当前的浏览过程。

    开发阶段,我再用 ProtoPie 制作更接近最终效果的原型,由用研团队招募 8 位用户进行正式可用性测试。任务同样是查看隐藏的通知,再返回常规锁屏。8 位用户均在无需提醒的情况下完成任务,个别用户需要一定时间尝试。

    这次测试也让我意识到,为新的界面状态沿用熟悉的入口还不够。用户还需要通过保留的锁屏元素判断自己在哪里,并通过清楚的出口结束当前操作。进入方式、场景识别和返回路径,需要放在一起验证。

    04 直接编辑眼前的内容

    展示端理顺之后,编辑端还需要回答一个问题:用户怎样知道哪里可以修改,操作又会改变什么?

    此前,预览与自定义入口彼此分离。用户看到一个设置项后,需要自己判断它对应画面中的哪部分内容。轻尚锁屏和 Origin 锁屏又有不同的结构,如果继续分别增加设置项,编辑方式也会越来越分散。

    我把编辑改为全屏预览,用选框直接标出可以修改的元素。用户点击时钟,就进入时钟与日期的编辑;点击快捷信息,则修改对应内容。具体选项通过底部面板展开,让上方继续显示完整预览,每次调整都能直接看到结果。

    锁屏的全屏预览与直接编辑

    两套锁屏沿用相近的选框与面板操作,具体可以修改的内容则根据样式保留差异。时钟与日期、快捷信息和壁纸基本使用相同的编辑方式;Origin 锁屏继续保留固定的时钟位置和专属背景板。

    我也调整了锁屏设置页。原先更换样式后,需要先应用,再返回设置页寻找自定义入口;调整后,选择样式即可继续进入对应编辑态,把选择与修改连接起来。

    锁屏设置页中连接选择与编辑

    05 上线与后续沿用

    项目随 OriginOS 4 发布,并按照系统升级节奏分批覆盖适配机型。重新整理后的显示规则、流动信息全展态和编辑方式一起进入实际产品。

    OriginOS 3.0 与 OriginOS 4.0 的最终对比

    此后,锁屏继续沿用这套区域划分和全展态,后续能力主要在原有结构内调整位置与效果。例如,为适应壁纸景深效果,日期、星期和快捷信息被移到时间上方,但它们仍然属于核心信息区,整体区域关系没有改变。

    到 OriginOS 5,锁屏设置入口融入一体化编辑空间;直接选中画面元素、展开对应面板的编辑方式仍被保留。

    这个项目让我更具体地理解了锁屏上的空间分配:信息显示多少,不只取决于屏幕还剩多少位置,也取决于用户此刻只是快速确认,还是已经决定继续查看。界面可以跟随意图改变主次,但也需要让用户清楚地进入、停留和返回。