首頁

以用戶為中心的交互設計思維

ui設計分享達人 用戶研究

聊聊關于設計思維的內(nèi)容，會從產(chǎn)品設計、體驗設計、交互設計三個方面入手。
目前是第三篇，關于交互設計思維的內(nèi)容。到這里設計思維的內(nèi)容全部結束了。
感謝
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
 


作者：DesignLink
鏈接：https://www.zcool.com.cn/article/ZMTY0OTg1Mg==.html
來源：站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權，非商業(yè)轉載請注明出處。
評論(0) 瀏覽(169)

AI創(chuàng)作工具的「可控性」與「用戶體驗」博弈

ui設計分享達人 設計管理與成長

這兩年生成式ai爆發(fā)性增長并且重塑數(shù)字創(chuàng)作的工具生態(tài)。從文本生成、圖像視頻生成以及模型訓練，可以說無法離開ai，ai的介入讓創(chuàng)意生產(chǎn)變得前所未有的高效簡單，但同時也帶來了體驗上的困境，例如我們在使用自動化生成便利的同時，還能保持對創(chuàng)作過程的深層控制？比如在進行文生圖或者線稿轉3D的流程中，我們?nèi)绻刂颇硞€部分的設計表現(xiàn)，需要利用多個方法才能完成，僅僅通過提示詞的修改并無法完成，這個矛盾在之前的SD等開源模型中非常明顯；
AI創(chuàng)作工具的「可控性」與「用戶體驗」博弈
 
 
 
算法模型的開放讓設計達到了無限的可能，但更多設計師卻被迫在控制權和易用性之間做出了妥協(xié)，當重復一個流程無法生成滿意的圖象時，大多情況都是基于一個“不滿意”的圖像進行優(yōu)化，我把這個理解為用戶心理上的妥協(xié)；
AI創(chuàng)作工具的「可控性」與「用戶體驗」博弈
 
 
以節(jié)點式工作流工具ComfyUI為例，其通過可視化編程賦予用戶對Stable Diffusion生成流程的精細控制權，允許自由組合模型、調(diào)節(jié)參數(shù)、插入預處理模塊，成為專業(yè)創(chuàng)作者的首選工具。然而，這種高度自由的設計也帶來了顯著的認知負擔：錯綜復雜的節(jié)點連線、晦澀的參數(shù)術語、缺乏引導的開放式畫布，讓0基礎設計望而止步；數(shù)據(jù)顯示，超過67%的新用戶在首次使用ComfyUI時因“界面混亂”而放棄進一步探索（來源：ComfyUI社區(qū)調(diào)研）。這一現(xiàn)象揭示了生成式AI工具設計的核心矛盾——系統(tǒng)的靈活性與用戶的心智模型之間如何實現(xiàn)平衡？
AI創(chuàng)作工具的「可控性」與「用戶體驗」博弈
 
 
一、核心問題與矛盾
1、設計師對“控制權”的需求本質
安全感需求：
用戶希望理解生成過程（分布控制、seed數(shù)值、CFG），避免黑箱帶來的不可預測性；
注：大多數(shù)AI工具（如Midjourney）像一臺自動售貨機——輸入提示詞，隨機吐出一張圖片。用戶無法知曉AI為何生成一只三頭六臂的貓，只能反復“抽卡”直到滿意。
 
創(chuàng)造性需求：
通過精細化的控制實現(xiàn)獨特的風格，例如分布提示，基于大模型訓練出來的lora，不同lora模型融合后的混合模型，這些需要付出很大的學習成本和時間才能滿足，我個人理解ai給設計師通往目標的過程中搭建了不同的道路，但設計師如果在沒有導航的情況下要達到這個目標，中間可能會輾轉反側，也可能一條道路就能到達目的地；
AI創(chuàng)作工具的「可控性」與「用戶體驗」博弈
 
 
效率需求：
自動化設計（如MJ和國內(nèi)其他一鍵生圖的ai產(chǎn)品）可以降低設計的操作成本，但同時犧牲了可控性；
AI創(chuàng)作工具的「可控性」與「用戶體驗」博弈
 
 
2、comfyUI的設計矛盾
過度控制悖論：
ComfyUI試圖打破黑箱，將AI拆解成可調(diào)節(jié)的“齒輪組”（如調(diào)節(jié)“采樣器”改變畫質、用“ControlNet”控制構圖）。但當用戶面對50多個參數(shù)和上百種節(jié)點時，反而因信息過載陷入“該調(diào)哪個參數(shù)？連錯節(jié)點會爆炸嗎？”的決策癱瘓。
AI創(chuàng)作工具的「可控性」與「用戶體驗」博弈
 
 
過高的配置要求：
comfyUI解決了MJ帶來的黑箱效應，但同時也帶來了物質上的門檻，設計師需要配備更高的配置或者使用第三方租用云電腦等才能運行，否則前者就會造成漫長的等待，后者則需要花費大量的財力，對于設計師而言反而是造成了時間上的負荷；
AI創(chuàng)作工具的「可控性」與「用戶體驗」博弈
 
 
功能維度：
節(jié)點系統(tǒng)支持無限組合，但缺乏對用戶意圖的主動理解，如自動推薦節(jié)點；
AI創(chuàng)作工具的「可控性」與「用戶體驗」博弈
 
 
認知維度：
參數(shù)暴露（如CFG Scale、Sampler）提供控制感，但引發(fā)“選擇過載”實際使用過程中，如果是普通玩家，無法短時間內(nèi)通過這些參數(shù)來控制結果，核心還是在于認知門檻過高；
AI創(chuàng)作工具的「可控性」與「用戶體驗」博弈
 
 
交互維度：
自由連接節(jié)點導致邏輯混亂（如錯誤連線無及時提示），增加調(diào)試成本。
AI創(chuàng)作工具的「可控性」與「用戶體驗」博弈
 
 
我把ControlNet的“負面條件”打亂連接到“正面clip文本框”上，而采樣器的“負面條件”直接連接到“負面clip文本框”內(nèi)，整個過程是不會出現(xiàn)任何報錯提示，但是當運行調(diào)試的時候就會運行失敗，提示ControlNet缺少負面條件，ControlNet（應用）缺少負面條件輸出等問題，眾所周知對于一些低配玩家，運行一次需要等很久，等到最后發(fā)現(xiàn)生產(chǎn)出來一個“報錯”！??！
AI創(chuàng)作工具的「可控性」與「用戶體驗」博弈
 
 
二、對比分析：comfyUI和midjourney
AI創(chuàng)作工具的「可控性」與「用戶體驗」博弈
 
 
當設計師想生成“一只穿宇航服的柴犬”，Midjourney可能輸出卡通風格或超現(xiàn)實照片，設計師只能通過追加提示詞（如“3D、黏土”）逼近目標，不停的抽卡；
（實在不想用mj了，下面的圖本地跑的，大概的意思一樣就是不停的抽卡抽卡）
AI創(chuàng)作工具的「可控性」與「用戶體驗」博弈
，
在ComfyUI中，設計師可以強制指定：用FLUX模型生成基礎圖像，然后加載相關LoRA模型，在添加個視覺風格遷移的模型，添加宇航服，在添加個視覺風格模型，連接OpenPose節(jié)點調(diào)整柴犬姿勢，最后用放大模型，放大畫質；但我就想說：我只是想畫只貓，為什么要弄這么復雜。。。
AI創(chuàng)作工具的「可控性」與「用戶體驗」博弈
 
 
關鍵結論：
ComfyUI的“高可控性”吸引專家設計師，但普通設計師或者0基礎設計師因認知負荷大多放棄使用。Midjourney通過“限制控制權”降低門檻，但設計師可能因無法干預細節(jié)感到焦慮。
三、comfyui沖突點和機會點
為什么說這個呢，因為comfyui目前是趨勢ai，核心的生成邏輯包括實際應用都已經(jīng)大于mj了，所以接下來的內(nèi)容也是圍繞comfyui拆解的；
1、參數(shù)暴露vs認知負荷
問題：
ComfyUI將所有參數(shù)（如LoRA權重、VAE選擇、采樣器、各種模型加載器）暴露給用戶，導致界面信息過載。
例如：
設計師需要同時調(diào)整“提示詞權重”“采樣器類型”“ControlNet強度”時，易混淆參數(shù)優(yōu)先級，對于這個結果的影響，是采樣器類型問題呢還是ControlNet的數(shù)值不對呢，最后我猜大多人過程都是一個個試一遍，最后哪個效果好用哪個；
思考點：
動態(tài)參數(shù)分組，根據(jù)生成的目標隱藏無關的參數(shù)，比如當輸入完成“提示詞”后，可以識別出輸入的提示詞類型，生成一個3d風格海報，那么基于這個提示詞，就可以提前預判出跟3d風格海報相關的參數(shù)都可以隱藏；參數(shù)依賴的可視化，通過邏輯線的方式標記他們之間的關系，例如CFG與采樣步數(shù)，通常來講CFG數(shù)值越高生成的圖越接近提示詞，但是圖像質量會下降，采樣步數(shù)越高生成的圖質量就越高，那么問題來了，當設計師調(diào)整CFG數(shù)值時，是不是可以標記或者提示設計師采樣步數(shù)的變化，以此來達到最優(yōu)解；
下方示例
AI創(chuàng)作工具的「可控性」與「用戶體驗」博弈
 
 
2、自由連接vs邏輯錯誤
問題：
節(jié)點可任意連接，但缺乏邏輯校驗目前comfyUI中只是告訴設計師如果兩個節(jié)點本身沒有前后關系的情況下不可以連接（沒有節(jié)點對應的收入口）另一種情況是兩個節(jié)點在一個工作流中都能起到作用，但是節(jié)點是多功能化的，連線的時候可以正常連接，最后運行的時候就會出現(xiàn)某某節(jié)點不匹配。
例如：
設計師錯誤連接ControlNet預處理器與VAE節(jié)點，導致生成失敗且無報錯提示。
思考點：
實時邏輯校驗，在設計師連線時提示沖突（如“該節(jié)點僅接受潛空間輸入”）。
工作流自檢模式，一鍵檢測缺失節(jié)點（如缺少“提示詞編碼器”時提醒用戶）。
AI創(chuàng)作工具的「可控性」與「用戶體驗」博弈
 
 
四、設計師心理與工具的“錯位戰(zhàn)爭”
生成式AI工具的設計矛盾，本質上是人類認知模式與技術邏輯的沖突。以ComfyUI為例，其設計暴露了以下深層問題：
1、“技術透明化”的認知陷阱
ComfyUI將AI生成過程拆解為節(jié)點，試圖通過“透明化”提升用戶信任，但普通人并不需要（也無法理解）技術細節(jié)；不知道你們有沒有，當我第一次看到“VAE解碼器”“潛在空間降噪”等節(jié)點時，大腦會觸發(fā)“意義建構焦慮”——“這些詞和我想要的圖片有什么關系？”
AI創(chuàng)作工具的「可控性」與「用戶體驗」博弈
 
 
2、控制權的“虛假承諾”
ComfyUI看似賦予用戶完全控制權，但多數(shù)參數(shù)的實際影響難以預測（如CFG值從7到8可能導致畫風突變）這類似于讓設計師駕駛一輛方向盤與輪胎無機械連接的汽車，轉動方向盤時，輪胎可能隨機偏轉。設計師誤以為“控制節(jié)點=控制結果”，實則是“在黑暗中調(diào)整未知旋鈕”；
AI創(chuàng)作工具的「可控性」與「用戶體驗」博弈
 
 
3. 技術極客與大眾的“認知斷層”
開源社區(qū)的理想：“人人可 Hack”的民主化工具；現(xiàn)實問題是開發(fā)者設計節(jié)點時默認用戶理解SD原理（如Latent Space、擴散模型、euler_ancestralcai、dpmpp_2m），但普通用戶只關心“如何讓圖片更逼真”；這種斷層導致ComfyUI的文檔充滿技術術語，而非用戶目標導向的指南（如“修復模糊人臉”對應哪些節(jié)點組合），這也是技術工具與用戶體驗的博弈；
AI創(chuàng)作工具的「可控性」與「用戶體驗」博弈
 
 
五、對于comfyUI的暢想
1、適配不同能力的設計師
專家模式：保留完整的節(jié)點和參數(shù)，讓這類設計師自由編輯；
精簡模式：隱藏底層參數(shù)，僅僅提供目標導向的選項；
自動化操作：根據(jù)提示詞推薦采樣器、cfg數(shù)值等組合，例如提示詞是自然語言，那就匹配關于flux模型的專屬采樣器；
AI創(chuàng)作工具的「可控性」與「用戶體驗」博弈
 
 
2、智能節(jié)點推薦引擎
目標推薦：輸入“生成賽博朋克城市”后，自動推薦“SDXL模型+ControlNet邊緣檢測+色調(diào)調(diào)整節(jié)點”；行為預測：分析歷史工作流，推薦高頻使用的節(jié)點組合（如“LoRA模型+分層提示詞”）；
3、可解釋性反饋面板
參數(shù)與結果的實時性：實時顯示調(diào)整CFG值對圖像細節(jié)、對比度的量化影響。節(jié)點的貢獻度分析：生成后標記關鍵節(jié)點（如“ControlNet貢獻度72%”），幫助用戶理解流程。
六、總結：控制的幻覺與設計的謙卑
ComfyUI揭示了生成式AI時代的核心矛盾——技術的能力越強大，人類越需要承認自身認知的局限性。工具設計不應追求“上帝模式”，而需尋找“剛剛好的控制權”給用戶“扳手”而非“零件庫”：提供高層級調(diào)節(jié)維度（如“畫面精細度”“風格偏離度”），隱藏底層技術參數(shù)，并不是每個設計師都是工程師的角色；大多設計師的角色只是維修工；擁抱“不完美的人性”：允許用戶保留“我不知道為什么要調(diào)這個，但調(diào)了就有用”的玄學操作，而非強迫所有人成為AI工程師。重新定義“控制”：從“絕對掌控流程”轉向“有效影響結果”，讓AI的不可預測性成為創(chuàng)意催化劑而非焦慮來源。


