讓購物簡單快樂！京東 APP 11.0 深度解讀：視覺篇

在 APP11.0 深度解讀系列的第一篇文章中，剖析了基於生態進行體系化大改版的解讀與思考，本文將聚焦於視覺設計，闡明我們對此版本的設計主張與思路，在各個場景是如何外化以輔助達成改版目標的。

11.0 設計理念

隨著京東使用者群體、服務場景的多樣化，對於體驗設計來說也迎來進一步挑戰。在精細化服務的背景下，我們期望在 10.0 設計理念上進行升級，打造能夠為使用者提供更純粹的購物體驗。因此，“讓購物變得簡單快樂”的 11.0 應運而生，同時也成為我們在體驗上追求的重要目標。通過對目標的拆解，得到視覺關鍵詞和產品關鍵詞。11.0 的設計主張也會持續在品牌、產品、運營設計上進行滲透和升級。

品牌設計升級 | 通過 JOY 實現與使用者的交流

1. 簡化圖示

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

同時我們反覆調整 JOY 臉部邊線的細微曲率，降低原生影象的有機感，讓他更為耐看，帶來更簡潔高效舒適的使用體驗。

ICON 的質感來自普通紙張摺疊產生的摺痕陰影，取其生活化的自然趣意，體感載入速度更敏捷輕量。

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

2. 強化互動

在 ICON 與開屏的設計上我們還運用了視覺暫留的特性做了響應式互動設計，嘗試為大家帶來些新體驗。從點選側面待命狀態的 ICON 進入開屏，變成轉過臉來打招呼的立體 JOY，意在模擬日常溝通中即時響應，營造情感化互動，在進入 app 的購物前環節，先建立親切敏捷的品牌印象。而在 2 個靜態頁面間創造多一層動態視覺資訊，賦予其動態含義，同時實現質感和情緒上更飽滿的遞進，比純靜態分離畫面更有助於提高資訊傳達的效率和密度。

3. 運營階梯遞進

大促版的 icon 與開屏同樣貫穿了互動的思路。同樣是響應設計，日常狀態為側面待命，表達的是貼心不打擾，大促時則採用正面形象緊貼螢幕，拉近距離主動溝通，頭部下移，勻出更多空間呈現運營場景的豐富性以突出大促主題，點選以獲得肯定時才打開開屏場景化的新世界。

運營設計升級 | 用運營思維活化產品體驗

基於品牌的運營設計與產品設計相結合，我們希望通過 IP 的擬人化表達，在京東 APP 內進行品牌滲透，從而讓 APP 更具情感與趣味。

1. 內外聯動

本次主要嘗試以首頁 TOP LOGO 和使用者登入註冊頁進行內外聯動，使用了統一的主題概念，來傳達簡單快樂的感官體驗。登入註冊頁的主題場景化運營滲透與之聯動，增加視覺可玩性與互動性，有利於提高使用者在登入註冊時的操作寬容度，降低負面體驗感。

2. 渲染大促氛圍

同時在上述設定中，在大促時期也代入了促銷概念，烘托營銷氛圍。未來我們也會持續探索更多關於 IP 場景化運營的模式。

外宣設計升級 | 用符號打造升級意象

1. 提煉策略

版本符號的作用在於讓使用者形成專屬 APP11.0 的視覺記憶。今年我們希望從解讀升級策略中獲得關於符號的靈感。本次升級的主題是新生態、新體驗、新增長。而新生態、新體驗、新增長最終需要達成的目標正是開拓運營新賽道，從而使使用者獲得更好逛、更貼心、更好買的體驗。基於這個解讀推導，我們決定以“開拓”作為關鍵設計概念。

2. 意念視覺化

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

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

3. 應用延展

宣傳物料方面，我們使用“圍繞旋轉的門”表達“新生態”，使用“向外擴充套件的門”表達“新體驗”，使用“螺旋上升的門”表達“新增長”。這三個形式的“門”應用於各個宣傳物料當中。

外宣設計升級 | 用開屏打響升級心智

使用者在更新 11.0 版本後，在開機時會先看到一個啟動影片，這個影片會說明這次更新的亮點，也需要突出主站品牌的調性，還需要使用者產生耳目一新的感覺。

1. 抓住產品亮點

基於影片大小與使用者耐心程度的考量，開機影片的市場鎖定在 15s 以內。在這個時長裡，版本更新的細節不可能事無鉅細的娓娓道來，於是我們先鎖定了使用者感知最為明顯的三個部分：首頁改版，影片化，頻道廣場，並選擇了準確、精煉、親切的文案風格來進行功能闡釋。

2. 統一材質

“去噪”是近幾次京東改版的內在方向，11.0 的版本符號使用了玻璃卡片的輕質感形式，體現出輕量化與品質感。我們決定就用玻璃卡片為開機影片的核心視覺元素，通過玻璃卡片的不同演繹將改版內容表現出來。這也讓 11.0 在整體運營上的視覺元素做到了統一。色調由開場的冷色逐漸過渡到結尾的紅色，也是在側面傳達出變化的主題。

外宣設計升級 | 用外宣影片傳遞功能亮點

1. 表達重心轉移

去年的 App 10.0 外宣影片，我們選擇了定格動畫的形式來切入六一兒童節的營銷節點借勢宣傳。而今年，除了在影片號、微博等傳統媒體渠道進行投放外，外宣影片也同時上線 App store 和各大安卓手機的應用市場。因此，相比時效性強的營銷宣傳，今年的影片表達的重心由運營造勢轉移到內容表達上來，意在讓內容更明確清晰和具體，也希望用這種直接的語言傳遞出京東務實高效的品牌性格。

2. 內容排布

由於內容更加強調產品改版的具體功能與業務，影片的重點就落到了如何高效且有趣地傳遞資訊上來。近年改版使用者關注度最高也是觀感最直接的部分，就是 Joy 的形象變化，因此我們在剪輯結構上把這部分放在了最開頭，藉此吸引觀看者的興趣。針對產品改版內容我們進行提煉濃縮並以更接地氣更好理解的方式呈現，希望觀看者在興趣降低之前快速高效的傳遞完內容。最後結尾，我們推動影片的節奏與情緒達到高點，落到了整個 11.0 的視覺符號，與“不負每一份熱愛”的 slogan，完成扣題結尾。

3. 包裝演繹

旁白文案是除畫面以外最直接最高效的資訊創達方式，我們重新整理並用更易懂、更接地氣的語言講述，以確保每個最普通的消費者快速理解。同時旁白也串起了整個影片內容的主線。

另外，圍繞著主線我們對內容選取合適的畫面進行配合，並對介面功能的展示進行了 3D 化、動態演繹、場景演繹的視覺語言等方式進行豐富表達。

11.X…

11.0 版本正如京東 APP11.0 的版本一樣持續開放的大門，我們希望以此為起點，對上半年的經驗進行收歸吸收，在下半年的 11.X 中繼續探索與創造更多 APP 上的視覺表達，致力為大家帶來更簡單快樂的生活體驗。

歡迎關注「JellyDesign」的小程式：