讓購(gòu)物簡(jiǎn)單快樂！京東 APP 11.0 深度解讀：視覺篇

在 APP11.0 深度解讀系列的第一篇文章中，剖析了基于生態(tài)進(jìn)行體系化大改版的解讀與思考，本文將聚焦于視覺設(shè)計(jì)，闡明我們對(duì)此版本的設(shè)計(jì)主張與思路，在各個(gè)場(chǎng)景是如何外化以輔助達(dá)成改版目標(biāo)的。

11.0 設(shè)計(jì)理念

隨著京東用戶群體、服務(wù)場(chǎng)景的多樣化，對(duì)于體驗(yàn)設(shè)計(jì)來說也迎來進(jìn)一步挑戰(zhàn)。在精細(xì)化服務(wù)的背景下，我們期望在 10.0 設(shè)計(jì)理念上進(jìn)行升級(jí)，打造能夠?yàn)橛脩籼峁└兇獾馁?gòu)物體驗(yàn)。因此，“讓購(gòu)物變得簡(jiǎn)單快樂”的 11.0 應(yīng)運(yùn)而生，同時(shí)也成為我們?cè)隗w驗(yàn)上追求的重要目標(biāo)。通過對(duì)目標(biāo)的拆解，得到視覺關(guān)鍵詞和產(chǎn)品關(guān)鍵詞。11.0 的設(shè)計(jì)主張也會(huì)持續(xù)在品牌、產(chǎn)品、運(yùn)營(yíng)設(shè)計(jì)上進(jìn)行滲透和升級(jí)。

品牌設(shè)計(jì)升級(jí) | 通過 JOY 實(shí)現(xiàn)與用戶的交流

1. 簡(jiǎn)化圖標(biāo)

秉承極簡(jiǎn)的設(shè)計(jì)原則，在不增加用戶重新認(rèn)知成本的前提下，我們盡可能降低 ICON 中體積、光源、空間等其他繁雜的物理限制，壓縮中間過渡的灰色色調(diào)，拉開明暗對(duì)比度來提高瞬間識(shí)別度。

同時(shí)我們反復(fù)調(diào)整 JOY 臉部邊線的細(xì)微曲率，降低原生圖像的有機(jī)感，讓他更為耐看，帶來更簡(jiǎn)潔高效舒適的使用體驗(yàn)。

ICON 的質(zhì)感來自普通紙張折疊產(chǎn)生的折痕陰影，取其生活化的自然趣意，體感加載速度更敏捷輕量。

啟動(dòng)圖中的字體也簡(jiǎn)化為與品牌調(diào)性更契合，簡(jiǎn)單輕松的手寫體，圓潤(rùn)筆尖更快樂，疏朗筆劃更清晰，上揚(yáng) 6.18 度植入品牌基因，更有速度感和生命力。

2. 強(qiáng)化互動(dòng)

在 ICON 與開屏的設(shè)計(jì)上我們還運(yùn)用了視覺暫留的特性做了響應(yīng)式互動(dòng)設(shè)計(jì)，嘗試為大家?guī)硇┬麦w驗(yàn)。從點(diǎn)擊側(cè)面待命狀態(tài)的 ICON 進(jìn)入開屏，變成轉(zhuǎn)過臉來打招呼的立體 JOY，意在模擬日常溝通中即時(shí)響應(yīng)，營(yíng)造情感化互動(dòng)，在進(jìn)入 app 的購(gòu)物前環(huán)節(jié)，先建立親切敏捷的品牌印象。而在 2 個(gè)靜態(tài)頁面間創(chuàng)造多一層動(dòng)態(tài)視覺信息，賦予其動(dòng)態(tài)含義，同時(shí)實(shí)現(xiàn)質(zhì)感和情緒上更飽滿的遞進(jìn)，比純靜態(tài)分離畫面更有助于提高信息傳達(dá)的效率和密度。

3. 運(yùn)營(yíng)階梯遞進(jìn)

