一、配置密碼顯示 / 隱藏切換功能

二、設置規范無障礙專屬標簽

三、前置展示密碼設置規則

1. Adobe：采用復選框清單式校驗，滿足一條規則對應條目自動變綠、打上勾選標記，實時可視化校驗；
2. Dropbox：以靜態列表完整羅列密碼要求，引導用戶逐條對照輸入。

四、實時密碼強度可視化校驗

1. 色彩進度條：以紅（弱）→黃（中）→綠（強）漸變配色，直觀區分密碼安全等級；
2. 規則清單逐項核驗：逐條標注大小寫字母、數字、特殊字符、位數等要求，完成即標記，清晰明了。

五、預留清晰的忘記密碼找回路徑

密碼框核心設計原則總結

1. 顯隱切換：提升密碼輸入準確率，精簡表單流程；
2. 規范標簽：適配無障礙訪問，避免用戶認知困惑；
3. 預顯規則：前置告知要求，規避重復操作失誤；
4. 實時校驗：可視化強度反饋，提升輸入設置效率；
5. 便捷找回：完善賬號恢復路徑，降低用戶使用門檻。

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

一、背景概述

插圖的使用已有 10,000 年的歷史。最早的圖畫之一是西班牙發現的手部輪廓圖，距今已有 66,000 多年歷史。隨著互聯網的出現，大約在 1997 年，插圖的使用逐漸增多，谷歌的每日涂鴉和紅牛能量飲料就是其中的典型例子，包括國內的百度，它們都在將具有特殊意義的插圖融入產品中。

在過去插圖通常使用鉛筆、粉筆、鋼筆、蝕刻畫和顏料完成，但現在經過技術的發展我們可以通過更智能的方式來呈現插圖；

一個好的插圖還可以更好地生動地傳達信息，我們如何確定最合適的插圖風格？插圖怎么才能體現品牌感？怎么能引起用戶群體的共鳴？對于內容，哪種類型的插圖最能強調產品特性，本篇內容分享了相關的案例，并解析如何針對不同用戶群體確定產品插圖風格；

1、當代產品設計中插圖的戰略價值

品牌差異化

以互聯網產品為例，現在市場上隨便拿出來個產品都會有一堆競品出現，那如何在眾多產品中體現自己產品的特性呢，除了功能層的差距外，無非就是“看和用”這個方面了，我們以看為例，像Ant Design的「科技溫度」風格、Discord的「夜光貼紙」風格，都展現了產品的個性化，甚至說從插圖風格就能get到產品是做什么行業的；

信息傳達

當情況挺復雜的時候，要是全靠大段大段的文字去講清楚，用戶可能得費不少勁才能弄明白。這時候，要是有插圖來幫忙，往往就能直接把意思給展現出來，讓用戶能更快地抓住信息的核心意思，例如醫療類APP用插圖替代專業術語；

情感化連接量化

好的插圖不僅起到美化視覺信息傳達的作用，也能夠對業務起到數據方面的提升，例如多鄰國的插圖表情，他們在2023年的調研數據上顯示ip系統提升用戶學習時長28%，Headspace冥想插圖動效減少用戶焦慮指數；

二、如何設計出好的插圖

2.1 受眾群體

不同的群體對于認知和喜好不同，首先就要明確是給誰做，每個產品都有自己用戶畫像，拿到用戶畫像去進行拆解設計目標，例如年齡在18-25歲，這就決定了設計風格偏年輕化，女性用戶群體占比70%，決定了色系不能使用過多的冷色系（產品主色如果不是按照群體來的，那當我沒說），在例如是一線還是二線三線，職業分布如何，這些拆解出來后，方向不就確定了嗎，無非就是通過受眾群體做減法，減少無用的腦暴；

2.2 設計原則體系

搭建插圖系統和設計規范流程是一致的，都需要在最基礎的設計原則框架下完成，否則就脫離了基本的體驗；

信息傳達的精準性

• 視覺降噪原則：構圖簡單，突出核心表達信息，避免過渡裝飾干擾用戶

• 語言符號化：使用行業共識的符號做為基礎形象進行設計，降低認知成本以及適配國際化，例如網絡中斷使用wifi、球形網絡；

情感共鳴的層次化

