<li id="g3zqm"></li>
短信驗證碼看似簡單的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端產品設計的世界里，色彩不僅僅是視覺元素，它還承載著信息傳遞、用戶體驗和品牌識別的重要角色。蘭亭妙微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。
蘭亭妙微UI設計公司：今天分享的是「圖標設計準則」。圖標是界面設計里的 “剛需元素”，一個小圖標能快速傳遞很多信息。好的圖標需要兼顧簡潔、現代、友好。但圖標的尺寸很小，設計時既要嚴格遵守設計規則，又得清晰表達信息，這樣才能保證整套圖標的風格統一、辨識度高。
今天就來聊聊大廠在用的圖標設計原則和設計規范，配合案例進行設計分析~
給大家舉個例子，就說下面的小船圖標，想讓圖標清晰好認，就得做減法，那么用正面的簡約船身造型最合適。
如果圖標設計的過于細致，例如圖標中添加了船帆、桅桿或者旗幟等細節，太寫實的圖標不僅會降低識別速度，還會破壞整套圖標的視覺統一性。
設計總結：
? 簡化圖標造型，提升清晰度和辨識度
? 拒絕過度寫實，避開復雜繁瑣的設計
使用幾何圖形和統一的基礎形狀來設計圖標，能打造出清晰醒目的視覺感受。哪怕結構簡單，也能保持清晰的形態，縮小到小尺寸時也照樣容易分辨。
反過來講，盡量少用那些纖細、松散的不規則形狀，它們會破壞線條的連貫性，讓整套圖標看起來亂糟糟的，沒個統一的調性。
設計總結：
? 靠幾何圖形和統一的造型，打造醒目視覺效果
? 少用纖細、不規則的形狀
這里給大家看一組風格統一的圖標示例。對品牌識別和系統適配來說，保持圖標集的視覺一致性太重要了。
要是把不同風格的圖標混在一起用，用戶根本沒法把它們當成“一家人”。所以同一套圖標里，不管是形狀、線條粗細，還是比例、邊角處理，都得按同一個標準來。
設計總結：
? 單套圖標集里視覺風格要保持統一
? 千萬別混搭不同風格的圖標
在谷歌的Material Design 3 設計規范中，標準 (基線) 圖標尺寸是24dp×24dp，設計時建議按100%的比例來做，這樣能保證像素級的精準度。
除了這個標準尺寸，還有20dp、40dp、48dp這幾種常用尺寸可以選：
20dp：適合用在桌面端、緊湊布局，或者那些小尺寸的視覺元素
40dp/48dp：針對顯示器、大屏幕，還有標題欄這類特殊場景
設計圖標時，內容需要放在有效區域內里。有效區域是指頁面滾動或適配不同設備時圖標不會被遮擋的“安全可視區域”。
如果想讓圖標的視覺沖擊力更強，可以讓內容延伸到有效區域和裁剪區域之間的留白處，但不能超出裁剪區域，不然圖標很容易被裁剪顯示不全。
具體要怎么布局呢？看下面這兩點就夠了：
① 有效區域：圖標內容要放在20dp×20dp的范圍內，四周各留2dp的邊距
② 邊距：給有效區域留出2dp邊距，既能讓圖標和周圍元素拉開視覺距離，又能讓整體看起來更平衡
接下來通過一個圖標案例來簡單總結一下：
上圖從左到右分別代表了在有效區域、在有效區域和裁剪區域、在裁剪區域之外創建的圖標案例。
設計總結：
? 圖標內容保持在20dp×20dp的有效區域里，記得留2dp邊距?? 想加視覺沖擊力？內容可以延伸到邊距區域
? 任何情況下，圖標都不能超出裁剪區域
① 網格和關輔助線
一套圖標中可能有的是圓形，有的是方形，那怎么才能保證形狀不同的圖標保持視覺大小的一致性呢？
這種情況大家在設計圖標時應該都碰到過，解決方法可能大多是通過眼睛對比查看，把看著小的圖標調大一些或者把看著大的圖標調小一點。這種方法效率不高，而且設計出來的圖標大小不容易保持一致性。
這里提供一個更科學和高效的輔助圖標設計方法——使用網格和輔助線，照著這些輔助線來設計圖標，能輕松保持比例一致。
例如常用的24dp×24dp圖標網格，由正方形、圓形、豎矩形、橫矩形這四種基礎輔助線構成。它們就像圖標的“骨架”，能幫所有圖標保持統一的比例和對齊效果，哪怕放大10倍看，結構也照樣清晰。
給大家拆解一下這四種輔助線：
方形輔助線：邊長18dp，是圖標的基礎平衡基準。比如圖表類圖標就可以照著這個方形來畫，保證比例穩定。
圓形輔助線：直徑20dp，用來設計圓潤平衡的圖標。像地球圖標用這個圓形打底，就能和其他圖標和諧搭配。
垂直矩形輔助線：高20dp、寬16dp，適合強調縱向比例的圖標。比如文檔圖標圍著這個豎矩形設計，比例會特別清晰。
水平矩形輔助線：高16dp、寬20dp，適合橫向比例的圖標。像郵件圖標用這個橫矩形當基礎，形狀會很均衡。
一個完整的圖標，由圓角、起始/結束點、內部形狀、外部輪廓等組成。
這里重點說下大家容易踩坑的“圓角”的設計：例如下圖的銀行卡圖標，采用外角2dp圓角、內角尖角的設計，這樣既柔和又利落。
如果把圓角做得太大，如下圖左側文檔圖標，圖標的辨識度就會下降；如果一個圖標中混用不同半徑的圓角，如下圖右側的圖標，整個圖標看著就會很雜亂。
設計總結：
? 按規則設置圓角，統一圓角半徑
? 避免圓角半徑過大/半徑混用的情況
推薦的圖標描邊粗細是2dp或常規 (400)，也可以根據需求靈活調整，例如在MD3設計規范中就提供了100 (細)到700 (粗)的多種選擇。
這里有兩個小技巧：
設計直角線性圖標時，描邊的末端盡量做成直角，例如下圖左側的箭頭圖標，45度切割的直角就很清晰；在下圖右側的添加圖標中，內部的加號也采用了2dp的描邊粗細，與外輪廓保持一致。
另外要注意一套圖標需要保持相同的描邊粗細。如果描邊x粗細不一致，不僅會模糊圖標形狀，還會破壞視覺一致性。
設計總結：
? 描邊粗細保持統一，直角圖標末端也用直角
如果圖標需要一些精細的細節，可以通過一些靈活的調整來提升辨識度，但不能扭曲基礎的幾何形狀或破壞整體比例。
比如回形針圖標，為了在24dp的空間里放下多個曲線，可以把 2dp的標準描邊粗細微調成1.5dp；再比如拉面圖標，下面的碗作為托底采用2dp的粗描邊，上面的筷子拉面等元素細節更多，則采用1.5dp的細描邊，讓細節更清晰。
還有一個小原則：設計復雜圖標時，盡量保持正面視角，別做傾斜、旋轉的等距或者3D效果——多余的深度感會增加識別難度。
設計總結
? 正面視角設計，細節微調不跑偏
? 少用傾斜、旋轉的等距/3D呈現方式
圖標是一種高效的視覺語言，能打破語言壁壘，快速傳遞信息。但它的優勢，必須建立在清晰的結構和統一的規則之上。
設計時基于標準的輔助網格走，保持比例均衡、視覺重量一致，設計出的圖標才不會喧賓奪主，反而能提升整個產品的用戶體驗。
蘭亭妙微（藍藍設計）m.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微（藍藍設計）m.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
用于概括單節點核心業務內容，建議控制在 10 字以內；若標題文字過長，橫向布局極易擠壓界面、破壞整體排版，需更換步驟條樣式適配。
適配步驟數量：最優區間 4-8 步；3 步以內流程使用縱向布局會造成頁面空間浪費。
轉載：人人都是產品經理
蘭亭妙微（藍藍設計）m.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
騰訊 CoDesign 誕生于2019年，最早以「設計云-工作臺」的定位開始服務騰訊內部。在2020年從設計門戶拆分為獨立產品與品牌 CoDesign，并于同年開始對外服務。
在產品對外服務的過程中，產品一直在進行高速的產品能力與體驗優化迭代，產品所服務的用戶類型也在不斷豐富。
今年，CoDesign 為滿足更多類型用戶的協作與體驗訴求，在產品資產管理結構與權限、數字資產管理能力上進行了大幅度的升級；以及設計云產品生態的逐漸成熟與對生態品牌運營的規劃，都對 CoDesign 的品牌與體驗有著迫切的升級訴求。
今年上半年，CoDesign 的品牌與體驗升級的設計工作幾乎在同一時間啟動，產品體驗升級工作也面臨著多個挑戰。
在與項目組、品牌團隊多次溝通后，我們決定通過以下策略解決產品體驗升級所面臨的挑戰：
一、產品體驗升級工作構成涉及到產品、交互、視覺、研發各個層面。首先，我們需要明確具體的體驗優化項，并將其定位到具體層面，制定出體驗優化的前置工作與規劃。
二、結合新的產品升級方案，梳理經典頁面結構。結合競品分析，構建出具有差異化的體驗基調。
三、最后，為了進一步加強產品體驗與競品的差異性，完善「推廣視覺」到「產品視覺」的品牌體驗閉環。我們將產品內觸點進行進一步拆解，并在品牌聲量象限中定位，結合設計核心（Design DNA）進行延展應用。
我們對當前版本進行全方位視覺及體驗走查，并且整理用戶反饋的缺陷問題，發現了 70 多個交互、視覺以及開發還原上的問題。總結歸納為框架擴展性不足，體驗不統一，效率低，品牌感知弱。
首先在交互上，我們的交互同學對產品原則，全局定義，通用流程，頁面框架，標準組件，文案規范進行進一步的定義和梳理，保證交互的規范性和一致性。
其次在視覺上，我們基于 1.0 的問題，在 2.0 上明確了形，色，構，質，大小，間距，組件等規范用法，并對其進行文檔化。以便在后續工作中形成更加嚴謹的設計規范，來保證多人合作中大家從開始的思維一致到最后產出的一致。
再次在研發上，我們將基礎組件和業務組件分開維護，基礎組件代碼我們從 Ten 切回 TDesign，極大地提升了組件的通用性和定制化，并參考 TDesign 的 Token 規則，定制 CoDesign 的基礎組件樣式。同時在業務組件上，我們將具有通用性組件進行抽離，（例如卡片組件）單獨構建成為標準組件。保證研發異地合作組件樣式的統一性，提高效率。
「 項目開始之初，不用急于陷入方案細節設計中，可以針對已知問題，拉通團隊其他成員，對整體方案中各職能團隊的前置工作進行初步規劃，有助于后續工作中團隊成員工作流的無縫銜接。」
2.1 結合產品方案，定義經典頁面結構
梳理整站經典頁面類型，結合產品新的界面框架方案，以一級功能模塊舉例：
定義一級功能模塊，二級功能模塊，各功能詳情頁，子模塊表單頁的頁面結構。
2.2 國內外競品分析，構建差異化頁面結構
我們針對國內外優秀競品進行研究分析，提取其中的共性特征，發現競品常用的頁面結構分別為：
從以上頁面結構分析上，大致總結下構建差異化頁面結構需要考慮的方向是：功能和內容的分割方式，內容區的展示方式。
那在整個體驗升級，CoDesign 的所有工作都圍繞著一個核心理念——「內容設計」。所謂內容設計，是我們希望用戶在使用工作臺時，不受其他因素的干擾，專注于內容本身。
所以在 CoDeisgn 的頁面結構上，我們和市面上主流競品做了差異化處理，新版本我們打破了傳統內容分割的方式，在 Z 軸的空間上分出功能區域和內容區域，打通左側導航和頂部操作欄的功能區域，將內容聚攏重點突出。去掉大量界面中的線與框，減少頁面非必要元素露出，使其目光可以聚焦在內容本身，讓整個頁面層級清晰的同時帶來簡約的視覺感受。
「 不管是平面，左右還是上下結構，都沒有絕對的好與壞，取決于我們希望用戶的視覺落點和視覺動線在哪，例如在一個平面結構中，人們的視覺落點往往是最重的顏色或者最大的文字等，相對應你的視覺動線就在依次去找第二，第三「重」的內容，那當這個平面中增加了空間維度，依然是先看到最「重」的內容，只不過因為有了前后的關系，在視覺感官上你會區分前后內容的重量對比。
結合 CoDesign 首頁頁面結構設計最終效果圖，你會發現首先視覺落點在前景白色內容區的內容卡片上，緊接著視覺動線來到后景用戶高頻操作的新建操作，最后是左側導航欄的區域。」
我們將產品內觸點進行進一步拆解，并在品牌聲量象限中定位，結合品牌聲量象限的設計要求以及設計核心（Design DNA）進行延展應用。
3.1 品牌色
基于品牌標志延展出基礎的品牌色規則，并且為了兼顧多觸點的應用，我們在品牌主色基礎上降低了色彩的飽和度，延展出一系列輔助色，提供了較為豐富的色彩運用，同時為頁面帶來了更為輕盈，靈動的視覺感受。最后再根據品牌聲量象限，指導不同品牌出點的顏色使用。
3.2 輔助圖形
為了塑造統一的品牌語言，我們從品牌標志中提取基礎輔助形，設計了一系列延展圖形，打造多樣化極具品牌調性和視覺表達。
3.3 品牌特征延展
通過品牌特征的運用，賦予圖標、登錄頁、演示文件、空頁面等應用場景更明確的品牌識別性，進一步強化統一品牌認知。
CoDesign 圖標
CoDesign 登錄頁
CoDesign 演示文件封面
CoDesign 空狀態
CoDesign 分享頁&加載
CoDesign 核心界面效果展示
「 品牌視覺和產品視覺是相輔相成的，如何讓用戶有清晰的品牌感知，往往來源于一些細小的場景品牌運用，這也是視覺一致性的重要體現。」
4.1「一個」樣式
我們在每一個組件的設計與規劃中，都盡可能的照顧在多場景的兼容性。例如卡片組件的設計，1.0 的卡片設計，我們有著各種不同的樣式，比例，間距等；新版設計中我們將內容卡片進行了結構化處理，采用了一樣的視覺語言，框架，裁切方式，甚至開發邏輯，來增強視覺的統一性 ，減少維護成本的同時，兼容更多的場景。
4.2「一種」框架
設計開始規劃時，我們就用一套顏色 Token 搭建起設計和開發之間界面樣式的映射關系，為未來暗黑模式適配打下基礎。
新版的頁面結構設計，也為不同屏幕設備提供更好的兼容性。
4.3「一套」視覺語言
隨著整個設計云生態的品牌形象的更新和統一，然而各個子產品內的視覺風格還是各異，那未來 CoDesign 會作為設計平臺的連接器，我們也有意識的讓新版的視覺風格延續到各大平臺，來保持一致的視覺語言。那目前我們已經陸續讓這套視覺風格延續到了設計云企業管理后臺，OpenDesign，設計走查像素眼。
在視覺團隊多人協作中，我們統一了協作環境，全文件的 Figma 化，并且將產品設計、運營設計組件化，方便團隊成員使用更加靈活高效。
在視覺、研發多人協作中，設計與研發統一使用 TDesign 基礎組件，保證基礎組件一致性；業務組件在業務拓展過程中由業務開發獨立建設并維護，在最后通過視覺樣式 Token 化，建立設計和開發之間界面樣式的映射關系。
以上內容是基于 CoDesign 體驗升級應用過程中的一些關鍵策略及執行思路。
總體來說，我們在這個版本的設計上，除了不斷解決產品的訴求和用戶反饋的體驗問題之外，還在努力提升設計（交互、視覺）及研發一致性，構建可輔助團隊標準化的設計、研發的 Token 及組件庫；打好底層基礎框架，未來 CoDesign 會增加更多的功能，輻射更廣業務。我希望這些基礎面的建設，能帶來整個平臺一致性的用戶體驗。
轉載：人人都是產品經理
蘭亭妙微（藍藍設計）m.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
藍藍設計的小編 http://m.hengshangtqd.cn