日韩黄色视频 - 日韩黄色视频在线观看 - 日韩黄色一级片 - 日韩黄色网址 亚洲毛片无码精品专区,午夜色福利视频,久久精品亚洲婷婷,国产91丝袜在线播放网站

北京蘭亭妙微 UI 設(shè)計公司，成立 16 年來，始終保持著對國內(nèi)外優(yōu)秀設(shè)計作品的學(xué)習(xí)與研究。我們持續(xù)追蹤全球前沿的 UI/UX 設(shè)計趨勢，從中提煉可落地的設(shè)計方法論，分享給同樣熱愛設(shè)計的你。今天分享分析一套名為「APEX」的航天發(fā)射與回收控制臺 UI 設(shè)計系統(tǒng)——它可能是近年來暗黑系數(shù)據(jù)大屏領(lǐng)域最完整的作品之一。

────────────────────────────────────────

一、品牌系統(tǒng)構(gòu)建：從 Logo 到物理載體的完整閉環(huán)

上圖是Logo Construction 頁面，包含幾何圖形構(gòu)建過程、Key Values 清單、Clear Space 規(guī)范、On-Board Panel 金屬銘牌效果圖、ID Card 工牌效果圖。

這套設(shè)計的起點不是界面本身，而是一個完整的品牌識別體系。Logo 采用幾何化的"M/N"折線圖形，通過嚴(yán)格的網(wǎng)格系統(tǒng)和角度標(biāo)注（A1 60°、A2 60°）完成構(gòu)建。這種做法傳遞出一個信號：這不是"畫出來的"，而是"工程推導(dǎo)出來"的。

三個值得注意的品牌細(xì)節(jié)：

• Key Values 清單將 Corner Radius、Stack Ratio、Grid Multiple 等參數(shù)量化到小數(shù)點后兩位——這種"偽工程規(guī)范"的呈現(xiàn)方式，本身就是一種視覺敘事手段，讓品牌看起來像真實的軍工項目

• On-Board Panel 金屬銘牌效果圖：把 Logo 做成金屬蝕刻效果，配合 S/N 序列號和規(guī)格參數(shù)（AL-142 SPEC: AMS 4027），完成了從數(shù)字設(shè)計到物理實體的視覺跨越

• ID Card 工牌：Operator / Alex Chen / Launch Director / EXP 12/2026，用真實工牌的格式強化了整個項目的沉浸感

設(shè)計啟示：B 端/工業(yè)級 UI 項目，如果能在界面之外補充品牌載體（銘牌、工牌、實體 Mockup），說服力會呈指數(shù)級增長。

────────────────────────────────────────

二、設(shè)計敘事：用文檔頁面講一個完整的故事

上圖是The Brief 文檔頁 + WHAT BROKE ON B-04 事故報告頁。

這套作品最獨特的地方在于：它不只是"好看的界面"，而是有故事背景的完整設(shè)計系統(tǒng)。

The Brief 頁面采用類似軍方密件的紅頭文件格式——FROM / TO / DATE / SUBJECT / PRIORITY 的元信息欄，正文用襯線體排版，引用語"We launch the booster every twenty-three days. We recover it every twenty-three days"營造出強烈的任務(wù)氛圍。

B-04 事故報告頁則展示了另一種信息架構(gòu)能力：

• Mission Timeline：一條時間軸貫穿從 PRE-IGNITION 到 RECOVERY COMPLETE 的全過程，關(guān)鍵節(jié)點（T+04:57 TELEMETRY GAP · 30s）用黃色高亮 + 虛線框標(biāo)注異常區(qū)間——這是非常成熟的事件標(biāo)注模式

• Operator Stress Map：三張并排的折線圖分別展示 Launch Director / Telemetry Officer / Recovery Captain 的注意力負(fù)荷曲線，黃色漸變填充區(qū)域直觀標(biāo)示高壓時段

• Operator Testimonials：底部三張引言卡片用雙引號圖標(biāo) + 小字署名，把冷冰冰的數(shù)據(jù)還原為人的體驗——"We were guessing for thirty-eight seconds"

這種"數(shù)據(jù) + 人文敘事"的組合，是高端 B 端設(shè)計區(qū)別于普通儀表盤的關(guān)鍵差異點。

────────────────────────────────────────

三、概念錨定頁：一句話建立全局認(rèn)知

上圖是One surface. Four operators. Nine minutes. 概念標(biāo)題頁。

"One surface. Four operators. Nine minutes."

這句話只有六個英文單詞，但它完成了三件事：

• 定義了交互范式（One surface = 統(tǒng)一操作界面）

• 定義了用戶角色（Four operators = 四個操作崗位）

• 定義了時間約束（Nine minutes = 任務(wù)窗口）

下方四張線稿風(fēng)格的人物側(cè)臉插圖（Launch Director / Telemetry Officer / Recovery Captain / Engineer），用極簡的輪廓線勾勒出角色身份，每個頭像下方標(biāo)注崗位名稱。這種處理方式在視覺上極度克制，卻信息量充足。

設(shè)計啟示：任何復(fù)雜系統(tǒng)的 UI 設(shè)計，都應(yīng)該有一個"一句話概括"的概念頁。它不僅是封面，更是整個設(shè)計系統(tǒng)的"憲法"——后續(xù)所有界面的設(shè)計決策都要能回溯到這句話。

────────────────────────────────────────

四、主控面板：T-Minus 倒計時作為視覺錘

上圖是主控面板總覽 + Launch Director 主界面。

這是整套設(shè)計的核心界面。T-MINUS HOLD 00:10:42.88 以巨大的等寬字體占據(jù)左半屏視覺重心，周圍是大量留白——和之前分析的車輛儀表盤使用的是同一策略：讓數(shù)字自己說話。

但這套設(shè)計在此基礎(chǔ)上做了更極致的延伸：

① System Readiness 點陣網(wǎng)格 右側(cè)用一個 8×8 的方格矩陣表示系統(tǒng)狀態(tài)，每個子系統(tǒng)（Avionics / Propulsion / Range / Payload 等）對應(yīng)一個格子。綠色 = GO，橙色 = HOLD，紅色 = NO-GO。這種"一目了然"的狀態(tài)表達(dá)方式比文字列表高效得多——用戶可以在 1 秒內(nèi)掃完所有子系統(tǒng)健康狀態(tài)。

② Auto-Sequence Path 自動序列路徑 左側(cè)豎向排列的任務(wù)清單（Sensor Calibration → RF Uplink Established → Range Clearance...），每個任務(wù)前用三角形圖標(biāo)表示狀態(tài)：綠色 ▲ = 已完成，橙色 ? = 等待中，灰色 = 未開始。這是一種非常清晰的線性進(jìn)度可視化方式。

③ 火箭線稿插畫 右側(cè)大面積區(qū)域放置火箭透明線稿圖（Wireframe），內(nèi)部用綠色漸變填充表示液氧（LOX）儲量——84.2%。這種"技術(shù)藍(lán)圖 × 實時數(shù)據(jù)"的組合，既提供了設(shè)備形態(tài)參照，又嵌入了關(guān)鍵運行參數(shù)。

④ Secure Audio Channel 音頻通道波形圖 右上角的小型音頻波形條（AES-256 ACTIVE），暗示這是一個實時通訊環(huán)境。這類"微細(xì)節(jié)"的存在感雖然弱，但對營造專業(yè)氛圍至關(guān)重要。

────────────────────────────────────────

五、多角色界面分工：四個視角，四種數(shù)據(jù)密度

上圖是Stage 1 LOX 詳情 + 引擎集群溫度監(jiān)控。

上圖是Launch Director 與 Telemetry Officer 并排對比。

上圖是Recovery Captain 與 Engineer 并排對比。

這套設(shè)計最令人印象深刻的架構(gòu)決策是：為四個不同角色設(shè)計了完全不同的數(shù)據(jù)視圖，且每個視圖的信息密度和數(shù)據(jù)類型都精確匹配該角色的職責(zé)：

Stage 1 LOX 詳情卡片的設(shè)計尤其出色：

• 84.2% 用超大的綠色等寬字體顯示

• 右側(cè)是一個透明的圓柱形容器 3D 渲染圖，內(nèi)部綠色液體高度與百分比對應(yīng)——數(shù)據(jù)可視化與三維插畫的完美融合

• 下方列出 TEMP（-183.4°C）和 PRESSURE（4.2 BAR），字體大小層級清晰

• 引擎集群部分用九宮格排布九個引擎噴口，每個噴口上方標(biāo)注編號，其中 #07 用橙色高亮標(biāo)記異常溫度（1120°C），#03 和 #09 顯示正常溫度

Engine Cluster 溫度條形圖：底部一根橫向的溫度分布條，從綠（420°C）過渡到黃再到紅（1480°C），ENG-07 區(qū)域明顯偏黃/橙——一眼就能定位哪個引擎出了問題。

────────────────────────────────────────

六、拓?fù)浣Y(jié)構(gòu)：從全局理解信息流轉(zhuǎn)

上圖是TOPOLOGY 拓?fù)鋱D。"Four roles. Two locations. One protocol."

這張拓?fù)鋱D回答了一個核心問題：四個操作員之間是什么關(guān)系？數(shù)據(jù)怎么流動？

畫面布局清晰地展示了信息鏈路：

• Ground Station（地面站衛(wèi)星天線）→ 通過 Fiber Backbone 連接到 Mission Control（任務(wù)控制中心）

• Mission Control 內(nèi)部有兩個席位：Launch Director + Telemetry Officer

• Mission Control 通過 Orbital Uplink 連接到 Satellite GEO-04

• 同時通過 Manual Override/Fallback 鏈路連接到 DroneShip "North Star"（海上回收船）

• DroneShip 上有另外兩個席位：Recovery Captain + Engineer

• 還有一個獨立的 Meteorological Mesh / Atlantic 氣象數(shù)據(jù)源

每條連線都用虛線 + 不同顏色區(qū)分（綠色 = 正常鏈路，黃色 = 備用鏈路，紅色 = 應(yīng)急鏈路），并標(biāo)注了延遲時間（Fiber 1.2 Gbps / Orbital 38 ms / Descent Targeting 12 ms）。

設(shè)計啟示：復(fù)雜系統(tǒng)的 UI 設(shè)計，如果缺少一張"上帝視角"的拓?fù)鋱D，用戶就很難建立對整體架構(gòu)的心智模型。這張拓?fù)鋱D就是整個系統(tǒng)的"地圖"。

────────────────────────────────────────

七、軌道與大氣層：飛行階段的動態(tài)數(shù)據(jù)表達(dá)

上圖是軌道飛行視圖 + Ascent 階段視圖。

這是整套設(shè)計中最具視覺沖擊力的頁面之一：

上半部分：地球邊緣的太空視角，可以看到城市燈光分布在大陸上，一枚白色箭頭軌跡線從地表射入太空，旁邊標(biāo)注 8.42 MACH 和 112.4 KM —— 當(dāng)前速度和高度。右上角的狀態(tài)標(biāo)簽顯示 MAX-Q CLEARED（已通過最大動壓點）。

下半部分分為多個數(shù)據(jù)模塊：

• Aerodynamic G-Force：左側(cè)的 G 力曲線圖，紅色斜紋填充區(qū)域標(biāo)示危險范圍，白線表示當(dāng)前值（// critical load 6.22G //）

• Aerodynamic Heating：六邊形蜂窩熱力圖，中心亮紅色表示最高溫區(qū)（Peak Nose Core Temp: 1,940°C）

• Flight Event // WECO：事件列表，[ STAGE 1 CUTOFF CONFIRMED ] 用綠色標(biāo)注已完成事件

• Trajectory Attitude：右側(cè)小型地球儀顯示當(dāng)前姿態(tài)角（Pitch: 48.1°, Roll: 0.8°）

特別值得一提的是下圖的變體版本——部分區(qū)域被黃色/黑色斜紋遮罩覆蓋，模擬軍事系統(tǒng)中常見的"機密信息遮蓋"效果。這種細(xì)節(jié)處理極大地增強了真實感。

────────────────────────────────────────

八、物理環(huán)境融合：從屏幕走進(jìn)控制室

上圖是真實控制室環(huán)境中的大屏渲染。

這張圖把 UI 從"屏幕截圖"提升到了"空間體驗"層面：

• 整個控制室籠罩在紅色應(yīng)急燈光下，營造出緊張的事故處置氛圍

• 中央大屏顯示的是 Telemetry Officer 的雷達(dá)界面（紅色主題）

• 大屏前方坐著幾位操作員的剪影背影，他們面前還有各自的工作站屏幕

• 右上角的數(shù)字時鐘顯示 3:20，暗示這是某個關(guān)鍵時刻的時間戳

為什么這張圖重要？

大多數(shù) UI 設(shè)計只停留在 Figma/Sketch 的畫布上。但這套設(shè)計考慮了物理環(huán)境中的呈現(xiàn)效果——紅色環(huán)境光如何影響界面的可讀性？大尺寸投影下的字號是否足夠？多人協(xié)作時的視線方向是否合理？這些"超出像素"的問題才是決定實際落地質(zhì)量的關(guān)鍵。

────────────────────────────────────────

九、應(yīng)急模式：顏色反轉(zhuǎn)傳達(dá)緊急狀態(tài)

上圖是Aborted/Ordnance 中止/引爆界面。

當(dāng)系統(tǒng)進(jìn)入中止/緊急模式時，界面發(fā)生了顯著變化：

• 主色調(diào)從綠色切換為紅色：正常態(tài)的綠色元素全部變?yōu)榧t色或橙紅色

• 圓形雷達(dá)視圖中央顯示 KSC LAUNCH-PAD 39A，外圍有多層同心圓環(huán)（綠色→黃色→紅色）代表不同的安全區(qū)域邊界

• Exclusion Zone [ EXCLUSION ZONE ] 標(biāo)簽用紅色菱形圖標(biāo)標(biāo)記禁區(qū)

• 左上角顯示 ABORT 狀態(tài)標(biāo)識，左側(cè)邊欄也變?yōu)榧t色調(diào)

