一、忽視注意力：糟糕設(shè)計引發(fā)的致命后果

1. 航空事故：1989 年波音 737 客機墜機，因界面未明確標識故障引擎，機組誤關(guān)正常引擎，導(dǎo)致 47 人遇難、74 人受傷。

   

2. 工業(yè)爆炸：2005 年 BP 煉油廠爆炸，控制室 HMI 界面違反可用性原則，操作人員誤讀反饋，造成 15 人死亡、180 人受傷，經(jīng)濟損失慘重。
3. 公共預(yù)警失誤：2018 年夏威夷誤發(fā)導(dǎo)彈緊急警報，源于操作界面模板設(shè)計模糊，官員一鍵選錯，引發(fā)全民恐慌。

二、濫用注意力：數(shù)字時代的 “分心陷阱”

• 早在 2012 年，谷歌風(fēng)投合伙人喬?克勞斯就提出 “分心文化”：數(shù)字產(chǎn)品持續(xù)刺激大腦，讓用戶失去長期思考能力，閑置時便陷入焦慮。
• 前谷歌產(chǎn)品經(jīng)理 Tristan Harris 發(fā)布內(nèi)部倡議，呼吁科技公司停止利用人性弱點，尊重用戶注意力，但這一問題至今未解決。

三、正向設(shè)計：守護注意力，創(chuàng)造高價值體驗

1. 駕駛安全：HUDWAY 平視顯示器，讓駕駛員專注道路，無需低頭查看信息，降低事故風(fēng)險。

   

2. 行車預(yù)警：特斯拉前方碰撞警告系統(tǒng)，通過視覺 + 聲音雙重提醒，快速抓取駕駛員注意力，規(guī)避碰撞風(fēng)險。

   

3. 工業(yè)生產(chǎn)：Solomon 科技的 3D 視覺 AR 系統(tǒng)，實時識別組裝部件，幫操作員集中注意力，減輕精神壓力。

一、全文速覽圖

二、設(shè)計資訊

1. 在 Figma 社區(qū)推出 Figma Weave 工作流模板

Figma 社區(qū)最新推出的資源類型——Figma Weave 工作流——現(xiàn)已上線。Figma Weave 讓您能夠在可視化畫布上構(gòu)建可重復(fù)、可擴展的生成式 AI 工作流。現(xiàn)在，您可以直接在 Figma 社區(qū)中探索和復(fù)制 Figma Weave 團隊構(gòu)建的工作流。無論您是想生成新圖像、將圖像轉(zhuǎn)換為視頻，還是將品牌指南擴展為插圖集，F(xiàn)igma Weave 都能輕松實現(xiàn)。

網(wǎng)址： https://app.weavy.ai/

網(wǎng)址： https://www.figma.com/release-notes/

三、產(chǎn)品推薦

1. 在線矢量路徑工具

在線的輕量級矢量編輯器，作者希望像 Figma 向量網(wǎng)絡(luò)那種流暢的操作體驗，同時又想擁有 Blender 修改器的“魔法”。最終的成果是一個基于 GPU 加速、使用 Go + WASM 構(gòu)建的圖標與字形設(shè)計工作室，并且完全運行在瀏覽器中。

它有一些很酷的功能，比如形狀構(gòu)建器、動態(tài)鏡像、干凈的 SVG 導(dǎo)入導(dǎo)出、等距繪圖投影等等，還有很多其他特性。整體設(shè)計比較簡潔克制，但用起來很順手。

網(wǎng)址： https://iso.alasdairmonk.com/

網(wǎng)址： https://x.com/almonk/status/2042127913173057659

2. Liaison - AI 編程定位、網(wǎng)頁樣式編輯與批注

在任意網(wǎng)頁上實現(xiàn)類似 Figma 的設(shè)計體驗，調(diào)整元素樣式、添加評論，并導(dǎo)出結(jié)構(gòu)化 Prompt 給 AI 開發(fā)與協(xié)作。

Liaison 是一款面向設(shè)計師、產(chǎn)品經(jīng)理、前端工程師和高頻 AI 用戶的瀏覽器插件。它讓你可以直接在真實網(wǎng)頁上完成樣式調(diào)整、界面批注和實現(xiàn)反饋，不再依賴截圖標注、文檔補充和反復(fù)描述。你可以像在設(shè)計工具里一樣選中頁面元素，修改尺寸、間距、字體、顏色、圓角、描邊、投影等屬性，同時把評論和修改統(tǒng)一整理成結(jié)構(gòu)化結(jié)果，方便交給開發(fā)或 AI 繼續(xù)實現(xiàn)。

瀏覽器插件： https://chromewebstore.google.com/detail/liaison-ai-%E7%BC%96%E7%A8%8B%E5%AE%9A%E4%BD%8D%E3%80%81%E7%BD%91%E9%A1%B5%E6%A0%B7%E5%BC%8F%E7%BC%96%E8%BE%91%E4%B8%8E%E6%89%B9%E6%B3%A8/keeeahbnkkbengbjmmblmpgbccjeoebf

使用介紹： https://gwrdluzl9j9.feishu.cn/wiki/JWRjwF12ZiSQSrkjHbMcMwfbnPu

3. 免費開源的錄屏工具

最貴的縮放錄屏軟件 Screen Studio，核心功能被 Recordly 復(fù)刻，完全免費開源！ 同時支持 Mac/Windows/Linux。 測試了下，比 Screen Studio 還輕便順滑

網(wǎng)址： https://recordly.dev/

網(wǎng)址： https://github.com/webadderall/Recordly

4. 開源圖標庫

MingCute 是一套簡約精致的開源圖標庫。無論您是設(shè)計師還是開發(fā)者，它都非常適合用于 Web 和移動端項目，同時提供了 Figma 插件能夠更便捷的在設(shè)計過程中使用，以及動畫圖標庫、UI 組件庫、天氣圖標等不同場景的素材

網(wǎng)站： https://www.mingcute.com/

Figma 插件： https://www.figma.com/community/plugin/1306884809438005528/mingcute-icon

5. 圖文混排的長文轉(zhuǎn)小紅書圖片生成器

作者使用 vibe Coding 了一個支持 Markdown、圖文混排的長文轉(zhuǎn)小紅書圖片生成器，

1. 支持圖文自由拖拽混排
2. 支持自動切分多圖及一些主題風(fēng)格化
3. 支持 Markdown 長文

網(wǎng)址： https://reflow.fehey.com/

6. 標尺小工具

一個微型工具，用于在 localhost 上測量間距并對齊您的 UI

網(wǎng)址： https://x.com/Ibelick/status/2042508446671499405

體驗地址： https://mesurer.ibelick.com/

四、設(shè)計素材

1. 西文免費開源字體合集

面向 UI/UX 設(shè)計師與開發(fā)者，F(xiàn)reefaces Gallery 是一個精選的免費開源字體合集，這意味著您可以在個人和商業(yè)項目中使用它們，而無需擔心許可問題。

網(wǎng)址： https://www.freefaces.gallery/

網(wǎng)址： https://fontshare.com/

2. 100+個開源免費的 SVG 加載動畫

你可以使用這些基于 SVG 的加載圖標來直觀地指示內(nèi)容。 這些動畫來自多種來源，均采用 MIT 許可證。因此，它們可以無限制地用于商業(yè)用途，且無需署名。

網(wǎng)址： https://magecdn.com/tools/svg-loaders

3. UI/UX 設(shè)計師 Vibe Coding 指南

作者根據(jù)自身經(jīng)驗整理了一份「面向 UI/UX 設(shè)計師 的 Vibe Coding 完整工作流指南」從用 AI 輔助開發(fā)到 可交付、可上線。

