99久久精品国产高清一区二区|91色综合|久久久久97国产|亚洲精品WWW久久久久久|99热这里只有成人精品国产|亚洲国产欧美目韩成人综合|国产一区二区三区精品视频|久久久久国产精品麻豆|亚洲综合精品香蕉久久网97|日韩一区国产二区欧美三区|中文字幕一区婷婷久久|亚洲精品中文字幕久久久久下载

首頁

人工智能正在重塑用戶界面——你注意到最大的變化了嗎?

杰睿

告別命令,迎接意圖

我們與軟件交互的方式絕非一成不變。有時,它是緩慢的演變,有時則是突飛猛進。如今,越來越多的設計先鋒,包括維塔利·弗里德曼,艾米麗·坎貝爾格雷格·努德爾曼正在剖析人工智能應用中的新興模式,描繪出永不停歇的格局。乍一看,這似乎只是又一次炒作周期,就像圍繞著每一個新技術趨勢的那種令人窒息的熱情。但退一步來看,一個更深層次的轉變顯而易見:我們與數(shù)字系統(tǒng)的互動不僅在發(fā)生變化;它們的本質也在發(fā)生轉變。

想象一下從膠片相機到數(shù)碼攝影的轉變——突然之間,用戶不再需要了解曝光時間或仔細定量膠卷。他們只需點擊一個按鈕,剩下的就交給設備處理了。

人工智能正在為UI設計帶來類似的轉變,讓我們擺脫僵硬、循序漸進的流程,走向流暢、直觀的工作流程。交互的本質正在發(fā)生轉變,正如Jakob Nielsen最近在其文章中強調的那樣,這種演變需要我們全神貫注。他闡述了一個至關重要的見解:

“有了新的人工智能系統(tǒng),用戶不再告訴計算機該做什么。而是用戶告訴計算機他們想要什么結果。”

這不僅僅是一場技術變革,更是一場哲學變革。它挑戰(zhàn)了長期以來關于控制、自主性和人機協(xié)作的假設。我們曾經(jīng)一絲不茍地掌控著每一步,而現(xiàn)在,我們能夠定義意圖,并讓人工智能決定最佳的前進路徑。這種轉變的意義深遠,堪比從命令行界面圖形用戶界面的轉變,對于 UI 設計師來說,它既是機遇,也是挑戰(zhàn)。

點擊、滑動、詢問:交互方式正在演變

但在深入探討人工智能如何重塑交互之前,我們有必要反思一下迄今為止最直觀的界面是如何定義的。1985 年,埃德溫·哈金斯詹姆斯·霍蘭唐納德·諾曼發(fā)表了一篇關于直接操作界面的開創(chuàng)性論文。諾曼后來在《設計心理學》中定義了一些最廣為接受的設計原則,而哈金斯則率先提出了分布式認知的概念。但在 1985 年,他們與霍蘭一起抓住了設計史上的一個關鍵時刻,即直接操作逐漸成為一種主導策略。

直接操作是一種交互方式,用戶使用物理、增量和可逆的操作對顯示的感興趣對象進行操作,其效果立即在屏幕上可見。NN /g

但這簡單來說意味著什么呢?比如,你需要將一個文件從一個文件夾移動到另一個文件夾——這是一個典型的直接操作的例子——你看到這個文件,抓住它,然后把它移動到你想要的位置。

首先,你需要明確目標 (1)。然后,在當前文件夾中找到文件,并決定將其拖動到新位置 (2)。點擊并按住文件,將其移動到屏幕上,最后將其拖放到目標文件夾中 (3)。

如果你不小心把它放在了錯誤的地方,你會立即看到結果,調整方法,然后再次拖動它,直到它落到你想要的位置。這種交互方式感覺很直觀,因為它最大限度地減少了認知投入——系統(tǒng)會實時響應你的操作,強化了直接參與和掌控的感覺。

這個過程越順暢,交互感覺就越自然、越令人滿意。

將顯示縮放圖像
macOS 系統(tǒng)上兩個 Finder 窗口的屏幕截圖。左側窗口打開的是“Documents”文件夾,其中顯示了各種文件和文件夾,包括“Kate-comments”,它被突出顯示并被拖動。右側窗口打開的是“Measuring Usability”文件夾,其中顯示了“2014–2–3-MeasuringUX.pptx”和“ROI for Usability…dition.pdf”等文件。藍色虛線箭頭表示“Kate-comments”正在從“Documents”文件夾移動到“Measuring Usability”。
在 MacOS 上使用直接操作移動文件涉及將該文件從源文件夾拖放到目標文件夾。來源

雖然縮短距離可以提高可用性,但真正定義直接操控的是參與度。作者寫道:

“最能體現(xiàn)直接操縱的系統(tǒng)都給人一種定性的感覺,即人們直接參與對對象的控制——不是通過程序,不是通過計算機,而是通過我們的目標和意圖的語義對象。”

幾十年來,直接操控一直是設計的基本原則。然而,隨著我們向人工智能驅動的系統(tǒng)過渡,我們必須思考這些原則如何演變——以及它們何時會被目標導向的交互所取代。

現(xiàn)在,想想Windows Photos 的 AI 驅動“擦除”功能。假設你給你的狗狗拍了一張照片,但照片里有一條不想要的牽引繩。你不用像十年前那樣手動選擇像素并精心編輯,而是只需選中牽引繩,剩下的交給 AI 處理即可。系統(tǒng)理解你的目標——移除牽引繩——并執(zhí)行最佳解決方案。

將顯示縮放圖像
Windows 照片界面的 GIF 動圖演示了“擦除”功能。用戶從圖片中選擇并移除了一條狗的皮帶。
Windows 照片,來源

這種交互仍然需要一定程度的操作,因為你必須指定要擦除的對象,但不同之處在于,你是在優(yōu)化請求,而不是直接修改像素。你不再需要一絲不茍地編輯每個細節(jié),而是與系統(tǒng)協(xié)作,以達到預期的效果。這種轉變標志著 UI 設計的根本性變革。

Desolda 與其他研究人員基于諾曼的“執(zhí)行鴻溝”和“評估鴻溝”理論,構建了一個模型,捕捉到了這種動態(tài)。與簡單的直接操作(例如在文件夾之間拖動文件,操作需要逐步展開)不同,AI 交互需要更流暢、更迭代的過程。用戶清晰地表達他們的目標,但并非手動執(zhí)行每一步,而是與系統(tǒng)協(xié)作,優(yōu)化輸入,并在 AI 進行動態(tài)解釋、調整和響應時對其進行引導。

將顯示縮放圖像
概念圖展示了用戶與人工智能系統(tǒng)之間的交互,突出了“執(zhí)行鴻溝”和“評估鴻溝”。該圖展示了用戶如何形成意圖,指定操作(重新配置、干預或詢問),并通過人工智能系統(tǒng)執(zhí)行這些操作。人工智能系統(tǒng)感知輸入、處理并進行調整。然后,用戶通過解釋步驟(澄清和輸出)對輸出進行評估。
來源

直接操縱的持續(xù)相關性

人工智能或許正在重塑我們與科技互動的方式,但直接操控卻不會消失。即使在基于意圖的界面時代,用戶仍然需要與人工智能系統(tǒng)互動,用正確的輸入引導它們,將人類的目標轉化為機器可讀的指令。設計人工智能體驗并非要取代直接操控,而是要增強它,在既有模式的基礎上疊加新的交互模型,使交互更流暢、更直觀,并最終增強其功能。

為了設計無縫的人工智能體驗,我們需要識別并構建熟悉的模式。

例如,在許多 AI 應用中,開放式提示框可以充當破冰船,幫助用戶開啟對話。這種方法建立在人們熟悉的輸入框模式之上,幾十年來,該模式一直是 UI 的標準組件,如今,它又扮演著新的角色。無論是在 ChatGPT 中輸入問題,還是指示設計工具生成布局,這種方法都能提供靈活性,同時以直觀易懂的方式引導用戶意圖。

將顯示縮放圖像
各種 AI 聊天機器人和助手界面的拼貼畫,展示了不同的開放式輸入模式。圖片包含來自 ChatGPT、Claude 和 Fin 等 AI 驅動工具的多個文本輸入字段。一些界面帶有占位符,例如“提問”或“指定寫作任務”,而其他界面則顯示示例問題或答案。
打開輸入模式示例,來源

這種方法不僅限于交互模式——它也擴展到用戶體驗框架。

例如,Evan Sunwall 提出了“Promptframes”的概念,通過將即時寫作和生成式 AI 融入設計流程,作為傳統(tǒng)線框圖的補充。其目標是通過在工作流程的早期階段融入 AI 驅動的內容生成,提高內容保真度并加速用戶測試。然而,這一概念建立在線框圖的基礎上,這進一步強調了理解傳統(tǒng)用戶體驗結構對于有效設計 AI 驅動體驗的重要性。

最后的想法