• 底部的 Flight Termination System 面板顯示 [ ORDNANCE ARMED ] 狀態(tài)，KEY_ALPHA / CMD 顯示 [AUTHORIZED] 或 [PENDING]

這種基于狀態(tài)的色彩系統(tǒng)反轉(zhuǎn)，是高風(fēng)險行業(yè) UI 的標(biāo)準(zhǔn)做法——用戶不需要閱讀文字，僅憑顏色就能判斷當(dāng)前處于"正常"還是"緊急"狀態(tài)。

────────────────────────────────────────

十、回收作業(yè)：海上著陸區(qū)的精密監(jiān)控

上圖是DroneShip 回收船甲板監(jiān)控界面。

Recovery Captain 的主界面展示了海上回收階段的全貌：

• 頂部狀態(tài)欄：Vessel 名稱 "A SHORTFALL OF GRAVITAS"、Droneship Connectivity [STABLE]、Signal Latency 24 MS

• Sea State & Wind：左上角海況熱力圖，Speed 14 KTS，Sea State 3 (MODERATE)

• 甲板俯視平面圖：中央大型區(qū)域顯示無人機船甲板布局，三層同心圓環(huán)（SAFE ZONE / RISK ZONE / ABORT ZONE），目標(biāo)落點用綠色菱形標(biāo)記

• 底部四模塊：

• Grid Fins：四個舵面角度滑塊（+02° ~ +05°）

• Deck Impact & Legs：著陸沖擊熱力圖 + 四條著陸腿狀態(tài)（LANDING LEGS: DEPLOYING...）

• Action Zone：機械臂抓取裝置的線稿圖 + [ DECK SECURE ] 按鈕

黃色/黑色警示條紋的使用也是一大亮點——多處區(qū)域用斜紋條紋表示"受限/加密/不可用"，既是功能表達(dá)也是一種視覺節(jié)奏的調(diào)節(jié)手段。

────────────────────────────────────────

十一、子系統(tǒng)模塊化：可組合的數(shù)據(jù)單元

上圖是Module 03/04 和 Module 05/06 子系統(tǒng)詳情。

最后兩張圖展示了子系統(tǒng)的精細(xì)化設(shè)計：

Module 03 — VECTOR THRUSTERS（矢量推進(jìn)器）：

• 四個推進(jìn)器的 3D 線稿圖，每個箭頭標(biāo)注推力方向

• 推力數(shù)值直接標(biāo)注在推進(jìn)器旁：42% / 38% / 89% / 34%

• 底部狀態(tài)欄：DP MODE: STATION KEEPING [ ACTIVE ]

Module 04 — ALTITUDE TELEMETRY（高度遙測）：

• 一條下降曲線圖，橫軸為 TIME TO IMPACT（撞擊倒計時），縱軸為 ALTITUDE

• 下方兩個超大數(shù)字：ALT: 1,240m / SINK RATE: 42 m/s

Module 05 — G-FORCE TELEMETRY：

• G 力曲線圖，紅色區(qū)域標(biāo)示危險范圍

• 注釋文本：// critical load 6.22G //

Module 06 — STAGE SEPARATION & MECO：

• 事件確認(rèn)列表 + 多組進(jìn)度條（Stage 1 Return Trajectory / Grid Thrusters / Retro-Burn 等）

• 右側(cè)火箭剖面圖標(biāo)注各部件狀態(tài)（Pneumatic Clamps: RELEASED）

這些模塊化的設(shè)計使得整個系統(tǒng)具有極強的可擴展性——新增一個子系統(tǒng)只需增加一個 Module 卡片，而不需要重構(gòu)整個界面。

────────────────────────────────────────

總結(jié)：8 條可遷移的設(shè)計方法論

這套 APEX 發(fā)射控制系統(tǒng) UI 給我們留下了以下可直接應(yīng)用的設(shè)計原則：

1. 從品牌到界面的全鏈條設(shè)計：Logo → 工牌 → 銘牌 → 界面 → 物理環(huán)境，每一個觸點都在講故事

2. 概念先行，一句話定義系統(tǒng)："One surface. Four operators. Nine minutes." 讓所有設(shè)計決策有據(jù)可依

3. 角色驅(qū)動的差異化界面：不同崗位看到不同數(shù)據(jù)，信息密度精確匹配職責(zé)需求

4. 狀態(tài)即顏色，顏色即語義：綠色=正常/GO，黃色=警告/HOLD，紅色=緊急/NO-GO/ABORT

5. 點陣網(wǎng)格替代狀態(tài)列表：System Readiness 的方格矩陣比文字列表快 5 倍完成認(rèn)知

6. 線稿插畫承載工程美感：透明線稿 × 數(shù)據(jù)填充，比寫實渲染更有"控制室"的專業(yè)感

7. 拓?fù)鋱D是復(fù)雜系統(tǒng)的必需品：沒有"地圖"，用戶就無法建立全局心智模型

8. 考慮物理環(huán)境的影響：屏幕上的好看 ≠ 控制室里好用，環(huán)境光、觀看距離、多人協(xié)作都是設(shè)計變量

────────────────────────────────────────

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

北京蘭亭妙微 UI 設(shè)計公司，成立 16 年來，始終保持著對國內(nèi)外優(yōu)秀設(shè)計作品的學(xué)習(xí)與研究。我們持續(xù)追蹤全球前沿的 UI/UX 設(shè)計趨勢，從中提煉可落地的設(shè)計方法論，分享給同樣熱愛設(shè)計的你。今天，我們來深度拆解一套車輛安全數(shù)據(jù)分析儀表盤的 UI 設(shè)計，從信息架構(gòu)、配色策略、移動端適配到數(shù)據(jù)敘事的視覺表達(dá)，逐一解析其背后的設(shè)計決策。

────────────────────────────────────────

一、智能 AI 卡片設(shè)計：彈窗層級的克制表達(dá)

手機端 iPhone Mockup 中的 AI 智能洞察彈窗卡片，白色卡片浮層覆蓋在主界面之上。

手機端的這張 Smart AI Insight Card，展示了 B 端彈窗設(shè)計的一個重要原則：層級的建立靠光影，不靠線條。

• 主界面采用淺灰背景（約 #F5F6FA），彈窗卡片是純白浮層 + 微投影（Y-offset 4px, blur 8px），層次關(guān)系干凈利落，無需額外邊框來界定卡片范圍

• 卡片內(nèi)部包含車輛碰撞示意圖、型號信息（Ford Model 2017）、事件類型標(biāo)簽、CTA 鏈接共四類信息層，通過縱向網(wǎng)格對齊排布，視覺密度控制在舒適區(qū)間

• 左上角的藍(lán)色警示標(biāo)簽（高飽和藍(lán)，類似 #0047FF）是整個卡片唯一的色彩重心——它同時承擔(dān)了"信息類型標(biāo)識"和"視覺激活點"兩個職能，讓用戶 0.3 秒內(nèi)鎖定核心信息

設(shè)計啟示：彈窗卡片中，單一高飽和色點 + 大量灰白留白 = 最高效的注意力引導(dǎo)策略。不要用多個顏色"爭搶"用戶視線——在 B 端場景下，克制即高級。

────────────────────────────────────────

二、配色體系：藍(lán)白雙色的技術(shù)感構(gòu)建

iPad 寬屏 Mockup 展示的 Advanced Visual Data Graph 界面，左側(cè)淺灰數(shù)據(jù)區(qū) + 右側(cè)高飽和藍(lán)詳情面板形成強烈對比。

全系界面僅使用藍(lán) + 灰白兩個色系，卻呈現(xiàn)出強烈的科技感和專業(yè)感。這種配色策略的背后是一套嚴(yán)格的色彩分工：

其中右側(cè)藍(lán)色詳情面板的處理尤為出色：純藍(lán)底色上使用白色線稿風(fēng)格的車輛技術(shù)插畫，融合了"工程圖紙"的美學(xué)質(zhì)感與"數(shù)字大屏"的現(xiàn)代感。這種「工程藍(lán)圖 × 數(shù)字大屏」的混搭風(fēng)格，是近兩年 B 端設(shè)計中逐漸成熟的視覺語言，特別適合汽車、工業(yè)、安防等領(lǐng)域的產(chǎn)品界面。

iPad Mockup 的展示意義：寬屏設(shè)備框讓儀表盤的寬屏布局優(yōu)勢一目了然——選對展示載體，本身就是最好的設(shè)計說明。

────────────────────────────────────────

三、信息架構(gòu)：數(shù)據(jù)優(yōu)先級的三層金字塔

Collision Analytics 完整看板，在筆記本設(shè)備 Mockup 中的實際效果展示，包含主數(shù)據(jù)區(qū) + 底部卡片列表 + 右側(cè)藍(lán)色抽屜面板。

在完整的 Collision Analytics 看板中，信息被嚴(yán)格劃分為三個優(yōu)先級層級，每一層對應(yīng)不同深度的閱讀需求：

第一層：核心指標(biāo)（0.5s 鎖定）

• 「48.2%」以超大字號占據(jù)左上角視覺重心區(qū)

• 這是用戶在任何場景下都能瞬間鎖定的"那個數(shù)字"

• 時間維度切片（Year/Quarter/Week）以 Tab 形式置于指標(biāo)上方，提供靈活切換的同時不侵占核心數(shù)字的空間

第二層：趨勢與異常標(biāo)注（5s 理解）

• 折線圖上用藍(lán)色豎線直接標(biāo)出風(fēng)險突增的時間節(jié)點

• 箭頭線從豎線引出，連接到文字說明"Collision severity increased by 64.2%"

• 這種標(biāo)注式數(shù)據(jù)可視化讓用戶不必在圖表和說明文字之間來回跳轉(zhuǎn)——上下文信息被直接嵌入圖表內(nèi)部

第三層：可對比的詳情卡片（30s+ 深入）

• 底部三張卡片（Collision Reconstruction / Firestorm Viper / King Cobra）以等寬網(wǎng)格并列排布

• 每張卡片結(jié)構(gòu)完全一致：左側(cè)標(biāo)簽 + 中間標(biāo)題 + 右側(cè)關(guān)鍵百分比，支持快速橫向?qū)Ρ?/p>

• 右側(cè)藍(lán)色抽屜面板作為"按需展開"的詳情層，隨時可召喚、不搶占主內(nèi)容區(qū)域

核心方法論：B 端儀表盤的信息架構(gòu)不是"把數(shù)據(jù)放上去"，而是精心設(shè)計一條「用戶先看什么 → 再看什么 → 如何深入」的視線引導(dǎo)路徑。

────────────────────────────────────────

四、移動端適配：減法設(shè)計的三個原則

手機端兩張卡片并排展示，左側(cè)為藍(lán)色聚焦卡片（Collision Reconstruction），右側(cè)為白色常規(guī)卡片，兩張卡片形成對比。

移動端的 B 端設(shè)計面臨的核心挑戰(zhàn)是：在極有限的屏幕空間內(nèi)，把復(fù)雜數(shù)據(jù)講清楚。這組移動端卡片展示了三個可復(fù)用的設(shè)計原則：

原則一：一卡一事 每張卡片承載一個分析命題，不做多任務(wù)混合。藍(lán)色卡片 = 需要用戶關(guān)注的條目，白色卡片 = 常規(guī)信息條目。顏色在此承擔(dān)了優(yōu)先級語義，而非裝飾功能。

原則二：圖文合一 車輛技術(shù)插畫與百分比數(shù)據(jù)（如 35% severity）在同一卡片內(nèi)左右排布。插圖不是裝飾——它用視覺化的方式解釋了"碰撞嚴(yán)重程度"這個抽象概念，大幅降低了用戶的理解成本。右側(cè)的折線小圖同時提供時間維度的趨勢感知。

原則三：時間軸極簡化 折線圖上方的時間維度切換（Year/Quarter/Week/Month/Day）只用一排文字 Tab 完成，整個交互區(qū)域高度不超過 40px——零控件感，零視覺冗余，卻承載了五個時間維度的切換入口。

────────────────────────────────────────

五、設(shè)計強化數(shù)字感受力：+64.2% 的視覺敘事

Focused Analytics 界面，左側(cè)大量留白區(qū)域居中展示 +64.2% 大數(shù)字，右側(cè)為折線趨勢圖 + 藍(lán)色聚焦行動卡片。

最后一張 Focused Analytics 畫面，是全套設(shè)計中最值得細(xì)品的一個單頁。+64.2% 的增長數(shù)據(jù)被單獨放在整個左半屏，周圍是大量留白。這種處理方式背后有一條被反復(fù)驗證的設(shè)計法則：

數(shù)字的"說服力" = 字號 × 留白面積

具體執(zhí)行層面：

• 巨大的無襯線字體 + 極簡居中排版，讓數(shù)字本身成為頁面唯一的視覺錘，用戶不需要閱讀任何輔助文字，就能"感受"到這個數(shù)字的分量

• 右側(cè)折線圖從 0 開始緩慢爬升、斜率逐漸增大，用圖形曲線的"加速感"還原了"問題在惡化"的緊迫性——這是敘事型數(shù)據(jù)可視化的經(jīng)典手法，圖形本身在講一個"從平穩(wěn)到惡化"的故事

• 左灰右藍(lán)的分屏策略將界面分為"客觀數(shù)據(jù)區(qū)"和"行動聚焦區(qū)"，完整閉環(huán)了「信息獲取 → 風(fēng)險感知 → 行動指引」的用戶旅程

• 藍(lán)色聚焦卡片內(nèi)部包含標(biāo)簽、標(biāo)題、技術(shù)插畫、百分比數(shù)值、進(jìn)度條、說明文字共 6 個信息層級，全部通過字號、字重、間距做出清晰區(qū)分，密而不亂

────────────────────────────────────────

六、總結(jié)：6條可遷移的設(shè)計原則

這套作品給我們提供了以下可直接應(yīng)用到實際項目中的設(shè)計準(zhǔn)則：

1. 配色做減法：2 個主色 + 灰白體系，足夠構(gòu)建完整的科技感 UI。顏色越多，信息噪音越大

2. 信息分三層：核心數(shù)字 → 趨勢標(biāo)注 → 對比詳情，為用戶建立有節(jié)奏的閱讀路徑

