国产黄色免费网站_久久天天做天天爱综合色_精品国产一区久久久_成人黄色激情网站_久久成人在线视频_美女一区二区在线观看_亚洲精品免费一区亚洲精品免费精品一区 _91精品国产综合久久精品麻豆

首頁(yè)

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

杰睿

告別命令,迎接意圖

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

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

人工智能正在為UI設(shè)計(jì)帶來(lái)類似的轉(zhuǎn)變,讓我們擺脫僵硬、循序漸進(jìn)的流程,走向流暢、直觀的工作流程。交互的本質(zhì)正在發(fā)生轉(zhuǎn)變,正如Jakob Nielsen最近在其文章中強(qiáng)調(diào)的那樣,這種演變需要我們?nèi)褙炞?。他闡述了一個(gè)至關(guān)重要的見(jiàn)解:

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

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

點(diǎn)擊、滑動(dòng)、詢問(wèn):交互方式正在演變

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

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

但這簡(jiǎn)單來(lái)說(shuō)意味著什么呢?比如,你需要將一個(gè)文件從一個(gè)文件夾移動(dòng)到另一個(gè)文件夾——這是一個(gè)典型的直接操作的例子——你看到這個(gè)文件,抓住它,然后把它移動(dòng)到你想要的位置。

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

如果你不小心把它放在了錯(cuò)誤的地方,你會(huì)立即看到結(jié)果,調(diào)整方法,然后再次拖動(dòng)它,直到它落到你想要的位置。這種交互方式感覺(jué)很直觀,因?yàn)樗畲笙薅鹊販p少了認(rèn)知投入——系統(tǒng)會(huì)實(shí)時(shí)響應(yīng)你的操作,強(qiáng)化了直接參與和掌控的感覺(jué)。

這個(gè)過(guò)程越順暢,交互感覺(jué)就越自然、越令人滿意。

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

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

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

幾十年來(lái),直接操控一直是設(shè)計(jì)的基本原則。然而,隨著我們向人工智能驅(qū)動(dòng)的系統(tǒng)過(guò)渡,我們必須思考這些原則如何演變——以及它們何時(shí)會(huì)被目標(biāo)導(dǎo)向的交互所取代。

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

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

這種交互仍然需要一定程度的操作,因?yàn)槟惚仨氈付ㄒ脸膶?duì)象,但不同之處在于,你是在優(yōu)化請(qǐng)求,而不是直接修改像素。你不再需要一絲不茍地編輯每個(gè)細(xì)節(jié),而是與系統(tǒng)協(xié)作,以達(dá)到預(yù)期的效果。這種轉(zhuǎn)變標(biāo)志著 UI 設(shè)計(jì)的根本性變革。

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

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

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

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

為了設(shè)計(jì)無(wú)縫的人工智能體驗(yàn),我們需要識(shí)別并構(gòu)建熟悉的模式。

例如,在許多 AI 應(yīng)用中,開(kāi)放式提示框可以充當(dāng)破冰船,幫助用戶開(kāi)啟對(duì)話。這種方法建立在人們熟悉的輸入框模式之上,幾十年來(lái),該模式一直是 UI 的標(biāo)準(zhǔn)組件,如今,它又扮演著新的角色。無(wú)論是在 ChatGPT 中輸入問(wèn)題,還是指示設(shè)計(jì)工具生成布局,這種方法都能提供靈活性,同時(shí)以直觀易懂的方式引導(dǎo)用戶意圖。

將顯示縮放圖像
各種 AI 聊天機(jī)器人和助手界面的拼貼畫(huà),展示了不同的開(kāi)放式輸入模式。圖片包含來(lái)自 ChatGPT、Claude 和 Fin 等 AI 驅(qū)動(dòng)工具的多個(gè)文本輸入字段。一些界面帶有占位符,例如“提問(wèn)”或“指定寫(xiě)作任務(wù)”,而其他界面則顯示示例問(wèn)題或答案。
打開(kāi)輸入模式示例,來(lái)源

這種方法不僅限于交互模式——它也擴(kuò)展到用戶體驗(yàn)框架。

例如,Evan Sunwall 提出了“Promptframes”的概念,通過(guò)將即時(shí)寫(xiě)作和生成式 AI 融入設(shè)計(jì)流程,作為傳統(tǒng)線框圖的補(bǔ)充。其目標(biāo)是通過(guò)在工作流程的早期階段融入 AI 驅(qū)動(dòng)的內(nèi)容生成,提高內(nèi)容保真度并加速用戶測(cè)試。然而,這一概念建立在線框圖的基礎(chǔ)上,這進(jìn)一步強(qiáng)調(diào)了理解傳統(tǒng)用戶體驗(yàn)結(jié)構(gòu)對(duì)于有效設(shè)計(jì) AI 驅(qū)動(dòng)體驗(yàn)的重要性。