不需要霓虹燈“人工智能驅動”標簽;它應該無縫地融入用戶旅程,感覺就像意圖的自然延伸。

Netflix 的推薦系統(tǒng)為例。它不會打斷你的體驗,提醒你它正在使用高級算法。它也不會要求你配置一堆設置。相反,它會默默地學習、適應,并為你提供建議,讓你感覺毫不費力——以至于你很少會停下來思考它背后的系統(tǒng)。這才是人工智能驅動的交互應該有的樣子:它不是一個需要你費力操作的功能,而是一個根據(jù)你的需求不斷改進的隱形助手。

隨著我們邁向意圖驅動的系統(tǒng),這正是設計師應該努力追求的目標。人工智能應該減少摩擦,而不是增加復雜性。它應該賦予用戶權力,而不是用不必要的選擇讓他們不知所措。最好的人工智能不是那種需要注意力的人工智能——而是那種能夠融入你最初想要完成的任務流程中的人工智能。

 
蘭亭妙微(www.jzvac.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan
 

以人為本的人工智能:用戶體驗設計師的 5 個框架

杰睿

以一個人為決策樹中心的插圖

2024 年是人工智能取得重大進步的一年,這項技術以驚人的速度融入我們的職業(yè)和個人生活。

在家里,我很享受看著我的三個小兒子以他們自己獨特的方式沉浸在人工智能世界里。他們被最新一波的人工智能玩具所吸引,尤其是我們家的新“寵物”機器人Loona。它能用近乎科幻般的對話讓他們著迷——這得益于與2024年5月發(fā)布的GPT-4o的集成。Loona激發(fā)了孩子們的好奇心,引發(fā)了他們富有想象力的人機對話,甚至引發(fā)了兄弟姐妹之間關于它如何“思考”的熱烈討論。他們的興奮提醒我們,人工智能已經(jīng)在塑造下一代人與科技的關系——使其更加個性化、引人入勝,甚至更容易被理解。

將顯示縮放圖像
Loona機器人玩具圖片
KEYi Tech 的 Loona 機器人 — 圖片來源:keyirobot.com

這種驚奇感一直延續(xù)到2025年,伴隨著NVIDIA在CES上令人嘆為觀止的主題演講拉開帷幕,這場演講展示了人形機器人的進步。NVIDIA首席執(zhí)行官黃仁勛的演示凸顯了他對機器人和人工智能發(fā)展現(xiàn)狀的著迷,以及他對未來幾年快速變革步伐的有力預測。

對于用戶體驗設計師來說,在人工智能快速發(fā)展的時代,好奇心與奉獻精神的結合至關重要。擁抱人工智能需要我們重新思考我們的流程,理解該技術的底層系統(tǒng),并確保人類價值觀和用戶需求始終是我們創(chuàng)作的核心。擁抱人工智能需要我們重新思考我們的流程,了解該技術的底層系統(tǒng),并確保人類價值觀和用戶需求仍然是我們創(chuàng)造的核心。

隨著人工智能成為數(shù)字創(chuàng)新的支柱,我們作為設計師的角色也在不斷演變。我們不僅要塑造界面,更要打造將以人為本的原則與全新的技術交互方式相融合的體驗。這種轉變要求我們像技術人員一樣思考,擁抱數(shù)據(jù)驅動的系統(tǒng),并將用戶中心置于人工智能項目之中。

為了引領這一轉變,領先的科技公司和大學為以人為本的人工智能提供了切實可行的戰(zhàn)略。在本文中,我將分享來自 IBM、谷歌、微軟和卡內基梅隆大學的用戶體驗框架,為應對人工智能技術和工具的快速發(fā)展提供洞見和資源。

1. IBM 的 AI/人類語境模型

IBM 的AI/人類情境模型是其AI 設計實踐的核心。該模型提供了一個結構化的框架,確保 AI 解決方案能夠與用戶無縫交互,并隨著用戶輸入而不斷演進,同時尊重并增強其運行環(huán)境。

將顯示縮放圖像
IBM網(wǎng)站截圖
資源:IBM 的 AI 設計

IBM 的 AI/人類情境模型旨在指導符合人類需求和價值觀的 AI 系統(tǒng)的開發(fā)。該模型將 AI 驅動的體驗分解為幾個關鍵考量因素,每個因素對于創(chuàng)建有目的性、情境感知和以人為本的解決方案都至關重要:

  1. 理解意圖:人工智能系統(tǒng)必須優(yōu)先考慮以人為本的目標,并考慮用戶的意圖、情感和情境。意圖代表了人工智能系統(tǒng)的基本宗旨,涵蓋了用戶和企業(yè)的目標、愿望、需求和價值觀。它定義了解決方案背后的“原因”,并確保系統(tǒng)設計具有清晰的、以用戶為中心的目標。
  2. 數(shù)據(jù)與政策:這指的是從用戶和外部世界收集的原始數(shù)據(jù),以及保護和管理其使用的政策。數(shù)據(jù)是人工智能決策的支柱,但其收集和處理必須遵守嚴格的道德和監(jiān)管標準。情境是實現(xiàn)有效人工智能交互的關鍵。IBM 強調系統(tǒng)理解影響用戶行為的情境和環(huán)境因素的重要性。例如,位置、時間或任務緊急程度等情境數(shù)據(jù)可以幫助人工智能提供更個性化、更相關的建議。
  3. 機器理解、推理、知識和表達:這指的是人工智能系統(tǒng)在其領域范圍內解釋結構化和非結構化數(shù)據(jù)的能力,應用邏輯分析數(shù)據(jù)并決定最佳行動方案的能力,確保知識庫通過新見解動態(tài)更新的能力,以及以符合用戶環(huán)境和期望的方式傳達其響應的能力。
  4. 人類反應與系統(tǒng)改進循環(huán):這強調人工智能系統(tǒng)必須被設計為與人類協(xié)同工作,而不僅僅是為人類服務,從而確保自動化與人類自主性之間的平衡。用戶反應反映了用戶對人工智能系統(tǒng)表達的真實反饋——無論是顯式的還是隱式的。學習強調系統(tǒng)如何基于用戶交互和反饋不斷改進,使其能夠隨著時間的推移不斷發(fā)展并更好地服務于其目標。
  5. 評估結果:這強調結果衡量人工智能系統(tǒng)對現(xiàn)實世界的影響,代表它如何有效地滿足用戶需求并有效且合乎道德地解決問題。

2. Google 的可解釋性評估標準

Google 的可解釋性評估標準 (Explainability Rubric)提供了一個清晰的框架,用于創(chuàng)建透明、公平且以用戶為中心的 AI 系統(tǒng),并重點強調了 22 條需要與用戶分享的關鍵信息。隨著 AI 不斷影響我們的工作方式、與企業(yè)的互動方式,甚至成為我們表達自我的工具,確保用戶能夠理解并信任這些系統(tǒng)至關重要。

將顯示縮放圖像
谷歌網(wǎng)站截圖
資源:Google 的可解釋性評估標準

該評分標準分為三個信息級別:一般級別、特征級別決策級別。

  1. 總體層面:概述您的產品或服務的運作方式,包括人工智能的作用。解釋使用人工智能的主要目的和優(yōu)勢、商業(yè)模式以及人工智能如何促進價值創(chuàng)造。重點介紹為確保安全、公平和透明而采取的措施,包括與社區(qū)互動、解決偏見問題以及分享績效信息。
  2. 功能層面:詳細說明具體的 AI 功能,包括其運作方式、AI 的激活時間以及用戶控制選項。解釋系統(tǒng)限制、人工參與和個性化選項。提供有關所用數(shù)據(jù)的信息,包括訓練數(shù)據(jù)、外部輸入以及用戶數(shù)據(jù)的處理和利用方式。
  3. 決策層:闡明具體的人工智能決策是如何制定的,系統(tǒng)對其輸出的可信度,以及如何識別錯誤或低質量結果。決策完成后,應提供用戶反饋渠道,允許提出異議,并清晰地告知用戶錯誤和修復措施。

3.微軟的人機交互體驗(HAX)工具包

微軟的HAX 工具包是一個綜合框架,專為開發(fā)面向用戶的 AI 產品團隊而設計。它有助于概念化 AI 系統(tǒng)的功能和行為方式,使其成為設計早期階段的實用工具。

將顯示縮放圖像
微軟網(wǎng)站截圖
資源:微軟的 HAX 工具包

HAX 工具包功能多樣,允許團隊根據(jù)自身獨特的需求、用例、產品類別和目標,混合搭配其設計工具。HAX 工具包的關鍵組件包括:

  1. 人機交互指南:這些是設計用戶交互過程中 AI 行為的最佳實踐。它們指導 AI 產品規(guī)劃,以確保直觀有效的體驗。
  2. HAX 設計庫:一個資源中心,通過可操作的設計模式和真實世界的例子來解釋人機交互指南。
  3. HAX 工作簿:一種協(xié)作工具,供團隊確定優(yōu)先實施哪些指南,促進有重點且高效的設計討論。
  4. HAX 劇本:該劇本專為自然語言處理 (NLP) 應用程序量身定制,可識別常見的人機交互故障并提供緩解這些故障的策略。

4. HCI Institute 的 AI 頭腦風暴工具包

AI 頭腦風暴工具包由卡內基梅隆大學人機交互 (HCI) 研究所的研究人員創(chuàng)建,旨在提煉 AI 能力,幫助團隊探索如何利用 AI 構建應用。創(chuàng)新的停滯往往并非源于技術,而是因為團隊選擇了錯誤的項目。AI 頭腦風暴工具包解決了這個問題,提供了一種結構化的方法來設計既技術可行又以用戶為中心的 AI 驅動解決方案。

將顯示縮放圖像
HCI Institute 工具包截圖
資源:HCI Institute 的 AI 頭腦風暴工具包

該套件的結構化方法降低了開發(fā)不相關或不必要的AI解決方案的風險。通過關注AI的功能和用戶的需求,該套件使團隊能夠進行周到而有效的創(chuàng)新。該套件將AI功能分為不同的功能,例如:

  • 檢測模式(例如識別圖像中的人臉)
  • 預測趨勢(例如預測股票價格)
  • 生成內容(例如創(chuàng)建合成圖像或文本)
  • 自動化操作(例如跨不同應用程序執(zhí)行工作流程)

它概述了 40 個涵蓋醫(yī)療保健、教育和交通等不同領域的真實 AI 產品示例。該工具包還包含創(chuàng)意提示、影響力-投入矩陣和績效-專業(yè)知識網(wǎng)格等工具,可指導用戶選擇具有高影響力且可行的創(chuàng)意。要使用該工具包,首先要查看 AI 功能和示例,以激發(fā)您的團隊靈感。然后,進行結構化的頭腦風暴會議,探索機會、完善概念并評估潛在解決方案。該資源非常適合研討會、組織戰(zhàn)略會議和創(chuàng)新實驗室,確保團隊設計出具有影響力且以用戶為中心的 AI 產品。

5. Google 的 People + AI 指南

《People + AI 指南》由 Google 的多學科團隊People + AI Research (PAIR) 創(chuàng)建,提供了方法、最佳實踐、案例研究和設計模式的全面資源,旨在幫助設計師、開發(fā)人員和產品團隊創(chuàng)建有影響力的 AI 驅動解決方案。

將顯示縮放圖像
谷歌網(wǎng)站截圖
資源:Google 的 People + AI 指南

該指南介紹了 20 多種設計模式,為 AI 產品設計提供了實用且以行動為導向的指導。這些模式專注于解決產品開發(fā)過程中的關鍵挑戰(zhàn),并圍繞常見問題進行組織,以幫助團隊找到相關的見解。

  • 以人為本的人工智能入門:
    包括確定人工智能是否增加價值、設定明確的用戶期望以及有效解釋產品優(yōu)勢的指導。
  • 在產品中使用人工智能:
    強調充分利用人工智能,平衡自動化與用戶控制,并管理精度和召回率的權衡。
  • 引導用戶熟悉 AI 功能:
    涵蓋熟悉度、確保探索安全以及對新功能提供清晰的解釋。
  • 向用戶解釋人工智能:
    專注于解釋人工智能能力以便理解,適當?shù)卣故灸P托判?,并在直接用例之外提供更深入的背景解釋?/span>
  • 負責任的數(shù)據(jù)集構建:
    重點介紹諸如涉及領域專家、為數(shù)據(jù)標簽者設計、維護數(shù)據(jù)集以及接受現(xiàn)實世界數(shù)據(jù)的混亂等實踐。
  • 建立和校準信任:
    指導團隊透明地設置隱私、錯誤責任以及實現(xiàn)用戶反饋和監(jiān)督。
  • 平衡用戶控制和自動化:
    提供有關逐步實現(xiàn)自動化、在需要時將控制權交還給用戶以及確保自動化安全的建議。
  • 故障期間為用戶提供支持:
    鼓勵規(guī)劃錯誤解決并確保用戶在 AI 系統(tǒng)發(fā)生故障時能夠繼續(xù)前進。

