阿里巴巴副總裁、中國內(nèi)貿(mào)事業(yè)部總經(jīng)理汪海（花名七公）在對外分享時(shí)提出1688已經(jīng)從信息平臺(tái)時(shí)代進(jìn)入數(shù)字化營銷平臺(tái)時(shí)代，讓1688用戶在平臺(tái)內(nèi)完成營銷和銷售一體化的整個(gè)商業(yè)閉環(huán)。1688的使命也升級(jí)成“在數(shù)字化經(jīng)濟(jì)時(shí)代，讓天下沒有難做的生意！”在全新的業(yè)務(wù)態(tài)勢下，為了更好的滿足用戶需求，阿里巴巴(1688)主客升級(jí)勢在必行。 首頁重要性 首頁既是業(yè)務(wù)分流的中心場景，也是平臺(tái)賣家判斷平臺(tái)打法，買賣家感知平臺(tái)價(jià)值的重要“門面”。從UED專業(yè)視角來看，首頁是定義APP內(nèi)體驗(yàn)范式及視覺風(fēng)格的核心場景。 如何改？ 盤點(diǎn)現(xiàn)象，定義問題1、滿足業(yè)務(wù)新的訴求：平臺(tái)階段性戰(zhàn)略不同，1688從曾經(jīng)的信息平臺(tái)過渡到交易平臺(tái)，如今向數(shù)字營銷平臺(tái)轉(zhuǎn)型，舊的內(nèi)容框架難以承載業(yè)務(wù)的新發(fā)展；2、提升分流質(zhì)量：從過去的數(shù)據(jù)效果來看，需重新判斷，在For特色采購需求和服務(wù)大面采購需求之前，如何平衡調(diào)優(yōu)，提升首頁的流量轉(zhuǎn)化效能； 3、體驗(yàn)升級(jí)：移動(dòng)端APP天然生長在手機(jī)系統(tǒng)上，系統(tǒng)的風(fēng)格更迭也牽動(dòng)著APP的變化和升級(jí)。在8.0升級(jí)前，1688APP存在著5.0、6.0、7.0多個(gè)由不同設(shè)計(jì)師在不同時(shí)間點(diǎn)所設(shè)計(jì)的場景，到8.0，APP趨待從框架層、表現(xiàn)層以及品牌等方面進(jìn)行統(tǒng)一及升級(jí)。 改版策略 一、聚焦用戶價(jià)值，基于業(yè)務(wù)打法升級(jí)內(nèi)容框架； APP升級(jí)前與業(yè)務(wù)對焦，我們收到三點(diǎn)訴求：1、用算法的能力去承接首頁買家的轉(zhuǎn)化；2、搜索是B類買家找品、選商的核心工具，需要引導(dǎo)更多用戶更高頻地使用搜索；3、互聯(lián)網(wǎng)流量紅利到瓶頸期，需要進(jìn)一步做好新用戶的承接。 在內(nèi)容框架制定上，我們聚焦用戶價(jià)值，舍掉7.0時(shí)的內(nèi)容版塊個(gè)性化，聚焦做商品的個(gè)性化，僅保留For大面用戶的營銷、內(nèi)容場景，提升算法推薦區(qū)的曝光率，以此區(qū)域的商品做首頁的直接轉(zhuǎn)化。 二、弱化容器，突出內(nèi)容，塑造心智 1、視覺容器升級(jí) 做平視覺框架，選擇“大間距分隔”，為內(nèi)容留出干凈、簡潔的視覺空間。 精簡內(nèi)容刪格，避免形式給用戶閱讀帶來的負(fù)擔(dān)。 提高留白率，提升頁面整體的透氣性，為內(nèi)容留出更清爽、輕松的閱讀空間。 拉大字體大小的梯度，加重字體顏色梯度，提升文字的清晰度和可讀性。 2、強(qiáng)調(diào)版塊特性，塑造買家心智感知，達(dá)成業(yè)務(wù)目標(biāo)。 強(qiáng)化搜索：7.0時(shí)，曾上線過將搜索做到“主觀上覺得顯眼”的測試方案，但相較于之前沉浸式搜索，數(shù)據(jù)幾乎沒變化。 8.0階段，從視覺表現(xiàn)層跳出看：“強(qiáng)化搜索”并不意味把搜索設(shè)計(jì)得更“顯眼”，而是達(dá)成“讓更多用戶更高頻地使用搜索”這一目標(biāo)。(如提升搜索底紋詞、熱搜詞精準(zhǔn)度和吸引力、增加搜索布點(diǎn)等，都可能助力達(dá)成業(yè)務(wù)目標(biāo))基于用戶單手操作時(shí)，拇指在屏幕不同區(qū)域的點(diǎn)擊體驗(yàn)，選擇將搜索組件移到更易于點(diǎn)擊、視線更聚焦的屏幕位置，上線后數(shù)據(jù)提升非常明顯。 Banner升級(jí)：7.0的Banner畫面豐富度高，加之描述字段多，用戶閱讀有一定成本，較難在3秒內(nèi)掌握全 Banner的信息。此外，相比于C類用戶，B類用戶會(huì)更偏理性，我們選擇以更冷靜、克制的“視覺語氣”與B類商人對話，而非渲染氛圍引導(dǎo)點(diǎn)擊。(上線后，同樣的活動(dòng)內(nèi)容，按新、老兩版規(guī)范設(shè)計(jì)投放兩套Banner，新版較老版UV CTR約高出48%) For新人：以差異化的利益、個(gè)性化秒殺、新人攻略做用戶的承接。 營銷場景心智差異化表達(dá)：營銷由伙拼爆品、天天特賣兩部分組成，我們判斷爆品主打心智為“賣得火爆又便宜”，特賣主打心智是“限時(shí)限量搶便宜”，選擇將兩個(gè)區(qū)塊最關(guān)鍵的特質(zhì)做強(qiáng)化表達(dá)。 內(nèi)容場景（直播）動(dòng)態(tài)化、互動(dòng)感、實(shí)時(shí)性傳遞：抽象出直播間的方形版面+內(nèi)容疊加形式來設(shè)計(jì)，大坑位以動(dòng)圖傳遞給用戶直播的動(dòng)態(tài)感，以紅包、個(gè)性化商品的多維實(shí)時(shí)輪播氣泡傳達(dá)直播的互動(dòng)感、實(shí)時(shí)性。 三、升級(jí)品牌，貫穿APP場景 為什么要做APP應(yīng)用內(nèi)的品牌設(shè)計(jì)？ 品牌設(shè)計(jì)是將內(nèi)容層(平臺(tái)價(jià)值)與接收層(用戶)做柔性鏈接的一環(huán)，譬如在APP場景中，由于有商品、商家、商機(jī)等“干貨”，即使不特意做品牌設(shè)計(jì)，用戶也能與平臺(tái)保持剛性、穩(wěn)定的連接；而反過來看，品牌做得很好，但平臺(tái)沒有“干貨”，用戶也不會(huì)單奔著品牌設(shè)計(jì)來平臺(tái)。我們認(rèn)為，做APP應(yīng)用內(nèi)的品牌設(shè)計(jì)，核心價(jià)值在于助力用戶認(rèn)知到平臺(tái)特性，感知平臺(tái)價(jià)值。從設(shè)計(jì)專業(yè)視角來看，APP應(yīng)用內(nèi)的品牌設(shè)計(jì)，有利于定義并統(tǒng)一APP內(nèi)體驗(yàn)范式及視覺風(fēng)格，保障用戶的體驗(yàn)。 怎么做？ 每位設(shè)計(jì)師所處的業(yè)務(wù)環(huán)境不一樣，解決問題策略和方式也千差萬別，在APP應(yīng)用內(nèi)的品牌設(shè)計(jì)中，個(gè)人選擇是通過厘清內(nèi)容層(平臺(tái))多層次訴求及For用戶的價(jià)值點(diǎn)，認(rèn)知、感知接收層(用戶)特質(zhì)及內(nèi)容傾向，基于內(nèi)容層底料+接收層用戶特質(zhì)確定設(shè)計(jì)底層范式，塑造用戶感知。 1、圖形范式 在阿里巴巴商業(yè)操作系統(tǒng)中，1688聚焦做B類業(yè)務(wù)，直接服務(wù)對象是B類買賣家，業(yè)務(wù)細(xì)分出檔口尖貨、淘工廠、企業(yè)采購、淘貨源、微商代發(fā)、工業(yè)品超級(jí)店、跨境專供等，這些都是具有一定B類特質(zhì)及體量感的場景，故在APP業(yè)務(wù)門洞及常規(guī)圖標(biāo)的表達(dá)上，基于扁平vs寫實(shí)、輕盈vs厚重、活潑vs穩(wěn)重的維度，圖形選定輕擬物、弱對比的設(shè)計(jì)范式，塑造B類場景For買家的沉穩(wěn)、份量感。 此外，異常/空白場景也是平臺(tái)與用戶互動(dòng)，塑造用戶感知品牌的機(jī)會(huì)。在空態(tài)情感化插圖部分的繪制上，力求塑形出有份量、易讀、有意味的場景以示對應(yīng)空態(tài)，并佐以輕微動(dòng)效，增強(qiáng)空態(tài)的互動(dòng)感。（在收藏夾、我的供應(yīng)商等工具型場景，基于空態(tài)信息的價(jià)值考慮，將空態(tài)與工具新手引導(dǎo)相結(jié)合，并未做常規(guī)的插圖)。 2、色彩范式 標(biāo)準(zhǔn)色 隨著業(yè)務(wù)的發(fā)展，我們基于新的業(yè)務(wù)態(tài)勢，豐富了1688品牌色，以橙紅色作營銷、利益屬性的表達(dá)，以商務(wù)藍(lán)作服務(wù)、數(shù)字化屬性的表達(dá)，以金色作權(quán)益屬性的表達(dá)。 輔助色 在實(shí)際產(chǎn)品設(shè)計(jì)中，品牌色并不足以表達(dá)各類業(yè)務(wù)場景中的多層次的內(nèi)容。因此，基于VI品牌色，裂變出不同重量、層次更豐富的品牌輔助色。 場景用色規(guī)則 基于買家角色及場景特征定義用色規(guī)則。 1688色域及選色示意 以HSB模式劃定出偏沉穩(wěn)的1688色域，在日常banner及業(yè)務(wù)場景中可靈活取用。 3、動(dòng)效范式及應(yīng)用 動(dòng)效是設(shè)計(jì)的重要手段，良好的動(dòng)效表達(dá)能增強(qiáng)信息表達(dá)強(qiáng)度，清晰信息層級(jí)關(guān)系，提升用戶體驗(yàn)的舒適度。做動(dòng)效之前，將APP信息結(jié)構(gòu)平整到三層，保障內(nèi)容在頁面簡潔明暢地呈現(xiàn)。 在實(shí)際落地中，動(dòng)效實(shí)現(xiàn)非常依賴技術(shù)資源，故動(dòng)效設(shè)計(jì)之前，應(yīng)考慮一個(gè)前提: 動(dòng)效設(shè)計(jì)增益內(nèi)容表達(dá)，價(jià)值可論證，效果可衡量；同時(shí)，考慮接收層用戶的商人特質(zhì)，我們期望動(dòng)效表達(dá)給用戶以穩(wěn)定感，并且在設(shè)計(jì)表達(dá)上能兼顧效率。 在動(dòng)效呈現(xiàn)部分，主要以緩入、緩出、緩動(dòng)結(jié)合曲線來調(diào)節(jié)，總的來說，內(nèi)容入場時(shí)節(jié)奏稍慢，速度緩，分層加載，交代清信息在Z軸上的層次關(guān)系，內(nèi)容出場時(shí)節(jié)奏快，速度快，內(nèi)容層級(jí)不用再做分層消失。 APP內(nèi)典型場景的動(dòng)效案例及演示。 4、業(yè)務(wù)品牌的價(jià)值傳遞 此外，除以上在圖形、色彩、動(dòng)效等基礎(chǔ)維度收口外，我們也需要將業(yè)務(wù)品牌放聲給買賣家，以達(dá)成業(yè)務(wù)品牌的價(jià)值傳遞。在1688向數(shù)字營銷平臺(tái)轉(zhuǎn)型的階段，業(yè)務(wù)提出了“源頭廠貨通天下”的口號(hào)，我們通過設(shè)計(jì)手段，利用APP開機(jī)啟動(dòng)頁及下拉刷新的空間，將“貨通天下”的概念強(qiáng)化表達(dá)。 結(jié)語 以上便是此次首頁改版階段性的記錄。在8.0的視覺體系里，為更好地突出內(nèi)容，視覺容器選擇盡可能做輕、做平，以冷靜、克制的“視覺語氣”與B類商人對話——當(dāng)然，這是設(shè)計(jì)師和業(yè)務(wù)同學(xué)階段性的選擇。后續(xù)品牌的完善及產(chǎn)品的優(yōu)化，仍需結(jié)合數(shù)據(jù)持續(xù)打磨。