粗大的内捧猛烈进出小视频,日本成人精品视频一区,在线播放亚洲成人av,精品人妻少妇嫩草av专区,亚洲AV永久久久久久久浪潮,性导航app精品视频,九九热精品免费视频,一本一本大道香蕉久在线播放

        首頁

        資訊/靈感全都有!2026年4月設(shè)計(jì)資訊第二波!

        清陽 行業(yè)趨勢

        蘭亭妙微UI設(shè)計(jì)公司分享資訊

        一、全文速覽圖

        image.png

        二、安全邊界:Anthropic泄露潛藏的暗網(wǎng)危機(jī)

        Anthropic 內(nèi)部文件意外流出,揭示了其最強(qiáng)模型 Mythos 的恐怖算力。該模型雖具備重塑行業(yè)的潛力,但也因可能被攻擊者用于挖掘系統(tǒng)漏洞而引發(fā)安全危機(jī)。官方聲明稱,在正式發(fā)布前需確保防御者已做好應(yīng)對這種新型算力沖擊的準(zhǔn)備。

        image.png

         

        圖源:Anthropic, Getty Images

        此次泄露迅速波及資本市場,導(dǎo)致網(wǎng)絡(luò)安全相關(guān)股價劇烈波動。分析師指出,Mythos 揭示了 AI 技術(shù)在安全攻防中深度嵌入的現(xiàn)狀,反映出利用 AI 進(jìn)行威脅防御已成常態(tài),同時也暴露出單點(diǎn)泄露可能引發(fā)的系統(tǒng)性金融風(fēng)險。

        image.png

         

        圖源:Anthropic, Getty Images

        隨著 Mythos 的曝光,OpenAI 等巨頭的對標(biāo)模型也浮出水面,預(yù)示著 AI 正從輔助工具進(jìn)化為攻防核心。未來技術(shù)博弈將進(jìn)入“以 AI 對抗 AI”的新階段,攻擊者與防御者在更高維度上的算力對決,將徹底改寫網(wǎng)絡(luò)安全的競爭格局。

        三、技術(shù)邊界:英偉達(dá)僅憑矢量數(shù)據(jù)渲染

        NVIDIA證實(shí)DLSS 5并非通過讀取游戲引擎的3D幾何或材質(zhì)數(shù)據(jù)運(yùn)行,而是僅憑2D渲染幀與運(yùn)動矢量進(jìn)行AI推斷。這意味著該技術(shù)本質(zhì)上是通過分析圖像來“幻化”細(xì)節(jié)(如皮膚與光照),而非精確重建場景。

        image.png

         

        圖源:NVIDIA

        雖然這帶來了驚人的視覺增強(qiáng),但也導(dǎo)致AI會在早期預(yù)覽中產(chǎn)生原畫中不存在的細(xì)節(jié)“幻覺”,引發(fā)了外界對畫面真實(shí)性與藝術(shù)還原度的質(zhì)疑。

        四、設(shè)計(jì)邊界:谷歌 AI 畫布的無限可能

        Stitch 正在重構(gòu) UI 設(shè)計(jì)范式,推出 AI 原生無限畫布并引入“氛圍設(shè)計(jì)”概念。用戶不再受限于枯燥的線框圖,只需通過自然語言描述業(yè)

        image.png

        務(wù)目標(biāo)或靈感,AI 代理即可理解設(shè)計(jì)意圖并并行處理多模態(tài)輸入,讓創(chuàng)意探索從底層邏輯轉(zhuǎn)向感官體驗(yàn)。

         

        圖源:Google

        平臺實(shí)現(xiàn)了人機(jī)交互的自然化,支持用戶通過語音指令進(jìn)行實(shí)時設(shè)計(jì)對話與方案篩選。同時,Stitch 能將靜態(tài)畫面瞬間轉(zhuǎn)化為交互原型,由 AI 自動推演點(diǎn)擊邏輯與用戶旅程,并支持通過 URL 提取設(shè)計(jì)系統(tǒng),極大簡化了從規(guī)則制定到原型生成的復(fù)雜流程。

        image.png

         

        圖源:Google

        五、法律邊界:Vogue 與 Dogue 的商標(biāo)博弈

        時尚巨頭康泰納仕正式起訴惡搞雜志《Dogue》,指控其封面設(shè)計(jì)侵犯《Vogue》商標(biāo)權(quán)。這本由獨(dú)立創(chuàng)作者創(chuàng)立的實(shí)體刊,因讓狗狗模仿人類大片而走紅。目前,康泰納仕不僅要求經(jīng)濟(jì)賠償,更強(qiáng)制要求銷毀所有庫存雜志。

        image.png

         

        圖源:dogue

        創(chuàng)始人 Portnaya 堅(jiān)稱《Dogue》是基于對話與重新詮釋的藝術(shù)創(chuàng)作,旨在為獨(dú)立創(chuàng)作者爭取表達(dá)空間。然而,面對銷量微薄與高昂法律費(fèi)用的懸殊對比,這場“大衛(wèi)與歌利亞”式的博弈陷入僵局,創(chuàng)作者正通過眾籌尋求法律援助。

        image.png

         

        圖源:vogue

        六、自然邊界:皇家植物園的品牌新姿態(tài)

        Johnson Banks 為愛丁堡皇家植物園(RBGE)打造的品牌重塑旨在整合四個園區(qū)的品牌感知,確立了“四處花園,一個植物世界”的品牌愿景,將愛丁堡、本莫爾、道伊克和洛根的花園融為一體。

        image.png

         

        圖源:johnsonbanks

        還專門設(shè)計(jì)了邊框,可以用來框住作品,并提醒人們它們始終存在,而不是事后才想起來的。

        image.png

         

        圖源:johnsonbanks

        這些標(biāo)志首次展示了一款全新的定制字體,共有四種字重。它是Nomada Incise的定制版,線條棱角分明,優(yōu)雅別致。最細(xì)的字重中包含一系列連字,呼應(yīng)了西巴爾迪亞符號及其邊框的生動呈現(xiàn)。

        image.png

         

        圖源:johnsonbanks

        七、文明邊界: 劍橋創(chuàng)新對歷史的推動

        劍橋地區(qū)以其創(chuàng)新和發(fā)現(xiàn)而聞名,而這一切始于其世界聞名的大學(xué)校園內(nèi),如今已發(fā)展成為環(huán)繞該地區(qū)的歐洲領(lǐng)先的知識生態(tài)系統(tǒng)——融合了 5000 家創(chuàng)新驅(qū)動型公司、60 家跨國公司、5 個醫(yī)院信托機(jī)構(gòu)、36 個研究園區(qū)、2 所大學(xué)(劍橋大學(xué)和安格利亞魯斯金大學(xué))以及蓬勃發(fā)展的初創(chuàng)企業(yè)和投資者群體。

        image.png

         

        圖源:johnsonbanks

        以圖解為主題,并將其運(yùn)用到代數(shù)、方程式、圖表和文字游戲中。這既充分利用了該地區(qū)的科學(xué)聲譽(yù),又為方案增色不少,同時還創(chuàng)造了一種獨(dú)特的視覺和語言。

        image.png

         

        圖源:johnsonbanks

        將自己最喜歡的創(chuàng)意與劍橋郡廣袤無垠的天空的靜態(tài)和動態(tài)影像相結(jié)合,打造出一套可應(yīng)用于多種媒體的設(shè)計(jì)工具包。

        image.png

         

        圖源:johnsonbanks

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

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

         

        image.png

        如何提升AI交互設(shè)計(jì)能力?這篇總結(jié)超全面!

        清陽 行業(yè)趨勢

        一、全文速覽圖

        image.png

        二、前言

        2025 是智能體的元年,2026 年將更加成熟和普及,應(yīng)用程序的體驗(yàn)方式因?yàn)橹悄荏w而逐步發(fā)生改變。

        馬斯克和扎克伯格曾預(yù)言“在未來 5-6 年內(nèi),傳統(tǒng)的手機(jī)和應(yīng)用程序(App)的形態(tài)將因?yàn)?AI 發(fā)生根本性變革”,蘭亭妙微ui設(shè)計(jì)公司與您一同學(xué)習(xí)。

        三、設(shè)計(jì)師已經(jīng)迎來了「AI 交互設(shè)計(jì)」窗口期

        以前的體驗(yàn)設(shè)計(jì)經(jīng)驗(yàn),已經(jīng)跟不上如今 AI 能力逐漸普及的應(yīng)用端設(shè)計(jì)開發(fā)趨勢。

        如今,各產(chǎn)品研發(fā)團(tuán)隊(duì)基于 AI 能力用戶體驗(yàn)設(shè)計(jì)需求將會大幅增加。

        即將到來的 2026 年金三銀四求職季,產(chǎn)品和開發(fā)設(shè)計(jì)崗的招聘必然會對求職者結(jié)合 AI 的能力提出更高要求。

        率先掌握 AI 體驗(yàn)設(shè)計(jì)能力的設(shè)計(jì)師,在求職時更有競爭力,在職場團(tuán)隊(duì) AI 設(shè)計(jì)這一塊也更有知識話語權(quán)。

        換個角度看,AI 體驗(yàn)設(shè)計(jì)對于交互設(shè)計(jì)師在一定程度上也是一次洗牌的機(jī)會。

        image.png

        四、從 UX 到 AI Experience,具體有哪些轉(zhuǎn)變

        1. AI 將重塑以往的交互方式

        當(dāng) AI 能夠理解自然語言并主動完成任務(wù)時,許多傳統(tǒng)的 UI 組件:信息架構(gòu)、導(dǎo)航設(shè)計(jì)、表單流程、數(shù)據(jù)篩選等交互方式將會逐漸被重構(gòu)。

        用戶與應(yīng)用交互的過程將會改變。比如:

        用戶發(fā)起交互,由原來的用戶主動操作+操作的路徑,變成了用戶的一句意圖表達(dá)+AI 直接推送入口。

        再比如對于用戶輸入錯誤的處理方式,由原來的表單驗(yàn)證與提示,變成了與 AI 的自然語言澄清,然后多輪對話修正。

        再比如幫助決策上,用戶由原來的面對多選項(xiàng),變成了 AI 根據(jù)情境理解目標(biāo),并直接推薦最優(yōu)路徑。

        image.png

        3. 基于 AI 的場景設(shè)計(jì)與思考

        根據(jù)尼爾森諾曼設(shè)計(jì)機(jī)構(gòu)(簡稱 NN/g)在 2024 年的 AX 設(shè)計(jì)研究,優(yōu)秀的 AI 體驗(yàn)設(shè)計(jì)要有具備以下幾個素質(zhì):

        1. 用戶能夠容易地使用提示詞:這意味著需要設(shè)計(jì)引導(dǎo)用戶有效輸入的界面元素
        2. 劃清 AI 主導(dǎo) 與 用戶主導(dǎo) 的邊界:當(dāng)不應(yīng)該讓 AI 做決定時,在合適的時機(jī)讓用戶介入
        3. 多模態(tài)交互設(shè)計(jì):語音、文本、控件輸入的設(shè)計(jì)結(jié)合
        4. 漸進(jìn)式建立信任 AI:順滑地讓用戶從發(fā)現(xiàn)、嘗試到依賴 AI 功能
        5. 品牌下的 AI 人格化:AI 人設(shè)、開場白風(fēng)格、擬人化、專有音效設(shè)計(jì)

        五、如何提升 AI 體驗(yàn)設(shè)計(jì)能力

        1. AI 交互設(shè)計(jì)知識

        ① 來自大廠的 AX 設(shè)計(jì)原則與模式

        來自 Google、Microsoft、Ant 公司的 AI 設(shè)計(jì)規(guī)范與原則。

        理解設(shè)計(jì)原則背后的原因、場景,就像以往我們接觸過剛在技術(shù)窗口爆發(fā)期的「新穎」交互,比如 PC 時代的鼠標(biāo)輸入、移動互聯(lián)網(wǎng)的觸屏輸入、虛擬現(xiàn)實(shí)時代等...交互模態(tài)各有差異。

        1. https://design.google/library/people-ai-research
        2. https://pair.withgoogle.com/guidebook/
        3. https://www.microsoft.com/en-us/haxtoolkit/ai-guidelines/
        4. https://ant-design-x.antgroup.com/docs/spec/introduce-cn

        image.png

        ② 建立 AI 交互設(shè)計(jì)基本認(rèn)知框架

        AI 的軟件分為:AI 能力應(yīng)用軟件、各行業(yè)場景應(yīng)用軟件的 AI 賦能。

        AI 的交互形態(tài):

        1. Chat 對話式(對話式交互為主)
        2. Assist 助手式(隱藏為主,需要協(xié)助時喚醒)
        3. Spread 散布式(隱藏為主,固定節(jié)點(diǎn)出現(xiàn)相關(guān)的 AI 功能)

        AI 交互組件:Think 思考過程、ThoughtChain 思維鏈、Prompts 提示集、Conversations 管理對話、Suggestion 快捷指令......

        image.png

        Ant-design-x

        ③ 積累 AI 交互設(shè)計(jì)經(jīng)驗(yàn)

        1. 體驗(yàn)優(yōu)秀的 AI 功能,并搜集到案例夾。
        2. 建議按場景分類收集:內(nèi)容創(chuàng)作類、數(shù)據(jù)分析類、任務(wù)自動化類、客戶服務(wù)類、等等。
        3. 大致的框架可以像產(chǎn)品體驗(yàn)日記一樣,記錄設(shè)計(jì)細(xì)節(jié),比如:產(chǎn)品名稱與截圖、核心交互流程描述、AI 介入的具體方式、優(yōu)秀設(shè)計(jì)細(xì)節(jié)(如何處理加載、錯誤、歧義的)。

        image.png

        ④ 嘗試?yán)斫?AI 大模型底層的技術(shù)原理

        這是偏技術(shù)的知識,對于非專業(yè)人群來說,比較難啃,但回報是最高的。

        因?yàn)樗俏覀冋J(rèn)識 AI 的原理性起點(diǎn),一旦掌握,做許多 AI 項(xiàng)目都能受益,比如:快速判斷 AI 能力邊界、規(guī)劃大模型訓(xùn)練等。

        而對于設(shè)計(jì)師來說,也包括能有效指導(dǎo) AI 領(lǐng)域的設(shè)計(jì)。

        就像以往我們落地自己的設(shè)計(jì)方案,最好提前摸清前端框架、組件、數(shù)據(jù)交互,才不容易在開發(fā)環(huán)節(jié)被卡脖子,更順利地實(shí)現(xiàn)設(shè)計(jì)方案。

        了解方式:查閱關(guān)于 LLM 工作原理的科普類文章;相關(guān)大模型的官方網(wǎng)站查找文檔。

        2. Ai 交互設(shè)計(jì)思維

        在現(xiàn)有設(shè)計(jì)項(xiàng)目中,多一層關(guān)于「AI 交互輔助」的思考

        在做設(shè)計(jì)項(xiàng)目中,在傳統(tǒng)交互設(shè)計(jì)思路上,有意識地思考「假設(shè)現(xiàn)在有 AI 智能體的幫助,這個功能可以是什么樣的更好用法?」。

        如果你想更好地驗(yàn)證 Ai 設(shè)計(jì)模式的成果,可以做一些進(jìn)階的學(xué)習(xí)研究:

        首先像以往的項(xiàng)目一樣,拆解用戶操作;

        然后針對每個環(huán)節(jié)思考“如果這里有 AI 能力,能否提效或者減負(fù)?

        再將 傳統(tǒng)方案 vs AI 加持方案的可視化,并進(jìn)行對比,量化提升的效率

        image.png

        基于上圖,我們把有 AI 協(xié)助退貨整個過程,背后的動作和實(shí)現(xiàn)原理拆解分析:

        1. 用戶與系統(tǒng)的交互是通過「多輪對話」,
        2. 然后 AI 在對話中「識別意圖」,與用戶確認(rèn)需求,
        3. AI「搜集關(guān)鍵信息與用戶資料」提交,
        4. AI 發(fā)起退貨申請,并對接商家「退貨系統(tǒng)」,
        5. AI 推薦「最優(yōu)」的退貨方式(上門取件),
        6. 只把最少的操作「確認(rèn)」留給用戶。

        而以上這些動作,都需要設(shè)計(jì)師具備了理解前后臺的交互鏈路(前端如何自然地與用戶交流、后端對接哪些接口)、Ai 工具調(diào)用的能力、等等知識經(jīng)驗(yàn),才能順利地完成 Ai 的交互設(shè)計(jì)方案,并落地。

        3. 爭取實(shí)戰(zhàn)機(jī)會,讓自己新學(xué)習(xí)的能力在落地中驗(yàn)證

        戰(zhàn)略性參與有 AI 的項(xiàng)目:

        如果你的團(tuán)隊(duì)項(xiàng)目正好有 AI 智能體對業(yè)務(wù)場景賦能的規(guī)劃,那么對你來說,參與進(jìn)來將是一個轉(zhuǎn)型的好機(jī)會。

        其中,從 redesign 小的功能點(diǎn)中 加入 AI 的交互方案開始,比如:搜索功能智能化、表單自動填充、智能推薦卡片。這類功能點(diǎn)改造見效明顯,往往投入產(chǎn)出比高,易于快速驗(yàn)證和迭代。

        當(dāng)然得在方案支撐足夠有理的前提下。比如:準(zhǔn)備傳統(tǒng)交互 vs AI 加持的交互這兩套方案對比,用預(yù)期收益、技術(shù)可行性和數(shù)據(jù)說話。

        主動創(chuàng)造機(jī)會和環(huán)境:

        定期向產(chǎn)品團(tuán)隊(duì)分享競品的優(yōu)秀 AX 設(shè)計(jì)案例,進(jìn)行團(tuán)隊(duì)設(shè)計(jì)掃盲,同時也能提升隊(duì)內(nèi)影響力,后面參與項(xiàng)目設(shè)計(jì)更有話語權(quán)。

        4. 大膽點(diǎn),用 AI 顛覆玩法

        進(jìn)階到挖掘大的場景中,能夠利用 AI 重塑體驗(yàn)方式的機(jī)會。

        比如:

        傳統(tǒng)的進(jìn)度條,用戶需要拖動查看逐個視頻幀尋找他想看的目標(biāo)片段。

        而 AI 播放器中,可以把識別到的字幕,加入到進(jìn)度條中作為錨點(diǎn),讓用戶根據(jù)具體的字幕內(nèi)容,就可以精準(zhǔn)定位并直達(dá)該進(jìn)度點(diǎn),找片段的效率大大提升,直接使體驗(yàn)升維。

        image.png

        最后

        預(yù)計(jì) 2-3 年之后,AI 交互設(shè)計(jì)將普及為交互設(shè)計(jì)師的基本能力。那些率先掌握的設(shè)計(jì)師,將在 AI 重塑產(chǎn)品形態(tài)的浪潮中,找到屬于自己的新位置。

        現(xiàn)在就是最好的開始時機(jī)。

        你,做好準(zhǔn)備了嗎。

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

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

         

        image.png

        蘭亭妙微:UI 設(shè)計(jì)趨勢實(shí)踐與行業(yè)創(chuàng)新探索

        濤濤 行業(yè)趨勢

        蘭亭妙微作為國內(nèi)頂尖的 UI/UE 設(shè)計(jì)領(lǐng)域標(biāo)桿,深耕行業(yè) 16 年,始終以 “設(shè)計(jì)賦能業(yè)務(wù)、體驗(yàn)驅(qū)動價值” 為核心,在工業(yè)制造、醫(yī)療健康、半導(dǎo)體、航天軍工等垂直領(lǐng)域,將當(dāng)下前沿的 UI 設(shè)計(jì)趨勢與行業(yè)場景深度融合,打造出兼具實(shí)用性、美學(xué)性與行業(yè)適配性的設(shè)計(jì)方案今日頭條。從 3D 視覺的技術(shù)落地到個性化體驗(yàn)的精準(zhǔn)打造,從交互創(chuàng)新到品牌視覺的 UI 化表達(dá),蘭亭妙微在每一個設(shè)計(jì)趨勢的實(shí)踐中,都堅(jiān)持 “懂行業(yè) + 懂技術(shù) + 懂用戶” 的核心定位,讓設(shè)計(jì)不止于視覺美感,更成為解決企業(yè)業(yè)務(wù)痛點(diǎn)、提升用戶操作效率的核心抓手。未來,UI 設(shè)計(jì)必將朝著更多元、更智能、更貼合用戶需求的方向發(fā)展,而蘭亭妙微也將持續(xù)探索設(shè)計(jì)與技術(shù)的融合邊界,為各行業(yè)打造更具競爭力的數(shù)字界面體驗(yàn)。

        2026年UI/UX設(shè)計(jì)趨勢洞察:從“爭奪注意力”到“尊重注意力”

        清陽 行業(yè)趨勢

        站在2026年的節(jié)點(diǎn)回望,數(shù)字設(shè)計(jì)領(lǐng)域正經(jīng)歷一場歷史性的轉(zhuǎn)折。過去十年以“移動端優(yōu)先”、扁平化設(shè)計(jì)與靜態(tài)設(shè)計(jì)系統(tǒng)為核心的范式,正被一股更具動態(tài)性、智能性與沉浸感的新浪潮全面取代。

        2026年的設(shè)計(jì)趨勢,已不再停留于界面美學(xué)的修飾,而是深入至交互的底層邏輯重構(gòu)。人工智能的角色,正從單純的效率工具,進(jìn)化為“聯(lián)合設(shè)計(jì)師”乃至“實(shí)時的UI生成者”,驅(qū)動著“生成式UI”的興起。與此同時,硬件形態(tài)的突破——如空間計(jì)算設(shè)備的普及、車載顯示系統(tǒng)的革新——正迫使二維界面加速向三維空間拓展,催生了以“液態(tài)玻璃”為代表的新擬物美學(xué)與空間化敘事。

        從技術(shù)與社會兩個維度來看,2025年是設(shè)計(jì)行業(yè)最為動蕩的一年

        • 技術(shù)層面,大型語言模型(LLM)與端側(cè)算力的深度融合,使“智能”不再依賴云端高延遲請求,而是內(nèi)嵌于每一臺終端設(shè)備,為實(shí)時、個性化的界面生成提供了底層基礎(chǔ)。

        • 社會層面,用戶對數(shù)字成癮的警惕達(dá)到頂峰,對隱私與心理健康的關(guān)注,迫使設(shè)計(jì)必須從“爭奪注意力”轉(zhuǎn)向“尊重注意力”。

        這些深刻變化,正以不同形態(tài)融入2026年的設(shè)計(jì)趨勢與方法策略之中。

        基于對這一轉(zhuǎn)型期的持續(xù)觀察,蘭亭妙微UI設(shè)計(jì)公司梳理出2026年真正值得關(guān)注的7大UI/UX趨勢。在后續(xù)內(nèi)容中,我們將逐一拆解“是什么”“為什么”以及“如何應(yīng)對”,為數(shù)字產(chǎn)品團(tuán)隊(duì)提供可落地的方向參考。

        一、生成式 UI:從「頁面設(shè)計(jì)」到「規(guī)則設(shè)計(jì)」

        image.png

        2026 年,用戶界面正在經(jīng)歷自 1976 年以來最深刻的變革。傳統(tǒng) UI 設(shè)計(jì)依賴于設(shè)計(jì)師預(yù)先定義每一個界面、狀態(tài)與跳轉(zhuǎn)邏輯;而生成式 UI 的核心在于,界面不再是預(yù)先畫好的固定圖像,而是由 AI 根據(jù)用戶實(shí)時意圖、上下文環(huán)境與設(shè)備狀態(tài),在毫秒級動態(tài)重組而成。這意味著,兩位用戶使用同一應(yīng)用完成同一任務(wù)時,看到的界面可能完全不同。設(shè)計(jì)的對象正從「頁面」轉(zhuǎn)向「組件關(guān)系」與「生成規(guī)則」。

        這一趨勢成熟的關(guān)鍵在于端側(cè)智能與組件化系統(tǒng)的深度融合。本地設(shè)備算力足以支撐復(fù)雜實(shí)時推理模型,解決了云端生成帶來的延遲與隱私問題。用戶操作——如語音指令、模糊搜索或點(diǎn)擊行為——被端側(cè)小模型解析為結(jié)構(gòu)化意圖,AI 從設(shè)計(jì)系統(tǒng)中檢索符合品牌規(guī)范的原子組件,并根據(jù)屏幕尺寸、用戶偏好與任務(wù)優(yōu)先級實(shí)時排布,生成一個「用完即焚」的臨時界面。

        image.png

        Figma Make、Google Stitch、妙多等產(chǎn)品,已是生成式 UI 的早期實(shí)踐,未來將逐步深入一線應(yīng)用。傳統(tǒng)的 A/B 測試也將進(jìn)化為「A/N 測試」,每個界面都成為對用戶當(dāng)前需求的最佳猜測。從用戶體驗(yàn)角度看,這標(biāo)志著「學(xué)習(xí)成本」的終結(jié)。

        在生成式 UI 時代,設(shè)計(jì)師的角色發(fā)生根本性轉(zhuǎn)變,工作重心聚焦于四個方向:

        • 定義約束:設(shè)定品牌風(fēng)格、交互原則與安全邊界,確保 AI 生成的 UI 不偏離品牌調(diào)性;

        • 提示詞設(shè)計(jì):編寫與優(yōu)化用于指導(dǎo) AI 界面生成的提示詞;

        • 系統(tǒng)架構(gòu):維護(hù)龐大而靈活的設(shè)計(jì)組件庫,保障組件在任何組合下均能正常工作;

        • 設(shè)計(jì)兜底:處理例外情況,由設(shè)計(jì)師親手解決具體設(shè)計(jì)問題,為 AI 提供保障。

        設(shè)計(jì)師的價值正轉(zhuǎn)向設(shè)計(jì)邏輯的健壯性與智慧程度,這或許是一個更「抽象」但必然到來的結(jié)果。


        二、液態(tài)玻璃美學(xué):數(shù)字材質(zhì)的「生命力」

        image.png

        如果說 2010 年代的扁平化設(shè)計(jì)是為了適應(yīng)低分辨率屏幕與性能受限的移動處理器,那么 2026 年的「液態(tài)玻璃」美學(xué),則是硬件性能過剩與屏幕顯示技術(shù)飛躍的自然產(chǎn)物。這一趨勢由 Apple 在 2025 年 WWDC 上發(fā)布的系統(tǒng)更新(iOS 26、macOS Tahoe、visionOS 26)引爆,迅速蔓延至整個數(shù)字設(shè)計(jì)領(lǐng)域。

        「液態(tài)玻璃」并非簡單的擬物化回歸,也不是「毛玻璃」效果的重復(fù)。它是一種高度動態(tài)、具有物理屬性的數(shù)字材質(zhì):與靜態(tài)半透明背景不同,液態(tài)玻璃界面是「活」的——背景元素在透過上層界面時,會根據(jù)距離、角度與運(yùn)動速度產(chǎn)生實(shí)時光學(xué)扭曲與模糊。

        這一趨勢的核心在于「深度感」與「響應(yīng)性」。在 2026 年的界面中,光影不再是裝飾,而是信息層級的指示器:

        • 動態(tài)模糊:用戶滾動列表時,底層內(nèi)容不僅模糊,還會產(chǎn)生類似流體流過玻璃表面的拖影效果;

        • 鏡面高光:按鈕與卡片邊緣根據(jù)設(shè)備陀螺儀感知的傾斜角度,呈現(xiàn)流動光澤;

        • 層級重構(gòu):通過精確光學(xué)模糊與深度分層,在不遮擋背景內(nèi)容的前提下,清晰呈現(xiàn)前景操作區(qū)。

        實(shí)現(xiàn)「液態(tài)玻璃」效果高度依賴先進(jìn)圖形渲染技術(shù)——在 iOS 生態(tài)中依托 Metal 圖形 API 的深度優(yōu)化,在 Web 端則因 WebGPU 的普及,使瀏覽器能以 60fps 甚至 120fps 流暢渲染復(fù)雜實(shí)時光照與模糊效果。

        image.png

        對品牌而言,「液態(tài)玻璃」提供了扁平化時代一度缺失的差異化手段。通過調(diào)整「玻璃」的折射率、厚度感、色散程度與「液體」的粘滯系數(shù),不同品牌可打造出截然不同的質(zhì)感。「數(shù)字材質(zhì)學(xué)」正成為 UI 設(shè)計(jì)師的新必修課。


        三、多模態(tài)交互與感知界面:告別「點(diǎn)擊」中心主義

        2026 年的交互設(shè)計(jì),正式告別以「點(diǎn)擊」與「滑動」為絕對核心的時代,進(jìn)入多模態(tài)共生階段。隨著傳感器成本降低與 AI 語義理解的質(zhì)變,語音、手勢、眼動追蹤乃至面部微表情,均成為標(biāo)準(zhǔn)的一級輸入方式。

        image.png

        這種轉(zhuǎn)變的標(biāo)志是「輸入方式的流動性」。用戶無需顯式切換模式——在撰寫文檔時,可一邊打字,一邊用語音補(bǔ)充描述,同時用眼神注視角落喚起參考資料,系統(tǒng)流暢融合三種輸入,理解綜合意圖。

        更進(jìn)一步,「感知界面」成為最具未來感的趨勢。設(shè)備不再是被動工具,而成為具備情感計(jì)算能力的伙伴。通過分析用戶打字速度、語音語調(diào)變化,甚至通過攝像頭捕捉面部肌肉緊張度,界面可實(shí)時推斷情緒狀態(tài)(如焦慮、憤怒、困惑或?qū)Wⅲ?。?Hume AI 等公司開發(fā)的語音接口,能表達(dá)與響應(yīng)細(xì)微情感線索,使人機(jī)對話不再冰冷。

        在汽車領(lǐng)域,多模態(tài)交互已成為部分車型標(biāo)配。寶馬 Panoramic Vision、現(xiàn)代摩比斯全風(fēng)擋全息 HUD 等設(shè)計(jì),將整個擋風(fēng)玻璃下沿變?yōu)轱@示區(qū)域,結(jié)合增強(qiáng)現(xiàn)實(shí)(AR),將導(dǎo)航信息直接投射于路面。

        image.png


        四、空間化敘事與沉浸式滾動:從「無限瀑布流」到「敘事驅(qū)動」

        傳統(tǒng)的「無限瀑布流」因易導(dǎo)致成癮與信息迷失而受到批判,取而代之的是「滾動敘事」。在這種模式下,滾動操作不再僅是移動視窗,而是驅(qū)動時間軸與敘事邏輯的引擎。用戶向下滾動時,界面元素并非簡單上移,而是根據(jù)預(yù)設(shè)敘事腳本進(jìn)行復(fù)雜變換:

        image.png

        • 場景轉(zhuǎn)換:背景隨內(nèi)容深入從清晨漸變?yōu)辄S昏;

        • 拆解展示:3D 產(chǎn)品模型旋轉(zhuǎn)、拆解以展示內(nèi)部結(jié)構(gòu);

        • 節(jié)奏控制:滾動速度決定故事流速,利用「智能吸附」技術(shù)讓用戶在關(guān)鍵敘事節(jié)點(diǎn)自然停頓,避免信息遺漏。

        受 Apple Vision Pro、Meta Quest 等空間計(jì)算設(shè)備影響,即便在普通手機(jī)與電腦屏幕上,UI 也開始追求「空間感」。2026 年的設(shè)計(jì)廣泛采用「偽 3D」與「2.5D」技術(shù):

        image.png

        • 視差效應(yīng):通過陀螺儀與光標(biāo)位置,平面卡片與圖像產(chǎn)生視差移動,仿佛懸浮于屏幕后方不同深度;

        • 光影互動:3D 卡片根據(jù)光標(biāo)移動改變陰影投射方向,呈現(xiàn)近乎真實(shí)的物體存在感;

        • 打破網(wǎng)格:空間化設(shè)計(jì)打破傳統(tǒng)網(wǎng)格布局,允許元素在 Z 軸堆疊與穿插。


        五、超個性化與自適應(yīng)布局:UI 的「千人千面」

        image.png

        借助 AI 的力量,2026 年的 UI 終于實(shí)現(xiàn)真正的超個性化。這超越了「猜你喜歡」的內(nèi)容推薦,深入 UI 布局與功能邏輯層面。應(yīng)用可根據(jù)用戶使用習(xí)慣、當(dāng)前情境與生物節(jié)律,動態(tài)重組界面。例如,財務(wù)經(jīng)理看到的是報表導(dǎo)出與審核功能,數(shù)據(jù)分析師則突出可視化圖表與 SQL 查詢窗口。

        image.png

        這種自適應(yīng)布局依賴高度靈活的動態(tài)設(shè)計(jì)系統(tǒng)。UI 元素不再固定位置,而是根據(jù)權(quán)重算法實(shí)時排布,這對品牌一致性提出挑戰(zhàn)。設(shè)計(jì)師必須定義強(qiáng)大的「品牌基因算法」,確保無論 UI 如何變形,用戶仍能一眼識別品牌。這通常通過以下方式實(shí)現(xiàn):

        • 動態(tài)令牌:定義語義化顏色、間距與排版規(guī)則,而非硬編碼數(shù)值;

        • 微交互簽名:無論布局如何變化,按鈕點(diǎn)擊反饋動畫、頁面加載的獨(dú)特「呼吸感」保持不變,成為品牌的指紋。


        六、Zero UI 與 AI Agent:從「操作流」到「確認(rèn)流」

        image.png

        「最好的界面就是沒有界面」(Zero UI)的理念在 2026 年得到廣泛關(guān)注。在智能家居、HMI 與可穿戴設(shè)備領(lǐng)域,屏幕不再是交互中心,而退居二線成為輔助信息展示板。交互主要通過傳感器自動觸發(fā):

        • 接近感應(yīng):走近汽車時,通過藍(lán)牙與步態(tài)識別自動解鎖并調(diào)節(jié)座椅;

        • 行為預(yù)測:從冰箱拿出牛奶時,手勢與重量傳感器自動記錄消耗量,在耗盡前加入購物清單。

        Zero UI 的另一面是 AI Agent 的興起。用戶不再親自操作復(fù)雜軟件菜單,而是向 AI Agent 下達(dá)模糊目標(biāo),由 Agent 在后臺自動跨應(yīng)用完成任務(wù)。

        UI 設(shè)計(jì)的重點(diǎn)從「操作流」轉(zhuǎn)向「確認(rèn)流」與「狀態(tài)流」。設(shè)計(jì)師需要設(shè)計(jì)清晰的卡片,展示 AI 的思考過程、決策依據(jù)與最終結(jié)果,讓用戶快速掃視并「批準(zhǔn)」或「微調(diào)」,而非親自執(zhí)行每一步。信任感設(shè)計(jì)成為核心——用戶需要知道 AI Agent 做了什么,以及為什么這么做。

        image.png

        在沒有屏幕的場景下,反饋需通過其他感官傳達(dá)??臻g音頻利用聲音方向感引導(dǎo)用戶,觸覺反饋則通過不同頻率震動傳遞「成功」「錯誤」或「提醒」等信息。設(shè)計(jì)師不僅要「畫圖」,還要學(xué)會「編曲」與「編排震動」,這大大拓展了 UX 設(shè)計(jì)師的技能邊界。


        七、動態(tài)排版與微敘事:文字成為「視覺生命體」

        2026 年,文字不再僅是承載信息的靜態(tài)符號,而成為具有生命力的視覺元素。動態(tài)排版成為主流趨勢:標(biāo)題不再只是靜態(tài)字體,它們會根據(jù)鼠標(biāo)懸停、頁面滾動或語音輸入產(chǎn)生變形、變色、拉伸甚至破碎重組的效果。

        image.png

        這一趨勢深受短視頻文化和高刷新率屏幕普及的影響。靜態(tài)文字被認(rèn)為通過率低且乏味。設(shè)計(jì)師利用變量字體技術(shù),讓字體的粗細(xì)、寬窄、傾斜與襯線形狀可無級調(diào)節(jié),并與用戶交互行為綁定。

        與此同時,微交互也被賦予敘事功能。一個簡單的「點(diǎn)贊」按鈕不再只是變紅,它可能爆發(fā)出彩色粒子,或像果凍般彈跳,甚至根據(jù)點(diǎn)贊次數(shù)展現(xiàn)不同等級的華麗動畫。

        image.png

        這些微小的瞬間不僅僅是反饋,它們共同構(gòu)成產(chǎn)品的性格。通過精心設(shè)計(jì)的微交互,設(shè)計(jì)師在不增加額外內(nèi)容的情況下,向用戶傳遞品牌的趣味、嚴(yán)謹(jǐn)或關(guān)懷——也就是情緒價值。


        結(jié)語

        綜上所述,2026 年的 UI/UX 設(shè)計(jì)趨勢呈現(xiàn)出一種深刻的辯證關(guān)系:技術(shù)越是先進(jìn)(AI 生成、空間計(jì)算),設(shè)計(jì)越是追求回歸人性(情感感知、神經(jīng)包容、物理質(zhì)感)。

        對于企業(yè)與設(shè)計(jì)團(tuán)隊(duì)而言,應(yīng)對這些趨勢需進(jìn)行戰(zhàn)略層面的調(diào)整:

        1. 技能升級:設(shè)計(jì)師必須從「畫圖員」轉(zhuǎn)變?yōu)椤高壿嫾軜?gòu)師」與「提示詞工程師」。掌握 AI 工具不再是加分項(xiàng),而是生存技能。

        2. 倫理優(yōu)先:在 AI Agent 與情感計(jì)算日益強(qiáng)大的背景下,設(shè)計(jì)倫理(隱私、包容性、防成癮)必須成為產(chǎn)品開發(fā)的第一性原理,而非事后補(bǔ)救。

        3. 系統(tǒng)思維:建立能夠適應(yīng)生成式 UI 與多模態(tài)交互的動態(tài)設(shè)計(jì)系統(tǒng),是企業(yè)在 2026 年保持競爭力的基礎(chǔ)設(shè)施。

        2026 年的設(shè)計(jì),不再是關(guān)于如何讓界面「好看」,而是關(guān)于如何讓技術(shù)以最自然、最尊重、最可持續(xù)的方式融入人類生活。

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

         

        image.png

        研究鴻蒙系統(tǒng)后,總結(jié)了給設(shè)計(jì)師的未來多端應(yīng)用設(shè)計(jì)指南

        清陽 行業(yè)趨勢

        隨著鴻蒙系統(tǒng)的持續(xù)成熟、全場景生態(tài)不斷完善,互聯(lián)網(wǎng)產(chǎn)品正式迎來新一輪多端應(yīng)用適配的核心挑戰(zhàn)。當(dāng)下數(shù)字產(chǎn)品界面功能愈發(fā)復(fù)雜、信息層級愈發(fā)繁瑣,疊加操作系統(tǒng)多元、終端設(shè)備類型跨度極大的行業(yè)現(xiàn)狀,單一的移動端設(shè)計(jì)思維早已無法適配全場景交互需求,設(shè)計(jì)師唯有跳出傳統(tǒng)單端設(shè)計(jì)框架,徹底重構(gòu)適配萬物互聯(lián)的全新設(shè)計(jì)思維,才能緊跟數(shù)字產(chǎn)品的發(fā)展趨勢,打造出跨端流暢、體驗(yàn)統(tǒng)一的優(yōu)質(zhì)應(yīng)用。本文結(jié)合鴻蒙系統(tǒng)官方設(shè)計(jì)理念與核心規(guī)范、主流iOS及Android系統(tǒng)最新設(shè)計(jì)標(biāo)準(zhǔn)深度研究,聯(lián)動蘭亭妙微UI設(shè)計(jì)公司的多端適配實(shí)戰(zhàn)項(xiàng)目經(jīng)驗(yàn),為廣大UI/UX設(shè)計(jì)師系統(tǒng)梳理未來多端應(yīng)用設(shè)計(jì)的核心思路、落地準(zhǔn)則與實(shí)操指南,破解跨設(shè)備適配難題,助力精準(zhǔn)貼合鴻蒙生態(tài)設(shè)計(jì)要求。

        前言:鴻蒙,中國互聯(lián)網(wǎng)生態(tài)的關(guān)鍵變量

        image.png

        “百年未有之大變局” 下,國家數(shù)字安全的重要性日益凸顯,完全依托國外操作系統(tǒng)的應(yīng)用生態(tài),已難以匹配大國發(fā)展的未來需求。鴻蒙系統(tǒng)的崛起,不僅是一款國產(chǎn)操作系統(tǒng)的落地,更成為未來幾年中國互聯(lián)網(wǎng)行業(yè)的核心 “變量”,推動多端應(yīng)用設(shè)計(jì)從 “單端適配” 向 “全場景融合” 的深層變革。
         
        對于設(shè)計(jì)師而言,鴻蒙系統(tǒng)的到來絕非簡單增加一套系統(tǒng)適配,而是設(shè)計(jì)理念、職能定位與實(shí)操方法的全面升級。如何理解并踐行鴻蒙的全場景設(shè)計(jì)思維,成為應(yīng)對萬物互聯(lián)時代設(shè)計(jì)挑戰(zhàn)的核心命題。
         

        一、互聯(lián)網(wǎng)發(fā)展與操作系統(tǒng)的必然演變

         

        1. 互聯(lián)網(wǎng)發(fā)展:從單屏到多屏,設(shè)計(jì)思維的四次迭代

         
        互聯(lián)網(wǎng)的發(fā)展始終與設(shè)備形態(tài)、屏幕載體同頻進(jìn)化,每一次設(shè)備革新都催生新的設(shè)計(jì)理念與設(shè)計(jì)師職能,而屏幕的演變也從 “固定化” 走向 “碎片化、全場景化”。
        image.png
        互聯(lián)網(wǎng)發(fā)展與設(shè)計(jì)思維的四個階段清晰界定了設(shè)計(jì)師的核心目標(biāo)轉(zhuǎn)變:

        image.png

        互聯(lián)網(wǎng)階段 核心設(shè)備 設(shè)計(jì)核心 設(shè)計(jì)師職能特征
        Web1.0(萌芽期) 固定顯示器 信息密度優(yōu)先,美觀與交互次要 平面設(shè)計(jì)師,聚焦靜態(tài)信息排列
        Web2.0(爆發(fā)交互期) 固定顯示器 + 筆記本電腦 網(wǎng)頁風(fēng)格、視覺效果與互動形式創(chuàng)新 網(wǎng)頁設(shè)計(jì)師,基于虛擬世界的創(chuàng)意設(shè)計(jì)
        移動互聯(lián)網(wǎng)時代 智能手機(jī)觸摸屏 以手機(jī)為核心的用戶體驗(yàn)設(shè)計(jì) UI / 交互 / 動效設(shè)計(jì)師,逐步融合為體驗(yàn) / 產(chǎn)品設(shè)計(jì)師
        萬物互聯(lián)時代 多類型屏幕(平板 / 可穿戴 / 智能家居 / VR/AR) 以人為核心的多設(shè)備協(xié)同場景化體驗(yàn) 全場景設(shè)計(jì)師,兼具多端適配與協(xié)同思維

         

        當(dāng)下我們正處于移動互聯(lián)網(wǎng)向萬物互聯(lián)的過渡階段,設(shè)計(jì)師的核心仍以體驗(yàn)設(shè)計(jì)為根基,但多設(shè)備、多場景的適配與協(xié)同已成為必須具備的核心能力。
         

        2. 傳統(tǒng)操作系統(tǒng)的弊端:單端設(shè)計(jì)思維的天花板

         
        全球主流操作系統(tǒng)(Windows/MacOS/iOS/Android)均伴隨巨頭企業(yè)發(fā)展形成生態(tài),并基于不同設(shè)備衍生出獨(dú)立系統(tǒng)(如蘋果的 iPadOS/WatchOS/VisionOS)。但隨著設(shè)備與應(yīng)用的持續(xù)豐富,單端設(shè)計(jì)思維的弊端愈發(fā)明顯:

        image.png

        • 多平臺、多尺寸適配設(shè)計(jì)差異大,視覺與體驗(yàn)一致性難以保證;
        • 各系統(tǒng)底層代碼壁壘高,需不同開發(fā)團(tuán)隊(duì)維護(hù),開發(fā)成本劇增;
        • 設(shè)計(jì)師需維護(hù)多套規(guī)范、組件與素材,效率低下且易出現(xiàn)標(biāo)準(zhǔn)混亂。
        image.png
        即便蘋果等企業(yè)嘗試推進(jìn)多端體驗(yàn)融合(如統(tǒng)一 MacOS 與 iOS 的組件樣式),但受限于龐大的既有生態(tài),難以從底層打通設(shè)備間的橋梁,僅能通過 “橋梁式連接” 實(shí)現(xiàn)淺層協(xié)同,而非真正的設(shè)備融合。

         

        image.png

        3. 鴻蒙系統(tǒng)的創(chuàng)新:從 “設(shè)備協(xié)同” 到 “設(shè)備融合”

         
        鴻蒙系統(tǒng)作為全新的全場景智能操作系統(tǒng),站在傳統(tǒng)操作系統(tǒng)的成熟經(jīng)驗(yàn)之上實(shí)現(xiàn)彎道超車,其核心設(shè)計(jì)理念徹底打破了單端設(shè)計(jì)思維的桎梏 ——一次開發(fā)、多端部署,這也是鴻蒙與傳統(tǒng)操作系統(tǒng)的本質(zhì)區(qū)別。

        image.png

        鴻蒙通過兩大核心技術(shù)實(shí)現(xiàn)這一理念,為全場景設(shè)計(jì)奠定底層基礎(chǔ):
         
        1. 分布式軟總線:打破設(shè)備物理壁壘,讓所有設(shè)備如同單一設(shè)備般實(shí)現(xiàn)高效通信,實(shí)現(xiàn)設(shè)備間的能力共享與數(shù)據(jù)互通;
        2. 自適應(yīng) UI 框架(方舟開發(fā)框架):可根據(jù)設(shè)備的屏幕尺寸、像素密度、交互方式(觸控 / 遙控 / 旋鈕),自動適配對應(yīng)的 UI 布局與交互邏輯,從技術(shù)層面減少多端適配的重復(fù)工作。

        image.png

        鴻蒙系統(tǒng)對設(shè)計(jì)師的核心要求,是建立全場景設(shè)計(jì)思維:從應(yīng)用框架、組件形態(tài)、交互方式、反饋形式等維度,將多端設(shè)計(jì)整合為一套統(tǒng)一的全場景設(shè)計(jì)系統(tǒng),而非對不同設(shè)備做孤立的設(shè)計(jì)適配。
         
        一套完整的全場景設(shè)計(jì)系統(tǒng),需具備四大核心要素:

        image.png

        • 全場景的自適應(yīng) / 響應(yīng)式布局規(guī)范:基于屏幕比例抽象,打造階梯式自適應(yīng)結(jié)構(gòu);
        • 全場景 API 的統(tǒng)一:實(shí)現(xiàn)全局配色、字體、組件、布局的統(tǒng)一管控;
        • 多模態(tài)組件庫:適配不同設(shè)備 / 場景的組件樣式、交互與反饋形態(tài);
        • 全場景適配的成熟經(jīng)驗(yàn)與實(shí)操指南。
         
        下文將重點(diǎn)圍繞全場景設(shè)計(jì)的框架與布局層面,梳理鴻蒙設(shè)計(jì)的核心實(shí)操要點(diǎn)。
         

        二、全場景布局的基礎(chǔ)要素:統(tǒng)一基準(zhǔn),抽象尺寸,建立秩序

         
        多設(shè)備適配的核心前提,是建立一套統(tǒng)一的布局基礎(chǔ)規(guī)則,解決 “尺寸不統(tǒng)一、比例差異大、布局無規(guī)律” 的核心問題,鴻蒙系統(tǒng)通過虛擬像素、斷點(diǎn)系統(tǒng)、柵格系統(tǒng)三大要素,搭建了全場景布局的底層框架。
         

        1. 基準(zhǔn)倍率統(tǒng)一:vp 虛擬像素,實(shí)現(xiàn)跨設(shè)備尺寸歸一

        image.png

        面對海量設(shè)備的像素密度與屏幕尺寸差異,鴻蒙采用虛擬像素(vp) 作為設(shè)計(jì)的基礎(chǔ)單位,實(shí)現(xiàn)所有設(shè)備設(shè)計(jì)尺寸的歸一化,其核心邏輯與 Android 的 dp 一脈相承,但更適配鴻蒙的全場景設(shè)備體系。

        image.png

        • vp 的核心定義:針對應(yīng)用的設(shè)備虛擬尺寸,區(qū)別于屏幕硬件的物理像素(px),可在任何屏幕上縮放以保證統(tǒng)一的視覺尺寸體量;
        • vp 的換算規(guī)則:1vp≈160dpi 屏幕上的 1px,鴻蒙 API 接口無單位時,默認(rèn)單位均為 vp;
        • 注意點(diǎn):因設(shè)備屏幕多樣化,vp 與 px 的換算無固定整數(shù)倍率(如蘋果 pt 的 2x/3x),需參考鴻蒙官方文檔做精準(zhǔn)適配。

        image.png

        2. 屏幕尺寸抽象:斷點(diǎn)系統(tǒng),劃分跨設(shè)備布局區(qū)間

         
        基于 vp 完成尺寸歸一后,通過斷點(diǎn)系統(tǒng)界定 “布局何時需要變化”,這是響應(yīng)式布局的核心,鴻蒙從橫向(窗口寬度)、縱向(窗口寬高比) 兩個維度,將全場景設(shè)備的屏幕抽象為五大梯度,實(shí)現(xiàn)屏幕尺寸的標(biāo)準(zhǔn)化歸納:
         image.png
         
        鴻蒙斷點(diǎn)梯度 對應(yīng)設(shè)備類型
        XSmall 智能手表、小屏穿戴設(shè)備
        Small 手機(jī)、豎屏折疊屏
        Medium 橫屏手機(jī)、小平板、展開折疊屏
        Large 平板設(shè)備、車機(jī)
        XLarge PC、智慧屏

         

         image.png
        相較于 Android 的斷點(diǎn)規(guī)范,鴻蒙的斷點(diǎn)系統(tǒng)覆蓋范圍更廣,充分考慮了可穿戴設(shè)備、折疊屏等萬物互聯(lián)時代的特色設(shè)備,更適配全場景設(shè)計(jì)需求。
         

        image.png

         

        3. 基礎(chǔ)布局秩序:柵格系統(tǒng),保證多設(shè)備布局一致性

         
        在單設(shè)備設(shè)計(jì)中柵格系統(tǒng)并非必需,但在多設(shè)備全場景設(shè)計(jì)中,柵格是通用的輔助定位系統(tǒng),為布局提供可循規(guī)律,解決動態(tài)布局的一致性問題,柵格會隨屏幕、窗口、子容器尺寸的變化動態(tài)調(diào)整。
         

        image.png

        柵格的三大核心構(gòu)成

         

         

        1. Margins(邊距):元素與窗口左右邊緣的距離,決定內(nèi)容展示寬度,可按窗口尺寸定義不同數(shù)值;
        2. Gutters(間距):柵格之間的距離,控制元素間的視覺關(guān)系,取值通常不大于邊距(符合格式塔原理);
        3. Columns(柵格):內(nèi)容占位框架,數(shù)量決定布局復(fù)雜度,寬度由窗口寬度與柵格數(shù)量自動計(jì)算,不同窗口尺寸匹配不同柵格數(shù)量。
         

        image.png

        鴻蒙柵格系統(tǒng)的設(shè)計(jì)原則

         
        鴻蒙采用窗口柵格系統(tǒng),核心邏輯與 Android 一致:通過斷點(diǎn)系統(tǒng)抽象窗口寬度區(qū)間,再匹配對應(yīng)的柵格數(shù)量(邊距、間距),實(shí)現(xiàn)內(nèi)容布局的最佳適配。
         
        • 應(yīng)用可根據(jù)自身風(fēng)格(緊湊型 / 寬松型 / 通用型)定義專屬柵格組合(如 8 間距 / 12 間距 / 16 間距);
        • 柵格內(nèi)容區(qū)最大使用寬度為 2220vp,窗口寬度超過該值時,內(nèi)容區(qū)不再放大,多余區(qū)域左右留白,避免大屏內(nèi)容過度拉伸。
         

        三、應(yīng)用級自適應(yīng)布局架構(gòu):隨屏而變,適配不同設(shè)備交互邏輯

         
        基礎(chǔ)布局要素解決了 “統(tǒng)一規(guī)則” 的問題,而應(yīng)用級自適應(yīng)布局架構(gòu)則針對不同設(shè)備的屏幕特性與用戶操作習(xí)慣,設(shè)計(jì)可動態(tài)調(diào)整的應(yīng)用整體框架,讓應(yīng)用在不同設(shè)備上都能實(shí)現(xiàn)高效的交互與信息展示。鴻蒙系統(tǒng)給出了 7 種核心的應(yīng)用級布局適配方法,設(shè)計(jì)師可根據(jù)應(yīng)用需求靈活組合:
         

        1. Tab 欄響應(yīng)架構(gòu):底部→側(cè)邊,適配大屏操作

        image.png

         
        底部 Tab 是移動端核心全局導(dǎo)航,但大屏中會因拉伸占用過多空間,窗口寬度≥840vp 時,建議將底部 Tab 挪移至左側(cè),成為側(cè)邊 Tab;
         
        • 側(cè)邊 Tab 可融合更多導(dǎo)航選項(xiàng)、全局操作元素(如菜單欄、頭像),充分利用大屏空間;
        • 該數(shù)值為鴻蒙建議值,可根據(jù)應(yīng)用的空間需求靈活調(diào)整。
         

        2. 分欄布局:父子層級→平行顯示,釋放大屏信息展示能力

        image.png

         
        大屏的核心優(yōu)勢是更大的信息展示空間,可將移動端的父子層級頁面拆分為平行分欄,窗口寬度≥600vp 時,建議使用分欄布局;
         
        • 鴻蒙默認(rèn)兩欄寬度比例為 4:6,特定場景可調(diào)整為 5:5 或 6:4;
        • 若頁面以內(nèi)容 / 商品展示為主,可適當(dāng)提高分欄的窗口寬度閾值,或不采用分欄布局,保證閱讀效率。
         

        3. 懸浮式側(cè)邊導(dǎo)航欄:適配小屏 / 雙折疊屏,節(jié)省核心空間

         

        image.png

        在豎屏手機(jī)、雙折疊屏等空間有限的場景,側(cè)邊導(dǎo)航作為臨時層級,采用蒙版 + 左側(cè)喚起的懸浮形式,不占用核心閱讀空間,同時讓用戶清晰感知層級關(guān)系。
         

        4. 嵌入式側(cè)邊導(dǎo)航欄:適配大屏,提升操作效率

        image.png

         
        在 PC、智慧屏等空間充裕的大屏場景,側(cè)邊導(dǎo)航采用嵌入式布局,通過向右擠壓主內(nèi)容區(qū),從雙欄模式切換為三欄模式,兼顧操作效率與布局多樣性。
         

        5. 側(cè)邊面板:適配寬屏沉靜式場景,實(shí)現(xiàn)輕交互

         
        寬屏的視頻、閱讀等沉靜式場景中,將原本的底部浮層操作(如評論、信息查看)改為側(cè)邊面板,在不打斷核心體驗(yàn)的前提下,實(shí)現(xiàn)便捷的輕交互處理。
         

        6. 跟手半模態(tài):適配大屏 / 折疊屏,符合人體工學(xué)

        image.png

         
        移動端彈窗多置于屏幕中間,但大屏 / 雙折疊屏中,用戶單手難以覆蓋全屏幕,需將操作彈窗放置在符合人體工學(xué)的位置(如靠近右手的邊緣),提升操作便捷性。
         

        7. 半彈窗與彈窗變化:適配多屏,實(shí)現(xiàn)模態(tài)自適應(yīng)

         
        移動端為減少頁面跳轉(zhuǎn),常用底部半彈窗實(shí)現(xiàn)內(nèi)容型臨時頁面;在折疊屏 / 平板等大屏場景,將半模態(tài)頁面自適應(yīng)為臨時窗口模式,充分利用大屏空間,提升交互體驗(yàn)。
         

        四、模塊級響應(yīng)式布局方法:細(xì)節(jié)適配,讓界面過渡更自然

         
        應(yīng)用級架構(gòu)解決了整體框架的適配,而模塊級響應(yīng)式布局則聚焦單個功能模塊的動態(tài)調(diào)整,讓模塊隨容器尺寸(屏幕 / 窗口)變化實(shí)時適配,并通過過渡動畫實(shí)現(xiàn)自然的界面變化,鴻蒙梳理了 8 種核心的模塊級適配方法,覆蓋絕大多數(shù)設(shè)計(jì)場景:
         

        1. 橫向等距自適應(yīng)

        image.png

         
        模塊內(nèi)元素左右間距固定,模塊寬度隨容器寬度等值變化,是最基礎(chǔ)的模塊適配方式,適用于簡單的線性排列元素。
         

        2. 橫向均分自適應(yīng)

        image.png

         
        容器尺寸變化時,將空間平均分配至元素間的空白區(qū)域;若尺寸變化幅度大,可在模塊內(nèi)設(shè)置斷點(diǎn),調(diào)整元素數(shù)量與尺寸,適配設(shè)計(jì)目標(biāo)。
         

        3. 等比縮放

         

        image.png

        元素長寬綁定并等比縮放,適用于對比例要求嚴(yán)格的元素(如 LOGO、固定比例圖片),保證視覺形態(tài)的一致性。
         

        4. 占比縮放

        image.png

         
        元素尺寸與容器 / 區(qū)域的某一維度(寬 / 高)按比例綁定,比等比縮放更靈活,能更穩(wěn)定地分配布局與元素空間,是日常設(shè)計(jì)中最常用的縮放方式。
         

        5. 自適應(yīng)延伸

         

        image.png

        元素間距與大小固定,僅通過容器調(diào)整顯示 / 隱藏的內(nèi)容數(shù)量;需注意高頻 / 必要元素需持續(xù)露出,避免核心功能被隱藏。
         

        6. 自適應(yīng)隱藏

        image.png

         
        聚焦小屏核心操作,將低頻操作整合至 “更多” 按鈕中,適用于空間有限的小屏 / 穿戴設(shè)備;核心原則是按操作優(yōu)先級排序,保證核心操作的便捷性(如音樂播放器的播放 / 暫停始終居中)。
         

        7. 自適應(yīng)折行

         

        image.png

        層級相同的內(nèi)容展示首選方式,容器寬度變化時,內(nèi)容不隱藏,僅做折行顯示,保證信息的完整性,適用于標(biāo)簽、列表項(xiàng)等元素。
         

        8. 重復(fù)布局

         

        image.png

        利用大屏寬度優(yōu)勢,將同屬性組件橫向并列排布,適用于對寬高比敏感的圖片 / 組合內(nèi)容,避免內(nèi)容放大超過 150% 導(dǎo)致的視覺變形。
         

        五、空間哲學(xué)的變革趨勢:容器化與懸浮化,未來跨端設(shè)計(jì)的核心方向

        image.png

         
        鴻蒙系統(tǒng)雖有后發(fā)技術(shù)優(yōu)勢,但在設(shè)計(jì)風(fēng)格與趨勢上,仍可借鑒蘋果、Android 的最新探索,而空間與容器的具像化、導(dǎo)航 / 操作的懸浮化,已成為全球跨端設(shè)計(jì)的共同趨勢,也是鴻蒙設(shè)計(jì)未來的重要發(fā)展方向。
         

         

        1. 蘋果 iOS26/VisionOS:空間容器化的先驅(qū)

        image.png 
        蘋果 iOS26 的核心革新之一,是將 “空間” 與 “容器” 概念具像化,打破導(dǎo)航 / 操作按鈕與頁面的融合關(guān)系,將其置于獨(dú)立的懸浮空間中;這一設(shè)計(jì)最早應(yīng)用于 VisionOS,不僅讓跨端適配更簡單,也為用戶適應(yīng) XR 設(shè)備的視覺風(fēng)格與操作邏輯做鋪墊。
         

        2. Android Material Design 3:導(dǎo)航操作的容器化趨勢

         

        image.png

        安卓的 Material Design 3 也明確體現(xiàn)出導(dǎo)航與操作的容器化趨勢,通過獨(dú)立容器承載導(dǎo)航與操作元素,減少對內(nèi)容展示空間的占用,提升跨端適配的靈活性。
         

        3. 鴻蒙設(shè)計(jì)的未來方向:融合容器化與懸浮化

         

        image.png

        容器化與懸浮化的設(shè)計(jì)邏輯,在跨端適配中具備顯著優(yōu)勢:無需為導(dǎo)航刻意劃分獨(dú)立空間,元素懸浮于內(nèi)容之上,讓導(dǎo)航與內(nèi)容的布局適配更高效。未來鴻蒙的設(shè)計(jì)體系,必然會融合這一趨勢,設(shè)計(jì)師提前適應(yīng)并應(yīng)用該理念,將掌握未來跨端適配的主動權(quán)。
         

        結(jié)語:全場景設(shè)計(jì)思維,讓復(fù)雜回歸簡潔

         
        形式追隨功能,而功能的實(shí)現(xiàn)始終取決于底層技術(shù)的發(fā)展。從 PC 到移動互聯(lián)網(wǎng),再到萬物互聯(lián),應(yīng)用形態(tài)、操作系統(tǒng)、設(shè)備種類都在不斷 “復(fù)雜化”,而鴻蒙系統(tǒng)的到來,讓多端一體化設(shè)計(jì)從理念變?yōu)楝F(xiàn)實(shí)。
         
        對于設(shè)計(jì)師而言,未來的核心命題,是在復(fù)雜的多設(shè)備、多場景中尋找設(shè)計(jì)的簡潔性:如何在提供豐富功能與連續(xù)體驗(yàn)的同時,讓用戶感受到視覺與交互的秩序與統(tǒng)一?如何降低多端適配的設(shè)計(jì)與開發(fā)成本?
         
        全場景設(shè)計(jì)思維,正是解決這一命題的關(guān)鍵鑰匙。它要求設(shè)計(jì)師跳出單端設(shè)計(jì)的局限,以 “人” 為核心,以鴻蒙的技術(shù)框架為基礎(chǔ),從底層規(guī)則、應(yīng)用架構(gòu)、模塊細(xì)節(jié)三個層面,打造一套統(tǒng)一、靈活、可適配的全場景設(shè)計(jì)系統(tǒng)。
         
        萬物互聯(lián)的時代,設(shè)計(jì)的邊界正在不斷拓展,而唯有重構(gòu)思維、緊跟技術(shù)趨勢,才能讓設(shè)計(jì)始終成為產(chǎn)品體驗(yàn)的核心驅(qū)動力。
         

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

         

        image.png

         

        2016 年 UI 設(shè)計(jì)趨勢深度分析 | 蘭亭妙微設(shè)計(jì)

        濤濤 行業(yè)趨勢

        進(jìn)入 2016 年,UI 設(shè)計(jì)行業(yè)在體驗(yàn)設(shè)計(jì)領(lǐng)域涌現(xiàn)出諸多全新設(shè)計(jì)元素與表現(xiàn)手法,彩色投影、雙色調(diào)漸變等設(shè)計(jì)形式在各大設(shè)計(jì)社區(qū)的出現(xiàn)頻率持續(xù)攀升,逐漸成為行業(yè)新的設(shè)計(jì)風(fēng)向。蘭亭妙微設(shè)計(jì)深耕 UI 設(shè)計(jì)領(lǐng)域,始終關(guān)注行業(yè)前沿趨勢變化,為了讓設(shè)計(jì)實(shí)踐更具方向感,也為給行業(yè)同仁提供參考,我們對 2016 年 UI 設(shè)計(jì)的主流流行趨勢進(jìn)行系統(tǒng)梳理與深度分析,提煉出當(dāng)下最具實(shí)踐價值的設(shè)計(jì)思路與手法。

        為什么AI目前搞不定UI界面設(shè)計(jì)?

        清陽 行業(yè)趨勢

        既然 AI 已能通過文字直接生成圖片,卻仍無法獨(dú)立完成專業(yè)的 UI 界面設(shè)計(jì),核心原因在于其在理解復(fù)雜業(yè)務(wù)邏輯、創(chuàng)造性表達(dá)與情感傳遞上存在天然局限性,這也讓我們清晰認(rèn)知到 AI 并非萬能。蘭亭妙微 UI 設(shè)計(jì)公司在實(shí)踐中發(fā)現(xiàn),AI 雖能針對設(shè)計(jì)中的顯性問題,為優(yōu)化工作提供數(shù)據(jù)化的專業(yè)建議,但在深層設(shè)計(jì)維度仍有明顯短板。以 58 同城商業(yè)地產(chǎn)頁面設(shè)計(jì)稿的評審工作為例,AI 可精準(zhǔn)識別設(shè)計(jì)中的亮點(diǎn)與待優(yōu)化點(diǎn):

        在人工智能技術(shù)飛速發(fā)展的當(dāng)下,從自動駕駛到智能助手,AI 的應(yīng)用觸角已延伸至各行各業(yè)。但在 UI 界面設(shè)計(jì)領(lǐng)域,盡管行業(yè)對 AI 寄予厚望,其實(shí)際落地效果卻遠(yuǎn)未達(dá)到預(yù)期。本文將從 AI 對界面設(shè)計(jì)的實(shí)際影響、落地過程中面臨的核心挑戰(zhàn)出發(fā),結(jié)合 Uizard 工具的實(shí)際應(yīng)用案例展開分析,并探討 AI 時代下設(shè)計(jì)師的核心競爭力提升路徑。
         

        一、AI 為界面設(shè)計(jì)帶來的三大變革

         
        AI 技術(shù)對 UI 界面設(shè)計(jì)的影響是全方位的,它并非簡單的工具升級,而是從效率、體驗(yàn)、決策三個維度,為設(shè)計(jì)工作帶來了全新的機(jī)遇與可能性。
         

        設(shè)計(jì)效率的跨越式提升

         
        AI 能高效自動化各類重復(fù)性設(shè)計(jì)任務(wù),比如快速完成頁面布局生成、品牌配色方案匹配、標(biāo)準(zhǔn)化組件排布等,將設(shè)計(jì)師從機(jī)械性工作中解放出來,使其能將更多精力聚焦于創(chuàng)意與策略設(shè)計(jì)。
         

        產(chǎn)品個性化體驗(yàn)的深度增強(qiáng)

         
        通過分析用戶的行為軌跡、操作偏好與使用場景,AI 可實(shí)現(xiàn)界面的個性化定制,比如為不同用戶群體推送適配的功能入口、調(diào)整信息展示優(yōu)先級,讓產(chǎn)品界面更貼合個體需求,大幅提升用戶體驗(yàn)。
         

        設(shè)計(jì)決策的科學(xué)化支撐

         
        AI 能夠整合分析海量的用戶反饋數(shù)據(jù)、行業(yè)設(shè)計(jì)趨勢與市場競品信息,為設(shè)計(jì)師提供數(shù)據(jù)驅(qū)動的設(shè)計(jì)建議,幫助設(shè)計(jì)師跳出主觀判斷,讓設(shè)計(jì)決策更具科學(xué)性與合理性。
         

        二、AI 在 UI 界面設(shè)計(jì)中的三大核心挑戰(zhàn)

         
        盡管 AI 為界面設(shè)計(jì)帶來了諸多便利,但在實(shí)際落地應(yīng)用中,其仍面臨著難以突破的核心挑戰(zhàn),這些挑戰(zhàn)也決定了當(dāng)前 AI 無法獨(dú)立完成專業(yè)的 UI 界面設(shè)計(jì)。
         

        難以理解復(fù)雜的業(yè)務(wù)邏輯與隱性需求

         
        AI 對需求的理解高度依賴顯性的文字輸入,無法捕捉業(yè)務(wù)背后的隱性規(guī)則、商業(yè)邏輯與合規(guī)要求,更難以洞察用戶的潛在需求。比如在垂直領(lǐng)域的界面設(shè)計(jì)中,AI 無法精準(zhǔn)把握行業(yè)特有的業(yè)務(wù)流程與操作習(xí)慣,易出現(xiàn) “技術(shù)正確但業(yè)務(wù)失焦” 的設(shè)計(jì)結(jié)果。
         

        缺失創(chuàng)造性與情感表達(dá)能力

         
        UI 界面設(shè)計(jì)不僅是功能的實(shí)現(xiàn),更是情感與美學(xué)的表達(dá),需要貼合品牌調(diào)性、契合用戶心智,甚至傳遞獨(dú)特的設(shè)計(jì)理念。而當(dāng)前的 AI 本質(zhì)是對訓(xùn)練數(shù)據(jù)的模式重組,而非原創(chuàng)生成,既無法突破既有設(shè)計(jì)語言體系實(shí)現(xiàn)顛覆性創(chuàng)新,也無法精準(zhǔn)傳遞設(shè)計(jì)中的情感溫度,難以滿足用戶對界面美學(xué)與情感共鳴的需求。
         

        無法靈活適配動態(tài)的設(shè)計(jì)標(biāo)準(zhǔn)

         
        不同行業(yè)、不同品牌有著各自專屬的設(shè)計(jì)標(biāo)準(zhǔn)與使用習(xí)慣,且 Material Design、Apple Human Interface Guidelines 等通用設(shè)計(jì)規(guī)范也在持續(xù)迭代。AI 的模型更新存在天然滯后性,對本地化設(shè)計(jì)習(xí)慣與文化語境的理解也存在偏差,難以靈活適配動態(tài)變化的設(shè)計(jì)標(biāo)準(zhǔn),更易出現(xiàn)違反無障礙設(shè)計(jì)規(guī)范、跨文化語義誤讀等問題。
         

        三、Uizard:AI 設(shè)計(jì)工具的實(shí)際應(yīng)用案例分析

         
        Uizard 作為一款主流的 AI 驅(qū)動型 UI 設(shè)計(jì)在線工具,依托人工智能技術(shù)實(shí)現(xiàn)了設(shè)計(jì)流程的加速,能為設(shè)計(jì)師提供從原型生成到設(shè)計(jì)評審的全流程輔助。以下結(jié)合其在不同設(shè)計(jì)階段的應(yīng)用,解析 AI 設(shè)計(jì)工具的實(shí)際表現(xiàn)與優(yōu)劣勢。

         

        原型設(shè)計(jì):快速實(shí)現(xiàn)從草圖到可交互原型的轉(zhuǎn)化

        image.png

        image.png

        Uizard 的原型設(shè)計(jì)功能,可通過識別手繪草圖、現(xiàn)有設(shè)計(jì)截圖中的設(shè)計(jì)元素,快速將其轉(zhuǎn)換為標(biāo)準(zhǔn)化的數(shù)字界面元素,生成可交互的初步原型。
         
        例如,設(shè)計(jì)師為 58 同城商業(yè)地產(chǎn)板塊設(shè)計(jì)移動端大類頁面時,僅需向 Uizard 明確設(shè)計(jì)需求:頭部導(dǎo)航包含返回、搜索、消息功能,入口金剛區(qū)以圖標(biāo)形式展示租賃商鋪、商業(yè)轉(zhuǎn)讓等 10 個功能,下方搭配包含圖片、標(biāo)題、標(biāo)簽、價格的推薦列表,并選擇高精度生成模式,AI 即可在幾分鐘內(nèi)完成初步的界面原型生成,大幅縮短了從草圖到數(shù)字原型的轉(zhuǎn)化時間,讓設(shè)計(jì)師能快速驗(yàn)證設(shè)計(jì)概念。
         

        設(shè)計(jì)評審:自動化檢測問題,提供標(biāo)準(zhǔn)化優(yōu)化建議

        image.png

        在設(shè)計(jì)評審階段,Uizard 可基于設(shè)計(jì)原則與行業(yè)最佳實(shí)踐,對上傳的設(shè)計(jì)稿進(jìn)行 AI 分析,自動識別并指出設(shè)計(jì)中的顯性問題,為設(shè)計(jì)優(yōu)化提供數(shù)據(jù)化建議。
         
        以 58 同城商業(yè)地產(chǎn)頁面設(shè)計(jì)稿的評審結(jié)果為例,AI 能精準(zhǔn)識別設(shè)計(jì)中的亮點(diǎn)與不足:
         
        設(shè)計(jì)亮點(diǎn):圖標(biāo)風(fēng)格統(tǒng)一清晰,助力用戶快速識別功能;合理利用大小與色彩建立視覺層次,區(qū)分不同信息模塊;全界面采用統(tǒng)一的藍(lán)色配色,保持品牌視覺一致性;房產(chǎn)列表信息布局清晰,便于用戶快速掃描關(guān)鍵內(nèi)容;完成中文本地化適配,貼合目標(biāo)用戶的使用習(xí)慣。
         
        待優(yōu)化點(diǎn):深藍(lán)色背景與藍(lán)色文本對比度不足,影響可讀性,尤其對視覺障礙用戶不友好;導(dǎo)航欄圖標(biāo)未搭配文字標(biāo)簽,增加用戶的理解成本;屬性列表按鈕樣式不統(tǒng)一,易造成用戶體驗(yàn)混亂;金剛區(qū)圖標(biāo)數(shù)量過多,易讓用戶產(chǎn)生選擇困惑;房產(chǎn)列表的文本與圖像周圍留白不足,降低了界面的可讀性與美觀度。
         
        不難發(fā)現(xiàn),Uizard 能高效檢測布局、配色、組件等顯性設(shè)計(jì)問題,但無法對設(shè)計(jì)背后的業(yè)務(wù)策略與用戶心智匹配度進(jìn)行評估。
         

        焦點(diǎn)預(yù)測:基于數(shù)據(jù)優(yōu)化界面視覺布局

        image.png

        Uizard 的焦點(diǎn)預(yù)測功能,融合了眼動追蹤數(shù)據(jù)與機(jī)器學(xué)習(xí)算法,能精準(zhǔn)預(yù)測用戶在界面上的注視點(diǎn),用紅色標(biāo)注高關(guān)注度區(qū)域、藍(lán)色標(biāo)注低關(guān)注度區(qū)域,為界面布局優(yōu)化提供核心依據(jù)。
         
        比如在電商產(chǎn)品詳情頁設(shè)計(jì)中,設(shè)計(jì)師可通過焦點(diǎn)預(yù)測功能,預(yù)判用戶的視覺注視模式,據(jù)此調(diào)整價格、優(yōu)惠、購買按鈕等核心信息的布局,確保關(guān)鍵信息能快速吸引用戶注意力,不僅能提升用戶體驗(yàn),更能有效促進(jìn)產(chǎn)品轉(zhuǎn)化率。這一功能讓設(shè)計(jì)優(yōu)化從 “主觀判斷” 走向 “數(shù)據(jù)驅(qū)動”,但僅能針對視覺焦點(diǎn)進(jìn)行分析,無法兼顧交互邏輯與用戶操作習(xí)慣。
         
        整體來看,Uizard 這類 AI 設(shè)計(jì)工具的核心價值在于 “快速探索設(shè)計(jì)方向、壓縮基礎(chǔ)設(shè)計(jì)周期”,適合用于概念稿生成、初步原型驗(yàn)證與顯性設(shè)計(jì)問題檢測,但生成的設(shè)計(jì)稿多偏向 “概念級”,邏輯嚴(yán)謹(jǐn)度與細(xì)節(jié)打磨不足,無法直接用于正式項(xiàng)目評審,仍需設(shè)計(jì)師進(jìn)行后續(xù)的優(yōu)化與完善。
         

        四、AI 時代,設(shè)計(jì)師的核心競爭力提升路徑

         
        AI 的出現(xiàn)并非為了替代設(shè)計(jì)師,而是推動設(shè)計(jì)師向更專業(yè)、更具策略性的方向轉(zhuǎn)型。在 AI 時代,設(shè)計(jì)師需打造 AI 難以替代的核心能力,才能適應(yīng)行業(yè)的發(fā)展與變化。
         

        深耕業(yè)務(wù),成為 “業(yè)務(wù)與設(shè)計(jì)的橋梁”

         
        深入理解業(yè)務(wù)邏輯、行業(yè)規(guī)則與用戶全旅程需求,是設(shè)計(jì)師的核心競爭力之一。設(shè)計(jì)師需穿透業(yè)務(wù)指標(biāo)的表象,洞察真實(shí)的用戶痛點(diǎn)與商業(yè)增長杠桿,將業(yè)務(wù)需求轉(zhuǎn)化為貼合用戶體驗(yàn)的設(shè)計(jì)策略 —— 這一能力是依賴顯性輸入的 AI 難以企及的。
         

        提升創(chuàng)造性思維,打造原創(chuàng)設(shè)計(jì)能力

         
        AI 的設(shè)計(jì)輸出受限于訓(xùn)練數(shù)據(jù),而設(shè)計(jì)師的原創(chuàng)性與創(chuàng)造性思維是獨(dú)一無二的。設(shè)計(jì)師需持續(xù)提升自身的美學(xué)素養(yǎng)與創(chuàng)意能力,在遵循設(shè)計(jì)規(guī)范的基礎(chǔ)上,實(shí)現(xiàn)設(shè)計(jì)語言的創(chuàng)新,打造兼具功能性、美學(xué)性與情感性的原創(chuàng)設(shè)計(jì),讓設(shè)計(jì)更具獨(dú)特性與品牌辨識度。
         

        擁抱新技術(shù),實(shí)現(xiàn) “人機(jī)協(xié)同” 的設(shè)計(jì)模式

         
        設(shè)計(jì)師無需抗拒 AI 技術(shù),反而應(yīng)主動學(xué)習(xí)并掌握 Uizard、Figma AI 等主流 AI 設(shè)計(jì)工具的使用方法,理解其底層邏輯與能力邊界,將 AI 作為設(shè)計(jì)的輔助工具,讓 AI 承擔(dān)重復(fù)性、機(jī)械性的設(shè)計(jì)工作,自己則聚焦于創(chuàng)意構(gòu)思、策略設(shè)計(jì)與細(xì)節(jié)打磨,通過 “人機(jī)協(xié)同” 實(shí)現(xiàn)設(shè)計(jì)效率與設(shè)計(jì)質(zhì)量的雙重提升。
         

        結(jié)語

         
        當(dāng)前,AI 技術(shù)在 UI 界面設(shè)計(jì)領(lǐng)域的應(yīng)用仍處于初級階段,它能成為設(shè)計(jì)師高效的輔助工具,帶來設(shè)計(jì)效率的提升與設(shè)計(jì)模式的創(chuàng)新,但受限于業(yè)務(wù)理解、創(chuàng)造性與設(shè)計(jì)標(biāo)準(zhǔn)適配等方面的短板,始終無法獨(dú)立完成專業(yè)的 UI 界面設(shè)計(jì)。
         
        對于設(shè)計(jì)師而言,AI 時代的核心并非 “與 AI 競爭”,而是 “駕馭 AI”。唯有持續(xù)深耕業(yè)務(wù)、提升原創(chuàng)能力、擁抱新技術(shù),打造 AI 難以替代的核心競爭力,才能在人機(jī)協(xié)同的設(shè)計(jì)新范式中,始終占據(jù)主導(dǎo)地位,讓設(shè)計(jì)真正成為連接產(chǎn)品與用戶的核心紐帶。

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

         

        image.png

        2026 UI設(shè)計(jì)10大趨勢前瞻…這些設(shè)計(jì)方向要火

        清陽 行業(yè)趨勢

        2026年的UI設(shè)計(jì),不再強(qiáng)調(diào)嚴(yán)苛的視覺規(guī)則,而是更注重結(jié)合使用場景做出合理的設(shè)計(jì)選擇。

        設(shè)計(jì)師不再默認(rèn)選用極簡或極繁風(fēng)格,而是根據(jù)用戶需求、情感訴求以及產(chǎn)品的實(shí)際使用方式來設(shè)計(jì)。

        其中一個重大變化是,只要設(shè)計(jì)目的明確,人們對復(fù)雜設(shè)計(jì)的接受度大幅提升。

        界面可以層次感豐富或富有表現(xiàn)力,只要易于理解就是合理的設(shè)計(jì)。

        適配性是塑造2026年UI設(shè)計(jì)的另一核心趨勢。界面的響應(yīng)性不斷升級,不僅能適配屏幕尺寸,還能根據(jù)用戶的行為和偏好做出調(diào)整。

        動效、色彩與布局的設(shè)計(jì),不再只是為了裝飾界面,更是為了傳遞設(shè)計(jì)意圖。

        這些變化共同指向了一種更平衡的設(shè)計(jì)思路,讓視覺風(fēng)格與產(chǎn)品易用性同步發(fā)展、相輔相成。

        01 觸覺極致化和3D縱深感

        歷經(jīng)多年的扁平化界面設(shè)計(jì)后,2026年UI設(shè)計(jì)在視覺上的一大重要變化,是重新聚焦于設(shè)計(jì)的縱深感與質(zhì)感。

        通過分層布局、立體組件和細(xì)膩的三維元素,讓界面重新?lián)碛锌臻g維度。

        觸覺極致化并非讓界面變得雜亂無章、令人眼花繚亂,而是讓數(shù)字元素更具物理質(zhì)感和交互反饋感。

        按鈕設(shè)計(jì)看起來觸手可及,而非單純的符號;

        圖標(biāo)設(shè)計(jì)兼具重量感與質(zhì)感。

        這些細(xì)節(jié)能讓用戶無需額外說明,就能理解各元素的使用方式。

        渲染技術(shù)、產(chǎn)品性能和瀏覽器支持度的提升,讓設(shè)計(jì)師能輕松為界面添加3D效果,且不會拖慢產(chǎn)品運(yùn)行速度、影響產(chǎn)品的可訪問性。

        02 動態(tài)排版

        2026年的排版設(shè)計(jì)不再局限于靜態(tài)布局,為文字賦予動態(tài)效果的動態(tài)排版,正從純粹的裝飾元素,成為界面設(shè)計(jì)的核心組成部分。

        用戶滾動頁面時,標(biāo)題文字可能會拉伸、位移或做出其他響應(yīng);用戶點(diǎn)擊或懸停時,標(biāo)簽文字也會產(chǎn)生細(xì)微的動態(tài)變化。

        這些動效能清晰傳遞視覺焦點(diǎn)、層級或狀態(tài)的變化,且設(shè)計(jì)的核心是提升文字的可讀性,而非分散用戶注意力。

        合理運(yùn)用動態(tài)排版,能為界面賦予情感與韻律,讓產(chǎn)品呈現(xiàn)出更活潑、精致或趣味的氣質(zhì),同時也能幫助用戶更輕松地瀏覽復(fù)雜的界面布局。

        2026年,排版不再只是承載內(nèi)容的載體,更在塑造整體用戶體驗(yàn)中扮演著主動且關(guān)鍵的角色。

        03 柔和光影和雜志質(zhì)感

        在大膽且富有表現(xiàn)力的界面設(shè)計(jì)成為潮流的同時,受雜志排版啟發(fā)的柔和、簡約設(shè)計(jì)風(fēng)格也愈發(fā)受青睞。

        這一設(shè)計(jì)趨勢借鑒印刷雜志、攝影作品和高端出版物的設(shè)計(jì)思路,并將其適配應(yīng)用于數(shù)字產(chǎn)品設(shè)計(jì)中。

        柔和光影風(fēng)格的UI設(shè)計(jì),通過柔和的漸變、漫射的陰影和細(xì)膩的紋理營造溫暖的氛圍與視覺縱深感,同時又不會造成視覺雜亂。

        配色方案通常以低飽和度的中性色、暖白色為主,搭配少量點(diǎn)綴色,整體呈現(xiàn)出舒緩、簡潔且設(shè)計(jì)感十足的視覺效果。

        兼具雜志質(zhì)感的界面布局,注重留白設(shè)計(jì)、視覺韻律與清晰的層級劃分,讓內(nèi)容有足夠的呼吸空間,同時又能保持精致的設(shè)計(jì)感。

        這種設(shè)計(jì)思路特別適用于創(chuàng)意工具、內(nèi)容平臺和生活方式類產(chǎn)品——這類產(chǎn)品的設(shè)計(jì)氛圍與基調(diào)尤為重要。

        04 科幻風(fēng)未來感漸變

        在設(shè)計(jì)風(fēng)格的另一維度,科幻風(fēng)漸變在2026年的使用頻率大幅提升,尤其適用于科技類和實(shí)驗(yàn)性產(chǎn)品設(shè)計(jì)。

        這類界面常運(yùn)用高對比度、大膽的色彩搭配和富有氛圍感的光影效果,打造極具未來感的視覺體驗(yàn)。

        未來感漸變設(shè)計(jì)通常以深色為背景,搭配霓虹藍(lán)、亮紫、金屬色等鮮艷的電光色系,營造出極具電影質(zhì)感的視覺效果,現(xiàn)代感與沉浸感拉滿。

        合理運(yùn)用這類漸變設(shè)計(jì),既能凸顯產(chǎn)品的創(chuàng)新屬性,又不會讓整體設(shè)計(jì)顯得雜亂。

        這種設(shè)計(jì)風(fēng)格在深色模式下的表現(xiàn)尤為出色,發(fā)光的點(diǎn)綴元素與分層的光影效果,能為界面增添更多縱深感與氛圍感。

        漸變的應(yīng)用場景也不再局限于背景,如今還被廣泛運(yùn)用于按鈕、文字和交互元素的設(shè)計(jì)中。

        2026年,漸變不再只是裝飾性的設(shè)計(jì)元素,更在品牌塑造與視覺敘事中發(fā)揮著關(guān)鍵作用。

        05 新一代動態(tài)圖形

        2026年的動態(tài)圖形設(shè)計(jì)已完全融入UI設(shè)計(jì)體系,不再局限于基礎(chǔ)的懸停效果或加載動畫。

        動效設(shè)計(jì)被用于詮釋各界面元素之間的關(guān)聯(lián)、提供清晰的交互反饋,還能讓不同交互場景間的過渡更流暢。

        屏幕切換的動效設(shè)計(jì)目標(biāo)明確、銜接自然,動畫效果能根據(jù)用戶的操作做出實(shí)時且自然的響應(yīng)。微交互動效則無需過多文字說明,就能清晰展示系統(tǒng)狀態(tài)、引導(dǎo)用戶操作。新一代動態(tài)圖形設(shè)計(jì)的核心優(yōu)勢,在于動效的細(xì)膩度與一致性。

        動效不會刻意吸引注意力,而是通過讓界面更易懂、更好用,為整體使用體驗(yàn)賦能。

        隨著設(shè)計(jì)工具與框架的不斷升級,動態(tài)圖形設(shè)計(jì)已不再是特殊的可選設(shè)計(jì)元素,而是優(yōu)質(zhì)UI設(shè)計(jì)的必備組成部分。

        06 新極簡主義

        極簡主義在2026年依然是主流設(shè)計(jì)思路,但已進(jìn)化為更具表現(xiàn)力、更以人為本的新極簡主義。

        這種設(shè)計(jì)風(fēng)格保留了傳統(tǒng)極簡設(shè)計(jì)的清晰性與簡潔性,同時融入了溫暖的氛圍、細(xì)膩的質(zhì)感與靈活的設(shè)計(jì)手法。

        新極簡主義的界面設(shè)計(jì)摒棄強(qiáng)烈的色彩對比與刻板的網(wǎng)格布局,轉(zhuǎn)而采用柔和的色彩過渡、圓角元素與更具有機(jī)感的留白方式。

        字體的選擇經(jīng)過精心考量,不再追求中性化,細(xì)微的視覺細(xì)節(jié)為設(shè)計(jì)增添獨(dú)特個性,又不會造成視覺雜亂。

        這一設(shè)計(jì)趨勢的興起,反映出人們逐漸意識到:極簡主義并非只能營造冰冷、缺乏人情味的視覺效果。

        新極簡主義在追求設(shè)計(jì)清晰性的同時,將使用舒適度放在重要位置,打造出既高效又富有情感溫度的界面。

        07 敘事化設(shè)計(jì)

        敘事化設(shè)計(jì)已成為UI設(shè)計(jì)中愈發(fā)重要的組成部分,尤其適用于以教育、啟發(fā)用戶或引導(dǎo)用戶完成復(fù)雜操作為核心目標(biāo)的產(chǎn)品。

        2026年的界面設(shè)計(jì)不再追求一次性展示所有內(nèi)容,而是遵循敘事邏輯,隨用戶操作逐步呈現(xiàn)內(nèi)容。

        基于滾動的敘事設(shè)計(jì)、漸進(jìn)式信息展示和隨操作變化的視覺效果,讓用戶能以結(jié)構(gòu)化、沉浸式的方式瀏覽內(nèi)容。

        動效、色彩與布局的變化,能清晰傳遞內(nèi)容的推進(jìn)節(jié)奏與使用場景,讓用戶的交互過程成為一場連貫的體驗(yàn)之旅。

        這種設(shè)計(jì)思路將信息傳遞與用戶自然的探索習(xí)慣相結(jié)合,有效提升用戶對內(nèi)容的理解度與參與度。

        主打敘事化設(shè)計(jì)的界面,不會用繁多的選項(xiàng)讓用戶感到無從下手,而是為用戶提供清晰的操作指引與體驗(yàn)節(jié)奏。

        08 新復(fù)古風(fēng)格

        懷舊風(fēng)依舊在影響UI設(shè)計(jì),但在2026年,這種風(fēng)格呈現(xiàn)出更精致、更具設(shè)計(jì)意圖的新形態(tài)。

        新復(fù)古風(fēng)格將早期的數(shù)字美學(xué)與現(xiàn)代設(shè)計(jì)標(biāo)準(zhǔn)、技術(shù)相結(jié)合,做出全新的設(shè)計(jì)詮釋。

        像素紋理、復(fù)古配色方案和經(jīng)典的界面設(shè)計(jì)元素,通過高分辨率視覺效果、流暢的動效和自適應(yīng)布局被重新演繹,最終呈現(xiàn)的設(shè)計(jì)既帶有熟悉的懷舊感,又不會顯得過時。

        這一設(shè)計(jì)趨勢能引發(fā)用戶共鳴,因?yàn)樗鼘⑶楦杏洃浥c當(dāng)代的產(chǎn)品易用性巧妙結(jié)合。

        在致敬經(jīng)典的同時擁抱現(xiàn)代設(shè)計(jì),新復(fù)古風(fēng)格的界面營造出一種跨世代的視覺延續(xù)感,能吸引不同年齡段的用戶。

        09 舒緩式界面

        隨著數(shù)字產(chǎn)品的滲透度越來越高,設(shè)計(jì)中對用戶心理舒適度和長期使用體驗(yàn)的重視程度也不斷提升。

        舒緩式界面設(shè)計(jì)將可預(yù)測性、可訪問性和情感舒適度放在首位,而非追求持續(xù)的視覺刺激。

        這類界面會減少不必要的通知提醒、降低視覺干擾,且謹(jǐn)慎使用動效;配色方案的選擇以提升使用舒適度為核心,布局設(shè)計(jì)則注重一致性與清晰性。

        舒緩式界面設(shè)計(jì)對生產(chǎn)力工具、健康類平臺和用戶日常高頻使用的應(yīng)用尤為重要。

        2026年,尊重用戶的注意力,已逐漸成為評判設(shè)計(jì)品質(zhì)的重要標(biāo)準(zhǔn)。

        10 手勢交互設(shè)計(jì)

        隨著觸控技術(shù)、運(yùn)動傳感器和空間計(jì)算技術(shù)的不斷發(fā)展,手勢交互設(shè)計(jì)的應(yīng)用愈發(fā)廣泛。

        在許多界面中,滑動、拖拽、長按和多點(diǎn)觸控等手勢操作,正逐步取代傳統(tǒng)的可視化控件。

        合理的手勢交互設(shè)計(jì)能減少視覺雜亂,打造更流暢的交互模式,但這需要設(shè)計(jì)師做好新手引導(dǎo)與交互反饋設(shè)計(jì),確保手勢操作的易發(fā)現(xiàn)性與可訪問性。

        2026年,成功的手勢交互界面設(shè)計(jì),都能在保證直觀易用的同時,兼顧設(shè)計(jì)的清晰性。

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

        最后

        優(yōu)秀的UI設(shè)計(jì),能在表現(xiàn)力與克制感、創(chuàng)新性與易用性、美學(xué)設(shè)計(jì)與人文共情之間找到完美平衡。

        設(shè)計(jì)師不僅關(guān)注界面的視覺效果,更重視用戶的使用感受,才能打造出超越表面視覺吸引力、引發(fā)用戶深度共鳴的產(chǎn)品體驗(yàn)

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

         

        image.png

        為什么 B 端產(chǎn)品的步驟條表單越來越少

        清陽 行業(yè)趨勢

        今天蘭亭妙微UI設(shè)計(jì)公司來和大家聊聊在 B 端設(shè)計(jì)當(dāng)中十分基礎(chǔ),但是爭議越來越大的組件:步驟條

        因?yàn)樵谶^去很長一段時間里,步驟條幾乎是 B 端復(fù)雜表單的“標(biāo)配”,只要遇到信息量大的任務(wù),設(shè)計(jì)師的第一反應(yīng)往往是:太長了,用步驟條切分一下吧;產(chǎn)品經(jīng)理設(shè)計(jì)原型也是:邏輯復(fù)雜了,步驟條來一下吧。

        但是在 2026 年的今天,我們重新在看很多表單時,經(jīng)常會出現(xiàn)濫用表單的情況,而很多高效的 SaaS 產(chǎn)品正在讓步驟條退場,取而代之的時更扁平、直觀的單頁交互。

        為什么會出現(xiàn)這種變化?我們在設(shè)計(jì)表單時,到底該如何抉擇?今天我們就來深入討論一下。

        一、步驟條的“舒適區(qū)”

        首先,在交互設(shè)計(jì)初期,我們需要承認(rèn)步驟條確實(shí)做出了很多貢獻(xiàn)。在交互設(shè)計(jì)的理論當(dāng)中,步驟條的核心價值在于“降低認(rèn)知負(fù)荷”。

        它利用的就是心理學(xué)中的“組塊化”原理,將一個龐大的任務(wù)(比如 50 個填寫項(xiàng))拆解為若干個小任務(wù)(Step 1、Step 2、Step 3)。

        這種邏輯非常線性,同時能夠降低用戶的理解成本,通過步驟引導(dǎo)用戶,避免了他們在復(fù)雜的流程中迷路,所以最初在 C 端產(chǎn)品當(dāng)中經(jīng)常使用。

        同樣這樣就造成了很多設(shè)計(jì)師的路徑依賴:只要表單長,就用步驟條,產(chǎn)品經(jīng)理的視角也是如此

        二、B 端場景下的“水土不服”

        然而,這種線性邏輯遇到復(fù)雜的 B 端業(yè)務(wù)時,問題就會出現(xiàn)。

        因?yàn)?B 端通常都是專家型用戶,他們在處理業(yè)務(wù)時,需要的往往不是“保姆式的引導(dǎo)”,而是“全局的掌控感”。

        步驟條在 B 端復(fù)雜場景下,存在三個致命的體驗(yàn)缺點(diǎn):

        1. 全局感的缺失

        這是最嚴(yán)重的問題。想象一下,一個采購員正在創(chuàng)建一個復(fù)雜的入庫單,如果使用步驟條,他必須填完基礎(chǔ)信息點(diǎn)擊下一步,才能看到物料明細(xì)。

        但在實(shí)際業(yè)務(wù)中,他可能需要看著“物料明細(xì)”的種類,反過來去修改“基礎(chǔ)信息”里的倉庫類型。

        步驟條這時候就是一堵墻,切斷了信息之間的聯(lián)系。用戶被迫在“上一步”和“下一步”之間反復(fù)橫跳,導(dǎo)致使用步驟條表單異常痛苦,極大地降低了錄入效率。

        2. 錄入流的中斷

        B 端的高效錄入講究的是 連貫、一氣呵成,通常需要高效的無鼠標(biāo)快速操作。

        而步驟條的每一次“下一步”點(diǎn)擊,本質(zhì)上都是一次系統(tǒng)級的強(qiáng)打斷,它強(qiáng)制用戶從輸入的心流中抽離出來,停下手中的動作去尋找按鈕、等待頁面校驗(yàn)或刷新。對于每天要處理上百個表單的業(yè)務(wù)員來說,這種高頻的中斷會成倍放大操作的疲勞感。

        3. 修改成本高昂

        在傳統(tǒng)的單頁長表單中,發(fā)現(xiàn)數(shù)據(jù)填錯,用戶只需鼠標(biāo)滾動回去修改即可,所見即所得。

        但在步驟條模式下,修改成本被無限放大:用戶可能需要連點(diǎn)兩次“上一步”,修改完成后,再連點(diǎn)兩次“下一步”才能回到原位。

        更糟糕的是,B 端表單不僅用于“新建”,更常用于數(shù)據(jù)的“二次編輯”。如果是為了修改最后一步的某個小字段,用戶卻不得不把前面的步驟全部重新點(diǎn)擊過一遍(甚至可能觸發(fā)連環(huán)的必填項(xiàng)校驗(yàn)攔截)。在編輯場景下,步驟條帶來的交互冗余是成倍增加的。

        三、趨勢變革與使用決策

        目前我們看到越來越多的系統(tǒng),正在提出一個新的要求:“非必要,不步驟”。

        B 端產(chǎn)品開始轉(zhuǎn)向“長表單 + 錨點(diǎn)導(dǎo)航”的模式。這種現(xiàn)象我認(rèn)為其實(shí)就是在:把業(yè)務(wù)的處理掌控權(quán),徹底交還給用戶。

        全局視角:目前其實(shí)最常見的做法就是將基礎(chǔ)信息、詳細(xì)配置、關(guān)聯(lián)數(shù)據(jù)等所有模塊,展示到一個空間當(dāng)中,配合頁面當(dāng)中的 錨點(diǎn)定位,用于告訴用戶頁面的整體情況,這樣就能消除未知的焦慮。

        隨機(jī)存取:在表單層面,我們希望徹底解放線性順序的束縛。用戶不再受制于系統(tǒng),可以根據(jù)手頭掌握的資料靈活決定錄入節(jié)奏,對于很多當(dāng)前信息缺失的情況,我們可以提供更多新增的入口,減少用戶跳轉(zhuǎn)。

        同時需要考慮草稿箱、暫存等功能,給表單提供非線性的操作路徑,才能契合真實(shí)的復(fù)雜業(yè)務(wù)場景。

        沉浸式心流: 通過上下翻頁替代步驟跳轉(zhuǎn),我們發(fā)現(xiàn)在單一頁面中,能夠使用戶更容易沉浸心流,專注填寫。

        難道就不能用步驟條了?

        作為設(shè)計(jì)師,我們需要明確步驟條的使用決策。

        在決定使用哪種組件時,先問自己兩個問題:

        Q1:后續(xù)步驟的內(nèi)容,是否與前一步內(nèi)容會有依賴?是 → 使用步驟條。(比如:Step 1 選了“企業(yè)”,Step 2 才出現(xiàn)“營業(yè)執(zhí)照”上傳入口;選了“個人”,Step 2 則是“身份證”。前后有強(qiáng)邏輯耦合。)否 → 使用單頁錨點(diǎn)。(比如:填寫入職信息,基本信息和教育經(jīng)歷之間沒有邏輯依賴,只是信息的類目不同。)

        Q2:這個任務(wù)是否是一次性的、不可逆的?是 → 使用步驟條。(比如:大額轉(zhuǎn)賬匯款、極低頻的系統(tǒng)初始化向?qū)?,需要用戶步步確認(rèn),謹(jǐn)慎操作)否 → 使用單頁錨點(diǎn)。(比如:日常的高頻數(shù)據(jù)錄入、編輯商品詳情信息)

        寫在最后

        其實(shí)在我看來,很多系統(tǒng)“去步驟條化”,本質(zhì)上是要求設(shè)計(jì)師跳出組件庫的舒適區(qū),重新深挖業(yè)務(wù)場景。

        作為 B 端設(shè)計(jì)師,我們不能成為盲目拖拽組件的執(zhí)行者,而要在業(yè)務(wù)效率與交互心智之間找到最佳平衡點(diǎn),這才是我們不可替代的價值。

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

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

         

        image.png

        新中式設(shè)計(jì)的九大細(xì)分風(fēng)格,解鎖東方美學(xué)的現(xiàn)代表達(dá)

        濤濤 行業(yè)趨勢

        步入 21 世紀(jì),文化自信的覺醒與全球化的深度融合,讓新中式設(shè)計(jì)從傳統(tǒng)美學(xué)的現(xiàn)代演繹,蛻變?yōu)楫?dāng)下主流的審美趨勢。從故宮文創(chuàng)的破圈走紅,到《黑神話:悟空》的全球圈粉,新中式早已超越單一的設(shè)計(jì)風(fēng)格,成為兼具文化底蘊(yùn)與時代活力的現(xiàn)象級符號,真正詮釋了 “萬物皆可新中式” 的美學(xué)魅力。

        日歷

        鏈接

        個人資料

        存檔