作者：愛吃貓的魚___
鏈接：https://www.zcool.com.cn/article/ZMTY1MDQ2OA==.html
來源：站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權，非商業(yè)轉載請注明出處。
 
評論(0) 瀏覽(150)

產(chǎn)品設計如何利用心理學

ui設計分享達人

產(chǎn)品設計的成功除了依賴設計方案和技術實現(xiàn)，還與用戶的心理密切相關。用戶心里決定了我們用怎樣的設計策略解決問題。我們常認為人們做決策時是理性的，但其實用戶行為經(jīng)常是非理性，會受到情緒、習慣和社交環(huán)境的影響。了解這些心理學規(guī)律能幫助我們更好地的預測和引導用戶行為，優(yōu)化產(chǎn)品體驗，提高用戶的粘性、留存率和轉化率，從而產(chǎn)品商業(yè)價值最大化。
產(chǎn)品設計如何利用心理學
 
 
產(chǎn)品設計如何利用心理學
 
 
產(chǎn)品設計如何利用心理學
 
 
產(chǎn)品設計如何利用心理學
 
 
產(chǎn)品設計如何利用心理學
 
 
產(chǎn)品設計如何利用心理學
 
 
產(chǎn)品設計如何利用心理學
 
 
產(chǎn)品設計如何利用心理學
 
 
產(chǎn)品設計如何利用心理學
 
 
產(chǎn)品設計如何利用心理學
 
 
產(chǎn)品設計如何利用心理學
 
 
產(chǎn)品設計如何利用心理學


作者：DesignLink
鏈接：https://www.zcool.com.cn/article/ZMTY1MDk0MA==.html
來源：站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權，非商業(yè)轉載請注明出處。
評論(0) 瀏覽(160)

關于設計組件庫，一些新思考

ui設計分享達人

關于設計組件庫，我們有一些新思考
 
 
 
從網(wǎng)上搜索設計組件，我們能找到各種對外公開的設計組件庫，同樣還有不少或概括或詳細的文章，手把手教你“如何搭建一個好的設計組件庫”，但這些方法論很少探討面對C端組件頻繁增改、設計規(guī)范動態(tài)調(diào)整，如何高效賦能業(yè)務設計交付的相關內(nèi)容，但這恰恰是搜索業(yè)務面臨的關鍵問題。
 
搜索是一個“牽一發(fā)而動全身”的業(yè)務，每一個微小的設計細節(jié)都有可能影響各個業(yè)務的數(shù)據(jù)指標，一個“好的設計組件庫”需要以一種潛移默化的方式讓設計師掌握設計規(guī)范，完成合規(guī)的設計，從這個角度而言它應該比較
「好懂」
。
 
而作為服務于整個設計團隊的公用設計組件庫，面對每月數(shù)以萬計的調(diào)用次數(shù)，它必須保障最基本的易用性，應該非常
「好用」
。
 
同時，面對頻繁迭代，“好的設計組件”還需要保持最快的更新速度，為各個橫向團隊提供正確的樣式，從這個角度來說它還要
「好維護」
。
 
因此，
「好懂、好用、好維護」
是搜索設計語境下，對一個“好的設計組件”的定義。
 
關于設計組件庫，我們有一些新思考
 
 
 
接下來，我們將從這三個「好」入手，分享搜索設計組件庫在升級過程中的一些思考，希望能和大家共同探討。
 
關于設計組件庫，我們有一些新思考
 
 
 
 
關于設計組件庫，我們有一些新思考
 
 
 
“萬丈高樓平地起”，我們先來說說如何從零開始構建一個既符合設計規(guī)范又易于理解的設計組件。
 
首先，在搭建組件時，我們可以考慮采用
多層嵌套
的方式，即組件(Component)內(nèi)部嵌套變體(Instance)。這種方式不僅能省去組件搭建和修改過程中的重復操作，甚至還能在解綁組件時，通過選中內(nèi)部的子組件圖層進行解綁，大大簡化了搭建和使用雙方的操作流程。
 
在多層嵌套的思路下，我們可以進一步用
“底層靈活、上層收斂”
來指導組件的搭建。這意味著底層變體的形式足夠多樣，能夠支持大部分的狀態(tài)切換，而在上層組件搭建的過程中顯性地加強規(guī)范的指引(如規(guī)范中不允許使用的樣式不對外展示)，以降低超出規(guī)范設計的可能。
 
具體的搭建流程可以大致分為三步：
場景收集和分析、搭建基本變體組、拓展高階變體組
。
 
我們將通過視頻組件搭建的生動案例，具體介紹如何依據(jù)“底層靈活、上層收斂”原則來搭建組件庫，使得組件本身既足夠靈活，又能起到足夠的約束作用。
 
關于設計組件庫，我們有一些新思考
 
 
 
在著手搭建某類組件時，我們首先通過規(guī)范確認和場景遍歷，廣泛收集各類變體。隨后，從我們能想到的所有維度出發(fā)，對這些變體進行細致定義。這樣，我們就能得到一張詳盡描述組件變體性質的表格。表格的第一列依次列出變體1、變體2、變體3等，而第一行則羅列出各種維度，如寬度、比例等。通過這種方法，我們可以將原本零散、雜亂的組件變體描述，系統(tǒng)地歸納整理成一張清晰明了的表格。
 
關于設計組件庫，我們有一些新思考
 
 
 
表格通過不同維度來唯一確定一個變體，這些維度可大致分為兩個特性和一個共性。共性指的是所有變體在這一維度上均保持一致，常見特性則涵蓋了最常見的分類性質，如寬度、高度、數(shù)量和優(yōu)先級等，而業(yè)務特性則與具體業(yè)務緊密相關。
 
在搭建組件時，我們可以遵循
「共性-常見特性-業(yè)務特性」
順序，這樣的順序有助于降低理解成本，因為最符合心智的分類被置于外層，同時底層的組件又保持了足夠的靈活性，便于切換各種變量。對于業(yè)務特性，我們可以根據(jù)實際情況靈活處理，既可以將其作為基本組件的延展，也可以不將其納入組件范疇。
 
以視頻組件為例，我們從表格中獲取的信息如下：
 
  •  
    視頻尺寸及其組合是最符合用戶心智的變體選擇；
  •  
    播放狀態(tài)是所有變體的共有性質；
  •  
    自動播放情況與業(yè)務相關，但不一定需要在組件庫中呈現(xiàn)；
  •  
    高階組件僅涉及少部分尺寸的組件，應在完成基本組件搭建后再進行。
 
據(jù)此，我們可以輕松梳理出視頻組件搭建流程的優(yōu)先級：
 
  1.  
    播放狀態(tài)作為共性，應首先搭建；
  2.  
    基本組件尺寸和組合是最符合用戶心智的變體選擇，應緊隨其后；
  3.  
    高階組件在完成基本組件搭建后再進行。
 
值得注意的是，“封面槽位”是“播放狀態(tài)”中的一個圖層。根據(jù)“底層靈活、上層收斂”的原則，我們將其插入到搭建播放狀態(tài)之前。因此，視頻組件的最終搭建流程為：
 
  1.  
    封面槽位；
  2.  
    播放狀態(tài)；
  3.  
    基本組件尺寸和組合；
  4.  
    高階組件。
 
關于設計組件庫，我們有一些新思考
 
 
 
完成對視頻組件搭建的分析，我們就可以有條不紊地開始搭建組件了。先搭建基本組件視頻組件，再用基本組件搭建高階組件。這一步驟雖然為大家所熟知，但仍需格外注意，如配置項的設置要力求合理，也可以融入設計規(guī)范和使用規(guī)范，同時還應將一些搭建過程中的零散組件集中收納避免被調(diào)用。關于這些具體的注意事項，我們將在后續(xù)部分進行詳細闡述。
 
至此我們完成了組件搭建的基本流程，一個達到及格線的視頻組件就誕生了。據(jù)統(tǒng)計，優(yōu)化后每次調(diào)用視頻組件將節(jié)省至少10步的點擊操作！
 
 
關于設計組件庫，我們有一些新思考
 
 
 
完成了一個基本組件的搭建后，我們可以轉換視角，從使用的角度來審視并檢查這個組件。
 
我們期望，從插入組件變體、切換組件配置，再到最后的解綁組件，整個流程都能縱享絲滑且穩(wěn)定可靠，確保業(yè)務設計師在使用過程中獲得最佳體驗。
 
關于設計組件庫，我們有一些新思考
 
 
 
