短信驗(yàn)證碼看似簡單的6位數(shù)字，實(shí)則暗藏復(fù)雜業(yè)務(wù)鏈路與風(fēng)控挑戰(zhàn)。從游戲行業(yè)的賬號體系保護(hù)，到黑灰產(chǎn)攻防的成本平衡，短信防控需要在體驗(yàn)、安全與通道穩(wěn)定性間尋找微妙的平衡點(diǎn)。本文將深度拆解短信風(fēng)控的三層防御體系，揭秘那些隱藏在發(fā)送按鈕背后的業(yè)務(wù)邏輯與產(chǎn)品設(shè)計哲學(xué)。

一、短信不是一個按鈕，而是一條高風(fēng)險鏈路

最近 vibe coding 很火，一句話可能就能生成一個登錄框。輸入手機(jī)號、點(diǎn)擊獲取驗(yàn)證碼、填驗(yàn)證碼、完成注冊，看起來非常順滑。但真正做過賬號體系的人都知道，登錄框只是冰山露出來的一角。它下面藏著短信通道、驗(yàn)證碼校驗(yàn)、賬號注冊、設(shè)備識別、渠道投訴、供應(yīng)商評級、黑名單聯(lián)動等一整套業(yè)務(wù)鏈路。

游戲行業(yè)尤其明顯。游戲是典型的大 ToC 業(yè)務(wù)，用戶規(guī)模大、賬號價值高、充值場景多、權(quán)益體系復(fù)雜，只要一個手機(jī)號能注冊賬號，背后就可能對應(yīng)禮包、首充、拉新返利、渠道結(jié)算、虛擬資產(chǎn)交易等利益。利益足夠大，黑灰產(chǎn)自然會圍上來。

短信驗(yàn)證碼本身又是一個很特殊的入口。正常用戶收不到驗(yàn)證碼，會影響注冊轉(zhuǎn)化；異常請求大量消耗短信，會帶來直接費(fèi)用；更嚴(yán)重的是，如果某個短信簽名短時間內(nèi)投訴過多，運(yùn)營商和通道商可能會對簽名降頻、攔截，甚至封禁。到這個時候，受影響的就不是幾個異常手機(jī)號，而是整條正常業(yè)務(wù)鏈路。

我之前做過一段時間短信產(chǎn)品經(jīng)理，對短信下發(fā)機(jī)制有一些了解。最近在賬號風(fēng)控治理中又重新接觸短信相關(guān)防控，發(fā)現(xiàn)短信這件事看似基礎(chǔ)，但真正要做好并不簡單。它不是單純“加一個驗(yàn)證碼”或者“限制一分鐘一次”就能解決的問題，而是要在成本、體驗(yàn)、識別能力和處置策略之間不斷平衡。

這篇文章不講短信供應(yīng)商商務(wù)選型，也不講具體攻擊腳本。這里我只從產(chǎn)品和風(fēng)控落地視角，聊一聊比較通用的短信防控實(shí)踐。

二、先建立一個共識：短信風(fēng)控要看全鏈路

很多團(tuán)隊(duì)做短信防控，第一反應(yīng)是卡“發(fā)送驗(yàn)證碼”這個動作。這個方向沒錯，但不夠。一條驗(yàn)證碼短信從用戶點(diǎn)擊按鈕開始，至少會經(jīng)過五個關(guān)鍵環(huán)節(jié)：用戶請求、基礎(chǔ)頻控、風(fēng)險決策、短信網(wǎng)關(guān)、驗(yàn)證碼提交。短信發(fā)送成功也不是終點(diǎn)，后面還要看驗(yàn)證碼是否被提交、是否注冊成功、是否觸發(fā)投訴。

如果只看發(fā)送動作，就會漏掉很多重要信號。比如某批請求發(fā)送頻率并不高，但驗(yàn)證碼提交幾乎都是秒過；某批手機(jī)號分散在不同 IP 上，但設(shè)備指紋高度相似；某批請求沒有造成注冊成功，卻造成大量短信投訴。這些都不是單點(diǎn)頻控能發(fā)現(xiàn)的。

所以短信風(fēng)控的目標(biāo)不是“讓短信少發(fā)”，而是讓該發(fā)的短信穩(wěn)定發(fā)出去，讓不該發(fā)的請求在合適的位置被攔下或被二次驗(yàn)證。

這句話聽起來像廢話，但它決定了產(chǎn)品設(shè)計方向：不能只追求攔截率，也不能只追求用戶體驗(yàn)。規(guī)則太緊，正常用戶注冊會受影響；規(guī)則太松，短信通道和賬號體系都會暴露在風(fēng)險里。

我會把短信防控拆成三層：成本門檻層、行為識別層、分級處置層。

第一層是成本門檻層，用低成本規(guī)則擋住最明顯的異常請求。第二層是行為識別層，通過設(shè)備、請求、提交行為、黑名單等多維數(shù)據(jù)識別復(fù)雜機(jī)器流量。第三層是分級處置層，對疑似風(fēng)險請求不簡單誤殺，而是通過上行短信、掃臉、人機(jī)挑戰(zhàn)等方式進(jìn)一步確認(rèn)。

三、第一層：成本門檻層，先擋住最明顯的異常

短信風(fēng)控最基礎(chǔ)的能力一定是頻控。不要嫌它簡單，很多線上事故就是因?yàn)樽罨A(chǔ)的頻控沒做好。

頻控通常圍繞手機(jī)號、IP、設(shè)備、賬號、業(yè)務(wù)場景展開。比如同一手機(jī)號 1 分鐘內(nèi)最多發(fā)送 1 次，1 小時最多發(fā)送 5 次，24 小時最多發(fā)送 10 次；同一 IP、同一設(shè)備或同一瀏覽器指紋也要有對應(yīng)閾值。

這里有一個容易被忽略的問題：自然時間和滾動時間。

自然時間是按照固定時間邊界計數(shù)，比如“今天 0 點(diǎn)到 24 點(diǎn)最多 10 次”。滾動時間是從當(dāng)前請求向前回看，比如“過去 24 小時最多 10 次”。對于短信風(fēng)控來說，最佳實(shí)踐通常是滾動計數(shù)。

為什么？因?yàn)樽匀粫r間存在邊界漏洞。假設(shè)系統(tǒng)按自然日計數(shù)，攻擊者可以在 23:58 打滿當(dāng)天額度，0:01 之后額度清零，又繼續(xù)請求一輪。規(guī)則看起來沒問題，實(shí)際防控被時間邊界繞開了。

滾動時間實(shí)現(xiàn)成本更高，尤其在數(shù)據(jù)量大時會涉及緩存、滑動窗口、聚合統(tǒng)計，但它更符合風(fēng)控場景。產(chǎn)品經(jīng)理在寫需求時，不要只寫“24 小時最多 X 次”，最好明確口徑：是自然日還是過去 24 小時；是按手機(jī)號計數(shù)，還是手機(jī)號 + IP + 設(shè)備組合計數(shù)；命中閾值后是直接攔截，還是延長冷卻時間。

除了頻控，圖形驗(yàn)證碼也是成本門檻層的重要工具。很多人覺得圖形驗(yàn)證碼很基礎(chǔ)，但從攻防視角看，它貫穿整個短信盜刷防控過程。

常見的圖形驗(yàn)證碼包括滑動拼圖、文字點(diǎn)選、圖標(biāo)點(diǎn)選、語序選詞、空間推理、障礙躲避等。驗(yàn)證碼的價值不只是“讓用戶做一道題”，而是提升機(jī)器請求成本，并給系統(tǒng)提供行為數(shù)據(jù)，比如軌跡是否自然、完成時間是否異常、同一設(shè)備是否高頻通過。

當(dāng)然，驗(yàn)證碼不是越難越好。注冊登錄是高轉(zhuǎn)化場景，如果一上來就給所有用戶彈復(fù)雜驗(yàn)證碼，正常用戶會被一起懲罰。更合理的方式是分層觸發(fā)：低風(fēng)險用戶無感通過，中風(fēng)險用戶觸發(fā)輕量驗(yàn)證碼，高風(fēng)險用戶觸發(fā)更強(qiáng)驗(yàn)證。

號段識別也屬于基礎(chǔ)能力。比如 170、171、165 等虛擬運(yùn)營商號段在某些業(yè)務(wù)里風(fēng)險更高，可以根據(jù)業(yè)務(wù)情況做更嚴(yán)格的策略。但不建議把虛擬號段簡單等同于黑名單，直接全量攔截會帶來誤傷。更穩(wěn)妥的做法是提高驗(yàn)證等級、降低發(fā)送頻次、疊加設(shè)備和 IP 風(fēng)險判斷。

成本門檻層解決的是“別讓明顯異常請求輕松進(jìn)來”。它不追求特別聰明，但必須穩(wěn)定、清晰、可解釋。

四、第二層：行為識別層，把孤立規(guī)則變成風(fēng)險判斷

第一層規(guī)則可以擋住一部分粗糙流量，但擋不住更成熟的黑灰產(chǎn)。成熟黑產(chǎn)不會只用一個 IP、一個手機(jī)號、一個設(shè)備猛沖，它會拆散請求，分布式地試探系統(tǒng)閾值。這時候就需要進(jìn)入行為識別層。

行為識別層的核心是多維數(shù)據(jù)。產(chǎn)品上至少要能拿到手機(jī)號、IP、設(shè)備指紋、賬號、渠道、業(yè)務(wù)場景、驗(yàn)證碼生成時間、驗(yàn)證碼提交時間、提交結(jié)果、失敗次數(shù)、請求來源、前端環(huán)境等信息。沒有這些埋點(diǎn)，風(fēng)控就只能靠猜。

