92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线

首頁

人工智能不會消滅用戶體驗——我們才會

杰睿

圖片使用 ChatGPT 生成,并經過 Photoshop 編輯。圖片來源:ChatGPT、Kym Primrose。

不久之前,我還堅信我的工作不會被人工智能所左右。雖然我現在仍然大體上相信這一點,但人們爭相采用人工智能解決方案的速度之快令人擔憂,這讓我開始懷疑。我不能責怪他們;人工智能解決方案快速、一致,而且從表面上看,通常都很有吸引力。我很樂意將人工智能融入我的工作流程中(我已經這樣做了),但我并不認同人工智能應該處于創作過程的中心這一觀點。它無法創造;它只能復制——麻省理工學院領導的一系列實驗強調了生成性人工智能依賴于模式而不是新穎的思維。雖然這種復制效果越來越好,但它仍然依賴于已經完成的工作。正是這一部分被忽視了;世界只看到了快速、可接受的解決方案,而這正是讓我擔心的部分。

幾十年來,我們在用戶體驗領域一直宣揚同理心、共同創造以及理解用戶個體的重要性。然而,在實踐中,這些原則仍然與緊迫的時間表和狹隘的“可用”定義相沖突。正如 Adyanth Natarajan 所說,無障礙設計方面的失敗反映出用戶體驗行業仍然主要面向一小部分人群。同樣,Andrew Tipp 認為,雖然包容性設計至關重要,但預算和時間壓力往往會削弱它

盡管人們竭盡全力強調包容性設計如果得到妥善實施將帶來多么大的益處,但這些領域在開發過程中仍然嚴重缺乏重視。這個行業講究時間和金錢;當廉價而粗糙的解決方案唾手可得時,它根本無法承擔真正的用戶體驗設計的沉迷。人工智能提供了這樣的解決方案。但是,我們越是將設計任務交給那些從聚合數據和歷史模式中學習的系統,我們就越有可能將一切標準化。如果我們現在還沒有找到關鍵的答案,那么將創意流程交給人工智能系統并不能神奇地解鎖它。包容性設計成為基準標準的夢想變得更加遙不可及。誠然,我們獲得了效率,但代價是什么呢?

雖然本文的重點在于AI如何將創造力從設計流程中剔除,但我們必須承認,這種觀點本身并不新鮮。Alterio 、SeoHurst等人都探討過UX /UI設計中創造力的扼殺問題,盡管他們并未提及AI的介入。

我們今天所說的“設計”有多少是真正原創的?

擺在桌面上的是:我們大多數人的工作都受到相當嚴格的限制。由于無障礙指南、設計系統、素材庫和社區 Figma 文件的存在,許多創意意圖被剝奪了。我們所做的只是將點連接起來——而這基本上就是所有人工智能解決方案都在做的事情。它們從相同的資源中提取數據,并基于相同的設計系統和無障礙規則將點連接起來。那么,這真的是一件壞事嗎?

將顯示縮放圖像
Figma 社區 UI 工具包截圖。圖片來源:Figma

對我來說,答案取決于兩點。首先,使用這些工具的人是否真的受過培訓,了解它們的工作原理?他們是否知道如何設計提示來減輕偏見而不是加劇偏見?即使他們不知道,雇傭這些工具的人真的在乎嗎?其次,我們節省下來的時間是否真的被重新投入到探索性思考中?投入到研究、實驗和面向未來的想法中?

如果是,那很好;但如果不是,我們就有可能為了追求進步的幻覺而犧牲自己的創造力。任何真正的設計師都不應該愿意接受這種交易。如果我們要把所有這些耗時、繁瑣、零散的工作都交給機器,我們的大腦還有什么更好的用途呢?

人工智能作為復制者,而非發起者

說實話:人工智能并不具備創造力。真的不。它只是一種非常逼真的模仿者。它接受過已經構建、發布和批準的事物的訓練。這意味著它建立在已經成功的想法之上,而這些想法并不總是最好的,只是最容易被接受或最引人注目的。

它所回收的不僅僅是設計模式和配色方案,還有偏見、規范和文化假設。如果數據集存在偏差,輸出結果也會如此。我們在Buolamwini 和 Gebru 于 2018 年發表的《性別陰影》等研究中就看到了這一點,其中商業 AI 工具對深色皮膚女性的性別判斷錯誤,錯誤率高達 34.7%。此類研究表明,使用從互聯網和企業來源收集的數據集的商業 AI 系統往往會復制并放大現有的社會偏見。

我們用同樣有缺陷的框架建立了這些系統,而我們花了幾十年的時間試圖拆除它們,即使我們積極嘗試糾正這些錯誤陳述,但可能為時已晚。

Molly Wright Steenson 換了一種說法:

數據的關鍵在于它存在于過去。數據集的問題在于它強化了現有的偏見,而不是找到新的方法來做事和解決問題。

這凸顯了生成式人工智能的一個核心挑戰:我們用過去的假設構建未來的工具。

人們想方設法地推銷人工智能解決方案,讓我們覺得它們能讓我們的生活更輕松,但實際上,他們只是在沙漠里兜售沙子。我們兜售的所謂創新,不過是規?;姆答佈h(是的,我是個癡迷于反饋循環的女人)。我們教它,現在我們讓它用同樣的材料來教我們和自己。

現在,復制有其存在的意義。我并不是說每個登錄表單或入職流程都需要革新。一些優秀的設計成果是無形的。我之前提到過,我們將這些點連接起來。然而,我們是有意識地、謹慎地(或者至少我們應該這樣做)將這些點連接起來。如果人工智能成為流程中這些部分的默認設計者,我們就不得不問:這給我們帶來了什么?我們到底貢獻了什么?如果我們把基礎工作完全外包出去,我們該如何發展這門工藝?

諷刺的是,設計本應是最能抵御這種侵蝕的領域之一。多年來,我們一直在努力爭取一席之地,證明好的設計能夠塑造結果、改變行為,并真正改善生活質量。如今,我們終于贏得了一席之地,卻被要求將工作交給那些從未被邀請參與討論的工具。坦白說,這些工具只關心模式,不關心環境。

