鸿蒙版效率相册的平板适配设计思考

从1.0.0版本起，至今到最新的1.2.1，已经迭代了10个版本，目前也获得了华为官方“码”上创新活动的精选创新案例。

目前仅有鸿蒙6系统支持，因为独立开发精力有限，iOS、Android将后续陆续上线，敬请期待。

多端适配

众所周知，华为官方推荐全场景协同，而经过这么多的版本的迭代，是时候开始适配平板端了。

并且相比于手机，平板端更容易在视觉浏览上更加符合“沉浸式的浏览体验”1

版本迭代

V0.1

作为第一个版本的设计，我先考虑的是：

左右两屏，右侧是可操作区域。

底部开始沿用手机端的设计，从MVP的角度来说：“可以先跑起来，之后再看”。

但是设计了几页之后觉得哪里有些怪：没有返回按钮不说，作为一个设计专业出身的产品1，非但没有设计，也没有考虑到右侧顶部按钮时在操作中的抬手操作成本（如果用户没有开启单手模式的话）。

V0.2

于是觉得不是很行，还是需要迭代，不然会觉得”没设计。

引导页优化

在引导页中，我想带给大家的是，第一眼就可以知道我的效率相册可以提供给用户的功能，于是设计了右上角的区域，尝试过使用动画展示3，但有这个时间还是考虑一下“上万张照片的性能瓶颈如何解决”吧（笑）。

在设计“使用模式”时：

因为页面太空，矩形也很大，不如在“选择使用模式”时，增加一个能够直观给用户看到选择之后的效果，于是我设计了这样的效果，并且也贴合华为的HDS光感沉浸视觉效果：

本页面也上传到了我的 Dribbble ，欢迎大家支持（请点击原文跳转查看）：

因为公众号依旧较封闭，所以请点击原文跳转查看。

两种模式的解释：

系统相册模式：可直接删除你的图片，将会自动移动至“最近删除”页面中。

手动导入模式：使用安全图库+待整理，选择此模式后，会将系统中的照片完全复制进应用内，相关整理、移动不会影响源文件。

1.2.1 终版

直到在适配除了引导页之外的其他页面时，我想我似乎找到了针对产品的“目前的最优解”：

顶部是品牌展示区，中间最大的则是操作区，通过矩形两侧，进行区分，左右两侧则为快捷功能切换。

选中文字为加粗形式，底部中间返回首页。

快捷功能切换

和上述“引导页”优化相似，这里我不仅设计了一个单一功能，并且根据首页的菜单，在每个功能的底部设置了“快捷切换”功能，能够避免用户在进入设置页的时候出现“点错”情况。

引导页部分页面设计

设置页

而在设置页，则采用了类似“三折叠”的显示布局，最左侧的设置居中显示，同时也让操作更加跟手。

而最右侧的设置，也是在第二层设置选择之后弹出，保留用户注意力。

这是目前版本1.2.1，不排除后续有继续优化的可能性。

设计归设计，开发归开发

在设计稿中，理想总是很丰满，但是在开发上不免遇到问题。

显示与渲染问题

阴影的显示问题：例如在真实的上线设计中，我还是去掉了阴影，保留卡片样式的不同切换透明度：避免在诸多不同分辨率、尺寸的机型上因为内存原因而显示不完整，或者在切换模式的时候渲染图片而产生的不跟手的问题。

开发速度的问题

设计稿与真实的设计的差距：如果需要做到 1:1 精确设计稿还原，如果你使用AI辅助编码，则需要理解与精确调整。对于一个人的独立开发者而非团队来说，“小步快跑，大步迭代”则是必须，否则就会被落下，尤其是对于类似系统工具的第三方工具来说。

例如，在最近一次华为推送的更新（6.1.0.125 SP9）中，官方的系统相册出现了“智能清理功能”。

而效率相册的宗旨是，通过提升效率的功能，带给用户更加智能的相册操作与浏览体验。

下一步，效率相册将会接入更多鸿蒙特性，进行更加智能化的交互，持续提升效率与优化方向。

最后 & 我的其他产品

欢迎大家与我一起交流讨论在平板设计上的思考和想法。

我的其他产品目前也均是鸿蒙端产品：

城探：会在剩余时间不断迭代。在近期发布了1.0.1版本的更新，可以扫描与导入本地音乐了。城探是一款致力于做你的“出行伙伴”，拥有多款便捷操作工具。

DayTrace：一款支持插入事件进展与心情的日记App，可以跟进事件进展，以及每日的消费记录，支持闪控球记录。

2:目前是独立开发，还在寻找主业中

3:没有专门的设计帮我，一个人管理三款产品也是精力有限

对应视频（视频号）：

后记

本篇文章同步发表于以下平台，可能会增加：

图文平台：华为开发者论坛、大厂乐乎、站酷、酷安、知乎、掘金

视频平台（更新上述视频）：哔哩哔哩、抖音、视频号

图文&视频平台：小红书

欢迎大家和我一起交流独立开发、（Vibe）Coding以及产品、工作以及生活的一切。