五十路熟妇高熟无码视频,无码簧片,亚洲大尺度无码无码专线,亚洲欧美日韩国产自偷,jizz无码在线观看视频,av色综合,99精品国产成人一区二区,亚洲粉嫩av一区二区黑人

首頁

如何提升AI交互設計能力?這篇總結超全面!

清陽 行業趨勢

一、全文速覽圖

image.png

二、前言

2025 是智能體的元年,2026 年將更加成熟和普及,應用程序的體驗方式因為智能體而逐步發生改變。

馬斯克和扎克伯格曾預言“在未來 5-6 年內,傳統的手機和應用程序(App)的形態將因為 AI 發生根本性變革”,蘭亭妙微ui設計公司與您一同學習。

三、設計師已經迎來了「AI 交互設計」窗口期

以前的體驗設計經驗,已經跟不上如今 AI 能力逐漸普及的應用端設計開發趨勢。

如今,各產品研發團隊基于 AI 能力用戶體驗設計需求將會大幅增加。

即將到來的 2026 年金三銀四求職季,產品和開發設計崗的招聘必然會對求職者結合 AI 的能力提出更高要求。

率先掌握 AI 體驗設計能力的設計師,在求職時更有競爭力,在職場團隊 AI 設計這一塊也更有知識話語權。

換個角度看,AI 體驗設計對于交互設計師在一定程度上也是一次洗牌的機會。

image.png

四、從 UX 到 AI Experience,具體有哪些轉變

1. AI 將重塑以往的交互方式

當 AI 能夠理解自然語言并主動完成任務時,許多傳統的 UI 組件:信息架構、導航設計、表單流程、數據篩選等交互方式將會逐漸被重構。

用戶與應用交互的過程將會改變。比如:

用戶發起交互,由原來的用戶主動操作+操作的路徑,變成了用戶的一句意圖表達+AI 直接推送入口。

再比如對于用戶輸入錯誤的處理方式,由原來的表單驗證與提示,變成了與 AI 的自然語言澄清,然后多輪對話修正。

再比如幫助決策上,用戶由原來的面對多選項,變成了 AI 根據情境理解目標,并直接推薦最優路徑。

image.png

3. 基于 AI 的場景設計與思考

根據尼爾森諾曼設計機構(簡稱 NN/g)在 2024 年的 AX 設計研究,優秀的 AI 體驗設計要有具備以下幾個素質:

  1. 用戶能夠容易地使用提示詞:這意味著需要設計引導用戶有效輸入的界面元素
  2. 劃清 AI 主導 與 用戶主導 的邊界:當不應該讓 AI 做決定時,在合適的時機讓用戶介入
  3. 多模態交互設計:語音、文本、控件輸入的設計結合
  4. 漸進式建立信任 AI:順滑地讓用戶從發現、嘗試到依賴 AI 功能
  5. 品牌下的 AI 人格化:AI 人設、開場白風格、擬人化、專有音效設計

五、如何提升 AI 體驗設計能力

1. AI 交互設計知識

① 來自大廠的 AX 設計原則與模式

來自 Google、Microsoft、Ant 公司的 AI 設計規范與原則。

理解設計原則背后的原因、場景,就像以往我們接觸過剛在技術窗口爆發期的「新穎」交互,比如 PC 時代的鼠標輸入、移動互聯網的觸屏輸入、虛擬現實時代等...交互模態各有差異。

  1. https://design.google/library/people-ai-research
  2. https://pair.withgoogle.com/guidebook/
  3. https://www.microsoft.com/en-us/haxtoolkit/ai-guidelines/
  4. https://ant-design-x.antgroup.com/docs/spec/introduce-cn

image.png

② 建立 AI 交互設計基本認知框架

AI 的軟件分為:AI 能力應用軟件、各行業場景應用軟件的 AI 賦能。

AI 的交互形態:

  1. Chat 對話式(對話式交互為主)
  2. Assist 助手式(隱藏為主,需要協助時喚醒)
  3. Spread 散布式(隱藏為主,固定節點出現相關的 AI 功能)

AI 交互組件:Think 思考過程、ThoughtChain 思維鏈、Prompts 提示集、Conversations 管理對話、Suggestion 快捷指令......