我們可以一步步來審視組件的使用過程。首先是插入組件，據(jù)觀察，通常有三種方式，①在左側的資產(chǎn)面板(Assets)中直接找到對應組件并插入；②通過查閱設計規(guī)范，鎖定所需的變體后復制粘貼；③選中一個不需要的組件，通過右側的“切換變體”面板(Swap instance)切換成所需的變體。很明顯，在這個過程中依賴的是組件的精準搜索和快速定位。
 
關于設計組件庫，我們有一些新思考
 
 
 
為了提升搜索精度，我們可以從組件命名入手，采用中、英、數(shù)字結合的方式，實現(xiàn)模糊匹配；也可以在發(fā)布時隱藏不希望被調(diào)用的組件，以減少無用的搜索結果。如果組件是采用前文提到的“多層嵌套”方式搭建的，我們可以添加“Preferred”子組件，這樣在切換時會優(yōu)先展示這些子組件，這個功能在切換圖標時尤為實用。
 
對于習慣邊查閱設計規(guī)范邊使用組件的設計師，我們增加了更多實際使用的正誤案例，這些案例直觀展示了組件變體的正確選擇和使用方式，進一步降低了規(guī)范的理解成本，有效輔助設計決策。同時，我們專門維護了一個固定區(qū)域，用于平鋪展示所有組件變體。為了確保能夠輕松點選，我們將變體放在最外層展示(即不在任何Frame、Group或Section中)。這樣能讓設計師一目了然地看到所有變體，從而快速選擇所需的組件。
 
關于設計組件庫，我們有一些新思考
 
 
 
在組件配置階段，有三項注意點能讓組件更加易用，即“重視組件的可視化效果、設置高效易用的配置項、貼心地保存修改”。
 
關于設計組件庫，我們有一些新思考
 
 
 
考慮到C端組件的多樣性和用戶的使用習慣，我們應避免使用過于復雜的分組方式。相反，應更注重組件的樣式展示，并盡量簡化組件的層級結構。這樣，設計師在使用時能夠更直觀地看到組件的外觀，而無需深入復雜的層級去查找。
 
另外值得注意的是，F(xiàn)igma會默認用組件集合中最左上角的組件生成預覽樣式，因此應當把視覺上最有代表性的變體放在左上角，這個效果在切換變體(Swap instance)時很重要，因為目前在該面板中沒法查看組件細節(jié)，只能靠縮略圖和名稱來推測是哪個組件。
 
關于設計組件庫，我們有一些新思考
 
 
 
其次對于配置項的設置也大有講究，業(yè)界有組件庫為了實現(xiàn)C2D2C，從源頭上將設計組件和前端組件的配置項打平，這是不錯的思路，但有可能會提升設計側的理解成本。針對搜索業(yè)務的特殊語境，我們還是選擇了從「規(guī)范理解」角度去設置組件的配置項，將所有允許自定義的配置盡可能外露，并清晰地說明修改限制，如字數(shù)限定、選項個數(shù)等，這樣能夠在使用的過程中強化業(yè)務設計師對規(guī)范的掌握。
 
另一個常常被忽視的關鍵點是選項和配置的排序問題。為了提高瀏覽和選擇的效率，建議對選項和選項之間，以及外層的不同配置項，都按照一定的邏輯順序進行排序。
 
關于設計組件庫，我們有一些新思考
 
 
 
最后一點，我們稱之為
“貼心地保存修改”
機制，這個針對的是文字修改的場景。
 
在實際操作中，使用一個組件可能需要對多個配置項進行修改。有時在修改完文字內(nèi)容后再去調(diào)整其他配置時，已修改的文字會被重置。這時文本屬性(text property)的設置就顯得尤為重要，它能夠記憶并保存修改過的文字內(nèi)容，從而免于重復輸入。
 
還有一些情況是，某個組件變體實際上并沒有與某個值相對應的組件(盡管Figma機制允許選擇該值)，用戶切換后就會發(fā)現(xiàn)組件完全變了，只能撤回。為了避免這類情況，建議使用另外的標記來表明組件某個設置項是不可切換的。
 
關于設計組件庫，我們有一些新思考
 
 
 
 
關于設計組件庫，我們有一些新思考
 
 
 
完成了組件的搭建和檢查，接下來讓我們聚焦于組件的日常維護。
 
這一環(huán)節(jié)可以從兩個維度展開，一是依托中臺的日常數(shù)據(jù)監(jiān)控進行維護，二是通過團隊內(nèi)部的緊密協(xié)同機制來保障。后者更多側重協(xié)作流程和機制上的建設，在本文中我們不做更多展開，重點討論前者。
 
數(shù)據(jù)監(jiān)控的方式主要依托Figma中的組件數(shù)據(jù)看板(查看路徑：View libraries-Analytics)，看板中展示了各個組件的調(diào)用數(shù)和解綁數(shù)數(shù)據(jù)，這些數(shù)據(jù)不直接反映組件的優(yōu)劣，但如果我們觀測到某個組件解綁率偏高，我們會考慮直接把它
作為模板
而不是創(chuàng)建成組件。
 
關于設計組件庫，我們有一些新思考
 
 
 
 
總結
 
以上是百度搜索設計團隊在設計組件庫升級過程中的心得分享，包括搜索業(yè)務對于“好的設計組件”的訴求，以及一些搭建和優(yōu)化組件的實用思路，核心是探討如何從組件庫建設的角度入手，成功助力團隊提升設計資產(chǎn)消費效率。
 
關于設計組件庫，我們有一些新思考
 
 
 
 


作者：百度MEUX
鏈接：https://www.zcool.com.cn/article/ZMTY1MTYwOA==.html
來源：站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權，非商業(yè)轉載請注明出處。
 
評論(0) 瀏覽(157)

Banner布局在用戶界面中的設計樣式研究

ui設計分享達人

前言
    Banner，這一設計元素對于我們設計師而言早已經(jīng)是司空見慣，其核心往往聚焦于視覺表現(xiàn)的層面，也是成為UI設計師重要能力play中的一環(huán)。今天要寫的，并非Banner在視覺藝術上的探索，而是其在UI場景中布局樣式的深度剖析。
    Banner圖作為產(chǎn)品中的一項基礎功能，其存在已是常態(tài)。在視覺創(chuàng)意的追求之外，UI層面的樣式布局也在不斷尋求突破與創(chuàng)新。
 
目錄
一、Banner 視覺層表現(xiàn)
二、Banner 布局樣式
三、總結
 
一、Banner視覺層表現(xiàn)
    作為界面視覺焦點，Banner通常以可交互的輪播組件形式呈現(xiàn)，這種動態(tài)展示方式已成為現(xiàn)在產(chǎn)品的重要導航模式之一。它不僅是信息傳遞的載體，也是平臺與用戶對話的窗口，承載著活動推廣、品牌宣發(fā)等核心內(nèi)容的展示使命。 在提升用戶注意力的設計探索中，Banner的視覺表現(xiàn)手法持續(xù)演進。從設計維度來看，我們不僅要在創(chuàng)意構思、版式布局、色彩搭配等基礎層面下功夫，更需在表現(xiàn)形式上尋求突破。
    基于動態(tài)復雜度，我將Banner的表現(xiàn)形式歸納為四個層級：從基礎的靜態(tài)圖像，到輕量級的GIF動畫，再到沉浸式的視頻背景，直至最具空間感的分層效果，每種形式都對應著不同的設計目標和用戶體驗。
Banner布局在用戶界面中的設計樣式研究
 
 
1.1靜態(tài)
    在眾多Banner表現(xiàn)形式中，靜態(tài)輪播圖因其高效的設計實現(xiàn)和便捷的技術支持而成為多數(shù)產(chǎn)品最普遍的選擇。
    這類Banner采用靜態(tài)圖片作為視覺載體，根據(jù)產(chǎn)品需求可分為兩種基礎模式：單一畫面呈現(xiàn)的簡約風格，以及多畫面輪播的交互形式。其中，多圖輪播既支持自動播放的時間軸切換，也允許用戶通過手勢滑動進行自主瀏覽，在保持視覺簡潔性的同時增加了交互維度。這種設計平衡了視覺效果與功能實用性，所以會成為多數(shù)產(chǎn)品的首選方案。
Banner布局在用戶界面中的設計樣式研究
 
 
Banner布局在用戶界面中的設計樣式研究
 
 
1.2動態(tài)
    動態(tài)Banner以生動的表現(xiàn)力，在吸引用戶注意力方面展現(xiàn)出顯著優(yōu)勢。通過關鍵元素的微妙動畫和CTA按鈕的交互反饋，能夠有效引導用戶視線，強化信息層級。
  在動態(tài)Banner的應用中，單圖形式往往更受青睞。雖然動態(tài)效果能提升視覺吸引力，但過度使用可能導致"視覺噪音"，反而分散用戶注意力，降低核心信息的傳達效率。
    面對信息過載的數(shù)字環(huán)境。微交互動畫作為一種優(yōu)雅的解決方案，在功能引導和視覺敘事兩個維度都發(fā)揮著重要作用，也已經(jīng)成為界面設計中不可或缺的設計語言。
Banner布局在用戶界面中的設計樣式研究
 
 
Banner布局在用戶界面中的設計樣式研究
 
 
1.3視頻
    視頻廣告作為一種成熟的營銷媒介，在短視頻文化盛行的當下，已逐步融入Banner輪播體系。這類視頻Banner通常占據(jù)首屏黃金位置，配合明確的倒計時提示和便捷的關閉選項，為用戶提供可控的觀看體驗。為減少對用戶的干擾，視頻默認采用靜音播放模式，這種貼心的設計選擇體現(xiàn)了以用戶為中心的設計理念。
    在特定垂直領域，如影視類平臺，我們也能觀察到多視頻輪播的創(chuàng)新應用。這種相對小眾的呈現(xiàn)方式，往往與平臺的內(nèi)容屬性高度契合，為特定用戶群體提供沉浸式的瀏覽體驗。這種差異化的設計策略，展現(xiàn)了產(chǎn)品設計中對場景化需求的深入思考。
Banner布局在用戶界面中的設計樣式研究
 
 
Banner布局在用戶界面中的設計樣式研究
 
 
1.4分層
    在追求差異化體驗的設計浪潮中，輪播廣告正在突破傳統(tǒng)平面展示的局限。分層視覺設計以其獨特的空間感和動態(tài)層次，為Banner設計注入了新的活力。這種創(chuàng)新表現(xiàn)形式包含多層次的視覺構建：從基礎的內(nèi)容層疊加視覺，到更具空間感的3D翻轉效果，再到前景與背景的智能分離運動，每種方式都在重新定義用戶與廣告內(nèi)容的交互方式。
    基于視覺層次的運動差異，設計出引人入勝的視覺敘事，能夠有效的提升用戶參與度以及更具沉浸感和記憶點廣告體驗。
Banner布局在用戶界面中的設計樣式研究
 
 
Banner布局在用戶界面中的設計樣式研究
 
 
小結
    Banner的視覺創(chuàng)新是提升內(nèi)容吸引力的關鍵驅動力。
    每一種新的視覺語言都是我們與用戶對話的新方式，是提升信息傳達效率的重要途徑。在競爭激烈的市場環(huán)境中，差異化的表現(xiàn)形式往往能成為抓住用戶注意力的制勝法寶，這也是為什么我們要不斷突破常規(guī)，尋求更具感染力的視覺解決方案。
 