設(shè)備指紋是這里的關(guān)鍵能力。它不是單純拿一個設(shè)備 ID，而是綜合瀏覽器、系統(tǒng)、分辨率、時區(qū)、字體、Canvas、網(wǎng)絡(luò)環(huán)境、客戶端版本等信息，生成相對穩(wěn)定的設(shè)備標(biāo)識，用來識別“換手機(jī)號、換 IP，但設(shè)備特征高度相似”的請求。

前端請求加密和參數(shù)校驗(yàn)也很重要。它不能從根本上防住所有攻擊，但可以提高腳本化請求門檻。比如短信發(fā)送接口不應(yīng)該裸奔，前后端需要對關(guān)鍵參數(shù)、時間戳、隨機(jī)串、業(yè)務(wù)場景進(jìn)行校驗(yàn)，避免接口被直接復(fù)用。注意，這類能力的定位是提高成本，不是絕對安全，真正的風(fēng)控仍然要靠服務(wù)端決策。

驗(yàn)證碼提交行為同樣值得關(guān)注。正常用戶收到短信后，通常會有一個閱讀和輸入過程。如果大量驗(yàn)證碼都在極短時間內(nèi)提交成功，就要懷疑是否存在接口自動化、短信接收平臺、批量控制設(shè)備等風(fēng)險。這里不用把規(guī)則寫死成“多少秒一定異常”，而是結(jié)合業(yè)務(wù)基線做分層判斷。

黑名單庫是行為識別層的另一個基礎(chǔ)設(shè)施。它不應(yīng)該只是一個靜態(tài)表，而應(yīng)該是動態(tài)更新的風(fēng)險資產(chǎn)庫，至少包含以下幾類：

黑名單最怕兩個問題：一是更新慢，等運(yùn)營手動導(dǎo)入時風(fēng)險已經(jīng)過去；二是沒有過期機(jī)制，半年以前的風(fēng)險數(shù)據(jù)一直影響正常用戶。比較好的方式是給名單設(shè)置來源、等級、命中原因、過期時間和復(fù)核機(jī)制。

行為識別層的重點(diǎn)不是把規(guī)則寫得多復(fù)雜，而是把原本分散的數(shù)據(jù)串起來。手機(jī)號、IP、設(shè)備單獨(dú)看都正常，組合起來可能就不正常。風(fēng)控能力的差距，很多時候就在這個“組合判斷”里。

五、第三層：分級處置層，別把風(fēng)控做成一刀切

短信風(fēng)控最難的地方，不是攔截黑產(chǎn)，而是不誤傷正常用戶。尤其在游戲業(yè)務(wù)里，用戶注冊和登錄往往發(fā)生在高情緒場景：新游開服、活動領(lǐng)取、好友邀請、充值回流。這個時候如果正常用戶收不到驗(yàn)證碼，或者被連續(xù)攔截，很容易直接流失。

所以對疑似風(fēng)險請求，不一定要直接攔截。更好的方式是分級處置。

低風(fēng)險請求直接放行；中風(fēng)險請求增加輕量驗(yàn)證，比如圖形驗(yàn)證碼或冷卻時間；高風(fēng)險但不確定的請求增加強(qiáng)驗(yàn)證，比如上行短信、人臉識別、實(shí)名校驗(yàn)；已確認(rèn)風(fēng)險請求再直接攔截。

上行短信是一個特別值得重視的能力。所謂上行短信，就是用戶主動發(fā)送指定內(nèi)容到指定號碼，系統(tǒng)收到后完成驗(yàn)證。它本身不復(fù)雜，但在實(shí)踐中并不是所有短信供應(yīng)商都能穩(wěn)定支持上行能力，而且接入、解析、回調(diào)、狀態(tài)同步都需要額外建設(shè)。

為什么它有效？因?yàn)樗羊?yàn)證動作從“企業(yè)給用戶發(fā)短信”變成“用戶主動發(fā)短信給企業(yè)”。對正常用戶來說，雖然多了一步，但能完成；對批量盜刷來說，成本會明顯上升。尤其在疑似風(fēng)險但不敢直接攔截的場景，上行短信是一個不錯的中間態(tài)。

掃臉、人臉識別、實(shí)名校驗(yàn)也屬于強(qiáng)驗(yàn)證手段，但要謹(jǐn)慎使用。它們的驗(yàn)證強(qiáng)度高，用戶打擾也高，不適合放在短信發(fā)送前的常規(guī)鏈路里。更合理的觸發(fā)場景是：高價值賬號、疑似批量設(shè)備、異常領(lǐng)取權(quán)益、異常充值返利、賬號找回等風(fēng)險更高的業(yè)務(wù)節(jié)點(diǎn)。

把這些動作放在一起看，可以整理成一張風(fēng)險分級處置矩陣。它的價值不是給所有業(yè)務(wù)一個固定答案，而是幫助產(chǎn)品、風(fēng)控、研發(fā)和客服對齊“什么情況該怎么處理”。

這里有個產(chǎn)品細(xì)節(jié)：強(qiáng)驗(yàn)證的提示文案要解釋清楚。不要只彈一句“請求異常”，可以寫成“當(dāng)前環(huán)境存在安全風(fēng)險，為保護(hù)賬號安全，請完成驗(yàn)證后繼續(xù)”。這類文案不是為了好看，而是為了減少用戶的不確定感和客服壓力。

分級處置層的本質(zhì)是把風(fēng)險決策從“是/否”變成“放行/觀察/驗(yàn)證/攔截”。這會讓系統(tǒng)更復(fù)雜，但也更符合真實(shí)業(yè)務(wù)。

六、落地時要補(bǔ)齊三套后臺能力

如果要把短信風(fēng)控真正跑起來，前臺策略只是其中一部分，后臺能力更重要。

第一套是規(guī)則配置后臺。產(chǎn)品和風(fēng)控同學(xué)需要能按業(yè)務(wù)場景配置規(guī)則，比如注冊、登錄、換綁、找回密碼、領(lǐng)取禮包分別使用不同閾值。不要把所有場景套一套規(guī)則，注冊場景可以更嚴(yán)格，登錄場景要更重視老用戶體驗(yàn)，找回密碼則要更重視賬號安全。

規(guī)則配置后臺最小要支持“業(yè)務(wù)場景、統(tǒng)計維度、時間窗口、處置動作”四類配置。配置粒度太粗，規(guī)則會互相誤傷；配置粒度太細(xì)，又會難以維護(hù)。比較穩(wěn)妥的方式，是先搭一個能覆蓋 80% 場景的基礎(chǔ)模型。

第二套是監(jiān)控看板。短信風(fēng)控必須看數(shù)據(jù)，至少包括發(fā)送請求量、發(fā)送成功率、驗(yàn)證碼提交率、注冊轉(zhuǎn)化率、攔截量、強(qiáng)驗(yàn)證通過率、短信成本、供應(yīng)商失敗率、投訴量、簽名狀態(tài)等。只看攔截量沒有意義，攔截量升高可能代表風(fēng)控有效，也可能代表正常用戶被誤傷。

監(jiān)控看板的核心不是把指標(biāo)堆滿，而是同時回答三件事：黑產(chǎn)有沒有變多、正常用戶有沒有受傷、短信通道有沒有變差。

第三套是應(yīng)急開關(guān)。短信通道一旦異常，影響會非?？臁１热缒硞€供應(yīng)商失敗率升高，要能快速切換通道；某個規(guī)則誤傷，要能快速降級；某個簽名投訴異常，要能暫停對應(yīng)場景或切換備用簽名。沒有應(yīng)急開關(guān)，風(fēng)控系統(tǒng)本身也會變成風(fēng)險源。

我個人建議，每一條核心規(guī)則都至少配三樣?xùn)|西：命中原因、處置結(jié)果、回滾方式。命中原因用于排查，處置結(jié)果用于復(fù)盤，回滾方式用于止損。

還有一個容易被忽略的點(diǎn)：短信風(fēng)控需要和客服對齊。用戶收不到驗(yàn)證碼時，第一反應(yīng)通常是找客服。如果客服后臺看不到用戶為什么被攔截，只能回復(fù)“請稍后再試”，體驗(yàn)會非常差。

七、幾個容易踩的坑

第一個坑，是把短信成本當(dāng)成唯一目標(biāo)。短信確實(shí)有成本，但短信風(fēng)控不是省錢項(xiàng)目。它的核心價值是保護(hù)賬號體系、保護(hù)通道穩(wěn)定性、保護(hù)正常用戶體驗(yàn)。如果只盯著短信費(fèi)用，很容易把規(guī)則收得過緊，最后省了短信費(fèi)，丟了注冊轉(zhuǎn)化。

第二個坑，是只做發(fā)送頻控，不做提交校驗(yàn)。短信發(fā)出去以后，驗(yàn)證碼是否提交、提交是否成功、多久提交、失敗幾次，都是重要信號。只管發(fā)送不管提交，就像只看門口排隊(duì)，不看進(jìn)店以后發(fā)生了什么。

第三個坑，是規(guī)則沒有分場景。注冊、登錄、換綁、找回密碼、支付確認(rèn)的風(fēng)險完全不同，規(guī)則必須和業(yè)務(wù)語義綁定。

第四個坑，是黑名單只進(jìn)不出。風(fēng)控名單不是垃圾桶，不能什么都往里扔。沒有過期、沒有降級、沒有復(fù)核，時間久了必然誤傷。

第五個坑，是把圖形驗(yàn)證碼當(dāng)萬能藥。驗(yàn)證碼能提高攻擊成本，但也會提高用戶成本。它應(yīng)該是動態(tài)策略的一部分，而不是所有用戶都必須跨過的一堵墻。

