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

用户头像
南京/学生/51天前/365浏览
鸿蒙版效率相册的平板适配设计思考
用户头像
故事熊
什么是效率相册?
效率相册是一款支持防窥保护的、可以在鸿蒙上清理重复、查找相似文件,并提供文件夹视图进行分类整理照片的相册工具。
从1.0.0版本起,至今到最新的1.2.1,已经迭代了10个版本,目前也获得了华为官方“码”上创新活动的精选创新案例。
目前仅有鸿蒙6系统支持,因为独立开发精力有限,iOS、Android 将后续陆续上线,敬请期待。
鸿蒙版效率相册的平板适配设计思考(图ZMTU2NDY3MjA=) - 观点 - 站酷设计师故事熊原创素材 - 站酷ZCOOL
迭代版本
收藏
多端适配
众所周知,华为官方推荐全场景协同,而经过这么多的版本的迭代,是时候开始适配平板端了。
并且相比于手机,平板端更容易在视觉浏览上更加符合“沉浸式的浏览体验”1
版本迭代
V0.1
作为第一个版本的设计,我先考虑的是:
左右两屏,右侧是可操作区域。
鸿蒙版效率相册的平板适配设计思考(图ZMTU2NDY3MjQ=) - 观点 - 站酷设计师故事熊原创素材 - 站酷ZCOOL
未高效利用红框区域
收藏
底部开始沿用手机端的设计,从MVP的角度来说:“可以先跑起来,之后再看”。
但是设计了几页之后觉得哪里有些怪:没有返回按钮不说,作为一个设计专业出身的产品1,非但没有设计,也没有考虑到右侧顶部按钮时在操作中的抬手操作成本(如果用户没有开启单手模式的话)。
V0.2
于是觉得不是很行,还是需要迭代,不然会觉得”没设计。
引导页优化
在引导页中,我想带给大家的是,第一眼就可以知道我的效率相册可以提供给用户的功能,于是设计了右上角的区域,尝试过使用动画展示3,但有这个时间还是考虑一下“上万张照片的性能瓶颈如何解决”吧(笑)。
鸿蒙版效率相册的平板适配设计思考(图ZMTU2NDY3MzI=) - 观点 - 站酷设计师故事熊原创素材 - 站酷ZCOOL
优化掉红框区域
收藏
第二版的设计我考虑到了返回键,但是大屏上一就出现了“右手抬手成本的问题”。虽说如此,我还是先按照这个版本进行设计。
在其他页面中,形象也出具端倪,基本成型:
鸿蒙版效率相册的平板适配设计思考(图ZMTU2NDY3NDQ=) - 观点 - 站酷设计师故事熊原创素材 - 站酷ZCOOL
其他页面
收藏
在设计“使用模式”页面时:
因为页面太空,矩形也很大,不如在“选择使用模式”时,增加一个能够直观给用户看到选择之后的效果,于是我设计了这样的效果,并且也贴合华为的HDS光感沉浸视觉效果:
鸿蒙版效率相册的平板适配设计思考(图ZMTU2NDY3NDA=) - 观点 - 站酷设计师故事熊原创素材 - 站酷ZCOOL
选择使用模式
收藏
本页面也上传到了我的
Dribbble
,欢迎大家支持:
鸿蒙版效率相册的平板适配设计思考(图ZMTU2NDY3NDg=) - 观点 - 站酷设计师故事熊原创素材 - 站酷ZCOOL
我的Dribbble
收藏
两种模式的解释:
系统相册模式:可直接删除你的图片,将会自动移动至“最近删除”页面中。
手动导入模式:使用安全图库+待整理,选择此模式后,会将系统中的照片完全复制进应用内,相关整理、移动不会影响源文件。
鸿蒙版效率相册的平板适配设计思考(图ZMTU2NDY3NTI=) - 观点 - 站酷设计师故事熊原创素材 - 站酷ZCOOL
系统相册模式和手动导入模式
收藏
1.2.1 终版
直到在适配除了引导页之外的其他页面时,我想我似乎找到了针对产品的“目前的最优解”:
鸿蒙版效率相册的平板适配设计思考(图ZMTU2NDY3NTY=) - 观点 - 站酷设计师故事熊原创素材 - 站酷ZCOOL
收藏
顶部是品牌展示区,中间最大的则是操作区,通过矩形两侧,进行区分,左右两侧则为快捷功能切换。
选中文字为加粗形式,底部中间返回首页。
快捷功能切换
和上述“引导页”优化相似,这里我不仅设计了一个单一功能,并且根据首页的菜单,在每个功能的底部设置了“快捷切换”功能,能够避免用户在进入设置页的时候出现“点错”情况。
鸿蒙版效率相册的平板适配设计思考(图ZMTU2NDY3NjA=) - 观点 - 站酷设计师故事熊原创素材 - 站酷ZCOOL
底部快捷栏参照的逻辑
收藏
引导页部分页面设计
鸿蒙版效率相册的平板适配设计思考(图ZMTU2NDY3NjQ=) - 观点 - 站酷设计师故事熊原创素材 - 站酷ZCOOL
其他页面
收藏
设置页
而在设置页,则采用了类似“三折叠”的显示布局,最左侧的设置居中显示,同时也让操作更加跟手。
而最右侧的设置,也是在第二层设置选择之后弹出,保留用户注意力。
这是目前版本1.2.1,不排除后续有继续优化的可能性。
鸿蒙版效率相册的平板适配设计思考(图ZMTU2NDY3Njg=) - 观点 - 站酷设计师故事熊原创素材 - 站酷ZCOOL
设置页
收藏
设计归设计,开发归开发
在设计稿中,理想总是很丰满,但是在开发上不免遇到问题。
显示与渲染问题
阴影的显示问题:例如在真实的上线设计中,我还是去掉了阴影,保留卡片样式的不同切换透明度:避免在诸多不同分辨率、尺寸的机型上因为内存原因而显示不完整,或者再切换模式的时候渲染图片而产生的不跟手的问题。
开发速度的问题
设计稿与真实的设计的差距:如果需要做到 1:1 精确设计稿还原,如果你使用AI辅助编码,则需要理解与精确调整。对于一个人的独立开发者而非团队来说,“小步快跑,大步迭代”则是必须,否则就会被落下,尤其是对于类似系统工具的第三方工具来说。
例如,在最近一次华为推送的更新(6.1.0.125 SP9)中,官方的系统相册出现了“智能清理功能”。
鸿蒙版效率相册的平板适配设计思考(图ZMTU2NDY3NzI=) - 观点 - 站酷设计师故事熊原创素材 - 站酷ZCOOL
最近一次华为推送的更新(6.1.0.125 SP9)
收藏
而效率相册的宗旨是,通过提升效率的功能,带给用户更加智能的相册操作与浏览体验。
下一步,效率相册将会接入更多鸿蒙特性,进行更加智能化的交互,持续提升效率与优化方向。
最后 & 我的其他产品
欢迎大家与我一起交流讨论在平板设计上的思考和想法。
我的其他产品目前也均是鸿蒙端产品:
城探:会在剩余时间不断迭代。在近期发布了1.0.1版本的更新,可以扫描与导入本地音乐了。城探是一款致力于做你的“出行伙伴”,拥有多款便捷操作工具。
DayTrace:一款支持插入事件进展与心情的日记App,可以跟进事件进展,以及每日的消费记录,支持闪控球记录。
鸿蒙版效率相册的平板适配设计思考(图ZMTU2NDY3NzY=) - 观点 - 站酷设计师故事熊原创素材 - 站酷ZCOOL
我的“城探”、“DayTrace”
收藏
  1. 目前是独立开发,还在寻找主业中
  2. 没有专门的设计帮我,一个人管理三款产品也是精力有限
0
举报
|
收藏
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
森系3D渐变流体抽象矢量UI背景图
【新年UI图标】相机icon
手表表盘UI系列
高级表盘系列UI源文件
【新年UI图标】美食icon
【新年UI图标】礼物/活动icon
钱包ui模板
【新年UI图标】活动icon
【新年UI图标】积分icon
UI应用平面图标
智能家居中心 简约 UI设计组件库
UI界面 组件
盲盒APP UI设计
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
新能源APP应用UIKit
UI 登录界面设计模板包
【新年UI图标】体育icon
新拟态风格 UI设计组件库
我的钱包-UI界面设计-app
APP/小程序商业项目UI模板|99个高保真UI+79个原型
【新年UI图标】银行卡icon
Security Camera UI kit
高级感金属拟物 UI设计组件库
你可能喜欢
相关收藏夹
地产VI
地产VI
地产VI
地产VI
大家都在看
登录注册