Zero-UI（零用戶界面）作為未來設(shè)計(jì)趨勢(shì)，正隨著AI技術(shù)發(fā)展而逐漸融入生活。本文探討Zero-UI對(duì)設(shè)計(jì)師轉(zhuǎn)型的影響，從多模態(tài)交互到情境智能，再到生態(tài)系統(tǒng)整合，展示設(shè)計(jì)師在新技術(shù)浪潮下的機(jī)遇與挑戰(zhàn)。

Zero-UI，也就是零用戶界面，最近又悄悄地火了起來。事實(shí)上，它并不是一個(gè)新概念，大家熟悉的智能家居的語音交互，就是非常典型的例子。隨著AI技術(shù)的發(fā)展，它將越來越多地融入到我們的生活和工作場(chǎng)景中，未來設(shè)計(jì)趨勢(shì)也將隨之轉(zhuǎn)變。

3月份還發(fā)生了一件事，也可能會(huì)影響設(shè)計(jì)師未來工作方式和產(chǎn)出：谷歌Gemini作為新一代多模態(tài)AI模型，讓手機(jī)「睜眼看世界」成為現(xiàn)實(shí)。它的實(shí)時(shí)屏幕共享功能，能準(zhǔn)確識(shí)別屏幕上的內(nèi)容并實(shí)時(shí)互動(dòng)；并且可以打開攝像頭與物理世界交互，比如幫用戶給釉陶「上色」。

Gemini支持文本、圖像、語音、視頻的實(shí)時(shí)跨模態(tài)理解與生成，Zero-UI追求的”脫離屏幕的多元交互”高度契合，極有可能會(huì)重新定義人機(jī)交互的未來范式。舉個(gè)例子，當(dāng)我們雙手提滿購物袋走進(jìn)家門時(shí)，門口的終端檢測(cè)到你的手不太方便，便會(huì)自動(dòng)觸發(fā)智能門鎖的非手動(dòng)開門功能，比如人臉識(shí)別+語音交互。換句話說，這種組合將推動(dòng)體驗(yàn)設(shè)計(jì)從”如何操作設(shè)備”轉(zhuǎn)向”如何通過環(huán)境理解意圖，并通過優(yōu)于界面操作的交互方式達(dá)成目標(biāo)”。

可以說，Zero UI將是一場(chǎng)必然的設(shè)計(jì)變革。

 

 

01 什么是Zero-UI

傳統(tǒng)圖形用戶界面（GUI）依賴屏幕、鍵盤和觸控操作，用戶需要通過視覺和觸覺的顯式交互完成任務(wù)。而Zero-UI的核心在于“無界面化”，即通過語音、手勢(shì)、環(huán)境感知等自然方式與設(shè)備交互。它的本質(zhì)是 “讓機(jī)器適應(yīng)人類的行為，而非人類適應(yīng)機(jī)器的邏輯”。

02 Zero-UI對(duì)設(shè)計(jì)趨勢(shì)的影響

從視覺主導(dǎo)到多模態(tài)融合

傳統(tǒng)設(shè)計(jì)以視覺為中心，設(shè)計(jì)師需精通色彩、布局和動(dòng)效；而在Zero-UI時(shí)代，交互設(shè)計(jì)的維度擴(kuò)展至語音、觸覺、手勢(shì)、環(huán)境感知等多個(gè)模態(tài)。例如，微軟Kinect通過骨骼追蹤技術(shù)識(shí)別用戶動(dòng)作，谷歌Project Soli利用微型雷達(dá)捕捉細(xì)微手勢(shì)，早在2016年，谷歌I/O大會(huì)上，神秘部門ATAP（Advanced Technologies and Projects)就展示了Project Soli技術(shù)，這是一項(xiàng)基于毫米波雷達(dá)監(jiān)測(cè)空中手勢(shì)動(dòng)作而實(shí)現(xiàn)的新型傳感技術(shù)。

從功能導(dǎo)向到情境智能

GUI時(shí)代的設(shè)計(jì)目標(biāo)是“如何讓用戶快速找到功能”，而Zero-UI的設(shè)計(jì)邏輯轉(zhuǎn)向“如何讓設(shè)備主動(dòng)理解用戶需求”。情境感知（Context Awareness）成為關(guān)鍵，例如智能家居系統(tǒng)通過分析用戶位置、時(shí)間、行為習(xí)慣，自動(dòng)調(diào)節(jié)燈光和溫度。這種轉(zhuǎn)變要求設(shè)計(jì)師從線性流程設(shè)計(jì)轉(zhuǎn)向非線性場(chǎng)景設(shè)計(jì)，考慮設(shè)備在復(fù)雜環(huán)境中的自適應(yīng)能力。

