<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          用戶體驗中的神經設計:認知科學如何幫助我們打造更佳的界面

          杰睿 用戶研究

          通過 AI 輔助創建的圖像

          說實話,我們大多數人在設計屏幕時并不會考慮人腦。我們關注的是布局、間距和顏色。但事實是:設計并非發生在屏幕上——而是發生在用戶的大腦中。這就是神經設計的用武之地。

          神經設計就是運用認知心理學和神經科學來構建直觀、輕松甚至略帶愉悅的界面。我之前并沒有學過神經科學,但自從我開始了解大腦的運作方式后,我的設計方式就徹底改變了。

          以下是我所學到的知識 — — 有真實的例子、用戶體驗法則和一些你可能想看看的書籍精華。

          1. 大腦是懶惰的(好的方面)

          我們的大腦天生就具有節能的本能。這意味著人們幾乎總是會選擇阻力最小的路徑。當你的用戶界面過于復雜或選項過多時,大腦就會說:“不行。”

          記住希克定律

          提供的選擇越多,做出決定所需的時間就越長。

          想想谷歌的主頁只是一個標志和一個搜索欄。這并非偶然——它的設計是為了減少認知負荷。

          Google.com

          您可以做什么:

          • 確定主要行動的優先級
          • 保持表單簡短(就像 Typeform 那樣)
          • 刪除無用的元素

          2.人們先看到,后思考

          設計首先是情感驅動,其次是邏輯驅動。這意味著色彩、布局甚至動畫都能在第一秒就建立信任。

          讓我們來看一個例子:Duolingo 的應用程序使用友好的插圖、有趣的語氣,以及一些感覺像大腦“拍拍背”一樣的小獎勵。它降低了學習新語言的情感障礙。

          圖片來源——匹茲堡雜志

          以下是Susan Weinschenk 所著《神經網絡設計》一書中的一條重要建議:

          “我們不會做出合乎邏輯的決定。我們會做出情緒化的決定,然后用邏輯來證明其合理性。”

          您可以做什么:

          • 使用溫暖、友好的設計語言
          • 讓入職培訓感覺像是手把手指導,而不是測驗
          • 添加微妙的動作,使操作感覺靈敏(就像Apple在 iOS 中使用彈跳或淡入淡出一樣)

          3.熟悉的感覺很好

          大腦喜歡模式。當用戶看到自己熟悉的事物時,他們會感到安全,并且能夠掌控一切。

          記住雅各布定律

          用戶大部分時間都花在其他網站上。因此,他們期望你的產品也能以同樣的方式運作。

          讓我們看一些例子:Instagram 的底部標簽欄、亞馬遜的購物車圖標Gmail 的撰寫按鈕——它們都遵循常見的視覺隱喻,以減少學習曲線。

          您可以做什么:

          • 遵循原生平臺慣例
          • 使用常見的圖標和術語(除非您是 Zara,否則不要將購物車稱為“我的包”)
          • 除非有充分理由,否則避免不必要的改造

          4.記憶很短暫——真的非常短暫

          認知科學告訴我們,用戶的工作記憶中一次只能記住大約4個條目。因此,如果你的應用依賴于用戶記憶指令,那么它注定會失敗。

          “米勒定律”來了

          一般人的短期記憶只能保留 7 件(正負 2 件)物品。

          真實案例:你有沒有嘗試填寫表單,但錯誤信息只有在提交后才會顯示,而你卻忘了哪個字段出了什么問題?這簡直就是記憶噩夢。

          您可以做什么:

          • 將任務分解成小的、可管理的步驟(例如Airbnb 的分步主機設置
          • 使用內聯驗證
          • 保持標簽靠近輸入(不要讓用戶滾動或猜測)

          5.反饋=安全

          大腦會不斷檢查:這有效嗎? 我能控制嗎?如果用戶界面沒有響應輸入,用戶就會感到不確定——即使后臺一切正常。

          用戶體驗法則:反饋循環原則

          人們需要立即得到反饋來了解其行為的結果。

          例如,Slack在消息發送時會顯示“正在發送…”的動畫和勾號。這能建立信任,尤其是在快速對話中。

          您可以做什么:

          • 顯示加載狀態、成功消息或錯誤提示
          • 允許用戶撤消操作(如 Gmail 的“撤消發送”)
          • 動畫過渡到信號系統狀態

          如果你想深入了解,可以參考以下書籍推薦

          以下幾本書確實幫助我將神經科學和用戶體驗聯系起來:

          • Susan Weinschenk 的《神經網絡設計》 ——超級易讀,示例豐富
          Susan Weinschenk 的《神經網絡設計》
          • Susan Weinschenk 撰寫的《每個設計師都需要知道的關于人的 100 件事》 ——設計師的最愛
          蘇珊·溫申克 (Susan Weinschenk) 的《每個設計師都需要了解的關于人的 100 件事》
          • 史蒂夫·克魯格的《別讓我思考》 ——雖然不是神經科學,但完全符合大腦的行為方式
          史蒂夫·克魯格的《別讓我思考》
          • 唐納德·諾曼的《設計心理學》 ——以人為本的設計思維的經典見解
          唐納德·諾曼的《設計心理學》

          好的用戶體驗不僅僅是讓事物看起來美觀。它在于理解人腦的運作方式,并圍繞此進行設計。神經設計提醒我們,我們設計的不是屏幕,而是思維中的體驗。

          當我們做得好的時候,一切都會順利。

          所以下次調整布局或重新設計流程時,問問自己:
          現在什么對大腦來說最容易?
          這個問題比任何花哨的工具都更能幫助我做出更好的決策。

          ……

           

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

          蘭亭妙微 軟件開發與電子病歷醫療界面設計服務

          杰睿 隨筆的一些文章

           

           
           
          蘭亭妙微作為專業的軟件開發公司,在行業深耕 16 年,由清華團隊全程主導技術與設計方向,積累了扎實的行業經驗。在 QT 軟件開發領域,我們的技術團隊成員平均擁有 8 年以上相關工作經歷,熟悉 QT 框架的各類功能模塊與開發技巧,能夠根據企業不同的業務場景,定制開發穩定可靠的桌面應用程序。從需求溝通階段的功能梳理,到技術方案設計時的架構搭建,再到開發過程中的代碼編寫與測試優化,每個環節都有嚴格的質量把控標準,確保交付的軟件在運行效率與穩定性上符合客戶預期。
          設計服務方面,我們兼具用戶體驗設計公司與界面設計公司的雙重優勢。在高端網站設計業務中,團隊會先深入了解企業的品牌文化、核心業務與目標用戶群體,結合市場流行趨勢與實用功能需求,打造既符合品牌調性又適配多終端的網站。從首頁的視覺呈現到內頁的信息架構,從交互邏輯的順暢性到加載速度的優化,都經過細致打磨,助力企業通過線上平臺有效展示自身形象。在 B 端界面設計與 APP 界面設計中,始終以用戶體驗為核心考量,通過前期的用戶行為調研與業務流程分析,合理規劃界面的信息層級與操作路徑,讓復雜的功能模塊變得條理清晰,提升用戶的操作效率。
          在醫療健康領域,我們尤其在電子病歷醫療數據分析界面設計上積累了豐富經驗。設計過程中,團隊會與醫護人員、醫療信息管理人員進行多輪溝通,深入了解臨床工作流程、數據記錄規范與分析需求。針對電子病歷中大量的文字信息、檢查數據與診療記錄,采用分類標簽、數據可視化圖表等設計方式,讓醫護人員能夠快速定位關鍵信息。同時,考慮到醫療工作的嚴謹性,在界面的操作反饋、數據校驗等細節上做了特殊處理,減少誤操作的可能性,讓醫療信息的錄入、查詢與分析過程更加高效便捷。
          秉持 “敬事而信,德智兼修” 的企業理念,16 年來我們已服務過超 300 家來自金融、醫療、工業、教育等多個行業的客戶,完成 640 多個不同類型的項目,在設計與開發領域積累了良好的口碑。
           
          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

          留白設計和UI設計準則

          濤濤 設計思維

          本文主要介紹留白設計準則(包括留白與裁剪可突出主體、留白與重心能凸顯重點功能、留白影響視覺流使閱讀有序、留白可對信息分組)和 UI 設計排版準則(層級通過字號、顏色建立,重復增加頁面整體感,對齊引導視覺流,接近原則整合關聯元素),強調合理運用這些準則可提升設計效果與用戶體驗。

          UI 設計需懂用戶心理學

          濤濤 交互設計及用戶體驗

          UI 設計需懂用戶心理學,感知受過去經驗、當前環境和未來目標影響,因此設計要避免歧義、保持一致并理解用戶目標;格式塔心理學的接近性、相似性等原則可用于優化界面層次和用戶體驗;同時要降低信息噪音讓用戶專注,考慮到人天生不愛閱讀的特性,需優化信息設計,減少文字量、提升可讀性,這些都基于人類認知和心理學,能幫助設計師做出更符合用戶需求的設計。

          用戶體驗一致性思考

          濤濤 交互設計及用戶體驗

          在團隊內部,我們已確立了一套設計規范,在日常項目中使用設計規范輸出變的高效、統一。然而,在實際操作中,不可避免地會遇到一些特殊情況:某些客戶提出的個性化需求并不完全契合既定的設計規范,這些促使我們不得不在保持設計一致性的基礎上進行靈活調整。因此,深入反思并優化一致性原則的應用策略顯得尤為重要。我們需要探索如何在堅守設計規范核心精神的同時,靈活應對多變的需求,確保設計既保持統一和諧,又能滿足特定場景下的獨特需求,從而實現用戶體驗與品牌價值的雙重提升。

          我們來幫你捋清楚產品的設計思路

          濤濤 設計思維

          全程參與產品從 0 到 1 的設計能鍛煉綜合能力,但實際工作中更多是迭代優化,需主動熟悉業務背景以掌握設計主動權。
          文章重點解析立項前探索期的設計思路,后續將介紹交付與迭代階段。

          設計案例分享 | 人力資源模塊界面設計

          杰睿 B端ui設計文章及欣賞

           

          產品定位
          遠東移動門戶APP-人力資源模塊包含收入證明、在職證明、假期管理、公租房、政策公示等,同時將互動信息在集團公告區互動展示,實現人員管理、交流協同化和一體化。使集團工作更便捷、高效,組織管理更透明化,合理化。
          目標用戶
          遠東移動門戶APP面向和服務于公司全體領導和員工,是一個綜合性、協同性的辦公管理系統。本著操作便捷,辦事方便高效,溝通及時有效的原則,界面友好易用、簡潔美觀。
          設計風格
          視覺方面,整體色調與公司logo及網站主色調紅色保持一致。交互上,考慮到使用便捷、省時,提取主要功能按鈕放在首頁上方;同時,常用的業務模塊集中展示,并做精細化處理。保證界面整體性和簡潔統一,并做到有主有次,層次清晰。在布局上,做了兩套方案供客戶選擇。第一套更大膽創新,第二套則相對中規中矩。

          AI創作工具的「可控性」與「用戶體驗」博弈

          鶴鶴

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


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

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

          鶴鶴

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


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

          日歷

          鏈接

          個人資料

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

          存檔

          亚洲va欧美va天堂v国产综合