image.png

Ant-design-x

③ 積累 AI 交互設計經驗

  1. 體驗優秀的 AI 功能,并搜集到案例夾。
  2. 建議按場景分類收集:內容創作類、數據分析類、任務自動化類、客戶服務類、等等。
  3. 大致的框架可以像產品體驗日記一樣,記錄設計細節,比如:產品名稱與截圖、核心交互流程描述、AI 介入的具體方式、優秀設計細節(如何處理加載、錯誤、歧義的)。

image.png

④ 嘗試理解 AI 大模型底層的技術原理

這是偏技術的知識,對于非專業人群來說,比較難啃,但回報是最高的。

因為它是我們認識 AI 的原理性起點,一旦掌握,做許多 AI 項目都能受益,比如:快速判斷 AI 能力邊界、規劃大模型訓練等。

而對于設計師來說,也包括能有效指導 AI 領域的設計。

就像以往我們落地自己的設計方案,最好提前摸清前端框架、組件、數據交互,才不容易在開發環節被卡脖子,更順利地實現設計方案。

了解方式:查閱關于 LLM 工作原理的科普類文章;相關大模型的官方網站查找文檔。

2. Ai 交互設計思維

在現有設計項目中,多一層關于「AI 交互輔助」的思考

在做設計項目中,在傳統交互設計思路上,有意識地思考「假設現在有 AI 智能體的幫助,這個功能可以是什么樣的更好用法?」。

如果你想更好地驗證 Ai 設計模式的成果,可以做一些進階的學習研究:

首先像以往的項目一樣,拆解用戶操作;

然后針對每個環節思考“如果這里有 AI 能力,能否提效或者減負?

再將 傳統方案 vs AI 加持方案的可視化,并進行對比,量化提升的效率

image.png

基于上圖,我們把有 AI 協助退貨整個過程,背后的動作和實現原理拆解分析:

  1. 用戶與系統的交互是通過「多輪對話」,
  2. 然后 AI 在對話中「識別意圖」,與用戶確認需求,
  3. AI「搜集關鍵信息與用戶資料」提交,
  4. AI 發起退貨申請,并對接商家「退貨系統」,
  5. AI 推薦「最優」的退貨方式(上門取件),
  6. 只把最少的操作「確認」留給用戶。

而以上這些動作,都需要設計師具備了理解前后臺的交互鏈路(前端如何自然地與用戶交流、后端對接哪些接口)、Ai 工具調用的能力、等等知識經驗,才能順利地完成 Ai 的交互設計方案,并落地。

3. 爭取實戰機會,讓自己新學習的能力在落地中驗證

戰略性參與有 AI 的項目:

如果你的團隊項目正好有 AI 智能體對業務場景賦能的規劃,那么對你來說,參與進來將是一個轉型的好機會。

其中,從 redesign 小的功能點中 加入 AI 的交互方案開始,比如:搜索功能智能化、表單自動填充、智能推薦卡片。這類功能點改造見效明顯,往往投入產出比高,易于快速驗證和迭代。

當然得在方案支撐足夠有理的前提下。比如:準備傳統交互 vs AI 加持的交互這兩套方案對比,用預期收益、技術可行性和數據說話。

主動創造機會和環境:

定期向產品團隊分享競品的優秀 AX 設計案例,進行團隊設計掃盲,同時也能提升隊內影響力,后面參與項目設計更有話語權。

4. 大膽點,用 AI 顛覆玩法

進階到挖掘大的場景中,能夠利用 AI 重塑體驗方式的機會。

比如:

傳統的進度條,用戶需要拖動查看逐個視頻幀尋找他想看的目標片段。

而 AI 播放器中,可以把識別到的字幕,加入到進度條中作為錨點,讓用戶根據具體的字幕內容,就可以精準定位并直達該進度點,找片段的效率大大提升,直接使體驗升維。

image.png

最后

預計 2-3 年之后,AI 交互設計將普及為交互設計師的基本能力。那些率先掌握的設計師,將在 AI 重塑產品形態的浪潮中,找到屬于自己的新位置。

現在就是最好的開始時機。

你,做好準備了嗎。

