性做无码视频在线观看_国产精品爽爽ⅴa在线观看_婷婷丁香社区_亚洲av无码男人的天堂在线男人扒开添女人下部免费视频_国产JIZZJIZZ麻豆全部免费_国产精品天堂avav在线_

首頁

2026 年值得關(guān)注的頂級 UI/UX 趨勢

杰睿

1. AI優(yōu)先設(shè)計(jì)

將顯示縮放圖像
展示 AI 應(yīng)用設(shè)計(jì)的應(yīng)用程序

多年來,我們一直在聽說人工智能在設(shè)計(jì)領(lǐng)域的應(yīng)用。2024 年,它生成的布局看起來像是醉酒實(shí)習(xí)生做的。2025 年,它的表現(xiàn)有所改善,但仍然感覺像是作弊。

現(xiàn)在已經(jīng)2026年了?人工智能不再只是個(gè)助手。它基本上是你的設(shè)計(jì)伙伴,不會(huì)再抱怨反饋了。Galileo、Uizard 以及 Figma 上周剛剛收購的那些工具,生成的界面不僅可用,而且效果驚人。設(shè)計(jì)師現(xiàn)在花更多時(shí)間進(jìn)行改進(jìn)和制定策略,而不是無休止地?cái)[弄自動(dòng)布局框。

趨勢:

  • 諸如“讓這個(gè)流程對 alpha 版本更加友好 20%”之類的設(shè)計(jì)提示現(xiàn)在已經(jīng)成為一種流行趨勢。
  • UX文案由AI撰寫一半稿子,然后由人類進(jìn)行潤色。
  • 評判設(shè)計(jì)師的標(biāo)準(zhǔn)是他們提示得有多好,而不是他們推動(dòng)像素得有多好。

設(shè)計(jì)提示:開始像對待初級設(shè)計(jì)師一樣對待 AI 工具。引導(dǎo)它們,糾正它們。不要讓它們肆意妄為,否則它們會(huì)為計(jì)算器設(shè)計(jì)一套 6 步入門指南。

2.“零 UI”的興起

將顯示縮放圖像
ChatGPT 界面

從零開始設(shè)計(jì)?那就2025年吧。我們正進(jìn)入一個(gè)最好的界面就是沒有界面,或者至少?zèng)]有傳統(tǒng)界面的時(shí)代。

想想語音、手勢、存在檢測、情境感知界面。設(shè)備和體驗(yàn)在你開口之前就能猜測你想要什么。

恐怖?是的,有點(diǎn)兒。
方便?絕對方便。

現(xiàn)實(shí)世界的例子:

  • 智能冰箱無需詢問即可重新訂購牛奶。
  • 汽車通過掃描你的臉部來調(diào)整你的座椅。
  • 只需思考布局就能設(shè)計(jì)界面的 VR 頭顯。(好吧,這個(gè)功能還在測試階段。)

趨勢:

  • 為“隱形”交互而設(shè)計(jì)。
  • 優(yōu)先考慮音頻、觸覺或行為的反饋循環(huán)。
  • 徹底重新思考屏幕的作用,尤其是在消費(fèi)技術(shù)領(lǐng)域。

設(shè)計(jì)提示:從體驗(yàn)開始設(shè)計(jì)原型,而不是屏幕。并在現(xiàn)實(shí)世界中測試它。

3. 高度個(gè)性化,但有界限

將顯示縮放圖像
健康追蹤應(yīng)用程序

到了2026年,用戶不再需要千篇一律的體驗(yàn)。他們想要一款能夠了解他們的睡眠模式、喜歡的顏色以及童年創(chuàng)傷的應(yīng)用,但又不能讓人覺得毛骨悚然。

個(gè)性化日益升級,但隱私問題也日益凸顯。這意味著智能默認(rèn)設(shè)置、基于行為的界面以及專為用戶打造的儀表盤。

趨勢:

  • 根據(jù)上下文進(jìn)行調(diào)整的界面:夜間使用黑暗模式,大腦疲勞時(shí)使用簡化的用戶界面等。
  • 高度集中的入職流程根據(jù)您的氛圍量身定制:為專業(yè)人士提供簡約服務(wù),為新手提供指導(dǎo)。
  • 為高級用戶提供“選擇您自己的 UX 冒險(xiǎn)”設(shè)置。

設(shè)計(jì)提示:讓用戶自主決定個(gè)性化程度。讓個(gè)性化變得有趣。不要將功能鎖定在數(shù)據(jù)共享墻后面。

4. 滾動(dòng)已死。滾動(dòng)萬歲。

多年來,我們一直熱愛滾動(dòng)。無限滾動(dòng)、水平滾動(dòng)、視差滾動(dòng)。

現(xiàn)在?滾動(dòng)正在進(jìn)化。2026 年,一切都圍繞著滾動(dòng)敘事展開。流暢的過渡,智能的捕捉,以及微妙的交互,讓用戶不會(huì)感覺自己一直在喝紅牛。

趨勢:

  • 卷軸作為敘事手段
  • 配對的動(dòng)畫和微交互創(chuàng)造了一種旅程,而不僅僅是滾動(dòng)到頁腳的情況。
  • 基于滾動(dòng)的 UI,根據(jù)速度或意圖而變化。

設(shè)計(jì)提示:在所有設(shè)備上測試滾動(dòng)行為。在 MacBook Pro 上看起來流暢的滾動(dòng)效果,在售價(jià) 99 美元的 Android 平板電腦上可能感覺像做夢一樣。

5.語音界面成為主流

將顯示縮放圖像
語音界面應(yīng)用程序

過去,除非你像機(jī)器人一樣說話,否則 Alexa 總是會(huì)誤解一切。但到了 2026 年,語音界面終于成熟了。

得益于更先進(jìn)的 NLP 模型,語音正在成為導(dǎo)航應(yīng)用的標(biāo)準(zhǔn)方式,尤其是在可穿戴設(shè)備、汽車和智能家居領(lǐng)域。設(shè)計(jì)師面臨的關(guān)鍵挑戰(zhàn)是什么?超越視覺 UI 的思考。

趨勢:

  • 語音和視覺反饋接口同步工作。
  • 適用于多任務(wù)場景(例如烹飪、駕駛、育兒)的純語音用戶流程。
  • 個(gè)性豐富的語音助手讓生活變得輕松。

設(shè)計(jì)提示:不要讓每個(gè)應(yīng)用都顯得吵鬧。有意識地設(shè)計(jì)安靜的語音交互。并且,務(wù)必為用戶提供“關(guān)閉”按鈕。

6. 設(shè)計(jì)要考慮神經(jīng)多樣性,而不僅僅是可及性

將顯示縮放圖像
患有神經(jīng)多樣性的兒童

無障礙功能不再只是一張清單。2026 年,我們將為認(rèn)知包容性而設(shè)計(jì),服務(wù)于患有多動(dòng)癥、自閉癥、閱讀障礙以及介于兩者之間的各種疾病的用戶。

這不再僅僅關(guān)乎顏色對比度或屏幕閱讀器,而是關(guān)乎信息的結(jié)構(gòu)、通知的工作方式以及如何減輕精神負(fù)擔(dān)。

趨勢:

  • 可選的極簡模式,可消除噪音。
  • 帶有“運(yùn)動(dòng)靈敏度”切換的動(dòng)畫。
  • 尊重焦點(diǎn)的界面;是的,我們正在談?wù)撃?7 個(gè)彈出窗口。

設(shè)計(jì)提示:開始用真正的神經(jīng)多樣性用戶測試你的設(shè)計(jì)。不要只是“添加一個(gè)模式”。要將包容性設(shè)計(jì)融入核心用戶體驗(yàn)。

7.反設(shè)計(jì)2.0

來看看反設(shè)計(jì) 2.0 吧。它丑陋、混亂、怪異得令人難以接受。它無處不在,尤其是在那些努力避免看起來像 Webflow 模板的作品集網(wǎng)站上。

這種趨勢的核心在于打破常規(guī),但又不失其有意為之。想想那些刺眼的色彩、夸張的元素、重疊的文字,但不知何故,它卻奏效了。

趨勢:

  • 設(shè)計(jì)師將不完美視為一種風(fēng)格。
  • 用戶界面接近“糟糕”,但在千篇一律的界面中卻脫穎而出。
  • 更注重真實(shí)性而非完美性。

設(shè)計(jì)提示:謹(jǐn)慎使用此趨勢。如果你正在設(shè)計(jì)銀行應(yīng)用程序,最好不要使用 Comic Sans 字體和搖擺按鈕。

8. 具有幽默感

將顯示縮放圖像
企鵝在雪地里看著 404 標(biāo)志

2026年,就連你的信用卡應(yīng)用也開始嘗試搞笑了。你知道嗎?它真的有效。

人性化的界面,巧妙的微文案、精妙的動(dòng)畫和令人驚喜的瞬間,讓產(chǎn)品更令人難忘。用戶不再僅僅追求“直觀”,他們更追求樂趣

趨勢:

  • 用個(gè)性化的祝酒詞。“哎呀。這招不行。不過,嘿,你上一段感情也沒用。”
  • 錯(cuò)誤屏幕會(huì)讓你笑,而不是哭。

喜悅與無聊的東西(比如空狀態(tài)和確認(rèn)消息)融合在一起。

設(shè)計(jì)提示:不要過度。并非所有內(nèi)容都需要單口相聲。只需營造一種讓你的產(chǎn)品感覺不那么機(jī)械、更具親和力的氛圍即可。

9. VR之外的3D和空間設(shè)計(jì)

得益于 Apple Vision Pro、Meta Quest 以及三星的各項(xiàng)研發(fā)成果,空間設(shè)計(jì)已不再是小眾領(lǐng)域。但你無需VR 頭顯進(jìn)行設(shè)計(jì)即可擁抱 3D 空間。

2026 年,扁平化的 UI 將會(huì)變得更加立體。不再是虛假的陰影,而是真實(shí)的、可交互的深度。

趨勢:

  • 響應(yīng)光標(biāo)移動(dòng)的 3D 卡。
  • 電子商務(wù)和設(shè)計(jì)工具中的 AR 預(yù)覽。
  • 界面感覺更像是物理空間而不是平面布局。

設(shè)計(jì)提示:像建筑師一樣思考。關(guān)注用戶如何在空間中移動(dòng),而不僅僅是屏幕。但不要讓性能受到影響。流暢的 2D 流程總比混亂不堪的 3D 流程好。

10. 設(shè)計(jì)時(shí)考慮地球

將顯示縮放圖像
UI 中的 Eco 模式

可持續(xù)設(shè)計(jì)終于不再只是你產(chǎn)品宣傳單上的一張幻燈片了。到了2026年,用戶開始關(guān)心你的應(yīng)用有多“環(huán)保”,沒錯(cuò),這已經(jīng)是千真萬確的事情了。

你的應(yīng)用消耗的資源越少越好。輕量級 UI、低帶寬模式和智能緩存不僅僅是技術(shù)性的功能,更是用心良苦的功能。

趨勢:

  • 應(yīng)用程序中的生態(tài)模式設(shè)置可降低數(shù)據(jù)/功耗。
  • 碳中和設(shè)計(jì)實(shí)踐。
  • 應(yīng)用程序加載速度快、操作輕便,并且不會(huì)在三次滑動(dòng)中耗盡電池電量。