二、Banner布局樣式
    在確定Banner的視覺表現(xiàn)手法后，就得深入研究其在界面布局中的空間關系。布局樣式的多樣性源于多個設計維度的考量：從Banner的寬高比例、尺寸規(guī)格，到其與頁面結構的整合方式（通欄或分欄），再到其與周圍元素的視覺關系（獨立呈現(xiàn)或背景融合）等。
    就通欄與分欄布局而言，這種結構性選擇直接影響B(tài)anner的視覺占比。雖然直覺告訴我們更大的Banner更具吸引力，但優(yōu)秀的設計需要平衡信息層級與視覺舒適度。Banner的布局不應是孤立的決策，而應該與整體界面風格和諧統(tǒng)一，既要突出又要融入，在視覺沖擊力和界面協(xié)調(diào)性之間找到最佳平衡點。這種全局性的設計思維，正是打造優(yōu)質用戶體驗的關鍵點所在。
Banner布局在用戶界面中的設計樣式研究
 
 
    在處理深色系頭部界面時，我們常采用Banner與背景層疊的設計策略。這種手法通過建立視覺深度，創(chuàng)造出富有層次的空間感。背景色的處理有兩種方式：一是采用固定色值保持統(tǒng)一性，二是根據(jù)輪播圖主色調(diào)動態(tài)調(diào)整，后者能實現(xiàn)更自然的視覺過渡，提升整體設計的融合度與空間縱深感。
    在Banner比例方面，選擇直接影響高度控制，需要根據(jù)界面內(nèi)容密度靈活調(diào)整。除了基于內(nèi)容需求的自定義方案，許多人會采用數(shù)學比例系統(tǒng)進行規(guī)范化設計。其中，基于斐波那契數(shù)列推導出的8:5、8:3等比例關系，因其視覺舒適度而被廣泛采用。在實際應用中，我更傾向于選擇能被4整除的數(shù)值，既符合開發(fā)規(guī)范，又能確保在不同設備上的適配性。
Banner布局在用戶界面中的設計樣式研究
 
 
以經(jīng)驗作為基石，而不是限制，特殊情況特殊對待，就像配合前端工程師調(diào)整設計圖樣式一樣，靈活運用。
 
三、總結
    Banner作為頁面中的常見元素，與其說是對布局樣式的探索，不如說是對用戶體驗的深度挖掘。每一次布局創(chuàng)新都是對用戶與頁面互動方式的重新思考。
    一個恰到好處的留白、一次精準的視覺引導、一個流暢的交互過渡，這些細微之處都可能成為提升產(chǎn)品體驗的關鍵。 當我們能夠系統(tǒng)性地把控每個設計細節(jié)，將用戶需求轉化為優(yōu)雅的解決方案時，就能做出真正打動人心的頁面設計。


作者：Syic
鏈接：https://www.zcool.com.cn/article/ZMTY1MTk1Mg==.html
來源：站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權，非商業(yè)轉載請注明出處。
 
評論(0) 瀏覽(151)

界面設計中【浮標】的思考與探索

ui設計分享達人

界面設計中【浮標】的思考與探索
結合設計原則與“智能伴學助手”項目應用浮標實踐展開
-------------
 
目錄：
背景
浮標的本質與價值
浮標設計
一、功能定位與場景適配
二、視覺與交互設計
三、技術實現(xiàn)優(yōu)化
四、無障礙與倫理考量
五、創(chuàng)新方向探索
結語
 
-------------
背景：
在教育類移動端中接入了大模型AI智能應用，為保證這個應用入口可長期保持并隨時可見，提高使用率，為用戶提供便利。筆者通過“智能伴學助手”浮標實踐應用，對后續(xù)制作浮標在界面設計中思考與探索。
 
浮標的本質與價值
1）空間維度突破  
作為界面中的「第三層空間」，浮標通過視覺懸浮感打破平面限制（如iOS 的3D視差效果）； 在信息過載時代，提供「隨時在場」的核心功能入口（如美團外賣的懸浮購物車，左右動效：進縮）。
「第三層空間」并「隨時在場」，也是很好的廣告位和優(yōu)惠營銷，一些浮標的“小巧思”。
「第三層空間」并「隨時在場」，也是很好的廣告位和優(yōu)惠營銷，一些浮標的“小巧思”。
 
2） 認知心理學應用
利用格式塔原則中的「閉合性」設計半透明遮罩，暗示可交互區(qū)域；通過菲茨定律優(yōu)化點擊熱區(qū)，圓形浮標直徑建議≥48dp（Android 規(guī)范）。
 
 ---------------------
浮標設計
就項目中“智能伴學助手”為例，一個教育類的應用入口，結合功能定位、用戶體驗與技術實現(xiàn)浮標在界面中的作用。通常浮標是一個懸浮的按鈕或圖標，用于快速訪問某些功能，從多個維度探索其在移動端界面中的合理呈現(xiàn)方式：
 
 
一、功能定位與場景適配
 
浮標的設計規(guī)范：
比如尺寸、顏色、位置。通用的設計規(guī)范，教學工具類App的界面設計，可能涉及圖標和布局。
1）尺寸與網(wǎng)格系統(tǒng)
 ◇ 圖標尺寸需適配不同屏幕分辨率，常見規(guī)范包括128x128px、96x96px、64x64px等，需根據(jù)界面層級選擇合適尺寸。
◇ 尺寸一般用1:1比較好或者成倍數(shù)，先做大再導出所需要的不同大小比例。
◇ 使用網(wǎng)格系統(tǒng)（如微軟Fluent的24px基礎網(wǎng)格）確保視覺一致性，留出安全邊距（如2px內(nèi)邊距）避免元素溢出。
2）造型與風格
◇ 遵循簡約易懂原則，優(yōu)先采用象形圖或表意符號增強識別性。
◇ 保持系列圖標風格統(tǒng)一，包括線條粗細（建議1.5px）、圓角弧度（微軟Fluent定義大/中/小三級圓角）及視覺平衡。
3）適配性
◇ 導出格式需與開發(fā)協(xié)作，推薦PNG序列或SVGA文件以兼顧清晰度與性能。
◇自適應考慮不同平臺的顯示情況。
 
核心功能聚合：
語言學習工具類界面將高頻功能（如首頁入口、作業(yè)評論、學習提問）通過浮標動態(tài)整合，支持長按展開二級菜單或滑動切換功能模式，吸附于屏幕邊緣。
根據(jù)學習階段智能變化：
課前（預習）：浮標展示課程試學入口或學習目標設定；
課中（口語輸出）：提供實時筆記懸浮窗或標記工具；
課后（點評）：將課后作業(yè)及鞏固語言習得情況的評價和自我精進。
（外語語言口語學習一般模式：盲聽，然后根據(jù)自己的話復述，理解語言并有效使用語言）
  
首頁入口、作業(yè)評論、學習提問通過浮標智能解答點評，通過二級頁面展開細則
首頁入口、作業(yè)評論、學習提問通過浮標智能解答點評，通過二級頁面展開細則
 
二、視覺與交互設計
 
以”智能伴學助手“為例，浮標主色是藍色，企業(yè)主題色也是藍色，而”智能伴學助手“浮標使用背景一般也以藍色為主，App主題色也是藍色，多場景使用適配藍色背景的靜態(tài)浮標，又要使浮標可以在背景中脫穎而出，在其過程中嘗試藍+藍搭配的存在局限性，本身藍色系較統(tǒng)一。
在同為藍色后，產(chǎn)生不同「空間」，通過將界面元素分層（如前景圖標與背景圖像），營造深度感。在浮標進行描邊隔層，現(xiàn)在很多表情包就是這種模式操作。
微信小程序的移動學習平臺設計，強調(diào)了用戶需求分析、界面簡潔和交互設計，這可能對浮標的功能定位有幫助。智能伴學助手來浮標快速訪問。在不同背景下的浮標呈現(xiàn)視覺形式，只要點擊即可進入應用。
微信小程序的移動學習平臺設計，強調(diào)了用戶需求分析、界面簡潔和交互設計，這可能對浮標的功能定位有幫助。智能伴學助手來浮標快速訪問。在不同背景下的浮標呈現(xiàn)視覺形式，只要點擊即可進入應用。
 
思考與探索：
浮標需要特色，用戶在使用過程中視覺明顯，提高交互。
浮標既顯眼又不干擾學習，所以需要平衡可見性和沉浸感。
浮標可以移動，用戶可以根據(jù)需要調(diào)整位置，避免遮擋內(nèi)容。
現(xiàn)浮標是靜態(tài)的，如何嘗試動態(tài)浮標，與用戶有更好的交互體驗，參與感。
顏色和動效方面，冷色調(diào)營造學習氛圍，浮標可以用品牌色，如藍色或綠色，加上微動效吸引注意。樣式用了藍色圓形浮標，可能適合教育類應用，賦予科技感設計。
不同狀態(tài)或者不同頁面下的浮標呈現(xiàn)方式不同，但成一系列，增加趣味性。
 
白色背景或者透明背景下的浮標呈現(xiàn)，在不同頁面呈現(xiàn)一“系列”
白色背景或者透明背景下的浮標呈現(xiàn)，在不同頁面呈現(xiàn)一“系列”
 
藍色背景下或者在統(tǒng)一色系下浮標視覺”糊“，可用白邊的形式將背景和浮標的”空間“區(qū)分開
藍色背景下或者在統(tǒng)一色系下浮標視覺”糊“，可用白邊的形式將背景和浮標的”空間“區(qū)分開
 
思考與探索：
配色方案
1）主色選擇
明亮色系：如紅色、橙色、黃色等，能快速吸引用戶注意，適用于促銷活動入口。
品牌色融合：在特殊場景中融入品牌LOGO或主色，代表企業(yè)形象和IP，增強品牌認知。
2）色彩心理學應用
藍色：傳遞信任感，適合金融或工具類應用。
黑金/黑黃組合：營造神秘或高端感，常見于娛樂或奢侈品領域。
紫色+粉紅：適用于美容、女性向產(chǎn)品，傳遞溫柔與創(chuàng)意。
控制色彩平衡，用戶色彩感官可適應。
3）對比與背景
使用中性色（如米色、白色）作為背景，提升信息可讀性。
避免沖突色搭配（如藍色用于食品類浮標易抑制食欲）。
 
思考與探索：
個性化推薦和交互設計，可以結合AI預測用戶行為，動態(tài)調(diào)整浮標的出現(xiàn)時機，比如在需要提醒作業(yè)時顯示。主色選用品牌色（如教育藍/科技紫）強化識別性。
 
如何設計浮標會更好？
如何設計浮標會更好？
 
 
創(chuàng)新交互模式思考探索：
1）壓力感知交互  
?安卓壓感屏實現(xiàn)「輕按預覽/重按觸發(fā)」分層交互（如華為懸浮球壓感菜單）；配合觸覺反饋（Haptic Engine）增強操作確認感。
2）動態(tài)語義變形
-生物擬態(tài)動畫：
?呼吸感懸?。耗M水母游動節(jié)奏（振幅0.5-1.2px，頻率0.8Hz）  ；
?點擊時觸發(fā)粒子擴散動畫（模擬知識傳遞意象）；
?拖拽時產(chǎn)生彈性形變（阻尼系數(shù)0.6-0.8），邊緣碰撞后回彈。
- 根據(jù)場景智能改變形態(tài)：  
? 閱讀類App中展開為「書簽浮標+進度條」復合控件  ；
? 音樂播放器浮標可拉伸成波形可視化界面。
 通過多模態(tài)反饋，聽覺，視覺，觸覺多種情感交互。
