欧美成人免费观看_免费成人深夜天涯网站_日韩中文在线视频_天堂av一区二区_欧美xxxx性xxxxx高清_亚洲欧美一二三

首頁

B 端設計師必備:高效競品分析實戰指南

濤濤 B端ui設計文章及欣賞

對于 B 端設計師而言,競品分析是解決設計難題、把握行業趨勢的核心工具。但實際工作中,很多設計師都會陷入 “難試用、術語多、無結果” 的困境 —— 要么拿不到競品賬號,要么被專業術語繞暈,要么漫無目的地點擊瀏覽,最后只留下 “這個界面不好看” 的淺層評價。其實,B 端競品分析的核心不是復刻產品功能,而是通過拆解表象、挖掘邏輯,為自身設計提供可落地的思路。本文結合實戰經驗,從核心價值、競品分類、分析方法到資源渠道,全方位拆解 B 端設計師該如何做好競品分析。

? B 端表單頁設計:從規范到高效的全維度指南

濤濤 B端ui設計文章及欣賞

在 B 端產品中,表單頁是數據錄入的核心載體,更是用戶與系統交互的關鍵橋梁。很多設計師往往因表單頁視覺設計空間有限而忽視其重要性,導致頁面布局混亂、操作繁瑣,嚴重影響用戶錄入效率。然而,優秀的表單設計能夠通過合理的結構、清晰的指引和智能的交互,將 “被迫填寫” 轉化為 “高效完成”,真正實現為 B 端用戶降本增效的核心目標。本文將從設計原則、核心構成、交互設計、布局策略和易用性優化五個維度,拆解 B 端表單頁的設計邏輯與實踐方法。

商家后臺 AI 功能體驗升級:以統一認知賦能商家高效經營

鶴鶴 B端ui設計文章及欣賞

一、項目背景與核心目標

 
隨著 AI 技術深度融入電商經營全流程,百度優選商家后臺已實現 AI 能力在商品創建、經營管理、客服接待等核心場景的全面覆蓋。但商家在使用過程中普遍面臨 “不會用、不敢信” 的體驗難題,經深度拆解經營痛點發現,交互模式不統一、視覺表達混亂是核心誘因,直接抬高了商家對 AI 工具的認知與使用成本。
 
為此,我們以 **“統一 AI 認知,提升商家經營效率”為核心目標,啟動 AI 功能體驗升級工作。團隊立足行業主流的嵌入式、對話式、伴隨式三大 AI 交互形態,結合 B 端商家后臺的操作習慣展開審慎選型與創新設計:舍棄更適用于自然語言指令推進生產、以沉浸問答為主的對話式交互;同時針對客服、直播互動等需規?;?、自動化運行的場景,創新提出“托管式”** 交互范式,適配低人工介入的服務需求。并同步搭建統一的 AI 視覺語言體系,最終打造出一套商家可統一理解、輕松調用、深度信任的智能體驗解決方案,全方位助力商家降本提效。

image.png

 

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

 

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

 
嵌入式交互的核心是讓 AI 生成結果緊鄰用戶操作場景,實現輕量便捷的交互體驗,核心適配復雜表單填寫類場景,以商品創建環節為典型代表 —— 該環節字段繁多、手動填寫耗時久,且易因填寫不規范被審核駁回,嚴重拉長發品周期。針對這一問題,我們根據字段特征與 AI 能力類型,設計了兩種差異化交互流程:
 
  1. 填充識別類:針對規則明確、AI 可通過識別提取關鍵信息輸出穩定答案的字段(如商品屬性),采用系統自動填入模式,搭配 “AI 預填” 標簽提示狀態。例如 AI 可從商家上傳的商品包裝圖中識別 “風干”“盒裝” 等信息,自動填入食品工藝、包裝方式模塊,同時提示商家檢查確認,以自動化替代手動錄入,最大化縮短填寫時間。
  2. 推薦優化類:針對需依托 AI 優化素材、提升購買吸引力的內容(如商品主圖、標題),因存在 AI 創作內容不符商家預期的可能,采用 “主動提供結果但不預先填入” 的模式,支持商家對 AI 結果進行調優,待符合預期后再手動錄入。靈活的交互設計既滿足不同商家的個性化需求,也有效降低人工審核時長。
 
該模式上線后成效顯著,商家平均發品時長縮短 8 分鐘,發品成功率提升 0.7%,模塊滿意度提升 25%,實現了既定流程內的效率突破。

image.png

 

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

 
針對商家多線程經營時需頻繁跳轉各模塊、需自主發現經營問題的痛點,我們打造了深度融入經營動線的伴隨式交互方案,聚焦 **“主動觸達、連續洞察”** 兩大核心,讓 AI 助手跳出常規對話機器人的被動響應模式,轉變為結合工作流前后場景、提供落地行動指引的經營輔助工具。
 
  1. 主動觸達:AI 助手入口設計 “流光呼吸感” 動效,搭配輪播詞條實時推送與當前任務相關的關鍵信息(如 “今日店鋪訪問量增長 20%”),實現輕量視覺吸引;當商家停留于具體任務頁面時,助手可基于頁面內容與業務邏輯,主動識別潛在問題并推送輕量提醒(如 “商品主圖尺寸可能影響點擊率”),在商家未發起提問前即主動觸發服務。image.png
  2. 連續洞察:AI 助手在輸出建議或數據時,會附帶清晰的思考過程與來源摘要,實現 “可解釋的 AI”,打消商家疑慮;同時能基于當前對話主動預判后續需求,智能推薦下一步操作(如 “進一步分析體驗分下降的原因”),將單點查詢轉化為系統性的經營問題排查與解決鏈路,大幅降低商家獲取完整決策依據的綜合成本。image.png
 
