民宿預(yù)訂平臺的首頁設(shè)計如何精準(zhǔn)捕捉年輕用戶？木鳥、途家、美團(tuán)三大平臺通過差異化的首頁布局，分別滿足了00后的場景化需求、家庭度假的深度體驗(yàn)和95后的低價偏好。本文將深入拆解各家平臺的流量分發(fā)邏輯，揭示從搜索框到金剛區(qū)的每一個設(shè)計細(xì)節(jié)，如何成為影響用戶決策的關(guān)鍵因素。

首頁作為每個平臺的門面，不僅是形象的體現(xiàn)，也是所有業(yè)務(wù)的入口、用戶的必經(jīng)之路。不同功能的App有著不一樣的首頁模塊，選擇一種適合產(chǎn)品本身的首頁展示方式非常重要。國內(nèi)民宿預(yù)訂平臺們，又是如何通過APP首頁設(shè)置實(shí)現(xiàn)增長的？

木鳥、途家、美團(tuán)用戶群體差異

開始進(jìn)行APP首頁對比分析之前，我們先看下木鳥、途家、美團(tuán)用戶的差異。

木鳥民宿近年的年度報告中多次提到，00后用戶占比59%。從途家民宿五一客群看，報告中提到：“00后”和“80后”是小城民宿消費(fèi)的兩大主力，預(yù)訂量占比都達(dá)到24%。美團(tuán)旅行清明報告中提到，“95后”占比達(dá)到48%。

三大民宿預(yù)訂平臺紛紛聚焦95后及00后——那些已經(jīng)不滿足于“酒店住宿”邏輯，對住宿體驗(yàn)產(chǎn)生興趣的年輕用戶群。

據(jù)馬蜂窩數(shù)據(jù)，年輕用戶群基礎(chǔ)功能型的“硬性消費(fèi)”占比從2021年約70%降至2025年約50%，而精神體驗(yàn)型的“彈性消費(fèi)”則從約28%升至約42%，沉浸式體驗(yàn)?zāi)暝鏊俪^30%。千人千面的消費(fèi)需求正在倒逼供給側(cè)從標(biāo)準(zhǔn)化產(chǎn)品轉(zhuǎn)向個性化、場景化供給。

回顧民宿市場十余年發(fā)展，一條清晰脈絡(luò)是“加法邏輯”：從最初的農(nóng)家樂、日租房，再到網(wǎng)紅特色民宿，再到各種“民宿+”的挖掘。用戶不再滿足于單純的民宿入住，開始期待有更多住宿功能場景之外的體驗(yàn)。

木鳥的細(xì)分場景、途家民宿的度假需求、美團(tuán)民宿的低價體驗(yàn)，都不是標(biāo)準(zhǔn)化復(fù)制，而是根據(jù)各自不同的定位、用戶、體驗(yàn)需求定制設(shè)計。本質(zhì)上，是回答清楚一個問題：用戶在什么場景下住民宿，旅游出片、攜寵出游、周末度假、同學(xué)聚會，不同場景對應(yīng)不同需求，最終催生出不一樣的產(chǎn)品設(shè)計。

從首頁設(shè)計看流量分發(fā)邏輯

研究表明，較少的選擇會讓用戶更愉悅一些。木鳥、途家、美團(tuán)作為垂類民宿預(yù)訂平臺，核心目標(biāo)非常直接，省去了多元業(yè)務(wù)的流量取舍，流量分發(fā)和路徑非常清晰。

從三家民宿預(yù)訂平臺的首頁來看，首頁的結(jié)構(gòu)制定邏輯決定了首屏內(nèi)容是權(quán)重最高的，越往下權(quán)重越低，這是一種頭重腳輕的布局結(jié)構(gòu)。基于這種邏輯，視覺效果的強(qiáng)弱也是由上到下衰減的，而不是下方權(quán)重低的模塊反而視覺最突出。

木鳥、途家、美團(tuán)APP的首頁都把最核心的民宿預(yù)訂按鈕放到了首頁首屏中心位置，重要屬性依次下降。木鳥民宿區(qū)別于途家和美團(tuán)民宿的點(diǎn)在于，木鳥民宿只有首屏，沒有下拉界面。這樣做的好處有二：一是用戶目光更聚焦，核心首屏只保留了必要的預(yù)訂功能和服務(wù)展示，減少用戶在首屏階段的跳出；第二點(diǎn)則是避免了二屏往后的流量衰減，對一個垂類平臺來說，后續(xù)屏的設(shè)置意義不大，用戶的核心目的就是為了訂民宿。

下面筆者結(jié)合各家APP的詳細(xì)路徑來詳細(xì)拆解。

（木鳥民宿）

木鳥民宿首頁，重要的分流模塊為：搜索、訂民宿、二級導(dǎo)航、金剛區(qū)，分發(fā)邏輯由明確需求和隱形需求兩部分組成。

明確需求：用戶有明確目的，通過城市及地標(biāo)定位直接查找民宿；隱形需求：根據(jù)用戶興趣不同，潛在需要的分發(fā)邏輯，例如周末出游、人氣好房、寵物出游等。

明確需求各家差異不大，核心差異點(diǎn)在隱形需求。首頁的又一個關(guān)鍵目標(biāo)，是為不同風(fēng)格不同訴求的用戶鋪設(shè)合理的下單路徑。

按入住目的來分，有的用戶是精準(zhǔn)型用戶，很清楚自己要住在哪里要哪天出行，這樣的結(jié)構(gòu)就方便用戶一次篩選入離時間、地標(biāo)位置等；有的用戶是半精準(zhǔn)用戶，知道自己要去哪個城市但不具體，就可以通過目標(biāo)推薦給與用戶選擇。

按出行喜好來分，有的用戶是問題導(dǎo)向型，只要有地理位置符合的民宿就可以入住；有的用戶是場景指向或特殊需求，比如攜寵出行、出片等等。

木鳥民宿的目的分區(qū)相對清晰，沒有重復(fù)的部分。

（途家民宿）

途家民宿的首頁功能則相對繁瑣，各種需求穿插出現(xiàn)。明確需求部分和木鳥民宿的邏輯相同，不同點(diǎn)在于宮格設(shè)置。途家民宿的宮格重點(diǎn)在平臺側(cè)的套餐推廣和會員，這個區(qū)別或許是由于途家民宿營收壓力增大，流量下滑導(dǎo)致單純的訂房傭金收入下滑，不足以支撐途家民宿的自造血，從而平臺側(cè)變現(xiàn)需求大。

（美團(tuán)民宿）

美團(tuán)民宿首頁沒有平臺業(yè)務(wù)需求的設(shè)計，單純的展示內(nèi)容資源。首頁結(jié)構(gòu)單一，視覺美觀，但屏幕效率低。

用戶為什么要留在這里？

從三家民宿預(yù)訂平臺的首頁結(jié)構(gòu)拆解可以看出，木鳥民宿用戶側(cè)和平臺側(cè)設(shè)計相對平均，途家民宿重平臺需求，美團(tuán)民宿重用戶需求。這與各平臺的運(yùn)營現(xiàn)狀緊密相關(guān)。

