国产精品爱久久久久久久小说,女人扒开腿让男人桶到爽 ,亚洲欧美国产双大乳头,国产成人精品综合久久久久,国产精品制服丝袜无码,免费无码精品黄av电影,黑色丝袜无码中中文字幕,乱熟女高潮一区二区在线

    首頁

    B端數據可視化設計,14個章節帶你掌握表單設計(下)

    清陽 設計思維

    表單是 B 端產品核心信息載體,優秀的表單設計能直接提升填寫效率、降低錯誤率、減少業務成本,是 B 端體驗與數據流轉的關鍵環節。蘭亭妙微ui設計公司在上篇基礎上,用 14 個可落地章節,幫你掌握高易用性表單設計。

    一、先明確:好表單的 5 個核心價值

     
    1. 提升體驗:降低填寫困惑,讓操作更輕松順暢
    2. 降低錯率:清晰指引 + 實時校驗,保障數據準確
    3. 提高效率:簡化操作、減少重復輸入,節省時間
    4. 提升完成率:降低填寫門檻,減少用戶中途放棄
    5. 降本增效:減少數據糾錯與溝通成本,賦能業務
     

     

    二、14 個表單設計核心方法(可直接落地)

     

    1. 信息降噪:只留關鍵,簡化內容

    image.png

    • 極簡處理:必填項占絕大多數時,隱藏選填提示符,減少視覺干擾
    • 折疊非必填:用「展示更多」收起次要字段,只保留核心必填項
    • 選填項保留意義:給愿意補充信息的用戶選擇權,降低填寫壓力,靈活收集額外數據
     

    2. 標簽與指引:清晰易懂,不產生歧義

    image.png

    • 標簽簡短直白,不使用專業黑話
    • 填寫規則前置提示,比如格式、長度、范圍
    • 復雜字段加小問號提示,hover 顯示說明,不占主視覺
     

    3. 長表單:分步 / 分頁,緩解填寫壓力

    image.png

    適合注冊、認證、發布等流程型長表單:
     
    • 分步填寫:按業務邏輯拆步驟,配清晰步驟導航
    • 分頁填寫:左側固定導航,用戶可快速跳轉模塊
    • 小缺陷:用戶無法一次性看到全部字段,需做好進度提示
     

    4. 動態驗證:實時反饋,即時糾錯

    image.png

    • 輸入失焦后立即校驗,不等到提交才報錯
    • 錯誤提示就近展示,明確錯誤原因 + 修改建議
    • 避免提交后批量修改,大幅降低用戶挫敗感
     

    5. 默認值 + 自動填充:減少手動輸入

    image.png

    • 高頻選項設默認值,比如常用城市、狀態
    • 復用歷史數據,自動填入重復信息
    • 關聯字段自動聯動,比如地址→郵編、身份證→生日
     

    6. 智能輔助:讓表單 “會思考”

    image.png

    1. 上下文自動填充:手機號→姓名、身份證→生日 / 性別
    2. 條件邏輯顯隱:選 “是” 展開對應字段,選 “否” 直接隱藏
    3. OCR 智能識別:身份證、發票、營業執照上傳后自動提取信息填入
     

    7. 響應式適配:多端一致,不崩不亂

    image.png

    B 端表單必做適配,避免前端自由適配導致體驗差:
     
    • 固定適配:字段寬度固定,兼容客戶最低屏幕分辨率
    • 間距適配:左右邊距固定,組件自適應寬度(適合彈窗 / 抽屜,不建議長表單)
    • 移動端:單獨設計,用系統原生輸入組件,不直接套用 PC 端
     

    8. 字段簡潔:用最少文字講清含義

    image.png

    • 標簽短、準、無歧義,不堆砌長文案
    • 合并冗余字段,不拆分語義完整的信息
     

    9. 長數字不拆分:一個輸入框搞定

    image.png

    手機號、身份證、銀行卡、訂單號等禁止拆成多框
     
    • 減少點擊切換,支持一鍵復制粘貼
    • 避免分段輸入帶來的操作繁瑣與誤操作
     

    10. 防錯糾錯:從源頭減少錯誤

    image.png

    • 格式限制:數字框僅輸數字,限制長度(手機號 11 位、身份證 18 位)
    • 專用輸入:車牌號用專屬鍵盤,屏蔽 I/O 等易混淆字符
    • 范圍置灰:時間選擇器禁用無效日期,堵死錯誤操作路徑
     

    11. 就地編輯:在哪看就在哪改image.png

     
    遵循交互之父阿蘭?庫珀原則:需要在哪里輸出,就在哪里輸入
     
    • 列表少量編輯:直接在行內修改,不跳轉、不彈窗
    • 保持注意力連貫,提升操作效率
     

    12. 三重保存:杜絕數據丟失

     

    表單保存是 B 端底線,分三類實現:

    image.png

    1. 延遲草稿:間隙 / 定時自動保存,無打擾后臺運行
    2. 隨機草稿:高頻自動保存,保留歷史版本,支持回退
    3. 條件草稿:觸發式保存,異常關閉可恢復
    4. 提示保存:未保存跳轉 / 離開時,彈窗確認,防止誤操作
     

    13. 所見即所得:實時預覽最終效果

    image.png

    • 表單編輯區 + 預覽區聯動,即時看到展示效果
    • CMS、物料配置、富文本等場景必加預覽
    • 支持多端(PC / 移動端 / 小程序)效果切換查看
     

    14. 重視用戶反饋:讓業務專家幫你優化

    image.png

    • B 端用戶是一線業務專家,最懂真實痛點
    • 做用戶測試、收集操作反饋,持續迭代
    • 案例:貸款審核從 “逐個審” 優化為 “批量審”,效率大幅提升
     

     

    三、總結

     
    表單是 B 端數據流轉核心樞紐,14 個設計要點圍繞簡潔、清晰、高效、防錯、容錯展開,從視覺降噪到智能輔助,從實時校驗到多重保存,完整構建以用戶為中心的表單體系。掌握這套方法,你的表單設計將從 “能用” 升級為 “好用”,真正為業務提效賦能。

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

     

    image.png

    長文干貨!如何從零開始構建「用戶行為分析」?

    清陽 用戶研究

    一、用戶行為分析:如何開始搭建

    體驗或交互設計師知曉用戶行為分析有什么用?

    答:我們所處的行業下,各類產品變得成熟精細,大家開始拼細節卷服務,市場競爭激烈。對于產品的各種優化改版也就開始變得謹慎,往往需要經過用戶研究或是數據分析等工作來驗證或決策,不再是由設計師或產品經理憑借過往經驗辦事或對標競品照抄了,恰好用戶行為分析就是用戶洞察中具有代表性的一項;

    體驗或交互設計師為什么要掌握這些呢?

    答:回歸到用戶體驗相關設計,本身就是一項細致活兒,處處需要用戶研究或數據洞察來輔助設計工作,了解其相關甚至熟悉搭建分析,從職能發展趨勢來看,可能是遲早的事;

    所以即使你目前用不上用戶行為分析相關,也不要急著關掉文章,先簡單了解一下吧,說不定你會有興趣呢,說不定不久后剛好用上呢?

     

     

    二、用戶行為分析能干啥

    用戶行為分析是數據分析的一個重要領域,特別是在數字化服務行業中,主要目的是通過深入研究用戶群體的流量動向以及操作行為特征等,來了解用戶與產品間的關系、效果、趨勢,以幫助我們優化產品設計、提升用戶體驗并驅動業務決策。

    說人話就是:

    監測用戶在產品上做出了哪些行為、是否符合預期、有什么特征、問題在哪里,然后看看產品上需要做些什么調整或迎合用戶的特征偏好來決策啥的。

    三、用戶行為分析有啥優勢

    具備一定的客觀性與真實性

    被動采集的行為數據有時候比用戶口述反饋的信息要更真實有效,一方面更加直接,另一方面也少了些用戶心理設防(霍桑效應);

    image.png

    具備一定的代表性與準確性

    由于是群體性的大數據,所以更有代表性,并且是即時的數據記錄,不容易記混記錯,準確性也更好;

    image.png

    具備可持續性與可追溯性

    通過數字化技術實現,可以伴隨產品發展持續的采集數據,可以較為方便的調取過往數據進行比對追溯分析;

    image.png

    具備一定的 AI 不可代替性

    用戶行為的背后依舊是人文心理等方面的內容分析或業務場景化決策,往往離不開人工的加持介入;

    image.png

    四、實施構建的流程

    以下是對用戶行為分析的工作流圖解,由于不同企業的訴求有差異,以下工作流僅代表大部分用作交流;

    image.png

    五、關鍵節點拆解說明

    此次主要聊聊基礎的上手運用與注意事項,不涉及過深或難以理解的部分,如果說用戶行為分析可以到達高等數學的程度,那么此次就講講加減乘除好了,師父領進門,修行靠個人,各位看客請上座!

    image.png

    1. 目標需求拆解

    ① 什么時候開始?

    首先你的產品得有流量,然后得有一個關乎到用戶行為的目標,例如想看看用戶流量分布、了解功能使用頻率、任務執行的漏斗關系、用戶行為偏好、用戶數據畫像構建等,這個時候就可以考慮開始了,不然就可能南轅北轍費力不討好。

    image.png

    ② 界定一個范圍?

    首先構建一套完善的用戶行為分析系統并持續的維護與應用并不是一個輕松的事情,所以最好是針對性構建+多迭代,不要上來就想著做全盤搭建,表面的工作或問題往往可能只是浮冰,逐步的深入后問題會越來越多,個人深有體會!

    image.png

    ③ 由上而下,找準路線?

    通過業務目標向下拆解,一般上層目標無非是商業轉化、用戶活躍留存、任務通過率這些,向下拆解則是通過業務目標去鎖定核心的業務場景或任務線路,這些核心的頁面、場景或是任務線路,就是你前期可以界定的一個范圍,后續的重點工作則是將核心功能的入口或路徑窮舉出來,避免數據對不上或找不到異常源頭的情況。

    在我的認知里,用戶行為分析建設不是一錘子買賣,步伐走小一點,基礎搭好一些,以后的迭代建設或維護也會輕松許多;

    概括一下就是,不要追求全面,靠攏業務價值,關聯上指標或者核心業務場景即可。

    之前網上看到有大佬給了一個建設思路,這里搬來大家參考一下;

    image.png

    2. 帶你認識不一樣的埋點

    數據埋點技術已經很成熟了,甚至有很多第三方的埋點+分析的服務,以及采集用戶行為數據的不僅僅只有埋點技術方案,哪怕你做一個錄屏技術都可以,只不過從數字化產品視角出發,埋點技術更有性價比,以及符合用戶隱私權益,所以這里專門講一下“埋點”這個老技術,熟悉的大佬們可以跳過埋點這部分。

    ① 埋點是什么

    數字化應用大多有個特征,就是需要用戶進行界面交互,有交互就有行為動作發生,而數據埋點就是將用戶在界面交互時產生的各種類型的監控日志上報到產品后臺去,這樣業務團隊就可以知道到用戶在不同頁面或業務場景下操作了什么,去往過哪些頁面,當結合業務后臺的訂單等數據時,就可以還原出更加清晰的用戶行為全貌。

    通常這些埋點會分為“頁面訪問(PV、UV)、區塊曝光(區域、時長)、按鈕操作(動作、狀態)”三大類型,并攜帶交互元素和操作者的各類特征信息參數,便于我們知曉更多的場景細節與用戶情況,例如知曉這個「免費試用」按鈕是對應了那個產品?點擊的用戶是否已開通這個產品?這個用戶是否為付費用戶?是否個人還是商家類型?用戶從哪個渠道進來的等,而且這些植入在產品代碼中的埋點可以不間斷持續的采集和配套產品迭代進行維護,可以幫助業務團隊獲取大量有效數據用作業務分析決策。

    image.png

    ② 什么時候派上用場

    這些數據埋點主要是為業務目標的洞察分析服務,也就是說業務目標中需要采集用戶行為數據時,埋點就要派上用場了,相比傳統的業務日志,埋點可以收集到更加全面的界面交互的行為數據,能夠簡易的還原出一套線上用戶的使用情景,而不僅限于一些業務后臺就能統計出的轉化率或基礎數據等;

    image.png

    并且埋點數據可以與業務數據分開存儲運維,這意味著埋點數據可以更迅速的根據設定的指標公式統計出期望的數據或視圖,并且不會干擾業務訪問的性能質量,因此產品迭代后的新老數據對比、營銷活動的效果評估、用戶行為的特征偏好識別等,數據埋點都以可以派上用場的。

    ③ 怎么提埋點需求?

    首先埋點需求沒有固定的文檔格式,其次不同埋點服務平臺的要求也有差異,就移動端來講,很多服務商已經支持可視化埋點、全埋點、無埋點服務,可以實現自動識別交互元素并進行埋點操作,大大減少了開發工作量,那么再聊回埋點需求怎么提。

    核心結論就是由上而下,通過業務目標或核心指標進行拆解,然后關聯到核心的任務流程上,對于一個頁面或一套流程沒有必要進行全篇埋點,技巧我概括為以下幾點;

    image.png

    埋點需求的主要內容基本包含以下,根據業務或埋點平臺的差異,可以自行調整;

    image.png

    ④ 業務擴參怎么一回事兒

    擴參即擴展參數,指在當前用戶界面中可以請求到的業務數據,并將這些業務數據綁定到埋點日志中一并上報給埋點數據后臺,通常為一些用戶屬性參數、業務屬性參數、設備屬性參數、網絡環境參數,這樣我們就可以通過這些額外的參數進行數據分析或是過濾,舉個典型案例;

    image.png

    3. 數據治理是做什么

    ① 為什么要治理?

    簡單說就是提升數據質量與準確性,在龐大的一套數據中,我們需要弄清楚數據之間的映射關系,即不同的數據參數代表了什么元素什么動作什么含義,數據是否有缺漏或冗余、報錯漏報亂報、是否有無效的臟數據(例如內部的測試數據或腳本爬蟲等帶來的數據),如果我們不去將這些數據進行治理,則統計出的數據指標特征或趨勢都將不可靠,無法被商業應用。

    簡單講就是元數據沒治理準確,得到的數據指標也就失去了實用價值。

    image.png

    ② 怎么去治理?

    本質是查缺補漏將無效的數據過濾掉或糾錯,再把數據涵義映射成具體的指標或描述,用作進一步的指標計算與分析,如果數據又多又雜,你會發覺這一步要你老命,例如埋點就需要逐個查詢原始埋點的位置、觸發條件、埋點用途、埋點含義甚至與關聯業務數據的關系校對等。

    不過還好,一般來講這些工作都是數據建模(BI)相關人員去負責的,作為應用層的我們,更多的是能夠根據業務目標提出埋點需求、提出指標與數據報表需求,以及通過數據核算或查看數據趨勢等手段找出異常讓 BI 修復,所以這里就不展開埋點數據治理的方法了。

    ③ 數據維護不易

    就埋點監控用戶行為的方式來講,除了平時的治理與報表問題修復,每次迭代改版還要做好相關埋點信息的管理與維護更新,保證不出錯,不影響關聯指標,甚至是線上用戶偏好的推薦算法等應用,特別是數據規模越來越大后,又密切關聯著業務決策時,數據更不容出錯,且要求準確。

    六、三大分析內容產出

    1. 內容產出的先后

    在用戶行為分析內容構建的過程中,除非是有特定場景特定訴求,通常個人認為都是先出指標、再完善行為鏈路、再逐步豐滿用戶畫像的一個過程,原因如下;

    1. 通常先接到的都是一些核心指標,例如轉化率、留存率、活躍度等,同時這些指標也是上層最先關注到的;
    2. 接著就是完善不同場景或任務路徑相關,幫助洞察微觀視角下的體驗障礙或用戶偏好等,產出流量統計、流程漏斗等,起到業務體驗的洞察改善決策作用;
    3. 用戶畫像的數據本身就沒那么好收集,并且是一個逐步完善和被業務決策應用的過程,所以一開始不會直接奔著用戶畫像構建開始;

    2. 基礎指標構建

    所謂指標可以理解成是產品某項業務的成績,例如我是賣包子的,那么我的指標大概率就是每天賣出去多少包子、利潤有多少、哪款包子銷量高,根據這些信息我就可以知道我平時應該準備多少包子、哪些品類的包子需要多做一些、我靠賣包子能賺多少錢。

    image.png

    ① 指標構建的原理

    實際上指標的構建邏輯可以很簡單,例如 A 占 B 的百分比、ABC 的總和、連續多天 A 占 B 的變化等,很多加減乘除的算法就能搞定,主要是能拿到真實數據,不然我懷疑你在做爛賬......

    常見指標:

    image.png

    3. 行為鏈路分析

    用戶行為路徑是一種數字化的旅行地圖,相比較傳統服務的旅行地圖,場景會更純粹、意圖更準確、數據采集更便捷,主要作用有以下幾點;

    1. 分析用戶在產品中的活動范圍或頁面路徑的關系,可以幫助了解用戶活躍分布,流量走向等情況;
    2. 識別在任務或流程漏斗中的卡點或跳失情況,幫助優化流程體驗或提升轉化率等指標;
    3. 通過用戶的互動方式或路徑特征來進行用戶分類或偏好分析預測等,用于內容推薦算法或精準營銷;

    這些行為我們可以大致分為瀏覽、消費、互動三大類,根據不同的業務類型,可以選擇性采集和分析相關數據,例如電商產品就比較關注用戶的瀏覽與消費行為,常見的有商品瀏覽、添加購物車到下單;

    而社交應用就更關注用戶的互動行為,如不同類型的內容訪問、評論點贊、關注收藏分享等;

    這些數據最終可能由可視化的數據報表呈現出來,以便于業務團隊快捷的找到數據問題或特征,如常見的漏斗圖、桑基圖、雷達圖、樹狀圖、散點圖、決策樹等;

    image.png

    小話題延展

    最近在 UXRen 的一場分享會中,聽羅浩講了體驗營銷的話題,雖然是關于用戶研究在職能崗位上挖掘新的商業能力的內容,但是其中有一段是關于如何在旅行地圖中挖掘新的營銷觸點,有一些體會,這里結合用戶行為鏈路分析簡單聊一下;

    背景與問題:

    產品功能與業務增多,引流渠道多樣化,不同渠道流量的撬動關鍵是什么,核心場景具備哪些能力,哪些渠道的流量能吃掉,這些流量所處的觸點或場景能支持什么,用戶意圖是什么,產品能力能滿足什么,產品發展可以支持哪些?如何分流或匹配各類流量的意圖,并提供路徑分發,這些用戶流量數據有何趨勢或特征,是否能與場景或觸點進行根因分析,是否沉淀行為或偏好模型?

    行為路徑的重點:

    在于觀察不同觸點下的客戶意圖,展開業務所能觸及的部分或新的機會,并匹配合適的關鍵路徑,以提升轉化或用戶粘性等,然后做數據回歸分析,抓取有效的用戶特征信息,并應用到產品的內容推薦或外部引流投放信息優化上。

    流程過程:

    觸點展開與機會洞察,觸點場景——意圖識別——結果匹配(關鍵路徑)——(根因回歸)畫像更新——算法推薦——廣告優化

    image.png

    這一套下來,是不是感覺有點兒似成相識?后來一想這不就是一套用戶增長的設計思路嘛。

    4. 用戶數據畫像

    主要是幫助了解和理解用戶,使得我們可以劃分用戶群體和識別偏好特征,最終以提供精準營銷或是洞察用戶訴求來迭代改善產品。

    其中偏好特征我們還可以根據業務屬性細分為興趣偏好、行為偏好、消費偏好等,并為不同偏好特征的群體提供個性化的內容服務,例如常見的內容標簽標記,通過識別用戶常看內容的標簽,來推薦類似的標簽的內容或是有潛在興趣的標簽內容來抓住用戶的興趣。

    image.png

    常見畫像指標構建

    這些指標會通過用戶行為、設備信息、個人資料的完善來逐步獲取,主要可以了解到用戶的地域分布、年齡與性別分布、設備與活躍度情況,相應的數據在業務后臺基本上都能夠獲取到,只需要將某個時間分區的數據拉出來,經過 Excel 之類的軟件把數據加工一下,就能夠獲取到相關數據視圖。

    如果將多個數據指標結合起來分析,便可以獲取一些復合型數據指標,例如哪些年齡段的用戶群體消費能力更強、活躍度更高、不同教育背景的興趣愛好是否有一定的關聯性等等;

    image.png

    進階畫像指標構建

    進階的數據畫像會完善更多的用戶特征信息,便于業務團隊找到用戶群體的特征,做進一步的精細化運營或內容推薦,常見的畫像指標如下;

    image.png

    此外就是在收集用戶數據的過程中,保證用戶隱私安全、合法性和安全性。

    用戶分層模型應用

    當我們采集到一定的用戶數據后,就可以在數據畫像的構建階段進一步完成用戶分層工作,這一步是為了將用戶分類,因為不同用戶群的目的是有差異的,例如閑逛、精準采購、參與活動的等等,以提供差異化的服務做精準營銷、識別用戶群體特征做業務策略決策、或是優化產品體驗相關,不過當你的用戶規模尚小,運營模式簡單,你也不用迫切去進行用戶分層相關,因為收益不大。

    那么通常都有哪些用戶分層模型呢?其實你并不陌生,一些給你列舉了一些;

    image.png

    七、分析結論到應用

    相信你也發現了,用戶行為分析的構建與產出并不只是行為鏈路的數據,同時會包攬很多其他的有價值的指標與數據,所以不要被用戶行為四個字迷惑,或許你此刻正需要構建相關數據。

    當你準備構建或整理用戶行為分析前,記得目標或問題先行,針對性采集數據或建設指標,在你有了相對準確或清晰易懂的數據后,那些數據報表或圖表根本難不倒你,說白了無非是將純純的一堆數據換了形式展示,如果你數據可視化的形式與應用不夠了解,你可以看看 AntV 官網的介紹說明了解一下,其實你也不用每個都研究個遍,實用的就那么幾個,酷炫是要代價的,報表搭建平臺支不支持、Excel 支不支持、時間精力夠不夠研發給你整,都是問題~

    AntV 官網 :https://ant-design-charts.antgroup.com/examples

    最后

    你可能疑問沒有完整的教程手把手教你啊,其實不然,構建的前提、流程、要點、建設方向均在此篇中交代過,當你按照這套流程框架去做,基本上不會有啥大問題,一般來講這些內容也夠用,至于選用哪些數據埋點平臺、數據分析平臺、報表搭建平臺、視自家公司情況而定吧。

    也不要擔心在數據報表搭建或分析的過程中,你搞不定,是不是你執行先不說,多問問百度或平臺客服總能解決,如果就是覺得很難上手,那么大概率是工具你不熟,或者工具不好用

    轉載:優設

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

     

    image.png

    深度拆解9類B端篩選組件,扒出設計的四大問題(上)

    清陽 設計資源

    B 端表格頁面的核心競爭力,在于是否能讓用戶高效、精準地觸達目標數據,而篩選功能正是這一核心的關鍵載體。作為 B 端產品 “增刪改查” 中 “查” 的核心手段,篩選組件的設計直接影響業務操作效率。蘭亭妙微ui設計公司將從篩選與搜索的核心差異切入,拆解篩選底層邏輯,系統梳理 9 類主流篩選組件的設計要點、適用場景,同時明確設計原則與避坑方案,幫你掌握適配不同業務場景的篩選設計落地 SOP。

    那好話不多說,我們正式開始~

    在開始之前先來說說 什么是 B 端產品,我們通常也叫做管理后臺。

    這里會有兩個問題:“它管理什么?到底如何管理?”給大家三秒鐘可以思考一下。

    首先它管理的是數據,無論是 ERP 系統的訂單數據、CRM 的客戶數據、OA 的流程數據,你都會發現管理后臺就是在不停的對數據進行補充、整合。

    那到底應該如何管理?簡單來說就是 數據的“增刪改查”,篩選其實就是查詢的一種重要方式。

    image.png

    比如一個客戶關系管理系統(CRM),銷售人員去拜訪客戶就會提前查詢客戶信息,來了解客戶關注內容進而去組織銷售話術。

    那這里的篩選應該如何設計?怎樣設計既能高效便利,同時也具備擴展性?那今天我們系統盤點篩選組件究竟應該如何設計?

    一、篩選與搜索的差別

    這里我們先來講講篩選的鄰居“搜索”,因為很多同學其實對于這兩者之間的差別不太了解,只知道它們都是在工具欄當中,都是在做查詢數據的工作。但在功能上是有明顯的區分:

    搜索是對系統的關鍵詞進行精準匹配,比如用戶 ID、手機號、昵稱、地址等信息內容

    篩選則是給出產品的固定條件選項,比如歸屬人、狀態、類型 等,你可以按需勾選條件,就能得出對應數據

    這里稍微多說一句,因為所有的 B 端系統都是由字段組成,而在大的分類上,字段主要包含有輸入、選擇、上傳三大類型。

    搜索服務于輸入類字段,比如剛才講到了 用戶 ID、手機號、昵稱、地址等 都是得讓用戶自行輸入才會得到,因此在表單里輸入,在表格當中也是輸入搜索,所以系統是關聯的。

    篩選則是選擇類字段,也就是歸屬人、狀態、類型 等,在 B 端系統當中,選擇字段尤為重要,所以在表單處選擇同樣在篩選處也是相同邏輯。

    理解篩選與搜索的差異后,我們再來說說篩選~

    image.png

    二、篩選的邏輯

    在篩選的過程當中,有著非常多重要的邏輯需要提前掌握,我們通過簡單的快問快答,幫助大家快速拆解。

    第一題:什么是 且、或、非

    這是篩選當中必須要了解的基礎運算條件。

    且就是篩選的條件必須同時滿足才能出結果,比如一個電商數據分析師,需要篩選潛在高意向客戶,在篩選條件為「時間在近 30 天有支付訂單、近 30 天累計消費金額≥800 元、近 30 天訂單次數≥2 次」,必須同時滿足才會滿足用戶需求。

    或就是這些條件滿足任意一個就能出結果,比如還是電商數據,需要尋找對產品有興趣的潛在客戶,就需要篩選「近 90 天內有過人工咨詢記錄、近 30 天內訪問產品詳情頁≥6 次、近 180 天內提交過試用申請」,三個條件滿足任意一個,這樣就能涵蓋更為全面。

    非就是這些條件必須排除掉才能出結果,比如電商數據,因為涉及到刷單、退款的情況,需要將其進行清洗,因此在篩選條件上就需要滿足「訂單狀態≠測試訂單、支付狀態≠已退款、客戶類型≠內部員工」,需要同時排除這些數據。

    所以對應的篩選運算規則,其實背后都是用戶在使用時需要深度分析使用的最為重要的工具~

    第二題:在B端系統當中多個篩選條件默認的運算規則是什么?

    A:且 B:或 C:非

    在 B 端系統當中,最常用的運算規則就是且,也就是取多個篩選當中的交集。

    比如下面這三個篩選項,所計算的呈現規則就是 「銷售負責人是李強」且「銷售時間是 近一個月」且「價值為高價值」的客戶,這樣就是一個典型的且的關系。

    因為這種思維方式是最符合用戶的思考邏輯,這也是眾多 B 端系統當中的常見邏輯。

    image.png

     

    第三題:且、或、非可以同時存在于一個篩選組合當中嗎?

    A.可以

    B.不可以

    它們可以出現在同一個篩選組合當中,因為實際的業務往往是“多條件、多邏輯” 的復合場景。

    比如在教育管理系統當中,班主任要篩選 初三年級且數學月考不及格 或 非 住校生 的學生,來針對這兩類人群進行重點管理與監控。

    但在篩選的設計當中,為了讓用戶理解邏輯,我們需要通過 條件組(如括號、層級縮進、虛線框)讓用戶直觀感知分組關系,避免依賴抽象的優先級規則。

    image.png

    第四題:如果你是一個設計師,應該如何降低成本表達這個關系?

    因為邏輯較為復雜,所以在篩選時有些基礎辦法可以降低門檻。

    ① 可視化展示篩選運算,如果用戶對于且、或邏輯不太了解,可以使用圖標快速表示

    image.png

    ② 實時校驗邏輯規則,不要出現相互矛盾的篩選邏輯

    這個功能其實不太好做,但 ONES 做了一個最簡單的邏輯判斷。在且條件當中,同一篩選條件不得選擇兩次,這樣用于避免在且條件當中經常出現的相互矛盾的篩選邏輯。

    image.png

    三、篩選的類型

    好的,準備工作已經完成,我們就可以順利了解篩選的類型。

    由于篩選的類型眾多,我們會按照 業務復雜度、容器差異 兩個維度,來對篩選進行歸類。
    通過業務復雜度,將其分為:基礎篩選、高級篩選、自定義篩選

    按照容器差異,將其分為:標簽篩選、折疊篩選、浮窗篩選、抽屜篩選、表頭篩選、AI 篩選

    1. 基礎篩選

    基礎篩選是將 高頻使用(使用頻率≥80%)的篩選條件進行固定,一直保持在頁面中的核心位置,不折疊、不隱藏,讓用戶能夠直接看到的篩選類型。

    這是一個最為基礎的篩選方式,在常見的 Ant Design、Arco Design 的頁面模板當中都會有基礎篩選的身影。

    image.png

    使用基礎篩選最為重要的便是 快速觸達,用戶打開頁面就會查看篩選條件,不需要點擊“更多”“展開” 等入口,這能滿足 B 端用戶 高效完成日常操作 的核心需求。

    在使用基礎篩選時,我們需要注意以下問題:

    ① 基礎篩選條件的數量不宜過多,一般 3-4 個最為合適

    因為篩選條件過多,就失去了常駐的意義。但在實際業務當中,我們也需要考慮 5 個、7 個這類極端場景,畢竟常駐是最為基礎的方案,難免會遇到特殊情況。(需要在篩選的規則當中進行梳理,將交互邏輯呈現清楚)

    ② 基礎篩選當中,排序規則會非常重要

    一般按照 高頻-低頻 的方式,從左到右依次排列,對于高頻低頻的獲取方式,我們可以數據埋點、卡片分類、問卷調研等多種方式進行搜集。

    image.png

    ③ 篩選基礎,樣式就不基礎

    基礎篩選有著較多的篩選樣式,大家可以結合自身業務進行選擇,這里推薦樣式一與二,因為展示效率更高~

    image.png

    這里列舉一些常見的基礎篩選產品,大家可以一并查看:

    image.png

    2. 高級篩選

    高級篩選是較為復雜的篩選形式,它為了滿足更多 低頻、復雜、個性 的業務需求,通常會提供相對獨立篩選面板,展示更多的篩選條件。

    獨立面板也就是我們后續會提到的 浮窗篩選、抽屜篩選、表頭篩選...,所以它們的關系也會相對復雜。

    image.png

    高級篩選與基礎篩選最大的區別在于:

    基礎篩選只能覆蓋 3 個左右的高頻篩選,而高級篩選可支持 10 + 維度的靈活組合;常駐只能使用且的邏輯相對簡單,而高級可以有條件組嵌套支持復雜業務邏輯;常駐位置較為固定,而高級則有面板加持,可以更為靈活。

    其實選擇高級篩選或者基礎篩選,最大的話語權還是場景。

    如果你的篩選是簡單篩選幾個條件,那基礎篩選就已經足夠,反之對篩選條件、篩選效率有著更高要求,我們則會考慮更為復雜的篩選方式。

    在使用高級篩選時,這些問題尤為重要:

    ① 因為高級篩選需要訪問獨立面板,因此在入口的設計就會尤為重要。一般會用文字鏈接或者圖標來提示用戶,便于尋找。

    image.png

    ② 基礎篩選與高級篩選可以并存,因為角色不同、使用場景不同,常駐可以作為高頻使用的固定模塊,高級則作為特定角色需要更多篩選的補充,這部分放在下面 篩選的原則-篩選角色化 給大家詳細說明。

    這里列舉一些常見的高級篩選產品,大家可以一并查看:

    image.png

    image.png

    3. 自定義篩選

    自定義篩選則是在高級篩選的基礎上,進一步業務化。

    它是為了滿足 字段不固定、需求差異化 的業務場景,用戶能夠自定義選擇 篩選字段,配置字段的篩選規則。

    使用自定義字段最重要的核心要素就是 突破固定字段限制,因為高級篩選是針對產品預設好的固定字段進行篩選,自定義則是用戶可以自行選擇字段,用于適配更為靈活、多變的業務場景,如 CRM 的客戶自定義字段、OA 的流程表單(因為不同的公司對于 流程、客戶信息的管理不太相同,因此需要提供自定義字段進行支持)

    在設計自定義篩選時,我們的方案選擇主要受到“篩選頻率、條件復雜度、界面空間”的影響。

    ① 小入口+大彈窗,以篩選圖標作為入口,點擊過后彈窗展示所有篩選條件。這種方式適合 中低頻(每天 1-3 次)使用篩選,界面空間緊張用大彈窗容納復雜配置

    image.png

     

    ② 展開收起式,當用戶點擊篩選后,將表格與工具欄之間的部分展開,用于呈現篩選條件。它能夠避免彈窗的跳轉感,篩選時用戶的視線可以無需離開表格區域,適用于 篩選條件數量多、高頻使用的場景

    image.png

    ③ 固定常駐式,在頂部區域固定,默認展開,這樣就無需點擊入口,這樣更適合“篩選是核心工作流” 的場景image.png

     

    自定義篩選是最難設計的,在使用過程中會有 四大基本元素

    篩選入口:需要讓用戶快速找到入口,同時不干擾主界面。

    邏輯運算區:主要就是 且、或 邏輯的展示,只是在運算區域里面,需要考慮切換時究竟應該如何做?

    神策數據是通過文字方式,快速展示 且、或 邏輯,并且支持手動直接切換,這個方案目前看來是用戶最容易理解的。

    字段選擇區:選擇你所需要篩選的字段,點擊 添加、選擇,整體邏輯較為簡單。

    條件組管理區:篩選條件全部展示過的后續動作,比如保存,批量錄入 等相關動作都可以放在條件組管理當中,進行呈現。

     

    4. 標簽篩選(外露篩選)

    接下來的 標簽篩選、折疊篩選、浮窗篩選、抽屜篩選,都是對容器進行分類。因此我們需要進行展開講解,窮舉一下不同容器的形式和變化。

    先來說說標簽篩選(外露篩選)

    標簽篩選是將重要的篩選選項設計成“可點擊的標簽按鈕”,將篩選過程當中的選項直接來進行展示,目的是為了能夠讓篩選條件,直接暴露出來給到用戶進行使用。

    它最重要的是提升效率,針對高頻使用的篩選維度將其外露展示,將多步操作壓縮為 一步點擊,同時能夠凸顯當前的篩選狀態,避免用戶忘記自己選了什么。

    在使用標簽篩選時,需要注意這些內容:

    1. 在標簽的設計上,因為存在的樣式相對較多,所以我們可以根據自身產品的視覺層級,進行逐一選擇。
    2. 涉及到多角色使用標簽篩選時,需要重點考慮角色化的差異,因為其常駐,如果內容都不是用戶關注的點,標簽常駐的意義也不會很大。
    3. 當標簽選項超過 7 個時,則需要考慮對此篩選內容是否需要進行單獨處理,因為選項過多,用戶使用標簽篩選也不會特別清晰。

    比如我想外露的內容是各種狀態,我就可以將其放在頂部,進行指標圖+篩選功能的雜糅,像在小紅書千帆系統當中,對于訂單的多種狀態,就會使用這一技巧,進行呈現。

    image.png

    5. 折疊篩選

    折疊篩選則是用隱藏的方式,按照使用頻率將篩選條件分層。高頻條件平鋪展示、低頻條件收折在面板當中,點擊展開的篩選類型。

    它最重要的價值是要平衡“空間與效率”的問題,當篩選條件 4-8 個時,如果全部平鋪頁面就會過于冗余,如果全部隱藏又會增加操作步驟,折疊篩選通過 “高頻展示 + 低頻折疊”,讓用戶既能快速操作高頻條件,又能按需調用低頻條件,兼顧 “便捷性” 與 “功能完整性”。

    正因為這樣的特性,所以很多基礎固定的篩選一旦變多后,通常就會使用折疊的方式進行呈現。

    image.png

    6. 浮窗篩選

    浮窗其實是將篩選包起來,用浮窗進行承載,臨時喚起,用完即走。

    在設計時首先會有一個統一的篩選入口,浮窗彈出后設置對應條件,然后點擊確認、取消,浮窗自動收起,不占用頁面只提示有篩選條件。

    image.png

    對于系統而言,它為什么需要浮窗篩選?本質上會有三個原因:

    1. 節約空間,因為在列表當中,如果把篩選條件進行常駐會擠壓核心內容,列表當中的屏效相對較低,這時候篩選則會呈現為隱藏-喚起的模式,我們列表所展示的信息數量就會變多。
    2. 降低頁面復雜度,當篩選條件是常駐時,條件多了過后就會導致使用起來異常困難,特別是針對那些使用頻率本身偏低的用戶來說,更是無效信息,因此收納起來就能降低復雜度,使用戶的專注度能夠更加聚焦于核心任務當中。
    3. 更強的適配性,假如在需要設計移動端的篩選,也可以復用統一的交互,并且用戶點擊篩選圖標已形成記憶。

    我們之前就有相同的業務,需要將桌面端的部分移植到 Pad 端與移動端,使用浮窗性價比就會更高。

    7. 抽屜篩選

    抽屜篩選就是浮窗篩選的另一種表達,它主要是平衡 篩選條件與界面空間 的另一種選擇。
    但確實會發現現在的抽屜篩選已經沒有當年的雄風,感覺大家就避之不談,基本不會使用它。其實也會有幾個原因:

    1. 抽屜需要來回滑動,操作上不如彈窗直接高效,視覺上也缺乏彈窗的簡潔與高級感;
    2. 展開時內容常偏向主屏幕一側,容易造成明顯的視覺偏移,影響整體體驗

    很多之前沿用抽屜篩選的產品,現在都在調整自己的交互方案。

    并且因為抽屜的不穩定性,我們其實不太建議同學們使用抽屜進行選擇自己的選項條件。

    image.png

    8. 表頭篩選

    表頭篩選是一種相對特殊的篩選形式,它是將篩選入口放置在頭部,提供給到用戶進行快捷的篩選操作。

    本質上是在滿足長時間使用 Excel 用戶的使用習慣,因為在 Excel 當中表格眾多,對于篩選只能使用一種影響較小,最為通用的做法,隨著 B 端產品的發展,也會發現很多設計方式都被得到了延續。

    在理解表頭篩選時,會有兩種使用場景:

    ① 空間較少,使用表頭篩選可以進行輕量的篩選動作。

    這樣點擊篩選過后便可直接選擇篩選選項,執行篩選操作。你可以看到飛書文檔,在主頁列表中就會這樣設計便可以輕量滿足篩選需求。

    image.png

    ② 字段太多,需要表頭篩選帶入更多篩選值,進行篩選安排。

    這種方案本質上是針對高級篩選的體驗補充,記住!是需要高級篩選 or 自定義篩選時才會用到篩選策略。

    因為在這兩種篩選當中,需要選擇篩選字段,有大量的選項,這對用戶來說會十分影響其正常使用,通過表頭處的點擊,就能夠將字段默認帶入,縮短篩選路徑,提高篩選效率。

    這種方案的表頭篩選也會有相應弊端,首先是表頭空間問題,因為表頭本身需要展示的信息就相對較多,比如凍結、排序、等等,過多的操作會導致表頭過于復雜,如果還加上篩選,表頭空間就會更大,更不適合進行使用。

    其次用戶理解成本也會相對過高,因為很多行業屬性相對較為簡單的 B 端產品并不會使用這類篩選,對于用戶初次使用也會有不小的負擔。但表頭篩選目前的普及率仍然比較低,使用比較頻繁的便是紛享銷客。

    image.png

    9. AI 篩選

    來到重點,AI 篩選。它不僅僅是未來篩選設計的大趨勢,更是能夠在產品層面解決 篩選復雜化的問題。

    比如剛才的高級篩選、自定義篩選,無疑都是在增加用戶的操作層面,他們需要不斷的選擇,才會得到自己想要的結果。而 AI 篩選的價值在于它解決了 用戶自然語言與程序邏輯執行 之間的壁壘,讓篩選能夠響應用戶的自然語言訴求。

    比如我想篩選最近一個月的高價值客戶,就只需要在 AI 輸入框中說出自己想法,然后就能得到篩選結果。

    image.png

    程序邏輯執行,程序就可以根據自身知識庫,對高價值客戶進行拆解,邏輯變為 客戶時間為:最近創建一個月客戶、類型為高價值。

    這樣一來,其得到的結果就會更為簡單合理,但是在設計 AI 篩選時,它的難度還是會相對較大。

    因為 AI 的結果可能會出現差錯,那對應的修改策略就會極為重要。

    所以我們可以看到,像 Jira 對于 AI 篩選就會有更多的修改入口讓用戶對于篩選結果進行快速修正,同時在入口上也需要做更多的設計進行提示。

    image.png

    轉載:優設

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

     

    image.png

    研究鴻蒙系統后,總結了給設計師的未來多端應用設計指南

    清陽 行業趨勢

    隨著鴻蒙系統的持續成熟、全場景生態不斷完善,互聯網產品正式迎來新一輪多端應用適配的核心挑戰。當下數字產品界面功能愈發復雜、信息層級愈發繁瑣,疊加操作系統多元、終端設備類型跨度極大的行業現狀,單一的移動端設計思維早已無法適配全場景交互需求,設計師唯有跳出傳統單端設計框架,徹底重構適配萬物互聯的全新設計思維,才能緊跟數字產品的發展趨勢,打造出跨端流暢、體驗統一的優質應用。本文結合鴻蒙系統官方設計理念與核心規范、主流iOS及Android系統最新設計標準深度研究,聯動蘭亭妙微UI設計公司的多端適配實戰項目經驗,為廣大UI/UX設計師系統梳理未來多端應用設計的核心思路、落地準則與實操指南,破解跨設備適配難題,助力精準貼合鴻蒙生態設計要求。

    前言:鴻蒙,中國互聯網生態的關鍵變量

    image.png

    “百年未有之大變局” 下,國家數字安全的重要性日益凸顯,完全依托國外操作系統的應用生態,已難以匹配大國發展的未來需求。鴻蒙系統的崛起,不僅是一款國產操作系統的落地,更成為未來幾年中國互聯網行業的核心 “變量”,推動多端應用設計從 “單端適配” 向 “全場景融合” 的深層變革。
     
    對于設計師而言,鴻蒙系統的到來絕非簡單增加一套系統適配,而是設計理念、職能定位與實操方法的全面升級。如何理解并踐行鴻蒙的全場景設計思維,成為應對萬物互聯時代設計挑戰的核心命題。
     

    一、互聯網發展與操作系統的必然演變

     

    1. 互聯網發展:從單屏到多屏,設計思維的四次迭代

     
    互聯網的發展始終與設備形態、屏幕載體同頻進化,每一次設備革新都催生新的設計理念與設計師職能,而屏幕的演變也從 “固定化” 走向 “碎片化、全場景化”。
    image.png
    互聯網發展與設計思維的四個階段清晰界定了設計師的核心目標轉變:

    image.png

    互聯網階段 核心設備 設計核心 設計師職能特征
    Web1.0(萌芽期) 固定顯示器 信息密度優先,美觀與交互次要 平面設計師,聚焦靜態信息排列
    Web2.0(爆發交互期) 固定顯示器 + 筆記本電腦 網頁風格、視覺效果與互動形式創新 網頁設計師,基于虛擬世界的創意設計
    移動互聯網時代 智能手機觸摸屏 以手機為核心的用戶體驗設計 UI / 交互 / 動效設計師,逐步融合為體驗 / 產品設計師
    萬物互聯時代 多類型屏幕(平板 / 可穿戴 / 智能家居 / VR/AR) 以人為核心的多設備協同場景化體驗 全場景設計師,兼具多端適配與協同思維

     

    當下我們正處于移動互聯網向萬物互聯的過渡階段,設計師的核心仍以體驗設計為根基,但多設備、多場景的適配與協同已成為必須具備的核心能力。
     

    2. 傳統操作系統的弊端:單端設計思維的天花板

     
    全球主流操作系統(Windows/MacOS/iOS/Android)均伴隨巨頭企業發展形成生態,并基于不同設備衍生出獨立系統(如蘋果的 iPadOS/WatchOS/VisionOS)。但隨著設備與應用的持續豐富,單端設計思維的弊端愈發明顯:

    image.png

    • 多平臺、多尺寸適配設計差異大,視覺與體驗一致性難以保證;
    • 各系統底層代碼壁壘高,需不同開發團隊維護,開發成本劇增;
    • 設計師需維護多套規范、組件與素材,效率低下且易出現標準混亂。
    image.png
    即便蘋果等企業嘗試推進多端體驗融合(如統一 MacOS 與 iOS 的組件樣式),但受限于龐大的既有生態,難以從底層打通設備間的橋梁,僅能通過 “橋梁式連接” 實現淺層協同,而非真正的設備融合。

     

    image.png

    3. 鴻蒙系統的創新:從 “設備協同” 到 “設備融合”

     
    鴻蒙系統作為全新的全場景智能操作系統,站在傳統操作系統的成熟經驗之上實現彎道超車,其核心設計理念徹底打破了單端設計思維的桎梏 ——一次開發、多端部署,這也是鴻蒙與傳統操作系統的本質區別。

    image.png

    鴻蒙通過兩大核心技術實現這一理念,為全場景設計奠定底層基礎:
     
    1. 分布式軟總線:打破設備物理壁壘,讓所有設備如同單一設備般實現高效通信,實現設備間的能力共享與數據互通;
    2. 自適應 UI 框架(方舟開發框架):可根據設備的屏幕尺寸、像素密度、交互方式(觸控 / 遙控 / 旋鈕),自動適配對應的 UI 布局與交互邏輯,從技術層面減少多端適配的重復工作。

    image.png

    鴻蒙系統對設計師的核心要求,是建立全場景設計思維:從應用框架、組件形態、交互方式、反饋形式等維度,將多端設計整合為一套統一的全場景設計系統,而非對不同設備做孤立的設計適配。
     
    一套完整的全場景設計系統,需具備四大核心要素:

    image.png

    • 全場景的自適應 / 響應式布局規范:基于屏幕比例抽象,打造階梯式自適應結構;
    • 全場景 API 的統一:實現全局配色、字體、組件、布局的統一管控;
    • 多模態組件庫:適配不同設備 / 場景的組件樣式、交互與反饋形態;
    • 全場景適配的成熟經驗與實操指南。
     
    下文將重點圍繞全場景設計的框架與布局層面,梳理鴻蒙設計的核心實操要點。
     

    二、全場景布局的基礎要素:統一基準,抽象尺寸,建立秩序

     
    多設備適配的核心前提,是建立一套統一的布局基礎規則,解決 “尺寸不統一、比例差異大、布局無規律” 的核心問題,鴻蒙系統通過虛擬像素、斷點系統、柵格系統三大要素,搭建了全場景布局的底層框架。
     

    1. 基準倍率統一:vp 虛擬像素,實現跨設備尺寸歸一

    image.png

    面對海量設備的像素密度與屏幕尺寸差異,鴻蒙采用虛擬像素(vp) 作為設計的基礎單位,實現所有設備設計尺寸的歸一化,其核心邏輯與 Android 的 dp 一脈相承,但更適配鴻蒙的全場景設備體系。

    image.png

    • vp 的核心定義:針對應用的設備虛擬尺寸,區別于屏幕硬件的物理像素(px),可在任何屏幕上縮放以保證統一的視覺尺寸體量;
    • vp 的換算規則:1vp≈160dpi 屏幕上的 1px,鴻蒙 API 接口無單位時,默認單位均為 vp;
    • 注意點:因設備屏幕多樣化,vp 與 px 的換算無固定整數倍率(如蘋果 pt 的 2x/3x),需參考鴻蒙官方文檔做精準適配。

    image.png

    2. 屏幕尺寸抽象:斷點系統,劃分跨設備布局區間

     
    基于 vp 完成尺寸歸一后,通過斷點系統界定 “布局何時需要變化”,這是響應式布局的核心,鴻蒙從橫向(窗口寬度)、縱向(窗口寬高比) 兩個維度,將全場景設備的屏幕抽象為五大梯度,實現屏幕尺寸的標準化歸納:
     image.png
     
    鴻蒙斷點梯度 對應設備類型
    XSmall 智能手表、小屏穿戴設備
    Small 手機、豎屏折疊屏
    Medium 橫屏手機、小平板、展開折疊屏
    Large 平板設備、車機
    XLarge PC、智慧屏

     

     image.png
    相較于 Android 的斷點規范,鴻蒙的斷點系統覆蓋范圍更廣,充分考慮了可穿戴設備、折疊屏等萬物互聯時代的特色設備,更適配全場景設計需求。
     

    image.png

     

    3. 基礎布局秩序:柵格系統,保證多設備布局一致性

     
    在單設備設計中柵格系統并非必需,但在多設備全場景設計中,柵格是通用的輔助定位系統,為布局提供可循規律,解決動態布局的一致性問題,柵格會隨屏幕、窗口、子容器尺寸的變化動態調整。
     

    image.png

    柵格的三大核心構成

     

     

    1. Margins(邊距):元素與窗口左右邊緣的距離,決定內容展示寬度,可按窗口尺寸定義不同數值;
    2. Gutters(間距):柵格之間的距離,控制元素間的視覺關系,取值通常不大于邊距(符合格式塔原理);
    3. Columns(柵格):內容占位框架,數量決定布局復雜度,寬度由窗口寬度與柵格數量自動計算,不同窗口尺寸匹配不同柵格數量。
     

    image.png

    鴻蒙柵格系統的設計原則

     
    鴻蒙采用窗口柵格系統,核心邏輯與 Android 一致:通過斷點系統抽象窗口寬度區間,再匹配對應的柵格數量(邊距、間距),實現內容布局的最佳適配。
     
    • 應用可根據自身風格(緊湊型 / 寬松型 / 通用型)定義專屬柵格組合(如 8 間距 / 12 間距 / 16 間距);
    • 柵格內容區最大使用寬度為 2220vp,窗口寬度超過該值時,內容區不再放大,多余區域左右留白,避免大屏內容過度拉伸。
     

    三、應用級自適應布局架構:隨屏而變,適配不同設備交互邏輯

     
    基礎布局要素解決了 “統一規則” 的問題,而應用級自適應布局架構則針對不同設備的屏幕特性與用戶操作習慣,設計可動態調整的應用整體框架,讓應用在不同設備上都能實現高效的交互與信息展示。鴻蒙系統給出了 7 種核心的應用級布局適配方法,設計師可根據應用需求靈活組合:
     

    1. Tab 欄響應架構:底部→側邊,適配大屏操作

    image.png

     
    底部 Tab 是移動端核心全局導航,但大屏中會因拉伸占用過多空間,窗口寬度≥840vp 時,建議將底部 Tab 挪移至左側,成為側邊 Tab;
     
    • 側邊 Tab 可融合更多導航選項、全局操作元素(如菜單欄、頭像),充分利用大屏空間;
    • 該數值為鴻蒙建議值,可根據應用的空間需求靈活調整。
     

    2. 分欄布局:父子層級→平行顯示,釋放大屏信息展示能力

    image.png

     
    大屏的核心優勢是更大的信息展示空間,可將移動端的父子層級頁面拆分為平行分欄,窗口寬度≥600vp 時,建議使用分欄布局
     
    • 鴻蒙默認兩欄寬度比例為 4:6,特定場景可調整為 5:5 或 6:4;
    • 若頁面以內容 / 商品展示為主,可適當提高分欄的窗口寬度閾值,或不采用分欄布局,保證閱讀效率。
     

    3. 懸浮式側邊導航欄:適配小屏 / 雙折疊屏,節省核心空間

     

    image.png

    在豎屏手機、雙折疊屏等空間有限的場景,側邊導航作為臨時層級,采用蒙版 + 左側喚起的懸浮形式,不占用核心閱讀空間,同時讓用戶清晰感知層級關系。
     

    4. 嵌入式側邊導航欄:適配大屏,提升操作效率

    image.png

     
    在 PC、智慧屏等空間充裕的大屏場景,側邊導航采用嵌入式布局,通過向右擠壓主內容區,從雙欄模式切換為三欄模式,兼顧操作效率與布局多樣性。
     

    5. 側邊面板:適配寬屏沉靜式場景,實現輕交互

     
    寬屏的視頻、閱讀等沉靜式場景中,將原本的底部浮層操作(如評論、信息查看)改為側邊面板,在不打斷核心體驗的前提下,實現便捷的輕交互處理。
     

    6. 跟手半模態:適配大屏 / 折疊屏,符合人體工學

    image.png

     
    移動端彈窗多置于屏幕中間,但大屏 / 雙折疊屏中,用戶單手難以覆蓋全屏幕,需將操作彈窗放置在符合人體工學的位置(如靠近右手的邊緣),提升操作便捷性。
     

    7. 半彈窗與彈窗變化:適配多屏,實現模態自適應

     
    移動端為減少頁面跳轉,常用底部半彈窗實現內容型臨時頁面;在折疊屏 / 平板等大屏場景,將半模態頁面自適應為臨時窗口模式,充分利用大屏空間,提升交互體驗。
     

    四、模塊級響應式布局方法:細節適配,讓界面過渡更自然

     
    應用級架構解決了整體框架的適配,而模塊級響應式布局則聚焦單個功能模塊的動態調整,讓模塊隨容器尺寸(屏幕 / 窗口)變化實時適配,并通過過渡動畫實現自然的界面變化,鴻蒙梳理了 8 種核心的模塊級適配方法,覆蓋絕大多數設計場景:
     

    1. 橫向等距自適應

    image.png

     
    模塊內元素左右間距固定,模塊寬度隨容器寬度等值變化,是最基礎的模塊適配方式,適用于簡單的線性排列元素。
     

    2. 橫向均分自適應

    image.png

     
    容器尺寸變化時,將空間平均分配至元素間的空白區域;若尺寸變化幅度大,可在模塊內設置斷點,調整元素數量與尺寸,適配設計目標。
     

    3. 等比縮放

     

    image.png

    元素長寬綁定并等比縮放,適用于對比例要求嚴格的元素(如 LOGO、固定比例圖片),保證視覺形態的一致性。
     

    4. 占比縮放

    image.png

     
    元素尺寸與容器 / 區域的某一維度(寬 / 高)按比例綁定,比等比縮放更靈活,能更穩定地分配布局與元素空間,是日常設計中最常用的縮放方式。
     

    5. 自適應延伸

     

    image.png

    元素間距與大小固定,僅通過容器調整顯示 / 隱藏的內容數量;需注意高頻 / 必要元素需持續露出,避免核心功能被隱藏。
     

    6. 自適應隱藏

    image.png

     
    聚焦小屏核心操作,將低頻操作整合至 “更多” 按鈕中,適用于空間有限的小屏 / 穿戴設備;核心原則是按操作優先級排序,保證核心操作的便捷性(如音樂播放器的播放 / 暫停始終居中)。
     

    7. 自適應折行

     

    image.png

    層級相同的內容展示首選方式,容器寬度變化時,內容不隱藏,僅做折行顯示,保證信息的完整性,適用于標簽、列表項等元素。
     

    8. 重復布局

     

    image.png

    利用大屏寬度優勢,將同屬性組件橫向并列排布,適用于對寬高比敏感的圖片 / 組合內容,避免內容放大超過 150% 導致的視覺變形。
     

    五、空間哲學的變革趨勢:容器化與懸浮化,未來跨端設計的核心方向

    image.png

     
    鴻蒙系統雖有后發技術優勢,但在設計風格與趨勢上,仍可借鑒蘋果、Android 的最新探索,而空間與容器的具像化、導航 / 操作的懸浮化,已成為全球跨端設計的共同趨勢,也是鴻蒙設計未來的重要發展方向。
     

     

    1. 蘋果 iOS26/VisionOS:空間容器化的先驅

    image.png 
    蘋果 iOS26 的核心革新之一,是將 “空間” 與 “容器” 概念具像化,打破導航 / 操作按鈕與頁面的融合關系,將其置于獨立的懸浮空間中;這一設計最早應用于 VisionOS,不僅讓跨端適配更簡單,也為用戶適應 XR 設備的視覺風格與操作邏輯做鋪墊。
     

    2. Android Material Design 3:導航操作的容器化趨勢

     

    image.png

    安卓的 Material Design 3 也明確體現出導航與操作的容器化趨勢,通過獨立容器承載導航與操作元素,減少對內容展示空間的占用,提升跨端適配的靈活性。
     

    3. 鴻蒙設計的未來方向:融合容器化與懸浮化

     

    image.png

    容器化與懸浮化的設計邏輯,在跨端適配中具備顯著優勢:無需為導航刻意劃分獨立空間,元素懸浮于內容之上,讓導航與內容的布局適配更高效。未來鴻蒙的設計體系,必然會融合這一趨勢,設計師提前適應并應用該理念,將掌握未來跨端適配的主動權。
     

    結語:全場景設計思維,讓復雜回歸簡潔

     
    形式追隨功能,而功能的實現始終取決于底層技術的發展。從 PC 到移動互聯網,再到萬物互聯,應用形態、操作系統、設備種類都在不斷 “復雜化”,而鴻蒙系統的到來,讓多端一體化設計從理念變為現實。
     
    對于設計師而言,未來的核心命題,是在復雜的多設備、多場景中尋找設計的簡潔性:如何在提供豐富功能與連續體驗的同時,讓用戶感受到視覺與交互的秩序與統一?如何降低多端適配的設計與開發成本?
     
    全場景設計思維,正是解決這一命題的關鍵鑰匙。它要求設計師跳出單端設計的局限,以 “人” 為核心,以鴻蒙的技術框架為基礎,從底層規則、應用架構、模塊細節三個層面,打造一套統一、靈活、可適配的全場景設計系統。
     
    萬物互聯的時代,設計的邊界正在不斷拓展,而唯有重構思維、緊跟技術趨勢,才能讓設計始終成為產品體驗的核心驅動力。
     

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

     

    image.png

     

    告別轉圈焦慮!5個提升用戶體驗的等待時刻設計技巧

    清陽 交互設計及用戶體驗

    今天,蘭亭妙微 ui 設計公司分享的是「等待時刻的交互體驗」。打開 APP 一直在加載轉圈、快遞位置長時間不更新、預計時間到了外賣還沒送達 —— 這些時刻是不是讓你越等越煩躁?這些場景一旦卡住,我們都會很著急:系統怎么沒反應?繼續等下去有用嗎?

    告別轉圈焦慮!5 個核心技巧優化產品等待時刻的用戶體驗

     
    打開 APP 持續加載轉圈、快遞物流長時間無更新、外賣超預計時間仍未送達…… 這些等待場景總能讓用戶心生煩躁,甚至對產品產生質疑。當系統響應出現延遲,用戶的核心焦慮往往源于 “未知”:系統是否正常運行?繼續等待是否有意義?

    image.png

    事實上,等待是產品使用中無法避免的環節,與其依靠技術單方面提升響應速度,不如通過針對性的交互設計,穩住用戶心態、減少等待焦慮,讓用戶在等待中也能保持使用沉浸感。本文將從等待類型分析出發,分享 5 個能顯著提升用戶體驗的等待時刻設計技巧,讓 “等待” 不再是產品體驗的短板。
     

    一、先做分類:精準設計的前提是區分兩種等待類型

     
    產品中的等待場景可分為可預測型不可預測型,二者的核心差異在于是否能明確等待時間與進度,對應的設計邏輯和組件選擇也截然不同,精準區分是做好等待體驗設計的基礎。
     

    image.png

    1. 可預測型等待:核心是 “準確可視化,承諾要靠譜”

    image.png

    這類等待的關鍵特征是等待時間明確、流程步驟清晰,比如外賣配送時效、打車司機接駕時間、文件下載進度等。當用戶對等待有明確預期時,對產品的信任度會顯著提升,反之,若進度卡頓、實際時間與預估嚴重不符,會直接消耗用戶信任。
     
    設計核心原則:預估時間寧保守不夸大,且需結合實際情況動態更新,避免信息滯后。例如電商、外賣的預計送達時間(ETA),需根據交通、天氣、物流狀態每 5-10 分鐘實時調整,杜絕 “宣稱 12 小時達,實際等待一天” 的不靠譜情況。
     
    適配設計組件

    image.png

    • 進度條:直觀展示操作進行狀態與完成進度,適合有明確完成節點的場景;
    • 計時器:用于等待時間短、能精準計算的場景,如廣告 “5 秒后可跳過”;image.png
    • 文字說明:展示打車、外賣、快遞等場景的預估時間 / 距離,如 “預計 19:20 送達,距你 1.8km”;

      image.png

    • 步驟條:提示任務當前進度與整體步驟,常與進度條搭配使用,引導用戶按流程完成操作。

      image.png

     

    2. 不可預測型等待:核心是 “持續給反饋,告知在運行”

    image.png

    服務器延遲、身份驗證、頁面隨機加載等場景屬于此類,等待時間不明確、步驟模糊是其核心特征。若讓用戶在無反饋的狀態下干等,極易引發焦慮,甚至出現反復刷新、直接退出 APP 的行為。
     
    設計的關鍵并非提供準確時間,而是讓用戶明確感知 “系統正在正常運行,并未卡住”,通過視覺反饋緩解未知焦慮。
     
    適配設計組件
     
    • 加載器:表示操作正在進行但無具體進度,分環形(短時間加載,如點擊按鈕、打開彈窗)和線性(長時間加載,如下載大文件),又可細分為無限型(無起點終點,適用于服務器響應不確定的臨時卡頓)和有限型(進度條逐步填充,適用于有預估范圍但無精確數字的場景,給予 “馬上完成” 的心理暗示)。

      image.png

       
      進階設計可融入品牌元素,打造個性化加載器,如美團將 IP 形象奔跑動畫融入加載動效,強化品牌體驗的同時增加趣味性;
    • 骨架屏:以灰色占位框提前展示頁面排版結構,搭配閃爍動效營造動態加載感,讓用戶預判加載內容的呈現形式。既適用于 APP 首次打開的整頁加載,也可用于列表、卡片、個人主頁等模塊的局部加載,比單純的轉圈加載更能減少 “等待漫長” 的感知。

    image.png

    二、核心優化:5 個設計技巧,讓用戶不再怕等

     
    無論是可預測型還是不可預測型等待,設計的核心都是營造可預測性、提供可視化反饋、穩住用戶心態。結合不同等待類型的特征,總結 5 個通用且高效的設計技巧,覆蓋絕大多數產品等待場景。
     

    image.png

    1. 即時反饋:杜絕 “無響應”,點擊即有回應

    image.png

    用戶點擊操作后,若長時間無任何反饋,會默認系統卡頓或操作失效,進而產生放棄、重試的行為。哪怕等待僅一兩秒鐘,也需立即給出視覺 / 交互反饋,比如按鈕點擊后的狀態變化、加載動效的即時啟動,讓用戶明確感知 “操作已被接收,系統正在處理”。
     

    2. 組件搭配:靈活組合,讓進度更清晰

     
    無需局限于單一組件的使用,應根據產品功能和使用場景,靈活搭配進度條、加載器、骨架屏、步驟條等組件。例如大文件下載時,可結合 “線性進度條 + 文字說明(已下載 88%,預計 2 分鐘完成)”,既展示實時進度,又給出時間預估,雙重反饋讓用戶對等待更有底,明確知曉 APP 運行正常。
     

    3. 貼合預期:保守預估,制造 “超預期” 體驗

     
    提供可靠的時間信息是降低用戶焦慮的關鍵,預估時間要往保守方向說,讓實際等待時間大概率短于預估時間。比如打車時提示 “預計 5 分鐘后司機應答”,若實際 3 分鐘就完成接駕,用戶會產生 “產品效率高” 的正向感知;反之,若預估時間過短,實際等待遠超預期,會直接降低用戶對產品的信任度。
     

    4. 提供備選:釋放用戶時間,緩解等待壓力

    image.png

     
    若預計等待時間較長(如人工客服排隊、大型數據加載),切勿讓用戶被動等待,需為其提供可選擇的替代方案,讓用戶能在等待中進行其他操作,減緩焦慮。
     
    • 功能層面:增加 “完成后通知我” 按鈕,用戶無需停留在當前頁面,后續可通過消息接收完成提醒;
    • 服務層面:如客服場景,在人工排隊時推薦 AI 智能客服,讓用戶優先通過 AI 解決基礎問題,既節省用戶時間,也降低產品的人工服務成本。
     

    5. 利用時間:讓等待成為 “有價值的學習時刻”

    image.png

    與其讓用戶對著加載動效發呆,不如在等待期間提供有價值、有意思的內容,將空白的等待時間轉化為用戶的 “學習 / 了解時間”,一舉兩得。
     
    例如懂車帝的 3D 車型庫加載場景,因需要加載復雜的 3D 模型和空間內容,等待時間相對較長,產品在進度條上方展示 6 個手勢操作教學(雙指滑動、單指旋轉、雙擊切換等),既抓住了用戶的注意力,又讓用戶在進入功能前提前掌握操作方法,省去了后續的單獨操作引導,提升了整體使用效率。
     

    三、設計總結

     
    隨著產品功能的不斷豐富,用戶注冊、內容提交、復雜功能加載等流程的復雜度也在提升,等待成為產品體驗中無法規避的環節。單純依靠技術手段提升響應速度,總會存在體驗上的局限性,而設計師通過精準的場景分類、貼心的組件選擇和科學的設計策略,能讓原本令人煩躁的等待時刻,變成提升產品體驗的加分項。
     
    好的等待體驗設計,本質是站在用戶視角化解 “未知焦慮”,讓用戶在等待中感受到產品的用心與可靠。慢下來的設計,反而能讓用戶的使用體驗更 “快”,這也是產品體驗優化的核心邏輯之一。
     

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

     

    image.png

    為什么你的問卷收回的都是“假數據”?一篇講透高質量問卷數據回收

    清陽 用戶研究

    看似簡單的在線問卷,背后藏著數據造假的重重陷阱,也有專業機構驗證多年的破局方法。今天,蘭亭妙微 ui 設計公司就把這份「高質量問卷數據回收指南」講透,從行業發展到避坑實操,一文讀懂如何擺脫假數據困擾。
     
    “參與問卷領現金紅包”,這樣的消息你一定見過。但你是否也會疑惑:這樣換來的答案,真的能信嗎?填問卷的人會不會為了獎勵胡亂作答?
     
    作為深耕市場調研、用戶研究行業 13 年的從業者,這些問題我每天都會被問到。看似簡單的在線問卷,背后藏著數據造假的重重陷阱,也有專業機構驗證多年的破局方法。今天,就把這份「高質量問卷數據回收指南」講透,從行業發展到避坑實操,一文讀懂如何擺脫假數據困擾。
     

    一、問卷調查的進化:從紙筆時代到在線圈養

     
    要解決當下的問題,必先讀懂行業的過往。中國商業化問卷調查的發展,本質是一場「效率提升與質量博弈」的進化史。
     

    1.1 紙和筆的黃金時代:高成本的精準調研

     
    上世紀 80、90 年代,寶潔等外企巨頭涌入中國,催生了線下問卷調查的萌芽。彼時互聯網尚未普及,尼爾森、華通明略等市場研究公司,通過定點攔截(CLT)入戶 / 邀約訪問兩種核心方式收集數據:在商場超市攔截目標消費者,或對精準人群上門調研、集中填答。
     
    一個全國性調研項目,動輒覆蓋數十個城市、數萬樣本,執行周期長達 2-3 個月,花費幾十萬甚至上百萬是常態。成本高、周期長、受物理空間限制,但勝在樣本真實、調研過程可把控,是那個時代的鮮明烙印。
     

    1.2 在線化浪潮:從 Pad 輔助到移動調研主流

     
    2000 年后,互聯網開始重塑調研行業,網頁端在線調研率先萌芽:2008 年北京奧運會前,華通明略聯合奧美開展的在線調研,成功收集 3000 份有效答卷,成為行業標志性嘗試。
     
    2013 年移動互聯網崛起,智能手機全面普及,調研行業迎來關鍵變革:2012 年還以紙質問卷為主的調研項目,2014 年就已全面切換為 Pad 輔助答題;華通明略當年的內部培訓資料更是精準預言 ——移動調研將成為未來主流,因為它兼具「高效回收、成本更低、觸達高收入人群」三大優勢,這一判斷也被后續十年的行業發展完美印證。

    image.png

    1.3 圈養模式:Panel 固定樣本庫的誕生

     
    在線調研的核心痛點是「去哪里找答題者」,由此催生了Panel 固定樣本庫這一商業模式。尼爾森、華通明略等頭部機構,均與 Lightspeed Research、SSI 等全球性樣本公司合作,通過三大方式構建會員庫:

    image.png

    • 線上廣告招募:社交媒體、搜索引擎投放廣告吸引注冊;
    • 合作伙伴引流:與電商、積分平臺聯合注冊,共享用戶;
    • 歷史項目沉淀:將過往調研用戶轉化為長期樣本。
     
    這些長期注冊、參與有獎調研的用戶被稱為Panelists,樣本庫通過積分兌換現金 / 禮品的激勵體系維持其活躍度。這是「有獎問卷」最早的商業形態,本質是封閉圈養、物質激勵驅動,為后續的數造假埋下了伏筆。
     

    二、在線樣本的原罪:有獎模式下的造假困局

     
    Panel 模式讓調研效率提升、成本降低,但繁榮背后,三大「原罪」隨之浮現,成為假數據的核心來源,也是大眾對有獎問卷持懷疑態度的根本原因。
     

    2.1 職業答題者:數據污染的源頭

     

    當填問卷從「偶爾分享」變成「穩定賺錢的工作」,職業答題者應運而生。他們的核心目標不是真實表達觀點,而是「高效完成問卷拿獎勵」,練就了一套精準的「反偵察」手段:
     
    • 偽裝身份:謊報高收入、高學歷、重度產品用戶等易通過篩選的背景;
    • 秒速過甄別:快速識別問卷開頭的篩選題,精準選擇最易入選的選項。
     
    這些行為直接制造了大量無意義的「數據噪音」,讓調研結果失去參考價值。
     

    2.2 問卷灰產:有組織的專業化造假

    image.png

    比個體造假更可怕的,是形成完整利益鏈條的問卷灰產。造假者以團隊形式運作,通過 QQ 群、論壇分享「破題攻略」,甚至開發自動化腳本,用大量虛假賬號批量填寫問卷,薅取國內外調研平臺的獎勵,部分從業者甚至能通過海外問卷實現月入數萬的穩定收入。

    image.png

    這種有組織、技術化的造假行為,讓數據篩選的難度呈指數級上升,普通的甄別手段根本無從應對。
     

    2.3 樣本偏差:模式自帶的先天缺陷

     
    即便排除主動造假,Panel 模式本身也存在難以克服的樣本偏差,導致調研結果無法代表整體市場:
     
    • 地域偏差:早期線上招募渠道有限,樣本集中在一二線城市,下沉市場樣本嚴重不足;
    • 人群偏差:樣本庫以學生、家庭主婦等閑暇時間多的人群為主,高收入、高職位的「高價值用戶」占比極低。
     
    先天的樣本結構問題,讓即便真實作答的數據,也難以反映市場的真實情況。
     

    三、去偽存真:專業機構的高質量樣本方法論

     
    在線調研并非注定與假數據綁定,針對造假問題,專業機構已形成一套「樣本來源 + 獎勵設計 + 質量控制」的全流程科學體系,從根源上提升數據質量。
     

    3.1 樣本來源:從「圈養」到「活水」,擁抱開放互聯網

     
    擺脫假數據的第一步,是打破對單一封閉式 Panel 的依賴,采用活水模式實現樣本來源多元化,核心分為兩種方式:
     

    主流方式:開放式渠道投放(River Sampling)

     
    與「圈養」邏輯完全相反,不提前維護用戶,而是在項目啟動時,通過社交媒體矩陣(微信、微博、小紅書)、信息流廣告、垂直興趣社區(數碼、汽車、母嬰論壇) 實時投放招募。
     
    三大核心優勢:
     
    • 用戶新鮮度:觸達的多是首次參與調研的「自然人」,而非熟悉套路的「老油條」;
    • 場景真實性:用戶在熟悉的社交 / 內容環境中看到問卷,更易真實作答;
    • 覆蓋面廣:可精準定向不同城市、興趣圈層,有效解決地域和人群偏差。
     
    誤區解答:有人認為社交媒體投放只會覆蓋粉絲,偏差更大?實則如今平臺算法以推薦為主,單篇內容 80% 以上觸達全新用戶,且通過「多平臺、多賬號矩陣投放」,可進一步規避圈層局限。
     

    補充方式:合作伙伴精準觸達

     
    與電商等擁有海量用戶的平臺合作,依托其精細化的用戶標簽,通過短信、App 內消息精準投放。這相當于一個「超大號的無維護活水樣本庫」,精準度高,但存在用戶對營銷信息麻木、回收周期長、成本偏高的問題。
     

    3.2 獎勵設計:平衡藝術,讓獎勵回歸「感謝」而非「雇傭」

     
    有獎調研是剛需 —— 無償調研的回收周期過長,無法滿足商業項目的時效性,但「怎么給、給多少」,直接決定了吸引的是真實用戶還是羊毛黨。核心定價依據三大因素,且堅持「獎勵為感謝,非雇傭」的原則:
     
    1. 目標用戶滲透率(IR):定價最關鍵因素。大眾人群(如智能手機用戶,滲透率 99%)獎勵可偏低;小眾 / 高端人群(如一年內購買電競手機的女性,滲透率低于 1%)需高獎勵才能吸引;
    2. 問卷長度 / 復雜程度(LOI):在線問卷嚴控在 15-20 題,最多不超 30 題,題目越多疲勞感越強、答題質量越差;超 30 題的復雜問卷,獎勵需指數級提升;
    3. 樣本回收周期:緊急項目(2-3 天完成)用高獎勵「以錢換時間」;周期寬裕的項目可適當調低獎勵,「以時間換成本」。
     
    核心原則:獎勵額度精準計算,剛好吸引真實用戶「順手為之」,但不足以讓羊毛黨覺得有利可圖,實現微妙的平衡。
     

    3.3 質量控制:全流程防火墻,層層攔截假數據

     
    如果說樣本來源和獎勵設計是「精準引流」,那么數據質量控制(QC) 就是攔截假數據的「防火墻」。專業機構采用「自動 + 手動」結合的多層次甄別體系,一份問卷需闖過所有關卡,才能被認定為有效樣本。

     

    第一關:獎勵發放機制,勸退羊毛黨

     
    • 紅包類型:根據項目性質選擇拼手氣紅包或等額紅包;
    • 中獎概率:設置非 100% 中獎機制(如 3 人中獎 1 人),對追求確定回報的職業答題者形成致命勸退,對真實用戶則無明顯影響。
     

    第二關:問卷內嵌自動甄別,實時過濾無效作答

     
    在問卷設計階段植入多重甄別邏輯,從源頭攔截敷衍、造假行為:
     
    • 甄別題:開頭設置精準篩選題,直接排除非目標用戶;
    • 陷阱題:插入「選出地圖導航類 APP」等簡單題,秒殺不認真讀題的用戶;
    • 邏輯一致性校驗:系統自動識別前后矛盾答案(如前面選「無孩子」,后面回答「孩子喜歡的牛奶品牌」);
    • 作答時長監控:設定合理時間范圍,秒填(亂點)和超長時間作答(掛機分心)均標記為可疑;
    • IP 與設備甄別:技術識別同一 IP / 設備的重復提交,防止機器人和專業造假團隊。
     

    第三關:提交后多維度審核,剔除漏網之魚

    image.png

    即便完成問卷、看到紅包領取提示,也需通過后臺最終審核,這是最后一道關鍵防線:
     
    • 異常值篩查:自動識別不合理信息(如小學在讀卻 16 歲以上、40 歲以下選退休職業、手機型號與價格明顯不符),觸發人工全卷檢查;
    • 填答完整性校驗:葫蘆串式作答、量表打分連續相同(超 4/9 個)、開放題回答無意義(如「哈哈哈」「12345」),均標記無效并人工復核;
    • 開放題質量評估:人工檢查開放性問題,答非所問、內容敷衍的直接作廢;
    • 最終獎勵審核:檢查填答軌跡、邏輯一致性等,確認真實作答后才發放獎勵,這也是部分用戶「審核不通過」的核心原因。
     

    結語

     
    一份高質量的問卷數據,從來不是「發鏈接、等答案、領紅包」那么簡單。從線下紙筆的高成本精準,到在線圈養的效率與造假博弈,再到如今活水模式 + 全流程質控的科學體系,調研行業的發展,始終是「解決問題、優化方法」的過程。
     
    專業調研與路邊「掃碼領紅包」的根本區別,就在于是否有一套嚴謹的「去偽存真」體系:從源頭讓樣本回歸真實,從設計讓獎勵回歸初心,從流程讓質控層層落地。唯有如此,才能讓問卷數據真正成為市場決策、產品優化的有效依據,擺脫假數據的困擾。

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

     

    image.png

    如何設計產品中的反饋|讓交互有回應,體驗更流暢

    清陽 設計思維

    在數字化產品設計愈發注重用戶體驗的當下,界面反饋早已不是單純的“操作提示”,而是串聯用戶行為、產品功能與體驗感知的核心紐帶,更是決定產品易用性、專業性與用戶留存度的關鍵細節。作為深耕UI/UE全鏈路設計十余年的專業團隊,蘭亭妙微UI設計公司(藍藍設計)長期聚焦B端后臺管理、大數據可視化、工業軟件、智能設備界面等多元場景,累計服務數百家中大型企業與行業龍頭客戶,在各類實戰項目中沉淀了一套完整、可落地的反饋設計方法論。

    在界面設計中, 反饋(Feedback)是系統對用戶操作做出的即時、可感知的回應 。系統通過界面元素、動效、聲音或震動等方式,告知當前操作已被識別、系統狀態如何,以及后續可采取的行動。

    1.反饋設計的重要性
    在 Jakob Nielsen 提出的十大交互設計原則中,居于首位的核心準則即為 “系統狀態可見性”。該原則強調,系統必須通過及時且恰當的反饋,始終確保用戶對當前發生之事、操作結果以及后續預期保持清晰的認知。

    image.png

    ▲ Jakob Nielsen 十大交互設計原則
    設想在購物時的場景:當用戶點擊“購買”按鈕后,若界面缺失加載狀態、操作確認或視覺反饋,用戶將陷入操作不確定性——疑慮系統是否響應、是否需重復操作,甚至因焦慮而放棄交易。

    image.png

    在頁面中添加有效的反饋能夠將這種不確定性轉化為明確的行動指引,通過狀態變化、進度提示和結果確認等機制,讓用戶清晰感知系統響應,明確知道“發生了什么”以及“接下來該怎么做”,從而提升用戶信任度與流程轉化率。
    2.在項目中如何完整地梳理并設計反饋
    反饋設計并非后期補充的簡單的提示,而是從產品設計的初期,就作為關鍵要素進行系統性的規劃與設計,接下來,我們將以“創作者音色復刻”項目為例,分享作者在實際項目如何設計反饋。
    “創作者音色復刻”功能的誕生,是為提升公眾號“聽全文”功能的體驗。通過此功能,作者僅需朗讀一段系統提供文本,AI 即可復刻出作者音色。復刻后,讀者就可以在聽全文時能聽到 AI 模仿作者的專屬音色,本文將聚焦的是作者錄入并復刻音色的流程。

    image.png

    復刻原理看似簡單,但對于公眾號創作者而言,“創作者音色復刻”是陌生的功能,且中間涉及到很多由 AI 模型或用戶選擇導致的復雜判斷邏輯。如果系統沒有提供清晰的反饋,容易導致作者困惑或放棄使用此功能。
    為了降低用戶的使用門檻,在設計頁面時,作者將系統的反饋設計作為重點,用以下三個步驟來實現:
    Step 1 :梳理反饋節點
    在產品設計初期,系統性地梳理反饋節點是構建有效反饋機制的首要環節。通過繪制邏輯流程圖,設計師能夠將用戶與產品的交互路徑可視化,清晰呈現用戶每一步操作后系統應提供的反饋。
    在繪制流程圖的時候,需要完整展示一下兩點:
    • 用戶完成任務所需的關鍵反饋節點

    • 用戶在過程中可能產生的系統判斷或用戶選擇其導致的反饋分支

    案例
    在“創作者音色復刻”項目中,作者通過“邏輯流程圖”系統性梳理用戶交互路徑,目的是梳理所有反饋節點——包括主流程的 5 個核心反饋節點,以及因系統判斷產生的 2 個反饋分支所衍生的額外 2 個反饋節點,從而確保反饋設計覆蓋完整交互路徑,避免遺漏關鍵環節。

    image.png

    ▲流程圖:正方形代表反饋節點,菱形代表判斷節點
    Step 2:定位節點的反饋類型
    繪制完“邏輯流程圖”后,設計師需為每個節點定位反饋類型。我們將常見反饋類型歸納為以下四類,每類都具有明確的界定標準與應用場景:
    • 狀態反饋:系統對用戶主動操作的即時狀態確認,消除用戶對操作是否生效的疑慮。

    image.png

    ▲當用戶輕觸“開始錄制”按鈕時,按鈕顏色加深、形態變化,直觀告知用戶操作已生效。
    • 進度反饋:當操作無法即時生效且需一定時間處理時,通過進度反饋告知用戶當前任務進度。

    image.png

    ▲微信下載大文件時顯示的進度條,或加載動畫,能夠有效管理用戶預期,減少等待焦慮。
    • 確認反饋:對可能產生負面后果的操作,可以通過確認反饋向用戶提供上下文信息來解釋操作的后果,向用戶進行確認,從而防止發生錯誤。

    image.png

    ▲微信刪除聯系人時,界面會告知用戶當前操作所造成的風險,防止用戶錯誤操作。
    • 結果反饋:用戶完成任務節點后,系統明確告知操作成功或失敗。

    image.png

    ▲用戶收藏公眾文章后,界面顯示“已收藏”并伴隨成功動效,明確告知操作結果。
    案例
    回到“創作者音色復刻”項目中,作者為每個反饋節點匹配了最貼合的類型。例如,“開始錄制”節點采用狀態反饋確保操作確認,“等待錄音處理”節點采用進度反饋管理用戶等待預期,“朗讀完成”節點采用結果反饋明確操作結果。
    通過定位反饋類型,我們能夠為每個交互節點建立相應反饋邏輯,確保用戶在每個操作環節都能獲得正確的系統響應。

    image.png

    ▲初步為流程圖中的反饋節點,定位反饋類型 
    Stept 3 :設計反饋表現
    在明確反饋節點與類型后,就可以聚焦到每個節點,為反饋節點設計最合適的反饋表現形式。這一環節需要將抽象的反饋概念轉化為具體界面元素,設計反饋時需要滿足三個基本原則:

     

    • 及時:反饋應在操作后即刻發生,讓用戶感知到系統已響應。

    • 清晰:反饋信息應準確無誤,一目了然,明確告知“發生了什么”及“下一步行動”。

    • 適度:反饋強度應與信息重要程度相匹配,避免過度干擾。

    當單一反饋形式無法同時滿足上述原則時,設計師可采用多通道反饋疊加策略,通過整合不同感知維度的反饋形式,增強反饋效果與用戶感知。在移動端交互設計中,常見的反饋通道包括:
    • 視覺反饋:通過界面元素的視覺變化傳達系統狀態,例如顏色變化、動畫效果、圖標提示、文字提示及高亮標記。

    • 聽覺反饋:通過聲音信號增強用戶感知,例如系統音效、操作音效及語音提示。

    • 觸覺反饋:通過設備震動提供物理層面的反饋,例如短震確認、長震警告。

     

    接下來我“創作者音色復刻”項目中以兩個具體場景來真實項目中設計反饋表現的應用以上原則的設計與決策過程:

    案例一:朗讀錯誤的反饋優化
    在音色復刻過程中,用戶需要準確朗讀文本。當準確率不足 90% 時,系統需要告知用戶朗讀有誤并引導重新錄制。
    最初期方案評估
    初期我們采用了業界通用的反饋樣式:Toast 輕提示與彈窗提醒。雖然這兩種方案滿足了基本的及時性和適度性要求,但在可用性測試中暴露出明顯缺陷。用戶普遍反饋“無法確定具體錯誤位置”,導致重復錄制時缺乏明確的目標導向,嚴重影響任務完成效率。

    image.png

    ▲方案 a:Toast 輕提示(左), 方案 b:彈窗提醒(右)。
    問題分析
    通過用戶測試的結論,我們發現有效的錯誤反饋機制如果要達到“清晰”這一原則,必須構建完整的信息閉環。既要準確指出問題所在,又要提供清晰的修正路徑,具體而言,需要同時回答兩個核心疑問:
    • 朗讀錯誤的具體位置在哪里?

    • 下一步應該做什么?

    方案迭代
    基于此認知,我們進行了方案重構:
    方案 a:在單次朗讀任務完成后,系統立即對識別出的錯誤文字進行視覺標紅處理,并配以明確的重新錄制指引。
    方案 b:在朗讀過程中實時監測發音準確度,對錯誤內容進行即時標記與提示。

    image.png

    兩個優化方案在“清晰”原則得到了完善,通過精準的文字定位與明確的指引文案,消除了用戶的認知不確定性。最后綜合用戶測試評估結果,發現方案 b 會在錄制過程中,會影響用戶在閱讀時候的專注度且隨時造成用戶任務中斷,違背了“適度”原則,最終選擇了方案 a 作為落地實施方案。
    案例二:錄制狀態的多通道反饋設計
    在啟動音頻錄制的關鍵節點,如何確保用戶明確感知界面狀態切換,并及時開始朗讀,是本案例的設計重點。
    最初期方案評估
    初期方案僅依賴按鈕狀態的視覺變化作為反饋信號。

    image.png

    在用戶測試過程中,我們觀察到由于操作時手指對界面視覺反饋元素的遮擋,超過 40% 的測試者未能及時察覺狀態變化,導致錄制啟動延遲或錄入無效音頻片段。

    image.png

    ▲操作時手指對界面元素的遮擋
    解決方案的探索過程
    我們首先嘗試強化視覺反饋通道,在界面核心區域增加 Toast 提示組件。然而評估后發現,這種方案雖然提升了狀態感知度,但同時也帶來了新的體驗問題:彈出的提示層遮擋了需要朗讀的文本內容,違背了反饋設計的適度性原則。

    image.png

    最終方案的確立與驗證
    通過多輪方案迭代,我們最終采用了多通道反饋的設計策略:在保留基礎視覺反饋的同時,引入觸覺反饋維度。具體實現方式為用戶在輕觸錄制按鈕時觸發設備的短震動提示。這一設計巧妙地在不增加視覺干擾的前提下,顯著提升了狀態反饋的感知強度,既確保了操作的明確性,又保證了閱讀體驗的連貫性。更多關于觸覺體驗內容詳見:用戶界面之外:觸感體驗

    image.png

    通過這兩個案例的完整設計過程,我們認識到反饋的表現形式并不是固定的在組件 toast、彈窗、進度條這幾個組件之間進行選擇,而是需要設計師在遵循“及時、清晰、適度”這三個原則,深入理解具體場景中,了解用戶困境再進行設計與創造。當反饋能夠準確預見用戶疑惑并提供清晰指引時,它就不再是被動的提示,而是變成了推動任務順利進行的關鍵設計要素。
    3.反饋的必要性
    最后,在“創作者音色復刻”項目中,我們也發現界面設計中的反饋并非越多越好,其存在價值需通過嚴謹評估來確認——反饋應服務于核心交互目標,有效彌補用戶認知與系統狀態間的“信息差”。若交互邏輯本身能自然引導用戶行為、從源頭規避誤解,則額外反饋反而會成為冗余干擾。
    案例
    在“創作者音色復刻”項目的錄制按鈕的交互設計中,我們就經歷了從“增加反饋提示”到“重構交互”的思維轉變。
    最初期方案評估
    在項目初期,我們采用了“長按開始錄制”的交互方案。

    image.png

    然而用戶測試顯示,受微信語音操作習慣的影響,多數用戶在長按時會不自覺地過度貼近設備麥克風,導致錄音質量下降,同時因設備傾斜造成朗讀文字閱讀困難。
    最初嘗試-提示糾正用戶行為
    我們首先嘗試了增加 Toast 提示的方案,在用戶進入錄制頁面時顯示操作指引。但額外增加反饋并沒有改變用戶的行為,反而影響了用戶閱讀文字。

    image.png

    通過系統性分析,我們意識到問題的本質在于交互模型與用戶任務目標之間存在內在沖突 :長按動作本身與微信發語音交互類似,易引起貼近設備的心理暗示。

    image.png

    從提示糾正到優化交互設計
    因此,我們改為重構交互框架,嘗試將操作改為“輕觸錄制”。

    image.png

    新的方案,顯著改善了用戶的錄音姿勢——輕觸操作自然避免了用戶過度靠近設備的行為,同時保持了舒適的閱讀角度。通過交互的優化,我們從根源上解決了問題產生的前提條件。
    案例啟發
    這一案例表明,反饋的必要性需置于整體交互系統中審視:當系統自身能通過更優的結構設計實現引導時,反饋應保持克制,而非作為補償性措施強行添加。
    4.最后
    界面中有效的反饋可以成為連接系統與用戶之間的橋梁。在設計反饋時,可以參考作者在“作者音色復刻”項目中使用的以下流程:首先借助“邏輯流程圖”進行整個項目的“反饋節點”梳理,然后定位“反饋類型”,最后在遵循“及時、清晰、適度”的原則進行反饋的表現的設計,從而為產品構建完整而反饋機制。
    除此以外我們持續審視每個反饋的必要性,優先通過優化系統交互邏輯來簡化反饋需求,從而在提供明確引導與保持交互簡潔之間找到平衡
    轉載:WeDesign

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

     

    image.png

    組件庫 | UI設計師必會的組件系統!

    清陽 設計資源

    在產品設計與開發的協作鏈路中,組件庫是串聯設計規范、視覺落地、開發還原的核心樞紐。從文字、圖標等基礎元素,到按鈕、輸入框、表單等功能控件,組件庫將所有通用界面元素標準化、規范化,既讓設計輸出更高效,也讓開發還原更精準,更是團隊統一設計語言、提升協作效率的關鍵工具。本文從組件庫的基礎認知、核心價值、構成要素、搭建思維到避坑要點,全方位拆解 UI 設計師必備的組件庫搭建能力,助力初 / 中級設計師快速掌握組件系統的設計與落地邏輯。
     

    一、組件庫基礎認知:為什么建?是什么?怎么搭框架?

     

    1. 為什么一定要做組件庫?

    image.png

    無組件庫的設計工作,本質是陷入重復勞動的低效循環:設計表單時定好的輸入框尺寸、描邊色值,后續復用只能重新繪制或拷貝舊文件,極易出現數值偏差、屬性混淆;若需統一調整樣式,上百個界面逐一修改的工作量,不僅耗時耗力,還會大幅提升出錯率。
     
    而組件庫的核心價值,是讓設計師從 “重復畫圖的工具人” 轉變為 “聚焦業務的設計者”—— 一次設計、無限復用,統一修改、全局同步,既保證視覺一致性,又能將節省的時間投入到業務需求思考與體驗優化中,真正提升設計價值。
     

    2. 什么是組件庫?

     
    組件庫是將界面中具備通用性的元素 / 控件進行歸納、整理、規范后形成的組件集合,核心目標是實現快速復用、批量修改、協作統一

     

    它是設計師與開發的 “通用工具庫”:設計師可隨時調用組件完成界面設計,開發可基于組件封裝樣式與邏輯;對組件的任一修改,都會同步更新所有已調用的實例,從根源上解決設計與開發的銜接偏差,確保用戶體驗的一致性。
    image.png

    3. 組件庫的底層框架:原子設計方法論

     
    2013 年 Brad Forst 在《Atomic Design》中提出的原子設計方法論,是組件庫搭建的核心邏輯,將產品界面從基礎到復雜分為 5 個層級,層層嵌套構建完整的設計體系,也是組件庫分類與整理的底層依據:
     
    • 原子:界面最基礎、不可拆分的元素,如單一顏色、字體、圖標、線條等;
    • 分子:2 個及以上原子組合而成的功能性單元,如搜索框(輸入框 + 按鈕 + 圖標)、單選按鈕、表單項等;
    • 組織:多個分子組合而成的完整功能模塊,如個人信息版塊、商品列表模塊、導航欄等;
    • 模板:由原子、分子、組織構建的頁面框架,定義布局與元素排布,如列表頁模板、詳情頁模板、表單頁模板等;
    • 頁面:在模板基礎上填充真實內容、完善細節后的高保真界面,是組件庫的最終落地形態。

    image.png

    二、組件庫的核心價值:不止提效,更是產品設計的底層保障

     
    組件庫并非簡單的 “元素合集”,而是貫穿產品設計、開發、迭代全流程的基礎體系,其價值體現在 5 個核心維度:
     

    1. 保持設計與體驗的一致性

     
    產品不同業務場景的設計表現易出現差異,組件庫通過標準化的樣式、交互規范,讓團隊在既定框架內設計,既保證輸出質量統一,也讓用戶在不同頁面、不同功能中獲得連貫的使用體驗,避免因設計混亂導致的用戶認知成本提升。
     

    2. 降低團隊協作與新人上手成本

     
    新成員加入時,無需花費大量時間梳理項目設計語言 —— 成熟的組件庫是 “可視化的設計手冊”,無論是設計新人還是資深設計師,都能快速參考、直接調用,大幅降低溝通成本與試錯成本,快速融入工作節奏。
     

    3. 全方位提升團隊工作效率

     
    • 對設計師:減少重復性設計工作,組件統一修改后全局同步,避免逐一調整的低效操作;
    • 對開發:可封裝常用組件樣式與邏輯,按需調用即可,減少冗余代碼、優化軟件包體積,同時降低與設計的溝通成本,后期維護也更便捷。
     

    4. 穩固產品的品牌視覺形象

     
    顏色、字體、圖標風格等品牌基因,均是組件庫的核心構成部分。一致性的視覺樣式讓產品的品牌形象更鮮明,讓用戶形成穩定的視覺認知,加深對產品的記憶點,讓品牌視覺落地更可控。
     

    5. 遵循用戶固有使用習慣

    image.png

    組件化設計嚴格貼合用戶的慣性思維:綠色代表安全 / 通過、紅色代表錯誤 / 警告、放大鏡圖標關聯搜索功能…… 除非產品體量足夠大且有合理的差異化需求,否則無需違背用戶習慣。標準化的組件設計,能減少用戶的思考與試錯成本,提升使用體驗。
     

    三、組件庫的核心構成:從基礎元素到功能組件,層層規范

     
    組件庫的構成遵循 “從基礎到復雜” 的邏輯,核心分為基礎視覺元素功能基礎組件兩大部分,每一部分都需明確規范、統一標準,確保可復用、可調用。
     

    1. 顏色:定義產品視覺調性與信息層級

    image.png

    顏色是產品設計風格的基礎,核心是按功能屬性分類定義,形成標準化色庫
     
    • 先明確核心色系:主體色(品牌色)、輔助色、中性色(背景、文字)、功能色(成功、錯誤、警告、提示);
    • 基于核心色系提煉漸變色與色階,適配不同場景的視覺需求;
    • 對所有顏色進行分組、命名,確保設計師與開發可快速檢索、統一調用,同時梳理顏色的信息層級,讓界面視覺平衡、重點突出。
     

    2. 文字:標準化字體體系,適配全場景使用

    image.png

    文字規范的核心是明確核心屬性,按場景分類,避免樣式混亂,核心包含 4 個基礎屬性:字體、字號、字重、行高;針對不同使用場景制定對應的文字樣式,并整理成標準化表格,方便查閱與調用。
     
    表格
     
     
     
    樣式規范 字號 行距 (折行) 核心使用場景
    大標題級 40px 60px 模塊標題、核心數據、頁面大標題
    小標題級 32px 48px 內容標題、板塊小標題
    正文級 28px 42px 正文內容、按鈕文字、副標題
    輔助說明級 24px 36px 金剛區文字、Tab 欄、輔助說明
    微提示級 24px 36px 容器標簽、彈窗提示、小紅點數字
     
    段間距、字距、縮進等屬性使用頻率較低,可根據產品實際需求,確定使用頻率后再決定是否納入組件庫。
     

    3. 圖標:統一繪制標準,適配開發靈活調用

    image.png

    圖標設計的核心是標準化繪制規范,保證視覺統一且開發可適配
     
    • 用 keyline 柵格控制不同形狀圖標的大小、比例,確保視覺協調性;
    • 繪制完成后轉曲為面性圖標,避免樣式變形;
    • 定義圖標常用顏色,讓開發可根據高保真效果圖靈活切換,無需重復適配。
     

    4. 基礎組件:原子方法論的落地,功能化組件合集

    image.png

    參考原子設計方法論,將原子、分子、組織層級的元素組合、嵌套、精細化歸類,形成可直接調用的功能基礎組件,涵蓋產品設計的核心通用控件,例如:按鈕(不同尺寸、狀態)、彈窗(提示、確認、操作)、表單(輸入框、選擇器、校驗項)、選項控件(單選、多選、開關)等,每個組件都需明確樣式、交互、狀態規范。
     

    四、組件庫搭建的核心思維:從框架到細節,科學規劃

     
    搭建組件庫并非簡單的 “元素堆砌”,而是基于產品特性的科學規劃,核心掌握 4 大思維,讓組件庫兼具復用性、擴展性、易用性
     

    1. 先理解產品結構,再搭建組件框架

    image.png

    先梳理產品的業務屬性、核心功能、頁面布局,以此為基礎構建組件庫的基本框架,并對組件進行分類與權重排序 —— 相同業務屬性的產品,布局與組件復用率極高,過度的結構差異化會違背用戶習慣,引發反感。
     
    因此,組件庫的差異化應聚焦細節設計(如按鈕圓角、圖標風格、色彩搭配),而非核心結構,讓組件庫既適配產品業務,又符合用戶認知。
     

    2. 組件分類歸類:明確類型,區分基礎與屬性

     
    在 UI 層面,將組件分為 4 類,并進一步整合為基礎組件屬性組件,讓前期規劃更清晰,后期調用更高效:
     
    • 基礎組件:包含系統原生組件與擴展組件,適配全產品通用場景;
       
      ? 原生組件:系統(Android/iOS/ 小程序)自帶的基礎控件,如按鈕、彈窗、導航欄;
       
      ? 擴展組件:基于原生組件的功能擴展,如帶圖標的 toast 彈窗、增加功能入口的導航欄;
    • 屬性組件:包含自定義組件與封裝組件,與產品核心功能強關聯;
       
      ? 自定義組件:脫離系統組件,貼合產品特性的設計,如商品列表、個人中心卡片;
       
      ? 封裝組件:根據產品使用場景組合封裝的復雜組件,如日歷組件、篩選組件、分頁組件。
     

    3. 結構細分:拆至最小顆粒,提升復用率

     
    將獨立組件打散至原子級的最小顆粒,例如將按鈕拆分為 “背景色 + 文字 + 邊框 + 圓角”,充分提高細小組件的復用率;修改時僅需調整單一原子元素,即可實現全局響應,再通過原子的重新組合,形成不同樣式、不同功能的組件,讓組件庫的樣式與數量呈倍數增長,兼具靈活性與統一性。
     

    4. 命名規則:層次清晰,團隊通用

     
    合理的命名是組件庫維護與調用的關鍵,核心原則是層次清晰、通俗易懂、團隊通用
     
    • 用 “/” 分隔場景與類別,體現組件的結構層次(Sketch 可自動識別),讓設計師快速檢索;
    • 命名示例:按鈕 / 主操作 / 大按鈕 / 待激活、按鈕 / 次要操作 / 小按鈕 / 可操作、表單 / 輸入框 / 初始狀態;
    • 避免使用生僻的專業名詞,優先選擇 “按鈕、表單、彈窗” 等團隊共識的術語,降低使用成本。
     

    五、組件庫搭建與使用的避坑要點:避開誤區,讓組件庫真正落地

     
    組件庫的搭建與使用,易陷入 “重形式、輕實用” 的誤區,掌握 4 個核心注意事項,讓組件庫兼具規范性與易用性:
     

    1. 核心原則:先保證易用性,再追求復用性

    image.png

    不要為了復用而復用,組件庫的核心是服務于產品體驗與設計效率。針對特殊業務場景,在符合產品易用性的前提下,可將已復用的組件解除關聯,適當做加減法 —— 既不盲目追求極致簡約,也不刻意增加復雜度,讓組件適配場景才是最佳選擇。
     

    2. 命名技巧:不糾結細節,追求團隊通用

     
    無需花費大量時間在組件命名的 “精致化” 上,核心是通俗易懂、團隊可快速理解。組件庫是團隊協作工具,而非個人設計作品,簡單直接的命名,遠比 “高大上的專業名詞” 更有價值。
     

    3. 認知誤區:組件庫不限制設計創意

    image.png

    部分設計師認為 “拼組件會扼殺創意”,實則是對組件庫的誤解:組件庫解決的是復用率高的重復性設計需求(如字體、配色、表單、基礎控件),而在圖形設計、動效表現、背景氛圍、視覺亮點等方面,設計師仍有極大的創意發揮空間。
     
    組件庫是 “解放創意的工具”—— 減少重復勞動,讓設計師將更多精力投入到創意設計與體驗優化中,實現 “規范基礎 + 創意亮點” 的雙重效果。
     

    4. 維護邏輯:隨產品迭代,間歇更新優化

    image.png

    組件庫并非 “一建了之”,而是需要持續維護的動態體系。可利用產品版本迭代的間隔時間,復盤組件庫的使用情況,優化組件細節、補充新的通用組件、淘汰無用組件,避免組件庫陳舊導致的設計與開發脫節,讓組件庫始終適配產品的發展需求。
     

    六、結語:組件庫是提效工具,更是產品設計的長期資產

     
    組件庫不僅是設計與開發的 “提效神器”,更是串聯團隊協作、保障品牌視覺、提升用戶體驗的核心工具,它為設計規范到開發還原搭建了高效的橋梁,讓團隊擺脫重復勞動,將更多時間投入到產品細節打磨與業務價值挖掘中,實現設計向產品的真正賦能。
     
    完成組件庫的搭建,只是產品設計體系建設的開始。真正的價值,在于持續的優化、完善與落地 —— 從全局視角出發,讓組件庫始終適配產品的業務發展與迭代需求,才能讓其發揮最大價值,成為產品設計的長期核心資產。

     

    轉載:防脫發藥水

     

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

     

    image.png

     
     
     

    UI 必懂的 5 個設計心理學知識,蘭亭妙微ui設計公司從理論到落地全拆解(下)

    清陽 設計思維

    三、五架帽理論(LATCH 原則):高效組織信息的 5 個核心方法

     

    核心定義

    image.png

    由 Richard Saul Wurman 提出,又稱LATCH 原則,是基礎的信息組織原則,通過 5 種方式讓信息呈現更高效,提升用戶獲取信息的效率,分別是:Location(位置)、Alphabet(字母)、Time(時間)、Category(類別)、Hierarchy(視覺層級)
     

    核心原理

     
    用戶在產品中獲取信息時,有固定的認知習慣,違背這個習慣會增加用戶的思考成本。五架帽理論的本質,是順應用戶的認知習慣,讓信息 “好找、好懂、好記”,這五個方法可單獨使用,也可組合使用。
     

    產品落地技巧

     

    1. Location(位置):圍繞用戶位置組織信息

    image.png

    以用戶的當前位置為核心,展示周邊相關信息,適用于地圖、本地生活、出行類產品,比如:
     
    • 地圖 APP 優先加載用戶當前位置的道路、地標、周邊商戶,位置變化時實時更新信息;
    • 外賣 / 生鮮 APP 按 “距離由近到遠” 展示商戶,讓用戶快速找到周邊可配送的商家;
    • 游戲(如絕地求生)隨用戶位置變化,加載周邊的建筑、道具、敵人信息。
     

    2. Alphabet(字母):按字母順序組織信息

    image.png

    適用于數據量大、需要精準查找的場景,是最經典的信息組織方式,比如:
     
    • 通訊錄按姓氏拼音首字母排序,支持字母索引,快速定位聯系人;
    • 詞典、題庫 APP 按字母 / 拼音排序,方便用戶查找內容;
    • 電商 APP 的品牌分類,按字母順序排列,提升篩選效率。
     

    3. Time(時間):按時間維度組織信息

     
    時間先后 / 熱度排序,適用于內容、社交、資訊類產品,比如:
     
    • 朋友圈、微博按 “發布時間從新到舊” 展示內容;
    • 資訊 APP 分 “最新、今日、本周” 板塊,讓用戶按時間獲取信息;
    • 電商 APP 的訂單頁面,按 “下單時間從新到舊” 排序,方便用戶查找近期訂單。
     

    4. Category(類別):按屬性分類組織信息

    image.png

    將信息按相同屬性 / 功能劃分,是產品設計中最常用的方式,適用于幾乎所有產品,比如:
     
    • 音樂 APP 按 “曲風(流行、搖滾、民謠)、歌手、專輯” 分類;
    • 電商 APP 按 “商品品類(服飾、食品、數碼)、功能(熱銷、新品、優惠)” 分類;
    • 手機桌面的 APP 文件夾,按 “社交、辦公、娛樂” 分類。
     

    5. Hierarchy(視覺層級):按重要性劃分視覺層級

    image.png

    在信息組織的基礎上,用顏色、大小、間距、字體等視覺手段,突出核心信息,弱化次要信息,比如:
     
    • 電商 APP 的商品頁面,核心信息(商品名稱、價格)用大號粗體,次要信息(產地、規格)用小號常規字體;
    • 首頁金剛區,將高頻功能(首頁、消息、我的)用更醒目的圖標 / 顏色突出,低頻功能弱化展示;
    • 詳情頁的標題用大字號 + 強對比色,正文用常規字號 + 淺色系,讓用戶快速抓住重點。
     

    關鍵總結

     
    五架帽理論的 5 個方法不是孤立的,組合使用效果更佳:比如通訊錄 = 字母 + 視覺層級,外賣 APP = 位置 + 類別 + 時間,首頁金剛區 = 類別 + 視覺層級。核心是讓信息組織符合用戶的認知習慣,降低查找成本。
     

    四、稟賦效應:讓用戶 “珍惜” 你的產品,提升留存與轉化

    image.png

    核心定義

     
    由心理學家 Daniel Kahneman 等提出,指人們對已經擁有的物品 / 服務,會高估其價值,比未擁有時更珍惜。這一現象源于 “損失厭惡”:失去一件東西的痛苦,遠大于得到它的快樂。
     

    核心原理

     
    當用戶從 “旁觀者” 變成 “擁有者” 時,對產品的心理價值會大幅提升,會因為 “害怕失去” 而更愿意繼續使用、付費甚至分享。比如生日收到的禮物,哪怕原本不喜歡,也會舍不得賣掉;免費試用的會員,到期后會因為 “失去權益” 而選擇付費。
     

    產品落地技巧

     

    1. 賦予用戶 “專屬價值”,強化擁有感

    image.png

    讓用戶感受到產品 / 服務是 “為自己量身定制的”,提升心理歸屬感,比如:
     
    • 學習 APP 將學習數據生成個性化報告,支持一鍵分享,讓用戶覺得 “這份成果是獨屬于我的”;
    • 旅游 APP 記錄用戶的旅游足跡,生成 “我的旅行地圖”,激發用戶的珍惜感和分享欲;
    • 電商 APP 為用戶生成 “專屬會員標識”“定制化推薦頁面”,強化專屬感。
     

    2. 提供免費試用 / 體驗,誘導稟賦效應

    image.png

    讓用戶先 “擁有” 產品的權益 / 服務,再讓他們面對 “失去” 的選擇,比如:
     
    • 視頻 / 音樂 APP 為新用戶提供 7 天免費 VIP,到期后用戶會因為 “失去高清畫質 / 無損音樂” 而選擇付費;
    • 辦公 APP 提供 30 天免費高級功能,讓用戶習慣后,不愿回到基礎版;
    • 電商 APP 為新用戶發放 “專屬優惠券”,讓用戶覺得 “擁有了優惠,不用就虧了”。
     

    3. 增加個性化設置,讓用戶 “參與產品打造”

    image.png

    讓用戶通過個性化設置,將產品變成 “自己的樣子”,提升主人翁意識,比如:
     
    • 瀏覽器 / APP 支持換膚、換背景、調整布局,讓用戶按自己的喜好定制產品;
    • 筆記 APP 支持自定義筆記本封面、字體、顏色,讓用戶覺得 “這是我的專屬筆記”;
    • 社交 APP 支持自定義頭像、昵稱、個性簽名,強化用戶的擁有感。
     

    4. 利用 “損失厭惡”,提升用戶粘性

    image.png

    明確告知用戶 “不繼續使用會失去什么”,比告知 “繼續使用會得到什么” 更有效,比如:
     
    • 簽到 APP 提示 “已連續簽到 5 天,中斷將重置進度,失去 100 積分”;
    • 會員 APP 提示 “您的 VIP 還有 3 天到期,到期后將失去免費包郵、專屬折扣等權益”;
    • 打卡 APP 提示 “今日未打卡,將失去本月打卡勛章的領取資格”。
     

    關鍵總結

     
    利用稟賦效應的核心,是讓用戶從 “使用產品” 變成 “擁有產品”,通過專屬價值、免費試用、個性化設置,讓用戶產生擁有感,再利用損失厭惡,讓用戶因為 “害怕失去” 而提升留存和轉化。
     

    五、干擾效應:減少信息干擾,讓用戶專注核心操作

     

    核心定義

    image.png

    用戶同時思考 / 處理兩件及以上事情時,思考效率和操作準確性會大幅下降,難以專注核心目標。簡單來說:信息越雜亂,用戶越容易分心,操作效率越低
     

    核心原理

     
    人的大腦像電腦一樣,同一時間處理的信息有限,當多個無關信息同時出現時,大腦需要花費精力篩選信息,從而分散對核心操作的注意力,甚至導致操作失誤。比如設計時被緊急需求打斷,再回來時會忘記原本的思路;產品頁面圖標雜亂,用戶會找不到核心功能。
     

    產品落地技巧

     

    1. 簡化視覺設計,避免 “過度裝飾”

    image.png

    視覺設計的核心是 “服務于功能”,而非單純的美觀,避免用復雜的設計增加用戶的認知負擔,比如:
     
    • 金剛區圖標避免使用過于復雜的實物圖 / 彩色漸變,優先用簡約的線性圖標 + 清晰的文字,讓用戶一眼識別;
    • 頁面避免過多的色彩、動效,核心操作按鈕(如確認、支付、提交)用強對比色突出,次要元素用低飽和度色彩;
    • 生鮮 APP 的分類圖標,避免用復雜的商品實物圖,用簡約的圖標(如蘋果代表水果、青菜代表蔬菜)即可。
     

    2. 劃分信息層級,避免 “信息堆積”

    image.png

    將頁面信息按核心功能、次要功能、輔助功能劃分層級,突出核心,弱化次要,隱藏輔助,比如:
     
    • 美團首頁金剛區,將高頻功能(美食、外賣、超市便利)用大圖標突出,低頻功能(旅游、美甲、洗車)用小圖標弱化,避免信息雜亂;
    • 個人中心頁面,將核心功能(我的訂單、我的資產、我的收藏)放在頂部,次要功能(設置、幫助、關于)放在底部,按使用頻率排序;
    • 詳情頁將核心操作(購買、加入購物車)放在固定位置,次要信息(商品參數、評價)放在下方,避免干擾核心操作。
     

    3. 按用戶目標,組織頁面功能

     
    圍繞用戶的核心操作目標設計頁面,移除無關的功能和信息,比如:

     

    • 刷題 APP 的答題頁面,僅保留 “題目、選項、上一題、下一題”,移除廣告、推薦、消息等無關信息,讓用戶專注答題;
    • 支付頁面,僅保留 “支付金額、支付方式、確認支付”,避免添加其他功能(如充值、領券),防止用戶分心;
    • 閱讀 APP 的閱讀頁面,支持 “沉浸式模式”,隱藏導航、廣告、消息,讓用戶專注閱讀。
     

    4. 功能分類聚合,避免 “分散擺放”

    image.png

    將同類功能聚合在一起,避免分散擺放導致用戶查找困難,比如:
     
    • 個人中心將 “設置、幫助、反饋、關于” 聚合在 “更多功能” 里,避免零散擺放;
    • 電商 APP 將 “收藏、足跡、購物車” 聚合在 “我的資產” 板塊,按 “用戶資產” 的邏輯組織;
    • 辦公 APP 將 “新建、保存、分享、打印” 聚合在操作欄,按 “文檔操作” 的邏輯組織。
     

    實戰案例

     
    技術類求職 APP 個人中心改版:舊版功能雜亂,將 “已購、錢包、收藏、錯題、投遞記錄” 等功能分散擺放,且把無關的 “頭像、昵稱” 放在視覺核心位置,用戶查找 “投遞記錄” 的平均時間為 15 秒。
     
    新版圍繞用戶核心目標(查看投遞進度、管理學習內容) 優化:
     
    ① 強化個人屬性(等級、粉絲),放在頭部吸引用戶;
     
    ② 將核心功能(我的簡歷、投遞記錄)放在頂部,按產品價值排序;
     
    ③ 將次要功能(收藏、錯題、下載)按 “學習管理” 聚合,模塊劃分清晰;
     
    ④ 視覺上采用簡約風格,弱化無關元素,核心按鈕用強對比色突出。
     
    優化后,用戶查找核心功能的平均時間縮短至 3 秒,操作效率提升 80%+。
     

    關鍵總結

     
    避免干擾效應的核心,是“少即是多”:圍繞用戶的核心操作目標,簡化視覺設計、劃分信息層級、聚合同類功能,移除無關的信息和功能,讓用戶不用思考,就能快速找到并完成核心操作。
     

    全文核心總結

     
    設計心理學的本質,是“站在用戶的角度做設計”,讀懂用戶的心理,才能讓設計觸達用戶的需求。這 5 個心理學法則,各有側重但可組合使用:
     
    • 五架帽理論組織信息,讓用戶 “好找信息”;
    • 干擾效應簡化設計,讓用戶 “專注操作”;
    • 蔡加尼克效應引導參與,讓用戶 “愿意完成”;
    • 峰終定律打磨體驗,讓用戶 “記住產品”;
    • 稟賦效應強化擁有,讓用戶 “珍惜產品”。
     
    不用精通所有心理學理論,把這 5 個法則融入日常設計的每一個環節,從信息組織、頁面設計到流程體驗,讓每一個設計決策都有心理邏輯支撐,就能做出既好看又好用的產品設計。
    轉載:防脫發藥水

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

     

    image.png

    UI 必懂的 5 個設計心理學知識,蘭亭妙微ui設計公司從理論到落地全拆解(上)

    清陽 設計思維

    本文從背景定義、核心原理、產品應用、實戰案例四個維度,拆解 5 個 UI 設計中高頻實用的心理學法則,不講晦澀理論,只講落地方法,蘭亭妙微ui設計公司幫你把心理學融入日常設計工作。
     

    閱讀導航

    1. 峰終定律:抓準體驗關鍵節點,讓用戶記住你的產品
    2. 蔡加尼克效應:利用未完成心理,提升用戶參與度
    3. 五架帽理論(LATCH 原則):高效組織信息,降低用戶認知成本
    4. 稟賦效應:讓用戶對產品產生 “歸屬感”,提升留存與轉化
    5. 干擾效應:減少信息干擾,讓用戶專注核心操作
     

    一、峰終定律:體驗的好壞,由兩個關鍵節點決定

     

    核心定義

     
    由 2002 年諾貝爾經濟學獎得主丹尼爾?卡尼曼提出,人們對一段體驗的記憶,只由體驗的高峰時刻(正向 / 負向)和結束時刻決定,與體驗的總時長、中間過程的平均感受無關。簡單來說:好的峰值 + 好的終值,就是好的體驗

    image.png

    核心原理

     
    用戶不會記住產品使用的每一個細節,只會對 “最爽的瞬間” 和 “最后的感受” 印象深刻。哪怕過程中有一些小瑕疵,只要峰值足夠驚艷、終值足夠舒適,用戶對整體體驗的評價依然會很高。
     

    產品落地技巧

     

    1. 強化正向峰值:打造用戶的 “愉悅瞬間”

     
    在用戶使用產品的關鍵節點,用儀式感、驚喜感拉高情緒,比如:
     

    image.png

    盲盒 APP 購買成功后,彈出動態收藏卡,放大用戶的獲得感;

    • 網易云音樂直播間為新用戶彈出「新人見面禮」,用視覺設計拉滿氛圍;
    • 功能操作完成后(如打卡、繳費、答題),用情感化彈窗給予肯定,如 “任務完成!你也太厲害了吧~”。
     

    2. 降低負面峰值:緩解用戶的 “焦慮時刻”

    image.png

    當用戶遇到網絡卡頓、操作失敗、抽獎未中等負面場景時,用情感化設計減少挫敗感,比如:
     
    • 網絡斷開時,用趣味動效 + 溫柔提示 “網絡開小差啦,點擊重試吧” 代替冰冷的報錯碼;
    • 抽獎未中時,彈出安慰式彈窗 “沒關系,下次好運 buff 加持~”,并附帶小額優惠券。
     

    3. 打磨終值體驗:給用戶一個 “完美收尾”

     

    在用戶完成整個使用流程后,強化滿足感和成就感,比如:
     
    • 刷題 APP 在用戶完成整套習題后,展示直觀的數據分析頁(正確率、能力提升、排名),并附帶鼓勵語;
    • 外賣 APP 下單成功后,清晰展示配送進度 +“下單成功!吃貨專屬福利已到賬”,讓收尾更愉悅;
    • 課程 APP 完成學習后,生成學習證書 / 打卡海報,支持一鍵分享,放大用戶的成就感。
     

    實戰案例

    image.png
    刷題功能體驗優化:針對用戶刷題時的 “未知焦慮”,做了三個核心調整:
     
    ① 用進度條實時展示刷題進度,讓用戶知道 “還有多久完成”;
     
    ② 最后 3 題彈出鼓勵語 “加油!馬上完成啦,你超棒的”,強化峰值;
     
    ③ 結果頁展示個性化數據報告(如 “商業模式模塊能力提升 15%”),打磨終值。優化后,用戶刷題完成率提升 30%+。
     

    關鍵總結

     
    設計時先繪制用戶情緒曲線,找到峰值和終值的關鍵節點,重點打磨這兩個時刻的體驗,比均勻優化所有環節更高效。
     

    二、蔡加尼克效應:未完成的事,用戶會記得更牢

     

    核心定義

     
    由蘇聯心理學家蔡加尼克提出,又稱 “契可尼效應”,指人們對未完成、被中斷的事情,記憶會比已完成的事情更深刻,且會持續產生完成的沖動。簡單來說:用戶對 “沒做完的事”,會更上心
     

    核心原理

    image.png

    當一件事未完成時,大腦會一直處于 “緊張的激活狀態”,持續關注這件事;一旦事情完成,這種緊張感會消失,記憶也會快速淡化。就像考試時沒答上的題,會一直記掛到考試結束;綜藝在關鍵劇情插廣告,你會舍不得換臺。
     

    產品落地技巧

     

    1. 用進度提示,引導用戶持續完成

    image.png

    在需要用戶持續參與的場景(簽到、課程、打卡),添加可視化進度條 / 進度點,讓用戶清晰看到 “完成了多少,還剩多少”,比如:
     
    • 學習 APP 的簽到頁面,展示 “已連續簽到 3 天,再簽 4 天領 50 積分”,用未完成的獎勵吸引用戶持續打卡;
    • 健身 APP 的課程頁面,標注 “本課程共 8 節,已學 3 節”,激發用戶的完成欲。
     

    2. 拆分復雜任務,減少用戶心理負擔

    image.png

    在用戶需要完成復雜操作時(如注冊、信息填寫、認證),將流程拆分為多個簡單的小步驟,并明確展示當前步驟,比如:
     
    • 新用戶注冊時,將 “手機號驗證→設置密碼→完善資料” 拆分為 3 個頁面,標注 “1/3 驗證手機號”,讓用戶覺得 “任務很簡單,很快就能完成”;
    • 信息認證時,按 “身份信息→銀行卡信息→人臉驗證” 拆分,中途退出后再次進入可直接定位到未完成步驟。
     

    3. 用待辦提醒,強化 “未完成” 的心理暗示

    image.png

    在產品中添加待辦事項、未讀提醒、未完成任務標識,讓用戶時刻感知 “還有事沒做”,比如:
     
    • 日歷 APP 的代辦功能,未完成的事項會持續高亮,讓用戶產生 “必須做完” 的心理;
    • 辦公 APP 的待辦列表,用小紅點標注未處理的消息,引導用戶及時操作;
    • 電商 APP 的購物車,保留用戶未付款的商品,并用 “庫存僅剩 3 件” 強化完成沖動。
     

    實戰案例

    image.png

    新用戶注冊流程優化:舊版將所有信息(頭像、昵稱、手機號、性別、興趣)堆積在一個頁面,填寫率僅 40%;新版按業務維度拆分為 3 個步驟(手機號驗證→基礎信息→興趣標簽),每個頁面僅需填寫 1-2 項內容,并添加進度提示 “2/3 完善基礎信息”。
     
    優化后,利用蔡加尼克效應讓用戶產生 “完成沖動”,同時結合沉沒成本效應(用戶填了前兩步,不愿放棄第三步),最終信息填寫率提升至 75%+,內容推薦準確率也同步提升。

    image.png

     

    關鍵總結

    利用蔡加尼克效應的核心,是讓用戶 “看到未完成的目標”,并通過拆分任務、可視化進度,降低用戶完成目標的門檻,從而提升參與度和完成率。
     
    轉載:防脫發藥水

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

     

    image.png

    日歷

    鏈接

    個人資料

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

    存檔

    主站蜘蛛池模板: 97伦伦午夜电影理伦片| 国产超碰人人爱被ios解锁 | 熟妇人妻无乱码中文字幕 | 午夜久久久久久久久久影院| 亚洲一区二区国产av| 超清中文乱码字幕在线观看| 九九精品视频在线观看| 亚洲天堂第一| 亚洲日韩乱码中文无码蜜桃臀网站 | 麻豆国产av超爽剧情系列| 四虎国产精品永久在线国在线| 亚洲精品无码永久中文字幕| 亚洲欧洲偷自拍图片区| 99久久久无码国产精品性波多| 韩日av一区二区| 伊人久久大香线蕉亚洲| 国产精品亚洲精品日韩动图| 91午夜精品| 男女ss视频| 亚洲色婷婷综合开心网| 人妻护士在线波多野结衣| 亚洲免费影院| 欧美xxxx做受欧美.88| 人妻聚色窝窝人体www一区| 侵犯强奷高清无码| 欧美伦理一区二区| 国产综合色一区二区三区| 国产10000部拍拍拍免费视频| 欧美性生活网站| 国产一区二区视频网站| 国产va免费精品观看精品| 中文字幕一区二区三区久久网站| 99国产免费| 中文字幕国产精品二区| 狠狠色丁香婷婷久久综合| 久久99这里只有是精品6| 久久婷婷丁香| 一本大道久久香蕉成人网| 午夜综合网| 无码精品国产va在线观看dvd| 精品高朝久久久久9999|