網(wǎng)址： https://vibecodingfang.netlify.app/#

五、隨便看看

1. 設(shè)計欣賞

作者在 Figma 中 1 小時繪制的小組件，好玩的是發(fā)帖后有人回復(fù)了在線的地址，將組件實現(xiàn)為了可以使用的音樂播放器，在 AI 時代還是需要審美創(chuàng)造力的，可以通過鏈接體驗

網(wǎng)址： https://x.com/AdityaSur11/status/2038881480898756695

網(wǎng)址： https://audio.snvshal.workers.dev/

2. 沉浸式閱讀探索

作者為自己的博客增加了多種閱讀狀態(tài)，讓視覺外觀不止是淺色、深色，增加了樹影、月色、下雨、下雪等多種自然狀態(tài)，網(wǎng)站右上角可以切換體驗

網(wǎng)址： https://theme-switch.pages.dev/

轉(zhuǎn)載：優(yōu)設(shè)

蘭亭妙微（藍藍設(shè)計）m.payeee.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

一、全文速覽圖

二、安全邊界：Anthropic泄露潛藏的暗網(wǎng)危機

Anthropic 內(nèi)部文件意外流出，揭示了其最強模型 Mythos 的恐怖算力。該模型雖具備重塑行業(yè)的潛力，但也因可能被攻擊者用于挖掘系統(tǒng)漏洞而引發(fā)安全危機。官方聲明稱，在正式發(fā)布前需確保防御者已做好應(yīng)對這種新型算力沖擊的準備。

圖源：Anthropic, Getty Images

此次泄露迅速波及資本市場，導(dǎo)致網(wǎng)絡(luò)安全相關(guān)股價劇烈波動。分析師指出，Mythos 揭示了 AI 技術(shù)在安全攻防中深度嵌入的現(xiàn)狀，反映出利用 AI 進行威脅防御已成常態(tài)，同時也暴露出單點泄露可能引發(fā)的系統(tǒng)性金融風(fēng)險。

圖源：Anthropic, Getty Images

隨著 Mythos 的曝光，OpenAI 等巨頭的對標模型也浮出水面，預(yù)示著 AI 正從輔助工具進化為攻防核心。未來技術(shù)博弈將進入“以 AI 對抗 AI”的新階段，攻擊者與防御者在更高維度上的算力對決，將徹底改寫網(wǎng)絡(luò)安全的競爭格局。

三、技術(shù)邊界：英偉達僅憑矢量數(shù)據(jù)渲染

NVIDIA證實DLSS 5并非通過讀取游戲引擎的3D幾何或材質(zhì)數(shù)據(jù)運行，而是僅憑2D渲染幀與運動矢量進行AI推斷。這意味著該技術(shù)本質(zhì)上是通過分析圖像來“幻化”細節(jié)（如皮膚與光照），而非精確重建場景。

圖源：NVIDIA

雖然這帶來了驚人的視覺增強，但也導(dǎo)致AI會在早期預(yù)覽中產(chǎn)生原畫中不存在的細節(jié)“幻覺”，引發(fā)了外界對畫面真實性與藝術(shù)還原度的質(zhì)疑。

四、設(shè)計邊界：谷歌 AI 畫布的無限可能

Stitch 正在重構(gòu) UI 設(shè)計范式，推出 AI 原生無限畫布并引入“氛圍設(shè)計”概念。用戶不再受限于枯燥的線框圖，只需通過自然語言描述業(yè)

務(wù)目標或靈感，AI 代理即可理解設(shè)計意圖并并行處理多模態(tài)輸入，讓創(chuàng)意探索從底層邏輯轉(zhuǎn)向感官體驗。

圖源：Google

平臺實現(xiàn)了人機交互的自然化，支持用戶通過語音指令進行實時設(shè)計對話與方案篩選。同時，Stitch 能將靜態(tài)畫面瞬間轉(zhuǎn)化為交互原型，由 AI 自動推演點擊邏輯與用戶旅程，并支持通過 URL 提取設(shè)計系統(tǒng)，極大簡化了從規(guī)則制定到原型生成的復(fù)雜流程。

圖源：Google

五、法律邊界：Vogue 與 Dogue 的商標博弈

時尚巨頭康泰納仕正式起訴惡搞雜志《Dogue》，指控其封面設(shè)計侵犯《Vogue》商標權(quán)。這本由獨立創(chuàng)作者創(chuàng)立的實體刊，因讓狗狗模仿人類大片而走紅。目前，康泰納仕不僅要求經(jīng)濟賠償，更強制要求銷毀所有庫存雜志。

圖源：dogue

創(chuàng)始人 Portnaya 堅稱《Dogue》是基于對話與重新詮釋的藝術(shù)創(chuàng)作，旨在為獨立創(chuàng)作者爭取表達空間。然而，面對銷量微薄與高昂法律費用的懸殊對比，這場“大衛(wèi)與歌利亞”式的博弈陷入僵局，創(chuàng)作者正通過眾籌尋求法律援助。

圖源：vogue

六、自然邊界：皇家植物園的品牌新姿態(tài)

Johnson Banks 為愛丁堡皇家植物園（RBGE）打造的品牌重塑旨在整合四個園區(qū)的品牌感知，確立了“四處花園，一個植物世界”的品牌愿景，將愛丁堡、本莫爾、道伊克和洛根的花園融為一體。

圖源：johnsonbanks

還專門設(shè)計了邊框，可以用來框住作品，并提醒人們它們始終存在，而不是事后才想起來的。

圖源：johnsonbanks

這些標志首次展示了一款全新的定制字體，共有四種字重。它是Nomada Incise的定制版，線條棱角分明，優(yōu)雅別致。最細的字重中包含一系列連字，呼應(yīng)了西巴爾迪亞符號及其邊框的生動呈現(xiàn)。

圖源：johnsonbanks

七、文明邊界： 劍橋創(chuàng)新對歷史的推動

劍橋地區(qū)以其創(chuàng)新和發(fā)現(xiàn)而聞名，而這一切始于其世界聞名的大學(xué)校園內(nèi)，如今已發(fā)展成為環(huán)繞該地區(qū)的歐洲領(lǐng)先的知識生態(tài)系統(tǒng)——融合了 5000 家創(chuàng)新驅(qū)動型公司、60 家跨國公司、5 個醫(yī)院信托機構(gòu)、36 個研究園區(qū)、2 所大學(xué)（劍橋大學(xué)和安格利亞魯斯金大學(xué)）以及蓬勃發(fā)展的初創(chuàng)企業(yè)和投資者群體。

圖源：johnsonbanks

以圖解為主題，并將其運用到代數(shù)、方程式、圖表和文字游戲中。這既充分利用了該地區(qū)的科學(xué)聲譽，又為方案增色不少，同時還創(chuàng)造了一種獨特的視覺和語言。

圖源：johnsonbanks

將自己最喜歡的創(chuàng)意與劍橋郡廣袤無垠的天空的靜態(tài)和動態(tài)影像相結(jié)合，打造出一套可應(yīng)用于多種媒體的設(shè)計工具包。

圖源：johnsonbanks

轉(zhuǎn)載：優(yōu)設(shè)

蘭亭妙微（藍藍設(shè)計）m.payeee.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

一、深度愉悅與表面愉悅

1. 打造終身客戶價值，沉淀用戶忠誠度
2. 讓產(chǎn)品自然融入用戶日常生活
3. 與用戶建立心理安全與情感信任

二、讀懂 Kano 模型：愉悅感設(shè)計的底層邏輯

1. 基本型需求

• 滿足：用戶不會明顯滿意
• 缺失：用戶會極度不滿
   
  設(shè)計核心：守住底線，杜絕基礎(chǔ)體驗失分。