轉載:優設

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

 

image.png

搜索框的消亡啟示錄

清陽 設計思維

當 AI 開始重構本地生活的交互邏輯,美團的搜索框正悄然淪為舊時代的遺跡。本文深入探討了關鍵詞搜索與自然語言理解之間的根本沖突,揭示了篩選器背后隱藏的產品妥協,并預判了 AI 對本地生活服務入口的三大沖擊。從對話框替代,到 Agent 化威脅,再到最危險的場景蒸發 —— 這場范式遷移,將如何重塑美團的護城河?
 
AI 正在重構本地生活服務的交互入口。這并非一次簡單的升級,而是一場徹底的范式遷移。蘭亭妙微 ui 設計公司認為,交互入口的代際變革,本質是用戶心智與產品邏輯的雙重重構,決定著平臺未來的核心競爭力。

一、一個被所有人忽視的產品細節

image.png

周五下午六點,你打開美團,想找一家“適合帶父母吃飯、安靜一點、最好有停車場、粵菜或者閩菜都行”的餐廳。

你停頓了三秒。

因為你不知道該在搜索框里輸入什么。“粵菜”太寬泛,“安靜粵菜”不確定能否搜到,“帶父母”這個條件根本沒有對應的關鍵詞。最后你妥協了,輸入“粵菜”,然后手動撥動篩選器:距離3公里以內、評分4.5以上、人均150—300元。翻了兩頁結果,看到第十幾家店的時候,已經記不清最初想要什么感覺了。

這個場景,每天發生在數以千萬計的美團用戶身上。沒有人覺得有什么問題——畢竟大家都習慣了。

但如果認真思考,你會發現這里隱藏著一個根本性的產品矛盾:用戶的真實需求是模糊的、情緒化的、充滿上下文的,而搜索框的底層邏輯卻是關鍵詞匹配——它要求用戶把一個復雜的人類意圖,壓縮成幾個離散的詞語。

這個壓縮的過程,本身就是信息損耗。而篩選器、排序、推薦算法,不過是在這個損耗之后所做的各種補救。

今天我想深入分析的,不是美團要不要做AI,而是AI的到來如何從結構上重新定義了美團的用戶交互邏輯,以及這對整個本地生活服務賽道意味著什么。

二、搜索框背后的產品邏輯:十年的“意圖壓縮術”

2.1 搜索框的本質不是“搜索”,而是意圖的強迫翻譯

image.png

從信息架構的角度看,搜索框是一個“意圖翻譯器”。它的工作原理是:把用戶頭腦中模糊的需求,強制轉化為系統可以處理的結構化信號。

問題在于,這個翻譯過程存在天然的信息損耗。人類表達需求的方式是自然語言,是帶有情緒和上下文的整句話;但關鍵詞搜索要求的是最小化、去語境化的詞組。當你把“想找一家適合帶父母的安靜粵菜館”壓縮為“粵菜 安靜”,你已經丟失了“帶父母”所暗含的價值感需求——面子、正式感、停車便利、服務周到。這些維度,任何篩選器都覆蓋不到。

更重要的是:大多數用戶在打開搜索框的那一刻,自己的需求也是未完全成形的。他們需要的不是“輸入詞語獲得列表”,而是一個能幫他們把模糊想法變成具體選擇的交互過程。搜索框不是這個過程的起點,它只是一個粗暴的入口。

2.2 篩選器是“打補丁”的產物,不是真正的解法

美團過去十年,在搜索框旁邊積累了越來越多的篩選維度:價格區間、評分區間、距離、營業時間、配送方式、菜系、口味偏好……每一個新增的篩選項,背后都是對搜索能力不足的一次承認。

篩選器越復雜,說明搜索越弱。這是一個重要的產品邏輯。

因為在理想情況下,如果搜索本身能理解“適合帶父母”,你根本不需要“人均150—300元”這個篩選器——系統應該自己推斷出價位范圍。如果搜索能理解“安靜”,你也不需要“評分4.5以上”來作為代理指標。篩選器的本質,是用多個結構化維度去近似替代搜索本身無法理解的語義內容。