通過以上設計,AI 工具從單純的被動響應工具,升級為能主動賦能的經營伙伴。
 

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

 
相較于嵌入式、伴隨式交互需商家實時參與、無法解放人力的特點,托管式交互通過 **“預先配置規則,系統自動執行”** 實現最高程度的自動化,核心適配客服接待等需規?;盏膱鼍?。針對商家對 AI 自動化 “黑盒操作回復” 的不信任,以及人工無法實現 24 小時不間斷接待、難以覆蓋海量咨詢需求的問題,我們設計了 “預先配置 + 人機接力” 的托管式交互方案,讓 AI 成為可自主運行的安心服務管家。
 
  1. 可視化配置,構建信任基礎:為消除商家對 AI “黑盒操作” 的疑慮,將抽象的 AI 能力轉化為可預判的具體結果,我們提供直觀的策略配置面板與 C 端頁面預覽圖,商家可針對售前咨詢(商品咨詢、催促下單等)、售后維護(退款申請等)不同場景設置回復規則,并實時查看 AI 執行的示意效果。“配置即所見” 的設計讓 AI 能力變得具體可感知,讓商家從配置起點建立對自動化系統的可控感。

     

    image.png

  2. 明確狀態標識,實現流暢人機接力:為保障人機協同的順暢性,界面中對接待狀態進行全方位清晰標識:全局接待狀態置頂實時更新、會話列表按狀態動態分組、單人接待狀態(接待中 / 暫停接待)強化并自動同步。當 AI 無法解答復雜訴求、用戶負面情緒等問題時,會話將自動流轉至 “待人工回復” 分組,通過動態高亮 + 聲音預警提醒人工快速接管;人工回復后,AI 將自動暫停并更新接待狀態,同時生成會話摘要,幫助工作人員快速了解溝通前因后果,將決策焦點從 “梳理問題” 轉向 “解決問題”。此外,客服可主動設置 “恢復托管”,AI 也會在識別新會話時自動恢復接待,形成閉環的人機協同機制。image.png
 
在買家視角,該設計也實現了服務主體的明確化:AI 接待時清晰標識消息主體,人工接管后實時告知買家,保障消費者的服務體驗連貫可靠。該模式上線后,咨詢響應時長縮短 15.8%,商家滿意度提升 14%,買家滿意度同步提升 7.4%,成功實現 7×24 小時規?;崭采w與服務質量的雙重提升。
 

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

 
在三大交互范式的基礎上,我們搭建了一套貫穿產品全鏈路的智能視覺語言體系,沉淀為具有 AI 特色的感知系統,全方位優化 B 端設計體驗、提升操作效率。
 
在視覺設計層面,我們繼承百度 APP 的 AI 標識與色彩體系,延續用戶對 “百度 AI” 專業、可信賴的固有認知,有效降低商家的理解與學習成本。針對 B 端界面信息密集,需兼顧操作效率與視覺清晰度的特點,在百度 APP 高飽和智能感知色彩體系的基礎上,結合現有產品組件降低色彩飽和度,實現視覺降噪,打造出適配 B 端操作場景的淺色系列組件。
 
為彌補淺色體系下 AI 視覺感知弱化的問題,我們引入狀態動效、聲音提醒等多維反饋機制,通過感官協同讓商家在復雜界面中,也能清晰、即時地感知 AI 運行狀態(如 AI 智能接待中的掃光動畫),保障信息傳達的效率與可靠性。

image.png

image.png

四、設計核心與價值沉淀

 
本次百度優選商家后臺 AI 體驗升級,始終以 **“以商家提效為中心”** 為設計核心,通過 “場景篩選適配 + 交互形態創新”,落地嵌入式、伴隨式、托管式三大交互范式,精準破解商品創建、多線程經營、客服接待等核心場景的使用痛點;同時構建 “視覺 + 多感” 的智能化感知體系,從根本上解決商家 “不會用、不敢信” 的體驗困境。
 
從業務價值來看,本次升級實現了發品效率、經營問題解決率、服務滿意度的全方位提升;從設計價值來看,項目沉淀的 **“場景 - 范式 - 視覺”** 設計方法論與標準化組件資產,為直播帶貨、智能投放等更多電商場景的 AI 賦能提供了可復用的落地模板。
 
未來,我們將持續圍繞商家實際經營需求迭代優化產品,推動 AI 技術深度融入電商經營全鏈路,以設計驅動產品長效升級,助力商家實現降本提效,為百度優選商家生態的高質量發展注入持續動力。
本文為轉載
 

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

 

image.png

資深設計的 10 個 UI 技巧

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

正文

為了幫助大家更輕松地提升設計水平,這里整理了一些簡單實用的小貼士。希望這些小技巧不僅能夠助力您優化當前的設計項目,還能在未來的設計之旅中為您提供參考價值。

 

 

 