3. 彈窗靠光影：偏移投影 + 留白比邊框分割更優(yōu)雅，更符合現(xiàn)代 UI 的視覺趨勢

4. 顏色即信息：界面上唯一的高飽和色，必須指向用戶當(dāng)前最該關(guān)注的區(qū)域

5. 移動端一卡一事：小屏不做多任務(wù)混合，一張卡片講清一個命題，寧可多滑一屏

6. 數(shù)字要能被"感受"：超大字號 + 充足留白 + 敘事型曲線，比干巴巴的百分比數(shù)字更有沖擊力

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

螞蟻阿福 APP 以 AI 醫(yī)生朋友的身份重新定義健康管理，從對話式醫(yī)療入口到智能體驅(qū)動的全流程服務(wù)，這款應(yīng)用正在顛覆傳統(tǒng)醫(yī)療產(chǎn)品的交互邏輯。它不僅通過人格化設(shè)計降低醫(yī)療決策壓力，更借助阿里生態(tài)實現(xiàn)從咨詢到就診的完整閉環(huán)。本文將深度解析其創(chuàng)新設(shè)計如何重構(gòu)用戶與醫(yī)療服務(wù)的連接方式。

今天向大家分享一款最近剛推出的螞蟻旗下的 AI 健康助手——螞蟻阿福 APP ，希望你能從這篇產(chǎn)品體驗分析中有所收獲。如果你覺得我們的文章有價值，歡迎分享給你的朋友！

螞蟻阿福是誰？

螞蟻阿福是螞蟻集團(tuán)推出的 AI 健康管理應(yīng)用，由原 AI 健康工具 AQ 升級而來。產(chǎn)品愿景是成為用戶的 AI 醫(yī)生朋友，提供健康咨詢、圖片解讀（支持報告、病例、處方、藥盒）、個人和家庭健康檔案管理，以及預(yù)約掛號、云陪診等醫(yī)療健康服務(wù)。

螞蟻阿福有什么設(shè)計亮點？

對話式醫(yī)療入口：用 AI 重構(gòu)交互方式

當(dāng)你打開螞蟻阿福 APP的第一刻，你會發(fā)現(xiàn)它像 ChatGPT、DeepSeek 一樣，只有一個對話框。這正是 AI-UX 的典型表現(xiàn)形式——把「對話」作為核心入口，弱化傳統(tǒng)的多層級導(dǎo)航，讓用戶用一句話就能觸達(dá)預(yù)約、解讀報告、癥狀咨詢等多種服務(wù)。交互形式就像與醫(yī)生聊天，而不是過去在 App 里找入口、找功能。

設(shè)計亮點

• 人格化的 AI 形象與語言：螞蟻塑造了一個名叫阿福的卡通醫(yī)生 IP 形象，降低醫(yī)療決策的心理壓力，提升用戶信任感。
• 關(guān)鍵詞即體驗起點：用戶無需理解產(chǎn)品結(jié)構(gòu)，輸入健康關(guān)鍵詞即可觸發(fā)服務(wù)，顯著降低使用門檻。
• 多智能體并行承載復(fù)雜場景：在傳統(tǒng)菜單欄上方，不同智能體對應(yīng)不同醫(yī)療流程，用戶一次點擊即可進(jìn)入明確的任務(wù)流，避免對話發(fā)散。

體驗思考

對話式AI交互和傳統(tǒng)的菜單欄相比，用戶的心智需要改變什么？

最近我對用“用戶心智”這個知識點有了全新的理解。這得益于剛好在嘗試全新交互的設(shè)計，而體驗到阿福時，我尤其感同身受，因此重新思考了這個問題。

從交互方式上看，傳統(tǒng)菜單欄要求用戶預(yù)先了解功能位置和層級結(jié)構(gòu)，通過”點擊—瀏覽—選擇”的路徑完成任務(wù)。而對話式 AI 交互讓用戶從”尋找功能”轉(zhuǎn)向”表達(dá)需求”，用自然語言直接描述問題，對話即交互、對話即操作。

這種轉(zhuǎn)變對應(yīng)著心智模型的兩個層面：

• 從空間導(dǎo)航到意圖表達(dá)：用戶不再需要在腦海中構(gòu)建”這個功能在哪個菜單下”的空間地圖，而是像與人對話一樣說出”我想做什么”，系統(tǒng)來理解并執(zhí)行。
• 從記憶負(fù)擔(dān)到表達(dá)負(fù)擔(dān)：雖然降低了記憶功能位置的成本，但增加了準(zhǔn)確描述需求的要求——用戶需要學(xué)會如何”問對問題”。

另外，你會發(fā)現(xiàn)阿福的頭部有點擁擠（包含用戶中心、智能體、任務(wù)中心等入口）。這是因為過去在菜單欄或金剛區(qū)的高頻功能都被上移了。也許這就是未來的設(shè)計趨勢——”菜單欄”從下往上，把最寶貴的黃金位置留給 AI。

心智模型（Mental Model）

心智模型是用戶基于過去經(jīng)驗形成的認(rèn)知框架，決定了他們?nèi)绾卫斫猱a(chǎn)品的運作方式。它影響用戶如何理解界面、預(yù)測交互結(jié)果并做出操作決策。當(dāng)產(chǎn)品的實際運作方式與用戶的心智模型一致時，體驗會更流暢；反之則會增加學(xué)習(xí)成本和認(rèn)知負(fù)擔(dān)。

AI 診室：全新的互聯(lián)網(wǎng)在線就診

與傳統(tǒng) AI 對話式交互不同，阿福將醫(yī)療場景中的高頻應(yīng)用設(shè)計成獨立智能體。用戶可以在底部對話框上方和頭部直接觸發(fā)，比如接下來介紹的 AI 診室。使用其他 AI 工具問診時，體驗往往缺乏儀式感。但在阿福中，點擊 AI 問診后，系統(tǒng)會明確提示”你已進(jìn)入 AI 診室問診中”。接下來的流程會聚焦于你的癥狀，進(jìn)行梳理分析，最終推薦適合的醫(yī)院和醫(yī)生。

另外，阿福受益于阿里健康和支付寶的強大生態(tài)，可以在 APP 內(nèi)完成預(yù)約和問診的閉環(huán)。用戶只需一個 APP，就能完成從診前咨詢到在線就診的全流程。

交互流程

• 用戶在底部打開 AI 診室智能體，系統(tǒng)顯示問診中。
• 輸入病情，可以切換就診人、上傳報告等。
• 第一輪分析：AI 判斷初步癥狀，實時顯示進(jìn)度（遵循系統(tǒng)可見性原則，體驗很好），同時生成下一輪可能輸入的提示詞（交互體驗相當(dāng)棒——點擊標(biāo)簽就能自動跳入輸入框）。
• 第二輪分析：AI 繼續(xù)確認(rèn)癥狀（我預(yù)計系統(tǒng)已可預(yù)判 90% 的病情），并提供”直接出結(jié)論”按鈕——用戶可以選擇繼續(xù)補充信息，也可以直接查看專業(yè)結(jié)果。
• 多輪分析后或點擊”直接出結(jié)論”后，AI 給出最終病情判斷，并提供對應(yīng)解決方案、就近醫(yī)院掛號和醫(yī)生推薦。
• 用戶可選擇去公立醫(yī)院就診或直接在線問診。

設(shè)計亮點

• 智能體即場景容器：AI 診室不是聊天窗口,而是明確的”就診空間”，天然限定用戶心智，避免對話跑偏。
• 階段化流程強引導(dǎo)：從選咨詢?nèi)说矫枋霭Y狀，再到診療建議，每步都有清晰狀態(tài)提示，顯著降低醫(yī)療決策的不確定感。
• 任務(wù)完成感明確：通過”本次 AI 診室咨詢已結(jié)束”的節(jié)點提示，幫助用戶形成心理閉環(huán)，避免無限對話。

體驗思考

如果你覺得 ChatGPT、DeepSeek 這類對話式 AI 產(chǎn)品的交互過于簡單，融入智能體設(shè)計的阿福會給你更多驚喜。智能體像一個封裝了特定功能的應(yīng)用，具有明確的目標(biāo)導(dǎo)向，用 AI 服務(wù)于這個目標(biāo)，而不是讓用戶在自然語言中”摸索路徑”。換句話說，智能體就像傳統(tǒng)的二級功能模塊——用戶觸發(fā)后，系統(tǒng)會在當(dāng)前場景中圍繞這個需求進(jìn)行交互。

正是這個流程的設(shè)計，讓我發(fā)現(xiàn)了它的獨特之處。無論是之前體驗過的阿里旗下安診兒和訊飛曉醫(yī)，還是我 7 月份構(gòu)思的北京協(xié)和互聯(lián)網(wǎng)醫(yī)院 AI 版本方案，都未曾想過可以通過智能體來豐富交互設(shè)計形式。

AI 智能體是什么？

AI 智能體（AI Agent）是一種能夠自主感知環(huán)境、做出決策并執(zhí)行任務(wù)的 AI 系統(tǒng)。與傳統(tǒng)的對話式 AI 不同，智能體具有明確的目標(biāo)導(dǎo)向，能夠調(diào)用多種工具、API 和服務(wù)來完成復(fù)雜任務(wù)。

AI 找醫(yī)生：融入傳統(tǒng)交互的創(chuàng)新設(shè)計

AI 找醫(yī)生這個智能體同樣帶給我很大的驚喜和啟發(fā)。它成功地將傳統(tǒng)醫(yī)療 APP 中用戶已經(jīng)熟悉的交互模式融入產(chǎn)品，同時巧妙地結(jié)合了 AI 智能對話方式，形成了一種既保留用戶認(rèn)知習(xí)慣又具有創(chuàng)新性的混合交互體驗。

交互流程

• 用戶在底部打開就醫(yī)服務(wù)智能體，點擊AI 找醫(yī)生。
• 平臺提供按科室和按疾病兩種類型的檢索（這一步和我們平時去醫(yī)院掛號找醫(yī)生的習(xí)慣完全一致）。
• 點擊科室或病種，觸發(fā) AI 對話，系統(tǒng)開始結(jié)合患者的病情、地區(qū)進(jìn)行推薦（醫(yī)生數(shù)據(jù)來源自在全國擁有 90 萬醫(yī)生的好大夫）。
• 患者可以直接進(jìn)入醫(yī)生主頁，進(jìn)行在線問診和掛號。
• 如果對平臺推薦的醫(yī)生不滿意，可以進(jìn)入全部醫(yī)生二級頁面進(jìn)行個性化篩選（傳統(tǒng)的找醫(yī)生形式），也可以讓阿福重新為你推薦。

設(shè)計亮點

• 融合傳統(tǒng)交互模式：在 AI 對話框中加入傳統(tǒng)的 TAB 組件，讓用戶可以切換篩選，符合用戶的使用習(xí)慣。
• 標(biāo)簽即意圖觸發(fā)器：疾病/科室標(biāo)簽本身就是結(jié)構(gòu)化意圖，點擊即可觸發(fā) AI 搜索，無需多輪描述。
• 給人留下深刻印象的視覺設(shè)計：除了交互形式的創(chuàng)新，視覺設(shè)計同樣出色，為用戶帶來全新的視覺體驗。

體驗思考

體驗完這個智能體的交互流程后，我意識到過去對對話式 AI 產(chǎn)品的交互和 UI 理解過于淺顯。它們確實主要依靠對話交互，但隨著智能體的發(fā)展，每個智能體都代表一個獨立的流程、內(nèi)容甚至風(fēng)格。

以 AI 找醫(yī)生為例：它融合了傳統(tǒng)的 TAB 框架，讓用戶按科室或疾病查找；當(dāng) AI 推薦的數(shù)據(jù)不滿意時，還提供”查看全部”按鈕，引導(dǎo)用戶進(jìn)入二級頁面進(jìn)行個性化篩選。這個設(shè)計讓我發(fā)現(xiàn)，AI 產(chǎn)品遠(yuǎn)比想象中豐富——它不只是簡單的對話框和側(cè)邊欄。

寫到這里，我突然想起另一款對話式醫(yī)療 APP——訊飛曉醫(yī)。當(dāng)我輸入”預(yù)約掛號”時，系統(tǒng)只能提示我跳轉(zhuǎn)至其他醫(yī)療網(wǎng)站完成掛號。相比之下，阿里的生態(tài)能力令人贊嘆：阿福直接連接好大夫等平臺，用戶可以在 App 內(nèi)完成從 AI 推薦、查看醫(yī)生到付費問診的全流程，無需跳出即可實現(xiàn)就診閉環(huán)。

醫(yī)生AI分身：讓專家經(jīng)驗規(guī)?；?wù)的創(chuàng)新嘗試

早在 2023 年參與釘釘智能體測評時，我就有過類似構(gòu)思：如果將專家過往的就診經(jīng)驗和知識喂養(yǎng)給 AI 并進(jìn)行專門訓(xùn)練，這個智能體能否解決 80% 的診前基礎(chǔ)咨詢？當(dāng)我體驗這個智能體并查詢相關(guān)資料后，發(fā)現(xiàn)阿福的醫(yī)生 AI 分身確實做得非常出色。

該模型（官方名稱叫螞蟻·安診兒醫(yī)療大模型 AntAngelMed）基于海量醫(yī)學(xué)文獻(xiàn)和去隱私化的真實病例數(shù)據(jù)構(gòu)建，具備”深度思考”能力。它可對復(fù)雜、信息不全的臨床場景進(jìn)行多輪推理、邏輯驗證與自我糾錯，助力精準(zhǔn)診療。

在產(chǎn)品層面，AI 醫(yī)生整合了語音對話、掛號、補號申請等多種功能和場景?；颊呖梢韵衽c真人交流一樣咨詢，醫(yī)生則能 24 小時服務(wù)多位患者。

設(shè)計亮點