2. 期望型需求

3. 魅力型需求

4. 無差異型需求

5. 反向型需求

• 不滿足基本需求，愉悅感毫無意義
• 隨著時間推移，愉悅功能會淪為性能需求，性能需求會淪為基本需求（例：下拉刷新、斜線命令已從驚喜功能變?yōu)榛A(chǔ) UI 規(guī)范）

三、先滿足基礎(chǔ)預(yù)期，再談情感愉悅

• 貼合用戶預(yù)期，滿足基礎(chǔ)需求
• 剔除難用、困惑的體驗障礙
• 提升操作效率，降低任務(wù)成本

1. 解決失敗操作
    
   摒棄 “完美視覺” 執(zhí)念，優(yōu)先解決用戶操作障礙，避免小問題毀掉整體體驗。
2. 簡化復(fù)雜操作
    
   拒絕界面元素過載、視覺樣式雜亂，保持設(shè)計語言統(tǒng)一；遵循行業(yè)標準化交互（如右上角個人中心、頂部搜索欄），降低用戶學(xué)習(xí)成本；按操作優(yōu)先級布局元素，用視覺層級引導(dǎo)用戶行為，輔助用戶構(gòu)建清晰心智地圖。

四、抓準時機：精準觸發(fā)愉悅體驗

1. 強化品牌個性

2. 巧用微互動

3. 無預(yù)期時提供幫助

4. 實時追蹤反饋

5. 一鍵自動填充

五、落地執(zhí)行：愉悅感設(shè)計的行動指南

1. 從情緒板開始，做好前期調(diào)研
    
   打破同類產(chǎn)品局限，多維度挖掘設(shè)計靈感。
2. 明確產(chǎn)品驚喜場景
    
   找到能觸發(fā)情感共鳴的核心時刻，錨定情感連接點。
3. 聚焦單一目標，打磨細節(jié)
    
   避免多目標并行導(dǎo)致信息過載、認知超載；從 ** 本能層（視覺）、行為層（交互）、反思層（情感）** 三層反饋用戶情緒。
4. 傳遞價值，明確設(shè)計意義
    
   愉悅設(shè)計不是為了 “好看”，而是為了達成用戶目標，傳遞產(chǎn)品價值。
5. 迭代設(shè)計，持續(xù)測試優(yōu)化
    
   愉悅體驗并非一蹴而就，需經(jīng)過 “設(shè)計 — 測試 — 迭代” 循環(huán)持續(xù)完善。

六、警惕負面效應(yīng)：愉悅設(shè)計的避坑指南

1. 增加認知負荷與交互成本

2. 審美疲勞

3. 愉悅的主觀性差異

4. 安全的愉悅設(shè)計策略

• App 啟動頁
• 賬號設(shè)置成功頁
• 新功能引導(dǎo)頁
• 首次完成重要操作的反饋頁
• 空狀態(tài)頁面

七、總結(jié)

• 愉悅感的本質(zhì)是提供超出預(yù)期的驚喜，而非單純堆砌功能
• 堅守功能、穩(wěn)定、實用的基礎(chǔ)底線，愉悅設(shè)計不能犧牲核心體驗
• 用自然語言替代專業(yè)術(shù)語，適度融入趣味與溫度
• 設(shè)計的核心是用心，兼顧功能與情緒，打造有記憶點的使用體驗

轉(zhuǎn)載：優(yōu)設(shè)

蘭亭妙微（藍藍設(shè)計）m.payeee.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

第一階段：激發(fā)興趣 —— 用「互惠」拉近用戶距離

1. 客服先告知活動已結(jié)束，抬高優(yōu)惠獲取難度；
2. 主動表示可為用戶向店長申請延保、價保服務(wù)，犧牲自身精力幫用戶謀利；
3. 提醒用戶務(wù)必使用優(yōu)惠，否則自己會受批評，用共情心理推動用戶下單。

第二階段：建立信任 —— 三層加固，打消決策顧慮

1. 承諾兌現(xiàn)：用細節(jié)與案例做實宣傳

2. 信任狀：借權(quán)威背書強化信賴

3. 暢銷好評：用社會認同推動決策

第三階段：立即下單 —— 臨門一腳，促使用戶行動

1. 痛點刺激：喚醒焦慮，激發(fā)購買欲

2. 稀缺營造：制造緊迫感，快速決策

流程圖界面設(shè)計：讓復(fù)雜業(yè)務(wù)邏輯清晰可視化

一、流程圖界面的核心設(shè)計邏輯

1. 信息分層：從全局到細節(jié)的有序呈現(xiàn)

• 主流程優(yōu)先：用加粗、主色線條突出核心業(yè)務(wù)路徑，讓用戶快速抓住主線；
• 分支與判斷清晰：用菱形、分叉線標注決策節(jié)點，用不同樣式區(qū)分可選路徑與強制流程；
• 細節(jié)補充后置：節(jié)點描述、狀態(tài)標注、說明文字放在次要層級，避免主視覺信息被干擾。

2. 視覺規(guī)范：用設(shè)計語言強化邏輯關(guān)系

• 色彩編碼：用主色、輔助色、警示色區(qū)分不同階段、狀態(tài)、風(fēng)險節(jié)點，比如用綠色標注完成節(jié)點、紅色標注異常分支；
• 節(jié)點樣式：用不同形狀區(qū)分任務(wù)、決策、輸入輸出，比如矩形表示執(zhí)行節(jié)點、菱形表示判斷節(jié)點；
• 線條引導(dǎo)：用單向箭頭、虛線 / 實線區(qū)分流程走向與關(guān)聯(lián)關(guān)系，避免用戶產(chǎn)生路徑混淆；
• 風(fēng)格統(tǒng)一：保持圖標、字體、色彩的一致性，強化品牌識別，同時降低用戶的認知成本。

3. 場景適配：貼合不同用戶的使用需求

• 業(yè)務(wù)流程梳理場景：側(cè)重全局概覽，適合使用寬幅分區(qū)設(shè)計，清晰展示多角色、多階段的業(yè)務(wù)流轉(zhuǎn)；
• 低代碼搭建場景：側(cè)重節(jié)點編輯與流程配置，搭配拖拽、節(jié)點配置面板，支持用戶自定義流程；
• 用戶體驗路徑設(shè)計場景：側(cè)重用戶觸點與體驗流轉(zhuǎn)，用多角色、多觸點標注呈現(xiàn)完整用戶旅程；
• 項目管理場景：側(cè)重任務(wù)依賴與進度追蹤，搭配進度條、負責人標注，實現(xiàn)流程管理與執(zhí)行監(jiān)控一體化。

二、不同場景流程圖界面設(shè)計案例解析

1. 企業(yè)級業(yè)務(wù)流程設(shè)計：BIM 業(yè)務(wù)流轉(zhuǎn)圖

• 設(shè)計亮點：四列分區(qū)清晰劃分業(yè)務(wù)階段，節(jié)點、分支、角色完整呈現(xiàn)，底部補充詳細說明，兼顧專業(yè)性與可讀性；
• 適用場景：建筑、工程、制造業(yè)等多角色協(xié)作的業(yè)務(wù)流程梳理與展示。

2. 低代碼場景編輯器：可視化流程搭建界面

• 設(shè)計亮點：節(jié)點拖拽式搭建，支持生產(chǎn)者 / 消費者、比較等不同類型節(jié)點配置，右側(cè)屬性面板可編輯節(jié)點詳情，操作直觀高效；
• 適用場景：低代碼平臺、自動化流程配置、測試場景搭建等工具類產(chǎn)品。

3. 用戶體驗路徑圖：CX 全流程視圖