01. 避免卡片上文本信息過多

 

一個卡片內通常會包含圖片、標題、詳細介紹及行動按鈕等元素,這些元素需要以聚焦的形式去呈現,以幫助用戶快速掃描內容。當文本內容較長、展示的信息過多時,不利于用戶快速掃描,導致用戶無法在第一時間快速感知到產品想要展示的、或用戶想要知道的信息,很容易被用戶過濾。

 

image.png

 

文本內容過多且無法刪減時,我們可以從中提取部分更有價值信息,也可以只顯示文本內容的前兩行,其他將其省略,以點擊展開更多、內容彈窗或者跳轉頁面的方式將其完整展示,都不失為一種不錯的解決方式。

 

image.png

 

 

 

02. 減少表單字段的填寫數量

 

在設計表單時,讓用戶填寫過多的內容會增加其認知負荷,表單完成率也會隨之下降。為了減少用戶的操作次數,降低使用難度,但凡能讓用戶選擇的就不要讓他輸入、能夠系統獲取的就不讓用戶去選擇,要盡可能的減少字段填寫數量,讓表單顯得更加簡單。

 

類似地址、日期這類層級內容,不要將其分成多個字段,最好做成聯動選擇讓用戶一氣呵成。

 

image.png

 

 

 

03. 不同輸入場景下的鍵盤類型

 

為了簡化數據輸入,滿足不同的類型的文本輸入需求,用戶在輸入不同類型的字段時,應提供對應類型的鍵盤,便于用戶更快完成表單內容,常見的鍵盤有以下幾種:

 

  • 中文鍵盤:絕大多數表單使用的類型,應對純中文或綜合性文本類型的輸入需求;

  • 英文鍵盤:純英文類型的字段,例如字母類型的用戶名、英文名輸入等;

  • 數字鍵盤:純數字類型的字段,例如手機號、身份證號、銀行卡號等;

  • 數字鍵盤(亂序):多用于純數字密碼類型的輸入需求,對安全系數要求較高,如支付密碼等。因出于安全考慮,這類鍵盤雖然會增加用戶的理解成本,但與財產的安全性相比,顯然在可接受范圍之內。

 

image.png

 

 

 

04. 行高應跟隨字號而變化

 

有很多設計師在處理大量的文本內容時,為了遵循設計規范,會設定固定的行高數值,例如常用的1.2、1.5倍等,需知設計規范是為了避免我們在設計中出錯,并非為了規范而規范。

 

在應對大量的文本類容時,為了讓用戶有更好的可讀性和易讀性,行高因跟隨字號的大小而變化,字體越小、行高越大,想要視覺上更加細膩,文字越粗(越黑)、行高越大,我們只需要保證在同一字號、字重的條件下,保持同相同數值的行高即可。

 

image.png

 

如果中文看的不是那么明顯,可以試下英文,特別是上一行基線到下一行基線之間的距離尤為明顯。筆者因工作中涉及中、英、泰三文切換,在處理行高時不敢有絲毫馬虎。

 

 

 

05. 基于拾色器右上方選取顏色

 

在為UI選取主色調時,大多都是根據logo色來建立UI色彩體系,因品牌logo會用戶各行各業,尤其是平面印刷用色與電子屏幕用色差異過大,故而logo色并不能直接用于UI設計,我們需要在logo品牌色的基礎上做出調整。

 

設定主色調時,可基于品牌logo的色相或往鄰近色方向微調,然后在拾色器右上方(介于飽和度和明度最大值附近)選取具體的顏色。這種配色方式能讓主色更加鮮明,在電子設備中顯示也會更加舒適、和諧。不僅如此,在選取輔助色時也可以使用這種方式。

 

9af363ea15145ad20bfee65eb764bb28.jpg

 

目前市面上那些成熟產品的配色,都會有這種規律,主色都基于拾色器右上角的位置。

 

3b71af18f9df946b67d554008e9026dd.jpg

 

 

 

06. 表單標簽的對齊方式

 

常見的表單標簽對齊方式有三種,左對齊、右對齊和頂對齊。不同的對齊方式都有各自的優點和缺點,我們需要根據項目實際情況來選擇最合適的對齊方式。

 

左對齊:左對齊是最為常見的對齊方式,可充分利用頁面的垂直空間,易于擴展。在選用左對齊時,標簽字數需在可控范圍類,一般不超過4字,否則會降低可輸入空間,影響輸入內容的長度;

 

c90ce9c315d7458cc764d074e1e91c7e.jpg

 

右對齊:多用于網頁表單中,在標簽稍長、且字數長度不一的情況下使用。當標簽參差不齊時,與左對齊相比,右對齊能拉近標簽與輸入框的距離,增強內容的關聯性;

 

851b0c1831ef929fed5353270ea9d5eb.jpg

 

頂端對齊:會占用較多的縱向空間,通常用于標簽長短不可控的場景下,例如常見的英文表單。在中文場景中使用不多,如用戶問卷調查、信息搜集等。

 

76ecf71d33b06e37314546a5a9835b75.jpg

 

 

 

07. 大膽使用空間留白

 