• 專家身份具象化，建立信任起點：AI 不再是泛化的醫(yī)生形象，而是明確綁定真實專家（姓名、醫(yī)院、學(xué)科、頭銜），讓用戶在對話前就建立信任預(yù)期。
• 醫(yī)學(xué)思考路徑可視化，不只給結(jié)論：通過「院士團(tuán)隊解讀 / 醫(yī)學(xué)思考路徑 / 文獻(xiàn)引用」等模塊，將 AI 的推理過程展示出來，降低”黑箱感”，增強專業(yè)可信度。
• 多模態(tài)輸入降低使用門檻：支持語音對話、拍照上傳病歷與檢查報告，降低中老年用戶或非專業(yè)用戶的表達(dá)成本，貼合真實就醫(yī)場景。

體驗思考

醫(yī)生 AI 智能體這一創(chuàng)新模式對多個行業(yè)領(lǐng)域具有重要的參考價值。它的核心在于：將一位擁有數(shù)十年臨床經(jīng)驗的醫(yī)療專家所積累的專業(yè)知識、診療經(jīng)驗和實踐智慧進(jìn)行系統(tǒng)化的數(shù)據(jù)處理和標(biāo)準(zhǔn)化轉(zhuǎn)換，再借助人工智能技術(shù)，使這些專業(yè)知識能夠同時為成千上萬的用戶提供高質(zhì)量的服務(wù)。

我甚至有一個大膽的設(shè)想：在未來，即便一個專家壽終正寢，只要他能把自己的知識庫和經(jīng)驗傳送給 AI，這個專家是不是就并未真正離去，而是可以繼續(xù)造福我們的子孫后代？

健康小目標(biāo)：自動生成健康打卡任務(wù)

「健康小目標(biāo)」是一個圍繞具體健康意圖（如改善睡眠）展開的目標(biāo)型智能體。它通過 AI 引導(dǎo)式問答拆解目標(biāo)，自動生成可執(zhí)行的日常任務(wù)，并將”制定計劃—每日打卡—正向反饋”完整串聯(lián)，形成持續(xù)的行為干預(yù)閉環(huán)。

體驗這個功能時，我特意下載了幾款健身打卡 APP，對比阿福的打卡流程與專業(yè)健身應(yīng)用的差異。整體體驗下來，阿福的用戶體驗更流暢。由于首頁更聚焦、更簡潔，我可以一目了然地看到所有打卡任務(wù)。

交互流程

• 用戶在底部打開健康小目標(biāo)智能體。
• 進(jìn)入后開始設(shè)置自己的小目標(biāo)（用戶可以選擇模板也可以進(jìn)行自定義）。
• 在AI 對話框完善詳細(xì)資料。
• 一鍵生成健康計劃和打卡任務(wù)。
• 打卡任務(wù)建立后，AI 首頁會實時同步提醒。

設(shè)計亮點

• 目標(biāo)即入口，靈活自由：用戶可以選擇系統(tǒng)設(shè)置好的打卡目標(biāo)，也可以從一句“我想睡得更香”去建立自己的專屬目標(biāo)。
• 結(jié)構(gòu)化提問，替用戶完成自我診斷：以“我想睡得更香”為例，系統(tǒng)通過睡眠狀態(tài)、入睡時長、睡前行為等問題，幫助用戶把模糊感受轉(zhuǎn)化為可分析變量。
• AI 自動生成“可打卡”的微行動：不是泛泛建議，而是直接給出可執(zhí)行、低負(fù)擔(dān)的具體行為（如調(diào)暗燈光、熱水泡腳）。
• 打卡與 AI 強綁定：從創(chuàng)建、執(zhí)行到反饋，始終在 AI 場景內(nèi)完成，避免任務(wù)系統(tǒng)與對話系統(tǒng)割裂。
• 即時正反饋與成長機制：打卡成功即獲得“健康福氣值”，通過情緒化動畫與數(shù)值反饋強化成就感。

體驗思考

這個智能體給了我兩點啟發(fā)。

第一，表單類操作（如添加就診人、填寫問卷等）可以直接在對話框中完成，無需跳轉(zhuǎn)到新頁面。實際體驗下來，這種設(shè)計不僅高效，還能保持用戶的使用連貫性。

第二，健康小目標(biāo)就像常見的用戶簽到打卡功能，通過持續(xù)打卡增強用戶活躍度。但我認(rèn)為最大的亮點在于：你可以在對話框中輸入想實現(xiàn)的目標(biāo)，系統(tǒng)就會為你自動規(guī)劃。這正是自我決定理論（Self-Determination Theory）的絕佳體現(xiàn)，當(dāng)用戶具備自主性和勝任感時，他們會感覺是在主動使用產(chǎn)品，而非被產(chǎn)品操控。

AI 拍皮膚：一體化皮膚管理流程

這還是我第一次如此細(xì)致地了解我的皮膚，因為阿福的 AI拍皮膚智能體更像一個一體化的皮膚管理工具。不僅可以拍患處、看舌苔，還可以測膚質(zhì)、測毛發(fā)。很幸運，工作了這么多年，我還沒有禿頭的跡象，AI 給我的測評是要注意休息、少熬夜，目前毛發(fā)良好。

設(shè)計亮點

• 多場景入口統(tǒng)一：拍患處、看舌苔、測膚質(zhì)、測毛發(fā)等能力集中在同一入口，用戶無需理解功能邊界，只需選擇“我想拍什么”。
• 漸進(jìn)式診斷對話：先基于圖像給出初步提示，再通過關(guān)鍵追問（瘙癢時長、接觸史）逐步收斂判斷，顯著降低誤判焦慮。
• 強大的圖像識別能力：僅需拍攝患處照片即可完成分析,并提供專業(yè)的診療建議;
• 延續(xù)性關(guān)懷設(shè)計：微交互特別出色，通過「3 天后再聊」與訂閱提醒，將一次性問診轉(zhuǎn)化為持續(xù)的皮膚管理關(guān)系。

體驗思考

我不得不感嘆當(dāng)今 AI 技術(shù)的飛速發(fā)展。當(dāng)我完整體驗了看舌苔、測膚質(zhì)和測毛發(fā)這些功能時，雖然或許是我之前未曾留意，但還是給了我很大的震撼。AI 僅通過不同視角和角度的拍照，就能在短時間內(nèi)快速評估出用戶皮膚的健康狀況——這本身就是科技的巨大進(jìn)步。我沒有去找 ChatGPT 探討背后的技術(shù)原理，只想從一個普通用戶的角度，表達(dá)我體驗這些技術(shù)時的真實感受。

藥管家：圍繞“用藥”的完整閉環(huán)服務(wù)

「藥管家」圍繞患者真實的用藥場景，將藥品識別、用藥管理、用藥指導(dǎo)、價格查詢與購買行為整合為連續(xù)流程。用戶從”我手上有什么藥/我需要吃什么藥”出發(fā)，可以自然完成從查詢、添加到用藥提醒，乃至購買的全鏈路操作。AI 在其中承擔(dān)持續(xù)輔助與決策支持角色。

這個環(huán)節(jié)讓我深刻感受到一個完整生態(tài)的價值——你在阿福就能實時查詢藥品價格、多維度對比，以及直接通過外賣配送或郵寄下單。

設(shè)計亮點

• 完整的閉環(huán)服務(wù)：藥管家并未將拍照識別、比價、用藥計劃、購買拆成孤立功能，而是圍繞“用藥”這一高頻行為，構(gòu)建單一連續(xù)路徑，符合用戶一次性完成任務(wù)的心理預(yù)期。
• AI 深度介入但不過度干預(yù)：AI 能基于上傳的藥品圖片與健康檔案，主動識別用戶意圖并給出結(jié)構(gòu)化用藥解讀，同時明確風(fēng)險邊界，不替代醫(yī)生判斷，建立可信的“輔助者”形象。
• 用藥行為的時間化與自動化：通過用藥計劃，將一次性的藥品查詢轉(zhuǎn)化為持續(xù)行為管理，AI 與提醒機制共同承擔(dān)“記憶負(fù)擔(dān)”，降低用戶出錯與遺忘風(fēng)險。
• 從認(rèn)知到行動的順滑閉環(huán)：在用戶確認(rèn)藥品信息與用法后，無縫銜接比價與購買場景，決策成本最低時提供轉(zhuǎn)化能力，既提升效率，也強化平臺價值。

體驗思考

C 端產(chǎn)品的頁面空間寸土寸金。當(dāng)我添加了用藥提醒后，我突然意識到阿福的首頁其實是一個任務(wù)中心，而非傳統(tǒng)的科普資訊推薦區(qū)。特別是與安診兒 APP 相比，阿福的首頁雖然看起來千人千面,但它能夠感知、讀取并提醒用戶——無論是健康打卡、健康數(shù)據(jù)還是用藥提醒,這個卡片區(qū)的場景拓展與應(yīng)用都關(guān)聯(lián)著整個產(chǎn)品的功能體系。

AI報告：診斷+ 診療閉環(huán)銜接

體驗到這里時，恰好我剛帶小孩去醫(yī)院做了個小檢查。拿到抽血報告后，我嘗試將報告拍給阿福，親身體驗了 AI 報告功能。與醫(yī)生相比，阿福的 AI 報告能幫助患者更系統(tǒng)、更完整地了解細(xì)節(jié)。醫(yī)生工作繁忙，雖然經(jīng)驗豐富、能快速判斷病情，但往往沒有足夠時間為患者詳細(xì)解釋。

AI 報告不僅為患者提供多輪對話追問，最后還會自然銜接 AI 診室、醫(yī)生解讀與醫(yī)院推薦，形成從”看不懂報告”到”下一步怎么做”的完整閉環(huán)。

設(shè)計亮點

• 一鍵式認(rèn)知降噪：通過 AI 自動結(jié)構(gòu)化報告內(nèi)容，將專業(yè)醫(yī)學(xué)術(shù)語轉(zhuǎn)譯為用戶可理解的結(jié)論與建議，顯著降低信息理解成本。
• 過程可感知的分析狀態(tài)：掃描、脫敏、分析、整理結(jié)論以步驟化進(jìn)度呈現(xiàn)，增強系統(tǒng)可見性，緩解用戶等待與不確定感。
• 分流式行動推薦：在 AI 解讀后明確給出“AI 繼續(xù)問診 / 真人醫(yī)生解讀”兩種路徑，尊重不同風(fēng)險偏好與決策階段的用戶。
• 信任邊界清晰：通過「僅供參考、需遵醫(yī)囑」等提示，主動聲明 AI 能力邊界，避免過度承諾帶來的信任風(fēng)險。

體驗思考

我們也許真的要認(rèn)真思考如何利用 AI 來幫助我們更好地生活了，比如 AI 報告這樣的功能，它至少可以解決大部分患者對于專業(yè)報告的疑惑，了解 50%-70% 的基礎(chǔ)情況。過去的互聯(lián)網(wǎng)醫(yī)院可以解決全國城市醫(yī)療資源不對等的痛點，而隨著 AI 的加持，我覺得這種痛點會逐漸降低，就像 我在 AI 醫(yī)生分身那個環(huán)節(jié)提到的一樣，如果AI 可以把一個醫(yī)生過去幾十年的知識和就診經(jīng)驗復(fù)刻，那么無論我們在哪個城市，都能同時享受到這個醫(yī)生帶給社會的價值。

總結(jié)與思考

螞蟻阿福給了我哪些思考？

第一，傳統(tǒng)菜單欄會逐漸消失嗎？

正如我在第一部分討論的，阿福的對話式入口給了我很多啟發(fā)?？粗⒏頂D的頭部，我真切地感覺到——傳統(tǒng)菜單欄可能會在越來越多的產(chǎn)品場景中徹底消失。甚至連搜索欄這樣的功能，都會被 AI 輸入框替代。對話即交互，對話即搜索，對話即觸發(fā)，讓我們拭目以待。

第二，智能體驅(qū)動 AI 產(chǎn)品設(shè)計創(chuàng)新

我每天都在使用 ChatGPT，長久以來形成了一種刻板印象：對話式 AI 產(chǎn)品的設(shè)計平淡無聊，傳統(tǒng)的交互和界面設(shè)計似乎不再重要，取而代之的是功能邏輯和提示詞設(shè)計。但阿福的設(shè)計給了我新的啟發(fā)，打破了我對對話式 AI 產(chǎn)品的固有認(rèn)知——未來的 AI 產(chǎn)品可以結(jié)合智能體做出更多創(chuàng)新，交互界面設(shè)計依然重要。

第三，對話式 AI 產(chǎn)品的應(yīng)用場景將越來越廣

我想到了許多應(yīng)用場景，特別是與醫(yī)療高度相似的政務(wù)領(lǐng)域，比如稅務(wù)、教育等。如果這些傳統(tǒng)行業(yè)引入對話式 AI 交互，將極大提升工作效率。試想一下，當(dāng)你只需在稅務(wù) APP 中輸入幾個字或說一段語音就能開始辦理業(yè)務(wù)，能為前臺工作人員節(jié)省多少時間？在這里給自己定個小目標(biāo)：2026 年設(shè)計一款政企對話式 AI 產(chǎn)品，探索這個領(lǐng)域的設(shè)計趨勢。

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

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

一般用戶在登錄后臺管理系統(tǒng)后，后臺首頁就成為了用戶與產(chǎn)品交互的第一個頁面，這某種程度上也凸顯了這一頁面的重要性。那么，后臺管理系統(tǒng)的首頁設(shè)計可以遵循哪些策略？本文作者結(jié)合實戰(zhàn)項目發(fā)表了他的想法，一起來看看吧。

很久沒有更新文章了，一方面文章選題困難，公眾號的閱讀量真是有點慘不忍睹，寫作的動力有所下降。另一方面工作確實比較忙，時間精力有限，最近參加了多個工作項目一直在加班。

今天總結(jié)下項目過程中，關(guān)于后臺管理系統(tǒng)首頁設(shè)計引發(fā)的一些思考。

主要的內(nèi)容包括：

1. 后臺首頁的作用；
2. 首頁的設(shè)計方向；
3. 首頁內(nèi)容的思考。

一、后臺首頁的作用

