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