B端系統(tǒng)軟件中表單的應(yīng)用場(chǎng)景非常多，今天蘭亭妙微UI設(shè)計(jì)公司，就撈點(diǎn)干貨，說(shuō)說(shuō)B端產(chǎn)品表單如何設(shè)計(jì)，用戶體驗(yàn)會(huì)更好。

從標(biāo)題、輸入框、布局排版、數(shù)據(jù)展示四個(gè)方面，詳細(xì)介紹一下關(guān)于表單的體驗(yàn)設(shè)計(jì)，目錄如下：

一、標(biāo)簽是否加冒號(hào)

設(shè)計(jì)師A說(shuō)：不加冒號(hào)，用戶不在意，而且占空間…..

設(shè)計(jì)師B說(shuō)：要加冒號(hào)，加上可以更好的區(qū)分上下文，以及標(biāo)簽和輸入框的關(guān)系…..

以上A/B設(shè)計(jì)師說(shuō)的都有一定的道理，那到底加不加冒號(hào)呢？

遇到問(wèn)題咱就先調(diào)研一波，看一下Win、Mac系統(tǒng)中是否有無(wú)冒號(hào)。

Win系統(tǒng)：最新版本不加冒號(hào)。

Mac系統(tǒng)：最新版本設(shè)計(jì)偏向C端化，不加冒號(hào)，13.0.1之前版本有冒號(hào)。

是不是感覺(jué)主流的設(shè)計(jì)是不加冒號(hào)呀？

稍等一下…那在具體B端系統(tǒng)中是有怎樣的應(yīng)用場(chǎng)景呢？

以上場(chǎng)景中左右布局，單選/多選組件、標(biāo)題加內(nèi)容組件都不適合去掉冒號(hào)展示。

那到底加不加冒號(hào)呢？

可以先說(shuō)一下答案，加不加冒號(hào)對(duì)用戶無(wú)影響，《Web 表單設(shè)計(jì)·創(chuàng)建高可用性的網(wǎng)頁(yè)表單》中，卡羅琳·賈雷特做過(guò)大量測(cè)試，最終證明沒(méi)有一名用戶留意表單冒號(hào)是否出現(xiàn)。

因此，得出以下建議：

• 如果你希望系統(tǒng)重表單使用更多的業(yè)務(wù)場(chǎng)景和對(duì)齊方式，請(qǐng)使用冒號(hào)
• 如果你當(dāng)前已使用有冒號(hào)的表單，請(qǐng)保持使用冒號(hào)

如果你新建一個(gè)系統(tǒng)，使不使用冒號(hào)隨意一旦決定是否使用冒號(hào)，需要全部表單統(tǒng)一規(guī)則  

二、表單必填樣式

用戶填寫表單時(shí)，有必填項(xiàng)和選填項(xiàng)，如果表單中多數(shù)或全部是必填項(xiàng)，那是否還應(yīng)該對(duì)其標(biāo)記？

答案是肯定的，用戶遇到較多表單填寫項(xiàng)時(shí)，是需要通過(guò)必填標(biāo)記來(lái)評(píng)估工作量。下面就介紹一下具體標(biāo)記必填項(xiàng)的三種樣式。

① 頂部統(tǒng)一提示

填寫表單過(guò)長(zhǎng)或填寫表單被打斷（移動(dòng)端常見(jiàn)），就會(huì)增加用戶工作記憶和認(rèn)知負(fù)荷，完成任務(wù)更加困難，從而降低了用戶體驗(yàn)。

② 文字提示“必填”

有部分設(shè)計(jì)師認(rèn)為紅色“*”會(huì)增加視覺(jué)噪音，并且重復(fù)的紅色“*”會(huì)帶來(lái)一些認(rèn)知恐慌，便采用文字提示方式，但這種方式比較占用空間，文字內(nèi)容過(guò)長(zhǎng)，用戶壓力較大，用戶體驗(yàn)降低，不建議使用。

③ 紅色星號(hào)“*”必填提示

雖然有設(shè)計(jì)師認(rèn)為紅色“*”會(huì)增加視覺(jué)噪聲，帶來(lái)一些認(rèn)知恐慌，但紅色“*”在互聯(lián)網(wǎng)中很常見(jiàn)，用戶熟知其意，已形成固定的視覺(jué)語(yǔ)言，并且空間較小，能與標(biāo)簽文字足夠區(qū)分開(kāi)，相比之下采用紅色“*”必填提示是非常值得推薦使用。

但是還有一個(gè)問(wèn)題，就是紅色“*”的位置是在字段前還是字段后呢？

紅色“*”的具體位置有三種位置，如上圖做了詳細(xì)展示。