這種設計在關鍵詞搜索時代是合理的,因為你只能如此。但它同時也造成了一個認知負擔:用戶要在使用產品的同時,自己完成“需求拆解→關鍵詞提煉→篩選器配置”這三步工作。這是用戶替產品做了本該由產品完成的事情。

2.3 推薦算法為什么救不了搜索

過去幾年,美團在推薦算法上投入了大量資源。首頁的“猜你喜歡”“今日必吃”“附近熱門”,本質上是在用主動推薦來彌補搜索的局限性。

但推薦和搜索滿足的是用戶決策鏈上的不同節點:推薦解決的是“我不知道要什么”的探索需求,搜索解決的是“我已經有方向,需要找到它”的意圖需求。

當用戶有明確意圖的時候,推薦流是一種干擾,而不是幫助。周五六點打開美團想帶父母吃飯的那個人,他不需要“今日必吃網紅烤串”,他需要的是一個能理解他需求的系統。推薦算法再精準,也無法解決搜索的根本缺陷。

三、AI來了,搜索框面臨的三種結構性沖擊

沖擊一:被對話框漸進替代

image.png

大型語言模型的核心能力之一,是零成本的自然語言理解。它可以直接處理“幫我找一家適合帶父母吃飯、安靜、有停車場的粵菜館”,而不需要用戶做任何翻譯工作。

這不是概念,而是已經在發生的事情。當前各大互聯網平臺陸續接入大模型的搜索能力,其背后的產品邏輯完全一致:把關鍵詞搜索框替換為自然語言對話框,讓系統來承擔“需求理解”的工作,而不是把這個負擔甩給用戶。

對美團而言,這意味著搜索框的替代將是一個漸進式、不可逆的過程。用戶一旦體驗過“說人話就能找到想要的餐廳”,他們不會再愿意回到拼關鍵詞加撥篩選器的舊交互模式。

沖擊二:被Agent整體跳過

比對話框替代更激進的是Agent路徑。

在Agent模式下,用戶不再經歷“搜索→篩選→選擇→預訂”這個線性流程,而是:表達意圖→Agent自主完成理解、比價、預訂、提醒的全部環節→用戶只需最終確認。

這意味著搜索框不只是被替換,而是作為一個獨立環節被整體消解。用戶無需進入美團App,只需在微信、支付寶、或者操作系統級別的AI助手中完成整個交互——美團的服務能力被調用,但美團作為流量入口的位置被徹底邊緣化。

微信的AI搜索、支付寶的AI助手、華為的小藝、蘋果的Siri進化版,都在朝著這個方向推進。Agent化不是遙遠的未來,它是當下已經在布局的競爭格局。

沖擊三:用戶行為遷移導致的場景蒸發(最被低估的威脅)

前兩種沖擊是關于“搜索框被什么替代”,而第三種沖擊更為隱蔽,也更具毀滅性:用戶的使用場景可能在不進入美團的情況下被滿足。

想象一個使用場景:用戶在和朋友的微信群聊里討論周五吃什么,這時群里的AI助手直接分析對話內容,給出三家符合所有人口味和位置的推薦,并且完成了預訂——全程在微信內完成,美團的數據庫被調用,但美團App從未被打開。

這不是技術上的想象,而是一個流量入口遷移的商業問題。美團失去的不只是搜索框,而是“用戶主動打開App”這個行為本身。一旦用戶的高頻決策習慣在其他平臺形成,美團的日活數據將面臨結構性下滑。

這才是AI沖擊中最危險的死法,因為它是無聲的、漸進的,等到平臺意識到的時候,可能已經失去了整整一代用戶習慣。

四、美團真正的護城河在哪里

image.png

在討論AI對美團的沖擊時,有一個根本性的問題需要厘清:美團的價值究竟是什么?

如果美團的價值是“連接用戶和商戶的信息中介”,那它確實岌岌可危,因為AI可以比搜索框更高效地完成這個連接。但如果美團的價值是“把服務實際送達到用戶手中的履約網絡”,那AI對它構成的威脅就要小得多。

4.1 履約能力:AI造不出來的壁壘

美團今天擁有超過700萬的騎手網絡、覆蓋數百個城市的即時配送基礎設施、與數百萬商戶的深度綁定關系,以及每天處理數千萬筆訂單所形成的實時運力調度系統。