木鳥和途家是中國最早的那批民宿平臺，在2017年之后進(jìn)入長時間的木途美三大時期。但在2020年途家民宿關(guān)停20城直營房源之后，途家民宿的現(xiàn)金流和營收壓力驟然增加，攜程商旅流量下滑加之重心轉(zhuǎn)向跨境游，途家民宿可謂雪上加霜，難以獨(dú)立行走的途家靠自身引流的傭金費(fèi)用并不足以支撐商業(yè)運(yùn)轉(zhuǎn)，從而平臺側(cè)變現(xiàn)需求增加，這也是途家在首頁中增加套餐和會員業(yè)務(wù)的最大因素。

木鳥民宿自2020年實(shí)現(xiàn)連續(xù)盈利后，盡管是一個獨(dú)立運(yùn)營的平臺，但80%的自有流量讓木鳥實(shí)現(xiàn)了良好的“流量-訂單-擴(kuò)張”的循環(huán)，網(wǎng)紅民宿以及延伸的細(xì)分場景成為平臺引以為傲的產(chǎn)品力，這也使得木鳥兼具用戶體驗(yàn)和營收增長的雙端利好條件。

美團(tuán)民宿在首頁舍棄了平臺側(cè)內(nèi)容，主要和美團(tuán)本地生活的發(fā)展息息相關(guān)。自外賣大戰(zhàn)開始以來，美團(tuán)確立的就是高頻帶低頻的戰(zhàn)略，酒旅的變現(xiàn)壓力更多的放在主站美團(tuán)旅行板塊，對獨(dú)立APP的要求并不大。

首頁設(shè)計的最終目標(biāo)還是要圍繞讓用戶多逛逛，多看些民宿，以更少的點(diǎn)擊完成轉(zhuǎn)化。除設(shè)計外，重要的還是民宿平臺的房源和服務(wù)。木鳥民宿依托特色民宿體驗(yàn)場景守住核心用戶，途家期待通過家庭度假需求彌補(bǔ)商旅流量流失及特色體驗(yàn)短板，美團(tuán)聚焦絕對低價民宿削弱品質(zhì)缺失。因此，真正能讓用戶留下來的，仍在于平臺能否在民宿市場的發(fā)展更新中，找到不可替代的生態(tài)位。

轉(zhuǎn)載自：人人都是產(chǎn)品經(jīng)理

蘭亭妙微（藍(lán)藍(lán)設(shè)計）www.payeee.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗(yàn)設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

一、列表頁的基本認(rèn)識

列表頁就是以展示列表 List 為主的頁面，所以我們需要先理解列表是什么。

列表源自編程術(shù)語，是一種數(shù)據(jù)結(jié)構(gòu)，即按照線性順序排列的數(shù)據(jù)項集合（有限序列）。說人話，就是按照一定順序展示數(shù)據(jù)的形式。

我們再用UI設(shè)計的角度來理解它，可以把它分為 “列” 和 “表” 兩個部分。我們先理解表，表就是“表格”的意思，這也是計算機(jī)中存儲數(shù)據(jù)最基礎(chǔ)的形式（關(guān)系型），我們在頁面中看見的多數(shù)內(nèi)容都以這種形式記錄。

列則是動詞 “排列” 的意思，用一定的邏輯、方法、順序?qū)⒈砀衽帕谐鰜怼＿@種排列是要經(jīng)過設(shè)計和調(diào)整的，不會和原來的表格完全一致。

也就是說，列表設(shè)計是種對表格的轉(zhuǎn)換，是種對數(shù)據(jù)的可視化呈現(xiàn)形式。

之所以要強(qiáng)調(diào)這個，就是因?yàn)橄胍龊昧斜碓O(shè)計就離不開對數(shù)據(jù)的理解，一個專業(yè)的列表設(shè)計不是做一個好看整齊的重復(fù)性組件，而是將數(shù)據(jù)表格清晰有效的反映出來。

數(shù)據(jù)表格對列表的影響包含下面幾個要素：

1. 屬性字段
2. 字段值
3. 字段狀態(tài)

1. 屬性字段的影響

屬性字段就是列表內(nèi)要放的具體信息點(diǎn)，也就是數(shù)據(jù)表格中的表頭。比如一個商品列表中，要放商品圖片、商品名、品牌標(biāo)簽、節(jié)日標(biāo)簽、營銷標(biāo)簽、銷售量、好評率、價格、原價……每個獨(dú)立的信息就是一個字段。

而一個真實(shí)的項目列表內(nèi)，往往會包含非常多的字段，所以開始設(shè)計前要先搞清楚數(shù)量和明細(xì)，以及它們各自的含義。一方面是設(shè)計中不能有字段的缺失，另一方面是字段中包含對應(yīng)的權(quán)重、分類，是設(shè)計前必須要確定的信息。

比如下面的列表內(nèi)容，就包含了大量的字段信息，而這些字段既有權(quán)重的強(qiáng)弱，也有分類的整理，是經(jīng)過設(shè)計師的專業(yè)分析和設(shè)計的結(jié)果。

2. 屬性值的影響

屬性值就是每個屬性具體放什么內(nèi)容，有什么限制。比如商品名，肯定是放商品名稱的文本，但文本一般是什么樣的，最長支持多少字，這些就是屬性值的基本信息。

屬性值在開發(fā)環(huán)境中只能是文本（字符串），但在設(shè)計中這個值就不一定只是文本，可能還是圖片、圖標(biāo)、符號等內(nèi)容，中間會有轉(zhuǎn)化過程。比如用戶列表中，用戶有不同的 VIP 等級，數(shù)據(jù)中記錄的等級肯定是文本性質(zhì)的，而展示出來卻可能是專屬的黃金、白銀、青銅圖標(biāo)。

屬性值的認(rèn)識同樣非常重要，決定了列表的設(shè)計是否準(zhǔn)確，符合產(chǎn)品的規(guī)劃。

3. 字段狀態(tài)的影響

最后字段的狀態(tài)，就是字段展示的邏輯，簡單解釋起來就是字段什么情況下出現(xiàn)，什么時候隱藏，出現(xiàn)的時候顯示什么內(nèi)容這三個問題。

比如美團(tuán)的列表中，有美團(tuán)商家列表中，運(yùn)輸標(biāo)簽有美團(tuán)快送、專送、全城送、商家自配等不同類型，而下方的配送時間也在樣式上會有差異，這就是對字段狀態(tài)的表達(dá)。

而越是復(fù)雜的列表，包含的字段狀態(tài)差異就越大，往往會直接影響列表的樣式，所以設(shè)計過程中就要體現(xiàn)盡可能多的樣式狀態(tài)，也就是設(shè)計它的不同變體，確保在各種場景中它們能正確顯示。

想要設(shè)計好列表，就要面對上面提到的三個問題。優(yōu)秀的列表不止是一種視覺結(jié)果，而是一種能兼容相關(guān)數(shù)據(jù)展示的容器規(guī)則。

二、列表頁的框架布局

接著我們來理解列表頁的主要框架和布局形式，入門它的基本設(shè)計要點(diǎn)。

首先列表頁不是只有列表一種組件，多數(shù)還會包含對列表數(shù)據(jù)進(jìn)行搜索、篩選、排序的組件。

除此之外，部分重要的列表頁還可能在頂部放運(yùn)營模塊，用來展示一些熱門推薦內(nèi)容或單純作為廣告位。