最后的想法

不需要霓虹燈“人工智能驅(qū)動(dòng)”標(biāo)簽;它應(yīng)該無(wú)縫地融入用戶旅程,感覺(jué)就像意圖的自然延伸。

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

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

 
蘭亭妙微(www.newchinaweekly.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
 

以人為本的人工智能:用戶體驗(yàn)設(shè)計(jì)師的 5 個(gè)框架

杰睿

以一個(gè)人為決策樹(shù)中心的插圖

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

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

將顯示縮放圖像
Loona機(jī)器人玩具圖片
KEYi Tech 的 Loona 機(jī)器人 — 圖片來(lái)源:keyirobot.com

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

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

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

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

1. IBM 的 AI/人類語(yǔ)境模型

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

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

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

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

2. Google 的可解釋性評(píng)估標(biāo)準(zhǔn)

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

將顯示縮放圖像
谷歌網(wǎng)站截圖
資源:Google 的可解釋性評(píng)估標(biāo)準(zhǔn)

該評(píng)分標(biāo)準(zhǔn)分為三個(gè)信息級(jí)別:一般級(jí)別、特征級(jí)別決策級(jí)別。

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

3.微軟的人機(jī)交互體驗(yàn)(HAX)工具包

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

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

HAX 工具包功能多樣,允許團(tuán)隊(duì)根據(jù)自身獨(dú)特的需求、用例、產(chǎn)品類別和目標(biāo),混合搭配其設(shè)計(jì)工具。HAX 工具包的關(guān)鍵組件包括:

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

4. HCI Institute 的 AI 頭腦風(fēng)暴工具包

AI 頭腦風(fēng)暴工具包由卡內(nèi)基梅隆大學(xué)人機(jī)交互 (HCI) 研究所的研究人員創(chuàng)建,旨在提煉 AI 能力,幫助團(tuán)隊(duì)探索如何利用 AI 構(gòu)建應(yīng)用。創(chuàng)新的停滯往往并非源于技術(shù),而是因?yàn)閳F(tuán)隊(duì)選擇了錯(cuò)誤的項(xiàng)目。AI 頭腦風(fēng)暴工具包解決了這個(gè)問(wèn)題,提供了一種結(jié)構(gòu)化的方法來(lái)設(shè)計(jì)既技術(shù)可行又以用戶為中心的 AI 驅(qū)動(dòng)解決方案。

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

該套件的結(jié)構(gòu)化方法降低了開(kāi)發(fā)不相關(guān)或不必要的AI解決方案的風(fēng)險(xiǎn)。通過(guò)關(guān)注AI的功能和用戶的需求,該套件使團(tuán)隊(duì)能夠進(jìn)行周到而有效的創(chuàng)新。該套件將AI功能分為不同的功能,例如:

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

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

5. Google 的 People + AI 指南

《People + AI 指南》由 Google 的多學(xué)科團(tuán)隊(duì)People + AI Research (PAIR) 創(chuàng)建,提供了方法、最佳實(shí)踐、案例研究和設(shè)計(jì)模式的全面資源,旨在幫助設(shè)計(jì)師、開(kāi)發(fā)人員和產(chǎn)品團(tuán)隊(duì)創(chuàng)建有影響力的 AI 驅(qū)動(dòng)解決方案。

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

該指南介紹了 20 多種設(shè)計(jì)模式,為 AI 產(chǎn)品設(shè)計(jì)提供了實(shí)用且以行動(dòng)為導(dǎo)向的指導(dǎo)。這些模式專注于解決產(chǎn)品開(kāi)發(fā)過(guò)程中的關(guān)鍵挑戰(zhàn),并圍繞常見(jiàn)問(wèn)題進(jìn)行組織,以幫助團(tuán)隊(duì)找到相關(guān)的見(jiàn)解。

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

這五個(gè)框架為設(shè)計(jì)能夠自然融入我們?nèi)粘I畹娜斯ぶ悄艿於嘶A(chǔ)——無(wú)論是好玩的、會(huì)對(duì)話的機(jī)器人玩具,還是讓我們保持井然有序、高效的應(yīng)用程序。作為用戶體驗(yàn)設(shè)計(jì)師,以人為本的框架來(lái)處理人工智能意味著要在新技術(shù)能力與責(zé)任之間取得平衡,審視人工智能是否已準(zhǔn)備好并適用于每個(gè)用例,并構(gòu)建具有用戶反饋循環(huán)的系統(tǒng)以推動(dòng)持續(xù)改進(jìn)。

 