為了提高界面利用空間,追求信息的飽和度無可厚非,但過度追求并非是一件好事,當信息過于密集、信息層級較難區分時,會耗費用戶更多的時間成本。

 

不要吝嗇界面留白,基于親密性原則,在合理的將信息進行分組之后,請大膽使用留白,應避免元素與元素、與信息組之間過于密集,保持界面的呼吸感,給用戶更為舒適通透的體驗。

 

973140880d16232629cfe22d9d16370a.jpg

 

 

 

08. 中性色的設定(黑白灰)

 

中性色在UI設計中相當重要,雖然僅次于品牌色,但在我們的設計流程中,定義中性色往往會早于定義品牌色,因為在界面配色之前,我們會通過中性色來表現界面信息的層級。

 

中性色即色彩中的黑白灰,設定中性色是由調整HSB(色相/飽和度/亮度)中的B值高低里形成一個表現視覺強弱的等級階梯,一般設定4~5個等級即可,例如B值的20%(#333333)、40%(#666666)、60%(#999999)、80%(#CCCCCC)、90%(#E6E6E6)。

 

ce704177f70d217c002cfe3d25d4a9d0.jpg

 

這里需要注意兩個問題,一是要避免使用純黑色,因為純黑色在電子屏幕中是不發光的,會與其他發光的顏色產生巨大的反差,不易與視覺瀏覽;而是設定的黑白灰等級數量不宜過多,否則鄰近的色值很難拉開視覺層級。

 

 

 

09. 投影的光源保持統一

 

這可以被視為提升用戶體驗的一個高級技巧。在給組件添加投影時,如果光源方向或強度不一致,即使這種差異很細微,也可能因為不協調而破壞整體視覺效果,使界面看起來不夠專業或者缺乏連貫性。

 

為了增強視覺上的和諧與統一,所有UI組件都應遵循相同的光源方向,使各個元素之間更加協調,幫助用戶更快地理解和適應界面布局。此外,通過確保光照效果的一致性,還可以有效地突出重點信息。

 

7f3e11a7cf2fe70d973e7db19fe89200.jpg

 

 

10. 避免用占位符替代標簽

 

輸入框中的占位符可以為用戶提供初步的指引,幫助他們在開始輸入前有一個短期的記憶提示。理想情況下,占位符應作為標簽的補充。然而,如果只有占位符而沒有標簽,用戶可能會感到困惑,尤其是在他們點擊輸入框后占位符消失時,可能會一時記不起要輸入的內容。

 

標簽對于明確指示用戶在表單字段中輸入什么信息至關重要。保持標簽的可見性不僅能提升產品的易用性,還能特別照顧到那些認知和記憶力較弱的用戶。這樣可以確保每個輸入字段的用途始終一目了然,減輕用戶的認知負擔,使表單更加友好、清晰且易于使用。

 

9ea922da8645b4036364c3a0cf84538a.jpg

轉載:黑馬青年

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

 

image.png

淺色界面設計賞析:多場景下的輕盈與高效

藍藍設計的小編 B端ui設計文章及欣賞

 

北京蘭亭妙微 UI 設計公司始終保持學習的態度,不斷拆解國際上的優秀設計案例,汲取前沿設計思路,以下精選 5 組國外設計師的 UI 設計作品,
 
這組界面設計延續了淺色基調的核心優勢,在企業管理、金融工具、教育科技等多場景中,實現了視覺舒適度與功能效率的平衡。
 
為設計創作提供可落地的參考:
 

1. 設備管理后臺(圖 1)

 
以米黃色為基底,搭配低飽和的灰色與黃色,營造出柔和專業的氛圍。
 
  • 核心功能:全球設備分布地圖以深淺灰度區分區域,黃色標記設備數量,懸浮卡片可快速查看設備詳情;右側安全狀態儀表盤與歷史會話列表,讓管理員對設備風險和使用記錄一目了然。
  • 設計亮點:圓角卡片與細膩的陰影層次,讓信息模塊清晰易讀,避免了傳統后臺的壓抑感。

2. 訂閱套餐頁(圖 2)

 
采用極簡淺藍 + 白色的配色方案,突出套餐價格與核心賣點。
 
  • 核心功能:三個套餐卡片以不同透明度和色彩區分主次,中間 “最受歡迎” 的季度套餐用高飽和藍色強化視覺焦點,頂部的切換按鈕可快速切換個人 / 企業方案。
  • 設計亮點:輕量化的線條與柔和的漸變,讓商業轉化頁面既專業又不生硬。
 

3. 工作流自動化編輯器(圖 3)

 
以淺綠 + 白色為背景,搭配低飽和的功能模塊色彩,讓復雜的流程搭建變得直觀。
 
  • 核心功能:拖拽式的節點設計,用不同顏色的線條和箭頭區分數據流向,右側工具列表可快速添加觸發條件與動作,適合非技術人員快速搭建自動化場景。
  • 設計亮點:點陣背景與懸浮交互,讓界面既有設計感又不干擾功能操作。
 

4. 金融儀表盤(圖 4)

 
以白色為基底,用珊瑚紅作為輔助色突出關鍵數據,讓財務信息一目了然。
 
  • 核心功能:集成了賬戶管理、收支統計、股票走勢等模塊,環形圖、波動圖等可視化組件讓數據直觀易懂,AI 助手入口進一步提升了操作效率。
  • 設計亮點:圓角卡片與呼吸感留白,讓高密度的金融信息不再壓抑。
 

5. 房產風控后臺(圖 5)

 
以淺綠 + 米白為底色,營造出清新專業的視覺感受。
 
  • 核心功能:左側房產列表展示關鍵信息(房齡、溫度、地址),右側地圖用彩色熱力圈標注風險區域,幫助風控人員快速定位高風險物業。
  • 設計亮點:半透明的熱力層與簡潔的卡片布局,讓空間信息與房產數據聯動更清晰。
 

6. 教育學習平臺(圖 6)

 
以淺粉 + 淺藍的低飽和配色,契合教育產品的友好感。
 
  • 核心功能:頂部問候語與學習進度圖表,搭配課程推薦與好友成績對比,激發用戶學習動力;多維度的數據可視化讓學習效果清晰可見。
  • 設計亮點:柔和的色彩過渡與細膩的動效,讓學習過程更具愉悅感。

 

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

 

image.png

B 端表單頁設計:從核心邏輯到落地實踐

濤濤 B端ui設計文章及欣賞

在 B 端產品中,表單頁是連接用戶與系統的關鍵橋梁,它承載著信息錄入、數據提交、功能配置等核心任務,其設計合理性直接影響用戶操作效率與系統數據質量。優質的 B 端表單頁不僅能降低用戶填寫成本,更能助力系統實現精準的數據管理,為產品核心價值賦能。本文將從設計邏輯、核心原則、布局策略到復雜場景解決方案,全面拆解 B 端表單頁的設計要點。

B端產品的全局導航怎么設計?

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

假如你是第一次到大型公司入職,進入陌生且龐大的建筑群中迷失了方向:哪里是1號樓?哪里是A座?哪里刷門禁?餐廳在哪里?這時,你就需要一個準確的導視系統,幫你在空間中定位,并且找到前進的方向。

同理,當我們使用某個軟件系統時,也會面臨同樣的問題。當用戶帶著問題和目的進入了系統,會自動去尋找目標功能入口,提供這些信息和入口的便是導航。

導航菜單在B端任意一個產品中都是不可缺少的,且每一個導航菜單的位置基本都是固定的。解決了用戶“我在哪兒”“到哪兒去”的問題,并且引導用戶進行頁面間的跳轉操作,快速找到目標。

根據導航的觸達范圍,在B端場景中常用的導航可以分類六個類型:

1、全局導航

2、局部導航

3、頁內導航

4、下鉆類導航

5、返回類導航

6、聯想類導航

其中全局導航可以覆蓋整個網站的通路,往往表現為網站的一級分類,它不一定包含全局信息,但是可以讓用去渠到目標關鍵節點上。全局導航對用戶體驗的影響共有兩點:

1、呈現內容和功能的架構。全局導航相當于整個網站的骨架,支撐著內容和功能組成的身體,構建內容和功能的整體認知,扁平化用戶的任務路徑,幫助用戶了解當前位置和目標路徑。

2、突出核心功能。將核心功能放在用戶最能接觸到的位置,適度隱藏次要功能。

并且全局導航和首頁內容共同塑造了用戶對于網站的第一印象,同時強化品牌形象。

一、全局導航的基礎樣式

導航菜單是由多個菜單項集合組成的。菜單項由容器+選項內容(圖標+文字或文字)組成,交互行為是點擊菜單熱區后跳轉到相應目標頁面。

image.png

用戶的瀏覽動線一般是左上到右下,所以全局導航一般被設置在頁面左側或頁面頂部。按照導航選項的權重或者優先級一般分為三種樣式:

image.png

1、橫向導航

橫向導航置于頁面頂部,橫向水平延展,從左到右選項優先級遞減。橫向導航視覺干擾小,可以將較大的屏幕空間給到內容展示。但拓展性較低,更適合官網等結構簡單的產品。

2、縱向(垂直)導航

縱向導航置于頁面左側,垂直延展,選項優先級由上而下遞減。用戶可以在不同選項中快速切換,操作效率較高;縱向空間可以容納更多菜單選項,并且可以延展二級分類。拓展性比較高,適合專注操作的后臺類產品。

但縱向導航占用面積較大,視覺比較突出,瀏覽過程中打斷感比較強。有些網站為了減小視覺面積,也經常使用折疊模式的縱向導航。

image.png

3、縱橫式導航

同時使用橫向和縱向導航,通常橫向導航是一級導航,用于展示全局類目和功能;縱向導航為二級導航,提供具體的功能和內容。

這種導航可以容納更多的信息層級,信息密度較高。但菜單面積較大,視覺復雜度較高。適合操作比較復雜的后臺類產品,比如云產品。

二、全局導航的拓展能力

全局導航為了容納更多的信息量,就擁有強大的拓展能力,主要來承接導航菜單的深度和廣度。

1、深度指導航的層級數目,層級越多,深度越大。

根據用戶需求和使用場景梳理產品架構,當層級過多時,需要對功能進行分組。比如哪些功能需求是互相關聯,可以組合在一起的,這時就需要考慮用一個集合頁面來承接這些功能。

image.png

當層級大于2個時,可以利用面包屑導航,用戶可以根據面包屑導航看到當前操作的位置和軌跡,并且方便返回到任意位置。

image.png

2、廣度指導航每一層級包含的菜單數目,數目越多,廣度越大。

合理規劃導航廣度,就可以用到“簡約四策略”,分別是刪除、組織、隱藏、轉移。

1)刪除:刪除不必要的功能。精簡功能,刪除多余文字,精簡按鈕等,讓用戶集中注意力,避免在冗余的功能中喪失目標感。

