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

首頁

搞定 B 端響應式布局:從原理到落地,一篇吃透

清陽 設計思維

 

本文聚焦B 端系統響應式設計,拆解適配邏輯、參數規范與設計交付,蘭亭妙微ui設計公司幫你低成本實現合理適配,告別無效工作量與開發返工。

一、先搞懂:B 端響應式的核心定位

 
響應式的本質是讓界面隨瀏覽器窗口自動調整,保證展示完整、操作合理。
 

關鍵認知

image.png

  1. 關注窗口寬度,而非設備分辨率
     
    用戶可自由縮放瀏覽器,設計只適配常用窗口寬度區間,不糾結固定屏幕分辨率。

    image.png

  2. B 端≠全量響應式
     
    B 端頁面信息密集、組件復雜,全端響應式開發成本極高。優先局部適配,不做無意義的全量兼容,移動端場景建議單獨開發。
  3. 只做 3 類核心適配
     
    B 端響應式僅聚焦 3 種場景,其余頁面(表單、詳情頁)可固定寬度:
  • 布局寬度自適應:模塊結構不變,寬度隨窗口縮放

    image.png

  • 多列流式排布:卡片隨寬度自動增減列數

    image.png

  • 組件展收控制:側邊欄、信息欄達到斷點自動展開 / 收起

image.png


 

二、4 步定參數:響應式基礎規范

 

1. 設定寬度邊界

 
  • 最小寬度:≥900px(小于此寬度允許橫向滾動)
  • 最大寬度:≤2560px(超過此寬度內容不再放大)
     
    作用:規避極端窄屏 / 超寬屏,減少無效適配工作量。

2. 劃分適配區域

  • 上下結構:僅內容區做響應式,頂欄不參與

    image.png

  • 左右結構:僅右側內容區適配,側邊欄排除在外
     
    核心原則:導航類固定組件不參與響應式
 

3. 柵格系統配置

 
以 Figma 設計為例,內容區創建柵格 Frame:

image.png

  • 列數:首選24 列,可選 12/16/20 列
  • 列間距:固定 8px/12px/16px(三選一)

    image.png

    柵格僅約束頂級組件,組件內元素無需對齊柵格。
 

4. 確定斷點(Breakpoint)

 
斷點是觸發布局變化的臨界寬度,需提前與開發確認:
  • 導航展收:≤1000px 收起,>1000px 展開
  • 多列卡片:900-1200px=3 列;1200-1500px=4 列
     
    提示:無適配場景可不設斷點,避免冗余規則。
 

 

三、3 階段落地:從設計到交付

image.png

階段 1:分配頂級組件柵格占比

image.png

儀表盤、卡片頁等頁面,按柵格劃分頂級組件寬度;
 
表格、表單等滿寬組件,直接占滿柵格區域即可。
 

階段 2:制定組件內部適配規則

image.png

組件寬度變化時,內部元素遵循 3 類規則:
 
  1. 固定尺寸:圖標、按鈕等固定寬高,左 / 右對齊
  2. 填充自適應:輸入框、篩選欄等撐滿父容器
  3. 高度自適應:文本區域自動換行,撐開組件高度
     
    復雜組件(表格、圖表)需提前同步開發適配方案。

階段 3:輸出關鍵頁面響應式稿

 
無需全頁面做適配,僅輸出核心頁面的小 / 中 / 大 3 版效果:
 
  • 必做頁面:首頁儀表盤、數據表格頁、卡片列表頁
     
    作用:讓開發直觀理解適配邏輯,避免自由發揮導致體驗混亂。
 

 

四、避坑總結

  1. 不追求全設備完美適配,局部響應式是 B 端最優解
  2. 柵格只管頂級布局,組件內部用自動布局搞定
  3. 寬度邊界、斷點、適配區域必須提前和開發對齊
  4. 交付核心頁面效果圖,比純文字規則更高效

轉載:優設

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

 

image.png

如何提升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 重塑產品形態的浪潮中,找到屬于自己的新位置。

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

你,做好準備了嗎。

轉載:優設

蘭亭妙微(藍藍設計)m.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控件,重要的從來不是它本身,而是它背后那個“理解用戶意圖”的能力。

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

轉載:人人都是產品經理

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

 

image.png

蘭亭秒微|設計師創意構思的技巧與方法

濤濤 設計思維

本文專為蘭亭秒微設計團隊打造,聚焦設計創意從 0 到 1 的生成邏輯,用可落地、可復制的方法,解決日常創意瓶頸、靈感枯竭、方案同質化問題,幫助團隊穩定輸出高質量視覺與創意方案。

UI 設計中色彩理論與實用調色板指南(原創完整版)

濤濤 設計管理與成長

顏色是視覺感知的核心,不同波長對應不同色彩,而每個人對色彩的感受,又受視覺能力、文化背景與使用場景影響。

蘭亭妙微|打破常規的 UI 設計表達 ——10 種創新思路與實戰應用

濤濤 設計思維

在同質化嚴重的 UI 設計領域,產品想要脫穎而出,不僅要滿足基礎功能,更要通過打破常規的視覺與交互表達,打造差異化體驗、強化品牌記憶、提升用戶停留時長。蘭亭妙微深耕政企、工業、教育、醫療、消費產品等多領域 UI/UX 設計,結合大量落地項目,提煉出 10 種可直接復用的創新設計思路,幫你跳出固化思維,做出更有質感、更有溫度的界面。

蘭亭妙微|UI 設計中高飽和亮色的應用與克制

濤濤 設計思維

北京蘭亭妙微(藍藍設計)深耕 UI/UX 設計十六年,服務航天、金融、醫療、工業監控、大數據平臺等多領域政企客戶,在 B 端系統、C 端產品、可視化大屏中,對高飽和亮色的運用形成了成熟的實踐體系。本文結合蘭亭妙微項目經驗,拆解亮色在 UI 中的價值、風險與落地規范,為商業產品提供可復用的設計思路。

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

清陽 設計思維

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

一、搜索的核心意義

image.png

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

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

image.png

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

三、四大設計原則

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

    image.png

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

    image.png

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

    image.png

 

四、總結

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

蘭亭妙微(藍藍設計)m.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

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

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

 

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

 

image.png

蘭亭秒微| PC 網頁 UI 設計 12 大趨勢 下

濤濤 網站設計文章及欣賞

蘭亭秒微作為專注于PC 端網頁設計、品牌官網定制、B 端系統界面的設計團隊,長期跟蹤國際前沿設計趨勢與技術演進。本篇基于 2015 年全球 PC 網頁 UI 主流方向,結合原文核心觀點,為你完整解讀下半部分 6 大趨勢,還原當年設計浪潮的底層邏輯與落地要點。

日歷

鏈接

個人資料

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

存檔