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