2)組織:組織必須提供的功能。在視覺層面上,做到信息分層清晰;在產品層面上,做到根據內容做功能分組,讓用戶更方便查閱和尋找。分塊越少,選擇越少,用戶負擔就越小。

3)隱藏:隱藏非核心功能。不常用但不能少的功能,可以選擇隱藏,利用漸進式的展示方式,只要不讓用戶找太久,就是有效的隱藏。

4)轉移:轉移非擅長的功能。利用設備轉移、軟件轉移、向用戶轉移,比如將一些因為屏幕大小影響展示的功能在手機端進行隱藏,只在電腦端做展示。

三、設計要點

1、全局導航需要有足夠的視覺權重,如果菜單選項不是特別復雜,盡量不使用全局折疊的形式。一般默認展開,不需要時可以折疊。

image.png

2、保持結構簡潔,導航層級如果太深,比如三級導航,影響導航的可見性。

image.png

3、控制一級導航菜單數量,以免視覺溢出過多。保證文本易于辨識,使用已于理解的圖標,減少重復文字,精簡菜單名稱。

image.png

導航如我們前進路上的指示標,指引用戶方向并承載產品內容,也是B端產品系統中不可缺少的一環。產品擁有清晰、一致的導航,也要兼顧導航菜單選項的可見性和用戶操作效率,讓用戶有目標感、良好的體驗感,做一個與用戶心智模型匹配的導航系統。