這些東西,AI無法憑空生成。大模型再強大,也無法替代一個在三十分鐘內把熱餐送到你手邊的騎手網絡。AI是信息層的技術,而美團的核心競爭力是物理層的基礎設施。

這個判斷有一個重要推論:美團的搜索框可以被替代,但美團的履約能力不會被替代——至少在可見的未來不會。這意味著即便美團完全失去了前端的流量入口,它也可以以“能力提供者”的角色,為其他平臺的AI助手提供后端服務。

4.2 數據資產:有價值,但需正確使用

美團積累了超過十年的用戶消費行為數據:什么人在什么時間什么地點吃什么,偏好什么價位、什么菜系、什么口味,有什么飲食禁忌,外賣和堂食的偏好有什么差異……這些數據是訓練本地生活垂直AI模型的核心資產。

但這里有一個容易被忽視的戰略陷阱:數據只有轉化為理解用戶意圖的能力,才能成為真正的護城河。如果美團把這些數據只是用來優化推薦算法,提升現有搜索框的點擊率,那它就是在用新工具鞏固舊模式,而不是在構建下一個時代的競爭優勢。

真正的機會是:用歷史數據訓練一個“深度理解本地生活消費意圖”的垂直模型,讓AI能夠理解“帶父母吃飯”背后的全部語義,能夠根據用戶畫像推斷“你說的安靜,是哪種程度的安靜”。

4.3 最危險的戰略誤判:把AI做成更聰明的搜索框

基于以上分析,美團在AI轉型中最危險的做法,是把大模型接入現有的搜索產品,讓對話框替換關鍵詞框,在視覺上完成一次“AI升級”,然后宣稱完成了AI化轉型。

這是一種“AI美顏”——換了皮膚,底層邏輯沒變。用戶體驗確實會有改善,但改善的是現有流程的效率,而不是對未來交互范式的卡位。

真正的產品戰略應該是:放棄“流量入口”的思維定式,轉向“意圖響應網絡”的定位。美團需要成為一個能在任何界面、任何上下文中理解用戶本地生活消費意圖并完成履約的系統,而不只是一個把用戶吸引進App的流量平臺。

五、對產品經理的三個結構性啟示

image.png

美團的案例不只是一個大廠的戰略故事,它對所有產品人都有直接的方法論價值。

啟示一:重新識別你產品的“意圖入口”

在你當前負責的產品里,用戶在哪個環節表達了他最真實的需求?那個入口,通常就是AI沖擊最先發生的地方。

如果你的產品依賴搜索框、關鍵詞匹配、或者多級篩選器來理解用戶需求,那么你需要認真思考:當大模型能夠直接理解用戶的自然語言時,你的產品流程里哪些步驟是多余的?哪些環節是在讓用戶替產品做本該產品做的事情?

啟示二:區分“AI能替代的”和“AI替代不了的”

美團的履約網絡是AI替代不了的。你的產品里,也存在這樣的部分。

識別的方法:把你產品的核心價值鏈拆解到最細的顆粒度,逐項問自己:如果有一個無限能干的AI助手,它能把這個環節做掉嗎?能做掉的是信息層,做不掉的通常是物理層、關系層、或者依賴特定資質的專業層。那些做不掉的部分,就是你在AI時代真正應該加固的護城河。

啟示三:警惕“功能疊加”掩蓋“結構性缺陷”的產品陷阱

美團的篩選器越來越多,是搜索本身無力的一種掩蓋。在你自己的產品里,也要警惕類似的模式:當你在給現有功能打補丁的時候,要問自己,這是在解決問題,還是在拖延面對一個結構性缺陷的時間?

AI時代給了產品經理一個重新思考底層設計的機會。與其在舊的交互框架里做局部優化,不如退出來問那個更難的問題:如果今天從零開始設計這個產品,知道AI存在,我會怎么設計?

六、搜索框消失的那天

image.png

回到最開始的場景。

有一天,你打開美團,首頁沒有搜索框,沒有篩選器,只有一行文字:“今晚有什么打算?”