運(yùn)營內(nèi)容放頂部且篇幅較小是因?yàn)轫撁嫘问降南拗疲荒茉陧敳糠盘鄡?nèi)容讓列表被頂?shù)降诙寥ァＫ阅壳暗脑O(shè)計為了更好的塞入內(nèi)容，就會選擇在列表中插入其它數(shù)據(jù)，比如純運(yùn)營廣告，也可能是內(nèi)容推薦，或者是模塊入口等。

總結(jié)起來，列表頁的主要框架就是頂部搜索欄、特殊模塊、篩選排序欄、列表區(qū)域的組合。

而最關(guān)鍵的列表區(qū)域，可以使用不同的列表來展示信息，我們可以簡單分成“單列”和“多列”兩個布局大類。下面我們就分別對這兩個分類類型做個解析。

1. 單列列表

單列列表就是一行只有一個數(shù)據(jù)對象的列表形式。而單列列表模式中還區(qū)分兩種類型的列表，一種是引導(dǎo)型，一種是展示型。

引導(dǎo)型就是引導(dǎo)用戶點(diǎn)擊進(jìn)入查看詳情，比如商品列表、酒店列表，是為了讓我們在列表中找到感興趣的內(nèi)容點(diǎn)擊進(jìn)入詳情頁面。

而展示型，就是直接在列表中展示主要信息，讓用戶直接順著列表的順序查看主要的內(nèi)容，而不是進(jìn)入到詳情頁查看。最有代表性的展示型列表，就是朋友圈這類動態(tài)列表了。

單列列表對單個數(shù)據(jù)對象的展示空間較大，但是單屏瀏覽數(shù)據(jù)量就會減少，適用于數(shù)據(jù)對象字段較多的場景。

2. 多列列表

多列列表就是一行會展示多個數(shù)據(jù)對象的列表形式。通常移動端的多列列表只有兩列，在少數(shù)情況下才會出現(xiàn)三列。而兩列模式中，也包含兩種布局形式，一種是等高展示，一種是瀑布流。

等高展示就是列表內(nèi)數(shù)據(jù)對象的高度是保持一致的，每個數(shù)據(jù)對象的尺寸統(tǒng)一左右對齊，適用于字段類型、內(nèi)容相對統(tǒng)一變化小的場景。

而瀑布流，則是數(shù)據(jù)對象高度不一致的多列布局形式，相對更靈活適用面更廣，適合字段類型、內(nèi)容變化較大，不同數(shù)據(jù)對象的差異極大的場景。

轉(zhuǎn)載自優(yōu)設(shè)網(wǎng)

蘭亭妙微（藍(lán)藍(lán)設(shè)計）www.payeee.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗(yàn)設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

vivo小游戲的改版揭示了輕量化產(chǎn)品的設(shè)計本質(zhì)——從點(diǎn)擊量到用戶時長的指標(biāo)躍遷。本文深度拆解其首頁分發(fā)邏輯重構(gòu)與去低幼化視覺升級，揭秘如何通過動態(tài)專題矩陣、情感化設(shè)計和品牌色系統(tǒng)，同時實(shí)現(xiàn)商業(yè)價值提升與品牌心智進(jìn)化。

小游戲業(yè)務(wù)的核心特點(diǎn)是“輕量化啟動，依賴時長變現(xiàn)”。

在產(chǎn)品形態(tài)方面，“點(diǎn)擊即玩”是重要特征，其試錯成本極低，用戶可快速、反復(fù)嘗試多款游戲，使用時長比點(diǎn)擊更能代表深入程度。在營收方面，對于依賴廣告變現(xiàn)的游戲，時長直接影響廣告曝光次數(shù)；對于內(nèi)購游戲，時長則意味著付費(fèi)窗口期的延長。“停留”比“點(diǎn)擊”更能創(chuàng)造商業(yè)價值。

依據(jù)以上兩個原因，小游戲業(yè)務(wù)成功的關(guān)鍵指標(biāo)并非傳統(tǒng)的分發(fā)效率（點(diǎn)擊量），而是用戶游戲總時長。這是小游戲設(shè)計改版的第一個核心目標(biāo)。

<圖：業(yè)務(wù)目標(biāo)>

除此之外，在存量競爭時代，設(shè)計不僅僅是“做得好用”，更需要“做得準(zhǔn)確”——準(zhǔn)確理解業(yè)務(wù)，準(zhǔn)確洞察用戶，準(zhǔn)確傳遞品牌心智。

“小游戲”，在很多用戶的印象中，往往是“休閑、輕松、可愛，甚至樣式上帶點(diǎn)低幼感”的存在，這造就了其固有的用戶心智。

實(shí)際上，【vivo小游戲】希望服務(wù)的用戶是豐富、全面的，所以矛盾便浮出水面——亟待扭轉(zhuǎn)“低幼感知”，這就是小游戲設(shè)計改版的第二個主要目標(biāo)。

在以上兩個背景之下，本次改版目標(biāo)如下：

目標(biāo)一（來自業(yè)務(wù)目標(biāo)）：提升游戲時長，讓分發(fā)更精準(zhǔn)，幫助用戶“玩進(jìn)去，愿意留下”。

目標(biāo)二（來自用戶心智）：去除低幼感知，重塑“年輕、放松、品質(zhì)”的產(chǎn)品形象。

<圖：本次設(shè)計改版的兩個目標(biāo)>

這不僅僅是一次界面優(yōu)化，更是一次以設(shè)計驅(qū)動產(chǎn)品品牌升級的系統(tǒng)性設(shè)計。下文將從三個維度，分享我們的設(shè)計推導(dǎo)與落地過程。

第一部分：提時長——優(yōu)化分發(fā)路徑，從“廣撒網(wǎng)”到“精準(zhǔn)陪伴”

重構(gòu)首頁分發(fā)邏輯，使其服務(wù)于“提升時長”的目標(biāo)。對首頁三大核心模塊——“用戶愛玩”、“平臺推薦”、“隨機(jī)游戲”——進(jìn)行了數(shù)據(jù)洞察和體驗(yàn)重塑。

<圖：首頁改版的三個重要模塊>

1. 聚焦核心：強(qiáng)化“用戶愛玩”的心智，而非盲目曝光

數(shù)據(jù)顯示，“最近愛玩”模塊貢獻(xiàn)了極高的總游戲時長。這證明，用戶主動沉淀的偏好列表，是游戲啟動的最強(qiáng)驅(qū)動力。

新的洞察隨之而來：絕大多數(shù)的用戶，其“最近愛玩”的游戲只有1-2款。舊版首頁將4款游戲“平鋪”外顯，反而稀釋了用戶的注意力，導(dǎo)致分發(fā)的目標(biāo)不清晰。

針對這一現(xiàn)象，我們的A/B Test結(jié)論是：滿足需求，比增加曝光更重要。新版設(shè)計強(qiáng)化了“用戶愛玩”的模塊心智，使其成為用戶返回時的“第一眼”核心，讓用戶能最快回到那個“TA真正想玩的游戲”，而不是在多個似是而非的選擇中猶豫，從而直接鎖定并延長核心游戲時長。

<圖：左圖為老方案，右圖為新方案>

2. 給出理由：重構(gòu)“平臺推薦”，讓選擇變得容易

