<strike id="g3zqm"></strike>

      <cite id="g3zqm"></cite>

        <tr id="g3zqm"><center id="g3zqm"></center></tr>
        <pre id="g3zqm"><sup id="g3zqm"></sup></pre>
        <li id="g3zqm"></li>
      1. 少妇高潮激情一区二区三,免费av深夜在线观看,亚洲狼人久久伊人久久伊,久久精品人人做人人爽电影蜜月,黄色特级片一区二区三区,欧美日韩在线亚洲二区综二,极品少妇无套内射视频,日本极品少妇videossexhd

        首頁

        設計的新趨勢:用好有效摩擦,拒絕無效麻煩

        清陽 行業趨勢

        導語

        過去二十年,互聯網設計的共識是極致去摩擦:縮短注冊步驟、精簡操作鏈路、抹平交互門檻,高效順滑成為體驗標配。但隨著全行業體驗同質化、用戶劃走即遺忘,Burberry 慢鏡頭廣告、Apple Liquid Glass 擬物玻璃界面、CCD 膠片回潮等現象,正在推翻單一的效率邏輯:刻意設計的良性摩擦≠惡意制造使用麻煩。在 AI 批量產出標準化內容的當下,合理的摩擦是品牌打造記憶錨點、加深用戶參與的關鍵抓手。

        一、無摩擦從行業進步,淪為同質化枷鎖

        早年去摩擦設計切實解決商業痛點:電商優化支付路徑降低下單流失、出行打通一鍵叫車閉環、軟件簡化學習成本,效率優化實實在在提升轉化。

        image.png

        但當全產品模板趨同:統一卡片布局、同質化滑動交互、算法自動連播,極致順滑催生三大問題:
        1. 用戶流失無記憶:頁面一鍵劃過、用完即走,品牌無法在用戶心智留存印記;
        2. 感官同質化貧瘠:界面去掉材質、紋理、層次,所有產品只剩扁平標準化外殼,丟失獨特氛圍感;
        3. 體驗缺少實感:全程零等待、零操作、零選擇,用戶從 “主動使用產品” 淪為被動接收信息流。
        設計學者 Luna Maurer 與 Roel Wouters 在《Designing Friction》提出:體驗摩擦(Resistance)是人與物品間的觸感、溫度、行動參與阻力,不等于系統故障帶來的額外負擔,全盤消滅阻力,本質是抹殺用戶真實參與的可能性 —— 人無法只依靠效率完成情感消費。

        二、摩擦二分法:壞摩擦消耗耐心,好摩擦沉淀體驗

        image.png

        所有額外耗時的操作分兩類,核心判定標準:用戶付出的時間,是否對應情緒、體驗、擁有感回報。

        1. 負面壞摩擦(需徹底剔除)

        image.png

        源于產品設計疏漏、系統缺陷,用戶被迫替產品漏洞買單,全程無任何收益:驗證碼反復失效、APP 跨端無序跳轉、入口層級混亂、無理由超長排隊、規則刻意晦澀難懂。
         
        Maya Kronic 提出的jankspace精準概括這類痛點:產品對外宣傳全鏈路無縫自動化,實際使用卻要在賬號、支付、文件、權限間反復跳轉,消耗用戶耐心卻毫無體驗增益,屬于設計失誤帶來的無效負擔。

        2. 正向好摩擦(可主動設計)

        通過儀式、探索、參與類步驟,把效率損耗轉化成體驗價值,用戶清楚付出的目的:
        • 儀式摩擦:黑膠拆封上針、相機裝膠卷、演出排隊入場、新品拆盒;
        • 探索摩擦:線下逛街隨手摸面料、貨架偶遇算法未推薦的單品、鉆研桌游規則;
        消費心理學宜家效應佐證:用戶親手投入步驟完成事物后,會自發抬高產品價值;動手參與的沉沒成本,最終轉化為情感與記憶沉淀。
        表格
         
         
         
        摩擦分類 用戶體感 典型場景 設計決策
        壞摩擦 被迫填坑、煩躁流失 重復登錄、錯亂跳轉、無效排隊 全盤刪除優化
        交易必要摩擦 安全感確認 支付二次核驗、隱私授權 精簡話術、保留必要步驟
        儀式型好摩擦 沉浸場景、充滿期待 開箱、線下試穿、集章打卡 結構化設計,配套情緒回報
        記憶型好摩擦 愿意投入時間、加深印象 長內容觀看、線下展覽動線、手作 DIY 設計體驗峰值
        核心結論:用戶不排斥多走一步,只反感「不知道為什么多走一步」的無用折騰。

        三、AI 時代,實體服務業靠 “人性化摩擦” 重回價值高地

        AI 正在無限抹平標準化工作:文案、制圖、方案規劃均可一鍵生成,極致順滑變成基礎基建,不可標準化的人工細節、帶微小阻力的人性化服務,成為稀缺競爭力。
         
        優秀服務從不盲目追求全程零溝通、高效率:
        1. 線下門店:店員觀察顧客隨身狀態、天氣、趕時間與否再上前推介,而非一進門強行推銷;
        2. 生活服務:美容師記住顧客睡眠狀況,按需減少推銷、預留安靜休憩時間;
        3. 社區小店:老板記住老客飲食習慣,隨口一句 “照舊?”,無數據轉化指標,卻牢牢鎖住復購。
        體驗經濟理論《Welcome to the Experience Economy》早已點明:企業售賣的不止商品,更是一段專屬經歷;AI 全面自動化后,人的臨場判斷、即興互動、留白停頓,恰恰是效率產品無法復刻的獨特摩擦價值。

        四、兩大經典案例:一正一反看懂摩擦落地邏輯

        image.png

        正向案例:Apple Liquid Glass(界面設計)

        從 iOS 扁平化極簡,到 2025 WWDC 推出 Liquid Glass 動態玻璃界面,蘋果重新把光影折射、材質形變、層級反饋帶回交互:點擊觸發玻璃形變、環境光實時改變界面通透度,不堆砌冗余特效,用可控的物理觸感摩擦,讓用戶清晰感知 “正在操控實體化界面”

        image.png

        區別于早年臃腫擬物化,新版玻璃設計遵循克制原則:僅在關鍵控件增加材質反饋,兼顧可讀性與操作實感,印證:優質簡潔不是全盤抹除觸感,而是保留必要的交互阻力。

        反面案例:Amazon Style(線下零售踩坑)

        亞馬遜試圖用全數字化改造服裝門店:顧客掃碼選品、系統遠程送衣進試衣間、全程線上結賬,砍掉逛街摸面料、隨性閑逛、店員穿搭建議、偶遇冷門好物的所有低效環節,把線下實體店做成高價版線上 APP。
         
        最終 2023 年全線閉店。線下商業的核心剛需從不是 “最快買完衣服”,而是閑逛、試錯、即興決策帶來的沉浸式體驗;盲目消滅所有低效摩擦,等于剝奪用戶到場的核心理由。

        五、Z 世代反向選擇:主動給自己增設有效阻力

        image.png

        當下年輕人主動逃離全自動化效率產品,復古消費持續升溫:
        • 數碼:CCD 膠片相機、功能笨手機、有線耳機回歸,主動接受廢片多、不能無限刷信息流的限制;
        • 文娛:黑膠、實體 CD 銷量上漲(2024 上半年美國黑膠銷售額同比 + 17%),愿意經歷拆碟、上針、翻面的繁瑣流程;
        • 生活:紙質手賬、桌游、城市漫游走紅,放棄智能提醒、一鍵開局的便利。
        根源在于:算法產品過度順滑、精準投喂,用戶長期被動接收內容逐漸疲憊;可控的人為阻力,幫用戶奪回生活自主權,Slow Technology(慢科技)理念同樣佐證:產品除了高效完成任務,也可以為反思、停頓、長期陪伴設計合理阻力。

        六、AI 泛濫環境:帶人工痕跡的小摩擦,成為品牌差異化符號

        image.png

        海量 AI 量產內容千篇一律:文案、海報、短視頻工整完美、無瑕疵無棱角,標準化順滑內容不再稀缺,帶手工痕跡的 “不完美摩擦” 成為辨識度來源,喜茶拙趣設計是絕佳落地樣本:
         
        手寫不規則字體、涂鴉風圍擋、保留錯字手寫修改痕跡、用戶手繪 DIY 杯貼實體上墻。沒有刻意拉長排隊、增設操作步驟,僅通過保留人的手工瑕疵,跳出 AI 模板化設計,讓用戶直觀感知:這份設計出自真人之手,而非流水線批量生成。
        設計師隱喻「表情符號沒有皺紋,但人有情緒」:全鏈路零瑕疵的產品沒有記憶點,局部手工瑕疵、適度不規整、可控小阻力,恰恰是品牌跳出同質化的識別符號。

        七、落地準則:品牌如何科學設計良性摩擦(避坑指南)

        絕對避雷(禁止刻意制造壞摩擦)

        不藏入口、不晦澀規則、不無故拉長排隊、不用低可讀性文案、不靠繁瑣動效為難用戶,良性摩擦是用戶自愿參與的邀請,不是篩選用戶的門檻。

        四大好摩擦設計原則

        1. 路徑可預期:多一步操作,提前告知用戶收益;
        2. 等待有回饋:短暫等候后,給到情緒驚喜、專屬體驗;
        3. 學習有價值:學習規則后,解鎖專屬玩法、深度體驗;
        4. 操作有收獲:觸摸、篩選、比對的動作,轉化為產品擁有感。

        八、結語:順滑負責成交,摩擦負責留下

        極致順滑幫品牌快速完成交易、高效流轉用戶;而經過設計的良性摩擦,拉長體驗密度、沉淀用戶記憶、塑造品牌獨特氣質。
         
        未來產品與品牌的競爭,不再比拼誰能把流程壓到最短:咖啡不必極速出餐、線下門店不用照搬 APP 邏輯、品牌廣告不必 3 秒抓眼球、內容不必無腦一鍵劃走。
         
        效率是行業標配基建,質地、參與、投入、真實記憶才是新的稀缺資源;好設計既要讓人高效通過,更要靠良性摩擦,讓用戶深度留下。

        優化亮點說明

        1. 結構優化:去掉原文零散碎片化批注、無關小紅書雜圖文字,9 大板塊合并為邏輯遞進 8 段,從概念→分類→案例→落地,閱讀流暢度提升;
        2. 文字精簡:剔除口語化冗余短句、重復觀點,保留全部權威理論(宜家效應、慢科技、體驗經濟、Designing Friction)與原版案例;
        3. 落地強化:提煉落地表格 + 設計準則,方便產品 / 設計師直接復用;
        4. 細節規整:統一案例時間、數據標注,專業概念釋義通俗化,兼顧專業性與可讀性;
        5. 標題分層:大小標題層級清晰,適配公眾號 / 行業專欄排版。

        蘭亭妙微(藍藍設計)www.hengshangtqd.cn 是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計桌面端界面設計、APP界面設計圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。

         

        image.png

        AI 正在淘汰的 10 種 UI 交互模式

        清陽 行業趨勢

        AI 正在重構 UI 底層設計邏輯,表單填報、數據看板、篩選組件等依托用戶手動操作誕生的經典交互范式迎來系統性迭代,大量沿用多年的產品界面從 “人機操作載體” 轉向 “AI 結果校驗載體”。當下產品與設計團隊普遍面臨隱性 UX 負債:大量仍可正常運行,但底層設計邏輯已經落后于 AI 技術發展的老舊交互模式。
        過往數十年,儀表盤、錄入表單、篩選側邊欄、配置向導、消息通知、FAQ 幫助頁、新手引導等界面,設計出發點統一圍繞:用戶需要手動落地操作。設計師所有界面方案,均立足于 “人作為實際執行者” 這一核心前提。但生成式 AI、智能 Agent、多模態理解技術落地后,這套底層假設正在崩塌:AI 可自主完成絕大多數標準化操作,一大批傳統 UI 失去原生存在價值。

        image.png

        本文拆解八大被 AI 重塑的經典交互形態,區分淘汰、改造、留存三類設計走向,總結 UI 從「人類執行界面」向「人類監督界面」的行業大遷移。

        一、八大傳統 UI 模式的迭代變革

        1. 多步驟配置向導:分步彈窗引導→AI 智能預判 + 結果確認

        image.png

        傳統配置向導通過拆分線性步驟、分步彈窗提問,引導用戶完成系統配置,要求使用者讀懂專業術語、跟隨固定流程逐項設置。但 AI 可依托賬號歷史數據、操作場景、初始行為自動推演配置需求,層層問詢反而變成使用阻礙。
         
        改造邏輯:用戶僅通過一句話自然語言表達需求,系統自動完成全流程配置搭建,用戶角色從逐項填表的操作者,轉變為結果審核人,只需修正 AI 生成內容的偏差。
         
        落地案例:Shopify Sidekick 依托店鋪經營數據,自動識別爆款商品,一鍵生成精選商品合集、配套折扣規則與營銷活動,商家僅需核對方案、確認落地;反觀 HubSpot 創建報價需 7 步手動填表選型,全流程重復錄入系統已存信息,向導模式效率劣勢凸顯。
        留存邊界:極小眾精細化定制場景,配置向導保留兜底入口,不作為主流操作路徑。

        2. 篩選側邊欄 + 關鍵詞手動搜索:多條件手動勾選→自然語言意圖檢索,篩選退居微調輔助

        image.png

        傳統搜索需要用戶完成兩次轉化:把真實需求提煉關鍵詞,再通過尺碼、價格、分類等篩選控件拆分條件,關鍵詞 + 復選篩選組合是過去精準檢索的標配。自然語言語義檢索成熟后,用戶一句話即可鎖定全部約束條件。
         
        改造邏輯:產品以自然語言輸入框作為搜索主入口,側邊篩選不再是核心檢索工具,降級為結果微調組件;用戶可通過多輪對話持續優化篩選范圍。
         
        落地案例
        1. KAYAK AI 模式:單句輸入出行需求,系統自動解析日期、位置、預算等信息,直出機票、酒店結果,無需拆分表單填寫;
        2. 招聘工具 Wrangle:HR 輸入崗位經驗、技能要求,AI 自動批量匹配候選人并生成匹配分數,摒棄多維度篩選面板。
           
          補充:篩選組件并未消亡,在用戶漫無目的、隨意瀏覽探索的場景(如鞋服商城閑逛),篩選用于可視化全品類商品,承擔瀏覽發現作用,僅從核心功能變為輔助功能。

        3. 手動錄入表單:全字段人工填寫→AI 自動提取 + 高置信預填,表單轉為糾錯面板

        image.png

        傳統表單設計聚焦優化輸入體驗:調整字段排序、快捷鍵跳轉、輸入校驗,默認所有信息由用戶手動錄入,即便附件已有完整數據,仍需二次手動謄寫,造成冗余操作。文檔 AI 可從圖片、PDF、郵件、票據中結構化提取信息,從根源消除重復錄入。
         
        改造邏輯:上傳原始憑證后,AI 自動填充表單字段,高置信數據靜默回填、低識別度字段高亮標紅,用戶只修改異常內容,表單從錄入載體變為數據核對視圖。
         
        落地案例:QuickBooks 報銷系統迭代 Autofill 功能,上傳發票圖片 / 文件,系統秒級抓取收款方、金額、開票日期等信息,用戶告別全字段手動填寫。

        4. 靜態數據看板與預制報表:全指標平鋪展示→異常優先預警 + 對話式數據下鉆

        image.png

        傳統數據看板、周期報表提前預設固定統計維度,鋪滿全量 KPI 指標,所有數據權重一致,需要使用者人工翻閱海量數據、自主查找業務異動,關鍵異常極易被海量數據淹沒。AI 數據分析實現實時異動監測與歸因,重構看板設計思路。
         
        改造邏輯:看板不再羅列全部數據,優先高亮業務異常、增長機會,附帶可一鍵執行的優化動作;深度數據探查改用自然語言提問,AI 自動拆解數據、定位問題、輸出優化方案。
         
        落地案例
        1. Shopify Pulse:自動分析店鋪營收,提煉爆款促銷、購物車挽回等運營建議,搭配一鍵創建活動按鈕;
        2. Amplitude AI:輸入 “優化定價頁轉化率”,系統自動定位無效點擊、暴躁點擊等轉化卡點,同步輸出三套落地優化方案。

        5. CRUD 數據表格:單條逐單元格編輯→自然語言批量指令 + 變更差異審閱

        image.png

        傳統增刪改查表格基于單行單字段操作設計,批量修改大量數據時,用戶需重復上百次點開、編輯、保存操作,用戶宏觀業務意圖被切割為碎片化操作。
         
        改造邏輯:用戶用自然語言下達批量修改指令,AI 自動生成全量變更清單,頁面展示修改前后數據差異,使用者批量確認或駁回個別修改項,表格從編輯工具轉為變更預覽視圖。
         
        落地案例:Airtable 智能字段助手,一句指令即可批量全網調研競品營收與產品優勢,自動整表填充新增字段,無需逐個單元格錄入。

        6. 靜態 FAQ + 分層幫助文檔 + 固定式新手引導:靜態說明書→場景化實時 AI 答疑

        image.png

        過往產品依靠分步新手彈窗引導、層級式幫助文檔、標準化 FAQ 解答問題,內容為通用模板,無法匹配用戶當下頁面、報錯場景、操作鏈路,用戶遇到個性化問題很難精準檢索對應方案。
         
        改造邏輯:幫助文檔、FAQ 轉為 AI 知識庫底層素材,不再面向用戶開放查閱;AI 實時識別用戶所處頁面、操作行為、報錯信息,按需推送定制化解決方案,熟練度越高,引導提示越精簡;復雜問題支持屏幕共享、語音對話多模態求助。
         
        落地案例:Google AI Studio 搭載實時屏幕共享、語音咨詢功能,AI 實時同步用戶操作畫面,針對性解決實操問題。

        7. 時序信息流通知:全消息平鋪推送→AI 智能分級摘要 + 重點事項定向提醒

        image.png

        傳統通知系統按時間線平鋪全量消息,點贊評論、系統故障、審批提醒權重一致,海量無效消息淹沒關鍵告警,用戶需要逐條瀏覽篩選重要信息。
         
        改造邏輯:AI 充當信息分診官,依據緊急度、業務關聯度拆分消息:低優先級內容合并為定期摘要簡報,高風險事件附帶因果鏈路、業務影響、處理方案定向推送,通知中心進化為決策工作臺。
         
        落地案例:Datadog 監控告警摒棄零散條目推送,以「故障根源 - 服務異常 - 用戶影響」鏈式結構展示事故,運維人員一鍵定位問題。

        8. 空白頁「新建」按鈕:空白畫布從零創作→AI 一鍵生成初稿,用戶擇優修改

        “新建空白文檔 / 項目” 按鈕把用戶置于零創作起點,空白界面極易帶來創作焦慮。
         
        改造邏輯:用戶描述創作需求、約束條件,系統自動生成完整初稿,用戶工作從從零原創變為內容微調、擇優優化,創作界面完成從空白創建到內容迭代的轉變。

        二、推動 UI 變革的八大核心技術驅動力

        1. 執行全自動化:AI Agent 可閉環完成多步驟串聯工作,依賴人工分步操作的界面失去剛需;
        2. 環境上下文理解:系統自動讀取用戶文檔、歷史行為、賬號數據,無需頁面反復采集已有信息;
        3. 自然語言意圖解析:機器讀懂口語化需求,無需用戶把想法轉化為下拉框、篩選條件等系統語言;
        4. 多模態輸入融合:支持圖文、語音、屏幕畫面多維度交互,打破僅文字 + 表單的交互限制;
        5. AI 生成初稿能力:依托簡短描述生成可用內容,消滅空白創建的使用痛點;
        6. 按需場景解釋:精準捕捉用戶困惑,即時推送對應指引,摒棄前置全量灌輸的新手教程;
        7. 交互成本壓縮:多步人工操作濃縮為單次指令,精簡冗余頁面流程;
        8. 信息智能分級:自動篩選信息優先級,告別全量信息無差別展示。

        三、行業發展規律:新舊 UI 并非非此即彼,而是主次遷徙

        傳統交互不會瞬間徹底消亡,篩選欄、配置向導、空白新建按鈕仍會長期保留:面向 AI 信任度不足的用戶、小眾邊緣業務場景、無 AI 算力支撐的使用環境,老舊交互作為兜底備用方案。
         
        長期演化趨勢:傳統執行型 UI 從產品核心主路徑,逐步下沉為備選兜底功能;AI 驅動的決策監督型 UI 成為產品主流交互。

        兩類界面劃分

        1. 執行導向 UI(持續萎縮):服務人工重復錄入、分步配置、逐條修改等機械操作,AI 接管落地執行后,該類頁面持續精簡;
        2. 決策監督 UI(快速增長):用于審核 AI 輸出結果、修正系統偏差、研判異常數據,是未來 UI 設計核心發力方向。

        四、總結

        AI 時代 UI 設計的核心變化:人類不再是系統操作工,變成 AI 成果的審核決策者。未來優質界面的設計目標,是放大人類的判斷與決策價值,而非強迫用戶復刻機器的運行邏輯。
         
        轉載:人人都是產品經理
         

        蘭亭妙微(藍藍設計)www.hengshangtqd.cn 是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計B端界面設計桌面端界面設計APP界面設計、圖標定制、用戶體驗設計交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。

         

        image.png

        作品總是沒細節怎么辦?這3招教你給設計增加形式感!

        清陽 設計資源

        一、異形容器

        通過制造視覺元素的差異—— 讓 “不一樣” 的元素從周圍環境中凸顯出來,自然成為視覺焦點。

        引導用戶注意力優先落在關鍵信息或操作點上,這就是對比原則,我們可以通過形狀的對比讓卡片突出,增加視覺表現力:

        image.png

        在一些視覺頁面中,也可以用異形容器增加視覺表現力,可以結合主題設計容器,例如下方就是一個以紙質火車票造型作為卡片背景的例子:

        image.png

        也可以結合內容設計容器,例如頁面的內容是感謝用戶,就可以從感謝信或者信紙的角度設計容器:

        image.png

        二、背景

        在設計中,想要為卡片或頁面增加形式感,豐富背景是直接且高效的方式,可以從顏色、底紋、裝飾元素這三個核心維度展開,讓背景不再單調,為整體設計加分:

        1. 優化顏色增加背景的形式感

        可將背景的無彩色(如黑白、灰度色)替換為帶有明確色相的有彩色(如柔和的薄荷綠、清新的天藍、低飽和的珊瑚橙等)

        借助 “無彩色與有彩色” 的屬性差異,讓卡片與周圍的淺灰背景或普通卡片形成直觀色彩對比,快速從整體布局中跳脫出來:

        image.png

        也可以將卡片的單一純色設計,升級為多種顏色的漸變效果 —— 通過這種漸變色,讓卡片與周圍的背景、其他組件形成鮮明對比

        從而快速從整體布局中凸顯出來,成為視覺焦點,快速抓住用戶注意力:

        image.png

        2. 給背景增加底紋

        在背景中增加底紋(如低透明度的幾何紋理、輕微的肌理質感等),不僅可以強化視覺層次,還可以向用戶傳遞頁面的風格氛圍,增強記憶點。

        例如科技類產品用細線條網格底紋增強科技感,古風類產品可以用紙張等營造復古的氛圍感:

        image.png

        image.png

        image.png

        下面列舉了一些常見的底紋元素,可搭配圖層的混合模式、不透明度使用:

        image.png

        3. 在背景上增加裝飾

        可以根據頁面/活動添加合適的裝飾元素,裝飾可以是圖形、文字等與頁面相關的元素。

        裝飾元素主要是為了平衡界面視覺,優化整體協調性:當界面存在 “大面積空白” 或 “元素分布不均” 時,裝飾元素可起到 “視覺平衡” 作用。

        image.png

        image.png

        image.png

        三、文字

        這里的文字不僅是卡片標題,也可以是活動標題或者頁簽導航,那么文字的設計感可以怎么加呢?我們可以從圖形裝飾、線條裝飾、文字裝飾、背景裝飾四個方面給文字添加設計感:

        1. 圖形裝飾

        將圖形放在標題空白處增加標題的設計感:

        image.png

        也可以用來填補標題的空白區域,平衡視覺:

        image.png

        用圖形代替文字的某一個筆畫,傳遞產品的氛圍:

        image.png

        2. 線條裝飾

        用簡單的線條突出標題,輔助信息分層,突出重點信息,降低認知成本:

        image.png

        3. 文字裝飾

        用風格獨特的字體寫一句英文作為標題的裝飾:

        image.png

        另一種方法是將文字放大起到裝飾作用:

        image.png

        4. 背景裝飾

        在標題后面增加背景,不僅可以保證標題的可讀性,還能讓標題抓住用戶的眼球,進一步強化視覺表現力:

        image.png

        總結

        盡管上面的案例分別展示了不同的提升形式感的方法,但在實際設計中,不必局限于單一形式。

        將多種手法靈活組合(比如為卡片搭配有彩色背景的同時,疊加輕量底紋并點綴細節裝飾),更能放大視覺表現力,讓界面擺脫單調感,呈現出更豐富的層次與質感。

        如果這篇內容對你有啟發,或是你有其他提升形式感的實用思路,歡迎在評論區分享交流,一起探索更多設計可能性~

        轉載:優設

        蘭亭妙微(藍藍設計)www.hengshangtqd.cn 是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計B端界面設計、桌面端界面設計、APP界面設計、圖標定制用戶體驗設計、交互設計UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。

         

        image.png

        一讀就懂!B端響應式設計的新手掃盲

        清陽 設計資源

        蘭亭妙微UI設計公司:最近重新更新一下 B 端響應式相關的內容,幫助已經初步掌握的同學重新鞏固,還沒學會的同學快速入門。

        響應式的適配對象

        響應式是一種網頁前端技術,讓網頁可以根據分辨率、設備的變更,自動調整樣式和布局。

        image.png

        它的誕生起源于移動互聯網興起的熱潮,彼時智能手機訪問網站的需求激增,但多數網站的適配都是面向電腦端的大屏幕,僅有少數網站會額外開發符合移動端顯示需求的版本(自適應)。

        響應式的提出,就是為了解決這種問題,通過建立一套約定好的設計、開發方法,用一套代碼自動適配臺式電腦、筆記本、平板、移動端等各種設備,提高網站的兼容性和開發效率。

        而學習響應式,首先就要從瀏覽器開始說起。

        瀏覽器是一個非常特殊的軟件,比如大家熟知的 Chrome、Safari、Eage 等,我們日常訪問的所有網頁,都需要通過瀏覽器加載并渲染出最終的樣式。

        image.png

        可以把網頁 HTML 文件理解成是一個程序,而瀏覽器就是運行這個程序的系統(環境),也就是說解析網頁依靠的是瀏覽器而不是 Windows、Mac、iOS、Android、Linux 等客戶端系統。

        瀏覽器即系統中的系統(類似虛擬機),不管在任何系統或設備上,只要安裝了瀏覽器,就可以用大體相同的規則、邏輯去加載、渲染出網頁。

        image.png

        但不同設備的屏幕有很大差異,網頁如何識別并匹配這些設備呢?

        方法主要有兩種,第一種是瀏覽器會識別當前系統和設備,并提供接口讓網頁讀取。而部分網站會準備多種規格的網頁,根據獲取的設備類型推送對應的規格,這種做法叫做自適應模式。

        通常自適應只區分桌面端和移動端兩種,較大的門戶、購物、工具類網站,普遍使用自適應模式。因為移動端訪問網頁的需求并不高,所以會對移動端版本做大量的精簡,降低開發、維護成本。

        image.png

        另一種方法,則是讀取瀏覽器視圖區域的分辨率。任何瀏覽器的界面,都包含功能區域和視圖區域兩個部分,功能區域提供相關的軟件菜單、操作按鈕,視圖區域則是顯示網頁界面的區域。隨著設備和屏幕分辨率的變化,瀏覽器的大小也會不同,網頁視圖區域也會跟著縮放。

        image.png

        網頁視圖注定小于整個瀏覽器的軟件窗口,而瀏覽器作為軟件,在系統中的尺寸不等于系統分辨率(或設備分辨率),一方面有系統的全局組件影響,另一方面窗口并不是非得全屏,用戶可以任意調整。

        image.png

        所以響應式網頁就是根據瀏覽器的視圖區域做適配,不管你是在電腦上縮放軟件窗口,還是在不同的設備、系統中打開,本質上都只是顯示區域大小的變更。而在瀏覽器的檢查選項中,模擬不同的設備其實就是縮放出一個指定的視圖窗口出來。

        image.png

        這種依賴關系延伸出一個新的知識點,即網頁顯示的分辨率,和顯示設備的屏幕分辨率,是兩套不同的體系。

        這是因為硬件分辨率和系統渲染的分辨率是兩個概念,尤其在今天高分辨率屏幕普及的背景之下。比如我的 Macbook Pro14 寸筆記本,硬件分辨率是 3024 x 1964 (254 ppi),但在系統的屏幕分辨率選擇中,默認的卻是 1512*982(即原來的 1/2)。

        image.png

        這是因為硬件分辨率太高了,1:1 渲染的話,那么大多數圖標、文字是無法被看清的,所以默認使用了 2x 的規格渲染。但這只是其中一個選項,在 HIDPI 技術的加持下,用戶還可以選擇別的分辨率,比如我會進一步調高到 1800*1169。

        在 Windows 系統中同理,雖然有很多高分辨率的屏幕,但是用戶為了看清內容,會在系統中設置 120%、150% 的放大效果,等于為系統分辨率做出變更。

        image.png

        說到底,系統顯示分辨率的規格也是無窮無盡的。但是不管外部的轉換邏輯有多復雜,規格有多少,都和響應式網頁無關,它只需要認準瀏覽器的視圖區域分辨率即可。

        所以了解線上案例的響應式布局規則,或者檢查已經開發好的響應式頁面,并不需要切換不同設備查看,只要拖拽縮放瀏覽器的大?。ㄖ饕菍挾龋┘纯色@得完整的響應效果。

         

        image.png

        image.png

         

        最后總結起來,響應式網頁是面向瀏覽器視圖區域做適配的布局方法,而不是面向系統、屏幕分辨率的適配,這和自適應布局有本質的差異。

        在 B 端領域,絕大多數項目都只部分兼容響應式,放棄移動端的適配,即使支持移動端也是使用自適應的混合模式。要面對這些復雜的場景,就月需要理解上面這些基礎的概念,否則設計師就無法真正滿足響應式項目的前期創建和后期交付需要。

        轉載:優設

        蘭亭妙微(藍藍設計)www.hengshangtqd.cn 是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計桌面端界面設計APP界面設計圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。

         

        image.png

        5 個微觀交互,讓任何產品都顯得高端

        清陽 交互設計及用戶體驗

        微交互,已然成為打造產品高端體驗的隱秘核心。
         
        從點擊反饋到懸浮動效,那些容易被忽略的細節瞬間,正是讓用戶體驗從 “勉強可用” 升級為 “質感驚艷” 的關鍵所在。真正有格調的產品,不靠浮夸 UI 堆砌,而是憑借細膩入微的微交互,讓用戶真切感受到產品設計的用心與溫度。
         
        很多產品團隊一味追求所謂 “驚喜感”,誤以為加載頁彩紙動畫、吉祥物特效就是體驗亮點。但真正高級的驚喜,從不刻意張揚,它藏在每一次操作反饋里,賦予產品靈動生命力,擺脫冰冷工具感,這便是微交互的價值。
         
        點擊、懸浮、滾動、加載、頁面切換…… 用戶每一次操作后的產品反饋,直接決定產品給人的第一印象是高端精致,還是廉價粗糙。今天蘭亭妙微UI設計公司,拆解 5 種可直接落地的微交互設計邏輯,不靠花哨特效,僅憑細節質感,輕松拔高產品檔次。
         

        一、即時點擊反饋:溫柔回應每一次操作

        想必人人都有過這樣的體驗:點擊按鈕毫無反應,反復點按仍無反饋,瞬間心生疑惑,甚至懷疑產品卡頓、按鈕失效。毫無回應的按鈕,會直接拉低用戶體驗好感。
         
        恰到好處的點擊反饋,是最簡單的暖心設計,直白告訴用戶:你的操作,我已收到
         
        多數產品的按鈕反饋敷衍了事,僅微調亮度,變化微弱到幾乎無法感知。而高端產品的點擊反饋講究克制且用心:輕微脈沖律動、小幅收縮回彈、柔和形變,移動端可搭配輕量級震動。動效幅度恰到好處,靈動不浮夸,簡約不呆板,讓按鈕擁有鮮活質感。
         

        高級感核心邏輯

         
        人都渴望即時回應,就像互動時得到及時應答般舒適,貼合用戶心理預期。
         

        設計小貼士

         
        按鈕動效切忌過度張揚、刻意搶鏡,高級感貴在內斂低調,急切浮夸反而拉低質感。
         

        二、舒緩加載狀態:消解等待焦慮感

        image.png

        沒有用戶喜歡等待加載,但人人都能接納從容不焦慮的加載過程。網絡波動、服務器延遲本是常態,可一旦加載卡頓,用戶便會下意識歸咎于產品設計粗糙、技術不成熟。
         
        高端產品從不會讓加載變成用戶的煎熬時刻,摒棄老舊單調的旋轉加載圖標,用優雅的微交互安撫用戶情緒,掌控等待預期。三種高級加載設計方式:
         
        1. 骨架屏:提前勾勒內容布局輪廓,如同告知用戶內容正在籌備、即將呈現,消解未知感;
        2. 真實進度條:拒絕虛假跳變進度,平穩勻速推進,坦誠展示加載進程,用真誠感贏得用戶信任;
        3. 輕量提示動效:微光流轉、輕柔脈沖、平緩滑動等極簡動效,低調傳遞 “正在加載中” 的信號,不喧賓奪主。
         

        高級感核心邏輯

         
        真正的奢華從不是極速加載,而是把枯燥煎熬的等待時刻,轉化為平靜安心的體驗時刻。
         

        設計小貼士

         
        摒棄生硬的 “加載中……” 文字,改用場景化文案,如 “正在為您準備數據面板”;避免文案帶有歉意感,從容自然更顯專業。
         

        三、適配懸浮狀態:分寸感拉滿的桌面交互

        在桌面端,鼠標懸浮效果是品牌調性與設計審美的直觀體現。元素懸浮毫無反應,會顯得產品呆板無靈氣;懸浮特效夸張過度,又顯得雜亂廉價、刻意賣弄。
         
        高端懸浮設計講究張弛有度、沉穩克制,在無感和浮夸之間找到完美平衡:
         
        1. 柔和高亮變化:微調色彩明度、淡入細邊框、疊加柔和陰影,低調凸顯選中狀態,不刻意吸睛;
        2. 精準光標適配:根據交互場景切換對應光標樣式,細節處體現專業度,避免光標錯亂引發用戶困惑;
        3. 微小形變位移:元素輕微上浮、小幅傾斜、微量平移,靈動細膩,杜絕大幅度跳動打亂頁面布局。
         

        高級感核心邏輯

         
        懸浮交互如同高端服務的貼心領班,時刻關注用戶動作,既不刻意圍攏打擾,也不冷漠無視,分寸感十足。
         

        設計小貼士

         
        嚴控懸浮形變幅度,切勿因元素位移擠壓、打亂原有頁面布局,影響正常點擊操作。
         

        四、邏輯化頁面過渡:流暢銜接操作路徑

        image.png

        頁面過渡動效,決定了產品整體操作的流暢度。它的核心價值從不是炫技,而是幫用戶清晰感知操作來源與跳轉去向,建立空間認知。
         
        低端過渡只會套用單調的淡入、淡出、黑屏切換,生硬割裂操作邏輯。而高端過渡貼合產品使用邏輯,自然順滑:
         
        1. 方向聯動滑出:導航欄從左側滑入、彈窗從底部升起,面板跳轉遵循視覺邏輯,不隨意切換方向;
        2. 絲滑無卡頓滾動:頁面滾動平穩順滑,無抖動、無突兀跳轉,手感流暢絲滑;
        3. 場景化關聯過渡:點擊觸發的內容從原操作位置延展出現,關閉后回歸原位,貼合現實物體運動邏輯,契合用戶潛意識認知。
         

        高級感核心邏輯

         
        流暢的過渡不止是視覺效果,更能讓用戶沉浸式感知產品穩定性與設計用心,潤物細無聲提升質感。
         

        設計小貼士

         
        摒棄廉價 PPT 式花哨轉場動畫,冗余花哨的過渡效果,只會破壞產品高級調性。
         

        五、克制化成功反饋:低調收尾不刻意討好

        image.png

        任務完成后的慶祝交互,始終要把握好分寸感:既要認可用戶操作成果,又不能過度幼稚化、居高臨下式說教。
         
        泛濫的彩紙特效、浮夸的狂歡動畫,初次新鮮,久了便顯得刻意又廉價。高端成功反饋,簡約沉穩、點到為止:
         
        1. 極簡對勾動效:靜態簡約對標,無旋轉、無爆炸特效,利落宣告任務完成;
        2. 高級感色彩漸變:選用低飽和雅致綠色作為成功標識,摒棄刺眼熒光綠,低調有質感;
        3. 簡約文案提示:采用 “已保存”“設置完成” 等簡潔表述,告別幼稚化歡呼文案,尊重用戶心智;
        4. 輕量音效點綴:適配場景加入輕柔提示音、清脆點擊聲,替代喧鬧的游戲勝利配樂,氛圍感恰到好處。
         

        高級感核心邏輯

         
        以簡潔利落的收尾給予用戶儀式感,不刻意博眼球、求夸贊,真正的高級,源于內斂自信。
         

        設計小貼士

         
        成功動效時長不宜過長,若動畫耗時遠超任務操作時間,反而顯得冗余拖沓。
         

        微交互,遠比浮夸 UI 更決定產品質感

         
        再精美的 UI 界面,也撐不起敷衍潦草的微交互。微交互是用戶每一次操作的情感紐帶,是普通工具與高端體驗的分水嶺。
         
        用戶很少會刻意夸贊配色、布局,但會真切感知 “用起來很順手”“質感特別好”“整體很流暢”。這種說不出緣由的好感,正是微交互帶來的隱性高級感,也是產品設計最高的贊譽。
         

        產品高級感落地清單

         
        想要靠細節俘獲用戶,堅守 5 個核心原則即可:
         
        1. 按鈕交互即時響應,不延遲、無空白;
        2. 加載體驗舒緩從容,消解用戶等待焦慮;
        3. 懸浮效果低調引導,不搶視線、不打亂布局;
        4. 頁面過渡貼合邏輯,流暢銜接用戶操作路徑;
        5. 任務反饋簡約克制,沉穩收尾不刻意浮夸。
         
        遵循這套微交互設計邏輯,無需大改版、不用高成本特效,僅優化細節體驗,就能讓產品質感肉眼可見升級,收獲用戶隱性好感。
         

         

        蘭亭妙微(藍藍設計)www.hengshangtqd.cn 是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計B端界面設計桌面端界面設計APP界面設計、圖標定制、用戶體驗設計、交互設計UI咨詢高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。

         

        image.png

        超全梳理!B端產品設計風格的5個階段

        清陽 行業趨勢

        因此今天蘭亭妙微UI設計公司,來講解 B 端產品界面的視覺風格,聊聊在整個行業當中視覺風格的變化與目前的現狀。以及給大家說說未來應該如何選擇自己產品的視覺風格~

        我們會將整體分為行業初期,萌芽期、成長期、野蠻發展期、新階段 ,每一個階段給大家總結一個最為流行的風格,并分析這個風格出現的原因,方便大家進行理解。

        一、行業初期-經典傳統風

        我們把時間拉回到 2012 年。在那時,Ant Design 還沒有出現,也沒有什么 Element、Semi Design,行業當中最早的 B 端系統都是以客戶端的形式進行呈現。

        整體風格也非常老舊,像是那會兒的 Office、SAP、Salesforce,你可以看到都是他們青澀的模樣。

        image.png

        image.png

        在經典傳統的設計風格當中,會使用大面積的白色作為底色,同時在頁面中用灰色進行分割,使得整個頁面散亂搶眼,導致整體的視覺很難被大眾所接受,總體感覺信息較散,難以進行聚焦。

        而在早期,出現這些老舊風格主要有三個原因:

        1. 技術框架限制:因為當中成熟的前端框架較少,沒有太多技術棧提供給到開發進行使用,因此沒有精力將頁面做得漂亮
        2. 認知不足:設計師對于客戶端、網頁端的設計理解認知本身不夠,做得較為粗糙,比如當時的 Office 的界面設計也大致是如此的模樣
        3. 風格一致:早期 Windows 系統就是這樣的風格,與 Windows 一致更容易被大眾所接受,因此就很難進行創新

        關于這類風格的產品,大家不要覺得這夸張,其實在目前依舊有很多產品會延續這個風格。比如 醫療類產品、工業生產類系統,對于他們而言,能用即可,不必糾結太多。

        但隨著時間的推移,行業中對于 B 端設計的要求也在逐漸變高。

        二、萌芽期-清爽整潔風

        我們將時間推移到 2015 年前后,隨著行業不斷發展,在國外 Fiori、Salesforce 的出現讓大家意識到,這類型的 B 端產品也是需要設計的。

        因此國內外的很多系統都是在這一時間面世,像是 Ant Design、Element 都相繼發布。

        image.png

        由于這些設計系統的誕生,你會發現大家對于整個 B 端設計有了一點自己的想法。

        在設計上,會去考慮使用 區塊劃分,將整個頁面進行規整呈現。

        比如 SAP 在使用了 Fiori 過后,就會使整個界面更干凈。

        image.png

        image.png

        image.png

        同樣非常老牌的 Salesforce 在 2015 年的時候。也帶來了相當大的視覺變化。整體都能感受到,整個頁面會通過不斷的分層、顏色的劃分、通過黑白灰的方式去呈現頁面當中的基本信息。

        三、成長期-沉穩側黑風

        我們的時間來到 2018 年前后,在這個時間節點,很多產品都推出了自己的設計系統,對于 B 端設計風格而言,也會提出更高的要求。

        比如 Teambition 產品當中,它們提供了自己的設計系統的內容去指導整個產品來進行迭代和優化。同樣 Ant Design 它們也推出了自己的 Ant Design Pro 來演示使用設計系統過后,能夠搭建出什么樣的產品。

        image.png

        同樣,這個時段很多產品也開始進行自己產品的視覺優化,這時候整體的風格是以:黑色側邊導航為主,然后內容形態進行延展。

        比如像有贊、Coding、微盟、飛書,之前都是這樣的設計風格來進行呈現。

        image.png

        你會發現它們在整體的設計上都會更加重視頁面的分塊顏色的區隔,整體頁面的識別效率。同時這段時間爆發出來非常多的 B 端產品,隨后國內都會按照側邊黑色導航的樣式進行進一步設計,這一定程度上提高了國內 B 端設計的下限~

        四、野蠻發展期-新擬態風

        我們隨后將時間推移到 2019 年后,在這時誕生了新擬態設計風格。

        它最早是烏克蘭設計師 Alexander Plyuto 在追波和 ins 發布的一副系列作品,隨后大家發現非常奇特,所以得到廣泛的關注。

        新擬態的設計風格是以立體效果與浮雕元素,呈現更為三維立體的效果,會給人一種奇特、夢幻的界面體驗。

        image.png

        隨后就會有很多產品都開始進行跟進,比如 智能家居的產品、金融類產品都有所涉及,甚至很多 B 端產品也勇敢嘗試,但大多數設計師設計完過后,整體評價都不算太高。

        image.png

        為什么沒有大規模的推行,我覺得有 3 點原因:

        1. 因為新擬態風格整體所占面積較大,比較浪費空間。像是一個按鈕,都需要使用較大空間才能呈現。
        2. 需要大面積的留白,但是對于 B 端設計來說無法做到,因此很難進行使用。
        3. 同時很多用戶剛開始覺得好看,但隨著時間的推移,出現審美疲勞,因此就不太喜歡。

        現在還會使用新擬態風格的界面設計越來越少,大多數只會在官網設計的局部進行使用,這樣可以轉換視覺感受,給到用戶更好的視覺沖擊~

        五、新階段-灰白風

        時間來到 2022-2024 年左右,你會發現很多產品都開始在這個時間節點進行更新。

        像我們熟知的 飛書、有贊、微盟、ONES、Coding,再到 Ant Design、Salesforce,你會發現非常多的產品都在進行界面風格上的迭代。

        對于這個風格,我們愿意叫它為 灰白風。

        整體頁面是以 灰色和白色 進行的頁面劃分,在分布上灰色占據弱側信息,白色占據核心信息,進而形成對頁面內容的劃分。

        聊到這里,可能有部分同學不太理解,這里我們以飛書管理后臺的迭代作為示例,給大家進行講解。

        在 2018 年,飛書管理后臺的第一個版本,采取的就是沉穩側黑風,

        image.png

        在 2022 年,飛書的管理后臺開始改變為灰白風格

        image.png

        由于業務的疊加,2023 年時,在此基礎上增加了頂部導航的業務維度,最終形成了現在這樣的界面。

        image.png

        為什么這類型的風格會大受追捧,我覺得有以下幾個原因

        1. 減少信息層級,給用戶減負:之前沉穩側黑風格,會發現頁面明顯進行大面積的分割,導致視覺感受出現較大差異?,F在只用灰色作為底,去區分主副信息這樣會更簡單的突出主要信息內容。
        2. 平臺型產品更容易嵌入:因為國內 B 端產品大多需要依附“釘釘、企微、飛書”三大平臺,因此使用灰白風能夠讓自己產品快速嵌入,不需要過多調整。如果你的產品是沉穩側黑風,那結果想都不敢想...
        3. 更容易進行適配:針對多產品的業務,也能夠使用同一套業務完整呈現才會更加合理。比如飛書的灰白風,在飛書的其他很多產品里面也會存在

        image.png

        關于設計風格,我們這篇只是講解了過去的風格內容,下篇文章我們講解當前整個 B 端產品的設計梳理,講解了更為重要的四種風格。

        轉載:優設

        蘭亭妙微(藍藍設計)www.hengshangtqd.cn 是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。

         

        image.png

        高手總結!教你做好登錄頁設計的12種切入點

        清陽 設計思維

        今天蘭亭妙微UI設計公司,跟大家分享登錄頁的 12 種設計切入點,相信總有一款會入甲方爸爸的心。

        作為設計師,我們常常面臨一個窘境:要面對各式各樣客戶審美的挑剔,有時候被虐得都懷疑人生。

        但找參考時,思維又容易被局限在常見的幾種形式里,我通過分析大量優秀的登錄頁,總結了 12 個高級的設計切入點,希望能為你打開新思路。

        一、以純色背景+品牌符號為出發點的登錄頁設計

        image.png

        設計解析:

        1. 形式:兩者都采用純色作為底色,底色配幾個跟系統主題相關的元素。
        2. 色彩:上圖的配色冷靜、柔和,突出專業與寧靜;下圖則大膽使用高對比度色彩,充滿能量與動感。
        3. 構圖:兩者均采用經典的左右分割構圖,這是登錄頁最穩健高效的布局之一。

        二、以用戶畫像為出發點的登錄頁設計

        image.png

        設計解析:

        1. 形式:兩個都采用了扁平插畫的表現形式,并且將產品的目標用戶投射到頁面上,產生強烈的身份認同感。
        2. 色彩:上圖采用高飽和度漸變背景,色彩大膽、鮮明,傳遞出年輕、潮流的品牌性格;下圖色調冷靜,應用場景比較普適。
        3. 構圖:兩者均采用穩健的左右分割構圖,它更像是一個價值宣言頁面,極大地降低了新用戶的認知門檻,提升了注冊的意愿。

        三、以場景沉浸為出發點的登錄頁設計

        image.png

        設計解析:

        1. 形式:兩個都通過高質量攝影圖來營造獨特氛圍;上圖傳遞大自然、自由等意象;下圖則傳遞溫馨、舒適、有溫度的服務感。
        2. 色彩:兩者的色彩都源于背景圖片本身,登錄框的配色和背景融合的無比自然、舒適。
        3. 構圖:兩者均采用全屏背景+中心卡片的經典構圖,它通過真實的場景,繞過生硬的文字說明,直接與用戶進行情感對話。

        四、以人物放大展示的登錄頁設計

        image.png

        設計解析:

        1. 形式:都使用了人物放大展示的表現手法,上圖通過多位兒童看書傳遞閱讀氛圍;下圖則通過虛擬角色傳遞潮流與個性。
        2. 色彩:上圖使用高飽和度的童話色彩,營造溫馨、快樂的感受;下圖采用灰色調搭配霓虹黃綠漸變,營造酷炫、動感的氛圍。
        3. 構圖:兩者均采用左右分割構圖,但側重點不同,上圖插畫重在營造氛圍和講述故事;下圖則重在角色與表單平衡,突出個性。

        五、以簡約幾何造型的登錄頁設計

        image.png

        設計解析:

        1. 形式: 均是幾何造型為主的表現手法,上圖采用冷紫漸變,傳遞出專業、穩定;下圖采用暖黃漸變,散發出活力、樂觀。
        2. 色彩: 色彩是這里唯一的變量,但效果截然不同,它完美驗證了色彩在塑造品牌感知和影響用戶情緒上的決定性作用。
        3. 構圖: 兩者都采用了清晰有力的左右分割構圖,左側是強有力的品牌口號,右側是功能清晰的白底登錄框。

        六、高對比的登錄頁設計

        image.png

        設計解析:

        1. 形式:都使用了風景攝影圖,且都內嵌在一個異形容器里,打破了傳統的方形容器造型,比較新穎。
        2. 色彩: 色彩運用非??酥魄矣心康男?,左側功能區使用無彩色,這種強對比確保了功能區域的操作清晰。
        3. 構圖:采用了最經典且不易出錯的左右分割構圖,左側是純功能性的白色表單區域,右側是激發用戶情感的場景化背景圖。

        七、以全屏插畫風格的登錄頁設計

        image.png

        設計解析:

        1. 形式:都采用全屏插畫為核心視覺,上圖使用色彩鮮明的城市插畫,營造活力都市氛圍,下圖采用紫色調山林夜景,傳遞出神秘氣質。
        2. 色彩:色彩在這里是品牌情緒本身,這種設計強項在于通過視覺瞬間建立情感連接,讓登錄體驗超越功能層面,成為一種品牌體驗。
        3. 構圖:采用中心構圖法,這種設計的視覺記憶點和品牌辨識度非常高,非常適合需要快速建立獨特品牌形象的創新型產品。

        八、打破邊界方式的登錄頁設計

        image.png

        設計解析:

        1. 形式:上下兩個案例都巧用了打破造型邊界的方式,每個頁面元素都特意打破傳統的容器邊界,給人布局靈動的感覺。
        2. 色彩:色彩都使用了低飽和度的色彩,給人高級、穩重、大氣的感覺。
        3. 構圖:采用了經典的左右構圖,打破邊界的圖形方向直指登錄表單,極大地引導了用戶完成注冊和登錄。

        九、玻璃質感的登錄頁設計

        image.png

        設計解析:

        1. 形式:這是最常見的 B 端登錄頁表現方式,設計師都喜歡用這種玻璃質感去表達產品內涵。
        2. 色彩:色彩使用比較干凈、輕盈,給人一種輕松、舒適的治愈感。
        3. 構圖:采用了經典的左右構圖,打破邊界的圖形方向直指登錄表單,極大引導了用戶完成注冊和登錄。

        十、小范圍 2.5D 插畫的登錄頁設計

        image.png

        設計解析:

        1. 形式:這是前幾年非常流行的 2.5D 插畫風格,通過一些 2.5D 元素的簡單組合,精準的傳遞平臺屬性。
        2. 色彩:兩者都采用了藍色主色調,但表達了不同的情感;上圖的淺藍色更具科技感;下圖的深藍色則更顯沉穩、莊重。
        3. 構圖:兩者均采用最經典、易用的左右分割構圖,確保功能表單區域的清晰可讀。

        十一、強質感的藍色科技登錄頁設計

        image.png

        設計解析:

        1. 形式:兩個案例都運用具象的形式將抽象的業務進行了很好的展示,科技感滿滿。
        2. 色彩:主色調采用體現科技感的深藍/黑色,關鍵元素則使用亮藍色和橙色作為點綴,打破了深色的沉悶,創造了視覺焦點。
        3. 構圖:兩者都采用中心聚焦式構圖,將最具科技感的可視化元素置于畫面中央,登錄框作為功能面板懸浮其上。

        十二、以安全信任、金融科技為出發點的登錄頁設計

        image.png

        設計解析:

        1. 形式:兩個案例都通過核心視覺符號高效傳達了產品屬性,質感比較強烈。
        2. 色彩:深藍色電路板背景營造出科技氛圍,金色則提升了頁面的品質感,發光效果和懸浮質感增強了元素的現代感和數字感。
        3. 構圖:左右構圖營造出嚴謹、平衡、可信賴的感受,登錄面板位于黃金視覺區域,確保了功能優先級。

        總結

        通過以上 12 個案例的系統性拆解,我們發現 B 端登錄頁的設計可以有如此豐富的切入點。

        它絕不僅僅是擺放表單的簡單任務,而是一個融合了品牌戰略、用戶體驗、視覺營銷和技術表達的綜合性設計挑戰。

        希望這 12 個切入點的詳細分析,能成為您應對登錄頁設計挑戰的靈感源泉和實用工具箱。

        一個高級的設計,其最高境界是讓用戶感覺不到“設計”的存在,卻能高效、愉悅地完成目標,并對品牌留下積極而深刻的印象。

        轉載:優設

        蘭亭妙微(藍藍設計)www.hengshangtqd.cn 是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計圖標定制、用戶體驗設計、交互設計UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。

         

        image.png

        從木鳥、途家、美團首頁設計,看流量分發與業務邏輯

        清陽 設計資源

        首頁是平臺的門面,更是流量入口與轉化樞紐。民宿預訂平臺如何通過首頁設計抓住年輕用戶、高效分發流量?本文以木鳥、途家、美團為例,拆解三者差異化首頁布局、流量邏輯與底層業務策略,揭示產品設計如何精準匹配用戶需求、支撐平臺增長。
         

         

        一、用戶群體差異:三大平臺的核心客群定位

         
        開展首頁分析前,先明確三家平臺的用戶基底:
         
        • 木鳥民宿:00 后占比 59%,主打年輕群體場景化、個性化住宿需求;
        • 途家民宿:00 后、80 后為小城民宿消費雙主力,各占 24%,側重家庭度假與深度體驗;
        • 美團民宿:95 后占比 48%,核心偏好高性價比、低價便捷住宿。
         
        當下民宿消費已徹底轉向年輕群體,他們不再滿足于標準化酒店住宿,更追求體驗感。馬蜂窩數據顯示:年輕用戶功能型 “硬性消費” 從 2021 年 70% 降至 2025 年 50%,精神體驗型 “彈性消費” 從 28% 升至 42%,沉浸式體驗年增速超 30%。
         
        民宿行業十余年發展遵循 “加法邏輯”:從農家樂、日租房,到網紅民宿,再到 “民宿 +” 多元場景。用戶早已超越 “住” 的基礎需求,追求出游、聚會、打卡、攜寵等延伸體驗。木鳥的細分場景、途家的度假屬性、美團的低價優勢,本質都是以用戶場景為核心的定制化設計,用不同產品路徑匹配旅游出片、周末度假、同學聚會等多元需求。
         

         

        二、首頁設計:流量分發邏輯拆解

        image.png
        垂類民宿平臺的核心目標高度聚焦,流量路徑清晰,三家均采用首屏高權重、向下遞減的 “頭重腳輕” 布局,核心預訂功能固定在首屏核心位,視覺優先級隨頁面下滑衰減。
         

        木鳥民宿:聚焦首屏,場景化精準分流

        image.png

        木鳥最大特點是僅保留首屏、無下拉界面,最大限度減少用戶跳出與流量衰減。
         
        • 核心模塊:搜索、預訂、二級導航、金剛區;
        • 分發邏輯:明確需求 + 隱性需求雙軌并行。
           
          明確需求:支持城市、地標、日期精準查詢,滿足目標清晰的用戶;
           
          隱性需求:通過周末出游、人氣好房、寵物友好等場景入口,激發潛在消費。
         
        頁面分區清晰無冗余,既能服務 “精準找房” 用戶,也能覆蓋 “場景種草” 用戶,用最短路徑完成預訂轉化。
         

        途家民宿:功能偏多,側重平臺變現與會員

        image.png

        途家首頁功能更繁雜,需求模塊相互穿插,核心差異在金剛區設計
         
        • 明確需求模塊與木鳥一致,支持基礎預訂操作;
        • 金剛區重點傾斜套餐推廣、會員體系,強平臺側變現導向。
         
        背后原因:途家流量下滑、傭金收入承壓,僅靠訂房難以支撐盈利,因此首頁加重自營業務與會員轉化,彌補現金流壓力。
         

        美團民宿:極簡展示,依賴主站流量

        image.png

        美團民宿首頁無平臺業務強干預,僅做房源資源展示:
         
        • 結構單一、視覺簡潔,但屏幕利用效率偏低;
        • 策略上依托美團主站 “高頻帶低頻” 邏輯,酒旅變現壓力集中在美團旅行主板塊,獨立 APP 僅承擔基礎預訂功能。
         

         

        三、留存本質:平臺戰略與首頁設計的深層關聯

         
        三家首頁的設計偏向,直接對應各自的業務現狀:
         
        1. 木鳥民宿:用戶與平臺需求平衡
           
          2020 年起連續盈利,80% 自有流量形成 “流量 - 訂單 - 擴張” 閉環,靠場景化特色民宿筑牢產品力,兼顧體驗與增長。
           
        2. 途家民宿:重平臺變現需求
           
          早年關停多城直營房源,疊加攜程商旅流量轉移、重心轉向跨境游,營收與現金流壓力加劇,不得不通過首頁強化套餐、會員等多元變現。
           
        3. 美團民宿:重用戶體驗、輕平臺運營
           
          依托本地生態與主站流量,獨立 APP 無需承擔強變現目標,因此頁面極簡、聚焦用戶瀏覽體驗。
           
         
        首頁設計的終極目標,是降低點擊成本、提升停留與轉化,但真正留住用戶的核心,仍是房源與服務:木鳥靠場景化守住年輕用戶,途家以家庭度假彌補流量短板,美團用低價占據性價比心智。在民宿行業迭代中,找到不可替代的生態位,才是長期留存的關鍵。
         
        題圖來自 Unsplash,基于 CC0 協議。
         
        產品策略 民宿預訂 流量分發 用戶分層 行業觀察 首頁設計
         
        轉載:優設

        蘭亭妙微(藍藍設計)www.hengshangtqd.cn 是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。

        關鍵詞:UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數據可視化設計公司、用戶體驗公司、高端網站設計公司、銀行金融軟件UI界面設計、能源及監控軟件UI界面設計、氣象行業UI界面設計、軌道交通界面設計、地理信息系統GIS UI界面設計、航天軍工軟件UI界面設計、醫療行業軟件UI界面設計、教育行業軟件UI界面設計、企業信息化UI界面設計、軟件qt開發、軟件wpf開發、軟件vue開發.

        我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

         

        image.png

        8個防錯絕招+5大補救術!這份「微設計」救場指南太實用了!

        清陽 設計思維

        哈嘍,這里是蘭亭妙微UI設計公司,今天分享的是「如何化解錯誤時刻。

        說到用戶體驗設計,大家首先想到的都是“正常場景”:注冊流程順暢、支付順利完成、輸入順利通過。但現實并非如此,用戶總會不小心犯錯誤,系統偶爾也會掉鏈子。但這些“問題時刻”往往最容易被忽略。要是產品沒法幫用戶解決問題,所有錯誤的后果都得用戶承擔,最后只會讓他們焦慮。換句話說,錯誤是用戶體驗的最大危機,也是削弱用戶對產品信任的關鍵節點。

        相關干貨:

         

        一、用“微設計”化解錯誤

        這里的“微設計”比我們常說的“微交互”范圍更廣,包括文案、視覺元素,還有各種反饋設計。這些小細節看似不起眼,卻能精準安撫用戶的出錯焦慮,幫他們重新找回掌控感。

        image.png

        微設計的三個核心要素:

        1. 微交互:比如按鈕點擊時的震動反饋、輸入框實時提示、自動聚焦到目標區域等;
        2. 微文本:簡短清晰的提示,例如 “至少輸入10個字”、“請檢查您的網絡連接”;
        3. 微視覺:流暢的動畫、柔和的顏色、讓人放松的插畫。

        在深入探討具體案例之前,讓我們先來探究一下用戶遇到錯誤的背景和原因。下面簡要總結了用戶出錯的類型、背后的心理,還有哪些場景容易出錯。

        1. 兩種出錯類型:失誤VS錯誤

        在用戶體驗理論中,錯誤分“失誤”和“錯誤”兩種,前者是用戶在執行操作時無意識犯下的錯誤,后者是一開始就想錯了。

        失誤:行為不當

        image.png

         

        目標是對的,但采取的行動有問題。例如不小心點錯了按鈕、著急打錯了字,大多是做熟悉的事時分心、沒留意造成的。

        錯誤:判斷失誤

        image.png

         

        從一開始就誤解了情況。比如看到一個顯眼的按鈕,以為是自己要的功能,結果點擊后才發現不對。這種情況多是因為界面的信息混亂、層級不清晰,呈現的內容含糊不清。

        image.png

         

        通常“失誤”發生在執行階段,“錯誤”發生在規劃階段,但實際中兩者經常一起出現。重點是搞清楚 “為什么會出錯”,并給出解決方案。

        2. 出錯時的用戶心理

        出錯不只是功能出問題,更會讓用戶慌張:“萬一沒法恢復怎么辦?”(恐懼)、“我無法控制這種情況”(無助),甚至 “可能我根本不會用這東西”(自責)。最糟的就是自責——用戶不怪產品怪自己,壓力越來越大,最后干脆關掉頁面、放棄使用。

        所以設計師的任務很明確:別讓用戶背鍋,明確告訴他們“能補救”。先給情緒上的安慰:“沒關系,你可以再試一次。”

        image.png

         

        3. 增加焦慮的場景

        有些時候,用戶的選擇壓力和出錯焦慮會被放大,心里越沒底,越不敢動。

        image.png

         

        操作不可逆:刪除文件、轉賬、重置數據等,一旦點錯就沒法恢復,讓人不敢操作。

        操作反復失敗:連不上網、輸密碼總錯,越試越沮喪,甚至會想 “是不是只有我用不了?”

        尤其是對準確性要求高的場景,比如金融、商務、B2B工具,出錯體驗的設計更關鍵。有時候對于出錯的恐懼,比錯誤本身更影響用戶行為。

        image.png

         

        支付/轉賬:錯誤導致資金損失的壓力以及造成損失的可能性。

        傳輸/刪除關鍵數據:知道沒法恢復,更不敢操作。

        表單反復驗證失?。菏〉拇螖翟蕉?,就會越沮喪。

        應對錯誤的核心是“雙管齊下”:提前預防 (別讓錯誤發生) +及時恢復 (錯了能輕松補救)。單獨用哪一個都不夠,需要根據場景靈活設計。

        image.png

         

        二、8個設計技巧,提前預防錯誤

        1. 主動限制風險操作

        image.png

         

        從根本上阻止可能出錯的情況,或者用視覺提示幫用戶識別風險。比如禁用按鈕、提供有限的選項、防止重復點擊。某種程度上哪怕稍微限制一點用戶的自由,也比讓他們出錯好。

        image.png

         

        例如訂酒店時,對于有住宿天數要求的酒店,預定的天數少于住宿天數時,無法進行預訂;類似的還有“信息沒填完時,登錄按鈕是置灰的”、“加載時不能點按鈕,避免重復操作”,都是這個道理。

        2. 自動補全&智能建議

        image.png

         

        在搜索框、輸入框里加入自動補全或關鍵詞建議,不需要讓用戶記住全部信息,輸入又快又準。尤其在輸入地址或者比較復雜的內容時,這種方法能大大提高效率。

        image.png

         

        例如在輸入地址時,搜索詞會高亮顯示,并且會可能提供清晰的搜索建議:想搜的是地鐵、公交還是某家店鋪,方便用戶減輕記憶負擔,快速做出選擇;在移動設備中,鍵盤的局限性導致打字失誤的情況頻繁發生,飛書的錯別字自動修正提示,能夠很好地提高輸入速度和準確性。

        3. 將常用選項設為默認

        image.png

         

        對于需要重復做的操作,可以把常用的選項設為默認,幫助用戶少費心。但默認選項不一定永遠是對的,如果存在錯誤的可能性,得讓用戶能檢查修改,不然反而會“誘導錯誤”。

        image.png

         

        例如在外賣軟件中,可以把常用地址加上默認標識,省去了再次添加收貨地址的麻煩。但當默認地址和當前的位置差很遠,超出配送范圍時,購物車中的商品會呈置灰狀態無法進行購買。

        4. 保持內容暫存

        image.png

         

        用戶進行多步驟任務時 (比如注冊),萬一不小心退出了再進來,保持之前填的內容還在。這樣不需要用戶重新填,也不會忘記已經完成了哪些步驟,減少失誤的發生。

        image.png

         

        編輯文章時,內容可以自動保存到草稿箱中。哪怕退出登錄過兩天再進入,草稿箱里的內容都還在,對于用戶來說也是一種很貼心的體驗。

        5. 固定顯示已選內容

        image.png

         

        對于需要記住很多選擇的流程(比如訂酒店),把選好的日期、人數、篩選條件固定在屏幕頂部,隨時能看。這種設計方法允許用戶在不依賴不準確記憶的情況下再次確認信息,從而及早預防錯誤。

        image.png

         

        像Airbnb會把要去的地點、 入住時間和人數這些篩選條件固定在頁面的頂部,讓用戶可以持續查看當前的預訂情況,這樣在找房子的時候會覺得更踏實。

        6. 二次確認不可逆操作

        image.png

         

        對于刪除文件或重置數據這類不可逆的操作,一定要增加 “確認步驟”,進一步確認用戶的意圖。

        一旦出錯無法恢復的操作可能會引發用戶的強烈焦慮,因此需要清晰傳達操作的影響,并通過問題和警告來確認操作,例如:“您確定要刪除xx?刪除后不可恢復,請謹慎操作。”

        但注意不能濫用確認彈窗,過于頻繁的確認彈窗可能會讓用戶在不仔細看內容的情況下,習慣性地點擊“確定”,增大出錯的風險。只在重要且不可逆轉的操作中使用。

        image.png

         

        例如刪除文件時進行二次確認,同時告知刪除后文件的位置、刪除后文件是否可以找回等一系列內容,讓用戶對于刪除的內容有清晰的認知;對于確認后無法再修改的信息,也最好來個再次確認,讓用戶做到心里有數。

        7. 提供實時反饋

        image.png

         

        對于表單輸入這類容易出錯的場景,好的使用體驗是在輸入時就“實時”提供反饋,而不是等所有信息都填完點擊提交之后再提示錯誤。

        比如字符超了、密碼格式不對,立即用紅色文字、錯誤圖標、邊框高亮、震動動效等形式反饋出來,減少重復輸入的麻煩。

        image.png

         

        例如發動態時,如果輸入的標題字數不符合要求,會在標題處有一段反饋提示,提醒用戶輸入符合要求的標題;填寫多個表單時,如果有多個表單未填寫,每個輸入框下面都會有錯誤反饋,而且每條錯誤反饋的內容會根據不同字段而調整,而不是用“請填寫內容”這種模板化的反饋。

        8. 先預覽再提交

        對于操作后不好修改的場景中 (比如發表文章、發布視頻、視頻渲染),可以先給用戶看 “最終效果預覽”。確認沒問題再提交,這樣用戶就能提前發現錯漏,心里也踏實。

        image.png

         

        例如在發布動態的時候上傳視頻封面后,在推薦列表、視頻動態中能提前預覽封面效果,有問題可以及時修改,省去了動態發布后再去修改的麻煩;視頻軟件中渲染一個視頻通常需要幾分鐘甚至幾十分鐘,通過提供“渲染預覽”可以快速檢查錯誤減少不必要的時間浪費。 

         三、5 個設計技巧,幫助用戶從錯誤中恢復

        1. 通過撤銷操作減少損失

        image.png

         

        “撤銷”功能允許用戶立即挽回錯誤,增強掌控感,減輕錯誤帶來的負擔,例如刪錯內容、發錯郵件后,點一下就能恢復。有了這個功能,用戶用著更放心,也敢大膽嘗試各種功能。

        image.png

         

        在花瓣中采集圖片后,會提供一個撤銷的功能,方便用戶快速撤銷采集有誤的圖片;在使用微信發消息、使用郵箱發郵件的時候,也都支持在發出去幾分鐘內撤回,盡可能幫用戶挽回錯誤。

        2. 說清錯誤發生的原因

        image.png

         

        如果錯誤不可避免,需要使用通俗易懂的提示文案告訴用戶哪里出現了錯誤,出現了什么樣的錯誤,而不是用一些模板化的或是含糊不清的提示文案,讓用戶感到困惑。

        image.png

         

        例如上圖中的登錄失敗提示,會明確告知什么地方出現了錯誤、出現多次錯誤后會有什么后果、如何操作能解決錯誤,這才是一個格式的錯誤提示;填寫新增地址信息時,如果手機號碼有問題,會明確提示“手機號有誤”,而不是只說 “輸入內容有誤”。

        3. 提供下一步操作

        image.png

         

        接著上一條,不僅要說清楚錯誤的原因,還要告訴用戶“該怎么做”,引導用戶立即采取行動。例如添加“重試”、“返回主頁” 按鈕,引導用戶回到正確的操作流程里。

        image.png

         

        如果訪問的頁面有問題,可以提供返回首頁或者聯系客服的入口,讓用戶可以繼續探索其他內容;例如蘋果的Face ID連續5次識別失敗后,系統會鎖定面容ID功能,并提示輸入密碼驗證后才能重新啟用。

        4. 自動聚焦錯誤選項

        image.png

         

        通過自動定位和聚焦錯誤輸入項來鼓勵快速更正。發現錯誤后,系統自動定位到出錯的輸入框,縮短錯誤從識別到更正的過程。尤其在那些表單特別多的后臺頁面中,這種錯誤定位的功能還是很有必要的。

        5. 用視覺設計安撫情緒

        利用情感化的視覺設計,例如柔和的色彩、插圖和動效等,提供了視覺上的舒適感,緩解用戶的焦慮和緊張。這不僅是簡單的錯誤反饋,還是展現品牌個性的好機會。

        image.png

         

        比如谷歌瀏覽器離線時經典的“恐龍小游戲”,讓用戶等待網絡連接的同時進行有趣的游戲體驗,能讓用戶沒那么煩躁。

        最后

        總的來說,減少錯誤的根本策略是避免不必要的差異化,并遵循熟悉的界面、交互和設計慣例。這里的“熟悉”不僅是風格問題,更是整個用戶體驗設計的通用標準。

        當然,再標準的設計也沒法完全杜絕錯誤的發生。這時候,貼心的微設計就派上用場了——幫助用戶快速發現錯誤、輕松改過來。

        這些細節,正是體驗設計師存在的價值,也是產品賦予用戶的最大信任。你還有哪些化解錯誤的小妙招呢?歡迎留言咱們一起聊聊~

        轉載:優設

        蘭亭妙微(藍藍設計)www.hengshangtqd.cn 是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計APP界面設計、圖標定制、用戶體驗設計交互設計、UI咨詢高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。

         

        image.png

        AI 賦能百度優選商家經營提效交互設計實踐

        清陽 行業趨勢

        一、前言

         
        蘭亭妙微UI設計公司分享:隨著 AI 技術深度滲透電商經營全鏈路,百度優選商家后臺已在商品創建、經營管理、客服接待、直播帶貨、履約售后等核心經營場景,全面落地 AI 能力。
         
        但商家實際使用中普遍陷入不會用、不敢信、用不好的體驗困境。深挖痛點發現:AI 交互模式不統一、視覺表達混亂是核心癥結,大幅拉高了商家對 AI 工具的認知門檻與使用成本。
         
        基于此,項目以統一 AI 認知、提升商家經營效率為核心目標,啟動 AI 功能全鏈路體驗升級。團隊摒棄行業通用的嵌入式、對話式、伴隨式三類常規 AI 交互形態,結合 B 端商家后臺操作習慣,放棄適配沉浸式問答的對話式交互;同時針對客服接待、直播運維等低人工介入的規?;瘓鼍?,創新提出托管式全新交互范式。
         
        配套搭建統一 AI 視覺感知體系,最終形成一套易理解、易上手、可信賴的商家智能體驗解決方案,助力商家經營降本、效率倍增。

        image.png

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

         

        (一)嵌入式交互:復雜表單智能填寫助手

        image.png

        核心定位:AI 能力貼合操作場景,交互輕量無感,主打復雜表單自動化高效填報,典型應用于商家商品創建場景。
         
        商品創建字段繁雜、手動填寫耗時費力,還易因格式不規范審核駁回、拉長發品周期。設計中依據字段屬性與 AI 能力,拆分兩類交互邏輯:
         
        1. 填充識別類:規則標準化信息,AI 自動識別提取并一鍵填入,搭配「AI 預填」標簽狀態提示。如上傳商品包裝圖,自動識別品類、工藝、包裝規格等屬性自動錄入,替代手動打字,大幅節省填報時間。
        2. 推薦優化類:商品標題、主圖等創意類內容,AI 智能生成優化方案,只推薦不強制預填,支持商家自主微調、手動確認錄入,兼顧智能推薦與個性化需求,縮短人工審核周期。
         
        落地成效:商家平均發品時長縮短 8 分鐘,發品成功率提升 0.7%,模塊使用滿意度提升 25%,在原有業務流程內實現效率跨越式提升。
         

        (二)伴隨式交互:全場景主動經營診斷助手

         

        核心定位:深度融入商家經營動線,打破傳統 AI 被動問答模式,實現主動觸達、連續洞察、鏈路指引,變身商家專屬經營伙伴。
         
        1. 主動觸達,前置服務
          image.png
          AI 助手全局入口以流光呼吸感動效 + 輪播詞條輕量化吸引關注,實時推送店鋪流量、經營數據關鍵動態;商家停留任意業務頁面時,系統自動識別潛在經營隱患,如主圖尺寸影響點擊率、看播時長下滑等,提前彈窗輕量提醒,不等商家提問便主動提供服務。
           
          覆蓋直播中控臺、數據診斷、店鋪運維、電商推廣等全場景,核心指標直觀外露,優化建議一鍵可查。
           
        2. 連續洞察,可解可追溯

          image.png

          AI 輸出數據結論與經營建議時,同步展示推理邏輯、數據來源摘要,打造可解釋式 AI;并基于當前場景預判商家后續需求,主動延伸經營問題排查鏈路,從單點答疑升級為系統性問題解決方案,降低商家決策與信息獲取成本。
           
         

        (三)托管式交互:低介入安心服務管家

         
        核心定位:創新新增交互范式,區別于嵌入式、伴隨式需商家實時參與的模式,以預設規則 + 系統自動執行實現高度自動化,主打客服接待全場景無人值守服務。
         
        破解兩大行業痛點:人工無法 7×24 小時全天候接待、峰值咨詢難以全覆蓋;商家顧慮 AI 自動化「黑盒操作」,不敢全權托管。
         
        1. 可視化配置,建立信任
           
          搭建直觀的策略配置面板 + 消費者端效果預覽,商家可按售前咨詢、售后退款、催單答疑等細分場景,自定義 AI 回復規則,配置即所見,讓抽象 AI 能力變得可控可預判,消解商家信任顧慮。

          image.png

        2. 狀態透明化,順滑人機接力

          image.png

          全域實時展示 AI / 人工接待狀態,會話列表智能分組、單人接待狀態動態更新;遇復雜訴求、用戶負面情緒等 AI 無法應答場景,會話自動流轉至人工待處理隊列,高亮 + 音效雙重預警,提醒客服快速接管。
           
          人工接手后 AI 自動暫停接待,同步生成會話摘要,幫助客服快速厘清前因后果;客服可一鍵恢復托管,新會話也可自動重啟 AI 接待,形成高效人機協同閉環。同時在消費者端明確標識 AI / 人工身份,保障服務感知連貫穩定。
           
         
        落地成效:客服咨詢響應時長縮短 15.8%,商家服務滿意度提升 14%,買家滿意度提升 7.4%,實現全天候規模化接待與服務質量雙向升級。
         

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

         

        在三大交互范式基礎上,打造貫穿產品全鏈路的AI 專屬智能視覺語言體系,沉淀標準化設計資產,賦能 B 端整體體驗升級。
         
        1. 視覺體系傳承適配:沿用百度成熟 AI 標識與品牌主色,借用用戶既有認知,降低 AI 功能學習成本;針對 B 端界面信息密集的特性,在原有智能色彩基礎上降低飽和度視覺降噪,定制適配后臺操作場景的淺色組件庫。image.png
        2. 多維感官協同反饋:彌補淺色體系 AI 狀態辨識度不足,疊加專屬狀態動效、場景聲音提醒等多維感知方式,如 AI 智能接待掃光動畫、消息預警音效,讓商家在復雜界面中,快速感知 AI 運行狀態、任務進度,保障信息傳遞高效精準。

        image.png

        四、設計核心:以商家提效為中心的價值賦能

         
        本次百度優選商家后臺 AI 體驗升級,始終堅守統一 AI 認知、賦能經營提效核心主線:通過場景適配 + 范式創新,落地嵌入式、伴隨式、托管式三大交互模式,精準解決商品創建、多線程經營、客服接待等核心痛點;以視覺 + 動效 + 音效多維智能感知體系,徹底破解商家「不會用、不敢信」難題。
         
        業務層面實現發品效率、經營問題解決率、雙向服務滿意度全面提升;設計層面沉淀場景 - 范式 - 視覺可復用方法論與組件資產,可快速復用至直播帶貨、智能投放等更多電商經營場景。
         
        未來將持續深耕商家真實經營需求,推動 AI 深度融入全業務鏈路,以交互設計驅動商家長效降本提效,助力百度優選商家生態高質量發展。
         
        轉載:優設
         

        蘭亭妙微(藍藍設計)www.hengshangtqd.cn 是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計交互設計UI咨詢高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。

         

        image.png

        日歷

        鏈接

        個人資料

        藍藍設計的小編 http://www.hengshangtqd.cn

        存檔

        主站蜘蛛池模板: 久久精品女人天堂av影院| 又色又爽又黄的视频国产| 中国AV在线| 美女免费精品高清毛片在线视| 四川网红刘婷和爸爸视频最新 | WWW丫丫国产成人精品| 在线观看日本污污ww网站| 无码av免费精品一区二区三区| 国产色视频一区二区三区qq号| 国产国产成人精品久久蜜| 亚洲欧洲制服| 毛片无遮挡高清免费| 曰本亚洲欧洲色a在线| 伊人成人电影| 91中文字幕一区在线| 亚洲熟妇色自偷自拍另类| 五月婷婷久久中文字幕| 97爱爱| www.91.xxx| 久久青青草原亚洲AV无码麻豆| 好吊视频一区二区三区人妖| 亚洲人妻网| 国产三级无码内射在线看| 宜君县| 国产精品国产自线拍| 中文字幕亚洲综合在线 | 亚洲中文字幕日产无码成人片| 人妻无码一区二区三区| 国产爆乳美女娇喘呻吟| 亚色五月先锋AV| AV激情亚洲男人的天堂| 亚洲成人一区| 在线播放深夜精品三级| 97亚洲熟妇自偷自拍另类图片| 色欲色香天天天综合网站免费| 国产喷水1区2区3区咪咪爱AV| 露脸调教丝袜精品调教视频| 欧美亚洲另类制服卡通动漫| 亚洲制服丝袜在线| 色欲国产精品一区成人精品| 日韩中文字幕综合第二页|