「一刻相冊」是如何從零開始設(shè)計出來的?
發(fā)布時間:2022-01-25 10:17 [ 我要自學網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175 閱讀: 3667


項目背景


隨著手機拍攝能力和通訊行業(yè)的不斷發(fā)展,使用手機拍照已經(jīng)成為人們的一種生活習慣,在這個每天都要拍攝、查看、接收、存儲、發(fā)送照片,以及手機里大部分的內(nèi)存都貢獻給了相冊的今天,一款釋放手機內(nèi)存,免費大容量且安全好用的相冊產(chǎn)品顯得刻不容緩。

一刻相冊是百度網(wǎng)盤打造的一款安全備份,無限空間的應(yīng)用。百度網(wǎng)盤作為國內(nèi)云存儲服務(wù)的先行者,利用自身存儲優(yōu)勢和公司的AI技術(shù),孵化出一刻相冊產(chǎn)品,致力于幫助用戶守護美好回憶,同時提供給用戶更優(yōu)質(zhì)的照片存儲體驗。


設(shè)計目標


在著手設(shè)計之前,首先要制定設(shè)計的目標,設(shè)計目標一般是由產(chǎn)品的定位、用戶群體、產(chǎn)品未來愿景等等方面推導(dǎo)而來。

明確了一刻相冊的產(chǎn)品定位及未來愿景后,再結(jié)合著產(chǎn)品功能層面所滿足的除了備份訴求,同時還包含著全流程的管理-消費-分享。圍繞著這些背景,經(jīng)過多輪討論…

大廠實戰(zhàn)!上億人使用的百度「一刻相冊」是如何從零開始設(shè)計出來的?

最終,設(shè)計和產(chǎn)品同學達成一致,希望傳遞給一刻用戶除了最基礎(chǔ)的安全感知以外,還有3個核心點:高效;智能;有趣。

大廠實戰(zhàn)!上億人使用的百度「一刻相冊」是如何從零開始設(shè)計出來的?

1. 高效

大家對「好的產(chǎn)品是用完即走的」這句話并不陌生,尤其是體現(xiàn)在垂類工具產(chǎn)品上。

對于相冊產(chǎn)品而言,我們對設(shè)計流程上的首要目標,就是讓用戶:高效備份;便捷查找;快速消費。

大廠實戰(zhàn)!上億人使用的百度「一刻相冊」是如何從零開始設(shè)計出來的?

高效備份

滿足用戶自動備份,已經(jīng)是相冊類產(chǎn)品最基礎(chǔ)的能力,那么我們在此基礎(chǔ)上,如何讓用戶毫無顧慮的進行高效備份呢?

除了足夠安全和好用以外,就是讓用戶沒有空間限制的顧慮。一刻相冊就是這樣一款神仙相冊產(chǎn)品,免費贈送無限大空間,讓用戶不用擔心容量壓力的盡情保存美好回憶。

在用戶首次登錄后,第一個頁面展示給用戶的信息就是:「已獲得無限空間」,讓用戶沒有容量不夠的顧慮。

在視覺上用莫比烏斯環(huán)無窮符號「∞」為基本圖形,同時在文案上突出一刻相冊的核心功能亮點。

大廠實戰(zhàn)!上億人使用的百度「一刻相冊」是如何從零開始設(shè)計出來的?

當用戶點擊「開啟備份」后,進入一刻相冊首頁的「照片」tab時,可實時看到已經(jīng)備份的照片。

同時,設(shè)計上采用置頂卡片的處理方式,讓用戶更高效、直觀的對「備份」文件狀態(tài)的感知及控制。

大廠實戰(zhàn)!上億人使用的百度「一刻相冊」是如何從零開始設(shè)計出來的?

除了之外,由于一刻和百度網(wǎng)盤的特殊關(guān)系,我們還支持用戶將網(wǎng)盤已經(jīng)備份過的圖片或視頻,一鍵導(dǎo)入到一刻相冊。

并且支持后臺靜默導(dǎo)入和內(nèi)容實時更新,大大降低了用戶在切換存儲工具時的遷移成本,為用戶節(jié)省了手動操作的時間。

在視覺表現(xiàn)上,我們將導(dǎo)入進度采用圓環(huán)進度的方式,讓用戶更清晰的感知到目前的導(dǎo)入照片進度,增強用戶的安全感。

大廠實戰(zhàn)!上億人使用的百度「一刻相冊」是如何從零開始設(shè)計出來的?

便捷查找

當用戶將自己照片備份上來后,如何滿足用戶更便捷的查找到目標照片,是我們面臨的第二個問題,因此,在「便捷查找」方面,我們分為幾個維度去做:照片瀏覽;相冊創(chuàng)建。

照片瀏覽:瀏覽是用戶「查找」照片的必經(jīng)之路,為了提升用戶的瀏覽體驗及效率,我們采用時光軸的形式進行排序,同時在視圖方面,也做了多種嘗試,如下圖:

大廠實戰(zhàn)!上億人使用的百度「一刻相冊」是如何從零開始設(shè)計出來的?

  • 方案A:保持每張圖片的實際比例,通過合理計算將2或3張圖排成一排,視覺效果不錯,但開發(fā)成本較高,無法快速上線(類似google photo);
  • 方案B:全部內(nèi)容使用同一比例、同一大小的區(qū)域進行限制,優(yōu)點是產(chǎn)品布局緊湊整潔,但也容易讓用戶忽略可能有價值的信息;方案C:類似dropbox,顯示真實圖片比例,空間的利用率會較低。

最終,我們基于用戶使用訴求和對相冊產(chǎn)品的調(diào)研,選擇了保持相冊內(nèi)容的比例統(tǒng)一,但對可動的livephoto及視頻內(nèi)容進行突出放大展示,并默認進行播放,這樣既滿足了效率問題,又讓瀏覽體驗更有節(jié)奏感,同時也兼顧了開發(fā)成本。

大廠實戰(zhàn)!上億人使用的百度「一刻相冊」是如何從零開始設(shè)計出來的?

同時,用戶可以輕松切換所要瀏覽的圖片內(nèi)容,分為云端+本地,僅云端,僅本地三個顯示模式,給用戶不同瀏覽維度的選擇,滿足更便捷查找的目的。

大廠實戰(zhàn)!上億人使用的百度「一刻相冊」是如何從零開始設(shè)計出來的?

相冊創(chuàng)建:除了Feed形式的「時光軸」, 能夠提升用戶查找效率的方式,其次就是建立相冊,讓相似圖片更加聚合。

因此,一刻相冊的相冊模式支持:自動生成;手動創(chuàng)建。

自動生成。為了減少用戶的操作成本,同時提升查找效率,我們對用戶已上傳的文件進行智能分類,將主流的分類分為:人物、事物、地點、截圖、動圖、證件、視頻維度,提升用戶查找效率。

大廠實戰(zhàn)!上億人使用的百度「一刻相冊」是如何從零開始設(shè)計出來的?

手動創(chuàng)建。不可否認,再牛逼的技術(shù),也做不到用戶對自己的了解,因此一刻相冊同樣支持手動創(chuàng)建相冊功能。

為了使建立相冊的流程的交互操作盡量做到輕量化,整個創(chuàng)建閉環(huán)無必填項,可輕松進行創(chuàng)建。

同時用戶在當前頁面可整體通過「圖片庫」和「人物」完成添加照片流程。

大廠實戰(zhàn)!上億人使用的百度「一刻相冊」是如何從零開始設(shè)計出來的?

如果用戶點擊「按人物添加」,基于百度強大的人臉識別能力,一刻相冊可生成人臉聚類,用戶可快速通過人物創(chuàng)建相冊,不需要一張張去選,從而便捷的創(chuàng)建滿足自己查找習慣的相冊。

快速消費

當滿足了用戶高效備份、便捷查找之后,如何能夠使用戶能在一刻相冊里玩兒起來,是每一個一刻相冊同學都在思考的問題。

針對這一訴求,大家探索了很多可能性,在初期我們選擇了不同的時間節(jié)點和節(jié)假日,推出不同的創(chuàng)意模板,讓用戶將自己的照片在這里玩兒起來。

大廠實戰(zhàn)!上億人使用的百度「一刻相冊」是如何從零開始設(shè)計出來的?

為了增強功能操作的簡潔度,跟市面上的視頻產(chǎn)品形成差異化,在選擇模板時,我們依舊采用卡片式的視覺容器承載模板內(nèi)容,視頻可以自動播放預(yù)覽,整體背景顏色應(yīng)用5種品牌輔助色,背景顏色跟隨手勢的上下滑動切換,帶給用戶更加直觀沉浸的操作感受。

大廠實戰(zhàn)!上億人使用的百度「一刻相冊」是如何從零開始設(shè)計出來的?

當用戶點擊制作同款后,用戶只需在對應(yīng)的時間段內(nèi),選擇相應(yīng)的視頻,就能生成酷酷的卡點視頻。

大廠實戰(zhàn)!上億人使用的百度「一刻相冊」是如何從零開始設(shè)計出來的?

為避免用戶在等待生成視頻時的焦慮情緒,我們提供了多種情感化文案來消除等待的焦慮感,在高效的同時關(guān)注用戶情緒。

大廠實戰(zhàn)!上億人使用的百度「一刻相冊」是如何從零開始設(shè)計出來的?

同時,進度條采用蒙層的方式,將進度可視化,用戶會更關(guān)注去掉蒙層后的作品,產(chǎn)生期待感。

2. 智能

其實在相冊類產(chǎn)品同質(zhì)化的今天,基礎(chǔ)體驗(備份照片、瀏覽等)已經(jīng)拉不開太大差距。因此,一刻相冊在保證基礎(chǔ)體驗的基礎(chǔ)上,引入「小度助手」提供給用戶更加智能化、場景化的體驗。

小度出場的形式,采用簡潔清爽的頁面風格,使用戶聚焦到「小度」本身,采用「小度」眨眼睛的動效,更傳遞出它的靈動性。

大廠實戰(zhàn)!上億人使用的百度「一刻相冊」是如何從零開始設(shè)計出來的?

那么,小度到底怎么「智能」了呢?目前我們做了:a.智能化清理;b.智能化生成。

大廠實戰(zhàn)!上億人使用的百度「一刻相冊」是如何從零開始設(shè)計出來的?

智能化清理

相信大家在使用本地相冊時也會被一個問題困擾:平時工作或者某些特定場景下的截圖過多;自拍時一個動作連續(xù)拍攝很多張… 如果用戶手動將自己相冊內(nèi)這些照片找出,再去刪除,費時又費力。

那么針對此場景,小度提供多種清理能力,包括:清理截圖、清理相似圖、清理本地圖片。

大廠實戰(zhàn)!上億人使用的百度「一刻相冊」是如何從零開始設(shè)計出來的?

清理模塊在交互形式上,以效率為最高優(yōu)先級,同時增強用戶清理圖片時的趣味性和成就感。

具體做法是,將待清理圖片以日維度,分成一個個模塊,而后形成清理圖片的瀑布流,當用戶一個個去完成清理操作后,將會獲得完成任務(wù)的成就感。

大廠實戰(zhàn)!上億人使用的百度「一刻相冊」是如何從零開始設(shè)計出來的?

不僅如此,小度如果發(fā)現(xiàn)你相冊里存儲某人的照片過多,會智能化的引導(dǎo)你去標注關(guān)系,為了后續(xù)更方便的管理自己照片。

大廠實戰(zhàn)!上億人使用的百度「一刻相冊」是如何從零開始設(shè)計出來的?

智能化生成

除了上面有提到用戶可以使用視頻模板,手動制作趣味短片,小度還可以針對用戶存儲的照片,智能的生成許多有趣的視頻,給用戶帶來不期而遇的驚喜感。

大廠實戰(zhàn)!上億人使用的百度「一刻相冊」是如何從零開始設(shè)計出來的?

大廠實戰(zhàn)!上億人使用的百度「一刻相冊」是如何從零開始設(shè)計出來的?

當然小度的智能化能力我們在不斷的完善中,同時我們希望給用戶傳遞的「智能化」不是冰冷的技術(shù)感,而是「溫馨」的關(guān)懷感知。
因此,在小度問候的文案和表情上我們做了場景化處理,用戶在不同時間段進來,都能感受到我們的關(guān)懷。

大廠實戰(zhàn)!上億人使用的百度「一刻相冊」是如何從零開始設(shè)計出來的?

3. 有趣

除了在存儲和查找時讓用戶感受到「高效」和「智能」,如何讓用戶感受到一刻還是個很有趣的相冊產(chǎn)品呢?我們分為兩個維度來看:a.功能層面;b.品牌視覺。

大廠實戰(zhàn)!上億人使用的百度「一刻相冊」是如何從零開始設(shè)計出來的?

功能層面

試想一個場景,你和媽媽一起出去玩拍了很多照片,你媽想讓你把照片發(fā)給她,這時候你打開WX將今天拍攝的50張照片分為6次發(fā)給了媽媽,后來又發(fā)現(xiàn)點的不是原圖(手動圍笑),這個時候的你一定氣的鼓鼓的。

一刻相冊利用NFC技術(shù),為用戶提供「碰一碰」傳照片的形式。利用有趣的方式,解決用戶這種痛點,用戶只需要線下碰一下手機(支持跨端),就可以直接發(fā)送無限量、原圖的照片給對方。

大廠實戰(zhàn)!上億人使用的百度「一刻相冊」是如何從零開始設(shè)計出來的?

當用戶進入「碰一碰」頁面,有動畫進行引導(dǎo),同時發(fā)出像干杯一樣的杯子碰撞的聲音,使用戶發(fā)照片像干杯一樣簡單。

大廠實戰(zhàn)!上億人使用的百度「一刻相冊」是如何從零開始設(shè)計出來的?

從交互層面出發(fā),碰一碰涉及到線下體驗與線上體驗聯(lián)動:首先保證線下體驗的一致性,比如:碰撞、匹配、反饋都都需要具有實時性和流暢性。

大廠實戰(zhàn)!上億人使用的百度「一刻相冊」是如何從零開始設(shè)計出來的?

因此,通過這種有趣的產(chǎn)品形態(tài)和交互形式,使用戶在傳圖的場景中更加輕松、便捷(不過,目前落地效果還在持續(xù)優(yōu)化中)。

品牌視覺

眾所周知,相冊記錄著人們生活的點點滴滴,平淡真實。

但是一刻相冊slogan是 「看見每一刻」 ,體現(xiàn)出我們不僅希望幫助用戶存儲回憶,更希望運用科技的力量幫助用戶將平淡的生活點滴,智能生成有趣的內(nèi)容推薦給用戶,使美好回憶與自己不期而遇,讓用戶在一刻相冊里回顧自己精彩、有趣的每一刻。

基于整個品牌定位,在LOGO設(shè)計階段,圍繞一刻相冊名稱 「 一 」 和 slogan 中的「看見( 眼睛 )」來代表一刻。

在顏色的選取上使用了多彩漸變色,傳遞看見多彩有趣的生活品牌理念,同時能夠與其它相冊產(chǎn)品拉開差異化。

大廠實戰(zhàn)!上億人使用的百度「一刻相冊」是如何從零開始設(shè)計出來的?

大廠實戰(zhàn)!上億人使用的百度「一刻相冊」是如何從零開始設(shè)計出來的?

在LOGO設(shè)計確定后,通過從LOGO中提取出多彩漸變的色調(diào),發(fā)現(xiàn)占比最大的是:藍色、紫色、粉色。

但是,粉色過于女性化,而藍色過于冷靜,同時跟競品也很難拉開差距,而紫色代表著個性、創(chuàng)造力和想象力,象征實驗精神與不墨守成規(guī),更符合我們的產(chǎn)品定位。

因此,最終提煉定義了紫色,成為我們的主品牌色。

大廠實戰(zhàn)!上億人使用的百度「一刻相冊」是如何從零開始設(shè)計出來的?

繼而將我們的主色滲透在產(chǎn)品界面、操作組件以及空頁面中…

大廠實戰(zhàn)!上億人使用的百度「一刻相冊」是如何從零開始設(shè)計出來的?

大廠實戰(zhàn)!上億人使用的百度「一刻相冊」是如何從零開始設(shè)計出來的?

同時,將LOGO里其它多彩的顏色:藍色、紅色、黃色和綠色,作為產(chǎn)品的輔助色,希望通過品牌色(主品牌色、子品牌色)應(yīng)用,加深用戶的品牌印象。

大廠實戰(zhàn)!上億人使用的百度「一刻相冊」是如何從零開始設(shè)計出來的?

在icon上,也經(jīng)過反復(fù)的嘗試采用4px粗細,用盡量極簡的方式概括表意,達到表意清晰,輕量簡潔的目的。

大廠實戰(zhàn)!上億人使用的百度「一刻相冊」是如何從零開始設(shè)計出來的?

作為一次從0-1的一刻相冊產(chǎn)品設(shè)計,我們希望能夠傳遞給用戶的不僅高效、好用,而且年輕、多彩、有趣的視覺感知。

大廠實戰(zhàn)!上億人使用的百度「一刻相冊」是如何從零開始設(shè)計出來的?


總結(jié)


以上是一刻相冊從0-1的產(chǎn)品設(shè)計背后的過程,從前期的設(shè)計目標的確認(高效、智能、有趣),到后續(xù)拆解到不同維度進行功能設(shè)計落地,從而呈現(xiàn)給用戶目前一刻相冊這個產(chǎn)品,目的是為了不僅讓用戶安全便捷的「存」,還能智能有趣「用」。

大廠實戰(zhàn)!上億人使用的百度「一刻相冊」是如何從零開始設(shè)計出來的?

一刻相冊是網(wǎng)盤團隊所有同學共同努力的結(jié)果,所以只是開始,未來我們將為用戶持續(xù)打造更優(yōu)質(zhì)的相冊產(chǎn)品,來守護你們的回憶 。

版式設(shè)計視頻教程
我要自學網(wǎng)商城 ¥60 元
進入購買
文章評論
0 條評論 按熱度排序 按時間排序 /350
添加表情
遵守中華人民共和國的各項道德法規(guī),
承擔因您的行為而導(dǎo)致的法律責任,
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設(shè)計 室內(nèi)設(shè)計 室外設(shè)計 機械設(shè)計 工業(yè)自動化 影視動畫 程序開發(fā) 網(wǎng)頁設(shè)計 會計課程 興趣成長 AIGC