更糟糕的是,那些不愿或不覺得有必要深入探究的人一致認為,人工智能的輸出就是客觀真理。人工智能就是神諭。它不是魔法,而是一個基于泛文化訓練的系統。如果我們不小心,我們就會讓自己陷入自動化,最終走向創造性的湮沒。

在黑暗中跳舞

話雖如此,或許我們多年來一直被困在創意的湮沒之中。我至今仍記得90年代中期到21世紀初科技界的瘋狂。創新無處不在,沒人知道自己在做什么,他們只想嘗試一些很酷的東西。有人喜歡直板手機嗎?任天堂的控制器設計?那真是瘋狂,也真是棒極了。

將顯示縮放圖像
這是 20 世紀 90 年代末到 21 世紀初的一些實驗性手機設計的拼貼畫,其中包括形狀像口紅管、攝像機和化妝盒的手機。
有趣的00年代早期手機。圖片來源:u/CosmicPelican via Reddit r/nostalgia

我認為其中大約80%都失敗了。但這卻是最好的失敗。最終,這些瘋狂的想法讓位于標準,就像往常一樣;要么是蘋果,要么是安卓;要么是PlayStation,要么是Xbox;要么是Mac,要么是Windows。

在所有這些融合中,用戶體驗 (UX) 找到了立足點。隨著技術的成熟,我們的期望也隨之成熟。怪異不再美妙,反而令人困惑。不可預測的界面不再勇敢,而是支離破碎。用戶體驗 (UX) 作為一種將秩序帶入混亂的方式出現,其目標突然不再是脫穎而出,而是消除摩擦,使體驗看起來自然。

這絕對是必要的。良好的用戶體驗 (UX) 使所有這些新技術不僅可以供愛好者和早期采用者使用。用戶體驗標準帶來了一致性、最佳實踐和基于成熟經驗的模板。但在追求一致性和可用性的過程中,我們失去了一些東西。我們不再問“如果呢?”,而是開始問“基準是什么?”。

設計師和開發人員,請告訴我,您不使用 Apple 的人機界面指南或 Material Design 作為參考點?我會質疑任何這樣做的人的誠實。

將顯示縮放圖像
兩張突出的設計系統圖:Google Material Design 和 Apple 人機界面指南。圖片展示了每個系統的一些界面組件。
谷歌Material Design(上)和蘋果人機界面指南(下)。圖片來源:Figr

你上一次徹底改變常見 UI 元素的交互預期是什么時候?流行的東西就一定有效,何必再去重新發明輪子呢?就像我們通過設計和接觸學會了如何打開門和操作爐灶一樣(就像唐納德·諾曼那樣),我們也學會了如何操作下拉菜單。這就是可供性(affordance)的演變。

所以,當我們說人工智能會削弱用戶體驗(UX)和用戶界面(UI)的創造力時,真的如此嗎?它所做的并非我們多年來從未做過的事情。它引用的是相同的庫和標準,使用我們共同認可的有效方法。我們所說的我們失去的東西,其實是我們很久以前就放棄的東西。

平衡之舉

讓我們明確一點。人工智能不是敵人,自滿才是。

過去一周左右,我使用了一些AI工具,體驗不錯,我相信它是一款非常棒的輔助工具。但我們必須挑戰它。說它胡說八道就對了。問問我的ChatGPT,我告訴它它錯了多少次……

將顯示縮放圖像
ChatGPT 對話截圖。圖片來源:ChatGPT、Kym Primrose。

如果我們希望人工智能能夠增強我們的工作,而不是取代其核心功能,我們就必須有意識地去行動,必須意識到自己在做什么。施奈德曼的普羅米修斯原則明確指出了這一點:如果我們以這樣的方式構建高度自動化,它就能支持創造力和監督。

對我來說,成功取決于三件事:教育、融合平衡。

我們需要教育自己和同事,讓他們了解人工智能的真正含義、運作方式,以及它在日常工作流程中的界限。這不應該是一個孤立的過程。

這不僅僅是開發人員或用戶體驗設計師的問題。我們需要跨職能的人工智能素養,涵蓋市場營銷、用戶體驗、開發和質量保證;我們應該共同學習。我們都應該積極意識到局限性,設定清晰的提示,仔細審查輸出,并在潛在偏見影響用戶之前發現它。如果我們要負責任地構建產品,我們需要共同的語言和共同的責任。

一旦我們了解了人工智能能夠以及應該為我們做什么,下一步就是整合。這不僅關乎技術層面,也關乎文化和倫理層面。僅僅選擇一個工具并將其融入工作流程是不夠的。我們需要編寫文檔:哪些工具是允許使用的,如何有效地使用它們,它們屬于流程的哪些階段,以及何時應該回歸到一些手動思考。這份文檔不應該是自上而下的,而應該由所有參與工作的人員共同協作構建。我們需要建立清晰的界限,并讓所有人擁有共同的責任,讓我們有信心在認為合適的時候,敢于表達自己的想法,并主動對抗人工智能。

這才是關鍵;我們不能對人工智能漠不關心。每一次使用都應該有意識,每一個解決方案都應該受到質疑。人工智能可以提供輔助,但最終決定權仍然在我們手中。

這就引出了我們的目標。如果我們的目標是通過將某些任務交給人工智能模型來提高生產力和效率,那么我們必須思考如何將這些節省下來的資金重新投資到其他地方。

實現這一目標的方法之一是重新投資研發、發散思維和突破界限的創意,這不僅能為用戶體驗/用戶界面注入活力,還能打破停滯不前的設計模式。有了人工智能處理繁瑣的工作,我們就有了探索實驗性概念的空間,而這些概念通常受限于預算和時間。創新正是在這個空間中得以生存。如果沒有它,我們可能會陷入無休止的循環,只輸出安全、毫無靈魂的成果。我們必須展現出不斷發展、適應、擴展,并保持我們創意生態系統的新鮮感,這不僅是為了用戶,也是為了為我們的人工智能模型提供我們真正希望它們反映的解決方案和思維。