1. 標(biāo)題左側(cè)：比較常見(jiàn)，用戶打眼一看就能區(qū)分出必填項(xiàng)，推薦使用；
2. 標(biāo)題右側(cè)：比較常見(jiàn)，多配合無(wú)號(hào)碼使用；
3. 輸入框右側(cè)：現(xiàn)有系統(tǒng)較少使用，由于輸入框形式、長(zhǎng)度不統(tǒng)一，會(huì)導(dǎo)致難以瀏覽和判斷，不推薦。是否可標(biāo)記可選字段？

這不是強(qiáng)制性的，但標(biāo)記可選字段非必填，確實(shí)減輕了用戶思考，提升用戶體驗(yàn)。  

三、提示樣式

用戶最理想閱讀的標(biāo)題文字?jǐn)?shù)是7±2，當(dāng)標(biāo)題文字過(guò)長(zhǎng)，或不足對(duì)輸入項(xiàng)準(zhǔn)確說(shuō)明時(shí)，要給出對(duì)應(yīng)的提示文字，幫助用戶更好的輸入內(nèi)容，常見(jiàn)樣式如下。

這三種樣式是遞進(jìn)邏輯，根據(jù)不同的文字提示內(nèi)容和難度，選擇不同的提示樣式。其中對(duì)于第二種樣式中，圖標(biāo)提示的位置還有幾種方式，如下圖說(shuō)明。

四、小結(jié)

本文事無(wú)巨細(xì)的說(shuō)了一下表單中標(biāo)題樣式問(wèn)題，雖然很多是表單設(shè)計(jì)的一些較冷較小的內(nèi)容，但也需要設(shè)計(jì)師沉下心來(lái)，打磨細(xì)節(jié)之處。

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

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.payeee.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。

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

在上篇內(nèi)容中，我們分享了設(shè)計(jì)師如何通過(guò)建立信任、夯實(shí)底層能力，為跨行業(yè)成長(zhǎng)打下基礎(chǔ)。本篇將由蘭亭妙微設(shè)計(jì)公司結(jié)合多年項(xiàng)目實(shí)戰(zhàn)與團(tuán)隊(duì)培養(yǎng)經(jīng)驗(yàn)，深入講解知識(shí)管理如何成為設(shè)計(jì)師突破瓶頸、成為跨行業(yè)全能型人才的關(guān)鍵武器，幫你從 “執(zhí)行型設(shè)計(jì)師” 升級(jí)為 “策略型設(shè)計(jì)專家”。

蘭亭妙微設(shè)計(jì)公司深耕商業(yè) UI/UX 設(shè)計(jì)十余年，在智能電視、OTT 盒子、智慧大屏等項(xiàng)目中積累了大量實(shí)戰(zhàn)經(jīng)驗(yàn)。電視端 UI 與移動(dòng)端、PC 端設(shè)計(jì)邏輯差異顯著，核心是適配遙控交互、遠(yuǎn)距離觀看、暗光環(huán)境三大特性。本文結(jié)合真實(shí)項(xiàng)目復(fù)盤，整理出一套可直接落地的電視端 UI 設(shè)計(jì)基礎(chǔ)規(guī)范，幫你避開(kāi)常見(jiàn)誤區(qū)。

通知的本質(zhì)是價(jià)值傳遞而非注意力爭(zhēng)搶。設(shè)計(jì)得當(dāng)?shù)耐ㄖ艹蔀楦咝зN心的工具，濫用則會(huì)淪為干擾噪聲，引發(fā)用戶 “通知疲勞”。蘭亭妙微UI設(shè)計(jì)公司從認(rèn)知、分級(jí)、實(shí)踐、衡量四個(gè)維度，系統(tǒng)講解如何打造高打開(kāi)率、低反感度的通知體驗(yàn)。

一、理解通知的雙面性：先分清反饋類型

1. 確認(rèn)（Validation）：關(guān)聯(lián)特定情境，需用戶操作后觸發(fā)，必須處理
2. 通知（Notifications）：全局或關(guān)聯(lián)特定情境，系統(tǒng)觸發(fā)，可操作或自動(dòng)消失
3. 指示 / 提示（Indicators）：關(guān)聯(lián)特定情境，自動(dòng)顯示，無(wú)需用戶干預(yù)

通知的基礎(chǔ)分類

• 按觸達(dá)范圍
  • 應(yīng)用內(nèi)通知：彈窗、信息卡片、紅點(diǎn)，在界面內(nèi)展示
  • 應(yīng)用外通知：推送、短信、郵件、小組件，跨設(shè)備觸達(dá)
   