轉載:京東體驗設計中心

5個國際優秀 UI 設計案例欣賞:簡約實用的跨行業設計靈感

藍藍設計的小編 B端ui設計文章及欣賞

北京蘭亭妙微 UI 設計公司始終保持學習的態度,不斷拆解國際上的優秀設計案例,汲取前沿設計思路,以下精選 5 組國外設計師的 UI 設計作品,覆蓋教育、金融、健康、企業協作等領域,聚焦 “簡約美學 + 功能適配” 的核心邏輯,為設計創作提供可落地的參考:

案例 1:英語口語學習平臺 —— 柔和高效的互動課堂

設計亮點
 
  • 視覺風格:淡粉與淺紫的低飽和配色,搭配圓角卡片與清晰留白,整體風格柔和不刺眼,契合語言學習的輕松場景;
  • 功能布局:以直播授課區為核心,左側學員連麥列表、底部工具條(轉錄、字幕、錄音)、右側聊天框分區明確,操作路徑簡潔;
  • 細節設計:外教形象清晰直觀,課程入口標注時間與老師信息,聊天框用簡單表情符號豐富互動氛圍,無冗余裝飾元素。

英語口語學習平臺ui設計

案例 2:加密貨幣交易平臺 —— 專業清晰的金融界面

 
設計亮點
 
  • 視覺風格:暗黑底色搭配深綠線條,突出數據可讀性,圖表采用簡潔線條設計,無過度動效,契合金融產品的專業屬性;
  • 功能布局:核心區域展示資產趨勢圖,右側頭寸計算器支持參數輸入與風險測算,下方整合行情日歷與幣種數據,覆蓋交易全流程;
  • 細節設計:用紅 / 綠明確區分漲跌狀態,關鍵收益數據放大展示,操作按鈕樣式統一,交互反饋清晰,降低專業操作門檻。

加密貨幣交易平臺ui設計

案例 3:健康管理平臺 —— 清爽直觀的數據展示

 
設計亮點
 
  • 視覺風格:淡綠為主色調,搭配淺灰底色,傳遞健康自然的氛圍,數據以環形圖、進度條等輕量化形式呈現,避免復雜設計;
  • 功能布局:核心區聚合熱量、心率、健康指數等高頻數據卡片,下方分運動占比、睡眠分析模塊,支持時間篩選,左側導航功能分類清晰;
  • 細節設計:健康數據標注明確,趨勢圖線條簡潔,Pro 版升級入口以小圖標點綴,不干擾核心功能使用。

 

案例 4:企業團隊協作平臺 —— 高效簡約的 B 端界面

設計亮點
 
  • 視覺風格:低飽和淡綠 + 灰白配色,界面干凈整潔,圖表采用簡約指針式設計,無多余裝飾,適配企業辦公場景;
  • 功能布局:頂部標簽區分組織、團隊、訂閱等模塊,核心區展示運營數據卡片與統計圖表,右側整合輔助功能入口;
  • 細節設計:數據指標標注清晰,操作按鈕位置合理,輔助功能以圖標簡化呈現,降低企業用戶的學習成本。
語言學習儀表盤ui設計

案例 5:語言學習儀表盤 —— 清晰易懂的學習追蹤

 
設計亮點
 

組件庫設計核心:Tag 標簽變體組件的規范化實踐

濤濤 B端ui設計文章及欣賞