從獨(dú)立設(shè)備到生態(tài)系統(tǒng)整合

Zero-UI的終極目標(biāo)是構(gòu)建無縫連接的智能生態(tài)系統(tǒng)。以小米智能中控為例，用戶通過一個(gè)語音指令即可聯(lián)動(dòng)空調(diào)、燈光、安防等多臺(tái)設(shè)備。

03 設(shè)計(jì)師如何應(yīng)對(duì)變化

從視覺設(shè)計(jì)到多感官設(shè)計(jì)

這很好理解，未來的體驗(yàn)設(shè)計(jì)中，設(shè)計(jì)師不僅要關(guān)注用戶看到的內(nèi)容，還要考慮用戶在交互過程中聽到的、觸摸到的，甚至是感受到的環(huán)境變化。舉幾個(gè)例子：

1.Microsoft Mesh（混合現(xiàn)實(shí)會(huì)議）

•  場(chǎng)景：遠(yuǎn)程協(xié)作
•  設(shè)計(jì)亮點(diǎn)：
•  全息投影參會(huì)者+空間音頻（聲音隨頭部轉(zhuǎn)動(dòng)變化）
•  觸覺手套反饋虛擬握手力度
•  環(huán)境光照自適應(yīng)（虛擬陰影與現(xiàn)實(shí)光線同步）
•  技術(shù)：Hololens 2+觸覺手套+AI場(chǎng)景建模
•  體驗(yàn)價(jià)值：消除地理隔閡，創(chuàng)造”面對(duì)面”協(xié)作感

2.BMW iDrive 8.0（車載交互）

•  場(chǎng)景：智能汽車
•  設(shè)計(jì)亮點(diǎn)：
• 隔空手勢(shì)控制（如手指畫圈調(diào)節(jié)音量）
• 配合不同操作觸發(fā)3D音效（低頻”嗡鳴”反饋成功識(shí)別）
•  技術(shù)：ToF傳感器+個(gè)性化聲場(chǎng)算法
•  體驗(yàn)價(jià)值：減少駕駛員視線偏移，提升行車安全

（二）形成隨地大小想的習(xí)慣

在 Zero-UI 的背景下，用戶不再需要適應(yīng)設(shè)備的操作方式，而是設(shè)備要適應(yīng)用戶的自然行為和習(xí)慣。生活和工作中，處處都是創(chuàng)意迸發(fā)的機(jī)會(huì)，比如我們的「衣食住行」，都是我們想象和創(chuàng)意的對(duì)象：

• 「衣」-VR虛擬衣櫥：通過VR/AR試穿虛擬服裝，語音指令切換風(fēng)格，AI根據(jù)場(chǎng)合、天氣推薦搭配；3D掃描身材數(shù)據(jù)，推薦/定制合身衣物。
• 「食」-AI營養(yǎng)師 + 語音廚房：

語音識(shí)別操控智能廚具，AI根據(jù)健康數(shù)據(jù)（如腸道菌群報(bào)告）生成菜譜，VR教程手把手教學(xué)。說“低脂高蛋白晚餐”，冰箱自動(dòng)推薦食材，聯(lián)動(dòng)烤箱同步預(yù)熱。

• 「住」-家庭情緒療愈空間：

生物傳感器監(jiān)測(cè)情緒，AI播放對(duì)應(yīng)音樂/光線，VR引導(dǎo)冥想；釋放安神香氛（如基于用戶DNA定制的舒緩分子）。

• 「行」-汽車駕駛虛擬旅行：

VR+嗅覺模擬技術(shù)實(shí)現(xiàn)模擬“環(huán)球旅行”，AI導(dǎo)游根據(jù)興趣定制個(gè)性化路線；生物反饋調(diào)整虛擬場(chǎng)景。

（三）拓展眼界，了解新技術(shù)與跨學(xué)科知識(shí)