• 場景關聯：除了基礎的插圖，在特定場景下的插圖也要預判用戶在當前場景下的情緒變化，通過插圖來提升用戶情緒峰值，例如社區產品中，用戶成功發布一個帖子，給用戶反饋的插圖應當是開心、活躍讓用戶感受到產品的情緒價值；

• 動態情感曲線：在新手引導中通過每一步的交互流程來變化插圖表達的情緒，例如開始引導時突出表達信息，在一個流程結束時強化氛圍鼓勵用戶，用戶情緒進度期待→奮斗→高昂，促進用戶進一步操作；

品牌基因滲透

• 視覺原子構建：提取品牌色彩、標志性符號，形成基礎的插圖基因庫；

• 品牌故事元素貫穿全場景，例如茶顏悅色將古風和現代插圖風格結合，創造了獨特的品牌調性，并且每個插圖場景都在傳達品牌故事；

適配原則

• 多端一致性：能夠三端自適應適配尺寸，在小尺寸屏幕下插圖的識別性是否會出現問題；

• 擴展性：在各大節日時插圖是否能夠結合當前節日擴展，例如春節時插圖是否可以添加燈籠煙花相關元素；

2.3 風格系統構建

風格定位

插圖風格系統是品牌視覺語言的延伸，需通過基因提煉-規則制定-動態迭代的三層框架實現規模化應用；提到喜茶能想到的是描邊黑白風格插圖，茶顏悅色就能想到古風，而提到飛書我們就能想到極簡具有規則的形狀插圖，這就是通過插圖風格提升用戶對產品認知；

風格系統四個緯度

前面每一步的分析都是為執行輔助

三、插圖應用場景

3.1 核心功能

通過視覺表達降低用戶認知負荷，引導用戶關注或操作核心功能；

新手引導

這個比較常見，很多產品在新功能或者復雜功能的時候會建立新手引導的流程，這時候使用單一的箭頭引導會比較單一，就需要添加一些插圖做為情緒化引導，提升用戶趣味性；

狀態可視化

在一些上傳、加載的場景其實也可以融入插圖來緩沖用戶焦慮，現在大多產品都是使用比較簡單的加載方式，實際上可以將品牌插圖融入進去；

3.2 品牌價值傳達層

將品牌DNA轉化為可感知的視覺敘事，建立情感化認知錨點

超級符號ip滲透

在登錄頁/加載頁/404頁等全鏈路重復品牌標志性元素，提升用戶對品牌的記憶；

價值觀場景化表達

用插圖隱喻傳遞品牌主張（如環保產品用樹木生長插圖替代口號式文案）

節日儀式感表達

在特殊節日疊加一些裝飾元素，提升儀式感，上面有提到融入節日元素；

3.3 用戶體驗優化層

解決體驗斷點，通過情感化設計提升用戶容忍度與愉悅感

負向場景安撫設計

出現bug的頁面通過插圖傳遞「可控感」，用修復工具插圖+明確解決步驟緩解用戶焦慮；

降低學習成本

在新功能上線時或者改版功能時，用插圖對比新舊流程差異，這個主要在b端場景使用會比較多

情感峰值制造

在用戶完成某項任務或完成某個階段流程時給用戶反饋出高成就感的插圖，例如keep的成就解鎖，學習軟件種每日學習打卡成功等；

四、案例分析

分析三個不同行業的插圖，來看看他們的插圖差異化

4.1 金融類APP的信任感構建

首先看看金融類產品如何在專業與用戶情感傳遞之間進行平衡

符號系統化

顏色方面圍繞穩重復合色（深藍+淺金），避免高飽和色彩帶來的廉價感；

場景克制表達

僅在低風險場景（如教育科普頁）使用輕度擬人化角色，而核心功能涉及到數據方面的則使用抽象的數據的可視化插圖；

文化兼容

在出海的一些國家涉及到文化沖突，例如在中東區域就刪除了動物形象用植物和建筑符號代替；

4.2 社交產品的年輕化表達

小紅書通過潮流涂鴉的風格建立z時代圈層共鳴，為用戶提供固定的模板，降低用戶創作成本，提升產品的品牌主張，同時能夠營造出社區統一的氛圍感。

視覺特點

