2018-12-3 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請點(diǎn)這里
文章包括品牌理念、品牌識別、APP大改版、品牌延伸。
△ 點(diǎn)擊查看完整視頻
百度網(wǎng)盤是百度提供的個(gè)人云存儲服務(wù),自2012年上線至今,通過強(qiáng)大的技術(shù)能力以及承擔(dān)高額的帶寬成本,為7億用戶提供文件存儲、備份、分享、共享等服務(wù),成為行業(yè)領(lǐng)先位置。
這6年里,我們從滿足基礎(chǔ)存儲需求的一款工具,到現(xiàn)在越來越意識到高品質(zhì)和情感化的體驗(yàn)對于用戶的重要性。
因此,團(tuán)隊(duì)希望通過本次的品牌升級,能夠從視覺識別、產(chǎn)品體驗(yàn)、線上線下推廣等多維度來傳遞品牌核心價(jià)值,同時(shí)遵從極簡克制的百度「高級感」設(shè)計(jì)理念,形成一套完整統(tǒng)一的設(shè)計(jì)語言,真正的做到像 slogan 所傳遞的:「讓美好永遠(yuǎn)陪伴」。
本次品牌升級希望傳遞用戶3個(gè)核心點(diǎn):更有溫度、更便捷、更年輕。
網(wǎng)盤一直以來存儲著用戶的美好回憶,比如:每一次難忘旅途的照片,寶寶成長記錄,家人團(tuán)圓時(shí)的合影,激情工作時(shí)的陪伴。因此,它不僅僅是一款冰冷的工具,而是一個(gè)懂你的、有情感、有溫度的生活助手。
過去幾年,網(wǎng)盤一直主打的品牌核心點(diǎn)是「安全」、「免費(fèi)」、「大空間」,不可否認(rèn)之前的品牌傳遞是成功的,因?yàn)橥ㄟ^這些核心點(diǎn),在同行業(yè)的用戶占有率達(dá)到80%以上。
但是,未來除了最基礎(chǔ)的「安全」以外,還需要傳遞什么感受呢?我們深知產(chǎn)品體驗(yàn)還有很大的提升空間,比如:如何讓產(chǎn)品更易用、存儲更便捷、查找更方便、瀏覽更沉浸等等。因此,「便捷」是接下來品牌需要傳達(dá)給用戶的核心價(jià)值。
通過數(shù)據(jù)分析,網(wǎng)盤的用戶24歲左右占大多數(shù),也就意味著我們的主流群體是年輕人。除此之外,保持品牌的年輕化,也是每一個(gè)公司都希望做到的。
因此,本次品牌升級,我們希望不管是從視覺層面,還是文案互動(dòng),以及運(yùn)營手法,都更加年輕化及趣味性。
品牌升級不是虛喊口號,而是應(yīng)該通過各個(gè)設(shè)計(jì)觸點(diǎn)的配合給用戶傳達(dá)融合、一致的感受和體驗(yàn)。因此,我們從以下幾個(gè)場景進(jìn)行滲透:品牌識別、APP設(shè)計(jì)、品牌延伸。
在品牌識別滲透環(huán)節(jié),涉及到以下幾個(gè)方面進(jìn)行優(yōu)化設(shè)計(jì):品牌色、品牌標(biāo)識、品牌字體。
品牌色
品牌色是用戶感知品牌最直觀的方式,比如:想到可口可樂就想到紅色,想到百事可樂就是藍(lán)色,想零度可樂就是黑色。對,好的品牌色能夠占領(lǐng)用戶心智,從而產(chǎn)生聯(lián)想,這就是品牌色的重要性。
那么百度網(wǎng)盤呢?網(wǎng)盤的品牌不是從0到1的小而美的創(chuàng)新設(shè)計(jì),需要兼顧7億用戶量對品牌的已有認(rèn)知,這是一個(gè)令人頭疼的挑戰(zhàn)。
因此在品牌色的選擇上,考慮到較大改動(dòng)帶來的用戶認(rèn)知成本的增加,所以經(jīng)過多輪嘗試和討論后,決定延續(xù)用戶已有認(rèn)知的「紅藍(lán)」配色,在此基礎(chǔ)上,進(jìn)行調(diào)整并滲透新品牌的理念。
同時(shí),在品牌色上希望傳遞「更年輕」的品牌理念。我們大量收集體現(xiàn)「年輕」的場景進(jìn)行多輪討論篩選,提取色調(diào),結(jié)合情緒板,最終提煉并定義了我們的品牌色。
品牌標(biāo)識
在做品牌標(biāo)識(LOGO)階段,大家發(fā)散了很多想法,嘗試了很多方案。
通過多維度思考以及利弊權(quán)衡,最后選擇在延續(xù)原有 logo 特征上,體現(xiàn)新品牌理念——「更有溫度」的感受。
那么,現(xiàn)實(shí)生活中什么場景,會給人「有溫度的」感受呢?我們想到了擁抱、愛心、陽光、火焰等等。最終覺得「微笑」更符合我們所傳遞的感受,同時(shí)也能更好的跟原有 LOGO 特征進(jìn)行結(jié)合。
以下是 LOGO 的設(shè)計(jì)思路,用顏色體現(xiàn)「年輕」,微笑體現(xiàn)「溫度」。
LOGO的最終造型:
品牌字體
LOGO 確定后,還需要設(shè)計(jì)與之搭配的品牌文字,這個(gè)階段最主要是找到跟品牌性格以及圖形風(fēng)格相契合的字體骨架。同時(shí)兼顧原有字體的認(rèn)知,在此基礎(chǔ)上進(jìn)行微調(diào)。比如:統(tǒng)一字體的粗細(xì),以及切角的角度,使整體視覺更加協(xié)調(diào)。
LOGO和字體組合的最終版本:
不可否認(rèn),傳遞品牌理念最直接的方式,就是在用戶使用它時(shí)。因此,我們對產(chǎn)品 NA端進(jìn)行9.0全新升級(這是自上線以來第一次大改版)。
品牌基因
在互聯(lián)網(wǎng)產(chǎn)品越來越同質(zhì)化的今天,做出有差異性和符合品牌調(diào)性的設(shè)計(jì)是我們面臨的挑戰(zhàn)。因此,在品牌基因方面,做了大量的嘗試。
經(jīng)過多輪討論,我們選擇以「積木」作為網(wǎng)盤的品牌基因。因?yàn)椤阜e木」陪伴著我們成長,代表著我們的童年,給人溫暖的感受,同時(shí),不同幾何形的積木看似單一,組合起來又有很多可能性,體現(xiàn)了年輕和趣味。
在圖形設(shè)計(jì)(ICON)時(shí),提取「積木」中的幾何元素進(jìn)行疊加處理,用色上更加鮮亮,突顯年輕化,形成網(wǎng)盤自己的圖形體系。
相比「尖銳」的直角,圓角給人柔和的視覺感受,同時(shí)經(jīng)過多輪的嘗試,最終確定圓角大小為8px。
同時(shí)在空白頁上延續(xù)圖形風(fēng)格,能夠更好的統(tǒng)一視覺語言,傳遞更加一致的品牌感。
動(dòng)效上,采用了符合「積木」運(yùn)動(dòng)特征的物理屬性。因此,運(yùn)動(dòng)節(jié)奏上利落的不拖泥帶水。比如,積木受到一個(gè)力,由于摩擦力會快速停止,而并非很Q 的彈性動(dòng)效。
下圖中,「藍(lán)球」代表目前網(wǎng)盤中元素的運(yùn)動(dòng)方式,「紅球」代表了市面上常見的彈性運(yùn)動(dòng)方式。
下圖,是將這種運(yùn)動(dòng)規(guī)則使用在產(chǎn)品界面中時(shí):
同時(shí)底部 tab 在運(yùn)動(dòng)節(jié)奏上,也采用相同的運(yùn)動(dòng)規(guī)律,賦予產(chǎn)品年輕活力的視覺感受,同時(shí)又不會喧賓奪主過度搶戲。
下拉刷新,是增強(qiáng)品牌記憶的最好體現(xiàn)。本次提取 logo 基本元素,同時(shí)強(qiáng)調(diào)「微笑」,加深用戶對品牌的印象。
功能設(shè)計(jì)
前面有提到,百度網(wǎng)盤保存著用戶非常多美好回憶的照片,或許那些回憶,用戶都已經(jīng)忘記,但往往這些才是最大的驚喜和感動(dòng)。
因此,9.0版本新增「故事」模塊,讓美好回憶與你不期而遇。通過技術(shù)對優(yōu)質(zhì)、精彩照片的篩選,生成故事卡片,推送給你,給你帶來溫暖。
為了節(jié)省用戶時(shí)間,傳遞品牌「更便捷」的理念,本次改版我們優(yōu)化「分類」模塊,將「分類」外置于首頁頂部,減少用戶操作步長,輕松查找自己的文件。
同時(shí)在首頁新增「最近」功能,方便用戶便捷查找歷史操作,而不是像以前,反復(fù)點(diǎn)擊層層相套的文件夾去瀏覽與查找。
排版布局
文件列表是用戶使用網(wǎng)盤最高頻的路徑,針對這個(gè)場景,我們遵循視覺服從功能,極簡克制的百度「高級感」設(shè)計(jì)理念,通過視覺手段區(qū)分信息層級,讓用戶瀏覽時(shí)「更便捷」。
因此,本次對文件列表排版布局,從以下幾個(gè)維度進(jìn)行優(yōu)化:大小、重量、間距。
大小
改版前,用戶打開文件列表,首先看到的是滿屏黃色的文件夾,而這些并不能幫助用戶進(jìn)行瀏覽或篩選,反而會造成視覺干擾。
因此,本次對文件圖標(biāo)大小,縮略圖尺寸,以及標(biāo)題信息大小,進(jìn)行整體調(diào)整,從而提升瀏覽效率。
重量
對于文件列表,信息層級重要性依次為:名稱>圖標(biāo)>時(shí)間,因此,本次優(yōu)化了視覺重量對比。
通過視覺重量的處理(對標(biāo)題字號加粗、顏色增強(qiáng)),讓用戶更加便捷的獲取有效信息。
間距
以下是舊版安卓端和改版后對比,去除頂部藍(lán)色雙導(dǎo)航的同時(shí),通過縮小文件圖標(biāo),進(jìn)而縮小列表間距。
同時(shí),調(diào)研行業(yè)內(nèi)有代表性產(chǎn)品的列表行間距,綜合分析對比,最終確定列表行間距為「180px」,平衡體驗(yàn)的同時(shí),讓用戶在首屏看到更多內(nèi)容。
還對 NA端進(jìn)行統(tǒng)一的柵格化布局,讓頁面富有統(tǒng)一的秩序感和韻律。讓元素、模塊、頁面間距有規(guī)律可循。
柵格化布局落地全部界面:
以上,是品牌理念滲透到 APP 設(shè)計(jì)中,進(jìn)行9.0大改版的相關(guān)設(shè)計(jì),從品牌基因、功能設(shè)計(jì)到排版布局,統(tǒng)一的傳遞全新品牌理念。
線上線下的活動(dòng)和物料設(shè)計(jì),也是品牌和用戶的觸點(diǎn),在設(shè)計(jì)的時(shí)候需要延續(xù)整體的品牌調(diào)性,傳遞出統(tǒng)一的品牌感。
以上,是百度網(wǎng)盤本次品牌升級背后的原因,以及相關(guān)體驗(yàn)設(shè)計(jì)優(yōu)化。從前期定義品牌核心理念(更有溫度、更便捷、更年輕),到通過不同場景及接觸點(diǎn)進(jìn)行滲透(品牌識別、APP設(shè)計(jì)、品牌延伸),線上線下多維度的傳達(dá)統(tǒng)一的品牌理念。所做的這一切,都是希望能為用戶提供更好的服務(wù)。
本次品牌升級,是百度網(wǎng)盤所有同學(xué)努力的結(jié)果,我們深知還有很多體驗(yàn)需要提升,這次升級只是開始,會持續(xù)讓用戶感受到「讓美好永遠(yuǎn)陪伴」。
藍(lán)藍(lán)設(shè)計(jì)( axecq.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://axecq.cn