<li id="g3zqm"></li>
蘭亭妙微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。
近期和團隊一起完成了一個超酷的項目——飛秒激光時域熱反射測量系統（TDTR）的軟件UI設計。
不得不說，做科研設備設計真的太“上頭”了！
這不僅僅是一個軟件界面，更是連接科學家與納米世界的窗口。
分享一下我們的設計思考，希望能給做B端、科研儀器設計的姐妹們一點靈感～
1. 項目背景：讓復雜的測量變簡單 客戶是一家專注于熱學測試設備領域的科技企業。
設備用途： 測量納米薄膜熱導率、界面熱阻等。
核心挑戰： 如何把微納尺度的復雜數據，轉化成直觀、易操作的視覺語言？ 我們輸出了深色和淺色兩套方案，客戶一眼相中了淺色方案！理由是：干凈、通透，長時間盯著屏幕做實驗眼睛不累。
2. 設計亮點：嚴謹中的“小心機”
配色邏輯：紅灰CP太絕了！
灰色背景： 作為基底，最大程度保證了數據圖表的清晰度，不搶戲。
紅色點睛： 作為品牌主色和警示色，關鍵操作按鈕和重要數據用紅色突出，既符合工業嚴謹性，又增加了視覺活力。
圖標設計：低飽和度的“科研風” 沒有用花里胡哨的漸變，而是采用幾何圖形+數據可視化元素。
線條扁平化，小尺寸下也能看清，降低科研人員的認知成本。
布局：多面板分欄 左側控制參數，中間展示實時數據，右側顯示擬合分析。
這種布局讓科研人員可以“一眼看全”，不用頻繁切換頁面，大大提升了實驗效率。
3. 從設計到落地：高還原度的秘密 讓人驕傲的是，我們不僅做了UI設計，還負責了QT前端開發！
通過多輪的效果走查，我們實現了設計稿的高還原度落地。看著設計圖變成真正能跑代碼、能測數據的軟件，這種成就感真的爆棚！
4. 設計師碎碎念
做科研儀器設計，“克制”是最大的美德。 我們不需要炫技，只需要讓數據更清晰，讓操作更流暢。每一個像素的打磨，都是為了致敬科學的嚴謹。
蘭亭妙微（藍藍設計）m.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
我想這是很多新手設計師都有過的感受，明明懂了很多設計知識，但到真正設計的時候還是會出現迷茫或者沒思路的情況。
造成這種情況的主要原因是，雖然我們每天看了大量的設計文章或者技法，但沒有第一時間應用到設計實踐中。
換句話說就是，我們每天看的設計內容可能跟我們實際做的工作需求不夠搭邊，這樣就很容易造成拿到一個新需求后沒有想法，感覺之前看了很多設計圖或者文章都沒派上用場，不得不重新找競品找參考才能展開設計。
就像學了一節新課程，如果沒有第一時間做配套的練習題，等過了一周再做練習題發現根本不會做，因為之前學的課程早都忘得差不多了。
北京蘭亭妙微UI設計公司：下面展開講講如何避免這種情況，建立自己的設計成長體系。
對于設計技法vs設計原理的問題，我覺得對于設計師來說同等重要，但具體要結合你現在的工作情況找到一個側重點。
舉個例子，比如當前的工作偏UI視覺多一點，需要常做一些運營活動圖，那么日常就可以多側重練練技法，多做視覺練習；如果當前的工作偏向純UI，那么就可以多重視設計理論，多思考產品規劃、交互流程、用戶使用體驗等等這些產品交互相關的知識，用理論支撐起我們的設計方案。
這樣既能保證我們能很好地勝任當前的工作，還能讓我們在持續的工作中不斷有進步有提高。
對于平面能力差的問題，我覺得平面設計能力是基礎。可能很多同學在大學時有過這種體驗，無論你的專業是視傳、數媒、產設，甚至攝影，都需要經歷平面設計這一關。排版、手繪、字體、后期合成等等這些平面能力需要我們不斷練習實踐。
現在AI繪畫工具的出圖效果都不錯，大家可以好好利用起來輔助出圖，補齊UI設計師在平面設計上的短板。
總的來說，平面能力要多練習多積累，日常工作中還是建議靈活運用“AI+設計”的形式，也能打造出好的效果圖，沒必要為了某個視覺效果死磕PS而浪費太多工作時間。
針對看了很多設計但做需求還是沒想法，以及到底怎么學UI、建立自己的設計體系這些情況，我結合自己的經歷總結一下，希望能對你有幫助：
首先還是多積累，多看好的設計，審美需要一直提高。比如每天早上我都會拿出半小時的固定時間去Pinterest或者花瓣里去看各種各樣的設計圖。
需要注意的是，這里的看也分為兩個方向：一個是日常看圖，一個是專項看圖。
其次，每天看的圖很多，就需要把圖都整理一下，這個時候就需要建立一個系統性的設計素材庫。
拿花瓣舉個例子，在花瓣里可以創建各種各樣的分組。
比如APP是一個大的分組，在這個APP的分組里面可以建各種各樣的畫板，像APP-首頁、APP-導航欄、APP-標簽設計等等；再比如網頁設計是一個大的分組，我可以在網頁設計底下創建網站首頁設計、網站登錄頁設計這些畫板。
這樣整理的好處一個是讓我們每天看的圖更加清晰有條理；另一個是有了分組/畫板后，接到新的設計需求后就可以直接定位到某個分組里，看看我們之前創建的畫板里有沒有類似的一些參考圖，省去了從0~1再重新找參考圖的這種過程。
而且看到自己采集的參考圖突然派上了用場的過程，對于設計師來說特別棒！這說明我們每天看的內容有價值，不只是在收藏夾里吃灰。
比如要設計一個UI標簽，我們可能需要反復去創建的素材畫板里看各種各樣的標簽設計，這樣不止一次地反復看收集的素材，看的多了之后我們就對這些素材圖特別熟悉，這樣就不怕后面的設計再沒思路。
現在每天網絡上都有特別多的零碎信息，所以這種清晰的整理是一個特別有效的成長方法。經過這種「先整理再回看再設計」反復練習的過程，會有一個更清晰的設計體系和工作流，設計能力肯定會有一個質的提升。
轉載自優設網
蘭亭妙微（藍藍設計）m.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
今天蘭亭妙微UI設計公司，跟大家分享登錄頁的 12 種設計切入點，相信總有一款會入甲方爸爸的心。
作為設計師，我們常常面臨一個窘境：要面對各式各樣客戶審美的挑剔，有時候被虐得都懷疑人生。
但找參考時，思維又容易被局限在常見的幾種形式里，我通過分析大量優秀的登錄頁，總結了 12 個高級的設計切入點，希望能為你打開新思路。
設計解析：
設計解析：
設計解析：
設計解析：
設計解析：
設計解析：
設計解析：
設計解析：
設計解析：
設計解析：
設計解析：
設計解析：
通過以上 12 個案例的系統性拆解，我們發現 B 端登錄頁的設計可以有如此豐富的切入點。
它絕不僅僅是擺放表單的簡單任務，而是一個融合了品牌戰略、用戶體驗、視覺營銷和技術表達的綜合性設計挑戰。
希望這 12 個切入點的詳細分析，能成為您應對登錄頁設計挑戰的靈感源泉和實用工具箱。
一個高級的設計，其最高境界是讓用戶感覺不到“設計”的存在，卻能高效、愉悅地完成目標，并對品牌留下積極而深刻的印象。
轉載：優設
蘭亭妙微（藍藍設計）m.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
哈嘍，這里是蘭亭妙微UI設計公司，今天分享的是「如何化解錯誤時刻」。
說到用戶體驗設計，大家首先想到的都是“正常場景”：注冊流程順暢、支付順利完成、輸入順利通過。但現實并非如此，用戶總會不小心犯錯誤，系統偶爾也會掉鏈子。但這些“問題時刻”往往最容易被忽略。要是產品沒法幫用戶解決問題，所有錯誤的后果都得用戶承擔，最后只會讓他們焦慮。換句話說，錯誤是用戶體驗的最大危機，也是削弱用戶對產品信任的關鍵節點。
相關干貨：
這里的“微設計”比我們常說的“微交互”范圍更廣，包括文案、視覺元素，還有各種反饋設計。這些小細節看似不起眼，卻能精準安撫用戶的出錯焦慮，幫他們重新找回掌控感。
微設計的三個核心要素：
在深入探討具體案例之前，讓我們先來探究一下用戶遇到錯誤的背景和原因。下面簡要總結了用戶出錯的類型、背后的心理，還有哪些場景容易出錯。
在用戶體驗理論中，錯誤分“失誤”和“錯誤”兩種，前者是用戶在執行操作時無意識犯下的錯誤，后者是一開始就想錯了。
失誤：行為不當
目標是對的，但采取的行動有問題。例如不小心點錯了按鈕、著急打錯了字，大多是做熟悉的事時分心、沒留意造成的。
錯誤：判斷失誤
從一開始就誤解了情況。比如看到一個顯眼的按鈕，以為是自己要的功能，結果點擊后才發現不對。這種情況多是因為界面的信息混亂、層級不清晰，呈現的內容含糊不清。
通常“失誤”發生在執行階段，“錯誤”發生在規劃階段，但實際中兩者經常一起出現。重點是搞清楚 “為什么會出錯”，并給出解決方案。
出錯不只是功能出問題，更會讓用戶慌張：“萬一沒法恢復怎么辦？”（恐懼）、“我無法控制這種情況”（無助），甚至 “可能我根本不會用這東西”（自責）。最糟的就是自責——用戶不怪產品怪自己，壓力越來越大，最后干脆關掉頁面、放棄使用。
所以設計師的任務很明確：別讓用戶背鍋，明確告訴他們“能補救”。先給情緒上的安慰：“沒關系，你可以再試一次。”
有些時候，用戶的選擇壓力和出錯焦慮會被放大，心里越沒底，越不敢動。
操作不可逆：刪除文件、轉賬、重置數據等，一旦點錯就沒法恢復，讓人不敢操作。
操作反復失敗：連不上網、輸密碼總錯，越試越沮喪，甚至會想 “是不是只有我用不了？”
尤其是對準確性要求高的場景，比如金融、商務、B2B工具，出錯體驗的設計更關鍵。有時候對于出錯的恐懼，比錯誤本身更影響用戶行為。
支付/轉賬：錯誤導致資金損失的壓力以及造成損失的可能性。
傳輸/刪除關鍵數據：知道沒法恢復，更不敢操作。
表單反復驗證失敗：失敗的次數越多，就會越沮喪。
應對錯誤的核心是“雙管齊下”：提前預防 (別讓錯誤發生) +及時恢復 (錯了能輕松補救)。單獨用哪一個都不夠，需要根據場景靈活設計。
從根本上阻止可能出錯的情況，或者用視覺提示幫用戶識別風險。比如禁用按鈕、提供有限的選項、防止重復點擊。某種程度上哪怕稍微限制一點用戶的自由，也比讓他們出錯好。
例如訂酒店時，對于有住宿天數要求的酒店，預定的天數少于住宿天數時，無法進行預訂；類似的還有“信息沒填完時，登錄按鈕是置灰的”、“加載時不能點按鈕，避免重復操作”，都是這個道理。
在搜索框、輸入框里加入自動補全或關鍵詞建議，不需要讓用戶記住全部信息，輸入又快又準。尤其在輸入地址或者比較復雜的內容時，這種方法能大大提高效率。
例如在輸入地址時，搜索詞會高亮顯示，并且會可能提供清晰的搜索建議：想搜的是地鐵、公交還是某家店鋪，方便用戶減輕記憶負擔，快速做出選擇；在移動設備中，鍵盤的局限性導致打字失誤的情況頻繁發生，飛書的錯別字自動修正提示，能夠很好地提高輸入速度和準確性。
對于需要重復做的操作，可以把常用的選項設為默認，幫助用戶少費心。但默認選項不一定永遠是對的，如果存在錯誤的可能性，得讓用戶能檢查修改，不然反而會“誘導錯誤”。
例如在外賣軟件中，可以把常用地址加上默認標識，省去了再次添加收貨地址的麻煩。但當默認地址和當前的位置差很遠，超出配送范圍時，購物車中的商品會呈置灰狀態無法進行購買。
用戶進行多步驟任務時 (比如注冊)，萬一不小心退出了再進來，保持之前填的內容還在。這樣不需要用戶重新填，也不會忘記已經完成了哪些步驟，減少失誤的發生。
編輯文章時，內容可以自動保存到草稿箱中。哪怕退出登錄過兩天再進入，草稿箱里的內容都還在，對于用戶來說也是一種很貼心的體驗。
對于需要記住很多選擇的流程(比如訂酒店)，把選好的日期、人數、篩選條件固定在屏幕頂部，隨時能看。這種設計方法允許用戶在不依賴不準確記憶的情況下再次確認信息，從而及早預防錯誤。
像Airbnb會把要去的地點、 入住時間和人數這些篩選條件固定在頁面的頂部，讓用戶可以持續查看當前的預訂情況，這樣在找房子的時候會覺得更踏實。
對于刪除文件或重置數據這類不可逆的操作，一定要增加 “確認步驟”，進一步確認用戶的意圖。
一旦出錯無法恢復的操作可能會引發用戶的強烈焦慮，因此需要清晰傳達操作的影響，并通過問題和警告來確認操作，例如：“您確定要刪除xx？刪除后不可恢復，請謹慎操作。”
但注意不能濫用確認彈窗，過于頻繁的確認彈窗可能會讓用戶在不仔細看內容的情況下，習慣性地點擊“確定”，增大出錯的風險。只在重要且不可逆轉的操作中使用。
例如刪除文件時進行二次確認，同時告知刪除后文件的位置、刪除后文件是否可以找回等一系列內容，讓用戶對于刪除的內容有清晰的認知；對于確認后無法再修改的信息，也最好來個再次確認，讓用戶做到心里有數。
對于表單輸入這類容易出錯的場景，好的使用體驗是在輸入時就“實時”提供反饋，而不是等所有信息都填完點擊提交之后再提示錯誤。
比如字符超了、密碼格式不對，立即用紅色文字、錯誤圖標、邊框高亮、震動動效等形式反饋出來，減少重復輸入的麻煩。
例如發動態時，如果輸入的標題字數不符合要求，會在標題處有一段反饋提示，提醒用戶輸入符合要求的標題；填寫多個表單時，如果有多個表單未填寫，每個輸入框下面都會有錯誤反饋，而且每條錯誤反饋的內容會根據不同字段而調整，而不是用“請填寫內容”這種模板化的反饋。
對于操作后不好修改的場景中 (比如發表文章、發布視頻、視頻渲染)，可以先給用戶看 “最終效果預覽”。確認沒問題再提交，這樣用戶就能提前發現錯漏，心里也踏實。
例如在發布動態的時候上傳視頻封面后，在推薦列表、視頻動態中能提前預覽封面效果，有問題可以及時修改，省去了動態發布后再去修改的麻煩；視頻軟件中渲染一個視頻通常需要幾分鐘甚至幾十分鐘，通過提供“渲染預覽”可以快速檢查錯誤減少不必要的時間浪費。
“撤銷”功能允許用戶立即挽回錯誤，增強掌控感，減輕錯誤帶來的負擔，例如刪錯內容、發錯郵件后，點一下就能恢復。有了這個功能，用戶用著更放心，也敢大膽嘗試各種功能。
在花瓣中采集圖片后，會提供一個撤銷的功能，方便用戶快速撤銷采集有誤的圖片；在使用微信發消息、使用郵箱發郵件的時候，也都支持在發出去幾分鐘內撤回，盡可能幫用戶挽回錯誤。
如果錯誤不可避免，需要使用通俗易懂的提示文案告訴用戶哪里出現了錯誤，出現了什么樣的錯誤，而不是用一些模板化的或是含糊不清的提示文案，讓用戶感到困惑。
例如上圖中的登錄失敗提示，會明確告知什么地方出現了錯誤、出現多次錯誤后會有什么后果、如何操作能解決錯誤，這才是一個格式的錯誤提示；填寫新增地址信息時，如果手機號碼有問題，會明確提示“手機號有誤”，而不是只說 “輸入內容有誤”。
接著上一條，不僅要說清楚錯誤的原因，還要告訴用戶“該怎么做”，引導用戶立即采取行動。例如添加“重試”、“返回主頁” 按鈕，引導用戶回到正確的操作流程里。
如果訪問的頁面有問題，可以提供返回首頁或者聯系客服的入口，讓用戶可以繼續探索其他內容；例如蘋果的Face ID連續5次識別失敗后，系統會鎖定面容ID功能，并提示輸入密碼驗證后才能重新啟用。
通過自動定位和聚焦錯誤輸入項來鼓勵快速更正。發現錯誤后，系統自動定位到出錯的輸入框，縮短錯誤從識別到更正的過程。尤其在那些表單特別多的后臺頁面中，這種錯誤定位的功能還是很有必要的。
利用情感化的視覺設計，例如柔和的色彩、插圖和動效等，提供了視覺上的舒適感，緩解用戶的焦慮和緊張。這不僅是簡單的錯誤反饋，還是展現品牌個性的好機會。
比如谷歌瀏覽器離線時經典的“恐龍小游戲”，讓用戶等待網絡連接的同時進行有趣的游戲體驗，能讓用戶沒那么煩躁。
總的來說，減少錯誤的根本策略是避免不必要的差異化，并遵循熟悉的界面、交互和設計慣例。這里的“熟悉”不僅是風格問題，更是整個用戶體驗設計的通用標準。
當然，再標準的設計也沒法完全杜絕錯誤的發生。這時候，貼心的微設計就派上用場了——幫助用戶快速發現錯誤、輕松改過來。
這些細節，正是體驗設計師存在的價值，也是產品賦予用戶的最大信任。你還有哪些化解錯誤的小妙招呢？歡迎留言咱們一起聊聊～
轉載：優設
蘭亭妙微（藍藍設計）m.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個以上），并且每個選項都自帶一套基于選擇的輸入，在設計時最好能針對額外選項采用下拉列表和視覺分組。
如果每個初始選項只有幾個額外的輸入選項，單選按鈕下方顯示或者單選按鈕內顯示是最佳的方案。但容易出現因選項切換而造成的頁面跳動問題。
就整體而言，隱藏無關的輸入項，可以減輕用戶對表單的負擔，幫助用戶更快的完成表單內容。
最好能清晰的顯示選項與基于選擇的輸入項之間的關系。
轉載：人人都是產品經理
蘭亭妙微（藍藍設計）m.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微（藍藍設計）m.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
在蘭亭妙微，我們服務過金融、醫療、軍工、智能制造等大量政企與企業級項目，見過太多設計師「軟件很溜、想法很空、落地很慌」。同樣是做界面，為什么有的人只能當美工，有的人卻能拿高薪、控項目、帶結果？
藍藍設計的小編 http://m.hengshangtqd.cn