3） 空間布局策略：
?默認位置：置于屏幕右下側（符合右手持機習慣），預留10%邊距防止誤觸；
?智能避讓：通過內(nèi)容識別算法，在視頻播放或文本輸入時自動偏移避開核心內(nèi)容區(qū)域；
?AR場景中的空間投影浮標（如IKEA Place家具預覽浮窗）。
位置多為屏幕右下側
位置多為屏幕右下側
 
 三、技術實現(xiàn)優(yōu)化
 
1）跨端一致性
  •  
    使用React等框架封裝可復用浮標組件，通過響應式設計適配不同設備尺寸（如折疊屏展開態(tài)需重新計算定位錨點）；
  •  
    采用SVGA格式實現(xiàn)高性能動效，控制幀率在30fps以內(nèi)以降低功耗。
2）AI驅動個性化
  •  
     基于LSTM模型預測用戶行為： 檢測到長時間未操作時，浮標縮小并展示激勵標語； 識別到錯題高峰時段，主動彈出知識點講解入口；
  •  
     支持語音指令交互（如“浮標移到左上角”）。
 
四、無障礙與倫理考量
 
1）包容性設計
◇為色弱用戶提供高對比度模式（浮標輪廓增加動態(tài)描邊，對比度≥4.5:1）；
◇支持頭部追蹤控制浮標移動（iOS Switch Control技術適配）。
2）防沉迷機制（適合未成年類App）
◇連續(xù)使用1小時后，浮標漸變灰色并觸發(fā)休息提醒；
◇家長端可遠程設置浮標功能禁用時段。（未成年學習類工具考慮優(yōu)化）
 
五、創(chuàng)新方向探索
 
1）多模態(tài)融合：
◇AR場景中浮標投射為3D虛擬助手，支持手勢交互與空間定位；
◇結合眼動追蹤技術，實現(xiàn)注視區(qū)域自動呼出上下文菜單。
2）情感化表達：
◇根據(jù)學習成就解鎖浮標皮膚（如連續(xù)打卡7天變?yōu)楠劚螒B(tài)）；
◇錯誤率過高時，浮標呈現(xiàn)“鼓勵模式”（配色變暖+微震動反饋）。
學習類智能伴學助手的浮標既能作為高效的功能樞紐，又可成為情感化學習伴侶。實際落地時建議結合A/B測試持續(xù)優(yōu)化，例如對比分析「固定浮標」與「場景自適應浮標」的點擊轉化率差異。
 
----------------
 
結語：
浮標不應僅是功能載體，更應成為：  
- 空間敘事者：通過動態(tài)變化講述產(chǎn)品故事；
- 情感連接器：建立用戶與數(shù)字世界的溫度觸點；
- 場景預言家：預判需求并提供恰到好處的服務。
 
設計師需在「顯性價值」與「隱形干擾」間找到精妙平衡，讓浮標成為提升體驗的優(yōu)雅解決方案而非視覺負擔。未來可探索腦機接口的意念控制浮標、量子動畫渲染等突破性方向。
技術實現(xiàn)上，探究代碼示例展示了如何控制浮標的移動，確保不超出屏幕，這可以作為技術參考應用實際案例中。同時，性能優(yōu)化方面，使用SVGA格式或減少幀數(shù)，可能對動效設計有幫助。
浮標設計需要結合功能定位、用戶行為、視覺設計、交互體驗和技術實現(xiàn)，可多進行參考不同案例，搜索現(xiàn)有項目，對比借鑒然后對新型B端界面有所創(chuàng)新，確保既實用又不干擾用戶。
還可以利用Ai創(chuàng)新思維，設計師可以更快速、高效地生成多種設計方案，結合項目開發(fā)滿足消費者對個性化、時尚化的需求。
 


作者：啊海包船打魚
鏈接：https://www.zcool.com.cn/article/ZMTY1MjgzNg==.html
來源：站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權，非商業(yè)轉載請注明出處。
 
評論(0) 瀏覽(154)

用好「用戶行為分析」讓體驗起飛

ui設計分享達人

用戶行為分析-如何開始搭建
體驗或交互設計知曉用戶行為分析有什么用？
答：
我們所處的行業(yè)下，各類產(chǎn)品變得成熟精細，大家開始拼細節(jié)卷服務，市場競爭激烈。對于產(chǎn)品的各種優(yōu)化改版也就開始變得謹慎，往往需要經(jīng)過用戶研究或是數(shù)據(jù)分析等工作來驗證或決策，不再是由設計師或產(chǎn)品經(jīng)理憑借過往經(jīng)驗辦事或對標競品照抄了，恰好用戶行為分析就是用戶洞察中具有代表性的一項；
 
體驗或交互設計為什么要掌握這些呢？
答：
回歸到用戶體驗相關設計，本身就是一項細致活兒，處處需要用戶研究或數(shù)據(jù)洞察來輔助設計工作，了解其相關甚至熟悉搭建分析，從職能發(fā)展趨勢來看，可能是遲早的事；
 
所以即使你目前用不上用戶行為分析相關，也不要急著關掉文章，先簡單了解一下吧，說不定你會有興趣呢，說不定不久后剛好用上呢？
 
 
用戶行為分析能干啥
用戶行為分析是數(shù)據(jù)分析的一個重要領域，特別是在數(shù)字化服務行業(yè)中，主要目的是通過深入研究用戶群體的流量動向以及操作行為特征等，來了解用戶與產(chǎn)品間的關系、效果、趨勢，以幫助我們優(yōu)化產(chǎn)品設計、提升用戶體驗并驅動業(yè)務決策。
說人話就是：
監(jiān)測用戶在產(chǎn)品上做出了哪些行為、是否符合預期、有什么特征、問題在哪里，然后看看產(chǎn)品上需要做些什么調(diào)整或迎合用戶的特征偏好來決策啥的。
 
用戶行為分析有啥優(yōu)勢
具備一定的客觀性與真實性
被動采集的行為數(shù)據(jù)有時候比用戶口述反饋的信息要更真實有效，一方面更加直接，另一方面也少了些用戶心理設防（霍桑效應）；
用好「用戶行為分析」讓體驗起飛【構建篇】
 
 
具備一定的代表性與準確性
由于是群體性的大數(shù)據(jù)，所以更有代表性，并且是即時的數(shù)據(jù)記錄，不容易記混記錯，準確性也更好；
用好「用戶行為分析」讓體驗起飛【構建篇】
 
 
具備可持續(xù)性與可追溯性
通過數(shù)字化技術實現(xiàn)，可以伴隨產(chǎn)品發(fā)展持續(xù)的采集數(shù)據(jù)，可以較為方便的調(diào)取過往數(shù)據(jù)進行比對追溯分析；
用好「用戶行為分析」讓體驗起飛【構建篇】
 
 
具備一定的AI不可代替性
用戶行為的背后依舊是人文心理等方面的內(nèi)容分析或業(yè)務場景化決策，往往離不開人工的加持介入；
用好「用戶行為分析」讓體驗起飛【構建篇】
 
 
實施構建的流程
以下是對用戶行為分析的工作流圖解，由于不同企業(yè)的訴求有差異，以下工作流僅代表大部分用作交流；
用好「用戶行為分析」讓體驗起飛【構建篇】
 
 
 
關鍵節(jié)點拆解說明
此次主要聊聊基礎的上手運用與注意事項，不涉及過深或難以理解的部分，如果說用戶行為分析可以到達高等數(shù)學的程度，那么此次就講講加減乘除好了，師父領進門，修行靠個人，各位看客請上座！
用好「用戶行為分析」讓體驗起飛【構建篇】
 
 
目標需求拆解
1、什么時候開始？
首先你的產(chǎn)品得有流量，然后得有一個關乎到用戶行為的目標，例如想看看用戶流量分布、了解功能使用頻率、任務執(zhí)行的漏斗關系、用戶行為偏好、用戶數(shù)據(jù)畫像構建等，這個時候就可以考慮開始了，不然就可能南轅北轍費力不討好。
用好「用戶行為分析」讓體驗起飛【構建篇】
 
 
2、界定一個范圍？
首先構建一套完善的用戶行為分析系統(tǒng)并持續(xù)的維護與應用并不是一個輕松的事情，所以最好是針對性構建+多迭代，不要上來就想著做全盤搭建，表面的工作或問題往往可能只是浮冰，逐步的深入后問題會越來越多，個人深有體會！
用好「用戶行為分析」讓體驗起飛【構建篇】
 
 
3、由上而下，找準路線？
通過業(yè)務目標向下拆解，一般上層目標無非是商業(yè)轉化、用戶活躍留存、任務通過率這些，向下拆解則是通過業(yè)務目標去鎖定核心的業(yè)務場景或任務線路，這些核心的頁面、場景或是任務線路，就是你前期可以界定的一個范圍，后續(xù)的重點工作則是將核心功能的入口或路徑窮舉出來，避免數(shù)據(jù)對不上或找不到異常源頭的情況。
在我的認知里，用戶行為分析建設不是一錘子買賣，步伐走小一點，基礎搭好一些，以后的迭代建設或維護也會輕松許多；
概括一下就是，不要追求全面，靠攏業(yè)務價值，關聯(lián)上指標或者核心業(yè)務場景即可；
之前網(wǎng)上看到有大佬給了一個建設思路，這里搬來大家參考一下；
用好「用戶行為分析」讓體驗起飛【構建篇】
 
 
帶你認識不一樣的埋點
數(shù)據(jù)埋點技術已經(jīng)很成熟了，甚至有很多第三方的埋點+分析的服務，以及采集用戶行為數(shù)據(jù)的不僅僅只有埋點技術方案，哪怕你做一個錄屏技術都可以，只不過從數(shù)字化產(chǎn)品視角出發(fā)，埋點技術更有性價比，以及符合用戶隱私權益，所以這里專門講一下“埋點”這個老技術，熟悉的大佬們可以跳過埋點這部分。
1、埋點是什么
數(shù)字化應用大多有個特征，就是需要用戶進行界面交互，有交互就有行為動作發(fā)生，而
數(shù)據(jù)埋點
就是將用戶在
界面交互
時產(chǎn)生的
各種類型
的
監(jiān)控日志
上報到產(chǎn)品后臺去，這樣業(yè)務團隊就可以知道到用戶在不同頁面或業(yè)務場景下操作了什么，去往過哪些頁面，當結合業(yè)務后臺的訂單等數(shù)據(jù)時，就可以還原出更加清晰的用戶行為全貌。
 
