蛻變.進(jìn)化——百度云Android端7.0項(xiàng)目總結(jié)

4 評(píng)論 16357 瀏覽 37 收藏 10 分鐘

項(xiàng)目背景:

百度云面世之初是一款網(wǎng)盤類產(chǎn)品,以安全、穩(wěn)定、易用、快速的體驗(yàn)著稱,經(jīng)歷近兩年時(shí)間的升級(jí)優(yōu)化,百度云已不僅僅只是“網(wǎng)盤”了,在慢慢的朝著平臺(tái)化的方向不斷發(fā)展。
舊版的Android客戶端隨著每一次版本的更新, 承載的信息越來越多、功能越來越豐富,原有的框架設(shè)計(jì)已不能有層次的優(yōu)雅的支持現(xiàn)有的產(chǎn)品功能了。
因此,本次7.0版本需要重新構(gòu)建一個(gè)優(yōu)雅的能夠很好的支持現(xiàn)有多樣功能的產(chǎn)品框架,在視覺設(shè)計(jì)上讓框架更加輕量化,讓風(fēng)格向情感化傾斜。

設(shè)計(jì)方向探索:

問題分析:

1.框架結(jié)構(gòu)層次不清晰,擴(kuò)展性不好。

2.產(chǎn)品中增加了好友間的資源分享功能,需要重點(diǎn)考慮突出。

3.除網(wǎng)盤外,對(duì)于相冊(cè)、短信等五項(xiàng)手機(jī)數(shù)據(jù)備份、閃電互傳文件、遠(yuǎn)程設(shè)備任務(wù)推送等實(shí)用強(qiáng)大的功能被隱藏在“工具包”中,沒有分類包裝且也不夠顯性。

4.視覺上需要進(jìn)一步突出風(fēng)格特征。

競(jìng)品分析:

由于產(chǎn)品的平臺(tái)化發(fā)展特性,我們選取了Naver、Evernote等平臺(tái)化產(chǎn)品進(jìn)行了分析:

Naver
Evernote


總結(jié)出一些產(chǎn)品上的共性特點(diǎn):
1. 核心功能突出,輔助功能入口統(tǒng)一。

2. 信息層級(jí)清晰,架構(gòu)層級(jí)扁平化。

3. 設(shè)計(jì)風(fēng)格跨平臺(tái)高度統(tǒng)一 。


另外,我們還參考了當(dāng)下流行的視覺設(shè)計(jì)趨勢(shì):

設(shè)計(jì)趨勢(shì)

總結(jié)出以下設(shè)計(jì)原則:
1. 扁平化設(shè)計(jì),內(nèi)容優(yōu)先

2. 區(qū)域色塊化,核心內(nèi)容集中突出

3. 情感化設(shè)計(jì),拉近用戶與產(chǎn)品的距離

 

設(shè)計(jì)方向確定與實(shí)施:

交互設(shè)計(jì):

根據(jù)對(duì)現(xiàn)有問題的分析與內(nèi)在需求的挖掘,我們進(jìn)行了頭腦風(fēng)暴,提煉出了新版本的設(shè)計(jì)目標(biāo):結(jié)構(gòu)合理、突出人和分享、擴(kuò)展性、體驗(yàn)友好。

設(shè)計(jì)目標(biāo)

由于功能繁多,但需要直觀呈現(xiàn)的內(nèi)容卻不少,我們?cè)谠O(shè)計(jì)初期產(chǎn)出了三種交互框架:

框架1
框架2

第一種:側(cè)邊欄框架結(jié)構(gòu),這種框架的優(yōu)點(diǎn)是擴(kuò)展性強(qiáng),且主要功能突出,但其他功能相對(duì)太隱藏,不容易被發(fā)現(xiàn),用戶切換到某一子功能后很可能迷失方向無法返回之前的頁面。

Drawer

第二種: 宮格導(dǎo)航結(jié)構(gòu),這種框架的優(yōu)點(diǎn)在于功能模塊化,一目了然,并且也擁有一定的擴(kuò)展性與自定義特性,但是作為一個(gè)APP來說,若不同功能之間銜接緊密,免不了需要進(jìn)行功能間的反復(fù)跳轉(zhuǎn),此時(shí)這種交互方式的劣勢(shì)便顯現(xiàn)了出來。因此宮格樣式的導(dǎo)航結(jié)構(gòu)更適合各功能相對(duì)獨(dú)立的產(chǎn)品或系統(tǒng),如“去哪兒”、“攜程”等旅游類APP。

Tile

第三種:也是我們最終采用的“工”字型的框架結(jié)構(gòu),通過對(duì)功能的組織與整合,我們把功能劃分為四個(gè)主要部分,同時(shí)在每個(gè)主TAB界面中輔以主要操作,兼顧了信息的呈現(xiàn),解決了之前版本信息架構(gòu)不清晰的問題,針對(duì)不同模塊的操作可以并入該模塊下,豐富的擴(kuò)展功能也有了適合的歸宿。