Zero-UI 的實(shí)現(xiàn)依賴于多種技術(shù)，如語音識(shí)別、人工智能、生物學(xué)等，設(shè)計(jì)師需要對(duì)這些技術(shù)有一定的了解。但是了解到什么程度呢？我認(rèn)為剛開始不需要花太長(zhǎng)時(shí)間去研究它們的理論，畢竟隔行如隔山，學(xué)一個(gè)新技術(shù)不是那么簡(jiǎn)單的事情。所以更多地是關(guān)注這些技術(shù)的最新動(dòng)向，有哪些新產(chǎn)品，發(fā)展到了什么程度，在需要用到的時(shí)候想得到。這個(gè)時(shí)候，AI可以幫助我們了解這些知識(shí)，以下就是DeepSeek給到的信息，可以作為一個(gè)基礎(chǔ)的了解，在實(shí)際運(yùn)用的時(shí)候再深度研究。

04 寫在最后

正如谷歌首席執(zhí)行官 Sundar Pichai所說：展望未來，下一階段，“設(shè)備”這個(gè)概念將消失。現(xiàn)有的用戶體驗(yàn)和設(shè)計(jì)越來越趨同，設(shè)計(jì)師的價(jià)值感在逐漸流失，而Zero-UI 的發(fā)展對(duì)設(shè)計(jì)師是個(gè)難得的轉(zhuǎn)型機(jī)會(huì)，大家將有更多機(jī)會(huì)創(chuàng)造出更加自然高效或是生動(dòng)有趣的產(chǎn)品體驗(yàn)。

B端表單標(biāo)簽的對(duì)齊方式對(duì)用戶體驗(yàn)和界面設(shè)計(jì)至關(guān)重要。本文深入探討了不同表單標(biāo)簽對(duì)齊方式的優(yōu)劣勢(shì)及適用場(chǎng)景，包括行內(nèi)標(biāo)簽、頂標(biāo)簽、左標(biāo)簽文字右對(duì)齊和左標(biāo)簽文字左對(duì)齊等，幫助設(shè)計(jì)師在實(shí)際工作中做出最佳選擇，提升表單填寫效率和用戶體驗(yàn)。

表單作為B端系統(tǒng)最常見的組件之一，一些常見的do、don’t想必大家已經(jīng)十分熟。今天我們嘮一嘮【表單標(biāo)簽】這個(gè)細(xì)節(jié)。

在一些成熟的組件庫中，大都提供了上下布局的頂標(biāo)簽、左右布局的左標(biāo)簽等樣式可供選擇。左標(biāo)簽樣式，在不同的產(chǎn)品中，又存在標(biāo)簽文字左對(duì)齊、右對(duì)齊的情況，那它們之間差異在哪呢？如何選擇呢？

最近工作中，正好在梳理相關(guān)的規(guī)范，于是把自己的一些思考及處理經(jīng)驗(yàn)整理了一下，分享出來～

先對(duì)齊一下語言：表單標(biāo)簽、表單域。

會(huì)從這幾個(gè)維度進(jìn)行比較，放一個(gè)簡(jiǎn)易版表格，下文細(xì)說。

① 行內(nèi)標(biāo)簽

優(yōu)勢(shì)：

• 瀏覽速度快：可用性測(cè)試結(jié)果顯示，行內(nèi)標(biāo)簽樣式下，人眼從標(biāo)簽移動(dòng)到域的時(shí)間僅為10ms，是幾種樣式中最快的。視覺路徑一路向下，很流暢。
• 標(biāo)簽文字彈性寬度大，可與域等寬。
• 節(jié)約空間：標(biāo)簽、域合二為一，不單獨(dú)占空間。

劣勢(shì)：

用戶操作阻塞：如輸入框聚焦，輸入內(nèi)容時(shí)，行內(nèi)標(biāo)簽隱藏，用戶操作會(huì)受阻。

 

 

使用場(chǎng)景：

一般用于用戶心智已經(jīng)十分成熟的頁面，比如登錄頁、注冊(cè)頁等。

② 頂標(biāo)簽

優(yōu)勢(shì)：

• 瀏覽查看、填寫均有優(yōu)勢(shì)：標(biāo)簽與域的距離接近，同時(shí)符合用戶從上到下的視覺動(dòng)線，操作會(huì)很連貫、流暢。
• 標(biāo)簽文字彈性寬度大。
• 頁面橫向空間節(jié)約。

劣勢(shì)：

Y軸屏效低：對(duì)頁面縱向空間的利用率會(huì)比較低。