以線稿為主，為用戶提供自由創意的涂鴉玩法。

五、未來趨勢

實時渲染的個性化插圖

動態生成：根據實時數據改變插圖元素，如不同的天氣、心率的高低、運動的步數等等；

天氣軟件中可以根據不同的天氣變化背景，當然這個目前已經廣泛應用了，但未來也是不變的一個趨勢；

AI效率性插圖

可通過ai流程來制作統一的插圖風格進行應用，并且風格的局限性相較于之前也更靈活了，在前幾年只能通過mj喂圖抽卡來生成統一的插圖，并且時間成本非常高；

在前兩年只能通過訓練大模型的方式訓練具有產品特點的模型，并且訓練周期非常長，配置要求高，隨著現在的技術更新，線上出現了很多訓練模型的方式，不在依賴本地配置，通過線上訓練的lora模型，內存比較小也方便調用，時間上相對之前大大提高；

一、全文核心速覽

1. 開關（Switch）：單個獨立功能開 / 關二元切換，操作立即生效，只適配單獨設置項。
2. 復選框（Checkbox）：一組關聯選項支持多選、可全不選，擁有全選、半選交互狀態。
3. 單選按鈕（Radio）：一組選項互斥唯一選擇，有且只能選一個，選新自動取消舊選項。
4. 選型原則：先看使用場景、再定語義邏輯，不憑顏值隨意替換組件。

二、開關（Switch）：單功能即時開 / 關

1. 核心組成結構

• 軌道（背景）：手柄滑動路徑，用色彩區分開啟 / 關閉狀態，直觀展示激活與否；
• 手柄：可點擊、拖動的交互主體，可搭配對勾、圓圈等極簡輔助圖標；
• 輔助圖標（可選）：強化狀態識別，僅用二元對立、表意清晰的圖標。

2. 設計與交互規范

1. 輔助圖標禁用模糊無正反屬性的樣式（如月亮、編輯圖標），避免用戶無法識別狀態；
2. 交互邏輯：點擊切換立即生效，無需額外確認，可通過手柄微動效增加操作反饋；
3. 文案搭配：必須外置功能標簽，文字不內嵌在開關內，精簡表述、降低用戶識別成本。

3. 適用場景

三、復選框（Checkbox）：關聯選項自由多選

1. 核心組成結構

2. 設計與交互規范

1. 長列表可增設全選父復選框，遵循行業標準交互：
   • 父框全選 → 所有子項自動勾選；
   • 父框取消 → 所有子項自動取消；
   • 子項部分勾選 → 父框顯示半選狀態，點擊半選父框可一鍵全選。
    
2. 一組關聯多選項，優先用復選框，不堆砌獨立開關：既體現選項關聯性，又節省頁面空間、排版更整潔。

3. 適用場景

四、單選按鈕（Radio Button）：組內互斥唯一單選

1. 核心組成結構

2. 設計與交互規范

1. 堅守互斥單選邏輯，禁止修改為多選模式，不做布局重疊，避免顛覆用戶固有認知；
2. 選項過多、頁面空間有限時，可用下拉菜單替代；但選項較少時優先單選按鈕，無需展開、一眼看全，交互成本更低；
3. 排版優先垂直排列，不建議水平排布：圖標與標簽對應更清晰、可讀性更強，適配響應式布局更穩定，避免頁面擁擠混亂。

3. 適用場景

五、三者快速選型對照表

六、高頻誤區答疑（設計師必避坑）

誤區 1：二元切換，能用單選按鈕代替開關嗎？

誤區 2：把單選按鈕改成多選，替代復選框？

誤區 3：多選場景，能用一堆開關代替復選框嗎？

1. 語義差異：開關代表獨立無關聯功能，復選框代表同組關聯選項，用開關表意模糊；
2. 視覺與效率：開關占用空間更大，列表排版雜亂，復選框更精簡整潔、交互效率更高；
3. 場景適配：服務條款、權限勾選等場景，復選框的文案搭配更貼合用戶選擇意圖。

七、總結

一、Veri 健康監測 App

• 亮點：極簡交互設計，用戶可通過攝像頭同步傳感器數據，一鍵開啟追蹤；提醒模塊用漸變光暈效果突出設置，視覺與功能高度統一。
• 參考價值：醫療健康類 App 如何平衡專業數據與用戶體驗，這套設計給出了優秀示范，適合健康監測、數據追蹤類產品參考。

