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