蘭亭妙微(www.newchinaweekly.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

《交互設(shè)計(jì)小白如何從“流程圖思維”入門(mén)?一套拆解任務(wù)流程的實(shí)用方法》

杰睿

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

 流程圖是什么,不是畫(huà)圖,是表達(dá)“用戶怎么一步步完成目標(biāo)”

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

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

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

初學(xué)者常犯的誤區(qū):關(guān)注“頁(yè)面”,而忽略“操作過(guò)程”

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

 拆解一個(gè)真實(shí)任務(wù)流示例:「預(yù)約會(huì)議室」

我們以一個(gè)企業(yè)內(nèi)部系統(tǒng)中的真實(shí)任務(wù)流為例:
 用戶目標(biāo):預(yù)約明天下午的會(huì)議室開(kāi)會(huì)

 用戶流程拆解:

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

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

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

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

很多人以為流程圖就必須要“畫(huà)”,但對(duì)于剛?cè)腴T(mén)的同學(xué),用文字寫(xiě)出一張流程清單,已經(jīng)很強(qiáng)了!

操作方法:

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

總結(jié)一套「新手流程圖五步法」

很多人不知道從哪開(kāi)始畫(huà)流程,其實(shí)你可以用下面這套通用五步法

新手流程圖五步法:

步驟 問(wèn)題提示 示例
1. 明確用戶目標(biāo) 他要完成什么任務(wù)? 預(yù)約會(huì)議室、提交訂單等
2. 確定起點(diǎn)入口 他從哪開(kāi)始這件事? 首頁(yè)、菜單欄、按鈕
3. 列出關(guān)鍵步驟 他必須做哪些操作? 選擇、輸入、確認(rèn)等
4. 標(biāo)記系統(tǒng)反饋 系統(tǒng)會(huì)給出什么回應(yīng)? 成功提示、錯(cuò)誤校驗(yàn)等
5. 考慮中斷/異常 用戶會(huì)在哪些地方卡住? 驗(yàn)證失敗、網(wǎng)絡(luò)斷開(kāi)等
有時(shí)候不需要一次做得很完美,先寫(xiě)出主流程,再補(bǔ)充邊界情況,也很棒。
 
推薦你這樣開(kāi)始練習(xí):
選擇一個(gè)你熟悉的 App,如微信、小紅書(shū)、餓了么
模擬一個(gè)真實(shí)任務(wù),如“下單”、“發(fā)評(píng)論”、“修改資料”
用上面五步法寫(xiě)出完整流程清單,別畫(huà)圖也行!
 
蘭亭妙微(www.newchinaweekly.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

界面設(shè)計(jì):Web3場(chǎng)景下,大屏設(shè)計(jì)中的用戶體驗(yàn)要點(diǎn)解析

杰睿

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

d65a7188-3597-4010-9533-c1bb1e02b796.png

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

一、Web3應(yīng)用為何需要大屏?

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

二、Web3大屏設(shè)計(jì)的5個(gè)核心用戶體驗(yàn)要點(diǎn)

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

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

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

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

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

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

如何傳達(dá)錯(cuò)誤

杰睿

一個(gè)人對(duì)錯(cuò)誤的反應(yīng)——無(wú)論是自己犯的還是他人犯的——是一個(gè)復(fù)雜且常常令人痛苦的心理過(guò)程。在本文中,我將解釋為什么幾乎所有的錯(cuò)誤提示信息的設(shè)計(jì)都公然無(wú)視用戶體驗(yàn)理論。我將使用交互式原型來(lái)展示如何解決這個(gè)問(wèn)題。我還將轉(zhuǎn)向交互理論,回顧模式的概念,并解釋可逆性、恰當(dāng)性和及時(shí)性的原則。

我們的用戶不是程序員

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

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

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

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

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

簡(jiǎn)而言之,程序員對(duì)錯(cuò)誤消息產(chǎn)生了一種容忍度——所有那些帶有感嘆號(hào)的圓圈和冗長(zhǎng)、說(shuō)教的紅色文字。

心理學(xué)家會(huì)怎么說(shuō)?

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

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

重要的是不要用消極情緒來(lái)強(qiáng)化錯(cuò)誤,因?yàn)榇竽X對(duì)此非常敏感,并會(huì)將這種行為標(biāo)記為不值得投入精力的事情。

我知道有些人看到錯(cuò)誤信息就會(huì)慌亂不已。他們開(kāi)始點(diǎn)擊所有按鈕,只為讓它盡快消失。這些人很難適應(yīng)界面,因此他們傾向于完全避免與界面交互。這并不是因?yàn)樗麄冇薮溃且驗(yàn)樗麄兪瞧胀ㄈ?mdash;—而不是程序員。

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

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