最后的想法

即使沒有自動化,我們多年來也一直陷在千篇一律的便利循環中。人工智能并非用戶體驗/用戶界面(UX/UI)感覺陳舊的原因,而是其結果。它只是凸顯了原有缺陷。所以,與其擔心人工智能會抹平用戶體驗/用戶界面(UX/UI)的創造力,或許我們應該問問自己,為什么它一開始就如此平淡?

作為設計師,我們應該探索如何利用人工智能來支持我們的工作。它不是設計師,而是工具,就像之前的 Figma 和 XD 一樣。Ben Shneiderman 在《以人為本的人工智能》一書中一針見血地指出,人工智能的目標并非取代我們,而是“增強、放大、賦能和提升”人類的潛能。如果我們選擇挑戰模板,設計和創造力仍然掌握在我們手中。我們的價值不應在于速度,而應在于更高效、以人為本、以體驗為導向的思維方式——而這些是人工智能無法掌握的,因為無論它多么接近人類,它都永遠無法成為真正的人類。

因此,如果我們不想成為自身流程的過客,就必須確保在培訓、道德和研發方面的投入與在工具和集成方面的投入一樣多。人工智能可以支持偉大的設計,但推動其發展的仍然是我們的好奇心、挑戰和本能。所有這些最初都讓這個行業令人興奮。

 

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

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

杰睿

告別命令,迎接意圖

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

直接操縱的持續相關性

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

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

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

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

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

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

最后的想法

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

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

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

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

15 個最佳現代 AI 解決方案,助力 UI/UX 設計開發

杰睿

毫無疑問,人工智能極大地促進了許多領域的發展。UI/UX 設計也未能幸免,如今我們每天都能看到基于人工智能的全新工具涌現。這些工具旨在改變設計師的工作方式,使他們能夠優化工作流程并自動化重復性任務。這樣,他們就能更快、更準確地提供結果。由于人工智能接管了日常工作,設計師可以專注于最重要的事情——創造力和創新。優化工作流程并自動化重復性任務。這樣,它們可以提供更快、更準確的結果。由于人工智能接管了日常任務,設計師可以專注于最重要的事情——創造力和創新。

人工智能對設計的影響

AI 驅動的工具正日益成為 UI/UX 設計師不可或缺的助手。它們在從原型設計、內容創作到最終設計完善的每個流程階段提供支持。通過將 AI 集成到工作流程中,設計師可以更高效地創造更具活力和個性化的體驗,同時節省時間和精力,從而加快產品發布速度并提升競爭力。

UI/UX設計師的最佳AI工具

下面我們將介紹一些可以幫助您簡化工作的頂級工具。

1. Flowmapp:一款利用人工智能設計用戶體驗架構的工具

Flowmapp就像一個指南針,指引您穿越復雜的用戶體驗迷宮,幫助設計師創建清晰便捷的用戶路徑并生成站點地圖。借助它,您可以通過創建流程圖來設計網站和應用程序的架構,就像在精準的地圖上導航一樣。Flowmapp 的強大之處在于它與分析技術的集成,就像鷹眼一樣,能夠洞察用戶迷失的方向,并幫助他們實時優化路徑。

Airbnb 和 Nike 等品牌都使用 Flomwapp 來設計信息架構。該工具能夠靈活地與分析工具集成,幫助團隊優化路徑,提升參與度并增加現場停留時間。

2. Uizard:人工智能驅動的界面原型設計

Uizard就像一根原型設計魔杖,能將您的草圖轉化為成品交互模型。它基于神經網絡構建,能夠快速將您的想法轉化為可運行的原型,就像您跳過了草稿上的那些神奇步驟一樣。Uizard 以其速度和簡潔性超越競爭對手,將設計和代碼集成在一個軟件包中,使其成為快速界面開發的必備工具。

將顯示縮放圖像
用戶界面

3. ChatGPT:基于 GPT-4 的 UX 文本生成

ChatGPT隨時準備提供完美的描述或用戶體驗文本。它基于 GPT-4 模型,能夠輕松適應您的需求,就像一位經驗豐富的編輯讀懂您的心思一樣。其優勢在于,它不僅節省時間,還能激發團隊靈感。

將顯示縮放圖像
GPT 3.5 和 4.0 聊天功能的區別

4. Attention Insight:人工智能驅動的 UI 和 UX 分析

Attention Insight就像一張 X 光片,可以掃描并預測用戶會在哪些地方停留。它利用人工智能技術,幫助您調整焦點,就像調整相機鏡頭以獲得最清晰的照片一樣。Attention Insight 的優勢在于它能夠高效精準地完成這項工作,而無需依賴耗時耗力且成本高昂的 A/B 測試。

將顯示縮放圖像
Attention Insight 界面

5. Khroma:一款人工智能配色方案工具

Khroma是一款個性化配色工具,可讓您根據自己的喜好找到完美的配色方案。它利用神經網絡學習您的偏好,并推薦能夠為您的界面增添特色的配色方案。Khroma 憑借其個性化設計擊敗了競爭對手——它推薦的配色方案是根據您的喜好量身定制的。

將顯示縮放圖像
赫羅馬整合

6. 讓我們增強:優化圖像以提高用戶體驗

Let's Enhance就像一個高清濾鏡,能將像素化的圖像轉化為清晰銳利的視覺效果。在 AI 的支持下,Let's Enhance 可自動提升分辨率、紋理和色彩細節,讓您的圖片完美契合 UI 界面。其主要優勢在于即時提升畫質,這對于需要快速優化高分辨率的大型項目來說非常實用。

將顯示縮放圖像
讓我們增強界面

7. Adobe Sensei:Adobe 產品中的人工智能