二、加密貨幣交易平臺界面

1. 登錄與交易后臺：深紫底色搭配霓虹藍光效，登錄頁功能分區清晰，交易界面 K 線圖、訂單數據排版規整，色彩對比鮮明。
2. 資產儀表盤：采用霓虹粉綠配色，卡片式布局呈現質押收益、資產分布、交易數據，數據可視化直觀易懂，適配高頻交易場景。

參考價值：金融科技類產品的深色模式設計、數據呈現方式與交互邏輯，都有很高的借鑒意義。

三、ADSPACE 營銷 agency 官網

• 參考價值：企業官網如何通過色彩與排版傳遞品牌調性，這套設計為服務類品牌官網提供了清晰的參考方向。

 

視覺設計：科技與駕駛氛圍的融合

信息架構：駕駛場景優先的高效布局

交互體驗：安全優先的輕量化操作

設計總結

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

一、什么是幽靈按鈕

二、幽靈按鈕的核心優勢

1. 界面輕量化，降低視覺負擔

   

   工具欄、導航欄密集排布圖標 / 文字時，幽靈按鈕無冗余底色與邊框，保持界面簡潔清爽，避免視覺雜亂。
2. 擴大操作熱區，提升交互準確率

   

    
   解決純文字 / 圖標點擊區域過小、易誤觸的問題，設計階段明確熱區范圍，前端可直接落地，適配觸摸屏操作習慣。
3. 清晰視覺反饋，強化操作感知

   

    
   懸停 / 按下時邊框顯現，直觀展示實際可點擊范圍，比單純變色更醒目，讓用戶操作更有安全感。

三、幽靈按鈕的落地痛點

1. 設計成本與感知不對等

   

   視覺效果極簡，但需精細化調整邊框、間距，付出雙倍設計成本，易被誤解為 “工作量不足”。
2. 存量產品改造成本高
    
   替換現有圖標 / 文字鏈接為幽靈按鈕，需重構層級、間距結構，易影響頁面其他區域，不適合大幅改動框架。
3. 設計精度要求極高
    
   需單獨配置按鈕邊框，精準把控內邊距、組件間距，打破傳統對稱、對齊的設計邏輯，調試難度大。

四、幽靈按鈕的核心設計難點

1. 視覺對稱≠實際邊距對稱

   

    
   文字 + 圖標組合的按鈕，若默認邊距完全對稱，圖標側會顯空曠；需微調邊距，讓視覺平衡優先于數值對稱。
2. 視覺對齊≠實際位置對齊

   

    
   文字與圖標看似對齊，懸停顯示邊框后會出現偏移；需刻意調整位置，保證默認態整潔、交互態規整。

五、應用現狀與大廠案例

蘭亭妙微UI設計公司，本次分享主要的工具也都是 AI 相關，有工業和產品 3D 設計 AI 平臺 3flow，語音轉社交媒體圖片的 AI APP，面向 AI 創作者和開發者的在線社區 B150，專業的 AI 圖像生成與編輯平臺 APImage，Win95 風格 AI 創作者交流社區，以及榮獲黑客松大獎的 AI 編程配置的超強 Skill。

一、工業和產品 3D 設計 AI 平臺 3flow

鏈接：https://3flow-ai.com/

3Flow AI 是一個面向產品設計的 AI 工具，可以在瀏覽器里直接使用。它的核心能力是把「想法」快速變成設計圖，甚至直接生成 3D 模型，幫助設計師從靈感到初步原型的過程大幅提速。相比傳統設計軟件，它更偏向創意階段，讓你幾秒鐘就能看到一個產品雛形。

在功能方面，3Flow AI 是非常突出的，生成速度非常快（幾秒內出圖）、支持從 2D 圖像一鍵轉成 3D 模型、可以對局部設計做修改（比如換材質、顏色），以及自動生成多種設計變體用于對比。整體上，它把「畫圖 + 建模 + 修改」的流程整合在一個工具里，減少反復切換軟件的成本。

