<li id="g3zqm"></li>
做B端或者門戶網站設計的寶子們看過來！今天分享一個蘭亭妙微原創作品——非常典型的行業門戶改版案例。
這種傳統垂直行業的網站，容易出現的問題就是“界面老化”和“信息雜亂”。這次改版的核心目標非常明確：在保持權威性的同時，提升視覺美感和交互體驗。來看看設計師是怎么化腐朽為神奇的吧！
一、 項目背景：打破沉悶
原網站作為中儲棉花信息中心的直屬網站，雖然內容權威，但視覺呈現已經跟不上時代，關鍵信息呈遞雜亂，用戶閱讀體驗較差。 改版重點：
重塑形象：契合用戶需求與市場期待。
交互升級：實現視覺美感與流暢性的融合。
信息降噪：讓專業權威的訊息更易讀。
二、方案探索：風格博弈
蘭亭妙微設計團隊給出了三種截然不同的主頁方案，這個思考過程很值得參考：
方案1（藍色系）：主打國際化，創新的報告布局動效，內容條理更清晰。
方案2（綠色系）：優化資訊層級，布局穩重，強調信息的易讀性。
定稿方案：結合了視覺美感與功能性的平衡點。
三、 核心優化亮點（劃重點！）
這次改版不僅僅是換個皮，在交互細節上做了很多巧思：
1、資訊層級重構
痛點：舊版內容分類不清晰。
解法：將文字標題分為“置頂/推薦/往期”三個等級。首屏位置就能展示不同重要性的推薦內容，主次分明，用戶一眼就能抓取重點。
2、檢測報告動效化
痛點：舊版是枯燥的列表，很難快速定位特定報告。
解法：進行了模塊分類整理，增加了鼠標移入的動效展示。詳情頁顯示信息與簡要描述，通過“往期”可回溯，極大增加了趣味性和互動性。
3、地圖可視化交互
亮點：在地圖上直觀反映供求公司。
功能：支持通過篩選快速獲取某地區棉花信息，清晰查看產業總數據與各地占比，把枯燥的數據變成了直觀的地理信息。
四、設計感悟
對于這種B端門戶類項目，設計的難點往往不在于“炫酷”，而在于如何在海量信息中建立秩序。通過層級劃分、動效引導和數據可視化，讓專業內容變得“平易近人”，這才是高級感的來源。
大家在做類似項目時，也可以多參考一下這種資訊層級的處理方式哦！
轉載：優設
蘭亭妙微（藍藍設計）m.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微（藍藍設計）m.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
短信驗證碼看似簡單的6位數字，實則暗藏復雜業務鏈路與風控挑戰。從游戲行業的賬號體系保護，到黑灰產攻防的成本平衡，短信防控需要在體驗、安全與通道穩定性間尋找微妙的平衡點。本文將深度拆解短信風控的三層防御體系，揭秘那些隱藏在發送按鈕背后的業務邏輯與產品設計哲學。
最近 vibe coding 很火，一句話可能就能生成一個登錄框。輸入手機號、點擊獲取驗證碼、填驗證碼、完成注冊，看起來非常順滑。但真正做過賬號體系的人都知道，登錄框只是冰山露出來的一角。它下面藏著短信通道、驗證碼校驗、賬號注冊、設備識別、渠道投訴、供應商評級、黑名單聯動等一整套業務鏈路。
游戲行業尤其明顯。游戲是典型的大 ToC 業務，用戶規模大、賬號價值高、充值場景多、權益體系復雜，只要一個手機號能注冊賬號，背后就可能對應禮包、首充、拉新返利、渠道結算、虛擬資產交易等利益。利益足夠大，黑灰產自然會圍上來。
短信驗證碼本身又是一個很特殊的入口。正常用戶收不到驗證碼，會影響注冊轉化；異常請求大量消耗短信，會帶來直接費用；更嚴重的是，如果某個短信簽名短時間內投訴過多，運營商和通道商可能會對簽名降頻、攔截，甚至封禁。到這個時候，受影響的就不是幾個異常手機號，而是整條正常業務鏈路。
我之前做過一段時間短信產品經理，對短信下發機制有一些了解。最近在賬號風控治理中又重新接觸短信相關防控，發現短信這件事看似基礎，但真正要做好并不簡單。它不是單純“加一個驗證碼”或者“限制一分鐘一次”就能解決的問題，而是要在成本、體驗、識別能力和處置策略之間不斷平衡。
這篇文章不講短信供應商商務選型，也不講具體攻擊腳本。這里我只從產品和風控落地視角，聊一聊比較通用的短信防控實踐。
很多團隊做短信防控，第一反應是卡“發送驗證碼”這個動作。這個方向沒錯，但不夠。一條驗證碼短信從用戶點擊按鈕開始，至少會經過五個關鍵環節：用戶請求、基礎頻控、風險決策、短信網關、驗證碼提交。短信發送成功也不是終點，后面還要看驗證碼是否被提交、是否注冊成功、是否觸發投訴。
如果只看發送動作，就會漏掉很多重要信號。比如某批請求發送頻率并不高，但驗證碼提交幾乎都是秒過；某批手機號分散在不同 IP 上，但設備指紋高度相似；某批請求沒有造成注冊成功，卻造成大量短信投訴。這些都不是單點頻控能發現的。
所以短信風控的目標不是“讓短信少發”，而是讓該發的短信穩定發出去，讓不該發的請求在合適的位置被攔下或被二次驗證。
這句話聽起來像廢話，但它決定了產品設計方向：不能只追求攔截率，也不能只追求用戶體驗。規則太緊，正常用戶注冊會受影響；規則太松，短信通道和賬號體系都會暴露在風險里。
我會把短信防控拆成三層：成本門檻層、行為識別層、分級處置層。
第一層是成本門檻層，用低成本規則擋住最明顯的異常請求。第二層是行為識別層，通過設備、請求、提交行為、黑名單等多維數據識別復雜機器流量。第三層是分級處置層，對疑似風險請求不簡單誤殺，而是通過上行短信、掃臉、人機挑戰等方式進一步確認。
短信風控最基礎的能力一定是頻控。不要嫌它簡單，很多線上事故就是因為最基礎的頻控沒做好。
頻控通常圍繞手機號、IP、設備、賬號、業務場景展開。比如同一手機號 1 分鐘內最多發送 1 次，1 小時最多發送 5 次，24 小時最多發送 10 次；同一 IP、同一設備或同一瀏覽器指紋也要有對應閾值。
這里有一個容易被忽略的問題：自然時間和滾動時間。
自然時間是按照固定時間邊界計數，比如“今天 0 點到 24 點最多 10 次”。滾動時間是從當前請求向前回看，比如“過去 24 小時最多 10 次”。對于短信風控來說，最佳實踐通常是滾動計數。
為什么？因為自然時間存在邊界漏洞。假設系統按自然日計數，攻擊者可以在 23:58 打滿當天額度，0:01 之后額度清零，又繼續請求一輪。規則看起來沒問題，實際防控被時間邊界繞開了。
滾動時間實現成本更高，尤其在數據量大時會涉及緩存、滑動窗口、聚合統計，但它更符合風控場景。產品經理在寫需求時，不要只寫“24 小時最多 X 次”，最好明確口徑：是自然日還是過去 24 小時；是按手機號計數，還是手機號 + IP + 設備組合計數；命中閾值后是直接攔截，還是延長冷卻時間。
除了頻控，圖形驗證碼也是成本門檻層的重要工具。很多人覺得圖形驗證碼很基礎，但從攻防視角看，它貫穿整個短信盜刷防控過程。
常見的圖形驗證碼包括滑動拼圖、文字點選、圖標點選、語序選詞、空間推理、障礙躲避等。驗證碼的價值不只是“讓用戶做一道題”，而是提升機器請求成本，并給系統提供行為數據，比如軌跡是否自然、完成時間是否異常、同一設備是否高頻通過。
當然，驗證碼不是越難越好。注冊登錄是高轉化場景，如果一上來就給所有用戶彈復雜驗證碼，正常用戶會被一起懲罰。更合理的方式是分層觸發：低風險用戶無感通過，中風險用戶觸發輕量驗證碼，高風險用戶觸發更強驗證。
號段識別也屬于基礎能力。比如 170、171、165 等虛擬運營商號段在某些業務里風險更高，可以根據業務情況做更嚴格的策略。但不建議把虛擬號段簡單等同于黑名單，直接全量攔截會帶來誤傷。更穩妥的做法是提高驗證等級、降低發送頻次、疊加設備和 IP 風險判斷。
成本門檻層解決的是“別讓明顯異常請求輕松進來”。它不追求特別聰明，但必須穩定、清晰、可解釋。
第一層規則可以擋住一部分粗糙流量，但擋不住更成熟的黑灰產。成熟黑產不會只用一個 IP、一個手機號、一個設備猛沖，它會拆散請求，分布式地試探系統閾值。這時候就需要進入行為識別層。
行為識別層的核心是多維數據。產品上至少要能拿到手機號、IP、設備指紋、賬號、渠道、業務場景、驗證碼生成時間、驗證碼提交時間、提交結果、失敗次數、請求來源、前端環境等信息。沒有這些埋點，風控就只能靠猜。
設備指紋是這里的關鍵能力。它不是單純拿一個設備 ID，而是綜合瀏覽器、系統、分辨率、時區、字體、Canvas、網絡環境、客戶端版本等信息，生成相對穩定的設備標識，用來識別“換手機號、換 IP，但設備特征高度相似”的請求。
前端請求加密和參數校驗也很重要。它不能從根本上防住所有攻擊，但可以提高腳本化請求門檻。比如短信發送接口不應該裸奔，前后端需要對關鍵參數、時間戳、隨機串、業務場景進行校驗，避免接口被直接復用。注意，這類能力的定位是提高成本，不是絕對安全，真正的風控仍然要靠服務端決策。
驗證碼提交行為同樣值得關注。正常用戶收到短信后，通常會有一個閱讀和輸入過程。如果大量驗證碼都在極短時間內提交成功，就要懷疑是否存在接口自動化、短信接收平臺、批量控制設備等風險。這里不用把規則寫死成“多少秒一定異常”，而是結合業務基線做分層判斷。
黑名單庫是行為識別層的另一個基礎設施。它不應該只是一個靜態表，而應該是動態更新的風險資產庫，至少包含以下幾類：
黑名單最怕兩個問題：一是更新慢，等運營手動導入時風險已經過去；二是沒有過期機制，半年以前的風險數據一直影響正常用戶。比較好的方式是給名單設置來源、等級、命中原因、過期時間和復核機制。
行為識別層的重點不是把規則寫得多復雜，而是把原本分散的數據串起來。手機號、IP、設備單獨看都正常，組合起來可能就不正常。風控能力的差距，很多時候就在這個“組合判斷”里。
短信風控最難的地方，不是攔截黑產，而是不誤傷正常用戶。尤其在游戲業務里，用戶注冊和登錄往往發生在高情緒場景：新游開服、活動領取、好友邀請、充值回流。這個時候如果正常用戶收不到驗證碼，或者被連續攔截，很容易直接流失。
所以對疑似風險請求，不一定要直接攔截。更好的方式是分級處置。
低風險請求直接放行；中風險請求增加輕量驗證，比如圖形驗證碼或冷卻時間；高風險但不確定的請求增加強驗證，比如上行短信、人臉識別、實名校驗；已確認風險請求再直接攔截。
上行短信是一個特別值得重視的能力。所謂上行短信，就是用戶主動發送指定內容到指定號碼，系統收到后完成驗證。它本身不復雜，但在實踐中并不是所有短信供應商都能穩定支持上行能力，而且接入、解析、回調、狀態同步都需要額外建設。
為什么它有效？因為它把驗證動作從“企業給用戶發短信”變成“用戶主動發短信給企業”。對正常用戶來說，雖然多了一步，但能完成；對批量盜刷來說，成本會明顯上升。尤其在疑似風險但不敢直接攔截的場景，上行短信是一個不錯的中間態。
掃臉、人臉識別、實名校驗也屬于強驗證手段，但要謹慎使用。它們的驗證強度高，用戶打擾也高，不適合放在短信發送前的常規鏈路里。更合理的觸發場景是：高價值賬號、疑似批量設備、異常領取權益、異常充值返利、賬號找回等風險更高的業務節點。
把這些動作放在一起看，可以整理成一張風險分級處置矩陣。它的價值不是給所有業務一個固定答案，而是幫助產品、風控、研發和客服對齊“什么情況該怎么處理”。
這里有個產品細節：強驗證的提示文案要解釋清楚。不要只彈一句“請求異常”，可以寫成“當前環境存在安全風險，為保護賬號安全，請完成驗證后繼續”。這類文案不是為了好看，而是為了減少用戶的不確定感和客服壓力。
分級處置層的本質是把風險決策從“是/否”變成“放行/觀察/驗證/攔截”。這會讓系統更復雜，但也更符合真實業務。
如果要把短信風控真正跑起來，前臺策略只是其中一部分，后臺能力更重要。
第一套是規則配置后臺。產品和風控同學需要能按業務場景配置規則，比如注冊、登錄、換綁、找回密碼、領取禮包分別使用不同閾值。不要把所有場景套一套規則，注冊場景可以更嚴格，登錄場景要更重視老用戶體驗，找回密碼則要更重視賬號安全。
規則配置后臺最小要支持“業務場景、統計維度、時間窗口、處置動作”四類配置。配置粒度太粗，規則會互相誤傷；配置粒度太細，又會難以維護。比較穩妥的方式，是先搭一個能覆蓋 80% 場景的基礎模型。
第二套是監控看板。短信風控必須看數據，至少包括發送請求量、發送成功率、驗證碼提交率、注冊轉化率、攔截量、強驗證通過率、短信成本、供應商失敗率、投訴量、簽名狀態等。只看攔截量沒有意義，攔截量升高可能代表風控有效，也可能代表正常用戶被誤傷。
監控看板的核心不是把指標堆滿，而是同時回答三件事：黑產有沒有變多、正常用戶有沒有受傷、短信通道有沒有變差。
第三套是應急開關。短信通道一旦異常，影響會非常快。比如某個供應商失敗率升高，要能快速切換通道；某個規則誤傷，要能快速降級；某個簽名投訴異常，要能暫停對應場景或切換備用簽名。沒有應急開關，風控系統本身也會變成風險源。
我個人建議，每一條核心規則都至少配三樣東西：命中原因、處置結果、回滾方式。命中原因用于排查，處置結果用于復盤，回滾方式用于止損。
還有一個容易被忽略的點：短信風控需要和客服對齊。用戶收不到驗證碼時，第一反應通常是找客服。如果客服后臺看不到用戶為什么被攔截，只能回復“請稍后再試”，體驗會非常差。
第一個坑，是把短信成本當成唯一目標。短信確實有成本，但短信風控不是省錢項目。它的核心價值是保護賬號體系、保護通道穩定性、保護正常用戶體驗。如果只盯著短信費用，很容易把規則收得過緊，最后省了短信費，丟了注冊轉化。
第二個坑，是只做發送頻控，不做提交校驗。短信發出去以后，驗證碼是否提交、提交是否成功、多久提交、失敗幾次，都是重要信號。只管發送不管提交，就像只看門口排隊，不看進店以后發生了什么。
第三個坑，是規則沒有分場景。注冊、登錄、換綁、找回密碼、支付確認的風險完全不同，規則必須和業務語義綁定。
第四個坑，是黑名單只進不出。風控名單不是垃圾桶，不能什么都往里扔。沒有過期、沒有降級、沒有復核，時間久了必然誤傷。
第五個坑，是把圖形驗證碼當萬能藥。驗證碼能提高攻擊成本，但也會提高用戶成本。它應該是動態策略的一部分，而不是所有用戶都必須跨過的一堵墻。
短信本身是個很簡單的服務：生成驗證碼、調用供應商、用戶收到、輸入校驗。簡單到很多人會覺得這不就是一個接口嗎？
但在真實業務里，短信又一點都不簡單。它連接著賬號注冊、用戶體驗、營銷成本、通道穩定、投訴治理和黑灰產攻防。尤其在游戲這種高用戶量、高利益密度的行業里，短信入口做不好，后面會牽出一串問題。
我理解的短信防控，不是單純把黑產擋在門外，而是建立一套可持續的平衡機制：前面用成本門檻層擋住明顯異常，中間用行為識別層判斷復雜風險，后面用分級處置層減少誤傷。再配合規則后臺、監控看板、應急開關和客服可解釋能力，整個體系才算真正能跑起來。
回到開頭說的 vibe coding。AI 可以很快幫你做出一個登錄框，但登錄框之下的業務，不會因為頁面生成得快就自動消失。短信風控就是這類“看起來不起眼，但出了事很疼”的底層能力。
產品經理真正要補的，往往不是某個按鈕怎么畫，而是按鈕按下去之后，系統如何判斷、如何保護、如何兜底。
短信驗證碼只有 6 位，但它背后的產品設計，遠不止 6 位。
轉載：人人都是產品經理
蘭亭妙微（藍藍設計）m.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
轉載：優設
蘭亭妙微（藍藍設計）m.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
X 上看到一個 Codex 的使用案例，將 Codex 內置一個圖片標注工具，這樣修改標注工具里的圖，Codex 就能讀取數據進行重新生成，案例分享給大家
通過內嵌瀏覽器 + Codex Image 2 + 無限畫布（Excalidraw / tldraw），構建一個多模態畫布系統，讓 Codex 直接讀取畫布的 Base64 標注圖，實現“看圖理解 + 生成”。
這樣 Excalidraw / tldraw 就不只是白板，而是變成前端的 Multi-modal Canvas，用來拼一個低配但可控的生圖工作流。
其他在線白板工具：
此想法的原帖： 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
標簽頁分組功能允許您在 Figma 桌面應用程序中對標簽頁進行分組、著色、展開和折疊。保持井然有序，再也不用擔心找不到要查找的文件。
網址：https://www.figma.com/release-notes/
FigmaEX 客戶端已經更新到 126.6.8 版本，可自行下載安裝。
展示收藏了非常多 iOS 的經典應用圖標，并支持搜索，非常喜歡被精心設計的圖標包圍的充實感，后續會開放 macOS 應用圖標庫。
網站收集了一波應用商店的優化圖片和用戶引導流程的設計案例。
App Store 截圖庫包含，350 萬+ 截圖 、40 萬+ 應用，永久免費
網址：https://screenshotsclub.xyz/
每個應用程序都需要矩陣加載器，55+個免費且開源的加載器，基于 React、TypeScript、Tailwind CSS 和 shadcn 構建。安裝一個，復制代碼，然后將其變成屬于你自己的作品。
網址：https://dotmatrix.zzzzshawn.cloud/
精選 X 中設計、交互的最佳設計，每日更新，并且還有應用截圖和應用圖標等信息，AI 時代提升"看"的能力
umanmade 是一個由真人創作的數字作品精選目錄，收錄優秀的設計靈感和交互案例
免費的、隨時可用的 Figma UI 塊庫。 復制任意組件，將其粘貼到你的文件中，即可立即開始構建。 非常適合著陸頁、布局和 UI 部分。
網址：https://blocks.lander.studio/
轉載：優設
蘭亭妙微（藍藍設計）m.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微ui設計公司分享：當AI能夠深度理解'團圓經濟'的情感密碼，節日營銷正在從流量爭奪升級為心智滲透的精準戰役。58同城在中秋期間以'好崗離家近'為核心，通過AI生成融合城市地標與職業場景的個性化視覺，在6大城市實現千萬級曝光的同時提升簡歷投遞量40%。這場品效合一的實踐揭示了一個關鍵趨勢：AI不再是冰冷的效率工具，而是情感共鳴的放大器——它讓招聘廣告從信息堆砌轉向情感連接，真正實現了品牌溫度與業務增長的雙贏。
當招聘廣告超越“崗位羅列”的刻板模式，設計便成為承載這份向往的情感橋梁。
今年中秋，58同城以“好崗離家近，中秋真團圓”為核心，聚焦本土情結濃厚的二三線城市，發起一場整合營銷。
本文將拆解這場戰役中，AI賦能的設計創新如何不僅實現千萬曝光與百萬業績增長，更讓招聘營銷升維為助力人們“歸鄉筑夢”的情感依托，讓歸鄉就業的美好愿景通過視覺語言落地生根。
項目首先基于人口特征、營銷資源與業績需求，精準圈定長沙、成都、西安、無錫、南昌五大目標城市。這些城市的共性在于春節/中秋返鄉率超80%，鄉土情結與團圓氛圍尤為濃郁。
執行層面：項目聚焦6大城市的24個核心商圈，選擇電梯內、戶外大屏、公交站亭三大高頻觸達渠道。
主視覺采用“品牌區+創意區”雙分區布局：左側傳遞“好崗離家近”的核心主張，右側則分別針對B端企業（展示招聘實力）與C端求職者（突出崗位優勢），引導“求職者投遞-商家入駐”的雙向轉化。
AI設計的核心價值，在于讓“情感共鳴”與“高效落地”并行不悖。本次項目中，AI技術貫穿創意生成、視覺優化全流程，既精準傳遞“團圓+留鄉”的情感內核，又破解了多城市定制、短周期交付的效率難題，實現雙重突破。
設計提案方向：
設計緊扣“中秋團圓”與“留鄉就業”的雙重訴求，以主題文案將求職需求與家庭情感深度綁定，精準觸動目標人群的“本土情結”。
創意構思沿兩個方向展開：
「中秋+商圈實景」方向提案：
快速建立“本地招聘”的直觀認知，通過融合城市地標與品牌色，結合 “中秋團圓” 節點，延續 “好崗離家近” 的核心訴求，同時針對不同城市定制化文案（如西安的“照的見你的未來”、成都的“崗位和火鍋一樣沸騰”），既傳遞就業價值，又契合城市氣質，激活留鄉就業的情感需求。，讓城市印記成為情感紐帶。
「中秋+地標+職業人物」方向提案：
采用真實場景與AI生成插畫人物相結合的方式（如職場女性與城市景觀、特色元素的融合），畫面生動富有層次，打破傳統招聘廣告的單調感。
最終方案：
AI技術在此次項目中深度融入從創意到落地的全流程，實現“多快好省”的突破：
創意圖像生成：借助Topnow等工具，快速合成“中秋+商圈”的定制化場景，使AI元素與實景自然銜接，直觀傳遞信息，降低用戶理解成本。
高效素材處理：
即夢4.0：
字體設計：幾分鐘內完成字體設計方案。
處理圖片：快速調整建筑角度、優化圖片內容，適配戶外大屏的傳播需求，大幅減少后期耗時。
即夢3.0：
生成圖片：月亮的質感與主文案的藝術化呈現，通過 AI 技術實現視覺吸引力，既保證節日氛圍的營造，又讓文案具備強記憶點。
卡通插畫：效果比4.0優秀
在插畫生成上表現卓越，通過精準指令，快速產出風格統一的本地職業形象（如成都外賣小哥、西安青年群體），傳遞“本地工作的愉悅感”，效率遠超人工。
關鍵詞參考：
“一個外賣小哥抱著熊貓玩偶，大步跑，綠色系工作服，開心地笑，黑色單線描邊，扁平插畫，炫彩配色”
“一個女孩面對手機視頻通話，身穿襯衫，坐姿端正，張口說話，居家環境，黑色單線描邊，扁平插畫，橙色系配色”
“5個男女青年，抬頭看前方，一人手指前方，全身，站立，背影，時尚穿搭，黑色單線描邊，扁平插畫，豐富配色”
具體成效：
創意階段：半天生成4個完整方向，傳統方式需2-3天。
多城市適配：快速產出兼具系列感與地方特色的視覺方案。
修改優化：響應客戶反饋的速度提升70%以上。
基于“一套核心視覺，多場景適配”原則，AI擴圖、高清修復，協助快速延展生成線下物料、線上專場Banner、長圖海報等多尺寸物料，確保線上線下品牌形象統一，強化用戶認知。
AI賦能的設計創新，本次設計通過情感、商業、品牌三大邏輯，實現“品效合一”核心目標。讓設計不僅是視覺呈現，更實現了品牌價值與業務增長的雙重落地。
1.情感邏輯：激活本土情結，拉動C端轉化。AI設計精準觸達留鄉需求，讓“像鳥飛往自己的山”不再只是心理期許，而是有具體崗位支撐的現實可能。數據印證成效：長沙、成都、西安等地線上專場簡歷投遞量增長40%，“本地崗位”搜索量上升62%，有效拉動C端用戶參與度。
2.商業邏輯：精準賦能B端，超額完成業績。對B端商家而言，精準廣告投放是核心需求。通過“行業+地域”的定制化廣告設計，有效提升了商家投放意愿與合作轉化。
3.品牌邏輯：沉淀長期認知資產。設計圍繞“貼近受眾、強化認知、促進轉化”原則，將“提供家鄉好工作”的營銷邏輯，拆解為“明月+地標+文案+品牌信息”的直觀的視覺符號組合，降低用戶信息理解成本。通過品牌色、視覺等符號在多場景的重復曝光，持續強化“找本地好工作，就上58”的用戶心智，使品牌從工具平臺升級為“助力團圓”的伙伴，構筑獨特的品牌競爭壁壘。
本次實踐為行業帶來核心啟示：AI是設計師的“超級助手”，其核心價值在于提升效率與精準度。未來的品牌設計應聚焦于 “策略為先，AI賦能，情感共鳴”的融合模式——以策略為導向，用AI提效，最終以情感打動人心。
打動人心的永遠是對人性的洞察和情感的共鳴：
對招聘品牌推廣而言，這打破了“信息堆砌”的傳統廣告模式；對更廣的行業來說，則示范了“AI賦能設計，設計驅動品效”的新路徑。技術終究是工具，而深度的策略思考與人文洞察，永遠是設計師不可替代的核心價值。當AI與品牌策略、情感共鳴深度結合，營銷才能實現真正的突破，為品牌創造可持續的長期價值。
58同城此次中秋品牌營銷項目，正是技術理性與創意感性完美融合的例證。用AI實現高效精準的落地，用設計傳遞深刻的情感價值，最終成就了品牌聲量與業務增長的雙贏，也為行業提供了可復制的品效合一實踐范本。
蘭亭妙微（藍藍設計）m.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
近期蘭亭妙微團隊完成了一個智能制造領域的B端設計項目，今天就來和大家分享一下設計思路和優化過程。
B端產品的設計核心，往往在于如何在復雜的業務邏輯中，理清頭緒，讓關鍵信息高效、直觀地呈現給用戶。這次的優化正是圍繞“高效”二字展開。
在確定整體風格時，我們主要遵循了三個原則：
1、品牌感：采用與客戶品牌一致的色調和設計語言，確保產品系列的統一性，強化品牌認知。
2、簡潔性：頁面設計的核心是“化繁為簡”。我們將重要的數據和預警信息突出展示，減少不必要的視覺干擾，提升信息的可訪問性和可用性。
3、高效性 ：通過精簡的界面布局、扁平的層級結構和直觀的信息展示方式，力求讓用戶在短時間內找到所需信息，從而提高工作效率。
核心設計思考與優化
1、導航重塑：聚焦核心內容
【弱化導航】我們弱化了導航欄的背景，打造沉浸式的瀏覽體驗，讓用戶能將更多注意力聚焦在頁面核心內容上。
【橫向折疊】側邊導航采用了可橫向折疊的設計，在需要時可以收起，為數據展示區釋放出更多橫向空間，承載更多內容。
2、布局重構：信息分區更清晰
我們將整個駕駛艙頁面重新規劃為三個核心區域，讓信息架構一目了然：
【左側導航區】相比頂部導航，左側導航能展示更多條目，且符合用戶從上到下的自然瀏覽習慣。我們增加了收起功能，方便用戶在專注處理信息時大化內容區域。同時，菜單背景疊加工廠的作業場景圖， subtly 突出了軟件的行業主題。
【中間信息展示區】這是頁面的“C位”。頂部是主題卡片和可自定義的快捷入口；中部和下部則是核心數據圖表展示區，圖表顏色嚴格遵循品牌規范，在傳遞信息的同時也強化了品牌感。
【右側個人信息區】將個人信息、待辦事項和報警信息整合為卡片形式。
【待辦任務】這是新增的模塊，根據不同角色的業務人員展示不同的待辦內容，非常實用。
【報警信息】將原有的列表形式進行了優化，重點突出報警等級和標題，讓異常情況更加清晰明了，便于快速響應。
3、數據可視化：提升管理效率
借助圖形化手段，將復雜、抽象的數據條理清晰地傳達出去。我們根據每個模塊的業務性質，為其選擇了合適的圖表類型，讓數據“自己說話”，有效提升了線上管理的效率。
這次設計優化，不僅是一次視覺上的升級，更是對業務流程和用戶體驗的深度思考。
希望這個案例能給同樣在做B端設計的你帶來一些靈感！
蘭亭妙微（藍藍設計）m.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
在B端產品設計的世界里，色彩不僅僅是視覺元素，它還承載著信息傳遞、用戶體驗和品牌識別的重要角色。蘭亭妙微UI設計公司深入探討了色彩空間理論在B端設計中的應用，從基礎的色彩空間概念到如何在實際工作中運用這些理論，為設計師提供了一套科學的顏色搭配和管理方法。
對于 B 端產品而言，我們經常會和顏色進行斗爭。
比如在工作當中，開發沒有正確還原顏色、不知道如何進行色彩配置、以及對于 B 端產品而言，究竟應該如何協調科學的進行顏色的搭配～
最近會講顏色的部分，整體會分為四篇文章：B 端設計如何理解色彩空間、B 端產品怎樣合理搭配顏色、B 端項目的視覺風格、B 端項目顏色的實戰技巧。
本篇文章是第一篇，我們先來聊聊產品配色的基礎 色彩空間與顏色管理。
不知道各位同學是否遇到這種情況，當你在調整顏色時，就是在漫無目的的在拾色器上來回游走，在被問到為什么要選擇這個顏色時，也茫然無措，這時候的你作何感想？
所以顏色還原需要熟練的掌握色彩空間，并配合屏幕進行顏色管理，才能夠讓設計順利落地。但顏色其實過于抽象，因此我們將整體內容進行簡化，多和大家聊聊在理論背后究竟應該如何與工作內容進行結合。
首先我們先說說色彩空間。
色彩空間又叫色彩模型，它是為了讓系統能夠準確地描述顏色、使用顏色，進而定義出來的一種顏色組織方式。
比如有一排隨機顏色，要按特定規則排列，你會怎么做？我相信，我們首先想到的便是按照不同的色相進行歸類。
如果顏色變為10000個，又該怎么排列呢？因此，為了讓企業更好地使用顏色、設計師更便利地選擇一致的顏色，行業中便提出了色彩空間的概念。
色彩空間其實很簡單。因為我們需要使用顏色，且不同人群對顏色的需求不同，所以顏色的排列方式會存在差異。
比如，行業中較為出名的潘通色彩體系，其實是基于印刷行業制定的一種特殊色彩空間；CMYK是為印刷從業者提供的、便于他們更好地進行物料印刷的色彩空間；Lab是一種更強調色彩亮度的色彩空間。
因此，行業會根據顏色的不同規律和自身使用需求，總結整理出不同的色彩空間。
我們目前在工作當中，主要都是聚焦于屏幕當中，因此影響顏色呈現的也就變為：
在我們細致講解色彩空間的部分時，我們先來了解三個重要的概念。
RGB是顯示器當中的顏色基礎。
比如在現實世界當中，我們將手機屏幕進行放大，你會發現屏幕都是由紅綠藍三個燈管所組成的。
而 RGB 的色彩模式就是模擬現實世界當中的屏幕顯示原理，將燈光照射的邏輯在設計軟件當中進行復現，因此在 RGB 的調色盤中，就會分別包含三個輸入框，這便是 紅綠藍。
其中，數字 0 代表不發光、255 則是最亮的燈光。
那為什么最亮是 255，不是 250？或者是 280 呢？
原因在于RGB 所有的顏色，最后都需要通過計算機進行運算顯示，對于它說并不認識 紅色、藍色，在它的腦袋里（不對，CPU 里面）就只有 0 與 1，因此在計算機存儲的時候，一個字節也就是 8 個比特、也就是 2 的八次方、也就是 256，這樣 一個色彩信息等于一個字節，數據存儲就會更加高效。
所以我們所聊的顏色更多指的是代碼層面的顏色設定。
接著我們打開 Figma，看到另一種格式 Hex，那我們稱之為是 RGB 模式的精簡版。
因為它嫌棄每個輸入框都會出現 255（255,255,255 白色）實在太長，不利于我們在日常工作當中進行記錄。
因此將每個顏色，三位數值縮減為兩位數值（十進制變為十六進制），就是增加英文字符的數據，就能較短的表達顏色，使得顏色表達更為高效。
因為 Hex 只是 RGB 的精簡版本，所以 Hex 里面，每兩個字符所對應的就是 紅、綠、藍。
比如我們剛才提到的這個藍色，在 RGB 空間當中為(0,86,255) ，Hex 則是#0056FF，也是一一對應關系。
RGB 聽上去似乎很美好，但問題在于兩點：
1.顏色的調整不夠直觀：作為設計師，我們很難模擬燈光的照射思維對顏色進行調整，具體應該增加多少顏色，其實是不夠清楚的。我們更熟悉的其實是：亮度、色相、飽和度，因此在調色時會十分困難。
比如我目前是紅色，那我要調整到紫色，應該輸入多少值呢？其實我們很難進行一個準確的判斷。
2.顏色信息與亮度信息的數據混合：導致我們很難對于有一個準確的判斷，比如在 RGB 相同的數值當中，明顯會感受到 黃綠色 與其他顏色的亮度存在較大差異，這樣在調色時，顏色一致性偏差較大。
為了解決這些問題，就提出一種新的色彩模型：HSB
HSB （也叫 HSV）就是通過顏色的 色相、飽和度、亮度 來進行表示。
在色相當中，由于顏色的呈現是色環的方式，因此在數值上是以 0-360 度來進行表示的，在設計軟件里面，我們也只能輸入所對應的數值。
同時飽和度與亮度都是以百分比的形式進行呈現，飽和度越低，相對應就會給顏色增加白色，使其更灰；亮度越低，就會增加對應的黑色，讓其更深。
由于 HSB 的色彩空間的分類模式非常有利于我們進行顏色的調整，因此我們在日常調色時其實會經常用到。
比如日常工作當中，假設我們需要設計一組圖標，根據 HSB 顏色的基本原理，我們其實只需要調整不同的色相，就能夠得到不同的圖標顏色。
但… 顏色上依舊會存在問題。
你會發現當我們調整了色相過后，整體的顏色并沒有形成統一。原因在于我們人眼對于 黃綠色的感知 會和紅色、藍色有所不同，我們通常在看黃綠色時會更為刺眼，因此在設計層面上需要單獨調整。
所以在 HSB 當中的顏色邏輯上，也并沒有解決顏色一致性的問題。于是在 2021 年 Google 提出一種全新的色彩模式，HCT。
HCT 首先會將顏色當中的 感知度、亮度 進行結合，對之前的 HSB 重新調整。
在顏色層面上主要分為：Hue：色相、Chroma：色度、Tone：色調
色相與色度和之前基本類似，但色調上優化了黃綠色凸顯問題，讓人眼的感知度也加入到了色彩空間當中，使其顏色更為準確。
同時色彩空間的呈現，優化了顏色漸變的流暢性，我們會發現整體的漸變感覺會更為自然。
那為什么 Google 想要做 HCT？
其實因為 Material Design 當中會強調設計的一致性和靈活性，在功能設計上，需要增加一個根據屏幕當中的圖標生成與其風格一致的壁紙。
但在之前無論什么樣的色彩空間都不能準確的還原顏色。現在就提供了一個可靠的色彩基礎，能夠讓我們在不同的設備、平臺和應用場景下，都能夠生成具有一致性的色彩方案，同時也能更好地適應各種主題和風格的變化，如亮色模式和暗色模式的切換。
比如，還是以上面這個案例，我們使用 HSB 與 HCT 對顏色進行的色相的調整，那得到的結果明顯會發現 HCT 會更加準確。
那 HCT 就真那么完美無瑕？
其實也不然，因為 HCT 色彩空間出現時間較晚，所以在使用上也會有很多問題。
這么深奧的色彩空間，到底要如何使用？
因為 HSB 是設計師最容易理解的色彩空間，因此我們在調色時需要根據數值來進行顏色的調教。
比如說你的顏色很臟，不夠干凈。其實就是在強調 HSB 當中使用了更多的黑色，我們便可以調整到這個色彩空間當中，去增加 B 的值（也就是第三個輸入框）
比如說你的字體很灰，不夠明確。
其實就是在說 你的亮度太高，需要減少亮度，也就是 H 的值（也就是第一個輸入框）
因為每一個屏幕所顯示的顏色其實都不太相同，因此色彩調整時要多看數據，觀察數據之間的對比變化。
比如以 B 端產品的中性色為例，現在系統當中所使用的正文顏色為 #333333，看到過后就明確知道顏色深度不夠、顏色也不透氣。
我們就會按照，先確定顏色色相，為灰色偏藍色，因此在色相當中需要拖動色環找到合適的色相；
緊接著確定飽和度，因為要偏藍色，但不宜過多，因此整體的數值只會在 1-5 之前浮動；
最后確定深度，之前顏色過于淺，需要加深，所以直接減少，變為 22 左右的數值。
其次在判斷顏色時，也會更具章法。
在多輔助色的情況下，我們可以使用 HCT 對顏色進行判斷。
對于日常工作來說，我們可以使用 Figma 當中的 color Space 插件 進行日常的色彩管理。在今后遇到類似同類型圖標時，我們可以使用 HCT 的方式快速生成發散色板，幫助我們進行色彩搭配。
最后在 B 端系統當中，會存在較多顏色搭配的場景。
像是圖表設計、自定義系統主題，原來只能通過系統預設固定顏色的方式進行解決，而現在 Google 也將這套計算公式開源，也就是說程序員可以直接引用 HCT 的色彩空間，將顏色配置的權限給到用戶，通過顏色的調整，呈現用戶想要的顏色內容。
對于屏幕顯示的色彩空間而言，有部分內容我們也是要重點關注。比如在 B 端設計當中，色彩還原老是出問題，那我們就可以通過屏幕的色彩空間進行判斷。
sRGB（standard Red Green Blue）是由惠普公司和微軟公司共同開發的一種標準色彩空間，目的是提供一種通用的色彩標準，使得在不同的設備（如顯示器、打印機等）之間能夠實現相對一致的色彩顯示。
對于 sRGB 來說，它是我們作為設計師最為重要的屏幕顯示色彩空間，因為它通用性強，所以大多數普通的電腦顯示器、網頁瀏覽器等都默認采用 sRGB 色彩空間，這樣在瀏覽網頁、查看普通的數碼照片時，可以獲得比較穩定的色彩效果。
所以我們在做設計時，通常都會將屏幕與軟件，都調整的 sRGB 的空間當中，這樣就能夠最大限度保證色彩的一致。
Display P3 是基于 DCI – P3 色彩空間衍生而來的，主要用于消費級顯示器設備。它在 DCI – P3 的基礎上進行了一些調整，以適應顯示器的特性。
整體而言 P3 色彩空間顯示出來的顏色會更加 生動、艷麗，但是這會和你的設備密切相關。目前行業中只在蘋果設備以及部分高端顯示器才會使用，所以我們在設計時需要考慮自己產品的受眾，這一設備是否普遍使用。
最后，我們總結一下：
蘭亭妙微（藍藍設計）m.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
轉載：優設
蘭亭妙微（藍藍設計）m.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
藍藍設計的小編 http://m.hengshangtqd.cn