• <abbr id="chdyf"></abbr>
    <ruby id="chdyf"><acronym id="chdyf"><meter id="chdyf"></meter></acronym></ruby>
    <bdo id="chdyf"></bdo>
    <dfn id="chdyf"><menu id="chdyf"></menu></dfn>
    1. <menuitem id="chdyf"></menuitem><strong id="chdyf"><menu id="chdyf"></menu></strong>

      <rt id="chdyf"><menu id="chdyf"></menu></rt>
      成人小说一区二区三区,伊人精品成人久久综合全集观看,久久HEZYO色综合,中文字幕精品人妻熟女,影音先锋成人网站,我要看免费一级毛片,中国女人做爰A片,中文字幕av久久爽Av

      首頁

      【UX 設計】為海外留學生打造的專屬二手交易平臺 APP 設計方案

      濤濤 用戶研究

      隨著海外留學熱潮持續升溫,留學生在異國他鄉的生活剛需問題日益凸顯。初到陌生國度的留學生,往往面臨生活成本高、社交圈有限、居住周期不穩定等現實困境,二手商品交易成為他們平衡開支、適配短期生活的核心選擇。然而,現有通用二手交易平臺缺乏對留學生群體的針對性優化,導致交易過程中頻繁出現安全隱患、信息錯位、服務脫節等問題。本次研究聚焦海外留學生二手交易的真實需求與痛點,旨在設計一款貼合其生活場景、保障交易安全、提升溝通效率的專屬 APP,為留學生的海外生活提供切實支

      未來界面的詩意:科幻風格 UI 設計的美學與敘事

      藍藍設計的小編 設計資源

      在科幻作品的宏大敘事中,用戶界面(UI)不僅是信息的載體,更是世界觀的具象化表達。它是未來科技的視覺語言,是連接人類與未知領域的橋梁,其設計美學深刻影響著我們對未來的想象。蘭亭妙微的設計師最近在做一個vr眼鏡的項目,所以要找一些相關的資料和文章,并寫出來和大家分享。

      從「感覺不錯」到「切實有效」:UI/UX 決策的七個核心思維

      濤濤 用戶研究

      打開設計軟件,面對兩個看似都可行的方案,你是否也曾陷入糾結:“這個更美觀”“那個更簡潔”“大家會不會更喜歡另一個?” 評論區里的站隊爭論、自我認知里的審美偏好,很容易讓設計決策陷入 “憑感覺” 的困境。但真正成熟的 UI/UX 設計,從來不是 “選 A 還是選 B” 的二元題,而是圍繞用戶價值、產品目標和實際場景的系統性判斷。以下七個思維習慣,能幫你跳出主觀偏好,做出更理性、更有效的設計決策。

      優化產品轉化!10 個實用 UI/UX 設計技巧,輕松提升用戶體驗

      濤濤 用戶研究

      在產品設計中,UI/UX 的細節調整往往能帶來意想不到的轉化效果。那些看似微小的優化,卻能大幅降低用戶操作門檻、提升使用愉悅感。以下整理了 10 個經過實踐驗證的 UI/UX 設計技巧,幫你在不增加過多開發成本的前提下,打造更受用戶青睞的產品界面。

      UI 設計組件的價值與實踐+常用 UI 設計組件核心規范清單

      藍藍設計的小編 前端及開發文章及欣賞

       
      在數字產品的界面世界里,設計組件就像是建筑中的標準化磚石,既支撐起界面的穩固性,又決定了體驗的流暢度。從一張信息卡片到一條進度條,從一個分頁控件到一整塊瓷片區,這些看似微小的元素,正是構成優秀 UI 的基石。蘭亭妙微的設計和開發工程師們,也在這在數字產品的界面世界里學習,整日搬磚,哈哈。

       

      一、設計組件:不止是 “零件”,更是體驗的骨架

       
      設計組件并非孤立的視覺元素,而是具備可復用性、一致性、可擴展性的功能單元。它們不僅能讓設計師從重復勞動中解放出來,更能讓用戶在不同產品、不同頁面間建立穩定的認知邏輯。
       
      • 效率層面:一套成熟的組件庫可以將界面搭建效率提升 50% 以上,避免重復造輪子。比如進度條、分頁器這類高頻組件,標準化后無需每次重新設計。
      • 體驗層面:當用戶在不同 APP 中看到相似的進度條時,能立刻理解 “進度→完成” 的對應關系,這種認知慣性大幅降低了學習成本。
      • 系統層面:組件化讓產品迭代更靈活,比如瓷片區的布局邏輯可以快速適配從手機到手表的不同屏幕尺寸,保證體驗的連貫性。

       

      二、常見組件的設計邏輯與場景適配

       
      不同組件的形態背后,是對用戶行為的深度洞察。我們可以從收集的案例中拆解出典型組件的設計思路:

      1. 信息瓷片區:碎片化信息的 “收納盒”

       
      瓷片區(Cards)是承載碎片化信息的核心容器,它通過視覺邊界將不同功能模塊清晰區隔,同時保持整體視覺的呼吸感。
       
      • 場景適配:在學習類 APP 中,瓷片區可以將 “自由練習”“睡眠助手” 等功能模塊獨立呈現;在醫療類界面中,“極速問診”“找醫生” 等入口也通過瓷片實現快速分流。
      • 設計要點:圓角、陰影和微妙的背景色變化,是區分瓷片層級的關鍵。同時,瓷片內的信息密度需要與用戶需求匹配 —— 工具類瓷片突出功能按鈕,資訊類瓷片則優先展示標題與摘要。

       

      2. 進度條:看不見的 “情緒安撫器”

       
      進度條的核心價值,是將抽象的 “等待” 轉化為可視化的 “進度”,從而緩解用戶的焦慮感。
       
      • 場景適配:在支付流程中,步驟式進度條讓用戶清晰感知 “填寫信息→確認訂單→完成支付” 的路徑;在健身 APP 里,環形進度條則通過直觀的百分比反饋,強化用戶的成就感。
      • 設計要點:除了基礎的線性進度條,擬人化的動態進度條(如帶表情的加載動畫)能進一步提升趣味性;而分段式進度條則適合多節點的流程場景,比如 “高考日程” 時間軸。

      3. 分頁器:長內容的 “導航羅盤”

       
      當內容量超出一屏承載能力時,分頁器就成了用戶探索長內容的導航工具。
       
      • 場景適配:電商平臺的商品列表、內容平臺的文章流,都依賴分頁器實現高效瀏覽。下拉加載是移動端的主流選擇,但在需要精確定位的場景(如后臺管理系統),數字分頁器依然不可替代。
      • 設計要點:分頁器的交互需要兼顧效率與容錯性,比如 “跳轉到指定頁碼” 的輸入框,適合有明確目標的用戶;而 “上一頁 / 下一頁” 的按鈕,則更符合無目的瀏覽的行為習慣。

      4. 導航欄:用戶的 “空間錨點”

      導航欄是用戶在產品中定位的核心依據,無論是頂部標簽欄還是側邊抽屜導航,本質都是為了降低用戶的迷路成本。
       
      • 場景適配:內容類 APP 的 “推薦 / 關注 / 訂閱” 標簽欄,讓用戶在不同內容流間快速切換;工具類產品的功能導航欄,則通過圖標 + 文字的組合,讓復雜功能變得觸手可及。
      • 設計要點:當前選中狀態的視覺強化(如顏色加深、下劃線)是導航欄的核心設計原則;同時,導航項的數量需要控制在用戶記憶閾值內,一般不超過 5 個。
       

      三、組件化設計的進階思維:從 “用組件” 到 “造系統”

       
      成熟的組件設計,不止是單個元素的打磨,更是一套可生長的系統工程。
       
      • 原子化設計:將組件拆解為 “原子(按鈕、輸入框)→分子(搜索框、卡片)→有機體(表單、列表)” 的層級,讓組件具備更強的組合性和適應性。
      • 適配性設計:同一組件需要在不同設備上保持體驗一致。比如智能手表上的瓷片需要更大的觸控區域,而平板端的進度條則可以承載更多信息維度。
      • 情感化設計:在功能性基礎上注入情感細節,比如完成任務時進度條的慶祝動畫、瓷片 hover 時的微交互反饋,都能讓冰冷的界面變得有溫度。

       

       

       

      設計組件從來不是冰冷的像素集合,而是連接產品與用戶的情感觸點。一個加載時的動態進度條,可能讓用戶愿意多等 3 秒;一張信息清晰的瓷片,或許能讓老年人也輕松上手。在追求效率與一致性的同時,別忘了給組件注入人文關懷 —— 這正是優秀 UI 與平庸界面的本質區別。

      常用 UI 設計組件核心規范清單

       
      本清單圍繞高頻通用組件制定,兼顧視覺統一、交互適配、多端兼容原則,適配移動端 / PC 端通用設計場景,可直接落地項目并根據品牌風格微調。

      一、基礎容器類:信息瓷片區(Card)

      視覺規范

      • 圓角:移動端 8~12px,PC 端 12~16px(極簡風格可降至 4px,無圓角慎用于高頻觸控場景)
      • 陰影:輕量瓷片(信息展示)用低 - opacity 柔陰影(rgba (0,0,0,0.06),偏移 0 2px,模糊 8px);重量級瓷片(功能核心區)用雙層輕陰影增強層級,避免厚重投影
      • 邊距:瓷片內部上下左右內邊距,移動端 16px,PC 端 20px;瓷片之間間距,移動端 12~16px,PC 端 20~24px
      • 背景:默認純白 / 品牌淺灰,hover 態(PC 端)可加淺底色(rgba (品牌主色,0.03)),禁用高飽和底色作默認態

      交互規范

      • 觸控區域:移動端單個瓷片最小觸控面積≥44×44px,避免文字 / 圖標單獨觸控
      • 反饋:點擊態瓷片輕微下沉(transform: scale (0.98))+ 陰影變淺,PC 端 hover 態光標變為 pointer,無點擊功能的瓷片禁用任何交互反饋

      內容規范

      • 信息密度:單瓷片最多承載 “標題 + 副標題 + 1 個核心按鈕 / 圖標 + 簡要說明”,避免多模塊信息堆砌
      • 視覺層級:標題(粗體 / 高字號)> 核心信息(常規字重)> 輔助信息(淺灰 / 小字號),禁用 3 種及以上字體字重

      二、進度反饋類:進度條(Progress Bar)

      線性進度條

      • 尺寸:高度移動端 4~6px,PC 端 6~8px;寬度適配父容器,最小寬度≥80px
      • 樣式:默認底色為品牌淺灰,進度底色為品牌主色,無外邊框;百分百完成態可加 1px 品牌主色描邊
      • 交互:加載中可加緩慢流動的動效(速度 0.8~1s / 次),完成態觸發輕微閃爍(3 次 / 0.3s)或漸變為成功色(綠色系)

      環形進度條

      • 尺寸:直徑移動端 40~60px,PC 端 60~100px,環寬為直徑的 1/8~1/6
      • 樣式:環體默認淺灰,進度環為品牌主色,中心可放置百分比數字(字號為直徑的 1/3~1/4)
      • 場景適配:單目標進度(如完成率、打卡率)用環形,多節點流程(如支付、報名)用分段式線性進度條

      分段式進度條(流程類) 

      • 節點:圓形節點直徑 8~12px,已完成節點填充品牌主色 + 描邊,未完成淺灰描邊,當前節點放大 1.2 倍 + 品牌主色描邊 + 內白圈
      • 間距:節點之間的連線長度,移動端≥20px,PC 端≥30px,連線高度與線性進度條一致
      • 文字:節點下方標注流程名稱,字號比正文小 2 號,已完成文字為品牌主色,未完成淺灰,當前節點文字加粗

      三、內容導航類:分頁器(Pagination)

      移動端分頁器(下拉加載 / 上拉刷新) 

      • 加載提示:居中放置 “加載中…” 文字 + 輕量加載動畫,文字為淺灰,字號比正文小 1 號
      • 無更多內容:提示文字為淺灰(rgba (0,0,0,0.4)),可搭配簡約圖標(如空盒子),禁用高飽和顏色
      • 觸發區域:下拉刷新觸發距離≥50px,上拉加載觸發距離≥30px,避免誤觸

      PC 端數字分頁器

      • 布局:居中對齊,按鈕與數字橫向排列,整體間距 12px
      • 按鈕樣式:上一頁 / 下一頁為圓角矩形(圓角 4px),寬度≥60px,禁用純圖標按鈕(需搭配 “上一頁 / 下一頁” 文字)
      • 數字樣式:當前頁碼為品牌主色底色 + 白色文字,非當前頁碼為透明底色 + 淺灰文字,hover 態變為品牌淺灰底色
      • 功能按鈕:“首頁 / 末頁” 按需添加,“跳轉到” 輸入框寬度≥80px,輸入框右側搭配 “確定” 按鈕(與分頁按鈕樣式統一)

      通用規范 

      • 容錯性:頁碼輸入框僅允許輸入數字,超出總頁數時自動提示,禁用非法字符輸入
      • 場景適配:長列表內容(如商品、文章)用下拉加載,需精確定位的內容(如后臺數據、報表)用數字分頁器 

      四、頁面導航類:導航欄(Navigation Bar)

      頂部標簽導航欄(Tab Bar)

      • 數量:默認 3~5 個,最多不超過 6 個(超出則用滾動式標簽),避免用戶記憶負擔
      • 尺寸:移動端高度 48~56px,PC 端高度 60~72px;單個標簽寬度均分,最小寬度≥80px
      • 樣式:未選中狀態為文字(+ 可選圖標),淺灰顏色;選中狀態為文字 + 圖標(或僅文字加粗),品牌主色,可加底部下劃線(高度 2~3px,與主色一致)
      • 交互:PC 端 hover 態文字變色 + 光標 pointer,移動端點擊態輕微下沉,切換時無卡頓(動畫時長≤0.3s)

      側邊導航欄(PC 端專用)

      • 寬度:固定寬度 200~240px,可搭配折疊功能(折疊后寬度 60~80px,僅顯示圖標)
      • 層級:一級導航為主標題(加粗,字號 16~18px),二級導航為子標題(常規,字號 14~16px),縮進 16px 區分層級
      • 樣式:選中導航項加左側主色豎線(寬度 4px)+ 淺灰底色,hover 態僅淺灰底色,禁用多色高亮
       通用規范
      • 視覺:導航欄背景為純白或淺灰,與頁面內容區有清晰邊界(可加 1px 淺灰分割線),禁用漸變背景(極簡風格除外)
      • 功能:必備返回 / 首頁按鈕(移動端),可選搜索 / 設置按鈕,避免功能按鈕堆砌(最多 2~3 個)
      • 適配:移動端導航欄適配劉海屏 / 挖孔屏,預留安全距離,避免內容被遮擋

      五、通用交互規范(所有組件適用)

      1. 動畫時長:所有組件的點擊、hover、切換動畫時長控制在 0.2~0.3s,快速反饋且無拖沓感
      2. 顏色體系:全組件僅使用品牌主色、輔助色(≤2 種)、中性色(黑、白、不同深度灰),禁用雜色,保證視覺統一
      3. 字體體系:全組件字體統一(如移動端思源黑體、PC 端微軟雅黑 / 思源黑體),字重僅用常規、加粗 2 種,避免多字重混用
      4. 多端兼容:同一組件在移動端 / PC 端的核心功能、視覺風格一致,僅調整尺寸、交互方式(如 PC 端 hover、移動端點擊)
      5. 無障礙設計:組件顏色對比符合 WCAG 標準(文字與背景對比度≥4.5:1),支持鍵盤 Tab 鍵切換,圖標搭配文字說明(避免純圖標組件)

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

       

      image.png

      UI 圖標繪制全攻略:從風格到細節,輕松打造統一質感

      濤濤 圖標設計文章及欣賞

      在 UI 設計中,圖標是傳遞信息、提升界面顏值的核心元素。很多新手設計師明明看過不少教程,卻依然畫不出一套風格統一、兼具實用性與趣味性的圖標 —— 要么風格雜亂無章,要么細節處理粗糙,要么表意模糊。其實,圖標繪制有章可循,掌握 “風格定位、統一規范、造型方法、細節優化” 四大核心,就能快速上手。本文結合實戰經驗,拆解圖標繪制的完整流程,幫你避開常見誤區,畫出專業級圖標。

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

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

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

      設計驗收:行之有效的機制探索

      清陽 隨筆的一些文章

      本文為「蘭亭妙微」轉載并編錄的行業實踐經驗分享。原文圍繞產品設計驗收的意義、流程與評估方法展開,并結合齊治設計團隊在網絡安全產品DSG項目中的實際案例,系統闡述了如何通過標準化、體系化的驗收機制提升產品體驗與業務成效。希望能為關注產品設計質量與團隊協作效率的同行提供參考。

      image.png

      一、設計驗收的價值何在?

      設計驗收是指設計人員按照設計方案對研發人員的落地內容進行逐項檢驗,理想狀態下,最終達成設計方案的完全還原。

      由此可見,設計驗收的直接目標是保證設計還原度。那么設計還原度究竟可以為產品帶來些什么?我們假定設計方案不存在問題:

      • 從需求層面來說,高還原度意味著用戶的功能需求得以滿足
      • 從體驗層面來說,高還原度意味著用戶的操作體驗得以保障

      設計驗收追求每一個設計細節的切實落地,由此帶來的正面效益會傳遞給用戶更好的產品體驗,也進一步提升業務交付的滿意度。

      那么如何在日常工作中高效高質地開展設計驗收、發揮其價值,以下是齊治設計團隊結合網安產品DSG項目的驗收實踐給出的答案:

      二、驗收流程的標準化:四個階段

      規范工作流程有助于提高驗收效率,保障驗收質量。

      在制定設計驗收流程前,首先思考以下幾個基本問題——

      1. 何時開始驗收?
      2. 什么輸出內容?
      3. 輸出給誰?
      4. 是否需要根據需求體量區分驗收方案?

      最后,我們將設計驗收拆分為四個階段,明確以下標準流程用于指導設計驗證的開展:

      1、準備驗收階段

      確定設計驗收的開始時間、驗收環境以及賬號密碼是設計人員開展設計驗收的必備條件。

      理想狀態下,設計驗收的開始時間應該是功能驗收基本完成,流程無阻斷性Bug之后,即發布前的最后2-3輪提測。但是考慮到具體項目執行的變化,本流程建議設計人員主動向研發或測試負責人確認開始前的條件信息。

      2、具體驗收階段

      通過比對設計方案與落地方案,設計人員可以發現落地方案未還原的內容,以及少數設計方案不完善、不合理的地方。然后,為了更好地服務于問題修復階段的設研協作,設計人員需要將這些問題形成驗收表,并以在線文檔的形式共享給研發人員。這樣可以大大減少信息混亂、溝通低效、追溯困難等問題。

      3、問題修復階段

      設計人員發現問題并記錄于驗收表后,驗收就進入了最關鍵的一環。嚴格按照“溝通問題-修復問題-再次驗收直至問題被解決”的循環工作流來消滅問題,有助于切實提升設計落地的還原度。同時,出于驗收質量的要求,建議設定一個循環次數的紅燈值,這是對設計人員與研發人員雙方的更高要求。

      通過DSG項目的執行驗證,我們發現「溝通」在這個階段至關重要,這包括所有問題的整體澄清以及具體問題的修復溝通。尤其當問題總數較大時,設計人員與研發人員之間的充分溝通會讓問題修復進展得更加順暢、大家的協作體驗也會更好。

      以下兩點可以看作提高協作效率、推動問題修復的關鍵任務:

      • 設計人員應當及時澄清待修復問題(開始修復之前)
      • 研發人員應當快速明確問題修復的負責人員及完成時間

      4、復盤階段

      DSG第一個上線版本的設計驗收修復質量不佳,遺留問題過多。為了有效改善這個情況,版本上線后,設計人員組織研發人員、測試人員一起進行了該期設計驗收的復盤會議。會議主要圍繞著「明確遺留問題的處置方案」和「反思修復問題的限制因素」展開。通過復盤,我們主動發現本次驗收過程中的不足之處,并討論未來工作中的優化措施。反映到DSG項目來說,二期驗收修復率較一期提升了26.24%。

      由于在項目實踐中顯而易見的顯著效果,復盤階段也被引入到標準流程當來。我們擴寬了復盤的行動范圍,首先由設計人員進行遺留問題的整理以及修復率等驗收數據的統計,然后據此判斷本次驗收質量。質量較低時組織全體性的復盤會議,明確后續改進方案;質量較高時則以更輕量的方式與項目團隊成員進行信息對齊,如我們目前采用的方式是:具體問題由相關責任人及時溝通;整體驗收情況與遺留處置計劃放到下一期的設計澄清會議上進行全體對齊。

      三、驗收機制的體系化:一張表

      建立起標準化的設計驗收流程后,如何進一步形成體系化的設計驗收機制來指導工作?我認為可以是對工具/手段的探索,如驗收結果的輸出內容就是一個不錯的方向。

      設計人員向研發人員告知驗收結果的方式可以靈活多樣,但無數的經驗告訴我們,當問題數量一多,簡單的口頭溝通或面對面演示等方式在問題管理、修復追蹤等方面的缺陷就顯露無疑了。故在本驗收機制下,我們還提供了一個設計驗收表的內容模版。

      這個驗收表采用「設計-研發共同編輯」的協作模式,畢竟設計驗收不是一個人或一個團隊的事兒,需要設計與研發乃至產品、測試多方的溝通與努力。

      此外,我們目前還未針對該驗收表內部分需要細化的項給出范圍定義與填寫說明,如「問題類型」的囊括范圍、「嚴重程度」的判斷方式,這都有待后續完善。

      找到一個可用的工具是第一步,怎么把工具用好則是接下來真正的挑戰。

      四、驗收效果的量化:一個數據

      那么如何度量設計驗收的效果呢?下圖是我們在DSG項目中對驗收效果量化所做的探索:

      從實踐中沉淀,我們引入了“修復率”這個數值,他的獲取門檻較低,又直觀反映了問題的存在——

      修復率=修復問題數/(驗收問題總數-無法修復問題數),其中問題總數=當期發現問題(新)+遺留問題(舊);無法修復問題是指極少數現階段難以改變的問題,一般多是技術限制導致的。

      隨后,我們可以通過同產品不同期、不同產品同期等對比方式來分析修復率,量化設計驗收;或者結合更多維度的產品體驗數據,對修復率的數值范圍進行劃界,進一步給出設計驗收執行效果的通用衡量標準。

      當然,量化設計驗收效果,答案或許不止這一個,我們也將繼續探索并沉淀。如上文提到的修復循環次數的紅燈值,亦是一個不錯的切入點。

      五、合抱之木,生于毫末

      當然,本文構想的設計驗收機制仍處于初級階段,后續還有很長的路要走。比如以下幾個初步設想:

      1、通過更多項目機會驗證該機制(包括階段設計、表設計等)的完整性、合理性

      2、總結歸納四個階段在執行過程中的注意事項,形成指導原則

      3、定義說明驗收表內部分使用起來存疑的信息字段

      4、探索沉淀更多有價值的量化數據

      5、深入考慮當前機制如何充分適應不同需求體量下的設計驗收

      為團隊提效,為業務賦能,愿我們秉承初心,繼續探索行之有效的設計驗收機制。

      轉載:人人都是產品經理

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

       

      image.png

      B端設計|如何系統性提升中后臺產品體驗

      清陽 用戶研究

      在電商平臺,中后臺系統工作龐大且復雜,而中后臺系統是否有規范的邏輯、是否有高效的體驗,則會體現在用戶的身上。本篇文章作者總結自身經驗,為我們總結中后臺體驗優化的思路和方法,一起來看看。

      image.png

      自 18 年 6 月底介入電商中后臺交互設計工作以來,筆者有幸做了很多和以往的交互設計不太一樣的工作,除了日常需求的交互設計支持以外,更多的精力放在了系統整體體驗提升和設計規范上。

      本文整理了之前在中后臺體驗優化實踐中的思路和方法,如何從設計角度高效地優化整個系統的體驗,如何而非僅僅停留在表現層,希望能與大家交流碰撞。

      一、問題背景

      1. 后臺為什么需要考慮體驗?

      在產品初期的時候,后臺系統只是為了支持前臺,實現功能即可,但隨著產品越來越龐大,每一個前臺的小小的功能優化,都可能是由后臺一整套支持體系,和一整個運營產品組來維護的。因此,后臺系統的體驗也時刻影響著團隊成員的工作效率,影響著一個產品在用戶面前的形象。后臺系統的體驗提升,并不僅僅是使用體驗提升,更多的是效能提升,和產品邏輯的規范。

      2. 后臺系統體驗優化有什么不同?

      系統體驗提升的任務,相較于其他工作,不同的地方在于交互設計師并非被動地接受某個單點需求,也沒有一個既定的模式去執行,而是要主動地去思考如何衡量體驗,如何全局地管理體驗,以及如何更好地規劃方案。在這樣的前提下,交互設計師更應該為全局的體驗負責,所以發揮設計師的主動性非常重要。

      3. 如何去做?

      基本思路是:衡量 → 收集 → 規劃 → 設計。

      B端設計|如何系統性提升中后臺產品體驗

      前三步都是與畫稿子無關的部分,但卻是非常重要的部分,在整個過程中,溝通非常重要,正因為后臺系統的業務專業性強,邏輯復雜,需求方多,所以需要更多地與各方進行溝通,調動大家的力量,一起來參與體驗優化。

      二、衡量體驗,收集反饋

      正如現代管理學之夫彼得·德魯克所說,如果我們不知道平臺的現狀,“提升”也就無從談起。

      在 C 端產品中乃至部分B端產品中,我們有很多聰明的辦法去衡量一個產品的現狀,比如凈推薦值,跳出率,任務完成率,可以直接從數據觀察到用戶流失的環節,方便又客觀。但是對于公司內部使用的中后臺系統來說,一個是數據樣本量少,不一定能準確代表問題;更重要的是,不管體驗如何,用戶出于完成工作的目的,也必須完成系統的任務,所謂完成率和體驗沒有必然聯系。

      當數據少的時候,不妨倒過來想,數據分析本來就是為大體量的產品客觀分析所有用戶的行為,而把每一個用戶抽象成了一組數據,再來綜合評估。那么如果你的每一個用戶都至關重要,且不需要花費太多的精力就可以與他們來一場面對面的對談,豈不是更有助于你去了解你的用戶?用戶訪談、可用性測試、用戶體驗地圖都是非常適合用在這種場景下的。

      B端設計|如何系統性提升中后臺產品體驗

      最終,我們在本次優化中選擇了 3 種方式來衡量系統的體驗:

      1. 滿意度問卷,把抽象的體驗用用戶的主觀評分來衡量,具象到某個數值;
      2. 用戶體驗地圖,整體定位系統痛點和機會點;
      3. 流程時效,把時效的提升作為系統體驗提升的一個體現;

      1. 滿意度問卷

      B端設計|如何系統性提升中后臺產品體驗

      一般來說,滿意度問卷在結構上會包含:產品整體滿意度,通用指標滿意度,業務功能滿意度三部分;為了精細化分析,我又添加了一部分用戶屬性的內容,和最后的開放性意見,主要是為了更好地幫助后續分析重點優化方向和搜集用戶意見。

      在設計問卷的問題和答案時,不要用太過專業的術語,答案也不一定要用標準的五級量表(非常滿意、滿意、一般、不滿意、非常不滿意),可以更具象地去描述1-5級的答案,方便用戶選擇。

      B端設計|如何系統性提升中后臺產品體驗

      如上述問題,將比較抽象的 “系統穩定性” 轉化為“頁面打開速度和出錯頻率”來描述,答案也做了更具象的描述,方便用戶確定他們的滿意程度。

      下圖是某個系統的功能滿意度,很明顯可以看到 D、E 模塊的滿意度是低于其他模塊的,后續可重點關注這2個模塊;同時,海外用戶的滿意度普遍低于所有用戶,確實在這之前海外用戶的需求,比較難觸達到產品組內部。

      B端設計|如何系統性提升中后臺產品體驗

      2. 用戶體驗地圖

      滿意度問卷已經幫助我們客觀地了解到用戶對于系統的滿意程度,也有了一定的優化重點,但對于落地方案來說,還是比較籠統而零散。作為一次完整的體驗提升優化,還需要站在更全局的角度去仔細審視系統的每一個環節。

      前面提到,中后臺系統往往有很高的業務壁壘,體量大,流程長,涉及角色多,對于某個單一角色來說,想要快速深入到系統底層,找出所有問題,是不現實也不客觀的。

      對此,我的想法是,借助用戶和項目成員的力量,共創用戶體驗地圖。

      B端設計|如何系統性提升中后臺產品體驗

      用戶體驗地圖

      用戶體驗地圖是產品設計中常用到的一種設計方法,它讓我們平時零散獲得的抱怨、吐槽,變成有序的階段體驗,直觀地呈現出用戶在每一個目標任務下的行為、思考、痛點和機會點。

      在此不再詳述用戶體驗地圖的定義和使用方法,具體可參考螞蟻金服的實戰案例:https://www.uisdc.com/user-maps-design-ali-case#

      中后臺系統共創用戶體驗地圖,要在擁有用戶意見的基礎上,邀請產品、技術、設計、業務方共同參與,當涉及多個業務方時,也需要同時邀請,一起來思考站在用戶角度的痛點,和站在自己角度可以提出的機會點。

      往往此時,不同的業務方之間,以及和產品方、用戶方之間,視角不同,都會存在或大或小的利益沖突,大家共創的過程也是不斷碰撞、同步的過程。在大方向(提升系統體驗,促進業務成長)一致的前提下,所有人的意見是可以在討論中互相磨合,最終達成細節共識的。

      在此過程中,有非常重要的一點,在于設計師要提前和各方確認好系統的主流程,并在會議上引導成員按照主流程框架來進行思考和討論,控制好節奏和話題走向,切記千萬不要讓體驗地圖共創,變成了七嘴八舌的「吐槽大會」。最終只是收獲到了一堆抱怨,卻沒有結論和共識。

      B端設計|如何系統性提升中后臺產品體驗

      提前確定好的主流程

      B端設計|如何系統性提升中后臺產品體驗

      最終的用戶體驗地圖

      三、規劃方案,輸出設計

      在有了較為全面的用戶體驗地圖后,我們就可以全局地去考慮系統體驗提升如何落地了。事實上,在共創的過程中,包括后續的整理中,我們可以看到除了業務相關的機會點外,許多體驗上的問題是相通的,例如:復雜表單填寫缺少規范、系統通知混亂、流程進度不透明、小屏幕展示不友好等等,雖然這些問題會出現在不同的業務模塊中,但是從交互設計的角度來說,它們的解決方案是一致的,可復制的。

      可以和產品一起把這些需求仔細評估一遍,分為三個部分:

      • 不需要設計方案的優化:一句話需求,系統 bug,讓優化先開始起來;
      • 框架性設計或共性問題:導航、首頁、全局通知、表單填寫規范等,搭好框架才能在處理細節問題時更加高效;
      • 不可復用的復雜設計:細節功能優化,涉及具體業務的底層邏輯變更,新功能等;

      在此重點分享一下首頁通知分級流程節點透明化等參考價值比較高的框架性設計,也就是第二部分。

      1. 首頁重設計

      B端設計|如何系統性提升中后臺產品體驗

      對于首頁改版,最重要的是明確設計定位,之后就是填充支撐定位的內容模塊,設計展現形式。

      1)明確設計定位

      作為一個以協同辦公為主的平臺,我們對于系統首頁的定位為:

      • 新用戶-了解平臺的快速開始入口;
      • 老用戶-處理事項的快速協同入口,業務激勵內容露出的看板;

      2)填充內容模塊

      由此,我們會需要官方公告、幫助引導、待辦事項、業務附能等內容模塊,可以根據用戶角色的不同分別顯示。

      B端設計|如何系統性提升中后臺產品體驗

      3)設計展現形式

      B端設計|如何系統性提升中后臺產品體驗

      2. 通知分級

      當用戶抱怨通知消息太多,細細追究又發現每個通知都有必須存在的理由時,我想,可能是系統沒有做好通知分級。

      正如我們設計每個頁面時會對頁面上的信息進行分級,給到不同的展示效果一樣,當系統龐大到某種程度,我們就需要對系統的通知進行一次「通知分級」。把重要緊急的消息直接傳遞到用戶面前,弱化一些反饋型通知。

      所以就需要我們整理整個系統流程里需要提醒的事,以及確定它的重要程度分類,包括:

      • 重要且緊急,需要用戶盡快處理的事,可以通過郵件、短信等系統外的渠道及時通知用戶;
      • 重要但不緊急,在系統明顯位置給到提醒,保證用戶看到即可;
      • 不重要不緊急,但需要給到用戶的反饋,例如某個流程完成的通知,可適當收起,根據用戶自身習慣選擇性查看;
      • 甚至某些非常大量,且不重要不緊急的事項通知,可以考慮直接去掉,轉化到具體頁面中能查詢到即可;

      B端設計|如何系統性提升中后臺產品體驗

      部分通知分級示例

      3. 復雜表單填寫優化

      在中后臺系統中,經常會涉及異常復雜的表單填寫,不僅僅是內容多,而且每個填寫項涉及業務規范,缺少填寫指引,容易出錯,流程反復駁回,對接低效。

      于是,在必要流程前添加了準備資料階段,列出了所有需要準備的資料,注意:

      • 每個資料都需要有示例,并標注審核要點;
      • 清晰描述資料的業務規范,容易遺漏出錯的內容需要高亮說明;
      • 需要用模板填寫的資料提前給到模板;

      B端設計|如何系統性提升中后臺產品體驗

      明確的填寫指引,再配合針對審核人及時的通知提醒,目標將原來 41 天的流程時效降低到 21 天。

      4. 流程節點透明化

      中后臺系統會有非常多的流程協作功能,但是之前系統的做法僅僅是完成了流程的「功能」,卻沒有照顧到用戶的「心理」,沒有告知用戶每個流程應有的節點、規范、當前進度。用戶在等待流程推進的時候仿佛進入了一個黑箱,不知道現在的進度如何也不知道什么時候會完成,不僅是體驗不好,而且會浪費大量的人力、資源在溝通流程進度上。

      所以在整體優化時,引入了流程進度模塊,清晰地展示了整體流程的節點,對應的操作人,截止時間,以及完成節點的操作記錄。這節省了非常多內外溝通的時間。

      B端設計|如何系統性提升中后臺產品體驗

      流程節點透明化

      四、總結

      以上,就是本次中后臺系統體驗提升的大致過程:

      1. 定位系統體驗;
      2. 收集各方反饋;
      3. 提煉通用體驗問題;
      4. 設計解決方案。

      中后臺大多數業務復雜,體量龐大,設計剛剛接觸時會覺得無從下手,利用這樣的一套流程不僅能幫助我們與團隊成員一起優化系統體驗,還能讓我們深入到用戶場景,和各業務方、用戶方深入交流,對后續的工作也很有幫助。

      筆者一直認為,雖然中后臺是前臺用戶看不見的地方,但后臺系統邏輯的規范,體驗的高效,最終會透過層層映射展現在用戶面前。對于電商來說,可能更多體現在發貨、物流、質檢等屏幕外的體驗上,但這也是產品體驗不可忽視的一部分,需要我們為此添磚加瓦,不斷加分。

      轉載:人人都是產品經理

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

       

      image.png

      產品分析實戰指南:從目標到落地的全流程方法論

      濤濤 用戶研究

      在互聯網行業,產品分析是連接需求與落地的核心橋梁,不僅是產品經理的核心技能,更是 UI 設計師、運營、市場等崗位提升專業能力、做出精準決策的必備工具。很多人認為產品分析高深莫測,或是簡單羅列功能、堆砌數據,最終產出的報告缺乏針對性和實操性。實際上,產品分析是一套邏輯清晰、步驟明確的系統方法,核心是圍繞明確目標,從多維度拆解產品本質,為工作決策提供有效支撐。本文將結合實戰場景,拆解產品分析的完整流程與核心要點,幫助新手快速上手。

      日歷

      鏈接

      個人資料

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

      存檔