焦點(diǎn)切換時(shí)驗(yàn)證

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

通過(guò)像傻瓜一樣對(duì)待用戶,開(kāi)發(fā)人員產(chǎn)生了兩個(gè)問(wèn)題:第一 - 他們浪費(fèi)時(shí)間構(gòu)建“保護(hù)”,第二 - 他們陷入了一種虛假的安全感(沒(méi)有比“通過(guò)模糊性實(shí)現(xiàn)安全”更糟糕的保護(hù))。

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

通常如何做

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

  1. 開(kāi)始。所有字段均為空。無(wú)錯(cuò)誤。“繼續(xù)”按鈕可用。
  2. 按下“繼續(xù)”按鈕。所有空白字段均被標(biāo)記為錯(cuò)誤。
  3. 焦點(diǎn)從第一個(gè)字段移開(kāi)。突然間,它不再被標(biāo)記為錯(cuò)誤了。

讓我們來(lái)分析一下。

激活按鈕——這很好,雅虎點(diǎn)贊了。我有一篇名為“禁用按鈕”的文章,解釋了這背后的理論和實(shí)踐。如果你仍然認(rèn)為禁用按鈕對(duì)用戶有幫助,那你絕對(duì)應(yīng)該讀一讀。

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

下一個(gè)原則是恰當(dāng)性。用戶點(diǎn)擊了“繼續(xù)”按鈕——交互的對(duì)象是按鈕,而不是輸入字段。如果按鈕發(fā)出某種震動(dòng)或吱吱聲來(lái)表達(dá)不滿,這可以理解。但是輸入字段呢?根本沒(méi)人碰過(guò)它們!它們?cè)趺纯赡芨兄桨粹o的情緒呢?只有程序員知道,在代碼中,這些對(duì)象是相互關(guān)聯(lián)的——但外部觀察者一無(wú)所知,因?yàn)樗鼈冎g沒(méi)有視覺(jué)聯(lián)系。

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

這里,一切都非常不對(duì)勁!

調(diào)試模式

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

老式計(jì)算機(jī)有一種特殊的“HALT”模式,用于調(diào)試錯(cuò)誤,也稱為“控制臺(tái)模式”。如果處理器嘗試執(zhí)行無(wú)效操作,程序?qū)⒈恢袛?,處理器將停止運(yùn)行,并切換到控制臺(tái)模式。您也可以通過(guò)按下物理“HALT”按鈕手動(dòng)觸發(fā) HALT 中斷。使用開(kāi)關(guān)或調(diào)試程序(在單獨(dú)的控制臺(tái)上運(yùn)行),您可以修復(fù)錯(cuò)誤并返回程序執(zhí)行模式。

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

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

  1. 文件選擇模式
  2. 復(fù)印模式
  3. 管理員模式,需要對(duì)硬件錯(cuò)誤做出響應(yīng)

我見(jiàn)過(guò)有人批評(píng)這類解決方案:“窗口疊在其他窗口上看起來(lái)很丑”。即便接受了這種說(shuō)法,我仍然無(wú)法認(rèn)同設(shè)計(jì)師通常提出的替代方案:“我們把這個(gè)窗口移除,把錯(cuò)誤顯示到別的地方,這樣更美觀。” 就好像設(shè)計(jì)師忘記了自己是工程師,只是拿起畫(huà)筆,像個(gè)泥水匠一樣把瑕疵掩蓋起來(lái)。

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

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

糟糕的算法變成了“最佳實(shí)踐”

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

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

讓我們來(lái)分析一下。

一個(gè)活動(dòng)按鈕——很好。亞馬遜正在跟上雅虎的步伐。

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

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

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

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

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

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

激活按鈕——不錯(cuò)。沒(méi)有自動(dòng)對(duì)焦,但至少界面會(huì)自動(dòng)滾動(dòng)到第一個(gè)字段并顯示錯(cuò)誤。

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

重要的是不要用消極情緒來(lái)強(qiáng)化錯(cuò)誤,因?yàn)榇竽X對(duì)此非常敏感,并會(huì)將這種行為記錄為不值得花費(fèi)精力的事情。

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

日期字段為空,點(diǎn)擊“下一步”按鈕,字段自動(dòng)對(duì)焦。手機(jī)字段為空,點(diǎn)擊“下一步”——完全沒(méi)有自動(dòng)對(duì)焦。為什么?這背后的想法是什么?劇透:根本沒(méi)這回事。只是算法出了問(wèn)題。

谷歌甚至更進(jìn)一步——你輸入的每一個(gè)字符它都會(huì)責(zé)罵你……

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

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

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

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