后臺首頁是用戶登錄后，與產(chǎn)品交互的第一個頁面，信息內(nèi)容非常重要，作用也非常明顯。一方面可以幫助用戶宏觀了解系統(tǒng)的整體運行狀態(tài)，洞察業(yè)務(wù)問題。另一方面可以幫助用戶快速處理業(yè)務(wù)問題，不需要到專門的功能頁面操作，縮短用戶的操作路徑。

后臺首頁需要依托整個產(chǎn)品的功能體系，根據(jù)用戶角色的職能、權(quán)限、業(yè)務(wù)范圍，提取關(guān)鍵的用戶關(guān)心的業(yè)務(wù)功能點搭建頁面內(nèi)容。所以一般是在業(yè)務(wù)功能完成之后再進(jìn)行首頁設(shè)計。這就要求產(chǎn)品經(jīng)理能夠從全局視角理解用戶和場景，才能做出有效的設(shè)計方案。

另外首頁不屬于具體的業(yè)務(wù)領(lǐng)域，所以一般不會安排固定的產(chǎn)品經(jīng)理，而是由產(chǎn)品經(jīng)理兼任。如果產(chǎn)品設(shè)計沒有整體規(guī)劃，首頁就容易被忽略，成為「三不管」地帶。

二、首頁設(shè)計的方向

根據(jù)以往的設(shè)計經(jīng)驗，我總結(jié)了以下四點：

1. 內(nèi)容與用戶角色

首頁設(shè)計要求產(chǎn)品經(jīng)理對用戶角色的分類、業(yè)務(wù)職能有比較深入的了解，否則產(chǎn)品設(shè)計就可能變成內(nèi)容堆砌。

通常后臺系統(tǒng)需要面向管理層和執(zhí)行層兩類用戶，他們對于信息需求存在比較大的差異。管理層更關(guān)注宏觀層面的統(tǒng)計信息，方便了解業(yè)務(wù)動態(tài)，從而制定工作決策等，所以各類可視化圖表就成為首頁重要的內(nèi)容組成。

對于執(zhí)行層用戶，主要是完成具體的工作任務(wù)，所以更加關(guān)注明細(xì)數(shù)據(jù)。除此之外，適當(dāng)?shù)卦黾右恍┙y(tǒng)計數(shù)據(jù)，可以更全面了解系統(tǒng)狀態(tài)，也便于對上匯報，減少人工統(tǒng)計的工作量。

B 端產(chǎn)品了解用戶和場景并不容易，如果只靠“猜測”做設(shè)計，就會發(fā)現(xiàn)首頁設(shè)計有很多種可能，怎么做似乎都對，怎么做似乎都不對。而且參與的人越多，想法也會越多。

所以在項目中，需要盡可能地收集用戶場景信息加以分析完成設(shè)計，即使存在一部分“猜測”信息，也需要能夠自圓其說，才能更好的推進(jìn)產(chǎn)品設(shè)計落地。

2. 場景/主題化

對于小的業(yè)務(wù)系統(tǒng)，單獨的一個頁面就可以涵蓋所有的業(yè)務(wù)信息，內(nèi)容也會比較清晰簡單。

對于比較大的業(yè)務(wù)系統(tǒng)，首頁包含的消息會比較多，例如阿里云、騰訊云等產(chǎn)品，一個頁面內(nèi)容無法承載所有的信息。因此需要根據(jù)場景/主題拆分首頁內(nèi)容，便于用戶有目標(biāo)地快速查看信息。比如阿里云采用的是資源管理、安全管理、成本管理等主題去劃分首頁內(nèi)容。

3. 實用性

1）串聯(lián)內(nèi)容，縮短路徑

某些場景下，首頁要滿足用戶快速處理業(yè)務(wù)工作的需求，例如待辦事項，審批操作等，通過明細(xì)列表的展示，結(jié)合抽屜等詳情信息展示，用戶可以在首頁直接處理工作任務(wù)，無需進(jìn)入到功能頁面。

「常用功能」也是首頁的常見組件，類似操作系統(tǒng)桌面的快捷方式一樣。可以將一些二級甚至三級功能作為常用功能放在首頁中，用戶不需要通過菜單逐級點擊，即可進(jìn)入功能頁面，對縮短用戶操作路徑也有很大幫助。

2）高頻常用功能信息聚合

首頁的價值在于幫助用戶簡單、高效的認(rèn)知系統(tǒng)，是高頻常用功能的信息聚合。因此需要盡量減少花哨、不實用、看似高大上的功能，或者改變展示形式，保證重要信息的優(yōu)先展示。

有些 B 端產(chǎn)品的門檻比較高，為了降低認(rèn)知成本，于是有人希望在首頁中增加系統(tǒng)介紹、系統(tǒng)架構(gòu)圖的形式來展示產(chǎn)品的功能流程，在產(chǎn)品演示是可以更好的讓用戶理解產(chǎn)品功能。

這些本來應(yīng)該是在 PPT 中展示的信息，卻要放到首頁中展示?？此瓶犰诺囊粡垐D，實際上在應(yīng)用階段對用戶的工作沒有任何幫助。因為用戶根本不關(guān)心你的系統(tǒng)架構(gòu)是什么，需要的是產(chǎn)品幫助他解決工作中的問題，帶來的效率提升。

即使用戶需要了解這些信息，也不是每天打開首頁就要一眼看到，可以采用其他的呈現(xiàn)方式。比如用戶引導(dǎo)，或者與業(yè)務(wù)信息關(guān)聯(lián)，既可以呈現(xiàn)出業(yè)務(wù)流程，也可以展示業(yè)務(wù)信息，又或者首頁增加入口、引導(dǎo)在幫助中心查看。

4. 定制化

B 端產(chǎn)品業(yè)務(wù)功能是面向用戶角色的，同一角色的用戶具有相同的工作任務(wù)。但是首頁則有所不同，同一類角色的不同用戶，關(guān)注點也不完全相同。尤其是業(yè)務(wù)系統(tǒng)內(nèi)容較多時，首頁內(nèi)容可定制就成為了滿足不同用戶信息需求的方式。

當(dāng)然系統(tǒng)的定制化并不是讓用戶從零定制，而是在系統(tǒng)初始內(nèi)容基礎(chǔ)上，重新組織頁面內(nèi)容、調(diào)整頁面布局等。否則定制化反而會帶給用戶更差的體驗。

三、首頁內(nèi)容應(yīng)該追求簡潔還是豐富呢？

在項目設(shè)計中，就碰到了這個問題。有同事認(rèn)為首頁應(yīng)該簡單點，避免過多的信息量增加用戶的學(xué)習(xí)成本。

當(dāng)然這個問題需要根據(jù)產(chǎn)品定位具體分析。不過總的來說，我個人認(rèn)為首頁應(yīng)該豐富一些。

首頁是信息聚合頁面，天然就會有較多的信息內(nèi)容，用戶需要通過信息傳遞了解系統(tǒng)的狀態(tài)和變化，人為的過濾掉內(nèi)容后會影響信息的全面性。

其次用戶有信息選擇權(quán)，通過一定時間的摸索，可以形成自己的信息查看軌跡，或者個性化定制首頁內(nèi)容過濾掉工作中冗余的信息。

而且B 端產(chǎn)品經(jīng)過多年的發(fā)展，單從布局和表現(xiàn)形式上看，首頁已經(jīng)有比較成熟的設(shè)計模式了，大多數(shù)企業(yè)用戶也形成了統(tǒng)一的認(rèn)知和習(xí)慣?？ㄆL(fēng)格是首頁最常見的展現(xiàn)形式，卡片可以讓頁面分割更加清晰，方便信息讀取，有助于弱化信息量帶來的復(fù)雜感。即使不采用卡片分割， 可以通過間距、標(biāo)題等引導(dǎo)用戶視線，劃分頁面內(nèi)容。

四、總結(jié)

簡單總結(jié)下：

1. 首頁考慮的設(shè)計因素比較多，每種用戶角色可能會有不同的需求，需要針對性的設(shè)計，而業(yè)務(wù)功能的用戶角色更加明確；
2. 首頁設(shè)計需要對系統(tǒng)有全面了解，業(yè)務(wù)功能則比較聚焦；
3. 首頁是系統(tǒng)第一個頁面，會受到更高的關(guān)注度，往往設(shè)計分歧也會比較大；產(chǎn)品設(shè)計需要做深入的分析，故事性要求也會更高；否則被噴和被 Pass的可能性會非常大；
4. 首頁設(shè)計的內(nèi)容需要注重實用性，避免各種信息的無效堆砌。

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

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

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

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

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

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

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

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

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

實際上，【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ìn)行了數(shù)據(jù)洞察和體驗重塑。

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

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

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

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

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

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

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

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

<圖：小編推薦>

<圖：小編推薦>

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

<圖：場景化推薦>

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

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

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

<圖：玩法專題>

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

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

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

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

<圖：隨機玩>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

色彩體系重構(gòu)

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

<圖：品牌色>

分層處理原則：

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

<圖：分層處理原則>

注入“情緒價值”：

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

<圖：“海島”微動效>

<圖：隨機玩>

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

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

<圖：老版本頁面示例>

<圖：新版本頁面示例>

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

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

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

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

2、抓住重點：資源永遠(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è)計重新注入體驗。

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

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

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

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

作為一個 B 端設(shè)計師，我們究竟要如何理解組件？

當(dāng)接觸到一個新組件時，通常會陷入到迷茫。一方面是組件過于的熟悉，我們在日常的工作當(dāng)中會頻繁接觸到大量的組件內(nèi)容（畢竟是組件設(shè)計師...）另一方面則是新的組件不斷涌入，我們作為設(shè)計師一時之間不知道如何進(jìn)行分析，今天我們就來聊聊 B 端設(shè)計師與組件之間的“愛恨情仇”。

先來簡單說說什么是組件？

我認(rèn)為組件就是組成用戶界面的基本元素，也是前端在開發(fā)過程當(dāng)中，抽象出來可以復(fù)用的模塊。對于定義大家不必過于糾結(jié)，最主要還是要了解其使用，比如在下方頁面當(dāng)中，會包含有哪一些組件？

A. 輸入框 開關(guān) 上傳 按鈕 文本提示

B. 輸入框 開關(guān) 上傳 按鈕 氣泡卡片

C. 輸入框 開關(guān) 圖片預(yù)覽 按鈕 文本提示

這就是我們要了解關(guān)于一個組件的判斷流程，我認(rèn)為會有三步：形式、交互、場景。

一、形式?jīng)Q定功能

其實我們在去辨別新一個組件的時候，會優(yōu)先關(guān)注組件的「樣子」，進(jìn)而來進(jìn)行辨別。

比如下方的兩個組件，我們其實很快速就能判斷出一個是 單選框，一個是多選框。因為在我們潛意識當(dāng)中單選為圓形、多選則為方形，因此對于一個組件的第一印象則會和它的形式相關(guān)。

但很多時候，隨著業(yè)務(wù)的變化，我們也會給組件更多含義。比如在下方三個新建按鈕當(dāng)中，因為他們的形式不同，所對應(yīng)的含義也并不相同。

通過形式上，我們可以理解為：

• 第一個新建按鈕，
• 第二個新建按鈕：
• 第三個新建按鈕：

再舉一個例子，比如在這三個選擇組件當(dāng)中，正是由于其組件形式的變化，導(dǎo)致它們在使用上也會存在較大差別~

當(dāng)然，正是因為它們樣子的改變，組件的使用含義也會產(chǎn)生變化。

二、明確交互狀態(tài)

知道它的樣子還不夠，我們還要了解它究竟應(yīng)該如何操作，因此就需要明確對應(yīng)的交互狀態(tài)。

比如同樣給到大家兩個組件，請你去辨別這兩個組件分別是什么？

其實我們很難進(jìn)行細(xì)致的辨認(rèn)，因為這兩個組件在形式上基本相同。但我們一旦將其動起來，你就會發(fā)現(xiàn)不同，左側(cè)的是一個按鈕，而右側(cè)則為鏈接。

其實我們在辨別交互狀態(tài)時，通常會存在兩種辨別維度：常規(guī)交互與業(yè)務(wù)交互。

常規(guī)交互是指在網(wǎng)頁端當(dāng)中的基礎(chǔ)交互，比如 Hover、點擊，這種情況大多數(shù)設(shè)計師經(jīng)常接觸，因此我們就不花太多時間放在這上面。

第二種交互類型是業(yè)務(wù)交互，它主要出現(xiàn)在特定的頁面上。比如在圖表中的下鉆、過濾、聯(lián)動、縮放等等；在表格就會有 凍結(jié)、拖拽、選中 等交互，這些內(nèi)容都是我們在涉及特定頁面時需要關(guān)注的。

所以我們再去理解一個組件的時候，也需要去考慮這個組件所關(guān)聯(lián)的交互狀態(tài)，這樣才能夠?qū)τ谶@個組件有個更為全面的認(rèn)識。

三、作用對比

作用對比則是去思考這個組件與其他作用類似的組件之間究竟會存在什么差別？

因為每一個組件都會有它存在的意義，我們可以通過橫向單維度的對比，了解到這個組件它所對應(yīng)的特點。

這個我們來舉一個完整的例子，帶大家感受一下~

舉一個例子

比如最近在行業(yè)當(dāng)中，出現(xiàn)一種新的組件叫做：螞蟻線

剛開始在騰訊云的官網(wǎng)看到了螞蟻線，但其實我對他真的一無所知。于是乎，我開始了組件調(diào)研。

從形式開始，你會發(fā)現(xiàn)“螞蟻線”是位于文本下方，通過虛線的方式呈現(xiàn)。

通過這種形式，我們能夠拓展一些其他的類似樣式。

比如在飛書當(dāng)中，當(dāng)你寫一個錯別字的時候，飛書會提供默認(rèn)的下劃線提示你修改錯誤。但這個下劃線是一個實線，并且會以黃色作為標(biāo)注，這就是形式上的差異。

其次，在交互上，在整個頁面中，當(dāng)你將鼠標(biāo)懸停在虛線上時，這個提示會告訴你這里有信息可以進(jìn)行預(yù)覽。通過這樣，我們就能大致明白“螞蟻線”的含義：它出現(xiàn)在文本下方，使用虛線的方式提示用戶這里有更多的信息。用戶通過將鼠標(biāo)懸停在虛線區(qū)域的文本上，便可以查看更多內(nèi)容。

