•  

  溝通方式：

  感性溝通——傳達“我能讓你變得很有品位”的概念，向他們兜售一個關于“理想之家”的筑夢工具；
•  

  設計目標：

  希望能第一時間抓住用戶眼球，讓用戶感知到這是一家高級的公司；
•  

  風格調(diào)研：

  在本地用戶投票調(diào)研中拿到了不俗的票數(shù)，說明成功地引發(fā)了用戶“共鳴”；
•  

  差異化：

  在普遍SaaS網(wǎng)站中，風格比較獨特鮮明；
•  

  總結：

  通過大面積的留白、克制的和風配色、以及嚴謹?shù)木W(wǎng)格系統(tǒng)和銳利的直角，去傳遞產(chǎn)品的專業(yè)與品位，旨在先與用戶建立情感共鳴。

   

   

•  

  溝通方式：

  理性溝通——傳達“我們很厲害”的概念，告訴用戶我們在賣一個“解決方案”；
•  

  信賴感強：

  藍色主色搭配黃色的輔助色，配合線條插畫，是日本SaaS網(wǎng)站建立用戶信任的“標配”元素；
•  

  風格清晰：

  明確的SaaS風格，降低用戶認知成本，同樣在本地用戶投票調(diào)研中拿到了不俗的票數(shù)；
•  

  總結：

  符合日本主流SaaS網(wǎng)站的設計范式，開門見山地展示了軟件的核心功能、客戶案例墻、增長數(shù)據(jù)，通過“理性溝通”，用最快的速度告訴用戶“相信我，我能幫你解決問題”；

一、色彩設計心理學：精準契合 “穩(wěn)重 + 創(chuàng)新” 的核心需求

二、打破科技色慣例：在同質(zhì)化中實現(xiàn)差異化突圍

三、數(shù)字場景 “天生百搭色”：適配多場景使用需求

•  

  當前的業(yè)務是什么樣的
•  

  當前業(yè)務存在的具體缺陷
•  

  構思產(chǎn)品的整體框架形態(tài)
•  

  確定產(chǎn)品的具體功能需求

•  

  房間基礎定價：房間的基底價格，用于做計算的基數(shù)
•  

  房價當前系數(shù)：根據(jù)忙時和閑時變更定價的系數(shù)，比如忙時是原來的1.5倍，閑時是原來的0.8倍
•  

  房間當前價格：根據(jù)定價基數(shù)x 系數(shù)得到的當前價格，是前端展示和付款的具體金額

規(guī)劃完產(chǎn)品地圖后，下一步才進入正式的產(chǎn)品原型設計過程，將我們對產(chǎn)品應該做成什么樣通過原型線框圖表現(xiàn)出來，只要能讓其他人理解我們的意圖即可。

1.  

   項目分析
2.  

   業(yè)務分析
3.  

   產(chǎn)品分析
4.  

   體驗分析
5.  

   設計分析

作者：酸梅干超人
鏈接：https://www.zcool.com.cn/article/ZMTY4MDUwMA==.html
來源：站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權，非商業(yè)轉載請注明出處。

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

一、B 端設計師該懂哪些技術？

1. 前端界面的實現(xiàn)邏輯
2. 后端的功能框架和服務
3. 前后端聯(lián)調(diào)的過程
4. 產(chǎn)品的部署和運維
5. AI 的生成和處理流程

二、各技術方向核心解析與學習建議

（一）前端界面的實現(xiàn)邏輯

（二）后端的功能框架和服務

（三）前后端聯(lián)調(diào)的過程

（四）產(chǎn)品的部署和運維

（五）AI 的生成和處理流程

1. 計算機視覺模型：對圖像進行生成、檢測、分類，文生圖是最常見的應用；
2. 自然語言處理模型：對文字進行分析并返回文字結果，ChatGPT 是典型代表；
3. 語音處理模型：實現(xiàn)語音識別、合成、輸出，如短視頻的合成人聲；
4. 多模態(tài)模型：處理圖文、音視頻等多種混合數(shù)據(jù)，應用于圖文檢索、視頻總結等場景。