你輸入:“帶父母吃頓正式點的,粵菜或者閩菜都行,不要太吵,最好有停車”。

系統回答:“為你找到3家符合條件的餐廳。其中順德菜館距你2.1公里,今晚有包間空位,停車場可停50輛,評價中高頻出現‘安靜’‘服務好’,人均約220元。是否幫你預留?”

你點了確認。整個過程,四十秒。

這不是遙遠的科幻,它是可以預期的近未來。搜索框不會因為某一天某個版本更新而消失,它會以用戶幾乎察覺不到的方式,被慢慢替代——就像人們不再“搜索天氣”,而是直接問語音助手一樣。

美團的搜索框消失的那天,不是美團的終結,而是本地生活服務進入“意圖經濟”時代的標志。在那個時代里,誰擁有對用戶消費意圖最深的理解能力,誰擁有把服務真正送達的基礎設施,誰就擁有競爭優勢。搜索框只是一個UI控件,重要的從來不是它本身,而是它背后那個“理解用戶意圖”的能力。

而這個能力,才剛剛開始被認真對待。

轉載:人人都是產品經理

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

 

image.png

外賣平臺搜索功能設計核心總結

清陽 設計思維

蘭亭妙微UI設計公司,以美團、餓了么、大眾點評為案例,分析外賣平臺搜索功能的價值、類型與設計方法,提煉出打造優質搜索體驗的核心要點。

一、搜索的核心意義

image.png

  1. 高效找餐:幫有明確需求的用戶快速檢索,節省時間、提升點餐效率。
  2. 引導消費:用熱詞、推薦等引導無目標用戶,創造消費、促進下單。
 

二、主流平臺搜索類型特點

image.png

  1. 入口:統一用搜索框,保證高曝光。
  2. 模式:美團 / 餓了么 = 全量模糊搜索;大眾點評 = 城市定向搜索。
  3. 功能:餓了么 / 大眾點評帶掃一掃,支持二維碼快速找品。
  4. 引導:美團 / 餓了么用大色塊按鈕;美團加搜索標簽刺激轉化。
 

三、四大設計原則

  1. 場景預熱:搜索前用輪播熱詞、運營活動、IP 動態對話引導。image.png
  2. 貼心引導:提供歷史搜索、搜索發現、熱榜,縮小范圍、展示權益。

    image.png

  3. 預期管理:實時聯想關鍵詞,展示商家 / 商品 / 優惠,減少無效操作。

    image.png

  4. 細致分類:結果分層歸類,搭配榜單與筆記,方便篩選避坑。

    image.png

 

四、總結

外賣搜索要圍繞效率、引導、體驗打磨細節,借鑒優秀競品設計,打造流暢流程,提升用戶留存。
 

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

 

image.png

細節見真章!12個按鈕設計容易踩到的坑

清陽 交互設計及用戶體驗

細節定成敗:12個常見的按鈕設計誤區

按鈕設計的直覺性,源于物理按鈕給我們留下的行為習慣。回顧歷史,物理按鈕正是現代UI組件的鼻祖。它們至今仍被大量使用,其魅力在于:即便用戶不懂內部原理,只需輕輕一按,就能讓設備運轉起來。正如《Power Button》一書作者Rachel Plotnick所言,按鈕文化塑造了我們今天下達數字指令的方式。

“你只需按下按鈕,剩下的交給我們。”——柯達公司的這句經典廣告語,精準捕捉了按鈕對用戶的吸引力:用最簡單的觸碰,換來即時的滿足感。

即便觸摸屏日益普及,物理按鈕也并未消失。它所塑造的交互習慣,深刻影響著數字界面按鈕的設計,成為衡量直觀性與易用性的永恒參照。

一、分清按鈕與鏈接

按鈕向用戶傳達“可操作”的信號,廣泛出現在對話框、表單、工具欄等場景中。

image.png

  • 鏈接:用于導航到另一個地方,如“查看全部”、“閱讀更多”。

  • 按鈕:用于執行具體動作,如“提交”、“合并”、“創建”、“上傳”。

二、定義完整的按鈕狀態

image.png