八、寫在最后

短信本身是個很簡單的服務(wù)：生成驗(yàn)證碼、調(diào)用供應(yīng)商、用戶收到、輸入校驗(yàn)。簡單到很多人會覺得這不就是一個接口嗎？

但在真實(shí)業(yè)務(wù)里，短信又一點(diǎn)都不簡單。它連接著賬號注冊、用戶體驗(yàn)、營銷成本、通道穩(wěn)定、投訴治理和黑灰產(chǎn)攻防。尤其在游戲這種高用戶量、高利益密度的行業(yè)里，短信入口做不好，后面會牽出一串問題。

我理解的短信防控，不是單純把黑產(chǎn)擋在門外，而是建立一套可持續(xù)的平衡機(jī)制：前面用成本門檻層擋住明顯異常，中間用行為識別層判斷復(fù)雜風(fēng)險，后面用分級處置層減少誤傷。再配合規(guī)則后臺、監(jiān)控看板、應(yīng)急開關(guān)和客服可解釋能力，整個體系才算真正能跑起來。

回到開頭說的 vibe coding。AI 可以很快幫你做出一個登錄框，但登錄框之下的業(yè)務(wù)，不會因?yàn)轫撁嫔傻每炀妥詣酉А６绦棚L(fēng)控就是這類“看起來不起眼，但出了事很疼”的底層能力。

產(chǎn)品經(jīng)理真正要補(bǔ)的，往往不是某個按鈕怎么畫，而是按鈕按下去之后，系統(tǒng)如何判斷、如何保護(hù)、如何兜底。

短信驗(yàn)證碼只有 6 位，但它背后的產(chǎn)品設(shè)計，遠(yuǎn)不止 6 位。

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

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

一、全文速覽圖

二、設(shè)計資訊

1. Codex 生圖案例分享

X 上看到一個 Codex 的使用案例，將 Codex 內(nèi)置一個圖片標(biāo)注工具，這樣修改標(biāo)注工具里的圖，Codex 就能讀取數(shù)據(jù)進(jìn)行重新生成，案例分享給大家

通過內(nèi)嵌瀏覽器 + Codex Image 2 + 無限畫布（Excalidraw / tldraw），構(gòu)建一個多模態(tài)畫布系統(tǒng)，讓 Codex 直接讀取畫布的 Base64 標(biāo)注圖，實(shí)現(xiàn)“看圖理解 + 生成”。

這樣 Excalidraw / tldraw 就不只是白板，而是變成前端的 Multi-modal Canvas，用來拼一個低配但可控的生圖工作流。

其他在線白板工具：

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

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

此想法的原帖： https://x.com/zhongerxin/status/2068027614300893383

原作者 Cowart：Codex + 無限畫布工具插件開源： https://github.com/zhongerxin/cowart#

換白板工具原帖： https://x.com/cellinlab/status/2068193900570046502

操作步驟原帖： https://x.com/liyue_ai/status/2068545434818400526

2. Figma 客戶端“標(biāo)簽頁分組”功能

標(biāo)簽頁分組功能允許您在 Figma 桌面應(yīng)用程序中對標(biāo)簽頁進(jìn)行分組、著色、展開和折疊。保持井然有序，再也不用擔(dān)心找不到要查找的文件。

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

FigmaEX 客戶端已經(jīng)更新到 126.6.8 版本，可自行下載安裝。

三、產(chǎn)品推薦

1. 應(yīng)用圖標(biāo)博物館

展示收藏了非常多 iOS 的經(jīng)典應(yīng)用圖標(biāo)，并支持搜索，非常喜歡被精心設(shè)計的圖標(biāo)包圍的充實(shí)感，后續(xù)會開放 macOS 應(yīng)用圖標(biāo)庫。

網(wǎng)址：https://icon.museum/

2. 優(yōu)秀應(yīng)用界面庫 ①

網(wǎng)站收集了一波應(yīng)用商店的優(yōu)化圖片和用戶引導(dǎo)流程的設(shè)計案例。

網(wǎng)址：https://before.click/

3. 優(yōu)秀應(yīng)用界面庫 ②

App Store 截圖庫包含，350 萬+ 截圖 、40 萬+ 應(yīng)用，永久免費(fèi)

網(wǎng)址：https://screenshotsclub.xyz/

4. 點(diǎn)陣加載器（網(wǎng)站 Loading 動畫）

每個應(yīng)用程序都需要矩陣加載器，55+個免費(fèi)且開源的加載器，基于 React、TypeScript、Tailwind CSS 和 shadcn 構(gòu)建。安裝一個，復(fù)制代碼，然后將其變成屬于你自己的作品。

網(wǎng)址：https://dotmatrix.zzzzshawn.cloud/

5. 設(shè)計靈感網(wǎng)站 ①

精選 X 中設(shè)計、交互的最佳設(shè)計，每日更新，并且還有應(yīng)用截圖和應(yīng)用圖標(biāo)等信息，AI 時代提升"看"的能力

網(wǎng)址：https://recent.design/

6. 設(shè)計靈感網(wǎng)站 ②

umanmade 是一個由真人創(chuàng)作的數(shù)字作品精選目錄，收錄優(yōu)秀的設(shè)計靈感和交互案例

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

四、設(shè)計素材

1. Figma UI 模板庫

免費(fèi)的、隨時可用的 Figma UI 塊庫。 復(fù)制任意組件，將其粘貼到你的文件中，即可立即開始構(gòu)建。 非常適合著陸頁、布局和 UI 部分。

網(wǎng)址：https://blocks.lander.studio/

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

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

蘭亭妙微ui設(shè)計公司分享：當(dāng)AI能夠深度理解'團(tuán)圓經(jīng)濟(jì)'的情感密碼，節(jié)日營銷正在從流量爭奪升級為心智滲透的精準(zhǔn)戰(zhàn)役。58同城在中秋期間以'好崗離家近'為核心，通過AI生成融合城市地標(biāo)與職業(yè)場景的個性化視覺，在6大城市實(shí)現(xiàn)千萬級曝光的同時提升簡歷投遞量40%。這場品效合一的實(shí)踐揭示了一個關(guān)鍵趨勢：AI不再是冰冷的效率工具，而是情感共鳴的放大器——它讓招聘廣告從信息堆砌轉(zhuǎn)向情感連接，真正實(shí)現(xiàn)了品牌溫度與業(yè)務(wù)增長的雙贏。

當(dāng)招聘廣告超越“崗位羅列”的刻板模式，設(shè)計便成為承載這份向往的情感橋梁。

今年中秋，58同城以“好崗離家近，中秋真團(tuán)圓”為核心，聚焦本土情結(jié)濃厚的二三線城市，發(fā)起一場整合營銷。

本文將拆解這場戰(zhàn)役中，AI賦能的設(shè)計創(chuàng)新如何不僅實(shí)現(xiàn)千萬曝光與百萬業(yè)績增長，更讓招聘營銷升維為助力人們“歸鄉(xiāng)筑夢”的情感依托，讓歸鄉(xiāng)就業(yè)的美好愿景通過視覺語言落地生根。

01 精準(zhǔn)錨定：明確情感與場景的設(shè)計方向

項(xiàng)目首先基于人口特征、營銷資源與業(yè)績需求，精準(zhǔn)圈定長沙、成都、西安、無錫、南昌五大目標(biāo)城市。這些城市的共性在于春節(jié)/中秋返鄉(xiāng)率超80%，鄉(xiāng)土情結(jié)與團(tuán)圓氛圍尤為濃郁。

執(zhí)行層面：項(xiàng)目聚焦6大城市的24個核心商圈，選擇電梯內(nèi)、戶外大屏、公交站亭三大高頻觸達(dá)渠道。

主視覺采用“品牌區(qū)+創(chuàng)意區(qū)”雙分區(qū)布局：左側(cè)傳遞“好崗離家近”的核心主張，右側(cè)則分別針對B端企業(yè)（展示招聘實(shí)力）與C端求職者（突出崗位優(yōu)勢），引導(dǎo)“求職者投遞-商家入駐”的雙向轉(zhuǎn)化。

02 AI賦能：效率與創(chuàng)意的雙重突破

AI設(shè)計的核心價值，在于讓“情感共鳴”與“高效落地”并行不悖。本次項(xiàng)目中，AI技術(shù)貫穿創(chuàng)意生成、視覺優(yōu)化全流程，既精準(zhǔn)傳遞“團(tuán)圓+留鄉(xiāng)”的情感內(nèi)核，又破解了多城市定制、短周期交付的效率難題，實(shí)現(xiàn)雙重突破。

設(shè)計提案方向：

1. 情感+場景化共鳴：讓設(shè)計喚醒本土情結(jié)

設(shè)計緊扣“中秋團(tuán)圓”與“留鄉(xiāng)就業(yè)”的雙重訴求，以主題文案將求職需求與家庭情感深度綁定，精準(zhǔn)觸動目標(biāo)人群的“本土情結(jié)”。

創(chuàng)意構(gòu)思沿兩個方向展開：

「中秋+商圈實(shí)景」方向提案：

快速建立“本地招聘”的直觀認(rèn)知，通過融合城市地標(biāo)與品牌色，結(jié)合 “中秋團(tuán)圓” 節(jié)點(diǎn)，延續(xù) “好崗離家近” 的核心訴求，同時針對不同城市定制化文案（如西安的“照的見你的未來”、成都的“崗位和火鍋一樣沸騰”），既傳遞就業(yè)價值，又契合城市氣質(zhì)，激活留鄉(xiāng)就業(yè)的情感需求。，讓城市印記成為情感紐帶。

「中秋+地標(biāo)+職業(yè)人物」方向提案：