通常這些埋點會分為
“頁面訪問(PV、UV)、區(qū)塊曝光(區(qū)域、時長)、按鈕操作(動作、狀態(tài))”
三大類型，并
攜帶交互元素和操作者的各類特征信息參數(shù)
，便于我們知曉更多的場景細節(jié)與用戶情況，例如知曉這個【免費試用】按鈕是對應了那個產(chǎn)品？點擊的用戶是否已開通這個產(chǎn)品？這個用戶是否為付費用戶？是否個人還是商家類型？用戶從那個渠道進來的等，而且這些植入在產(chǎn)品代碼中的埋點可以不間斷持續(xù)的采集和配套產(chǎn)品迭代進行維護，可以幫助業(yè)務團隊獲取大量有效數(shù)據(jù)用作業(yè)務分析決策。
用好「用戶行為分析」讓體驗起飛【構建篇】
 
 
2、什么時候派上用場
這些數(shù)據(jù)埋點主要是為業(yè)務目標的洞察分析服務，也就是說業(yè)務目標中需要采集用戶行為數(shù)據(jù)時，埋點就要派上用場了，相比傳統(tǒng)的業(yè)務日志，埋點可以收集到更加全面的界面交互的行為數(shù)據(jù)，能夠簡易的還原出一套線上用戶的使用情景，而不僅限于一些業(yè)務后臺就能統(tǒng)計出的轉化率或基礎數(shù)據(jù)等；
用好「用戶行為分析」讓體驗起飛【構建篇】
 
 
并且埋點數(shù)據(jù)可以與業(yè)務數(shù)據(jù)分開存儲運維，這意味著埋點數(shù)據(jù)可以更迅速的根據(jù)設定的指標公式統(tǒng)計出期望的數(shù)據(jù)或視圖，并且不會干擾業(yè)務訪問的性能質量，因此產(chǎn)品迭代后的新老數(shù)據(jù)對比、營銷活動的效果評估、用戶行為的特征偏好識別等，數(shù)據(jù)埋點都以可以派上用場的。
 
3、怎么提埋點需求？
首先埋點需求沒有固定的文檔格式，其次不同埋點服務平臺的要求也有差異，就移動端來講，很多服務商已經(jīng)支持可視化埋點、全埋點、無埋點服務，可以實現(xiàn)自動識別交互元素并進行埋點操作，大大減少了開發(fā)工作量，那么再聊回埋點需求怎么提。
 
核心結論就是由上而下，通過業(yè)務目標或核心指標進行拆解，然后關聯(lián)到核心的任務流程上，對于一個頁面或一套流程沒有必要進行全篇埋點，技巧我概括為以下幾點；
用好「用戶行為分析」讓體驗起飛【構建篇】
 
 
埋點需求的主要內(nèi)容基本包含以下，根據(jù)業(yè)務或埋點平臺的差異，可以自行調(diào)整；
用好「用戶行為分析」讓體驗起飛【構建篇】
 
 
4、業(yè)務擴參怎么一回事兒
擴參即擴展參數(shù)，指在當前用戶界面中可以請求到的業(yè)務數(shù)據(jù)，并將這些業(yè)務數(shù)據(jù)綁定到埋點日志中一并上報給埋點數(shù)據(jù)后臺，通常為一些用戶屬性參數(shù)、業(yè)務屬性參數(shù)、設備屬性參數(shù)、網(wǎng)絡環(huán)境參數(shù)，這樣我們就可以通過這些額外的參數(shù)進行數(shù)據(jù)分析或是過濾，舉個典型案例；
用好「用戶行為分析」讓體驗起飛【構建篇】
 
 
 
數(shù)據(jù)治理是做什么
為什么要治理？
簡單說就是提升數(shù)據(jù)質量與準確性，在龐大的一套數(shù)據(jù)中，我們需要弄清楚數(shù)據(jù)之間的映射關系，即不同的數(shù)據(jù)參數(shù)代表了什么元素什么動作什么含義，數(shù)據(jù)是否有缺漏或冗余、報錯漏報亂報、是否有無效的臟數(shù)據(jù)（例如內(nèi)部的測試數(shù)據(jù)或腳本爬蟲等帶來的數(shù)據(jù)），如果我們不去將這些數(shù)據(jù)進行治理，則統(tǒng)計出的數(shù)據(jù)指標特征或趨勢都將不可靠，無法被商業(yè)應用。
簡單講就是元數(shù)據(jù)沒治理準確，得到的數(shù)據(jù)指標也就失去了實用價值。
用好「用戶行為分析」讓體驗起飛【構建篇】
 
 
怎么去治理？
本質是查缺補漏將無效的數(shù)據(jù)過濾掉或糾錯
，再把數(shù)據(jù)涵義映射成具體的指標或描述，用作進一步的指標計算與分析，如果數(shù)據(jù)又多又雜，你會發(fā)覺這一步要你老命，例如埋點就需要逐個查詢原始埋點的位置、觸發(fā)條件、埋點用途、埋點含義甚至與關聯(lián)業(yè)務數(shù)據(jù)的關系校對等。
不過還好，
一般來講這些工作都是數(shù)據(jù)建模（BI）相關人員去負責的
，
作為應用層的我們，更多的是能夠根據(jù)業(yè)務目標提出埋點需求、提出指標與數(shù)據(jù)報表需求，以及通過數(shù)據(jù)核算或查看數(shù)據(jù)趨勢等手段找出異常讓 BI 修復
，所以這里就不展開埋點數(shù)據(jù)治理的方法了。
 
數(shù)據(jù)維護不易
就埋點監(jiān)控用戶行為的方式來講，除了平時的治理與報表問題修復，每次迭代改版還要做好相關埋點信息的管理與維護更新，保證不出錯，不影響關聯(lián)指標，甚至是線上用戶偏好的推薦算法等應用，特別是數(shù)據(jù)規(guī)模越來越大后，又密切關聯(lián)著業(yè)務決策時，數(shù)據(jù)更不容出錯，且要求準確。
 
三大分析內(nèi)容產(chǎn)出
1、內(nèi)容產(chǎn)出的先后
在用戶行為分析內(nèi)容構建的過程中，除非是有特定場景特定訴求，通常個人認為都是先出指標、再完善行為鏈路、再逐步豐滿用戶畫像的一個過程，原因如下；
  1.  
    通常先接到的都是一些核心指標，例如轉化率、留存率、活躍度等，同時這些指標也是上層最先關注到的；
  2.  
    接著就是完善不同場景或任務路徑相關，幫助洞察微觀視角下的體驗障礙或用戶偏好等，產(chǎn)出流量統(tǒng)計、流程漏斗等，起到業(yè)務體驗的洞察改善決策作用；
  3.  
    用戶畫像的數(shù)據(jù)本身就沒那么好收集，并且是一個逐步完善和被業(yè)務決策應用的過程，所以一開始不會直接奔著用戶畫像構建開始；
 
2、基礎指標構建
所謂指標可以理解成是產(chǎn)品某項業(yè)務的成績，例如我是賣包子的，那么我的指標大概率就是每天賣出去多少包子、利潤有多少、哪款包子銷量高，根據(jù)這些信息我就可以知道我平時應該準備多少包子、哪些品類的包子需要多做一些、我靠賣包子能賺多少錢。
用好「用戶行為分析」讓體驗起飛【構建篇】
 
 
指標構建的原理
實際上指標的構建邏輯可以很簡單，例如A占B的百分比、ABC的總和、連續(xù)多天A占B的變化等，很多加減乘除的算法就能搞定，主要是能拿到真實數(shù)據(jù)，不然我懷疑你在做爛賬......
 
常見指標：
用好「用戶行為分析」讓體驗起飛【構建篇】
 
 
3、行為鏈路分析
用戶行為路徑是一種數(shù)字化的旅行地圖，相比較傳統(tǒng)服務的旅行地圖，場景會更純粹、意圖更準確、數(shù)據(jù)采集更便捷，主要作用有以下幾點；
  •  
    分析用戶在產(chǎn)品中的活動范圍或頁面路徑的關系，可以幫助了解用戶活躍分布，流量走向等情況；
  •  
    識別在任務或流程漏斗中的卡點或跳失情況，幫助優(yōu)化流程體驗或提升轉化率等指標；
  •  
    通過用戶的互動方式或路徑特征來進行用戶分類或偏好分析預測等，用于內(nèi)容推薦算法或精準營銷；
 
這些行為我們可以大致分為瀏覽、消費、互動三大類，根據(jù)不同的業(yè)務類型，可以選擇性采集和分析相關數(shù)據(jù)，例如電商產(chǎn)品就比較關注用戶的瀏覽與消費行為，常見的有商品瀏覽、添加購物車到下單；
而社交應用就更關注用戶的互動行為，如不同類型的內(nèi)容訪問、評論點贊、關注收藏分享等；
這些數(shù)據(jù)最終可能由可視化的數(shù)據(jù)報表呈現(xiàn)出來，以便于業(yè)務團隊快捷的找到數(shù)據(jù)問題或特征，如常見的漏斗圖、?；鶊D、雷達圖、樹狀圖、散點圖、決策樹等；
用好「用戶行為分析」讓體驗起飛【構建篇】
 
 
小話題延展
最近在UXRen的一場分享會中，聽羅浩講了體驗營銷的話題，雖然是關于用戶研究在職能崗位上挖掘新的商業(yè)能力的內(nèi)容，但是其中有一段是關于如何在旅行地圖中挖掘新的營銷觸點，有一些體會，這里結合用戶行為鏈路分析簡單聊一下；
背景與問題：
產(chǎn)品功能與業(yè)務增多，引流渠道多樣化，不同渠道流量的撬動關鍵是什么，核心場景具備哪些能力，哪些渠道的流量能吃掉，這些流量所處的觸點或場景能支持什么，用戶意圖是什么，產(chǎn)品能力能滿足什么，產(chǎn)品發(fā)展可以支持哪些？如何分流或匹配各類流量的意圖，并提供路徑分發(fā)，這些用戶流量數(shù)據(jù)有何趨勢或特征，是否能與場景或觸點進行根因分析，是否沉淀行為或偏好模型？
行為路徑的重點：
在于觀察不同觸點下的客戶意圖，展開業(yè)務所能觸及的部分或新的機會，并匹配合適的關鍵路徑，以提升轉化或用戶粘性等，然后做數(shù)據(jù)回歸分析，抓取有效的用戶特征信息，并應用到產(chǎn)品的內(nèi)容推薦或外部引流投放信息優(yōu)化上。
流程過程：
觸點展開與機會洞察，觸點場景——意圖識別——結果匹配（關鍵路徑）——（根因回歸）畫像更新——算法推薦——廣告優(yōu)化
這一套下來，是不是感覺有點兒似成相識？后來一想這不就是一套用戶增長的設計思路嘛。
這一套下來，是不是感覺有點兒似成相識？后來一想這不就是一套用戶增長的設計思路嘛。
 
 
4、用戶數(shù)據(jù)畫像
主要是幫助了解和理解用戶，使得我們可以劃分用戶群體和識別偏好特征，最終以提供精準營銷或是洞察用戶訴求來迭代改善產(chǎn)品。
其中偏好特征我們還可以根據(jù)業(yè)務屬性細分為興趣偏好、行為偏好、消費偏好等，并為不同偏好特征的群體提供個性化的內(nèi)容服務，例如常見的內(nèi)容標簽標記，通過識別用戶?？磧?nèi)容的標簽，來推薦類似的標簽的內(nèi)容或是有潛在興趣的標簽內(nèi)容來抓住用戶的興趣。
用好「用戶行為分析」讓體驗起飛【構建篇】
 
 
 