• 按內(nèi)容性質(zhì)
  • 信息性通知：日程提醒、新聞、狀態(tài)更新，僅傳遞信息
  • 行動(dòng)導(dǎo)向通知：支付確認(rèn)、好友申請(qǐng)、系統(tǒng)更新，引導(dǎo)用戶操作
   

二、通知的設(shè)計(jì)依據(jù)：按關(guān)注度分級(jí)

1. 高關(guān)注度通知（需立即響應(yīng)）

• 類型：安全警報(bào)、錯(cuò)誤提示、異常故障、關(guān)鍵操作確認(rèn)（刪除 / 購(gòu)買 / 覆蓋）
• 特征：緊急、需立即處理、涉及風(fēng)險(xiǎn)或核心功能
• 呈現(xiàn)：彈窗確認(rèn)、強(qiáng)提示、阻斷式交互

2. 中關(guān)注度通知（需知曉，無(wú)需立即處理）

• 類型：警告提示、操作反饋、成功消息、常規(guī)提醒
• 特征：非緊急、輔助用戶了解狀態(tài)、不阻斷操作
• 呈現(xiàn)：信息條、輕量提示、頁(yè)面說(shuō)明

3. 低關(guān)注度通知（僅需知曉，無(wú)行動(dòng)壓力）

• 類型：普通信息、紅點(diǎn)提示、狀態(tài)指示、空狀態(tài)說(shuō)明
• 特征：無(wú)時(shí)效性、不打擾、輕量化展示
• 呈現(xiàn)：角標(biāo)、文字提示、靜態(tài)狀態(tài)展示

三、通知體驗(yàn)設(shè)計(jì)實(shí)踐：4 個(gè)可落地方法

1. 新用戶初期：少而穩(wěn)，避免信息轟炸

• 策略：新用戶默認(rèn)低頻率通知，給用戶探索產(chǎn)品的空間
• 依據(jù)：Facebook 研究證實(shí)，減少通知量可提升滿意度與長(zhǎng)期使用率，短期流量下滑后，參與度會(huì)反超
• 做法：允許用戶后期自主調(diào)整頻率，漸進(jìn)式優(yōu)化通知數(shù)量

2. 全用戶周期：開(kāi)放個(gè)性化管理，賦予控制權(quán)

• 自主設(shè)置：允許用戶按關(guān)系、重要性劃分通知優(yōu)先級(jí)
• 內(nèi)容脫敏：參考 Android 設(shè)計(jì)，將鎖屏通知分為公開(kāi) / 不公開(kāi) / 私密，保護(hù)隱私
• 預(yù)設(shè)模式：提供勿擾、工作、睡眠等快捷模式，降低設(shè)置成本
• 打包推送：將零散通知合并為摘要，按用戶指定時(shí)間統(tǒng)一發(fā)送
• 智能適配：參考 Slack，根據(jù)頻道活躍度、用戶行為自動(dòng)調(diào)整通知級(jí)別

3. 新用戶引導(dǎo)：把通知設(shè)置納入上手流程

• 示例：Basecamp 提供 “24 小時(shí)接收”“僅工作時(shí)段接收” 選項(xiàng)
• 做法：主動(dòng)詢問(wèn)用戶靜音時(shí)段，支持自定義屏蔽夜間、周末、節(jié)假日通知
• 價(jià)值：適配全球化協(xié)作場(chǎng)景，避免跨時(shí)區(qū)打擾

4. 核心邏輯：在正確時(shí)間，給正確用戶發(fā)正確內(nèi)容

• 場(chǎng)景化推送：新用戶功能引導(dǎo)、實(shí)時(shí)狀態(tài)推送（外賣 / 賽事 / 物流）
• 分層提示：參考 Grammarly，用紅點(diǎn) + 分步提示降低認(rèn)知壓力
• 智能適配：用戶專注、旅行、低活躍時(shí)，自動(dòng)降低推送頻率
• 渠道切換：高頻通知從推送轉(zhuǎn)為郵件摘要，平衡觸達(dá)與侵入性

四、衡量通知有效性：4 個(gè)核心指標(biāo)

1. 打開(kāi)率：反映內(nèi)容相關(guān)性與推送時(shí)機(jī)
2. 轉(zhuǎn)化率：衡量行動(dòng)導(dǎo)向通知的引導(dǎo)效果
3. 屏蔽 / 退出率：直接體現(xiàn)通知過(guò)載或不相關(guān)程度
4. 參與度提升：對(duì)比接收與未接收通知用戶的產(chǎn)品活躍度
5. 行動(dòng)時(shí)間：警報(bào)類通知需快速響應(yīng)，體現(xiàn)緊急性匹配度

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.payeee.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。