在數字化產品的界面設計中,Tag 標簽作為高頻使用的基礎組件,承擔著分類標記、狀態提示、篩選導航等關鍵功能。從 NFT 平臺的資產狀態標注,到日常應用的內容分類,Tag 標簽的設計直接影響用戶的識別效率與操作體驗。作為組件庫中的重要組成部分,變體組件的規范化設計能大幅提升團隊協作效率,保證產品界面的一致性。本文將結合實際設計經驗,從設計原則、組件構成、參數規范到應用場景,全面拆解 Tag 標簽變體組件的設計邏輯。

B端干貨|全鏈路設計的分析能力

鶴鶴 B端ui設計文章及欣賞

全鏈路用戶體驗設計師需要具備的六大能力模型。掌握這六種能力模型,既可以輔助我們進行更好的設計支撐,也可以在業務的工作匯報和部門的述職工作中站穩腳跟?。。?/span>
市場分析 | 用戶洞察 | 產品規劃 | 項目管理 |  數據分析 | 用戶運營
下面我會分幾篇文章去講解這六大能力模型~
 
市場分析
B端干貨|全鏈路設計的分析能力
 
 
1. SWOT 分析模型
B端干貨|全鏈路設計的分析能力
 
 
什么是SWOT?
SWOT是一種經典的企業戰略規劃工具,著名咨詢公司麥肯錫經常使用它為企業戰略咨詢服務,它通過分析對象內外部因素從而得出戰略結論的分析方法。核心理念在于通過對影響因素進行分類梳理,再通過聚合考慮來得出結論。
B端干貨|全鏈路設計的分析能力
 
 
如何進行SWOT分析?
大道至簡,SWOT分析模型的應用也很簡單,分別對各維度因素進行識別和梳理,然后構建出分析矩陣,最后根據矩陣中信息進行綜合分析,就能得出結論和戰略方向了。
B端干貨|全鏈路設計的分析能力
 
 
 
a. 梳理分析維度
內部因素分析
也就是S(強項)和W(弱項),可以從Q(品質)、C(成本)、D(技術和交付能力)、M(人才設備等)、S(服務)等維度進行梳理。當然也可以根據分析對象的特性進行調整。
外部因素分析
也就是O(機會)和T(威脅),可以借助PEST模型或者波特五力模型上著手(這兩個模型后續再詳細展開)
 
b. 構建分析矩陣
這個步驟就挺簡單,就是把第一步分析的因素,按照這幾個類別放到一起
B端干貨|全鏈路設計的分析能力
 
 
 
c. 制定戰略計劃
B端干貨|全鏈路設計的分析能力
 
 
d. 案例練習
假設你在夜市有一個烤腸攤為基礎,來一次思想實驗,練習一下SWOT分析。
B端干貨|全鏈路設計的分析能力
 
 
戰略方向調整
SO(利用優勢抓住機遇):
  •  
    推出新產品
S的地理位置好+已有口碑,結合機遇中的健康飲食,那么可以開發新品/建立宣傳點,推出健康烤腸新品,滿足市場需求。
  •  
    社交媒體推廣
利用已有優勢+社交媒體,在工作中進行直播,進一步提升口碑和影響力。
PS:315對淀粉腸進行曝光后,如果這個店一直以健康和口碑立足,是不是恰好又迎來機遇呢?
 
ST(利用優勢應對威脅):
  •  
    增強食品安全
現在口碑和味道都很好,但是一旦出現食品安全問題,影響會很大,那么應該確保產品質量,維護小店聲譽。
  •  
    強化獨特口味
地攤競爭對手眾多,利用優勢脫穎而出,可以對口味等強化宣傳
 
WO(克服劣勢抓住機遇):
  •  
    季節性產品
劣勢方面,現在產品收到季節性影響,外部機遇有媒體和重視飲食健康,一方面針對淡季,可以研發季節性健康產品,另一方面可以摘淡季加強自媒體宣傳。
 
WT(克服劣勢避免威脅):
  •  
    競爭對手多,且攤位規模和資金規模有限制:
因此對于擴張規模、占地比較大的新品引入、高投入的變革都不適用于現階段的策略,這些方向上應該按兵不動,靜待時機。
 
2. PEST 分析模型
含義:PEST 是一種用于分析宏觀環境的工具,它包括政治(Political)、經濟(Economic)、社會(Social)和技術(Technological)四個方面。通過這四個維度來評估這些因素對企業或市場的潛在影響。
B端干貨|全鏈路設計的分析能力
 
 
B端干貨|全鏈路設計的分析能力
 
 
B端干貨|全鏈路設計的分析能力
 
 
應用場景和案例
  •  
    政治因素:政府法規政策對用戶體驗設計有重要影響。比如數據隱私法規要求產品設計清晰呈現數據收集方式并提供隱私設置選項;無障礙法規促使設計考慮殘障人士需求。同時,數字化政務服務和公共服務創新項目為用戶體驗設計提供應用場景。
  •  
    經濟因素:消費能力影響用戶需求,經濟繁榮時高端市場注重奢華個性化體驗,經濟不穩定時大眾市場追求性價比。市場競爭中,企業通過創新用戶體驗設計實現差異化,同時需考慮成本效益。
  •  
    社會因素:不同文化背景和社會價值觀變化影響用戶對產品的期望和偏好。例如,集體主義文化地區更重社交功能,環保意識增強促使產品融入環保元素。此外,社交互動需求和移動生活方式也要求用戶體驗設計適應這些趨勢。
  •  
    技術因素:新興技術如人工智能、機器學習、虛擬現實和增強現實在用戶體驗設計中有廣泛應用。但要平衡技術復雜性與易用性,同時通過良好的用戶教育幫助用戶適應技術更新。
 
