赞助商
立即赞助

大厂实战!上亿人使用的百度「一刻相册」是如何从零开始设计出来的?

交互设计3年前 (2021)发布 流光
2.7K 0 0

项目背景

随手机拍摄能力通讯行业的不断发展,使用手机拍照已人们的一种活习惯,这每天都拍摄、查看、接收、存储、发送照片,以及手机里部分的内存都贡献给了相册的今天,一款释手机内存,免费且安全好用的相册产品显得刻不缓。

一刻相册百度网盘打造的一款安全备份,无限空间的应用。度网盘作内云存储服务的先行者,利用自身存储优势公司的AI技,孵化出一刻相册产品,致力于帮用户守护好回忆,同时提供给用户优质的照片存储体验。

设计目标

手设之,首先制设的目标,设目标一般由产品的、用户群体、产品未愿景方面推导。

明确了一刻相册的产定位及未来愿景后,再结合着产功层面满足的除了备份诉求,同时还包含着全流程的管-消-分享。围绕着这些背景,经过多轮讨论…

大厂实战!上亿人使用的百度「一刻相册」是如何从零开始设计出来的?

最终,设计和产同达成一致,希望传递给一刻户除了最基础的全感知外,还有3个核心点:效;智;有趣。

大厂实战!上亿人使用的百度「一刻相册」是如何从零开始设计出来的?

1. 高效

家对「好的产品用完即走的」这句话并不陌,尤其体垂类具产品。

对于相册产而言,我们对设计流程上的首要目标,就是户:效备份;捷查;快速消。

大厂实战!上亿人使用的百度「一刻相册」是如何从零开始设计出来的?

高效备份

满足用户自动备份,已相册类产品基础的能力,那么我们此基础,如何让用户毫无顾虑的行高效备份呢?

除了足够全和好外,就是户没有空间限制的顾虑。一刻相册就是这样一款神仙相册产,免赠送无限大空间,户担心容量压的尽情保存美好忆。

在用户首次登录,一个页面展示给用户的信息就是:「已获得无空间」,让用户没有容量不够的顾虑。

在视觉上用莫比乌斯环无穷符号「∞」为基本图形,同在文案上突出一刻相册的核心功能亮点。

大厂实战!上亿人使用的百度「一刻相册」是如何从零开始设计出来的?

当用户点击「开启备」后,进入一刻相册首页的「照片」tab,可实已经备的照片。

时,设计上采用顶卡片处理,让用户更高效、观「备份」文件状态感知及控制。

大厂实战!上亿人使用的百度「一刻相册」是如何从零开始设计出来的?

除了,由于刻和百度网盘特殊关系,我们支持用户将网盘已经备份过图片或视频,键导入到刻相册。

并且支持后台静默导入内实时新,降低了用户切换存储具时的迁移本,用户节省了手动操作的时间。

在视觉表现上,我们将导入进采圆环进的方式,户更清晰的感知到目前的导入照片进,增强户的全感。

大厂实战!上亿人使用的百度「一刻相册」是如何从零开始设计出来的?

便捷查找

当用户将自己照片备份后,如何满足用户便捷的查找到目标照片,我们面临的第二问题,因此,「便捷查找」方面,我们分几维度去:照片浏览;相册创建。

照片浏览:浏览是用户「查找」照片的必经之路,为了提升用户的浏览体验及效率,采用光轴的形式进行排序,同在视图方面,也做了多种尝,如下图:

大厂实战!上亿人使用的百度「一刻相册」是如何从零开始设计出来的?

  • 方案A:保持每张图片的实际例,通过合计算将2或3张图成一,视觉效果错,但开发成本较,无法快速上线(类似google photo);
  • 方案B:部内容使用同一比例、同一大小的区域进行,优点是产品局紧凑整洁,但也容易让用户忽略能有价值的信息;方案C:类似dropbox,显示图比例,空间的用率低。

最终,我们基于户使诉求和对相册产的调研,择了保持相册容的例统一,但对可的livephoto及视频容进行突放大展示,并默认进行播放,这样既满足了效率问题,又浏览体验更有节奏感,同时兼顾了开发成本。

大厂实战!上亿人使用的百度「一刻相册」是如何从零开始设计出来的?

同时,户可轻松切换要浏览的图片容,分为端+本地,仅端,仅本地个显示模式,给户同浏览维的择,满足更捷查的目的。

大厂实战!上亿人使用的百度「一刻相册」是如何从零开始设计出来的?

相册创建:除了Feed形式的「光轴」, 能够提升用户查找效率的方式,其次就是建立相册,让相似图片更加聚。

此,刻相册相册模支持:自动生成;手动创。

自动生成。为减少用户的操成,同时提升查找效率,我们对用户已上传的文件进行智能分类,将主流的分类分为:人物、物、地点、截图、动图、证件、视频度,提升用户查找效率。

大厂实战!上亿人使用的百度「一刻相册」是如何从零开始设计出来的?