Adobe Sensei是您所有常用 Adobe 產品的強大引擎。它利用機器學習加速流程,無論是處理圖像還是分析用戶數據,都能將您的設計提升到更高的自動化水平。與其他解決方案不同,Adobe Sensei 內置于整個 Adobe Creative 套件中,讓您的工作更快速、更便捷。

將顯示縮放圖像
Adobe Sensei 界面

8. DALL-E 2:基于文本的圖像生成器

DALL-E 2是一位藝術家,他能根據口頭描述,繪制出你所能想象的一切。它基于 GPT-3 模型,創作出細節豐富、獨具匠心的圖像,仿佛你的大腦直接連接到畫布。在同類產品中,DALL-E 2 以其能夠將傳統設計工具難以表達的最抽象概念可視化的能力而脫穎而出。

將顯示縮放圖像
DALL-E 2接口

9. Vance AI:用于圖像處理和增強的人工智能

Vance AI就像一位智能助手,可以即時增強您的圖像,使其擁有專業水準。它可以提高分辨率、去除背景并校正紋理,就像經過專業攝影工作室的后期處理一樣。Vance AI 使圖像處理變得快速便捷,尤其是在處理大量數據時。

將顯示縮放圖像
使用 Vance AI 應用程序之前和之后的圖像對比

10. Galileo AI:由人工智能驅動的動畫工具

Galileo AI是您的專屬動畫師,能夠瞬間賦予任何 UI 元素生命力。它運用機器學習技術,無需手動調整每一幀即可創建流暢的動畫。Galileo AI 憑借速度和靈活性超越競爭對手,讓設計師能夠專注于創意,而非墨守成規。

將顯示縮放圖像
伽利略人工智能接口

11. Flow AI:構建聊天機器人和語音界面

Flow AI就像一位交互工程師,能夠構建對話界面和聊天機器人,讓它們像人類專家一樣回答復雜的問題。Flow AI 可以幫助您創建周到的對話場景,而無需編寫代碼。與其他同類產品不同,Flow AI 提供簡單的設置和跨平臺支持,使其成為對話系統的多功能解決方案。

將顯示縮放圖像
Flow AI 的實際工作原理

12. 深度夢境生成器:人工智能驅動的超現實圖像

這款工具將人工智能技術應用于照片和視頻,創造出獨特的圖像,將其轉化為超現實的杰作。與其他生成器不同,Deep Dream 可以讓你創造出與眾不同的抽象效果,讓你瞬間從普通的視覺效果中脫穎而出。

將顯示縮放圖像
使用 Deep Dream Generator 創建的圖像

13. Stark:用戶體驗的可訪問性檢查器

Stark會根據包容性標準檢查你的設計。AI 會分析界面,檢查對比度、字體大小和顏色組合,以確保你的產品適合所有用戶。

將顯示縮放圖像
Stark 應用程序界面

14. 設計AI:標志和視覺概念生成

Design AI可在幾分鐘內創建徽標和視覺概念。它可以生成品牌標識并提供現成的解決方案,為您節省時間和資源。Design AI 在速度和經濟性方面超越同行,能夠在最短時間內提供高質量的成果。

將顯示縮放圖像
使用 Design AI 工具創建的徽標和標識

15. Loomly:人工智能社交媒體管理

Loomly可以幫助你構思創意、組織和規劃內容,并推薦最佳發布時機。它會分析你的受眾參與度,并為你推薦一些必定會“火爆”的帖子。

將顯示縮放圖像
Loomly 應用程序

利用人工智能改進設計

AI 工具徹底改變了 UI/UX 設計,尤其是在提供數據驅動的洞察方面。這減少了設計師在重復性任務上花費的時間,并賦予他們更多創造力。有了 AI 處理幕后機制,設計師現在可以專注于創建創新的、以用戶為中心的界面。

雖然人工智能極大地提升了設計流程的效率,但務必牢記,它無法取代設計師獨特的人類直覺和創造力。最佳設計成果源于人類洞察力與人工智能工具的協同作用,其中設計師在引導設計流程和利用人工智能提供支持方面發揮著不可或缺的作用。

結論

人工智能顛覆了游戲規則,讓設計師能夠輕松創建更優質、更以用戶為中心的界面。如果您能夠充分利用這些工具,它們將助您改進設計流程、激發創新,并提供更具吸引力和活力的數字體驗。如此一來,您就可以將人工智能的技術突破與人類的技能和直覺相結合,突破可能性的界限,打造出完美的產品,開創 UI/UX 設計的未來。

 

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

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

杰睿

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

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

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

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

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

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

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

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

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

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

將顯示縮放圖像
IBM網站截圖
資源:IBM 的 AI 設計

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5. Google 的 People + AI 指南

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

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

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

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

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

 

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

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

杰睿

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

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

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

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

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

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

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

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

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

 用戶流程拆解:

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

這張流程圖體現的設計思考包括:

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

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

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

操作方法:

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

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

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

新手流程圖五步法:

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

如何使用人工智能從現有設計中生成設計變體

杰睿

如何利用人工智能根據現有設計生成設計選項?

這是一個常見的用例:

  • 也許您認為當前的登錄頁面太混亂并想改進它。
  • 也許您正在進行設計,但感覺只有一個想法,并且希望有更多的設計選擇來獲得靈感。

然而,我在網上并沒有看到太多關于如何使用人工智能來解決此類用例的討論。

所以今天,我將逐步向您介紹一些示例,包括我使用的提示、工作流程和結果。

讓我們開始吧!

概述

由于我只需要專注于前端設計,因此我使用了V0Magic Patterns進行演示。我特意選擇它們是因為它們都是針對前端優化的 AI 原型設計工具。

兩種工具都可以完成這項工作,但我在兩種工具中都運行了同一組提示,以便您可以更好地了解它們可以實現的功能。

如果您有興趣,您也可以在其他工具(如Cursor、WindsurfBolt )中運行相同的工作流程,然后告訴我進展如何。