每個按鈕都應具備清晰、無干擾的視覺反饋。其交互狀態需明確定義,以區別于周圍布局:

  1. 正常:可交互的默認狀態。

  2. 焦點:通過鍵盤(如Tab鍵)進入可編輯狀態時的提示。

  3. 懸停:鼠標指針置于元素上方時(主要適用于桌面端)。

  4. 按下:表示用戶正在點擊該按鈕。

  5. 加載中:操作未立即完成,向用戶反饋任務正在進行。

  6. 禁用:當前不可交互,但未來可能啟用。

三、選擇合適的按鈕樣式

圓角矩形按鈕因其高識別度最為常見。樣式的選擇取決于用途、平臺及設計規范。主流樣式大致分為:

image.png

  • 填充按鈕(實心):視覺權重最高。

  • 描邊按鈕(線框):視覺權重次之。

  • 文本按鈕:視覺權重最弱。

利用樣式差異構建清晰的動作層級,在多個選項中引導用戶。通常,最重要的操作使用“首要”按鈕樣式,其他操作則按重要程度遞減。

四、避免讓用戶思考

image.png

可用性專家Steve Krug曾說:“別讓我思考。”用戶早已被各類電子產品“教育”,對按鈕的外觀和功能形成了固定認知。任何與“標準”的較大偏差,都可能造成困惑。

五、區分可點與不可點元素

切勿對交互式元素(如按鈕、鏈接)和非交互式元素(如純文本標簽)使用相同的顏色,否則用戶會因不確定哪里可以點擊而感到迷茫。

六、保持一致性

image.png

“一致性是最強大的可用性原則之一。當事物總是以相同方式表現時,用戶就無需擔心意外發生。”——雅各布·尼爾森(Jakob Nielsen)

一致性提升了操作的效率和準確性,減少了誤操作。它創造了可預測性,幫助用戶掌控流程。在定義主要、次要等按鈕樣式時,請確保顏色、形狀等元素的一致,不僅在項目內部,也應盡量遵循平臺的整體規范。

七、保證足夠的點擊區域

image.png

按下一個按鈕應是輕松簡單的操作。如果用戶容易誤觸相鄰元素,會帶來糟糕的負面體驗。

  • 推薦尺寸:對于多數平臺,觸摸目標建議至少為 48x48dp。無論屏幕大小,其物理尺寸應約為9mm。觸摸屏元件的目標尺寸至少應在7-10mm之間。

  • 圖標按鈕:務必確保其可點擊的熱區大于圖標的可視范圍。這一原則不僅適用于移動設備和平板,也同樣適用于鼠標操作的網頁端。

八、踐行無障礙設計

image.png

所有組件都應遵循無障礙設計原則。除了目標區域大小,字體尺寸、色彩對比度也至關重要。有許多工具可以幫助檢測組件的可訪問性表現。

九、謹慎使用手勢

image.png

手勢(如滑動、雙擊、長按)能提供觸覺反饋并節省時間。然而,對于普通用戶而言,許多手勢并不直觀。建議將復雜手勢作為快捷操作留給高級用戶,同時為普通用戶保留明確的按鈕操作入口。

十、使用清晰的按鈕標簽

image.png

按鈕傳達的文字信息與其外觀同等重要。模糊的標簽會讓用戶感到困惑甚至誤導。

  • 使用動詞:好的標簽能引導行動,就像按鈕在主動詢問用戶:“要把這件商品加入購物車嗎?” 或 “要確認訂單嗎?”

  • 避免模糊詞匯:應避免使用“是/否”或過于通用的“提交”等標簽。

十一、合理排列按鈕順序

image.png

“確定”與“取消”誰在前?兩種方式各有道理:

  • 確定在前(如Windows):符合自然的從左到右閱讀順序。

  • 確定在后(如macOS):促使用戶在行動前先評估所有選項,有助于減少錯誤。

兩種順序都沒有絕對的對錯,也不會造成嚴重的可用性問題。選擇哪種,取決于平臺規范與具體場景。

十二、少用“禁用”狀態

image.png

你是否曾面對一個灰色按鈕,停留數秒甚至數分鐘,卻不知如何是好?濫用“禁用”狀態極易引發用戶的挫敗感。

