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

11.0 設(shè)計理念

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

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

1. 簡化圖標(biāo)

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

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

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

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

2. 強(qiáng)化互動

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

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

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

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

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

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

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

2. 渲染大促氛圍

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

外宣設(shè)計升級 | 用符號打造升級意象

1. 提煉策略

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

2. 意念視覺化

視覺化的過程中，我們選擇以“門”作為視覺符號?！伴T”代表了“開拓”，也代表了“打破空間壁”。

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

3. 應(yīng)用延展

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

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

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

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

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

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

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

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

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

去年的 App 10.0 外宣視頻，我們選擇了定格動畫的形式來切入六一兒童節(jié)的營銷節(jié)點(diǎn)借勢宣傳。而今年，除了在視頻號、微博等傳統(tǒng)媒體渠道進(jìn)行投放外，外宣視頻也同時上線 App store 和各大安卓手機(jī)的應(yīng)用市場。因此，相比時效性強(qiáng)的營銷宣傳，今年的視頻表達(dá)的重心由運(yùn)營造勢轉(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 的形象變化，因此我們在剪輯結(jié)構(gòu)上把這部分放在了最開頭，借此吸引觀看者的興趣。針對產(chǎn)品改版內(nèi)容我們進(jìn)行提煉濃縮并以更接地氣更好理解的方式呈現(xiàn)，希望觀看者在興趣降低之前快速高效的傳遞完內(nèi)容。最后結(jié)尾，我們推動視頻的節(jié)奏與情緒達(dá)到高點(diǎn)，落到了整個 11.0 的視覺符號，與“不負(fù)每一份熱愛”的 slogan，完成扣題結(jié)尾。

3. 包裝演繹

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

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

11.X...

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

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