這五個框架為設計能夠自然融入我們日常生活的人工智能奠定了基礎——無論是好玩的、會對話的機器人玩具,還是讓我們保持井然有序、高效的應用程序。作為用戶體驗設計師,以人為本的框架來處理人工智能意味著要在新技術能力與責任之間取得平衡,審視人工智能是否已準備好并適用于每個用例,并構建具有用戶反饋循環(huán)的系統(tǒng)以推動持續(xù)改進。

 

蘭亭妙微(www.jzvac.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

《交互設計小白如何從“流程圖思維”入門?一套拆解任務流程的實用方法》

杰睿

//寫在前面:
適合人群:
視覺轉交互 / UI Designer 想懂交互邏輯 / 想寫出好交互文檔的新手
內容結構:
  1. 流程圖是什么,不是畫圖,是表達“用戶怎么一步步完成目標”
  2. 流程圖包含什么組成?(觸發(fā)—操作—反饋)
  3. 初學者常犯的理解誤區(qū):關注畫面,不關注“操作過程”
  4. 拆解一個真實任務流(比如“預定會議室”/“注冊賬號”)
  5. 如何從用戶目標出發(fā),寫出一張不依賴原型圖的流程清單
  6. 總結一套“新手流程圖五步法”
a7af61c73dd145a5135dfffec16c8d28.jpg
很多初入交互設計的小伙伴,都會聽到一個建議:“先從畫流程圖開始。”
但流程圖到底**畫什么?表達什么?**為什么它對交互設計那么關鍵?
今天這篇文章,我們就來系統(tǒng)梳理這件事,并教你如何用純文字也能表達出完整的用戶任務流程

 流程圖是什么,不是畫圖,是表達“用戶怎么一步步完成目標”

流程圖(User Flow)的本質,不是圖,而是一條用戶的操作路徑
你可以把它理解為一張“任務執(zhí)行地圖”:
  • 從哪里開始(入口)
  • 走過哪些關鍵步驟(過程)
  • 最終完成了什么(目標達成)
它不是設計頁面樣子,不是決定按鈕放哪里,而是回答一個核心問題:用戶是怎么一步步完成這件事的?
舉個例子:
當你用滴滴打車的流程,其實是:
markdown
復制編輯
1. 打開App → 看到“打車”入口 2. 輸入起點和終點 3. 選擇車型 → 確認訂單 4. 等待司機接單 → 上車 5. 到達目的地 → 支付 → 評價
這其實就是一張流程圖的雛形。

流程圖包含什么組成?用三段式理解(觸發(fā) → 執(zhí)行 → 反饋)

為了讓新手更容易掌握,我們可以把一個用戶流程拆成以下三段:
階段 說明 關鍵點
觸發(fā) Trigger 用戶產生動機/看到入口 任務從哪里開始?入口清晰嗎?
執(zhí)行 Action 用戶一步步完成操作 步驟順暢嗎?邏輯連貫嗎?
反饋 Feedback 系統(tǒng)響應結果 是否完成目標?有沒有確認提示?
 這三段不是理論,而是你畫流程、寫文檔時必須考慮的三個設計面。

初學者常犯的誤區(qū):關注“頁面”,而忽略“操作過程”

很多設計小白在學習初期,習慣一上來就畫界面、堆按鈕。
但問題是——你連用戶要做什么都沒搞清楚,怎么知道該放什么控件?
 典型誤區(qū):
  • 原型里有“上傳按鈕”,但沒想清楚用戶是上傳圖片還是文件?能否預覽?能刪改嗎?
  • 有“下一步”,但用戶是否真的已經(jīng)完成上一步?有沒有校驗、提示?
 正確思維應該是:
“用戶要完成一件事 → 他需要經(jīng)過哪幾步 → 每一步中他需要系統(tǒng)給什么?”

 拆解一個真實任務流示例:「預約會議室」

我們以一個企業(yè)內部系統(tǒng)中的真實任務流為例:
 用戶目標:預約明天下午的會議室開會

 用戶流程拆解:

markdown
復制編輯
1. 登錄系統(tǒng) → 首頁選擇“會議室預約”入口 2. 選擇日期 → 選擇時間段(如14:00-15:00) 3. 選擇會議室(系統(tǒng)過濾出可用的) 4. 填寫用途說明 → 提交預約 5. 顯示預約成功提示 → 可查看預約記錄

這張流程圖體現(xiàn)的設計思考包括:

  • 步驟是否有明確反饋?
  • 用戶是否容易出錯?
  • 系統(tǒng)是否能預防沖突時間段?
  • 可編輯、取消嗎?流程中斷如何處理?

 如何從用戶目標出發(fā),寫出一張不依賴原型圖的流程清單

很多人以為流程圖就必須要“畫”,但對于剛入門的同學,用文字寫出一張流程清單,已經(jīng)很強了!

操作方法:

以“注冊賬號”為例,試著這樣寫清楚流程:
markdown
復制編輯
【用戶目標】注冊一個新賬號 【觸發(fā)入口】 - 打開App → 點擊“注冊” 【執(zhí)行過程】 1. 輸入手機號 2. 獲取驗證碼 → 系統(tǒng)發(fā)送 3. 輸入驗證碼 → 系統(tǒng)校驗 4. 設置密碼 5. 勾選用戶協(xié)議 → 點擊“注冊” 【反饋結果】 - 注冊成功 → 跳轉至首頁 - 如果失敗 → 顯示具體錯誤(如驗證碼錯誤)
這個結構比直接畫個框圖更清晰、更全面,還方便和開發(fā)、產品對齊邏輯。

總結一套「新手流程圖五步法」

很多人不知道從哪開始畫流程,其實你可以用下面這套通用五步法

新手流程圖五步法:

步驟 問題提示 示例
1. 明確用戶目標 他要完成什么任務? 預約會議室、提交訂單等
2. 確定起點入口 他從哪開始這件事? 首頁、菜單欄、按鈕
3. 列出關鍵步驟 他必須做哪些操作? 選擇、輸入、確認等
4. 標記系統(tǒng)反饋 系統(tǒng)會給出什么回應? 成功提示、錯誤校驗等
5. 考慮中斷/異常 用戶會在哪些地方卡??? 驗證失敗、網(wǎng)絡斷開等
有時候不需要一次做得很完美,先寫出主流程,再補充邊界情況,也很棒。
 
推薦你這樣開始練習:
選擇一個你熟悉的 App,如微信、小紅書、餓了么
模擬一個真實任務,如“下單”、“發(fā)評論”、“修改資料”
用上面五步法寫出完整流程清單,別畫圖也行!
 
蘭亭妙微(www.jzvac.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

界面設計:Web3場景下,大屏設計中的用戶體驗要點解析

杰睿

73e3b0a4-2ff5-4175-beb1-2d4510ce87bc.png

d65a7188-3597-4010-9533-c1bb1e02b796.png

在傳統(tǒng)互聯(lián)網(wǎng)產品中,數(shù)據(jù)看板和儀表盤是常見的管理工具。而隨著 Web3 技術的發(fā)展,鏈上行為、資產狀態(tài)、合約執(zhí)行等信息變得越來越復雜,如何可視化地理解這些動態(tài)數(shù)據(jù),成為產品設計中的新挑戰(zhàn)。
在這一背景下,數(shù)據(jù)大屏逐漸成為 Web3 項目方、平臺運營方、審計安全機構等角色的重要信息樞紐。但在實際設計過程中,許多大屏項目容易陷入“炫酷外觀”而忽略了核心交互體驗。
本文將從交互設計的角度,探討 Web3 場景下的大屏設計應關注哪些用戶體驗要點,避免“看上去很厲害,卻沒人真正在用”的設計誤區(qū)。

一、Web3應用為何需要大屏?

Web3 應用天然擁有強數(shù)據(jù)屬性:去中心化交易、流動性池、區(qū)塊鏈瀏覽器、智能合約調用……背后都對應著高頻、高維度、鏈上鏈下混合的數(shù)據(jù)系統(tǒng)。
大屏在 Web3 中的主要使用場景包括:
鏈上運營監(jiān)控:例如 DEX 交易量、TVL 變化、用戶活躍趨勢
安全審計看板:異常交易預警、地址聚集行為識別
鏈級數(shù)據(jù)展示:Gas 消耗趨勢、區(qū)塊出塊速度、礦工分布等
多鏈資產管理:跨鏈橋資產流通圖、跨鏈交易流向展示
這些場景中的共通點是:數(shù)據(jù)變化快、維度多、使用者需要“實時看清”并“快速判斷”。這也是大屏發(fā)揮價值的關鍵。

二、Web3大屏設計的5個核心用戶體驗要點

  1. 可讀性優(yōu)先于炫酷感
Web3 的數(shù)據(jù)普遍較為抽象,如交易哈希、錢包地址、Gas 費用、TVL等,對非專業(yè)用戶甚至部分運營者而言并不直觀。
在這種背景下,大屏首要設計目標是讓用戶“看得懂”,而不是制造視覺噱頭。
設計建議包括:
使用足夠大的字號和清晰的字體(避免細線體在大屏上模糊)
色彩控制在 2~3 個主色 + 層級灰色,避免過多亮色干擾焦點
圖表需具備必要的坐標軸、單位標注、異常標記,不應純粹裝飾化
簡潔比花哨更重要,清晰比動效更關鍵。

  1. 實時感知與狀態(tài)提示
Web3 的鏈上數(shù)據(jù)具有強實時性,許多核心指標在數(shù)分鐘內可能出現(xiàn)劇烈波動。因此,大屏必須能體現(xiàn)“當前狀態(tài)”以及“更新節(jié)奏”。
建議包括:
明確標出“數(shù)據(jù)更新時間”,讓用戶知道當前信息的時效性
對關鍵變化支持動效強調,如箭頭上揚/下降、數(shù)值閃動提醒等
異常狀態(tài)顏色需與正常狀態(tài)明確區(qū)分(避免“全綠”或“全藍”)
此外,設計中應盡量避免讓用戶懷疑數(shù)據(jù)是否卡住了,這會極大削弱其對大屏的信任度。

  1. 異??筛兄С诸A警反應
大屏不只是展示,更應該幫助用戶“識別風險”或“發(fā)現(xiàn)機會”。
在 Web3 應用中,這種“感知”尤為重要,比如:
某地址在短時間內發(fā)生大量交易 → 潛在惡意行為
某資產流動性短時間驟降 → 潛在清算風險
合約調用量瞬時異常上升 → 可能被攻擊或刷單
設計中可引入以下機制:
顏色警示(如紅、橙色信號)
簡潔文案說明(如“交易量驟增 300%”)
可展開詳情但不跳轉頁面,降低閱讀負擔
將這些機制融入 UI 組件,可以極大提升大屏的實用性。

  1. 信息層次清晰、模塊布局可讀
由于大屏往往信息密集,如何組織信息成為交互設計的核心難點。
推薦的分層方式:
第一層:核心概覽指標(如總交易量、活躍地址、Gas趨勢)
第二層:分區(qū)域信息塊(如按鏈分類,或按用戶/合約分類)
第三層:詳細趨勢圖/交易列表等可拓展內容
使用模塊化的卡片布局、留白區(qū)分信息塊,可以幫助用戶在幾秒內抓住重點,避免“眼花繚亂”的閱讀體驗。

  1. 可維護、可擴展、可適配
Web3 數(shù)據(jù)結構在不斷演變:新增協(xié)議、新增鏈、新增地址標簽……這就要求大屏具備良好的可維護性。
設計策略包括:
所有數(shù)據(jù)組件可復用,如“標準圖表組件”、“警示模塊”、“K線區(qū)塊”
UI 布局具備適應不同分辨率的彈性(如1080p/4K/LED拼接屏)
盡量使用“數(shù)據(jù)結構驅動的渲染邏輯”,而非固定死圖布局
在設計前期明確這些要求,可以大幅降低后期重構成本。

 
Web3的大屏設計,不是為了炫技、也不是為了迎合形式,而是為了幫助人們在復雜數(shù)據(jù)中看清趨勢、發(fā)現(xiàn)問題、做出反應。
它的真正價值在于:
降低理解門檻
提升監(jiān)控效率
提供可視化決策支持
 
 
在這個數(shù)據(jù)密集、變化迅速的領域,交互設計師的任務,就是為用戶建立起這座“可感知的橋梁”。
 
如果你正在設計或評估一塊 Web3 場景下的大屏,不妨從以上幾點出發(fā),重新審視它是否真正服務了使用者的體驗,而不僅僅是滿足了展示的需求。
如果你有正在推進的 Web3 數(shù)據(jù)大屏項目,歡迎留言交流你的設計思路與挑戰(zhàn),我也會持續(xù)更新關于 Web 應用與交互設計的專業(yè)觀察。
 
蘭亭妙微(www.jzvac.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

如何傳達錯誤

杰睿

一個人對錯誤的反應——無論是自己犯的還是他人犯的——是一個復雜且常常令人痛苦的心理過程。在本文中,我將解釋為什么幾乎所有的錯誤提示信息的設計都公然無視用戶體驗理論。我將使用交互式原型來展示如何解決這個問題。我還將轉向交互理論,回顧模式的概念,并解釋可逆性、恰當性和及時性的原則。

我們的用戶不是程序員

每個設計師的清單里都會包含“設計錯誤界面”。但即使完成了,程序員仍然會回來說:“還有另一種情況——我們也需要一個錯誤界面。”在這種情況下,程序員是設計的客戶,這很有道理:程序員比任何人都更了解錯誤。設計師和經(jīng)理們都認同這種方法——但它存在嚴重缺陷。

“我們不是我們的用戶。”設計師們不斷重復這句話。他們想表達的是:不要僅僅依賴自己的專業(yè)知識(這不可避免地會過時,而且容易產生職業(yè)偏見),而要關注用戶在自然環(huán)境中的行為。

所以,問題在于——程序員不是我們的用戶。程序員的行為、思維方式,以及與計算機的聯(lián)系與其他人截然不同。我知道我在說什么。我的大多數(shù)朋友都是程序員和工程師。我在工作中也經(jīng)常和程序員交流。我自己也是一名程序員,使用多種語言(從 Swift 和 GLSL 到 Forth 和 Assembly)。但幸運的是,我也是一名非常關注心理學的設計師。那么,讓我來告訴你程序員的一天通常是怎樣度過的:

程序員甚至還沒來得及好好寫點東西——他們停頓了一下,砰,一個錯誤出現(xiàn)了:“空白符缺失”。不知何故,下一行也出現(xiàn)了錯誤(盡管那一行完全沒問題)。左側面板也滿是錯誤。這還不算編譯錯誤。除了紅色圓圈,可能還有黃色圓圈——程序員的大腦已經(jīng)習慣了忽略這些警告。

如果錯誤來自硬件故障、第三方庫的 bug 或文檔不清晰,程序員不會把這些錯誤當回事。他們會把這些錯誤視為一種有用的工具,幫助找出別人的錯誤。而有些煩人的拼寫錯誤,你會在自己的代碼中苦苦追尋,希望編譯器能自動捕獲它們。那么,關于拼寫錯誤的錯誤消息就是程序員最好的朋友。

簡而言之,程序員對錯誤消息產生了一種容忍度——所有那些帶有感嘆號的圓圈和冗長、說教的紅色文字。

心理學家會怎么說?

從人體工程學的角度來看,程序員的環(huán)境與普通用戶的環(huán)境有著根本的不同。因此,設計師絕對不應該采用程序員對待錯誤的態(tài)度。如果我們負責設計一個 IDE(集成開發(fā)環(huán)境),那么我們當然會咨詢程序員——他們是我們的用戶。但在開發(fā)其他產品時,最好不要依賴他們的觀點。相反,我們應該咨詢心理學家。

紅色感嘆號會讓用戶想起老師在課堂筆記中批改的內容,并被理解為一種懲罰(當然,除非有人已經(jīng)培養(yǎng)了對懲罰的耐受力,比如程序員)。那么,心理學是如何看待對錯誤的懲罰的呢?

重要的是不要用消極情緒來強化錯誤,因為大腦對此非常敏感,并會將這種行為標記為不值得投入精力的事情。

我知道有些人看到錯誤信息就會慌亂不已。他們開始點擊所有按鈕,只為讓它盡快消失。這些人很難適應界面,因此他們傾向于完全避免與界面交互。這并不是因為他們愚蠢,而是因為他們是普通人——而不是程序員。

看看這個!幾乎每個字段都用紅墨水劃了線,界面提示你輸入姓名,并要求你填寫,而且是必填項!

但程序員對此完全沒意見。程序員堅信,把笨蛋塞進錯誤里是有用的,這樣他們就不會再試圖用 null 或 undefined 來破壞程序了。程序員和工程師稱之為“傻瓜式防錯”,展現(xiàn)了他們獨特的同理心。

焦點切換時驗證

當用戶從一個輸入字段切換到另一個輸入字段時,第一個字段會觸發(fā)一個名字很不靠譜的事件:“onblur”。開發(fā)者經(jīng)常用它來進行驗證——以防用戶漏填字段、輸錯生日或忘記郵件中的“@”。問題是:當用戶切換到另一個應用時,“onblur”也會觸發(fā)。過去,表單跨越三頁時,空字段是個問題。如今,所有內容都能放在一個屏幕上——很難忽略一個空字段。至于其他的檢查——它們對用戶沒有任何幫助。它們只是另一種“傻瓜式”的玩意兒。但用戶不是傻瓜。當他們想要什么東西時——他們會發(fā)揮創(chuàng)造力。我知道有人會修改頁面代碼,以獲取他們嚴格意義上不應該獲得的政府服務。而如今,他們甚至不需要知道如何編寫代碼:只需單擊一下即可打開 DevTools,再單擊幾下——所有驗證都消失了。輸入任何你想要的內容。

通過像傻瓜一樣對待用戶,開發(fā)人員產生了兩個問題:第一 - 他們浪費時間構建“保護”,第二 - 他們陷入了一種虛假的安全感(沒有比“通過模糊性實現(xiàn)安全”更糟糕的保護)。

在焦點切換時進行驗證毫無意義,而且問題重重,我甚至不想在這里討論它。讓我們繼續(xù)討論主按鈕上的驗證:“繼續(xù)”、“提交”等等。

通常如何做

我們與雅虎界面的交互分為三個階段:

  1. 開始。所有字段均為空。無錯誤。“繼續(xù)”按鈕可用。
  2. 按下“繼續(xù)”按鈕。所有空白字段均被標記為錯誤。
  3. 焦點從第一個字段移開。突然間,它不再被標記為錯誤了。

讓我們來分析一下。

激活按鈕——這很好,雅虎點贊了。我有一篇名為“禁用按鈕”的文章,解釋了這背后的理論和實踐。如果你仍然認為禁用按鈕對用戶有幫助,那你絕對應該讀一讀。

接下來是可逆性原則。這意味著你可以將界面恢復到初始狀態(tài)。雅虎又贏了——你可以重置界面。但只能通過逐個點擊每個字段來實現(xiàn)。這有什么意義呢?為什么僅僅因為你移開焦點,錯誤信息就會消失?這純粹是算法故障!在我關于設計流程的文章中,我指出即使是頂級公司有時也會設計出糟糕的界面,所以不要盲目追隨權威。要遵循科學。

下一個原則是恰當性。用戶點擊了“繼續(xù)”按鈕——交互的對象是按鈕,而不是輸入字段。如果按鈕發(fā)出某種震動或吱吱聲來表達不滿,這可以理解。但是輸入字段呢?根本沒人碰過它們!它們怎么可能感知到按鈕的情緒呢?只有程序員知道,在代碼中,這些對象是相互關聯(lián)的——但外部觀察者一無所知,因為它們之間沒有視覺聯(lián)系。

現(xiàn)在來談談時效性原則。設計師用紅色高亮顯示幾個字段,期望用戶做出什么反應?如果所有字段的重要性都一樣,用戶應該先解決哪個字段?這需要對注意力中心進行復雜的討論(這里的注意力中心不是指某個具體的輸入字段,而是“出了點問題”的整體感覺),但我建議保持簡單:界面基本上就是按照“坐下-停留-過來”的順序排列,打破了“一次一個動作”的原則。

這里,一切都非常不對勁!

調試模式

界面有“模式”的概念。在我的大學里,程序員選修了一門名為“界面設計”的課程,課程內容包括解釋為什么彈出窗口被稱為“模態(tài)窗口”?,F(xiàn)在,我驚訝地發(fā)現(xiàn),程序員和設計師似乎對如何處理模式一無所知。

老式計算機有一種特殊的“HALT”模式,用于調試錯誤,也稱為“控制臺模式”。如果處理器嘗試執(zhí)行無效操作,程序將被中斷,處理器將停止運行,并切換到控制臺模式。您也可以通過按下物理“HALT”按鈕手動觸發(fā) HALT 中斷。使用開關或調試程序(在單獨的控制臺上運行),您可以修復錯誤并返回程序執(zhí)行模式。

“處理器”一詞并非偶然——它源于“進程”。錯誤中斷只能在進程運行期間發(fā)生,而不會在處理器停止并處于調試模式時發(fā)生。這一事實在我們稍后討論進程和狀態(tài)之間的區(qū)別時會很有用。

向用戶清晰解釋他們最終進入不同模式的原因和方式至關重要。例如,調試器會顯示導致無效操作的指令地址。同樣重要的是解釋如何返回(記住可逆性原則)。經(jīng)典的 Norton Commander 完美地詮釋了各種模式:

  1. 文件選擇模式
  2. 復印模式
  3. 管理員模式,需要對硬件錯誤做出響應

我見過有人批評這類解決方案:“窗口疊在其他窗口上看起來很丑”。即便接受了這種說法,我仍然無法認同設計師通常提出的替代方案:“我們把這個窗口移除,把錯誤顯示到別的地方,這樣更美觀。” 就好像設計師忘記了自己是工程師,只是拿起畫筆,像個泥水匠一樣把瑕疵掩蓋起來。

如果你真的想擺脫窗口,正確的方法是記住什么是模式、它們來自哪里以及它們是如何工作的——然后弄清楚如何避免切換到其他模式(如果你想深入了解模式,請閱讀 Jef Raskin 的《人性化界面》)。例如:軟盤空間不足?不允許復制文件。軟盤未插入?不要將其顯示在目標列表中?,F(xiàn)代操作系統(tǒng)就是這樣做的——它們消除了執(zhí)行可能導致錯誤中斷的操作的可能性。

現(xiàn)在我們可以猜一下雅虎上的“繼續(xù)”按鈕的作用了:它啟動了一個錯誤調試模式。在該模式下,用戶被賦予了程序員的角色,并被迫修復所有導致程序崩潰的空值和未定義值。不幸的是,開發(fā)人員并沒有意識到這對普通用戶來說有多么糟糕。我希望他們至少明白,他們剝奪了用戶返回上一個模式的能力——這違反了良好用戶體驗的最基本規(guī)則。

糟糕的算法變成了“最佳實踐”

乍一看,似乎所有網(wǎng)站的錯誤顯示都和雅虎一模一樣。所以這肯定是“最佳實踐”,是行業(yè)標準……但事實并非如此!每個人的做法都不一樣。我們來看看亞馬遜:

  1. 開始:所有字段均為空。無錯誤。“繼續(xù)”按鈕可用。
  2. 按下“繼續(xù)”按鈕。所有空白字段均標記為錯誤(最后一個字段除外)。
  3. 要消除錯誤,僅僅切換到另一個字段是不夠的——您實際上必須輸入一個值。
  4. 再次按下“繼續(xù)”按鈕。除第一個字段外,所有字段均為空,并標記為錯誤(第一個和最后一個字段除外)。

讓我們來分析一下。

一個活動按鈕——很好。亞馬遜正在跟上雅虎的步伐。

自動聚焦到第一個字段——太棒了(雅虎沒有這個功能):用戶可以立即開始輸入。填完第一個字段后,按“繼續(xù)”鍵會直接將光標移動到第二個字段,也就是錯誤所在的地方。真是聰明的舉動!

有人會反對:自動對焦在桌面端運行良好,但在移動設備上鍵盤會遮擋半個屏幕,所以最好隱藏它,直到用戶點擊輸入。這樣一來,你解決了一個問題,又制造了另一個問題。然后你選擇你的毒藥……問題是,你會認為一種弊端較小,而有些用戶會認為另一種弊端更嚴重。無論哪種情況,你都在選擇一種弊端。不要這樣做(我稍后會解釋如何做)。

界面可逆性。你輸入一些內容,錯誤消失;然后你刪除它并切換到另一個字段——哇,一個沒有錯誤的空字段。所有字段都一樣。將界面恢復到初始狀態(tài)比雅虎要難,但由于算法不穩(wěn)定,仍然是可能的。

與雅虎的同事一樣,亞馬遜的程序員在“繼續(xù)”按鈕和輸入字段之間建立了心靈感應:按鈕不想繼續(xù),但輸入字段都大聲喊出來(突然變成輸出字段)。

特別要提一下密碼確認框——為什么它不變成紅色?不填就無法繼續(xù)。想說要等到前一個框填完后才進行校驗?當然,你得給用戶解釋一下錯誤校驗算法,再給他們看源代碼——這真的會很有幫助(諷刺)。

現(xiàn)在,我們來快速看一下IBM的解決方案:

激活按鈕——不錯。沒有自動對焦,但至少界面會自動滾動到第一個字段并顯示錯誤。

界面不可逆——無法將字段恢復到第一個屏幕上的樣子。換句話說,你無法退出調試模式。那么,為什么還要有第一個屏幕(調試模式)呢?如果你認為空字段是錯誤,那就直接顯示第二個屏幕吧。哦,你不想立刻嚇到用戶?還記得感知心理學嗎?你決定稍后再嚇唬他們,作為對他們錯誤的懲罰?讓我再重復一遍心理學家的話:

重要的是不要用消極情緒來強化錯誤,因為大腦對此非常敏感,并會將這種行為記錄為不值得花費精力的事情。

例子不勝枚舉。以網(wǎng)站 capital.xyz 為例:

日期字段為空,點擊“下一步”按鈕,字段自動對焦。手機字段為空,點擊“下一步”——完全沒有自動對焦。為什么?這背后的想法是什么?劇透:根本沒這回事。只是算法出了問題。

谷歌甚至更進一步——你輸入的每一個字符它都會責罵你……

即使你不同意我的批評,你也必須承認,知名公司的頂級設計師和程序員在實現(xiàn)同一項任務時,都采用了截然不同的方式。這意味著完美的解決方案尚未找到。很可能,根本沒人真正去尋找它。程序員只是在缺乏對用戶交互原則清晰理解的情況下編寫代碼,然后跑來找設計師說:“嘿,這里又有一個錯誤需要顯示出來。”

當我為自己的項目設計錯誤顯示時,我沒有依賴別人的解決方案——我依靠科學。我在撰寫本文時收集了來自雅虎、亞馬遜和 IBM 的示例。在對所設計機制背后的原理沒有深入理解之前,研究參考文獻是有害的。你只會撿起別人的錯誤,然后引用權威文獻來為自己辯護。幾乎每個人都這樣做。沒有人愿意重新發(fā)明輪子——工業(yè)程序員沒有時間或動力去做這件事。所以每個人都堅持使用老式的命令行、字母數(shù)字顯示方法。還記得當時錯誤是如何顯示的嗎?如果沒有,來看看控制臺:

如今,界面開發(fā)人員仍在做著同樣的事情:直接把錯誤日志直接倒在屏幕上。21世紀唯一的升級?把文本涂成紅色,然后把信息分散到屏幕的不同位置。

這可不行。我們趕緊解決吧!

事件與狀態(tài)

我們用“錯誤”這個詞來描述兩種截然不同的事物:事件狀態(tài)??焖倩仡櫼幌拢寒斕幚砥鲊L試執(zhí)行無效操作時,它會觸發(fā)中斷并進入調試模式。這是一次性事件。我們說“發(fā)生了錯誤”。然后,我們去尋找導致崩潰的內存中的特定值。該值——或者更準確地說,存儲單元的狀態(tài)——也稱為“錯誤”。換句話說,我們模糊了因果之間的界限——僅僅是因為我們沒有想出單獨的詞。為了避免混淆,我將使用兩個術語:進程錯誤(事件,某個時間點)和數(shù)據(jù)錯誤(內存中的錯誤值,一種狀態(tài))。

我們來看一個郵箱輸入框。缺少“@”符號?這是數(shù)據(jù)錯誤。被郵件服務器退回郵件?這是流程錯誤?;蛘咭脏]政編碼為例。位數(shù)太少?這是數(shù)據(jù)錯誤。數(shù)據(jù)庫中找不到郵政編碼?這是流程錯誤。

空字段

輸入字段只是一個數(shù)據(jù)容器。數(shù)據(jù)可能會缺失。如果你沒有輸入生日,并不意味著你出生在零日。這個輸入字段根本沒有數(shù)字,只有占位符“日”。數(shù)據(jù)缺失了。

因此,空白字段并非數(shù)據(jù)錯誤。不存在的東西本身就不是什么錯誤??瞻鬃侄问莿?chuàng)建數(shù)據(jù)的機會,是一個良好的起點,也是一個互動的邀請。你可能已經(jīng)注意到,空白表單看起來比已填充的表單更優(yōu)雅。那么,為什么要用有毒的紅色來破壞它呢?誰會喜歡與標記為危險的字段互動呢?

不要這么做。我準備了一個交互式原型來向你展示應該怎么做。

狀態(tài)改變

讓我們看看電水壺中按鈕和水的狀態(tài)是如何變化的。打開電水壺。水沸騰后,按鈕會彈開。但觸發(fā)按鈕的不是水,而是溫度傳感器。如果傳感器損壞或丟失,按鈕就不會彈開。

現(xiàn)在手動按下按鈕——水不會突然變冷。了解導致狀態(tài)變化的具體原因很重要。

規(guī)則如下:如果對對象 A 執(zhí)行了某個操作,那么只有 A 的狀態(tài)可以改變,而對象 B 的狀態(tài)則不能改變。要更改 B 的狀態(tài),需要一個直接作用于 B 的獨立進程。

例如,數(shù)據(jù)庫搜索可能會觸發(fā)索引重建——這會更改數(shù)據(jù)庫本身,但不會改變您搜索的值。

讓我們來看一個常見的 UI 設計錯誤。用戶想通過郵政編碼查找城市。他們輸入郵政編碼,點擊“搜索”,然后……輸入框變紅,或者值消失了。發(fā)生了什么?這是一個流程錯誤——數(shù)據(jù)庫中沒有結果。但 UI 卻將其顯示為數(shù)據(jù)錯誤,就好像用戶輸入了錯誤的郵政編碼一樣。但也許郵政編碼是有效的——只是城市還沒有添加到數(shù)據(jù)庫中。也許五分鐘后就會添加。用戶并沒有輸入錯誤數(shù)據(jù)。輸入框不應該受到指責。我們無權觸碰它。流程錯誤需要以不同的方式顯示(稍后會詳細介紹)。

一次一個動作

根據(jù)???海曼定律,提供的選項越少,用戶選擇所需內容的速度就越快。將這一原理推向極致,便可得出“一屏一操作”原則。有人可能會說,復雜的程序不可能簡化到這種程度,但讓我們回想一下 Hanx Writer 文本編輯器——蘋果設計獎得主——它幾乎精簡了所有內容?;蛘呦胂朐?Photoshop 中按下一個按鈕就可以隱藏整個界面,只留下一個工具可見。在某些情況下,“一屏一操作”原則非常有效。至少,在放棄它之前,先嘗試一下。

在優(yōu)化了開立經(jīng)紀賬戶的網(wǎng)頁工作流程后,我決定在移動應用中測試這種方法。看看我的交互式原型吧——它通過了 17 位用戶的快速測試,與舊版本(每個屏幕有多個輸入字段)相比,速度提升了 13%。

有人可能會說,時間的提升并不大——少了52秒,而不是整整一分鐘。但首先,試著數(shù)到8——這實際上是一段相當長的時間內,任何事情都可能發(fā)生。其次,測試表明時間減少了,而不是像一些人擔心的那樣增加了。他們假設額外的屏幕轉換會減慢用戶的速度,但結果卻恰恰相反:信息越少,用戶處理速度就越快。當只有一個操作可選時,用戶會毫不猶豫地執(zhí)行。

原型就是這樣。屏幕上只有一個輸入字段。用戶輸入數(shù)據(jù),按下“繼續(xù)”,屏幕就會滾動到下一步。如果你手動嘗試在空白字段處向前滾動,屏幕會迅速彈回:“不行,不行”。輸入字段保持焦點,提示用戶輸入數(shù)據(jù)。無需任何額外的高亮——畢竟,它是屏幕上唯一的字段。完美。

如果你點擊“繼續(xù)”,但輸入框為空或郵箱地址缺少“@”符號,鍵盤會彈回來,仿佛在說:“想繼續(xù)嗎?那就繼續(xù)填寫吧。” 沒有任何錯誤信息!

我再強調一遍:我們不會隱藏錯誤信息。相反,我們設計的系統(tǒng)絕對不會出錯。沒有數(shù)據(jù)就意味著沒有數(shù)據(jù)錯誤。沒有流程就意味著沒有中斷或調試模式。這里唯一的期望是數(shù)據(jù)以正確的格式輸入。順便說一句,這里有一個很棒的方法——接受任何合理格式的數(shù)據(jù)。例如,Sberbank.ru 允許您輸入帶有國家代碼 (+7)、本地前綴 (8) 或完全不帶區(qū)號的電話號碼。

從本文俄語版的評論來看,并非所有人都理解原型的用途。有些人期望看到一個完美無瑕、隨時可用的產品(一個他們可以直接復制的產品),結果卻大失所望,對諸如缺少重新發(fā)送短信驗證碼的選項之類的問題吹毛求疵。讓我再次澄清:本文中的原型并非成品的精確復制品。它們的唯一目的是展示如何消除錯誤信息。

現(xiàn)在,讓我們將此解決方案擴展到界面無法簡化為“一屏一操作”模式的情況。 “Ingos Investments”的原型反映了數(shù)據(jù)量巨大,以至于每個屏幕上必須顯示多個字段的情況。

讓我們設想一個場景:用戶尚未填寫所有字段,點擊了“繼續(xù)”按鈕。界面立即聚焦于第一個空白字段,調出屏幕鍵盤,并滾動到該字段正上方,方便用戶查看正在輸入的內容。即使屏幕上有多個字段,我們仍然堅持“一次一個操作”的原則,巧妙地將其他字段隱藏在鍵盤下方。在活動字段下方,會出現(xiàn)一條提示:“所有字段必須填寫”。這不是錯誤消息,而是一個有用的提示,沒有任何令人擔憂的危險信號。

當用戶點擊屏幕鍵盤上的“下一步”時,他們只會跳轉到下一個字段——這和填寫表單的常規(guī)流程一樣,而不是笨重的錯誤調試模式。提示已經(jīng)給出,所以用戶不太可能再次嘗試填寫空白字段。但如果他們真的這么做了,那么他們會再次看到這個溫馨提示。

懷疑論者可能會說:“但如果空白字段位于屏幕最頂部,無法滾動到鍵盤上方怎么辦?或者,如果網(wǎng)站是在桌面上打開的,根本沒有屏幕鍵盤怎么辦?” 答案是:沒什么大不了的。所有這些極端情況都在原型中得到了完美的體現(xiàn)。我也聽到過這樣的擔憂:“如果我們不把每個字段都涂成紅色,用戶就不會意識到需要填寫”。測試表明,這些擔憂是毫無根據(jù)的。這些擔憂背后真正的恐懼,是害怕打破常規(guī),嘗試一些真正新穎的東西——一些對用戶更有利,而不僅僅是對我們自己更有利的東西。

州經(jīng)理

為了創(chuàng)建“Ingos Investments”的原型,我編寫了一個狀態(tài)管理調度器。交互元素將其內容報告給管理器,然后管理器決定如何處理它們。

程序員常說輸入字段是獨立的元素。郵箱字段不知道電話字段里的內容。當你切換輸入字段時,它會觸發(fā)對其內容的驗證。當你點擊“繼續(xù)”按鈕時,所有輸入字段都會收到一個命令——檢查你的數(shù)據(jù)。這就是為什么它們會突然一起亮起紅燈。這就是它的構造方式。程序員說你無法改變它。設計師也相信這一點。不過亞馬遜的例子表明,密碼確認字段確實知道前一個字段的內容。所以他們可以隨時修改。

這意味著你可以而且應該創(chuàng)建一個狀態(tài)管理器。當用戶嘗試跳轉到下一個屏幕時,狀態(tài)管理器會檢查所有字段,找到一個包含不完整或無效數(shù)據(jù)的字段,將用戶帶回該輸入框并顯示提示。本質上,這是一次時光之旅——回到用戶出錯的點。因此,將后續(xù)字段標記為錯誤是沒有意義的——它們發(fā)生在將來,而用戶尚未到達它們。

使用狀態(tài)管理器,您還可以在鼠標懸停在“繼續(xù)”按鈕上時檢查字段內容。如果數(shù)據(jù)缺失,按鈕的標簽會更改為特定的字段名稱,例如“輸入街道”——這遵循了時效性原則(用戶嘗試繼續(xù),但需要填寫字段,我們會通知他們)。這個新標簽在按鈕和字段之間建立了視覺聯(lián)系,使程序員有理由將這兩個元素的行為聯(lián)系在一起。

程序員可能會問:“為什么要把事情復雜化?” 沒錯——對程序員來說越復雜,對用戶來說就越容易。這是規(guī)則。說實話,這只需要一兩天的時間。需要更多精力的是通知系統(tǒng)。數(shù)據(jù)錯誤和流程錯誤應該顯示在各自的層級結構中:數(shù)據(jù)錯誤應該顯示在數(shù)據(jù)容器中,而流程錯誤應該顯示在應用程序范圍的通知中。這是一個完全獨立的主題,我希望有時間寫一篇關于通知設計的文章。

結論

因此,我們發(fā)現(xiàn)了以下事實:

  1. 絕大多數(shù)現(xiàn)有解決方案都歸結為切換到“錯誤糾正模式”,而退出該模式要么不可能,要么極其困難(只能通過算法中的錯誤)。這種方法雖然被廣泛接受,但各地的實現(xiàn)方式卻有所不同:空白字段可能被視為錯誤,也可能被視為正常,有時甚至會在同一屏幕上混合出現(xiàn)。用戶會背負負面情緒,因為系統(tǒng)會“懲罰”他們破壞程序。這種方法絕對不可接受,必須予以糾正。
  2. 缺少數(shù)據(jù)并不意味著數(shù)據(jù)錯誤??瞻鬃侄问腔拥难?,而非危險信號。
  3. 我們不需要兩種模式:數(shù)據(jù)錄入和糾錯。一種模式——數(shù)據(jù)錄入——就足夠了。
  4. 數(shù)據(jù)錯誤和流程錯誤是不同的。它們應該顯示在相應的層級結構中:數(shù)據(jù)錯誤應該顯示在數(shù)據(jù)容器中,而流程錯誤應該顯示在全局通知中。
  5. 如果您希望對一個對象執(zhí)行的操作影響另一個對象,請在它們之間建立清晰的視覺聯(lián)系。
  6. “一屏一操作”原則一定要試一下。如果有效,那你太棒了!
  7. 編寫一個簡單的狀態(tài)管理調度程序。借助它,你可以引導用戶回到最早未完成的步驟。
  8. 創(chuàng)建原型——它們是新想法的最佳概念證明。
蘭亭妙微(www.jzvac.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

【原創(chuàng)】交互設計案例分享:資源庫網(wǎng)站設計

杰睿

 

項目背景:

隨著生態(tài)保護意識提升,青海豐富的鳥類資源亟待數(shù)字化呈現(xiàn)與科普推廣。為打破信息分散壁壘,助力科研、生態(tài)教育及觀鳥愛好者交流,客戶想要造青海鳥類資源庫網(wǎng)站,以專業(yè)、直觀、易用的 UI 設計,串聯(lián)鳥類數(shù)據(jù)、科研成果與公眾認知 。
該項目是與青海師范大學合作的[青海鳥類資源庫]網(wǎng)站交互及UI設計,青海師范大學是我們的老客戶了,本次項目我們也是從前期的內容整理歸納、交互原型設計、UI設計,再到最后的客戶后期的開發(fā)還原度走查工作,最終實現(xiàn)的效果也獲得了客戶的認可。

項目概述:

產品定位:聚焦青海鳥類生態(tài),打造集科普教育、科研輔助、觀鳥互動于一體的數(shù)字化平臺。既為專業(yè)學者提供精準數(shù)據(jù)檢索、學術成果展示窗口,也向大眾普及鳥類知識、傳播生態(tài)保護理念,成為青海鳥類生態(tài)對外展示的 “數(shù)字名片” 。
目標用戶:需求精準數(shù)據(jù)查詢、學術成果沉淀與共享,關注知識圖譜、文獻列表等功能模塊的科研學者;熱衷鳥類科普、觀鳥活動,期望通過直觀界面了解物種、觀測歷程的生態(tài)保護愛好者;以輕松方式接觸生態(tài)知識,側重可視化展示(如地圖分布、演化流程)與趣味互動(評論區(qū)、相關鳥類推薦 )的普通公眾。
設計風格:色彩以青海地域元素為靈感,藍天、雪山、湖泊藍白漸變打底,搭配鳥類羽毛自然色調,營造清新、貼近自然氛圍;布局遵循 “信息分層、高效瀏覽” 原則,大模塊分區(qū)清晰,用卡片式設計承載內容,既保證視覺呼吸感,又通過微交互增強科技感與操作流暢性
 

設計亮點與價值:

知識圖譜可視化:以鳥類為核心,關聯(lián)棲息環(huán)境、食物鏈等信息,通過動態(tài)交互圖譜,讓用戶直觀理解物種生態(tài)關系,打破知識傳播壁壘;
精準服務多元需求:為學者設計文獻檢索、數(shù)據(jù)統(tǒng)計模塊,支持高效科研工作;為愛好者打造觀鳥圣地推薦、實時評論互動,構建交流社區(qū);為大眾簡化信息層級,用大圖、短文案、輪播展示核心內容,降低科普門檻。
品牌與生態(tài)共鳴:通過統(tǒng)一視覺語言(如 Logo 融入鳥類形態(tài)、底部生態(tài)友好鏈接),強化 “青海鳥類保護數(shù)字陣地” 品牌認知,讓用戶在瀏覽中自然產生生態(tài)守護認同感,助力青海生態(tài)文化傳播。
 
 

從用戶體驗到界面設計:線上教育產品拉開差距的關鍵維度

杰睿

?

在線教育競爭日益激烈的今天,課程內容、教師資源和技術支撐已不再是決定成敗的唯一變量。隨著市場趨于成熟,用戶在多個平臺間的選擇權提升,真正決定平臺是否能留住用戶、激發(fā)學習動力的,是用戶體驗(UX)、交互設計(Interaction Design)和界面設計(UI)這三大維度。

一、為什么“交互體驗”是線上教育的新門檻?

傳統(tǒng)教育強調面對面、即時反饋、儀式感強。而在線教育,則在技術便捷的同時,犧牲了一部分“人”的互動感。這種缺失,正是交互設計需要著力彌補的空白。

教育軟件不僅僅要有過硬的專業(yè)知識,更要彌補相較于線下教學的交互短板。教育不同于娛樂,其流程具備階段性目標、長時間投入、知識內化路徑等特征,單純傳輸內容已遠遠不夠,設計要主動參與到“學習過程建構”中,設計學習路徑、驅動學習行為、重建沉浸體驗。

 

二、交互設計:不僅是“點哪兒”,更是“學下去”

線上教育的交互設計承擔著三個關鍵任務:

  1. 明確學習路徑:用戶能否在首次使用中快速理解“從哪里開始學、接下來做什么、什么時候完成任務”。

  2. 即時反饋與引導:做對了是否能獲得激勵?做錯了是否能被溫柔地引導?這決定了學習動力是否能持續(xù)。

  3. 任務分解與節(jié)奏感控制:學習模塊是否易于拆分、時間是否可控?這些因素影響用戶是否能持續(xù)投入。

舉例來說,我們曾為一個名為“半老外 David 英語啟蒙”小程序參與界面與交互設計。在這個面向兒童與家長的英語學習產品中,為了提高用戶體驗我們進行視覺調整:

  • 圓角卡片式的信息分組,減少信息干擾,提高兒童用戶的內容理解效率。

  • 頁簽式課程結構,將“家長課程”與“孩子課程”進行分類,前者提供全方位了解入口,后者以視頻和生活化場景增強學習沉浸感。

  • 暖色調與IP形象融合的界面風格,既兼顧兒童友好,也塑造了獨特的品牌識別感。20250716-144116.jpeg

這些設計不僅提升了視覺體驗,更在信息傳達效率、任務操作便利性與情緒激勵機制上做到了實效優(yōu)化。

 

三、用戶體驗設計是學習系統(tǒng)的“心理工程”

一個體驗出色的教育平臺,往往在細節(jié)處打動人心:

  • 是否能減少用戶的思考負擔?

  • 是否能讓用戶知道“現(xiàn)在我在哪、接下來該干什么”?

  • 是否在用戶迷茫、卡頓、分心的時候提供適時提醒或激勵?

這其實是一個“設計心理學”在教育場景的落地問題。比如,當學習任務被合理拆分,系統(tǒng)根據(jù)用戶表現(xiàn)實時調整難度,用戶就更容易進入“心流狀態(tài)”;當學習成果被可視化呈現(xiàn),用戶就更容易產生目標感與成就感。這種體驗背后,其實是設計者對用戶學習心理的精準拿捏。

 

四、界面設計:教育產品的認知引擎與品牌載體

教育類產品的信息密度高,任務目標明確,界面設計要兼顧以下幾方面:

  • 視覺層級清晰:主操作路徑需醒目明確,輔助信息適度弱化。

  • 風格統(tǒng)一、情緒調性明確:兒童啟蒙需要溫暖明亮,成人考證則更需要沉穩(wěn)理性。

  • 操作響應及時:點擊反饋、加載狀態(tài)、跳轉邏輯等要精準順暢,降低用戶的“系統(tǒng)不確定性焦慮”。

好的UI不僅是為了“好看”,更是為了提升操作效率、增強內容理解,最終讓學習更輕松、更自然。

 

五、未來發(fā)展趨勢:體驗驅動成為核心競爭力

在線教育正在走向“內容同質化、體驗差異化”的時代。未來產品的核心競爭力,或許不再是誰有獨家教材、誰請來大咖講師,而是:

  • 誰能提供高度個性化、適應性強的學習路徑

  • 誰能構建沉浸感與成就感兼具的交互體驗

  • 誰能通過設計整合技術與教育邏輯,提升學習效率與心理舒適度

 

未來AI、數(shù)據(jù)可視化、語音交互、AR/VR 等前沿技術與設計將深度融合,帶來新一輪體驗升級。而在這一過程中,既懂設計、又懂教育、還了解技術邏輯的“新型產品設計人才”,將成為教育科技公司的核心戰(zhàn)力。

在線教育并不缺內容,也不缺工具,缺的是一個足夠了解用戶行為與認知機制的設計系統(tǒng)。今天的產品競爭,是體驗細節(jié)的比拼;明天的產品革新,是設計認知的升級。

從用戶體驗出發(fā),連接認知與內容;通過交互設計,重構學習路徑;借助界面設計,減少認知摩擦 —— 教育的未來,不只是教得更好,而是“讓人愿意學、堅持學、有效學”。

蘭亭妙微(www.jzvac.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

?

PC端網(wǎng)頁的UI設計趨勢

濤濤

顯示設備的多用化、智能手機應用的普及化、電子設備觸摸屏的普及,這些環(huán)境變化推動了 PC 網(wǎng)頁 UI 設計的新動向。

交互設計思維的流程

濤濤

在設計一個優(yōu)秀的互聯(lián)網(wǎng)產品時,設計流程往往分為幾個階段,每個階段都有清晰的目標和方法。這不僅幫助我們找到真正的用戶需求,也確保設計思路清晰、可執(zhí)行。下面,我們用簡單易懂的方式來講解整個設計流程。

交互設計是什么?有什么用?

濤濤

交互設計( interaction design, IXD ),從字面上來說,交互即為相互作用相互影響,設計即為理解與傳達。在互聯(lián)網(wǎng)產品中,交互設計對用戶體驗產生很大的影響。本文將圍繞交互設計進行分析,與你分享。

日歷

鏈接

個人資料

藍藍設計的小編 http://www.jzvac.com

存檔