事件與狀態(tài)

我們用“錯(cuò)誤”這個(gè)詞來(lái)描述兩種截然不同的事物:事件狀態(tài)??焖倩仡櫼幌拢寒?dāng)處理器嘗試執(zhí)行無(wú)效操作時(shí),它會(huì)觸發(fā)中斷并進(jìn)入調(diào)試模式。這是一次性事件。我們說(shuō)“發(fā)生了錯(cuò)誤”。然后,我們?nèi)ふ覍?dǎo)致崩潰的內(nèi)存中的特定值。該值——或者更準(zhǔn)確地說(shuō),存儲(chǔ)單元的狀態(tài)——也稱為“錯(cuò)誤”。換句話說(shuō),我們模糊了因果之間的界限——僅僅是因?yàn)槲覀儧](méi)有想出單獨(dú)的詞。為了避免混淆,我將使用兩個(gè)術(shù)語(yǔ):進(jìn)程錯(cuò)誤(事件,某個(gè)時(shí)間點(diǎn))和數(shù)據(jù)錯(cuò)誤(內(nèi)存中的錯(cuò)誤值,一種狀態(tài))。

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

空字段

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

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

不要這么做。我準(zhǔn)備了一個(gè)交互式原型來(lái)向你展示應(yīng)該怎么做。

狀態(tài)改變

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

現(xiàn)在手動(dòng)按下按鈕——水不會(huì)突然變冷。了解導(dǎo)致?tīng)顟B(tài)變化的具體原因很重要。

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

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

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

一次一個(gè)動(dòng)作

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

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

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

原型就是這樣。屏幕上只有一個(gè)輸入字段。用戶輸入數(shù)據(jù),按下“繼續(xù)”,屏幕就會(huì)滾動(dòng)到下一步。如果你手動(dòng)嘗試在空白字段處向前滾動(dòng),屏幕會(huì)迅速?gòu)椈兀?ldquo;不行,不行”。輸入字段保持焦點(diǎn),提示用戶輸入數(shù)據(jù)。無(wú)需任何額外的高亮——畢竟,它是屏幕上唯一的字段。完美。

如果你點(diǎn)擊“繼續(xù)”,但輸入框?yàn)榭栈蜞]箱地址缺少“@”符號(hào),鍵盤(pán)會(huì)彈回來(lái),仿佛在說(shuō):“想繼續(xù)嗎?那就繼續(xù)填寫(xiě)吧。” 沒(méi)有任何錯(cuò)誤信息!

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

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

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

讓我們?cè)O(shè)想一個(gè)場(chǎng)景:用戶尚未填寫(xiě)所有字段,點(diǎn)擊了“繼續(xù)”按鈕。界面立即聚焦于第一個(gè)空白字段,調(diào)出屏幕鍵盤(pán),并滾動(dòng)到該字段正上方,方便用戶查看正在輸入的內(nèi)容。即使屏幕上有多個(gè)字段,我們?nèi)匀粓?jiān)持“一次一個(gè)操作”的原則,巧妙地將其他字段隱藏在鍵盤(pán)下方。在活動(dòng)字段下方,會(huì)出現(xiàn)一條提示:“所有字段必須填寫(xiě)”。這不是錯(cuò)誤消息,而是一個(gè)有用的提示,沒(méi)有任何令人擔(dān)憂的危險(xiǎn)信號(hào)。

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

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

州經(jīng)理

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

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

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

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

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

結(jié)論

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

  1. 絕大多數(shù)現(xiàn)有解決方案都?xì)w結(jié)為切換到“錯(cuò)誤糾正模式”,而退出該模式要么不可能,要么極其困難(只能通過(guò)算法中的錯(cuò)誤)。這種方法雖然被廣泛接受,但各地的實(shí)現(xiàn)方式卻有所不同:空白字段可能被視為錯(cuò)誤,也可能被視為正常,有時(shí)甚至?xí)谕黄聊簧匣旌铣霈F(xiàn)。用戶會(huì)背負(fù)負(fù)面情緒,因?yàn)橄到y(tǒng)會(huì)“懲罰”他們破壞程序。這種方法絕對(duì)不可接受,必須予以糾正。
  2. 缺少數(shù)據(jù)并不意味著數(shù)據(jù)錯(cuò)誤??瞻鬃侄问腔?dòng)的邀請(qǐng),而非危險(xiǎn)信號(hào)。
  3. 我們不需要兩種模式:數(shù)據(jù)錄入和糾錯(cuò)。一種模式——數(shù)據(jù)錄入——就足夠了。
  4. 數(shù)據(jù)錯(cuò)誤和流程錯(cuò)誤是不同的。它們應(yīng)該顯示在相應(yīng)的層級(jí)結(jié)構(gòu)中:數(shù)據(jù)錯(cuò)誤應(yīng)該顯示在數(shù)據(jù)容器中,而流程錯(cuò)誤應(yīng)該顯示在全局通知中。
  5. 如果您希望對(duì)一個(gè)對(duì)象執(zhí)行的操作影響另一個(gè)對(duì)象,請(qǐng)?jiān)谒鼈冎g建立清晰的視覺(jué)聯(lián)系。
  6. “一屏一操作”原則一定要試一下。如果有效,那你太棒了!
  7. 編寫(xiě)一個(gè)簡(jiǎn)單的狀態(tài)管理調(diào)度程序。借助它,你可以引導(dǎo)用戶回到最早未完成的步驟。
  8. 創(chuàng)建原型——它們是新想法的最佳概念證明。