3Flow AI 徹底降低了 3D 和工業設計的門檻，你不需要會復雜的 CAD 或 3D 建模，也能快速把想法變成可視化甚至可打印的模型。對于做產品、內容創作或創業的用戶來說，它可以顯著縮短從創意到驗證的時間，讓「想一個東西并做出來」變得更容易、更便宜。

二、語音轉社交媒體圖片的 AI APP

鏈接：https://thereframe.app/en

Reframe 能將你的語音筆記轉換成專業的 Instagram / LinkedIn / Facebook / X 上展示的輪播圖，當然這可以發到微博/小紅書/小綠書/朋友圈。你只需說出你的想法——AI 會自動構建框架、設計每個幻燈片，并保留你真實的語氣。無需任何設計技能。

簡單來說，Reframe 是一款專為創作者設計的 AI 社交媒體排版應用，它的核心理念是將用戶的「語音」直接轉化為具有專業設計感的輪播圖和文字貼文，幫助創作者在沒有專業團隊和設計師的情況下快速制作內容。

Reframe 核心優勢是「語音轉圖文」與「對話式編輯」。你只需錄制幾十秒的語音表達想法，內置 AI 就會自動編寫出高吸引力的文案，并生成帶排版的輪播圖草稿。你可以通過與 AI 聊天來微調文字內容，還能自由套用精美的預設模板、修改字體和顏色，最后支持一鍵導出為圖片或 PDF。

Reframe 極大降低了內容創作的門檻與時間成本，無論是在通勤路上還是靈光一現時，只需動動嘴就能把零碎的靈感瞬間變成高質量的社交傳播素材。它完美解救了不擅長寫文案和做排版的新手，讓每個人都能輕松像專業博主一樣高效產出爆款圖文，提升個人影響力。

三、面向 AI 創作者和開發者的在線社區

鏈接：https://b150.ai/

B150 是一款專為 AI 開發者、創作者和創業者打造的「專業社交網絡」與社區平臺。它致力于成為那些利用 AI 技術進行編程、設計、影視制作、游戲開發等領域的「實干家」們的聚集地，幫助他們將大膽的想法轉化為真實落地的項目。

B150 提供了以項目為驅動的在線社交體驗，AI 創作者不僅可以在信息流中展示自己的作品、獲取早期種子用戶和真實的反饋，還能在這里尋找志同道合的合作者。此外，它集成了 AI 工具及資源探索、AI 人才與工作機會招聘看板，以及專屬的工具折扣市場，全方位覆蓋從產品構思到發布落地的各種需求。

對于普通的 AI 愛好者和創作者而言，B150 提供了一個高濃度的專業學習和互助圈層。它打破了傳統社交媒體的雜音，讓你能專注于看別人是如何利用最新的 AI 工具來解決實際問題的。不僅能幫你少走彎路，還能讓你在發布自己的「副業」或項目時，快速找到第一批支持者，真正將「想法」變成「事業」。

四、專業的 AI 圖像生成與編輯平臺 APImage

鏈接：https://apimage.org/

APImage 是一款專業的 AI 圖像生成與編輯平臺，專為電商團隊、企業和創作者打造。它能夠將簡單的文字提示迅速轉化為高質量、可直接用于商業生產的視覺素材，如產品展示圖、生活方式插圖或品牌創意海報，只需幾秒鐘即可完成。

APImage 的核心優勢在于強大的「視覺一致性控制」及全面的編輯工具，不僅具備文本生圖、一鍵摳圖和局部重繪功能，最亮眼的是允許用戶建立專屬資產庫。這意味著您可以在不同場景中反復生成擁有完全相同人物面孔、產品細節或特定背景的圖片。此外，它還支持 API 接入和各類自動化工作流整合。

對普通用戶、電商小賣家和自媒體人而言，APImage 徹底打破了專業攝影和設計的門檻。無需租借影棚或聘請專業模特，僅靠打字就能穩定地產出成套的、風格統一的高端商業大片，并且它就是為這樣的場景而創造的。APImage 解決了傳統 AI 繪圖「每次結果都隨機、難以連貫」的痛點，讓個人也能輕松擁有專業級的視覺生產力。

五、Win95 風格 AI 創作者交流社區

鏈接：https://www.ideaboard95.com/