大促版的 icon 與開屏同樣貫穿了互動(dòng)的思路。同樣是響應(yīng)設(shè)計(jì)，日常狀態(tài)為側(cè)面待命，表達(dá)的是貼心不打擾，大促時(shí)則采用正面形象緊貼屏幕，拉近距離主動(dòng)溝通，頭部下移，勻出更多空間呈現(xiàn)運(yùn)營(yíng)場(chǎng)景的豐富性以突出大促主題，點(diǎn)擊以獲得肯定時(shí)才打開開屏場(chǎng)景化的新世界。

運(yùn)營(yíng)設(shè)計(jì)升級(jí) | 用運(yùn)營(yíng)思維活化產(chǎn)品體驗(yàn)

基于品牌的運(yùn)營(yíng)設(shè)計(jì)與產(chǎn)品設(shè)計(jì)相結(jié)合，我們希望通過 IP 的擬人化表達(dá)，在京東 APP 內(nèi)進(jìn)行品牌滲透，從而讓 APP 更具情感與趣味。

1. 內(nèi)外聯(lián)動(dòng)

本次主要嘗試以首頁 TOP LOGO 和用戶登錄注冊(cè)頁進(jìn)行內(nèi)外聯(lián)動(dòng)，使用了統(tǒng)一的主題概念，來傳達(dá)簡(jiǎn)單快樂的感官體驗(yàn)。登錄注冊(cè)頁的主題場(chǎng)景化運(yùn)營(yíng)滲透與之聯(lián)動(dòng)，增加視覺可玩性與互動(dòng)性，有利于提高用戶在登錄注冊(cè)時(shí)的操作寬容度，降低負(fù)面體驗(yàn)感。

2. 渲染大促氛圍

同時(shí)在上述設(shè)定中，在大促時(shí)期也代入了促銷概念，烘托營(yíng)銷氛圍。未來我們也會(huì)持續(xù)探索更多關(guān)于 IP 場(chǎng)景化運(yùn)營(yíng)的模式。

外宣設(shè)計(jì)升級(jí) | 用符號(hào)打造升級(jí)意象

1. 提煉策略

版本符號(hào)的作用在于讓用戶形成專屬 APP11.0 的視覺記憶。今年我們希望從解讀升級(jí)策略中獲得關(guān)于符號(hào)的靈感。本次升級(jí)的主題是新生態(tài)、新體驗(yàn)、新增長(zhǎng)。而新生態(tài)、新體驗(yàn)、新增長(zhǎng)最終需要達(dá)成的目標(biāo)正是開拓運(yùn)營(yíng)新賽道，從而使用戶獲得更好逛、更貼心、更好買的體驗(yàn)。基于這個(gè)解讀推導(dǎo)，我們決定以“開拓”作為關(guān)鍵設(shè)計(jì)概念。

2. 意念視覺化

視覺化的過程中，我們選擇以“門”作為視覺符號(hào)。“門”代表了“開拓”，也代表了“打破空間壁”。

同時(shí)我們考慮到了材質(zhì)的使用，基于 APP11.0 的視覺風(fēng)格——極簡(jiǎn)、有趣，我們使用玻璃作為材質(zhì)，追求輕盈和通透視覺感受。

3. 應(yīng)用延展

宣傳物料方面，我們使用“圍繞旋轉(zhuǎn)的門”表達(dá)“新生態(tài)”，使用“向外擴(kuò)展的門”表達(dá)“新體驗(yàn)”，使用“螺旋上升的門”表達(dá)“新增長(zhǎng)”。這三個(gè)形式的“門”應(yīng)用于各個(gè)宣傳物料當(dāng)中。

外宣設(shè)計(jì)升級(jí) | 用開屏打響升級(jí)心智

用戶在更新 11.0 版本后，在開機(jī)時(shí)會(huì)先看到一個(gè)啟動(dòng)視頻，這個(gè)視頻會(huì)說明這次更新的亮點(diǎn)，也需要突出主站品牌的調(diào)性，還需要用戶產(chǎn)生耳目一新的感覺。

1. 抓住產(chǎn)品亮點(diǎn)