“平臺推薦”是發(fā)現(xiàn)新游戲的主陣地。我們放棄了“一招鮮”的模式，轉(zhuǎn)而構(gòu)建了一套專題矩陣，針對不同游戲和用戶意圖，設(shè)計差異化的推薦理由：小編推薦專題：從“系統(tǒng)”到“有溫度的個體”建立了“安利官”角色，把真實(shí)的小編推向用戶。用真人頭像、親切口吻和官方認(rèn)證，打造“有溫度、有信任感”的真人推薦。情感化與專業(yè)性的結(jié)合，極大地拉近了與用戶的距離。

<圖：小編推薦>

<圖：小編推薦>

場景化專題：從“游戲是什么”到“我此刻需要什么”將游戲分發(fā)融入用戶生活場景。例如，“早上好：提神醒腦”、“下午好：堅強(qiáng)摸魚人”、“晚上好：放松一下”。通過時間、情緒、狀態(tài)的匹配，讓游戲推薦更具說服力和即時價值。

<圖：場景化推薦>

高品質(zhì)專題：從“文字說”到“視覺證明”針對精品或內(nèi)購游戲，我們用更大尺寸的卡片、更具沉浸感的圖文或視頻預(yù)覽，來直觀呈現(xiàn)游戲的“品質(zhì)感”，將“高質(zhì)量”這一抽象概念具體化。

<圖：左圖為老方案，右圖為新方案>

玩法專題：用IP強(qiáng)化“類別識別”在“男生愛玩”、“掛機(jī)輕松玩”等玩法標(biāo)簽下，將專題內(nèi)最具代表性的頭部游戲IP（如“太空行動”、“一波超人”）進(jìn)行視覺放大，強(qiáng)化用戶對專題游戲類型的“一眼識別”。

<圖：玩法專題>

魅力信息前置：從“默默無名”到“熱度可見”將“XX萬人在玩”這類強(qiáng)吸引力信息，從傳統(tǒng)的文字區(qū)剝離，設(shè)計為高識別度的半透明標(biāo)簽，與游戲Icon強(qiáng)綁定。通過調(diào)整色彩、字重，使其在不遮擋Icon主視覺的同時，成為輔助用戶決策的“魅力因子”，有效提升了點(diǎn)擊意愿。

3. 留有余地：優(yōu)化“隨機(jī)游戲”，提供“多一次機(jī)會”

我們注意到，有相當(dāng)一部分用戶是在首頁“逛了好幾屏”后仍未找到目標(biāo)，此時我們猜想“隨機(jī)一下”可能是他們留下的最后機(jī)會。

強(qiáng)化了其“提供一次驚喜、一種可能性”的心智，為探索型用戶保留了一個“輕量級出口”，這背后是對用戶分層和場景的細(xì)致體察。

<圖：隨機(jī)玩>

設(shè)計思考：分發(fā)設(shè)計的精髓在于“對癥下藥”。我們不再追求統(tǒng)一的曝光策略，而是將首頁視為一個動態(tài)的、有層次的決策場。“用戶愛玩”是確定性滿足，“平臺推薦”是引導(dǎo)性探索，“隨機(jī)游戲”是可能性兜底。

設(shè)計的價值在于，為每一種用戶路徑，都鋪就了最合適的體驗(yàn)軌道，最終合力指向“停留與探索”的核心目標(biāo)。

第二部分：去低幼——重塑視覺語言，從“繽紛低幼”到“放松高級”

“去低幼化”不僅是風(fēng)格的轉(zhuǎn)換，更是品牌心智的重塑。為此，我們建立了一套完整的研究與執(zhí)行方法。

1. 拆解“低幼感”：從感性描述到理性標(biāo)準(zhǔn)

“低幼”是一個感性評價。為了找到解法，我們首先要將其“可視化”。

對比了市面上的兒童教育產(chǎn)品，并結(jié)合對自身舊版設(shè)計的審視，提煉出三個維度的“低幼”視覺特征：

1. 色彩：高明度、高純度色彩被大面積、平均化地使用，色相過多且對比強(qiáng)烈，形成“繽紛喧鬧”的觀感。
2. 圖形：表達(dá)過于具象，細(xì)節(jié)復(fù)雜，視覺元素堆砌，呈現(xiàn)出“卡通卡片”式的質(zhì)感。
3. IP形象：IP設(shè)計（如吉祥物）偏向可愛、低齡化，缺少成人世界的“人設(shè)”感，且使用頻率過高、場景過泛。

這三點(diǎn)，共同構(gòu)成了我們需要打破的舊有特征。

<圖：關(guān)于低幼感知來源的研究>

2. 定義新氣質(zhì)：從“喧囂”到“輕松、年輕、快捷”

有了要規(guī)避的視覺特征，同時，要確立新方向。結(jié)合產(chǎn)品特性和目標(biāo)用戶，我們定義了vivo秒玩小游戲應(yīng)有的產(chǎn)品調(diào)性：

• 年輕有趣：是年輕人愛用的，能帶來驚喜感的。
• 輕松休閑：能隨時玩、不用學(xué)，是“放松”的載體。
• 快捷高效：點(diǎn)擊即玩，響應(yīng)迅速。

<圖：從情緒板到色彩定義>

3. 系統(tǒng)化升級：從色彩到體驗(yàn)的全鏈路煥新

色彩體系重構(gòu)

定義品牌色：我們摒棄了“大雜燴”式的色彩，定義了“活力黃”與“輕松綠”作為品牌主色，分別承載“生命力、有趣”與“放松、自然”的情緒。并嚴(yán)格設(shè)定了60%背景色、30%白色卡片、10%品牌色的色彩使用比例，建立清晰的視覺層次。

<圖：品牌色>

分層處理原則：

• 氛圍層（背景/裝飾）：采用“低純度/高透明/大面積”的用色原則，大量使用漸變、暈染，弱化色彩視覺重量，只為襯托氛圍，絕不搶奪信息。
• 內(nèi)容層（信息主體）：用大面積的白色卡片清晰呈現(xiàn)游戲Icon，保證內(nèi)容的“高還原、高識別、高點(diǎn)擊感”。
• 操作層（高優(yōu)信息/行動點(diǎn)）：在小面積、關(guān)鍵的操作區(qū)域（如按鈕、標(biāo)簽）使用“高飽和/高明度”的品牌色，實(shí)現(xiàn)“小面積、高體感”的提亮效果，精準(zhǔn)引導(dǎo)用戶操作。

<圖：分層處理原則>

注入“情緒價值”：

• 從功能到情感“放松感”融入：在“最近愛玩”等模塊，引入海島沙灘、漂浮云朵等動態(tài)視覺元素，將“玩游戲”包裝成一種“放松”的體驗(yàn)，給予用戶情感上的暗示與安撫。
• “趣味、驚喜感”傳達(dá)：在“隨機(jī)游戲”模塊，利用骰子旋轉(zhuǎn)動畫強(qiáng)化“隨機(jī)、有趣”的心智；在品宣位置，用海量游戲圖標(biāo)交疊微動效，直觀傳遞“海量游戲、應(yīng)有盡有”的豐富感。

<圖：“海島”微動效>

<圖：隨機(jī)玩>