工字結(jié)構(gòu)

底部Tab分別為:網(wǎng)盤、分享、發(fā)現(xiàn)、關(guān)于我,分別對(duì)應(yīng)百度云的主要功能、拓展方向、豐富功能集合與突出個(gè)人的 理念,與“工”字底部相對(duì)應(yīng)的,是網(wǎng)盤和分享兩個(gè)模塊頂部的主要操作前置。網(wǎng)盤部分將之前版本隱晦的分類入口與新建文件夾等管理操作前置,讓用戶更容易找 到,同時(shí)在視覺上弱化次要操作,避免對(duì)用戶的干擾。

分享部分也同樣前置出了好友列表入口和創(chuàng)建分享群、添加好友的快捷方式,讓用戶能夠更快捷、方便的完成與朋友間的文件分享。

之前版本“工具包”中豐富的擴(kuò)展功能,進(jìn)行了進(jìn)一步整合收納,成為了現(xiàn)在的“發(fā)現(xiàn)”模塊,各種類型的備份功能集合為一項(xiàng),重新排布了各功能的順序,讓更有用的功能擁有更多被使用和發(fā)現(xiàn)的機(jī)會(huì),并且提供了更強(qiáng)的可擴(kuò)展性。

重新設(shè)計(jì)關(guān)于我部分,突出用戶個(gè)人信息,將設(shè)置重新整理,界面更簡(jiǎn)潔,且更容易找到對(duì)應(yīng)的設(shè)置選項(xiàng),提升可用性。

視覺設(shè)計(jì):

關(guān)于版式:

7.0版本在視覺設(shè)計(jì)上打破常規(guī)的排版布局,為了更加凸顯人,借用了古藤堡法則——人們?cè)跒g覽頁面或布局的時(shí)候,視線都趨向于從上到下,從左到右的眼動(dòng)規(guī)律。

古藤堡

提煉視覺風(fēng)格:

首先是視覺整體風(fēng)格的確定,一方面,自3.0版本開始,百度云一直遵循百度的紅藍(lán)品牌色,期間也嘗試過其 他顏色作為產(chǎn)品主色,但也通過一次又一次的用戶調(diào)研、A/B測(cè)試等方式提煉出最適合百度云的品牌顏色:藍(lán)。另一方面,根據(jù)百度云六度蜂巢體驗(yàn)中速度、穩(wěn) 定、安全、易用的特點(diǎn),提煉出百度云的視覺風(fēng)格——清新、簡(jiǎn)潔、高效。

UI style

重新定義扁平化icons,簡(jiǎn)化元素,精準(zhǔn)定位:

配合扁平化風(fēng)格重新繪制了全套圖標(biāo),通過對(duì)視覺元素的簡(jiǎn)化,使得視覺風(fēng)格從細(xì)節(jié)上達(dá)到高度的統(tǒng)一。

icons

繁而不亂,快速形成控件規(guī)范:

控件的規(guī)范化也一直是百度云客戶端在完善的,力求通過最少的視覺元素,去表達(dá)豐富的信息組織結(jié)構(gòu)。

Control Specification

發(fā)現(xiàn)問題并總結(jié)歸納:

字體在實(shí)際開發(fā)過程中被開發(fā)人員直接寫入框架,此時(shí)字體與框架邊緣本身是存在一些留白的,若不清楚這些留白大小,標(biāo)注時(shí)就會(huì)出現(xiàn)誤差,從而導(dǎo)致開發(fā)實(shí)現(xiàn)的效果與設(shè)計(jì)圖有所出入,因此,我們對(duì)此進(jìn)行了整理和方法的總結(jié)歸納。

字體標(biāo)注

本次改版主要進(jìn)行了交互框架的重構(gòu),將產(chǎn)品從繁雜的功能中解放出來,讓框架和層級(jí)都更加清晰。在視覺設(shè)計(jì)上,讓百度云更簡(jiǎn)潔、更輕量化,也更具有情感化。

后續(xù)計(jì)劃:

后續(xù)

作為云存儲(chǔ)的領(lǐng)軍者,百度云一直在不斷完善的自我過程中尋求新的突破,這一次Android客戶端7.0的改 版,雖然有一個(gè)大的跨越,但由于開發(fā)時(shí)間的限制,主要還是集中在大框架的調(diào)整與功能的整合上,需要提升的體驗(yàn)細(xì)節(jié)還有很多,后續(xù)我們將會(huì)不遺余力的繼續(xù)精 心打磨百度云的整體體驗(yàn)。

原文來自:百度MUX

 

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 我就想問問,百度網(wǎng)盤增加了一個(gè)看吧頻道,這是什么邏輯下推演出來的,好神奇的設(shè)計(jì)~~~

    來自浙江 回復(fù)
    1. 同問

      來自廣東 回復(fù)
  2. 百度這次很用心

    來自山東 回復(fù)