一、保守派：保留表格形態(tài)，輕量化適配

1. 橫豎屏一鍵切換

• 優(yōu)勢(shì)：實(shí)現(xiàn)成本低，可全局復(fù)用，適配純閱讀場(chǎng)景
• 局限：僅支持查看，無(wú)法做數(shù)據(jù)編輯、批量操作

2. 固定表頭 + 滾動(dòng)指示燈

1. 數(shù)據(jù)對(duì)應(yīng)混亂：凍結(jié)首列表頭，橫向滾動(dòng)時(shí)始終可見(jiàn)關(guān)鍵字段
2. 屏效過(guò)低：適度縮小字體，提升信息密度
3. 滾動(dòng)無(wú)預(yù)期：添加滾動(dòng)指示燈，清晰提示當(dāng)前查看進(jìn)度

• 核心：像給表格加了可視化滾動(dòng)條，降低閱讀認(rèn)知成本

二、激進(jìn)派：重構(gòu)展示形式，貼合移動(dòng)端習(xí)慣

3. 關(guān)鍵字段收折展示

• 選字規(guī)則：通過(guò)「重要度 + 字段長(zhǎng)度」十字分析，優(yōu)先選短文本、高優(yōu)先級(jí)字段
• 適用場(chǎng)景：字段數(shù)量適中，用戶需快速識(shí)別數(shù)據(jù)的場(chǎng)景

4. 卡片式列表呈現(xiàn)

• 優(yōu)勢(shì)：符合移動(dòng)端視覺(jué)習(xí)慣，操作路徑更短，是 B 端移動(dòng)端最常用方案
• 適配場(chǎng)景：外勤人員快速查看、一鍵操作的業(yè)務(wù)（如銷售、配送）

5. 全信息詳情卡片

• 優(yōu)勢(shì)：信息一站式展示，減少頁(yè)面跳轉(zhuǎn)，大幅提升操作效率
• 典型場(chǎng)景：配送員訂單、外賣詳情、銷售客戶速覽等高頻輕操作場(chǎng)景

最后：移動(dòng)端表格的設(shè)計(jì)邊界

設(shè)計(jì)的最終目的，是讓產(chǎn)品更好用、更有價(jià)值、更能解決真實(shí)問(wèn)題。在蘭亭妙微服務(wù) B 端系統(tǒng)、企業(yè)平臺(tái)、可視化界面的多年里，我們始終認(rèn)為：好設(shè)計(jì)不是憑感覺(jué)，而是靠清晰、完整、落地的思考體系。

大家好，這里是蘭亭妙微設(shè)計(jì)，一家專注 B 端系統(tǒng)、Web 界面與交互體驗(yàn)的專業(yè)設(shè)計(jì)公司。今天我們聊一個(gè)設(shè)計(jì)師圈里老生常談、卻又天天踩坑的話題：UI / 交互設(shè)計(jì)師，到底要不要了解前端？

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

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

   

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

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

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

三、正向設(shè)計(jì)：守護(hù)注意力，創(chuàng)造高價(jià)值體驗(yàn)

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

   

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

   

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

一、全文速覽圖

二、設(shè)計(jì)資訊

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

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

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

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

三、產(chǎn)品推薦

1. 在線矢量路徑工具

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

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

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

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

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

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

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

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

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

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

4. 開(kāi)源圖標(biāo)庫(kù)

MingCute 是一套簡(jiǎn)約精致的開(kāi)源圖標(biāo)庫(kù)。無(wú)論您是設(shè)計(jì)師還是開(kāi)發(fā)者，它都非常適合用于 Web 和移動(dòng)端項(xiàng)目，同時(shí)提供了 Figma 插件能夠更便捷的在設(shè)計(jì)過(guò)程中使用，以及動(dòng)畫圖標(biāo)庫(kù)、UI 組件庫(kù)、天氣圖標(biāo)等不同場(chǎng)景的素材

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

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

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

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

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

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

6. 標(biāo)尺小工具

一個(gè)微型工具，用于在 localhost 上測(cè)量間距并對(duì)齊您的 UI

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

體驗(yàn)地址： https://mesurer.ibelick.com/

四、設(shè)計(jì)素材

1. 西文免費(fèi)開(kāi)源字體合集

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

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

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

2. 100+個(gè)開(kāi)源免費(fèi)的 SVG 加載動(dòng)畫

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

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

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

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

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

五、隨便看看

1. 設(shè)計(jì)欣賞

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

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

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

2. 沉浸式閱讀探索

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

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

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

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.payeee.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。