設(shè)計(jì)提示:別粉飾太平。務(wù)必打造高效的 UI。額外福利:用戶本來就喜歡快速的應(yīng)用,所以這是雙贏的。

最后的想法:2026 年的設(shè)計(jì)不再注重炫酷,而更注重感覺

設(shè)計(jì)不再僅僅關(guān)乎“好看”。它關(guān)乎智能、同理心和真正實(shí)用。2026 年最好的界面不僅要美觀,還要個(gè)性化、包容性、趣味性,甚至可能是隱形的。

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

用戶體驗(yàn)的骨骼

杰睿

如果說設(shè)計(jì)探索和創(chuàng)造力是肌肉,那么結(jié)構(gòu)就是骨骼。沒有結(jié)構(gòu)支撐,肌肉就無法運(yùn)作。沒有骨骼的肌肉只是一團(tuán)亂麻,無法進(jìn)行有意義的運(yùn)動(dòng)或產(chǎn)生力量。結(jié)構(gòu)賦予我們的創(chuàng)意以張力,從而產(chǎn)生力量。我們的設(shè)計(jì)力量不會(huì)因結(jié)構(gòu)而削弱,反而會(huì)因結(jié)構(gòu)而增強(qiáng)。

將顯示縮放圖像
手繪插圖展示手臂骨骼和肌肉產(chǎn)生的力量。
權(quán)力需要結(jié)構(gòu)才能發(fā)揮作用。

非結(jié)構(gòu)化設(shè)計(jì)的陷阱

團(tuán)隊(duì)很容易就直接進(jìn)入流程和界面模型。利益相關(guān)者提出功能需求。項(xiàng)目截止日期確定。敏捷待辦事項(xiàng)列表呼之欲出。設(shè)計(jì)師……他們用屏幕來回應(yīng)。這是他們能展示的最具體的東西,讓所有團(tuán)隊(duì)成員都覺得自己了解事情的發(fā)展方向。

但如果沒有清晰的組織,事情就會(huì)變得很混亂。

這就像在沒有骨架的情況下鍛煉肌肉。肌肉收緊,卻沒有支撐肌肉的支撐。結(jié)果會(huì)怎樣?錯(cuò)位、返工,以及薄弱的解決方案。人們在行動(dòng),但缺乏協(xié)調(diào),效率低下。

那么,問題是……我們?nèi)绾畏乐惯@種情況發(fā)生?

改變一切的結(jié)構(gòu)性思維

三年前,我接觸到了面向?qū)ο笥脩趔w驗(yàn) (UX)。一位同事向我介紹了它。作為一名曾經(jīng)從事面向?qū)ο缶幊痰拈_發(fā)人員,我一下子就被它深深吸引。

雖然我一開始并沒有深入研究,但我從基礎(chǔ)開始:識別核心對象、命名屬性以及映射關(guān)系。很快,我開始清晰起來?,F(xiàn)在更容易發(fā)現(xiàn)差距,更容易與利益相關(guān)者溝通,也更自信地領(lǐng)導(dǎo)設(shè)計(jì)活動(dòng)。雖然我個(gè)人很喜歡OOUX,但它并沒有在整個(gè)組織中廣泛應(yīng)用。

直到最近……情況才有所改變。在過去的幾個(gè)月里,團(tuán)隊(duì)里有幾個(gè)人學(xué)習(xí)了OOUX思維,并在最近的一個(gè)項(xiàng)目中運(yùn)用它。我很高興又有人看到了結(jié)構(gòu)化思維的價(jià)值!

將顯示縮放圖像
手繪腿部插圖,顯示膝關(guān)節(jié)鉸鏈如何運(yùn)用肌肉力量
骨骼就像杠桿一樣,可以施加肌肉的力量

這個(gè)項(xiàng)目進(jìn)展很快。但團(tuán)隊(duì)中有人很有遠(yuǎn)見,在項(xiàng)目初期就放慢了速度,盤點(diǎn)并繪制對象和關(guān)系圖。他們使用了一款基于面向?qū)ο笏季S的自主研發(fā)工具。只需幾次會(huì)議,我們就清晰地了解了應(yīng)該向用戶呈現(xiàn)哪些內(nèi)容、這些元素如何關(guān)聯(lián),以及它們之間的連接結(jié)構(gòu)。這為團(tuán)隊(duì)凝聚力構(gòu)建了框架結(jié)構(gòu)。而且,這短暫的放慢帶來了意想不到的回報(bào)。

我看到了三大好處:

  1. 這種清晰的思路促成了更牢固的合作關(guān)系。項(xiàng)目團(tuán)隊(duì)迅速就清晰的對象模型達(dá)成一致。這意味著我們正朝著同一個(gè)方向努力。我們無需浪費(fèi)時(shí)間重新解讀模糊的需求或處理溝通上的錯(cuò)誤。產(chǎn)品負(fù)責(zé)人、工程師、架構(gòu)師和設(shè)計(jì)師都理解我們的設(shè)計(jì)理念以及各個(gè)組件之間的聯(lián)系。
  2. 團(tuán)隊(duì)可以獨(dú)立并行運(yùn)行。這種清晰的思路意味著瀑布式設(shè)計(jì)交接的終結(jié)。它增強(qiáng)了團(tuán)隊(duì)之間、學(xué)科之間的信任,而這一切都建立在強(qiáng)大的共識之上。團(tuán)隊(duì)可以獨(dú)立并行運(yùn)行,因?yàn)樗麄兞私獗3止ぷ骱椭C的總體結(jié)構(gòu)。
  3. 使設(shè)計(jì)工作速度翻倍。設(shè)計(jì)師無需再浪費(fèi)時(shí)間去探索用戶會(huì)看到哪些信息以及這些項(xiàng)目之間的關(guān)系。他們可以專注于如何呈現(xiàn),而不是關(guān)注展示什么。他們的設(shè)計(jì)精力集中在如何以最佳的方式為用戶排列對象上。

雖然還有其他好處,但作為一名設(shè)計(jì)領(lǐng)導(dǎo)者,這三點(diǎn)對我來說至關(guān)重要。因?yàn)槲覀兊墓羌芤呀?jīng)到位,所以創(chuàng)意工作(肌肉)才能發(fā)揮作用。堅(jiān)實(shí)的結(jié)構(gòu)提供了一個(gè)錨點(diǎn),讓我們能夠充分發(fā)揮創(chuàng)造力的力量。設(shè)計(jì)師們行動(dòng)迅速、自信,并且目標(biāo)明確。最重要的是,他們與周圍的團(tuán)隊(duì)能夠和諧共處。

OOUX入門

現(xiàn)在,您可能想知道如何才能看到同樣的結(jié)果?嗯,您的實(shí)際效果可能會(huì)因項(xiàng)目和文化而異。但是,根據(jù)我使用 OOUX 以及觀察我的團(tuán)隊(duì)對其的依賴程度的個(gè)人經(jīng)驗(yàn)……我強(qiáng)烈推薦這套工具集。

將顯示縮放圖像
手繪的蘋果樹與陽光和草的插圖
映射對象不必過于復(fù)雜

你無需徹底改造整個(gè)流程即可從 OOUX 中獲益。請不要這么做。它只是你工具包中另一個(gè)幫助你理解設(shè)計(jì)問題的工具。

你可以從小事做起,隨著時(shí)間的推移逐漸成長:

  • 確定用戶將與之交互的核心對象。有些人將這些稱為體驗(yàn)的“名詞”。它們是你在項(xiàng)目中必須考慮的“對象”。如果你正在構(gòu)建水果體驗(yàn),其中一個(gè)對象可能是蘋果。它是一個(gè)具體的、可定義的事物。不是吃蘋果,而是蘋果本身。你可以開始問:現(xiàn)實(shí)世界中存在的哪些“事物”必須在數(shù)字體驗(yàn)中呈現(xiàn)?哪些“事物”被創(chuàng)建和管理?這種思考將為你的下一步工作奠定堅(jiān)實(shí)的基石。
  • 定義每個(gè)對象的屬性。每個(gè)“事物”(或?qū)ο螅┒加衅涠x性特質(zhì)。就像蘋果有綠色、紅色或黃色等顏色一樣,蘋果也有成熟度。這些是系統(tǒng)中所呈現(xiàn)的對象的定義性特征,使每個(gè)對象獨(dú)一無二且易于區(qū)分。哪些特征定義了系統(tǒng)中的對象?哪些內(nèi)容可以更改或不可更改?(標(biāo)題、描述、顏色、狀態(tài)、日期等)。這些屬性可以快速提供構(gòu)成人們與這些對象交互的細(xì)節(jié)。
  • 映射它們之間的關(guān)系。這是接下來的關(guān)鍵步驟之一。對象(或系統(tǒng)中的“事物”)并非孤立存在。它們與其他對象相互作用。一個(gè)蘋果與一棵樹、它裝運(yùn)的板條箱以及銷售它的雜貨店的陳列品都有關(guān)系。映射這些對象之間的關(guān)系,可以讓用戶更清晰地理解它們。它們之間是否存在父子關(guān)系?一個(gè)對象是否依賴另一個(gè)對象?是否存在隱藏的對象?這些關(guān)系可以清晰地展現(xiàn)骨骼的排列和綁定方式。

即使是像這樣簡單的練習(xí)也能快速帶來清晰的思路。而且它們規(guī)?;潭群芨?。它們?yōu)榍逦乃悸诽峁┝似瘘c(diǎn)。雖然它們并非面向?qū)ο笥脩趔w驗(yàn) (OOUX) 工具集的完整代表,但它們是面向?qū)ο笏季S的開端,您可以輕松掌握并立即開始使用。

如果您想了解更多,可以訪問OOUX.com ,了解Sophia Prater 提出的ORCA 流程。如果您想更深入地了解,可以加入OOUX 社區(qū)并參加一些官方培訓(xùn)。這些工具為您提供了支持更具雄心的設(shè)計(jì)工作的結(jié)構(gòu)——無需猜測。

(重要免責(zé)聲明:不管你怎么想……這里沒有附屬鏈接或回扣。我只是熱衷于分享有用的資源,以幫助設(shè)計(jì)師提高效率。)

結(jié)構(gòu)是一種資產(chǎn)

讓我們重新審視一下人體骨骼的類比。如果沒有有序的骨骼,肌肉就無法賦予人體活動(dòng)能力。我們無法舉起或移動(dòng)物體。人體需要肌肉和骨骼。這些骨骼必須有序排列。每當(dāng)一根骨頭斷裂,就會(huì)降低肌肉發(fā)力的能力。

將顯示縮放圖像
手繪骨骼缺失插圖:需要結(jié)構(gòu)
發(fā)揮創(chuàng)造力需要結(jié)構(gòu)

此外,人體骨骼種類繁多。股骨極其堅(jiān)固。內(nèi)耳骨又小又敏感。你可以依靠股骨來引導(dǎo)腿部肌肉的力量……但內(nèi)耳骨的作用就沒那么大了。組織這些骨骼,了解它們的屬性,并安排它們之間的關(guān)系,為肌肉的有效運(yùn)作提供了基礎(chǔ)。

設(shè)計(jì)也是如此。組織結(jié)構(gòu)清晰,讓你能夠運(yùn)用創(chuàng)造力,讓你的設(shè)計(jì)力更加有效。想想奧運(yùn)會(huì)舉重運(yùn)動(dòng)員驚人的力量吧。這一切都?xì)w功于健康的骨骼結(jié)構(gòu)。