蘭亭妙微(www.newchinaweekly.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

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

杰睿

 

項(xiàng)目背景:

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

項(xiàng)目概述:

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

設(shè)計(jì)亮點(diǎn)與價(jià)值:

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

從用戶體驗(yàn)到界面設(shè)計(jì):線上教育產(chǎn)品拉開(kāi)差距的關(guān)鍵維度

杰睿

?

在線教育競(jìng)爭(zhēng)日益激烈的今天,課程內(nèi)容、教師資源和技術(shù)支撐已不再是決定成敗的唯一變量。隨著市場(chǎng)趨于成熟,用戶在多個(gè)平臺(tái)間的選擇權(quán)提升,真正決定平臺(tái)是否能留住用戶、激發(fā)學(xué)習(xí)動(dòng)力的,是用戶體驗(yàn)(UX)、交互設(shè)計(jì)(Interaction Design)和界面設(shè)計(jì)(UI)這三大維度。

一、為什么“交互體驗(yàn)”是線上教育的新門(mén)檻?

傳統(tǒng)教育強(qiáng)調(diào)面對(duì)面、即時(shí)反饋、儀式感強(qiáng)。而在線教育,則在技術(shù)便捷的同時(shí),犧牲了一部分“人”的互動(dòng)感。這種缺失,正是交互設(shè)計(jì)需要著力彌補(bǔ)的空白。

教育軟件不僅僅要有過(guò)硬的專業(yè)知識(shí),更要彌補(bǔ)相較于線下教學(xué)的交互短板。教育不同于娛樂(lè),其流程具備階段性目標(biāo)、長(zhǎng)時(shí)間投入、知識(shí)內(nèi)化路徑等特征,單純傳輸內(nèi)容已遠(yuǎn)遠(yuǎn)不夠,設(shè)計(jì)要主動(dòng)參與到“學(xué)習(xí)過(guò)程建構(gòu)”中,設(shè)計(jì)學(xué)習(xí)路徑、驅(qū)動(dòng)學(xué)習(xí)行為、重建沉浸體驗(yàn)。

 

二、交互設(shè)計(jì):不僅是“點(diǎn)哪兒”,更是“學(xué)下去”

線上教育的交互設(shè)計(jì)承擔(dān)著三個(gè)關(guān)鍵任務(wù):

  1. 明確學(xué)習(xí)路徑:用戶能否在首次使用中快速理解“從哪里開(kāi)始學(xué)、接下來(lái)做什么、什么時(shí)候完成任務(wù)”。

  2. 即時(shí)反饋與引導(dǎo):做對(duì)了是否能獲得激勵(lì)?做錯(cuò)了是否能被溫柔地引導(dǎo)?這決定了學(xué)習(xí)動(dòng)力是否能持續(xù)。

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

舉例來(lái)說(shuō),我們?cè)鵀橐粋€(gè)名為“半老外 David 英語(yǔ)啟蒙”小程序參與界面與交互設(shè)計(jì)。在這個(gè)面向兒童與家長(zhǎng)的英語(yǔ)學(xué)習(xí)產(chǎn)品中,為了提高用戶體驗(yàn)我們進(jìn)行視覺(jué)調(diào)整:

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

  • 頁(yè)簽式課程結(jié)構(gòu),將“家長(zhǎng)課程”與“孩子課程”進(jìn)行分類,前者提供全方位了解入口,后者以視頻和生活化場(chǎng)景增強(qiáng)學(xué)習(xí)沉浸感。

  • 暖色調(diào)與IP形象融合的界面風(fēng)格,既兼顧兒童友好,也塑造了獨(dú)特的品牌識(shí)別感。20250716-144116.jpeg