IdeaBoard95 是一款主打復古風格的公開創意靈感看板網站。它的界面被精心設計成了經典的 Windows 95 操作系統風格，為獨立開發者、創作者和普通用戶提供了一個展示產品想法、尋找靈感以及進行社區交流的公共空間。

IdeaBoard95 將復古視覺與極簡交互結合，用戶可以使用 Google 賬號快捷登錄，在看板上發布有關 App、網站或 AI 的產品點子，也可以為別人的好主意點贊投票。盡管外表懷舊，但它底層具備優秀的現代用戶體驗，在電腦和手機端都能清晰瀏覽，并支持通過標簽快速篩選感興趣的內容。

IdeaBoard95 提供了一個輕量化、充滿趣味的「想法展示區」，它避免了零散的靈感在復雜的筆記工具中吃灰，并用這種沒有壓力的懷舊方式降低了分享的門檻。這讓每個人都能輕松地把腦海中的奇思妙想貼在「公屏」上，純粹地碰撞思維火花并驗證點子的可行性。

六、榮獲黑客松大獎的 AI 編程配置 Skill

鏈接：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.rhtd16ji.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。

蘭亭妙微UI設計公司與大家一起學習，人類的美術創作經歷了從紙面的二維走向三維、從“模仿自然”到遵從主觀意識自由表達的歷程，人機界面設計也經歷了擬物、扁平以及更多的設計風格的迭代演化。是什么推動著藝術家和設計師們不斷探索規則、學習規則，進而挑戰規則？在拆解手腳架的過程中，我們將愈加貼近創作的本質。

一、全文速覽圖

二、設計資訊

1. 在 Figma 社區推出 Figma Weave 工作流模板

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

網址： https://app.weavy.ai/

網址： https://www.figma.com/release-notes/

三、產品推薦

1. 在線矢量路徑工具

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

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

網址： https://iso.alasdairmonk.com/

網址： https://x.com/almonk/status/2042127913173057659

2. Liaison - AI 編程定位、網頁樣式編輯與批注

在任意網頁上實現類似 Figma 的設計體驗，調整元素樣式、添加評論，并導出結構化 Prompt 給 AI 開發與協作。

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

瀏覽器插件： 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 復刻，完全免費開源！ 同時支持 Mac/Windows/Linux。 測試了下，比 Screen Studio 還輕便順滑

網址： https://recordly.dev/

網址： https://github.com/webadderall/Recordly

4. 開源圖標庫

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

網站： https://www.mingcute.com/

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

5. 圖文混排的長文轉小紅書圖片生成器

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

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

網址： https://reflow.fehey.com/

6. 標尺小工具

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

網址： https://x.com/Ibelick/status/2042508446671499405

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

四、設計素材

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

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

網址： https://www.freefaces.gallery/

網址： https://fontshare.com/

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

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

網址： https://magecdn.com/tools/svg-loaders

3. UI/UX 設計師 Vibe Coding 指南

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

網址： https://vibecodingfang.netlify.app/#

五、隨便看看

1. 設計欣賞

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

網址： https://x.com/AdityaSur11/status/2038881480898756695

網址： https://audio.snvshal.workers.dev/

2. 沉浸式閱讀探索

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

網址： https://theme-switch.pages.dev/

轉載：優設

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

一、色彩基礎核心概念

1. 色彩原理

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

2. 色彩三要素

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

   

3. 常用色彩模型

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

  

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

  

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

  

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

二、定義色彩：必須掌握的關鍵要點

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

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

2. 色彩偏好：人群差異規律

（1）年齡偏好

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

（2）性別偏好

• 男性：傾向穩重明亮的冷色調（藍、綠）。
• 女性：傳統偏好紅、粉，當代審美多元，藍、紫也廣受喜愛。

（3）地域偏好

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

3. 色彩心理語義

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

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

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

三、色彩驅動轉化：實戰成功案例

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

   

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

   

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

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

1. 色彩升級的核心原因

• 業務戰略更新，品牌理念迭代。
• 產品定位、目標用戶群體變化。
• 用戶審美偏好升級，體驗需要優化。

2. 色彩升級落地方法

（1）前期分析

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

（2）理性色彩體系搭建

（3）應用落地規則

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

（4）科學驗證手段

五、UI 設計中色彩的核心價值

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

轉載：優設

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