當(dāng)項(xiàng)目變得模糊不清、定義不明確時(shí),問問自己是否應(yīng)該暫時(shí)放慢速度來組織起來。

如何運(yùn)用設(shè)計(jì)探索的方法來理解項(xiàng)目目標(biāo)?如何與您所在領(lǐng)域的團(tuán)隊(duì)合作,共同完成這類地圖?

結(jié)構(gòu)的剛性應(yīng)該成為優(yōu)勢,而不是劣勢。尤其是在用作支撐元素時(shí)。它能讓創(chuàng)造性思維獲得動(dòng)力,而不是徒勞無功。因?yàn)榧词故鞘澜缟献顝?qiáng)大的肌肉,如果沒有支撐,也是無用的。

OOUX思維賦予了我們團(tuán)隊(duì)以目標(biāo)為導(dǎo)向的動(dòng)力。每次運(yùn)用它,我們都會(huì)被提醒:結(jié)構(gòu)并非創(chuàng)造力的障礙……而是能夠最大程度發(fā)揮創(chuàng)造力的因素。

 

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

桌面端界面設(shè)計(jì) | 設(shè)計(jì)儀表盤時(shí)應(yīng)避免的 6 個(gè) UX 設(shè)計(jì)錯(cuò)誤

杰睿

來源網(wǎng)址 — https://dribbble.com/shots/24659454-Customer-Journey-CRM-Dashboard

儀表板在企業(yè)應(yīng)用程序中扮演著至關(guān)重要的角色,它為用戶提供重要數(shù)據(jù)的結(jié)構(gòu)化視圖。然而,設(shè)計(jì)不佳的儀表板可能會(huì)導(dǎo)致混亂、效率低下和用戶失望。精心設(shè)計(jì)的儀表板不應(yīng)僅僅顯示數(shù)據(jù),而應(yīng)提供有意義的信息,幫助用戶快速做出決策。

為了確保有效的儀表板體驗(yàn),請避免這六個(gè)常見的 UX 設(shè)計(jì)錯(cuò)誤。

1.導(dǎo)航結(jié)構(gòu)不佳

導(dǎo)航是任何儀表板的支柱。許多設(shè)計(jì)師犯了一個(gè)錯(cuò)誤,將所有導(dǎo)航選項(xiàng)塞進(jìn)一個(gè)菜單中,導(dǎo)致用戶難以找到必要的功能。

最佳實(shí)踐:

  • 使用頂部的全局導(dǎo)航來執(zhí)行配置文件、設(shè)置和注銷等關(guān)鍵操作。
  • 儀表板特定的導(dǎo)航放在左側(cè)以組織視圖、數(shù)據(jù)類型和工具。
  • 利用面包屑為用戶提供深入瀏覽內(nèi)容的清晰路徑。

例子:

將顯示縮放圖像
來源網(wǎng)址 — https://dribbble.com/shots/24191273-Sales-Analytics-Dashboard

2. 忽視用戶的心智模型

用戶在與儀表板交互時(shí),期望其結(jié)構(gòu)合乎邏輯且熟悉。如果菜單類別和標(biāo)簽不符合他們的預(yù)期,儀表板就會(huì)變得缺乏直觀性。

最佳實(shí)踐:

  • 進(jìn)行用戶研究以了解用戶期望如何查找信息。
  • 使用卡片分類等技術(shù)根據(jù)用戶行為來組織菜單項(xiàng)。
  • 確保命名約定和菜單結(jié)構(gòu)符合用戶的期望。

例子:

將顯示縮放圖像
來源網(wǎng)址 — https://dribbble.com/shots/24481340-Syncrowave-CRM-Dashboard

3. 使用錯(cuò)誤的數(shù)據(jù)可視化

選擇錯(cuò)誤的圖表類型會(huì)使數(shù)據(jù)更難解讀。有些可視化更適合比較,而有些則更適合趨勢圖或單個(gè)數(shù)據(jù)點(diǎn)。

最佳實(shí)踐:

  • 在選擇可視化之前,了解數(shù)據(jù)背后的信息。
  • 使用條形圖為了進(jìn)行比較,折線圖了解趨勢,以及餅圖比例。
  • 保持可視化簡單,避免不必要的復(fù)雜性,避免讓用戶感到困惑。

例子:

將顯示縮放圖像
來源網(wǎng)址 — https://dribbble.com/shots/24061999--Exploration-Finance-Data-Charts

4.依賴靜態(tài)內(nèi)容

儀表盤應(yīng)該提供實(shí)時(shí)、可操作的洞察。如果內(nèi)容每天都一樣,用戶就沒有理由重新訪問儀表盤。

最佳實(shí)踐:

  • 關(guān)注根據(jù)實(shí)時(shí)數(shù)據(jù)定期更新的動(dòng)態(tài)內(nèi)容。
  • 突出顯示需要用戶注意的關(guān)鍵更新,例如警報(bào)或性能變化。
  • 使用交互式小部件,讓用戶深入了解特定數(shù)據(jù)。

例子:

將顯示縮放圖像
來源網(wǎng)址 — https://dribbble.com/shots/24571531-DisputeFox-Credit-Score-Dashboard

5.過多的空白和填充

許多設(shè)計(jì)師將網(wǎng)頁設(shè)計(jì)原則應(yīng)用于儀表盤,導(dǎo)致過多的空白,迫使用戶進(jìn)行不必要的滾動(dòng)。對于儀表盤而言,效率才是關(guān)鍵。

最佳實(shí)踐:

  • 保持設(shè)計(jì)緊湊,同時(shí)保持可讀性。
  • 確保只需最少的滾動(dòng)即可訪問重要數(shù)據(jù)。
  • 使排序、搜索和過濾等全局交互易于訪問。

例子:

將顯示縮放圖像
來源網(wǎng)址 — https://dribbble.com/shots/22543517-Crypto-Web-Dashboard

6. 沒有針對不同的用戶角色進(jìn)行設(shè)計(jì)

企業(yè)儀表板服務(wù)于具有不同需求的多種用戶類型。千篇一律的通用儀表板通常會(huì)導(dǎo)致效率低下。

最佳實(shí)踐:

  • 識別不同的用戶角色及其特定需求。
  • 提供基于角色的視圖,以根據(jù)工作職能定制信息。
  • 進(jìn)行用戶測試以驗(yàn)證每個(gè)角色是否可以輕松訪問相關(guān)數(shù)據(jù)。

例子:

將顯示縮放圖像
來源網(wǎng)址 — https://dribbble.com/shots/25007872-SportX-UI-Kit-Charts-Sources

現(xiàn)實(shí)世界中精心設(shè)計(jì)的儀表盤示例

以下是一些遵循良好用戶體驗(yàn)原則的實(shí)時(shí)儀表板示例:

  1. Google Analytics——提供清晰的數(shù)據(jù)可視化和可自定義的視圖。
  2. Salesforce 儀表板——為銷售和營銷團(tuán)隊(duì)提供基于角色的數(shù)據(jù)。
  3. Tableau 儀表板— 支持使用動(dòng)態(tài)內(nèi)容進(jìn)行交互式數(shù)據(jù)探索。

精心設(shè)計(jì)的儀表板不僅僅是數(shù)據(jù)的展示,它更是一個(gè)幫助用戶高效做出明智決策的工具。通過避免這些常見的用戶體驗(yàn)錯(cuò)誤,您可以創(chuàng)建一個(gè)既用戶友好又功能齊全的儀表板。優(yōu)先考慮導(dǎo)航,滿足用戶期望,選擇合適的可視化效果,并專注于基于角色的動(dòng)態(tài)內(nèi)容,以確保無縫的體驗(yàn)。

桌面端界面設(shè)計(jì) |審美積累|AI 電商 SaaS 后臺界面

杰睿

 

推薦人群:
正在做電商后臺/智能推薦界面設(shè)計(jì)的交互設(shè)計(jì)師
研究 AI 場景下 UI 信息組織邏輯的產(chǎn)品設(shè)計(jì)師
想提升 B 端項(xiàng)目視覺控制力的視覺設(shè)計(jì)師
 
在信息密集的 B 端 SaaS 產(chǎn)品中,如何用清晰、節(jié)制而具有未來感的設(shè)計(jì),提升用戶的效率和信任感?Stockify 的界面是一個(gè)值得研究的參考。一款聚焦 AI 推薦和智能庫存管理的電商 SaaS 工具。這類產(chǎn)品的設(shè)計(jì)挑戰(zhàn)在于 —— 如何讓用戶信任 AI 決策,并在復(fù)雜的信息中快速做出行動(dòng)。它不是做“好看”的界面,而是通過界面?zhèn)鬟_(dá)控制感與專業(yè)感

imgi_262_f71c09228398707.685257a603072.jpg

imgi_790_d6c39d228398707.685257a603800.jpg

imgi_792_a468d2228398707.685257a5f3341.jpg

imgi_809_2bc8c1228398707.685257a606132.jpg

imgi_812_19cbcf228398707.685257a604ce5.jpg

 

imgi_824_f953b1228398707.685257a60171f.jpg


UI 風(fēng)格關(guān)鍵詞

冷靜克制的配色:以白+淺灰為底,輔以低飽和綠色作高亮,既保留科技感,也不過度強(qiáng)調(diào)“智能”噱頭。
數(shù)據(jù)可視化有“敘事性”:不是堆圖表,而是用卡片、圖表、按鈕組合講一個(gè)“運(yùn)營邏輯”的故事。
干凈的留白與柵格:高度模塊化布局,讓信息有序展開,適合處理高頻交互與海量數(shù)據(jù)。
可解釋的 AI 推薦:每個(gè) AI 操作都有 hover 提示或“查看依據(jù)”,提升透明度與用戶信任。

值得借鑒的細(xì)節(jié)

儀表盤設(shè)計(jì) 首屏不是炫技的數(shù)據(jù),而是四個(gè)“關(guān)鍵運(yùn)營指標(biāo)卡片”,強(qiáng)調(diào)日??刹僮餍浴n伾珒H用于警示和趨勢,不做裝飾。
卡片式推薦模塊 推薦商品按“推薦邏輯”分組,卡片下方標(biāo)注 AI 原因(如:熱銷趨勢、庫存過剩),兼顧用戶理解和操作動(dòng)機(jī)。
側(cè)邊欄導(dǎo)航 折疊/展開狀態(tài)下都能維持清晰的視覺錨點(diǎn),圖標(biāo)+文字結(jié)構(gòu)統(tǒng)一,適合中長時(shí)間使用場景。
動(dòng)效克制合理 hover、切換、加載等動(dòng)畫幾乎不搶戲,節(jié)奏穩(wěn)定、響應(yīng)明確,能很好融入專業(yè)環(huán)境中。

設(shè)計(jì)思路總結(jié)

Stockify 的這套 UI 并不追求酷炫視覺,它更強(qiáng)調(diào)的是:如何通過克制美學(xué)+可解釋系統(tǒng),把復(fù)雜的電商決策過程變得“有章可循”。這對 AI 相關(guān)后臺設(shè)計(jì)是個(gè)非常關(guān)鍵的提示。
蘭亭妙微(m.chenguixiang.net )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請加入一起學(xué)習(xí)成長,咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan

我如何評審設(shè)計(jì)工作

杰睿

好的設(shè)計(jì)可能并非易事。對一個(gè)人來說顯而易見的東西,對另一個(gè)人來說可能毫無意義。設(shè)計(jì)可能感覺很主觀,但我(以及其他設(shè)計(jì)領(lǐng)導(dǎo))在評審設(shè)計(jì)時(shí),總會(huì)關(guān)注一些因素。

好的設(shè)計(jì)是早期良好協(xié)作的成果。早期設(shè)計(jì)通常不會(huì)面面俱到,但我們可以預(yù)見一些細(xì)節(jié),避免在不盡如人意的設(shè)計(jì)上花費(fèi)太多時(shí)間。

本文檔試圖定義 Dialpad 的設(shè)計(jì)中“好”的真正含義。它為我們提供了一個(gè)共同的目標(biāo),以便領(lǐng)導(dǎo)層在評審時(shí)能夠充分預(yù)期他們的大部分反饋,并讓他們相信設(shè)計(jì)方向是正確的。

有敘述

首先,我們必須弄清楚我們?yōu)槭裁匆鲆粋€(gè)項(xiàng)目。是我們要改進(jìn)的指標(biāo)嗎?是我們要解決的未滿足的用戶需求嗎?還是我們要達(dá)成的銷售?在查看任何屏幕之前,我首先需要了解我們?yōu)槭裁匆鲞@件事。這有助于我們在審查設(shè)計(jì)時(shí)堅(jiān)持第一原則。

你知道我們怎么說講故事很重要嗎?這就是我們的意思。

只有了解了這些背景之后,我才能給你真正有用的反饋,而不僅僅是膚淺的“在這里增加間距”類型的反饋。

你并不總是需要幻燈片,1-2 段文字或 30 秒的演講通常就足夠了。我不喜歡被拖進(jìn)一個(gè)沒有任何注釋的 Figma 文件里,也不喜歡僅僅為了了解項(xiàng)目是什么就被鏈接到一個(gè)冗長的 Jira Epic 文件或 15 頁的 PRD 文件。

設(shè)計(jì)領(lǐng)導(dǎo)力涵蓋了很多方面,我依靠來告訴我什么是項(xiàng)目以及它為什么重要。

對你分享的內(nèi)容和你想要的反饋要有策略性。你不應(yīng)該在設(shè)計(jì)文件中展示和解釋所有內(nèi)容。為此,提前整理好你的想法和 Figma 文件會(huì)很有幫助。通過屏幕共享來跟上一個(gè)在 Figma 畫板上快速切換的人的喋喋不休是非常困難的。你很可能無法通過這種方式獲得你想要的反饋。

你自己的想法

PM 或工程師通常會(huì)在介紹項(xiàng)目時(shí)就已經(jīng)想好了解決方案。它會(huì)被包含在 Jira 工單中,在 PRD 中描述,或在會(huì)議上提及。這很棒。我們當(dāng)然應(yīng)該探索并汲取其他人的想法。但我也希望看到你們思考自己的點(diǎn)子。

弄清楚自己要做什么是高級設(shè)計(jì)角色的一個(gè)重要部分。

我希望看到你不僅僅是在執(zhí)行別人的想法。我希望看到你至少從兩三個(gè)不同的角度探索過一個(gè)想法(也就是說,不是同一個(gè)想法,只有兩三個(gè)細(xì)微的變化)。

想出不同的解決問題的方法,表明你不僅僅是照做別人說的,而是真正運(yùn)用自己的判斷。這正是一個(gè)人在高級職位上表現(xiàn)出色的原因。不要害怕提問,不要害怕提出大膽的想法。你提出和改進(jìn)想法的方式與實(shí)現(xiàn)想法的方式同樣重要。

一致性與創(chuàng)新

Dialpad 已經(jīng)推出一段時(shí)間了,這意味著我們已經(jīng)構(gòu)建了許多快速易用的設(shè)計(jì)模式。但是,如果還有改進(jìn)空間,就不要僅僅滿足于“快速易用”。有時(shí),新的方法可以讓事情變得更好。

在審查設(shè)計(jì)時(shí),我會(huì)問自己以下有關(guān)一致性和創(chuàng)新性的問題:

  • 我們是在為一個(gè)老問題提出新的解決方案嗎?有什么好的理由嗎?
  • 我們是否有針對整個(gè)產(chǎn)品做類似事情的例子,同時(shí)注意到其優(yōu)點(diǎn)和缺點(diǎn)?
  • 該設(shè)計(jì)是否使用了客戶習(xí)慣的模式,或者是否是他們必須學(xué)習(xí)的新內(nèi)容?

如果存在一個(gè)可以完成某項(xiàng)任務(wù)的現(xiàn)有模式,我希望看到它。同時(shí),如果您認(rèn)為有必要引入一個(gè)新的模式,我也希望看到它。如果您對其中一個(gè)模式有合理的偏好,我會(huì)加分。

雖然修復(fù)不一致問題很重要,但我們也應(yīng)該考慮用戶的使用場景。有時(shí),即使需要付出更多努力,追求更好的體驗(yàn)也同樣重要。有時(shí),為了保持一致性和速度,最好還是堅(jiān)持現(xiàn)有方案。繪制多個(gè)設(shè)計(jì)方案有助于促進(jìn)這方面的討論。

掩蓋復(fù)雜性

Dialpad 是一款極其復(fù)雜的產(chǎn)品,包含大量技術(shù)工作流程并生成大量數(shù)據(jù)。

我們的客戶不應(yīng)該知道這一點(diǎn)。

我們的目標(biāo)應(yīng)該是使交流變得即時(shí)且易于理解,就像網(wǎng)絡(luò)瀏覽器連接和顯示網(wǎng)站一樣。

在審查設(shè)計(jì)時(shí),我會(huì)問自己以下有關(guān)擴(kuò)展功能的問題:

  • 屏幕上呈現(xiàn)的信息是否一目了然?用戶是否可以根據(jù)需要深入了解?
  • 是不是需要太多點(diǎn)擊?我們是不是在要求用戶做一些可以自動(dòng)化的事情?
  • 新用戶會(huì)如何看待這個(gè)功能?高級用戶又會(huì)如何看待呢?
  • 我們需要構(gòu)建一些新的東西嗎?或者我們可以改變一些現(xiàn)有的東西嗎?

設(shè)計(jì)應(yīng)該易于理解,但又足夠強(qiáng)大以處理復(fù)雜性和規(guī)模。

用戶體驗(yàn)復(fù)制

記住,設(shè)計(jì)主要就是文字。我希望看到你的用戶體驗(yàn)文案與用戶流程、矩形和顏色保持相同的標(biāo)準(zhǔn)。

在審查設(shè)計(jì)時(shí),我會(huì)問自己以下有關(guān) UX 副本的問題:

  • 能少點(diǎn)文字嗎?無論是博客文章還是單個(gè)表單字段,我寫任何東西時(shí)的第一反應(yīng)都是刪掉文字。
  • 語言是否清晰?我們能否簡化或刪除技術(shù)術(shù)語、縮寫和內(nèi)部用語?
  • 語言是否一致?基于我已知的 Dialpad 知識,我能理解嗎?我們使用動(dòng)詞的方式是否一致?日期和時(shí)間格式如何?甚至像大小寫這樣的問題也很重要。

我們有復(fù)制指南,還有一個(gè)經(jīng)過 Dialpad 語音和語調(diào)訓(xùn)練的ChatGPT 機(jī)器人??靵硎褂冒?!

在撰寫文案時(shí),我通常會(huì)將類似這樣的內(nèi)容放入 ChatGPT 中:

通常,最好的文案是這些示例的組合。我在撰寫本文時(shí)就使用了這種技巧。

感覺如何?

在審查工作流程時(shí),一個(gè)原型勝過一千個(gè)靜態(tài)屏幕。我喜歡盡早看到原型,即使是在線框階段。它能幫助我預(yù)覽實(shí)際使用設(shè)計(jì)的感覺。

在審查原型時(shí),我會(huì)問自己以下問題:

  • 一個(gè)功能有多容易被發(fā)現(xiàn)?如果我是第一次接觸這個(gè)產(chǎn)品,我能理解它在哪里以及該做什么嗎?
  • 感覺怎么樣?點(diǎn)擊次數(shù)多嗎?步驟之間的過渡怎么樣?
  • 與我使用的其他應(yīng)用程序相比,它給我的感覺如何?如果我每天都要用這個(gè)設(shè)計(jì),我會(huì)有什么感受?每周都用?

用代碼制作原型并不總是可行的,所以像 Figma 這樣的原型工具能提供僅次于實(shí)際產(chǎn)品體驗(yàn)的最佳設(shè)計(jì)。從新用戶引導(dǎo)到任務(wù)完成,交互式原型能讓我清晰地了解用戶從始至終的旅程。

這怎么會(huì)失敗呢?

大多數(shù)設(shè)計(jì)評審都側(cè)重于推銷一個(gè)想法,讓觀眾信服這個(gè)設(shè)計(jì)為什么好。但這只是設(shè)計(jì)評審的一部分。我也想知道它的缺點(diǎn)。我們應(yīng)該成為自己最嚴(yán)厲的批評者。

每個(gè)設(shè)計(jì)方向的優(yōu)缺點(diǎn)是什么?一個(gè)設(shè)計(jì)怎么會(huì)失???在審查一個(gè)設(shè)計(jì)時(shí),我會(huì)尋找它為什么行不通,或者它可能被濫用或利用的原因,所以如果你也考慮過這些,會(huì)很有幫助。提前思考這些問題有助于促進(jìn)團(tuán)隊(duì)之間的討論。

雖然沒有一份詳盡的清單列出使設(shè)計(jì)“好”的因素,但提前考慮這些因素有助于將與領(lǐng)導(dǎo)層的討論集中在深刻、實(shí)質(zhì)性的話題上。

當(dāng)我們接受“好”的不同定義,依靠清晰的框架,并創(chuàng)造一個(gè)支持批評的空間時(shí),我們就可以提供既能滿足創(chuàng)意目標(biāo)又能滿足商業(yè)目標(biāo)的設(shè)計(jì)工作。

 

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

未來的設(shè)計(jì)形態(tài)

杰睿

有些想法已經(jīng)醞釀了好幾周。其他想法則是在談話中,或者在觀看某人發(fā)起一個(gè)零散的無代碼實(shí)驗(yàn)時(shí)浮現(xiàn)出來的(我們最近經(jīng)常這樣做)。

他們或許會(huì)老得漂亮,也或許不會(huì)。這不是重點(diǎn)。

重點(diǎn)在于:變化正在發(fā)生。我們越了解它,就越能更好地塑造未來。

1. 團(tuán)隊(duì)規(guī)模更小,重點(diǎn)更明確

我們正在進(jìn)入一個(gè)團(tuán)隊(duì)規(guī)模更小、更專注的時(shí)代——這適用于所有學(xué)科,而不僅僅是設(shè)計(jì)。

正如 Marty Cagan 在最近為硅谷產(chǎn)品集團(tuán)撰寫的文章中指出的那樣,產(chǎn)品團(tuán)隊(duì)正在變得更加精簡,但效率也更高。這并不是說要用更少的資源做更多的事情,而是要消除噪音、開銷和不必要的交接。