3. 波特五力模型
B端干貨|全鏈路設計的分析能力
 
 
含義:邁克爾?波特(Michael Porter)提出的五力模型用于分析行業競爭態勢。這五種力量包括現有競爭者的威脅、潛在進入者的威脅、替代品的威脅、供應商的議價能力和購買者的議價能力。
 
應用場景和案例:
  •  
    現有競爭者的威脅:在智能手機行業,蘋果、華為、三星等品牌之間競爭激烈。它們通過不斷推出新產品、進行價格戰、提升品牌形象等方式爭奪市場份額。企業需要分析競爭對手的產品特點、價格策略、市場份額等因素,來制定自己的競爭策略。例如,某國產手機品牌為了在競爭中脫穎而出,不斷加大研發投入,在拍照功能上取得優勢,吸引了眾多攝影愛好者,從而提高了市場競爭力。
B端干貨|全鏈路設計的分析能力
 
 
  •  
    潛在進入者的威脅:
以網約車市場為例,滴滴在市場占據主導地位,但如果有新的資金雄厚的企業進入這個市場,如一些大型汽車制造商或者科技巨頭,就可能改變市場格局。現有企業需要通過構建品牌壁壘、技術壁壘、規模經濟等方式來抵御潛在進入者。滴滴通過建立龐大的司機網絡和用戶基礎,以及先進的調度系統,增加了新進入者的進入難度。
B端干貨|全鏈路設計的分析能力
 
 
  •  
    替代品的威脅:
傳統紙質書籍面臨著電子書的替代威脅。電子書具有便攜性、存儲量大等優點。傳統出版社需要關注電子書市場的發展,通過發展自己的數字出版業務,或者與電子書平臺合作等方式來應對這種威脅。同時,也要發揮紙質書的獨特優勢,如收藏價值、閱讀質感等。
B端干貨|全鏈路設計的分析能力
 
 
  •  
    供應商的議價能力
在汽車制造業,汽車制造商對零部件供應商的議價能力會影響成本。如果某汽車品牌是一家大型企業,采購量巨大,它對零部件供應商的議價能力就強,可以壓低采購價格,降低生產成本。相反,如果是一家小眾汽車品牌,零部件供應商的議價能力相對較強,可能會導致汽車生產成本上升。
B端干貨|全鏈路設計的分析能力
 
 
  •  
    購買者的議價能力:
在一些大宗商品市場,如鋼鐵市場,大型建筑企業作為購買者,由于采購量大,對鋼鐵供應商的議價能力就強。它們可以通過招標等方式,讓多家供應商競爭,從而獲得更優惠的價格。而對于一些小客戶,其議價能力較弱,往往只能接受供應商提供的價格。
B端干貨|全鏈路設計的分析能力
 
 
 
總結
SWOT、波特五力分析模型與 PEST 模型相互關聯。
PEST 模型聚焦政治、經濟、社會、技術等宏觀環境,其分析結果能為 SWOT 中的機會和威脅要素提供來源,幫助企業從宏觀層面把握外部情況。
波特五力分析模型著重剖析行業內的競爭力量,可細化 SWOT 里的威脅內容,助力明確行業競爭處境。
三者結合,企業能先借 PEST 知曉宏觀環境,再用波特五力把握行業態勢,最后靠 SWOT 綜合分析制定契合自身發展的精準戰略。


作者:Charlotte的嘻醬
鏈接:https://www.zcool.com.cn/article/ZMTY0OTE5Mg==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

日歷

鏈接

個人資料

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

存檔

主站蜘蛛池模板: 日本一区二区三区在线观看视频 | 伊人情人综合 | 人人草网 | 国产精品日韩一区二区 | 91久久久久久久久 | 在线观看网站黄 | 日韩三级av| 美国黄色片视频 | 久久天堂视频 | 久久久国产一区二区 | 日韩欧美视频在线免费观看 | 日本欧美亚洲 | 亚洲久久网 | 亚洲伦乱 | 超碰2021 | 野性的青春 | 成人av在线网 | 久久免费在线观看视频 | 久久伊人操 | 免费播放毛片精品视频 | 久青草视频在线观看 | 丁香激情综合 | 欧美五月婷婷 | 国产精品久久久久久久久毛片 | 中文有码在线播放 | 国产精品美女在线 | 免费成人高清 | 黄色一二三区 | 成年人网站免费在线观看 | 久久视频在线播放 | 亚洲国产中文字幕在线 | 久久人 | 国产乱人乱偷精品视频 | 激情婷婷色 | 激情综合网站 | 超碰啪啪| 久久蜜臀av| 天干夜夜爽爽日日日日 | 99天堂网| 天天色一色 | 欧美午夜精品久久久久久人妖 |