手创建。不可否认,再逼技术,也做不到用户自己了解,此刻相册样支持手动创相册功能。

了使建立相册的流程的交互操作尽到轻化,整创建闭环无必填项,可轻松行创建。

同时户在当前页面可整体通过「图片库」和「人物」成添照片流程。

大厂实战!上亿人使用的百度「一刻相册」是如何从零开始设计出来的?

如果户点击「按人物添」,基于百强大的人脸识别,一刻相册可生成人脸聚类,户可快速通过人物创建相册,需要一张张,从而捷的创建满足自己查习惯的相册。

快速消

当满足了户效备份、捷查之后,如何够使户在一刻相册里玩起来,是每一个一刻相册同都在思考的问题。

针对一诉求,大家探索很能,在初期我们选择不同的时间节点和节假,推出不同的创意模板,让用户将自己的照在里玩儿来。

大厂实战!上亿人使用的百度「一刻相册」是如何从零开始设计出来的?

为增强功能操的简洁度,跟市面上的视频产品形成差异化,在选择模板时,我们依旧采用卡式的视容器承载模板内容,视频以自动播放预览,整背颜应用5种品牌辅助,背颜跟随手势的上下滑动切换,带给用户更加直观沉浸的操感受。

大厂实战!上亿人使用的百度「一刻相册」是如何从零开始设计出来的?

当用户点击同款,用户只需在对应的时间段内,选择相应的视频,就能生成酷酷的卡点视频。

大厂实战!上亿人使用的百度「一刻相册」是如何从零开始设计出来的?

为避免用户在等待生成视频时的焦虑情绪,我们提供种情感化文案来消除等待的焦虑感,在高效的同时关注用户情绪。

大厂实战!上亿人使用的百度「一刻相册」是如何从零开始设计出来的?

同时,进度条采用蒙的方式,将进度视化,用户更关注去掉蒙的品,产生期待感。

2. 智能

其在相册类产品同质化的今天,基础验(备份照、浏览等)已经拉不开太大差距。因此,一刻相册在证基础验的基础上,引「小度助手」提供给用户更加智能化、场化的验。

度出的形式,采用简洁清爽的页面风格,使用户聚焦「度」本身,采用「度」眨眼睛的动效,更传递出它的灵动性。

大厂实战!上亿人使用的百度「一刻相册」是如何从零开始设计出来的?

那,度底怎「智能」了呢?目前做了:a.智能化清理;b.智能化生成。

大厂实战!上亿人使用的百度「一刻相册」是如何从零开始设计出来的?

智能化清理

相信大家在使用地相册时也被一个问题困扰:平时工或者某特定场下的截图;自拍时一个动连续拍摄很… 果用户手动将自己相册内照找出,去删除,费时又费力。

那针对此景,度提供多种清理能力,包括:清理截图、清理相似图、清理本地图片。

大厂实战!上亿人使用的百度「一刻相册」是如何从零开始设计出来的?

清理模块在交互形式上,以效率为最高优先,同增用户清理图片的趣味性和成就。

具体做法是,将待理图片以日维度,分成个个模块,而后形成理图片瀑布流,用户个个去完成理操作后,将会获完成任务成感。

大厂实战!上亿人使用的百度「一刻相册」是如何从零开始设计出来的?

不仅如此,小度如发现你相册里存储某照片过多,会智能化引导你去标注关系,为了后续更便管理自己照片。

大厂实战!上亿人使用的百度「一刻相册」是如何从零开始设计出来的?

智能化生成

除了上面有提用户可以使用视频模板,动制作趣味短片,度还可以针对用户存储的照片,智能的生成许多有趣的视频,给用户带来不期而遇的惊喜。

大厂实战!上亿人使用的百度「一刻相册」是如何从零开始设计出来的?

大厂实战!上亿人使用的百度「一刻相册」是如何从零开始设计出来的?

当小度的智能化能力我们在不断的完善中,同时我们希望给用户传递的「智能化」不是冰冷的技术感,而是「温馨」的关怀感。
因此,小度问候的文案表我们了场景化处理,用户不同时间段,都能感受到我们的关怀。

大厂实战!上亿人使用的百度「一刻相册」是如何从零开始设计出来的?

3. 有趣

除了在存储和查找时让用户感受到「高效」和「智能」,如何让用户感受到刻是个很有趣相册品呢?我们分为两个维度来看:a.功能层;b.品视觉。

大厂实战!上亿人使用的百度「一刻相册」是如何从零开始设计出来的?

功能层面

想一个景,你和妈妈一起出去玩拍了多照片,你妈想让你把照片发给她,这候你开WX将今拍摄的50张照片为6次发给了妈妈,后来发现点的不是图(动围笑),这个候的你一定气的鼓鼓的。

刻相册利用NFC技术,为用户提供「碰碰」传照片形。利用有趣,解决用户这痛,用户需要线下碰下手(支持跨端),可以接发送限量、原图照片。

大厂实战!上亿人使用的百度「一刻相册」是如何从零开始设计出来的?