采用真實(shí)場景與AI生成插畫人物相結(jié)合的方式（如職場女性與城市景觀、特色元素的融合），畫面生動富有層次，打破傳統(tǒng)招聘廣告的單調(diào)感。

最終方案：

2. AI提效：貫穿流程的設(shè)計革命

AI技術(shù)在此次項(xiàng)目中深度融入從創(chuàng)意到落地的全流程，實(shí)現(xiàn)“多快好省”的突破：

創(chuàng)意圖像生成：借助Topnow等工具，快速合成“中秋+商圈”的定制化場景，使AI元素與實(shí)景自然銜接，直觀傳遞信息，降低用戶理解成本。

高效素材處理：

即夢4.0：

字體設(shè)計：幾分鐘內(nèi)完成字體設(shè)計方案。

處理圖片：快速調(diào)整建筑角度、優(yōu)化圖片內(nèi)容，適配戶外大屏的傳播需求，大幅減少后期耗時。

即夢3.0：

生成圖片：月亮的質(zhì)感與主文案的藝術(shù)化呈現(xiàn)，通過 AI 技術(shù)實(shí)現(xiàn)視覺吸引力，既保證節(jié)日氛圍的營造，又讓文案具備強(qiáng)記憶點(diǎn)。

卡通插畫：效果比4.0優(yōu)秀

在插畫生成上表現(xiàn)卓越，通過精準(zhǔn)指令，快速產(chǎn)出風(fēng)格統(tǒng)一的本地職業(yè)形象（如成都外賣小哥、西安青年群體），傳遞“本地工作的愉悅感”，效率遠(yuǎn)超人工。

關(guān)鍵詞參考：

“一個外賣小哥抱著熊貓玩偶，大步跑，綠色系工作服，開心地笑，黑色單線描邊，扁平插畫，炫彩配色”

“一個女孩面對手機(jī)視頻通話，身穿襯衫，坐姿端正，張口說話，居家環(huán)境，黑色單線描邊，扁平插畫，橙色系配色”

“5個男女青年，抬頭看前方，一人手指前方，全身，站立，背影，時尚穿搭，黑色單線描邊，扁平插畫，豐富配色”

具體成效：

創(chuàng)意階段：半天生成4個完整方向，傳統(tǒng)方式需2-3天。

多城市適配：快速產(chǎn)出兼具系列感與地方特色的視覺方案。

修改優(yōu)化：響應(yīng)客戶反饋的速度提升70%以上。

3. 物料延展：保障多場景視覺統(tǒng)一

基于“一套核心視覺，多場景適配”原則，AI擴(kuò)圖、高清修復(fù)，協(xié)助快速延展生成線下物料、線上專場Banner、長圖海報等多尺寸物料，確保線上線下品牌形象統(tǒng)一，強(qiáng)化用戶認(rèn)知。

03 價值落地：三大邏輯驅(qū)動品效合一

AI賦能的設(shè)計創(chuàng)新，本次設(shè)計通過情感、商業(yè)、品牌三大邏輯，實(shí)現(xiàn)“品效合一”核心目標(biāo)。讓設(shè)計不僅是視覺呈現(xiàn)，更實(shí)現(xiàn)了品牌價值與業(yè)務(wù)增長的雙重落地。

1.情感邏輯：激活本土情結(jié)，拉動C端轉(zhuǎn)化。AI設(shè)計精準(zhǔn)觸達(dá)留鄉(xiāng)需求，讓“像鳥飛往自己的山”不再只是心理期許，而是有具體崗位支撐的現(xiàn)實(shí)可能。數(shù)據(jù)印證成效：長沙、成都、西安等地線上專場簡歷投遞量增長40%，“本地崗位”搜索量上升62%，有效拉動C端用戶參與度。

2.商業(yè)邏輯：精準(zhǔn)賦能B端，超額完成業(yè)績。對B端商家而言，精準(zhǔn)廣告投放是核心需求。通過“行業(yè)+地域”的定制化廣告設(shè)計，有效提升了商家投放意愿與合作轉(zhuǎn)化。

3.品牌邏輯：沉淀長期認(rèn)知資產(chǎn)。設(shè)計圍繞“貼近受眾、強(qiáng)化認(rèn)知、促進(jìn)轉(zhuǎn)化”原則，將“提供家鄉(xiāng)好工作”的營銷邏輯，拆解為“明月+地標(biāo)+文案+品牌信息”的直觀的視覺符號組合，降低用戶信息理解成本。通過品牌色、視覺等符號在多場景的重復(fù)曝光，持續(xù)強(qiáng)化“找本地好工作，就上58”的用戶心智，使品牌從工具平臺升級為“助力團(tuán)圓”的伙伴，構(gòu)筑獨(dú)特的品牌競爭壁壘。

04 行業(yè)啟示：走向“策略+情感”的AI設(shè)計新范式

本次實(shí)踐為行業(yè)帶來核心啟示：AI是設(shè)計師的“超級助手”，其核心價值在于提升效率與精準(zhǔn)度。未來的品牌設(shè)計應(yīng)聚焦于 “策略為先，AI賦能，情感共鳴”的融合模式——以策略為導(dǎo)向，用AI提效，最終以情感打動人心。

打動人心的永遠(yuǎn)是對人性的洞察和情感的共鳴：

對招聘品牌推廣而言，這打破了“信息堆砌”的傳統(tǒng)廣告模式；對更廣的行業(yè)來說，則示范了“AI賦能設(shè)計，設(shè)計驅(qū)動品效”的新路徑。技術(shù)終究是工具，而深度的策略思考與人文洞察，永遠(yuǎn)是設(shè)計師不可替代的核心價值。當(dāng)AI與品牌策略、情感共鳴深度結(jié)合，營銷才能實(shí)現(xiàn)真正的突破，為品牌創(chuàng)造可持續(xù)的長期價值。

05 寫在最后

58同城此次中秋品牌營銷項(xiàng)目，正是技術(shù)理性與創(chuàng)意感性完美融合的例證。用AI實(shí)現(xiàn)高效精準(zhǔn)的落地，用設(shè)計傳遞深刻的情感價值，最終成就了品牌聲量與業(yè)務(wù)增長的雙贏，也為行業(yè)提供了可復(fù)制的品效合一實(shí)踐范本。

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

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

近期蘭亭妙微團(tuán)隊(duì)完成了一個智能制造領(lǐng)域的B端設(shè)計項(xiàng)目，今天就來和大家分享一下設(shè)計思路和優(yōu)化過程。

B端產(chǎn)品的設(shè)計核心，往往在于如何在復(fù)雜的業(yè)務(wù)邏輯中，理清頭緒，讓關(guān)鍵信息高效、直觀地呈現(xiàn)給用戶。這次的優(yōu)化正是圍繞“高效”二字展開。

在確定整體風(fēng)格時，我們主要遵循了三個原則：

1、品牌感：采用與客戶品牌一致的色調(diào)和設(shè)計語言，確保產(chǎn)品系列的統(tǒng)一性，強(qiáng)化品牌認(rèn)知。

2、簡潔性：頁面設(shè)計的核心是“化繁為簡”。我們將重要的數(shù)據(jù)和預(yù)警信息突出展示，減少不必要的視覺干擾，提升信息的可訪問性和可用性。

3、高效性 ：通過精簡的界面布局、扁平的層級結(jié)構(gòu)和直觀的信息展示方式，力求讓用戶在短時間內(nèi)找到所需信息，從而提高工作效率。

核心設(shè)計思考與優(yōu)化

1、導(dǎo)航重塑：聚焦核心內(nèi)容

【弱化導(dǎo)航】我們?nèi)趸藢?dǎo)航欄的背景，打造沉浸式的瀏覽體驗(yàn)，讓用戶能將更多注意力聚焦在頁面核心內(nèi)容上。

【橫向折疊】側(cè)邊導(dǎo)航采用了可橫向折疊的設(shè)計，在需要時可以收起，為數(shù)據(jù)展示區(qū)釋放出更多橫向空間，承載更多內(nèi)容。

2、布局重構(gòu)：信息分區(qū)更清晰

我們將整個駕駛艙頁面重新規(guī)劃為三個核心區(qū)域，讓信息架構(gòu)一目了然：

【左側(cè)導(dǎo)航區(qū)】相比頂部導(dǎo)航，左側(cè)導(dǎo)航能展示更多條目，且符合用戶從上到下的自然瀏覽習(xí)慣。我們增加了收起功能，方便用戶在專注處理信息時大化內(nèi)容區(qū)域。同時，菜單背景疊加工廠的作業(yè)場景圖， subtly 突出了軟件的行業(yè)主題。

【中間信息展示區(qū)】這是頁面的“C位”。頂部是主題卡片和可自定義的快捷入口；中部和下部則是核心數(shù)據(jù)圖表展示區(qū)，圖表顏色嚴(yán)格遵循品牌規(guī)范，在傳遞信息的同時也強(qiáng)化了品牌感。

【右側(cè)個人信息區(qū)】將個人信息、待辦事項(xiàng)和報警信息整合為卡片形式。

【待辦任務(wù)】這是新增的模塊，根據(jù)不同角色的業(yè)務(wù)人員展示不同的待辦內(nèi)容，非常實(shí)用。

【報警信息】將原有的列表形式進(jìn)行了優(yōu)化，重點(diǎn)突出報警等級和標(biāo)題，讓異常情況更加清晰明了，便于快速響應(yīng)。

3、數(shù)據(jù)可視化：提升管理效率