工作流程分為兩個步驟:

  • 步驟1:讓AI分析設計并提出改進建議。
  • 第 2 步:要求 AI 根據其建議生成設計變體。

如果您清楚自己想要進行哪些設計改進,您當然可以將步驟 1 和 2 合并為一個簡單的步驟——只需上傳設計、提供您的建議,然后要求 AI 生成新的設計選項。)

我使用 Kayak.com 的頂部部分作為演示的現有設計。

將顯示縮放圖像
Kayak.com

問:仔細看看。你會如何設計它以不同的方式?

第一個提示

這是我放入 V0 和 Magic Patterns 的第一個提示,以及 Kayak 主頁頂部部分的快照。

提供 Kayak 登陸頁面的設計評論(見附件快照)。擔任具有深厚 UX/UI 專業知識的經驗豐富的產品設計師。KAYAK 的主要業務目標是通過為旅行者提供旅行規劃工具來賦能他們。其搜索引擎會掃描各種旅游網站,提供豐富的機票、酒店、租車和度假套餐選擇和價格。其主要用戶是希望搜索和比較旅行選擇的日常旅行者。請使用以下視角評估桌面主頁:- 核心價值主張清晰
- 信息架構和易于查找關鍵操作
- 視覺層次、布局和空間使用
還包括 3-5 條具體的、高影響力的建議,以改善主頁上的用戶體驗或轉化率。

正如您所見,我還包括了主要的業務和用戶目標——這是一個小提示,可以為 AI 提供更多設計分析的背景。

V0

V0的設計分析:

將顯示縮放圖像
V0的設計分析

一長串的分析,啟發性十足。我大概也能從 ChatGPT 或 Claude 得到類似的結果。

(下一步是根據這些建議生成設計方案。但正如我之前提到的,實際上我也可以提供自己的設計建議,例如“當前設計缺乏清晰的視覺層次,并且留白過多。您能否生成三個設計方案來解決這個問題?”)

接下來,我要求 V0 生成設計選項:

根據以上建議,您能否為 Kayak 主頁快照生成 8 種備選設計方案?Kayak 主頁快照的8 替代設計選項?

正如我所料,它運行了很長時間,每個設計選項大約一分鐘。因此,我點擊了“停止”,并在提示中將數量從 8 減少到 3:

根據以上建議,您能否為 Kayak 主頁快照生成 3 個備選設計方案?Kayak 主頁快照3 備選設計方案嗎?

V0 在大約 1.5 分鐘內生成了 3 個設計選項:

  • 設計1:增強核心體驗
  • 設計二:沉浸式英雄體驗
  • 設計3:以目的地為中心的體驗

設計方案1:增強核心體驗

V0 描述的快照:

將顯示縮放圖像
V0 對設計選項 1 的描述

它生成的設計:

將顯示縮放圖像
V0的設計

設計方案二:沉浸式英雄體驗

V0 描述的快照:

將顯示縮放圖像
V0 對設計選項 2 的描述

它生成的設計:

將顯示縮放圖像
V0的設計

設計方案3:以目的地為中心的體驗

V0 描述的快照:

將顯示縮放圖像
V0 對設計選項 3 的描述

它生成的設計:

將顯示縮放圖像
V0的設計

印象

總體而言,效果令人印象深刻。我喜歡這些精致的細節。它保留了我提供的快照中的必要信息(顏色、樣式、CTA)。

所有生成的設計都由具有基本交互效果的代碼支持,例如輸入字段交互和懸停效果。

我希望設計選項之間能有更清晰的區分。不過我也可以嘗試后續的提示來解決這個問題。

魔法圖案

Magic Patterns 的設計分析:

將顯示縮放圖像
Magic Patterns 的設計分析

有些我同意,有些我不同意。為了演示,我簡單地讓它生成相應的設計選項:

根據以上建議,您能否為 Kayak 主頁快照生成 8 種備選設計方案?Kayak 主頁快照的8 替代設計選項?

Magic Patterns 在 1.5 分鐘內生成了 8 個設計選項,比我預期的要快。

由于新聞稿的篇幅限制,我在這里僅展示三種設計:

設計方案1:增強價值主張

將顯示縮放圖像
Magic Patterns 的設計

設計選項 2:搜索優先設計

將顯示縮放圖像
Magic Patterns 的設計

設計選項3:社會認同焦點

將顯示縮放圖像
Magic Patterns 的設計

印象

與 V0 相比,設計更加簡單。

它在更短的時間內生成了更多的設計,這很棒。

我很喜歡它的“導入 Figma”功能。我可以將生成的設計導入 Figma 進行進一步編輯。

此外,它還有一個Chrome 擴展程序,可以讓我把網頁轉換成 React 組件或 Figma。雖然不完美,但我對它的功能非常期待。

 

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

產品設計的未來

杰睿

用戶體驗設計:如何設計有效的“第一次觸發”?從 Push 到頁面設計

杰睿

 

——基于《Hooked》模型的用戶激活交互思路
 

一、什么是“第一次觸發”?為什么它決定了用戶的去留?

在《Hooked》一書中,作者提出“Trigger”是促使用戶行動的第一步。觸發可以分為兩種:
外部觸發:例如 App 推送、廣告、鏈接、好友邀請
內部觸發:用戶自己產生的動機,比如焦慮、孤獨、空閑、好奇等情緒
“第一次觸發”通常指的是用戶首次接觸產品的關鍵時刻,也是我們設計中用戶激活(activation)環節的核心。很多產品在吸引用戶下載后,沒能成功完成這一步,導致高流失率。
那么,如何讓用戶在第一次接觸產品時就“被打動”,甚至開始“動手”?這是交互設計師無法回避的挑戰。

二、Hook 模型下的第一次觸發路徑

我們可以將“第一次觸發”的設計過程,拆解為一個 Hook 的微循環:
swift
復制編輯
外部觸發(推送/鏈接/內容)→ 用戶行動 → 變動獎勵 → 微投入
設計的關鍵在于:
觸發是否準確命中動機
頁面是否降低了行動成本
是否提供足夠正向反饋,激勵用戶進入下一步