傳承品牌基因：我們沒有割裂歷史，而是巧妙延續(xù)了品牌核心符號“閃電”。

新版設(shè)計中，“閃電”圖形以“斜切線”的形式，融入魅力信息標(biāo)簽、專題卡片頭圖等細(xì)節(jié)，在去低幼的同時，保留了用戶對品牌的核心認(rèn)知，完成了視覺語言的平滑演進(jìn)。

<圖：老版本頁面示例>

<圖：新版本頁面示例>

設(shè)計思考：去低幼化不等于“高冷化”或“同質(zhì)化”。我們的解法是建立系統(tǒng)性的設(shè)計語言。它不是對某個元素的修修補(bǔ)補(bǔ)，而是從底層色彩邏輯、視覺層次、情感傳達(dá)、品牌符號多個維度進(jìn)行的一體化重構(gòu)，最終在視覺上完成了從“兒童樂園”到“年輕人休閑客廳”的轉(zhuǎn)變。

總結(jié)：不止于“改版”的設(shè)計價值

回顧整個項目，這不僅僅是一次界面優(yōu)化。我們將其視作一個通過設(shè)計系統(tǒng)性地解決商業(yè)和品牌問題的范本。復(fù)盤整個過程，我們有幾點(diǎn)深刻的心得，這幾條心得從我們剛剛?cè)胄械侥壳岸歼m用，感受愈發(fā)深刻：

1、理解產(chǎn)品是在做什么：設(shè)計必須服務(wù)于商業(yè)本質(zhì)。深刻理解“小游戲靠時長盈利”這一核心，才讓我們敢于將“提升分發(fā)效率”的慣性思維，轉(zhuǎn)向“提升用戶停留與沉浸”的差異路徑，這是所有設(shè)計決策的“北極星”。

2、抓住重點(diǎn)：資源永遠(yuǎn)是有限的。通過數(shù)據(jù)分析，我們精準(zhǔn)地識別出“最近愛玩”模塊是提升大盤時長的關(guān)鍵。集中優(yōu)勢資源，在關(guān)鍵模塊上做深做透，才能帶來數(shù)據(jù)層面的最大回報。

3、以用戶需求為導(dǎo)向：用戶的核心需求是“找到我想玩/可能愛玩的游戲”，而不是“看到更多游戲”。設(shè)計要做的，是提供“理由”和“路徑”，幫助用戶高效決策，而不是制造“信息過載”。對“最近愛玩”模塊的聚焦，正是這一思維的體現(xiàn)。

4、任何時候都不要忘記有趣。在追求“去低幼化”的過程中，我們并沒有走向另一個極端——“嚴(yán)肅與無趣”。相反，我們將“放松”、“驚喜”、“有趣”這些屬于游戲產(chǎn)品的核心情感價值，通過動態(tài)效果、場景化文案、情感化設(shè)計重新注入體驗(yàn)。

我們交付的不僅是一個“更好看、更好用”的首頁，更是一個“更清晰、更高級、更具吸引力”的vivo小游戲品牌。

注：插圖中全部實(shí)例均為設(shè)計稿，非線上截圖。游戲icon、名稱、在玩人數(shù)等基礎(chǔ)信息非線上信息。

轉(zhuǎn)載：人人都是產(chǎn)品經(jīng)理

蘭亭妙微（藍(lán)藍(lán)設(shè)計）www.payeee.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗(yàn)設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

蘭亭妙微UI設(shè)計公司：你會發(fā)現(xiàn)現(xiàn)在的移動端UI界面中極簡風(fēng)的設(shè)計越來越多了。極簡主義設(shè)計風(fēng)之所以能夠如此的受歡迎，很大程度是源自于它對于設(shè)計、開發(fā)的友好，它不僅讓APP的加載速度更快，讓APP對于不同屏幕的兼容性更加優(yōu)異。與此同時，越來越多的用戶也開始青睞極簡風(fēng)的設(shè)計，極簡風(fēng)的UI界面不僅漂亮，而且在可用性上也非常的突出：它易于導(dǎo)航，并且具備強(qiáng)大的視覺表現(xiàn)力。

1、一屏一個任務(wù)

降低用戶完成任務(wù)之時所需耗費(fèi)的精力。

你為APP的每一屏都應(yīng)當(dāng)承載一個對用戶有用、有價值的交互或者任務(wù)，一次完成一個任務(wù)，且只能有一個任務(wù)，其中應(yīng)該不包含超過1次的行為召喚（CTA）。這樣的設(shè)計能讓用戶更輕松地學(xué)習(xí)，更便捷地使用，在設(shè)計上也更容易添加刪減以及構(gòu)建。

以Uber為例，Uber 清楚地知道用戶的目的是乘坐出租車，所以，應(yīng)用程序不會一次給用戶太多的信息，會根據(jù)地理信息自動檢測用戶的位置，而Uber 提供給用戶的每一個界面的交互都是單個的，用戶只需要選取位置，下單即可。

2、隱形的UI

內(nèi)容即是界面。

專注于內(nèi)容，并且盡量刪除不必要的元素，這樣可以縮短用戶集中注意力的時間，用戶將會更快地被引導(dǎo)到他們正在搜尋的內(nèi)容，而內(nèi)容本身正是一個隱形的界面。最典型的就是Google 地圖。在重新設(shè)計的時候，Google 地圖刪除了所有不必要的面板和按鈕，地圖本身就是最好的界面。

3、呼吸的空間

使用負(fù)空間讓重要的內(nèi)容吸引用戶的注意力。

留白，或者負(fù)空間，指的是頁面設(shè)計布局中的空白部分，或者空白元素，它們常常被忽略和忽視，雖然許多設(shè)計師認(rèn)為這樣的設(shè)計會浪費(fèi)屏幕的空間，但是留白本身就是設(shè)計的基本元素之一。

留白可以提升可讀性和內(nèi)容的優(yōu)先級，在頁面布局中也發(fā)揮著重要的作用。因此，它可以合理地簡化UI并提升用戶體驗(yàn)。

4、直觀的導(dǎo)航

導(dǎo)航應(yīng)該是每個APP當(dāng)中優(yōu)先級最高的組成部分。移動端APP中導(dǎo)航應(yīng)當(dāng)容易被發(fā)現(xiàn)，可訪問的，且盡可能少的占用屏幕空間。由于小屏幕的限制以及內(nèi)容優(yōu)先級的需要，移動端導(dǎo)航的可訪問性設(shè)計一直是一個挑戰(zhàn)。

標(biāo)簽欄和導(dǎo)航欄是非常適合用來展現(xiàn)較少的導(dǎo)航選項的，它們非常適合用來展示主要的導(dǎo)航選項，一個簡單的點(diǎn)擊就能流暢地切換到不同的頁面。

5、單手操作

讓你的設(shè)計兼容更大的屏幕。

關(guān)于用戶如何握持手機(jī)，下面的圖為你展現(xiàn)了最常見的三種模式：

通過觀察可以發(fā)現(xiàn)，85%的用戶使用單手握持他們的手機(jī)，下面的熱圖展示了從2007年一來，各種不同尺寸的iPhone 的拇指操作區(qū)域。毫無疑問，隨著屏幕尺寸的增加，拇指能夠觸及的區(qū)域的比例正在逐步降低。所以，移動端界面的用戶體驗(yàn)設(shè)計應(yīng)當(dāng)進(jìn)行調(diào)整，嘗試讓你的APP 能夠在手機(jī)上面能夠單手操作，將導(dǎo)航置于用戶的拇指可以觸及的區(qū)域之內(nèi)。