借助圖形化手段，將復(fù)雜、抽象的數(shù)據(jù)條理清晰地傳達(dá)出去。我們根據(jù)每個模塊的業(yè)務(wù)性質(zhì)，為其選擇了合適的圖表類型，讓數(shù)據(jù)“自己說話”，有效提升了線上管理的效率。

這次設(shè)計優(yōu)化，不僅是一次視覺上的升級，更是對業(yè)務(wù)流程和用戶體驗(yàn)的深度思考。

希望這個案例能給同樣在做B端設(shè)計的你帶來一些靈感！

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

在B端產(chǎn)品設(shè)計的世界里，色彩不僅僅是視覺元素，它還承載著信息傳遞、用戶體驗(yàn)和品牌識別的重要角色。蘭亭妙微UI設(shè)計公司深入探討了色彩空間理論在B端設(shè)計中的應(yīng)用，從基礎(chǔ)的色彩空間概念到如何在實(shí)際工作中運(yùn)用這些理論，為設(shè)計師提供了一套科學(xué)的顏色搭配和管理方法。

對于 B 端產(chǎn)品而言，我們經(jīng)常會和顏色進(jìn)行斗爭。

比如在工作當(dāng)中，開發(fā)沒有正確還原顏色、不知道如何進(jìn)行色彩配置、以及對于 B 端產(chǎn)品而言，究竟應(yīng)該如何協(xié)調(diào)科學(xué)的進(jìn)行顏色的搭配～

最近會講顏色的部分，整體會分為四篇文章：B 端設(shè)計如何理解色彩空間、B 端產(chǎn)品怎樣合理搭配顏色、B 端項(xiàng)目的視覺風(fēng)格、B 端項(xiàng)目顏色的實(shí)戰(zhàn)技巧。

本篇文章是第一篇，我們先來聊聊產(chǎn)品配色的基礎(chǔ) 色彩空間與顏色管理。

不知道各位同學(xué)是否遇到這種情況，當(dāng)你在調(diào)整顏色時，就是在漫無目的的在拾色器上來回游走，在被問到為什么要選擇這個顏色時，也茫然無措，這時候的你作何感想？

所以顏色還原需要熟練的掌握色彩空間，并配合屏幕進(jìn)行顏色管理，才能夠讓設(shè)計順利落地。但顏色其實(shí)過于抽象，因此我們將整體內(nèi)容進(jìn)行簡化，多和大家聊聊在理論背后究竟應(yīng)該如何與工作內(nèi)容進(jìn)行結(jié)合。

首先我們先說說色彩空間。

一、什么是色彩空間？

色彩空間又叫色彩模型，它是為了讓系統(tǒng)能夠準(zhǔn)確地描述顏色、使用顏色，進(jìn)而定義出來的一種顏色組織方式。

比如有一排隨機(jī)顏色，要按特定規(guī)則排列，你會怎么做？我相信，我們首先想到的便是按照不同的色相進(jìn)行歸類。

如果顏色變?yōu)?0000個，又該怎么排列呢？因此，為了讓企業(yè)更好地使用顏色、設(shè)計師更便利地選擇一致的顏色，行業(yè)中便提出了色彩空間的概念。

色彩空間其實(shí)很簡單。因?yàn)槲覀冃枰褂妙伾也煌巳簩︻伾男枨蟛煌?，所以顏色的排列方式會存在差異?/p>

比如，行業(yè)中較為出名的潘通色彩體系，其實(shí)是基于印刷行業(yè)制定的一種特殊色彩空間；CMYK是為印刷從業(yè)者提供的、便于他們更好地進(jìn)行物料印刷的色彩空間；Lab是一種更強(qiáng)調(diào)色彩亮度的色彩空間。

因此，行業(yè)會根據(jù)顏色的不同規(guī)律和自身使用需求，總結(jié)整理出不同的色彩空間。

我們目前在工作當(dāng)中，主要都是聚焦于屏幕當(dāng)中，因此影響顏色呈現(xiàn)的也就變?yōu)椋?/p>

• 設(shè)計軟件當(dāng)中的色彩空間：以 RGB、HSB、HCT 為主，主要是計算機(jī)識別顏色顏色，調(diào)整顏色的重要方式，在電腦軟件當(dāng)中起到重要作用。
• 屏幕顯示當(dāng)中的色彩空間：以 Adobe RGB、Display P3、sRGB 為主，主要是能準(zhǔn)確展示屏幕當(dāng)中的各種顏色。

在我們細(xì)致講解色彩空間的部分時，我們先來了解三個重要的概念。

1. 亮度：是光作用于人眼所引起的明亮程度的感覺，它與被觀察物體的發(fā)光強(qiáng)度有關(guān)，主要表現(xiàn)光的強(qiáng)與弱。
2. 色相：是當(dāng)人眼看一種或多種波長的光時所產(chǎn)生的色彩感覺，它反映顏色的種類，是決定顏色的基本特征。
3. 飽和度：是指顏色的純度，即該摻入白光的程度，表示顏色深淺的程度。例如：藍(lán)色 + 白色 = 天藍(lán)色，也就是飽和度下降

二、色彩空間的類型

1. RGB  色彩空間

RGB是顯示器當(dāng)中的顏色基礎(chǔ)。

比如在現(xiàn)實(shí)世界當(dāng)中，我們將手機(jī)屏幕進(jìn)行放大，你會發(fā)現(xiàn)屏幕都是由紅綠藍(lán)三個燈管所組成的。

而 RGB 的色彩模式就是模擬現(xiàn)實(shí)世界當(dāng)中的屏幕顯示原理，將燈光照射的邏輯在設(shè)計軟件當(dāng)中進(jìn)行復(fù)現(xiàn)，因此在 RGB 的調(diào)色盤中，就會分別包含三個輸入框，這便是 紅綠藍(lán)。

其中，數(shù)字 0 代表不發(fā)光、255 則是最亮的燈光。

那為什么最亮是 255，不是 250？或者是 280 呢？

原因在于RGB 所有的顏色，最后都需要通過計算機(jī)進(jìn)行運(yùn)算顯示，對于它說并不認(rèn)識 紅色、藍(lán)色，在它的腦袋里（不對，CPU 里面）就只有 0 與 1，因此在計算機(jī)存儲的時候，一個字節(jié)也就是 8 個比特、也就是 2 的八次方、也就是 256，這樣 一個色彩信息等于一個字節(jié)，數(shù)據(jù)存儲就會更加高效。

所以我們所聊的顏色更多指的是代碼層面的顏色設(shè)定。

接著我們打開 Figma，看到另一種格式 Hex，那我們稱之為是 RGB 模式的精簡版。

因?yàn)樗訔壝總€輸入框都會出現(xiàn) 255（255,255,255 白色）實(shí)在太長，不利于我們在日常工作當(dāng)中進(jìn)行記錄。

因此將每個顏色，三位數(shù)值縮減為兩位數(shù)值（十進(jìn)制變?yōu)槭M(jìn)制），就是增加英文字符的數(shù)據(jù)，就能較短的表達(dá)顏色，使得顏色表達(dá)更為高效。

因?yàn)?Hex 只是 RGB 的精簡版本，所以 Hex 里面，每兩個字符所對應(yīng)的就是 紅、綠、藍(lán)。

比如我們剛才提到的這個藍(lán)色，在 RGB 空間當(dāng)中為(0,86,255) ，Hex 則是#0056FF，也是一一對應(yīng)關(guān)系。

RGB 聽上去似乎很美好，但問題在于兩點(diǎn)：

1.顏色的調(diào)整不夠直觀：作為設(shè)計師，我們很難模擬燈光的照射思維對顏色進(jìn)行調(diào)整，具體應(yīng)該增加多少顏色，其實(shí)是不夠清楚的。我們更熟悉的其實(shí)是：亮度、色相、飽和度，因此在調(diào)色時會十分困難。

比如我目前是紅色，那我要調(diào)整到紫色，應(yīng)該輸入多少值呢？其實(shí)我們很難進(jìn)行一個準(zhǔn)確的判斷。

2.顏色信息與亮度信息的數(shù)據(jù)混合：導(dǎo)致我們很難對于有一個準(zhǔn)確的判斷，比如在 RGB 相同的數(shù)值當(dāng)中，明顯會感受到 黃綠色 與其他顏色的亮度存在較大差異，這樣在調(diào)色時，顏色一致性偏差較大。

為了解決這些問題，就提出一種新的色彩模型：HSB

2. HSB 色彩空間

HSB （也叫 HSV）就是通過顏色的  色相、飽和度、亮度 來進(jìn)行表示。

在色相當(dāng)中，由于顏色的呈現(xiàn)是色環(huán)的方式，因此在數(shù)值上是以 0-360 度來進(jìn)行表示的，在設(shè)計軟件里面，我們也只能輸入所對應(yīng)的數(shù)值。

同時飽和度與亮度都是以百分比的形式進(jìn)行呈現(xiàn)，飽和度越低，相對應(yīng)就會給顏色增加白色，使其更灰；亮度越低，就會增加對應(yīng)的黑色，讓其更深。

由于 HSB 的色彩空間的分類模式非常有利于我們進(jìn)行顏色的調(diào)整，因此我們在日常調(diào)色時其實(shí)會經(jīng)常用到。

比如日常工作當(dāng)中，假設(shè)我們需要設(shè)計一組圖標(biāo)，根據(jù) HSB 顏色的基本原理，我們其實(shí)只需要調(diào)整不同的色相，就能夠得到不同的圖標(biāo)顏色。

但… 顏色上依舊會存在問題。

你會發(fā)現(xiàn)當(dāng)我們調(diào)整了色相過后，整體的顏色并沒有形成統(tǒng)一。原因在于我們?nèi)搜蹖τ?黃綠色的感知 會和紅色、藍(lán)色有所不同，我們通常在看黃綠色時會更為刺眼，因此在設(shè)計層面上需要單獨(dú)調(diào)整。