最后，在對組件進(jìn)行對比時，思考與“螞蟻線”具有相同作用的組件，我想到有兩個：Tooltips和Popover。并簡單整理它們在日常頁面的使用，一共會包含三種相同的情況下的交互形式。同時，明確分析緯度以信息凸顯程度進(jìn)行對比，進(jìn)而能夠?qū)⑦@三個組件進(jìn)行區(qū)分。

并且在頁面中，交互的形式也會有所不同。因此我們簡單整理，會有三種相對應(yīng)的對比方式。并明確它們，以信息干擾程度作為標(biāo)準(zhǔn)，來進(jìn)行單維度的劃分。進(jìn)而就能得到“螞蟻線”組件的一個整體的用途。

關(guān)于組件，確實由于時間有限，給大家分享到這里。

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

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

設(shè)計組件庫是提升設(shè)計效率和一致性的重要工具，但如何在頻繁迭代和動態(tài)調(diào)整中高效賦能業(yè)務(wù)設(shè)計交付，一直是行業(yè)面臨的挑戰(zhàn)。蘭亭妙微UI設(shè)計公司，分享了他們在設(shè)計組件庫建設(shè)中的新思考和實踐，供大家參考學(xué)習(xí)。

本文將分享我們對于“什么是好的設(shè)計組件”的看法，并給出一種搭建復(fù)雜組件的實用思路。我們還會從資產(chǎn)消費的角度，提供一些優(yōu)化建議。雖然過程中會涉及不少基于Figma軟件的操作細(xì)節(jié)，但核心思路就像一把“萬能鑰匙”，無論在哪個設(shè)計平臺都行之有效，希望這些內(nèi)容能給廣大設(shè)計師們帶來一些新的啟發(fā)。

01 “好的設(shè)計組件”在搜索設(shè)計場景中的定義

從網(wǎng)上搜索設(shè)計組件，我們能找到各種對外公開的設(shè)計組件庫，同樣還有不少或概括或詳細(xì)的文章，手把手教你“如何搭建一個好的設(shè)計組件庫”，但這些方法論很少探討面對C端組件頻繁增改、設(shè)計規(guī)范動態(tài)調(diào)整，如何高效賦能業(yè)務(wù)設(shè)計交付的相關(guān)內(nèi)容，但這恰恰是搜索業(yè)務(wù)面臨的關(guān)鍵問題。

搜索是一個“牽一發(fā)而動全身”的業(yè)務(wù)，每一個微小的設(shè)計細(xì)節(jié)都有可能影響各個業(yè)務(wù)的數(shù)據(jù)指標(biāo)，一個“好的設(shè)計組件庫”需要以一種潛移默化的方式讓設(shè)計師掌握設(shè)計規(guī)范，完成合規(guī)的設(shè)計，從這個角度而言它應(yīng)該比較「好懂」。

而作為服務(wù)于整個設(shè)計團(tuán)隊的公用設(shè)計組件庫，面對每月數(shù)以萬計的調(diào)用次數(shù)，它必須保障最基本的易用性，應(yīng)該非?！负糜谩埂?/p>

同時，面對頻繁迭代，“好的設(shè)計組件”還需要保持最快的更新速度，為各個橫向團(tuán)隊提供正確的樣式，從這個角度來說它還要「好維護(hù)」。

因此，「好懂、好用、好維護(hù)」是搜索設(shè)計語境下，對一個“好的設(shè)計組件”的定義。

接下來，我們將從這三個「好」入手，分享搜索設(shè)計組件庫在升級過程中的一些思考，希望能和大家共同探討。

02 好懂：一種耦合設(shè)計規(guī)范的組件搭建方式

“萬丈高樓平地起”，我們先來說說如何從零開始構(gòu)建一個既符合設(shè)計規(guī)范又易于理解的設(shè)計組件。

首先，在搭建組件時，我們可以考慮采用多層嵌套的方式，即組件(Component)內(nèi)部嵌套變體(Instance)。這種方式不僅能省去組件搭建和修改過程中的重復(fù)操作，甚至還能在解綁組件時，通過選中內(nèi)部的子組件圖層進(jìn)行解綁，大大簡化了搭建和使用雙方的操作流程。

在多層嵌套的思路下，我們可以進(jìn)一步用“底層靈活、上層收斂”來指導(dǎo)組件的搭建。這意味著底層變體的形式足夠多樣，能夠支持大部分的狀態(tài)切換，而在上層組件搭建的過程中顯性地加強規(guī)范的指引(如規(guī)范中不允許使用的樣式不對外展示)，以降低超出規(guī)范設(shè)計的可能。

具體的搭建流程可以大致分為三步：場景收集和分析、搭建基本變體組、拓展高階變體組。

我們將通過視頻組件搭建的生動案例，具體介紹如何依據(jù)“底層靈活、上層收斂”原則來搭建組件庫，使得組件本身既足夠靈活，又能起到足夠的約束作用。

在著手搭建某類組件時，我們首先通過規(guī)范確認(rèn)和場景遍歷，廣泛收集各類變體。

隨后，從我們能想到的所有維度出發(fā)，對這些變體進(jìn)行細(xì)致定義。

這樣，我們就能得到一張詳盡描述組件變體性質(zhì)的表格。表格的第一列依次列出變體1、變體2、變體3等，而第一行則羅列出各種維度，如寬度、比例等。

通過這種方法，我們可以將原本零散、雜亂的組件變體描述，系統(tǒng)地歸納整理成一張清晰明了的表格。

表格通過不同維度來唯一確定一個變體，這些維度可大致分為兩個特性和一個共性。共性指的是所有變體在這一維度上均保持一致，常見特性則涵蓋了最常見的分類性質(zhì)，如寬度、高度、數(shù)量和優(yōu)先級等，而業(yè)務(wù)特性則與具體業(yè)務(wù)緊密相關(guān)。

在搭建組件時，我們可以遵循「共性-常見特性-業(yè)務(wù)特性」順序，這樣的順序有助于降低理解成本，因為最符合心智的分類被置于外層，同時底層的組件又保持了足夠的靈活性，便于切換各種變量。對于業(yè)務(wù)特性，我們可以根據(jù)實際情況靈活處理，既可以將其作為基本組件的延展，也可以不將其納入組件范疇。

以視頻組件為例，我們從表格中獲取的信息如下：

• 視頻尺寸及其組合是最符合用戶心智的變體選擇；
• 播放狀態(tài)是所有變體的共有性質(zhì)；
• 自動播放情況與業(yè)務(wù)相關(guān)，但不一定需要在組件庫中呈現(xiàn)；
• 高階組件僅涉及少部分尺寸的組件，應(yīng)在完成基本組件搭建后再進(jìn)行。

據(jù)此，我們可以輕松梳理出視頻組件搭建流程的優(yōu)先級：

1. 播放狀態(tài)作為共性，應(yīng)首先搭建；
2. 基本組件尺寸和組合是最符合用戶心智的變體選擇，應(yīng)緊隨其后；
3. 高階組件在完成基本組件搭建后再進(jìn)行。

值得注意的是，“封面槽位”是“播放狀態(tài)”中的一個圖層。根據(jù)“底層靈活、上層收斂”的原則，我們將其插入到搭建播放狀態(tài)之前。

因此，視頻組件的最終搭建流程為：

1. 封面槽位；
2. 播放狀態(tài)；
3. 基本組件尺寸和組合；
4. 高階組件。

完成對視頻組件搭建的分析，我們就可以有條不紊地開始搭建組件了。

先搭建基本組件視頻組件，再用基本組件搭建高階組件。

這一步驟雖然為大家所熟知，但仍需格外注意，如配置項的設(shè)置要力求合理，也可以融入設(shè)計規(guī)范和使用規(guī)范，同時還應(yīng)將一些搭建過程中的零散組件集中收納避免被調(diào)用。

關(guān)于這些具體的注意事項，我們將在后續(xù)部分進(jìn)行詳細(xì)闡述。

至此我們完成了組件搭建的基本流程，一個達(dá)到及格線的視頻組件就誕生了。

據(jù)統(tǒng)計，優(yōu)化后每次調(diào)用視頻組件將節(jié)省至少10步的點擊操作！

03 好用：消費視角下的組件自檢

完成了一個基本組件的搭建后，我們可以轉(zhuǎn)換視角，從使用的角度來審視并檢查這個組件。

我們期望，從插入組件變體、切換組件配置，再到最后的解綁組件，整個流程都能縱享絲滑且穩(wěn)定可靠，確保業(yè)務(wù)設(shè)計師在使用過程中獲得最佳體驗。

我們可以一步步來審視組件的使用過程。

首先是插入組件，據(jù)觀察，通常有三種方式：

①在左側(cè)的資產(chǎn)面板(Assets)中直接找到對應(yīng)組件并插入；

②通過查閱設(shè)計規(guī)范，鎖定所需的變體后復(fù)制粘貼；

③選中一個不需要的組件，通過右側(cè)的“切換變體”面板(Swap instance)切換成所需的變體。

很明顯，在這個過程中依賴的是組件的精準(zhǔn)搜索和快速定位。

為了提升搜索精度，我們可以從組件命名入手，采用中、英、數(shù)字結(jié)合的方式，實現(xiàn)模糊匹配；也可以在發(fā)布時隱藏不希望被調(diào)用的組件，以減少無用的搜索結(jié)果。

如果組件是采用前文提到的“多層嵌套”方式搭建的，我們可以添加“Preferred”子組件，這樣在切換時會優(yōu)先展示這些子組件，這個功能在切換圖標(biāo)時尤為實用。

對于習(xí)慣邊查閱設(shè)計規(guī)范邊使用組件的設(shè)計師，我們增加了更多實際使用的正誤案例，這些案例直觀展示了組件變體的正確選擇和使用方式，進(jìn)一步降低了規(guī)范的理解成本，有效輔助設(shè)計決策。同時，我們專門維護(hù)了一個固定區(qū)域，用于平鋪展示所有組件變體。

為了確保能夠輕松點選，我們將變體放在最外層展示(即不在任何Frame、Group或Section中)。這樣能讓設(shè)計師一目了然地看到所有變體，從而快速選擇所需的組件。

在組件配置階段，有三項注意點能讓組件更加易用，即“重視組件的可視化效果、設(shè)置高效易用的配置項、貼心地保存修改”。

考慮到C端組件的多樣性和用戶的使用習(xí)慣，我們應(yīng)避免使用過于復(fù)雜的分組方式。相反，應(yīng)更注重組件的樣式展示，并盡量簡化組件的層級結(jié)構(gòu)。這樣，設(shè)計師在使用時能夠更直觀地看到組件的外觀，而無需深入復(fù)雜的層級去查找。

另外值得注意的是，F(xiàn)igma會默認(rèn)用組件集合中最左上角的組件生成預(yù)覽樣式，因此應(yīng)當(dāng)把視覺上最有代表性的變體放在左上角，這個效果在切換變體(Swap instance)時很重要，因為目前在該面板中沒法查看組件細(xì)節(jié)，只能靠縮略圖和名稱來推測是哪個組件。

其次對于配置項的設(shè)置也大有講究，業(yè)界有組件庫為了實現(xiàn)C2D2C，從源頭上將設(shè)計組件和前端組件的配置項打平，這是不錯的思路，但有可能會提升設(shè)計側(cè)的理解成本。

針對搜索業(yè)務(wù)的特殊語境，我們還是選擇了從「規(guī)范理解」角度去設(shè)置組件的配置項，將所有允許自定義的配置盡可能外露，并清晰地說明修改限制，如字?jǐn)?shù)限定、選項個數(shù)等，這樣能夠在使用的過程中強化業(yè)務(wù)設(shè)計師對規(guī)范的掌握。

另一個常常被忽視的關(guān)鍵點是選項和配置的排序問題。為了提高瀏覽和選擇的效率，建議對選項和選項之間，以及外層的不同配置項，都按照一定的邏輯順序進(jìn)行排序。

最后一點，我們稱之為“貼心地保存修改”機制，這個針對的是文字修改的場景。

在實際操作中，使用一個組件可能需要對多個配置項進(jìn)行修改。有時在修改完文字內(nèi)容后再去調(diào)整其他配置時，已修改的文字會被重置。這時文本屬性(text property)的設(shè)置就顯得尤為重要，它能夠記憶并保存修改過的文字內(nèi)容，從而免于重復(fù)輸入。

還有一些情況是，某個組件變體實際上并沒有與某個值相對應(yīng)的組件(盡管Figma機制允許選擇該值)，用戶切換后就會發(fā)現(xiàn)組件完全變了，只能撤回。

為了避免這類情況，建議使用另外的標(biāo)記來表明組件某個設(shè)置項是不可切換的。

04 好維護(hù)：持續(xù)監(jiān)測，不斷迭代

完成了組件的搭建和檢查，接下來讓我們聚焦于組件的日常維護(hù)。

這一環(huán)節(jié)可以從兩個維度展開，一是依托中臺的日常數(shù)據(jù)監(jiān)控進(jìn)行維護(hù)，二是通過團(tuán)隊內(nèi)部的緊密協(xié)同機制來保障。后者更多側(cè)重協(xié)作流程和機制上的建設(shè)，在本文中我們不做更多展開，重點討論前者。

數(shù)據(jù)監(jiān)控的方式主要依托Figma中的組件數(shù)據(jù)看板(查看路徑：View libraries-Analytics)，看板中展示了各個組件的調(diào)用數(shù)和解綁數(shù)數(shù)據(jù)，這些數(shù)據(jù)不直接反映組件的優(yōu)劣，但如果我們觀測到某個組件解綁率偏高，我們會考慮直接把它作為模板而不是創(chuàng)建成組件。

總結(jié)

以上是百度搜索設(shè)計團(tuán)隊在設(shè)計組件庫升級過程中的心得分享，包括搜索業(yè)務(wù)對于“好的設(shè)計組件”的訴求，以及一些搭建和優(yōu)化組件的實用思路，核心是探討如何從組件庫建設(shè)的角度入手，成功助力團(tuán)隊提升設(shè)計資產(chǎn)消費效率。