• 設(shè)計亮點：多角色、多觸點的用戶旅程可視化，用不同線條、圖標區(qū)分用戶觸點、系統(tǒng)流程、數(shù)據(jù)流轉(zhuǎn)，覆蓋營銷、銷售、運營、客服等全鏈路；
• 適用場景：用戶體驗設(shè)計、服務(wù)流程優(yōu)化、跨部門協(xié)作流程梳理。

4. 項目管理流程設(shè)計：目標 - 任務(wù)關(guān)聯(lián)圖

• 設(shè)計亮點：用卡片式節(jié)點呈現(xiàn)項目目標與關(guān)聯(lián)任務(wù)，進度條、負責人標注清晰，線條展示任務(wù)依賴關(guān)系，直觀呈現(xiàn)項目推進邏輯；
• 適用場景：項目管理工具、OKR 管理系統(tǒng)、團隊協(xié)作平臺。

三、流程圖界面設(shè)計的關(guān)鍵要點

1. 避免信息過載：合理分區(qū)、層級分明，優(yōu)先呈現(xiàn)核心流程，避免過多文字與節(jié)點干擾用戶理解；
2. 交互友好性：可編輯流程圖需支持拖拽、縮放、節(jié)點配置等操作，靜態(tài)流程圖需清晰標注關(guān)鍵節(jié)點與路徑；
3. 品牌一致性：結(jié)合產(chǎn)品整體視覺風(fēng)格，保持色彩、圖標、字體的統(tǒng)一，強化品牌識別；
4. 適配多端場景：兼顧 PC 端寬幅展示與移動端查看需求，確保不同設(shè)備下流程清晰可讀。

一、色彩基礎(chǔ)核心概念

1. 色彩原理

• 物理原理：光照射物體后反射，對人眼產(chǎn)生刺激，形成色彩視覺。
• 生理原理：人眼與大腦對光的波長、色彩三屬性做出的視覺反應(yīng)。

2. 色彩三要素

1. 色相：顏色的本質(zhì)類別，如紅、黃、藍，由光的波長決定。
2. 明度：色彩的明暗程度，可理解為顏色中加白 / 加黑的量，反射光越多明度越高。
3. 飽和度：色彩的鮮艷純凈度，純色飽和度最高，混入灰 / 黑 / 白會降低飽和度。

   

3. 常用色彩模型

• RGB（光色模型）：加色混合，紅、綠、藍三原色疊加出白色，用于屏幕顯示（手機、電腦、電視）。

  

• HSB/HSV：以色相、飽和度、明度定義顏色，設(shè)計師直觀調(diào)色首選。
• HSL：與 HSB 類似，區(qū)別在于飽和度與明度的計算邏輯，更適配界面動態(tài)配色。

  

• CMYK（印刷模型）：減色混合，青、品、黃、黑四色疊加，用于紙質(zhì)印刷。

  

• HEX（十六進制）：Web 設(shè)計專用色值，格式為#RRGGBB，精準定義 RGB 色彩。

二、定義色彩：必須掌握的關(guān)鍵要點

1. 色彩觀：文化與場景的深層影響

• 文化習(xí)俗：中國紅象征喜慶繁榮；伊斯蘭文化中綠色代表生命。
• 歷史符號：中國黃色代表皇權(quán)；古埃及白色用于祭祀。
• 自然關(guān)聯(lián)：綠色綁定環(huán)保、自然；藍色傳遞冷靜、信任。
• 社會符號：彩虹色成為平權(quán)運動標識，是社會文化賦予色彩新意義。

2. 色彩偏好：人群差異規(guī)律

（1）年齡偏好

• 0-2 歲：偏愛高飽和亮色（紅、黃、藍）。
• 3-12 歲：喜歡明亮多彩色（橙、綠、紫），受動漫、游戲影響大。
• 青少年：追求潮流個性化，偏好流行色。
• 成年人：正式場景偏愛中性色（藍、白、灰），私人場景更個性化。
• 老年人：接受柔和暖色（深藍、棕、米色）。

（2）性別偏好

• 男性：傾向穩(wěn)重明亮的冷色調(diào)（藍、綠）。
• 女性：傳統(tǒng)偏好紅、粉，當代審美多元，藍、紫也廣受喜愛。

（3）地域偏好

• 中國：喜紅、黃，寓意吉祥。
• 日本：偏愛淡雅柔和色（櫻花粉、淺藍）。
• 地中海：明亮高飽和色，適配陽光氣候。
• 北歐：冷色調(diào)（淺藍、灰、綠），貼合自然環(huán)境。
• 拉美：熱烈明快色（紅、黃、橙），契合熱情文化。

3. 色彩心理語義

• 評價性：自然 / 粗俗、優(yōu)雅 / 丑陋、喜歡 / 討嫌。
• 活力性：溫暖 / 寒冷、動態(tài) / 靜態(tài)、明亮 / 昏暗。
• 潛力性：男性化 / 女性化、堅硬 / 柔軟、沉重 / 輕盈。

4. 色彩情感：用顏色傳遞情緒

• 冷色：冷靜、理性、疏離。
• 暖色：熱情、溫暖、親近。
• 高飽和：活力、張揚、醒目。
• 低飽和：高級、沉穩(wěn)、柔和。

三、色彩驅(qū)動轉(zhuǎn)化：實戰(zhàn)成功案例

1. Heinz 番茄醬：包裝從紅色改為綠色（聯(lián)動《怪物史萊克》），銷量暴漲60%，靠色彩綁定情感共鳴。

   

2. HubSpot：紅色按鈕轉(zhuǎn)化率比綠色高21%，高對比度色彩強化視覺吸引力。

   

3. 電商平臺：橙紅色 “立即購買” 按鈕，比白綠按鈕轉(zhuǎn)化率提升5%，暖色激發(fā)行動欲。

四、品牌色彩升級：為什么改？怎么改？

1. 色彩升級的核心原因

• 業(yè)務(wù)戰(zhàn)略更新，品牌理念迭代。
• 產(chǎn)品定位、目標用戶群體變化。
• 用戶審美偏好升級，體驗需要優(yōu)化。

2. 色彩升級落地方法

（1）前期分析

• 追蹤趨勢：參考潘通年度色、設(shè)計平臺（Behance/Dribbble）流行色。
• 競品調(diào)研：分析直接 / 間接競品的色彩體系，找差異化。
• 自身診斷：梳理現(xiàn)有色彩問題，保留核心品牌色基因。

（2）理性色彩體系搭建

（3）應(yīng)用落地規(guī)則

• 區(qū)分場景：基礎(chǔ)色（品牌色 / 輔助色 / 狀態(tài)色 / 灰階）+ 風(fēng)格化色（大促 / 日常）。
• 比例控制：遵循6:3:1黃金配色法則，控制用色數(shù)量，避免雜亂。
• 視覺合規(guī)：保證明度差異，遵循 WCAG 無障礙標準，兼顧色盲用戶。

（4）科學(xué)驗證手段

五、UI 設(shè)計中色彩的核心價值

1. 建立品牌認知：統(tǒng)一品牌色，強化識別；用色彩傳遞品牌調(diào)性（科技選藍、健康選綠）。
2. 梳理視覺層級：用色彩區(qū)分功能區(qū)，對比色突出重點信息。
3. 提升可用性：保證文本與背景對比度，色彩統(tǒng)一不混淆。
4. 引導(dǎo)用戶行為：高飽和色做行動按鈕，固定色做狀態(tài)反饋（綠成功、紅警告）。
5. 兼顧無障礙：不只用顏色傳遞信息，搭配圖標、文字，適配色盲用戶。
6. 營造情感氛圍：按產(chǎn)品屬性選色（健身用橙綠、金融用藍灰），適配季節(jié)與節(jié)日。
7. 尊重文化差異：全球化產(chǎn)品做本地化色彩適配，避免文化誤解。