工具化正在飛速發(fā)展。十年前,一天內(nèi)構(gòu)建一個(gè)原型可能需要跳過關(guān)鍵步驟或加班加點(diǎn)。但現(xiàn)在,有了 Figma、一些無代碼工具(下文將詳細(xì)介紹 )以及 ChatGPT/Claude,一位設(shè)計(jì)師可以在早上探索五個(gè)方向,并在午餐前測試其中三個(gè)。

人工智能并非取代我們,而是讓我們有機(jī)會(huì)進(jìn)行更周全的設(shè)計(jì)。裝備精良的產(chǎn)品設(shè)計(jì)師——或者產(chǎn)品經(jīng)理——現(xiàn)在可以更快地從問題到原型,再到經(jīng)過驗(yàn)證的解決方案,這并不是因?yàn)樗麄兏优?,而是因?yàn)榄h(huán)境最終讓他們能夠更智能地工作。裝備精良的產(chǎn)品設(shè)計(jì)師(或產(chǎn)品經(jīng)理)現(xiàn)在可以更快地從問題轉(zhuǎn)向原型,再轉(zhuǎn)向經(jīng)過驗(yàn)證的解決方案,這并不是因?yàn)樗麄兏优Φ毓ぷ?,而是因?yàn)榄h(huán)境最終允許他們更聰明地工作。

在設(shè)計(jì)領(lǐng)域(以及其他領(lǐng)域),這意味著更少的人員,但更明確的職責(zé)。更少的專業(yè)化,更多的責(zé)任。

說實(shí)話,我迫不及待地想看到這個(gè)。我一直都很喜歡小團(tuán)隊(duì)、快團(tuán)隊(duì)。他們行動(dòng)清晰,能快速建立信任,而且在協(xié)調(diào)上也更省力。

說實(shí)話,如果你是一位領(lǐng)導(dǎo)者,認(rèn)為員工人數(shù)翻番就能自動(dòng)改善現(xiàn)狀,那么當(dāng)經(jīng)濟(jì)形勢發(fā)生變化或公司未能實(shí)現(xiàn)目標(biāo)時(shí),你可能會(huì)陷入困境。我們都見過這樣的情況:快速招聘,然后是恐慌性裁員,之后又是同樣的關(guān)于專注和問責(zé)的討論。

單人團(tuán)隊(duì)不再只是初創(chuàng)企業(yè)的神話。它正在成為一種可行的結(jié)構(gòu)——尤其是在小型公司和早期團(tuán)隊(duì)中。隨著人工智能和無代碼工具的不斷發(fā)展,甚至可能在大型公司中也是如此。

是的——這意味著“設(shè)計(jì)師”的定義也在發(fā)生變化。

2. 全棧設(shè)計(jì)師的再次崛起全棧設(shè)計(jì)師的再次崛起

高度專業(yè)化的時(shí)代正在消逝。這并不意味著專家已經(jīng)過時(shí)——遠(yuǎn)非如此。只是現(xiàn)代產(chǎn)品設(shè)計(jì)師的工具包正在不斷擴(kuò)展,人們期望他們能夠更好地利用這些工具包。

研究、文案寫作、視覺設(shè)計(jì)、系統(tǒng)思維,甚至組件庫的實(shí)際工作——一切都融合在一起。人們越來越期望設(shè)計(jì)師能夠獨(dú)立掌控更多產(chǎn)品周期。這并不是為了取代其他角色,而是為了減少摩擦并保持發(fā)展勢頭。

這種轉(zhuǎn)變反映在職位描述中。產(chǎn)品設(shè)計(jì)師(UX/UI 設(shè)計(jì)師等)現(xiàn)在需要定期撰寫微文案、進(jìn)行可用性測試、參與設(shè)計(jì)系統(tǒng)、構(gòu)建原型、分析數(shù)據(jù)、招募用戶并與客戶溝通。預(yù)計(jì)撰寫微文案、運(yùn)行可用性測試、參與設(shè)計(jì)系統(tǒng)、構(gòu)建原型、處理數(shù)據(jù)、招募用戶以及與客戶交流— 定期。

說實(shí)話,為什么不呢?有了合適的工具,很多任務(wù)都會(huì)變得比以往更容易,而且可以做出更好、更快的決策。

從許多方面來看,我們都回到了數(shù)字設(shè)計(jì)的早期階段,當(dāng)時(shí)同一個(gè)人會(huì)進(jìn)行構(gòu)思、設(shè)計(jì)和構(gòu)建。

但這一次,我們采用了更好的工具、更智能的系統(tǒng)以及(希望)更強(qiáng)的判斷力。

3. 設(shè)計(jì)系統(tǒng)民主化

隨著設(shè)計(jì)工具的發(fā)展和無代碼采用的增加,設(shè)計(jì)系統(tǒng)變得更加開放、可用和重要。

我們正在看到從嚴(yán)格控制的庫向模塊化、即插即用的生態(tài)系統(tǒng)的轉(zhuǎn)變,這種轉(zhuǎn)變不僅使設(shè)計(jì)師能夠,而且使產(chǎn)品經(jīng)理、營銷人員甚至客戶成功角色能夠構(gòu)建實(shí)驗(yàn),而無需等待開發(fā)資源。

我希望我們的產(chǎn)品經(jīng)理能夠使用我們的設(shè)計(jì)系統(tǒng)快速構(gòu)建原型——只需幾分鐘,而不是幾天——這樣他們就能快速測試各種想法。正因如此,我才致力于幾乎完全開放我們的靈魂設(shè)計(jì)系統(tǒng)。

這令人興奮,但也提高了標(biāo)準(zhǔn)。開放式設(shè)計(jì)系統(tǒng)需要清晰的文檔、強(qiáng)大的組件和智能的治理。它們迫使我們像產(chǎn)品構(gòu)建者一樣思考,而不僅僅是設(shè)計(jì)師。

與此同時(shí),我們的系統(tǒng)越容易上手,我們就越有可能出現(xiàn)千篇一律的結(jié)果。當(dāng)每個(gè)人都使用相同的組件和模式時(shí),千篇一律就會(huì)迅速蔓延。這并不是什么新鮮事,它一直存在。想想有多少網(wǎng)站與 Linear 的設(shè)計(jì)相似,又有多少新應(yīng)用模仿 Notion 的導(dǎo)航。正因如此,創(chuàng)造力、視覺識別和精湛工藝將變得更加重要,而不是更不重要。需要 (或想要)脫穎而出的公司需要投資于獨(dú)特的視覺/UI 設(shè)計(jì)、引人入勝的故事敘述,以及人工智能或模板無法復(fù)制的精妙之處。

4. 工具正在改變一切(如果你允許的話)

設(shè)計(jì)師從未擁有過如此強(qiáng)大的力量。我們能夠以一年前難以想象的速度進(jìn)行測試、構(gòu)建和學(xué)習(xí)。

在我的團(tuán)隊(duì)中,我們正在探索一波全新的工具:可愛,V0 復(fù)制, 和Bolt.new。

我們?nèi)栽跊Q定將哪一個(gè)(安全性、法律等)完全集成到我們的設(shè)計(jì)堆棧中,其中 Loveable 和 V0 目前處于領(lǐng)先地位。

我們中的一些人也一直在研究Cursor。毫無疑問,它功能強(qiáng)大,但對于日常設(shè)計(jì)工作流程來說,它仍然感覺有點(diǎn)“更高層次” (2025 年春季——你可以打賭,幾個(gè)月后,這種情況將不再存在)。

附注:隨著工具越來越開放,團(tuán)隊(duì)界限越來越模糊,安全問題也變得越來越重要——即使對設(shè)計(jì)師而言也是如此。在討論過風(fēng)險(xiǎn)之后,我請求我們的AI/創(chuàng)新團(tuán)隊(duì)幫助我們搭建自己的MCP服務(wù)器。他們現(xiàn)在正在著手開發(fā)——即使在早期階段,我們也非常謹(jǐn)慎。

Vibe 編碼很有趣……直到它會(huì)讓你的系統(tǒng)暴露一些不該暴露的東西。

這些工具不僅能節(jié)省時(shí)間,還能改變文化和思維方式。

他們正瘋狂地奔跑。我完全相信,如果一年后我再回顧這件事,一定會(huì)發(fā)現(xiàn)三個(gè)功能強(qiáng)大的新工具??纯瓷蓤D像模型的飛躍——不到12個(gè)月,它就從八指的噩夢變成了擁有清晰副本的視覺效果。

為了跟上步伐,我們開始舉辦內(nèi)部培訓(xùn),讓工程師指導(dǎo)設(shè)計(jì)師如何在本地環(huán)境中運(yùn)行項(xiàng)目、如何運(yùn)用變體進(jìn)行思考以及理解系統(tǒng)邏輯。這并不是要把設(shè)計(jì)師變成開發(fā)者(好吧……也許有一點(diǎn))。而是要減少恐懼,增加背景知識,并在流程早期做出更好的決策。

要點(diǎn)是什么?最好的工具不僅能幫助你更快地行動(dòng),還能幫助你的整個(gè)團(tuán)隊(duì)使用同一種語言,共同創(chuàng)造更好的產(chǎn)品。

提示我一直建議設(shè)計(jì)師嘗試構(gòu)建 Figma 插件(你可以使用 ChatGPT 指導(dǎo))、個(gè)人網(wǎng)站,或者——更好的是——一個(gè)可以解決你實(shí)際問題的小工具。我們的一位設(shè)計(jì)師構(gòu)建了一個(gè)徒步旅行計(jì)劃器。另一位設(shè)計(jì)師為他的業(yè)余項(xiàng)目創(chuàng)建了一個(gè)烹飪伴侶。還有一位設(shè)計(jì)師創(chuàng)建了一個(gè)在線圖像壓縮網(wǎng)站。你將學(xué)到比預(yù)期更多的東西。

5. 設(shè)計(jì)工程師的回歸

隨著工具的發(fā)展和界限的模糊,一個(gè)新舊角色正在悄然回歸:設(shè)計(jì)工程師。

這并不是什么新鮮事——用戶體驗(yàn)工程師在谷歌和其他科技巨頭中已經(jīng)存在了十多年。但得益于人工智能、無代碼開發(fā)和更強(qiáng)大的工具,這個(gè)曾經(jīng)只存在于科技巨頭獨(dú)角獸中的職位,如今正出現(xiàn)在 SaaS 團(tuán)隊(duì)、初創(chuàng)公司和設(shè)計(jì)系統(tǒng)團(tuán)隊(duì)中。

我們團(tuán)隊(duì)一直在探索這條道路。我設(shè)定了一個(gè)個(gè)人目標(biāo):到今年年底,我們產(chǎn)品設(shè)計(jì)團(tuán)隊(duì)的某個(gè)人將為產(chǎn)品發(fā)布一個(gè)小更新——無需開發(fā)人員參與。即使是像更新工具提示中的文本這樣簡單的事情。在我們的 UI 團(tuán)隊(duì)中,挑戰(zhàn)甚至更大:在沒有開發(fā)人員參與的情況下更新組件。

為什么?因?yàn)榍岸爽F(xiàn)在應(yīng)該更快了。可以更快。在一個(gè)設(shè)計(jì)師可以與代碼對話(或者至少可以溫柔地引導(dǎo)代碼)的世界里,等待兩周的文本修改感覺很不對勁。