所以在 HSB 當(dāng)中的顏色邏輯上，也并沒有解決顏色一致性的問題。于是在 2021 年 Google 提出一種全新的色彩模式，HCT。

3. HCT 色彩空間

HCT 首先會將顏色當(dāng)中的 感知度、亮度 進(jìn)行結(jié)合，對之前的 HSB 重新調(diào)整。

在顏色層面上主要分為：Hue：色相、Chroma：色度、Tone：色調(diào)

色相與色度和之前基本類似，但色調(diào)上優(yōu)化了黃綠色凸顯問題，讓人眼的感知度也加入到了色彩空間當(dāng)中，使其顏色更為準(zhǔn)確。

同時色彩空間的呈現(xiàn)，優(yōu)化了顏色漸變的流暢性，我們會發(fā)現(xiàn)整體的漸變感覺會更為自然。

那為什么 Google 想要做 HCT？

其實(shí)因?yàn)?Material Design 當(dāng)中會強(qiáng)調(diào)設(shè)計的一致性和靈活性，在功能設(shè)計上，需要增加一個根據(jù)屏幕當(dāng)中的圖標(biāo)生成與其風(fēng)格一致的壁紙。

但在之前無論什么樣的色彩空間都不能準(zhǔn)確的還原顏色。現(xiàn)在就提供了一個可靠的色彩基礎(chǔ)，能夠讓我們在不同的設(shè)備、平臺和應(yīng)用場景下，都能夠生成具有一致性的色彩方案，同時也能更好地適應(yīng)各種主題和風(fēng)格的變化，如亮色模式和暗色模式的切換。

比如，還是以上面這個案例，我們使用 HSB 與 HCT 對顏色進(jìn)行的色相的調(diào)整，那得到的結(jié)果明顯會發(fā)現(xiàn) HCT 會更加準(zhǔn)確。

那 HCT 就真那么完美無瑕？

其實(shí)也不然，因?yàn)?HCT 色彩空間出現(xiàn)時間較晚，所以在使用上也會有很多問題。

• 設(shè)備兼容性差：很多設(shè)計軟件目前對 HCT 基礎(chǔ)沒有適配，所以即使使用，很多老舊設(shè)備也并不能支持。
• 計算復(fù)雜度高：HCT 的色彩空間涉及到更為復(fù)雜的計算算法，因此它對于系統(tǒng)的資源要求更高。
• 認(rèn)知成本較大：對于新的事物，往往在行業(yè)中的普及會相對較慢，因此還需要長時間的普及才行。

三、色彩空間如何應(yīng)用？

這么深奧的色彩空間，到底要如何使用？

1. 以 HSB 的為主

因?yàn)?HSB 是設(shè)計師最容易理解的色彩空間，因此我們在調(diào)色時需要根據(jù)數(shù)值來進(jìn)行顏色的調(diào)教。

比如說你的顏色很臟，不夠干凈。其實(shí)就是在強(qiáng)調(diào) HSB 當(dāng)中使用了更多的黑色，我們便可以調(diào)整到這個色彩空間當(dāng)中，去增加 B 的值（也就是第三個輸入框）

比如說你的字體很灰，不夠明確。

其實(shí)就是在說 你的亮度太高，需要減少亮度，也就是 H 的值（也就是第一個輸入框）

2. 色彩更具數(shù)據(jù)化

因?yàn)槊恳粋€屏幕所顯示的顏色其實(shí)都不太相同，因此色彩調(diào)整時要多看數(shù)據(jù)，觀察數(shù)據(jù)之間的對比變化。

比如以 B 端產(chǎn)品的中性色為例，現(xiàn)在系統(tǒng)當(dāng)中所使用的正文顏色為 #333333，看到過后就明確知道顏色深度不夠、顏色也不透氣。

我們就會按照，先確定顏色色相，為灰色偏藍(lán)色，因此在色相當(dāng)中需要拖動色環(huán)找到合適的色相；

緊接著確定飽和度，因?yàn)橐{(lán)色，但不宜過多，因此整體的數(shù)值只會在 1-5 之前浮動；

最后確定深度，之前顏色過于淺，需要加深，所以直接減少，變?yōu)?22 左右的數(shù)值。

3. HCT 輔助顏色判斷

其次在判斷顏色時，也會更具章法。

在多輔助色的情況下，我們可以使用 HCT 對顏色進(jìn)行判斷。

對于日常工作來說，我們可以使用 Figma 當(dāng)中的 color Space 插件 進(jìn)行日常的色彩管理。在今后遇到類似同類型圖標(biāo)時，我們可以使用 HCT 的方式快速生成發(fā)散色板，幫助我們進(jìn)行色彩搭配。

4. 引入 HCT 完善工作流

最后在 B 端系統(tǒng)當(dāng)中，會存在較多顏色搭配的場景。

像是圖表設(shè)計、自定義系統(tǒng)主題，原來只能通過系統(tǒng)預(yù)設(shè)固定顏色的方式進(jìn)行解決，而現(xiàn)在 Google 也將這套計算公式開源，也就是說程序員可以直接引用 HCT 的色彩空間，將顏色配置的權(quán)限給到用戶，通過顏色的調(diào)整，呈現(xiàn)用戶想要的顏色內(nèi)容。

四、屏幕顯示的色彩空間

對于屏幕顯示的色彩空間而言，有部分內(nèi)容我們也是要重點(diǎn)關(guān)注。比如在 B 端設(shè)計當(dāng)中，色彩還原老是出問題，那我們就可以通過屏幕的色彩空間進(jìn)行判斷。

1. sRGB 色彩空間

sRGB（standard Red Green Blue）是由惠普公司和微軟公司共同開發(fā)的一種標(biāo)準(zhǔn)色彩空間，目的是提供一種通用的色彩標(biāo)準(zhǔn)，使得在不同的設(shè)備（如顯示器、打印機(jī)等）之間能夠?qū)崿F(xiàn)相對一致的色彩顯示。

對于 sRGB 來說，它是我們作為設(shè)計師最為重要的屏幕顯示色彩空間，因?yàn)樗ㄓ眯詮?qiáng)，所以大多數(shù)普通的電腦顯示器、網(wǎng)頁瀏覽器等都默認(rèn)采用 sRGB 色彩空間，這樣在瀏覽網(wǎng)頁、查看普通的數(shù)碼照片時，可以獲得比較穩(wěn)定的色彩效果。

所以我們在做設(shè)計時，通常都會將屏幕與軟件，都調(diào)整的 sRGB 的空間當(dāng)中，這樣就能夠最大限度保證色彩的一致。

2. Display P3 色彩空間

Display P3 是基于 DCI – P3 色彩空間衍生而來的，主要用于消費(fèi)級顯示器設(shè)備。它在 DCI – P3 的基礎(chǔ)上進(jìn)行了一些調(diào)整，以適應(yīng)顯示器的特性。

整體而言 P3 色彩空間顯示出來的顏色會更加 生動、艷麗，但是這會和你的設(shè)備密切相關(guān)。目前行業(yè)中只在蘋果設(shè)備以及部分高端顯示器才會使用，所以我們在設(shè)計時需要考慮自己產(chǎn)品的受眾，這一設(shè)備是否普遍使用。

最后，我們總結(jié)一下：

1. 色彩空間就是我們使用顏色的一種方式
2. 在調(diào)色時，我們會優(yōu)先使用 HSB 的色彩空間
3. HCT 是 Google 推出，主要目的是 色彩視覺的統(tǒng)一，在我們生成輔助色的時候有用
4. 屏幕當(dāng)中我們的所有顯示配置盡量調(diào)整為 sRGB，這樣更符合大多數(shù)用戶的顯示情況

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

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

蘭亭妙微UI設(shè)計公司：今天分享的是「圖標(biāo)設(shè)計準(zhǔn)則」。圖標(biāo)是界面設(shè)計里的 “剛需元素”，一個小圖標(biāo)能快速傳遞很多信息。好的圖標(biāo)需要兼顧簡潔、現(xiàn)代、友好。但圖標(biāo)的尺寸很小，設(shè)計時既要嚴(yán)格遵守設(shè)計規(guī)則，又得清晰表達(dá)信息，這樣才能保證整套圖標(biāo)的風(fēng)格統(tǒng)一、辨識度高。

今天就來聊聊大廠在用的圖標(biāo)設(shè)計原則和設(shè)計規(guī)范，配合案例進(jìn)行設(shè)計分析~

01 圖標(biāo)設(shè)計的3個核心原則

① 形式夠簡潔

給大家舉個例子，就說下面的小船圖標(biāo)，想讓圖標(biāo)清晰好認(rèn)，就得做減法，那么用正面的簡約船身造型最合適。

如果圖標(biāo)設(shè)計的過于細(xì)致，例如圖標(biāo)中添加了船帆、桅桿或者旗幟等細(xì)節(jié)，太寫實(shí)的圖標(biāo)不僅會降低識別速度，還會破壞整套圖標(biāo)的視覺統(tǒng)一性。

設(shè)計總結(jié)：

? 簡化圖標(biāo)造型，提升清晰度和辨識度

? 拒絕過度寫實(shí)，避開復(fù)雜繁瑣的設(shè)計

② 多用幾何形狀打底

使用幾何圖形和統(tǒng)一的基礎(chǔ)形狀來設(shè)計圖標(biāo)，能打造出清晰醒目的視覺感受。哪怕結(jié)構(gòu)簡單，也能保持清晰的形態(tài)，縮小到小尺寸時也照樣容易分辨。