常見畫像指標構建
這些指標會通過用戶行為、設備信息、個人資料的完善來逐步獲取，主要可以了解到用戶的地域分布、年齡與性別分布、設備與活躍度情況，相應的數(shù)據(jù)在業(yè)務后臺基本上都能夠獲取到，只需要將某個時間分區(qū)的數(shù)據(jù)拉出來，經(jīng)過Excel之類的軟件把數(shù)據(jù)加工一下，就能夠獲取到相關數(shù)據(jù)視圖。
如果將多個數(shù)據(jù)指標結合起來分析，便可以獲取一些復合型數(shù)據(jù)指標，例如哪些年齡段的用戶群體消費能力更強、活躍度更高、不同教育背景的興趣愛好是否有一定的關聯(lián)性等等；
用好「用戶行為分析」讓體驗起飛【構建篇】
 
 
進階畫像指標構建
進階的數(shù)據(jù)畫像會完善更多的用戶特征信息，便于業(yè)務團隊找到用戶群體的特征，做進一步的精細化運營或內(nèi)容推薦，常見的畫像指標如下；
此外就是在收集用戶數(shù)據(jù)的過程中，保證用戶隱私安全、合法性和安全性。
此外就是在收集用戶數(shù)據(jù)的過程中，保證用戶隱私安全、合法性和安全性。
 
用戶分層模型應用
當我們采集到一定的用戶數(shù)據(jù)后，就可以在數(shù)據(jù)畫像的構建階段進一步完成用戶分層工作，這一步是為了將用戶分類，因為不同用戶群的目的是有差異的，例如閑逛、精準采購、參與活動的等等，以提供差異化的服務做精準營銷、識別用戶群體特征做業(yè)務策略決策、或是優(yōu)化產(chǎn)品體驗相關，不過當你的用戶規(guī)模尚小，運營模式簡單，你也不用迫切去進行用戶分層相關，因為收益不大。
那么通常都有哪些用戶分層模型呢？其實你并不陌生，一些給你列舉了一些；
用好「用戶行為分析」讓體驗起飛【構建篇】
 
 
分析結論到應用
相信你也發(fā)現(xiàn)了，用戶行為分析的構建與產(chǎn)出并不只是行為鏈路的數(shù)據(jù)，同時會包攬很多其他的有價值的指標與數(shù)據(jù)，所以不要被用戶行為四個字迷惑，或許你此刻正需要構建相關數(shù)據(jù)。
 
當你準備構建或整理用戶行為分析前，記得目標或問題先行，針對性采集數(shù)據(jù)或建設指標，在你有了相對準確或清晰易懂的數(shù)據(jù)后，那些數(shù)據(jù)報表或圖表根本難不倒你，說白了無非是將純純的一堆數(shù)據(jù)換了形式展示，如果你數(shù)據(jù)可視化的形式與應用不夠了解，你可以看看AntV官網(wǎng)的介紹說明了解一下，其實你也不用每個都研究個遍，實用的就那么幾個，酷炫是要代價的，報表搭建平臺支不支持、Excel支不支持、時間精力夠不夠研發(fā)給你整，都是問題～
AntV官網(wǎng) ——》
https://ant-design-charts.antgroup.com/examples
 
 
此篇最后！
你可能疑問沒有完整的教程手把手教你啊，其實不然，構建的前提、流程、要點、建設方向均在此篇中交代過，當你按照這套流程框架去做，基本上不會有啥大問題，一般來講這些內(nèi)容也夠用，至于選用哪些數(shù)據(jù)埋點平臺、數(shù)據(jù)分析平臺、報表搭建平臺、視自家公司情況而定吧。
也不要擔心在數(shù)據(jù)報表搭建或分析的過程中，你搞不定，是不是你執(zhí)行先不說，多問問百度或平臺客服總能解決，如果就是覺得很難上手，那么大概率是工具你不熟，或者工具不好用。
 
 


作者：泡泡_PAO
鏈接：https://www.zcool.com.cn/article/ZMTYyOTMxNg==.html
來源：站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權，非商業(yè)轉載請注明出處。
 