三、實際場景中,“第一次觸發”都可以怎么設計?

下面以兩個典型路徑為例,展開設計思路。
  1. 從 Push 到行動:信息即引導
場景:用戶安裝 App 后首次收到推送通知 
目標:提高用戶點開并進入 App 的概率

設計策略:

情境感知:比如早上推送“為你準備了 3 條晨間資訊”,中午推送“你關注的咖啡店正在打折”。
視覺引導:通知樣式帶有關鍵詞高亮、情緒詞匯、數字誘因(“3 條”、“50%”等)。
即時性獎勵:如“限時免費”、“首次點擊得積分”。

示例對比:

普通推送文案:
“你有新消息,點擊查看。”
優化后:
“你的新客戶留言了:點擊 30 秒內回復可得 50 積分!”
用戶動機 + 獎勵機制 + 時間緊迫感 = 有效第一次觸發
  1. 首屏設計:默認就是最好的引導
  2.  場景:用戶打開 App 或首次訪問頁面 
  3. 目標:促使用戶完成關鍵行為,如注冊、收藏、瀏覽首個內容

 設計策略:

將用戶動機前置化:如圖文內容帶標簽“為你推薦”、“同城熱門”
提供默認建議:如自動生成 3 個關注推薦,不讓用戶空白加載
弱引導行動按鈕:如“我想試試看”、“點這里獲取專屬內容”,代替“立即注冊”

小結:

元素 常見問題 設計優化
空白狀態 “你還沒有收藏內容” 提供推薦 / 模擬數據
注冊頁面 信息太多 / 提示太弱 三步注冊 / 支持游客試用
首頁內容 冷啟動/無吸引力 動態推薦 + 情境觸發設計

四、設計師如何判斷觸發設計是否有效?

? 指標層面

激活率:App 下載后次日留存 / 完成注冊 / 觸發首次行為的用戶比例
首觸轉化率:觸發內容點擊后進入行為的用戶比例

? 用戶層面

用戶是否在無需幫助的情況下完成操作
用戶是否表達出“被內容打動”的情緒反應(通過反饋/行為路徑觀察)

第一次觸發,決定了第一次信任

“第一次觸發”的設計不只是營銷或產品經理的工作,它是交互設計的前哨戰
從文案到頁面布局,從通知到首屏,一切都在為用戶“做決策”而服務;
要問的不是“設計美不美”,而是:“用戶有沒有動起來?”
Hook 模型里,觸發只是起點,但它決定了是否進入循環的門檻。
 