轉(zhuǎn)載：優(yōu)設(shè)

蘭亭妙微（藍藍設(shè)計）m.payeee.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

目錄

一、按鈕的定義

二、按鈕設(shè)計的種類

三、按鈕設(shè)計的尺寸

四、按鈕的構(gòu)成

五、按鈕設(shè)計的作用

六、按鈕的位置

七、按鈕的顏色

八、按鈕在UI界面的設(shè)計原則

九、按鈕設(shè)計的注意事項

十、按鈕弱化設(shè)計的六種方式

一、按鈕的定義

按鈕在我們生活中起著很大的作用，它就像我們的小助手一樣，幫我們一鍵開啟想要的任務(wù)，凡事都能一鍵觸達。

按鈕在UI界面中，是一種界面交互控件，通常以矩形、圓形或其他幾何形狀呈現(xiàn)，具有明確的視覺邊界。它通過用戶的點擊、觸摸等操作來觸發(fā)特定的功能或操作，如提交表單、執(zhí)行命令、導(dǎo)航頁面、切換狀態(tài)等。

按鈕一般包含文字標簽、圖標或兩者的組合，以清晰傳達其功能。同時，按鈕在不同狀態(tài)下會呈現(xiàn)出不同的視覺效果，如默認狀態(tài)、按下狀態(tài)、懸浮狀態(tài)、禁用狀態(tài)等，為用戶提供操作反饋和引導(dǎo)。

二、按鈕設(shè)計的種類

1. Antdesign對按鈕的種類劃分

? 次按鈕

常規(guī)按鈕，用于非主要動作。如果不確定選擇哪種按鈕，次按鈕永遠是最安全的選擇。

? 主按鈕

突出“完成”、“推薦”類操作；一個按鈕區(qū)最多使用一個主按鈕。

? 文字按鈕

弱化的按鈕，采用更輕量的按鈕樣式，可用于需大面積展示按鈕場景，例如下面的站酷活動頁就用了很多的文字按鈕，只有當按鈕被選中時，按鈕才會高亮選中。

? 圖標按鈕

圖標提供視覺線索，避免逐字閱讀按鈕文案，更高效地使用界面，讓頁面看起來更加的簡潔。

? 在按鈕中添加圖標

用于對按鈕含義補充解釋，提高按鈕識別效率。

2. 按鈕的樣式種類

按鈕的樣式可以從多個方面進行分類和設(shè)計，以下是一些常見的樣式分類：

? 按顏色劃分

• 單色按鈕：按鈕背景為單一顏色，如藍色、綠色、紅色等，常用于強調(diào)按鈕的主要功能或操作。
• 漸變色按鈕：按鈕背景為漸變色，可以是線性漸變或徑向漸變，通常用于增加視覺吸引力和現(xiàn)代感。
• 透明按鈕：按鈕背景透明或半透明，通常用于與背景融合或突出按鈕上的文本和圖標。
• 彩色邊框按鈕：按鈕背景透明或淺色，但有彩色邊框，常用于需要突出按鈕邊界的場景。

? 按形狀分

• 矩形按鈕：這種是最常見的按鈕形狀，適用于大多數(shù)界面設(shè)計。
• 圓形按鈕：按鈕形狀為圓形，通常用于表示播放、暫停等操作，或用于具有特定功能的圖標按鈕。
• 圓角按鈕：按鈕形狀通常為圓角矩形，常用于需要柔和視覺效果的場景。
• 自定義形狀按鈕：根據(jù)設(shè)計需求，按鈕可以是任意自定義形狀，如星形、心形等，常用于創(chuàng)意設(shè)計或特定主題的界面。

? 按邊框分

• 無邊框按鈕：按鈕沒有邊框，背景和文本直接顯示，常用于簡潔的界面設(shè)計。
• 細邊框按鈕：按鈕有細邊框，常用于區(qū)分按鈕與周圍元素，同時保持界面的簡潔性。
• 粗邊框按鈕：按鈕有粗邊框，常用于強調(diào)按鈕或與背景形成強烈對比。
• 虛線邊框按鈕：按鈕邊框為虛線，常用于表示輔助操作或非主要功能。

? 按圖標分

• 圖標按鈕：按鈕上只有圖標，沒有文本，常用于表示通用操作或節(jié)省空間的場景。
• 圖標+文本按鈕：按鈕上既有圖標又有文本，圖標通常位于文本左側(cè)或上方，常用于清晰表達按鈕功能的場景。

? 按陰影樣式分

• 無陰影按鈕：按鈕沒有陰影，常用于簡潔或平面風(fēng)格的界面設(shè)計。
• 輕微陰影按鈕：按鈕有輕微的陰影效果，常用于增加按鈕的立體感和層次感。
• 明顯陰影按鈕：按鈕有明顯的陰影效果，常用于突出按鈕或與背景形成強烈對比。
• 動態(tài)陰影按鈕：按鈕的陰影效果會隨著鼠標懸停或點擊等交互動作而變化，常用于增加交互體驗的趣味性。

? 按動畫種類分

• 無動畫按鈕：按鈕沒有動畫效果，常用于簡潔或傳統(tǒng)的界面設(shè)計。
• 懸停動畫按鈕：當鼠標懸停在按鈕上時，按鈕會有動畫效果，如顏色漸變、邊框變化、圖標旋轉(zhuǎn)等，常用于增加交互體驗的趣味性和吸引力。
• 點擊動畫按鈕：當點擊按鈕時，按鈕會有動畫效果，如縮放、震動、波紋等，常用于增加交互體驗的反饋感。

馬蜂窩的功能主按鈕，在點擊的時候都會產(chǎn)生動畫，交互感十足。

加載動畫按鈕：

當按鈕處于加載狀態(tài)時，按鈕會有加載動畫效果，如旋轉(zhuǎn)圖標、進度條等，常用于告知用戶操作正在進行中。

3. 按鈕的幾種狀態(tài)

3.1 默認按鈕

按鈕的初始狀態(tài)，通常具有正常的顏色、形狀和文字顯示，等待用戶操作。

3.2 待激活狀態(tài)按鈕

待激活狀態(tài)按鈕通常用于指示某個功能或服務(wù)尚未激活或啟用，用戶需要執(zhí)行某些操作來激活它。這種按鈕的設(shè)計和實現(xiàn)需要清晰地傳達當前的狀態(tài)，并引導(dǎo)用戶進行下一步操作。

3.3 點擊狀態(tài)按鈕

當用戶點擊按鈕時，按鈕會呈現(xiàn)按下的狀態(tài)，通常通過改變顏色、形狀或添加陰影等方式來表示。

3.4 禁用按鈕

在某些情況下，按鈕會處于禁用狀態(tài)，無法進行操作，通常會以灰色或半透明的方式顯示，提示用戶當前操作不可用。

3.5 加載狀態(tài)按鈕

加載狀態(tài)按鈕通常用于指示某個過程正在進行中，例如數(shù)據(jù)加載、文件上傳或頁面正在加載等。這種按鈕可以讓用戶知道他們的操作正在被處理，而不是卡住或出現(xiàn)錯誤。

3.6 危險提示狀態(tài)按鈕

危險提示狀態(tài)按鈕通常用于提醒用戶即將執(zhí)行的操作可能帶來風(fēng)險或不可逆的結(jié)果，例如刪除重要文件、注銷賬戶等。這種按鈕的設(shè)計和實現(xiàn)需要讓用戶明確意識到操作的危險性，以避免誤操作。