基于視頻大小與用戶耐心程度的考量，開機(jī)視頻的市場(chǎng)鎖定在 15s 以內(nèi)。在這個(gè)時(shí)長(zhǎng)里，版本更新的細(xì)節(jié)不可能事無巨細(xì)的娓娓道來，于是我們先鎖定了用戶感知最為明顯的三個(gè)部分：首頁改版，視頻化，頻道廣場(chǎng)，并選擇了準(zhǔn)確、精煉、親切的文案風(fēng)格來進(jìn)行功能闡釋。

2. 統(tǒng)一材質(zhì)

“去噪”是近幾次京東改版的內(nèi)在方向，11.0 的版本符號(hào)使用了玻璃卡片的輕質(zhì)感形式，體現(xiàn)出輕量化與品質(zhì)感。我們決定就用玻璃卡片為開機(jī)視頻的核心視覺元素，通過玻璃卡片的不同演繹將改版內(nèi)容表現(xiàn)出來。這也讓 11.0 在整體運(yùn)營(yíng)上的視覺元素做到了統(tǒng)一。色調(diào)由開場(chǎng)的冷色逐漸過渡到結(jié)尾的紅色，也是在側(cè)面?zhèn)鬟_(dá)出變化的主題。

外宣設(shè)計(jì)升級(jí) | 用外宣視頻傳遞功能亮點(diǎn)

1. 表達(dá)重心轉(zhuǎn)移

去年的 App 10.0 外宣視頻，我們選擇了定格動(dòng)畫的形式來切入六一兒童節(jié)的營(yíng)銷節(jié)點(diǎn)借勢(shì)宣傳。而今年，除了在視頻號(hào)、微博等傳統(tǒng)媒體渠道進(jìn)行投放外，外宣視頻也同時(shí)上線 App store 和各大安卓手機(jī)的應(yīng)用市場(chǎng)。因此，相比時(shí)效性強(qiáng)的營(yíng)銷宣傳，今年的視頻表達(dá)的重心由運(yùn)營(yíng)造勢(shì)轉(zhuǎn)移到內(nèi)容表達(dá)上來，意在讓內(nèi)容更明確清晰和具體，也希望用這種直接的語言傳遞出京東務(wù)實(shí)高效的品牌性格。

2. 內(nèi)容排布

由于內(nèi)容更加強(qiáng)調(diào)產(chǎn)品改版的具體功能與業(yè)務(wù)，視頻的重點(diǎn)就落到了如何高效且有趣地傳遞信息上來。近年改版用戶關(guān)注度最高也是觀感最直接的部分，就是 Joy 的形象變化，因此我們?cè)诩糨嫿Y(jié)構(gòu)上把這部分放在了最開頭，借此吸引觀看者的興趣。針對(duì)產(chǎn)品改版內(nèi)容我們進(jìn)行提煉濃縮并以更接地氣更好理解的方式呈現(xiàn)，希望觀看者在興趣降低之前快速高效的傳遞完內(nèi)容。最后結(jié)尾，我們推動(dòng)視頻的節(jié)奏與情緒達(dá)到高點(diǎn)，落到了整個(gè) 11.0 的視覺符號(hào)，與“不負(fù)每一份熱愛”的 slogan，完成扣題結(jié)尾。

3. 包裝演繹

旁白文案是除畫面以外最直接最高效的信息創(chuàng)達(dá)方式，我們重新整理并用更易懂、更接地氣的語言講述，以確保每個(gè)最普通的消費(fèi)者快速理解。同時(shí)旁白也串起了整個(gè)視頻內(nèi)容的主線。

另外，圍繞著主線我們對(duì)內(nèi)容選取合適的畫面進(jìn)行配合，并對(duì)界面功能的展示進(jìn)行了 3D 化、動(dòng)態(tài)演繹、場(chǎng)景演繹的視覺語言等方式進(jìn)行豐富表達(dá)。

11.X...

11.0 版本正如京東 APP11.0 的版本一樣持續(xù)開放的大門，我們希望以此為起點(diǎn)，對(duì)上半年的經(jīng)驗(yàn)進(jìn)行收歸吸收，在下半年的 11.X 中繼續(xù)探索與創(chuàng)造更多 APP 上的視覺表達(dá)，致力為大家?guī)砀?jiǎn)單快樂的生活體驗(yàn)。

歡迎關(guān)注「JellyDesign」的小程序：