在數(shù)字產(chǎn)品設(shè)計中，響應式設(shè)計早已成為連接功能與體驗的關(guān)鍵路徑。智能手表的表盤，作為最核心的信息承載區(qū)，正在向“可感知、可適配、可延展”的方向不斷演進。而我們將其類比為“數(shù)字卡片”，正是因為二者在設(shè)計邏輯上的高度契合：都追求信息層級的清晰展現(xiàn)、內(nèi)容與場景的靈活適配，以及操作的直觀反饋。
卡片設(shè)計以模塊化、結(jié)構(gòu)清晰、響應靈活著稱，能在不同屏幕與使用場景中自如調(diào)度內(nèi)容展示方式。而智能手表的表盤設(shè)計同樣需要在極小的顯示空間內(nèi)，精準傳遞時間、健康、通知等多維度信息。通過響應式設(shè)計的引入，表盤可以根據(jù)環(huán)境光線、使用者習慣、交互狀態(tài)等動態(tài)變化，自動調(diào)整元素的排布與表現(xiàn)形式，實現(xiàn)“信息即所需，界面即交互”。
例如，在運動狀態(tài)下表盤可自動突出心率與步數(shù)；而在夜間，它又能切換為更具護眼性的低亮模式。這種“感知上下文”的能力，讓表盤從一個靜態(tài)的界面，變?yōu)橐粋€貼近用戶、主動適應的智能卡片。
響應式的表盤設(shè)計，不僅提高了使用效率，更拓展了產(chǎn)品體驗的邊界。它像一張隨時變化的數(shù)字卡片，安靜卻聰明地陪伴在你腕間，把復雜的系統(tǒng)邏輯轉(zhuǎn)化為可感知的溫柔細節(jié)。
說實話，我們大多數(shù)人在設(shè)計屏幕時并不會考慮人腦。我們關(guān)注的是布局、間距和顏色。但事實是：設(shè)計并非發(fā)生在屏幕上——而是發(fā)生在用戶的大腦中。這就是神經(jīng)設(shè)計的用武之地。
神經(jīng)設(shè)計就是運用認知心理學和神經(jīng)科學來構(gòu)建直觀、輕松甚至略帶愉悅的界面。我之前并沒有學過神經(jīng)科學，但自從我開始了解大腦的運作方式后，我的設(shè)計方式就徹底改變了。
以下是我所學到的知識 — — 有真實的例子、用戶體驗法則和一些你可能想看看的書籍精華。
我們的大腦天生就具有節(jié)能的本能。這意味著人們幾乎總是會選擇阻力最小的路徑。當你的用戶界面過于復雜或選項過多時，大腦就會說：“不行。”
提供的選擇越多，做出決定所需的時間就越長。
想想谷歌的主頁只是一個標志和一個搜索欄。這并非偶然——它的設(shè)計是為了減少認知負荷。
設(shè)計首先是情感驅(qū)動，其次是邏輯驅(qū)動。這意味著色彩、布局甚至動畫都能在第一秒就建立信任。
讓我們來看一個例子：Duolingo 的應用程序使用友好的插圖、有趣的語氣，以及一些感覺像大腦“拍拍背”一樣的小獎勵。它降低了學習新語言的情感障礙。
以下是Susan Weinschenk 所著《神經(jīng)網(wǎng)絡(luò)設(shè)計》一書中的一條重要建議：
“我們不會做出合乎邏輯的決定。我們會做出情緒化的決定，然后用邏輯來證明其合理性。”
大腦喜歡模式。當用戶看到自己熟悉的事物時，他們會感到安全，并且能夠掌控一切。
用戶大部分時間都花在其他網(wǎng)站上。因此，他們期望你的產(chǎn)品也能以同樣的方式運作。
讓我們看一些例子：Instagram 的底部標簽欄、亞馬遜的購物車圖標或Gmail 的撰寫按鈕——它們都遵循常見的視覺隱喻，以減少學習曲線。
認知科學告訴我們，用戶的工作記憶中一次只能記住大約4個條目。因此，如果你的應用依賴于用戶記憶指令，那么它注定會失敗。
一般人的短期記憶只能保留 7 件（正負 2 件）物品。
真實案例：你有沒有嘗試填寫表單，但錯誤信息只有在提交后才會顯示，而你卻忘了哪個字段出了什么問題？這簡直就是記憶噩夢。
大腦會不斷檢查：這有效嗎？ 我能控制嗎？如果用戶界面沒有響應輸入，用戶就會感到不確定——即使后臺一切正常。
人們需要立即得到反饋來了解其行為的結(jié)果。
例如，Slack在消息發(fā)送時會顯示“正在發(fā)送…”的動畫和勾號。這能建立信任，尤其是在快速對話中。
以下幾本書確實幫助我將神經(jīng)科學和用戶體驗聯(lián)系起來：
好的用戶體驗不僅僅是讓事物看起來美觀。它在于理解人腦的運作方式，并圍繞此進行設(shè)計。神經(jīng)設(shè)計提醒我們，我們設(shè)計的不是屏幕，而是思維中的體驗。
當我們做得好的時候，一切都會順利。
所以下次調(diào)整布局或重新設(shè)計流程時，問問自己：
現(xiàn)在什么對大腦來說最容易？
這個問題比任何花哨的工具都更能幫助我做出更好的決策。
……
ChatGPT 是否有可能生成 UI？
我之前測試過幾次，但結(jié)果卻令人失望。
下面是我兩個月前在一份時事通訊中分享的一個例子。
它看上去太卡通了，不太實用。
然而，上周，OpenAI 推出了一個重大更新，所以我決定再次嘗試。
根據(jù)我的提示，我能夠生成更好的UI模型。我甚至可以根據(jù)自己的需求創(chuàng)建多個設(shè)計選項：
今天，我將向你們展示我進行的實驗、我使用的提示以及過程中的一些驚喜和收獲。
讓我們開始吧。
OpenAI 宣布，現(xiàn)在可以使用 GPT-4o 在 ChatGPT 中生成高質(zhì)量圖像，而不是使用較舊的 DALL·E 模型。
它更擅長遵循指令，并且可以更好地呈現(xiàn)圖像中的文本。
上周，許多人嘗試將照片轉(zhuǎn)換成人工智能藝術(shù)作品——這就是吉卜力風格藝術(shù)潮流流行的原因。
我也嘗試過：
但在網(wǎng)上看到很多有趣的藝術(shù)作品后，我想：
如果我可以使用 ChatGPT 生成對產(chǎn)品設(shè)計師真正有用的 UI 會怎么樣？
實驗就是從這里開始的。
我使用 ChatGPT 來幫助我生成我想要的 UI 的詳細提示。
# 為名為“SkillVerse - 熱門微課程”的應用設(shè)計一個簡潔、現(xiàn)代的移動 UI 界面（iOS 風格）。布局應遵循以下結(jié)構(gòu)化部分。## 1. 狀態(tài)欄（頂部）- **樣式**：標準 iOS 布局（頂部安全區(qū)域）---## 2. 標題部分- **居中標志**：“SkillVerse” - **字體**：中等粗細，小尺寸 - **顏色**：藍色文本 ---## 3. 特色課程輪播（水平滾動）- **風格**：具有圓角和柔和陰影的可滑動卡片 - **卡片**: -**卡 1** - 標題：**動態(tài)設(shè)計簡介** - 字幕：*4 月 2 日開始* - 視覺：動畫縮略圖 -**卡 2** - 標題：《自由職業(yè)者精通 Excel》 - 字幕：*3 月 31 日開始* - 視覺：生產(chǎn)力圖標 ---## 4. 導航標簽-**標簽**： - **趨勢**（活躍，**粗體標簽**帶有**藍色下劃線**） - 受到推崇的 - 已注冊 - 已保存 ---## 5. 過濾行- **過濾器（下拉菜單）**： - **過去 7 天**（基于時間） - **所有主題**（類別） - **所有級別**（難度） ---## 6. 熱門課程列表- **布局**：可重復課程項目的垂直堆疊： - **左**：圓形縮略圖 - **中心**： - 課程名稱 - 級別（例如，初學者、中級等） - **右**：保存圖標 - **底部**：入學人數(shù) + 趨勢（例如，入學人數(shù) 2.4k，+12%） ---## 7. 底部導航欄-**標簽**： - **主頁**（活動，突出顯示顏色） - 搜索 - 活動 - 輪廓 - **風格**： - 下方有標簽
然后我將其粘貼到 ChatGPT 中的新聊天窗口中，然后單擊“生成”圖標。
令人驚訝的是，ChatGPT 在右側(cè)打開了一個額外的面板，觸發(fā)了它的 Canvas 功能。然后它開始生成代碼。
這立刻讓我想起了克勞德的神器功能。
然后我點擊了右上角的“預覽”按鈕。
生成了響應式、代碼支持的 UI。
看起來很有趣，但似乎不如克勞德那么精確/精致。
由于我的目的只是生成一個圖像（一個可視化模型）而不是一個代碼支持的 UI，因此我請求后續(xù)提示來糾正它：
創(chuàng)建一個可視化模型。而是一個視覺模型。
結(jié)果如下：
結(jié)果出乎意料地好，尤其是與 ChatGPT (DALL·E) 之前生成的版本相比。這是一個巨大的提升。
測驗：你能在上述 AI 生成的 UI 中找到多少個拼寫錯誤？:)
盡管用戶界面看起來不錯，但我仍然對圖像截斷感到有點困擾，所以我問了：
頂部和底部看起來有點截斷。您能將 UI 縮小 20% 左右，讓它整體更小一些嗎？頂部和底部看起來有點截斷。您能將 UI 縮小20%左右， 讓它整體更小一些嗎？
結(jié)果如下：
看起來不錯！
然后我開始更有創(chuàng)意了……我想，如果我讓它生成多個設(shè)計方案供我參考會怎么樣？那會更有幫助！
所以我寫了這個：
創(chuàng)建三個設(shè)計選項。使用相同的核心內(nèi)容，但根據(jù)以下描述改變布局、UI 元素和視覺重點：選項 1. 大膽且引人入勝- 優(yōu)先考慮視覺沖擊力和品牌表達選項 2. 功能強大且快速- 優(yōu)先考慮速度、清晰度和生產(chǎn)力- 緊湊的用戶界面，卡片更小，信息層次更密集選項3.個性化和溫暖- 優(yōu)先考慮聯(lián)系、信任和個性化- “為你推薦”輪播，包含人工智能策劃的課程建議- 社會證明（頭像、徽章、朋友活動）- 添加“社區(qū)”選項卡，用于同行共享內(nèi)容
結(jié)果如下：
再次，我對 GPT-4o 圖像生成能力的提升感到震驚。
雖然這三個選項看起來仍然非常相似，但如果仔細觀察，就會發(fā)現(xiàn)一些小細節(jié) - 例如“搜索”圖標、社交證明和副本 - 試圖使每個版本都與其他版本區(qū)分開來。
不過，結(jié)果肯定還有改進的空間。例如，由于一張圖片中包含了大量信息，ChatGPT 的精度開始下降。你可能會注意到，部分文本變得無法識別/扭曲。
接下來，作為一個有趣的測試，我使用Codia AI 的插件根據(jù) ChatGPT 生成的視覺模型生成 Figma 設(shè)計。
所有組件（包括文本）都可以在 Figma 中編輯。
它使用的字體系列是 Intel。
好得可怕。
如果我想進行更改，這使我能夠自定義 UI 模型。
ChatGPT 生成 UI 視覺模型的能力是一個巨大的提升。與之前版本相比，它提供了更高的精度和對提示的遵循性。
話雖如此，速度還是有點慢，準確率還有待提高。有時圖像生成到一半就停止了；有時結(jié)果很隨機，而且與指令不完全一致。
當我要求 ChatGPT 根據(jù)設(shè)計選項創(chuàng)建 3D 模型時，事情變得有點扭曲和奇怪——但還不算太糟。
不管怎樣，這已經(jīng)是一次很棒的升級了。我現(xiàn)在能生成以前無法生成的東西了。
這一切都在 ChatGPT 聊天窗口內(nèi)完成。多么方便??？
我非常興奮并希望未來會有更好的升級。
是的。我們想知道為什么產(chǎn)品設(shè)計界這么多人都走到了崩潰的邊緣？我想說，我不認為設(shè)計已死。只是我覺得我們迷失了方向。
2023年，Airbnb首席執(zhí)行官布萊恩·切斯基（Brian Chesky）曾說過： “設(shè)計師必須有勇氣。”說實話，我們過去確實很有勇氣。一種無所畏懼的自信，一種打破現(xiàn)狀的近乎瘋狂的喜悅。“驚喜與愉悅”、“精益求精，保持簡潔”一直是我多年來領(lǐng)導設(shè)計團隊的座右銘。
我陷入了以收入為中心、癡迷于圖案設(shè)計的陷阱。
然而，不知何故，在某個時刻，也許是在無休止的會議、OKR、業(yè)務(wù)目標和盈利報告的催促下；又或許是因為公司內(nèi)部不斷邊緣化設(shè)計——這種自信消失了。我們從協(xié)作型的搖滾明星變成了解決問題的小齒輪，再變成了生存主義者。因為現(xiàn)在機器來了。
多年來，我本著脆弱的精神，陷入了以收益為中心、癡迷于圖案設(shè)計的陷阱。DS 是一種令人興奮的、以特定價格點進行設(shè)計的方法。讓我們?nèi)?chuàng)造收益！讓我們?nèi)?yōu)化利潤！讓我們快速實現(xiàn)各種創(chuàng)意！我們?yōu)槭裁匆趹搫?chuàng)新的時候重復造輪子呢？
聽起來很熟悉？
這就像個兔子洞。我和同事們聊過，大家都覺得，
如果我們用設(shè)計系統(tǒng)的方法錄制一張專輯，每首歌在技術(shù)上都是完美的，但它們聽起來本質(zhì)上都一樣。哪個用戶會因為反復聽這首歌而受到啟發(fā)呢？我們自己的設(shè)計故事已經(jīng)支離破碎了。
我們很多產(chǎn)品設(shè)計人員都生活在艾維所說的“企業(yè)議程已將設(shè)計和創(chuàng)新的重點從目標轉(zhuǎn)移到利潤”的境地。追求收益令人精疲力竭。創(chuàng)造性的故障排除被誤認為是創(chuàng)造力?；诳ò喟寤靵y和閃電般快速發(fā)布的產(chǎn)品經(jīng)理微觀管理的壓力。MVP 地獄景象。毫無結(jié)果的 A/B 測試，因為利益相關(guān)者不理解。整體創(chuàng)新解決方案被所謂的“安全”的快速解決方案扼殺。而這一切都是有代價的。靈感更少，活力更少，友善更少，壓力更大。更多的自我限制。更多的模仿。更多千篇一律、復雜而扁平的用戶體驗。等等。
過去一周，我的觀點與多年來形成的理念發(fā)生了轉(zhuǎn)變。我最近去一家大型游戲公司面試領(lǐng)導職位，面試的主題是如何創(chuàng)造收入。這才是整個團隊最關(guān)心的問題。他們沒有考慮用戶需求，也沒有考慮他們正在構(gòu)建的工作和體驗的樂趣。這些從未被討論過。
這真的讓我很困擾。非常困擾。這不是我第一次遇到這種情況。我一次又一次地發(fā)現(xiàn)，出現(xiàn)了兩件事：
我們大多數(shù)人都在無意識中直接促成了這一點。我們甚至沒有意識到這一點。然而，要論證人類首先是情感實體，這并不需要太多說服力。我們能夠立即感知和感受事物，然后再運用邏輯，這與人類的進化直接相關(guān)。然而，我們的設(shè)計方法在很多方面都缺乏這種能力。
（我在這篇文章中只關(guān)注設(shè)計的作用。但科技領(lǐng)域其他角色的出現(xiàn)，以及流水線投資回報率驅(qū)動的 IDEO 方法，無疑導致了設(shè)計優(yōu)先級的下降，不再以用戶感受為重點。）
我們需要重新進行重大的直覺選擇并重新感受事物。
有兩件事無疑產(chǎn)生了最大的影響。
- 新的 Google Material DS “發(fā)送”按鈕
。-
采訪喬納森·艾維。
兩者都重點討論了“歡樂與喜悅”和“火花”的設(shè)計。
谷歌界面的更新打破了所有固有規(guī)則，打造了獨特的數(shù)字體驗。他們抓住了機會，用數(shù)據(jù)驗證了這一可能性，最終他們的努力讓用戶參與度提升了4倍。
Jony 在Stripe大會上的采訪非常鼓舞人心。如果你今年需要看一部作品來了解設(shè)計對我們這個瞬息萬變的世界的重要性，那非看不可。他讓設(shè)計回歸了它的本源，那就是那神奇的“火花”。
當我思考這些時，我發(fā)現(xiàn)偉大的設(shè)計中存在著一些更具體的事情——顛覆。
在數(shù)字體驗的早期，沒有數(shù)據(jù)，沒有關(guān)鍵績效指標 (KPI)，也沒有流水線式的技術(shù)開發(fā)方法。當時的設(shè)計純粹是為了品牌價值、功能和實驗。我們有兩個代碼庫：HTML 和 Flash。工作的多樣性令人興奮。網(wǎng)站以及最終的原生應用都易于使用，易于導航，沒有算法，非常人性化。
我們也只是想打造一些我們的朋友和同事會談?wù)摰姆浅？岬臇|西。
設(shè)計團隊和工程團隊圍坐在一起，討論他們想要構(gòu)建的目標，并在整個過程中不斷合作。如同合作伙伴一樣。一份簡單的路線圖充滿了宏大的想法和雄心壯志。方法是什么？“我想要一個能夠?qū)崿F(xiàn)_____的酷炫解決方案，因為我想做_____。”
我們受到的啟發(fā)是（用艾維的話來說）“設(shè)計一些能夠推動物種發(fā)展的東西”，“為人類服務(wù)”。我們也只是想打造一些非?？岬臇|西，讓我們的朋友和同事談?wù)摗?/span>
有些品牌正在瘋狂地顛覆這個領(lǐng)域。比如Acorn和Airbnb。但當突破設(shè)計界限的設(shè)計如此罕見時，這對任何人來說都不是好兆頭。什么時候突破設(shè)計界限的設(shè)計非常罕見，這對任何人來說都不是好兆頭。
人工智能。
我們正為此瘋狂。長期以來，我們一直謹慎行事，構(gòu)建一套設(shè)計方法論式的設(shè)計系統(tǒng)，結(jié)果卻事與愿違。我和其他人一樣，也為自己的謹慎行事感到內(nèi)疚。不到五年，產(chǎn)品設(shè)計將不再像過去十五年那樣存在。這原本是一個令人恐懼的前景，直到我直面恐懼。
想想看，不用再構(gòu)建模式庫了。不用再花費無數(shù)時間迭代數(shù)據(jù)和最佳實踐。不用再熬夜撰寫和設(shè)計戰(zhàn)略方案了。這可不是設(shè)計，而是繁重的工作。說真的，讓機器來做吧。
我可以重新做我最擅長的事，運用我的智慧、想象力和經(jīng)驗來推動事情發(fā)展。當然可以。報名吧。我就是來干這個的。
我們不再打破常規(guī)。我們遵循著基于指標和績效的群體思維美學。我們各自為政，各自為政，各自為政。我們用耗時的方法來構(gòu)思創(chuàng)意。我們迷失在迭代的泥沼中。我們沒有逼迫自己打破常規(guī)。
如果我們退一步，縱觀設(shè)計的全局，就會發(fā)現(xiàn)我們所做的最偉大的設(shè)計，其核心都是“顛覆性”。敢于創(chuàng)新，敢于思考。它不斷嘗試新事物，探索新的視野。然而，我們對這門學科的內(nèi)在部分卻感到厭惡。
我不知道“幸運眷顧勇者”這句話是誰說的。
我的一個使命就是讓它重新回到我們的世界。
回去工作。
讓我們打破思維定勢。
讓我們都做些史詩般的事。
計發(fā)展日新月異——轉(zhuǎn)瞬即逝，你就會落后。把握設(shè)計的發(fā)展方向是成功的一半。以下根據(jù)目前的發(fā)展情況，概述了五大可能在 2026 年占據(jù)主導地位的 UX/UI 趨勢。
上周，我在一個熙熙攘攘的共享辦公空間里畫界面時，一位剛接觸 Figma 的學生設(shè)計師朋友湊過來問我：
“你是怎么跟上這些變化的？”
這句話深深地觸動了我。多年從事設(shè)計行業(yè)，我明白了：洞察潮流才能保持敏銳。以下是我關(guān)注的領(lǐng)域。
我現(xiàn)在用的新聞應用會根據(jù)我的閱讀習慣，根據(jù)文章的長度和深度來篩選文章。無需手動調(diào)整——它就能滿足我的需求。
設(shè)計的任務(wù)是打造一個能夠?qū)W習且不會讓用戶感到害怕的系統(tǒng)。通過人工智能實現(xiàn)的個性化應該像一個樂于助人的朋友，而不是一個跟蹤狂。關(guān)鍵在于平衡智能自動化和用戶控制。
AR 正在擺脫游戲的桎梏。想象一下一款家居維修應用：它將虛擬的架子投射到廚房墻上，讓你四處走動，看看它們是否合適。
到2026年，AR設(shè)計將成為標桿。還在覺得它只是個噱頭嗎？是時候重新思考了，否則你就錯失良機了。
人工智能工具正在徹底改變我的工作流程。最近，我請一位人工智能工具為一個 SaaS 項目快速設(shè)計圖標——一分鐘內(nèi)就得到了 10 個方案，全部符合 WCAG 標準，并且符合品牌形象。
真正的問題并非AI能否設(shè)計，而是我們?nèi)绾闻c它合作，將項目推向新的高度。不妨把它想象成一位由你掌控全局的智能助手。
我吃過不少苦頭才明白這一點：為“普通”用戶設(shè)計是失敗的。在一個項目中，我重新設(shè)計了一個移動應用的注冊表單，因為我意識到它對于手抖的人來說太笨重了。
到2026年，包容性設(shè)計將不再只是一張紙，而將成為一項競爭優(yōu)勢。滿足多元化需求，打造人人喜愛的產(chǎn)品。
上周末，我通過一個應用程序預訂了一張餐廳餐桌——甚至都沒注意到我已經(jīng)付款了。指紋驗證，我的常用設(shè)置自動應用，搞定了。
設(shè)計的作用是減少摩擦，同時保持用戶的控制力。設(shè)計的目的是讓日常操作感覺安全，而不是草率。
“我們把屏幕上的按鈕做得如此好看，讓你忍不住想舔舔它們。” ——史蒂夫·喬布斯
我記得亨利·福特曾經(jīng)說過：“如果我問顧客想要什么，他們會告訴我一匹跑得更快的馬。”人們不知道自己想要什么，除非你把東西展示給他們看。—— 史蒂夫·喬布斯
在很多地方，這簡直就是認知超負荷和可讀性低下的噩夢。玻璃折射需要一定的透明度才能達到最佳效果，而這種透明度會讓一半的背景顯得格格不入。
說實話，我真不知道蘋果是怎么做到的。在嘗試模仿之后（使用 AGSL 著色器——作者注），我對液態(tài)玻璃產(chǎn)生了全新的敬意。我猜他們也用了著色器——只是更加精妙。蘋果花了數(shù)年時間打造一個可以實現(xiàn)這一功能的系統(tǒng)。安卓系統(tǒng)還沒達到這個水平。也許小米或其他中國品牌會找到解決辦法。但在我們找到開源解決方案之前，在安卓系統(tǒng)上實現(xiàn)真正的玻璃形態(tài)仍然遙不可及。
我們發(fā)現(xiàn)瀏覽器支持有限，這迫使我們不得不使用一些不太理想的解決方法。隨著時間的推移，WebKit 引入了 backdrop-filter CSS 屬性，但它仍然是性能殺手——瀏覽器每次滾動時都必須重新計算模糊效果。也許 Apple 已經(jīng)在其設(shè)備上對此進行了優(yōu)化，但我強烈建議任何在 Apple 以外的平臺上構(gòu)建 Liquid Glass 設(shè)計的人都進行徹底的性能測試。
“好的設(shè)計是無形的。” ——迪特·拉姆斯
藍藍設(shè)計的小編 http://www.orwi.cn