這并不意味著團(tuán)隊(duì)中的每個(gè)人都需要成為一名程序員。但這確實(shí)意味著我們需要更加適應(yīng)我們參與塑造的系統(tǒng)——并且不要再把 Figma 和生產(chǎn)環(huán)境之間的空間視為黑匣子。

設(shè)計(jì)工程師(或任何行業(yè)賦予的頭銜)可能并不適合所有團(tuán)隊(duì)。但我相信,他們會(huì)自然而然地成為更多團(tuán)隊(duì)的一員。

它會(huì)順利嗎?一點(diǎn)也不。開發(fā)人員會(huì)注意到那些混亂的部分——語法、結(jié)構(gòu)、風(fēng)險(xiǎn)。這很正常。原型開發(fā)也是如此,任何初次踏入陌生領(lǐng)域的人都會(huì)遇到同樣的情況。

但如果這種方法建立在好奇心和合作之上——而不是控制——它就會(huì)開始奏效。早期的摩擦是值得的。

接下來是更快的迭代、更好的協(xié)調(diào)和共同的尊重。

6.專家將比以往任何時(shí)候都更重要

這里有一個(gè)悖論:隨著角色的融合和工具變得越來越容易使用,對真正的專業(yè)知識的需求實(shí)際上正在增長。

人工智能是一個(gè)強(qiáng)大的放大器,但它也可能掩蓋經(jīng)驗(yàn)的不足。我見過一些初級設(shè)計(jì)師嚴(yán)重依賴人工智能生成的結(jié)果,結(jié)果卻創(chuàng)作出缺乏深度、連貫性或意圖的作品。工程領(lǐng)域也存在同樣的問題:人工智能可以自動(dòng)完成代碼,但卻無法調(diào)試業(yè)務(wù)邏輯。至少目前還不行。

在這種新環(huán)境下,普通人和杰出人才之間的差距將會(huì)擴(kuò)大。這令人不安,尤其是對于那些職業(yè)生涯早期的人來說。

但它也是一個(gè)行動(dòng)號召——呼吁前輩們進(jìn)行指導(dǎo),呼吁團(tuán)隊(duì)投資軟技能和系統(tǒng)思維,呼吁每個(gè)人超越僅僅推動(dòng)像素或生成提示。

成為專家。如果你還不是專家,沒關(guān)系——但不要停滯不前。不斷拓展,不斷磨練。這就是與眾不同之處。

7. 品味、創(chuàng)造力和商業(yè)思維是差異化因素

那么,在這個(gè)人工智能增強(qiáng)工作流程和像素級完美模板的時(shí)代,什么才能真正讓設(shè)計(jì)師脫穎而出呢?嗯,那些成就偉大設(shè)計(jì)的要素始終如一:品味。創(chuàng)造力。商業(yè)頭腦。溝通能力。

隨著工具的改進(jìn),我們已經(jīng)看到了千篇一律的風(fēng)險(xiǎn)。環(huán)顧四周:幾乎每個(gè)新應(yīng)用都像 Notion,每個(gè)新網(wǎng)站都沿用 Linear 的簡潔極簡主義。這些模式并非糟糕——而是非常棒。但當(dāng)所有人都遵循相同的公式時(shí),產(chǎn)品之間的界限就會(huì)變得模糊。體驗(yàn)開始變得千篇一律。

這時(shí),視覺品味和創(chuàng)造力就比以往任何時(shí)候都更加重要。

隨著人工智能和無代碼工具的不斷發(fā)展,執(zhí)行力不再是瓶頸——決策才是。我們的責(zé)任是像戰(zhàn)略家一樣思考,并運(yùn)用具有影響力的語言。

最終,只有那些能夠清晰表達(dá)意圖、發(fā)揮創(chuàng)造力并具備戰(zhàn)略思維的設(shè)計(jì)師才能脫穎而出。他們不僅能夠解答如何構(gòu)建并使其外觀精美,還能解釋其背后的原因以及為誰而 做。在我上一篇為本博客撰寫的文章中,我談到了設(shè)計(jì)師領(lǐng)導(dǎo)者需要身兼數(shù)職才能產(chǎn)生影響力。在生成式人工智能時(shí)代,這一點(diǎn)比以往任何時(shí)候都更加重要,只有能夠?qū)⒂脩粜枨笈c業(yè)務(wù)目標(biāo)相結(jié)合、清晰地提出創(chuàng)意并引導(dǎo)團(tuán)隊(duì)取得有意義成果的設(shè)計(jì)師才能獲得發(fā)展空間。

其他人都將被困在追求快速工程技巧的道路上。

8. 你現(xiàn)在可以做什么

那么,我們該如何應(yīng)對這一切?該如何為這個(gè)快速逼近的未來做好準(zhǔn)備?

我們在團(tuán)隊(duì)中親眼目睹了這一點(diǎn)。

幾個(gè)月前,我們的一位內(nèi)容設(shè)計(jì)師聯(lián)系了UI團(tuán)隊(duì),尋求指導(dǎo)。她主動(dòng)開始提升自己的技術(shù)技能,這并非她正式的成長計(jì)劃——這對她來說很有意義。之后,她創(chuàng)建了她的第一個(gè)組件——一個(gè)顏色選擇器——現(xiàn)在,我們真心相信她可以成為一名優(yōu)秀的產(chǎn)品設(shè)計(jì)師。

我們在用戶體驗(yàn)研究領(lǐng)域也看到了類似的轉(zhuǎn)變。如今,我們有三位高技能的研究員——說實(shí)話,我認(rèn)為未來我們不需要六位或十二位研究員。這并不是因?yàn)檠芯坎荒敲粗匾?,而是因?yàn)楫a(chǎn)品設(shè)計(jì)師越來越擅長掌控產(chǎn)品發(fā)現(xiàn)的各個(gè)環(huán)節(jié)——驗(yàn)證想法、進(jìn)行訪談,并更早地做出更明智的決策。

這為我們經(jīng)驗(yàn)豐富的研究人員提供了發(fā)展空間,使他們能夠成為戰(zhàn)略合作伙伴,而不僅僅是可用性測試人員。他們作為深思熟慮、高杠桿的合作伙伴,為我們的產(chǎn)品設(shè)計(jì)師提供支持,我們的一位研究人員也已經(jīng)開始探索UI設(shè)計(jì)。

就像內(nèi)容設(shè)計(jì)一樣,研究仍然是一門至關(guān)重要的技藝,而且通常情況下,它仍將是一個(gè)專業(yè)化的角色。但這樣的時(shí)刻提醒我,保持領(lǐng)先地位不僅僅是學(xué)習(xí)新工具或追逐潮流,更在于拓展視野。那些蓬勃發(fā)展的人,將是那些充滿好奇心、積極進(jìn)取、無所畏懼超越工作職責(zé)的人——不是因?yàn)樗麄儽灰筮@樣做,而是因?yàn)樗麄兿胍凑兆约旱姆绞接游磥怼?/span>

那么,為了應(yīng)對這一新現(xiàn)實(shí),你能做些什么呢?以下是我給設(shè)計(jì)師(不僅僅是設(shè)計(jì)師)的建議:

  • 投資軟技能。同理心、講故事的能力、引導(dǎo)能力、領(lǐng)導(dǎo)力——這些永遠(yuǎn)不會(huì)過時(shí)。事實(shí)上,它們比以往任何時(shí)候都更重要。
  • 親手實(shí)踐無代碼。構(gòu)建一些東西。打破它。了解它能做什么和不能做什么。
  • 對人工智能保持好奇心。把它當(dāng)作陪練伙伴,而不是拐杖。
  • 像產(chǎn)品人一樣思考。設(shè)計(jì)不再僅僅關(guān)乎形式,而更關(guān)乎結(jié)果——這本該一直如此。人工智能和無代碼工具正在加速這種轉(zhuǎn)變,讓設(shè)計(jì)師有更多空間專注于戰(zhàn)略和業(yè)務(wù)。
  • 分享你的知識。指導(dǎo)、寫作、教學(xué)——你將在這個(gè)過程中學(xué)到更多。
  • 鼓勵(lì)團(tuán)隊(duì)中的其他人進(jìn)行嘗試。這包括產(chǎn)品經(jīng)理、營銷人員,甚至客戶成功團(tuán)隊(duì)。使用你的設(shè)計(jì)系統(tǒng)和無代碼工具構(gòu)建的簡單原型,有時(shí)比冗長的 PRD 能帶來更好的反饋。

未來不在于做得更多,而在于做得更好——更清晰、更有目的、更快速。

給未來的我的一封信

如果您明年讀到這篇文章,我希望其中一些想法能夠得到認(rèn)可。

也許有些事情被證明是錯(cuò)誤的——也許更大的事情發(fā)生了,再次改變了一切。沒關(guān)系。

我希望不變的是:我們不斷適應(yīng)。我們不斷學(xué)習(xí)。我們以好奇心而非恐懼引領(lǐng)。

因?yàn)?/span>適應(yīng)力是我們的超能力。而設(shè)計(jì)——在最佳狀態(tài)下——始終在于對未來的暢想。

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

To B端 To C端在產(chǎn)品設(shè)計(jì)和規(guī)劃過程中有哪些區(qū)別?

杰睿

C端B端有點(diǎn)泛,具體問題還是在具體的地方分析。不過總得來說也能歸納出一些區(qū)別。

首先產(chǎn)品重要的定義:目標(biāo)用戶、結(jié)果預(yù)期以及所需功能。B端一般是專業(yè)人士,他們的預(yù)期通常是多樣性、精準(zhǔn)且要求高的,而且功能入口系數(shù)高;C端是普通用戶,期望往往非常單一,功能入口要求簡單。

其次通過這些定義,一般從表面上看是這樣的:

1、B端功能繁重,C端肌膚功能單一化

從用戶任務(wù)就可以看出任務(wù)不同。有一個(gè)圖形比喻,浮在水面的冰山上,其中是C端,水面下是B端,所以B端產(chǎn)品一般聽覺感受功能都異常多,而且流程繁瑣。

2、B端講求業(yè)務(wù)精準(zhǔn)性、邏輯性,C端講求波形可用結(jié)果

從第一點(diǎn)中就很容易知道在后臺設(shè)計(jì)中涉及到數(shù)據(jù)流通管理以及異常多的功能點(diǎn),尤其是有的B端純粹是生產(chǎn)過程的管理,所以講究非常強(qiáng)的精準(zhǔn)性、邏輯性,很多時(shí)候都是直接把邏輯進(jìn)行在交互層面,比如操作有明確說明,錯(cuò)誤有出處,而在C產(chǎn)品端的時(shí)候說多了是沒有用的,用戶不明白沒耐心,可能告訴用戶的就是一個(gè)最簡單的結(jié)果。

3、B端業(yè)務(wù)關(guān)聯(lián)度大,C端結(jié)構(gòu)比較稀疏

在B端中,業(yè)務(wù)牽扯到的地方異常,通常需要方方面面都要考慮,并且能夠從關(guān)聯(lián)的很多模塊中抽象解構(gòu)出數(shù)據(jù),實(shí)現(xiàn)出完整的一套流程;而在C端,很多功能看起來非常獨(dú)立,感覺甚至對其他地方影響也較小。