反過來講，盡量少用那些纖細(xì)、松散的不規(guī)則形狀，它們會破壞線條的連貫性，讓整套圖標(biāo)看起來亂糟糟的，沒個統(tǒng)一的調(diào)性。

設(shè)計總結(jié)：

? 靠幾何圖形和統(tǒng)一的造型，打造醒目視覺效果

? 少用纖細(xì)、不規(guī)則的形狀

③ 整套風(fēng)格保持一致

這里給大家看一組風(fēng)格統(tǒng)一的圖標(biāo)示例。對品牌識別和系統(tǒng)適配來說，保持圖標(biāo)集的視覺一致性太重要了。

要是把不同風(fēng)格的圖標(biāo)混在一起用，用戶根本沒法把它們當(dāng)成“一家人”。所以同一套圖標(biāo)里，不管是形狀、線條粗細(xì)，還是比例、邊角處理，都得按同一個標(biāo)準(zhǔn)來。

設(shè)計總結(jié)：

? 單套圖標(biāo)集里視覺風(fēng)格要保持統(tǒng)一

? 千萬別混搭不同風(fēng)格的圖標(biāo)

02 圖標(biāo)尺寸怎么選？

在谷歌的Material Design 3 設(shè)計規(guī)范中，標(biāo)準(zhǔn) (基線) 圖標(biāo)尺寸是24dp×24dp，設(shè)計時建議按100%的比例來做，這樣能保證像素級的精準(zhǔn)度。

除了這個標(biāo)準(zhǔn)尺寸，還有20dp、40dp、48dp這幾種常用尺寸可以選：

20dp：適合用在桌面端、緊湊布局，或者那些小尺寸的視覺元素

40dp/48dp：針對顯示器、大屏幕，還有標(biāo)題欄這類特殊場景

03 標(biāo)準(zhǔn)圖標(biāo)布局

設(shè)計圖標(biāo)時，內(nèi)容需要放在有效區(qū)域內(nèi)里。有效區(qū)域是指頁面滾動或適配不同設(shè)備時圖標(biāo)不會被遮擋的“安全可視區(qū)域”。

如果想讓圖標(biāo)的視覺沖擊力更強(qiáng)，可以讓內(nèi)容延伸到有效區(qū)域和裁剪區(qū)域之間的留白處，但不能超出裁剪區(qū)域，不然圖標(biāo)很容易被裁剪顯示不全。

具體要怎么布局呢？看下面這兩點(diǎn)就夠了：

① 有效區(qū)域：圖標(biāo)內(nèi)容要放在20dp×20dp的范圍內(nèi)，四周各留2dp的邊距

② 邊距：給有效區(qū)域留出2dp邊距，既能讓圖標(biāo)和周圍元素拉開視覺距離，又能讓整體看起來更平衡

接下來通過一個圖標(biāo)案例來簡單總結(jié)一下：

上圖從左到右分別代表了在有效區(qū)域、在有效區(qū)域和裁剪區(qū)域、在裁剪區(qū)域之外創(chuàng)建的圖標(biāo)案例。

設(shè)計總結(jié)：

? 圖標(biāo)內(nèi)容保持在20dp×20dp的有效區(qū)域里，記得留2dp邊距?? 想加視覺沖擊力？內(nèi)容可以延伸到邊距區(qū)域

? 任何情況下，圖標(biāo)都不能超出裁剪區(qū)域

① 網(wǎng)格和關(guān)輔助線

一套圖標(biāo)中可能有的是圓形，有的是方形，那怎么才能保證形狀不同的圖標(biāo)保持視覺大小的一致性呢？

這種情況大家在設(shè)計圖標(biāo)時應(yīng)該都碰到過，解決方法可能大多是通過眼睛對比查看，把看著小的圖標(biāo)調(diào)大一些或者把看著大的圖標(biāo)調(diào)小一點(diǎn)。這種方法效率不高，而且設(shè)計出來的圖標(biāo)大小不容易保持一致性。

這里提供一個更科學(xué)和高效的輔助圖標(biāo)設(shè)計方法——使用網(wǎng)格和輔助線，照著這些輔助線來設(shè)計圖標(biāo)，能輕松保持比例一致。

例如常用的24dp×24dp圖標(biāo)網(wǎng)格，由正方形、圓形、豎矩形、橫矩形這四種基礎(chǔ)輔助線構(gòu)成。它們就像圖標(biāo)的“骨架”，能幫所有圖標(biāo)保持統(tǒng)一的比例和對齊效果，哪怕放大10倍看，結(jié)構(gòu)也照樣清晰。

給大家拆解一下這四種輔助線：

方形輔助線：邊長18dp，是圖標(biāo)的基礎(chǔ)平衡基準(zhǔn)。比如圖表類圖標(biāo)就可以照著這個方形來畫，保證比例穩(wěn)定。

圓形輔助線：直徑20dp，用來設(shè)計圓潤平衡的圖標(biāo)。像地球圖標(biāo)用這個圓形打底，就能和其他圖標(biāo)和諧搭配。

垂直矩形輔助線：高20dp、寬16dp，適合強(qiáng)調(diào)縱向比例的圖標(biāo)。比如文檔圖標(biāo)圍著這個豎矩形設(shè)計，比例會特別清晰。

水平矩形輔助線：高16dp、寬20dp，適合橫向比例的圖標(biāo)。像郵件圖標(biāo)用這個橫矩形當(dāng)基礎(chǔ)，形狀會很均衡。

04 圖標(biāo)結(jié)構(gòu)解析

一個完整的圖標(biāo)，由圓角、起始/結(jié)束點(diǎn)、內(nèi)部形狀、外部輪廓等組成。

① 圖標(biāo)圓角

這里重點(diǎn)說下大家容易踩坑的“圓角”的設(shè)計：例如下圖的銀行卡圖標(biāo)，采用外角2dp圓角、內(nèi)角尖角的設(shè)計，這樣既柔和又利落。

如果把圓角做得太大，如下圖左側(cè)文檔圖標(biāo)，圖標(biāo)的辨識度就會下降；如果一個圖標(biāo)中混用不同半徑的圓角，如下圖右側(cè)的圖標(biāo)，整個圖標(biāo)看著就會很雜亂。

設(shè)計總結(jié)：

? 按規(guī)則設(shè)置圓角，統(tǒng)一圓角半徑

? 避免圓角半徑過大/半徑混用的情況

② 描邊粗細(xì)

推薦的圖標(biāo)描邊粗細(xì)是2dp或常規(guī) (400)，也可以根據(jù)需求靈活調(diào)整，例如在MD3設(shè)計規(guī)范中就提供了100 (細(xì))到700 (粗)的多種選擇。

這里有兩個小技巧：

設(shè)計直角線性圖標(biāo)時，描邊的末端盡量做成直角，例如下圖左側(cè)的箭頭圖標(biāo)，45度切割的直角就很清晰；在下圖右側(cè)的添加圖標(biāo)中，內(nèi)部的加號也采用了2dp的描邊粗細(xì)，與外輪廓保持一致。

另外要注意一套圖標(biāo)需要保持相同的描邊粗細(xì)。如果描邊x粗細(xì)不一致，不僅會模糊圖標(biāo)形狀，還會破壞視覺一致性。

設(shè)計總結(jié)：

? 描邊粗細(xì)保持統(tǒng)一，直角圖標(biāo)末端也用直角

05 復(fù)雜圖標(biāo)怎么處理？

如果圖標(biāo)需要一些精細(xì)的細(xì)節(jié)，可以通過一些靈活的調(diào)整來提升辨識度，但不能扭曲基礎(chǔ)的幾何形狀或破壞整體比例。

比如回形針圖標(biāo)，為了在24dp的空間里放下多個曲線，可以把 2dp的標(biāo)準(zhǔn)描邊粗細(xì)微調(diào)成1.5dp；再比如拉面圖標(biāo)，下面的碗作為托底采用2dp的粗描邊，上面的筷子拉面等元素細(xì)節(jié)更多，則采用1.5dp的細(xì)描邊，讓細(xì)節(jié)更清晰。

還有一個小原則：設(shè)計復(fù)雜圖標(biāo)時，盡量保持正面視角，別做傾斜、旋轉(zhuǎn)的等距或者3D效果——多余的深度感會增加識別難度。

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

? 正面視角設(shè)計，細(xì)節(jié)微調(diào)不跑偏

? 少用傾斜、旋轉(zhuǎn)的等距/3D呈現(xiàn)方式

最后

圖標(biāo)是一種高效的視覺語言，能打破語言壁壘，快速傳遞信息。但它的優(yōu)勢，必須建立在清晰的結(jié)構(gòu)和統(tǒng)一的規(guī)則之上。

設(shè)計時基于標(biāo)準(zhǔn)的輔助網(wǎng)格走，保持比例均衡、視覺重量一致，設(shè)計出的圖標(biāo)才不會喧賓奪主，反而能提升整個產(chǎn)品的用戶體驗(yàn)。

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

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

北京蘭亭妙微 UI 設(shè)計公司，成立 16 年來，始終保持著對國內(nèi)外優(yōu)秀設(shè)計作品的學(xué)習(xí)與研究。TravelEase 作為面向中小企業(yè)的 B 端差旅管理平臺，完整落地品牌 VI 系統(tǒng)、PC 管理后臺、自適應(yīng)官網(wǎng)、移動端 H5、社媒營銷物料全鏈路視覺設(shè)計，打通從品牌曝光、線索獲客、后臺操作到付費(fèi)轉(zhuǎn)化全商業(yè)閉環(huán)。本文從行業(yè)差異化定位、用戶分層運(yùn)營、全鏈路產(chǎn)品架構(gòu)、品牌視覺標(biāo)準(zhǔn)化、商業(yè)落地價值五大維度完整拆解，為有數(shù)字化差旅升級需求的企業(yè)提供可落地的設(shè)計參考。

