蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微UI設計公司，本次分享主要的工具也都是 AI 相關，有工業和產品 3D 設計 AI 平臺 3flow，語音轉社交媒體圖片的 AI APP，面向 AI 創作者和開發者的在線社區 B150，專業的 AI 圖像生成與編輯平臺 APImage，Win95 風格 AI 創作者交流社區，以及榮獲黑客松大獎的 AI 編程配置的超強 Skill。
3Flow AI 是一個面向產品設計的 AI 工具，可以在瀏覽器里直接使用。它的核心能力是把「想法」快速變成設計圖，甚至直接生成 3D 模型，幫助設計師從靈感到初步原型的過程大幅提速。相比傳統設計軟件，它更偏向創意階段，讓你幾秒鐘就能看到一個產品雛形。
在功能方面，3Flow AI 是非常突出的，生成速度非常快（幾秒內出圖）、支持從 2D 圖像一鍵轉成 3D 模型、可以對局部設計做修改（比如換材質、顏色），以及自動生成多種設計變體用于對比。整體上，它把「畫圖 + 建模 + 修改」的流程整合在一個工具里，減少反復切換軟件的成本。
3Flow AI 徹底降低了 3D 和工業設計的門檻，你不需要會復雜的 CAD 或 3D 建模，也能快速把想法變成可視化甚至可打印的模型。對于做產品、內容創作或創業的用戶來說，它可以顯著縮短從創意到驗證的時間，讓「想一個東西并做出來」變得更容易、更便宜。
Reframe 能將你的語音筆記轉換成專業的 Instagram / LinkedIn / Facebook / X 上展示的輪播圖，當然這可以發到微博/小紅書/小綠書/朋友圈。你只需說出你的想法——AI 會自動構建框架、設計每個幻燈片，并保留你真實的語氣。無需任何設計技能。
簡單來說，Reframe 是一款專為創作者設計的 AI 社交媒體排版應用，它的核心理念是將用戶的「語音」直接轉化為具有專業設計感的輪播圖和文字貼文，幫助創作者在沒有專業團隊和設計師的情況下快速制作內容。
Reframe 核心優勢是「語音轉圖文」與「對話式編輯」。你只需錄制幾十秒的語音表達想法，內置 AI 就會自動編寫出高吸引力的文案，并生成帶排版的輪播圖草稿。你可以通過與 AI 聊天來微調文字內容，還能自由套用精美的預設模板、修改字體和顏色，最后支持一鍵導出為圖片或 PDF。
Reframe 極大降低了內容創作的門檻與時間成本，無論是在通勤路上還是靈光一現時，只需動動嘴就能把零碎的靈感瞬間變成高質量的社交傳播素材。它完美解救了不擅長寫文案和做排版的新手，讓每個人都能輕松像專業博主一樣高效產出爆款圖文，提升個人影響力。
B150 是一款專為 AI 開發者、創作者和創業者打造的「專業社交網絡」與社區平臺。它致力于成為那些利用 AI 技術進行編程、設計、影視制作、游戲開發等領域的「實干家」們的聚集地，幫助他們將大膽的想法轉化為真實落地的項目。
B150 提供了以項目為驅動的在線社交體驗，AI 創作者不僅可以在信息流中展示自己的作品、獲取早期種子用戶和真實的反饋，還能在這里尋找志同道合的合作者。此外，它集成了 AI 工具及資源探索、AI 人才與工作機會招聘看板，以及專屬的工具折扣市場，全方位覆蓋從產品構思到發布落地的各種需求。
對于普通的 AI 愛好者和創作者而言，B150 提供了一個高濃度的專業學習和互助圈層。它打破了傳統社交媒體的雜音，讓你能專注于看別人是如何利用最新的 AI 工具來解決實際問題的。不僅能幫你少走彎路，還能讓你在發布自己的「副業」或項目時，快速找到第一批支持者，真正將「想法」變成「事業」。
APImage 是一款專業的 AI 圖像生成與編輯平臺，專為電商團隊、企業和創作者打造。它能夠將簡單的文字提示迅速轉化為高質量、可直接用于商業生產的視覺素材，如產品展示圖、生活方式插圖或品牌創意海報，只需幾秒鐘即可完成。
APImage 的核心優勢在于強大的「視覺一致性控制」及全面的編輯工具，不僅具備文本生圖、一鍵摳圖和局部重繪功能，最亮眼的是允許用戶建立專屬資產庫。這意味著您可以在不同場景中反復生成擁有完全相同人物面孔、產品細節或特定背景的圖片。此外，它還支持 API 接入和各類自動化工作流整合。
對普通用戶、電商小賣家和自媒體人而言，APImage 徹底打破了專業攝影和設計的門檻。無需租借影棚或聘請專業模特，僅靠打字就能穩定地產出成套的、風格統一的高端商業大片，并且它就是為這樣的場景而創造的。APImage 解決了傳統 AI 繪圖「每次結果都隨機、難以連貫」的痛點，讓個人也能輕松擁有專業級的視覺生產力。
鏈接：https://www.ideaboard95.com/
IdeaBoard95 是一款主打復古風格的公開創意靈感看板網站。它的界面被精心設計成了經典的 Windows 95 操作系統風格，為獨立開發者、創作者和普通用戶提供了一個展示產品想法、尋找靈感以及進行社區交流的公共空間。
IdeaBoard95 將復古視覺與極簡交互結合，用戶可以使用 Google 賬號快捷登錄，在看板上發布有關 App、網站或 AI 的產品點子，也可以為別人的好主意點贊投票。盡管外表懷舊，但它底層具備優秀的現代用戶體驗，在電腦和手機端都能清晰瀏覽，并支持通過標簽快速篩選感興趣的內容。
IdeaBoard95 提供了一個輕量化、充滿趣味的「想法展示區」，它避免了零散的靈感在復雜的筆記工具中吃灰，并用這種沒有壓力的懷舊方式降低了分享的門檻。這讓每個人都能輕松地把腦海中的奇思妙想貼在「公屏」上，純粹地碰撞思維火花并驗證點子的可行性。
鏈接：https://github.com/affaan-m/everything-claude-code
Everything Claude Code 是由 Anthropic 黑客松獲勝者開源的一款極具人氣的 AI 編程配置庫。它并非獨立軟件，而是專為 Claude Code、Cursor 等 AI 智能體打造的「性能增強與工具擴展包」。
這個 Skill 提供了一套開箱即用的精密架構，內置了大量專家級的 Agents、按需加載的 Skills 以及自動化規則。它全面支持多語言環境，并具備記憶持久化、持續學習和安全審查等高級功能。這些配置能有效優化大模型的 Token 消耗，讓 AI 像資深工程師一樣精準拆解并自主執行復雜任務。
哪怕你是純粹的新手小白，你也可以輕松使用它，因為它徹底免去了耗時費力的「AI 調教」過程。只需簡單引入這套經過實戰檢驗的配置，就能讓原本基礎的 AI 助手瞬間掌握數百種專業開發技能。它極大地降低了高效開發的門檻，讓沒有深厚技術積累的人，也能以幾倍的速度搭建出高質量的應用程序。
轉載：優設
蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微UI設計公司與大家一起學習，人類的美術創作經歷了從紙面的二維走向三維、從“模仿自然”到遵從主觀意識自由表達的歷程，人機界面設計也經歷了擬物、扁平以及更多的設計風格的迭代演化。是什么推動著藝術家和設計師們不斷探索規則、學習規則，進而挑戰規則？在拆解手腳架的過程中，我們將愈加貼近創作的本質。
蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
Figma 社區最新推出的資源類型——Figma Weave 工作流——現已上線。Figma Weave 讓您能夠在可視化畫布上構建可重復、可擴展的生成式 AI 工作流。現在，您可以直接在 Figma 社區中探索和復制 Figma Weave 團隊構建的工作流。無論您是想生成新圖像、將圖像轉換為視頻，還是將品牌指南擴展為插圖集，Figma Weave 都能輕松實現。
網址： https://www.figma.com/release-notes/
在線的輕量級矢量編輯器，作者希望像 Figma 向量網絡那種流暢的操作體驗，同時又想擁有 Blender 修改器的“魔法”。最終的成果是一個基于 GPU 加速、使用 Go + WASM 構建的圖標與字形設計工作室，并且完全運行在瀏覽器中。
它有一些很酷的功能，比如形狀構建器、動態鏡像、干凈的 SVG 導入導出、等距繪圖投影等等，還有很多其他特性。整體設計比較簡潔克制，但用起來很順手。
網址： https://iso.alasdairmonk.com/
網址： https://x.com/almonk/status/2042127913173057659
在任意網頁上實現類似 Figma 的設計體驗，調整元素樣式、添加評論，并導出結構化 Prompt 給 AI 開發與協作。
Liaison 是一款面向設計師、產品經理、前端工程師和高頻 AI 用戶的瀏覽器插件。它讓你可以直接在真實網頁上完成樣式調整、界面批注和實現反饋，不再依賴截圖標注、文檔補充和反復描述。你可以像在設計工具里一樣選中頁面元素，修改尺寸、間距、字體、顏色、圓角、描邊、投影等屬性，同時把評論和修改統一整理成結構化結果，方便交給開發或 AI 繼續實現。
使用介紹： https://gwrdluzl9j9.feishu.cn/wiki/JWRjwF12ZiSQSrkjHbMcMwfbnPu
最貴的縮放錄屏軟件 Screen Studio，核心功能被 Recordly 復刻，完全免費開源！ 同時支持 Mac/Windows/Linux。 測試了下，比 Screen Studio 還輕便順滑
網址： https://github.com/webadderall/Recordly
MingCute 是一套簡約精致的開源圖標庫。無論您是設計師還是開發者，它都非常適合用于 Web 和移動端項目，同時提供了 Figma 插件能夠更便捷的在設計過程中使用，以及動畫圖標庫、UI 組件庫、天氣圖標等不同場景的素材
Figma 插件： https://www.figma.com/community/plugin/1306884809438005528/mingcute-icon
作者使用 vibe Coding 了一個支持 Markdown、圖文混排的長文轉小紅書圖片生成器，
一個微型工具，用于在 localhost 上測量間距并對齊您的 UI
網址： https://x.com/Ibelick/status/2042508446671499405
體驗地址： https://mesurer.ibelick.com/
面向 UI/UX 設計師與開發者，Freefaces Gallery 是一個精選的免費開源字體合集，這意味著您可以在個人和商業項目中使用它們，而無需擔心許可問題。
網址： https://www.freefaces.gallery/
你可以使用這些基于 SVG 的加載圖標來直觀地指示內容。 這些動畫來自多種來源，均采用 MIT 許可證。因此，它們可以無限制地用于商業用途，且無需署名。
網址： https://magecdn.com/tools/svg-loaders
作者根據自身經驗整理了一份「面向 UI/UX 設計師 的 Vibe Coding 完整工作流指南」從用 AI 輔助開發到 可交付、可上線。
網址： https://vibecodingfang.netlify.app/#
作者在 Figma 中 1 小時繪制的小組件，好玩的是發帖后有人回復了在線的地址，將組件實現為了可以使用的音樂播放器，在 AI 時代還是需要審美創造力的，可以通過鏈接體驗
網址： https://x.com/AdityaSur11/status/2038881480898756695
網址： https://audio.snvshal.workers.dev/
作者為自己的博客增加了多種閱讀狀態，讓視覺外觀不止是淺色、深色，增加了樹影、月色、下雨、下雪等多種自然狀態，網站右上角可以切換體驗
網址： https://theme-switch.pages.dev/
轉載：優設
蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
#RRGGBB，精準定義 RGB 色彩。
轉載：優設
蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
無法想象沒有按鈕的頁面是什么滋味，那定會像沒有方向盤的汽車，讓人不知所措吧？也無法想象按鈕設計不恰當，會給用戶帶來怎樣的困擾？
面對十萬火急的任務需求，如果需要調動全部理性腦，深呼吸三秒，才能找到想要執行操作的按鈕入口，我想這樣的產品設計是失敗的，是會被用戶所唾棄的。
蘭亭妙微UI設計公司，將詳細剖析按鈕的神秘面紗，了解它、研究它，讓按鈕設計成為產品的得力助手，為我們的產品賦能，為我們的工作提效，下面就讓我們開啟這場神秘之旅吧!
一、按鈕的定義
二、按鈕設計的種類
三、按鈕設計的尺寸
四、按鈕的構成
五、按鈕設計的作用
六、按鈕的位置
七、按鈕的顏色
八、按鈕在UI界面的設計原則
九、按鈕設計的注意事項
十、按鈕弱化設計的六種方式
按鈕在我們生活中起著很大的作用，它就像我們的小助手一樣，幫我們一鍵開啟想要的任務，凡事都能一鍵觸達。
按鈕在UI界面中，是一種界面交互控件，通常以矩形、圓形或其他幾何形狀呈現，具有明確的視覺邊界。它通過用戶的點擊、觸摸等操作來觸發特定的功能或操作，如提交表單、執行命令、導航頁面、切換狀態等。
按鈕一般包含文字標簽、圖標或兩者的組合，以清晰傳達其功能。同時，按鈕在不同狀態下會呈現出不同的視覺效果，如默認狀態、按下狀態、懸浮狀態、禁用狀態等，為用戶提供操作反饋和引導。
? 次按鈕
常規按鈕，用于非主要動作。如果不確定選擇哪種按鈕，次按鈕永遠是最安全的選擇。
? 主按鈕
突出“完成”、“推薦”類操作；一個按鈕區最多使用一個主按鈕。
? 文字按鈕
弱化的按鈕，采用更輕量的按鈕樣式，可用于需大面積展示按鈕場景，例如下面的站酷活動頁就用了很多的文字按鈕，只有當按鈕被選中時，按鈕才會高亮選中。
? 圖標按鈕
圖標提供視覺線索，避免逐字閱讀按鈕文案，更高效地使用界面，讓頁面看起來更加的簡潔。
? 在按鈕中添加圖標
用于對按鈕含義補充解釋，提高按鈕識別效率。
按鈕的樣式可以從多個方面進行分類和設計，以下是一些常見的樣式分類：
? 按顏色劃分
? 按形狀分
? 按邊框分
? 按圖標分
? 按陰影樣式分
? 按動畫種類分
馬蜂窩的功能主按鈕，在點擊的時候都會產生動畫，交互感十足。
加載動畫按鈕：
當按鈕處于加載狀態時，按鈕會有加載動畫效果，如旋轉圖標、進度條等，常用于告知用戶操作正在進行中。
3.1 默認按鈕
按鈕的初始狀態，通常具有正常的顏色、形狀和文字顯示，等待用戶操作。
3.2 待激活狀態按鈕
待激活狀態按鈕通常用于指示某個功能或服務尚未激活或啟用，用戶需要執行某些操作來激活它。這種按鈕的設計和實現需要清晰地傳達當前的狀態，并引導用戶進行下一步操作。
3.3 點擊狀態按鈕
當用戶點擊按鈕時，按鈕會呈現按下的狀態，通常通過改變顏色、形狀或添加陰影等方式來表示。
3.4 禁用按鈕
在某些情況下，按鈕會處于禁用狀態，無法進行操作，通常會以灰色或半透明的方式顯示，提示用戶當前操作不可用。
3.5 加載狀態按鈕
加載狀態按鈕通常用于指示某個過程正在進行中，例如數據加載、文件上傳或頁面正在加載等。這種按鈕可以讓用戶知道他們的操作正在被處理，而不是卡住或出現錯誤。
3.6 危險提示狀態按鈕
危險提示狀態按鈕通常用于提醒用戶即將執行的操作可能帶來風險或不可逆的結果，例如刪除重要文件、注銷賬戶等。這種按鈕的設計和實現需要讓用戶明確意識到操作的危險性，以避免誤操作。
下邊這兩組彈框就是運用了危險按鈕，來提示客戶未來即將面臨的風險，警示作用非常的明顯。
在Web端，按鈕尺寸沒有固定標準。不過，一般來講，按鈕的高度常在32px-48px之間，寬度可根據內容靈活設置，但最好不要小于48px，這樣方便用戶用手指（觸屏設備）或鼠標點擊。
像一個簡單的“提交”按鈕，寬度可能是80px左右，高度是36px左右。這些尺寸能保證按鈕在視覺上比較舒適，易于交互。
麻省理工觸摸實驗室通過對人類指尖的研究，得出了關于界面按鈕大小設計的一些重要參考數據。
對于食指，平均寬度在16至20毫米，指腹觸摸區域尺寸為10至14毫米，指尖觸摸區域尺寸為8至10毫米；對于拇指，平均寬度為25毫米，指腹觸摸區域尺寸為12至16毫米，指尖觸摸區域尺寸為10至12毫米。
由此建議，食指觸摸的按鈕應保證在8毫米×8毫米以上，且控件間距應保證至少在1毫米以上；拇指觸摸的按鈕應保證在10毫米×10毫米以上，且控件間距應保證至少在2毫米以上。
該研究還指出，大多數用戶可以舒適可靠地擊中 10 毫米×10 毫米的觸摸目標 。
從按鈕圖標尺寸來看，根據蘋果官方設計指南，iOS中按鈕圖標有不同標準。小圖標尺寸為24×24pt，用于小型按鈕，如導航；標準圖標為32×32pt，用于普通按鈕，適合次要操作按鈕；大圖標是 40×40pt，用于寬大按鈕；特大圖標則為48×48pt，用于特大按鈕。
不同設備屏幕尺寸也有對應的建議圖標尺寸，如iPhoneSE建議24pt，iPhone14及iPhone14Pro建議32pt，iPad 建議40pt 。
在最小觸摸區域方面，iOS規定最小觸碰區域為44×44pt，這種尺寸一般適合主要操作按鈕。
UI按鈕的組成主要包括以下幾個關鍵元素：
圓角的大小決定了按鈕的氣質和視覺感受。小圓角常用于常規按鈕，如4px圓角；圓角越大，越有親和力，人眼往往不喜歡非常鋒利的物體，所以通常不建議使用0圓角的按鈕樣式，根據我大量的體驗，我發現市面上確實也是帶圓角的按鈕居多些。
圖標用于直觀表達按鈕的功能或狀態，如加載中、編輯等。圖標的設計應與整體頁面風格一致，并確保其含義明確易懂。
內邊距能夠擴大按鈕的可點擊范圍，幫助用戶更容易點擊按鈕。一個好的設計間距是把按鈕的水平內邊距設計成垂直內邊距的2倍。當然，你也可以根據你設計的實際情況做適當調整，規矩不是死的。
容器是包含所有視覺和交互元素的框架，包括顏色、紋理、文案和圖標等。容器的設計應支持按鈕的功能和美觀。
邊框定義了按鈕的邊界，常用于次級按鈕的描邊。邊框的粗細和樣式可以影響按鈕的視覺層次和交互效果。
文案是按鈕上的文字描述，用于表達按鈕的含義和功能。文案應簡潔明了，易于理解，同時具有一定的吸引力。
背景用于表達按鈕的狀態和品牌氣質。不同的背景顏色和紋理可以增強按鈕的視覺吸引力和品牌識別度。
投影用于凸顯層級關系，幫助用戶更好地區分不同的按鈕。投影通常與紋理、漸變色結合使用，以打造更好的視覺體驗。
佐糖首頁為了促進轉化，特意將“開通會員”的按鈕用投影凸顯處理，帶投影的按鈕明顯有向前走的感覺，比沒有投影的按鈕看起來更加顯眼。
小小投影在頁面中不僅起到增加空間感的作用，還起到了業務強調的作用，已經不僅僅是樣式的一個承載了。
這些元素共同作用，不僅提升了按鈕的功能性，還增強了其美觀性和用戶體驗。在設計UI按鈕時，應綜合考慮這些因素，以確保按鈕既美觀又實用。
Antdesign指出按鈕的作用是指導用戶采取你希望他們采取的行動，并幫助用戶防錯。
1.1 提交與確認
在表單填寫場景中，如用戶注冊、登錄、信息提交等，按鈕用于觸發提交或確認操作，將用戶輸入的信息發送給系統進行處理。
1.2 執行功能
在各類軟件中，按鈕是執行具體功能的主要方式，如在圖像編輯軟件中，“裁剪”“旋轉”“調整顏色”等按鈕，可讓用戶快速實現相應功能。
2.1 頁面切換
在多頁面的應用或網站中，按鈕可實現頁面之間的切換，如網站的首頁、產品頁、關于我們頁等，通過點擊按鈕，用戶能方便地瀏覽不同頁面內容。
2.2 菜單展開與收起
用于控制導航菜單的展開與收起，節省頁面空間，提高界面的整潔度和易用性。
3.1 顯示與隱藏
可用于控制某些元素的顯示與隱藏，如在電商網站中，點擊“查看更多商品詳情”按鈕，可展開隱藏的詳細商品信息。
飛書中的這個小小按鈕，它承載著隱藏折疊的功能，讓頁面看起來更加的簡潔有序。
3.2 啟用與禁用
在某些功能需要滿足一定條件才能使用時，按鈕可用于表示該功能的啟用或禁用狀態，如在未填寫完必填項時，“提交”按鈕處于禁用狀態，無法點擊。
中國移動云盤的登錄頁就是這么設計的，當前面信息沒有填完，后面的登錄按鈕始終是禁用的狀態，只有當信息填完，且填寫正確，按鈕才會亮起。
4.1 操作反饋
當用戶點擊按鈕后，按鈕會通過顏色、形狀、動畫等方式的改變，向用戶提供操作反饋，告知用戶系統已接收到操作指令。
4.2 引導提示
在一些復雜操作或新功能引導時，按鈕可作為引導提示的一部分，告知用戶下一步操作，如在新手引導流程中，突出顯示“下一步”按鈕。
心島日志的新手指引中就是這樣設計的，按鈕在其中起了很重要的指引作用。
5.1 數據篩選
在數據展示界面，如表格、列表等，按鈕可用于對數據進行篩選，方便用戶快速找到所需信息。
釘釘打卡這個界面中，多虧有了日、周、月的篩選按鈕，才讓數據篩選變得如此便捷。
5.2 數據排序
通過點擊“按時間排序”“按銷量排序”等按鈕，用戶可對數據進行重新排序，以滿足不同的查看需求。
很多產品的按鈕顏色都是與它的品牌色高度一致的，它既是按鈕，又是品牌色的傳遞大使。
網易云音樂的按鈕色用的網易紅，釘釘打卡的按鈕用的騰訊藍，都是在傳遞自己的品牌色，同時也是在進行指令的傳達。
在日常設計中，頁面無疑少不了按鈕位置的擺放，那么按鈕放置在什么樣的位置合適，這也是一個值得深思的問題，也許我們已經司空見慣了按鈕的位置擺放，但是我們知道它為什么要放這里或者那里嗎？下面我們來看下這幾種設計模型，讓它告訴我們，為什么，在特定場景下，按鈕位置要這么放？
1.1 原理含義
Z型視覺模型是一種描述用戶在瀏覽網頁或界面時視覺軌跡的理論模型。
它的布局遵循字母Z的形狀，指用戶的瀏覽路線——從左到右，從上到下的的視覺運動軌跡。
首先，人們從左上角到右上角進行掃描，形成一條水平線；第二步，向頁面的左下側，創建一條對角線；最后，再次向右轉，形成第二條水平線，當觀眾的視角以這種模式移動時，它形成一個虛構的“Z”字形。
1.2 視覺區域
1.3 應用案例
在電商網站中，商家會把熱門推薦或主打產品放在區域1和區域3，以吸引用戶的注意力。
在產品詳情頁面，將“加入購物車”“立即購買”等按鈕放在區域4，方便用戶在瀏覽完產品信息后進行購買操作。
天貓商城就是這樣做的，把網站的LOGO圖放置在左上角（區域1），把產品圖放置在左下角（區域3），最后在用戶瀏覽了全部頁面之后，在右下角（區域4）放置購買按鈕，引導用戶下單。
在這個帶有銷售場景的頁面設計中，購買按鈕放置在右下角符合用戶瀏覽習慣，也符合Z型視覺模型。
在B端應用軟件中，可能運用的功能比較多，按鈕也比較多，通過大量分析和觀察發現，它們大部分喜歡把按鈕放置在每次視覺運動線的起點或者終點的位置。
騰訊云是這樣處理的，中國移動網盤是這么處理的，看似巧合，其實也有它合情合理的一面，因為每一個動作的開始和結束都會更加的引人注意。
這就跟人們每次入職一個新公司一樣，剛進去時會特別賣力、小心，后面時間長了，也就形成免疫，習慣了，但是當最后要離開這家公司的時候，最后心情又會特別復雜，回想起自己在這里成長的歲月，就會心生很多的感慨，也會特別的記憶深刻。
也許這也是為啥很多頁面設計，喜歡把重要的按鈕放置在每次視覺運動線的起點或者終點吧！
按鈕的顏色在界面中不僅起到視覺點綴的作用，同時也是按鈕狀態的一種呈現和反饋。
按鈕顏色不是千篇一律的品牌色，它也經常需要根據業務場景的不同，更換顏色，比方說紅色-刪除按鈕、黃色-告警按鈕、綠色-通過按鈕、藍色-更多按鈕，不同的按鈕在顏色設計上都會有所區別。
此外，在設計按鈕顏色時，有一些基本規范。
首先，從功能角度看，主要按鈕通常會使用比較突出的顏色，像鮮艷的藍色，這是因為藍色醒目又不會過于刺眼，能引導用戶去點擊。次要按鈕（如取消、返回）的顏色會稍淡一些，比如淺灰色，讓用戶知道這是相對次要的操作。
從顏色搭配來說，按鈕顏色要和背景色有足夠的對比度，方便用戶識別。比如背景是白色，深色按鈕就會很清晰；如果背景顏色較深，那按鈕可以用淺色或者高亮度顏色。
另外，顏色的選擇也要考慮產品的風格和使用場景。例如，在一個游戲軟件里可能會使用更活潑的色彩，像紅色、橙色；而在辦公軟件里，通常會采用比較沉穩的色調，如藍色、黑色。
1.1 視覺清晰
按鈕應采用用戶熟悉的設計樣式，如帶有矩形或圓角矩形邊框的填充按鈕、帶有陰影的填充按鈕、幽靈按鈕等。
1.2 文字明確
按鈕上的標簽應準確、簡明直接地介紹其功能，避免使用過于通用或模糊的表述，讓用戶清楚點擊后會發生什么。
2.1 位置合理
將按鈕放在用戶期望看到的地方，如遵循F型或古騰堡原則，在頁面的視覺焦點區域放置重要按鈕。
2.2 尺寸適宜
按鈕大小應反映其在屏幕上的優先級，更大的按鈕用于更重要的操作，同時要適配用戶的手指，避免誤觸。
3.1順序得當、邏輯一致
按鈕的順序應反映用戶與界面之間交互的邏輯，如“上一步”按鈕通常在左邊，“下一步”按鈕在右邊。
3.2 狀態樣式一致
按鈕應具有一致的狀態樣式，如默認、按下、聚焦、禁用等，一個產品中，這些狀態樣式要高度的一致，不能在這個頁面按鈕樣式是這樣的，跑到另一個頁面，樣式又發生了改變。
著名的格式塔心理學也是這么認為的，它強調人對事物的理解是基于整體的、有組織結構的，如果按鈕設計做到一致性，對提高產品的整體性是有非常大的改進的。
4.1 避免過多
避免在一個界面中使用過多的按鈕，以免讓用戶感到無所適從，應優先考慮最重要的操作。
4.2 功能單一
每個按鈕應盡量只執行一個主要功能，避免一個按鈕承載過多復雜的操作，降低用戶的認知成本。
希克定律指出，人的決策時間會隨著選擇的增加而增加。在按鈕設計中，簡潔的設計能減少用戶的選擇和認知負擔，使用戶能更快地做出決策并執行操作。
5.1 風格統一
按鈕的設計風格應與整個UI界面的風格保持一致，包括顏色、形狀、字體等方面，形成統一的視覺體系。
5.2 對比協調
在保持整體協調的基礎上，通過對比突出重要按鈕，如使用高對比度的顏色、較大的尺寸等，吸引用戶的注意力。
情感化設計理論強調設計應該注重用戶的情感體驗。美觀的按鈕設計能夠傳遞積極的情感信息，增強用戶和產品的情感連接。
奧斯卡·王爾德說過：“習慣一旦養成，便很難改變。”
所以我們在設計按鈕的時候，一定要符合人性的習慣，而不是試圖改變人們的習慣。
帶有分組的按鈕擺放，讓人看起來總是更加的有序，也更利于用戶進行操作，面對同類型的功能操作點無需跳躍著去尋找，能很快在相似功能操作區域找到。
360的分組意識很強烈，三個不同區域的圖標按鈕樣式都做了明顯的區分，讓界面看起來更加有序，操作起來也更加的便捷。
切不可一行按鈕中出現多個高強調的按鈕，Antdesign對這個也做了詮釋，會對用戶的行為進行錯誤的引導，也不利于聚焦。
通義這個頁面雖然有多個選中的按鈕，但是沒有全部用高強調的按鈕，只有強推薦的操作“開始錄音”才用了強按鈕。
其它通過相對淺的顏色做了弱按鈕選中處理，視覺上主次分明，信息主次表達上也清晰可見。
當一個按鈕同時兼顧兩個交互動作的時候，一定要區分設計，不能赤裸裸的展示在一個按鈕中，而不做任何區分。
具有返回意義的按鈕，應該放在左側，暗示其方向是回到之前，例如上一步。
簡短的文字更易被用戶閱讀和記住，在一個按鈕上最多不超過5個文字，重要的按鈕一般使用2~4個字。
? 用純灰色文字的弱化按鈕
? 用灰色邊框＋灰色文字的弱化按鈕
? 用顏色邊框+顏色文字的弱化按鈕
? 用灰底+灰色文字的弱化按鈕
? 用淺色底+顏色文字的弱化按鈕
? 用純顏色的弱化按鈕
通過本篇文章的探討，我們深入了解了B端按鈕設計的九大核心要素。
從按鈕的基本定義到Antdesign的分類，再到尺寸、構成、作用、位置和顏色等細節，每一部分都是提升用戶體驗的關鍵。
按鈕設計不僅關乎美觀，更影響著用戶的操作效率和滿意度。在UI界面中，遵循設計原則和注意事項，確保按鈕既實用又具有吸引力，是每位設計師的職責。
希望本文能為設計師們提供有價值的參考，激發更多創新靈感，共同推動B端產品的交互設計向更高水平發展。
轉載：人人都是產品經理
蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
轉載：優設
蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
藍藍設計的小編 http://www.payeee.cn