這些設(shè)計(jì)不僅提升了視覺(jué)體驗(yàn),更在信息傳達(dá)效率、任務(wù)操作便利性與情緒激勵(lì)機(jī)制上做到了實(shí)效優(yōu)化。

 

三、用戶體驗(yàn)設(shè)計(jì)是學(xué)習(xí)系統(tǒng)的“心理工程”

一個(gè)體驗(yàn)出色的教育平臺(tái),往往在細(xì)節(jié)處打動(dòng)人心:

  • 是否能減少用戶的思考負(fù)擔(dān)?

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

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

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

 

四、界面設(shè)計(jì):教育產(chǎn)品的認(rèn)知引擎與品牌載體

教育類產(chǎn)品的信息密度高,任務(wù)目標(biāo)明確,界面設(shè)計(jì)要兼顧以下幾方面:

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

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

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

好的UI不僅是為了“好看”,更是為了提升操作效率、增強(qiáng)內(nèi)容理解,最終讓學(xué)習(xí)更輕松、更自然。

 

五、未來(lái)發(fā)展趨勢(shì):體驗(yàn)驅(qū)動(dòng)成為核心競(jìng)爭(zhēng)力

在線教育正在走向“內(nèi)容同質(zhì)化、體驗(yàn)差異化”的時(shí)代。未來(lái)產(chǎn)品的核心競(jìng)爭(zhēng)力,或許不再是誰(shuí)有獨(dú)家教材、誰(shuí)請(qǐng)來(lái)大咖講師,而是:

  • 誰(shuí)能提供高度個(gè)性化、適應(yīng)性強(qiáng)的學(xué)習(xí)路徑

  • 誰(shuí)能構(gòu)建沉浸感與成就感兼具的交互體驗(yàn)

  • 誰(shuí)能通過(guò)設(shè)計(jì)整合技術(shù)與教育邏輯,提升學(xué)習(xí)效率與心理舒適度

 

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

在線教育并不缺內(nèi)容,也不缺工具,缺的是一個(gè)足夠了解用戶行為與認(rèn)知機(jī)制的設(shè)計(jì)系統(tǒng)。今天的產(chǎn)品競(jìng)爭(zhēng),是體驗(yàn)細(xì)節(jié)的比拼;明天的產(chǎn)品革新,是設(shè)計(jì)認(rèn)知的升級(jí)。

從用戶體驗(yàn)出發(fā),連接認(rèn)知與內(nèi)容;通過(guò)交互設(shè)計(jì),重構(gòu)學(xué)習(xí)路徑;借助界面設(shè)計(jì),減少認(rèn)知摩擦 —— 教育的未來(lái),不只是教得更好,而是“讓人愿意學(xué)、堅(jiān)持學(xué)、有效學(xué)”。