6、讓APP運(yùn)行快速

不要讓用戶等待內(nèi)容呈現(xiàn)

試圖讓程序的響應(yīng)速度提升起來。許多任務(wù)盡量在后臺跑起來，讓前臺的展現(xiàn)速度顯得很快。將一部分操作打包到后臺運(yùn)行有兩個好處：讓一些等待和加載過程不再展現(xiàn)在用戶面前，并且可以讓許多操作在用戶請求之前就發(fā)生。一個很好的例子就是 Instagram 中上傳圖片，當(dāng)用戶選擇要共享的圖片之時，上傳就已經(jīng)開始。

7、善用推送通知

在推送信息之前請三思。

每天用戶都會被無數(shù)無用的推送通知所轟炸，被分散注意力，這也使得通知常常會顯得頗為惱人。根據(jù)調(diào)研，超過70%的受訪者表示，令人煩躁的推送信息是促使他們卸載應(yīng)用的主要原因。

所以，要做好移動端設(shè)計，需要用好每一次的信息推送。不要為了吸引用戶而推送消息，這往往會適得其反。你需要將對于用戶有價值的信息推送出去，這樣才合適。

有效的移動端APP信息推送策略是采用多種類型的信息推送機(jī)制，推送通知，電子郵件，應(yīng)用內(nèi)通知，新聞Feed等。多樣化的信息推送通過合理的協(xié)調(diào)，創(chuàng)造良好的用戶體驗(yàn)。

轉(zhuǎn)載自優(yōu)設(shè)網(wǎng)

蘭亭妙微（藍(lán)藍(lán)設(shè)計）www.payeee.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗(yàn)設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

又到了分享界面改版優(yōu)化的時候了，這次是近期C端學(xué)員做的體育場館預(yù)約平臺，主要用于在線預(yù)約羽毛球、網(wǎng)球、籃球等場館。

下面是目前的設(shè)計圖例：

學(xué)員作業(yè)

還是老規(guī)矩，我們從原設(shè)計的問題入手，然后逐步完成對它的改版優(yōu)化。

問題分析：

問題的分析從不同維度入手，這里分享個最簡單的分析方式，先從基礎(chǔ)樣式分析，再分析組件設(shè)計。

基礎(chǔ)樣式包含規(guī)范、字體、色彩、圖片四個要素的分析，而組件設(shè)計則是檢查樣式的合理性為主。

一、基礎(chǔ)樣式分析

首先基礎(chǔ)樣式的規(guī)范應(yīng)用上，頂部狀態(tài)欄和底部指示器、導(dǎo)航是沒有太大問題的，所以我們可以直接進(jìn)入下一個環(huán)節(jié)。

在字體應(yīng)用上，問題就多起來了，主要還是特殊標(biāo)題使用太多，且廣告中的標(biāo)題也和下方 UI 元素標(biāo)題沒有拉開差距，看起來就很別扭。而且大粗黑字體使用過多，使得信息權(quán)重被分散掉，沒有對比性。

有問題的部分截圖

在色彩層面，藍(lán)色雖然是主色，但是使用過于頻繁，且其它色彩的應(yīng)用數(shù)量也過多，畫面充斥了讓人眼花繚亂的色彩，尤其色彩多的情況下圖片色彩也豐富，外加一系列漸變色塊，讓場面變得更“錯綜復(fù)雜”。

使用的色彩過多

最后圖片應(yīng)用上，主要問題出在廣告圖里，圖例和文字排版看起來很有年代感，加上瓷片區(qū)內(nèi)的素材用圖，和整體主體的關(guān)聯(lián)性并不好。這里著重強(qiáng)調(diào)， 3D 擬人類圖片素材的使用最好局限在特定運(yùn)營活動物料里，不要作為正式的 UI 元素進(jìn)行引用，怎么做效果都不會好。

二、組件樣式分析

接著分析組件樣式，因?yàn)檫@次案例框架很簡單，我們不用太多考慮組件排序依據(jù)還是產(chǎn)品問題，只需要每個組件孤立出來分析即可。

1 .首頁頂部組件

主要問題就是廣告圖的設(shè)計，不符合當(dāng)前應(yīng)用的設(shè)計標(biāo)準(zhǔn)，字體用圖排版都很簡單。

2.快速入口組件

快速入口上下兩排權(quán)重完全不同，雖然有大小的差異但依舊對比不夠強(qiáng)烈，且色彩使用混亂。

3.瓷片區(qū)應(yīng)用

兩個頁面都有瓷片區(qū)，布局過于接近，且沒有實(shí)質(zhì)性的內(nèi)容全是裝飾素材，非常影響點(diǎn)擊欲望和觀感。

4.常去場館卡片

屬于問題相對較小的模塊，但標(biāo)簽的應(yīng)用色彩不合理，而且標(biāo)題也露不全，實(shí)際空間利用率沒有必要的低。

5.列表卡片

列表卡片的主要問題還是和主色按鈕有關(guān)，過于強(qiáng)調(diào)按鈕的同時又要突出其它信息元素，就讓卡片看起來非常聒噪，信息之間是會起沖突的。

6.底部導(dǎo)航

底部導(dǎo)航設(shè)計過于普通，且一般選項選中凸起只適合在首頁選項中使用。中間添加按鈕的尺寸過小，和兩側(cè)選項看起來不對齊，重心偏移。

以上就是對問題的簡單總結(jié)，實(shí)際上改版就是圍繞這些問題做出調(diào)整，你先分析得出問題，才能聚焦到具體設(shè)計的過程和細(xì)節(jié)。

三、開始界面優(yōu)化

基礎(chǔ)規(guī)范是整體，而我們設(shè)計過程中大多從細(xì)節(jié)出發(fā)，所以我們對優(yōu)化的內(nèi)容解釋就要反過來從組件開始。

1.頂部模塊設(shè)計

首先調(diào)整頂部模塊的設(shè)計，優(yōu)化圖例，使用比較突出的字體標(biāo)題和更有沖擊力的配圖，符合運(yùn)動類應(yīng)用的主基調(diào)。同時因?yàn)橹爸魃锰啵@次頂部直接不加主色類背景。

2.快速入口的設(shè)計

快速入口設(shè)計上使用兩種圖標(biāo)體系，上方用偏扁平插畫型的風(fēng)格（素材示意），下方用面性圖標(biāo)風(fēng)格，弱化它們的權(quán)重。同時第二個頁面的快速入口使用攝影圖型圖標(biāo)，避免一直出現(xiàn)不同風(fēng)格的圖標(biāo)。

3.瓷片區(qū)設(shè)計

瓷片區(qū)做大就需要有內(nèi)容展示，但這些主體值得展示的內(nèi)容并不是太多且需要那么大空間，所以縮小尺寸不會讓設(shè)計那么難處理，也讓畫面更精致一點(diǎn)。

4.其它模塊設(shè)計

