2020-6-6 資深UI設(shè)計(jì)者
2020 年未過半，我們就看了許多從前從未見過的人和事，體驗(yàn)了許多從前從未想過的經(jīng)歷。幾個月來，「歷史性的」、「百年難遇的」、「前所未有的」、「恐慌性的」、「災(zāi)難性的」……這些詞兒，如同彈幕一般，不停地出現(xiàn)在我們眼前。短短的幾個月，許多人變了，許多家庭變了，許多事情變了，但生活還在繼續(xù)前行。經(jīng)歷過特殊的時刻，在京東的我們，比以往任何一個時刻都要忙碌，也比以往任何一個時刻更能清晰地認(rèn)識到：「京東的價值、京東給社會的力量」和「我們的責(zé)任」。
我們懷著期望，期待我們每一次的改變，都能給你們帶來更多的能量。
2020 年初夏 618 來了，京東的生日之際，京東 APP9.0 全新升級，希望你們會喜歡～
1. 品牌力升級
5 月 20 日，京東零售集團(tuán)宣布進(jìn)行品牌升級，由原來的「多快好省」升級為「不負(fù)每一份熱愛」。作為京東集團(tuán)品牌戰(zhàn)略承接的主陣地——京東 APP，將基于全新的品牌精神，著力于滿足消費(fèi)者的多元化、個性化的購物需求，持續(xù)對其創(chuàng)造更大的價值。用戶在京東不僅僅能享受到好的購物體驗(yàn)，還能享受到更豐富、更用心的產(chǎn)品和服務(wù)。通過對京東 APP 不斷地迭代升級，我們也向社會、向消費(fèi)者詮釋著京東的每一份用心；京東 APP 也承載著每一個家庭、每一位消費(fèi)者對美好生活的向往，不負(fù)你、我、他（她）的每一份熱愛。
2. 產(chǎn)品力升級
未來的 1-3 年，京東將繼續(xù)在低線市場、低滲透品類上提速；通過對新老渠道、新老內(nèi)容的矩陣開拓和整合，將單純的線上購物，升級為全場景的復(fù)合式體驗(yàn)；通過新玩法的打造，增加用戶的觸點(diǎn)，提升粘性和頻次。為了更好地承接京東戰(zhàn)略與方向，京東 APP 的產(chǎn)品力也亟需升級。
3. 體驗(yàn)力升級
除了品牌力、產(chǎn)品力升級，每一次全新「京東 APP」的到來，也在為消費(fèi)者不斷提供更友好的使用體驗(yàn)力。我們也非常期望能夠借助這次版本升級，對京東 APP 進(jìn)行既精細(xì)、又完整的刻畫和打磨，期待通過京東 APP9.0，與消費(fèi)者進(jìn)一步拉近彼此的距離，讓體驗(yàn)更加細(xì)膩、更加靈動，全面升級消費(fèi)者在京東 APP 的體驗(yàn)力。
結(jié)合京東 APP9.0 的品牌力、產(chǎn)品力、體驗(yàn)力的升級背景，我們追本溯源，探尋京東自己的脈絡(luò)。
設(shè)計(jì)策略的延續(xù)升級
基于京東 APP 的核心目標(biāo)，圍繞購前、購中、購后三個環(huán)節(jié)強(qiáng)化用戶內(nèi)心感知，承接京東的戰(zhàn)略在 APP 內(nèi)的落地。
京東 APP4.0-5.0 主要圍繞京東品牌對用戶的傳達(dá)感知進(jìn)行輸出，建立京東的品牌形象；京東 APP6.0 后開始加強(qiáng)場景能力，逐步打造可以滿足千人千面的電商設(shè)計(jì)平臺，直至現(xiàn)在，擴(kuò)寬至全渠道場景，為用戶提供更全面、更加細(xì)分的體驗(yàn)。
始終圍繞產(chǎn)品策略
設(shè)計(jì)的迭代和產(chǎn)品思維綁定，始終圍繞產(chǎn)品策略，一起共建用戶的同理心；通過深耕設(shè)計(jì)解決方案、持續(xù)驗(yàn)證推導(dǎo)，來打造值得用戶信賴的優(yōu)質(zhì)購物體驗(yàn)。
設(shè)計(jì)將各模塊的功能與價值主張相結(jié)合，彼此進(jìn)行聯(lián)動，保障從產(chǎn)品到交互到視覺，到最后的方案落地都能圍繞一個核心目標(biāo)去服務(wù)。
京東 APP 設(shè)計(jì)始終都是以「產(chǎn)品、業(yè)務(wù)目標(biāo)」為核心，圍繞「品牌」「用戶」「認(rèn)知」三大方向，結(jié)合「設(shè)計(jì)趨勢」來發(fā)力；但基于不同的情景、當(dāng)下 APP 所處的環(huán)境，設(shè)計(jì)改版的側(cè)重發(fā)力點(diǎn)有較大的差異；一般來說是「用一個版本來解決 1-2 個的重大體驗(yàn)問題」。
我們結(jié)合京東 APP8.0 以來的用戶研究報(bào)告、用戶反饋、各關(guān)鍵模塊的數(shù)據(jù)、競品對比，從「品牌」「用戶」「認(rèn)知」這三大維度著手，梳理京東 APP 的核心體驗(yàn)問題，進(jìn)而推導(dǎo)出京東 APP9.0 要解決的核心問題，作為定義京東 APP9.0 設(shè)計(jì)策略的關(guān)鍵依據(jù)。
1. 品牌設(shè)計(jì) ——京東APP8.0問題提煉
在細(xì)分用戶的研究中，用戶高頻地提到 APP 的品牌感知過于冷靜、直接、有距離感，氛圍上不夠活潑，也存在「京東是正品但價格會不會更貴？」的疑惑。打個比方，可能同樣的價格，吆喝聲越大，感受上會覺得大聲的更便宜、更有爽感。
視覺定義上，一方面，柵格定義過于精細(xì)，影響了信息傳遞的流暢度，需要針對導(dǎo)購類、流程類場景進(jìn)行差異化刪減；主流程內(nèi)的部分模塊留白偏多，拉低了一定的屏效；另一方面，字體的部分梯度比較多、也比較相近，雖然視覺上較為協(xié)調(diào)和統(tǒng)一，但視覺噪音較大，對主體內(nèi)容也有比較大的干擾。
人機(jī)交互時，過于直接地強(qiáng)調(diào)目的性，品牌靈動感待提升。
通過數(shù)據(jù)測試發(fā)現(xiàn)，核心模塊的引流效率還有較大的提升空間；兩個例子：1、可通過「嚴(yán)格控制變量，測試圖片素材的引流效率」，提升「圖片素材」的質(zhì)量，優(yōu)化核心模塊的設(shè)計(jì)規(guī)范；2、通過「圖片素材」的質(zhì)量提升，加上對「坑位容器」動態(tài)打磨，經(jīng)過數(shù)據(jù)測試，增強(qiáng)品牌靈動感的同時，可進(jìn)一步提升屏效。
2. 用戶感受 ——京東APP8.0問題提煉
細(xì)分垂直的用戶群，在全流程內(nèi)的感受上存在割裂感；各個垂直人群在 APP 主流程內(nèi)已初步形成大的體驗(yàn)閉環(huán)框架，但體驗(yàn)閉環(huán)的細(xì)節(jié)還有待補(bǔ)齊與提升，對垂直人群的「權(quán)益和身份」的傳達(dá)還需要在情境上更加一致。舉個例子：未開通 PLUS 會員時，高凈值人群對 PLUS 身份認(rèn)同感還有較大提升空間。
商品的活動促銷信息展示（時間、最優(yōu)價格）層級隱藏較深、活動促銷計(jì)算復(fù)雜難以理解，用戶促銷感受比較弱，所謂酒香真是怕巷子深。我們通過「用戶在不同平臺內(nèi)促銷感知」的用戶測試對比發(fā)現(xiàn)，雖然京東的價格最優(yōu)惠，但由于在表現(xiàn)層上沒有進(jìn)行強(qiáng)調(diào)，導(dǎo)致用戶在價格感受上存在偏差。
產(chǎn)品感知較理性，主流程內(nèi)氛圍不夠活潑，有距離感；這一點(diǎn)，新興市場用戶的感知尤為明顯。
3. 認(rèn)知統(tǒng)一 ——京東APP8.0問題提煉
頁面框架一致性問題：主流程過往的版本較為側(cè)重于單一模塊內(nèi)的設(shè)計(jì)，各個模塊間堆積了較多設(shè)計(jì)不統(tǒng)一的問題。
頁面內(nèi)模塊一致性問題：主流程的各個模塊內(nèi)，由于 「新舊版本」「需求不斷疊加」等原因，也存在模塊內(nèi)的統(tǒng)一性問題，這增加了用戶接受信息的負(fù)擔(dān)。舉個例子：APP 結(jié)算頁在過去的一年內(nèi)新增了較多的功能與提示場景，由于業(yè)務(wù)時間有 deadline，很多需求會采用體驗(yàn)降級方案，即用現(xiàn)有控件來設(shè)計(jì)方案，使得最終方案可能體驗(yàn)不夠好，而這里埋下的體驗(yàn)隱患，日后依然要找機(jī)會解決。
業(yè)務(wù)和功能類型不斷增加，這會導(dǎo)致頁面相對臃腫，這時核心流程的框架亟需重新定義、向三維空間借力來舒展信息架構(gòu)。
APP 整體的故事性連接還有待強(qiáng)化，貨架式的流轉(zhuǎn)只是骨架；各頻道內(nèi)、各模塊內(nèi)也應(yīng)基于 APP 骨架保有自己橫向與縱向故事線，在 APP 內(nèi)注入故事性的血肉靈魂；讓用戶在 APP 內(nèi)流轉(zhuǎn)時，認(rèn)知更清晰、體驗(yàn)更豐富。
1. 品牌力設(shè)計(jì)策略
延續(xù)、強(qiáng)化京東品牌，構(gòu)建、升級「京東設(shè)計(jì)語言體系」 ，提升屏效。通過統(tǒng)一的強(qiáng)調(diào)，使品牌可知；通過情感化、IP 化、故事化的表達(dá)，使品牌可感。
色彩體系：延續(xù)京東品牌調(diào)性，主打京東紅的品牌色，適當(dāng)?shù)赝ㄟ^增強(qiáng)配色、減少留白，在保留京東辨識度的同時，通過豐富的色彩體系降低 「冷淡、有距離」的感知。
例如：結(jié)合首頁及推薦位的坑位顏色，拉通營銷色彩規(guī)范，HSB 平衡所有色彩梯度；并結(jié)合算法給出冷暖色排布規(guī)則，區(qū)分內(nèi)容豐富畫面（包括首頁核心樓層/我京工具與服務(wù)/用戶資產(chǎn)我的錢包）及核心流程 HSB 平衡，色環(huán)關(guān)系，品牌色的延伸主導(dǎo)，再到單色、漸變的規(guī)律體驗(yàn)，全路徑的感知；拉通京東品牌色同階梯色環(huán)，推導(dǎo)所有輔助色色值，根據(jù)透明度及飽和度疊加，得到色彩使用場景及漸變關(guān)系；提煉營銷體系核心規(guī)律，營銷坑位色彩排布關(guān)系，冷暖色階搭配，引導(dǎo)用戶識別。
營銷坑位色彩排布關(guān)系，冷暖色階搭配，引導(dǎo)用戶識別。（核心樓層為例）
字體體系：延續(xù)京東的字體建設(shè)，延續(xù)性的使用京東朗正和正黑體、加大主字號、精簡字階，拉開字體層級梯度，讓用戶的關(guān)注點(diǎn)更聚焦。針對下沉首頁等重點(diǎn)業(yè)務(wù)采用異形字體，標(biāo)題與利益點(diǎn)字號字重比重更大，強(qiáng)化營銷引導(dǎo)。
icon 體系：線性圖標(biāo)全面 iconfont 化，減少 app 的體積；圖標(biāo)設(shè)計(jì)更簡潔，減少隱喻的手法，讓用戶「一眼即懂」；平衡視覺的體積差，建立一致性的圖標(biāo)繪制尺寸規(guī)范；適當(dāng)?shù)脑O(shè)計(jì)圖標(biāo)互動的微動效，增加趣味性，帶給用戶「愉悅感」。
柵格體系：在屏效留用率上，基于 8.0 基礎(chǔ)定義擴(kuò)展 12 、24 的倍數(shù)關(guān)系，柵格做相應(yīng)的簡化；比如在首頁/搜索/商詳?shù)软撁妫脛h格縮減間距，提高單屏屏效；首頁核心樓層，利用減少間距，放大商品圖片，壓縮整體樓層高度，使核心內(nèi)容更加突出，更便于用戶識別到有效內(nèi)容；
優(yōu)化界面布局，巧用視覺動線，利用人們閱讀的 f 型習(xí)慣，聚焦用戶閱讀內(nèi)容；
素材設(shè)計(jì)體系：一方面，打磨坑位容器，采用動靜態(tài)容器相結(jié)合的手法。另一方面，打磨坑位素材規(guī)范，動靜態(tài)素材結(jié)合使用。同時，嘗試壓縮容器高度，與羚瓏智能設(shè)計(jì)系統(tǒng)深度合作，進(jìn)行素材和頁面的測試，對運(yùn)營設(shè)計(jì)的素材規(guī)范進(jìn)行打磨，在容器高度壓縮的同時提升素材質(zhì)量，保證瀏覽效率不下降。
2. 用戶設(shè)計(jì)策略
細(xì)分用戶群體，增強(qiáng)氛圍感知、讓體驗(yàn)更豐富，層次更清晰。根據(jù)細(xì)分用戶的習(xí)慣性、常識性認(rèn)知，適當(dāng)?shù)匕旬a(chǎn)品進(jìn)行分層，讓可知可感更加貼合用戶；基于全局的統(tǒng)一，有意識細(xì)分用戶的體驗(yàn)，加強(qiáng)各垂類用戶最在意、最可感受的局部差異，從而讓體驗(yàn)更加豐富。
PLUS 會員：提高 PLUS 會員身份認(rèn)同，通過全流程內(nèi) PLUS 會員皮膚、氛圍品牌一致性露出， 強(qiáng)化「PLUS 專屬優(yōu)惠價格計(jì)算」 「PLUS 到手價強(qiáng)化」等權(quán)益的感知，進(jìn)而強(qiáng)化會員身份的感知、加強(qiáng)對 PLUS 會員的認(rèn)同感。
家庭銀發(fā)人群：渲染家庭情感氛圍，強(qiáng)化優(yōu)惠及促銷的利益感知，簡化整體的使用流程，中心化界面采用大字號，為銀發(fā)人群設(shè)計(jì)。
新人用戶：打造新人專屬首頁，強(qiáng)化新用戶引導(dǎo)，多流程定投新人大禮包、發(fā)放新人專屬優(yōu)惠，全方位助力新人用戶轉(zhuǎn)化。
校園用戶：著重打造年輕化的視覺氛圍，拉近與校園用戶的距離。
新興市場用戶：扭轉(zhuǎn)用戶品牌認(rèn)知，基于特定人群偏好的氛圍組織界面，提升流量分發(fā)效率。針對促銷較為敏感的人群，通過設(shè)計(jì)的強(qiáng)調(diào)，加強(qiáng)用戶低價感知，強(qiáng)化活動促銷感知，打消購買顧慮。
3. 認(rèn)知設(shè)計(jì)策略
品牌金字塔理論認(rèn)為關(guān)于品牌認(rèn)知的一系列表象指標(biāo)，如認(rèn)知度、美譽(yù)度、購買率、滿意度、推薦率等，實(shí)際上反映了消費(fèi)者對一個品牌認(rèn)知的深入程度；這個理論，同樣可以適用在產(chǎn)品的用戶認(rèn)知上，認(rèn)知是一切的基礎(chǔ)，產(chǎn)品的用戶認(rèn)知做好了，轉(zhuǎn)化、推薦、滿意度才能做好，能夠被認(rèn)知的產(chǎn)品更容易加強(qiáng)情感連接；反過來，不容易被用戶認(rèn)知、認(rèn)知有負(fù)擔(dān)、信息架構(gòu)表現(xiàn)層復(fù)雜的產(chǎn)品，用戶理解起來可能就有障礙，再疊加情感連接的設(shè)計(jì)，那有可能就是體驗(yàn)的自嗨了。
京東 APP9.0，將針對用戶的主流程，骨骼精細(xì)化重構(gòu)、優(yōu)化流程動線，給用戶提供一致性的體驗(yàn)，讓認(rèn)知減負(fù)。
4. 感受設(shè)計(jì)策略
消費(fèi)者在只有認(rèn)知的時候是理性的，而基于認(rèn)知產(chǎn)生好感的時候就會變成感性。
在簡化用戶的信息認(rèn)知的基礎(chǔ)上，我們將強(qiáng)化打造「京東語言的品牌動效」在核心流程內(nèi)的模塊感知，結(jié)合產(chǎn)品的產(chǎn)品領(lǐng)域動態(tài)銜接的訴求，在設(shè)計(jì)上考慮動態(tài)效果對「整體上下文，故事連接性」的亮點(diǎn)承接，讓用戶理性購物的同時，感受到感性的愉悅。
1. 用心設(shè)計(jì)每一眼感受
設(shè)計(jì)策略：延續(xù)、強(qiáng)化京東品牌，完善并深入刻畫京東設(shè)計(jì)語言；通過設(shè)計(jì)的語言體系，提升屏幕效率，從而帶動流量分發(fā)效率、運(yùn)營效率的提升。
首頁視覺風(fēng)格煥然一新，更靈動、更輕松。（通過 IP 和品牌輔形融入、優(yōu)化色彩體系等方式，強(qiáng)化京東品牌；通過優(yōu)化柵格系統(tǒng)、字體系統(tǒng)、色彩體系、動態(tài)效果，讓界面的信息更加清晰，界面感受更靈動）
2. 用心對待每一個群體
設(shè)計(jì)策略：細(xì)分用戶群體，增強(qiáng)氛圍感知，讓體驗(yàn)更豐富、層次更清晰。
設(shè)計(jì)要點(diǎn)：打造家庭專屬購物體驗(yàn)，和家人一起在京東開心購物與互動。設(shè)計(jì)上通過暖色調(diào)和插畫的鋪陳，渲染家庭情感氛圍；同時，界面采用更大字號，為父母量身定制。
設(shè)計(jì)要點(diǎn)：打造 PLUS 會員中心化與去中心化的購物體驗(yàn)鏈路；通過設(shè)計(jì)走查與用戶測試，填補(bǔ) PLUS 會員在全流程內(nèi)的品牌、信息觸點(diǎn)缺失；同時，從品牌、視覺、交互三個維度，統(tǒng)一設(shè)計(jì)語言、語境、對話方式，讓 PLUS 會員在各個體驗(yàn)觸點(diǎn)都能感受到一致的人機(jī)交互體驗(yàn)。
3. 用心打造每一個場景
設(shè)計(jì)策略：基于京東設(shè)計(jì)語言體系，構(gòu)建場景；骨骼精細(xì)化重構(gòu)主流程，構(gòu)建「場景動線」，讓體驗(yàn)更流暢。
設(shè)計(jì)要點(diǎn)：京東到家、便利店、商超、藥品、鮮花等門店商品全面入駐京東 APP；用戶在主流程內(nèi)即可以直接搜索下單附近的門店商品，下單后最快 15 分鐘內(nèi)便可送達(dá)；由于到家場景依托于主流程，我們在設(shè)計(jì)時期望用戶購物動線能與主流程統(tǒng)一，在商品池打通的基礎(chǔ)上，體驗(yàn)上也能完美融合；同時，設(shè)計(jì)上需結(jié)合 LBS 場景特點(diǎn)，在主購物流程中，強(qiáng)化 LBS 與商品、配送的關(guān)聯(lián)，突出商品促銷與門店配送時效。
4. 用心打造每一條動線-多元化導(dǎo)購
設(shè)計(jì)策略：基于「京東視覺語言體系」，細(xì)分用戶群體構(gòu)建導(dǎo)購方式；根據(jù)用戶特性，強(qiáng)化放大「多元」的體驗(yàn)。
設(shè)計(jì)要點(diǎn)：直播全面滲透，全流程強(qiáng)化直播觸點(diǎn)，增大直播的分發(fā)場景的用戶接觸面積；同時，通過動態(tài)強(qiáng)化、設(shè)計(jì)強(qiáng)化的手法，加大對商家私域直播的引導(dǎo)，完善直播場景的體驗(yàn)。
5. 用心打造每一條動線-購物動線優(yōu)化
設(shè)計(jì)策略：基于「京東視覺語言體系」骨骼精細(xì)化重構(gòu)購物動線，統(tǒng)一交互、視覺語言，視覺降噪，讓認(rèn)知減負(fù)。
6. 用心簡化每一次決策
設(shè)計(jì)策略：關(guān)鍵信息強(qiáng)曝光，統(tǒng)一交互視覺體驗(yàn)；讓認(rèn)知減負(fù)，決策更簡單。
大促氛圍優(yōu)化：在主流程內(nèi)突出大促的氛圍感知，強(qiáng)化搜索列表、商詳?shù)戎髁鞒虄?nèi)的大促氛圍；結(jié)合大促情緒指數(shù)設(shè)計(jì)氛圍，逐漸調(diào)動用戶的熱情。根據(jù)用戶的身份、商品的特性，在設(shè)計(jì)上突出重要信息，例如強(qiáng)化 PLUS 會員促銷腰帶等；同時，借助設(shè)計(jì)規(guī)范和設(shè)計(jì)組件，頁面內(nèi)彈層更加容易拓展、可自由配置。
到手價場景展示：商品詳情、購物車內(nèi)強(qiáng)調(diào)商品到手價，在設(shè)計(jì)上突出優(yōu)惠結(jié)果的傳達(dá)，讓用戶一眼便知。
7. 用心滿足每一次閑暇
融入品牌、IP 元素，用心打造新穎、有趣、持續(xù)的互動玩法。
8. APP9.0
京東 APP9.0 是一個新開始；我們將用未來的時間，用心跟大家詮釋，京東全新的品牌價值主張「不負(fù)每一份熱愛」。用心對待、不負(fù)期待、不負(fù)熱愛，我們在路上……由于篇幅有限，本文就不展開分析詳細(xì)的設(shè)計(jì)方案了。
文章來源：優(yōu)設(shè) 作者：京東設(shè)計(jì)中心JDC
藍(lán)藍(lán)設(shè)計(jì)的小編 http://ssll180.com