藍藍設計(www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan。

WechatIMG27.jpg

關鍵詞：UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數(shù)據(jù)可視化設計公司、用戶體驗公司、高端網(wǎng)站設計公司、銀行金融軟件UI界面設計、能源及監(jiān)控軟件UI界面設計、氣象行業(yè)UI界面設計、軌道交通界面設計、地理信息系統(tǒng)GIS UI界面設計、航天軍工軟件UI界面設計、醫(yī)療行業(yè)軟件UI界面設計、教育行業(yè)軟件UI界面設計、企業(yè)信息化UI界面設計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

 

評論(0) 瀏覽(573)

我們是如何搭建企業(yè)級B端設計規(guī)范的？

天宇

今天主要是和大家分享一下我們公司內(nèi)部建立設計體系的方法和實踐案例，希望大家能指正與交流～
我們團隊就是最可愛滴~~~
我們是如何搭建企業(yè)級B端設計規(guī)范的？
 
 
B+Design System是以當前互聯(lián)網(wǎng)主流B端框架為基礎，并結合合公司特定業(yè)務場景而打造的具有"公司品牌特色的B端后臺設計體系"(以下簡稱為"B+Design")，包含了有關顏色、字體、icon、柵格、版式、間距、數(shù)據(jù)可視化等設計規(guī)范指南，組件層提供 30+ 不同的組件，包括它們的不同狀態(tài)，形成的模式，以及應用的產(chǎn)品。
 
 
一、為什么要建立 B+Design 設計體系?
隨著公司快速發(fā)展，目前公司用于業(yè)務支撐的后臺管理系統(tǒng)"品類繁多且零散獨立",需構建一套"靈活、專業(yè)"的設計體系來統(tǒng)一設計生態(tài)風格及交付標準。
 
當前痛點:
溝通時間成本高
：跨部門的項目實施過程中流程混亂,產(chǎn)品、設計、開發(fā)、測試等崗位在工作對接時溝通低效且問題耦合度高；
 
交付質量差
：無項目統(tǒng)一交付標準，不同項目質量產(chǎn)出不穩(wěn)定，項目質量高度依賴于各個環(huán)節(jié)負責人的個人能力;
 
做不好設計協(xié)同
：各個系統(tǒng)級頁面架構、組件、樣式野蠻生長，缺少規(guī)范范導致樣式及體驗不統(tǒng)一;
 
研發(fā)效率低
：組件重復開發(fā)，維護成本也高，無基礎沉淀能力；
 
我們是如何搭建企業(yè)級B端設計規(guī)范的？
 
 
 
 
二、構建 B+Design 的思路
1、設計目標
伴著公司業(yè)務發(fā)展，開源的組件庫已無法滿業(yè)務需要，搭建一套更適合公司業(yè)務的UI組件庫，勢在必行；設計系統(tǒng)承載著作為一個沉淀基礎能力的支持平臺，同時也具有賦能多多邊業(yè)務、多種角色的重要作用和價值；
 
標準統(tǒng)一：
重新定義標準化的產(chǎn)品用戶體驗，統(tǒng)一品牌形象、設計標準，降低決策成本，提高產(chǎn)品迭代效率及質量；
 
降本增效：
基礎能力沉淀，規(guī)范設計元素，減少重復性設計，且提高代碼可復用性，避免重復開發(fā)，降低時間及人力成本；
 
高效協(xié)同：
降低不同設計師或上下游同事之間的溝通成本，提高團隊之間的協(xié)作力，提升團隊整體效率；
 
設計延展：
通過設計規(guī)范建立，滿足組件在不同場景及業(yè)務中的延展和擴充，從而實現(xiàn)全鏈路、多場景的高效輸出；
我們是如何搭建企業(yè)級B端設計規(guī)范的？
 
 
 
2、設計原則
為了更適用于企業(yè)級產(chǎn)品的開發(fā)和使用，通過大量中后臺場景的的實踐，B+Design設計系統(tǒng)提煉出以下設計原則：
清晰：
效率提升是務實之基。設計應減少不確定因素，降低用戶判斷次數(shù)，明確信息層級導向，使操作目的更清晰；清晰的設計體系讓產(chǎn)品操作直觀、流程一步到位；信息傳達清晰表意明確，助用戶短時間內(nèi)快速理解并作出判斷。
 
高效
設計效率：可快速生成效果圖，也可使用Sketch，組件庫，頁面模板等快速生成效果圖和業(yè)務解決方案來提高產(chǎn)品體驗一致性；
開發(fā)效率：組件均已代碼封裝；并提供體驗評估標準以供參考，保證產(chǎn)品質量；
使用效率：系統(tǒng)常用組件(如批量搜索和操作)提高用戶工作效率；
工作協(xié)同：減少產(chǎn)品開發(fā)流程中各個角色之間的溝通成本；
 
標準化：
樣式規(guī)范、操作流程、呈現(xiàn)高度一致的設計標準，能體現(xiàn)產(chǎn)品的品牌感與信賴感，實現(xiàn)品牌感的系統(tǒng)傳達，還能降低用戶反復學習成本，給用戶帶來品牌信賴。
 
創(chuàng)新：
通過對當前市場主流設計系統(tǒng)開展競品分析，結合FS業(yè)務場景對各個組件進行統(tǒng)一規(guī)范，打造符合FS品牌特性的產(chǎn)品設計體系；
我們是如何搭建企業(yè)級B端設計規(guī)范的？
 
 
 
3、原子化組件思維
原子最早是由英國化學家/物理學家約翰·道爾頓提出的，繼承古希臘原子論和牛頓微粒說，提出的原子論?；瘜W元素由不可分的微粒(原子)構成的，它在一切化學變化中是不可再分的最小單位。
原子理論同樣適用于我們的設計系統(tǒng)中：我們的頁面是由原子(最小單位設計元素)、分子(基礎控件)、組織(基礎功能組件)、模版(業(yè)務定制組件)、頁面構成的；
我們是如何搭建企業(yè)級B端設計規(guī)范的？
 
 
注意：設計組件不是把UI元素堆積到一個地方，然后各處集中引用用這么簡單。組件化的工作方式信奉獨立、完整、自由組合，目標就是盡可能把設計與開發(fā)中的元素獨立化，使它具備完完整的局部功能，通過特定規(guī)則自由組合來構成整個產(chǎn)品。
 
 
三、構建 B+Design 的步驟
基于前期的思考，接下來我們的任務是對整個體系的制定進行任務規(guī)劃，以下是四大步驟：
我們是如何搭建企業(yè)級B端設計規(guī)范的？
 
 
 
第一步：現(xiàn)狀分析
通過現(xiàn)狀所有系統(tǒng)進行設計走查及用戶問卷調(diào)研，收集用戶建議及觀點，明確規(guī)范需要優(yōu)化的方向。
我們是如何搭建企業(yè)級B端設計規(guī)范的？
 
 
 
第二步：框架梳理
通過三大競品設計體系（阿里，字節(jié)，騰訊）框架的梳理，結合現(xiàn)有設計頁面，分析業(yè)務場景和競品框架，確定FS的最小元素，整理和歸類自己的組件框架。
最終B+Design組件框架主要分為八大板塊，分別為：基礎樣式、通用、布局、導航、數(shù)據(jù)錄入、數(shù)據(jù)展示、反饋、其他,共50+組件；
我們是如何搭建企業(yè)級B端設計規(guī)范的？
 
 
 
第三步：設計組件和規(guī)范指南
針對已梳理好的框架展開組件設計工作，同時為每個組件編寫相應的規(guī)范指南，為使用者提供場景參考。
1、設計組件
組件設計是設計規(guī)范中最核心，工作量最大的一個環(huán)節(jié)。我們可以將它拆解成幾個部分，先做出基礎組件，再基于基礎組件和業(yè)務需求抽象設計業(yè)務組件，最后抽象成頁面模板。
我們是如何搭建企業(yè)級B端設計規(guī)范的？
 
 
 
  •  
    基礎組件
說到基礎組件，這就是前面所提到的原子化思維，在進行設計系統(tǒng)的構建時，我們期望達到這樣一種效果：當對任何一個原子進行改動時，所有依賴于該原子的部件都能夠全部自動更新。唯有滿足這一條件，設計系統(tǒng)所設想的提升效率、解放生產(chǎn)力的目標才能真正得以實現(xiàn)。
我們是如何搭建企業(yè)級B端設計規(guī)范的？
 
 
我們是如何搭建企業(yè)級B端設計規(guī)范的？
 
 
我們是如何搭建企業(yè)級B端設計規(guī)范的？
 
 
我們是如何搭建企業(yè)級B端設計規(guī)范的？
 
 
 
 
  •  
    業(yè)務組件
在構建完基礎組件后，可以根據(jù)業(yè)務需求，將部門內(nèi)使用頻率較高的組件進行評估，抽象成業(yè)務組件。
例如我們用的比較多的就是人員選擇器、附件下載、文本編輯器等等...
我們是如何搭建企業(yè)級B端設計規(guī)范的？
 
 
  •  
    頁面模板
完成基礎組件和業(yè)務組件的構建工作后，我們可以依照全局說明，通過組件搭建頁面模板。頁面模板不僅能夠切實提升組件的使用效率，而且能提供出色的組件使用示范作用，增進設計說明和組件的結合。
 
我們是如何搭建企業(yè)級B端設計規(guī)范的？
 
 
我們是如何搭建企業(yè)級B端設計規(guī)范的？
 
 
我們是如何搭建企業(yè)級B端設計規(guī)范的？
 
 
我們是如何搭建企業(yè)級B端設計規(guī)范的？
 
 
我們是如何搭建企業(yè)級B端設計規(guī)范的？
 
 
 
2、規(guī)范指南
在后臺設計體系中，“規(guī)范指南”是一套為了確保設計的一致性、可用性和可維護性而制定的規(guī)則和指導原則。將所有的規(guī)范內(nèi)容整理成詳細的文檔，配以示例和說明，方便團隊成員查閱和參考，此步驟也工作量巨大。主要分為七大模塊：
我們是如何搭建企業(yè)級B端設計規(guī)范的？
 
 
我們是如何搭建企業(yè)級B端設計規(guī)范的？
 
 
 
 
第四步：效果驗證
“B+Design System”建立成功后在"多個業(yè)務系統(tǒng)"中進行應用，通過實際業(yè)務反饋來進行效果驗證。
我們是如何搭建企業(yè)級B端設計規(guī)范的？
 
 
 
四、升級迭代機制
一個統(tǒng)一的設計語言不應該僅僅是一組靜態(tài)規(guī)則和單個組件構成成的，它應該是一個不斷發(fā)展的生態(tài)系統(tǒng)。需要我們在產(chǎn)品實踐中不斷優(yōu)化、迭代，讓組件更加貼合場景，更好的服務業(yè)務。
我們是如何搭建企業(yè)級B端設計規(guī)范的？
 
 
以上就是我們公司內(nèi)部構建整個設計體系的全過程啦~~~~~
 
在完成設計規(guī)范的構建后，我們聯(lián)合了產(chǎn)品經(jīng)理和前端工程師，幫助每個環(huán)節(jié)的人員快速搭建產(chǎn)出物。
 
對于產(chǎn)品經(jīng)理
：我們幫助產(chǎn)品搭建了一套Axure元件庫，該元件庫與設計組件庫一樣，可以快速搭建原型，提高了產(chǎn)品的工作效率，與設計師、開發(fā)的溝通也更加順暢。甚至對于簡單的頁面產(chǎn)品可以自己直接出原型給開發(fā)，開發(fā)直接沿用寫好了的組件庫。
 
對于前端
：輔助前端建立前端組件庫，這樣減少了設計走查的問題，對于以前各種樣式問題需要調(diào)整，現(xiàn)在基本都是寫好了的組件，可以有更多時間去寫交互和提高系統(tǒng)的性能。
 
 
 


作者：設計恐慌癥
鏈接：https://www.zcool.com.cn/article/ZMTYyNzI5Ng==.html
來源：站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權，非商業(yè)轉載請注明出處。
評論(0) 瀏覽(179)

小程序尺寸，一篇搞定

天宇

很多工作了幾年的設計師依然搞不懂小程序畫布創(chuàng)建依據(jù)和適配邏輯，所以今天針對這個問題，做一篇簡單的分享，來對這種基礎知識點做個掃盲。
首先小程序之所以叫小程序，因為它不是在手機、電腦系統(tǒng)上運行的應用（Native），而是在微信里運行的應用。也就是說，微信本身有套系統(tǒng)，而小程序的設計要遵循的是微信的設計規(guī)范，而不是蘋果、安卓、微軟的設計規(guī)范。
小程序尺寸，一篇搞定
 
 
這么做的原因是為了讓開發(fā)者只用一套代碼，就能在所有平臺、系統(tǒng)上的微信運行，并展示出相同的效果。這個邏輯和網(wǎng)頁類似，不管你在什么平臺還是系統(tǒng)只要安裝了瀏覽器，就可以讀取相同的網(wǎng)頁，而不用針對不同平臺寫一套全新的代碼出來。
雖然小程序主要在移動端運行，它的設計理念會盡量貼合原生應用，多數(shù)控件、組件、交互的設計方式一樣，但系統(tǒng)不同必然會導致細節(jié)上的差異，而界面的畫布就是最大的問題。
首先小程序官方創(chuàng)建了一套自己的語言，WXML、WXSS、WXS，分別對應網(wǎng)頁前端的 HTML、CSS、JavaScript?？刂瞥叽纭邮降恼Z言是 WXSS，而它的使用的尺寸單位是 rpx。
rpx 不是厘米、像素這樣的物理單位，也不是移動端會用的 pt、dp、sp 這樣的矢量單位，而是一個很特殊的“
變種單位
”。
微信系統(tǒng)在渲染界面時，固定了移動端視圖窗口為 750rpx。不管你在蘋果還是安卓系統(tǒng)，用的是無劉海小屏 iPhoneSE 還是新款 iPhone15 破兒麥克斯，都使用 750rpx 渲染。
換句話說，
rpx 的長度即 —— 屏幕的 1/750
。
這是個比較抽象的概念，移動端使用矢量單位，是為了在屏幕變大的同時擴大畫布尺寸，提升顯示容量，所以有了適配原則，組件的應用自動布局適應空間的變化。
但是小程序不一樣，微信采用了最簡單粗暴的模式 —— 等比縮放。在不同尺寸的屏幕中，直接縮放內(nèi)容來填滿窗口。比如下面是使用 iPhone13、iPhone15promax、Mac 端截圖的同一個小程序界面。
小程序尺寸，一篇搞定
 
 
如果我們把它們縮放成一樣的寬相互疊加，會發(fā)現(xiàn)元素大小是一樣的（Mac 端字體和移動端有差異，所以有一定寬度差異，但是字號相同）。
小程序尺寸，一篇搞定
 
 
但正常的移動端應用，使用自動布局而不是等比放大，覆蓋到一起是不會重疊的，比如下面 13 和 15promax 中同一張 APP 界面截圖的疊加。
小程序尺寸，一篇搞定
 
 
所以，微信的畫布就是 750rpx 寬適配到所有移動端屏幕，但高度會根據(jù)比例調(diào)整，畢竟不同屏幕的長寬比不一樣。
小程序尺寸，一篇搞定
 
 
再進一步分析，750 這個數(shù)值哪來的呢？一看就知道是 iPhone 早期和低端設備的實際分辨率，即 375 的 2x 數(shù)值。雖然現(xiàn)在移動端設計已經(jīng)從 375 過渡到 390 再更新到目前的 393，但小程序依舊使用375。
原因和之前響應式分享中提到的一樣 ——
往大適配容易，往小適配難
！
現(xiàn)在市場上還保留數(shù)量可觀的 375 設備，以微信的角色和體量就勢必要兼容它們。既然兼容它們，那
設計和渲染就以兼容的最小畫布為準向上放大
，而沒有向下縮小的顧慮，這可以最大保證兼容性和可用性。
用 375 規(guī)格的設備去創(chuàng)建畫布是沒有問題的，不管你是使用 iPhone SE 還是 iPhone Mini 為標準都可以。
小程序尺寸，一篇搞定
 
 
因為系統(tǒng)用的 750rpx，所以原則上使用 750*1334 或 750*1624 畫布創(chuàng)建最佳，但實際情況還是有出路。因為官方組件庫用的是 375 寬....
小程序尺寸，一篇搞定
 
 
這又涉及到現(xiàn)實情況的考慮，畢竟設計是設計，開發(fā)是開發(fā)。在設計過程中我們往往會用其它應用設計好的素材，尤其一些大廠應用，小程序就是 APP 的翻版。如果把畫布做成 750 意味著素材得全部重調(diào)一遍，和重做差不多，而且參數(shù)和設計師習慣不同，會出很多錯誤。
所以，正常創(chuàng)建小程序的畫布使用常規(guī)的 375 畫布即可。而在進入開發(fā)階段，程序員可以直接在即時、 Figma、藍湖的標注設置中使用 2x 的倍率，既可以獲得 rpx 的具體數(shù)值。
這是個隱患問題，建議盡量在設計前和你們的前端程序員核對一遍懂不懂的如何換算數(shù)值，創(chuàng)建 375 是否有阻力，如果一定強調(diào)要用 750，你再自己展開后續(xù)的對線，誰贏了聽誰的……
除了標準移動端畫布外，還有個非常鬼畜的地方，就是組件庫內(nèi)有個 Half-screen Dialog，里面的組件用的是 414 寬。這數(shù)值是 iPhone 8 Plus/ XS Max  的規(guī)格，總不能還特意去支持這些古代大屏吧？
414 是小程序在電腦端啟動時使用的規(guī)格，未經(jīng)適配的小程序在電腦端的窗口就是固定的 414*736 。
小程序尺寸，一篇搞定
 
 
小程序尺寸，一篇搞定
 
 
用 736 這個高也和兼容小屏幕有關就不展開了，且小程序在電腦端也可以使用響應式的適配，只是這個需求實在太少，所以也不在這里多做介紹，感興趣的可以自己研究官方規(guī)范。
 
最后，我自己當 AI 做總結
：
  •  
    小程序使用 rpx 作為寬度單位
  •  
    移動端小程序使用 750rpx 渲染
  •  
    rpx 長度是移動端屏幕的 1/750
  •  
    小程序適配不同手機屏幕的方式是根據(jù)寬度等比縮放
  •  
    創(chuàng)建小程序設計畫布使用 375*667 或 375*812
  •  
    小程序在電腦端上會放大成 414*736
  •  
    電腦端調(diào)用的原生組件和移動端不同


作者：酸梅干超人
鏈接：https://www.zcool.com.cn/article/ZMTYzOTY3Ng==.html
來源：站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權，非商業(yè)轉載請注明出處。
 
評論(0) 瀏覽(135)

日歷

鏈接

個人資料

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

存檔