下邊這兩組彈框就是運用了危險按鈕，來提示客戶未來即將面臨的風(fēng)險，警示作用非常的明顯。

三、按鈕設(shè)計的尺寸

1. Web端的按鈕尺寸建議

在Web端，按鈕尺寸沒有固定標準。不過，一般來講，按鈕的高度常在32px-48px之間，寬度可根據(jù)內(nèi)容靈活設(shè)置，但最好不要小于48px，這樣方便用戶用手指（觸屏設(shè)備）或鼠標點擊。

像一個簡單的“提交”按鈕，寬度可能是80px左右，高度是36px左右。這些尺寸能保證按鈕在視覺上比較舒適，易于交互。

2. 麻省理工觸摸實驗對按鈕尺寸的指導(dǎo)

麻省理工觸摸實驗室通過對人類指尖的研究，得出了關(guān)于界面按鈕大小設(shè)計的一些重要參考數(shù)據(jù)。

對于食指，平均寬度在16至20毫米，指腹觸摸區(qū)域尺寸為10至14毫米，指尖觸摸區(qū)域尺寸為8至10毫米；對于拇指，平均寬度為25毫米，指腹觸摸區(qū)域尺寸為12至16毫米，指尖觸摸區(qū)域尺寸為10至12毫米。

由此建議，食指觸摸的按鈕應(yīng)保證在8毫米×8毫米以上，且控件間距應(yīng)保證至少在1毫米以上；拇指觸摸的按鈕應(yīng)保證在10毫米×10毫米以上，且控件間距應(yīng)保證至少在2毫米以上。

該研究還指出，大多數(shù)用戶可以舒適可靠地擊中 10 毫米×10 毫米的觸摸目標 。

3. iOS對按鈕尺寸大小的規(guī)范

從按鈕圖標尺寸來看，根據(jù)蘋果官方設(shè)計指南，iOS中按鈕圖標有不同標準。小圖標尺寸為24×24pt，用于小型按鈕，如導(dǎo)航；標準圖標為32×32pt，用于普通按鈕，適合次要操作按鈕；大圖標是 40×40pt，用于寬大按鈕；特大圖標則為48×48pt，用于特大按鈕。

不同設(shè)備屏幕尺寸也有對應(yīng)的建議圖標尺寸，如iPhoneSE建議24pt，iPhone14及iPhone14Pro建議32pt，iPad 建議40pt 。

在最小觸摸區(qū)域方面，iOS規(guī)定最小觸碰區(qū)域為44×44pt，這種尺寸一般適合主要操作按鈕。

四、按鈕的構(gòu)成

UI按鈕的組成主要包括以下幾個關(guān)鍵元素：

1. 圓角

圓角的大小決定了按鈕的氣質(zhì)和視覺感受。小圓角常用于常規(guī)按鈕，如4px圓角；圓角越大，越有親和力，人眼往往不喜歡非常鋒利的物體，所以通常不建議使用0圓角的按鈕樣式，根據(jù)我大量的體驗，我發(fā)現(xiàn)市面上確實也是帶圓角的按鈕居多些。

2. 圖標

圖標用于直觀表達按鈕的功能或狀態(tài)，如加載中、編輯等。圖標的設(shè)計應(yīng)與整體頁面風(fēng)格一致，并確保其含義明確易懂。

3. 內(nèi)間距

內(nèi)邊距能夠擴大按鈕的可點擊范圍，幫助用戶更容易點擊按鈕。一個好的設(shè)計間距是把按鈕的水平內(nèi)邊距設(shè)計成垂直內(nèi)邊距的2倍。當然，你也可以根據(jù)你設(shè)計的實際情況做適當調(diào)整，規(guī)矩不是死的。

4. 容器

容器是包含所有視覺和交互元素的框架，包括顏色、紋理、文案和圖標等。容器的設(shè)計應(yīng)支持按鈕的功能和美觀。

5. 邊框

邊框定義了按鈕的邊界，常用于次級按鈕的描邊。邊框的粗細和樣式可以影響按鈕的視覺層次和交互效果。

6. 文案

文案是按鈕上的文字描述，用于表達按鈕的含義和功能。文案應(yīng)簡潔明了，易于理解，同時具有一定的吸引力。

7. 背景

背景用于表達按鈕的狀態(tài)和品牌氣質(zhì)。不同的背景顏色和紋理可以增強按鈕的視覺吸引力和品牌識別度。

8. 投影

投影用于凸顯層級關(guān)系，幫助用戶更好地區(qū)分不同的按鈕。投影通常與紋理、漸變色結(jié)合使用，以打造更好的視覺體驗。

佐糖首頁為了促進轉(zhuǎn)化，特意將“開通會員”的按鈕用投影凸顯處理，帶投影的按鈕明顯有向前走的感覺，比沒有投影的按鈕看起來更加顯眼。

小小投影在頁面中不僅起到增加空間感的作用，還起到了業(yè)務(wù)強調(diào)的作用，已經(jīng)不僅僅是樣式的一個承載了。

這些元素共同作用，不僅提升了按鈕的功能性，還增強了其美觀性和用戶體驗。在設(shè)計UI按鈕時，應(yīng)綜合考慮這些因素，以確保按鈕既美觀又實用。

五、按鈕設(shè)計的作用

Antdesign指出按鈕的作用是指導(dǎo)用戶采取你希望他們采取的行動，并幫助用戶防錯。

1. 觸發(fā)操作

1.1 提交與確認

在表單填寫場景中，如用戶注冊、登錄、信息提交等，按鈕用于觸發(fā)提交或確認操作，將用戶輸入的信息發(fā)送給系統(tǒng)進行處理。

1.2 執(zhí)行功能

在各類軟件中，按鈕是執(zhí)行具體功能的主要方式，如在圖像編輯軟件中，“裁剪”“旋轉(zhuǎn)”“調(diào)整顏色”等按鈕，可讓用戶快速實現(xiàn)相應(yīng)功能。

2. 導(dǎo)航跳轉(zhuǎn)

2.1 頁面切換

在多頁面的應(yīng)用或網(wǎng)站中，按鈕可實現(xiàn)頁面之間的切換，如網(wǎng)站的首頁、產(chǎn)品頁、關(guān)于我們頁等，通過點擊按鈕，用戶能方便地瀏覽不同頁面內(nèi)容。

2.2 菜單展開與收起

用于控制導(dǎo)航菜單的展開與收起，節(jié)省頁面空間，提高界面的整潔度和易用性。

3. 狀態(tài)控制

3.1 顯示與隱藏

可用于控制某些元素的顯示與隱藏，如在電商網(wǎng)站中，點擊“查看更多商品詳情”按鈕，可展開隱藏的詳細商品信息。

飛書中的這個小小按鈕，它承載著隱藏折疊的功能，讓頁面看起來更加的簡潔有序。

3.2 啟用與禁用

在某些功能需要滿足一定條件才能使用時，按鈕可用于表示該功能的啟用或禁用狀態(tài)，如在未填寫完必填項時，“提交”按鈕處于禁用狀態(tài)，無法點擊。

中國移動云盤的登錄頁就是這么設(shè)計的，當前面信息沒有填完，后面的登錄按鈕始終是禁用的狀態(tài)，只有當信息填完，且填寫正確，按鈕才會亮起。

4. 提供反饋

4.1 操作反饋

當用戶點擊按鈕后，按鈕會通過顏色、形狀、動畫等方式的改變，向用戶提供操作反饋，告知用戶系統(tǒng)已接收到操作指令。

4.2 引導(dǎo)提示