使用場(chǎng)景：

• 適合移動(dòng)端表單填寫場(chǎng)景。
• 適用于英文等語言場(chǎng)景，相同意思下需要更多的字符表示，寬度更寬。
• web端頁面兩側(cè)狹長(zhǎng)工具欄。
• 希望用戶快速填寫表單且錄入項(xiàng)數(shù)量不多時(shí)，比如，將復(fù)雜的長(zhǎng)難表單拆解分步驟填寫，每一步驟表單用頂標(biāo)簽表單。

③ 左標(biāo)簽-文字右對(duì)齊

優(yōu)勢(shì)：

• 填寫優(yōu)勢(shì)：標(biāo)簽和域的距離比文字左對(duì)齊更近，視覺關(guān)聯(lián)較明確，便于用戶填寫。
• 提升Y軸屏效：較于頂標(biāo)簽，節(jié)省頁面縱向空間。

劣勢(shì)：

• 影響閱讀效率：文字右對(duì)齊導(dǎo)致左側(cè)參差不齊，不利于快速瀏覽表單。
• 標(biāo)簽文字彈性寬度小：標(biāo)簽文字需精簡(jiǎn)，超過規(guī)定寬度出現(xiàn)換行，不適合狹長(zhǎng)的空間場(chǎng)景。

使用場(chǎng)景：

• 常用于web端表單填寫場(chǎng)景。
• 頁面縱向空間緊張，但又需要保證填寫效率時(shí)使用。

④ 左標(biāo)簽-文字左對(duì)齊

優(yōu)勢(shì)：

• 快速查看優(yōu)勢(shì)：標(biāo)簽文字左側(cè)對(duì)齊，方便用戶從上到下快速掃視表單整體情況。
• 提升Y軸屏效：相較于頂標(biāo)簽，節(jié)省頁面縱向空間。
• 相較于文字右對(duì)齊視覺上更規(guī)整。

劣勢(shì)：

• 標(biāo)簽與域的距離最遠(yuǎn)，人眼從標(biāo)簽移動(dòng)到域的時(shí)間為500ms，視覺動(dòng)線頻繁跳動(dòng)影響填寫表單的效率。
• 標(biāo)簽文字彈性寬度小：標(biāo)簽文字需精簡(jiǎn)，超過規(guī)定寬度出現(xiàn)換行，不適合狹長(zhǎng)的空間場(chǎng)景。

使用場(chǎng)景：

• 敏感數(shù)據(jù)表單填寫：希望用戶進(jìn)行仔細(xì)閱讀確認(rèn)、放慢填寫速度時(shí)使用，比如，準(zhǔn)入資格認(rèn)證等場(chǎng)景
• 陌生數(shù)據(jù)表單填寫：表單中含有大量可選的表單域、大量需要高級(jí)設(shè)置的陌生數(shù)據(jù)時(shí)，或問題無法被分成易處理的內(nèi)容組，左對(duì)齊標(biāo)簽更易于用戶多次瀏覽閱讀標(biāo)簽信息。
• 表單詳情查看場(chǎng)景。
• 表單域也分左、右對(duì)齊，常見于移動(dòng)端，兩種對(duì)齊方式也一起對(duì)比一下。

⑤ 域-右對(duì)齊

優(yōu)勢(shì)：

• 標(biāo)簽文字彈性寬度大、更靈活。
• 視覺上兩端對(duì)齊，填寫時(shí)不容易漏填。
• 縱向空間利用率高。

劣勢(shì)：

• 標(biāo)簽與域的距離遠(yuǎn)，視覺跳動(dòng)影響填寫效率。
• 使用場(chǎng)景：
• 移動(dòng)端表單填寫。
• web端兩側(cè)狹長(zhǎng)工具欄，兩端對(duì)齊會(huì)更美觀。

⑥ 域-左對(duì)齊

優(yōu)勢(shì)：

• 相較于域右對(duì)齊，標(biāo)簽、域距離更接近，視覺移動(dòng)速度更快，從上到下的視覺動(dòng)線更舒服。
• 縱向空間利用率高。

劣勢(shì)：

• 選擇器等類型的表單域，提示圖標(biāo)距離選項(xiàng)較遠(yuǎn)。
• 標(biāo)簽文字彈性寬度小，需要寬度限制換行顯示。

使用場(chǎng)景：

• 移動(dòng)端表單查看/填寫。