最后,“表面所得”就是告訴你,B端一看就是大坑,C端往往是陷入的坑。B端一定要求你一開始就要對業(yè)務(wù)整體流程熟悉,側(cè)重點(diǎn)對流程進(jìn)行管理;C端不一定要求你深入業(yè)務(wù)細(xì)節(jié),更多的是對用戶體驗(yàn)以及結(jié)果的響應(yīng)。

ps.如果說哪端比較難,B端在入門難,C端在入門后難。B端入門門檻高,一開始就要求有專業(yè)積累;C端可以混進(jìn)門,畢竟用戶體驗(yàn)這件事誰都可以談,經(jīng)濟(jì)學(xué)和心理學(xué)都可以談,但有幾個(gè)人學(xué)得不錯(cuò)。

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

人性化界面設(shè)計(jì):模式

杰睿

你會(huì)怎么評價(jià)下面兩款收音機(jī)收音機(jī)的設(shè)計(jì)?

索尼收音機(jī)

圖1是索尼的一款收音機(jī)。它的面板右下方4*8依次排布的黑色按鍵分別對應(yīng)了32個(gè)提前設(shè)置好的收音機(jī)。按任意一個(gè)按鍵,可以收到某一個(gè)收音機(jī)。

某貨車收音機(jī)面板

圖2是一個(gè)車載收音機(jī)。左邊首先把收音機(jī)劃分為三組。屏幕右下方的兩排圓形按鈕中,有一個(gè)是用來選擇三組收音機(jī)的其中之一。剩下的1*6個(gè)按鍵來選定該組中的某一個(gè)收音機(jī)(如果需要切換AM-FM,操作還比較復(fù)雜)

以前索尼的無線電設(shè)計(jì)看起來很復(fù)雜,但它實(shí)際上更好用。因?yàn)槊恳粋€(gè)按鍵對應(yīng)著同一個(gè)收音機(jī),當(dāng)用戶熟悉了健身并使用習(xí)慣后,他們甚至可以不用揉捏操作面板,而直接通過手指觸摸數(shù)字按下自己想要的按鍵。這樣的操作即使是在黑夜中也能進(jìn)行。前置遙控器的設(shè)計(jì)雖然減少了按鍵并節(jié)省了空間,卻犧牲了易用性。因?yàn)檫@是該設(shè)計(jì)中引入了模式(modes):當(dāng)用戶使用同一個(gè)操作時(shí),而系統(tǒng)由于不同的狀態(tài)給出了不同的回應(yīng)。

這里引入了《人性化界面》這本書推崇的一個(gè)主要原則:好的界面不應(yīng)該存在模式。

如果無論系統(tǒng)狀態(tài)如何,相同的用戶輸入總是會(huì)產(chǎn)生相同的結(jié)果,則系統(tǒng)是非模式的。

重要的概念

為了更好的理解模式和界面設(shè)計(jì)的關(guān)系,以下是一些需要了解的概念:

注意力點(diǎn)(locus of Attention):是指時(shí)刻我們意識的集中的地方。人類在任何時(shí)刻都有一個(gè)注意力點(diǎn)。你對這個(gè)點(diǎn)以外的區(qū)域是盲目的。比如當(dāng)你集中注意力在閱讀可能的文字時(shí),就注意不到你的曼谷脊柱屏幕的頂端時(shí)間指針發(fā)生了變化。

夜間操作(手勢):指用戶對界面的一個(gè)連續(xù)的操作,可能是一個(gè)鼠標(biāo)或雙擊。

模式(mode) : 針對一個(gè)操作,如果一個(gè)系統(tǒng)根據(jù)其當(dāng)前的狀態(tài)有不同的反應(yīng),就代表這個(gè)系統(tǒng)存在不同的模式,而每個(gè)一個(gè)模式下界面的反應(yīng)是一致的

——比如作者非常反對的大寫鎖定鍵(Caps Lock):當(dāng)這個(gè)按鍵被按下時(shí),電腦處于一個(gè)大寫輸出模式中;當(dāng)這個(gè)按鍵被再次按下時(shí),電腦回到另一個(gè)模式;

— — 再比如所有電腦的電源鍵就存在模式。根據(jù)電腦當(dāng)前的開關(guān)狀態(tài),同樣按下電源會(huì)導(dǎo)致電腦開機(jī)或關(guān)機(jī);

— — 還有 Photoshop 中的鼠標(biāo)操作,在不同的繪畫狀態(tài)中,點(diǎn)擊鼠標(biāo)的結(jié)果是完全不同的。

界面模式的嚴(yán)格定義

為了從用戶的角度討論模式的利弊,作者進(jìn)一步嚴(yán)格定義了界面模式:

針對用戶操作: 1. 根據(jù)當(dāng)前系統(tǒng)狀態(tài)的不同而給出不同的反應(yīng),2. 并且此時(shí)的系統(tǒng)狀態(tài)是在用戶的注意點(diǎn)之外(即用戶無法感知到的系統(tǒng)狀態(tài))此時(shí)就認(rèn)為界面存在模式。

  • 在這個(gè)定義下再看一個(gè)例子:鍵盤的刪除鍵(退格/刪除)。每當(dāng)你按下刪除鍵,被刪掉的內(nèi)容都是不一樣的。因?yàn)榈侨藗兺⒁饬性诩磳⒈粍h掉的文字上,因此不構(gòu)成模式。

模式是用戶誤操作和影響業(yè)余性的主要原因之一:因?yàn)橛脩魶]有意識當(dāng)前的系統(tǒng)狀態(tài),因此無法了解到哪一個(gè)模式下,也不會(huì)知道自己的操作會(huì)帶來什么樣的結(jié)果。很多時(shí)候他們只能不斷試錯(cuò)來完成任務(wù),這也阻礙了使用習(xí)慣的養(yǎng)成。

對設(shè)計(jì)的啟示

為了避免上述問題,界面設(shè)計(jì)應(yīng)該完全采用Quasimode。Quasimode的是用戶必須通過連續(xù)的物理操作讓系統(tǒng)維持在某種特定狀態(tài)下,并在此狀態(tài)下避免引入某種模式。典型的例子就是電腦的Shift鍵,按下Shift的同時(shí)敲擊鍵盤會(huì)進(jìn)入大寫字母輸入模式。這樣的優(yōu)勢在于連續(xù)的動(dòng)作動(dòng)作讓用戶時(shí)刻記住自己在某個(gè)模式中,從而不會(huì)誤操作。

值得強(qiáng)調(diào)的是,遵循模式設(shè)計(jì)原則的產(chǎn)品往往也會(huì)影響盲人所用(可訪問性設(shè)計(jì))。因?yàn)槟J降亩x就考慮了人們的注意力集中點(diǎn),而我們每個(gè)人對于我們注意力之外的事物,都是“看不見”的。

從非常真實(shí)的意義上來說,我們對于我們關(guān)注點(diǎn)之外的世界都是盲目的。

《人性化界面》的杰夫·拉斯金(Jef Raskin)是Mac的初代設(shè)計(jì)師和思考者。他相信機(jī)器的交互方式應(yīng)該是人性化的:即交互的過程能夠最大化作者的考慮并遏制我們?nèi)祟惖哪芰腿毕荨?/span>

本書的第二章為讀者鋪墊了很多重要的理論基礎(chǔ),而后面的章節(jié)會(huì)開始剖析和挑戰(zhàn)我們平時(shí)習(xí)習(xí)的UI模式,比如文件夾,桌面,導(dǎo)航。

因?yàn)楸緯x完相見恨晚深受啟發(fā),決定開坑一系列讀后感!

 

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

【蘭亭妙微】用戶體驗(yàn)設(shè)計(jì)優(yōu)化 | 什么是“嵌入式成長機(jī)制”?

杰睿

 

——從 Hook 模型到行為慣性設(shè)計(jì)的交互進(jìn)階路徑

一、起點(diǎn):為什么“用戶投入”才是粘性最高的設(shè)計(jì)?

在許多交互體驗(yàn)中,設(shè)計(jì)者常常追求“即時(shí)反饋”:點(diǎn)擊即響應(yīng)、瀏覽即推薦、登錄即得禮。但用戶一旦體驗(yàn)完畢,離開就再無回頭。
原因在于:用戶沒有留下任何可積累的“成長性投入”。
根據(jù)《Hooked》模型,產(chǎn)品形成用戶習(xí)慣的四個(gè)階段中,Investment(投入)是最被低估卻最決定復(fù)訪意愿的一環(huán)。
“當(dāng)用戶在產(chǎn)品中投入時(shí)間、精力、數(shù)據(jù)或情緒,便不再是旁觀者,而是利益相關(guān)方。”
但是,僅有“投入”還不夠,這些投入是否“嵌入”用戶未來體驗(yàn),是否帶來持續(xù)增長感,是設(shè)計(jì)的關(guān)鍵挑戰(zhàn)。
這就引出一個(gè)更高級的設(shè)計(jì)模型:嵌入式成長機(jī)制

二、定義:“嵌入式成長機(jī)制”到底是什么?

嵌入式成長機(jī)制(Embedded Growth Mechanism) 是指:
產(chǎn)品通過系統(tǒng)性結(jié)構(gòu),讓用戶的每一次投入行為產(chǎn)生未來可感知的回報(bào),并對下一次使用產(chǎn)生預(yù)期依賴,最終形成習(xí)慣與留存。
它具備四個(gè)核心特征:
特征 說明 常見誤解
行為路徑可復(fù)用 用戶走過的路徑會(huì)影響下一次決策 不是“歷史記錄”,而是路徑強(qiáng)化
成果可積累 用戶的操作結(jié)果以結(jié)構(gòu)化形式沉淀 不是“完成任務(wù)”,而是“建立資產(chǎn)”
成長性可感知 反饋不僅是即時(shí),而是具有階段性躍遷 不是“獲得獎(jiǎng)勵(lì)”,而是“具備成長感”
結(jié)構(gòu)性嵌入 用戶資產(chǎn)影響后續(xù)流程、推薦、權(quán)限 不是“數(shù)據(jù)留存”,而是“體驗(yàn)參與權(quán)”

三、原理:從 Hook 模型到“行為慣性引擎”

  1. Hook 模型復(fù)盤
在《Hooked》中,用戶習(xí)慣的形成來自于:
  1. Trigger(觸發(fā))
  2. Action(行動(dòng))
  3. Variable Reward(變動(dòng)獎(jiǎng)勵(lì))
  4. Investment(投入)
但模型本身不解釋 “投入之后發(fā)生了什么?” 投入成為“行為慣性”的方式是:嵌入式成長結(jié)構(gòu) + 可視化反饋機(jī)制 + 結(jié)構(gòu)性復(fù)利回路。
我們可以用如下公式理解這一點(diǎn):
markdown
復(fù)制編輯
Investment × Embedding × Future Payoff = Habitual Use
也就是說,僅僅讓用戶“寫了一篇筆記”沒意義,除非:
  • 這篇筆記成為未來推薦算法的一部分
  • 它帶來新用戶點(diǎn)贊、收藏、互動(dòng)(外部性收益)
  • 它在視覺層面沉淀為“知識資產(chǎn)”并被系統(tǒng)引用
  • 它解鎖了下一階段內(nèi)容 / 權(quán)限 / 工具