因?yàn)槭醉撋戏揭呀?jīng)有很花哨的模塊了，所以常去場館就不應(yīng)該再花哨下去，可以務(wù)實(shí)點(diǎn)的設(shè)計，不再用復(fù)雜的外邊框套娃。

第二個頁面其它模塊相對簡單，拼團(tuán)功能又重要所以可以突出它用包邊型的組件設(shè)計。

5.列表模塊設(shè)計

兩個頁面下方的列表模塊，都移除原來主色的按鈕，只保留關(guān)鍵信息，讓卡片視覺看起來更簡約和諧一點(diǎn)。

6.底部導(dǎo)航欄設(shè)計

放大中間的按鈕，同時優(yōu)化第一個選項選中的設(shè)計，可以更突出（時間夠就做LOGO進(jìn)去了）更強(qiáng)調(diào)選中。

完成這些處理以后，最后合并起來可以整體再調(diào)整一番進(jìn)行最終輸出。我們可以看看下面改版前后的對比，你們可以自己感受是否有差異：

這是純視覺方向的優(yōu)化，在新手階段，不要過度去使用色彩和字體，實(shí)現(xiàn)樣式的落差要通過組件樣式和圖片、素材應(yīng)用的差異來塑造。

轉(zhuǎn)載：優(yōu)設(shè)

蘭亭妙微（藍(lán)藍(lán)設(shè)計）www.payeee.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗(yàn)設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

一、保守派：保留表格形態(tài)，輕量化適配

1. 橫豎屏一鍵切換

• 優(yōu)勢：實(shí)現(xiàn)成本低，可全局復(fù)用，適配純閱讀場景
• 局限：僅支持查看，無法做數(shù)據(jù)編輯、批量操作

2. 固定表頭 + 滾動指示燈

1. 數(shù)據(jù)對應(yīng)混亂：凍結(jié)首列表頭，橫向滾動時始終可見關(guān)鍵字段
2. 屏效過低：適度縮小字體，提升信息密度
3. 滾動無預(yù)期：添加滾動指示燈，清晰提示當(dāng)前查看進(jìn)度

• 核心：像給表格加了可視化滾動條，降低閱讀認(rèn)知成本

二、激進(jìn)派：重構(gòu)展示形式，貼合移動端習(xí)慣

3. 關(guān)鍵字段收折展示

• 選字規(guī)則：通過「重要度 + 字段長度」十字分析，優(yōu)先選短文本、高優(yōu)先級字段
• 適用場景：字段數(shù)量適中，用戶需快速識別數(shù)據(jù)的場景

4. 卡片式列表呈現(xiàn)

• 優(yōu)勢：符合移動端視覺習(xí)慣，操作路徑更短，是 B 端移動端最常用方案
• 適配場景：外勤人員快速查看、一鍵操作的業(yè)務(wù)（如銷售、配送）

5. 全信息詳情卡片

• 優(yōu)勢：信息一站式展示，減少頁面跳轉(zhuǎn)，大幅提升操作效率
• 典型場景：配送員訂單、外賣詳情、銷售客戶速覽等高頻輕操作場景

最后：移動端表格的設(shè)計邊界

一、視覺設(shè)計：專業(yè)與溫度的平衡，打造醫(yī)療級質(zhì)感

1. 品牌與色彩體系

2. 數(shù)據(jù)可視化設(shè)計

3. 全端視覺風(fēng)格統(tǒng)一

二、信息架構(gòu)：全鏈路閉環(huán)，覆蓋健康管理全場景

• 移動端 / 手表端采集頁：支持 ECG 心電圖記錄、心率實(shí)時監(jiān)測，界面聚焦核心數(shù)據(jù)，操作極簡，適配用戶日常快速監(jiān)測的場景；
• 用戶數(shù)據(jù)頁：聚合用戶個人信息、歷史監(jiān)測數(shù)據(jù)、健康趨勢分析，數(shù)據(jù)分類清晰，用戶可快速查看單次監(jiān)測結(jié)果與長期健康變化；
• PC 端后臺管理頁：整合多用戶數(shù)據(jù)、設(shè)備管理、歷史記錄查詢等功能，數(shù)據(jù)可視化全面，滿足用戶或醫(yī)護(hù)人員的專業(yè)管理需求；
• 注冊登錄頁：采用簡約設(shè)計，兼顧用戶信息安全與使用便捷性，適配醫(yī)療產(chǎn)品的隱私保護(hù)需求。

三、交互體驗(yàn)：精準(zhǔn)適配場景，兼顧專業(yè)性與易用性

• 極簡采集流程：手表端監(jiān)測界面僅保留核心操作按鈕，用戶可一鍵開始 / 停止監(jiān)測，進(jìn)度條與狀態(tài)提示清晰直觀，避免操作干擾；
• 數(shù)據(jù)即時反饋：監(jiān)測過程中實(shí)時顯示心率、監(jiān)測進(jìn)度，完成后即時呈現(xiàn)數(shù)據(jù)結(jié)果與健康狀態(tài)，降低用戶等待焦慮；
• 多端協(xié)同交互：移動端、手表端、PC 端數(shù)據(jù)實(shí)時同步，用戶可在任意設(shè)備查看、管理健康數(shù)據(jù)，操作體驗(yàn)連貫；
• 輕量化操作設(shè)計：界面布局簡潔克制，核心數(shù)據(jù)突出展示，減少冗余信息，讓用戶快速獲取關(guān)鍵健康信息，適配不同年齡段用戶的使用習(xí)慣。

四、設(shè)計總結(jié)

一、視覺設(shè)計：童趣感拉滿，打造沉浸式學(xué)習(xí)氛圍

1. 核心 IP 貫穿全端

2. 色彩體系適配兒童審美

3. 視覺風(fēng)格統(tǒng)一且細(xì)節(jié)豐富

二、信息架構(gòu)：全流程學(xué)習(xí)閉環(huán)，貼合兒童學(xué)習(xí)場景

• 注冊登錄頁：支持 Facebook/Google/Apple 一鍵登錄 + 郵箱注冊，操作極簡，適配家長代操作場景；
• 課程選擇頁：按年齡段（4-12 歲兒童 / 12-18 歲青少年）分類，搭配 IP 形象與價格，讓家長 / 孩子快速選擇適配課程；
• 答題學(xué)習(xí)頁：以趣味選擇題、填空題為主，IP 形象全程陪伴，答題后即時反饋，強(qiáng)化學(xué)習(xí)成就感；
• 學(xué)習(xí)進(jìn)度頁：用日歷視圖展示每日學(xué)習(xí)狀態(tài)，聚合學(xué)習(xí)時長、專注度、精力值等核心數(shù)據(jù)，讓孩子 / 家長直觀掌握學(xué)習(xí)進(jìn)度；
• 個人中心頁：展示聽說讀寫能力進(jìn)度、學(xué)習(xí)等級，支持頭像 / IP 形象個性化定制，滿足孩子的個性化需求；
• 獎勵反饋頁：答題完成后展示學(xué)習(xí)時長、進(jìn)度條，用 IP 的開心表情強(qiáng)化正向激勵，形成 “學(xué)習(xí) - 反饋 - 激勵” 的完整閉環(huán)。

三、交互體驗(yàn)：輕量化 + 趣味化，降低學(xué)習(xí)門檻

