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

    首頁

    上萬字干貨!超全面的用戶畫像設計指南

    清陽 用戶研究

    image.png啥是用戶畫像,今天蘭亭妙微UI設計公司帶大家深入了解

    想做成這件事,得先理解用戶畫像是啥。

    用戶畫像是結合用戶的社會屬性、生活習慣、消費行為等等信息抽象出來的標簽化合集。咱們要通分析用戶的背景、行為場景、特征、性格等等猜出用戶需要啥,咱們應該做啥功能。

    1. 比如說你發現網戀搭子經常玩妲己、小喬、王昭君這樣的英雄,那咱可以猜測這人大概是女孩,要是和你打游戲天天玩的不是蘭陵王就是關羽、廉頗,那我建議你謹慎。
    2. 然后你還發現她經常在月初買新皮膚,通過這個表現可猜測她大概是個家庭條件還不錯的大學生。(因為大學生多數都是月初領低保。牛馬都是月中領低保。)
    3. 通過對她各項特征進行總結、猜測,然后再利用其表現轉化為對企業(項目)有價值的內容。直白點說怎么針對你,騙走你兜里的錢。
    4. 有伙伴可能說:了解用戶不是為了更好的服務用戶么?其實你這么說也沒毛病,但咱服務好用戶最終目的是啥?還不是為了轉化企業價值?
    5. 回到你網戀妹妹這件事來總結:因為她總玩軟輔,月初購買皮膚,所有推測她大概是妹妹,且還在上大學。對于這樣的搭子你能想出什么策略呢?1.一起玩的時候不能罵她。2.要保護好,多夸她,提供情緒價值。3.巴拉巴拉……
    6. 如果你是和兄弟一起玩聯盟你會怎么說。兒子!爸爸亞索(英雄)玩的賊 6。
    7. 為啥你對妹妹和兄弟的態度這么不一樣?這就是通過畫像區分人群,針對不同人采用不同策略。那么在設計過程中也是一樣的。咱們要考慮不同用戶要如何下菜碟。

    基礎概念曉得了以后咱進階一下。用戶畫像、用戶角色、用戶屬性的不同和相通之處。

    用戶畫像

    1. 對用戶的全面描述,包含用戶的基本信息、行為習慣、需求、痛點等等。大家會常提的基本是:人口統計信息(年齡、性別、職業等等)行為特征(使用習慣、購買行為等)心理特征(興趣愛好、價值觀等等)都在其中
    2. 咱們通過以上這么多內容去給用戶分類,讓人群劃分更加具象。比如說王者、大師、白銀、廢鐵等級的劃分,就屬于咱們看得到的用戶分類(依據操作水平)。同理到設計中大咱們常常分為粘性用戶、忠誠用戶、潛在用戶等等。這些都屬于理解了用戶基本信息后的進一步細化(分層)。分層以后更容易匹配旗鼓相當的對手,如果不通過畫像分層會怎樣?你想想如果你一個廢鐵水平每天匹配到我這個王者,你是啥心情?可能玩著沒兩天你覺得被虐的太慘了沒意思,退游了。我覺得每天虐菜好沒意思,退游了。

    image.png

    用戶角色

    1. 基于用戶畫像創建的虛構人物角色代表特定類型用戶,用來幫助團隊更好地理解用戶需求和設計產品。
    2. 比如說“搬磚的設計師”、“摸魚的領導”等,角色背景(職業、生活方式等),角色目標(使用產品的目的),角色痛點(在使用過程中遇到的問題)
    3. 很多聰明小明可能就問了:“我就是這么做的啊,為啥他們總說一眼假?”你那玩意是不是真的你自己沒數么?這個男人叫小帥,他干了啥干了啥,那個女人叫小美她怎么怎么樣了。
    4. 演示一下我所篩選的諸多作品中大家畫像都是咋寫的:小美、女、24 歲、職場白領、膚白貌美大長腿、愛購物、喜歡鮮花、愛浪漫。瞧瞧你的用戶畫像是不是這樣寫的?看起來這個畫像好像沒啥毛病,可是女孩子都是膚白貌美大長腿啊,都喜歡購物啊,都喜歡花啊!就算不做畫像也能想到這些,這種類型的畫像用在哪個產品里好像都合適。咱就是說這畫像有和沒有不就是沒啥區別么?這個話說了和沒說有啥區別呢?為啥一眼假?因為大家做畫像總是有種廢話文學的趕腳,正所謂“十年磨一劍,五年磨半截”“聽君一席話,如聽一席話”
    5. 用戶角色得是看起來真實的常態的人,是眾多用戶行為的縮影,從真實用戶中提取出來的。這個虛擬人物的特征一定是非常全面的,需要包含他的介紹、個人信息、工作信息、性格特點等等,要把它理解為一個真實的人。
    6. 有伙伴通過用戶畫像輸出的用戶狀態是這樣的:”小美很抑郁很孤獨,小帥也很孤獨吧啦吧啦...“大哥?這就編的離譜,難道用了你的 APP 就不抑郁不孤獨了?這就好比你去看醫生不能只說:“我難受”你要說清楚具體咋不舒服,哪不舒服。你啥癥狀也不說就只說難受,你讓醫生咋辦?
    7. 總結:畫像要真實的、常態的、痛點和需求表現不能泛泛,要具體。

    用戶屬性

    1. 描述用戶特征的具體指標,通常是量化的。
    2. 基本信息(如年齡、性別、地區)、行為數據(如訪問頻率、購買金額)、偏好設置(如喜歡的產品類型、使用的設備)大家可能會覺得用戶屬性和用戶畫像有點區分不開,沒關系,就理解為他是用戶畫像附屬內的的小弟就行了。

    總結:用戶畫像是對用戶的全面描述,用戶角色是虛構的代表性用戶,用戶屬性是用戶群體的可量化特征。三者相輔相成,有助于更好地理解和滿足用戶需求

    image.png

    咱們咋利用畫像中的信息?

    帽子叔叔用來審問你的畫像和你電商產品的畫像那肯定不一樣的嘛~不同的企業對于不同的“嫌疑人”要觀察的點自然也不一樣。

    不同維度下咱們能利用畫像干啥?以下內容僅作為切入點幫助大家理解。

    image.png

    你買直升機么

    基于人口統計特征分類

    1. 關注的內容就是:年齡、性別、職業、收入水平、教育背景等。
    2. 平時拼夕夕給你推薦直升機么?為啥不給你推薦?是因為你不喜歡嗎?這就是電商平臺的個性化推薦,他們會根據的的年齡和性別、收入不同推薦不同類型的商品,拼夕夕可能不是很相信你小小年紀買得起直升機。
    3. 再比如基于用戶畫像的設計的千人千面,設計不同的首頁布局和推薦模塊,以適應不同用戶群體的偏好。

    基于行為特征分類

    1. 包含內容:購買頻率、使用時長、訪問渠道、互動方式等。
    2. 如果你經常剁手平臺就猛猛給你推新品就行了,反正你會買。如果是低頻用戶呢?多展示一些用戶好評激勵你進行購買。
    3. 時間短就給你推修驢蹄子、鍛刀大賽、荒野生存、美女擦邊。在頁面表現上來說如果使用時間長,那咱就可以考慮用什么樣的形式打廣告不會強打斷用戶,因為長時間使用的用戶粘性應該比較高,比較能容忍,那就設計一些植入,例如說某音的小窗廣告入口設計。如果時間短那設計要考慮怎么通過設計吸引,比如說更有趣的彩蛋、點贊觸發感強化等等不多舉例了。
    4. 對于活躍用戶,可以使用動態更新的內容卡片,顯示最新消息和互動。對于不太活躍的用戶,我就使用靜態展示,突出重要通知和精選內容,幫助他們快速了解最新動態。

    基于心理特征分類

    1. 興趣愛好、價值觀、生活態度、個性特征等。
    2. 你喜歡刺激喜歡挑戰不可能,那咱們做設計時可以這樣搞,給用戶設置目標,例如 7 日打卡、例各項比賽 pk、等等,不服輸是吧?好!給你匹配氪金大佬天天虐你、嘲諷你,你能忍么?忍不了你會咋辦?充錢你能變得更強!

    基于生命周期階段分類

    1. 潛在用戶、首次用戶、活躍用戶、流失用戶等。
    2. 針對不同生命周期階段的用戶(如新用戶和老用戶),SaaS 產品可以提供不同的引導策略。為新用戶設計詳細的入門指導和工具提示,而為老用戶提供高級功能的使用技巧和更新通知。

    上面這些你有沒有種似曾相識的感覺?你是不是也想到過這些?其實很多設計師在潛移默化受用戶畫像影響,基本上咱們每一個設計點都可以回溯到用戶畫像中,說人話就是你這啥這樣設計基本都可以在畫像中找到依據。為啥你的畫像做不好,設計做不好呢?只不過是大家沒認真思考過推導過程,產品說是咱做啥。大家可以嘗試把以前做過的功能回推一下,想一想你的設計是在滿足用戶的什么需求,她的需求能對應到以上提到的哪一個分類里面。

    image.png

    打標簽

    用戶畫像就是在打標簽

    請用最簡單的詞匯概括你女票們,你會想到哪些詞匯?“膚白貌美”“優雅”“前凸后翹”“博學多識”“善解人意”“熬夜冠軍”“抬杠運動員”“吃貨”“可愛”“獨立思考”等等,凡是你想到的詞匯都可以理解為是你為她打的標簽,這就是你將女票變成了一個標簽合集。

    這些小標簽咱們還可以繼續做分類(把小標簽歸到大分類中),比如說“膚白貌美”“前凸后翹”可以歸類到“外貌”,形成一個具體的合集。

    image.png

    父子關系

    關于標簽分類:

    比如說你、你女票、你老公、你女票的男朋友、你們四個可以劃分為“男”“女”大分類中,同時還可以歸屬于一個更大標簽“人”中。咱們都是在某些合集和歸類之里。無非是大合集小合集的關系。

    那么針對不同合集采用不同策略。

    比如剛才被氪金大佬虐殺的你,為啥他不虐別人只虐你?你就沒有問題嗎?你的問題可能是因為你同時具備“不服輸”標簽和“多金”標簽,所以系統才會匹配這樣的人給你上壓力。因為你是個不服輸的窮×給你上多大的壓力你也不充錢啊!所以在系統層面上你可能同時具備兩個標簽才會給你推大佬。

    1. 在做畫像時也一定要注意,有時用戶給咱們的信息不見的準確,需要通過用戶行為進行判斷。你的網戀對象一定是異性嗎?不一定吧?之前我玩一款游戲叫《哈利波特》注冊的就是女號,為啥我要注冊女號?因為我想住女生宿舍,可住進以后發現室友都是頂著女號的摳腳大漢!!那系統怎么判斷你是男還是女?如果這個人天天去競技場打 PK,那大概可以判斷是老爺們,如果說這人不修煉技術,天天在游戲里搞換裝、參加舞會,那這個人大概了就是女的。
    2. 舉例子來說,曾有一段時間,淘寶每天給我推薦漂亮小裙子、絲襪、性感內衣。這什么會這樣?有可能是那一段時間我買的衣服都比較中性,一時之間系統對我的性別產生了質疑,所以試探性推薦來看我的狀態,進而判斷我的性別。

    雖說設計師對標簽這個姿勢不需要掌握那么深,但多知道點總不會錯。

    1. 你知道你公司的用戶的標簽是什么嗎?
    2. 你知道這些標簽怎么來的么?
    3. 標簽背后的用戶行為是什么?
    4. 標簽 A 和標簽 B 同時存在時會有啥不同的化學反應?
    5. 大家都在談“用戶分層”那么你們怎么定義忠誠用戶的?他的特性是什么?當然了,這些其實更多的是產品層面的事情,但是如果你一點也說不上來,我只能說你根本不懂用戶。

    咱們繼續八卦一下標簽分類的事

    標簽可分為。靜態標簽、動態標簽、預測標簽

    image.png

    靜態標簽

    靜態標簽

    用戶主動提供的數據,或者你通過手段獲取的數據,一般來說是用戶不咋變的信息,姓名、性別、年齡、身高、體重、職業、興趣愛好、情感狀態、所在地區、設備信息、手機號等等。大概率不會變的信息,總不會今天你是男,明天變成女吧?靜態標簽主要用來了解咱們用戶的基礎需求。

    image.png

    動態標簽

    動態標簽

    動態嘛,他是會變的,這些標簽是有保質期的,需要咱們定期地更新來保證標簽的有效性。比如說用戶的網絡信息,他的上網時長、啥時候上網。比如說用戶的使用習慣,她的頻次、使用時長、使用時間段、是用的移動還是 PC、關閉和打開的頻次間隔。比如說用戶行為,她的購物習慣是啥,價格、品質、頻率、風格傾向是運動還是職場?品牌傾向是啥、復購率是多少、支付方式是啥,她的瀏覽習慣是啥?首頁詳情頁停留多久,是精準搜索還是模糊等等,這里就不舉例子來說了。

    總之這些都是就近發生的具備有很多的不確定性的事兒。

    預測標簽

    她的興趣點、關注點、潛在需求等等,是咱們通過某種特定規則猜出來的。

    比如說你閨蜜是一個漂亮妹妹,情緒穩定,平時也不介入你的情感生活(靜態標簽:女、情緒穩定、無男友)但在某次你和她吐槽你男票時她情緒變得無比激動痛罵渣男并極力勸你分手!(動態標簽:情緒激動、強烈反應、關心朋友)那你會不會懷疑她想搞定你男票?(預測標簽:對你男朋友的潛在興趣、對感情的需求)靜態標簽為我們提供了閨蜜的基本信息,動態標簽反映了她在特定情境下的行為變化,預測標簽則對她的潛在需求和動機進行了推測。這種分析能夠幫助我們更好地理解她的行為和可能的心理狀態。(故事胡編的、如有雷同純屬巧合)

    數據的角度進一步的對這些標簽做切分又可以分成很多種。

    事實標簽、模型標簽、預測標簽

    image.png

    事實標簽

    事實標簽(你的歷史過往)

    事實標簽就是真實的,具體的事,其中也就是姓名啦、年齡啦、生日啦、居住地啥的等等,當然其中還包含購買記錄、瀏覽記錄。這些都是真實在用戶身上生效的事。舉例子來說你的女票問你談過幾個女朋友,你們都交往了多久,分手原因是啥等等,這就屬于在調取你的過往事實標簽。

    image.png

    模型標簽

    模型標簽(你當下都在干啥)

    對用戶的歷史數據分析得出的特征描述,它反映了用戶的行為模式、興趣和偏好,模型標簽屬于是對你的多個真實行為做了一個組合,屬進一步提純。還是繼續說你女票詢問你的事,她得出的答案如果是這樣的。

    交往歷史:

    之前的女朋友數量:8

    平均交往時長:6 個月

    分手原因:沒新鮮感、沒感覺、發現她有問題等

    行為模式:是否在社交媒體上頻繁展示與不同女性的互動:你經常給美女點贊。

    是否有同時與多位女性交往的記錄:你和多個妹妹聊天

    情感態度:

    對待感情的態度:曾玩弄感情

    對女性的評價和態:貶低、物化女性

    結合以上你的事實標簽得出模型標簽:渣男!!!

    通過對用戶標簽的整合,描述用戶的當前特征和行為模式。

    image.png

    預測標簽

    預測標簽(你未來會干啥)

    預測標簽是基于模型標簽生成的未來行為預測,試圖預測你未來可能的興趣或行為。

    利用模型標簽和機器學習算法,預測用戶未來可能感興趣的產品或服務。集合以上的事實標簽和模型標簽不難預測了吧?那就是你遇到了新妹妹還是會出軌。

    image.png

    三者關系

    在舉個例子說一下三種標簽的關系。

    1. 事實標簽(真實的事)你,18 歲,女,上海,購買記錄:買了 5 件短裙。瀏覽記錄:瀏覽了多個香水和時尚配飾
    2. 模型標簽(對你多個標簽的歸類)興趣類別:時尚愛好者行為類型:高頻購買者消費習慣:傾向于購買時尚相關產品
    3. 預測標簽(對你的猜測)可能感興趣的產品健身器材(如連衣裙、潮流外套)健身課程(如手袋、珠寶)流失概率:低(因為你是高頻購買者,表明對平臺的忠誠度高)可能的情感狀態:可能談戀愛(基于購買性感內衣和超短裙的行為推測)

    估計很多伙伴公司連畫像都沒有吧?就算有可能你也沒看過,很多設計師在設計過程中大多時候全靠意淫。雖然很多公司都沒有這些東西,可咱出去找工作面試官就非要問,你說說這不就是欺負老實人嗎!就是欺負你啊,能怎樣?把上面內容吃透就不怕問了!

    把該科普的科普完,這下大家應該能更好的理解用戶畫像有啥用了。

    更好的理解用戶需求、優化產品設計、精準市場營銷、提高用戶留存率、支持決策制定等等。

    image.png

    畫像有啥用 ?

    1. 用戶畫像能幫咱們深入理解用戶需求、動機和痛點“我兒子賊宅,總讓我帶飯,怎么破?”你會不會想到小葵花課堂開課啦!孩子不聽話打一頓就好了~。但是如果你發現這個發帖人的標簽里有“男/大學生”你又當如何?
    2. 針對性設計:這位男大學生的需求是啥?我不想給“兒子”帶飯。痛點是啥?可能是考慮到大家的情感關系。那如何破?
    3. 方案一:他也在寢室里宅不出去,看誰先餓死。
    4. 方案二:建議他也拜一位義父,讓義父給全寢室帶。
    5. 這就是咱們根據用戶畫像得出的針對性方設計案咯~

    通過分析用戶畫像,團隊可以確定哪些功能對目標用戶最重要,從而合理安排開發優先級。

    王二狗、李鐵蛋、張鐵頭都是你的曖昧對象(Tui~渣男)其中你更喜歡李鐵蛋一些,你現在想出去約會,請問在王二狗、李鐵蛋、張鐵頭和劉亦菲中你會和誰去約會??一定是李鐵蛋吧?因為她是你的目標用戶啊,其次可能是王二狗和張鐵頭。你會選擇劉亦菲么?當然不會,因為她并不在你的用戶畫像以內,更重要的是那是我老婆。

    image.png

    自己看吧

    用戶畫像幫助企業識別和細分目標市場,使營銷活動更具針對性和有效性。

    有了用戶畫像,運營不用再擔心廣告像石沉大海。比如,你喜歡貓,用戶畫像就會告訴商家“嘿,這位朋友可能需要貓糧!”然后你的購物頁面上就會出現各種貓咪用品,簡直比你媽還懂你。

    根據用戶畫像提供個性化的服務和內容,增強用戶的黏性和忠誠度。

    1. 了解用戶的需求和痛點后,企業可以主動進行溝通和服務,提升用戶體驗。通過用戶畫像優化產品,讓企業知道該改進什么或者增加哪些新功能。甚至連客服都能更貼心,因為他們已經提前知道你可能需要什么幫助。
    2. 比如說你是賣水果的,忽然發現有一批活躍用戶的活躍度降低了,那得聯系一下這批活躍用戶,為啥最近不買水果了?其中有人一個說:哎~你家的水果有壞果。那此時你應該怎么做?先去查那批水果還有哪些人購買了,是不是他們都活躍度下降了。沒下降?那不管他了,但是那些很在意這件事的人呢?給他道歉、補償、或者其他的舉措。(別罵我是奸商哈~我不賣水果,只是借這個例子給大家說一下他以通過標簽劃分做出不一樣的策略)

    通過分析用戶的行為、興趣和需求,幫助企業精準了解用戶到底是誰,喜歡什么,甚至還可能預測他們下一步會做什么。說白了,就是讓企業從“蒙著眼睛射箭”變成“開著瞄準鏡打靶”。請看下面的圖形化總結,方便大家更直觀理解標簽模型~

    說實話,用戶畫像的執行體系太大了,給用戶打標簽怎么標記才是合理的?用戶的級別到底怎么劃分?和你聊一次天算舔狗,還是聊十次算舔狗?今天他和我聊天了,我標記他是舔狗,如果明天不聊了怎么算?基于用戶當前的標簽能不能衍生出更多的操作場景?這些場景是否真的成立?其中的彎彎繞繞實在是太多了,今天說的內容不一定能完全與你的畫像匹配,大家得根據自身業務去搞。

    image.png

    可以根據這個圖來安排你的腦圖

    以上差不多說完了關于用戶畫像的作用和模型的建立,在簡單的說一說畫像方法吧

    首先咱們為啥要做用戶畫像?

    1. 你都還沒餓,你會想吃大餐么?大概不會,如果要做畫像應該是遇到了某些問題需解決。而且這個問題是貼合實際業務的、涉及到利益的,不然也沒必要解決不是嗎?
    2. 畫像的出發點要結合實際業務訴求、企業效益掛鉤才有用。

    其次你有對業務做梳理嗎?你要針對誰做畫像?對什么業務板塊做畫像?

    1. 你的業務目標是啥?想要達成什么樣的目標?是挽留分手?還是帶她看你家貓后空翻?還是準備求婚?
    2. 你這次的目標是針對誰的?是女朋友 1 號?還是 2 號?還是 3 號?你一定會有一個劃分。是潛在用戶?還是流失用戶?還是誰?咱們要劃分清楚你要針對的用戶群體是誰。

    如果以上的內容你都想清楚了,那針對你的業務目標、用戶群體你需要提取哪些數據呢?你想要得到啥信息呢?

    獲取信息方式

    1. 數據埋點定性畫像、定量畫像、定性+定量畫像(訪談、問卷、焦點小組、AB 測)
    2. 用研體系就過于龐大,沒辦法和用戶畫像同時展開說,想要了解用研的伙伴可以移步我的其他文章,后續會逐步為大家補充其他的用研方法。

    你需要的數據都分布在哪?

    靜態數據、動態數據、預測數據

    以上的信息全都做完了,那考慮一下咱們針對這些數據能做出什么樣的分析,你是不是會推測出新的標簽,或者有新的歸類,是不是能把用戶分層做的更加細致。

    最后舉個畫像例子大家瀏覽一下吧

    image.png

    點明主題 ,用戶畫像的目的是在于想了解用戶的使用場景與其依賴的功能有哪些。(潛在意思是俺要在這些高度依賴功能中找問題。)

    image.png

    image.png

    桌面研究數據 、企業內部數據、問卷數據合集,形成畫像角色標簽合集。

    image.png

    對某類人中的典型用戶跟蹤總結 ,其中包含個人屬性、生活方式、社會屬性、家庭屬性等等。

    image.png

    用戶角色拆解 ,使用車輛的用戶分別都有誰,他們的核心訴求都是啥。

     

    image.png

    列出在不同屬性作用下的用車場景以及功能 。

    image.png

    總結畫像能帶來的切入點在哪里:

    針對前面分析的內容判斷出結果,我們應該在哪里找到設計切入點。(其實這個畫像也是我編的,全都是桌面研究搞來的數據,但是你瞅瞅是不是相對來說比你那個靠譜一些?)

    最后的最后~腦圖串聯一下知識點~

    image.png

    轉載:優設

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

     

    image.png

     

    深度解析|大廠都在用的「選項順序效應」,如何影響用戶決策?

    清陽 設計思維

    數字化產品競爭中,「選項順序效應」被大廠廣泛應用,借首因、近因效應調整選項順序,左右用戶決策。深耕UI/UE設計的蘭亭妙微(藍藍設計)在實踐中發現,它是銜接產品目標與用戶體驗的關鍵。本文結合大廠案例與蘭亭妙微實踐,解析其對用戶決策的影響,提供落地參考。

    什么是選項順序效應?

    選項順序效應(Order Effect) 指用戶面對一系列選項時,選項的呈現順序會顯著影響其決策結果。這種現象主要由兩種認知偏差驅動:

    • 首因效應(Primacy Effect):最早出現的選項因獲得優先曝光,更容易在用戶記憶中留下印象。

    • 近因效應(Recency Effect):最后出現的選項更接近決策時刻,在短時記憶中更為突出。

    在認知心理學層面,這與人類有限的注意力資源、工作記憶容量以及信息加工方式密切相關。用戶并不會嚴格比較所有選項,而是依賴順序線索進行“滿意化決策”(Satisficing)。

    在UX/交互設計中,該效應常見于:

    • 表單與調查(選項順序影響回答傾向)

    • 電商與訂閱套餐(不同順序改變選擇分布)

    • 導航與推薦系統(前置或置底選項更易被點擊)

    核心風險:用戶的選擇可能更多受順序驅動,而非真實偏好。若在設計或研究中忽視這一點,可能導致數據偏差與不公的用戶體驗。

    image.png

    為什么順序效應如此強大?

    1. 注意力分配

    用戶的視覺焦點通常遵循閱讀習慣(從上到下、從左到右),前置位置天然獲得更多曝光。

    2. 記憶機制

    • 首因效應:最早出現的選項因更多復述與加工,更易轉化為偏好。

    • 近因效應:最后出現的選項因處于決策“臨界點”,直接影響最終選擇。

    3. 認知負荷與滿意化決策

    當選項過多時,用戶難以全面比較,會采用“選擇第一個合理選項”的啟發式策略。

    4. UX場景中的放大因素

    • 導航欄或底部菜單:靠前或靠下的功能更易被點擊

    • 訂閱套餐:首位選項被視為“默認選項”,末位高價套餐因“對比效應”更突出

    • 問卷調研:固定選項順序可能導致結果偏差

    核心洞察:用戶的選擇并非完全理性,界面排列與信息呈現方式深刻影響著決策路徑。

    設計場景中的順序效應應用

    1. 導航與功能入口排序

    場景:底部導航欄或首頁主菜單,常將“消息”“首頁”等高頻功能置于最左側或最上方
    邏輯:利用首因效應,確保用戶優先接觸核心任務,降低操作成本

    2. 訂閱套餐與付費選項

    場景:會員訂閱頁常見“基礎版—推薦版—高階版”布局,并對中間檔進行視覺強化
    邏輯:結合順序效應與折中效應,引導用戶選擇中間檔,提升轉化

    3. 表單與問卷選項設計

    場景:興趣選擇、調研問卷
    邏輯:為保證數據客觀性,應采用隨機化選項順序,避免結果偏差

    4. 產品推薦與信息流排序

    場景:推薦列表或信息流
    邏輯:前列選項點擊率與轉化率顯著高于后列,基于“認知吝嗇”原則,用戶傾向于選擇思考成本更低的前列結果

    5. 專業啟示

    • 積極作用:優化排序幫助用戶快速定位高頻功能、常用選項,提升效率

    • 潛在風險:問卷結果可能偏離真實意圖;過度迎合商業目標可能侵蝕用戶信任

    核心思考:順序效應既是交互優化的工具,也可能成為操控用戶選擇的手段。設計師需在效率與公平性間尋求平衡。

    案例分析:順序效應在產品中的實戰

    案例一:美團外賣商家列表

    場景:美團外賣頻道中,頂部Tab固定展示「附近商家」與「特價外賣」兩個入口。滑動時右側動態面板偶發提示引導切換至「特價外賣」,底部導航欄左側按鈕由“外賣”動態切換為“刷新”。

    設計說明

    • 「附近商家」置于首位,符合用戶直覺預期

    • 「特價外賣」雖在次序上處于弱勢,但通過動態引導與樣式差異獲得額外感知加權

    • 底部導航欄的再定義,使用戶在滾動后自然轉向“實時更新”

    啟示:順序效應中,若需突顯非首位選項,可借助動態觸發、UI再編碼、差異化樣式打破固有注意力分布。但過度引導可能帶來注意力稀釋與操作負擔。

    image.png

    案例二:京東外賣首頁頻道與篩選邏輯

    場景

    1. 頂部Tab依次為:精選推薦、品質正餐、咖啡、奶茶果汁、快餐便當……遵循由泛化到具體、主流到小眾的排序

    2. 「精選推薦」下設有“外賣百億補貼”專欄及個性化推薦餐館列表

    3. 餐館列表支持多維度篩選(優惠活動、商家特色、品質優選、配送速度)

    設計說明

    • 將“精選推薦”置于首位,確保用戶第一眼落在平臺最想推廣的內容

    • 高頻需求(品質正餐、咖啡奶茶)置于前列,符合使用概率分布

    • 多維篩選滿足理性比較需求,降低選擇焦慮

    啟示:順序效應不僅體現在Tab排列,更貫穿專欄配置與篩選組合。通過“順序+補貼+篩選”三層遞進,逐步引導用戶決策。但過度強調補貼可能導致用戶忽視多樣化商家,篩選維度過多也可能增加決策成本。

    image.png

    案例三:Instagram底部導航欄

    場景:Tab順序為:首頁、搜索與探索、發布、Reels、個人主頁

    設計說明

    • 首頁首位:確保用戶進入應用后立即接觸社交動態,增強親近感

    • 發布按鈕居中:強化“內容生產”的戰略地位

    • Reels第四位:緊隨發布入口,借助鄰近性推動短視頻增長

    • 個人主頁末位:形成“消費→發現→生產→沉浸→展示”的閉環路徑

    啟示:Tab順序基于用戶心理路徑引導,逐步塑造行為習慣。但戰略傾斜可能稀釋社交關系核心,使平臺從社交轉向純內容消費。

    image.png

    順序效應的邊界:何時會失效?image.png

    1. 信息密度過高:選項過多時,首尾優勢被削弱,用戶更多依賴搜索、篩選或排序功能

    2. 用戶目標明確:用戶帶著特定目的時,順序效應幾乎失效

    3. 習慣與算法干擾

      • 高頻使用形成固定操作路徑

      • 個性化算法動態排序可能降低用戶對首尾推薦的信任

      • 中間選項若使用強烈視覺強調,可能覆蓋順序優勢

    設計的責任:平衡引導與公平

    倫理考量

    • 知情權與透明度:確保用戶理解推薦邏輯,避免誤導或操控感

    • 避免過度操控:首尾位置與稀缺、優惠疊加可能引發焦慮或后悔

    • 平等呈現:在信息密集型平臺,避免無意中造成曝光偏差

    • 長期信任:短期優化若損害信任,將影響品牌長期價值

    反向策略:用順序激發自主選擇

    image.png

    • 刻意打破首尾優勢,將重要選項置于中間或隨機排序,迫使用戶主動瀏覽

    • 內容平臺可通過交替首尾內容,提升冷門內容曝光率

    • 教育平臺:調整習題順序,避免學生只關注首尾任務

    • 電商平臺:將冷門商品穿插中間位置,促成更多探索

    反向使用啟示:順序效應不僅能引導用戶,也可通過反向策略激發主動性與探索欲。設計師應讓心理機制為用戶價值服務,而非單純追求短期轉化。

     

    設計總結

    選項順序效應揭示了:人們面對多個選項時,先看到或最后看到的選項更容易影響決策。這對設計師而言既是機會,也是責任。

    核心洞察

    • 首位和末位天然吸引注意,可用于突出關鍵動作或推薦內容

    • 當用戶目標明確時,順序影響減弱,需結合視覺層級強化信息

    • 有意識地調整或打亂順序,可以讓用戶探索更多中間選項

    最終思考:設計不僅是優化行為,更是尊重用戶決策的自由。巧妙的順序安排,既能提升效率,也能保持體驗的公平與透明。

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

     

    image.png

    5 種用戶瀏覽模式全解:用科學眼動邏輯優化頁面布局

    清陽 設計思維

    眾所周知,我們大部分用戶群體的閱讀習慣是從左到右、從上至下,這與西方文化基本一致。下文將從瀏覽模式、瀏覽路徑、頁面布局三個維度展開分析,結合研究成果與實踐經驗,優化頁面布局,提升用戶閱讀效率與體驗。
     
    早在 2006 年,尼爾森團隊發表《眼睛軌跡的研究》報告,提出了廣為人知的F 型瀏覽模式。除該模式外,經資料梳理,用戶瀏覽網頁時還存在多種典型模式,以下為詳細總結(蘭亭妙微 ui 設計公司)。
     

    一、F 型瀏覽模式:長文本頁面的主流軌跡

    image.png

    F 型是用戶瀏覽長篇內容的核心模式,眼球以掃描為主,而非深度閱讀,眼動熱圖呈現清晰的字母 F 形態。
     
    1. 頂部水平掃視:先聚焦內容區上半部分,形成 F 的頂欄;
    2. 次段短距掃視:向下滑動后,二次水平掃描范圍更短,構成 F 的下橫線;
    3. 左側垂直掃描:最后沿頁面左側快速瀏覽,形成 F 的豎桿。
     
    該模式適配 PC 端、手機端所有文本型頁面,手機端因屏幕更小,F 型軌跡更緊湊。
     

    F 型布局設計要點

     
    1. 頭兩段內容是核心,直接決定用戶是否繼續停留;
    2. 關鍵詞前置,放在標題、副標題和段落開頭;
    3. 左側優先放置關鍵信息,契合用戶垂直掃描習慣。
     

    二、Z 型瀏覽模式:輕信息頁面的最優選擇

    image.png

    Z 型軌跡遵循從左到右、從上到下的古騰堡原則,眼動路徑形成字母 Z,適合無大段文本的展示型頁面。
     
    用戶視線會自然落在 Z 的起點(左上)和終點(右下),這兩個位置是放置核心信息、行動按鈕的黃金區域。
     

    Z 型布局設計要點

     
    1. 重要信息放在左上、右下視覺落點;
    2. 簡化中間區域內容,避免干擾視線流動;
    3. 適合落地頁、首頁、海報型頁面設計。
     

    三、專注瀏覽模式:深度閱讀的特殊場景

    image.png

    專注模式是逐字精讀狀態,用戶會投入大量時間閱讀全文,不會遺漏信息。
     
    僅在任務驅動、強興趣導向時出現,比如學習資料、工作文檔、深度干貨文章等場景。
     

    設計適配建議

     
    1. 減少干擾元素,保持排版簡潔舒適;
    2. 保證文字清晰度、行間距與可讀性;
    3. 無需刻意引導視線,聚焦內容本身即可。
     

    四、斑點瀏覽模式:關鍵詞驅動的碎片化瀏覽

    image.png

    用戶只關注加粗、變色、高亮的關鍵詞,或自身感興趣的信息,眼動熱圖呈現零散斑點狀。
     
    這是用戶快速篩選信息的常見方式,核心是只看重點、跳過無關內容
     

    設計適配建議

     
    1. 核心信息用加粗、對比色突出;
    2. 控制高亮元素數量,避免視覺混亂;
    3. 關鍵數據、利益點單獨標注。
     

    五、分層蛋糕瀏覽模式:標題導向的高效掃描

    image.png

    當頁面有清晰的標題、副標題、分級加粗時,用戶會只看突出層級,快速略過正文,眼動軌跡像分層蛋糕的紋路。
     
    這是僅次于專注模式的高效信息獲取方式,也是用戶最常用的快速閱讀邏輯。
     

    設計適配建議

     
    1. 建立清晰層級:主標題→副標題→重點句→正文;
    2. 用標題提煉核心,讓用戶 3 秒讀懂內容;
    3. 重點內容加粗,弱化冗余文字。
     

     

    關鍵排版結論:圖片與布局的適配邏輯

     
    1. 信息型圖片:對齊排版、Z 型排版差異極小,都能吸引用戶關注;

      image.png

    2. 裝飾型圖片:優先用左對齊排版,用戶可自動忽略,不干擾文字閱讀;Z 型排版會增加圖片曝光,但易分散視線;

      image.png

    3. 首圖至關重要:決定用戶對后續圖片的價值判斷,避免頂部放無意義裝飾圖;
    4. 用戶瀏覽習慣:看完頁面底部會回滑查看,建議添加「回到頂部」功能。
    image.png

     

    最終總結

    1. 長文本用F 型,展示頁用Z 型,多種模式可嵌套使用;
    2. 信息圖優于裝飾圖,無意義圖片會被用戶自動忽略;
    3. 核心信息放視覺熱點區,層級清晰、關鍵詞前置是通用原則;
    4. 適配用戶回滑習慣,優化頁面上下交互體驗。

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

     

    image.png

     

    為什么很多大廠主按鈕不用主題色?原來還有這5個設計方法!

    清陽 交互設計及用戶體驗

    我發現很多人設計主按鈕,只會用主題色。而蘭亭妙微 ui 設計公司在服務大量企業級產品過程中發現,很多大廠設計的主按鈕,并不統一用主題色。

    注意,這里講的不是作為陪襯的次按鈕,而是一個頁面上最顯眼的主按鈕 CTA (Call to Action) 按鈕。

     

    image.png

    一、背景對比色:極致醒目,適配多色背景

    image.png

    核心邏輯:采用與背景色強對比的黑白基礎色,讓按鈕在色彩豐富的界面中脫穎而出,解決主題色因畫面元素干擾而辨識度不足的問題。

    image.png

    大廠案例:閑魚主題色為黃色,搜索按鈕選用黑色;YouTube 極少使用紅色主題色,主按鈕以黑色為主,而在黑底廣告卡片上則切換為白色;Spotify 綠色主題色之外,大量主按鈕采用白色。這類設計的共性是黑白與背景形成反向對比,白色背景配黑按鈕,黑色背景配白按鈕。

    image.png

    image.png

    image.png

    實測驗證:美國電商平臺 Etsy 曾對商品詳情頁 “加入購物車” 按鈕做黃 / 黑配色 A/B 測試,最終選擇黑色方案,數據證明其視覺吸引與點擊轉化效果更優。
     

    image.png

    image.png

    適用場景:頁面包含大量圖片、視頻、彩色元素,需要主按鈕快速抓住用戶注意力的場景,如首頁搜索、內容播放頁核心操作、電商商品頁轉化按鈕。
     

    二、背景相似色:低調適配,避免過度搶眼

    image.png

    核心邏輯:使用半透明色、淺灰色等與背景色調相近的色彩,讓按鈕融入界面的同時保持可識別性,適用于 “需作為主按鈕,但無需過度醒目” 的交互需求。
     
    大廠案例:酷狗短視頻廣告的 “看全集” 按鈕為半透明樣式;喜馬拉雅播放頁按鈕均采用半透明設計;閑魚幫助與客服頁底部主按鈕用淺灰色;金融 App Revolut 的按鈕也以半透明為主。

    image.png

    image.png

    image.png

     

    設計考量:這類場景的背景往往色彩鮮艷(如視頻、彩色廣告圖),疊加主題色易顯雜亂,而強對比色又會過度吸引注意力,甚至干擾用戶核心操作。例如未成年模式的 “不再提醒” 按鈕,若設計得過于醒目,可能導致有實際需求的用戶誤觸。
     

    image.png

    適用場景:背景色彩多變的視頻 / 廣告界面、輔助性核心操作、需避免用戶誤觸的功能按鈕。
     

    三、環境色:隨境變色,實現視覺和諧

    image.png

    image.png

    image.png

    核心邏輯:讓主按鈕色彩跟隨界面環境(如廣告 banner、內容卡片)動態變化,貼合環境色調的同時保證識別性,讓整體視覺更協調。
     
    大廠案例:美圖秀秀首頁主按鈕會隨廣告 banner 的色彩同步調整;YouTube 部分廣告卡片的按鈕,色彩會根據卡片內容進行適配。
     
    設計要點:該方法對技術實現有一定要求,需保證按鈕色彩與環境的適配性 —— 既不能與環境色融合導致識別困難,也不能對比過強破壞整體美感,核心是 “和諧中突出交互”。
     
    適用場景:首頁廣告 banner 旁的核心操作按鈕、個性化內容卡片的交互按鈕、注重視覺美感的創意類 App 界面。
     

    四、模塊色:色彩定類,助力快速識別

    image.png

    image.png

    image.png

    核心邏輯:根據產品功能模塊的固定屬性賦予專屬色彩,讓用戶通過色彩快速關聯按鈕功能,形成視覺記憶,替代主題色的單一標識作用。
     
    大廠案例

    image.png

    1. 行業通用模塊色:國內 App 的會員模塊普遍使用金色,即便品牌主題色不同,酷狗(藍色)、微信讀書(藍色)、攜程(藍色)的會員相關按鈕均為金色;營銷 / 優惠券模塊多采用橙紅色,閑魚(黃色)、QQ 音樂(綠色)、餓了么(藍色)的優惠券按鈕均沿用這一配色。image.png
    2. 產品專屬模塊色:獵聘 App 用橙色代表求職者模塊、藍色代表招聘方模塊,通過色彩劃分不同身份的功能入口。
       
      設計價值:對老用戶而言,無需看清按鈕文字,僅通過色彩就能快速判斷功能,大幅提升交互效率;對新用戶而言,固定的模塊色彩能快速建立功能認知。
       
      適用場景:產品有明確功能模塊劃分的場景,如會員體系、營銷活動、身份選擇、功能分類等。
     

    五、狀態色:色彩表意,規避操作誤觸

    image.png

    image.png

    核心邏輯:利用用戶的色彩認知習慣,將按鈕與操作狀態綁定,用色彩傳遞 “可操作 / 不可操作”“正向 / 負向” 的信息,通過色彩提示規避誤觸。
     
    大廠案例

    image.png

    1. 基礎操作狀態:所有手機的來電顯示界面,均用綠色代表 “接聽(正向操作)”、紅色代表 “拒絕(負向操作)”,貼合大眾的色彩認知習慣。
    2. 電商操作狀態:淘寶直播間商品列表,橙色按鈕代表 “可立即搶購”,藍色按鈕代表 “不可搶購可預約”,用色彩明確區分商品操作狀態。
    3. 風險操作提示:刪除、取消等負面 / 風險操作的按鈕多采用紅色,通過醒目的色彩提示用戶謹慎操作。
       
      設計原則:遵循用戶的普遍色彩認知,不隨意顛覆固有習慣(如避免用綠色代表刪除、紅色代表確認),讓色彩成為操作狀態的 “視覺提示牌”。
       
      適用場景:有明確操作狀態區分的場景、包含風險 / 負面操作的界面、需要用戶快速判斷操作可行性的交互入口。
     

    主按鈕放棄主題色的核心原因與適用場景總結

     

    核心設計邏輯

     
    大廠主按鈕不用主題色,本質是從 “品牌視覺統一” 轉向 “交互體驗優先”,當主題色無法適配界面場景、滿足交互需求時,選擇更貼合實際的色彩方案,具體原因可歸納為 5 點:
     
    1. 界面色彩過于豐富,主題色的醒目度不足;
    2. 環境色彩多變,主題色難以與整體視覺和諧;
    3. 主按鈕為輔助性操作,無需過度搶眼;
    4. 需通過色彩劃分模塊,幫助用戶快速理解功能;
    5. 需通過色彩傳遞操作狀態,避免用戶誤觸。
     

    通用設計建議

     
    當遇到以下 3 種情況時,可直接放棄主題色設計主按鈕:
     
    1. 按鈕周圍的色彩鮮艷、元素豐富,主題色易被淹沒;
    2. 產品有明確的功能模塊劃分,需要色彩建立視覺記憶;
    3. 按鈕為輔助性核心操作,或包含風險操作,無需 / 不宜過度醒目。
     
    主按鈕的色彩設計,最終的核心不是 “是否使用主題色”,而是 “色彩是否服務于交互”。品牌主題色可作為視覺基礎,但在實際設計中,需結合界面場景、用戶需求、操作邏輯靈活調整,讓色彩既貼合產品視覺體系,又能真正引導用戶高效交互。

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

     

    image.png

    從方法到工具,蘭亭妙微設計師帶你高效搞定圖表設計

    清陽 設計資源

    數據可視化,是用視覺語言與數據對話。一份好的圖表設計,不僅要美觀,更要精準傳遞信息、高效輔助決策。蘭亭妙微UI設計公司結合實戰經驗,從圖表選型、設計原則、視覺規范、實用工具四大維度,幫你從零到一做好專業圖表設計。
     

     

    一、數據可視化的核心價值

    image.png

    數據本身是抽象的,可視化是讓數據產生價值的關鍵。它能把復雜數字轉化為直觀圖形,幫我們快速識別趨勢、差異、分布、占比、流轉等核心信息,避免因表達不當導致信息失真。

    image.png

    日常設計中,很多人過度追求視覺效果,卻忽略數據與圖表的匹配度,最終讓好看的圖表失去實用意義。好的可視化,永遠是數據為先,設計為輔
     

     

    二、圖表設計核心方法:先選對,再做好

    image.png

    圖表設計以目標為導向,先明確要傳遞的信息,再匹配圖表類型,三步即可完成正確選型。
     

    1. 圖表選型三步法

    image.png

    (1)讀懂數據:明確核心關系

     
    先鎖定頁面最重要的數據,確定要表達的核心關系:
     
    • 比較:不同類別數據差異
    • 趨勢:隨時間 / 序列的變化
    • 分布:多變量關聯與規律
    • 構成:整體與部分的占比
    • 流轉:流程階段的數值變化
     

    (2)分析用戶:匹配閱讀需求

    image.png

    不同角色關注重點不同:
     
    • 管理者:看整體趨勢、核心結果
    • 業務崗:看細分對比、個體變化
    • 執行層:看明細數據、流程節點
     

    (3)按數據關系選圖表

    image.png

    • 比較類:柱形圖、條形圖、折線圖
       
      柱 / 條形圖:快速對比類別差異,是最通用的選擇;
      image.png
      折線圖:展示連續數據(如時間)的變化趨勢。
    • 分布類:散點圖、氣泡圖、雷達圖

      image.png

      散點圖:看變量相關性;氣泡圖:新增維度用大小表達;雷達圖:多指標綜合對比。
    • 構成類:餅圖、環形圖、樹狀圖

      image.png

      餅 / 環形圖:展示單一維度占比;樹狀圖:呈現層級化結構占比。
    • 流轉類:漏斗圖、瀑布圖、桑基圖

      image.png

      漏斗圖:轉化流程分析;瀑布圖:數值增減變化;桑基圖:數據流向與分配。
     

    2. 信息圖形(Infographic)

    image.png

    偏向藝術化的可視化形式,適合科普、新聞、報告等場景,側重易懂、美觀、定制化,需要設計師具備信息提煉與視覺美化能力。
     

     

    三、圖表設計四大原則

     
    遵循原則,避免信息扭曲,提升可讀性。
     
    1. 準確性

      image.png

      數據真實無扭曲,優先用大眾熟悉的圖表(柱、線、餅);顏色不超過 5 種,降低認知負擔。
    2. 一致性

      image.png

      顏色、樣式、術語全局統一,同一指標固定用同一顏色,保持視覺連貫。
    3. 輔助性

      image.png

      用標題、圖例、交互提示降低理解成本;小眾圖表需加說明,通用圖表保持簡潔。
    4. 可擴展性

      image.png

      適配多設備尺寸,兼顧宏觀(整體)與微觀(單點)數據;通過小圖預覽、大圖交互實現層級展示。
     

     

    四、圖表視覺設計規范

     

    1. 基礎構成

    image.png

    • 標題與說明:清晰點明核心結論,副標題補充數據范圍、時間等背景;
    • 坐標軸與網格:橫軸常用作時間 / 類別,縱軸為數值;網格線密度適中,小圖可省略;
    • 圖形元素:柱、線、點等保持簡潔,適配真實數據與極限場景。
     

    2. 顏色設計

    image.png

    • 用法邏輯:色相區分類別,明度 / 飽和度表達數值梯度;
    • 配色方式:鄰近色(溫和統一)、互補色(強對比突出)、連續漸變(體現數值變化);
    • 品牌適配:沿用品牌色,或從 Logo、素材圖提取配色,保持視覺統一。
     

    3. 數據墨水比

    image.png

    核心:用最少的裝飾,傳遞最多的數據信息
     
    • 保留核心數據元素,刪除無關裝飾;
    • 不過度簡化導致信息缺失,在簡潔與完整間平衡。
     

     

    五、高效圖表設計工具

     
    無需復雜操作,在線 / 開源工具快速出圖:
     
    1. Flourish:在線可視化平臺,模板豐富,支持多數據源導入與一鍵導出;image.png
    2. ECharts:開源免費,配置靈活,兼容多端,適合前端開發與設計師使用;image.png
    3. Tableau Public:拖拽式操作,快速制作交互式儀表盤,支持在線分享;image.png
    4. Informationisbeautiful:創意可視化模板,適合制作高顏值信息圖;image.png
    5. D3.js:前端可視化庫,支持高度自定義交互圖表;image.png
    6. 配色工具:Muzli Colors、Coolors、Brand Colors、Flat UI Colors。

       

      轉載:優設

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

    經典圖標設計標準,零基礎也能快速掌握

    清陽 圖標設計文章及欣賞

    谷歌Material Design的圖標設計標準正在重新定義界面視覺語言。蘭亭妙微UI設計公司深度解析從簡潔性、幾何形狀到風格統一的三大核心原則,詳解24dp標準尺寸下的網格系統與布局規范,并揭秘復雜圖標的細節處理技巧。無論是圓角控制還是描邊粗細,這套方法論讓零基礎設計師也能快速掌握專業級圖標設計。

    今天分享的是「圖標設計準則」。圖標是界面設計里的 “剛需元素”,一個小圖標能快速傳遞很多信息。好的圖標需要兼顧簡潔、現代、友好。但圖標的尺寸很小,設計時既要嚴格遵守設計規則,又得清晰表達信息,這樣才能保證整套圖標的風格統一、辨識度高。

    今天就來聊聊大廠在用的圖標設計原則和設計規范,配合案例進行設計分析~

    01 圖標設計的3個核心原則

    ① 形式夠簡潔

    給大家舉個例子,就說下面的小船圖標,想讓圖標清晰好認,就得做減法,那么用正面的簡約船身造型最合適。

    如果圖標設計的過于細致,例如圖標中添加了船帆、桅桿或者旗幟等細節,太寫實的圖標不僅會降低識別速度,還會破壞整套圖標的視覺統一性。

    設計總結:

    ? 簡化圖標造型,提升清晰度和辨識度

    ? 拒絕過度寫實,避開復雜繁瑣的設計

    ② 多用幾何形狀打底

    使用幾何圖形和統一的基礎形狀來設計圖標,能打造出清晰醒目的視覺感受。哪怕結構簡單,也能保持清晰的形態,縮小到小尺寸時也照樣容易分辨。

    反過來講,盡量少用那些纖細、松散的不規則形狀,它們會破壞線條的連貫性,讓整套圖標看起來亂糟糟的,沒個統一的調性。

    設計總結:

    ? 靠幾何圖形和統一的造型,打造醒目視覺效果

    ? 少用纖細、不規則的形狀

    ③ 整套風格保持一致

    這里給大家看一組風格統一的圖標示例。對品牌識別和系統適配來說,保持圖標集的視覺一致性太重要了。

    要是把不同風格的圖標混在一起用,用戶根本沒法把它們當成“一家人”。所以同一套圖標里,不管是形狀、線條粗細,還是比例、邊角處理,都得按同一個標準來。

    設計總結:

    ? 單套圖標集里視覺風格要保持統一

    ? 千萬別混搭不同風格的圖標

    02 圖標尺寸怎么選?

    在谷歌的Material Design 3 設計規范中,標準 (基線) 圖標尺寸是24dp×24dp,設計時建議按100%的比例來做,這樣能保證像素級的精準度。

    除了這個標準尺寸,還有20dp、40dp、48dp這幾種常用尺寸可以選:

    20dp:適合用在桌面端、緊湊布局,或者那些小尺寸的視覺元素

    40dp/48dp:針對顯示器、大屏幕,還有標題欄這類特殊場景

    03 標準圖標布局

    設計圖標時,內容需要放在有效區域內里。有效區域是指頁面滾動或適配不同設備時圖標不會被遮擋的“安全可視區域”。

    如果想讓圖標的視覺沖擊力更強,可以讓內容延伸到有效區域和裁剪區域之間的留白處,但不能超出裁剪區域,不然圖標很容易被裁剪顯示不全。

    具體要怎么布局呢?看下面這兩點就夠了:

    ① 有效區域:圖標內容要放在20dp×20dp的范圍內,四周各留2dp的邊距

    ② 邊距:給有效區域留出2dp邊距,既能讓圖標和周圍元素拉開視覺距離,又能讓整體看起來更平衡

    接下來通過一個圖標案例來簡單總結一下:

    上圖從左到右分別代表了在有效區域、在有效區域和裁剪區域、在裁剪區域之外創建的圖標案例。

    設計總結:

    ? 圖標內容保持在20dp×20dp的有效區域里,記得留2dp邊距?? 想加視覺沖擊力?內容可以延伸到邊距區域

    ? 任何情況下,圖標都不能超出裁剪區域

    ① 網格和關輔助線

    一套圖標中可能有的是圓形,有的是方形,那怎么才能保證形狀不同的圖標保持視覺大小的一致性呢?

    這種情況大家在設計圖標時應該都碰到過,解決方法可能大多是通過眼睛對比查看,把看著小的圖標調大一些或者把看著大的圖標調小一點。這種方法效率不高,而且設計出來的圖標大小不容易保持一致性。

    這里提供一個更科學和高效的輔助圖標設計方法——使用網格和輔助線,照著這些輔助線來設計圖標,能輕松保持比例一致。

    例如常用的24dp×24dp圖標網格,由正方形、圓形、豎矩形、橫矩形這四種基礎輔助線構成。它們就像圖標的“骨架”,能幫所有圖標保持統一的比例和對齊效果,哪怕放大10倍看,結構也照樣清晰。

    給大家拆解一下這四種輔助線:

    方形輔助線:邊長18dp,是圖標的基礎平衡基準。比如圖表類圖標就可以照著這個方形來畫,保證比例穩定。

    圓形輔助線:直徑20dp,用來設計圓潤平衡的圖標。像地球圖標用這個圓形打底,就能和其他圖標和諧搭配。

    垂直矩形輔助線:高20dp、寬16dp,適合強調縱向比例的圖標。比如文檔圖標圍著這個豎矩形設計,比例會特別清晰。

    水平矩形輔助線:高16dp、寬20dp,適合橫向比例的圖標。像郵件圖標用這個橫矩形當基礎,形狀會很均衡。

    04 圖標結構解析

    一個完整的圖標,由圓角、起始/結束點、內部形狀、外部輪廓等組成。

    ① 圖標圓角

    這里重點說下大家容易踩坑的“圓角”的設計:例如下圖的銀行卡圖標,采用外角2dp圓角、內角尖角的設計,這樣既柔和又利落。

    如果把圓角做得太大,如下圖左側文檔圖標,圖標的辨識度就會下降;如果一個圖標中混用不同半徑的圓角,如下圖右側的圖標,整個圖標看著就會很雜亂。

    設計總結:

    ? 按規則設置圓角,統一圓角半徑

    ? 避免圓角半徑過大/半徑混用的情況

    ② 描邊粗細

    推薦的圖標描邊粗細是2dp或常規 (400),也可以根據需求靈活調整,例如在MD3設計規范中就提供了100 (細)到700 (粗)的多種選擇。

    這里有兩個小技巧:

    設計直角線性圖標時,描邊的末端盡量做成直角,例如下圖左側的箭頭圖標,45度切割的直角就很清晰;在下圖右側的添加圖標中,內部的加號也采用了2dp的描邊粗細,與外輪廓保持一致。

    另外要注意一套圖標需要保持相同的描邊粗細。如果描邊x粗細不一致,不僅會模糊圖標形狀,還會破壞視覺一致性。

    設計總結:

    ? 描邊粗細保持統一,直角圖標末端也用直角

    05 復雜圖標怎么處理?

    如果圖標需要一些精細的細節,可以通過一些靈活的調整來提升辨識度,但不能扭曲基礎的幾何形狀或破壞整體比例。

    比如回形針圖標,為了在24dp的空間里放下多個曲線,可以把 2dp的標準描邊粗細微調成1.5dp;再比如拉面圖標,下面的碗作為托底采用2dp的粗描邊,上面的筷子拉面等元素細節更多,則采用1.5dp的細描邊,讓細節更清晰。

    還有一個小原則:設計復雜圖標時,盡量保持正面視角,別做傾斜、旋轉的等距或者3D效果——多余的深度感會增加識別難度。

    設計總結

    ? 正面視角設計,細節微調不跑偏

    ? 少用傾斜、旋轉的等距/3D呈現方式

    最后

    圖標是一種高效的視覺語言,能打破語言壁壘,快速傳遞信息。但它的優勢,必須建立在清晰的結構和統一的規則之上。

    設計時基于標準的輔助網格走,保持比例均衡、視覺重量一致,設計出的圖標才不會喧賓奪主,反而能提升整個產品的用戶體驗。

    轉載:人人都是產品經理

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

     

    image.png

    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

     

    日歷

    鏈接

    個人資料

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

    存檔

    主站蜘蛛池模板: 久久亚洲男人第一av网站| 久久亚洲精品情侣| 久久精品亚洲精品无码| 一级在线观看| 韩国三级hd中文字幕有哪些| 377人体粉嫩噜噜噜| 可以免费观看的av毛片下载| 久久久国| 好吊一二三区| 极品少妇hdxx麻豆hdxx| 97超碰国产精品无码分类| 蜜臀尤物一区二区三区直播| 在线观看黄网址| 日本一卡2卡三卡4卡免费网站| 中文字幕亂倫免賛視頻| 欧洲精品久久| 精品人妻中文无码av在线| 精品日韩欧美一区二区在线播放| 影视先锋男人无码在线| 九九热九九热| 色狠狠久久av大岛优香| 99久久综合狠狠综合久久止| 超级碰97直线国产免费公开| 污视频网站在线| 日老女人视频| 国产成人麻豆精品午夜福利在线| 欧美重口另类在线播放二区| 久久在线精品视频| 麻豆av剧情| 久久精品国产色蜜蜜麻豆| 午夜福利麻豆国产精品| 久久精品一区二区三区不卡牛牛 | 96av在线| 亚洲国产成人精品女人久久久| 又大又爽又黄无码a片| 九九热精品视频| 美女自拍视频| 亚洲成aⅴ人在线观看| 久久精品青青草原伊人| 欧美巨大黑人精品一.二.三| 中文字幕有码视频|