這就是“嵌入式成長機(jī)制”與一般投入反饋機(jī)制的根本區(qū)別:
用戶的行為介入并塑造了未來體驗(yàn)結(jié)構(gòu)

四、結(jié)構(gòu):嵌入式成長機(jī)制的 3 層設(shè)計(jì)框架

我們可以從交互設(shè)計(jì)的角度,將其拆解為三層結(jié)構(gòu):
第一層:結(jié)構(gòu)性投入點(diǎn)設(shè)計(jì)(Structure of Investment)
識別產(chǎn)品中的可“沉淀性操作”:
類型 示例 表現(xiàn)方式
內(nèi)容結(jié)構(gòu)投入 Notion 筆記、飛書文檔 用戶參與“搭建”產(chǎn)品結(jié)構(gòu)
關(guān)系結(jié)構(gòu)投入 社交圈建立、關(guān)注體系 用戶構(gòu)建“社會(huì)資產(chǎn)”
行為偏好結(jié)構(gòu) 推薦算法訓(xùn)練、偏好標(biāo)簽 用戶塑造算法“映射自己”
權(quán)限成長結(jié)構(gòu) 功能權(quán)限隨投入解鎖 用戶獲得“控制感”與進(jìn)階通道
設(shè)計(jì)建議
  • 所有可投入點(diǎn),應(yīng)具備:數(shù)據(jù)結(jié)構(gòu)、可查詢性、可回顯。
  • 不要把用戶操作設(shè)計(jì)成“消耗品”,而是“積累點(diǎn)”。

第二層:回報(bào)路徑嵌入(Embedded Feedback Loop)

關(guān)鍵在于:用戶操作后的結(jié)果能否影響未來體驗(yàn)。
投入行為 影響維度 回報(bào)機(jī)制
編輯頁面 頁面結(jié)構(gòu)保存 下次自動(dòng)載入、自定義默認(rèn)
點(diǎn)贊內(nèi)容 訓(xùn)練算法模型 推薦更符合偏好的內(nèi)容
填寫興趣 用戶畫像建模 頁面布局動(dòng)態(tài)調(diào)整
學(xué)習(xí)任務(wù)完成 解鎖新模塊 路徑“只屬于你”而不是大眾用戶
設(shè)計(jì)建議
  • 讓回報(bào)不止出現(xiàn)在當(dāng)前頁面,而是改變系統(tǒng)反應(yīng)方式;
  • 讓用戶感受到自己“塑造”了這個(gè)系統(tǒng)。

第三層:增長可視化機(jī)制(Growth Visualization)

即便系統(tǒng)有“嵌入性回報(bào)”,用戶如不能感知,就不會(huì)形成行為慣性
設(shè)計(jì)任務(wù)是將成長數(shù)據(jù)顯性化為“變化圖景”
可視形式 舉例 情緒作用
進(jìn)度軌跡圖 番茄時(shí)間記錄曲線 感知掌控感
資產(chǎn)地圖 筆記結(jié)構(gòu)腦圖、知識沉淀庫 感知自我能力增長
使用成長階梯 等級標(biāo)識、勛章系統(tǒng) 感知“在升級”
反饋路徑可追溯 用戶行為→系統(tǒng)推薦鏈路圖 感知“產(chǎn)品聽懂我了”
設(shè)計(jì)建議
  • 成長可視化 ≠ 簡單圖表,而是體現(xiàn)“行動(dòng)-結(jié)構(gòu)-反饋”的閉環(huán)感;
  • 成長展示要避免“游戲化套路感”,要強(qiáng)調(diào)功能性連接與用戶“建設(shè)感”。

五、誤區(qū)與反思:嵌入式成長 ≠ 成癮設(shè)計(jì)

不少人將“用戶投入”等同于“上癮機(jī)制”,這是理解上的誤區(qū)。
嵌入式成長機(jī)制不鼓勵(lì)用戶沉迷于操作本身,而鼓勵(lì)他們主動(dòng)塑造體驗(yàn)結(jié)構(gòu)。區(qū)別在于:
維度 成癮機(jī)制 嵌入式成長機(jī)制
反饋節(jié)奏 高頻、即時(shí) 階段性、結(jié)構(gòu)性
用戶參與感 被動(dòng)反饋接受 主動(dòng)結(jié)構(gòu)塑造
成果屬性 一次性、多巴胺驅(qū)動(dòng) 累計(jì)性、功能驅(qū)動(dòng)
設(shè)計(jì)倫理 容易引發(fā)依賴 傾向于能力增強(qiáng)
最理想的狀態(tài):
用戶使用產(chǎn)品越久,越能建立自己的體系,產(chǎn)生“離不開”而非“停不下”的依賴。

交互設(shè)計(jì)的進(jìn)階,不在于“好看”,而在于“結(jié)構(gòu)”

“嵌入式成長機(jī)制”作為一種設(shè)計(jì)方法,其終極目標(biāo)是:
把用戶的參與設(shè)計(jì)進(jìn)產(chǎn)品本身,讓體驗(yàn)隨行為進(jìn)化,讓系統(tǒng)隨著使用更懂用戶。
它連接了用戶行為 → 體驗(yàn)結(jié)構(gòu) → 長期留存之間的底層路徑,是行為慣性型產(chǎn)品的核心邏輯。
 
 
更多項(xiàng)目/合作請私信,支持定制設(shè)計(jì)服務(wù)
我們是蘭亭妙微
商務(wù)合作請聯(lián)系
郵箱:weihua@lanlanwork.com
電話:400-6086026 010-6333494
了解更多設(shè)計(jì)案例 → m.chenguixiang.net
蘭亭妙微( 藍(lán)藍(lán)設(shè)計(jì))是一家專注而深入的UI設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、網(wǎng)頁設(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ì)

桌面端界面設(shè)計(jì) | 如何設(shè)計(jì)淺色主題 UI

杰睿

如果您曾經(jīng)嘗試設(shè)計(jì)輕量級 UI,您就會(huì)理解這個(gè)悖論:它看起來很簡單,但卻很容易出錯(cuò)。

增加亮度可能會(huì)導(dǎo)致圖像變得平淡、褪色,甚至刺眼。

你以為白色=光。但這就像說糖等于甜點(diǎn)一樣。

憑借 6 年多為 SaaS、移動(dòng)和商業(yè)平臺進(jìn)行設(shè)計(jì)的經(jīng)驗(yàn),我了解到淺色主題需要與深色主題一樣多的改進(jìn)和意向性,甚至更多。

它們在所有環(huán)境中都體現(xiàn)了清晰度、對比度、結(jié)構(gòu)性和實(shí)用性。

讓我來分解一下。

 

淺色主題背后的心理學(xué)
將顯示縮放圖像

輕量級 UI 感覺:

  • 冷靜的
  • 熟悉的
  • 值得信賴

這就是為什么你會(huì)在以下地方找到它們:

  • 銀行應(yīng)用程序
  • 醫(yī)療保健儀表板
  • 政府網(wǎng)站
  • SaaS 產(chǎn)品

在生產(chǎn)力應(yīng)用中,81% 的用戶更喜歡將淺色主題作為默認(rèn)主題。

人們需要清晰的信息,尤其是在特定場景下。不要讓他們失望。

總是問自己:“這會(huì)用在哪里?” 室內(nèi)、室外還是移動(dòng)? 這會(huì)改變一切。

設(shè)計(jì) Light 主題的分步工作流程

1. 從柔軟的中性基底開始

將顯示縮放圖像

避免使用#FFFFFF。認(rèn)真的。

相反,我選擇中等中性色,如#F4F6F8 或#F9FAFB,它們可以提供微妙的深度并減輕眼睛的疲勞。

在模態(tài)框或照片上使用透明白色覆蓋層來創(chuàng)建深度而不反射光線。

2.建立模塊化色彩系統(tǒng)

將顯示縮放圖像

使用語義標(biāo)記bg-default,例如text-muted,,border-light。這使得主題保持一致且可擴(kuò)展。

3. 控制對比度(不僅僅是為了可訪問性)

不要止步于 WCAG 兼容性。真正的目標(biāo)是現(xiàn)實(shí)世界的可讀性。

  • 文本對比度至少為 4.5:1
  • 為灰色添加色調(diào)以增加溫暖感
  • 使用鮮艷的色彩突出顯示 CTA 和錯(cuò)誤。

我犯的錯(cuò)誤:我曾經(jīng)在儀表盤中使用了符合WCAG標(biāo)準(zhǔn)的灰色文本。雖然在我的屏幕上看起來很棒,但在戶外日光下用戶很難閱讀。

教訓(xùn):合規(guī)性≠可用性。

4. 限制使用陰影

陰影很棒,但要小心。

  • 使用 1-2 個(gè)深度級別
  • 更喜歡柔和的陰影或內(nèi)嵌陰影
  • 避免使用硬輪廓

5. 反射和陽光的設(shè)計(jì)

  • 在陽光直射下進(jìn)行測試(是的,在戶外走走)。
  • 避免使用淺色圖標(biāo),因?yàn)樗鼈儠?huì)消失。
  • 使用 400 多種字體粗細(xì)。

過亮的設(shè)置可能會(huì)使屏幕對比度降低多達(dá) 40%。請適當(dāng)調(diào)整。

6. 仔細(xì)突出交互狀態(tài)

在淺色主題中,懸停和焦點(diǎn)等狀態(tài)經(jīng)常被忽略。

  • 使用微妙的陰影、下劃線或發(fā)光效果
  • 定義每個(gè)狀態(tài):懸停、活動(dòng)、禁用

專業(yè)提示:我總是在灰度模式下測試我的元件庫。如果狀態(tài)保持清晰,就說明我做得對。

7.不要忘記品牌個(gè)性

一個(gè)常見的錯(cuò)誤:品牌在輕量級 UI 中消失。

反而:

  • 使用品牌顏色來調(diào)配背景
  • 使用品牌插圖或圖標(biāo)
  • 使用字符設(shè)置空狀態(tài)的樣式

即使在燈光模式下,Notion 的 UI 也保持著自己的個(gè)性。

將框架應(yīng)用于 Figma 社區(qū)項(xiàng)目

我通常會(huì)使用隨機(jī)的 Figma 模板來測試我的設(shè)計(jì)工作流程。它不僅提升了我的技能,還揭示了通用 UI 的弱點(diǎn)。

設(shè)計(jì)師常犯的淺色主題錯(cuò)誤

  • 過度使用空白(可讀性下降)
  • 低對比度+色彩過載=不可讀。
  • 沒有視覺層次。
  • 忽略組件狀態(tài)。
  • 在黑色畫布上設(shè)計(jì)一切會(huì)導(dǎo)致判斷偏差。

黃金法則:首先用灰度創(chuàng)建光圖案。添加顏色只是為了提高清晰度,而不是為了定義清晰度。

設(shè)計(jì)一個(gè)令人驚嘆的燈光主題是一門藝術(shù),也是一門科學(xué)。

  • 功能勝過花哨。
  • 對比意味著清晰度。
  • 深度應(yīng)該感覺自然。
  • 始終在現(xiàn)實(shí)世界中進(jìn)行測試!

設(shè)計(jì)從來都不是孤立完成的。你的燈光主題應(yīng)該存在于陽光明媚的環(huán)境、繁忙的工作站和疲憊的雙眼之中。

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

日歷

鏈接

個(gè)人資料

存檔