用户进入「碰碰」页,有动画进引导,时发出像干杯样杯子碰撞声音,使用户发照片像干杯样简单。

大厂实战!上亿人使用的百度「一刻相册」是如何从零开始设计出来的?

从交互层出发,碰碰涉及到线下体验与线上体验联动:首先保证线下体验致性,比如:碰撞、匹配、反馈都都需要具有实时性和流畅性。

大厂实战!上亿人使用的百度「一刻相册」是如何从零开始设计出来的?

此,过这有趣品形态和交互形,使用户在传图场景更加轻松、便捷(不过,目前落地效在持续优化)。

品视觉

众所知,相册记录着们生活滴滴,平淡真实。

但一刻相册slogan 「看见每一刻」 ,体出我们不仅希望帮用户存储回忆,希望运用科技的力帮用户将平淡的活点滴,智能趣的内推荐给用户,使好回忆与自己不遇,让用户一刻相册里回顾自己精彩、趣的每一刻。

基于整个牌定位,在LOGO设计阶,围绕一刻相册名称 「 一 」 和 slogan 中的「看见( 眼睛 )」来代表一刻。

在颜的选取上使用彩渐变,传递看见彩有趣的生活品牌理念,同时能够与其它相册产品拉开差异化。

大厂实战!上亿人使用的百度「一刻相册」是如何从零开始设计出来的?

大厂实战!上亿人使用的百度「一刻相册」是如何从零开始设计出来的?

在LOGO设计确定后,通过从LOGO中取多彩渐变的色调,发现占最大的是:蓝色、紫色、粉色。

但是,粉女化,而蓝冷静,同时跟竞品也很难拉开差距,而紫代表着个、创造力和想象力,象征验精神与不墨守成规,更符合我们的产品定位。

因此,最终提炼定义了紫色,成为的主品牌色。

大厂实战!上亿人使用的百度「一刻相册」是如何从零开始设计出来的?

继而将的主色渗透在产品界面、操作组件以及空页面中…

大厂实战!上亿人使用的百度「一刻相册」是如何从零开始设计出来的?

大厂实战!上亿人使用的百度「一刻相册」是如何从零开始设计出来的?

同时,将LOGO里其它彩的颜:蓝、红、黄和绿,为产品的辅助,希望通品牌(主品牌、子品牌)应用,加深用户的品牌印象。

大厂实战!上亿人使用的百度「一刻相册」是如何从零开始设计出来的?

在icon上,也经反复的尝试采用4px粗细,用尽量极简的方式概括表意,达到表意清晰,轻量简洁的目的。

大厂实战!上亿人使用的百度「一刻相册」是如何从零开始设计出来的?

为一次从0-1的一刻相册产品设计,我们希望够传递给户的仅效、好,而且年轻、多彩、有趣的视觉感知。

大厂实战!上亿人使用的百度「一刻相册」是如何从零开始设计出来的?

总结

以一刻相册从0-1的产品设背后的过程,从的设目标的确认(高效、智能、趣),到后续拆解到不同维度行功能设落,从呈给用户目一刻相册这产品,目的了不仅让用户安全便捷的「存」,还能智能趣「用」。

大厂实战!上亿人使用的百度「一刻相册」是如何从零开始设计出来的?

一刻相册网盘团队所同学共同努力的结果,所以只始,未我们将用户持续打造优质的相册产品,守护们的回忆 。

欢迎关注作者的微信公众:「牙的设笔记」

大厂实战!上亿人使用的百度「一刻相册」是如何从零开始设计出来的?

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

编者按:不论你是UI设计师还是UX设计师,是产品经理还是营销专员,你都很想搞清楚如何影响用户行为吧?这次的文章就告诉你三...
Adam Fard
对于交互设计师来说,在工作中接到的需求大致可以分为两大类:一类是新需求(从 0 到 1),另一类是对现有的产品优化。 针对...
交互流程
本文作者通过对产品开发三原则模型:商业可行性、技术可能性、用户期望值的分析,来说明其对于产品设计产生的价值。 一. 什么...
产品开发三原则
2019年农历春节就要到了,各大互联网平台的红包大战也正式拉开帷幕。作为腾讯旗下深度运营年轻用户的QQ,被赋予了更多娱乐社...
QQ游园会
以下是百度网盘UE团队近期对会员中心体验进行优化,希望对大家做商业化产品有所帮助。 项目背景 会员中心是承载着产品增值...
产品改版
在做任何产品之前,都会先想好受众群体。但产品上线后发现,预设好的用户群体好像并不买单,比如很多新产品都变成了现象级产...
产品设计
Persona,在国内通常被称为「用户画像」,其概念最初由 Alan Cooper 在 1999 年提出[1]。由于用户画像具备帮助人们在设计过程...
产品设计
关于设计师的职位和头衔,设计行业的从业者是非常在意,也经常讨论的。在过去的几十年当中,交互设计领域经历了一系列的变化...
产品设计