<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

        首頁

        B 端交互設計 13 個優(yōu)化策略

        清陽 B端ui設計文章及欣賞

        核心總覽

        B端交互體驗優(yōu)化,牢牢把握三大方向、十三個策略,覆蓋結構、效率與引導全鏈路。同樣適用于C端及工具類產(chǎn)品。蘭亭妙微UI設計公司今日與您一同學習。
         

        一、結構優(yōu)化(4 個策略)

         
        目標:讓復雜功能易理解、易查找、易操作
         
        1. 分塊分組

          image.png

           
          頁面信息雜亂時,按業(yè)務邏輯拆分區(qū)塊。例:發(fā)布商品→基本信息、規(guī)格庫存、商品詳情。
        2. 導航優(yōu)化
           

          image.png

          用面包屑、標簽頁、快捷入口、回到頂部等組件,提升頁面跳轉與定位效率。
        3. 步驟分解
           

          image.png

          復雜流程拆分為多步,降低單次操作難度,避免用戶一次性處理過多信息。
        4. 內(nèi)置交互
           

          image.png

          低頻操作用展開 / 收起、彈窗隱藏,保持界面簡潔,突出核心功能。
         

         

        二、效率提升(4 個策略)

         
        目標:減少操作步驟、降低點擊成本
         
        5. 默認填值
         

        image.png

        按場景與用戶習慣預填數(shù)據(jù)。例:發(fā)布時間默認次日 9 點。
         
        6. 按鈕輸入
         

        image.png

        高頻常用值做成按鈕組,一鍵選擇。例:下架時間→一周后 / 一月后 / 三月后。
         
        7. 頻次順序

        image.png

         
        功能按使用頻率從高到低排序,低頻 / 非必填項后置。
         
        8. 快捷按鍵
         

        image.png

        配置復制、粘貼、保存等快捷鍵,適配高效辦公場景。
         

         

        三、提示幫助(5 個策略)

         
        目標:降低學習成本、減少操作失誤
         
        9. 文案說明
         

        image.png

        復雜功能下方加簡短提示,清晰告知用途與規(guī)則。
         
        10. 樣式引導
         

        image.png

        用顏色、大小、徽標、紅點強化重點,弱化次要信息。
         
        11. 即時反饋
         

        image.png

        輸入錯誤、表單提交、操作成功 / 失敗時,實時給出明確反饋。
         
        12. 內(nèi)容預覽
         

        image.png

        提交前展示最終效果,方便用戶核對修改。例:商品上架預覽。
         
        13. 新手幫助
         

        image.png

        用新手引導、示例、幫助手冊,讓新用戶快速上手。
         

        優(yōu)化后總結(一句話記憶)

        結構理清楚,效率提上去,引導做到位,用 13 個策略搞定 B 端交互體驗。
         

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

         

        image.png

        超多案例!3個設計策略讓你的AI產(chǎn)品更加人性化!

        清陽 交互設計及用戶體驗

        在 AI 時代做產(chǎn)品設計時,“人性化” 體驗依舊是不變的主旨,核心目標是讓設計回歸用戶本身,在合理應用新技術的同時,尊重用戶的認知習慣、情感需求與行為差異,讓 AI 產(chǎn)品既好用、又 “懂用戶”。蘭亭妙微UI設計公司會介紹以下三個設計策略和典型案例:

        1. 個性化定制
        2. 多產(chǎn)品互通
        3. 低操作門檻

        希望會為你帶來更多的設計靈感。

        一、個性化定制

        基于用戶的個體特征、行為數(shù)據(jù)、場景語境與目標偏好,提供“千人千面”的專屬設計方案。核心在于將體驗從“通用適配”轉向“精準貼合”,從而提升用戶的認同感、滿意度與留存率。

        案例1:ChatGPT推出年度回顧功能,將用戶一整年的AI對話轉化為可視化數(shù)據(jù)、AI人格畫像與定制詩歌。

        image.png

        案例2:Gemini新增“使用歷史對話作為上下文”功能,實現(xiàn)更連續(xù)、更具記憶感的多輪對話體驗。

        image.png

        案例3:ChatGPT推出多維度人格參數(shù)調節(jié)滑塊,通過檔位化控制實現(xiàn)交互風格的精準適配,標志著AI對話系統(tǒng)從統(tǒng)一輸出轉向用戶主導的個性化體驗設計。

        image.png

        案例4:Google發(fā)布Android 16,利用AI重構通知系統(tǒng),自動將廣告、新聞推送等不重要通知靜音并生成摘要,幫助用戶保持專注。同時強化圖標、主題與深色模式的個性化表達,用戶可以自由調整圖標形狀,讓桌面更貼合個人風格。超多案例!3個設計策略讓你的AI產(chǎn)品更加人性化!

        二、多產(chǎn)品互通

        AI智能體能夠調動其他產(chǎn)品進行互動,協(xié)調多個不同產(chǎn)品或設備,實現(xiàn)它們之間的交互與協(xié)同工作,從而為用戶提供更便捷、高效、智能的服務體驗。

        案例1:Gemini Agent上線租車功能,支持自動比價、讀取郵箱及租車服務預訂,AI正逐步進入端到端的生活服務領域。

         

        image.png

        案例2:OpenAI與Instacart合作,將“買菜”功能接入ChatGPT。用戶可在聊天中一邊討論菜譜,一邊生成購物清單,并直接完成結賬,全程無需跳轉應用。

        image.png

        案例3:Cursor為Cursor Browser推出全新可視化編輯器,將網(wǎng)頁、代碼與視覺編輯工具整合在同一窗口,支持拖拽調整界面、直接查看組件屬性與樣式,并通過自然語言指令快速修改,自動同步至底層代碼。

        image.png

        案例4:谷歌將虛擬試穿門檻降至只需一張自拍,借助Gemini Nano Banana生成全身模型,將AI從可選趣味功能升級為低門檻、便捷實用的購物入口,進一步將搜索與電商融合為一體化、內(nèi)容驅動的消費場景。

        image.png

        案例5:谷歌推出Workspace Studio,將AI自動化直接嵌入Gmail、日歷與文檔,開始重構企業(yè)日常工作的操作層。

        image.png

        三、低操作門檻

        通過簡化決策、減少手動操作、貼合用戶認知習慣等方式,讓不同能力層級的用戶都能輕松享受AI服務帶來的價值。

        案例1:Gemini Veo3.1正在小范圍測試“視頻模板庫”,用戶可在工具菜單中選擇或自定義模板快速生成視頻,讓“人人皆可做電影”成為可能。

        image.png

        案例2:靈光App上線可視化“科普動畫生成”功能,將抽象科學原理自動轉化為動態(tài)演示,讓教育與科普內(nèi)容從純文字升級為“秒懂級”的可視化表達,鞏固了其在學習場景中的差異化優(yōu)勢。

        image.png

        案例3:知名組件庫shadcn推出shadcn create,提供可視化方式自定義基礎組件的結構、間距、字體與風格,并支持一鍵在Next、Vite、TanStack Start中啟動生成主題,大幅降低構建專屬設計系統(tǒng)的門檻。

        image.png

        案例4:Manus推出Design View,從“反復對話生成”逐步邁向“所見即改”的創(chuàng)作流程。

        image.png

        案例5:Google在Android版Google News中加入AI播客功能,將新聞自動轉化為可收聽內(nèi)容,拓展了通勤、碎片時間等場景下的新聞消費方式。

        image.png

        案例6:Grok iOS版新增多種語音喚醒模式(默認、隔離、按住說話),在不同環(huán)境下提升了語音交互的可控性,打磨出“隨時可用但不打擾”的語音入口,為AI助手向高頻、低負擔使用場景滲透鋪平道路。

        image.png

        案例7:亞馬遜旗下AI智能家居助手Alexa Plus上線網(wǎng)頁端入口,將原本以語音和音箱為核心的家居控制能力延伸到桌面與工作流中,使其成為更常用的日常AI助理。

        image.png


        技術的邊界在不斷拓寬,但設計的溫度始終取決于我們對“人”的底層關懷。在AI浪潮中,工具形態(tài)會隨算法不斷進化,而用戶對尊重、高效與情感連接的需求從未改變。

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

         

        image.png

        10個產(chǎn)品細節(jié)剖析,看看高手如何做溫度的設計!

        清陽 設計思維

        隨著互聯(lián)網(wǎng)產(chǎn)品的不斷發(fā)展,在生活和工作的方方面面都有非常多的產(chǎn)品普及,用戶的選擇性更多了。想要打動用戶,就要拿出更優(yōu)質的服務和差異化的產(chǎn)品,當產(chǎn)品和服務拉不開差距的時候,產(chǎn)品設計的體驗感變得至關重要了。

        為了提升用戶體驗度,做出有溫度的設計才能打動用戶,蘭亭妙微UI設計公司相信這些案例可以帶給你一些啟發(fā)。

        1. 插畫氛圍:用場景感激活用戶參與欲

        image.png

        產(chǎn)品的社區(qū)、活動等模塊,核心目標是提升用戶參與度。溫暖具象的插畫場景,能快速喚起情感共鳴。
         
        • 釘釘成長社區(qū)用全家福溫馨插畫,精準擊中家長記錄孩子成長的心理,有效提升動態(tài)發(fā)布活躍度。
        • 用視覺氛圍降低參與門檻,讓用戶愿意主動互動、分享。
         

        2. 熱點主題化:借勢營造沉浸式氛圍

        image.png

        蹭熱點不只是營銷手段,更是視覺與體驗的氛圍升級
         
        • 麥當勞 App 頻繁推出品牌聯(lián)名主題,將界面背景、插畫、圖標全面貼合聯(lián)名風格,整體統(tǒng)一且辨識度極強。
        • 從視覺到交互完整落地熱點氛圍,讓用戶感受到新鮮感與品牌趣味。
         

        3. 情感化動態(tài):讓打卡更有儀式感

        image.png

        線下到店打卡的核心是參與感與真實感,動態(tài)設計能強化這兩點。
         
        • 大眾點評打卡采用 IP 角色 + 定位符號動畫,清晰傳遞 “真實到店” 的含義。
        • 流暢動效提升操作愉悅度,讓簡單打卡變成有情緒反饋的小儀式。
         

        4. 應景天氣設計:把自然氛圍搬進產(chǎn)品

        image.png

        天氣類產(chǎn)品的競爭力,在于場景化與氛圍感
         
        • 蘋果天氣 App 在中秋夜晚同步展示圓月效果,與現(xiàn)實節(jié)氣高度呼應。
        • 隨季節(jié)、節(jié)日、天氣變化的視覺皮膚,讓產(chǎn)品更貼近生活、更有人情味。
         

        5. 品牌化刷新:讓基礎操作貼合產(chǎn)品特質

        image.png

        下拉刷新是高頻操作,貼合產(chǎn)品屬性的趣味動效,能大幅提升記憶點。
         
        • 當當 App 將刷新設計為 “開書→翻頁” 動畫,完美契合圖書平臺定位。
        • 把通用操作變成品牌小彩蛋,枯燥動作也變得有趣。
         

        6. 長按快捷刪除:提升效率更人性化

        image.png

        消息通知易造成紅點困擾,簡化刪除流程是體驗剛需。
         
        • 淘寶通知列表支持長按一鍵彈出刪除選項,可單條 / 全部清除。
        • 減少滑動、點按步驟,高效解決用戶痛點,更貼合使用習慣。
         

        7. 多元頭像預設:降低設置門檻,強化 IP

        image.png

        很多用戶不愿自定義頭像,優(yōu)質預設能解決這一問題。
         
        • 貝殼找房提供微信頭像導入 + 專屬 IP 頭像選擇,選擇豐富、一鍵應用。
        • 既提升用戶頭像完成率,又持續(xù)曝光品牌 IP,情感化與品牌化雙贏。
         

        8. 點亮城市足跡:用成就感驅動用戶

        image.png

        旅行、出行類產(chǎn)品的核心情感是探索欲與成就感
         
        • 高德地圖首次抵達新城市會自動彈出歡迎提示,并點亮城市足跡。
        • 用輕量玩法帶來即時成就感,激發(fā)用戶探索更多地點。
         

        9. 晝夜視覺切換:讓界面隨時間更治愈

        image.png

        動態(tài)變化的界面,能帶來持續(xù)新鮮感與細膩感知
         
        • 美團 “看病買藥” 個人中心,晝夜切換頂部背景與小藥箱 IP 動作。
        • 柔和的視覺變化,讓界面更有生命力,提升整體使用舒適度。
         

        10. 多感官趣味:視覺 + 觸覺打造沉浸互動

         
        隨著交互技術成熟,多維感官體驗成為新趨勢。
         
        • 馬蜂窩 AI 幫手 “十一實況” 結合重力感應,旋轉手機即可觸發(fā)場景變化。
        • 從視覺延伸到觸覺,讓互動更真實、更有探索樂趣。

           

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

         

        image.png

        B端產(chǎn)品體驗調研中,設計驗證怎么做?

        清陽 設計思維

        人們認為設計師是表面工作——設計師拿著盒子說‘它看起來好!’這不是我認為好的設計。設計可不只是看起來或者摸起來的樣子,設計考慮的是用它的感覺。 ——Steve Jobs 2003年11月30日《紐約時報》

        在日常的 B 端產(chǎn)品調研支持過程中,我們研究員經(jīng)常會遇到這樣的場景:

        “你們幫我看看,產(chǎn)品方案滿不滿足用戶需求?功能符不符合用戶預期?”

        “(研發(fā)問)功能上線的 ROI 是多少?用戶對這類功能是否有需求?解決了用戶什么問題?”

        “你們多找一些用戶驗證一下 demo 方案行不行…”

        無論是產(chǎn)品同學,還是設計同學,相信大家或多或少都會在需求文檔、設計文檔評審時被業(yè)務方、研發(fā)問到方案可行性和落地價值等方面的“靈魂拷問”,而這些疑惑同時也在拷問我們研究員。那么作為研究員,我們是如何從用戶的角度去輔助產(chǎn)品同學和設計同學進行敏捷的方案驗證呢?

        首先,我們先來了解什么是產(chǎn)品可用性測試?

        可用性(Usability),被定義為一種用來衡量界面好用程度的屬性。好用程度的高低一般取決于以下五個要素:

        1. 可學習性(Learnability):初次接觸這個設計時,用戶完成基本任務的難易程度。
        2. 效率(Efficiency):用戶能多快完成任務。
        3. 可記憶性(Memorability):當用戶一段時間沒有使用產(chǎn)品后,是否能馬上回到以前的熟練程度。
        4. 出錯(Errors):用戶能否從錯誤中恢復。
        5. 滿意度(Satisfaction):用戶對產(chǎn)品的主觀滿意度。

        可用性測試主要用于驗證產(chǎn)品的可用性,該方法能夠幫助產(chǎn)品同學和設計同學了解在實際使用情境中該設計方案(概念或創(chuàng)意)的質量(評估是否可用/是否有效/用戶是否滿意),并在測試結果的基礎上進行改進。

        換句話說,可用性測試是觀察有代表性的用戶,讓用戶完成產(chǎn)品中的各項任務,了解用戶如何使用產(chǎn)品,界定出可用性問題并解決這些問題,讓業(yè)務、產(chǎn)品、設計、研發(fā)等上下游角色盡快對產(chǎn)品方案達成共識并積極優(yōu)化產(chǎn)品體驗。

        image.png

        通過可用性測試,我們可以:

        1. 了解用戶如何與產(chǎn)品進行交互;
        2. 了解用戶是否能夠完成指定任務;
        3. 了解用戶需要多久才能完成指定任務;
        4. 了解用戶對本品和競品的滿意度;
        5. 明確產(chǎn)品存在哪些需要優(yōu)化的可用性問題;
        6. 明確產(chǎn)品可用性情況及是否符合上線目標;
        7. 讓產(chǎn)設研團隊在開發(fā)上線前發(fā)現(xiàn)問題并解決。

        那么,什么情況下可以做可用性測試?

        在實際項目執(zhí)行中,我們通常會在幾個特定階段去進行產(chǎn)品可用性測試,不同階段采取的調研方式也有所不同,所關注的內(nèi)容亦隨之變化。

        (1)設計初始階段,我們通常會進行前期用戶需求挖掘或相似產(chǎn)品使用情況分析,并基于需求概念設計出來的草圖方案進行探索性可用性測試,來確定方案內(nèi)容和功能的范圍是否符合用戶預期方向和使用需求,以此初步評估草圖方案的有效性和可用性。因此,在該階段,我們常以紙張原型測試+定性深訪為主,先從認知上與用戶保持一致,理解了用戶,做出來的產(chǎn)品方案更能貼近用戶訴求。

        (2)灰度上線前,我們一般對 demo 終稿進行評估性可用性測試,向目標用戶介紹新設計,同時盡可能保證 demo 稿是用戶能夠直觀測試使用的,以此來確定 demo 在功能滿足、信息布局、流程交互,甚至是視覺樣式上是否能夠提供良好的用戶體驗。所以,在該階段我們更多會進行面對面測試+可用性測試量表(SUS 量表),一般在會議室等固定安靜的環(huán)境中進行,并要求用戶按既定任務測試操作,任務測試過程中不打斷用戶并觀察記錄用戶在關鍵流程環(huán)節(jié)使用中遇到的問題,測試完成后向用戶提出問題或進一步探究原因。

        (3)灰度上線或全量上線后,我們通常會對上線后的新方案進行對比性可用性測試,通過灰度方式在同一時間維度下比較新方案和原方案的可用性反饋和用戶滿意度,確保方案在全量上線之前修復任何潛在問題。因此,在該階段我們以 A/B 測試+場景化調研問卷(如下圖所示)為主,通過用戶體驗數(shù)據(jù)和業(yè)務數(shù)據(jù)來評估出最優(yōu)版本。

        image.png

        實際執(zhí)行中,我們怎么做可用性測試?主要實施步驟有:

        image.png

        STEP1:設計任務

        可用性測試的基礎是任務,任務測試內(nèi)容的好壞是能夠對測試結果的準確性有直接影響的。因此在招募用戶之前,需要對測試的產(chǎn)品方案進行任務設計。比如,測試商家在 B 端營銷系統(tǒng)報名營銷活動流程方案的任務可以是:報名一場雙 11 大促活動。

        在設計比較合適的測試任務時需要注意以下幾點:

        1. 選擇最核心的功能或操作流程作為任務。產(chǎn)品最核心的功能和操作流往往是最頻繁被用戶使用的地方,假設最常用最核心的地方還存在可用性問題,那么就算優(yōu)化了其他邊緣部分的可用性問題,依舊是對產(chǎn)品整體體驗于事無補。比如在商家報名大促活動流程中,最核心的環(huán)節(jié)是查找活動→選擇商品報名→跟蹤報名進度,那么就需要重點將這部分作為測試任務。
        2. 任務應符合常規(guī)操作流程。在實際業(yè)務中,產(chǎn)品線的職責分工會比較細化,比如 A 產(chǎn)品會負責 A 模塊,B 產(chǎn)品負責 B 模塊…單一功能模塊的測試任務較多的情況下,如果各任務之間操作流無法串聯(lián)甚至是存在沖突的話,用戶測試的操作流就是不合常規(guī)的,也容易給參與測試的用戶帶來困擾。因此,我們研究員需要根據(jù)用戶操作習慣來進行評估測試任務并設計串聯(lián)流程。
        3. 為任務創(chuàng)建一個應用場景。簡單的場景描述會對用戶執(zhí)行任務有幫助。比如:任務是“報名一場雙 11 大促活動”,我們可以創(chuàng)建這樣一個場景:你關注的雙 11 大促活動報名時間開始了,你想上商家后臺去報名雙 11 大促,請登錄商家后臺來完成大促活動報名。
        4. 明確任務的起點和終點。用戶是否完成了任務的評估依據(jù)是:用戶是否從起點(頁面 A)到達了終點(頁面 B)。因此要明確起點和終點的定義,哪個頁面是起點?哪個是終點?比如:任務是“報名一場雙 11 大促活動”,起點頁面就是商家后臺首頁,終點頁面就是提交報名素材成功的頁面。另外在評估是否到達終點頁面之外,還需要關注用戶在任務過程中的操作動線、是否有效填答信息,若沒有,我們需要搞清楚背后原因是什么。
        5. 任務不應過于簡單。若想測試用戶是否能夠找到某功能,不要用類似“找到 XX 功能按鈕”這類表述,我們應該給用戶提供一個要處理的實際場景任務,比如不是“找到換品功能按鈕”而是“報名完成后想要重新?lián)Q品”。
        6. 避免提供線索和描述操作步驟。任務只需要給出具體目標即可,不需要給到測試用戶具體的操作步驟,不然會容易錯過用戶在執(zhí)行任務過程中到某一環(huán)節(jié)可能存在的“意外問題”,而這些“意外”恰恰是我們需要關注的。

        STEP2:招募用戶

        在招募用戶環(huán)節(jié),最重要的是樣本數(shù)量的確定。在實際的可用性測試中,我們常常被產(chǎn)品同學或設計同學問到:

        “6 個用戶提出的問題能代表全部么?”

        “幾個用戶是不是太少了?他們提出的問題是可靠么?”

        諸如此類的樣本數(shù)量“挑戰(zhàn)”,不勝枚舉。人機交互博士 Jakob Nielsen 曾提出:“有 5 個人參加的用戶測試,即可發(fā)現(xiàn)大多數(shù)(85%)的產(chǎn)品可用性問題。” Nielsen 這張經(jīng)典圖表(如下圖)告訴我們答案:一般最嚴重的問題都是前幾名用戶發(fā)現(xiàn)的,隨著用戶數(shù)量增多,發(fā)現(xiàn)問題逐漸減少。

        image.png

        當然在實際執(zhí)行中也會存在一些局限性,比如只能發(fā)現(xiàn)問題數(shù)量,但無法確定發(fā)現(xiàn)問題的嚴重程度,因此還是需要從實際情況比如測試任務的復雜程度、人力資源的投入程度等等來確定招募樣本數(shù)量。

        STEP3:前期準備

        1. 測試地點與工具準備。比如安靜的會議室、電腦、錄音筆、錄屏軟件(錄制操作全程,便于后續(xù)回顧分析)等。
        2. 任務相關資料準備。如①數(shù)據(jù)收集表,如收集任務是否完成、完成時間、關鍵事件中遇到的體驗問題、滿意度;②訪談提綱,包含任務步驟、需要注意深挖的環(huán)節(jié)問題等。比如,任務是“報名一場雙11大促活動”,訪談驗證sop示例:

        image.png

        STEP4:試點測試

        試點前測的目的是針對整個測試流程和提綱進行測試,便于前置發(fā)現(xiàn)流程和提綱中存在的問題,及時優(yōu)化,避免造成真實測試用戶的資源浪費。試點前測需要注意:

        1. 訪談提綱的話術表達和任務流程的設計,是否能夠準確讓用戶理解?
        2. 提綱內(nèi)容是否透露了操作步驟,用戶是否很快完成任務?
        3. 時間安排是否合理,用戶是否可以在規(guī)定時間內(nèi)完成任務?
        4. 任務流程安排是否合理,用戶是否感到疑惑?

        STEP5:觀察訪談

        在觀察測試中,需要檢查用戶任務目標和心理認知是否可以順利執(zhí)行下一步操作,以此來發(fā)現(xiàn)可用性問題,因此我們要對以下問題做到心中有數(shù):

        image.png

        在事后訪談中,有以下幾點小小訪談 tips:

        1. 認知習慣層面:首先了解用戶對方案功能的基本理解,比如是否能夠理解?理解的意思是什么?為什么會有這些理解等等,之前在這些環(huán)節(jié)中用戶的操作習慣是什么樣的?
        2. 需求關注層面:用戶在這些環(huán)節(jié)關注哪些方面?然后再給用戶解釋每個功能方案的定位作用是什么,方案解決什么問題。同時追問用戶,就目前方案是否解決實際中的問題,哪些問題?以及還有哪些優(yōu)化的建議等等。盡管大多數(shù)人認為不該直接問用戶產(chǎn)品的優(yōu)化建議,用戶給到的結論也只是基于自身經(jīng)驗的主觀想法,但是若根據(jù)用戶給到的答案繼續(xù)深挖“為什么”,可能會知道用戶真正想要達到的效果和預期是什么。
        3. 切記不要上來就一通講解方案后就單純問用戶你覺得好不好,應該還要繼續(xù)往下追問。因為這樣通過對用戶現(xiàn)有的行為習慣和需求關注的了解,才能夠判斷評估用戶說的話是否邏輯自洽,才能夠驗證方案是否能夠真正滿足用戶的需求,而不是偽需求。

        STEP6:分析報告

        一般情況下,可用性報告的內(nèi)容主要包含以下三方面:

        1. 研究概述:測試目標、樣本描述、研究方法等。
        2. 問題解讀:問題描述、原因解讀、嚴重程度及影響范圍評估、數(shù)據(jù)結果等。
        3. 解決應對:建議的解決方案。

        最后的話

        好的產(chǎn)品設計應當滿足以下特征:可用性、易用性、好用性且具有吸引力。每個特征都是為了能讓產(chǎn)品站穩(wěn)腳跟而存在的,倘若想要讓產(chǎn)品功能最終具備這些特征屬性,就離不開產(chǎn)品可用性測試的過程。

        而且一個產(chǎn)品設計方案在沒有經(jīng)過用戶驗證的情況下,容易在實際上線使用后出現(xiàn)一些隱性風險。而前置的設計驗證,在一定程度上可以輔助我們產(chǎn)品功能在上線前發(fā)現(xiàn)問題,改進設計。

        以上,共勉~希望能對大家有所啟發(fā)。

        轉載:優(yōu)設

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

         

        image.png

        教科書級干貨!6招蘭亭妙微UI設計公司,帶你玩轉情感化設計

        清陽 設計思維

        過去十幾年,數(shù)字產(chǎn)品設計的核心一直是能用、穩(wěn)定、無障礙,但如今功能同質化嚴重,情感體驗成為產(chǎn)品決勝關鍵
         
        C 端用戶追求 “用得開心”,加載動畫、趣味細節(jié)都能提升好感;B 端用戶需要 “用得舒服”,簡潔界面、貼心反饋能緩解工作疲憊。
         
        情感化設計不是單純美化界面,而是用設計觸發(fā)正向情緒,建立用戶與產(chǎn)品的情感連接,最終提升滿意度與忠誠度。蘭亭妙微UI設計公司帶您一起看。

        image.png

        一、什么是情感化設計

        image.png

         
        情感化設計是以激發(fā)用戶積極情緒為核心的設計理念,超越基礎功能與可用性,讓用戶在使用中產(chǎn)生愉悅、安心、被重視的感受。
         
        它基于唐納德?A?諾曼的三層情感模型,覆蓋用戶全體驗鏈路:
         

        1. 本能層(視覺感官)

        image.png

        第一眼視覺沖擊,直接影響初始好感。
         
        • C 端:美團橙黃色傳遞溫暖食欲感
        • B 端:Notion 低飽和色系降低信息壓迫感
         

        2. 行為層(操作交互)

         

        image.png

        操作流暢度與即時反饋,決定使用舒適度。
         
        • C 端:淘寶購物車動效、點擊反饋
        • B 端:360 安全衛(wèi)士查殺流暢動畫
         

        3. 反思層(品牌記憶)

        image.png

         
        使用后的長期感受,塑造品牌忠誠度。
         
        • C 端:網(wǎng)易云音樂年度聽歌報告
        • B 端:Slack 年度團隊感謝動畫
         

         

        二、UI 情感化設計發(fā)展三階段

         
        1. 功能導向期:以技術為中心,僅滿足基礎使用,用戶適配系統(tǒng)image.png
        2. 體驗興起期:關注可用性,界面更直觀易用

          image.png

        3. 情感化階段:以用戶情感為核心,打造有溫度的體驗image.png

         

         

         

        三、為什么要做情感化設計

         
        人類決策由情緒驅動,大腦杏仁核、前額葉皮層等區(qū)域負責情感處理,多巴胺、血清素直接影響愉悅感。
         

        image.png

        情感化設計能:
         

         

        • 觸發(fā)用戶正向行為,降低心理防線
        • 建立品牌認同與身份歸屬感
        • 實現(xiàn)用戶體驗與產(chǎn)品價值的雙贏
         

         

        四、情感化設計三大核心要素

        image.png

         

        1. 視覺設計:用美學傳遞情緒

         
        • 色彩:藍色 = 信任、紅色 = 熱情、黃色 = 活力,精準匹配情緒image.png
        • 排版布局:簡潔對稱 = 平靜舒適,雜亂無章 = 焦慮煩躁image.png
        • 動畫過渡:輕量動效緩解等待焦慮,提升操作愉悅感image.png
         

        2. 交互設計:用細節(jié)傳遞關懷

         
        • 微交互:按鈕反饋、懸停變化、加載動畫,體現(xiàn)設計用心image.png
        • 個性化:基于用戶行為定制推薦,讓用戶感到被理解image.png
         

        3. 內(nèi)容語言:用語氣拉近距離

        • 語氣適配:幽默親切 or 專業(yè)嚴謹,匹配產(chǎn)品調性image.png
        • 正向引導:錯誤提示安撫、成功操作鼓勵,減少用戶挫敗感image.png
         

         

        五、情感化設計的價值(C 端 + B 端)

         

        對 C 端產(chǎn)品:拉近距離,提升粘性

         

        image.png

        • 降低使用門檻,擬人化設計減少操作挫敗感
        • 強化用戶認同,契合審美與情感偏好
        • 促進轉化傳播,激發(fā)分享欲與復購
         

        對 B 端產(chǎn)品:提升效率,優(yōu)化協(xié)作

         
        • 緩解工作壓力,簡化流程、清晰反饋減少焦慮image.png
        • 增強團隊協(xié)作,正向激勵提升參與感image.png
        • 降低落地阻力,人性化設計減少員工抵觸image.png
         

         

        六、6 招落地情感化設計(核心實操)

         
        1. 視覺輕量化:低飽和配色、留白設計,減少視覺疲勞
        2. 微交互精細化:操作必有反饋,加載、點擊、錯誤狀態(tài)全覆蓋
        3. 文案人性化:拒絕生硬提示,用親切、鼓勵的語言溝通
        4. 場景適配化:C 端做節(jié)日皮膚、個性化內(nèi)容;B 端做高效流程、簡潔界面
        5. 反饋即時化:任務完成、流程卡點及時提示,給用戶掌控感
        6. 迭代動態(tài)化:通過用戶調研與數(shù)據(jù)反饋,持續(xù)優(yōu)化情感體驗

         

         

         

        結尾總結

         
        情感化設計不只是好看的插畫、動效,而是覆蓋視覺、交互、文案的全維度體驗設計。
         
        它把冰冷的功能,變成懂用戶、有溫度的產(chǎn)品,讓 C 端用戶愛上使用,讓 B 端用戶高效舒適。
         
        做好情感化設計,需要產(chǎn)品、設計、研發(fā)多方協(xié)作,以用戶為中心,持續(xù)迭代優(yōu)化。
        轉載:優(yōu)設

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

         

        image.png

        B 端表單設計(上)優(yōu)化版|清晰、好讀、可直接落地

        清陽 設計思維

        在B端產(chǎn)品設計中,表單作為核心數(shù)據(jù)錄入與交互載體,其設計的合理性直接影響產(chǎn)品效率與用戶體驗,蘭亭妙微ui設計公司在長期服務B端客戶的過程中發(fā)現(xiàn),許多產(chǎn)品因表單設計不規(guī)范、邏輯混亂,導致用戶填寫效率低、錯誤率高,甚至放棄操作。基于此,結合蘭亭妙微ui設計團隊的實戰(zhàn)經(jīng)驗,我們保留核心干貨,修正設計誤區(qū),梳理清晰邏輯,打造一份可直接落地、適合設計師快速查閱的B端表單設計指南,助力更多產(chǎn)品打造高效、易用的表單體驗。
         

        一、開篇:B端表單到底是什么?

        表單是B端產(chǎn)品核心數(shù)據(jù)錄入載體,本質是把線下紙質單據(jù)搬到線上,適配電腦/移動端操作習慣。核心目標:降低填寫成本、減少錯誤、提升效率、提高完成率。

        image.png

        二、表單三大設計原則

        1. 表意明確:用對組件:日期用DatePicker、數(shù)字用InputNumber,不混用、不誤導。
        2. 簡潔高效:信息獲取快、錄入操作快;視覺清爽,不堆砌。
        3. 安全容錯:操作前:清晰提示輸入規(guī)則;操作中:實時校驗、自動糾錯;操作后:草稿保存、二次確認防誤操作。

        三、表單基礎構成(必掌握)

        基礎表單 = 標簽 + 表單域 + 提示信息 + 操作按鈕;高階表單 = 基礎 + 校驗提示/幫助提示/占位符/動態(tài)增減。

        image.png

        1. 標簽布局(4種,效率排序)

        效率:頂對齊 > 右對齊 > 左對齊 > 內(nèi)部標簽
        • 頂對齊標簽:速度最快(50ms定位)、瀏覽填寫雙快、省橫向、占縱向。? 適用:追求快速填寫、標簽長短不一、延展性要求高。

          image.png

        • 右對齊標簽:填寫快、省縱向、閱讀稍慢。? 適用:要屏效+要速度,標簽長度差異小。image.png
        • 左對齊標簽:閱讀穩(wěn)、填寫慢、省縱向。? 適用:復雜/敏感信息、需要用戶仔細核對(如注冊)。

          image.png

        • 內(nèi)部標簽:省空間、輸入后消失易遺忘。? 適用:移動端極簡表單(≤2項),不建議PC端大量使用。

           

        2. 必填/選填標記規(guī)則(統(tǒng)一最關鍵)

        image.png

        • 全必填:可統(tǒng)一不標,保持全局一致即可
        • 必+選混合:只標必填* 或 只標選填,二選一并貫穿全站
        • 星號位置:建議放標簽左側,一眼掃完必填項

        3. 表單域(輸入核心)

        image.png

        包含:輸入框、選擇器、時間選擇器、數(shù)值選擇器、上傳。
        設計要點:
        • 寬度與輸入內(nèi)容匹配:長度暗示輸入量(建議用80/120/160/240/400這5檔)
        • 提供合理默認值:減少選擇負擔,提升填寫速度
        • 提示文案:有用、具體,不寫“正確但無用”的話

        4. 操作按鈕

        image.png

        • 彈窗表單:按鈕底部居右(確認在最右)
        • 頁面長表單:按鈕居中(減少操作距離)
        • 閱讀順序:右上角/右下角 → 從右往左;表單內(nèi) → 從左往右

        四、表單4種布局類型

        1. 基礎表單:表單項≤7個、結構簡單,直接單列/雙列排布。

          image.png

        2. 錨點定位表單:內(nèi)容極多、縱向超長、各組強關聯(lián),用錨點快速跳轉。

          image.png

        3. 標簽頁(Tab)表單:內(nèi)容多、各組無強關聯(lián),用Tab分組隔離。

          image.png

        4. 分步(Steps)表單:有先后邏輯順序,給用戶進度預期。

          image.png

        五、表單5種交互形式(按內(nèi)容量排序)

        內(nèi)容由少到多:氣泡卡片 → 原位編輯 → 彈窗 → 抽屜 → 頁面跳轉
        1. 氣泡卡片 Popover:輕描述、輕操作,不打斷流程。

          image.png

        2. 原位編輯:展示即編輯,回車保存,極簡錄入。

          image.png

        3. 彈窗 Modal:不離開當前頁,承載簡單表單。

          image.png

        4. 抽屜 Drawer:側邊滑入,可多層,適合中量內(nèi)容。

          image.png

        5. 頁面跳轉:最通用,適合復雜、長表單,必打斷當前流程。image.png

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

           

          image.png

        如何做好B端產(chǎn)品的競品分析?

        清陽

        競品分析作為日常工作中常用的基礎能力,在 C 端和 B 端兩種截然不同的產(chǎn)品形態(tài)下需要面對的難點也是不盡相同的。那么作為面向企業(yè)、公司的 B 端產(chǎn)品,在做競品分析時的流程以及側重方向上都有哪些特點呢?蘭亭妙微UI設計公司將從產(chǎn)品差異等幾個方向為大家分享一下自己的思考和總結,以期能夠提供參考和建議。

        “競品分析”我們從字面上理解,就是對現(xiàn)有的以及潛在的競爭產(chǎn)品的優(yōu)劣進行分析和總結。用以了解市場行情及自身產(chǎn)品的定位,發(fā)現(xiàn)新的市場機會,探索產(chǎn)品迭代的有效策略。在正式介紹 B 端競品分析的經(jīng)驗和思路之前,想先簡單介紹一下 C 端產(chǎn)品和 B 端產(chǎn)品的差異點,也能更好的理解 B 端產(chǎn)品的特性。

        一、先搞懂:B 端 vs C 端 核心差異

        image.png
        B 端產(chǎn)品面向企業(yè) / 組織,強調效率、流程、合規(guī);C 端面向個人用戶,強調體驗、流量、轉化。兩者做競品分析的思路完全不同。
         
        表格
         
         
         
        對比維度 B 端產(chǎn)品 C 端產(chǎn)品
        用戶 企業(yè)客戶、組織角色(管理者 / 員工) 海量個人用戶
        場景 辦公場景、工作流程、時間固定 生活場景、碎片化、強私人屬性
        設計 重流程、效率、穩(wěn)定性 重體驗、細節(jié)、拉新留存
        競品 公開度低、同質化低、難體驗 公開易找、同質化高、易體驗
        盈利 定制化報價、按年 / 模塊收費 明碼標價、會員 / 廣告 / 電商
         
        B 端競品分析兩大難點
         
        1. 競品難找、信息不透明
        2. 產(chǎn)品難試用、核心功能不開放
         

         

        二、第一步:明確分析目的 + 搭建分析框架

        image.png

        做競品分析前,先定目標,避免盲目對比。
         

        1. 分析目的(二選一為主)

         
        • 戰(zhàn)略層:對比市場定位、定價、客戶群、產(chǎn)品矩陣、服務模式
        • 功能層:找產(chǎn)品優(yōu)缺點、看流程合理性、輔助迭代規(guī)劃
         

        2. 必收集的背景信息

        image.png

        • 公司背景:成立時間、規(guī)模、行業(yè)案例
        • 技術背景:核心技術、迭代節(jié)奏、生態(tài)合作
        • 客戶與場景:目標行業(yè)、使用角色、核心痛點
         

         

        三、第二步:B 端競品怎么找、怎么篩?

         

        1. 四類必選競品

        image.png

        1. 初代產(chǎn)品:看行業(yè)起源,理解原始需求
        2. 直接競品:核心對標,全面拆解
        3. 間接競品:局部功能可借鑒的產(chǎn)品
        4. 頭部競品:行業(yè)標桿,看成熟方案
         

        2. 小眾領域:先發(fā)散→再收斂

         
        • 發(fā)散:提煉核心關鍵詞(如體驗管理→CEM、體驗監(jiān)測、客戶洞察、數(shù)據(jù)采集)
        • 收斂:用官網(wǎng)信息篩選,剔除定位不符的 “偽競品”
         

        3. 信息渠道

         
        • 行業(yè)報告、行業(yè)峰會 / 論壇
        • 搜索引擎、垂直媒體
        • 廠商官網(wǎng)、客戶案例、銷售資料
         

         

        四、第三步:B 端產(chǎn)品難體驗?這 4 種方法最實用

         
        B 端多為半公開 / 非公開系統(tǒng),不能直接注冊試用,用以下方式突破:
         

        1. 半公開產(chǎn)品(可對外售賣)

        image.png

        • 看官網(wǎng):快速了解定位、功能、客戶、案例
        • 申請試用 / 付費:最真實體驗流程與交互
        • 角色扮演咨詢:假裝客戶問銷售,獲取報價、交付、實施細節(jié)
         

        2. 非公開產(chǎn)品(內(nèi)部系統(tǒng) / 定制系統(tǒng))

        image.png

        • 人脈借賬號:親自操作體驗
        • 操作錄屏 / 影子計劃:錄屏回放完整流程
        • 用戶訪談:訪談使用者 / 客服,了解真實痛點
        • 流程記錄:梳理操作路徑,還原體驗地圖
         

         

        五、第四步:分析總結 + 輸出可落地結論

        image.png

        1. 按框架對齊信息:功能、流程、體驗、定價、客戶、服務逐項對比
        2. 提煉優(yōu)劣勢:哪些可直接借鑒、哪些要避開
        3. 結合自身落地:不照搬競品,匹配公司資源、產(chǎn)品定位、團隊能力
        4. 長期跟蹤:B 端迭代慢,需持續(xù)關注競品更新

        image.png


         

        六、極簡工作流程(直接照做)

        定目標 → 2. 搭框架 → 3. 找競品 → 4. 巧體驗 → 5. 對比分析 → 6. 輸出結論與迭代建議

        轉載:優(yōu)設

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

         

        image.png

         

        【設計法則】如何精進你的設計知識體系之—古騰堡原則!

        清陽

        “在設計的道路上,若暫時看不清遠方,不妨先俯身夯實腳下。蘭亭妙微堅信,真正的專業(yè)并非靈光一閃的偶然,而是源于嚴謹知識體系的必然。我們主張讓每一個像素的落點都有理可依,讓每一次交互的流轉都有據(jù)可引。只有用邏輯筑起設計的基石,才能讓作品在紛繁的視覺中站得穩(wěn)、立得住,讓人不僅看見美,更能看見背后的價值。”

        一、什么是古騰堡原則

        古騰堡原則是由14世紀西方活字印刷術發(fā)明人約翰·古騰堡提出,早在20世紀50年代在設計報紙的過程中,提出了一項原則,認為人的閱讀方式應該是遵循某種習慣進行的,像讀書一樣,由左到右,從上到下。

        經(jīng)過研究,他最終得出了被后人熟知的「古騰堡原則」,古騰堡你可能覺得既難懂還陌生,它還有另外一個名字:對角線平衡法則。

        這個原則的支撐點為「閱讀重心」,由人們一直以來的閱讀習慣形成。將頁面的設計與閱讀的重心相協(xié)調,能幫助讀者梳理閱讀的邏輯。據(jù)研究發(fā)現(xiàn),這么做能提高讀者閱讀的節(jié)奏和理解能力。

        古騰堡原則指人的閱讀方式遵循從左到右的眼動規(guī)律,且畫面顯示的東西都分成四個象限:

        1、第一視覺區(qū)(Primary Optical Area):處于左上方,讀者首先注意到的位置。

        無論用戶在搜索內(nèi)容、主動閱讀或者快速瀏覽,這都是用戶閱讀的第一落點區(qū)域。因此在這個區(qū)域我們應放置一級內(nèi)容或者核心功能。

        2、最終視覺區(qū)(Final Optical Area):處于右下方,視覺流程的終點。

        這個區(qū)域是用戶瀏覽行為的最終落點區(qū)域,當用戶瀏覽到這個部分時需要采取措施,我們可以在這里插入按鈕或者行動點。這也就能解釋為什么按鈕都會在右下角出現(xiàn)。當用戶的瀏覽行為結束后,可以進行操作反饋。

        3、強休息區(qū)(Strong Follow Area):處于右上方,較少被注意到。

        在這個階段,我們不應該去設置一個重要的行動點,一方面用戶容易忽視,另一方面,當用戶瀏覽完中心區(qū)域的內(nèi)容后,再返回到強休息區(qū)操作,視線會有個折回過程,用戶體驗并不太理想。

        4、弱休息區(qū)(Weak Follow Area):處于左下方,最少被注意到。

        用戶對這塊的注意程度最弱,因此也用來放置最弱的信息提示。

        二、古騰堡原則在設計中的應用

        遵循古騰堡法則,界面中的左上和右下是用戶視覺最為重點關注的位置,設計師應該把界面的關鍵元素放在主視區(qū),最終視覺區(qū)可以放按鈕,休息區(qū)可以用來放一些相對次要的內(nèi)容,如輔助圖形、文字信息。

        比如我們常用的頁面彈窗、各種文件和合同文件等等就是采用這種原則進行設計的。

        1、古騰堡原則在web端界面布局設計

        我們可以根據(jù)一般的用戶視覺習慣,來放信息權重不同的內(nèi)容。

        第一視覺區(qū)是用戶瀏覽網(wǎng)頁的起始點,最終視覺區(qū)是結束離開網(wǎng)頁的終點。整體是根據(jù)人們從上到下、從左至右有規(guī)律的閱讀習慣設計的。

        我們可以看到人人都是產(chǎn)品經(jīng)理網(wǎng)站信息結構的布局

        1、根據(jù)起點第一視覺區(qū)的特性把LOGO和導航放在左上角,推薦的文章也以圖片的形式放在這里進行曝光;

        2、弱休息區(qū)則放一些最新推薦的文章,吸引用戶不斷往下翻;

        3、高閑置區(qū)則放文章內(nèi)容之外的驚喜推送內(nèi)容;

        4、最終視覺區(qū)則是提供給用戶相關推薦課程或者想要加入的社區(qū)入口,也是常見的放置廣告的地方。

        2、古騰堡原則在移動端頁面布局設計

        古騰堡圖表應用最典型的例子就是商品詳情頁,在界面的頂部展示商品圖片、名稱、價格、快遞和優(yōu)惠等用戶主要關心的信息;右上和左下通常是分享、客服和收藏等次要信息;右下角則放置最終促成用戶交易的購買按鈕。

        3. 圖文類信息

        結合古騰堡的視線強弱分析,我們可以得知左側的首要視覺點一定是強視覺區(qū),但是有時候簡單的圖片+文字的排列也會有很多設計思考。

        比如:第一個圖今日頭條的布局,光看它的配圖我們根本猜不出來整體條目所表達的內(nèi)容,所以頭條的圖片元素傳達信息的效率遠不如文字,所以第一視覺區(qū)會留給文字信息;

        而第二圖中美團列表也圖片所傳達的信息效率更直觀,會一眼告訴用戶我這家是西餐還是中餐,是早點還是正餐,所以在美團的條目中圖片會被放在第一視覺區(qū)。

        這兩種布局的目的都是讓用戶可以快速瀏覽,不讓用戶在接收信息時受阻造成體驗打斷。

        此處還可以延伸一下,如上圖第三個圖,頭條的視頻條目也是先文字后視頻,為什么呢?

        按理說視頻的傳達信息效率要遠大于配圖,猜想一下,頭條的設計是想將視頻作為終端休息區(qū)進行視覺強化,第一,可以強化信息種類的分類讓用戶更好辨識,第二,讓視頻條目傳達信息效率更快且滿足整體使用APP時一致性的用戶心智,讓用戶能快速上手并且順暢體驗瀏覽。

        三、古騰堡原則在按鈕設計中的應用

        我們還可以依據(jù)古騰堡原則來解讀關于按鈕位置背后所呈現(xiàn)的設計思路。

        1、標題和操作按鈕

        我們都知道引導用戶操作的頁面中,一般頁面按鈕都在界面底部是因為離手近,方便操作,但不僅僅如此還因為瀏覽是用戶的第一行為,他們的視線會根據(jù)頁面元素進行移動,最終停留在底部結尾的地方。

        根據(jù)古騰堡原則,將標題和內(nèi)容放在頂部即第一視覺區(qū),引導用戶瀏覽所有內(nèi)容后注意到底部的按鈕作為終端休息區(qū),這樣的擺放即符合用戶由上到下的閱讀習慣又達到了產(chǎn)品預期的目標。

        2、底部垂直雙按鈕

        按鈕的水平布局和垂直布局:

        垂直布局下,用戶瀏覽時的眼動路徑單純向下,這種由上自下的瀏覽效率是最高的。

        水平布局時,用戶由左至右的瀏覽效率要明顯低于垂直布局,但也同時避免了垂直布局下過快的決策造成風險。

        這和表單布局方向類似,那些想要讓用戶快速瀏覽并完成的表單往往采用了垂直布局,而需要用戶仔細閱讀、認真填寫的表單往往使用了水平布局。

        如果產(chǎn)品希望用戶對每個按鈕都有足夠的關注度,垂直擺放是最佳選擇,且【重要按鈕應該放在頁面最底部】,雖然垂直雙按鈕在樣式上做了區(qū)分,但用戶同樣會停留一段時間將按鈕的內(nèi)容進行對比思考。

        那么,按照古騰堡原則,重要的按鈕應該放在頁面最底部,但是現(xiàn)實我們看到的垂直擺放按鈕的主次反而是相反的,主要的CTA 按鈕往往被放置在了上方?

        觀察上圖,有沒有發(fā)現(xiàn)淺色按鈕很容易被忽略掉,這樣就違背了產(chǎn)品要保證每一個按鈕都要有足夠關注度的目的,所以我們要違背古騰堡原則來滿足業(yè)務需求,正如我們所看到的微信授權頁面一樣。

        為了保證「允許」與「拒絕」這兩個獨立的按鈕能夠被用戶足夠的重視,并且其中的任意一個按鈕不會被輕易的忽略掉,這里將「允許」按鈕顏色加重設定為主按鈕,并且放在「拒絕」按鈕之上,讓眼睛原本垂直向下的運動軌跡產(chǎn)生回流的變化。

        “拒絕”按鈕能讓用戶注意到,這樣便起到了防錯性,缺點是會對用戶造成流程上較強的打斷性,適用于需要用戶思慮、審核信息的場景。

        所以,這也提示我在設計中要思考:設計原則雖是設計的基礎,并非一成不變,要合理權衡設計原則與產(chǎn)品目標之間的關系。

        3、水平按鈕主次

        水平擺放的按鈕,最典型的就是電商類型的詳情頁,【加入購物車】和【立即購買】按鈕。

        結合古騰堡原則的視覺重點說明,右下角視為視覺終端區(qū)域,即視覺最終停留的位置,所以他們將與轉化率相關的【立即購買】按鈕放在了界面的右下角,讓用戶更容易關注到。

        再比如:比較常見的「確認」和「取消」彈窗樣式,通常是在需要讓用戶確認某種操作行為時出現(xiàn),有可能是提交表單、確定信息、頁面操作引導等等,目的是讓用戶最快地看到主要操作內(nèi)容,為用戶提高操作效率。

        這些按鈕的差異不僅僅是位置,還包含按鈕的樣式、顏色、尺寸等等維度都存在著明顯差異。比如上圖的,頁面引導按鈕,支付寶的轉入轉出按鈕位置,都是一樣的邏輯,也是我們在設計中的一些設計支持業(yè)務轉化的一種方式。

        為什么要這樣設定水平按鈕主次關系?

        平常我們所看到的彈窗,推薦按鈕都是在右側,那么將推薦按鈕放在左側會怎么樣?如下圖所示:

        當我們在設計表單中的組合按鈕時,比如:取消與確認、提現(xiàn)與充值。根據(jù)古騰堡法則,用戶使用界面時從第一視覺落點區(qū)是主視覺區(qū)(Primary Optical Area),最終停留在結尾的終點區(qū)(Terminal Area)。

        不難看出推薦按鈕放在右側后,眼睛的運動軌跡會在水平方向軸上來回的往復運動,無形中增加了用戶選擇時長。

        水平多按鈕同樣存在著反面應用

        當業(yè)務需求需要用戶產(chǎn)生視覺回流,或者想要讓用戶習慣性的點擊右下角終點位置,比如常見的卸載軟件提示彈窗。

        相比橫排按鈕,用戶點擊主操作按鈕時會更加順暢,有利于業(yè)務的轉化,對于用戶體驗流程的打斷也會比豎向按鈕相對弱些,適用于能幫助用戶快速完成流程的場景,具體使用哪種布局要權衡體驗、用戶與業(yè)務目標之間的統(tǒng)籌關系。

        4、右上角按鈕位置

        根據(jù)古騰堡原則,右上角區(qū)域屬于強休息區(qū),用戶對這塊的注意程度最低。

        既然如此,為什么頁面的“發(fā)布”、“編輯”等按鈕都在右上角呢?

        頂部按鈕的設計,關鍵還在于可編輯內(nèi)容區(qū)域,而不是按鈕本身,頂部按鈕更適用于「編輯頁面」,頂部按鈕尺寸較小,它所占空間有限,因此在操作上相對來說不便于點擊,需要用戶謹慎操作。

        而底部按鈕的核心在于按鈕本身,而不是內(nèi)容。底部按鈕更適合全局最終的確定,提交等操作按鈕。

        四、應用古騰堡原則需要注意點

        1、雖然古騰堡圖所揭示的閱讀規(guī)律是普遍適用的,但是只在信息均勻分布的頁面證明古騰堡原則的閱讀規(guī)律。

        若是為了突破常規(guī)或達到一種強烈的沖擊,古登堡圖所揭示的視覺規(guī)律經(jīng)常被設計師所顛覆。常用的顛覆方法為采用特別醒目的形象,或者大小顏色更為鮮明搶眼的元素置于閑置區(qū),從而改變玩家的閱讀順序。

        上圖banner中,右側的3D內(nèi)容第一吸引用戶眼球,而后才會看到左邊的文字,視覺流程如紅色箭頭,這就是突破古騰堡常規(guī)設計原則的常見設計。

        2、語言本身的閱讀順序可能也會產(chǎn)生一定的影響,例如阿拉伯語從右至左的文字順序可能并不符合古騰堡原則的閱讀規(guī)律。

        3、用戶已熟悉,并養(yǎng)成獨特閱讀習慣的頁面也不一定遵循此規(guī)律,比如用戶自動跳過輪播廣告的【輪播圖盲視區(qū)】現(xiàn)象。

        五、總結

        古騰堡圖貫穿于界面設計的每個角落,只要謹記閱讀引力的順序:從上到下,從左到右,綜合閱讀流來排布視覺層級,即能做出合理的設計。

        但設計師也不能局限于古騰堡圖的規(guī)律中,要善用規(guī)律并結合其他設計知識做出更加完美的設計。

        應用建議:

        • 原則是設計的基礎,并非一成不變,需要結合設計原則與產(chǎn)品目標之間的關系進行合理運用;
        • 不需要死遵循原則,比如焦點模式下用戶將首先查看頁面上最主要的元素(視覺重量最大的元素或區(qū)域)。順序將取決于這些焦點的相對權重以及指示下一步要看的任何視覺提示。
        • 想要讓用戶進行某種操作時,正常情況下主要按鈕放在右側,操作流程暢通,提高效率,需要用戶確認思考的場景下,主要按鈕可放在左側,達到反復確認的目的。
        • 創(chuàng)建層次結構和流程會顛覆視覺動線的模型。

        轉載:人人都是產(chǎn)品經(jīng)理

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

         

        image.png

        2026年UI/UX設計趨勢洞察:從“爭奪注意力”到“尊重注意力”

        清陽

        站在2026年的節(jié)點回望,數(shù)字設計領域正經(jīng)歷一場歷史性的轉折。過去十年以“移動端優(yōu)先”、扁平化設計與靜態(tài)設計系統(tǒng)為核心的范式,正被一股更具動態(tài)性、智能性與沉浸感的新浪潮全面取代。

        2026年的設計趨勢,已不再停留于界面美學的修飾,而是深入至交互的底層邏輯重構。人工智能的角色,正從單純的效率工具,進化為“聯(lián)合設計師”乃至“實時的UI生成者”,驅動著“生成式UI”的興起。與此同時,硬件形態(tài)的突破——如空間計算設備的普及、車載顯示系統(tǒng)的革新——正迫使二維界面加速向三維空間拓展,催生了以“液態(tài)玻璃”為代表的新擬物美學與空間化敘事。

        從技術與社會兩個維度來看,2025年是設計行業(yè)最為動蕩的一年

        • 技術層面,大型語言模型(LLM)與端側算力的深度融合,使“智能”不再依賴云端高延遲請求,而是內(nèi)嵌于每一臺終端設備,為實時、個性化的界面生成提供了底層基礎。

        • 社會層面,用戶對數(shù)字成癮的警惕達到頂峰,對隱私與心理健康的關注,迫使設計必須從“爭奪注意力”轉向“尊重注意力”。

        這些深刻變化,正以不同形態(tài)融入2026年的設計趨勢與方法策略之中。

        基于對這一轉型期的持續(xù)觀察,蘭亭妙微UI設計公司梳理出2026年真正值得關注的7大UI/UX趨勢。在后續(xù)內(nèi)容中,我們將逐一拆解“是什么”“為什么”以及“如何應對”,為數(shù)字產(chǎn)品團隊提供可落地的方向參考。

        一、生成式 UI:從「頁面設計」到「規(guī)則設計」

        image.png

        2026 年,用戶界面正在經(jīng)歷自 1976 年以來最深刻的變革。傳統(tǒng) UI 設計依賴于設計師預先定義每一個界面、狀態(tài)與跳轉邏輯;而生成式 UI 的核心在于,界面不再是預先畫好的固定圖像,而是由 AI 根據(jù)用戶實時意圖、上下文環(huán)境與設備狀態(tài),在毫秒級動態(tài)重組而成。這意味著,兩位用戶使用同一應用完成同一任務時,看到的界面可能完全不同。設計的對象正從「頁面」轉向「組件關系」與「生成規(guī)則」。

        這一趨勢成熟的關鍵在于端側智能與組件化系統(tǒng)的深度融合。本地設備算力足以支撐復雜實時推理模型,解決了云端生成帶來的延遲與隱私問題。用戶操作——如語音指令、模糊搜索或點擊行為——被端側小模型解析為結構化意圖,AI 從設計系統(tǒng)中檢索符合品牌規(guī)范的原子組件,并根據(jù)屏幕尺寸、用戶偏好與任務優(yōu)先級實時排布,生成一個「用完即焚」的臨時界面。

        image.png

        Figma Make、Google Stitch、妙多等產(chǎn)品,已是生成式 UI 的早期實踐,未來將逐步深入一線應用。傳統(tǒng)的 A/B 測試也將進化為「A/N 測試」,每個界面都成為對用戶當前需求的最佳猜測。從用戶體驗角度看,這標志著「學習成本」的終結。

        在生成式 UI 時代,設計師的角色發(fā)生根本性轉變,工作重心聚焦于四個方向:

        • 定義約束:設定品牌風格、交互原則與安全邊界,確保 AI 生成的 UI 不偏離品牌調性;

        • 提示詞設計:編寫與優(yōu)化用于指導 AI 界面生成的提示詞;

        • 系統(tǒng)架構:維護龐大而靈活的設計組件庫,保障組件在任何組合下均能正常工作;

        • 設計兜底:處理例外情況,由設計師親手解決具體設計問題,為 AI 提供保障。

        設計師的價值正轉向設計邏輯的健壯性與智慧程度,這或許是一個更「抽象」但必然到來的結果。


        二、液態(tài)玻璃美學:數(shù)字材質的「生命力」

        image.png

        如果說 2010 年代的扁平化設計是為了適應低分辨率屏幕與性能受限的移動處理器,那么 2026 年的「液態(tài)玻璃」美學,則是硬件性能過剩與屏幕顯示技術飛躍的自然產(chǎn)物。這一趨勢由 Apple 在 2025 年 WWDC 上發(fā)布的系統(tǒng)更新(iOS 26、macOS Tahoe、visionOS 26)引爆,迅速蔓延至整個數(shù)字設計領域。

        「液態(tài)玻璃」并非簡單的擬物化回歸,也不是「毛玻璃」效果的重復。它是一種高度動態(tài)、具有物理屬性的數(shù)字材質:與靜態(tài)半透明背景不同,液態(tài)玻璃界面是「活」的——背景元素在透過上層界面時,會根據(jù)距離、角度與運動速度產(chǎn)生實時光學扭曲與模糊。

        這一趨勢的核心在于「深度感」與「響應性」。在 2026 年的界面中,光影不再是裝飾,而是信息層級的指示器:

        • 動態(tài)模糊:用戶滾動列表時,底層內(nèi)容不僅模糊,還會產(chǎn)生類似流體流過玻璃表面的拖影效果;

        • 鏡面高光:按鈕與卡片邊緣根據(jù)設備陀螺儀感知的傾斜角度,呈現(xiàn)流動光澤;

        • 層級重構:通過精確光學模糊與深度分層,在不遮擋背景內(nèi)容的前提下,清晰呈現(xiàn)前景操作區(qū)。

        實現(xiàn)「液態(tài)玻璃」效果高度依賴先進圖形渲染技術——在 iOS 生態(tài)中依托 Metal 圖形 API 的深度優(yōu)化,在 Web 端則因 WebGPU 的普及,使瀏覽器能以 60fps 甚至 120fps 流暢渲染復雜實時光照與模糊效果。

        image.png

        對品牌而言,「液態(tài)玻璃」提供了扁平化時代一度缺失的差異化手段。通過調整「玻璃」的折射率、厚度感、色散程度與「液體」的粘滯系數(shù),不同品牌可打造出截然不同的質感。「數(shù)字材質學」正成為 UI 設計師的新必修課。


        三、多模態(tài)交互與感知界面:告別「點擊」中心主義

        2026 年的交互設計,正式告別以「點擊」與「滑動」為絕對核心的時代,進入多模態(tài)共生階段。隨著傳感器成本降低與 AI 語義理解的質變,語音、手勢、眼動追蹤乃至面部微表情,均成為標準的一級輸入方式。

        image.png

        這種轉變的標志是「輸入方式的流動性」。用戶無需顯式切換模式——在撰寫文檔時,可一邊打字,一邊用語音補充描述,同時用眼神注視角落喚起參考資料,系統(tǒng)流暢融合三種輸入,理解綜合意圖。

        更進一步,「感知界面」成為最具未來感的趨勢。設備不再是被動工具,而成為具備情感計算能力的伙伴。通過分析用戶打字速度、語音語調變化,甚至通過攝像頭捕捉面部肌肉緊張度,界面可實時推斷情緒狀態(tài)(如焦慮、憤怒、困惑或專注)。如 Hume AI 等公司開發(fā)的語音接口,能表達與響應細微情感線索,使人機對話不再冰冷。

        在汽車領域,多模態(tài)交互已成為部分車型標配。寶馬 Panoramic Vision、現(xiàn)代摩比斯全風擋全息 HUD 等設計,將整個擋風玻璃下沿變?yōu)轱@示區(qū)域,結合增強現(xiàn)實(AR),將導航信息直接投射于路面。

        image.png


        四、空間化敘事與沉浸式滾動:從「無限瀑布流」到「敘事驅動」

        傳統(tǒng)的「無限瀑布流」因易導致成癮與信息迷失而受到批判,取而代之的是「滾動敘事」。在這種模式下,滾動操作不再僅是移動視窗,而是驅動時間軸與敘事邏輯的引擎。用戶向下滾動時,界面元素并非簡單上移,而是根據(jù)預設敘事腳本進行復雜變換:

        image.png

        • 場景轉換:背景隨內(nèi)容深入從清晨漸變?yōu)辄S昏;

        • 拆解展示:3D 產(chǎn)品模型旋轉、拆解以展示內(nèi)部結構;

        • 節(jié)奏控制:滾動速度決定故事流速,利用「智能吸附」技術讓用戶在關鍵敘事節(jié)點自然停頓,避免信息遺漏。

        受 Apple Vision Pro、Meta Quest 等空間計算設備影響,即便在普通手機與電腦屏幕上,UI 也開始追求「空間感」。2026 年的設計廣泛采用「偽 3D」與「2.5D」技術:

        image.png

        • 視差效應:通過陀螺儀與光標位置,平面卡片與圖像產(chǎn)生視差移動,仿佛懸浮于屏幕后方不同深度;

        • 光影互動:3D 卡片根據(jù)光標移動改變陰影投射方向,呈現(xiàn)近乎真實的物體存在感;

        • 打破網(wǎng)格:空間化設計打破傳統(tǒng)網(wǎng)格布局,允許元素在 Z 軸堆疊與穿插。


        五、超個性化與自適應布局:UI 的「千人千面」

        image.png

        借助 AI 的力量,2026 年的 UI 終于實現(xiàn)真正的超個性化。這超越了「猜你喜歡」的內(nèi)容推薦,深入 UI 布局與功能邏輯層面。應用可根據(jù)用戶使用習慣、當前情境與生物節(jié)律,動態(tài)重組界面。例如,財務經(jīng)理看到的是報表導出與審核功能,數(shù)據(jù)分析師則突出可視化圖表與 SQL 查詢窗口。

        image.png

        這種自適應布局依賴高度靈活的動態(tài)設計系統(tǒng)。UI 元素不再固定位置,而是根據(jù)權重算法實時排布,這對品牌一致性提出挑戰(zhàn)。設計師必須定義強大的「品牌基因算法」,確保無論 UI 如何變形,用戶仍能一眼識別品牌。這通常通過以下方式實現(xiàn):

        • 動態(tài)令牌:定義語義化顏色、間距與排版規(guī)則,而非硬編碼數(shù)值;

        • 微交互簽名:無論布局如何變化,按鈕點擊反饋動畫、頁面加載的獨特「呼吸感」保持不變,成為品牌的指紋。


        六、Zero UI 與 AI Agent:從「操作流」到「確認流」

        image.png

        「最好的界面就是沒有界面」(Zero UI)的理念在 2026 年得到廣泛關注。在智能家居、HMI 與可穿戴設備領域,屏幕不再是交互中心,而退居二線成為輔助信息展示板。交互主要通過傳感器自動觸發(fā):

        • 接近感應:走近汽車時,通過藍牙與步態(tài)識別自動解鎖并調節(jié)座椅;

        • 行為預測:從冰箱拿出牛奶時,手勢與重量傳感器自動記錄消耗量,在耗盡前加入購物清單。

        Zero UI 的另一面是 AI Agent 的興起。用戶不再親自操作復雜軟件菜單,而是向 AI Agent 下達模糊目標,由 Agent 在后臺自動跨應用完成任務。

        UI 設計的重點從「操作流」轉向「確認流」與「狀態(tài)流」。設計師需要設計清晰的卡片,展示 AI 的思考過程、決策依據(jù)與最終結果,讓用戶快速掃視并「批準」或「微調」,而非親自執(zhí)行每一步。信任感設計成為核心——用戶需要知道 AI Agent 做了什么,以及為什么這么做。

        image.png

        在沒有屏幕的場景下,反饋需通過其他感官傳達。空間音頻利用聲音方向感引導用戶,觸覺反饋則通過不同頻率震動傳遞「成功」「錯誤」或「提醒」等信息。設計師不僅要「畫圖」,還要學會「編曲」與「編排震動」,這大大拓展了 UX 設計師的技能邊界。


        七、動態(tài)排版與微敘事:文字成為「視覺生命體」

        2026 年,文字不再僅是承載信息的靜態(tài)符號,而成為具有生命力的視覺元素。動態(tài)排版成為主流趨勢:標題不再只是靜態(tài)字體,它們會根據(jù)鼠標懸停、頁面滾動或語音輸入產(chǎn)生變形、變色、拉伸甚至破碎重組的效果。

        image.png

        這一趨勢深受短視頻文化和高刷新率屏幕普及的影響。靜態(tài)文字被認為通過率低且乏味。設計師利用變量字體技術,讓字體的粗細、寬窄、傾斜與襯線形狀可無級調節(jié),并與用戶交互行為綁定。

        與此同時,微交互也被賦予敘事功能。一個簡單的「點贊」按鈕不再只是變紅,它可能爆發(fā)出彩色粒子,或像果凍般彈跳,甚至根據(jù)點贊次數(shù)展現(xiàn)不同等級的華麗動畫。

        image.png

        這些微小的瞬間不僅僅是反饋,它們共同構成產(chǎn)品的性格。通過精心設計的微交互,設計師在不增加額外內(nèi)容的情況下,向用戶傳遞品牌的趣味、嚴謹或關懷——也就是情緒價值。


        結語

        綜上所述,2026 年的 UI/UX 設計趨勢呈現(xiàn)出一種深刻的辯證關系:技術越是先進(AI 生成、空間計算),設計越是追求回歸人性(情感感知、神經(jīng)包容、物理質感)。

        對于企業(yè)與設計團隊而言,應對這些趨勢需進行戰(zhàn)略層面的調整:

        1. 技能升級:設計師必須從「畫圖員」轉變?yōu)椤高壿嫾軜嫀煛古c「提示詞工程師」。掌握 AI 工具不再是加分項,而是生存技能。

        2. 倫理優(yōu)先:在 AI Agent 與情感計算日益強大的背景下,設計倫理(隱私、包容性、防成癮)必須成為產(chǎn)品開發(fā)的第一性原理,而非事后補救。

        3. 系統(tǒng)思維:建立能夠適應生成式 UI 與多模態(tài)交互的動態(tài)設計系統(tǒng),是企業(yè)在 2026 年保持競爭力的基礎設施。

        2026 年的設計,不再是關于如何讓界面「好看」,而是關于如何讓技術以最自然、最尊重、最可持續(xù)的方式融入人類生活。

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

         

        image.png

        認知心理與用戶行為

        清陽

        表單驗證不僅是技術實現(xiàn),更是一場微妙的人機心理博弈。特別是實時驗證,改變了傳統(tǒng)的“填完再說”模式,實現(xiàn)了“邊走邊評”,信息反饋更及時,用戶的情緒也隨之起伏。

        蘭亭妙微UI設計公司,將圍繞三大核心原則,深入探討如何通過精細的驗證設計,提升用戶體驗,引導用戶順利完成表單填寫。

        一、實時反饋:讓用戶每一步都有“回應”

        1. 正向反饋:用“小鼓勵”建立信心

        實時反饋對用戶心理有顯著影響。正向反饋,特別是“正反饋 + 小情緒顆粒”的組合,能瞬間建立用戶信心、降低焦慮、激發(fā)行動欲。從心理學看,這是一種“即時獎勵”——即使不依賴物質,單純的認可也能產(chǎn)生強烈的動機。

        案例:Instagram 注冊時的“鼓勵策略”

        當用戶在 Instagram 輸入用戶名時,系統(tǒng)不僅提示“可用”,還會附上趣味性文案,例如:

        • “? 太棒了,這個名字沒人用過哦!”

        • “? 這個用戶名看起來不錯”

        這就像有人在你耳邊輕聲夸一句“選得妙!”,讓用戶在輕松愉快的情緒中繼續(xù)填寫。

        2. 負向反饋:避免成為“情緒滅火器”

        負向反饋如果處理不當,極易澆滅用戶熱情。尤其是在用戶尚未完成輸入時,就彈出模糊、生硬、充滿否定意味的提示,會讓用戶感到被“攻擊”。心理學中,這被稱為“認知威脅感知”——即便系統(tǒng)不帶情緒,用戶也容易將其“腦補”為批評。

        案例:某銀行 App 的“勸退式”體驗

        某銀行 App 在設置交易密碼時,用戶剛輸入“123456”,系統(tǒng)立刻彈出:

        • “不符合要求!”

        • “不能為連續(xù)數(shù)字!”

        • “請重新輸入復雜密碼”

        但用戶根本不清楚規(guī)則是什么。嘗試輸入“abcDEF123@”后,系統(tǒng)繼續(xù)報錯:

        • “不能包含字母連續(xù)!”

        • “必須包含至少兩種符號!”

        最終,用戶直接放棄操作,選擇線下辦理。這說明負向反饋需要有節(jié)奏、有余地、有幫助,而不是一次性“開火”。


        二、用戶的“歸因機制”:錯在我,還是怪系統(tǒng)?

        這是用戶體驗中非常微妙但關鍵的心理觸點。當用戶遇到錯誤時,本能會判斷:“這錯,是我傻?還是你系統(tǒng)蠢?”這一判斷直接影響用戶是繼續(xù)修正,還是直接離開。

        1. 什么是“歸因機制”?

        人類是“歸因動物”——遇到問題總想弄清楚原因。當用戶操作失敗時,系統(tǒng)的提示方式?jīng)Q定了他們把責任歸給自己,還是歸給系統(tǒng):

        • 歸因于自己:提示清晰、有禮、提供解決方案 → 用戶想:“哦,是我疏忽了,下次注意。”

        • 歸因于系統(tǒng):提示模糊、生硬、帶情緒 → 用戶想:“什么破系統(tǒng),設計得這么爛,怪我咯?”

        一旦用戶將責任歸給系統(tǒng),就很難再挽回。

        對比案例:登錄密碼錯誤

        • 系統(tǒng) A:只提示“錯誤!”

          • 用戶反應:“我哪錯了?是密碼錯?賬號錯?格式錯?服務器炸了?”

          • 歸因結果:怪系統(tǒng)

        • 系統(tǒng) B:提示“密碼錯誤,請檢查大小寫是否正確,或嘗試找回密碼”

          • 用戶反應:系統(tǒng)既指出了問題,又給出了解決路徑。

          • 歸因結果:怪自己

        對比案例:手機號輸入

        • 提示 A:“格式錯誤!” → 像在呵斥用戶,歸因偏系統(tǒng)。

        • 提示 B:“請輸入 11 位手機號碼,例如:13800001234” → 提供示例,用戶更愿意調整。

          image.png

        2. 設計師的啟發(fā):用“歸因引導”挽救體驗

        好的提示文案,傳遞的是“我是來幫你的”合作心態(tài),而非“你怎么又出錯”的責備心態(tài)。可以遵循以下原則:

        • 避免空洞詞匯:少用“錯誤”、“無效”這類模糊詞匯。

        • 用例子具象化:提供符合用戶語境的輸入示例,降低理解成本。

        • 傳達解決路徑:不僅要指出問題,還要告訴用戶“怎么改”。

          image.png


        三、心智模型:別讓用戶和“不可預測的機器人”斗智斗勇

        1. 什么是“心智模型”?

        心智模型,簡單說就是用戶“以為系統(tǒng)會怎么運作”的心理預期。例如,在表單填寫中,用戶預期的流程是:我填信息 → 系統(tǒng)檢查 → 告訴我對錯 → 我修改或繼續(xù)。如果系統(tǒng)行為偏離這一預期,用戶就會感到困惑。

        2. 系統(tǒng)“跑偏”的典型表現(xiàn)

        驗證觸發(fā)過早
        用戶還沒輸完,系統(tǒng)就開始報錯,仿佛在說“你話說得不對”。正確做法是等用戶輸完再判斷(如使用 onBluronChange + debounce)。

        反饋來得太遲
        用戶填完所有字段、點擊提交后,系統(tǒng)才提示“手機號格式錯了”。這就像“你讓我爬了十樓,現(xiàn)在告訴我樓梯走錯了”。更優(yōu)方式是局部字段校驗 + 實時反饋,至少在失焦后立即提示。

        提示位置飄忽不定
        錯誤提示有時在上方、有時在下方,有時紅框、有時彈窗,用戶眼睛跟著亂跑。一致性是安全感的來源:建議錯誤提示統(tǒng)一顯示在字段正下方,顏色、樣式、交互都保持一致。


        四、引導用戶走向正確方向

        你無法控制用戶怎么想,但可以引導他們“往正確的方向想”。

        1. 規(guī)則“提前說”,別“事后罵”

        如果字段有格式要求,直接在旁邊用灰色文字說明,例如“請輸入 11 位中國大陸手機號”。或者提供示例“如:13800001234”,讓用戶一眼看懂。否則等于“逼他犯錯,再事后教育”,極易導致用戶流失。

        2. 提示語要具體、友好、有“引導感”

        • 避免高壓語氣:不用“錯誤!”、“非法!”、“無效!”這類詞。

        • 用“請檢查一下”替代“你錯了”,更像建議而非指責。

        • 給出具體信息:如“9 位”,而不是“格式不對”。

        3. 保持流程一致性,不搞“突襲”驗證

        如果前幾個字段都沒有實時反饋,用戶會默認“最后統(tǒng)一驗證”。結果突然在第 5 個字段彈出實時驗證,用戶可能瞬間懵掉。記住:一套劇本演到底。要么全部實時反饋,要么全部最后校驗,不要“雙標”。

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

         

        image.png

        日歷

        鏈接

        個人資料

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

        存檔

        主站蜘蛛池模板: 中国女人内谢69xxxx| 中文字幕无码精品亚洲35| 亚洲制服丝袜在线 | 国产精品高清一区二区不卡| 中文字幕亚洲人妻系列| 人妻人人澡人人添人人爽| 丘北县| 久久国产成人午夜av影院| 亚洲成人aⅴ| 亚洲日韩亚洲另类激情文学一| 成本人片无码中文字幕免费| 国产精品国产三级国产av剧情| 特一级熟女毛片免费观看| 怡春院网站| 久久精品国产99久久3d动漫| 国精品无码一区二区三区在线蜜臀| 国产亚洲精品精品精品| 深夜福利一区二区在线| 泰来县| 亚洲AV香蕉一区区二区三区| 99噜噜噜在线播放| 不卡一区二区三区四区视频| 91视频一88av| 欧洲av在线| 99爱视频精品免视看| 亚洲色欧美色2019在线| 国内免费视频成人精品| 97国产视频| 麻豆一区二区三区精品视频| 2021av在线| 亚洲激情综合| 国产精品国三级国产a11| 国产999精品成人网站| 中文字幕亚洲综合久久2020| 91老肥熟女九色老女人| 中国女人做爰视频| 无码毛片视频一区二区本码 | 亚洲国产欧美在线人成大黄瓜| www久久只有这里有精品| 国产91PORN中文| 欧美日韩综合|