蘭亭妙微(m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

AI工具+AI流暢度+人類優勢=AI原生設計師

杰睿

AI工具+AI流暢性+人類優勢

作為一名產品設計師,我最近一直在努力理解快速變化的人工智能格局,既感到敬畏,又感到困惑。Anthropic的首席執行官警告稱,人工智能可能會取代高達 50% 的入門級白領工作,而 Zapier 的首席執行官則談到招聘精通人工智能的人才。與此同時,“模型設計師”等新職位正在涌現,行業正在迅速向更多超級 IC 職位轉變。

隨著人工智能重塑我們的工作方式,我一直在問自己,這不僅關乎如何保持相關性,還關乎如何在我的工作中不斷成長并找到樂趣。

據我所知,新的轉變需要利用三個領域

  1. 人工智能工具:組裝不斷發展的人工智能設計堆棧以快速交付
  2. 人工智能流暢性:學習如何設計概率系統
  3. 人力優勢:加強工藝、自主性和判斷力等護城河,保持領先于自動化
  4. 這些支柱與戰略思維和以人為本的技能相結合,塑造了我們成為AI 原生設計師的道路
Open AI cookbook 中的 AI 產品堆棧和提示結構

1. 人工智能工具

人是制造工具的動物——本杰明·富蘭克林

本杰明·富蘭克林的定義強調了人類在發明和使用工具來擴展自身能力方面的創造力。如今,人工智能標志著這一進化的飛躍,從手動工具到智能協作者。

速度不再是可有可無的。ProcessMaker的產品團隊從每年兩次交付到每兩周交付一次。Figma的《設計現狀報告》(2025)指出,近七成的設計團隊(68%)經常使用人工智能來自動化線框圖繪制、生成視覺資產并分析用戶反饋。

隨著人工智能逐漸融入日常工作流程,設計工具顯然變得越來越積極主動,既提高了速度,又增強了想象力。

構建一個反映你的技藝的堆棧

你的設計棧取決于你作為設計師的身份。用戶體驗研究員的設計棧與全棧產品設計師、對話式AI設計師或視覺藝術家的設計棧截然不同。沒有放之四海而皆準的方案。

在過去的六個月里,我嘗試了 60 多種 AI 工具,追逐每一個新的自動化更新和閃亮的產品發布。然而,事實是,我的工作流程中幾乎所有東西都只運行在四到十種工具上,正如我的 AI 產品設計棧所示。

因此,真正的價值在于有意識的嘗試。嘗試新工具,不是因為它們流行,而是因為它們可能會在你的工作流程中解鎖更好的功能。問問自己,有沒有更智能、更快速、更周到的方法來做到這一點?

此外,人工智能工具正在快速發展,但設計的藝術依然是人類的。決定做什么以及如何使其卓越,仍然取決于品味、判斷力、技藝和你的工具包。正如設計領袖阿古斯丁·桑切斯 (Agustín Sánchez) 所說“你之所以優秀,并非因為你了解最新的工具。你之所以優秀,是因為你知道如何運用它們。”

提示作為一項核心技能

去年,我多次發現自己覺得人工智能的輸出很平庸,后來我意識到問題往往不在于模型本身,而在于我設計提示的方式。擁有正確語境的人工智能模型能夠提供生成有意義響應所需的信息。

轉變視角,將人工智能視為合作者,并學習如何構建上下文,徹底改變了我的輸出質量

“提示就像是讓人工智能加速,或者將其推向正確的方向。”——約翰·前田 (John Maeda)談領導者如何利用人工智能釋放創造力

亞歷克斯·克萊因 (Alex Klein) 提出了一個令人信服的論點,即提示從根本上來說是一種設計活動,涉及以清晰度、背景、語氣和意圖來設計對話。

如果您想提高提示技巧,這些資源是一個很好的起點
Google 提示要點
IBM — 提示工程指南
OpenAI — 提示指南

AI流暢度工具包

2. 人工智能流暢性

AI 流暢性是指能夠自信地設計和使用意圖驅動、分層和概率系統的能力。對于產品團隊而言,這意味著理解 AI 的潛力,應對其復雜性,并做出明智的決策,從而帶來負責任且有影響力的成果。

GUI 界面要求用戶通過點擊、滾動和菜單導航來實現目標。相比之下,代理系統則通過關注基于意圖的結果,為我們提供了一種與系統交互的新方式。

現實世界中的人工智能產品涉及編排、內存、工具集成、用戶體驗模式和代理流程。流暢性意味著要掌握系統的行為——它的可變性、它的故障、它出現錯誤或誤用的可能性,并在設計時充分考慮這些動態因素。

人工智能流暢性的構建模塊

AI 設計工具包

  • IBM 的GenAI 設計原則為生成式 AI 用戶體驗 (UX) 制定了六項基礎設計原則。每項原則都配有設計策略和實際案例,以幫助從業者有效地實施它們。
  • 谷歌的“People+AI” 計劃強調了設計人工智能交互時需要考慮的四個關鍵領域。該框架為設計有效的人工智能交互提供了寶貴的指南。
  • 我還構建了一個簡化的指南,其中包含20 多個 GenAI UX 模式的示例和實施策略
理查德·巴赫這本經久不衰的著作敦促工匠們擁抱現代工具,專注于目標而非墨守成規。米哈爾·馬萊維奇闡述了“人工智能平均線”,并鼓勵創意人士突破這條線,追求偉大的創意。

3. 人類優勢

借助 GPT-4o 和 Veo-3 等模型,AI 現已能夠快速生成高質量的文字和視覺效果,并在許多領域超越人類的技能和推理能力。真正的問題是——

我們人類獨有的優勢還剩下什么?

工藝比以往任何時候都重要

AI 模型基于海量數據集進行訓練,反映的是主流模式而非任何獨特的視角。因此,它們的輸出往往顯得千篇一律,缺乏主觀細微差別的深度,例如個人風格、洞察力、敘事意圖和創意原創性。設計師Michal Malewicz用“ AI 平均線”的概念捕捉到了這一現象,并將當今的創意格局描述為乏味的時代”,充斥著千篇一律、缺乏靈感的 AI 輸出。

諷刺的是,這種豐富性反而提高了標準!

此外,歷史表明,盡管新工具層出不窮,敘事、審美判斷和執行質量等基本技能仍然至關重要。正如 Photoshop 并沒有扼殺平面設計一樣,擁有 AI 的共同創造者并不會否定對技能的需求,而是會改變它。

理查德·森內特在其著作《工匠》中強調,工具在不斷發展,但技藝和精湛技藝的精髓始終是核心,也是區分真正專家的關鍵所在。他敦促工匠們擁抱現代工具,并專注于目標而非墨守成規。

創意方向、代理和保持人力掌控

我們定義目標、設定約束并做出為人工智能指明方向的高層決策。

隨著速度和質量的不斷提升,爭論的焦點不再是人類與人工智能的對決,而是我們尋求何種合作。在這種新的動態下,設計師不再只是創造者,而是提供創意方向、愿景和目標的人 設計師逐漸成為創意總監或統籌者,而人工智能則扮演著助手、創意伙伴,甚至是評論家的角色。

Julie Zhuo 強調了自主性的重要性。即使人工智能與我們的技能、能力和品味相匹配,我們選擇為何以及在何處應用人工智能技能的能力仍將受到價值觀、意圖和新興目標的驅動,并且仍然具有人類的鮮明特征。

例如,兩位設計師使用相同的AI工具,可能會得出截然不同的結果。一位設計師可能會讓AI為一家氣候非營利組織探索極簡主義的布局,而另一位設計師則用它來為一家兒童教育初創公司生成充滿趣味、富有表現力的視覺效果。差異不在于工具本身,而在于引導它的人類價值觀和意圖。

世界經濟論壇概述了 2030 年的四個類別:新興技能、非焦點技能、穩定技能和核心技能

4. AI原生設計師

那么,成為一名AI原生設計師意味著什么?僅僅掌握AI工具和技術就足夠了嗎?還是在這個新領域,還需要更深層次的技能?

世界經濟論壇顯示,2030年最緊俏的技能不再是技術性技能。隨著自動化改變工作方式,雇主更看重戰略性、以人為本的能力,例如分析性思維、創造性思維、技術素養和韌性。

正如Fabricio Teixeira 指出的那樣,即使在技術快速變革的時代,設計、協作和溝通的基礎仍然是設計生涯的永久支柱,并且比任何工具都更持久。

與此同時,“超級集成電路”角色的出現正在重新定義高級設計職業,因為許多公司正在積極支持實踐領導道路,重視深厚的專業知識、質量和高杠桿貢獻,而不是傳統的人員管理。

隨著創作速度越來越快、觸手可及,設計師真正的新護城河如今在于打造獨特、可靠且令人難忘的AI體驗。掌握設計原則、敘事能力和解決問題的能力仍然是人類獨有的強項。

 

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

如何傳達錯誤

杰睿

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

我們的用戶不是程序員

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

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

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

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

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

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

心理學家會怎么說?

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

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

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

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

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

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

焦點切換時驗證

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

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

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

通常如何做

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

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

讓我們來分析一下。

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

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

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

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

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

調試模式

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

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

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

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

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

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

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

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

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

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

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

讓我們來分析一下。

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

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

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

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

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

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

現在,我們來快速看一下IBM的解決方案:

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

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

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

例子不勝枚舉。以網站 capital.xyz 為例:

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

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

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

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

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

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

事件與狀態

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

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

空字段

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

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

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

狀態改變

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

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

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

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

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

一次一個動作

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

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

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

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

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

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

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

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

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

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

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

州經理

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

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

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

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

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

結論

因此,我們發現了以下事實:

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

日歷

鏈接

個人資料

藍藍設計的小編 http://m.skdbbs.com

存檔

92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线
日韩综合精品| 我要色综合中文字幕| 国产精品亚洲人成在99www| 91麻豆精品国产自产在线| www免费网站在线观看| 另类一区二区三区| 亚洲精品视频自拍| 国产一区中文字幕| 欧美色欧美亚洲高清在线视频| 免费成人av在线播放| 欧美精选一区二区三区| 欧美大片在线观看一区| 男女免费观看在线爽爽爽视频| 另类视频一区二区三区| 欧美精品一本久久男人的天堂| 国产成人女人毛片视频在线| 成人福利视频在线看| 午夜成人在线视频| 久久人人99| 亚洲自拍欧美色图| 欧美.日韩.国产.一区.二区| 95精品视频| 欧美在线中文字幕| 欧美激情中文字幕| 亚洲电影二区| 亚洲午夜视频在线| 国产亚洲成av人在线观看导航| 激情欧美一区二区三区在线观看| www免费在线观看| 欧美一区二区三区四区在线观看地址| 欧美色图第一页| 欧美日韩国产乱码电影| 欧美黄网免费在线观看| 凹凸av导航大全精品| 日本在线视频中文有码| 2021天堂中文幕一二区在线观| 天堂中文а√在线| 中文字幕一区电影| 91在线观看下载| 日韩免费福利视频| 欧美激情影音先锋| 91麻豆国产福利在线观看| 欧美精品在线观看播放| 俄罗斯一级**毛片在线播放| 黄色不卡一区| 136国产福利精品导航网址应用| 黄色成人免费网| 欧美亚洲在线视频| 一区二区中文字幕在线| 亚洲国产另类 国产精品国产免费| 91嫩草国产线观看亚洲一区二区| 国产美女精品人人做人人爽| 视频成人永久免费视频| 亚洲一区二区在线播放| 国产激情偷乱视频一区二区三区| 456亚洲影院| 亚洲日韩第一页| 在线视频成人| a欧美人片人妖| 欧美高清在线视频观看不卡| 欧美1区2区| 国产人成亚洲第一网站在线播放| 欧美精品在线一区| 国产综合色视频| 国产高清视频一区二区| 日韩1区2区3区| 久久精品99国产精品酒店日本| av在线播放一区二区三区| 亚洲高清久久久久久| 粉嫩91精品久久久久久久99蜜桃| 99热在线精品观看| 91av视频在线免费观看| 日韩电影免费观| 国产精品xxxxx| 一区二区三区在线观看免费| 欧美日本亚洲韩国国产| 午夜影视一区二区三区| 亚洲欧美一区二区三区| 9久re热视频在线精品| 亚洲黄色尤物视频| 国产精品国产自产拍在线| 欧美激情中文字幕乱码免费| 亚洲制服丝袜一区| 欧美日韩国产麻豆| 日韩脚交footjobhdboots| 国外成人在线播放| 一区二区三区午夜视频| 亚洲精品国产首次亮相| 中文字幕av一区二区三区谷原希美| h网站视频在线观看| 日皮视频在线观看| 日韩经典中文字幕一区| 国产宾馆实践打屁股91| 国产欧美精品在线观看| 久久伊人色综合| 欧美顶级大胆免费视频| gogo高清午夜人体在线| 亚洲一区二区三区中文字幕| а√天堂8资源中文在线| 伊人久久亚洲热| 国产精品xxxxx| 国产最新精品免费| 希岛爱理av免费一区二区| 欧美极品视频一区二区三区| thepron国产精品| 视频一区欧美| 久久成人在线视频| 欧美性少妇18aaaa视频| 精品久久久久久中文字幕大豆网| 亚洲视频一起| 欧美日韩高清在线一区| 亚洲性夜色噜噜噜7777| 一本色道久久88亚洲综合88| 久久网福利资源网站| 欧美aaaaaa| 国产精品一区二区免费不卡| 亚洲欧美日韩国产综合在线| 五月开心婷婷久久| 欧美亚洲一区二区在线观看| 久久精品国产一区二区电影| 欧美亚洲国产一区二区三区va| 成人精品一区二区三区电影| 精品国精品国产自在久国产应用| 日本成人黄色片| 欧美日韩在线三级| 91精品在线免费观看| 亚洲天堂影视av| 久久国产精品影视| 蜜桃传媒在线观看免费进入| 日韩欧美一级片| 亚洲精品永久免费| 久久这里有精品视频| 精品一区二区三区欧美| 成人在线直播| av激情成人网| 国产不卡一区二区在线观看| 99久久综合狠狠综合久久| 国产日韩欧美精品一区| 亚洲色图国产| 欧美性xxxx极品hd满灌| 91精品视频在线看| 欧美激情综合色综合啪啪| 蜜桃一区二区三区在线| 中文字幕在线播放| 在线亚洲人成电影网站色www| 成人免费黄色大片| 欧美日韩中字| 人人澡人人澡人人看欧美| 国产伦精品一区二区三区千人斩| 欧美1级日本1级| 色999韩欧美国产综合俺来也| 免费成人看片网址| 91产国在线观看动作片喷水| 国产成人精品在线看| 久久久夜色精品亚洲| 日韩欧美中文字幕在线播放| 视频在线观看免费影院欧美meiju| 亚洲午夜色婷婷在线| 欧美午夜影院一区| 亚洲大片精品免费| 日韩精品五月天| 亚洲偷熟乱区亚洲香蕉av| 日韩天堂av| 欧美成人艳星乳罩|