• 極簡操作流程：所有操作以 “最少步驟” 為原則，一鍵答題、一鍵切換、一鍵登錄，避免復(fù)雜流程干擾學(xué)習(xí)節(jié)奏；
• 即時正向反饋：答題正確 / 完成學(xué)習(xí)后，用 IP 的開心表情、進(jìn)度條增長、愛心獎勵等方式即時反饋，強(qiáng)化孩子的學(xué)習(xí)成就感；
• 個性化交互：支持 IP 形象、頭像、表情的自定義定制，讓孩子打造專屬學(xué)習(xí)伙伴，提升使用粘性；
• 多場景適配：覆蓋注冊、學(xué)習(xí)、進(jìn)度、個人中心全場景，操作邏輯簡單易懂，孩子可獨(dú)立使用，也支持家長輔助操作。

四、設(shè)計總結(jié)

一、閑魚：AI發(fā)布提效

閑魚發(fā)閑置功能接入AI，只需上傳商品圖片就可以直接生成描述文案，極大幫助用戶簡化發(fā)布流程

1. 零門檻發(fā)布，降低發(fā)布時間成本

解決非專業(yè)用戶 “不會寫文案、不懂專業(yè)術(shù)語” 的痛點(diǎn)，自動提取商品特征，組合成規(guī)范文案；相比傳統(tǒng)發(fā)布流程的耗時編輯文案、核對信息，更高效快捷。

2. 優(yōu)化內(nèi)容，提升交易轉(zhuǎn)化

自動生成符合當(dāng)前市場熱點(diǎn)的文案表述，更能多文風(fēng)轉(zhuǎn)換，一鍵轉(zhuǎn)為趣味的 “抽象文學(xué)”“黛玉文學(xué)”等，提升內(nèi)容點(diǎn)擊率。

二、支付寶：廣告位游戲化包裝

支付寶的首頁Banner通過游戲化的包裝，快速吸引注意力，驅(qū)動用戶主動點(diǎn)擊探索，高效地為活動頁面引流。

1. 互動機(jī)制強(qiáng)化用戶參與感

采用懸念式互動設(shè)計，button以 “猜猜是什么” 這類問答形式，激發(fā)用戶好奇心，通過游戲化場景的營造，降低參與門檻，驅(qū)動用戶主動點(diǎn)擊探索。

2. 場景氛圍營造提升吸引力

在以功能入口為主的首頁，該模塊具有游戲化趣味性的氛圍營造，從視覺上差異化的呈現(xiàn)，相比傳統(tǒng)的靜態(tài)廣告位，更能有效抓住用戶眼球，高效地為活動頁面引流。

三、去哪兒：退票時挽留場景設(shè)計

當(dāng)有中轉(zhuǎn)單的用戶在點(diǎn)擊退票時，用挽留浮層及時給用戶彈出更優(yōu)的解決方案，并在方案中量化利益點(diǎn)，同時保證原有票的安全感。整體通過 “先抓痛點(diǎn)→再給解決方案→最后引導(dǎo)操作” 的路徑，優(yōu)化了用戶出行體驗(yàn)。

1. 量化利益點(diǎn)

除了直達(dá)更方便之外，直達(dá)還有更省時間、金錢，保底票免費(fèi)退等更多的利益點(diǎn)

2. 有兜底有安全感

用當(dāng)前的中轉(zhuǎn)作為保底，先搶票，搶到了還能再退票。讓用戶安心下單，在未搶到心儀票的時候能有中轉(zhuǎn)的替補(bǔ)票，可以緩解用戶的焦慮情緒，有兜底的保障安全感

四、療愈類App Endel：引導(dǎo)充值會員的動畫

通過一個巧妙的互動行為“搖動手機(jī)”，降低用戶對會員充值廣告的反感。

1. 提升用戶參與感與趣味性

“搖一搖”互動將被動觀看廣告轉(zhuǎn)變?yōu)橹鲃訁⑴c，用戶通過簡單的物理動作即可觸發(fā)折扣，這種即時反饋機(jī)制增強(qiáng)了趣味性，降低了傳統(tǒng)廣告的侵入感。

2. 降低付費(fèi)決策的心理門檻

通過互動行為展示折扣，巧妙地將付費(fèi)流程包裝成一種“獎勵”而非強(qiáng)制推銷。用戶感受到的是“主動獲取優(yōu)惠”的成就感，而非被廣告打擾的抵觸情緒，從而更愿意接受付費(fèi)選項。

五、小宇宙：創(chuàng)新列表設(shè)計

通過擬物化的卡牌堆疊形態(tài)，將傳統(tǒng)的平面信息流轉(zhuǎn)變?yōu)榫哂锌臻g縱深感和探索趣味的交互式敘事焦點(diǎn)

1. 視覺層次突破傳統(tǒng)束縛

通過卡片堆疊、傾斜，在二維屏幕上創(chuàng)造出三維空間感。不對稱的布局打破了傳統(tǒng)設(shè)計的呆板，賦予界面動感與活力，能有效抓住用戶視線，對抗“橫幅盲視效應(yīng)”

2. 建立擬物化的趣味交互

模擬物理世界卡牌的操作體驗(yàn)，配合流暢的滑動動畫，讓用戶產(chǎn)生"翻閱卡片"的愉悅感，這種情感化設(shè)計能顯著提升用戶的操作滿足感和停留時長

3. 內(nèi)容暗示激發(fā)探索行為

堆疊效果露出部分內(nèi)容作為預(yù)覽，能有效刺激用戶的好奇心，主動進(jìn)行滑動探索，提升內(nèi)容消費(fèi)深度

六、QQ音樂：個人中心下拉觸發(fā)金幣中心

該設(shè)計通過 “貼合用戶習(xí)慣的交互 + 強(qiáng)引導(dǎo) + 積分激勵” 的組合策略，實(shí)現(xiàn)簽到轉(zhuǎn)化與用戶留存

1. 交互設(shè)計貼合用戶固有習(xí)慣

采用下拉觸發(fā)模式，無需額外學(xué)習(xí)成本，降低用戶參與簽到的操作門檻，提升即時轉(zhuǎn)化效率

2. 視覺設(shè)計強(qiáng)化引導(dǎo)與目標(biāo)感知

以金幣掉落清晰的視覺元素突出金幣中心入口，讓用戶快速捕捉核心功能，減少尋找成本，縮短 “看到 - 參與” 的路徑

3. 激勵設(shè)計構(gòu)建留存閉環(huán)

用 “金幣” 作為即時激勵，滿足用戶即時反饋的心理需求，驅(qū)動次日復(fù)訪，同時聯(lián)動積分體系，將單次簽到轉(zhuǎn)化為長期行為

最后要說的話

本期的設(shè)計分享就到這里啦。

文章中的案例與思考來自于UED同學(xué)的日常分享。

后續(xù)我們將持續(xù)深度體驗(yàn)產(chǎn)品，挖掘更多值得分享、學(xué)習(xí)的設(shè)計案例。努力將其中的方法理論應(yīng)用到后續(xù)的產(chǎn)品設(shè)計中。

愿我們的努力為你帶來更好的體驗(yàn)。下次見。

轉(zhuǎn)載：優(yōu)設(shè)

蘭亭妙微（藍(lán)藍(lán)設(shè)計）www.payeee.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗(yàn)設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。