<li id="g3zqm"></li>
蘭亭妙微（藍藍設計）www.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微UI設計公司：互聯網時代，品牌的節日營銷是重要的傳播節點之一。
從520、七夕到中秋、圣誕、元旦、春節，用戶情緒在節日中被自然放大，也為品牌提供了集中觸達用戶、強化品牌認知的重要窗口。
在百度品牌營銷中，節日營銷已經成為高頻且穩定的投放節點。
品牌通過開屏、信息流、品專等多觸點場景，在短時間內形成曝光，快速放大聲量。
隨著營銷環境的變化，用戶的注意力愈發稀缺，節日營銷的定義也在發生變化。
節日營銷從單一的品牌曝光、信息觸達，逐漸走向情緒溝通和心智的建立。
節日正在從一個傳播節點，轉變為品牌進入用戶情緒的入口。
這也是我們重新思考品牌節日營銷設計的起點。
節日營銷設計為什么升級
當前節日設計越來越多趨同，問題也開始顯現：
用戶看到了節日，卻沒有記住品牌。
中秋是月亮、圣誕是雪花、春節是紅色。這些符號足夠“像節日”，但不再夠打動人。
過去的節日營銷設計，本質是一種標準化程序化的換膚，
在已有樣式的基礎上替換為顏色、疊加元素、快速形成節日版本。
這種方式高效，但是有明顯的局限：
用戶看到，但沒有情緒共鳴；品牌出現，但是沒有留下記憶；
當品牌開始從「曝光」走向「心智」，
設計，不再只是做節日視覺設計，而是要承擔新的角色，
通過節日，幫助品牌與用戶建立一次情緒的鏈接。
設計的角色，正在發生變化
在品牌營銷體系中，設計的角色正在從“視覺執行”走向“情緒表達”。
過去，設計解決的是好不好看；現在，設計需要回答的是能不能被感知、能不能被記住、能不能觸發行動；
這種角色的變化本質來自兩個點：
1.用戶從接受信息到情緒共鳴，用戶不再被信息打動，而更容易被情緒打動；
2.品牌從曝光到轉化，品牌不僅需要被看到，更需要被記住、被選擇；
因此，設計的價值也在升級，從“表達節日”升級到“激活情緒”。
嘗試讓節日、文化、品牌營銷進行融合。通過設計，讓節日設計不僅被看見，而是被感受到被記住。
從節日元素，到節日情緒
在過去一年的實踐中，我們形成了一個清晰的設計路徑，
不再思考“用什么元素”，而是優先回答“表達什么情緒”，
整體設計流程我們拆分成四步：
1.文化分析，找情緒；
2.元素提煉，確定表達；
3.情感敘事，建立引導；
4.商業場景，承接轉化；
最終形成一套設計方法：先定義情緒，再選擇表達，最終通過場景完成轉化。
設計的不只是畫面，而是一段完整的情緒體驗。
下面圍繞中秋、圣誕、春節三個典型節日展開，
案例一｜中秋：讓月色承載情緒
在中秋節的設計中，我們先思考中秋的情緒是什么？
中秋節更偏向安靜與溫暖，它是一種關于思念和團圓的情緒。
在設計中，我們沒有強調元素的豐富性，而是讓月光成為畫面的核心情緒來源。
整張畫面被橙色的月色包裹，品牌禮盒作為視覺中心，燈籠與窗棱構建遠近景的空間層次，讓情緒在畫面中緩慢鋪開。
用戶感受到的，不只是節日，而是一種被傳遞的心意。
不是月亮本身，而是月光下的情緒。
案例二｜圣誕節：用星光建立引導
與中秋節這種傳統節日不同，圣誕節則是一種外放型的節日情緒，它的文化核心是驚喜和給予。
在眾多圣誕符號中，我們選擇了一個更具文化指向的元素：圣誕星（伯利恒之星）。
在圣誕文化中，這顆星象征著“指引與希望”——它引導人們找到方向，也成為光明與祝福的象征。
因此，圣誕星光不僅是裝飾元素，而是承載節日意義的核心符號。
基于這一語義，我們讓“星光”成為整個畫面的視覺起點與敘事線索。
畫面中，星光從上方落下，形成一條清晰的視覺路徑，最終聚焦品牌產品。
用戶的視線隨著星光的軌跡移動，從節日氛圍自然過渡到品牌信息。
深色的夜空與雪景構建靜謐的節日空間，而星光成為畫面中最有溫度的存在。
我們以星光為核心視覺線索，讓星光軌跡貫穿整個設計場景。
從開屏的星光破窗，到信息流的星軌延展，再到品專的星光匯聚，用戶在瀏覽過程中被星光自然引導，完成從視覺吸引到情感共鳴的轉化。
星光不只是點綴，而是連接節日與品牌的路徑。
案例三｜春節：讓節日流動起來
春節的復雜性，不在于元素的豐富，而在于情緒的多樣。
它既有熱鬧的年味，也有現實的消費動機，還有天然的互動氛圍。
因此我們不再堆疊符號，而是將春節拆分為三種情緒的表達。
基于春節用戶三類核心情緒，我們將方案聚焦為三個方向，表達春節文化溫度的流動，
年味：通過傳統節日元素構造氛圍，讓品牌自然進入節日語境；
好禮：強化商品表達，讓內容本身成為轉化入口；
趣味：結合生肖與互動玩法，提升參與和傳播；
通過傳統節日元素營造氛圍，幫助品牌營造節日氛圍和加深品牌記憶；
我們選取了福字、生肖、紅包等高認知度的春節元素，幫助品牌快速進入春節語境，快速建立春節氛圍，幫助品牌進入春節語境。
春節期間，用戶對送禮買禮品的接受程度是全年最高。
因此在「好禮」這個方向中，我們嘗試打破傳統按鈕形式，讓商品本身成為入口。
在開屏、信息流、品專、品牌百看中，品牌商品都可以以更直觀、更強勢曝光的樣式出現。
春節期間，用戶更愿意停留、互動，也更容易參與輕量玩法。
我們通過生肖IP的設計，并結合簡單的游戲化互動，讓品牌在春節期間不只是被看見，而是被“玩起來”。
最終讓春節不只是被看見，而是讓用戶感受到一種正在發生的熱鬧。
當節日設計開始有溫度
在過去一年品牌廣告打造了七夕、中秋、圣誕、元旦、馬年CNY等節日營銷包，
在節日營銷方案上線前后，我們從用戶、客戶、品牌資產三個維度進行了對比，結果呈現出清晰的增長趨勢：
節日營銷方案上線后，用戶對內容的關注度顯著提升，點擊率提升48%；
設計價值的前置，也帶來了客戶決策方式的變化，客戶樣式復購率提升71%；
設計資產復用率達到90%，多行業多節點快速適配，支撐節日營銷規模化擴展。
節日，從來不只是營銷節點，它是文化的縮影，是情緒的放大器，
更是品牌與用戶之間，最自然的一次鏈接機會。
當設計能夠闡述節日背后的文化語義，并用合適的方式將情緒傳遞出去，
品牌就不再只是出現，而是真正被用戶感知、記住，甚至產生鏈接。
未來，品牌營銷設計不再只是追求樣式的創新，
而是回到一個更本質的問題：
品牌，如何被用戶感受到。
而“有溫度”的設計正是這個問題的答案。
轉載：IXDC
蘭亭妙微（藍藍設計）www.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微UI設計公司:
時間：新店鋪支付模塊上線第二天，早上 10 點。
小A 正在工位上喝咖啡，客服群突然開始連環炸：
用戶A： “我付完錢了，訂單怎么還顯示’待支付’？”
用戶B： “我明明沒付成功，為什么錢被扣了？”
用戶C： “我取消了訂單，錢什么時候退給我？”
小A 趕緊打開后臺一看，傻眼了——
同一批訂單里，“待支付”“支付中”“已支付”“支付失敗”“已退款”五種狀態交叉打架，有的訂單同時出現在”待支付”列表和”已支付”列表里，還有幾筆訂單錢已經進了商戶賬戶、但訂單狀態還停在“支付中”。
她翻出前一天熬夜畫的支付鏈路時序圖，越看越冷汗：
小A 硬著頭皮撥通了老張的電話。
老張聽完小A 的描述，只回了一句：
“你這不是‘支付接口寫錯了’，是把支付當成了一個動作。它不是一個動作，是一條鏈路——而鏈路的地基，就是三件事。”
接著老張發來一段話，小A 把它存成了備忘：
做支付產品，要先分清三件事——
一、交易流：用戶 → 訂單；
二、資金流：錢 → 賬戶；
三、信息流：狀態 → 系統同步。
這三條流在理想情況下一一對應，但在真實生產環境里，它們永遠會錯位。你的產品工作，就是把這些錯位“兜回來”。
在正式拆關之前，先澄清兩個小A 一開始就搞混的認知——也是 90% 新手都會栽的坑：
很多人以為”接入微信支付”= 調一個 API。錯。一次完整的支付涉及 7 個系統 + 2 個異步回調 + N 個狀態流轉。后面關卡二會展開。
訂單篇講過訂單狀態機，但訂單狀態 ≠ 支付狀態。一個訂單”已支付”不代表錢真到賬了，可能只是”支付成功回調到了”。這兩個狀態機必須分開設計、雙軌管理。后面關卡三會展開。
支付結算整套完整拆解要過 7 道關卡，上下篇分開講：
上篇（本篇）· 地基三關 —— 錢怎么進來
第 1 關 · 支付方式全景 —— 用戶能用什么付錢
第 2 關 · 支付鏈路 —— 點“付款”之后發生了什么
第 3 關 · 支付狀態機 —— 錢到底在哪一步
下篇 · 進階四關 —— 錢怎么不出事
第 4 關 · 對賬 —— 財務最怕出事的環節
第 5 關 · 分賬 —— 多方分錢怎么分
第 6 關 · 退款 —— 錢怎么原路退回
第 7 關 · 異常資金池 —— 最后一道防線
上篇講完，你可以獨立設計一個“能把錢收進來”的支付系統；下篇講完，才能做到”錢進來之后不出事”。
小A 的第一個反問：“不就是微信、支付寶、銀行卡嗎？”
老張笑：“電商平臺的收銀臺里，平均要接 12-18 種支付方式。你要是只知道三種，寫出來的 PRD 就只能支撐一個最小 MVP。”
每一種支付方式的存在，都對應著某個特定場景下用戶最低阻力的選擇：
產品經理的第一課：不是選“最好的支付方式”，是覆蓋“用戶觸達時的最低阻力路徑”。
原則一：用戶畫像優先
品牌 X 的數據：
如果不接花唄，高客單商品轉化率會下降 15-20%。
原則二：費率與到賬時效平衡
原則三：接入成本要控制
每接一種支付方式 = 一套對接 + 一套回調 + 一套對賬 + 一套退款。不要盲目追求“支付方式最全”，要評估 ROI。
小A 的第二個反問：“不就是前端調個 API 嘛？”
老張說：“這也是你整天對不上賬的根因——你以為支付是一個動作，它其實是一條鏈路。”
從用戶點擊”立即支付”按鈕，到最終”錢到賬”，一筆支付要經過 7 個系統角色 × 2 次異步回調：
三個真實事故（品牌 X 上月發生）：
這三個事故的解法都寫在訂單篇下篇“支付三道防線”里——但真正在支付結算模塊里實現的，是這些：
防線一：被動回調 + 主動查詢雙保險
– 三方通知到 → 立即更新（最快路徑）
– 超過 30 秒沒通知 → 訂單系統主動反查一次
– 每 30 秒主動查詢，最多查 10 次（共 5 分鐘）
– 任一次成功即完成支付閉環
防線二：全鏈路冪等
– 支付單號（而非訂單號）作為冪等鍵
– 同一支付單號的任何操作（成功通知/失敗通知/查詢響應）都要冪等
– 重復請求的返回值必須和第一次請求一致
防線三：異常資金池
– 所有”錢進賬但找不到訂單”或”訂單已取消但錢到了”的交易，進入異常池
– 72 小時內必須處理完：原路退回 / 人工對賬 / 轉公司應付賬款
– 詳見關卡七
為什么用戶看到的是“支付中”而不是“支付成功”？
答：因為用戶點擊的一刻，錢還沒扣。扣款發生在第 8 步，那時用戶可能已經退出 App 了。
好的設計：
壞的設計（小A 第一版設計）：
小A 的第三個反問：“訂單狀態機不就夠了嗎？為什么還要單獨的支付狀態機？”
老張說：“訂單關心的是‘貨的進度’，支付關心的是‘錢的進度’。這兩件事在 80% 的時間里是同步的，但在 20% 的異常時刻會錯位——而恰恰是那 20% 決定了你的產品水平。”
一筆完整的支付，在產品設計上至少要覆蓋 8 種狀態：
+ 1 個兜底狀態：異常資金 — 第 7 關展開。
這是小A 在第一版 PRD 里漏掉的——她只設計了訂單狀態機，沒有獨立的支付狀態機，結果”訂單已支付”和”支付成功”混在一起，對賬時根本拆不清。
矩陣的價值：
小A 上月踩的坑——“已取消 + 已支付”組合（矩陣右下橙色加粗格）：
訂單被超時取消，但支付回調 30 分鐘后才到。結果訂單是”已取消”，支付是”已支付”。這筆錢就掛在了系統里，進入異常資金池。
解法（關卡七深度展開）：
鐵律一：訂單狀態由支付狀態驅動
很多新手 PRD 的錯誤寫法：
“用戶支付成功后，把訂單狀態改為’已支付’。”
這句話邏輯上沒問題，但在系統層面是反的。正確的是：
“支付狀態機從’支付中’流轉到’已支付’時，觸發訂單狀態機從’待支付’流轉到’已支付’。”
區別在于：支付狀態是因，訂單狀態是果。如果把它們耦合在一個狀態機里，就做不到獨立兜底。
鐵律二：所有狀態變更必須帶“來源”
字段設計：
payment_status_log:
– payment_id: 支付單號
– from_status: 變更前狀態
– to_status: 變更后狀態
– source: 變更來源（user / system / callback / reconcile / manual）
– operator: 操作人（用戶ID / 系統名 / 財務人員）
– timestamp: 變更時間
– remark: 備注（必填）
為什么必須帶來源？因為財務對賬、客訴排查、合規審計，三個場景都要追溯“是誰讓它變成這個狀態的”。
鐵律三：每個異常態都要有退出通道
支付狀態機里最容易出事的”死狀態”：
任何狀態都要有“進入規則 + 退出規則”，不能只有進入沒有退出。
場景：品牌 X 上線”組合支付”，允許用戶用”積分 + 微信”支付。
小A 第一版設計：
問題：積分成功了但微信支付失敗，訂單狀態已經是”已支付”但實際只支付了積分部分。
正確設計：
關鍵：組合支付必須有“部分支付”這個中間態，而不是每個支付通道成功就是”已支付”。
訂單篇問的是“訂單系統扎不扎實”和“抗不抗壓”，支付篇上篇先問一件事：地基穩不穩。能答對 3 題以上的，才好進下篇的對賬、分賬、退款、異常資金池。
1. 所有支付通道都有“被動回調 + 主動查詢”雙保險嗎？ 只靠被動回調=錢進賬但訂單沒更新
2. 所有支付接口都做了冪等嗎？ 用”支付單號”做冪等鍵，不是訂單號——重復回調必須識別出來
3. 訂單狀態機和支付狀態機是獨立的嗎？ 而不是一個字段 status 揉完訂單和支付
4. 支付方式的接入是按“用戶畫像 × 客單價 × 資金成本”選的嗎？ 還是上來先接個微信和支付寶了事
一句話總結上篇： 支付系統的地基，不是”接完三個通道就完事”，而是把一條鏈路、一張雙軌狀態機、一套兜底與冪等，都提前畫清楚。地基穩了，下篇才有資格談”能扛”。
蘭亭妙微（藍藍設計）www.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
插圖的使用已有 10,000 年的歷史。最早的圖畫之一是西班牙發現的手部輪廓圖，距今已有 66,000 多年歷史。隨著互聯網的出現，大約在 1997 年，插圖的使用逐漸增多，谷歌的每日涂鴉和紅牛能量飲料就是其中的典型例子，包括國內的百度，它們都在將具有特殊意義的插圖融入產品中。
在過去插圖通常使用鉛筆、粉筆、鋼筆、蝕刻畫和顏料完成，但現在經過技術的發展我們可以通過更智能的方式來呈現插圖；
一個好的插圖還可以更好地生動地傳達信息，我們如何確定最合適的插圖風格？插圖怎么才能體現品牌感？怎么能引起用戶群體的共鳴？對于內容，哪種類型的插圖最能強調產品特性，本篇內容分享了相關的案例，并解析如何針對不同用戶群體確定產品插圖風格；
1、當代產品設計中插圖的戰略價值
以互聯網產品為例，現在市場上隨便拿出來個產品都會有一堆競品出現，那如何在眾多產品中體現自己產品的特性呢，除了功能層的差距外，無非就是“看和用”這個方面了，我們以看為例，像Ant Design的「科技溫度」風格、Discord的「夜光貼紙」風格，都展現了產品的個性化，甚至說從插圖風格就能get到產品是做什么行業的；
當情況挺復雜的時候，要是全靠大段大段的文字去講清楚，用戶可能得費不少勁才能弄明白。這時候，要是有插圖來幫忙，往往就能直接把意思給展現出來，讓用戶能更快地抓住信息的核心意思，例如醫療類APP用插圖替代專業術語；
好的插圖不僅起到美化視覺信息傳達的作用，也能夠對業務起到數據方面的提升，例如多鄰國的插圖表情，他們在2023年的調研數據上顯示ip系統提升用戶學習時長28%，Headspace冥想插圖動效減少用戶焦慮指數；
不同的群體對于認知和喜好不同，首先就要明確是給誰做，每個產品都有自己用戶畫像，拿到用戶畫像去進行拆解設計目標，例如年齡在18-25歲，這就決定了設計風格偏年輕化，女性用戶群體占比70%，決定了色系不能使用過多的冷色系（產品主色如果不是按照群體來的，那當我沒說），在例如是一線還是二線三線，職業分布如何，這些拆解出來后，方向不就確定了嗎，無非就是通過受眾群體做減法，減少無用的腦暴；
|
用戶特征 |
設計切入點 |
|
18-25歲 |
年輕化風格、新穎、趣味性 |
|
男性70% |
減少暖色使用，冷色為主 |
|
一線城市居多 |
避免營銷化、低端風格 |
|
對科技、技術感興趣 |
冷色系、極客風、極簡... |
搭建插圖系統和設計規范流程是一致的，都需要在最基礎的設計原則框架下完成，否則就脫離了基本的體驗；
視覺降噪原則：構圖簡單，突出核心表達信息，避免過渡裝飾干擾用戶
語言符號化：使用行業共識的符號做為基礎形象進行設計，降低認知成本以及適配國際化，例如網絡中斷使用wifi、球形網絡；
場景關聯：除了基礎的插圖，在特定場景下的插圖也要預判用戶在當前場景下的情緒變化，通過插圖來提升用戶情緒峰值，例如社區產品中，用戶成功發布一個帖子，給用戶反饋的插圖應當是開心、活躍讓用戶感受到產品的情緒價值；
動態情感曲線：在新手引導中通過每一步的交互流程來變化插圖表達的情緒，例如開始引導時突出表達信息，在一個流程結束時強化氛圍鼓勵用戶，用戶情緒進度期待→奮斗→高昂，促進用戶進一步操作；
視覺原子構建：提取品牌色彩、標志性符號，形成基礎的插圖基因庫；
品牌故事元素貫穿全場景，例如茶顏悅色將古風和現代插圖風格結合，創造了獨特的品牌調性，并且每個插圖場景都在傳達品牌故事；
多端一致性：能夠三端自適應適配尺寸，在小尺寸屏幕下插圖的識別性是否會出現問題；
擴展性：在各大節日時插圖是否能夠結合當前節日擴展，例如春節時插圖是否可以添加燈籠煙花相關元素；
插圖風格系統是品牌視覺語言的延伸，需通過基因提煉-規則制定-動態迭代的三層框架實現規模化應用；提到喜茶能想到的是描邊黑白風格插圖，茶顏悅色就能想到古風，而提到飛書我們就能想到極簡具有規則的形狀插圖，這就是通過插圖風格提升用戶對產品認知；
前面每一步的分析都是為執行輔助
|
品牌基因提取 |
從品牌色、logo中提取顏色標志性符號，上面提到過 |
|
用戶認知匹配 |
例如年輕用戶偏高飽和，小眾獨特風格，但銀行類的產品就需要體現出權威、安全、穩重的風格 |
|
組件化拆解 |
代入組件化思維，從小到大進行搭建，例如原子層→分子層→模塊，也可以根據場景搭建基礎層→裝飾層→插圖 |
|
情感化分類 |
按照場景情緒進行分類，成功、錯誤、失敗 |
通過視覺表達降低用戶認知負荷，引導用戶關注或操作核心功能；
這個比較常見，很多產品在新功能或者復雜功能的時候會建立新手引導的流程，這時候使用單一的箭頭引導會比較單一，就需要添加一些插圖做為情緒化引導，提升用戶趣味性；
在一些上傳、加載的場景其實也可以融入插圖來緩沖用戶焦慮，現在大多產品都是使用比較簡單的加載方式，實際上可以將品牌插圖融入進去；
將品牌DNA轉化為可感知的視覺敘事，建立情感化認知錨點
在登錄頁/加載頁/404頁等全鏈路重復品牌標志性元素，提升用戶對品牌的記憶；
用插圖隱喻傳遞品牌主張（如環保產品用樹木生長插圖替代口號式文案）
在特殊節日疊加一些裝飾元素，提升儀式感，上面有提到融入節日元素；
解決體驗斷點，通過情感化設計提升用戶容忍度與愉悅感
出現bug的頁面通過插圖傳遞「可控感」，用修復工具插圖+明確解決步驟緩解用戶焦慮；
在新功能上線時或者改版功能時，用插圖對比新舊流程差異，這個主要在b端場景使用會比較多
在用戶完成某項任務或完成某個階段流程時給用戶反饋出高成就感的插圖，例如keep的成就解鎖，學習軟件種每日學習打卡成功等；
分析三個不同行業的插圖，來看看他們的插圖差異化
首先看看金融類產品如何在專業與用戶情感傳遞之間進行平衡
顏色方面圍繞穩重復合色（深藍+淺金），避免高飽和色彩帶來的廉價感；
僅在低風險場景（如教育科普頁）使用輕度擬人化角色，而核心功能涉及到數據方面的則使用抽象的數據的可視化插圖；
在出海的一些國家涉及到文化沖突，例如在中東區域就刪除了動物形象用植物和建筑符號代替；
小紅書通過潮流涂鴉的風格建立z時代圈層共鳴，為用戶提供固定的模板，降低用戶創作成本，提升產品的品牌主張，同時能夠營造出社區統一的氛圍感。
以線稿為主，為用戶提供自由創意的涂鴉玩法。
動態生成：根據實時數據改變插圖元素，如不同的天氣、心率的高低、運動的步數等等；
天氣軟件中可以根據不同的天氣變化背景，當然這個目前已經廣泛應用了，但未來也是不變的一個趨勢；
可通過ai流程來制作統一的插圖風格進行應用，并且風格的局限性相較于之前也更靈活了，在前幾年只能通過mj喂圖抽卡來生成統一的插圖，并且時間成本非常高；
在前兩年只能通過訓練大模型的方式訓練具有產品特點的模型，并且訓練周期非常長，配置要求高，隨著現在的技術更新，線上出現了很多訓練模型的方式，不在依賴本地配置，通過線上訓練的lora模型，內存比較小也方便調用，時間上相對之前大大提高；
轉載：防脫發藥水
蘭亭妙微（藍藍設計）www.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微（藍藍設計）www.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微UI設計公司分享：在設計學校文藝匯演報名表單時，如何有效地實現基于選擇的輸入？本文探討了隱藏非活動選項與顯示非活動選項的設計方案，分析了頁面級選項、水平Tab、垂直選項等多種形式的優劣及適用場景。
進入正題之前，大家可以先思考一下，以下情形大家會怎么做？
學校組織文藝匯演，老師、學生、家長可以任意組隊報名表演節目。組隊后，每個隊伍都需要在學校教務系統上錄入信息進行報名。
假如你是教務系統的設計師，你會怎么設計這個報名表單？
在上述案例中，對于“參與人員”這個信息，首先需要確定有哪幾類人參加？其次再具體錄入每一類的具體人員名稱。比如：“三年5班隊”表演的節目有40個人參加，其中只有老師和學生參加，那么老師分別是哪幾位？學生又是哪幾位？
那么根據對初始問題“有哪幾類人參加？”的回答，要求繼續回答“這幾個人分別是誰？”，就是基于選擇的輸入。
基于選擇的輸入內容大體上可以分為兩個部分：初始的選擇、選擇之后需要輸入的內容，如下所示。
表單中基于選擇的輸入類型可選擇的交互形式有很多種，那么在需求過程中，如何選擇最適合的方式去進行設計？
表單基于選擇的輸入場景在B端產品中尤為多見。由于B端產品多為Web端，所以下列分析暫不考慮移動端的情況。
如果把基于選中的內容需要輸入的選項稱為活動的選項，那大致可分為兩大類：隱藏非活動的選項、顯示非活動的選項。以上三個案例均為隱藏非活動的選項類型。
顯示所有未被選中選擇的選擇輸入內容，會導致表單中出現大量無需用戶處理的內容。除非用戶需要這部分信息去輔助判斷選擇選項，否則不建議使用此類方法。
大部分設計方式都會通過隱藏非活動的選項，來降低輸入過程中無效信息對用戶的干擾。具體如何處理初始的選擇和活動選項之間的關系，又可以分為以下幾類：頁面級選項、水平Tab、垂直選項、下拉選擇、單選按鈕下方顯示、單選按鈕內顯示。
（1）頁面級選項
把過程明確分為兩步，這可能是解決表單中選擇性輸入問題最簡單的方法。最常見的做法是采用不同的步驟進行表單內容的填寫，如下：
對多數用戶而言，初始選擇和相關輸入之間的關系明確，但一旦做出初始的選擇，兩者之間的聯系會變得微弱。在第二步進行相關輸入時，無法查看先前進行的初始選擇。看上去這種方案比在當前頁面完成所有輸入任務的方式更慢。
但在實際測試中，通過該方案設計的表單，用戶填寫錯誤比較少，眼動測試參數表現也比較好（主要是眼睛固定的次數、總固定時長以及平均固定時長）。
（2）水平Tab
通過Tab的形式進行初始選擇的區分，用戶可以瀏覽表單的Tab，進入對應的Tab中進行選擇輸入的部分。例如：飛書的登錄頁。
Tab不僅作為一組篩選功能，還對選擇之后輸入的內容起到一個明顯標題的作用。但大部分人都熟悉Tab作為導航的概念，對于Tab在表單中的應用可能會存在一定的歧義。比如Tab之間是否互斥？提交選擇是針對表單中所有Tab還是當前選中的Tab？
對比以上兩種設計形式，如果只從結果考慮用戶的使用情況，水平Tab在測試過程中基本沒有用戶出錯，并且可以快速完成任務。但根據頁面級選項案例的眼動測試數據中會發現，用戶瀏覽整個表單相比上面的方案所需要耗費更多的努力。
（3）垂直選項
從水平Tab方案中表現出來的眼動測試結果可以發現，其不符合用戶自上而下的閱讀模式。而垂直選項的方案則彌補了這一缺陷。如下圖所示。
在選擇選項之后，眼睛不需要做太多的移動，設計更有效率，如下方案例眼動數據所示。
（4）下拉選項
相比水平Tab和垂直選項，下拉選項在視覺上沒那么獨特。每一個選項對應一個初始選項，如下圖所示。
下拉選項的解決方案利用選擇后，輸入的內容在下方特定的位置進行展示。所選選項可作為標題，更好的傳達初始選項的范圍和影響（看具體業務是否需要在表單中映射這個關系），上方案例中的映射關系就比較弱。
（5）單選按鈕下方顯示
展示所有選項，根據用戶選擇情況在下方顯示具體需要選擇輸入的內容，如下圖所示。
（6）單選按鈕內顯示
與單選按鈕下方顯示的辦法類似，在初始選項內顯示額外的輸入內容。
基于選擇的輸入，在設計方案的選擇中，需要考慮各個方面。
如果每個初始選項的額外輸入選項數量很多，且同時存在其他需錄入的信息時，那么頁面級選項可能是最佳方案。雖然需要兩個網頁來拆分表單，但至少不會讓用戶產生困惑，也無需懷疑選項之間是否互斥。
垂直選項和水平Tab兩個方案需要通過交互設計或者視覺設計來規避其互斥問題。
如果初始選項列表較長（4或者5個以上），并且每個選項都自帶一套基于選擇的輸入，在設計時最好能針對額外選項采用下拉列表和視覺分組。
如果每個初始選項只有幾個額外的輸入選項，單選按鈕下方顯示或者單選按鈕內顯示是最佳的方案。但容易出現因選項切換而造成的頁面跳動問題。
就整體而言，隱藏無關的輸入項，可以減輕用戶對表單的負擔，幫助用戶更快的完成表單內容。
最好能清晰的顯示選項與基于選擇的輸入項之間的關系。
轉載：人人都是產品經理
蘭亭妙微（藍藍設計）www.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微（藍藍設計）www.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
知識科普
- 漸進式披露：按需展示高階復雜功能，不一次性堆砌全部信息，降低用戶認知負荷，適配新手漸進學習。
- 自我決定理論：產品設計滿足用戶自主性、勝任感、歸屬感三大心理需求，提升使用意愿與粘性。
蘭亭妙微（藍藍設計）www.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
又到了分享界面改版優化的時候了，這次是近期C端學員做的體育場館預約平臺，主要用于在線預約羽毛球、網球、籃球等場館。
下面是目前的設計圖例：
學員作業
還是老規矩，我們從原設計的問題入手，然后逐步完成對它的改版優化。
問題分析：
問題的分析從不同維度入手，這里分享個最簡單的分析方式，先從基礎樣式分析，再分析組件設計。
基礎樣式包含規范、字體、色彩、圖片四個要素的分析，而組件設計則是檢查樣式的合理性為主。
首先基礎樣式的規范應用上，頂部狀態欄和底部指示器、導航是沒有太大問題的，所以我們可以直接進入下一個環節。
在字體應用上，問題就多起來了，主要還是特殊標題使用太多，且廣告中的標題也和下方 UI 元素標題沒有拉開差距，看起來就很別扭。而且大粗黑字體使用過多，使得信息權重被分散掉，沒有對比性。
有問題的部分截圖
在色彩層面，藍色雖然是主色，但是使用過于頻繁，且其它色彩的應用數量也過多，畫面充斥了讓人眼花繚亂的色彩，尤其色彩多的情況下圖片色彩也豐富，外加一系列漸變色塊，讓場面變得更“錯綜復雜”。
使用的色彩過多
最后圖片應用上，主要問題出在廣告圖里，圖例和文字排版看起來很有年代感，加上瓷片區內的素材用圖，和整體主體的關聯性并不好。這里著重強調， 3D 擬人類圖片素材的使用最好局限在特定運營活動物料里，不要作為正式的 UI 元素進行引用，怎么做效果都不會好。
接著分析組件樣式，因為這次案例框架很簡單，我們不用太多考慮組件排序依據還是產品問題，只需要每個組件孤立出來分析即可。
1 .首頁頂部組件
主要問題就是廣告圖的設計，不符合當前應用的設計標準，字體用圖排版都很簡單。
2.快速入口組件
快速入口上下兩排權重完全不同，雖然有大小的差異但依舊對比不夠強烈，且色彩使用混亂。
3.瓷片區應用
兩個頁面都有瓷片區，布局過于接近，且沒有實質性的內容全是裝飾素材，非常影響點擊欲望和觀感。
4.常去場館卡片
屬于問題相對較小的模塊，但標簽的應用色彩不合理，而且標題也露不全，實際空間利用率沒有必要的低。
5.列表卡片
列表卡片的主要問題還是和主色按鈕有關，過于強調按鈕的同時又要突出其它信息元素，就讓卡片看起來非常聒噪，信息之間是會起沖突的。
6.底部導航
底部導航設計過于普通，且一般選項選中凸起只適合在首頁選項中使用。中間添加按鈕的尺寸過小，和兩側選項看起來不對齊，重心偏移。
以上就是對問題的簡單總結，實際上改版就是圍繞這些問題做出調整，你先分析得出問題，才能聚焦到具體設計的過程和細節。
基礎規范是整體，而我們設計過程中大多從細節出發，所以我們對優化的內容解釋就要反過來從組件開始。
1.頂部模塊設計
首先調整頂部模塊的設計，優化圖例，使用比較突出的字體標題和更有沖擊力的配圖，符合運動類應用的主基調。同時因為之前主色用太多，這次頂部直接不加主色類背景。
2.快速入口的設計
快速入口設計上使用兩種圖標體系，上方用偏扁平插畫型的風格（素材示意），下方用面性圖標風格，弱化它們的權重。同時第二個頁面的快速入口使用攝影圖型圖標，避免一直出現不同風格的圖標。
3.瓷片區設計
瓷片區做大就需要有內容展示，但這些主體值得展示的內容并不是太多且需要那么大空間，所以縮小尺寸不會讓設計那么難處理，也讓畫面更精致一點。
4.其它模塊設計
因為首頁上方已經有很花哨的模塊了，所以常去場館就不應該再花哨下去，可以務實點的設計，不再用復雜的外邊框套娃。
第二個頁面其它模塊相對簡單，拼團功能又重要所以可以突出它用包邊型的組件設計。
5.列表模塊設計
兩個頁面下方的列表模塊，都移除原來主色的按鈕，只保留關鍵信息，讓卡片視覺看起來更簡約和諧一點。
6.底部導航欄設計
放大中間的按鈕，同時優化第一個選項選中的設計，可以更突出（時間夠就做LOGO進去了）更強調選中。
完成這些處理以后，最后合并起來可以整體再調整一番進行最終輸出。我們可以看看下面改版前后的對比，你們可以自己感受是否有差異：
這是純視覺方向的優化，在新手階段，不要過度去使用色彩和字體，實現樣式的落差要通過組件樣式和圖片、素材應用的差異來塑造。
轉載：優設
蘭亭妙微（藍藍設計）www.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
| 組件 | 選擇邏輯 | 核心特點 | 生效方式 | 最佳使用場景 |
|---|---|---|---|---|
| 開關 | 二元獨立切換 | 單功能、無關聯 | 操作立即生效 | 單獨功能開啟 / 關閉 |
| 復選框 | 可多選、可全不選 | 同組關聯、支持全選半選 | 多為統一確認生效 | 關聯選項批量勾選 |
| 單選按鈕 | 互斥單選、必選其一 | 組內唯一、排他選擇 | 選定即鎖定選項 | 多選項只能選一個 |
蘭亭妙微（藍藍設計）www.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
藍藍設計的小編 http://www.hengshangtqd.cn