蘭亭妙微(www.newchinaweekly.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

?

PC端網(wǎng)頁(yè)的UI設(shè)計(jì)趨勢(shì)

濤濤

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

交互設(shè)計(jì)思維的流程

濤濤

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

交互設(shè)計(jì)是什么?有什么用?

濤濤

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

日歷

鏈接

個(gè)人資料

藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.newchinaweekly.com

存檔

国精产品999国精产品官网| 在线视频日本亚洲性| 好吊妞视频这里有精品| 91国内精品白嫩初高生| 1024在线看片你懂得| 超级碰碰视频| 影音四色91| 黄色仓库视频网站| av中文字幕在线观看| 不卡在线视频| 免费在线视频你懂得| 六月天色婷婷| 羞羞视频在线观看| 一二三四社区在线视频6| aaa大片在线观看| 凹凸成人在线| 日韩综合在线视频| 国产精品视频在线看| 欧美视频一区在线| 在线观看三级视频欧美| 国产一区二区三区在线观看网站 | 色综合666| 国模精品一区二区三区| 国产在线999| 国产精品第七影院| 欧美在线视频在线播放完整版免费观看 | 国产综合久久久久久| 国产树林野战在线播放| 国产精品一区二区a| 91精品91久久久中77777老牛| 亚欧洲乱码视频| 性猛交ⅹxxx富婆video| 91猫先生在线| 国产精品久久国产精麻豆96堂| 一卡二卡在线观看| 在线免费观看日韩视频| 精品人妻午夜一区二区三区四区 | 欧美96在线丨欧| 国产校园另类小说区| 欧美一级欧美三级在线观看| 国产成人自拍视频在线观看| 中文字幕日韩精品无码内射| 国产福利在线导航| 亚洲精品在线视频免费| 可以在线观看的黄色| 久久97久久97精品免视看秋霞| 国产乱人伦精品一区| 精品一区二区三区在线播放视频| 欧美日韩国产影院| 欧美剧在线免费观看网站| 68精品国产免费久久久久久婷婷| 国产精品扒开腿做爽爽爽的视频| 日韩视频一二三| 久久高清内射无套| 91丨九色丨海角社区| 欧洲免费av| 巨骚激情综合| 国际精品欧美精品| 国产偷国产偷亚洲高清人白洁| 日韩电影中文 亚洲精品乱码| 欧美多人爱爱视频网站| 国产精品久久久一区| 999精品视频在线| 亚洲天堂自拍偷拍| 在线亚洲电影| av伊人久久| 亚洲激情图片小说视频| 欧美日韩美女一区二区| 亚洲欧洲午夜一线一品| 欧美有码在线观看视频| 日本三级免费网站| 在线播放一级片| 你懂的视频在线观看| 欧美1区2区| 在线观看亚洲a| 成人免费高清完整版在线观看| 在线视频观看一区二区| 超薄肉色丝袜一二三| 欧美爆操老女人| www视频在线观看| 久久精品二区亚洲w码| 亚洲国产高清福利视频| 亚洲韩国在线| 国产人妖在线观看| 亚洲aaa视频| 免费观看又色又爽又黄的网站| 香蕉久久久久久| 国产视频一区不卡| 91av在线精品| 欧美xxxxx精品| 涩涩网站在线观看| 蜜桃传媒麻豆第一区在线观看| 成人av在线播放网站| 开心九九激情九九欧美日韩精美视频电影| 九色网com| 亚洲一级免费在线观看| www.日韩系列| 秋霞在线一区| 国产成人啪精品午夜在线观看| 国产成人精品三级| 日本黄色一级视频| 91精品久久久久久综合乱菊 | 99热在线观看| 四虎永久国产精品| 色狠狠色狠狠综合| 九九亚洲视频| 免费一级片网址| 国产欧美一区二区精品性色超碰| 精精国产xxxx视频在线中文版 | 2019日本中文字幕| 在线观看污视频| 国内精品偷拍视频| 国产三级做爰在线观看| 亚洲国产欧美视频| 国产精品日韩av| 色婷婷激情综合| 人妻 日韩精品 中文字幕| 亚洲美女屁股眼交| 在线视频中文字幕| 成人影视免费观看| 8x8x8国产精品| 青草成人免费视频| 亚洲一区视频在线播放| 麻豆av在线| 超碰在线亚洲| 欧美日韩一区二区免费视频| 视频一区视频二区视频三区高| 国产精品一区二区三区在线免费观看| 欧美少妇网站| 一区二区三区日韩在线观看| 蜜桃传媒视频第一区入口在线看| 丰满少妇在线观看资源站| 色老板在线视频| 免费xxxx性欧美18vr| 2019最新中文字幕| 免费看一级一片| 91超碰在线播放| 一区二区三区中文免费| 亚洲一区二区在线看| 日韩免费一二三区| 在线播放免费av| 中文字幕制服丝袜一区二区三区| 欧美黄色直播| 综合区小说区图片区在线一区| 亚洲自拍电影| 亚洲午夜在线视频| 国产日产欧美精品| 无码人妻久久一区二区三区不卡| 成人性生活av| 色婷婷综合久久久中文一区二区| 国产欧美日韩网站| 亚洲国产福利视频| 韩国精品福利一区二区三区| 亚洲第一视频网站| 一级特级黄色片| 黄色资源在线观看| 久久精品人人做人人爽电影蜜月| 亚洲精品一区二区三区精华液| 7777在线视频| 一个人看的www片免费高清视频 | 欧美日韩一区二区免费视频| 日韩人妻精品无码一区二区三区| 四虎黄色影院| 99国产欧美久久久精品| 亚洲福利av| 青青草.com| 国产精品自拍三区| 欧洲久久久久久| 91视频最新地址| 麻豆成人久久精品二区三区红| 亚洲最大成人网色| 伊人影院蕉久552| 亚洲影院一区| aa成人免费视频| 日韩精品一区二区亚洲av| 在线综合色站| 精品国产自在精品国产浪潮| 久久这里只有精品国产| 99精品在线免费观看| 亚洲欧洲日韩女同| 国产色一区二区三区| 超碰在线电影| 亚洲黄色免费电影| 中文字幕在线综合| 国产不卡在线| 欧美一区二区精品在线| 国产馆在线观看| 日韩精品视频中文字幕| 欧美午夜精品理论片a级按摩| 巨乳女教师的诱惑| 男女性激情视频在线观看| 久久一区二区三区国产精品| 久久久久久久9| 免费在线观看国产黄| 国产成人一区| 日韩美女在线看| 亚洲日韩第九十九页| 国产高清精品在线| 免费看日本毛片| 黄网站app在线观看|