三、結語

一、項目背景與核心目標

二、三大交互范式的場景化落地應用

2.1 嵌入式交互：復雜表單的靈活填寫助手

1. 填充識別類：針對規(guī)則明確、AI 可通過識別提取關鍵信息輸出穩(wěn)定答案的字段（如商品屬性），采用系統(tǒng)自動填入模式，搭配 “AI 預填” 標簽提示狀態(tài)。例如 AI 可從商家上傳的商品包裝圖中識別 “風干”“盒裝” 等信息，自動填入食品工藝、包裝方式模塊，同時提示商家檢查確認，以自動化替代手動錄入，最大化縮短填寫時間。
2. 推薦優(yōu)化類：針對需依托 AI 優(yōu)化素材、提升購買吸引力的內(nèi)容（如商品主圖、標題），因存在 AI 創(chuàng)作內(nèi)容不符商家預期的可能，采用 “主動提供結果但不預先填入” 的模式，支持商家對 AI 結果進行調(diào)優(yōu)，待符合預期后再手動錄入。靈活的交互設計既滿足不同商家的個性化需求，也有效降低人工審核時長。

2.2 伴隨式交互：全場景的主動診斷助手

1. 主動觸達：AI 助手入口設計 “流光呼吸感” 動效，搭配輪播詞條實時推送與當前任務相關的關鍵信息（如 “今日店鋪訪問量增長 20%”），實現(xiàn)輕量視覺吸引；當商家停留于具體任務頁面時，助手可基于頁面內(nèi)容與業(yè)務邏輯，主動識別潛在問題并推送輕量提醒（如 “商品主圖尺寸可能影響點擊率”），在商家未發(fā)起提問前即主動觸發(fā)服務。
2. 連續(xù)洞察：AI 助手在輸出建議或數(shù)據(jù)時，會附帶清晰的思考過程與來源摘要，實現(xiàn) “可解釋的 AI”，打消商家疑慮；同時能基于當前對話主動預判后續(xù)需求，智能推薦下一步操作（如 “進一步分析體驗分下降的原因”），將單點查詢轉化為系統(tǒng)性的經(jīng)營問題排查與解決鏈路，大幅降低商家獲取完整決策依據(jù)的綜合成本。

2.3 托管式交互：隱式服務的安心管家

1. 可視化配置，構建信任基礎：為消除商家對 AI “黑盒操作” 的疑慮，將抽象的 AI 能力轉化為可預判的具體結果，我們提供直觀的策略配置面板與 C 端頁面預覽圖，商家可針對售前咨詢（商品咨詢、催促下單等）、售后維護（退款申請等）不同場景設置回復規(guī)則，并實時查看 AI 執(zhí)行的示意效果。“配置即所見” 的設計讓 AI 能力變得具體可感知，讓商家從配置起點建立對自動化系統(tǒng)的可控感。

    

   

2. 明確狀態(tài)標識，實現(xiàn)流暢人機接力：為保障人機協(xié)同的順暢性，界面中對接待狀態(tài)進行全方位清晰標識：全局接待狀態(tài)置頂實時更新、會話列表按狀態(tài)動態(tài)分組、單人接待狀態(tài)（接待中 / 暫停接待）強化并自動同步。當 AI 無法解答復雜訴求、用戶負面情緒等問題時，會話將自動流轉至 “待人工回復” 分組，通過動態(tài)高亮 + 聲音預警提醒人工快速接管；人工回復后，AI 將自動暫停并更新接待狀態(tài)，同時生成會話摘要，幫助工作人員快速了解溝通前因后果，將決策焦點從 “梳理問題” 轉向 “解決問題”。此外，客服可主動設置 “恢復托管”，AI 也會在識別新會話時自動恢復接待，形成閉環(huán)的人機協(xié)同機制。

三、構建全鏈路智能化感知體系

四、設計核心與價值沉淀