當(dāng)前我們已經(jīng)完成設(shè)計資產(chǎn)工程化的前序環(huán)節(jié)，我們對設(shè)計資產(chǎn)的升級和探索并沒有結(jié)束，未來我們將持續(xù)探索設(shè)計系統(tǒng)工具化的形態(tài)、與AI大模型結(jié)合的機會，通過豐富消費途徑，實現(xiàn)在業(yè)務(wù)交付的不同階段下全方位提效。

這部分內(nèi)容后續(xù)有機會也將會和大家見面，請大家期待！

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

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

前 Meta AI 團(tuán)隊創(chuàng)立的 Hero 公司，推出專利技術(shù) AI Autocomplete SDK，能實時預(yù)測任務(wù)所需全部參數(shù)，輸入 “訂機票” 即刻呈現(xiàn)所有選項，讓交互速度提升 10 倍、成本大降。這篇文章深入解析這項革命性技術(shù)的工作原理、應(yīng)用場景與商業(yè)價值，探討它能否成為未來 AI 應(yīng)用的標(biāo)配，帶你看懂人機交互的下一場變革。

你有沒有想過，為什么和 AI 聊天總感覺像在玩猜謎游戲？你說想訂機票，AI 問你去哪兒。你說去紐約，它問什么時候出發(fā)。你說下周三，它又問幾點。你說早上，它接著問要直飛還是轉(zhuǎn)機，經(jīng)濟艙還是商務(wù)艙，要不要托運行李。這種來回問答的過程讓人抓狂，就像是在玩一場永無止境的”二十個問題”游戲。更糟糕的是，有時候你都不知道 AI 需要什么信息，只能等它一個一個問。這種交互方式看似自然，實則效率低下，完全違背了 AI 應(yīng)該讓我們生活更簡單的初衷。

前 Meta AI 團(tuán)隊成員創(chuàng)立的 Hero 公司剛剛發(fā)布了一項專利技術(shù)，可能會徹底改變這種局面。他們推出的 AI Autocomplete SDK 不是簡單的自動補全功能，而是一個能夠?qū)崟r預(yù)測并呈現(xiàn)完成任務(wù)所需全部信息的系統(tǒng)。想象一下，當(dāng)你開始輸入”訂機票”的時候，屏幕上立刻出現(xiàn)所有相關(guān)參數(shù)：出發(fā)地、目的地、日期、時間、航空公司、座位偏好、行李選項等等，你只需要填寫或選擇就好，不需要等 AI 一個一個問你。這聽起來像是一個小改進(jìn)，但實際上它可能會讓 AI 交互速度提升 10 倍，成本降低 10 倍，并且為未來的增強現(xiàn)實設(shè)備奠定基礎(chǔ)。

Hero 不僅將這項技術(shù)用在自己的助手應(yīng)用中，還通過 SDK 向其他公司開放。這意味著我們可能很快就會在各種應(yīng)用中看到這種全新的交互方式。而且，他們剛剛獲得了 Forerunner Ventures 領(lǐng)投的 300 萬美元追加投資，這是在去年 400 萬美元種子輪之后的又一次資本認(rèn)可。我深入研究了這項技術(shù)后發(fā)現(xiàn)，它的影響遠(yuǎn)比表面看起來要深遠(yuǎn)得多。

提示詞工程為什么會成為一個職業(yè)

這個現(xiàn)象背后反映的是當(dāng)前 AI 交互方式的根本缺陷。大語言模型雖然能理解自然語言，但它們并不知道用戶想要完成什么任務(wù)需要哪些具體信息。就像 Hero 的 AI 工程師 Saharsh Vedi 說的：”現(xiàn)在的問題是，負(fù)擔(dān)都在用戶身上，他們需要思考 AI 需要什么信息。”這完全顛倒了技術(shù)服務(wù)人類的關(guān)系。

我自己在使用 AI 工具時也深有體會。比如用 AI 生成圖片，我經(jīng)常需要反復(fù)調(diào)整提示詞，嘗試不同的描述方式，才能得到滿意的結(jié)果。有時候我花在琢磨提示詞上的時間，比直接用傳統(tǒng)工具做圖還要長。更令人沮喪的是，即使你精心設(shè)計了提示詞，AI 也可能遺漏某些重要細(xì)節(jié)，導(dǎo)致結(jié)果不符合預(yù)期。然后你又得重新生成，這不僅浪費時間，對于按次收費的服務(wù)來說，還意味著額外的成本。

當(dāng)前主流的 AI 應(yīng)用都試圖通過各種方式解決這個問題。有些添加了建議按鈕，提供預(yù)設(shè)的提示詞模板。有些使用引導(dǎo)式問答，一步步收集用戶需求。還有些像 Adobe 的 Firefly 應(yīng)用，把提示詞拆分成多個部分，比如創(chuàng)作音樂時分別輸入情緒、風(fēng)格和用途。這些方法都在一定程度上改善了用戶體驗，但都沒有從根本上解決問題：用戶仍然需要主動思考和輸入信息，AI 仍然處于被動等待的狀態(tài)。

Hero 的方法則完全不同。他們不是讓 AI 更聰明地問問題，而是讓系統(tǒng)主動預(yù)測并呈現(xiàn)完成任務(wù)所需的全部信息。這種思路的轉(zhuǎn)變看似簡單，實則顛覆了整個交互范式。就像創(chuàng)始人 Brad Kowalk 說的：”我們基本上意識到，你在互聯(lián)網(wǎng)上能做的任何事情，都只是一系列參數(shù)。一旦你看到了這一點，就很難再忽視它。”這句話聽起來簡單，但它揭示了一個深刻的洞察：無論多么復(fù)雜的任務(wù)，本質(zhì)上都可以分解為一組參數(shù)，而這些參數(shù)是可以預(yù)測和呈現(xiàn)的。

AI Autocomplete 如何工作

AI Autocomplete 的核心理念是前置加載所有必要信息，而不是通過反復(fù)問答來收集。當(dāng)你開始輸入或說話時，系統(tǒng)會實時更新界面，顯示完成這個動作所需的所有參數(shù)。這不是簡單的文本補全，而是一個理解任務(wù)結(jié)構(gòu)、預(yù)測所需信息、動態(tài)呈現(xiàn)選項的智能系統(tǒng)。

拿訂機票這個例子來說。在傳統(tǒng)的 AI 助手中，你可能需要經(jīng)歷這樣的對話：你說”我想訂機票”，AI 問”您要去哪里？”，你說”紐約”，AI 問”什么時候出發(fā)？”，你說”下周三”，AI 問”您希望幾點的航班？”，你說”早上”，AI 問”經(jīng)濟艙還是商務(wù)艙？”，你說”經(jīng)濟艙”，AI 問”需要托運行李嗎？”，以此類推。整個過程可能需要十幾輪對話，每次都要等待 AI 的回應(yīng)。如果你在某個環(huán)節(jié)說得不夠清楚，或者 AI 理解錯了，還得重新來過。

但在 Hero 的 AI Autocomplete 系統(tǒng)中，當(dāng)你輸入”訂機票”的瞬間，屏幕上就會出現(xiàn)所有相關(guān)字段：出發(fā)地、目的地、出發(fā)日期、出發(fā)時間、航空公司偏好、返程日期、座位類型、行李選項等等。你可以隨時停下來，只填寫你知道的信息，然后發(fā)送查詢。系統(tǒng)會根據(jù)你已經(jīng)提供的信息，智能地建議或填充其他字段。你不需要等待 AI 一個一個問你，所有信息都在你眼前，你完全掌控著交互的節(jié)奏。

這種方法的優(yōu)勢是多方面的。第一，速度快。Hero 聲稱可以讓操作速度提升 10 倍，因為省去了大量來回對話的時間。第二，成本低。每次 AI 的響應(yīng)都需要服務(wù)器計算，減少對話輪次意味著大幅降低運營成本。Kowalk 特別強調(diào)了這一點：”因為涉及的消息更少，規(guī)模化運營的公司可以節(jié)省服務(wù)器成本。”第三，用戶體驗更好。你不會感覺自己在被 AI 審問，而是在一個清晰的框架內(nèi)主動提供信息。

我特別欣賞 Hero 工程師 Vedi 說的那句話：”希望我們回頭看時，幾乎不記得’提示詞’這個概念。”這體現(xiàn)了他們的雄心：不是改進(jìn)提示詞，而是讓提示詞成為歷史。在他們的愿景中，未來的 AI 交互應(yīng)該是結(jié)構(gòu)化的、可預(yù)測的、高效的，而不是開放式的、充滿不確定性的對話。

這項技術(shù)能用在哪些場景

AI Autocomplete 的應(yīng)用場景遠(yuǎn)比訂機票更廣泛。Hero 在發(fā)布時特別強調(diào)了幾個重要領(lǐng)域，每個都有可能被這項技術(shù)徹底改變。

搜索和電商是最直接的應(yīng)用場景?，F(xiàn)在在電商平臺搜索商品，你需要輸入關(guān)鍵詞，然后在成百上千的結(jié)果中篩選，使用各種過濾器來縮小范圍。這個過程既費時又費力。但如果有了 AI Autocomplete，當(dāng)你輸入”咖啡”時，系統(tǒng)立刻顯示出品牌、烘焙程度、包裝規(guī)格、配送時間、訂閱頻率等參數(shù)。你可以快速選擇你想要的選項，甚至可以設(shè)置”每月配送”這樣的重復(fù)訂單。Hero 展示的咖啡訂購例子就很好地說明了這一點：不僅可以快速完成當(dāng)前訂單，還能輕松設(shè)置定期訂購，就像你說”每個月”一樣簡單。

媒體生成是另一個會被改變的領(lǐng)域。我之前提到過用 AI 生成圖片時需要反復(fù)調(diào)整提示詞的痛苦。AI Autocomplete 可以在你開始輸入時就實時展示各種參數(shù)：主體、動作、風(fēng)格、光線、相機角度、分辨率等等。你可以從這些選項中選擇，而不是試圖用文字準(zhǔn)確描述你想要的效果。這不僅能激發(fā)創(chuàng)意，讓你看到自己可能沒想到的選項，還能顯著減少生成次數(shù)，從而降低服務(wù)器成本。對于視頻生成這種計算密集型任務(wù)來說，減少迭代次數(shù)的意義更加重大。

客戶服務(wù)和企業(yè)表單填寫也是重要應(yīng)用場景?，F(xiàn)在的客服聊天機器人通常需要通過一系列問答來收集信息，比如你的訂單號、問題類型、聯(lián)系方式等等。這個過程對用戶來說很繁瑣，對企業(yè)來說也低效，因為經(jīng)常需要后續(xù)跟進(jìn)來補充缺失的信息。有了 AI Autocomplete，聊天機器人可以根據(jù)用戶的初始問題，立即呈現(xiàn)所有相關(guān)字段，引導(dǎo)用戶一次性提供完整信息。這既節(jié)省了用戶時間，也降低了企業(yè)的運營成本。

我認(rèn)為這項技術(shù)最具潛力的應(yīng)用可能還沒有被充分認(rèn)識到。比如在教育領(lǐng)域，AI Autocomplete 可以幫助學(xué)生構(gòu)建更好的學(xué)習(xí)查詢，展示他們可能沒想到的相關(guān)主題和角度。在醫(yī)療領(lǐng)域，它可以幫助患者更準(zhǔn)確地描述癥狀，提供結(jié)構(gòu)化的問診表單。在法律、金融等專業(yè)服務(wù)領(lǐng)域，它可以幫助非專業(yè)人士更有效地表達(dá)需求，獲取更精準(zhǔn)的服務(wù)。這些場景的共同點是：專業(yè)性強、信息復(fù)雜、普通用戶難以準(zhǔn)確表達(dá)需求。AI Autocomplete 恰好可以彌合這個知識鴻溝。

自然語言廣告的新時代

Hero 的 AI Autocomplete 不僅改變了用戶體驗，還開創(chuàng)了一種全新的廣告模式。這讓我感到特別興奮，因為它解決了自然語言界面商業(yè)化的一個核心難題：如何在對話式交互中自然地融入廣告，而不破壞用戶體驗？

傳統(tǒng)的搜索廣告模式是基于關(guān)鍵詞和搜索結(jié)果的。你在 Google 搜索”咖啡機”，頂部會顯示付費廣告。這種模式在圖形界面中運作良好，但在純對話界面中卻很難實現(xiàn)。你總不能讓 AI 助手在回答問題的中途突然推銷產(chǎn)品吧？那會讓對話變得非常生硬和令人反感。

Hero 的方法則巧妙得多。在 AI Autocomplete 系統(tǒng)中，品牌可以通過三種方式出現(xiàn)：第一，類似 Google Ads，品牌可以付費成為決策過程中的優(yōu)先建議選項。比如在訂咖啡的例子中，Peet’s Coffee 可以付費讓自己出現(xiàn)在品牌選擇列表的前面。第二，品牌可以建議互補產(chǎn)品，添加到當(dāng)前訂單中。比如在你訂咖啡時，建議搭配某款點心或咖啡杯。第三，品牌可以從更高的重復(fù)購買率中受益，因為在 AI Autocomplete 系統(tǒng)中，設(shè)置定期訂單就像說”每個月”一樣簡單。

我認(rèn)為這種廣告模式的天才之處在于，它不是打斷用戶的決策過程，而是增強這個過程。當(dāng)你在選擇咖啡品牌時，看到各種選項本來就是決策的一部分，付費推廣的品牌只是在這個自然的選擇過程中獲得了更顯眼的位置。這和傳統(tǒng)搜索廣告的邏輯一致，但執(zhí)行方式更自然、更不突兀。

Hero 目前正在與 AI 廣告平臺 Koah Labs 討論合作，將這種新廣告形式推向市場。我覺得如果這種模式成功，它可能會成為自然語言界面商業(yè)化的標(biāo)準(zhǔn)模式。想想看，未來所有 AI 助手、AI agent 和對話式應(yīng)用都可能需要這樣一種不破壞用戶體驗的廣告模式。Hero 作為先行者，有機會定義這個新興市場的規(guī)則。

