一個(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á)的是：不要僅僅依賴自己的專(zhuān)業(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é)的角度來(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ú)特的同理心。
當(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è)階段：
讓我們來(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ì)勁！
界面有“模式”的概念。在我的大學(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 完美地詮釋了各種模式：
我見(jiàn)過(guò)有人批評(píng)這類(lèi)解決方案：“窗口疊在其他窗口上看起來(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ī)則。
乍一看，似乎所有網(wǎng)站的錯(cuò)誤顯示都和雅虎一模一樣。所以這肯定是“最佳實(shí)踐”，是行業(yè)標(biāo)準(zhǔn)……但事實(shí)并非如此！每個(gè)人的做法都不一樣。我們來(lái)看看亞馬遜：
讓我們來(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í)？把文本涂成紅色，然后把信息分散到屏幕的不同位置。
這可不行。我們趕緊解決吧！
我們用“錯(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)是如何變化的。打開(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ì)介紹）。
根據(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)之類(lèi)的問(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ì)我們自己更有利的東西。
為了創(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ì)的文章。
因此，我們發(fā)現(xiàn)了以下事實(shí)：
?
在線教育競(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）這三大維度。
傳統(tǒng)教育強(qiáng)調(diào)面對(duì)面、即時(shí)反饋、儀式感強(qiáng)。而在線教育，則在技術(shù)便捷的同時(shí)，犧牲了一部分“人”的互動(dòng)感。這種缺失，正是交互設(shè)計(jì)需要著力彌補(bǔ)的空白。
教育軟件不僅僅要有過(guò)硬的專(zhuān)業(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ì)承擔(dān)著三個(gè)關(guān)鍵任務(wù)：
明確學(xué)習(xí)路徑：用戶能否在首次使用中快速理解“從哪里開(kāi)始學(xué)、接下來(lái)做什么、什么時(shí)候完成任務(wù)”。
即時(shí)反饋與引導(dǎo)：做對(duì)了是否能獲得激勵(lì)？做錯(cuò)了是否能被溫柔地引導(dǎo)？這決定了學(xué)習(xí)動(dòng)力是否能持續(xù)。
任務(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)行分類(lèi)，前者提供全方位了解入口，后者以視頻和生活化場(chǎng)景增強(qiáng)學(xué)習(xí)沉浸感。
暖色調(diào)與IP形象融合的界面風(fēng)格，既兼顧兒童友好，也塑造了獨(dú)特的品牌識(shí)別感。
這些設(shè)計(jì)不僅提升了視覺(jué)體驗(yàn)，更在信息傳達(dá)效率、任務(wù)操作便利性與情緒激勵(lì)機(jī)制上做到了實(shí)效優(yōu)化。
一個(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)拿捏。
教育類(lèi)產(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í)更輕松、更自然。
在線教育正在走向“內(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é)”。
?
顯示設(shè)備的多用化、智能手機(jī)應(yīng)用的普及化、電子設(shè)備觸摸屏的普及，這些環(huán)境變化推動(dòng)了 PC 網(wǎng)頁(yè) UI 設(shè)計(jì)的新動(dòng)向。
在設(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ì)( 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)行分析，與你分享。
在數(shù)字化時(shí)代，用戶界面（UI）設(shè)計(jì)已成為連接用戶與產(chǎn)品不可或缺的橋梁。它不僅僅是屏幕上的視覺(jué)呈現(xiàn)，更是用戶體驗(yàn)（UX）的核心組成部分，影響著用戶的認(rèn)知、情感及行為。UI設(shè)計(jì)不僅僅是美化界面，更是一種通過(guò)精心策劃的視覺(jué)與交互元素，引導(dǎo)用戶高效、愉悅地完成任務(wù)的藝術(shù)與科學(xué)的結(jié)合。本文將從UI設(shè)計(jì)的理念、原則、流程、趨勢(shì)以及實(shí)踐技巧等多個(gè)維度，對(duì)其進(jìn)行深度解讀。
在團(tuán)隊(duì)內(nèi)部，我們已確立了一套設(shè)計(jì)規(guī)范，在日常項(xiàng)目中使用設(shè)計(jì)規(guī)范輸出變的高效、統(tǒng)一。然而，在實(shí)際操作中，不可避免地會(huì)遇到一些特殊情況：某些客戶提出的個(gè)性化需求并不完全契合既定的設(shè)計(jì)規(guī)范,這些促使我們不得不在保持設(shè)計(jì)一致性的基礎(chǔ)上進(jìn)行靈活調(diào)整。因此，深入反思并優(yōu)化一致性原則的應(yīng)用策略顯得尤為重要。我們需要探索如何在堅(jiān)守設(shè)計(jì)規(guī)范核心精神的同時(shí)，靈活應(yīng)對(duì)多變的需求，確保設(shè)計(jì)既保持統(tǒng)一和諧，又能滿足特定場(chǎng)景下的獨(dú)特需求，從而實(shí)現(xiàn)用戶體驗(yàn)與品牌價(jià)值的雙重提升。
Tesla Model 3 在智能化與極簡(jiǎn)設(shè)計(jì)上表現(xiàn)突出，但導(dǎo)航與語(yǔ)音功能的短板、安全隱患（無(wú) HUD）仍需優(yōu)化，物理按鍵的取舍是未來(lái)迭代的關(guān)鍵爭(zhēng)議點(diǎn)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.ynkmey.cn