如果您想訂閱本博客內容，每天自動發(fā)到您的郵箱中， 請點這里

阿里巴巴副總裁、中國內貿事業(yè)部總經理汪海在對外分享時提出 1688 已經從信息平臺時代進入數(shù)字化營銷平臺時代，讓 1688 用戶在平臺內完成營銷和銷售一體化的整個商業(yè)閉環(huán)。1688 的使命也升級成「在數(shù)字化經濟時代，讓天下沒有難做的生意！」在全新的業(yè)務態(tài)勢下，為了更好的滿足用戶需求，阿里巴巴（1688）主客升級勢在必行。

首頁重要性

首頁既是業(yè)務分流的中心場景，也是平臺賣家判斷平臺打法，買賣家感知平臺價值的重要「門面」。從 UED 專業(yè)視角來看，首頁是定義 APP 內體驗范式及視覺風格的核心場景。

如何改？

1. 盤點現(xiàn)象，定義問題

滿足業(yè)務新的訴求：平臺階段性戰(zhàn)略不同，1688 從曾經的信息平臺過渡到交易平臺，如今向數(shù)字營銷平臺轉型，舊的內容框架難以承載業(yè)務的新發(fā)展。

提升分流質量：從過去的數(shù)據(jù)效果來看，需重新判斷，在 For 特色采購需求和服務大面采購需求之前，如何平衡調優(yōu)，提升首頁的流量轉化效能。

體驗升級：移動端 APP 天然生長在手機系統(tǒng)上，系統(tǒng)的風格更迭也牽動著 APP 的變化和升級。在 8.0 升級前，1688APP 存在著 5.0、6.0、7.0 多個由不同設計師在不同時間點所設計的場景，到8.0，APP 趨待從框架層、表現(xiàn)層以及品牌等方面進行統(tǒng)一及升級。

改版策略

1. 聚焦用戶價值，基于業(yè)務打法升級內容框架

APP 升級前與業(yè)務對焦，我們收到三點訴求：

• 用算法的能力去承接首頁買家的轉化；
• 搜索是 B 類買家找品、選商的核心工具，需要引導更多用戶更高頻地使用搜索；
• 互聯(lián)網(wǎng)流量紅利到瓶頸期，需要進一步做好新用戶的承接。

在內容框架制定上，我們聚焦用戶價值，舍掉 7.0 時的內容版塊個性化，聚焦做商品的個性化，僅保留For大面用戶的營銷、內容場景，提升算法推薦區(qū)的曝光率，以此區(qū)域的商品做首頁的直接轉化。

2. 弱化容器，突出內容，塑造心智

視覺容器升級

做平視覺框架，選擇「大間距分隔」，為內容留出干凈、簡潔的視覺空間。

精簡內容柵格，避免形式給用戶閱讀帶來的負擔。

提高留白率，提升頁面整體的透氣性，為內容留出更清爽、輕松的閱讀空間。

拉大字體大小的梯度，加重字體顏色梯度，提升文字的清晰度和可讀性。

強調版塊特性，塑造買家心智感知，達成業(yè)務目標

強化搜索：7.0時，曾上線過將搜索做到「主觀上覺得顯眼」的測試方案，但相較于之前沉浸式搜索，數(shù)據(jù)幾乎沒變化。

8.0 階段，從視覺表現(xiàn)層跳出看：「強化搜索」并不意味把搜索設計得更「顯眼」，而是達成「讓更多用戶更高頻地使用搜索」這一目標。如提升搜索底紋詞、熱搜詞精準度和吸引力、增加搜索布點等，都可能助力達成業(yè)務目標。

基于用戶單手操作時，拇指在屏幕不同區(qū)域的點擊體驗，選擇將搜索組件移到更易于點擊、視線更聚焦的屏幕位置，上線后數(shù)據(jù)提升非常明顯。

Banner 升級：7.0 的 Banner 畫面豐富度高，加之描述字段多，用戶閱讀有一定成本，較難在 3 秒內掌握全 Banner 的信息。此外，相比于 C 類用戶，B 類用戶會更偏理性，我們選擇以更冷靜、克制的「視覺語氣」與 B 類商人對話，而非渲染氛圍引導點擊。（上線后，同樣的活動內容，按新、老兩版規(guī)范設計投放兩套 Banner，新版較老版 UV CTR 約高出 48%）

For 新人：以差異化的利益、個性化秒殺、新人攻略做用戶的承接。

營銷場景心智差異化表達：營銷由伙拼爆品、天天特賣兩部分組成，我們判斷爆品主打心智為「賣得火爆又便宜」，特賣主打心智是「限時限量搶便宜」，選擇將兩個區(qū)塊最關鍵的特質做強化表達。

內容場景（直播）動態(tài)化、互動感、實時性傳遞：抽象出直播間的方形版面+內容疊加形式來設計，大坑位以動圖傳遞給用戶直播的動態(tài)感，以紅包、個性化商品的多維實時輪播氣泡傳達直播的互動感、實時性。