更重要的是，這種廣告模式對小企業(yè)也很友好。不像傳統(tǒng)的品牌廣告需要巨額投入，自然語言廣告可以非常精準(zhǔn)地針對特定需求。一家本地咖啡烘焙商可以選擇在用戶搜索”小批量手工烘焙咖啡”時出現(xiàn)，而不需要和星巴克競爭”咖啡”這樣的大詞。這種精準(zhǔn)性和可負(fù)擔(dān)性可能會讓更多中小企業(yè)進(jìn)入數(shù)字廣告市場。

為增強現(xiàn)實鋪路

AI Autocomplete 的誕生其實源于增強現(xiàn)實的需求，這是我覺得最有遠(yuǎn)見的部分。Hero 的聯(lián)合創(chuàng)始人 Brad Kowalk 和 Seung Woo Lee 都曾在 Meta 工作，參與 AR 相關(guān)項目。離開 Meta 后，他們一直在思考 AR 大規(guī)模普及面臨的一個核心問題：當(dāng) AR 設(shè)備的屏幕空間遠(yuǎn)小于智能手機時，如何讓它同樣有用？

這是一個很多人沒有深入思考過的問題。我們習(xí)慣了智能手機的大屏幕、復(fù)雜菜單、多層導(dǎo)航。但 AR 眼鏡不可能有那么大的顯示空間，也不適合復(fù)雜的觸摸操作。那么，如何在有限的界面上提供豐富的功能呢？

大公司的思路通常是將移動端的界面縮小，配合手勢控制。但 Hero 認(rèn)為這不是正確的方向。Kowalk 和 Lee 的洞察是：AR 設(shè)備需要的不是縮小版的圖形界面，而是基于意圖的交互系統(tǒng)。用戶應(yīng)該能夠用自然語言表達(dá)意圖，系統(tǒng)通過 AI Autocomplete 這樣的技術(shù)引導(dǎo)用戶提供必要信息，然后直接執(zhí)行任務(wù)。整個過程不需要復(fù)雜的 UI，只需要清晰的參數(shù)呈現(xiàn)和簡單的選擇機制。

我覺得這個思路非常前瞻。它不是試圖把現(xiàn)有的交互模式搬到新設(shè)備上，而是為新設(shè)備設(shè)計全新的交互范式。這種輕量級但強大的 AR 操作系統(tǒng)，可能會成為下一代計算平臺的基礎(chǔ)。就像觸摸屏為智能手機帶來的革命一樣，基于意圖的自然語言交互可能會為 AR 設(shè)備帶來類似的變革。

Hero 三年前就開始申請這項技術(shù)的專利，說明他們很早就看到了這個方向。現(xiàn)在專利已經(jīng)獲批，技術(shù)已經(jīng)成熟，時機也恰到好處。大語言模型的進(jìn)步讓自然語言理解變得可靠，AR 設(shè)備開始進(jìn)入消費市場，用戶對新交互方式的接受度也在提高。所有這些因素結(jié)合在一起，為 AI Autocomplete 這樣的技術(shù)創(chuàng)造了完美的時間窗口。

雖然 Hero 現(xiàn)在主要在移動和 Web 應(yīng)用中推廣這項技術(shù)，但他們的長遠(yuǎn)目標(biāo)顯然是 AR。這也解釋了為什么他們選擇以 SDK 的形式開放技術(shù)，而不是只在自己的應(yīng)用中使用。他們希望建立一個標(biāo)準(zhǔn)，一個未來 AR 交互的基礎(chǔ)協(xié)議。如果成功，Hero 可能不只是一家應(yīng)用公司，而是下一代計算平臺的基礎(chǔ)設(shè)施提供者。

SDK 策略的深遠(yuǎn)意義

Hero 選擇以 SDK 形式開放 AI Autocomplete 技術(shù)，這是一個非常聰明的戰(zhàn)略決策。CTO Seung Woo Lee 解釋說：”我們?nèi)昵熬鸵庾R到，AI agent 的瓶頸不會是 AI 瀏覽互聯(lián)網(wǎng)和完成任務(wù)的能力，而是用戶知道該說什么的能力。所以，我們不是再造一個玩’十個問題’游戲的聊天界面，而是推出一個讓用戶能一次性完成任何多步驟動作的系統(tǒng)。我們相信我們的技術(shù)有能力增強今天所有使用自然語言輸入的產(chǎn)品。”

這段話揭示了他們的雄心：不是造一個更好的聊天機器人，而是改變整個行業(yè)的交互方式。這就需要讓其他公司也能使用這項技術(shù)，而不是把它封閉在自己的應(yīng)用中。從商業(yè)角度看，這是一個高風(fēng)險高回報的策略。風(fēng)險在于，開放技術(shù)意味著競爭對手也能使用，可能會削弱自己的差異化優(yōu)勢?；貓笤谟?，如果技術(shù)被廣泛采用，Hero 就能成為這個新交互范式的標(biāo)準(zhǔn)制定者和基礎(chǔ)設(shè)施提供者。

我認(rèn)為這個選擇體現(xiàn)了創(chuàng)始團(tuán)隊的格局。他們在 Meta 工作過，見識過平臺級技術(shù)的威力。他們知道，真正改變世界的不是一個優(yōu)秀的應(yīng)用，而是一個被廣泛采用的標(biāo)準(zhǔn)。就像 HTTP 協(xié)議定義了網(wǎng)頁瀏覽，觸摸屏定義了智能手機交互，AI Autocomplete 有潛力定義自然語言交互的標(biāo)準(zhǔn)。

SDK 策略還有助于快速驗證技術(shù)價值和收集反饋。通過讓不同行業(yè)、不同應(yīng)用場景的公司使用這項技術(shù)，Hero 可以快速發(fā)現(xiàn)技術(shù)的優(yōu)勢和局限，找到最有價值的應(yīng)用場景，并根據(jù)實際使用情況不斷改進(jìn)。這比自己悶頭做一個應(yīng)用要高效得多。

從生態(tài)系統(tǒng)角度看，SDK 策略有助于建立網(wǎng)絡(luò)效應(yīng)。使用 Hero AI Autocomplete 的應(yīng)用越多,用戶就越熟悉這種交互方式。用戶越熟悉，新應(yīng)用采用這種交互方式的價值就越大。這種正反饋循環(huán)一旦啟動，會形成很強的護(hù)城河。就像用戶習(xí)慣了觸摸屏之后，任何新的移動設(shè)備都必須支持觸摸，未來用戶習(xí)慣了 AI Autocomplete 之后，任何新的自然語言應(yīng)用可能都需要支持這種交互方式。

這對整個 AI 行業(yè)意味著什么

Hero 的 AI Autocomplete 讓我重新思考了當(dāng)前 AI 交互的發(fā)展方向。整個行業(yè)似乎都在朝著”更自然的對話”這個方向努力，讓 AI 更像人類一樣交流。但 Hero 提出了一個反直覺的觀點：也許最好的交互方式不是完全模擬人類對話，而是結(jié)合對話的自然性和表單的結(jié)構(gòu)性。

人類之間的對話之所以高效，是因為雙方共享大量背景知識和語境。你和朋友聊天時，可以用很簡短的話表達(dá)復(fù)雜意思，因為你們互相了解。但人和 AI 的對話不一樣，AI 不知道你的偏好、習(xí)慣和當(dāng)前情境。如果完全模擬人類對話，就會導(dǎo)致大量不必要的來回確認(rèn)。

Hero 的方法是承認(rèn)這個差異，利用 AI 的優(yōu)勢來彌補。AI 可以快速分析任務(wù)結(jié)構(gòu)，預(yù)測所需信息，實時更新界面。這些都是人類做不到的。通過展示結(jié)構(gòu)化的參數(shù)，AI Autocomplete 實際上是在利用機器的優(yōu)勢，而不是試圖完全模仿人類。

我認(rèn)為這種思路會影響整個 AI 產(chǎn)品設(shè)計領(lǐng)域。未來我們可能會看到更多混合式交互：既有自然語言的靈活性，又有結(jié)構(gòu)化界面的清晰性。這不是倒退到傳統(tǒng) GUI，而是在更高層次上綜合了兩種交互方式的優(yōu)點。

從技術(shù)架構(gòu)角度看，AI Autocomplete 也提出了新的要求。它需要 AI 模型不僅能理解用戶意圖，還要能預(yù)測任務(wù)結(jié)構(gòu)和參數(shù)需求。這可能會推動一類新的 AI 模型發(fā)展，專門用于任務(wù)分解和參數(shù)預(yù)測。Hero 提到他們使用了一系列模型來預(yù)測用戶可能輸入的內(nèi)容，說明這不是單一模型能解決的問題，而需要專門的技術(shù)棧。

對于正在開發(fā) AI 產(chǎn)品的團(tuán)隊來說，Hero 的成功提供了重要啟示：不要只關(guān)注 AI 的智能程度，還要關(guān)注交互設(shè)計。最聰明的 AI 如果交互方式糟糕，用戶體驗也會很差。反過來，即使 AI 能力有限，如果交互設(shè)計得當(dāng)，也能提供很好的用戶體驗。Hero 的技術(shù)本質(zhì)上是通過更好的交互設(shè)計，最大化了現(xiàn)有 AI 能力的價值。

我也在思考這項技術(shù)可能的局限性。它適合參數(shù)化的、結(jié)構(gòu)化的任務(wù)，但對于真正開放式的、需要創(chuàng)造性的對話可能不太適用。比如你和 AI 討論一個哲學(xué)問題，或者尋求情感支持，這種場景下強行展示參數(shù)就會顯得生硬。所以 AI Autocomplete 可能不會取代所有類型的 AI 交互，而是在特定場景下提供更優(yōu)選擇。

另一個值得關(guān)注的是隱私和數(shù)據(jù)安全。AI Autocomplete 需要理解任務(wù)結(jié)構(gòu)和預(yù)測用戶需求，這意味著它需要訪問相當(dāng)多的上下文信息。如何在提供個性化服務(wù)和保護(hù)用戶隱私之間找到平衡，將是這類技術(shù)普及過程中必須解決的問題。

我對 Hero 未來的期待

Hero 目前正在自己的助手應(yīng)用中測試這項技術(shù)，計劃在幾個月內(nèi)向用戶發(fā)布。他們重點展示的功能是幫助用戶通過自動補全提示詞找到會議時間或和朋友見面的時間。這是一個很實用的場景，也是一個很好的切入點。安排會議往往需要考慮多個人的時間、地點偏好、會議時長等因素，用自然語言描述清楚并不容易。有了 AI Autocomplete，這個過程會簡化很多。

但我更期待看到 Hero 在更廣泛場景中的應(yīng)用。比如在旅行規(guī)劃、購物、客戶服務(wù)等領(lǐng)域，AI Autocomplete 的價值可能更加明顯。Hero 的 SDK 策略意味著我們不需要等 Hero 自己去開發(fā)所有應(yīng)用場景，而是會看到各行各業(yè)的公司將這項技術(shù)集成到自己的產(chǎn)品中。

從融資角度看，Hero 去年獲得了 400 萬美元種子輪，現(xiàn)在又獲得了 Forerunner Ventures 領(lǐng)投的 300 萬美元追加投資。Kowalk 表示，根據(jù)應(yīng)用和 SDK 的增長情況，他們計劃在未來幾個月籌集更大一輪融資。我認(rèn)為如果 SDK 能夠吸引到一批有影響力的客戶，證明技術(shù)價值，那么 A 輪融資應(yīng)該不成問題。這項技術(shù)的潛在市場非常大，任何使用自然語言輸入的應(yīng)用都可能是潛在客戶。

我也在想，Hero 會不會成為下一個 Twilio 或 Stripe 那樣的基礎(chǔ)設(shè)施公司？Twilio 讓每個應(yīng)用都能方便地集成短信和電話功能，Stripe 讓每個應(yīng)用都能方便地接入支付。Hero 有潛力讓每個應(yīng)用都能方便地提供優(yōu)秀的自然語言交互體驗。如果真的走到這一步，Hero 的價值將遠(yuǎn)超一個普通的應(yīng)用公司。

但挑戰(zhàn)也是存在的。技術(shù)再好，也需要市場教育和生態(tài)建設(shè)。開發(fā)者需要理解這項技術(shù)的價值，學(xué)會如何集成和使用。用戶需要適應(yīng)這種新的交互方式，培養(yǎng)新的使用習(xí)慣。這些都需要時間和持續(xù)投入。Hero 團(tuán)隊有 Meta 的背景，應(yīng)該對這些挑戰(zhàn)有充分認(rèn)識。

我特別欣賞 Hero 團(tuán)隊的一點是，他們在三年前就開始布局這個方向，提前申請了專利。這種前瞻性在快速變化的 AI 領(lǐng)域特別難得。很多公司都在追逐最新的熱點，而 Hero 則在思考更根本的問題：人機交互的本質(zhì)是什么？未來的交互應(yīng)該是什么樣子？這種長期思維是真正有影響力的公司的特質(zhì)。

最后，我想說的是，Hero 的 AI Autocomplete 提醒我們，AI 革命不只是關(guān)于更強大的模型，也關(guān)于更好的交互設(shè)計。技術(shù)進(jìn)步和設(shè)計創(chuàng)新同樣重要，甚至在某些場景下，好的設(shè)計比更強的模型更有價值。這也是為什么我對 Hero 的未來充滿期待。他們不是在和其他公司比誰的模型更強，而是在重新定義人機交互的方式。這種創(chuàng)新往往更持久，也更有影響力。

我相信，幾年后回頭看，我們會驚訝地發(fā)現(xiàn)自己曾經(jīng)需要花那么多時間和 AI 來回對話，就像我們現(xiàn)在回想起曾經(jīng)需要記住各種命令行指令一樣。AI Autocomplete 可能就是推動這個轉(zhuǎn)變的關(guān)鍵技術(shù)之一。‍

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

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

使用誠意的體驗設(shè)計來創(chuàng)造可信賴的交互設(shè)計產(chǎn)品。