建議:盡量避免使用禁用按鈕。更好的做法是始終啟用按鈕。如果用戶遺漏了必填信息,只需在相應空白字段下方給出明確提示,或高亮顯示錯誤項即可。

 

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

 

image.png

B 端交互設計 13 個優化策略

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

核心總覽

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

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

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

    image.png

     
    頁面信息雜亂時,按業務邏輯拆分區塊。例:發布商品→基本信息、規格庫存、商品詳情。
  2. 導航優化
     

    image.png

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

    image.png

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

    image.png

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

 

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

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

image.png

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

image.png

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

image.png

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

image.png

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

 

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

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

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

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

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

 

image.png

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

清陽 交互設計及用戶體驗

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

  1. 個性化定制
  2. 多產品互通
  3. 低操作門檻

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

一、個性化定制

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

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

image.png

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

image.png

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

image.png

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

二、多產品互通

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

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

 

image.png

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

image.png

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

image.png

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

image.png

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

image.png

三、低操作門檻

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

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png


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

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

 

image.png

10個產品細節剖析,看看高手如何做溫度的設計!

清陽 設計思維

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

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

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

image.png

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

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

image.png

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

3. 情感化動態:讓打卡更有儀式感

image.png

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

4. 應景天氣設計:把自然氛圍搬進產品

image.png

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

5. 品牌化刷新:讓基礎操作貼合產品特質

image.png

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

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

image.png

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

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

image.png

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

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

image.png

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

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

image.png

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

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

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

     

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

 

image.png

B端產品體驗調研中,設計驗證怎么做?

清陽 設計思維

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

在日常的 B 端產品調研支持過程中,我們研究員經常會遇到這樣的場景:

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

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

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

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

首先,我們先來了解什么是產品可用性測試?

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

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

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

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

image.png

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

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

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

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

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

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

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

image.png

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

image.png

STEP1:設計任務

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

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

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

STEP2:招募用戶

在招募用戶環節,最重要的是樣本數量的確定。在實際的可用性測試中,我們常常被產品同學或設計同學問到:

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

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

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

image.png

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

STEP3:前期準備

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

image.png

STEP4:試點測試

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

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

STEP5:觀察訪談

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

image.png

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

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

STEP6:分析報告

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

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

最后的話

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

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

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

轉載:優設

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

 

image.png

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

清陽 設計思維

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

image.png

一、什么是情感化設計

image.png

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

1. 本能層(視覺感官)

image.png

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

2. 行為層(操作交互)

 

image.png

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

3. 反思層(品牌記憶)

image.png

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

 

二、UI 情感化設計發展三階段

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

    image.png

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

 

 

 

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

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

image.png

情感化設計能:
 

 

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

 

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

image.png

 

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

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

2. 交互設計:用細節傳遞關懷

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

3. 內容語言:用語氣拉近距離

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

 

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

 

對 C 端產品:拉近距離,提升粘性

 

image.png

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

對 B 端產品:提升效率,優化協作

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

 

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

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

 

 

 

結尾總結

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

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

 

image.png

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

清陽 設計思維

在B端產品設計中,表單作為核心數據錄入與交互載體,其設計的合理性直接影響產品效率與用戶體驗,蘭亭妙微ui設計公司在長期服務B端客戶的過程中發現,許多產品因表單設計不規范、邏輯混亂,導致用戶填寫效率低、錯誤率高,甚至放棄操作?;诖耍Y合蘭亭妙微ui設計團隊的實戰經驗,我們保留核心干貨,修正設計誤區,梳理清晰邏輯,打造一份可直接落地、適合設計師快速查閱的B端表單設計指南,助力更多產品打造高效、易用的表單體驗。
 

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

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

image.png

二、表單三大設計原則

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

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

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

image.png

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

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

    image.png

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

    image.png

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

     

2. 必填/選填標記規則(統一最關鍵)

image.png

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

3. 表單域(輸入核心)

image.png

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

4. 操作按鈕

image.png

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

四、表單4種布局類型

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

    image.png

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

    image.png

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

    image.png

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

    image.png

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

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

    image.png

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

    image.png

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

    image.png

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

    image.png

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

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

     

    image.png

日歷

鏈接

個人資料

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

存檔