3. 升級品牌，貫穿APP場景

為什么要做APP應用內的品牌設計？

品牌設計是將內容層（平臺價值）與接收層（用戶）做柔性鏈接的一環(huán)，譬如在 APP 場景中，由于有商品、商家、商機等「干貨」，即使不特意做品牌設計，用戶也能與平臺保持剛性、穩(wěn)定的連接。而反過來看，品牌做得很好，但平臺沒有「干貨」，用戶也不會單奔著品牌設計來平臺。我們認為，做 APP 應用內的品牌設計，核心價值在于助力用戶認知到平臺特性，感知平臺價值。從設計專業(yè)視角來看，APP 應用內的品牌設計，有利于定義并統(tǒng)一 APP 內體驗范式及視覺風格，保障用戶的體驗。

怎么做？

每位設計師所處的業(yè)務環(huán)境不一樣，解決問題策略和方式也千差萬別，在 APP 應用內的品牌設計中，個人選擇是通過厘清內容層（平臺）多層次訴求及 For 用戶的價值點，認知、感知接收層（用戶）特質及內容傾向，基于內容層底料+接收層用戶特質確定設計底層范式，塑造用戶感知。

1. 圖形范式

在阿里巴巴商業(yè)操作系統(tǒng)中，1688 聚焦做 B 類業(yè)務，直接服務對象是 B 類買賣家，業(yè)務細分出檔口尖貨、淘工廠、企業(yè)采購、淘貨源、微商代發(fā)、工業(yè)品超級店、跨境專供等，這些都是具有一定 B 類特質及體量感的場景，故在 APP 業(yè)務門洞及常規(guī)圖標的表達上，基于扁平 vs 寫實、輕盈 vs 厚重、活潑 vs 穩(wěn)重的維度，圖形選定輕擬物、弱對比的設計范式，塑造 B 類場景 For 買家的沉穩(wěn)、份量感。

此外，異常/空白場景也是平臺與用戶互動，塑造用戶感知品牌的機會。在空態(tài)情感化插圖部分的繪制上，力求塑形出有份量、易讀、有意味的場景以示對應空態(tài)，并佐以輕微動效，增強空態(tài)的互動感。（在收藏夾、我的供應商等工具型場景，基于空態(tài)信息的價值考慮，將空態(tài)與工具新手引導相結合，并未做常規(guī)的插圖。）

2. 色彩范式

標準色

隨著業(yè)務的發(fā)展，我們基于新的業(yè)務態(tài)勢，豐富了 1688 品牌色，以橙紅色作營銷、利益屬性的表達，以商務藍作服務、數(shù)字化屬性的表達，以金色作權益屬性的表達。

輔助色

在實際產品設計中，品牌色并不足以表達各類業(yè)務場景中的多層次的內容。因此，基于 VI 品牌色，裂變出不同重量、層次更豐富的品牌輔助色。

場景用色規(guī)則

基于買家角色及場景特征定義用色規(guī)則。

1688色域及選色示意

以 HSB 模式劃定出偏沉穩(wěn)的 1688 色域，在日常 banner 及業(yè)務場景中可靈活取用。

3. 動效范式及應用

動效是設計的重要手段，良好的動效表達能增強信息表達強度，清晰信息層級關系，提升用戶體驗的舒適度。做動效之前，將 APP 信息結構平整到三層，保障內容在頁面簡潔明暢地呈現(xiàn)。

在實際落地中，動效實現(xiàn)非常依賴技術資源，故動效設計之前，應考慮一個前提：動效設計增益內容表達，價值可論證，效果可衡量；同時，考慮接收層用戶的商人特質，我們期望動效表達給用戶以穩(wěn)定感，并且在設計表達上能兼顧效率。

在動效呈現(xiàn)部分，主要以緩入、緩出、緩動結合曲線來調節(jié)，總的來說，內容入場時節(jié)奏稍慢，速度緩，分層加載，交代清信息在 Z 軸上的層次關系，內容出場時節(jié)奏快，速度快，內容層級不用再做分層消失。

APP 內典型場景的動效案例及演示：

4. 業(yè)務品牌的價值傳遞

此外，除以上在圖形、色彩、動效等基礎維度收口外，我們也需要將業(yè)務品牌放聲給買賣家，以達成業(yè)務品牌的價值傳遞。在 1688 向數(shù)字營銷平臺轉型的階段，業(yè)務提出了「源頭廠貨通天下」的口號，我們通過設計手段，利用 APP 開機啟動頁及下拉刷新的空間，將「貨通天下」的概念強化表達。

結語

以上便是此次首頁改版階段性的記錄。在 8.0 的視覺體系里，為更好地突出內容，視覺容器選擇盡可能做輕、做平，以冷靜、克制的「視覺語氣」與 B 類商人對話。當然，這是設計師和業(yè)務同學階段性的選擇。后續(xù)品牌的完善及產品的優(yōu)化，仍需結合數(shù)據(jù)持續(xù)打磨。

藍藍設計( www.cqzjtgb.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務。