在一些復(fù)雜操作或新功能引導(dǎo)時，按鈕可作為引導(dǎo)提示的一部分，告知用戶下一步操作，如在新手引導(dǎo)流程中，突出顯示“下一步”按鈕。

心島日志的新手指引中就是這樣設(shè)計的，按鈕在其中起了很重要的指引作用。

5. 數(shù)據(jù)交互

5.1 數(shù)據(jù)篩選

在數(shù)據(jù)展示界面，如表格、列表等，按鈕可用于對數(shù)據(jù)進行篩選，方便用戶快速找到所需信息。

釘釘打卡這個界面中，多虧有了日、周、月的篩選按鈕，才讓數(shù)據(jù)篩選變得如此便捷。

5.2 數(shù)據(jù)排序

通過點擊“按時間排序”“按銷量排序”等按鈕，用戶可對數(shù)據(jù)進行重新排序，以滿足不同的查看需求。

6. 品牌傳達

很多產(chǎn)品的按鈕顏色都是與它的品牌色高度一致的，它既是按鈕，又是品牌色的傳遞大使。

網(wǎng)易云音樂的按鈕色用的網(wǎng)易紅，釘釘打卡的按鈕用的騰訊藍，都是在傳遞自己的品牌色，同時也是在進行指令的傳達。

六、按鈕的位置

在日常設(shè)計中，頁面無疑少不了按鈕位置的擺放，那么按鈕放置在什么樣的位置合適，這也是一個值得深思的問題，也許我們已經(jīng)司空見慣了按鈕的位置擺放，但是我們知道它為什么要放這里或者那里嗎？下面我們來看下這幾種設(shè)計模型，讓它告訴我們，為什么，在特定場景下，按鈕位置要這么放？

1. 設(shè)計依據(jù) – Z型視覺模型

1.1 原理含義

Z型視覺模型是一種描述用戶在瀏覽網(wǎng)頁或界面時視覺軌跡的理論模型。

它的布局遵循字母Z的形狀，指用戶的瀏覽路線——從左到右，從上到下的的視覺運動軌跡。

首先，人們從左上角到右上角進行掃描，形成一條水平線；第二步，向頁面的左下側(cè)，創(chuàng)建一條對角線；最后，再次向右轉(zhuǎn)，形成第二條水平線，當觀眾的視角以這種模式移動時，它形成一個虛構(gòu)的“Z”字形。

1.2 視覺區(qū)域

• 區(qū)域1：位于頁面左上角，是用戶視線最先關(guān)注的區(qū)域，通常放置最重要的信息，如網(wǎng)站標志、導(dǎo)航欄等，能第一時間吸引用戶的注意力并讓用戶對頁面內(nèi)容有初步的整體認知。
• 區(qū)域2：在區(qū)域1的右側(cè)，用戶的視線在水平移動時會經(jīng)過該區(qū)域，可放置一些與區(qū)域1相關(guān)的輔助信息或次要的導(dǎo)航元素等。
• 區(qū)域3：位于頁面中部偏左，當用戶視線繼續(xù)向下移動時會關(guān)注到該區(qū)域，通常用來展示頁面的核心內(nèi)容，如產(chǎn)品介紹、文章主體等。
• 區(qū)域4：在頁面的右下角，是用戶視線的終點區(qū)域之一，可放置一些重要的操作按鈕或補充信息等，以吸引用戶在瀏覽完主要內(nèi)容后進行進一步的操作或獲取更多信息。

1.3 應(yīng)用案例

在電商網(wǎng)站中，商家會把熱門推薦或主打產(chǎn)品放在區(qū)域1和區(qū)域3，以吸引用戶的注意力。

在產(chǎn)品詳情頁面，將“加入購物車”“立即購買”等按鈕放在區(qū)域4，方便用戶在瀏覽完產(chǎn)品信息后進行購買操作。

天貓商城就是這樣做的，把網(wǎng)站的LOGO圖放置在左上角（區(qū)域1），把產(chǎn)品圖放置在左下角（區(qū)域3），最后在用戶瀏覽了全部頁面之后，在右下角（區(qū)域4）放置購買按鈕，引導(dǎo)用戶下單。

在這個帶有銷售場景的頁面設(shè)計中，購買按鈕放置在右下角符合用戶瀏覽習(xí)慣，也符合Z型視覺模型。

在B端應(yīng)用軟件中，可能運用的功能比較多，按鈕也比較多，通過大量分析和觀察發(fā)現(xiàn)，它們大部分喜歡把按鈕放置在每次視覺運動線的起點或者終點的位置。

騰訊云是這樣處理的，中國移動網(wǎng)盤是這么處理的，看似巧合，其實也有它合情合理的一面，因為每一個動作的開始和結(jié)束都會更加的引人注意。

這就跟人們每次入職一個新公司一樣，剛進去時會特別賣力、小心，后面時間長了，也就形成免疫，習(xí)慣了，但是當最后要離開這家公司的時候，最后心情又會特別復(fù)雜，回想起自己在這里成長的歲月，就會心生很多的感慨，也會特別的記憶深刻。

也許這也是為啥很多頁面設(shè)計，喜歡把重要的按鈕放置在每次視覺運動線的起點或者終點吧！

七、按鈕的顏色

按鈕的顏色在界面中不僅起到視覺點綴的作用，同時也是按鈕狀態(tài)的一種呈現(xiàn)和反饋。

按鈕顏色不是千篇一律的品牌色，它也經(jīng)常需要根據(jù)業(yè)務(wù)場景的不同，更換顏色，比方說紅色-刪除按鈕、黃色-告警按鈕、綠色-通過按鈕、藍色-更多按鈕，不同的按鈕在顏色設(shè)計上都會有所區(qū)別。

此外，在設(shè)計按鈕顏色時，有一些基本規(guī)范。

首先，從功能角度看，主要按鈕通常會使用比較突出的顏色，像鮮艷的藍色，這是因為藍色醒目又不會過于刺眼，能引導(dǎo)用戶去點擊。次要按鈕（如取消、返回）的顏色會稍淡一些，比如淺灰色，讓用戶知道這是相對次要的操作。

從顏色搭配來說，按鈕顏色要和背景色有足夠的對比度，方便用戶識別。比如背景是白色，深色按鈕就會很清晰；如果背景顏色較深，那按鈕可以用淺色或者高亮度顏色。

另外，顏色的選擇也要考慮產(chǎn)品的風(fēng)格和使用場景。例如，在一個游戲軟件里可能會使用更活潑的色彩，像紅色、橙色；而在辦公軟件里，通常會采用比較沉穩(wěn)的色調(diào)，如藍色、黑色。

八、按鈕在UI界面的設(shè)計原則

1. 可識別性

1.1 視覺清晰

按鈕應(yīng)采用用戶熟悉的設(shè)計樣式，如帶有矩形或圓角矩形邊框的填充按鈕、帶有陰影的填充按鈕、幽靈按鈕等。

1.2 文字明確

按鈕上的標簽應(yīng)準確、簡明直接地介紹其功能，避免使用過于通用或模糊的表述，讓用戶清楚點擊后會發(fā)生什么。

2. 易操作性

2.1 位置合理

將按鈕放在用戶期望看到的地方，如遵循F型或古騰堡原則，在頁面的視覺焦點區(qū)域放置重要按鈕。

2.2 尺寸適宜

按鈕大小應(yīng)反映其在屏幕上的優(yōu)先級，更大的按鈕用于更重要的操作，同時要適配用戶的手指，避免誤觸。

3. 一致性

3.1順序得當、邏輯一致

按鈕的順序應(yīng)反映用戶與界面之間交互的邏輯，如“上一步”按鈕通常在左邊，“下一步”按鈕在右邊。