一、商旅賽道市場痛點(diǎn)與雙角色用戶分層設(shè)計策略
1. 行業(yè)現(xiàn)存四大體驗(yàn)短板
出行渠道碎片化：飛機(jī)、高鐵、包車、輪渡需在多個平臺分別預(yù)訂，行政人員需跨平臺匯總行程、票據(jù)，人力損耗大；
企業(yè)預(yù)算無前置管控：員工自主訂票易超出公司差旅標(biāo)準(zhǔn)，財務(wù)只能事后核對，缺少事前政策攔截功能；
線上線下品牌視覺割裂：官網(wǎng)、后臺、宣傳海報、App 圖標(biāo)視覺語言不統(tǒng)一，企業(yè)客戶難以建立穩(wěn)定品牌信任；
多端適配失衡：后臺偏重電腦操作，移動端僅簡化訂票功能，缺少同步行程、查看報表的輕量化入口。

2. 兩類核心用戶差異化界面權(quán)重設(shè)計
決策使用者：企業(yè)行政 / 財務(wù)負(fù)責(zé)人（PC 端核心人群）
核心訴求：批量預(yù)訂、差旅預(yù)算配置、月度統(tǒng)一對賬、員工出行監(jiān)管、多維度差旅報表。PC 后臺采用固定側(cè)邊全功能導(dǎo)航，首頁優(yōu)先展示政策設(shè)置、歷史訂單、賬單匯總模塊，大尺寸表單、多卡片并行布局適配批量辦公操作。
高頻使用者：企業(yè)商務(wù)出差員工（移動端核心人群）
核心訴求：快速查航班、一鍵下單、查看行李額度、隨時改期取消。移動端刪減復(fù)雜管控功能，首屏直接露出交通搜索表單，弱化報表、政策配置等低頻功能，優(yōu)先保障訂票流程輕量化。

二、五階商業(yè)服務(wù)閉環(huán)：從品牌觸達(dá)到付費(fèi)留存完整鏈路
整套設(shè)計圍繞企業(yè) SaaS 商業(yè)轉(zhuǎn)化路徑搭建，每一環(huán)視覺規(guī)范統(tǒng)一，降低客戶認(rèn)知成本，提升轉(zhuǎn)化效率：
品牌識別觸達(dá)層：原創(chuàng)票據(jù)融合飛機(jī)圖形 Logo，衍生線性圖標(biāo)、3D 立體 App 圖標(biāo)、線下門頭標(biāo)識，晴空藍(lán)主色建立高效、安全的出行品牌印象；
公域引流層：標(biāo)準(zhǔn)化社媒信息流海報模板，分實(shí)景實(shí)拍、扁平插畫、行程卡片三類版式，用于社交平臺投放獲客；
官網(wǎng)獲客轉(zhuǎn)化層：PC / 手機(jī)自適應(yīng)落地頁，直白傳遞 “一站式搞定全部商務(wù)出行” 核心價值，搭配輕量化商旅插畫降低 B 端產(chǎn)品理解門檻；
核心操作層：PC 綜合管理后臺 + 移動端輕量訂票頁面，全品類交通預(yù)訂、行李管理、差旅政策配置功能云端實(shí)時同步；
付費(fèi)留存層：階梯式會員套餐頁面，清晰區(qū)分免費(fèi)基礎(chǔ)版、高級付費(fèi)版、企業(yè)專業(yè)版權(quán)益，引導(dǎo)企業(yè)長期付費(fèi)訂閱。

三、四大核心設(shè)計模塊拆解（商業(yè)功能 + 跨端適配雙視角）
模塊 1：統(tǒng)一化品牌視覺資產(chǎn)庫（全項(xiàng)目底層規(guī)范）
Logo 提取機(jī)票票據(jù)為核心識別符號，極簡線性線條適配全場景復(fù)用；主色調(diào)晴空淺藍(lán)，搭配分品類輔助色區(qū)分飛機(jī)、巴士、高鐵等出行工具，建立色彩記憶點(diǎn)；配套統(tǒng)一扁平柔和商旅插畫，飛機(jī)、城市、出差人物形象貫穿官網(wǎng)、海報、后臺空狀態(tài)，全物料視覺語言高度統(tǒng)一，降低多物料產(chǎn)出成本。

模塊 2：PC 端企業(yè)差旅綜合管控后臺（B 端核心操作載體）
采用側(cè)邊常駐導(dǎo)航 + 模塊化白色卡片布局，四大功能分區(qū)清晰劃分：
多交通預(yù)訂區(qū)：頂部 Tab 一鍵切換飛機(jī) / 火車 / 輪渡 / 巴士 / 出租車，機(jī)票表單支持往返、單程、多城行程快速切換；
行程配套信息區(qū)：右側(cè)可視化行李尺寸重量卡片、乘客證件、艙位價格標(biāo)簽，訂票配套信息直觀展示；
差旅政策懸浮配置面板：可自定義航班、酒店預(yù)算上限、星級標(biāo)準(zhǔn)，員工訂票時自動攔截超標(biāo)選項(xiàng)；
常用航司推薦區(qū)：底部橫向滾動展示歷史航班，減少重復(fù)填寫起降機(jī)場的操作步驟。

模塊 3：移動端自適應(yīng)官網(wǎng)與輕量訂票頁面（線索轉(zhuǎn)化載體）
手機(jī)端完整復(fù)用 PC 官網(wǎng)文案、插畫、按鈕視覺規(guī)范，針對豎屏單手操作重構(gòu)信息層級：
首屏超大標(biāo)題直擊企業(yè)差旅效率痛點(diǎn)，藍(lán)色高飽和度行動按鈕 “立即體驗(yàn)” 鎖定視覺重心；
產(chǎn)品核心優(yōu)勢簡化為短句清單，搭配簡約商旅插畫，降低移動端閱讀負(fù)擔(dān)；
會員套餐豎向堆疊排布，適配手機(jī)上下滑動瀏覽，弱化后臺管理功能，聚焦 “免費(fèi)試用” 轉(zhuǎn)化動作。

模塊 4：標(biāo)準(zhǔn)化社媒運(yùn)營物料組件庫（長效獲客配套資產(chǎn)）

預(yù)設(shè)三套可復(fù)用豎版信息流版式，固定 Logo 放置位、文字層級、航班信息卡片組件，運(yùn)營人員僅替換圖片素材即可快速產(chǎn)出宣傳海報，保障對外投放視覺統(tǒng)一，無需每次重新設(shè)計版面，大幅縮減營銷物料制作周期。

四、商旅賽道專屬視覺設(shè)計體系：色彩、卡片、信息層級、多端適配色彩語義體系（商務(wù)出行友好導(dǎo)向）
晴空淺藍(lán)作為品牌主色，傳遞順暢、安心的出行感知；純白作為頁面基底，大面積留白緩解 B 端后臺密集表單的壓抑感；輔助色區(qū)分交通工具：飛機(jī)深藍(lán)、巴士暖橙、高鐵淺紅；功能狀態(tài)色統(tǒng)一：綠色代表可預(yù)訂、灰色無班次、藍(lán)色為核心操作按鈕，全項(xiàng)目色彩語義統(tǒng)一。

輕量化卡片組件規(guī)范
全站統(tǒng)一低圓角、淺淡陰影白色卡片，取消厚重分割線，機(jī)票、行李、會員套餐、社媒素材全部復(fù)用同一卡片規(guī)格，輕量化視覺緩解長時間后臺辦公的視覺疲勞。

信息層級優(yōu)先級規(guī)則
遵循出行數(shù)據(jù)優(yōu)先邏輯：起降機(jī)場、時間、票價、艙位為一級放大核心文字；日期、乘客、行李規(guī)格為二級輔助信息；差旅政策、詳細(xì)條款折疊收納，平衡信息完整度與頁面整潔度。

差異化跨端場景適配邏輯
PC 端側(cè)重多信息并行、批量管控操作；移動端精簡表單，隱藏政策配置、員工管理等低頻后臺功能；線下品牌標(biāo)識強(qiáng)化立體質(zhì)感，線上圖標(biāo)簡化為單色線性，適配電子屏幕顯示。

五、項(xiàng)目落地商業(yè)價值總結(jié)
差異化 B 端賽道壁壘：市面旅游產(chǎn)品多服務(wù) C 端個人出行，本產(chǎn)品深度嵌入企業(yè)預(yù)算管控、統(tǒng)一對賬等行政剛需，精準(zhǔn)切中中小企業(yè)差旅管理痛點(diǎn)，有效提升付費(fèi)轉(zhuǎn)化；
全鏈路標(biāo)準(zhǔn)化視覺降低運(yùn)營成本：從 Logo、官網(wǎng)、后臺到社媒物料統(tǒng)一規(guī)范，減少設(shè)計、前端、運(yùn)營三方重復(fù)工作量，支持產(chǎn)品快速迭代、營銷素材批量產(chǎn)出；
多終端全域場景覆蓋：電腦深度管控、手機(jī)通勤訂票，覆蓋企業(yè)員工全天碎片化出行操作場景，拉長產(chǎn)品使用時長，提升用戶留存；
可復(fù)用標(biāo)準(zhǔn)化設(shè)計體系：整套品牌 + 產(chǎn)品設(shè)計規(guī)范可遷移至同類企業(yè)服務(wù)類 SaaS 項(xiàng)目，具備極高復(fù)用價值，也是我們設(shè)計團(tuán)隊(duì)可落地交付的同類服務(wù)方案。

圖片來自Behance

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