1. <sup id="1kcns"></sup>

    2. <rt id="1kcns"><legend id="1kcns"></legend></rt>
      国产AV巨作丝袜秘书,国产精品久久香蕉免费播放,国产草草影院ccyycom,涩涩爱狼人亚洲一区在线,日本阿v片在线播放免费,国产精品一区二区三区蜜臀,精品一区二区三区在线观看l,av深夜免费在线观看

      首頁

      蘭亭妙微UI設計公司分享:生態型工具品牌與體驗升級指南——體驗升級篇

      清陽 交互設計及用戶體驗

      背景介紹

      騰訊 CoDesign 誕生于2019年,最早以「設計云-工作臺」的定位開始服務騰訊內部。在2020年從設計門戶拆分為獨立產品與品牌 CoDesign,并于同年開始對外服務。

      在產品對外服務的過程中,產品一直在進行高速的產品能力與體驗優化迭代,產品所服務的用戶類型也在不斷豐富。

      今年,CoDesign 為滿足更多類型用戶的協作與體驗訴求,在產品資產管理結構與權限、數字資產管理能力上進行了大幅度的升級;以及設計云產品生態的逐漸成熟與對生態品牌運營的規劃,都對 CoDesign 的品牌與體驗有著迫切的升級訴求。

      一、闡明策略

      今年上半年,CoDesign 的品牌與體驗升級的設計工作幾乎在同一時間啟動,產品體驗升級工作也面臨著多個挑戰。

      • 產品體驗升級具體需要做什么?
      • 如何兼容產品未來能力建設?
      • 怎么在品牌不確定的前提下,確保后續視覺的一致性及與競品的差異性?

      在與項目組、品牌團隊多次溝通后,我們決定通過以下策略解決產品體驗升級所面臨的挑戰:

      一、產品體驗升級工作構成涉及到產品、交互、視覺、研發各個層面。首先,我們需要明確具體的體驗優化項,并將其定位到具體層面,制定出體驗優化的前置工作與規劃。

      二、結合新的產品升級方案,梳理經典頁面結構。結合競品分析,構建出具有差異化的體驗基調。

      三、最后,為了進一步加強產品體驗與競品的差異性,完善「推廣視覺」到「產品視覺」的品牌體驗閉環。我們將產品內觸點進行進一步拆解,并在品牌聲量象限中定位,結合設計核心(Design DNA)進行延展應用。

      二、設計實施

      1. 從定位問題,制定規劃開始

      我們對當前版本進行全方位視覺及體驗走查,并且整理用戶反饋的缺陷問題,發現了 70 多個交互、視覺以及開發還原上的問題。總結歸納為框架擴展性不足,體驗不統一,效率低,品牌感知弱。

      首先在交互上,我們的交互同學對產品原則,全局定義,通用流程,頁面框架,標準組件,文案規范進行進一步的定義和梳理,保證交互的規范性和一致性。

      其次在視覺上,我們基于 1.0 的問題,在 2.0 上明確了形,色,構,質,大小,間距,組件等規范用法,并對其進行文檔化。以便在后續工作中形成更加嚴謹的設計規范,來保證多人合作中大家從開始的思維一致到最后產出的一致。

      再次在研發上,我們將基礎組件和業務組件分開維護,基礎組件代碼我們從 Ten 切回 TDesign,極大地提升了組件的通用性和定制化,并參考 TDesign 的 Token 規則,定制 CoDesign 的基礎組件樣式。同時在業務組件上,我們將具有通用性組件進行抽離,(例如卡片組件)單獨構建成為標準組件。保證研發異地合作組件樣式的統一性,提高效率。

      「 項目開始之初,不用急于陷入方案細節設計中,可以針對已知問題,拉通團隊其他成員,對整體方案中各職能團隊的前置工作進行初步規劃,有助于后續工作中團隊成員工作流的無縫銜接。」

      2. 從頁面結構上切入

      2.1 結合產品方案,定義經典頁面結構

      梳理整站經典頁面類型,結合產品新的界面框架方案,以一級功能模塊舉例:

      定義一級功能模塊,二級功能模塊,各功能詳情頁,子模塊表單頁的頁面結構。

      2.2 國內外競品分析,構建差異化頁面結構

      我們針對國內外優秀競品進行研究分析,提取其中的共性特征,發現競品常用的頁面結構分別為:

      • 平面結構用線分割功能區和內容區
      • 左右結構用線面組合的形式分割功能區和內容區
      • 上下結構用線面組合的形式分割功能區和內容區

      從以上頁面結構分析上,大致總結下構建差異化頁面結構需要考慮的方向是:功能和內容的分割方式,內容區的展示方式。

      那在整個體驗升級,CoDesign 的所有工作都圍繞著一個核心理念——「內容設計」。所謂內容設計,是我們希望用戶在使用工作臺時,不受其他因素的干擾,專注于內容本身。

      所以在 CoDeisgn 的頁面結構上,我們和市面上主流競品做了差異化處理,新版本我們打破了傳統內容分割的方式,在 Z 軸的空間上分出功能區域和內容區域,打通左側導航和頂部操作欄的功能區域,將內容聚攏重點突出。去掉大量界面中的線與框,減少頁面非必要元素露出,使其目光可以聚焦在內容本身,讓整個頁面層級清晰的同時帶來簡約的視覺感受。

      「 不管是平面,左右還是上下結構,都沒有絕對的好與壞,取決于我們希望用戶的視覺落點和視覺動線在哪,例如在一個平面結構中,人們的視覺落點往往是最重的顏色或者最大的文字等,相對應你的視覺動線就在依次去找第二,第三「重」的內容,那當這個平面中增加了空間維度,依然是先看到最「重」的內容,只不過因為有了前后的關系,在視覺感官上你會區分前后內容的重量對比。

      結合 CoDesign 首頁頁面結構設計最終效果圖,你會發現首先視覺落點在前景白色內容區的內容卡片上,緊接著視覺動線來到后景用戶高頻操作的新建操作,最后是左側導航欄的區域。」

      3. 在品牌上延伸

      我們將產品內觸點進行進一步拆解,并在品牌聲量象限中定位,結合品牌聲量象限的設計要求以及設計核心(Design DNA)進行延展應用。

      3.1 品牌色

      基于品牌標志延展出基礎的品牌色規則,并且為了兼顧多觸點的應用,我們在品牌主色基礎上降低了色彩的飽和度,延展出一系列輔助色,提供了較為豐富的色彩運用,同時為頁面帶來了更為輕盈,靈動的視覺感受。最后再根據品牌聲量象限,指導不同品牌出點的顏色使用。

      3.2 輔助圖形

      為了塑造統一的品牌語言,我們從品牌標志中提取基礎輔助形,設計了一系列延展圖形,打造多樣化極具品牌調性和視覺表達。

      3.3 品牌特征延展

      通過品牌特征的運用,賦予圖標、登錄頁、演示文件、空頁面等應用場景更明確的品牌識別性,進一步強化統一品牌認知。

      CoDesign 圖標

      CoDesign 登錄頁

      CoDesign 演示文件封面

      CoDesign 空狀態

      CoDesign 分享頁&加載

      CoDesign 核心界面效果展示

      「 品牌視覺和產品視覺是相輔相成的,如何讓用戶有清晰的品牌感知,往往來源于一些細小的場景品牌運用,這也是視覺一致性的重要體現。」

      4. 在兼容性上閉環

      4.1「一個」樣式

      我們在每一個組件的設計與規劃中,都盡可能的照顧在多場景的兼容性。例如卡片組件的設計,1.0 的卡片設計,我們有著各種不同的樣式,比例,間距等;新版設計中我們將內容卡片進行了結構化處理,采用了一樣的視覺語言,框架,裁切方式,甚至開發邏輯,來增強視覺的統一性 ,減少維護成本的同時,兼容更多的場景。

      4.2「一種」框架

      設計開始規劃時,我們就用一套顏色 Token 搭建起設計和開發之間界面樣式的映射關系,為未來暗黑模式適配打下基礎。

      新版的頁面結構設計,也為不同屏幕設備提供更好的兼容性。

      4.3「一套」視覺語言

      隨著整個設計云生態的品牌形象的更新和統一,然而各個子產品內的視覺風格還是各異,那未來 CoDesign 會作為設計平臺的連接器,我們也有意識的讓新版的視覺風格延續到各大平臺,來保持一致的視覺語言。那目前我們已經陸續讓這套視覺風格延續到了設計云企業管理后臺,OpenDesign,設計走查像素眼。

      三、資產管理與設計提效

      1. 品牌、視覺、運營協作

      在視覺團隊多人協作中,我們統一了協作環境,全文件的 Figma 化,并且將產品設計、運營設計組件化,方便團隊成員使用更加靈活高效。

      2. 視覺、研發協作

      在視覺、研發多人協作中,設計與研發統一使用 TDesign 基礎組件,保證基礎組件一致性;業務組件在業務拓展過程中由業務開發獨立建設并維護,在最后通過視覺樣式 Token 化,建立設計和開發之間界面樣式的映射關系。

      結語

      以上內容是基于 CoDesign 體驗升級應用過程中的一些關鍵策略及執行思路。

      總體來說,我們在這個版本的設計上,除了不斷解決產品的訴求和用戶反饋的體驗問題之外,還在努力提升設計(交互、視覺)及研發一致性,構建可輔助團隊標準化的設計、研發的 Token 及組件庫;打好底層基礎框架,未來 CoDesign 會增加更多的功能,輻射更廣業務。我希望這些基礎面的建設,能帶來整個平臺一致性的用戶體驗。

      轉載:人人都是產品經理

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

       

      image.png

      靈感枯竭不用愁!5 個優質產品設計巧思,輕松打破創作瓶頸

      清陽 交互設計及用戶體驗

      大家好,歡迎來到蘭亭妙微UI設計公司輕分享專欄!我們會持續拆解優質線上產品案例,挖掘實用的設計思路與細節,和大家一起發現日常產品里的精妙設計,汲取創作靈感。今天就分享 5 個落地性極強的產品設計巧思,幫大家走出創作瓶頸。

      一、懂車帝:AI 圖片識車,打造零門檻查車體驗

      懂車帝上線 AI 圖片識車功能,用戶只需拍攝或上傳車輛照片,系統便能快速識別車型,并同步展示品牌、款式、車輛配置等完整信息,精準解決用戶查車、識車的核心痛點。
      1. 簡化操作,降低信息查詢成本
         
        針對汽車愛好者、購車人群 “認車難、查配置流程繁瑣” 的問題,該功能自動抓取車輛外觀、車標等核心特征,一鍵輸出完整車型資料。對比傳統手動檢索、參數比對的方式,大幅提升信息獲取效率。
      2. 全場景適配,助力消費決策

        image.png

        無論是街頭偶遇心儀車輛隨手識別,還是在二手車市場核驗車輛配置,AI 識車都能精準匹配信息。多場景的實用能力,為用戶選車、購車提供客觀參考,讓車輛信息查詢變得簡單高效。

      二、高德地圖:地標打卡動效,賦予互動滿滿儀式感

      在高德地圖「足跡」的地標打卡環節,產品搭配趣味動畫、手機震動雙重反饋,大幅提升用戶的使用體驗與參與感。設計以小人持旗插地的動態畫面為核心,打卡完成后彈出 “地標打卡王” 專屬標語。
      1. 動效加持,強化打卡儀式感
         
        插旗動畫搭配手機震動,為簡單的打卡行為賦予十足儀式感。動作畫面與榮譽標語自然銜接,及時給予用戶正向心理反饋,讓打卡成功的喜悅感更強烈。
      2. 趣味互動,打造長效記憶點

        image.png

        生動流暢的動效,讓「足跡」功能深入人心。原本單純的記錄工具,轉變為 “征服地圖、收集地標” 的趣味互動玩法,有效激發用戶主動探索、解鎖更多打卡稱號的意愿。

      三、懂車帝:3D 看車,線上沉浸式感知實車空間

      依托高精度 3D 車輛模型,懂車帝 3D 看車功能完整還原實車外觀與內飾細節。為了讓用戶直觀判斷車內乘坐空間,產品還提供多款不同身高的人體模型,可精準測算車內頭頂、腿部等區域的剩余空間。
      1. 突破局限,打造沉浸式看車體驗

        image.png

        借助三維建模技術,用戶可自由旋轉、縮放車輛模型,配合流暢的交互動畫與實時反饋,打破傳統圖文看車的單調感,營造身臨其境的線上看車氛圍,提升用戶對車輛的認知度與信任感。
      2. 數據可視化,直觀評估乘坐空間
         
        將抽象的車輛尺寸數據轉化為可視化場景,借助不同身高假人模擬乘坐狀態,直觀展示車內空間大小。幫助用戶在線上快速判斷車輛空間是否適配自身需求,有效提升選車決策效率。

      四、美團外賣:美食動態展示,趣味視覺拉動流量轉化

      美團外賣在商品列表中融入美食制作動畫,動態呈現美食熱氣騰騰的畫面,用趣味視覺效果吸引用戶目光,同時助力商家引流獲客。
      1. 趣味動畫,延長用戶瀏覽時長

        image.png

        用戶上下滑動頁面時,美食動畫順勢播放,鮮活的畫面緩解了用戶 “選擇困難、不知道吃什么” 的瀏覽焦慮,有效留住用戶,提升頁面停留時長。
      2. 雙向賦能,實現流量高效轉化
         
        區別于生硬的廣告推送,美食動畫兼顧平臺推廣需求與用戶體驗,既能幫助商家曝光產品,又能激發用戶進店、下單的欲望,實現平臺、商家、用戶三方共贏。

      五、滴滴搬家:場景化套餐設計,降低用戶決策難度

      滴滴搬家摒棄單純羅列貨車尺寸、展示車輛圖片的傳統模式,結合用戶真實搬家場景設計套餐,讓用戶快速匹配適配車型,告別反復對比的困擾。
      1. 場景化展示,需求一目了然
         
        功能精準對標用戶搬家核心需求,清晰標注不同車型可裝載的物品,例如兩輪車、洗衣機、三人沙發、床墊、床架等,并附上物品尺寸限制,內容直觀易懂。
      2. 貼合用戶認知,簡化選擇流程

        image.png

        產品跳出專業車型參數表述,按照單人物品、雙人物品、小家庭、大家庭等生活化場景劃分套餐,用戶無需理解復雜車型規格,根據家庭人數、物品多少就能快速選定車型,極大降低決策門檻。

      寫在最后

      以上案例均來自團隊日常 UED 體驗與總結。后續我們也會持續深度體驗各類產品,挖掘更多優秀設計思路與落地案例,把實用的設計方法運用到實際工作中,打磨出更優質的用戶體驗。
       
      希望本次分享能為大家帶來啟發,我們下期再見!
       
      轉載:優設

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

       

      image.png

      發紅包用戶不領情?看淘寶如何用“砸金蛋”讓用戶參與度狂飆!

      清陽 交互設計及用戶體驗

      蘭亭妙微UI設計公司分享:在電商運營中,直接派發紅包的模式逐漸陷入瓶頸:福利形式單一、用戶領完即走,既無法沉淀用戶停留時長,也難以強化頻道心智。對此,淘寶秒殺團隊另辟蹊徑,以 **「天天砸金蛋」** 為核心玩法,將單純的權益發放升級為沉浸式互動體驗,借助游戲化設計大幅提升用戶參與度與復訪率。本文將完整拆解該項目的設計思路、玩法架構、視覺體系與品牌融合策略,重新定義電商權益設計的核心價值。

      一、重新認知權益設計:從 “發福利” 到 “造體驗”

      傳統電商權益以紅包為主,具備結果明確、操作簡單的特點,但缺陷十分突出:用戶領取后立刻離開,整個過程毫無期待感與參與感,權益僅停留在 “物質獎勵” 層面,無法成為連接用戶、頻道與消費決策的紐帶。
      淘寶設計團隊提出全新思路:讓每一次權益領取,都成為值得期待的互動過程。我們將權益隱藏在趣味玩法之中,借助 “砸金蛋” 的動作營造期待感,在揭曉獎勵的瞬間放大用戶的獲得感。至此,冰冷的福利發放轉變為有溫度、有儀式感的體驗,完成從 “被動領取” 到 “主動參與” 的核心轉變。

      二、選擇 “砸金蛋”:契合用戶心智的經典玩法重構

      “砸金蛋” 并非新興玩法,但其天然適配電商秒殺場景,也是團隊最終選定該載體的核心原因:
      1. 低學習成本,玩法直觀
         
        整套流程簡化為「進入頁面 — 砸開金蛋 — 揭曉獎勵 — 領取權益」四步,邏輯通俗易懂,用戶無需額外學習,零認知門檻即可參與。
      2. 貼合用戶心智,場景共鳴
         
        該玩法自帶線下商超促銷的氛圍感,精準匹配淘寶秒殺用戶 “省錢、薅福利” 的核心訴求,天然拉近與用戶的距離。

        image.png

      基于這一載體,團隊搭建了可無限擴展的玩法結構:以 “砸蛋” 為主線核心,頁面動線圍繞用戶核心行為設計,保證 “進入即可砸蛋” 的流暢體驗。在此基礎上,疊加任務體系、蛋殼積分、道具玩法、周期活動等拓展內容,全程不打斷主線交互,既固化了長期玩法心智,也實現了多元權益的整合,解決了平臺權益分散、玩法雜亂的問題。

      image.png

      三、視覺體系:以 “變與不變” 打造長效吸引力

      金蛋不僅是玩法載體,更是貫穿全場的視覺符號。團隊采用 **“基礎統一 + 動態創新”** 的設計原則,平衡品牌辨識度與體驗新鮮感,打造可復用的超級視覺容器。

      (一)不變:筑牢視覺錨點,建立用戶信任

      image.png

      始終保留金蛋核心形態:統一的金色質感、高光效果與圓潤造型。無論活動如何迭代,核心視覺符號保持穩定,讓用戶一眼識別 “淘寶秒殺金蛋”,快速建立熟悉感與信任感。

      (二)變化:分層設計,持續激活新鮮感

      團隊將金蛋拆解為多層視覺結構,通過輕量化改動實現體驗更新,不增加用戶認知負擔:
      1. 表情與動作層:傳遞實時情緒反饋

        image.png

        結合不同使用場景設計豐富表情與肢體動作,區分初始狀態、點擊互動、等待停留、完成任務等不同場景。將用戶操作轉化為可視化情緒,搭配「+3」「+5」等即時數值提示,實現情緒 + 數據雙重正向反饋,直觀強化 “操作必有回報” 的認知,激勵用戶持續參與。
      2. 主題服飾層:適配節日與品牌場景

        image.png

        針對元旦、春節等各大節日定制專屬皮膚:元旦融合燈籠、飄雪元素,營造迎新氛圍;春節搭配糖葫蘆、糖畫等國風元素,烘托喜慶年味。借助節日視覺放大儀式感,驅動用戶從 “可參與” 轉變為 “主動想參與”。
      3. 道具與動態層:豐富互動趣味

        image.png

        搭配手持道具、粒子動效、禮花特效等內容。砸開金蛋時觸發氣泡、液體飛濺、星光閃爍等粒子效果,強化互動的沖擊力,讓獎勵揭曉的瞬間更有 “驚喜感”。

      四、品牌融合:告別硬廣,讓合作自然融入體驗

      傳統品牌合作多以靜態 Logo 貼片呈現,極易被用戶判定為廣告,接受度極低。在「天天砸金蛋」玩法中,團隊創新品牌植入模式,讓品牌成為體驗的一部分:
      1. 品牌皮膚定制:讓品牌 “穿上金蛋外衣”

        image.png

        為合作品牌定制專屬金蛋皮膚,用戶在砸蛋互動中自然接觸品牌形象,將 “被動接收廣告” 轉化為 “主動發現福利”。
      2. 動態語言適配:貼合品牌調性設計動效

        image.png

        根據品牌屬性定制粒子動態:飲品品牌強化液體流動效果,高端美妝品牌突出高光質感,用動態設計替代生硬的品牌露出。
      3. 情緒綁定:讓品牌關聯美好體驗

        image.png

        依托金蛋豐富的表情體系,將品牌與 “驚喜、開心、滿足” 等正面情緒綁定。用戶記住的不再只是品牌名稱,而是參與玩法時的愉悅感受,大幅提升品牌記憶度。

      五、核心思考:權益設計的終極目標

      當權益成為電商平臺拉動流量、促進轉化的核心驅動力時,設計的核心絕非一味放大紅包、優惠券等數字獎勵。淘寶秒殺團隊通過「天天砸金蛋」項目驗證了一個核心結論:設計的價值,是放大權益的體驗過程
      我們將一顆普通的金蛋,打造成承載全品類權益、多元玩法、品牌合作的超級容器,實現了從 “單純發放權益” 到 “趣味玩轉權益” 的升級。設計不再只是功能的載體,更是用戶價值的放大器。
      原本 “領完即走” 的單次福利行為,被重塑為用戶愿意停留、樂于互動、主動復訪的長效體驗。當權益被賦予溫度與趣味,用戶收獲的就不只是一份優惠,更是一段值得回味的互動體驗。
       
      轉載:優設

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

       

      image.png

      產品經理必知的9個前端UI框架,讓你的產品設計瞬間高大上

      清陽 設計資源

      蘭亭妙微UI設計公司分享:過去,產品經理談界面設計,常常只需要說一句:“這個頁面按后臺系統常規樣式做就行。”

      但今天,這句話已經不夠用了。

       

      一方面,AI 產品、SaaS 工具、內容平臺、數據看板、運營后臺越來越多,產品的第一印象越來越依賴界面質感。另一方面,前端開發已經不再是從零開始寫每一個按鈕、表單和彈窗,大多數團隊都會基于成熟的 UI 框架或組件庫快速搭建產品。

      所以,產品經理雖然不一定要會寫代碼,但至少應該知道:市面上有哪些常見的前端 UI 框架?它們分別適合什么產品?什么時候該用現成框架,什么時候需要做定制設計?如果你完全不了解這些,很容易在需求評審時提出“不現實的設計要求”,或者在產品視覺層面輸給競品。

      這篇文章,就幫產品經理系統梳理一次。

      一、什么是前端 UI 框架?

      簡單理解,前端 UI 框架就是一套已經設計好、開發好的界面組件集合。

      比如:

      按鈕、輸入框、下拉選擇器、表格、彈窗、標簽頁、菜單、日期選擇器、上傳組件、通知提醒、側邊欄、數據卡片……

      這些都是產品頁面中高頻出現的基礎元素。

      如果沒有 UI 框架,前端工程師就需要從零開始寫這些組件,不僅開發效率低,也很難保證不同頁面之間的風格統一。

      而有了 UI 框架之后,團隊可以直接調用現成組件,再根據品牌風格進行主題定制。對于產品經理來說,這意味著:

      • 頁面開發速度更快;
      • 交互一致性更強;
      • 設計和研發溝通成本更低;
      • 后續維護和迭代更可控。

      所以,UI 框架并不只是“讓頁面變好看”的工具,它本質上是產品研發效率的一部分。

      二、產品經理為什么需要了解 UI 框架?

      很多產品經理會覺得:“UI 框架不是前端工程師的事情嗎?我為什么要懂?”

      原因很簡單:你不需要會用,但你需要會判斷。

      產品經理至少要知道三個問題:

      第一,這個產品適合用什么類型的 UI 框架?

      一個企業管理后臺,和一個 AI 聊天產品,和一個營銷活動頁面,對界面風格的要求是不一樣的。后臺系統更看重表格、表單、權限、篩選和數據展示;AI 產品更看重現代感、輕量感、動效和交互體驗;官網落地頁則更看重視覺沖擊力和轉化路徑。

      第二,UI 框架會影響產品氣質。

      同樣是一個管理系統,用 Ant Design、Element Plus、shadcn/ui、HeroUI 做出來的感覺可能完全不同。有的偏企業化,有的偏清爽,有的偏現代,有的偏國際化。

      第三,UI 框架會影響需求實現成本。

      有些組件框架本身就提供復雜表格、表單校驗、日期選擇、上傳、權限布局等能力,實現成本較低;但如果產品經理提出的交互和框架默認能力差異很大,研發成本就會上升。

      所以,懂 UI 框架,不是為了替前端做技術選型,而是為了讓產品經理在設計需求、評估成本、判斷風格時更專業。

      三、產品經理必知的幾類前端 UI 框架

      前端 UI 框架很多,但產品經理不需要全部掌握。你只需要知道以下幾類。

      1. Ant Design:企業級后臺系統的經典選擇

      如果你做過中后臺產品,大概率聽說過 Ant Design

      它最適合的場景是:企業管理后臺、CRM、ERP、數據平臺、運營后臺、權限系統、審批系統、配置系統等。

      Ant Design 的優勢是組件非常完整,尤其適合復雜表格、復雜表單、數據篩選、彈窗、菜單、導航、分頁、上傳等中后臺場景。對于國內很多 B 端產品來說,它幾乎已經是一種“默認選擇”。

      但它也有一個明顯問題:默認風格比較“企業化”。如果不做主題調整,產品容易看起來像傳統后臺,缺少年輕感和高級感。

      產品經理在使用 Ant Design 時要注意一點:它適合提高效率,但不代表產品一定好看。如果是面向外部客戶的 SaaS 產品,最好在顏色、間距、卡片、圖標和數據可視化上做二次設計。

      適合場景:

      • 企業后臺
      • SaaS 管理系統
      • 數據看板
      • 權限管理系統
      • 運營配置平臺

      不太適合:

      • 強品牌感官網
      • 高級感 AI 產品首頁
      • 視覺表達要求很強的 C 端產品

      2. Element Plus:Vue 技術棧里的后臺常用選擇

      Element Plus 是 Vue 生態里非常常見的 UI 組件庫,很多國內團隊做后臺系統都會用它。

      如果你的技術團隊使用 Vue 3,那么 Element Plus 通常會是一個很容易被考慮的選項。它上手成本低,文檔友好,組件也比較完整,適合快速搭建管理系統。

      它的產品氣質和 Ant Design 有點類似,都是偏中后臺、偏效率、偏穩定的路線。對于產品經理來說,Element Plus 的核心價值不是“多么驚艷”,而是“穩定、通用、開發快”。

      適合場景:

      • Vue 技術棧后臺系統
      • 內部管理平臺
      • 表單密集型產品
      • 快速搭建 MVP
      • 運營管理系統

      需要注意的是,如果產品對視覺高級感要求很高,Element Plus 默認風格也需要二次設計,否則容易顯得普通。

      3. Naive UI:更清爽現代的 Vue 組件庫

      Naive UI 也是 Vue 3 生態中值得產品經理了解的一套組件庫。

      和 Element Plus 相比,Naive UI 的氣質更輕、更現代,視覺上也更清爽一些。它比較適合那些既需要后臺能力,又希望界面不要太傳統的產品。

      比如 AI 工具后臺、內容管理系統、知識庫產品、數據分析工具、輕量 SaaS 控制臺等,都可以考慮 Naive UI。

      對產品經理來說,Naive UI 的價值在于:它不那么“老派后臺”,同時又具備比較完整的組件能力。如果你希望產品既有效率,又看起來更年輕,它是一個不錯的選擇。

      適合場景:

      • Vue 3 項目
      • 清爽型后臺
      • AI 工具管理端
      • 內容平臺后臺
      • 輕量 SaaS 產品

      4. Arco Design:適合年輕化企業產品

      Arco Design 是一套偏企業級的設計系統和組件庫,既有 React 版本,也有 Vue 版本。它的整體風格比傳統企業后臺更年輕,適合需要兼顧效率和視覺感的產品。

      如果說 Ant Design 更像成熟穩重的企業后臺,那么 Arco Design 相對更輕、更活潑一些。它適合做企業協同產品、效率工具、數據平臺、SaaS 后臺、運營系統等。

      產品經理可以把 Arco Design 理解為:在企業級能力和年輕化視覺之間做平衡的一套方案。

      適合場景:

      • 企業級 SaaS
      • 協同辦公產品
      • 數據分析平臺
      • 運營后臺
      • 年輕化 B 端產品

      5. MUI:適合國際化產品和 Material Design 風格

      MUI 是 React 生態里很成熟的一套組件庫,基于 Google 的 Material Design 風格。

      它的特點是規范感強、組件完整、國際化程度高。很多海外產品、開發者工具、SaaS 產品會使用 MUI。

      不過,MUI 的默認風格有比較明顯的 Material Design 特征。如果你的產品希望看起來更“Google 系”,MUI 會比較合適;但如果你希望做出獨特品牌感,就需要進行較多主題定制。

      適合場景:

      • 國際化 SaaS
      • React 項目
      • 工具型產品
      • 海外用戶產品
      • Material Design 風格產品

      6. Mantine:React 生態里的全能型選手

      Mantine 是一套比較全能的 React 組件庫。

      它的優勢在于組件豐富、hooks 完整、主題定制能力強,適合做各種 Web 應用,尤其適合 SaaS、后臺系統、工具型產品。

      和 Ant Design 相比,Mantine 的視覺氣質更輕一些;和 shadcn/ui 相比,它又更像一個完整的組件庫,開箱即用能力更強。

      如果你的團隊使用 React,并且想要一個既能快速開發、又不會太傳統的 UI 框架,Mantine 是值得考慮的選擇。

      適合場景:

      • React SaaS 產品
      • 工具型 Web 應用
      • 管理后臺
      • 表單密集型產品
      • 中小型商業產品

      7. Shadcn ui:當下很適合 AI 產品的現代組件方案

      近幾年,Shadcn ui 在 React 和 Next.js 圈子里非常受歡迎。

      嚴格來說,它并不是傳統意義上的組件庫。它更像是一套可以復制到自己項目里、再自由改造的組件體系。它的設計風格非常現代,配合 Tailwind CSS 使用,很容易做出高級、干凈、有質感的界面。

      這類風格非常適合 AI 產品、SaaS 官網、開發者工具、數據看板、知識庫產品、內容平臺等。

      shadcn/ui 的優勢是好看、靈活、可控;缺點是它對前端團隊能力要求更高,不像傳統組件庫那樣“一裝即用”。如果團隊前端能力不錯,它可以做出非常有差異化的產品視覺;如果團隊比較依賴現成組件,使用成本可能會更高。

      適合場景:

      • AI 產品
      • Next.js 項目
      • SaaS 控制臺
      • 開發者工具
      • 高級感管理后臺
      • 需要定制化設計系統的產品

      對產品經理來說,shadcn/ui 值得重點關注。因為現在很多新一代 AI 產品的界面風格,已經不再是傳統后臺,而是更輕、更白、更克制、更高級的設計語言。

      8. HeroUI:適合想要默認就好看的 React 產品

      HeroUI 也是一套適合 React 項目的現代 UI 組件庫。

      它的特點是默認視覺比較好,組件帶有更明顯的現代感和動效感,適合做 AI 工具、創作者產品、社區產品、輕量 SaaS 產品等。

      如果產品經理希望產品一開始就有不錯的視覺表現,而不是完全依賴設計師和前端從零調整,HeroUI 會是一個不錯的選擇。

      適合場景:

      • AI 工具
      • 創作者工具
      • 輕量 SaaS
      • 社區產品
      • 現代化 Web 應用

      9. Tailwind CSS:不是組件庫,但產品經理也應該知道

      Tailwind CSS 嚴格來說不是 UI 組件庫,而是一套 CSS 工具框架。

      你可以把它理解成一套“原子化樣式系統”。它不會直接給你一個完整的表格或彈窗,但它可以讓前端非常靈活地搭建各種界面。

      現在很多現代 UI 框架和組件方案都會基于 Tailwind CSS,比如 shadcn/ui、HeroUI 等。

      產品經理不需要理解 Tailwind CSS 的寫法,但要知道它代表了一種趨勢:越來越多團隊不滿足于直接套用傳統組件庫,而是希望通過更靈活的樣式系統,做出更有品牌感的界面。

      適合場景:

      • 高定制化官網
      • SaaS 官網
      • AI 產品頁面
      • 需要強視覺表達的產品
      • 自建設計系統

      四、產品經理應該如何選擇 UI 框架?

      產品經理不需要決定最終技術選型,但可以和設計師、前端一起從以下幾個維度判斷。

      1. 先看產品類型

      如果是企業后臺、管理系統、配置平臺,可以優先考慮 Ant Design、Element Plus、Arco Design。

      如果是 AI 產品、SaaS 工具、開發者工具,可以重點關注 shadcn/ui、HeroUI、Mantine。

      如果是 Vue 技術棧,可以看 Element Plus、Naive UI、Arco Design Vue。

      如果是官網、落地頁、活動頁,可以關注 Tailwind CSS 及其生態組件。

      2. 再看技術棧

      React 項目常見選擇:

      • Ant Design
      • MUI
      • Mantine
      • shadcn/ui
      • HeroUI
      • Arco Design React

      Vue 項目常見選擇:

      • Element Plus
      • Naive UI
      • Arco Design Vue
      • shadcn-vue

      不同框架并不是隨便選的,它和團隊技術棧高度相關。產品經理不要只說“我喜歡這個風格”,還要問一句:“我們現在的前端技術棧適合用它嗎?”

      3. 看組件完整度

      如果產品里有大量復雜表格、篩選、表單、權限、彈窗、上傳、日期選擇,組件完整度非常重要。

      這類產品更適合選擇成熟組件庫,比如 Ant Design、Element Plus、Mantine、Arco Design。

      如果產品更重視視覺表達、頁面質感和品牌差異化,可以選擇 shadcn/ui、HeroUI、Tailwind CSS 生態。

      4. 看設計定制能力

      很多產品的問題不是“沒有 UI 框架”,而是“所有頁面都長得像模板”。

      如果你希望產品有自己的品牌感,就不能只依賴默認樣式。產品經理需要關注:

      • 是否支持主題色定制?
      • 是否支持暗黑模式?
      • 組件間距能不能統一調整?
      • 按鈕、卡片、表格、彈窗是否能形成統一設計語言?
      • 設計稿和前端組件是否能長期保持一致?

      一個成熟產品,最終一定不是簡單套模板,而是形成自己的設計系統。

      五、不同產品場景的推薦選擇

      如果你是做企業中后臺:

      優先看 Ant Design、Element Plus、Arco Design。它們組件成熟,適合復雜業務場景,尤其是表格、表單、篩選、權限等能力比較重要的系統。

      如果你是做 AI 產品:

      優先看 shadcn/ui、HeroUI、Mantine。它們更容易做出現代感和高級感,適合 AI 工具、AI 工作臺、AI 內容平臺、AI Agent 控制臺等產品。

      如果你是做 SaaS 產品:

      可以根據風格選擇 Mantine、shadcn/ui、Ant Design、Arco Design。如果是偏后臺管理,可以選 Ant Design 或 Arco;如果是偏現代工具,可以選 shadcn/ui 或 Mantine。

      如果你是做官網和營銷頁:

      可以關注 Tailwind CSS 生態。相比傳統后臺組件庫,它更適合做品牌官網、課程頁、活動頁、產品介紹頁。

      如果你是 Vue 團隊:

      可以重點看 Element Plus、Naive UI、Arco Design Vue。如果想穩妥,就選 Element Plus;如果想更現代,可以看 Naive UI;如果要企業級完整方案,可以看 Arco Design Vue。

      六、產品經理要避免的幾個誤區

      第一個誤區:以為 UI 框架等于設計稿。

      UI 框架只是基礎組件,不等于完整設計。真正的產品體驗還包括信息架構、頁面布局、視覺層級、交互路徑、文案表達和品牌調性。

      第二個誤區:只看好不好看,不看業務復雜度。

      有些框架看起來很美,但不一定適合復雜后臺。如果產品有大量表格、篩選和表單,組件能力比視覺炫酷更重要。

      第三個誤區:只追求差異化,忽略開發成本。

      如果每個組件都要重寫,每個交互都要高度定制,產品看起來可能更特別,但研發成本和維護成本也會大幅上升。

      第四個誤區:認為用了某個框架就一定高級。

      同樣使用 shadcn/ui,有的產品很高級,有的產品也會很普通。框架只是起點,最終效果取決于設計能力、前端實現和產品細節。

      七、產品經理真正應該掌握的不是框架名字,而是選型邏輯

      產品經理了解 UI 框架,不是為了和前端爭論“到底用哪個庫”,而是為了提升產品判斷力。

      你至少要能判斷:

      • 這個產品是偏后臺,還是偏前臺?
      • 是效率優先,還是品牌優先?
      • 是快速上線,還是長期打造設計系統?
      • 是 React 技術棧,還是 Vue 技術棧?
      • 是重表格表單,還是重視覺體驗?
      • 是內部系統,還是面向用戶的商業產品?

      當你能回答這些問題,和設計師、前端溝通時就會更專業。

      結語:未來的產品經理,要懂一點前端審美和工程效率

      AI 時代,產品經理的能力邊界正在變化。

      過去,產品經理重點關注需求、流程和功能;現在,產品經理還需要懂一點界面審美、組件思維、設計系統和研發效率。

      前端 UI 框架就是連接產品、設計和研發的重要橋梁。

      你不需要成為前端工程師,但你需要知道:

      • 做企業后臺時,為什么很多團隊會選擇 Ant Design 或 Element Plus;
      • 做現代 AI 產品時,為什么越來越多團隊關注 shadcn/ui、HeroUI 和 Tailwind CSS;
      • 做 SaaS 產品時,為什么組件庫不僅影響開發速度,也影響用戶對產品專業度的第一印象。

      真正優秀的產品經理,不只是會寫需求文檔,也要能判斷一個產品該用什么方式被更高效、更美觀、更可持續地做出來。

      這,就是產品經理應該了解前端 UI 框架的原因。

       

      轉載:人人都是產品經理

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

       

      image.png

      會員功能持續升級,背后是設計師的滿滿用心

      清陽 交互設計及用戶體驗

      蘭亭妙微UI設計公司:在用戶需求日益多元化的旅游市場中,會員權益的價值不僅在于提供優惠,更在于創造差異化的體驗與長期歸屬感。本次會員權益感知升級,我們通過權益展示規則優化和場景化等方式,加強用戶對會員權益的感知,讓用戶從預訂到旅程的每個環節都能清晰感知會員權益的價值。

      一、背景

      當前,集團持續加大在會員權益方面的投入,旨在通過更具價值的權益體系提升用戶體驗。優質的會員服務不僅能增強用戶粘性和忠誠度,更能有效提高權益使用率和訂單轉化率。此次會員體驗升級,正是希望通過優化權益設計和服務體驗,實現用戶價值與平臺效益的雙贏,最終形成"投入-體驗提升-效益增長"的良性循環。

      二、問題洞察

      通過走查線上各業務線(如機票、酒店等)的頁面,我們發現了以下 2 個問題:

      1. 不同業務線間:權益的展示節點和感知強度不同,缺少一致的設計原則

      目前各業務線在會員權益方面的設計手段不同,在權益展示點位和感知強度上存在明顯差異,缺少一致的設計原則進行規范。具體表現為:

      酒店:主要通過貨架展示強化會員權益感知

      機票:側重在列表頁和中間頁等固定位置展示

      火車票:則聚焦于權益使用環節的觸達

      image.png

      2. 單個業務線內:優勢權益在流程中沒有充分傳達

      通過對各業務線現有頁面的走查,我們發現會員權益在訂前、訂后部分關鍵節點存在展示缺失的問題。雖然用戶在流程中能看到權益信息,但整體感知度仍有不足。

      image.png

      針對上述問題,我們需要建立統一的設計原則,在保持各業務線自身特色的同時,形成協同一致的會員體驗,提升用戶對會員權益的整體感知效果。

      三、設計優化——從"能看到"到"感知好"

      本次優化主要圍繞兩個核心目標展開:一是建立規范的權益展示原則,二是提升用戶對權益的感知度。具體將從以下幾個方向著手:

      1. 權益前置,強化展示

      根據歷史機票和酒店的項目數據,我們發現將具有明顯優勢的權益提前展示,能夠顯著增強用戶的感知,并有效提升預訂轉化率。例如攜程酒店將會員賬戶中的的權益與預訂流程結合,將原本無早餐的劣勢轉化為會員可免費兌早餐的優勢展示。這樣的方式為我們提供了本次優化的思路——通過權益前置來強化權益,加強感知。

      image.png

      什么樣的權益需要前置?——設定強弱權益規則

      為提升會員權益展示效果,我們通過對權益內容的系統分析,將其劃分為兩大類別:強權益和弱權益。

      強權益:指與產品線直接相關或對價格產生顯著影響的權益,例如酒店業務的免費早餐服務和會員專享價格。這類權益在用戶購買決策中起關鍵作用,能有效提升用戶滿意度和預訂轉化率,因此需要在核心預訂節點進行重點展示。

      弱權益:指與產品線關聯度較低的權益,例如機票業務的快速安檢服務。雖然這類權益不會直接影響用戶的預訂決策,但可作為增值服務提升用戶體驗,間接促進轉化。

      image.png

      為確保權益展示的客觀準確,我們也可以借助內部的權益價值計算公式,量化每項權益的實際價值,幫助我們精準評估和展示權益,為用戶提供更有價值的會員體驗,最終提升用戶滿意度和忠誠度。

      2. 讓權益貫穿各節點的策略

      在對各業務線的線上頁面進行走查時,我們注意到訂前、訂后部分節點常常出現權益感知缺失的情況。

      為了充分提升權益的曝光,我們制定了強弱權益展示的規則,定義了在各節點展示的必要性。在預訂前節點,我們優先展示與用戶決策緊密相關的強權益,并在相關性較低的節點提前展示弱權益,以加深用戶印象并促進轉化。預定后,對收益、轉化率和 CPO(客服來電率)的影響較小,需要做到盡可能強的展示。

      image.png

      根據以上規則,我們在實際點位進行了應用:

      以火車票業務為例,我們通過優化權益展示策略,在首頁新增曝光點位、強化現有頁面展示效果,并完善訂后權益展示,使會員權益的觸達貫穿用戶全流程。優化后,權益曝光率和用戶感知強度有了明顯的提升。

      image.png

      3. 更加嚴格的設計規范

      此前制定的會員權益視覺規范,因各業務線復雜度不同,在多次迭代后逐漸出現差異,導致不同業務線之間展示不一致、單個業務線內流程不統一的問題。為此,本次優化中我們也重點明確了各類場景的標簽使用規范和文案規范,全面提升展示一致性,同時加強會員身份的表達。

      image.png

      經過以上幾點優化,上線后數據顯示用戶對會員權益的滿意度、會員權益的使用率都有顯著提升,驗證了設計方案的有效性。

      四、強化重要節點的感知

      除了常規流程中的會員感知,我們也在思考如何進一步加深用戶的印象,讓用戶訂票時優先選擇攜程。

      1. 出行中節點——提供好用的體驗

      訂后的節點往往容易被忽視,以機票的快速安檢權益為例,用戶通常需要打開攜程 App → 查找訂單詳情 → 定位權益入口 → 完成核銷,步驟較長,導致體驗打折。

      新版本中,我們將出行相關的會員權益(如快速安檢)直接前置至攜程 App 大首頁的行程卡片。用戶打開 App 即可快速查看和使用權益,無需多層跳轉。改版后,用戶體驗和權益使

      image.png

      用率都得到了提升。

       

      2. 會員升級節點——制造驚喜感

      基于 KANO 模型,我們可以將用戶需求分為三類:基本型、期望型、興奮型,在前面的改版中我們已經滿足了用戶的前兩類需求。我們希望制造驚喜感和儀式感來滿足用戶的興奮型需求。攜程會員體系以“山峰”為視覺符號,不同高度代表不同等級,用戶每次升級,都象征著翻越一座新的高峰。象征用戶翻越山峰的升級節點正是滿足用戶“興奮型需求”的關鍵時刻。

      因此,在用戶升級時,我們在攜程首頁增加升級彈窗強化驚喜感和儀式感。用戶打開 App 即可直觀感受到等級提升的成就,并快速了解新增權益。上線后帶來了人均使用權益訂單量、會員中心訪問率等數據的提升。

      image.png

      結語

      通過系統化的設計與持續迭代,會員權益體系能夠深度釋放用戶價值,推動品牌的長期可持續增長。在這個過程中,我們需要確保用戶在全渠道觸點中獲得連貫一致的體驗,從而建立穩固的品牌信任,降低用戶的學習與決策成本。同時,我們需要強化會員的價值感知,通過具象化的權益呈現和情感化的設計表達,讓用戶切實感受到專屬特權與歸屬感,最終打造出更具黏性的用戶體驗閉環。

      轉載:優設

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

       

      image.png

      為什么國內的UI設計比國外復雜?蘭亭妙微UI設計公司總結了3個深層原因

      清陽 行業趨勢

      在接觸和學習 UI 設計的時候,我們都必須面對國內外 UI 設計風格差異巨大的問題。比如最近 618,相信大家沒少被國產應用的廣告“親切的”問候。

      image.png

      一方面是尋找設計靈感時要做區分,另一方面則是我們學習 UI 時看的書籍,學習的理論、規范,都是由西方國家產出的,而國內設計的方向卻和它們背道而馳,用一個詞來形容現狀,那就是 —— 割裂。

      所以在初學階段,理論學的越多,受到的沖擊也就越大,疑問也就越多。所以我們今天的目標,就是來幫大家解答這個疑問。

       

      一、設計差異的根源分析

      當我們研究國內外 UI 設計的差異時,樣式上的差異只是表象,它們是由更深層次的因素所激發,所以我們首先要深究這些問題的根源。

      根據過去十幾年的 UI 研究經驗,我總結的設計差異包含下面這些因素:

      1. 盈利模式的差異
      2. 人工成本的差異
      3. 用戶習慣的差異

      1. 盈利模式的差異

      國外產品相對國內的盈利模式相對簡單、健康,排除掉大型平臺和其它服務配套應用外(比如會員、硬件的配套),基本就是買斷、訂閱、廣告這三個途徑。

      比如我們熟悉的 Figma、Canva、Notion 等,都是訂閱制服務,在產品具備足夠競爭力的條件下發展出海量的付費用戶,獲得巨大的收益和估值(團隊只有一兩百人時估值過百億刀)。既然做好產品就能盈利,那這些產品的目標自然是打造更好的產品和提供更好的服務或體驗來獲得收益。

      image.png

       

       

      而國內市場我們都知道,用戶付費的意愿是非常非常低的,這就導致很多產品即使做的還不錯也看不到盈利希望,尤其是大廠產品,比如迅雷,百度網盤,網易云等等。

      image.png

      靠基礎付費模式做不出讓人滿意的營收,產品團隊自然要使出渾身解數來找到盈利點,不管是增加一些奇怪的功能,還是制造各種營銷活動。而這些嘗試想要獲得持續的盈利是非常困難的,所以就得一直想,一直嘗試,一直投放。

      雖然吃相往往看上去很難看,但不這么做就會“暴斃”,而這么做至少還可以“茍延殘喘”,為了生存和盈利,產品團隊做出什么離奇的操作都能做出來。

      這里還要澄清一點,有很多優秀的工具產品不是國內做不出來,是做出來也很難盈利,所以有能力的團隊和開發者是不會輕易往火坑里跳的。

      2. 人工成本的差異

      第二點就是國內外人工成本上的巨大差異,發達國家的人工成本非常高昂,不只局限在產品開發團隊的成本,還包括底層運營、客服、銷售、業務員、快遞員等等。

      而產品的衍生業務往往要借助大量的底層勞力,比如京東做外賣服務,得有充沛的、廉價的騎手作為依托才辦得起來,而這在發達西方國家是難以想象的。比如最近經常討論的為什么日本線下購物市場還很繁榮,線上發展不起來。主要原因之一就是快遞員的成本差了好幾倍,做不出即廉價又便捷的網購體驗。

      image.png

      加上西方國家對雇傭關系的保護,招人容易,裁員可就沒有那么簡單,所以多數產品團隊對擴張都持非常謹慎的態度。人數少,又不能輕易搞 996,就大大限制了產品作妖的范圍,這就直接導致他們沒有人力做一大堆次要功能的迭代以及運營活動,設計需求自然也會低很多。

      3. 用戶習慣的差異

      最后一點,就是用戶習慣的差異。除了前面說的付費意愿低以外,還有很多其它因素。其中在我看來影響最大的因素,就是國內用戶對互聯網的依賴是遠高于國外用戶的。

      國內的移動互聯網行業爆發并不僅僅是局限在互聯網行業里,而是把觸手拓展到各行各業,用贏學的角度來講甚至它還大幅度完善了政府基建和民生服務。我們今天繳納水電費,辦理銀行卡通過線上就能完成,而很多發達國家甚至到今天還要你去營業廳手寫填表。

      并且互聯網產品已經成為我們購物、娛樂的重要載體,大量的決策、交易、娛樂是在上面進行的。既然用戶習慣和粘性都成型了,離不開這些產品了,那么“適當損害”一下用戶體驗也不是不可以。尤其是大廠各類離奇的功能和運營活動可以輪番轟炸用戶,同時把用戶對這類負面操作的耐受度都拉高了。

      image.png

      既然用戶都適應了,那么為什么還要“裝清高”,做個簡約的、有原則的、有尊嚴的產品?當然是加入到運營的狂歡里和其它產品一起壓榨用戶的注意力,像孔雀開屏一樣,在最雞肋的器官上比劃……

      以上三點,就是造成國內外設計差異的根本因素。最早國內產品的設計是和國外看齊的,但隨著市場的反饋和驗證,我們最終走出了自己的道路。這是商業的選擇,而不是簡單歸因給審美、民族、文化、消費力的限制。

      不管創業者抱著什么樣的想法,進入這個牌桌以后,最終都會被市場調教成相同的模樣。

      作為 UI 設計師來說,也不要認為這是錯誤的發展方向,因為這種模式大大增加了 UI 設計的需求量,間接提供了更多的飯碗。如果產品都按歐美的模式發展和設計,那對于國內 UI 設計行業來說真正的天塌了,設計崗位會銳減 8 成以上,而這是 AI 設計根本實現不了的破壞力。

      二、國內外 UI 的具體差異

      有了內因,下面再對國內外 UI 設計的具體差異做對應的拆解,幫助大家更好理解國內市場的設計特征。

      1. 中英文字形排版差異

      第一個差異,就是中英文的字體形態差異。中文文字是方塊化等寬的,而英文字母則是大小長短不一,詞組長度更長,節奏感更強。所以英文設計中,往往會將字體作為一部分融入到排版中,豐富視覺觀感。

      image.png

      image.png

      而中文設計中文字的節奏感較弱,文本的主要作用基本就是傳遞信息,所以只用中文排版很難出現英文的相同效果,就會促使設計師添加更多的內容,來豐富界面的效果。

      image.png

      2. 運營需求的平面視覺

      第二個差異,就是運營設計上的差異。歐美產品中運營活動不是沒有,但是數量少,而且往往在設計上也做的很隨意,說好聽點叫簡約,說難聽點就是敷衍。

      image.png

      而國內運營活動數量多,且投入精力更大,運營的設計是沒有限制的,可以用上廣告平面的所有視覺手段,不管是插畫還是 3D、AI、擬物、攝影。大團隊往往會配置平面設計師完成這部分工作,小公司就要 UI 設計師自己負責,所以沒有固定的設計要求,水平之間差距也巨大。

      image.png

      運營設計的差異,源自國內廣告設計方向的特色,從早年追求隱喻、創意的合成設計,到現在追求視覺沖擊力的大標題、大色塊設計。

      而國內運營設計在今天絕不只出現在一般廣告位中,會見縫插針到所有元素中,比如頁面頂部、二樓、膠囊、圖標區、瓷片區、底部導航等等。

      image.png

      3. 字段和信息數量差異

      國內有大量產品的功能和服務都更完善,這也就催生了更多的信息量和交互需求,單一頁面、組件的信息量、交互、狀態就遠遠比國外產品多。

      image.png

      這就導致我們在設計時要考慮這些復雜的情況,需要設計師做具體的業務分析整理字段,還需要做大量的稿件做測試和評審。

      不像國外很多簡單的產品內容就那么點,可以花大量精力去搞用研或者測試,在這種情況下光是完成產品需求就很困難,更遑論圍繞那么海量的內容做用研也是很麻煩的。

      所以國內團隊雖然會強調體驗,但實際設計過程中必然業務優先,體驗更多是圍繞業務的優化和改進。所以作品集表現上業務的權重是非常高的,絕對不是學習國外的項目包裝邏輯堆砌體驗和用研內容。

      4. 品牌視覺特征的差異

      在國內激烈的競爭環境中,建立品牌化的視覺感知就是每個產品都要認真對待的事情。但本身產品內容、信息量就已經很大了,要實現品牌化的視覺輸出就沒辦法走傳統品牌的“意識流”路線,使用簡單的配色和大量的留白。

      image.png

      同時,UI 的組件樣式又高度統一,使用常規樣式完成的設計是很難塑造品牌化視覺的。所以最終的解決方案,就是給組件增加更多樣式細節,通過局部的創意來塑造視覺上的差異,同時再和其它應用做出區分。

      image.png

      于是,主流產品就陷入這種樣式上的競賽,非常高頻的更新組件和視覺的設計,希望做出和別人不同的設計同時又有自己的特點。

      這種現狀不能說是消極的,因為它確實推動了整個 UI 行業視覺的發展,但對 UI 設計師的視覺素養要求也就更高。所以今天國內的中高級 UI 設計師,轉入國外 UI 市場以后都能實現降維打擊,就是因為市場的要求對自身的磨練遠比外部市場高。

      基于以上的差異,可以說在國內做 UI 和和在國外做 UI 是兩種難度,要學習和訓練的方式也完全不同。作為 UI 設計師要懂得理解背后的成因,并不會無腦迷信國外的設計要求和標準,才可以幫助我們更好融入真實的工作。

      結尾

      結尾再說點有趣的問題,從我們之前學員到國外工作的反饋來看,雖然國內設計容易被嫌棄,但是從設計質量和輸出上已經遠超歐美的平均水平。

      而他們的設計師多數還在劃水搞一些無關痛癢的體驗和用研時,我們在解決更復雜的商業問題,如果有機會,建議你們也可以去卷國外的 UI,會有你們想象不到的優勢。

      轉載:優設

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

       

      image.png

      保姆級教程!4 個技巧,輕松打造吸睛創意 Toast 設計

      清陽 設計資源

      Toast 是 UI 設計里高頻使用的基礎組件,主要用于用戶完成操作后,給出輕量化即時反饋,彈窗數秒后便自動消失。市面上常規 Toast 樣式大同小異,想要做出亮眼、有質感的效果,不妨試試這 4 個設計思路,從造型、層次、色彩多維度優化,輕松跳出常規設計框架。
      日常應用中,純文字提示是最普遍的 Toast 形式,此外還有彈窗式貼紙式等衍生樣式,風格更活潑、更具情感氛圍。下面結合實操案例,拆解創意 Toast 的完整設計方法。

      一、造型突破:巧用破形 + 異形,擺脫單調輪廓

      image.png

      常規 Toast 多為規整矩形,視覺平淡,我們可以通過破形異形兩種手法重塑造型,提升視覺張力。
      1. 破形設計

        image.png

        讓主體元素超出卡片邊界,打破邊框束縛。這種方式能弱化拘束感,讓整體排版更大氣舒展,視覺沖擊力更強。
      2. 異形設計

        image.png

        在基礎圖形上做創意改造,常見形式有斜切邊角、缺口造型、雙弧形、饅頭形等。最優思路是結合品牌 IP、Logo、專屬圖形延展造型(例如馬蜂窩 APP 的蜂窩輪廓),讓組件和品牌風格統一。若無固定品牌圖形,優先選擇斜切樣式,兼顧美觀與視覺舒適度。

        image.png

      二、疊加背板:整合視覺元素,豐富畫面層次

       

      當 Toast 內圖標、裝飾元素較多時,畫面容易雜亂松散。可以在主體元素后方增加專屬背板,既能收攏零散元素、強化整體感,還能快速增加視覺層次。

      image.png

      搭配裝飾圖形時可巧用視覺對比:若主體元素線條圓潤,可選用棱角分明的爆炸圖形、幾何圖形做搭配,軟硬結合讓畫面更有看點。在此基礎上,還能繼續疊加細節:添加卡片紋理、細線條裝飾,進一步打磨精致度。

      image.png

      三、色彩搭配:冷暖對沖,平衡視覺氛圍

      image.png

      色彩是影響觀感的關鍵:大面積暖色會讓畫面顯得躁動浮夸,大面積冷色則容易壓抑沉悶。
       
      設計時遵循冷暖色對比原則:若整體以暖色調為主,點綴少量冷色做中和;主色調偏冷時,加入暖色提亮。冷暖相互制衡,能讓色彩體系更和諧,畫面耐看度大幅提升。

      四、色彩呼應:全域聯動,避免色彩孤立

      image.png

      配色時切忌單一色彩集中在某一處,造成視覺割裂。當畫面中出現跳脫的點綴色時,可在其他位置增加同色系小元素做呼應,讓色彩貫穿整個 Toast,形成視覺聯動。
       
      最后還可以添加細微投影,拉開元素間的空間距離,強化立體層次感,完成整體優化。
       
      轉載:優設
       

       

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

       

      image.png

       

      如何提升UI設計的高級感

      清陽 行業趨勢

      在互聯網產品日趨成熟的今天,你會發現所有的App越來越像,似乎是同一套模版設計出來的產品;而這種普適化的設計會導致同質化嚴重,使得設計不精致,產品沒有氣質和品牌感。

      一個App設計是否精致,是否富有設計感,在于它的細節,這就意味著我們在進行設計的時候,要從細微之處著手,從多方面去鉆研如何創造出打動人心的UI設計。

      蘭亭妙微UI設計公司,總結了12個簡單直觀的提升設計感的小細節,一起來學習。

      一、使用顏色深淺構建層次結構

      在對UI 文本進行樣式控制的時候,最常見的錯誤莫過于過度依賴字體大小差異來營造對比;單純使用字體大小對比,所營造的對比并不夠,嘗試結合色彩和字重來營造更好的對比效果。

      每種顏色都有一個視覺權重,這有助于在內容中建立層次結構;通過使用顏色的深淺,為元素賦予不同的重要性。

      如果可以的話,你甚至可以采用兩到三種顏色:

      • 主要內容使用深灰色(諸如標題,但是不要用純黑);
      • 次要內容使用灰色(比如商品介紹);
      • 輔助性內容采用淺灰色(比如發布日期);

      類似的,在UI設計的時候,通常兩種不同的字重足以營造出優秀的層次感:

      • 大多數的文本采用正常的字重(400到500,具體取決于字體);
      • 對于需要強調的文字采用較重的字重(600到700,具體取決于字體);

      ▲主標題字重為600,其他標綠點的文字字重都為400

      應當盡量不要讓正文部分字重低于400,因為這一部分字體本身尺寸已經較小,低于400會使得可讀性不佳。

      如果你依然需要降低字重,那么不妨讓字體色彩更淺一點,或者替換成其他識別度較強、字重相對較小的字體。

      灰色文字在無彩/彩色背景下要分開處理:

      不要在有色背景上使用灰色的文本,在白色背景下,將黑色的文本改成灰色(或者在黑色背景下使用灰色文本),是不錯的淡化其視覺效果的做法。

      但是在彩色背景下,想要降低和背景色之間的對比,通常有兩種方法:

      一是降低白色文本的不透明度;二是讓文本逐步接近背景色,而不是改為灰色。

      ▲左圖設計師職位信息為白色文字降低不透明度,右圖為和背景同色相高明度的顏色

      其次當涉及長篇內容時,大面積的深色粗體字會給人一種沉重感,而且很跳躍;通過選擇類似深灰色(#4F4F4F)這樣的顏色可以很容易地解決這個問題,使文字更容易被識別。

      二、統一色調

      選擇一種基礎色,再調整色調和顏色深淺來增加均衡;設計時避免用過多的顏色。如果項目允許,只需使用固定的色板,通過調整基礎色的飽和度和明度,利用這種簡單的方式為設計增加一致性。

      三、干凈的陰影

      陰影是UI設計中最常見的視覺表現手法,它可以增加元素的深度,使其從背景中脫穎而出,引起用戶的注意力,同時也能增強畫面的視覺層次感。

      相比于采用大范圍的擴散模糊陰影,使用微妙的垂直偏移陰影效果更明顯,更自然,它模擬了最常見的光源特征,光線從上往下照下來所營造的陰影效果。

      這種輕柔的陰影呈現出的干凈,增加了畫面的精致;如果陰影的范圍太小或顏色太深,位置也沒有偏移,而是聚集在元素的四周,就會讓畫面更加扁平,讓視覺變得厚重,呈現出不精致的畫面感。

      陰影不一定是黑色的,還有一種擴算陰影是模擬元素本身的顏色投射在背景上,由于陰影與元素的色調一致,因此呈現出十分融洽的畫面感。

      在UI設計中,這種手法不宜過多使用,否則呈現出的各種色彩搭配會讓人眼花繚亂。

      四、個性的圖標設計

      合格的設計師能夠繪制風格統一的圖標,而優秀的設計師能夠創造風格獨特的圖標。

      我們能否在追求大小一致,圓角一致,線寬一致和配色一致的同時,為它的視覺表現力加入更多的創意呢?例如下面這組圖標設計,無論是在圖形上的創新,還是顏色搭配上都呈現出無與倫比的創意。

      標簽欄作為一個App的全局導航起著至關重要的作用,它的設計影響著整個產品的視覺風格。

      通常,大多數App都是使用iOS規范的設計樣式(默認灰色,選中填充品牌色),這樣的設計太普通,太常見了;要想讓標簽欄圖標設計精致和富有個性,可以豐富每一個選中態圖標的視覺表現,例如給圖標加上背景和表情,即顯得生動有趣,又增加了用戶的好感,給人留下深刻的印象。

      3D立體圖標設計是近幾年來的流行趨勢,看上去十分精致、華麗,但是看久了會讓人產生輕微的視覺疲勞,同時因其復雜的結構會增加用戶的認知成本,一般在外賣美食類應用中比較常見。

      五、Tab的設計感

      Tab是App設計中最常見的控件之一,它源自Material Design的設計規范;現在很多iOS產品當中也開始使用這種導航欄樣式來進行設計,而原本屬于iOS規范當中的分段選擇器變得不那么常見了。

      在視覺表現形式上,Tab和標簽欄同樣也分為選中態和未選態,它的設計較為簡單,通常是使用一組文字標簽,通過顏色或在標簽下加上小長條來區分兩者的狀態;因為它簡單,卻越難設計出彩,要發揮極大的設計想象力,跳脫出設計規范的限制,才能找到完美的方案。

      例如蝦米音樂的Tab選中態是一段音頻波線,再配合文字的大小對比,一個富有設計感又符合產品特征的Tabs就被創造出來了。

      我們還可以從品牌基因中獲取靈感,品牌作為用戶熟知的形象是個絕佳的來源。

      從品牌形象中提取具有獨特氣質的視覺富豪作為Tab選中態的小長條,這樣就建立起視覺上的聯系,讓用戶產生由內而外的一致感受;例如馬蜂窩品牌形象中的微笑符號和飛豬旅行品牌形象中的豬頭都被延伸到Tab的設計上,既讓界面視覺獨一無二,又進一步強化了用戶對品牌形象的認知。

      六、無框設計 去繁從簡

      在UI設計中,有許多的裝飾元素,如卡片的邊框、列表的分割線等,雖然邊框,分割線是分隔兩個元素的好辦法,但是它不是唯一的方法;使用過多會讓整個布局的設計感降低,或多或少都會干擾用戶瀏覽的視線,讓信息內容失去注意力,因此可以減少不必要的裝飾元素。

      我們可以通過以下幾個方法來劃分元素的視覺層次,讓畫面變得干凈,整齊:

      1)使用陰影

      陰影同樣可以營造出邊界感,而且相比邊框分割線更加微妙,并不會顯得突兀,不會分散用戶的注意力,讓內容更聚焦。

      2)使用不同的背景色來區分

      通常,相鄰的元素背景只需要有微妙的差別就能夠讓人對他們進行區分;所以,你所需要做的就是在不同的區塊采用不同的背景色,并且嘗試刪除分割線,因為你根本不需要它。

      3)增加額外的留白

      創建元素之間的分離效果,并不一定要通過線框來表現,只要增加留白,讓它們分隔開就行了,通過留白和間距來實現元素分組是UI設計中的常用手法。

      七、統一設計元素

      在App中的每一個界面都有許多元素,那些同類的元素應保持統一的設計樣式。

      通常個人中心的標簽欄圖標是一個人形剪影,它代表著用戶,因此可以在展示用戶頭像和用戶形象的界面中延續使用。

      如果圖形擁有獨特的外觀,如橢圓矩形,也可以作為視覺符號的一種,延續到其他界面中,成為圖形或按鈕的外觀;這樣,整個界面就被統一的設計元素聯系起來了,給用戶始終如一的一致感。

      八、符合產品氣質的字體

      選擇符合產品氣質的字體,可以與產品的定位相吻合,傳遞給用戶正確的情感意識。

      雖然默認字體可以滿足大多數App 的設計需求,但會出現一個問題就是——系統字體的普適性并沒有什么特色,在一些特定的情境下就顯得收效甚微;例如在運動類App中更適合粗壯的斜體來傳遞力量、爆發力、速度的感覺,換成系統字體后,整體感覺在氣勢上就變弱了很多。

      九、第三方圖標風格統一

      大多數App都支持三方登陸,他可以減輕用戶注冊的時間成本。

      通常是在注冊登陸頁的底部展示第三方圖標入口,這也是設計師最常忽略的內容,往往是直接將第三方圖標調整一致大小和擺放整齊位置,沒有針對它們再設計;一個設計精致的App不應漏過任何的細節,我們可以以自家App的圖標風格為依據,對第三方圖標進行優化設計。

      十、圖片中尋找色彩

      App中優美的圖文設計,能帶給用戶如沐春風的視覺享受,它非常重要。我們經常看到文字疊加在圖片背景上的設計樣式;為了減少復雜圖片背景對文字的干擾,通常的做法是疊加半透明度的黑色蒙版,讓白色文字清晰可見,但這不是最優的辦法。

      我們可以從圖片中提取主色調用于疊加背景的填充色,這樣就使文字、色塊和圖片融入到一起了,畫面變得高級和富有設計感。

      十一、提高圖片質量

      圖片的質量影響著整個App的格調和用戶的情緒,高品質的圖片給人愉悅的視覺享受,產生美好的聯想;而低品質的圖片會瞬間拉低App的質感。

      在App設計中,一張漂亮的圖片從收集到上線,需要經過裁剪,調色等過程才能被使用;即使是普通的商品圖片,我們將它摳圖后調整成統一大小,再加上干凈的背景,就能立刻提升商品的美感,界面視覺也會變得美觀、整潔。

      十二、卡片式設計

      現在的UI界面設計中,卡片式設計已經是一種非常常見的設計形式,它有利于信息分層和整合,劃分出更加清晰的組織結構,實現復雜內容的簡化處理,提高空間利用率;同時卡片式設計通常很依賴視覺元素,很強的視覺元素正是卡片式設計的一種優勢,也是提升設計品質感的良方。

       

       

      轉載:人人都是產品經理

       

       

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

       

      image.png

       

      AI設計重構招聘品牌營銷:節日營銷品效雙贏之道

      清陽 平面設計

      蘭亭妙微UI設計公司分享:當AI能夠深度理解'團圓經濟'的情感密碼,節日營銷正在從流量爭奪升級為心智滲透的精準戰役。58同城在中秋期間以'好崗離家近'為核心,通過AI生成融合城市地標與職業場景的個性化視覺,在6大城市實現千萬級曝光的同時提升簡歷投遞量40%。這場品效合一的實踐揭示了一個關鍵趨勢:AI不再是冰冷的效率工具,而是情感共鳴的放大器——它讓招聘廣告從信息堆砌轉向情感連接,真正實現了品牌溫度與業務增長的雙贏。

       

      01 精準錨定:明確情感與場景的設計方向

      項目首先基于人口特征、營銷資源與業績需求,精準圈定長沙、成都、西安、無錫、南昌五大目標城市。這些城市的共性在于春節/中秋返鄉率超80%,鄉土情結與團圓氛圍尤為濃郁。

      執行層面:項目聚焦6大城市的24個核心商圈,選擇電梯內、戶外大屏、公交站亭三大高頻觸達渠道。

      主視覺采用“品牌區+創意區”雙分區布局:左側傳遞“好崗離家近”的核心主張,右側則分別針對B端企業(展示招聘實力)與C端求職者(突出崗位優勢),引導“求職者投遞-商家入駐”的雙向轉化。

      02 AI賦能:效率與創意的雙重突破

      AI設計的核心價值,在于讓“情感共鳴”與“高效落地”并行不悖。本次項目中,AI技術貫穿創意生成、視覺優化全流程,既精準傳遞“團圓+留鄉”的情感內核,又破解了多城市定制、短周期交付的效率難題,實現雙重突破。

      設計提案方向:

      1. 情感+場景化共鳴:讓設計喚醒本土情結

      設計緊扣“中秋團圓”與“留鄉就業”的雙重訴求,以主題文案將求職需求與家庭情感深度綁定,精準觸動目標人群的“本土情結”。

      創意構思沿兩個方向展開:

      「中秋+商圈實景」方向提案:

      快速建立“本地招聘”的直觀認知,通過融合城市地標與品牌色,結合 “中秋團圓” 節點,延續 “好崗離家近” 的核心訴求,同時針對不同城市定制化文案(如西安的“照的見你的未來”、成都的“崗位和火鍋一樣沸騰”),既傳遞就業價值,又契合城市氣質,激活留鄉就業的情感需求。,讓城市印記成為情感紐帶。

      「中秋+地標+職業人物」方向提案:

      采用真實場景與AI生成插畫人物相結合的方式(如職場女性與城市景觀、特色元素的融合),畫面生動富有層次,打破傳統招聘廣告的單調感。

      最終方案:

      2. AI提效:貫穿流程的設計革命

      AI技術在此次項目中深度融入從創意到落地的全流程,實現“多快好省”的突破:

      創意圖像生成:借助Topnow等工具,快速合成“中秋+商圈”的定制化場景,使AI元素與實景自然銜接,直觀傳遞信息,降低用戶理解成本。

      高效素材處理:

      即夢4.0

      字體設計:幾分鐘內完成字體設計方案。

      處理圖片:快速調整建筑角度、優化圖片內容,適配戶外大屏的傳播需求,大幅減少后期耗時。

      即夢3.0

      生成圖片:月亮的質感與主文案的藝術化呈現,通過 AI 技術實現視覺吸引力,既保證節日氛圍的營造,又讓文案具備強記憶點。

      卡通插畫:效果比4.0優秀

      在插畫生成上表現卓越,通過精準指令,快速產出風格統一的本地職業形象(如成都外賣小哥、西安青年群體),傳遞“本地工作的愉悅感”,效率遠超人工。

      關鍵詞參考:

      “一個外賣小哥抱著熊貓玩偶,大步跑,綠色系工作服,開心地笑,黑色單線描邊,扁平插畫,炫彩配色”

      “一個女孩面對手機視頻通話,身穿襯衫,坐姿端正,張口說話,居家環境,黑色單線描邊,扁平插畫,橙色系配色”

      “5個男女青年,抬頭看前方,一人手指前方,全身,站立,背影,時尚穿搭,黑色單線描邊,扁平插畫,豐富配色”

      具體成效:

      創意階段:半天生成4個完整方向,傳統方式需2-3天。

      多城市適配:快速產出兼具系列感與地方特色的視覺方案。

      修改優化:響應客戶反饋的速度提升70%以上。

      3. 物料延展:保障多場景視覺統一

      基于“一套核心視覺,多場景適配”原則,AI擴圖、高清修復,協助快速延展生成線下物料、線上專場Banner、長圖海報等多尺寸物料,確保線上線下品牌形象統一,強化用戶認知。

      03 價值落地:三大邏輯驅動品效合一

      AI賦能的設計創新,本次設計通過情感、商業、品牌三大邏輯,實現“品效合一”核心目標。讓設計不僅是視覺呈現,更實現了品牌價值與業務增長的雙重落地。

      1.情感邏輯:激活本土情結,拉動C端轉化。AI設計精準觸達留鄉需求,讓“像鳥飛往自己的山”不再只是心理期許,而是有具體崗位支撐的現實可能。數據印證成效:長沙、成都、西安等地線上專場簡歷投遞量增長40%,“本地崗位”搜索量上升62%,有效拉動C端用戶參與度。

      2.商業邏輯:精準賦能B端,超額完成業績。對B端商家而言,精準廣告投放是核心需求。通過“行業+地域”的定制化廣告設計,有效提升了商家投放意愿與合作轉化。

      3.品牌邏輯:沉淀長期認知資產。設計圍繞“貼近受眾、強化認知、促進轉化”原則,將“提供家鄉好工作”的營銷邏輯,拆解為“明月+地標+文案+品牌信息”的直觀的視覺符號組合,降低用戶信息理解成本。通過品牌色、視覺等符號在多場景的重復曝光,持續強化“找本地好工作,就上58”的用戶心智,使品牌從工具平臺升級為“助力團圓”的伙伴,構筑獨特的品牌競爭壁壘。

      04 行業啟示:走向“策略+情感”的AI設計新范式

      本次實踐為行業帶來核心啟示:AI是設計師的“超級助手”,其核心價值在于提升效率精準度。未來的品牌設計應聚焦于 “策略為先,AI賦能,情感共鳴”的融合模式——以策略為導向,用AI提效,最終以情感打動人心。

      打動人心的永遠是對人性的洞察和情感的共鳴:

      對招聘品牌推廣而言,這打破了“信息堆砌”的傳統廣告模式;對更廣的行業來說,則示范了“AI賦能設計,設計驅動品效”的新路徑。技術終究是工具,而深度的策略思考與人文洞察,永遠是設計師不可替代的核心價值。當AI與品牌策略、情感共鳴深度結合,營銷才能實現真正的突破,為品牌創造可持續的長期價值。

      05 寫在最后

      58同城此次中秋品牌營銷項目,正是技術理性與創意感性完美融合的例證。用AI實現高效精準的落地,用設計傳遞深刻的情感價值,最終成就了品牌聲量與業務增長的雙贏,也為行業提供了可復制的品效合一實踐范本。

      轉載:人人都是產品經理

       

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

       

      image.png

      2026 年 6 月設計素材周刊

      清陽 設計資源

       
       
      本期蘭亭妙微UI設計公司,為大家整理新鮮設計資訊、實用工具、優質素材與趣味插件,靈感與效率兩不誤。
      本期周刊整合新鮮設計資訊、實用效率工具、免費商用素材與趣味插件,覆蓋 AIGC、Figma、像素藝術、3D 創意等多個方向,助力設計師拓寬靈感邊界、提升日常工作效率。

      一、行業熱點:Figma 正面回應 “設計已死” 爭議

      近年來,隨著 AI 設計工具、無代碼平臺快速普及,“AI 將取代設計師”“設計行業走向消亡” 的論調頻繁出現在行業討論中。針對這一熱議話題,Figma 舉辦線下活動,幽默且堅定地回應了 “Design is dead(設計已死)”的說法。
      據海外社交平臺 X(原 Twitter)統計,2026 年以來,“設計已死” 的論調已被提及多達 847 次。但 Figma 明確指出:設計從未消亡,只是不斷變換形態,深度融入大眾生活的方方面面。
      1. 設計的本質是體驗,不止于視覺
         
        很多人將設計簡單等同于繪制界面、圖標與配色,實則不然。地鐵線路圖清晰的指引、餐廳菜單合理的排版、App 人性化的消息通知…… 這些潤物細無聲的體驗,都是設計價值的體現。設計早已滲透在生活細節之中。
      2. AI 越強,設計師的核心價值越凸顯
         
        AI 能夠快速生成設計初稿與方案,但無法定義創作方向、把控體驗質感、傳遞情感溫度。設計師的核心能力,是判斷 “什么值得創造”“怎樣的體驗更舒適”,賦予產品人文關懷,這也是自動化工具難以替代的核心競爭力。
      3. 技術迭代恒在,核心能力不變
         
        從 Photoshop、模板網站、Sketch,再到如今的 Figma 與各類 AI 工具,每一次新技術誕生,都會引發 “設計師將被淘汰” 的質疑。但事實證明,迭代的永遠是工具,設計師的審美能力、用戶洞察力、問題解決能力與獨立判斷力,才是立足行業的根本。
      附 Figma 官方文案節選:
       
      無論多少次被宣告 “消亡”,設計始終生生不息。它藏在幫你避免坐過站的地鐵圖里,藏在一目了然的菜單里,也藏在貼心的 App 通知里。設計不是轉瞬即逝的潮流,也不是可被替代的技術,它關乎體驗、關乎感受,而非僅僅追求功能可用。設計屢遭唱衰,卻一次次證明自身不可替代。
       
      官方鏈接:https://x.com/figma/status/2061101954034442293

      image.png

      二、優質工具推薦(全品類實用工具,附直達鏈接)

      1. 3D 轉 ASCII 動畫工具

      可將任意 3D 模型一鍵轉換為 ASCII 字符動畫,風格復古趣味,非常適合用作官網動態插畫。工具支持自定義配色、動畫效果,同時兼容多種格式導出。
       
      訪問地址:https://bitmap-forge.vercel.app/

      image.png

      2. macOS 專用圖像查看器

      基于 SwiftUI 開發,專為鼠標操作優化的輕量圖片查看工具。支持文件夾索引、側邊欄管理、圖片縮放與瀏覽,鼠標、鍵盤操作邏輯流暢,是 Mac 用戶的看圖利器。

      3. 在線像素編輯器

      創意像素藝術工具,打破傳統位圖模式,像素即代碼。支持像素繪畫、動畫制作,可直接導出可用代碼,兼顧創作與開發需求。
       
      訪問地址:https://newt.sh/

      image.png

      4. 組件音效庫

      為網頁 / UI 組件添加語義化音效反饋,僅需一行代碼即可接入,適配 shadcn/ui 組件庫。內含 17 種語義音效、24 類組件適配,讓靜態界面 “發聲”,大幅提升交互體驗。
       
      訪問地址:https://www.sensory-ui.com/#showcase

      image.png

      三、免費設計素材(可商用,直接下載使用)

      1. Playwrite TZ 免費字體

      image.png

      字體風格與經典 Apple Hello 高度相似,字體美觀靈動,完全免費可商用,適用于標題、海報、界面文字等多種場景。
       
      字體下載:https://fonts.google.com/specimen/Playwrite+TZ

      2. Gradientora 漸變素材庫

      image.png

      收錄 1100 + 款精品漸變配色,風格豐富多樣,全部支持免費下載,滿足海報、界面、插畫等設計的色彩搭配需求。
       
      素材地址:https://gradientora.com/

      四、趣味插件 & 個性化資源

      1. FigmaEX 吾皇巴扎黑皮膚

      image.png

      為 FigmaEX 客戶端定制的 CSS 個性化皮膚,更換后可美化 Figma 界面,打造專屬使用風格。

      2. Chrome 視頻控制插件

      瀏覽器實用插件,支持視頻倍速播放、畫中畫、頁面關燈等功能,追劇、學習看教程都能提升體驗。
       
      插件地址:https://chromewebstore.google.com/detail/

      3. Chrome 歷史記錄插件

      復刻 Edge 瀏覽器快捷歷史功能,可快速查看瀏覽記錄與近期關閉頁面,彌補原生 Chrome 功能短板,提升日常瀏覽效率。
       
      插件地址:https://chromewebstore.google.com/detail/
       

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

       

      image.png

      日歷

      鏈接

      個人資料

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

      存檔

      主站蜘蛛池模板: 亚洲精品mv免费网站| 亚洲国产精品一区二区第一页| 国产亚洲精品久久久久久久软件| 日本免费观看mv免费版视频网站| 超碰人人超碰人人| 国产色丁香久久综合| 国产久| 国产午夜草莓视频在线观看| 全免费A级毛片免费看无码| 狠狠操中文字幕| 国产精品99久久久久久董美香 | 亚洲精品国产美女久久久| 国产婷婷丁香五月麻豆| 影音先锋熟女少妇av资源| 国产精品夜色一区二区三区| 内射中出高清晰| 色播久久人人爽人人爽人人片av| 麻豆一区二区三区精品视频| 日日噜噜夜夜爽爽| 97一区二区在线播放| 国产成人AV大片大片在线播放 | 久久96热在精品国产高清| 国产精品被狂躁到高潮| 伊人精品成人久久综合97| 老熟妇高潮偷拍一区二区| 亚洲国产精品成人无码区| 日韩乱码人妻无码中文字幕视频 | 亚洲欧美成人另类激情| 国产精品久久久午夜夜伦鲁鲁| 超碰成人人人做人人爽| 中文字幕亚洲亚洲精品| 动漫精品啪啪一区二区三区| 97成人精品一区二区三区狼人| 亚洲香蕉免费有线视频| 久久熟妇| 亚洲第一无码AV无码专区| 亚洲一二区制服无码中字| 国产福利精品一区二区| 亚洲中文字幕av在线| 老妇女性较大毛片| 国产72av国片精品jk制服|