3.2 狀態(tài)樣式一致

按鈕應(yīng)具有一致的狀態(tài)樣式，如默認、按下、聚焦、禁用等，一個產(chǎn)品中，這些狀態(tài)樣式要高度的一致，不能在這個頁面按鈕樣式是這樣的，跑到另一個頁面，樣式又發(fā)生了改變。

著名的格式塔心理學(xué)也是這么認為的，它強調(diào)人對事物的理解是基于整體的、有組織結(jié)構(gòu)的，如果按鈕設(shè)計做到一致性，對提高產(chǎn)品的整體性是有非常大的改進的。

4. 簡潔性

4.1 避免過多

避免在一個界面中使用過多的按鈕，以免讓用戶感到無所適從，應(yīng)優(yōu)先考慮最重要的操作。

4.2 功能單一

每個按鈕應(yīng)盡量只執(zhí)行一個主要功能，避免一個按鈕承載過多復(fù)雜的操作，降低用戶的認知成本。

希克定律指出，人的決策時間會隨著選擇的增加而增加。在按鈕設(shè)計中，簡潔的設(shè)計能減少用戶的選擇和認知負擔，使用戶能更快地做出決策并執(zhí)行操作。

5. 美觀性

5.1 風(fēng)格統(tǒng)一

按鈕的設(shè)計風(fēng)格應(yīng)與整個UI界面的風(fēng)格保持一致，包括顏色、形狀、字體等方面，形成統(tǒng)一的視覺體系。

5.2 對比協(xié)調(diào)

在保持整體協(xié)調(diào)的基礎(chǔ)上，通過對比突出重要按鈕，如使用高對比度的顏色、較大的尺寸等，吸引用戶的注意力。

情感化設(shè)計理論強調(diào)設(shè)計應(yīng)該注重用戶的情感體驗。美觀的按鈕設(shè)計能夠傳遞積極的情感信息，增強用戶和產(chǎn)品的情感連接。

6. 要符合習(xí)慣

奧斯卡·王爾德說過：“習(xí)慣一旦養(yǎng)成，便很難改變。”

所以我們在設(shè)計按鈕的時候，一定要符合人性的習(xí)慣，而不是試圖改變?nèi)藗兊牧?xí)慣。

九、按鈕設(shè)計的注意事項

1. 按鈕設(shè)計要有分組意識

帶有分組的按鈕擺放，讓人看起來總是更加的有序，也更利于用戶進行操作，面對同類型的功能操作點無需跳躍著去尋找，能很快在相似功能操作區(qū)域找到。

360的分組意識很強烈，三個不同區(qū)域的圖標按鈕樣式都做了明顯的區(qū)分，讓界面看起來更加有序，操作起來也更加的便捷。

2. 按鈕排列視覺上要有主次

切不可一行按鈕中出現(xiàn)多個高強調(diào)的按鈕，Antdesign對這個也做了詮釋，會對用戶的行為進行錯誤的引導(dǎo)，也不利于聚焦。

通義這個頁面雖然有多個選中的按鈕，但是沒有全部用高強調(diào)的按鈕，只有強推薦的操作“開始錄音”才用了強按鈕。

其它通過相對淺的顏色做了弱按鈕選中處理，視覺上主次分明，信息主次表達上也清晰可見。

3. 不要在按鈕中放置兩個圖標

當一個按鈕同時兼顧兩個交互動作的時候，一定要區(qū)分設(shè)計，不能赤裸裸的展示在一個按鈕中，而不做任何區(qū)分。

4. 返回按鈕宜放置在左邊

具有返回意義的按鈕，應(yīng)該放在左側(cè)，暗示其方向是回到之前，例如上一步。

5. 按鈕文字不宜太長

簡短的文字更易被用戶閱讀和記住，在一個按鈕上最多不超過5個文字，重要的按鈕一般使用2~4個字。

十、按鈕弱化設(shè)計的六種方式

? 用純灰色文字的弱化按鈕

? 用灰色邊框＋灰色文字的弱化按鈕

? 用顏色邊框+顏色文字的弱化按鈕

? 用灰底+灰色文字的弱化按鈕

? 用淺色底+顏色文字的弱化按鈕

? 用純顏色的弱化按鈕

十一、總結(jié)

通過本篇文章的探討，我們深入了解了B端按鈕設(shè)計的九大核心要素。

從按鈕的基本定義到Antdesign的分類，再到尺寸、構(gòu)成、作用、位置和顏色等細節(jié)，每一部分都是提升用戶體驗的關(guān)鍵。

按鈕設(shè)計不僅關(guān)乎美觀，更影響著用戶的操作效率和滿意度。在UI界面中，遵循設(shè)計原則和注意事項，確保按鈕既實用又具有吸引力，是每位設(shè)計師的職責。

希望本文能為設(shè)計師們提供有價值的參考，激發(fā)更多創(chuàng)新靈感，共同推動B端產(chǎn)品的交互設(shè)計向更高水平發(fā)展。

轉(zhuǎn)載：人人都是產(chǎn)品經(jīng)理

蘭亭妙微（藍藍設(shè)計）m.payeee.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

很多設(shè)計師做描邊風(fēng)圖標 / 插畫時，經(jīng)常遇到結(jié)構(gòu)弱、沒層次、顏色悶的問題。今天就用實戰(zhàn)改稿思路，把描邊風(fēng)最常用、最好用的技巧講清楚，新手也能直接套用。

一、視覺設(shè)計：專業(yè)與溫度的平衡，打造醫(yī)療級質(zhì)感

1. 品牌與色彩體系

2. 數(shù)據(jù)可視化設(shè)計

3. 全端視覺風(fēng)格統(tǒng)一

二、信息架構(gòu)：全鏈路閉環(huán)，覆蓋健康管理全場景

• 移動端 / 手表端采集頁：支持 ECG 心電圖記錄、心率實時監(jiān)測，界面聚焦核心數(shù)據(jù)，操作極簡，適配用戶日常快速監(jiān)測的場景；
• 用戶數(shù)據(jù)頁：聚合用戶個人信息、歷史監(jiān)測數(shù)據(jù)、健康趨勢分析，數(shù)據(jù)分類清晰，用戶可快速查看單次監(jiān)測結(jié)果與長期健康變化；
• PC 端后臺管理頁：整合多用戶數(shù)據(jù)、設(shè)備管理、歷史記錄查詢等功能，數(shù)據(jù)可視化全面，滿足用戶或醫(yī)護人員的專業(yè)管理需求；
• 注冊登錄頁：采用簡約設(shè)計，兼顧用戶信息安全與使用便捷性，適配醫(yī)療產(chǎn)品的隱私保護需求。

三、交互體驗：精準適配場景，兼顧專業(yè)性與易用性

• 極簡采集流程：手表端監(jiān)測界面僅保留核心操作按鈕，用戶可一鍵開始 / 停止監(jiān)測，進度條與狀態(tài)提示清晰直觀，避免操作干擾；
• 數(shù)據(jù)即時反饋：監(jiān)測過程中實時顯示心率、監(jiān)測進度，完成后即時呈現(xiàn)數(shù)據(jù)結(jié)果與健康狀態(tài)，降低用戶等待焦慮；
• 多端協(xié)同交互：移動端、手表端、PC 端數(shù)據(jù)實時同步，用戶可在任意設(shè)備查看、管理健康數(shù)據(jù)，操作體驗連貫；
• 輕量化操作設(shè)計：界面布局簡潔克制，核心數(shù)據(jù)突出展示，減少冗余信息，讓用戶快速獲取關(guān)鍵健康信息，適配不同年齡段用戶的使用習(xí)慣。

四、設(shè)計總結(jié)