背景介紹

騰訊 CoDesign 誕生于2019年，最早以「設(shè)計(jì)云-工作臺(tái)」的定位開始服務(wù)騰訊內(nèi)部。在2020年從設(shè)計(jì)門戶拆分為獨(dú)立產(chǎn)品與品牌 CoDesign，并于同年開始對(duì)外服務(wù)。

在產(chǎn)品對(duì)外服務(wù)的過程中，產(chǎn)品一直在進(jìn)行高速的產(chǎn)品能力與體驗(yàn)優(yōu)化迭代，產(chǎn)品所服務(wù)的用戶類型也在不斷豐富。

今年，CoDesign 為滿足更多類型用戶的協(xié)作與體驗(yàn)訴求，在產(chǎn)品資產(chǎn)管理結(jié)構(gòu)與權(quán)限、數(shù)字資產(chǎn)管理能力上進(jìn)行了大幅度的升級(jí)；以及設(shè)計(jì)云產(chǎn)品生態(tài)的逐漸成熟與對(duì)生態(tài)品牌運(yùn)營的規(guī)劃，都對(duì) CoDesign 的品牌與體驗(yàn)有著迫切的升級(jí)訴求。

一、闡明策略

今年上半年，CoDesign 的品牌與體驗(yàn)升級(jí)的設(shè)計(jì)工作幾乎在同一時(shí)間啟動(dòng)，產(chǎn)品體驗(yàn)升級(jí)工作也面臨著多個(gè)挑戰(zhàn)。

• 產(chǎn)品體驗(yàn)升級(jí)具體需要做什么？
• 如何兼容產(chǎn)品未來能力建設(shè)？
• 怎么在品牌不確定的前提下，確保后續(xù)視覺的一致性及與競(jìng)品的差異性？

在與項(xiàng)目組、品牌團(tuán)隊(duì)多次溝通后，我們決定通過以下策略解決產(chǎn)品體驗(yàn)升級(jí)所面臨的挑戰(zhàn)：

一、產(chǎn)品體驗(yàn)升級(jí)工作構(gòu)成涉及到產(chǎn)品、交互、視覺、研發(fā)各個(gè)層面。首先，我們需要明確具體的體驗(yàn)優(yōu)化項(xiàng)，并將其定位到具體層面，制定出體驗(yàn)優(yōu)化的前置工作與規(guī)劃。

二、結(jié)合新的產(chǎn)品升級(jí)方案，梳理經(jīng)典頁面結(jié)構(gòu)。結(jié)合競(jìng)品分析，構(gòu)建出具有差異化的體驗(yàn)基調(diào)。

三、最后，為了進(jìn)一步加強(qiáng)產(chǎn)品體驗(yàn)與競(jìng)品的差異性，完善「推廣視覺」到「產(chǎn)品視覺」的品牌體驗(yàn)閉環(huán)。我們將產(chǎn)品內(nèi)觸點(diǎn)進(jìn)行進(jìn)一步拆解，并在品牌聲量象限中定位，結(jié)合設(shè)計(jì)核心（Design DNA）進(jìn)行延展應(yīng)用。

二、設(shè)計(jì)實(shí)施

1. 從定位問題，制定規(guī)劃開始

我們對(duì)當(dāng)前版本進(jìn)行全方位視覺及體驗(yàn)走查，并且整理用戶反饋的缺陷問題，發(fā)現(xiàn)了 70 多個(gè)交互、視覺以及開發(fā)還原上的問題?？偨Y(jié)歸納為框架擴(kuò)展性不足，體驗(yàn)不統(tǒng)一，效率低，品牌感知弱。

首先在交互上，我們的交互同學(xué)對(duì)產(chǎn)品原則，全局定義，通用流程，頁面框架，標(biāo)準(zhǔn)組件，文案規(guī)范進(jìn)行進(jìn)一步的定義和梳理，保證交互的規(guī)范性和一致性。

其次在視覺上，我們基于 1.0 的問題，在 2.0 上明確了形，色，構(gòu)，質(zhì)，大小，間距，組件等規(guī)范用法，并對(duì)其進(jìn)行文檔化。以便在后續(xù)工作中形成更加嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)規(guī)范，來保證多人合作中大家從開始的思維一致到最后產(chǎn)出的一致。

再次在研發(fā)上，我們將基礎(chǔ)組件和業(yè)務(wù)組件分開維護(hù)，基礎(chǔ)組件代碼我們從 Ten 切回 TDesign，極大地提升了組件的通用性和定制化，并參考 TDesign 的 Token 規(guī)則，定制 CoDesign 的基礎(chǔ)組件樣式。同時(shí)在業(yè)務(wù)組件上，我們將具有通用性組件進(jìn)行抽離，（例如卡片組件）單獨(dú)構(gòu)建成為標(biāo)準(zhǔn)組件。保證研發(fā)異地合作組件樣式的統(tǒng)一性，提高效率。

「 項(xiàng)目開始之初，不用急于陷入方案細(xì)節(jié)設(shè)計(jì)中，可以針對(duì)已知問題，拉通團(tuán)隊(duì)其他成員，對(duì)整體方案中各職能團(tuán)隊(duì)的前置工作進(jìn)行初步規(guī)劃，有助于后續(xù)工作中團(tuán)隊(duì)成員工作流的無縫銜接?！?/p>

2. 從頁面結(jié)構(gòu)上切入

2.1 結(jié)合產(chǎn)品方案，定義經(jīng)典頁面結(jié)構(gòu)

梳理整站經(jīng)典頁面類型，結(jié)合產(chǎn)品新的界面框架方案，以一級(jí)功能模塊舉例：

定義一級(jí)功能模塊，二級(jí)功能模塊，各功能詳情頁，子模塊表單頁的頁面結(jié)構(gòu)。

2.2 國內(nèi)外競(jìng)品分析，構(gòu)建差異化頁面結(jié)構(gòu)

我們針對(duì)國內(nèi)外優(yōu)秀競(jìng)品進(jìn)行研究分析，提取其中的共性特征，發(fā)現(xiàn)競(jìng)品常用的頁面結(jié)構(gòu)分別為：

• 平面結(jié)構(gòu)用線分割功能區(qū)和內(nèi)容區(qū)
• 左右結(jié)構(gòu)用線面組合的形式分割功能區(qū)和內(nèi)容區(qū)
• 上下結(jié)構(gòu)用線面組合的形式分割功能區(qū)和內(nèi)容區(qū)

從以上頁面結(jié)構(gòu)分析上，大致總結(jié)下構(gòu)建差異化頁面結(jié)構(gòu)需要考慮的方向是：功能和內(nèi)容的分割方式，內(nèi)容區(qū)的展示方式。

那在整個(gè)體驗(yàn)升級(jí)，CoDesign 的所有工作都圍繞著一個(gè)核心理念——「內(nèi)容設(shè)計(jì)」。所謂內(nèi)容設(shè)計(jì)，是我們希望用戶在使用工作臺(tái)時(shí)，不受其他因素的干擾，專注于內(nèi)容本身。

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

「 不管是平面，左右還是上下結(jié)構(gòu)，都沒有絕對(duì)的好與壞，取決于我們希望用戶的視覺落點(diǎn)和視覺動(dòng)線在哪，例如在一個(gè)平面結(jié)構(gòu)中，人們的視覺落點(diǎn)往往是最重的顏色或者最大的文字等，相對(duì)應(yīng)你的視覺動(dòng)線就在依次去找第二，第三「重」的內(nèi)容，那當(dāng)這個(gè)平面中增加了空間維度，依然是先看到最「重」的內(nèi)容，只不過因?yàn)橛辛饲昂蟮年P(guān)系，在視覺感官上你會(huì)區(qū)分前后內(nèi)容的重量對(duì)比。

結(jié)合 CoDesign 首頁頁面結(jié)構(gòu)設(shè)計(jì)最終效果圖，你會(huì)發(fā)現(xiàn)首先視覺落點(diǎn)在前景白色內(nèi)容區(qū)的內(nèi)容卡片上，緊接著視覺動(dòng)線來到后景用戶高頻操作的新建操作，最后是左側(cè)導(dǎo)航欄的區(qū)域?！?/p>

3. 在品牌上延伸

我們將產(chǎn)品內(nèi)觸點(diǎn)進(jìn)行進(jìn)一步拆解，并在品牌聲量象限中定位，結(jié)合品牌聲量象限的設(shè)計(jì)要求以及設(shè)計(jì)核心（Design DNA）進(jìn)行延展應(yīng)用。

3.1 品牌色

基于品牌標(biāo)志延展出基礎(chǔ)的品牌色規(guī)則，并且為了兼顧多觸點(diǎn)的應(yīng)用，我們?cè)谄放浦魃A(chǔ)上降低了色彩的飽和度，延展出一系列輔助色，提供了較為豐富的色彩運(yùn)用，同時(shí)為頁面帶來了更為輕盈，靈動(dòng)的視覺感受。最后再根據(jù)品牌聲量象限，指導(dǎo)不同品牌出點(diǎn)的顏色使用。

3.2 輔助圖形

為了塑造統(tǒng)一的品牌語言，我們從品牌標(biāo)志中提取基礎(chǔ)輔助形，設(shè)計(jì)了一系列延展圖形，打造多樣化極具品牌調(diào)性和視覺表達(dá)。

3.3 品牌特征延展

通過品牌特征的運(yùn)用，賦予圖標(biāo)、登錄頁、演示文件、空頁面等應(yīng)用場(chǎng)景更明確的品牌識(shí)別性，進(jìn)一步強(qiáng)化統(tǒng)一品牌認(rèn)知。

CoDesign 圖標(biāo)

CoDesign 登錄頁

CoDesign 演示文件封面

CoDesign 空狀態(tài)

CoDesign 分享頁&加載

CoDesign 核心界面效果展示

「 品牌視覺和產(chǎn)品視覺是相輔相成的，如何讓用戶有清晰的品牌感知，往往來源于一些細(xì)小的場(chǎng)景品牌運(yùn)用，這也是視覺一致性的重要體現(xiàn)?！?/p>

4. 在兼容性上閉環(huán)

4.1「一個(gè)」樣式

我們?cè)诿恳粋€(gè)組件的設(shè)計(jì)與規(guī)劃中，都盡可能的照顧在多場(chǎng)景的兼容性。例如卡片組件的設(shè)計(jì)，1.0 的卡片設(shè)計(jì)，我們有著各種不同的樣式，比例，間距等；新版設(shè)計(jì)中我們將內(nèi)容卡片進(jìn)行了結(jié)構(gòu)化處理，采用了一樣的視覺語言，框架，裁切方式，甚至開發(fā)邏輯，來增強(qiáng)視覺的統(tǒng)一性 ，減少維護(hù)成本的同時(shí)，兼容更多的場(chǎng)景。

4.2「一種」框架

設(shè)計(jì)開始規(guī)劃時(shí)，我們就用一套顏色 Token 搭建起設(shè)計(jì)和開發(fā)之間界面樣式的映射關(guān)系，為未來暗黑模式適配打下基礎(chǔ)。

新版的頁面結(jié)構(gòu)設(shè)計(jì)，也為不同屏幕設(shè)備提供更好的兼容性。

4.3「一套」視覺語言

隨著整個(gè)設(shè)計(jì)云生態(tài)的品牌形象的更新和統(tǒng)一，然而各個(gè)子產(chǎn)品內(nèi)的視覺風(fēng)格還是各異，那未來 CoDesign 會(huì)作為設(shè)計(jì)平臺(tái)的連接器，我們也有意識(shí)的讓新版的視覺風(fēng)格延續(xù)到各大平臺(tái)，來保持一致的視覺語言。那目前我們已經(jīng)陸續(xù)讓這套視覺風(fēng)格延續(xù)到了設(shè)計(jì)云企業(yè)管理后臺(tái)，OpenDesign，設(shè)計(jì)走查像素眼。

三、資產(chǎn)管理與設(shè)計(jì)提效

1. 品牌、視覺、運(yùn)營協(xié)作

在視覺團(tuán)隊(duì)多人協(xié)作中，我們統(tǒng)一了協(xié)作環(huán)境，全文件的 Figma 化，并且將產(chǎn)品設(shè)計(jì)、運(yùn)營設(shè)計(jì)組件化，方便團(tuán)隊(duì)成員使用更加靈活高效。

2. 視覺、研發(fā)協(xié)作

在視覺、研發(fā)多人協(xié)作中，設(shè)計(jì)與研發(fā)統(tǒng)一使用 TDesign 基礎(chǔ)組件，保證基礎(chǔ)組件一致性；業(yè)務(wù)組件在業(yè)務(wù)拓展過程中由業(yè)務(wù)開發(fā)獨(dú)立建設(shè)并維護(hù)，在最后通過視覺樣式 Token 化，建立設(shè)計(jì)和開發(fā)之間界面樣式的映射關(guān)系。

結(jié)語

以上內(nèi)容是基于 CoDesign 體驗(yàn)升級(jí)應(yīng)用過程中的一些關(guān)鍵策略及執(zhí)行思路。

總體來說，我們?cè)谶@個(gè)版本的設(shè)計(jì)上，除了不斷解決產(chǎn)品的訴求和用戶反饋的體驗(yàn)問題之外，還在努力提升設(shè)計(jì)（交互、視覺）及研發(fā)一致性，構(gòu)建可輔助團(tuán)隊(duì)標(biāo)準(zhǔn)化的設(shè)計(jì)、研發(fā)的 Token 及組件庫；打好底層基礎(chǔ)框架，未來 CoDesign 會(huì)增加更多的功能，輻射更廣業(yè)務(wù)。我希望這些基礎(chǔ)面的建設(shè)，能帶來整個(gè)平臺(tái)一致性的用戶體驗(yàn)。

轉(zhuǎn)載：人人都是產(chǎn)品經(jīng)理

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.payeee.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

蘭亭妙微UI設(shè)計(jì)公司分享：過去，產(chǎn)品經(jīng)理談界面設(shè)計(jì)，常常只需要說一句：“這個(gè)頁面按后臺(tái)系統(tǒng)常規(guī)樣式做就行。”

但今天，這句話已經(jīng)不夠用了。

一方面，AI 產(chǎn)品、SaaS 工具、內(nèi)容平臺(tái)、數(shù)據(jù)看板、運(yùn)營后臺(tái)越來越多，產(chǎn)品的第一印象越來越依賴界面質(zhì)感。另一方面，前端開發(fā)已經(jīng)不再是從零開始寫每一個(gè)按鈕、表單和彈窗，大多數(shù)團(tuán)隊(duì)都會(huì)基于成熟的 UI 框架或組件庫快速搭建產(chǎn)品。

所以，產(chǎn)品經(jīng)理雖然不一定要會(huì)寫代碼，但至少應(yīng)該知道：市面上有哪些常見的前端 UI 框架？它們分別適合什么產(chǎn)品？什么時(shí)候該用現(xiàn)成框架，什么時(shí)候需要做定制設(shè)計(jì)？如果你完全不了解這些，很容易在需求評(píng)審時(shí)提出“不現(xiàn)實(shí)的設(shè)計(jì)要求”，或者在產(chǎn)品視覺層面輸給競(jìng)品。

這篇文章，就幫產(chǎn)品經(jīng)理系統(tǒng)梳理一次。

一、什么是前端 UI 框架？

簡(jiǎn)單理解，前端 UI 框架就是一套已經(jīng)設(shè)計(jì)好、開發(fā)好的界面組件集合。

比如：

按鈕、輸入框、下拉選擇器、表格、彈窗、標(biāo)簽頁、菜單、日期選擇器、上傳組件、通知提醒、側(cè)邊欄、數(shù)據(jù)卡片……

這些都是產(chǎn)品頁面中高頻出現(xiàn)的基礎(chǔ)元素。

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

而有了 UI 框架之后，團(tuán)隊(duì)可以直接調(diào)用現(xiàn)成組件，再根據(jù)品牌風(fēng)格進(jìn)行主題定制。對(duì)于產(chǎn)品經(jīng)理來說，這意味著：

• 頁面開發(fā)速度更快；
• 交互一致性更強(qiáng)；
• 設(shè)計(jì)和研發(fā)溝通成本更低；
• 后續(xù)維護(hù)和迭代更可控。

所以，UI 框架并不只是“讓頁面變好看”的工具，它本質(zhì)上是產(chǎn)品研發(fā)效率的一部分。

二、產(chǎn)品經(jīng)理為什么需要了解 UI 框架？

很多產(chǎn)品經(jīng)理會(huì)覺得：“UI 框架不是前端工程師的事情嗎？我為什么要懂？”

原因很簡(jiǎn)單：你不需要會(huì)用，但你需要會(huì)判斷。

產(chǎn)品經(jīng)理至少要知道三個(gè)問題：

第一，這個(gè)產(chǎn)品適合用什么類型的 UI 框架？

一個(gè)企業(yè)管理后臺(tái)，和一個(gè) AI 聊天產(chǎn)品，和一個(gè)營銷活動(dòng)頁面，對(duì)界面風(fēng)格的要求是不一樣的。后臺(tái)系統(tǒng)更看重表格、表單、權(quán)限、篩選和數(shù)據(jù)展示；AI 產(chǎn)品更看重現(xiàn)代感、輕量感、動(dòng)效和交互體驗(yàn)；官網(wǎng)落地頁則更看重視覺沖擊力和轉(zhuǎn)化路徑。

第二，UI 框架會(huì)影響產(chǎn)品氣質(zhì)。

同樣是一個(gè)管理系統(tǒng)，用 Ant Design、Element Plus、shadcn/ui、HeroUI 做出來的感覺可能完全不同。有的偏企業(yè)化，有的偏清爽，有的偏現(xiàn)代，有的偏國際化。

第三，UI 框架會(huì)影響需求實(shí)現(xiàn)成本。

有些組件框架本身就提供復(fù)雜表格、表單校驗(yàn)、日期選擇、上傳、權(quán)限布局等能力，實(shí)現(xiàn)成本較低；但如果產(chǎn)品經(jīng)理提出的交互和框架默認(rèn)能力差異很大，研發(fā)成本就會(huì)上升。

所以，懂 UI 框架，不是為了替前端做技術(shù)選型，而是為了讓產(chǎn)品經(jīng)理在設(shè)計(jì)需求、評(píng)估成本、判斷風(fēng)格時(shí)更專業(yè)。

三、產(chǎn)品經(jīng)理必知的幾類前端 UI 框架

前端 UI 框架很多，但產(chǎn)品經(jīng)理不需要全部掌握。你只需要知道以下幾類。

1. Ant Design：企業(yè)級(jí)后臺(tái)系統(tǒng)的經(jīng)典選擇

如果你做過中后臺(tái)產(chǎn)品，大概率聽說過 Ant Design。

它最適合的場(chǎng)景是：企業(yè)管理后臺(tái)、CRM、ERP、數(shù)據(jù)平臺(tái)、運(yùn)營后臺(tái)、權(quán)限系統(tǒng)、審批系統(tǒng)、配置系統(tǒng)等。

Ant Design 的優(yōu)勢(shì)是組件非常完整，尤其適合復(fù)雜表格、復(fù)雜表單、數(shù)據(jù)篩選、彈窗、菜單、導(dǎo)航、分頁、上傳等中后臺(tái)場(chǎng)景。對(duì)于國內(nèi)很多 B 端產(chǎn)品來說，它幾乎已經(jīng)是一種“默認(rèn)選擇”。

但它也有一個(gè)明顯問題：默認(rèn)風(fēng)格比較“企業(yè)化”。如果不做主題調(diào)整，產(chǎn)品容易看起來像傳統(tǒng)后臺(tái)，缺少年輕感和高級(jí)感。

產(chǎn)品經(jīng)理在使用 Ant Design 時(shí)要注意一點(diǎn)：它適合提高效率，但不代表產(chǎn)品一定好看。如果是面向外部客戶的 SaaS 產(chǎn)品，最好在顏色、間距、卡片、圖標(biāo)和數(shù)據(jù)可視化上做二次設(shè)計(jì)。

適合場(chǎng)景：

• 企業(yè)后臺(tái)
• SaaS 管理系統(tǒng)
• 數(shù)據(jù)看板
• 權(quán)限管理系統(tǒng)
• 運(yùn)營配置平臺(tái)

不太適合：

• 強(qiáng)品牌感官網(wǎng)
• 高級(jí)感 AI 產(chǎn)品首頁
• 視覺表達(dá)要求很強(qiáng)的 C 端產(chǎn)品

2. Element Plus：Vue 技術(shù)棧里的后臺(tái)常用選擇

Element Plus 是 Vue 生態(tài)里非常常見的 UI 組件庫，很多國內(nèi)團(tuán)隊(duì)做后臺(tái)系統(tǒng)都會(huì)用它。

如果你的技術(shù)團(tuán)隊(duì)使用 Vue 3，那么 Element Plus 通常會(huì)是一個(gè)很容易被考慮的選項(xiàng)。它上手成本低，文檔友好，組件也比較完整，適合快速搭建管理系統(tǒng)。

它的產(chǎn)品氣質(zhì)和 Ant Design 有點(diǎn)類似，都是偏中后臺(tái)、偏效率、偏穩(wěn)定的路線。對(duì)于產(chǎn)品經(jīng)理來說，Element Plus 的核心價(jià)值不是“多么驚艷”，而是“穩(wěn)定、通用、開發(fā)快”。

適合場(chǎng)景：

• Vue 技術(shù)棧后臺(tái)系統(tǒng)
• 內(nèi)部管理平臺(tái)
• 表單密集型產(chǎn)品
• 快速搭建 MVP
• 運(yùn)營管理系統(tǒng)

需要注意的是，如果產(chǎn)品對(duì)視覺高級(jí)感要求很高，Element Plus 默認(rèn)風(fēng)格也需要二次設(shè)計(jì)，否則容易顯得普通。

3. Naive UI：更清爽現(xiàn)代的 Vue 組件庫

Naive UI 也是 Vue 3 生態(tài)中值得產(chǎn)品經(jīng)理了解的一套組件庫。

和 Element Plus 相比，Naive UI 的氣質(zhì)更輕、更現(xiàn)代，視覺上也更清爽一些。它比較適合那些既需要后臺(tái)能力，又希望界面不要太傳統(tǒng)的產(chǎn)品。

比如 AI 工具后臺(tái)、內(nèi)容管理系統(tǒng)、知識(shí)庫產(chǎn)品、數(shù)據(jù)分析工具、輕量 SaaS 控制臺(tái)等，都可以考慮 Naive UI。

對(duì)產(chǎn)品經(jīng)理來說，Naive UI 的價(jià)值在于：它不那么“老派后臺(tái)”，同時(shí)又具備比較完整的組件能力。如果你希望產(chǎn)品既有效率，又看起來更年輕，它是一個(gè)不錯(cuò)的選擇。

適合場(chǎng)景：

• Vue 3 項(xiàng)目
• 清爽型后臺(tái)
• AI 工具管理端
• 內(nèi)容平臺(tái)后臺(tái)
• 輕量 SaaS 產(chǎn)品

4. Arco Design：適合年輕化企業(yè)產(chǎn)品

Arco Design 是一套偏企業(yè)級(jí)的設(shè)計(jì)系統(tǒng)和組件庫，既有 React 版本，也有 Vue 版本。它的整體風(fēng)格比傳統(tǒng)企業(yè)后臺(tái)更年輕，適合需要兼顧效率和視覺感的產(chǎn)品。

如果說 Ant Design 更像成熟穩(wěn)重的企業(yè)后臺(tái)，那么 Arco Design 相對(duì)更輕、更活潑一些。它適合做企業(yè)協(xié)同產(chǎn)品、效率工具、數(shù)據(jù)平臺(tái)、SaaS 后臺(tái)、運(yùn)營系統(tǒng)等。

產(chǎn)品經(jīng)理可以把 Arco Design 理解為：在企業(yè)級(jí)能力和年輕化視覺之間做平衡的一套方案。

適合場(chǎng)景：

• 企業(yè)級(jí) SaaS
• 協(xié)同辦公產(chǎn)品
• 數(shù)據(jù)分析平臺(tái)
• 運(yùn)營后臺(tái)
• 年輕化 B 端產(chǎn)品

5. MUI：適合國際化產(chǎn)品和 Material Design 風(fēng)格

MUI 是 React 生態(tài)里很成熟的一套組件庫，基于 Google 的 Material Design 風(fēng)格。

它的特點(diǎn)是規(guī)范感強(qiáng)、組件完整、國際化程度高。很多海外產(chǎn)品、開發(fā)者工具、SaaS 產(chǎn)品會(huì)使用 MUI。

不過，MUI 的默認(rèn)風(fēng)格有比較明顯的 Material Design 特征。如果你的產(chǎn)品希望看起來更“Google 系”，MUI 會(huì)比較合適；但如果你希望做出獨(dú)特品牌感，就需要進(jìn)行較多主題定制。

適合場(chǎng)景：

• 國際化 SaaS
• React 項(xiàng)目
• 工具型產(chǎn)品
• 海外用戶產(chǎn)品
• Material Design 風(fēng)格產(chǎn)品

6. Mantine：React 生態(tài)里的全能型選手

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

它的優(yōu)勢(shì)在于組件豐富、hooks 完整、主題定制能力強(qiáng)，適合做各種 Web 應(yīng)用，尤其適合 SaaS、后臺(tái)系統(tǒng)、工具型產(chǎn)品。

和 Ant Design 相比，Mantine 的視覺氣質(zhì)更輕一些；和 shadcn/ui 相比，它又更像一個(gè)完整的組件庫，開箱即用能力更強(qiáng)。

如果你的團(tuán)隊(duì)使用 React，并且想要一個(gè)既能快速開發(fā)、又不會(huì)太傳統(tǒng)的 UI 框架，Mantine 是值得考慮的選擇。

適合場(chǎng)景：

• React SaaS 產(chǎn)品
• 工具型 Web 應(yīng)用
• 管理后臺(tái)
• 表單密集型產(chǎn)品
• 中小型商業(yè)產(chǎn)品

7. Shadcn ui：當(dāng)下很適合 AI 產(chǎn)品的現(xiàn)代組件方案

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

嚴(yán)格來說，它并不是傳統(tǒng)意義上的組件庫。它更像是一套可以復(fù)制到自己項(xiàng)目里、再自由改造的組件體系。它的設(shè)計(jì)風(fēng)格非常現(xiàn)代，配合 Tailwind CSS 使用，很容易做出高級(jí)、干凈、有質(zhì)感的界面。

這類風(fēng)格非常適合 AI 產(chǎn)品、SaaS 官網(wǎng)、開發(fā)者工具、數(shù)據(jù)看板、知識(shí)庫產(chǎn)品、內(nèi)容平臺(tái)等。

shadcn/ui 的優(yōu)勢(shì)是好看、靈活、可控；缺點(diǎn)是它對(duì)前端團(tuán)隊(duì)能力要求更高，不像傳統(tǒng)組件庫那樣“一裝即用”。如果團(tuán)隊(duì)前端能力不錯(cuò)，它可以做出非常有差異化的產(chǎn)品視覺；如果團(tuán)隊(duì)比較依賴現(xiàn)成組件，使用成本可能會(huì)更高。

適合場(chǎng)景：

• AI 產(chǎn)品
• Next.js 項(xiàng)目
• SaaS 控制臺(tái)
• 開發(fā)者工具
• 高級(jí)感管理后臺(tái)
• 需要定制化設(shè)計(jì)系統(tǒng)的產(chǎn)品

對(duì)產(chǎn)品經(jīng)理來說，shadcn/ui 值得重點(diǎn)關(guān)注。因?yàn)楝F(xiàn)在很多新一代 AI 產(chǎn)品的界面風(fēng)格，已經(jīng)不再是傳統(tǒng)后臺(tái)，而是更輕、更白、更克制、更高級(jí)的設(shè)計(jì)語言。

8. HeroUI：適合想要默認(rèn)就好看的 React 產(chǎn)品

HeroUI 也是一套適合 React 項(xiàng)目的現(xiàn)代 UI 組件庫。

它的特點(diǎn)是默認(rèn)視覺比較好，組件帶有更明顯的現(xiàn)代感和動(dòng)效感，適合做 AI 工具、創(chuàng)作者產(chǎn)品、社區(qū)產(chǎn)品、輕量 SaaS 產(chǎn)品等。

如果產(chǎn)品經(jīng)理希望產(chǎn)品一開始就有不錯(cuò)的視覺表現(xiàn)，而不是完全依賴設(shè)計(jì)師和前端從零調(diào)整，HeroUI 會(huì)是一個(gè)不錯(cuò)的選擇。

適合場(chǎng)景：

• AI 工具
• 創(chuàng)作者工具
• 輕量 SaaS
• 社區(qū)產(chǎn)品
• 現(xiàn)代化 Web 應(yīng)用

9. Tailwind CSS：不是組件庫，但產(chǎn)品經(jīng)理也應(yīng)該知道

Tailwind CSS 嚴(yán)格來說不是 UI 組件庫，而是一套 CSS 工具框架。

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

現(xiàn)在很多現(xiàn)代 UI 框架和組件方案都會(huì)基于 Tailwind CSS，比如 shadcn/ui、HeroUI 等。

產(chǎn)品經(jīng)理不需要理解 Tailwind CSS 的寫法，但要知道它代表了一種趨勢(shì)：越來越多團(tuán)隊(duì)不滿足于直接套用傳統(tǒng)組件庫，而是希望通過更靈活的樣式系統(tǒng)，做出更有品牌感的界面。

適合場(chǎng)景：

• 高定制化官網(wǎng)
• SaaS 官網(wǎng)
• AI 產(chǎn)品頁面
• 需要強(qiáng)視覺表達(dá)的產(chǎn)品
• 自建設(shè)計(jì)系統(tǒng)

四、產(chǎn)品經(jīng)理應(yīng)該如何選擇 UI 框架？

產(chǎn)品經(jīng)理不需要決定最終技術(shù)選型，但可以和設(shè)計(jì)師、前端一起從以下幾個(gè)維度判斷。

1. 先看產(chǎn)品類型

如果是企業(yè)后臺(tái)、管理系統(tǒng)、配置平臺(tái)，可以優(yōu)先考慮 Ant Design、Element Plus、Arco Design。

如果是 AI 產(chǎn)品、SaaS 工具、開發(fā)者工具，可以重點(diǎn)關(guān)注 shadcn/ui、HeroUI、Mantine。

如果是 Vue 技術(shù)棧，可以看 Element Plus、Naive UI、Arco Design Vue。

如果是官網(wǎng)、落地頁、活動(dòng)頁，可以關(guān)注 Tailwind CSS 及其生態(tài)組件。

2. 再看技術(shù)棧

React 項(xiàng)目常見選擇：

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

Vue 項(xiàng)目常見選擇：

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

不同框架并不是隨便選的，它和團(tuán)隊(duì)技術(shù)棧高度相關(guān)。產(chǎn)品經(jīng)理不要只說“我喜歡這個(gè)風(fēng)格”，還要問一句：“我們現(xiàn)在的前端技術(shù)棧適合用它嗎？”

3. 看組件完整度

如果產(chǎn)品里有大量復(fù)雜表格、篩選、表單、權(quán)限、彈窗、上傳、日期選擇，組件完整度非常重要。

這類產(chǎn)品更適合選擇成熟組件庫，比如 Ant Design、Element Plus、Mantine、Arco Design。

如果產(chǎn)品更重視視覺表達(dá)、頁面質(zhì)感和品牌差異化，可以選擇 shadcn/ui、HeroUI、Tailwind CSS 生態(tài)。

4. 看設(shè)計(jì)定制能力

很多產(chǎn)品的問題不是“沒有 UI 框架”，而是“所有頁面都長得像模板”。

如果你希望產(chǎn)品有自己的品牌感，就不能只依賴默認(rèn)樣式。產(chǎn)品經(jīng)理需要關(guān)注：

• 是否支持主題色定制？
• 是否支持暗黑模式？
• 組件間距能不能統(tǒng)一調(diào)整？
• 按鈕、卡片、表格、彈窗是否能形成統(tǒng)一設(shè)計(jì)語言？
• 設(shè)計(jì)稿和前端組件是否能長期保持一致？

一個(gè)成熟產(chǎn)品，最終一定不是簡(jiǎn)單套模板，而是形成自己的設(shè)計(jì)系統(tǒng)。

五、不同產(chǎn)品場(chǎng)景的推薦選擇

如果你是做企業(yè)中后臺(tái)：

優(yōu)先看 Ant Design、Element Plus、Arco Design。它們組件成熟，適合復(fù)雜業(yè)務(wù)場(chǎng)景，尤其是表格、表單、篩選、權(quán)限等能力比較重要的系統(tǒng)。

如果你是做 AI 產(chǎn)品：

優(yōu)先看 shadcn/ui、HeroUI、Mantine。它們更容易做出現(xiàn)代感和高級(jí)感，適合 AI 工具、AI 工作臺(tái)、AI 內(nèi)容平臺(tái)、AI Agent 控制臺(tái)等產(chǎn)品。

如果你是做 SaaS 產(chǎn)品：

可以根據(jù)風(fēng)格選擇 Mantine、shadcn/ui、Ant Design、Arco Design。如果是偏后臺(tái)管理，可以選 Ant Design 或 Arco；如果是偏現(xiàn)代工具，可以選 shadcn/ui 或 Mantine。

如果你是做官網(wǎng)和營銷頁：

可以關(guān)注 Tailwind CSS 生態(tài)。相比傳統(tǒng)后臺(tái)組件庫，它更適合做品牌官網(wǎng)、課程頁、活動(dòng)頁、產(chǎn)品介紹頁。

如果你是 Vue 團(tuán)隊(duì)：

可以重點(diǎn)看 Element Plus、Naive UI、Arco Design Vue。如果想穩(wěn)妥，就選 Element Plus；如果想更現(xiàn)代，可以看 Naive UI；如果要企業(yè)級(jí)完整方案，可以看 Arco Design Vue。

六、產(chǎn)品經(jīng)理要避免的幾個(gè)誤區(qū)

第一個(gè)誤區(qū)：以為 UI 框架等于設(shè)計(jì)稿。

UI 框架只是基礎(chǔ)組件，不等于完整設(shè)計(jì)。真正的產(chǎn)品體驗(yàn)還包括信息架構(gòu)、頁面布局、視覺層級(jí)、交互路徑、文案表達(dá)和品牌調(diào)性。

第二個(gè)誤區(qū)：只看好不好看，不看業(yè)務(wù)復(fù)雜度。

有些框架看起來很美，但不一定適合復(fù)雜后臺(tái)。如果產(chǎn)品有大量表格、篩選和表單，組件能力比視覺炫酷更重要。

第三個(gè)誤區(qū)：只追求差異化，忽略開發(fā)成本。

如果每個(gè)組件都要重寫，每個(gè)交互都要高度定制，產(chǎn)品看起來可能更特別，但研發(fā)成本和維護(hù)成本也會(huì)大幅上升。

第四個(gè)誤區(qū)：認(rèn)為用了某個(gè)框架就一定高級(jí)。

同樣使用 shadcn/ui，有的產(chǎn)品很高級(jí)，有的產(chǎn)品也會(huì)很普通?？蚣苤皇瞧瘘c(diǎn)，最終效果取決于設(shè)計(jì)能力、前端實(shí)現(xiàn)和產(chǎn)品細(xì)節(jié)。

七、產(chǎn)品經(jīng)理真正應(yīng)該掌握的不是框架名字，而是選型邏輯

產(chǎn)品經(jīng)理了解 UI 框架，不是為了和前端爭(zhēng)論“到底用哪個(gè)庫”，而是為了提升產(chǎn)品判斷力。

你至少要能判斷：

• 這個(gè)產(chǎn)品是偏后臺(tái)，還是偏前臺(tái)？
• 是效率優(yōu)先，還是品牌優(yōu)先？
• 是快速上線，還是長期打造設(shè)計(jì)系統(tǒng)？
• 是 React 技術(shù)棧，還是 Vue 技術(shù)棧？
• 是重表格表單，還是重視覺體驗(yàn)？
• 是內(nèi)部系統(tǒng)，還是面向用戶的商業(yè)產(chǎn)品？

當(dāng)你能回答這些問題，和設(shè)計(jì)師、前端溝通時(shí)就會(huì)更專業(yè)。

結(jié)語：未來的產(chǎn)品經(jīng)理，要懂一點(diǎn)前端審美和工程效率

AI 時(shí)代，產(chǎn)品經(jīng)理的能力邊界正在變化。

過去，產(chǎn)品經(jīng)理重點(diǎn)關(guān)注需求、流程和功能；現(xiàn)在，產(chǎn)品經(jīng)理還需要懂一點(diǎn)界面審美、組件思維、設(shè)計(jì)系統(tǒng)和研發(fā)效率。

前端 UI 框架就是連接產(chǎn)品、設(shè)計(jì)和研發(fā)的重要橋梁。

你不需要成為前端工程師，但你需要知道：

• 做企業(yè)后臺(tái)時(shí)，為什么很多團(tuán)隊(duì)會(huì)選擇 Ant Design 或 Element Plus；
• 做現(xiàn)代 AI 產(chǎn)品時(shí)，為什么越來越多團(tuán)隊(duì)關(guān)注 shadcn/ui、HeroUI 和 Tailwind CSS；
• 做 SaaS 產(chǎn)品時(shí)，為什么組件庫不僅影響開發(fā)速度，也影響用戶對(duì)產(chǎn)品專業(yè)度的第一印象。

真正優(yōu)秀的產(chǎn)品經(jīng)理，不只是會(huì)寫需求文檔，也要能判斷一個(gè)產(chǎn)品該用什么方式被更高效、更美觀、更可持續(xù)地做出來。

這，就是產(chǎn)品經(jīng)理應(yīng)該了解前端 UI 框架的原因。

轉(zhuǎn)載：人人都是產(chǎn)品經(jīng)理

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.payeee.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

蘭亭妙微UI設(shè)計(jì)公司：在用戶需求日益多元化的旅游市場(chǎng)中，會(huì)員權(quán)益的價(jià)值不僅在于提供優(yōu)惠，更在于創(chuàng)造差異化的體驗(yàn)與長期歸屬感。本次會(huì)員權(quán)益感知升級(jí)，我們通過權(quán)益展示規(guī)則優(yōu)化和場(chǎng)景化等方式，加強(qiáng)用戶對(duì)會(huì)員權(quán)益的感知，讓用戶從預(yù)訂到旅程的每個(gè)環(huán)節(jié)都能清晰感知會(huì)員權(quán)益的價(jià)值。

一、背景

當(dāng)前，集團(tuán)持續(xù)加大在會(huì)員權(quán)益方面的投入，旨在通過更具價(jià)值的權(quán)益體系提升用戶體驗(yàn)。優(yōu)質(zhì)的會(huì)員服務(wù)不僅能增強(qiáng)用戶粘性和忠誠度，更能有效提高權(quán)益使用率和訂單轉(zhuǎn)化率。此次會(huì)員體驗(yàn)升級(jí)，正是希望通過優(yōu)化權(quán)益設(shè)計(jì)和服務(wù)體驗(yàn)，實(shí)現(xiàn)用戶價(jià)值與平臺(tái)效益的雙贏，最終形成"投入-體驗(yàn)提升-效益增長"的良性循環(huán)。

二、問題洞察

通過走查線上各業(yè)務(wù)線（如機(jī)票、酒店等）的頁面，我們發(fā)現(xiàn)了以下 2 個(gè)問題：

1. 不同業(yè)務(wù)線間：權(quán)益的展示節(jié)點(diǎn)和感知強(qiáng)度不同，缺少一致的設(shè)計(jì)原則

目前各業(yè)務(wù)線在會(huì)員權(quán)益方面的設(shè)計(jì)手段不同，在權(quán)益展示點(diǎn)位和感知強(qiáng)度上存在明顯差異，缺少一致的設(shè)計(jì)原則進(jìn)行規(guī)范。具體表現(xiàn)為：

酒店：主要通過貨架展示強(qiáng)化會(huì)員權(quán)益感知

機(jī)票：側(cè)重在列表頁和中間頁等固定位置展示

火車票：則聚焦于權(quán)益使用環(huán)節(jié)的觸達(dá)

2. 單個(gè)業(yè)務(wù)線內(nèi)：優(yōu)勢(shì)權(quán)益在流程中沒有充分傳達(dá)

通過對(duì)各業(yè)務(wù)線現(xiàn)有頁面的走查，我們發(fā)現(xiàn)會(huì)員權(quán)益在訂前、訂后部分關(guān)鍵節(jié)點(diǎn)存在展示缺失的問題。雖然用戶在流程中能看到權(quán)益信息，但整體感知度仍有不足。

針對(duì)上述問題，我們需要建立統(tǒng)一的設(shè)計(jì)原則，在保持各業(yè)務(wù)線自身特色的同時(shí)，形成協(xié)同一致的會(huì)員體驗(yàn)，提升用戶對(duì)會(huì)員權(quán)益的整體感知效果。

三、設(shè)計(jì)優(yōu)化——從"能看到"到"感知好"

本次優(yōu)化主要圍繞兩個(gè)核心目標(biāo)展開：一是建立規(guī)范的權(quán)益展示原則，二是提升用戶對(duì)權(quán)益的感知度。具體將從以下幾個(gè)方向著手：

1. 權(quán)益前置，強(qiáng)化展示

根據(jù)歷史機(jī)票和酒店的項(xiàng)目數(shù)據(jù)，我們發(fā)現(xiàn)將具有明顯優(yōu)勢(shì)的權(quán)益提前展示，能夠顯著增強(qiáng)用戶的感知，并有效提升預(yù)訂轉(zhuǎn)化率。例如攜程酒店將會(huì)員賬戶中的的權(quán)益與預(yù)訂流程結(jié)合，將原本無早餐的劣勢(shì)轉(zhuǎn)化為會(huì)員可免費(fèi)兌早餐的優(yōu)勢(shì)展示。這樣的方式為我們提供了本次優(yōu)化的思路——通過權(quán)益前置來強(qiáng)化權(quán)益，加強(qiáng)感知。

什么樣的權(quán)益需要前置？——設(shè)定強(qiáng)弱權(quán)益規(guī)則

為提升會(huì)員權(quán)益展示效果，我們通過對(duì)權(quán)益內(nèi)容的系統(tǒng)分析，將其劃分為兩大類別：強(qiáng)權(quán)益和弱權(quán)益。

強(qiáng)權(quán)益：指與產(chǎn)品線直接相關(guān)或?qū)r(jià)格產(chǎn)生顯著影響的權(quán)益，例如酒店業(yè)務(wù)的免費(fèi)早餐服務(wù)和會(huì)員專享價(jià)格。這類權(quán)益在用戶購買決策中起關(guān)鍵作用，能有效提升用戶滿意度和預(yù)訂轉(zhuǎn)化率，因此需要在核心預(yù)訂節(jié)點(diǎn)進(jìn)行重點(diǎn)展示。

弱權(quán)益：指與產(chǎn)品線關(guān)聯(lián)度較低的權(quán)益，例如機(jī)票業(yè)務(wù)的快速安檢服務(wù)。雖然這類權(quán)益不會(huì)直接影響用戶的預(yù)訂決策，但可作為增值服務(wù)提升用戶體驗(yàn)，間接促進(jìn)轉(zhuǎn)化。

為確保權(quán)益展示的客觀準(zhǔn)確，我們也可以借助內(nèi)部的權(quán)益價(jià)值計(jì)算公式，量化每項(xiàng)權(quán)益的實(shí)際價(jià)值，幫助我們精準(zhǔn)評(píng)估和展示權(quán)益，為用戶提供更有價(jià)值的會(huì)員體驗(yàn)，最終提升用戶滿意度和忠誠度。

2. 讓權(quán)益貫穿各節(jié)點(diǎn)的策略

在對(duì)各業(yè)務(wù)線的線上頁面進(jìn)行走查時(shí)，我們注意到訂前、訂后部分節(jié)點(diǎn)常常出現(xiàn)權(quán)益感知缺失的情況。

為了充分提升權(quán)益的曝光，我們制定了強(qiáng)弱權(quán)益展示的規(guī)則，定義了在各節(jié)點(diǎn)展示的必要性。在預(yù)訂前節(jié)點(diǎn)，我們優(yōu)先展示與用戶決策緊密相關(guān)的強(qiáng)權(quán)益，并在相關(guān)性較低的節(jié)點(diǎn)提前展示弱權(quán)益，以加深用戶印象并促進(jìn)轉(zhuǎn)化。預(yù)定后，對(duì)收益、轉(zhuǎn)化率和 CPO（客服來電率）的影響較小，需要做到盡可能強(qiáng)的展示。

根據(jù)以上規(guī)則，我們?cè)趯?shí)際點(diǎn)位進(jìn)行了應(yīng)用：

以火車票業(yè)務(wù)為例，我們通過優(yōu)化權(quán)益展示策略，在首頁新增曝光點(diǎn)位、強(qiáng)化現(xiàn)有頁面展示效果，并完善訂后權(quán)益展示，使會(huì)員權(quán)益的觸達(dá)貫穿用戶全流程。優(yōu)化后，權(quán)益曝光率和用戶感知強(qiáng)度有了明顯的提升。

3. 更加嚴(yán)格的設(shè)計(jì)規(guī)范

此前制定的會(huì)員權(quán)益視覺規(guī)范，因各業(yè)務(wù)線復(fù)雜度不同，在多次迭代后逐漸出現(xiàn)差異，導(dǎo)致不同業(yè)務(wù)線之間展示不一致、單個(gè)業(yè)務(wù)線內(nèi)流程不統(tǒng)一的問題。為此，本次優(yōu)化中我們也重點(diǎn)明確了各類場(chǎng)景的標(biāo)簽使用規(guī)范和文案規(guī)范，全面提升展示一致性，同時(shí)加強(qiáng)會(huì)員身份的表達(dá)。

經(jīng)過以上幾點(diǎn)優(yōu)化，上線后數(shù)據(jù)顯示用戶對(duì)會(huì)員權(quán)益的滿意度、會(huì)員權(quán)益的使用率都有顯著提升，驗(yàn)證了設(shè)計(jì)方案的有效性。

四、強(qiáng)化重要節(jié)點(diǎn)的感知

除了常規(guī)流程中的會(huì)員感知，我們也在思考如何進(jìn)一步加深用戶的印象，讓用戶訂票時(shí)優(yōu)先選擇攜程。

1. 出行中節(jié)點(diǎn)——提供好用的體驗(yàn)

訂后的節(jié)點(diǎn)往往容易被忽視，以機(jī)票的快速安檢權(quán)益為例，用戶通常需要打開攜程 App → 查找訂單詳情 → 定位權(quán)益入口 → 完成核銷，步驟較長，導(dǎo)致體驗(yàn)打折。

新版本中，我們將出行相關(guān)的會(huì)員權(quán)益（如快速安檢）直接前置至攜程 App 大首頁的行程卡片。用戶打開 App 即可快速查看和使用權(quán)益，無需多層跳轉(zhuǎn)。改版后，用戶體驗(yàn)和權(quán)益使

用率都得到了提升。

2. 會(huì)員升級(jí)節(jié)點(diǎn)——制造驚喜感

基于 KANO 模型，我們可以將用戶需求分為三類：基本型、期望型、興奮型，在前面的改版中我們已經(jīng)滿足了用戶的前兩類需求。我們希望制造驚喜感和儀式感來滿足用戶的興奮型需求。攜程會(huì)員體系以“山峰”為視覺符號(hào)，不同高度代表不同等級(jí)，用戶每次升級(jí)，都象征著翻越一座新的高峰。象征用戶翻越山峰的升級(jí)節(jié)點(diǎn)正是滿足用戶“興奮型需求”的關(guān)鍵時(shí)刻。

因此，在用戶升級(jí)時(shí)，我們?cè)跀y程首頁增加升級(jí)彈窗強(qiáng)化驚喜感和儀式感。用戶打開 App 即可直觀感受到等級(jí)提升的成就，并快速了解新增權(quán)益。上線后帶來了人均使用權(quán)益訂單量、會(huì)員中心訪問率等數(shù)據(jù)的提升。

結(jié)語

通過系統(tǒng)化的設(shè)計(jì)與持續(xù)迭代，會(huì)員權(quán)益體系能夠深度釋放用戶價(jià)值，推動(dòng)品牌的長期可持續(xù)增長。在這個(gè)過程中，我們需要確保用戶在全渠道觸點(diǎn)中獲得連貫一致的體驗(yàn)，從而建立穩(wěn)固的品牌信任，降低用戶的學(xué)習(xí)與決策成本。同時(shí)，我們需要強(qiáng)化會(huì)員的價(jià)值感知，通過具象化的權(quán)益呈現(xiàn)和情感化的設(shè)計(jì)表達(dá)，讓用戶切實(shí)感受到專屬特權(quán)與歸屬感，最終打造出更具黏性的用戶體驗(yàn)閉環(huán)。

轉(zhuǎn)載：優(yōu)設(shè)

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.payeee.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

在接觸和學(xué)習(xí) UI 設(shè)計(jì)的時(shí)候，我們都必須面對(duì)國內(nèi)外 UI 設(shè)計(jì)風(fēng)格差異巨大的問題。比如最近 618，相信大家沒少被國產(chǎn)應(yīng)用的廣告“親切的”問候。

一方面是尋找設(shè)計(jì)靈感時(shí)要做區(qū)分，另一方面則是我們學(xué)習(xí) UI 時(shí)看的書籍，學(xué)習(xí)的理論、規(guī)范，都是由西方國家產(chǎn)出的，而國內(nèi)設(shè)計(jì)的方向卻和它們背道而馳，用一個(gè)詞來形容現(xiàn)狀，那就是 —— 割裂。

所以在初學(xué)階段，理論學(xué)的越多，受到的沖擊也就越大，疑問也就越多。所以我們今天的目標(biāo)，就是來幫大家解答這個(gè)疑問。

一、設(shè)計(jì)差異的根源分析

當(dāng)我們研究國內(nèi)外 UI 設(shè)計(jì)的差異時(shí)，樣式上的差異只是表象，它們是由更深層次的因素所激發(fā)，所以我們首先要深究這些問題的根源。

根據(jù)過去十幾年的 UI 研究經(jīng)驗(yàn)，我總結(jié)的設(shè)計(jì)差異包含下面這些因素：

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

1. 盈利模式的差異

國外產(chǎn)品相對(duì)國內(nèi)的盈利模式相對(duì)簡(jiǎn)單、健康，排除掉大型平臺(tái)和其它服務(wù)配套應(yīng)用外（比如會(huì)員、硬件的配套），基本就是買斷、訂閱、廣告這三個(gè)途徑。

比如我們熟悉的 Figma、Canva、Notion 等，都是訂閱制服務(wù)，在產(chǎn)品具備足夠競(jìng)爭(zhēng)力的條件下發(fā)展出海量的付費(fèi)用戶，獲得巨大的收益和估值（團(tuán)隊(duì)只有一兩百人時(shí)估值過百億刀）。既然做好產(chǎn)品就能盈利，那這些產(chǎn)品的目標(biāo)自然是打造更好的產(chǎn)品和提供更好的服務(wù)或體驗(yàn)來獲得收益。

而國內(nèi)市場(chǎng)我們都知道，用戶付費(fèi)的意愿是非常非常低的，這就導(dǎo)致很多產(chǎn)品即使做的還不錯(cuò)也看不到盈利希望，尤其是大廠產(chǎn)品，比如迅雷，百度網(wǎng)盤，網(wǎng)易云等等。

靠基礎(chǔ)付費(fèi)模式做不出讓人滿意的營收，產(chǎn)品團(tuán)隊(duì)自然要使出渾身解數(shù)來找到盈利點(diǎn)，不管是增加一些奇怪的功能，還是制造各種營銷活動(dòng)。而這些嘗試想要獲得持續(xù)的盈利是非常困難的，所以就得一直想，一直嘗試，一直投放。

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

這里還要澄清一點(diǎn)，有很多優(yōu)秀的工具產(chǎn)品不是國內(nèi)做不出來，是做出來也很難盈利，所以有能力的團(tuán)隊(duì)和開發(fā)者是不會(huì)輕易往火坑里跳的。

2. 人工成本的差異

第二點(diǎn)就是國內(nèi)外人工成本上的巨大差異，發(fā)達(dá)國家的人工成本非常高昂，不只局限在產(chǎn)品開發(fā)團(tuán)隊(duì)的成本，還包括底層運(yùn)營、客服、銷售、業(yè)務(wù)員、快遞員等等。

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

加上西方國家對(duì)雇傭關(guān)系的保護(hù)，招人容易，裁員可就沒有那么簡(jiǎn)單，所以多數(shù)產(chǎn)品團(tuán)隊(duì)對(duì)擴(kuò)張都持非常謹(jǐn)慎的態(tài)度。人數(shù)少，又不能輕易搞 996，就大大限制了產(chǎn)品作妖的范圍，這就直接導(dǎo)致他們沒有人力做一大堆次要功能的迭代以及運(yùn)營活動(dòng)，設(shè)計(jì)需求自然也會(huì)低很多。

3. 用戶習(xí)慣的差異

最后一點(diǎn)，就是用戶習(xí)慣的差異。除了前面說的付費(fèi)意愿低以外，還有很多其它因素。其中在我看來影響最大的因素，就是國內(nèi)用戶對(duì)互聯(lián)網(wǎng)的依賴是遠(yuǎn)高于國外用戶的。

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

并且互聯(lián)網(wǎng)產(chǎn)品已經(jīng)成為我們購物、娛樂的重要載體，大量的決策、交易、娛樂是在上面進(jìn)行的。既然用戶習(xí)慣和粘性都成型了，離不開這些產(chǎn)品了，那么“適當(dāng)損害”一下用戶體驗(yàn)也不是不可以。尤其是大廠各類離奇的功能和運(yùn)營活動(dòng)可以輪番轟炸用戶，同時(shí)把用戶對(duì)這類負(fù)面操作的耐受度都拉高了。

既然用戶都適應(yīng)了，那么為什么還要“裝清高”，做個(gè)簡(jiǎn)約的、有原則的、有尊嚴(yán)的產(chǎn)品？當(dāng)然是加入到運(yùn)營的狂歡里和其它產(chǎn)品一起壓榨用戶的注意力，像孔雀開屏一樣，在最雞肋的器官上比劃……

以上三點(diǎn)，就是造成國內(nèi)外設(shè)計(jì)差異的根本因素。最早國內(nèi)產(chǎn)品的設(shè)計(jì)是和國外看齊的，但隨著市場(chǎng)的反饋和驗(yàn)證，我們最終走出了自己的道路。這是商業(yè)的選擇，而不是簡(jiǎn)單歸因給審美、民族、文化、消費(fèi)力的限制。

不管創(chuàng)業(yè)者抱著什么樣的想法，進(jìn)入這個(gè)牌桌以后，最終都會(huì)被市場(chǎng)調(diào)教成相同的模樣。

作為 UI 設(shè)計(jì)師來說，也不要認(rèn)為這是錯(cuò)誤的發(fā)展方向，因?yàn)檫@種模式大大增加了 UI 設(shè)計(jì)的需求量，間接提供了更多的飯碗。如果產(chǎn)品都按歐美的模式發(fā)展和設(shè)計(jì)，那對(duì)于國內(nèi) UI 設(shè)計(jì)行業(yè)來說真正的天塌了，設(shè)計(jì)崗位會(huì)銳減 8 成以上，而這是 AI 設(shè)計(jì)根本實(shí)現(xiàn)不了的破壞力。

二、國內(nèi)外 UI 的具體差異

有了內(nèi)因，下面再對(duì)國內(nèi)外 UI 設(shè)計(jì)的具體差異做對(duì)應(yīng)的拆解，幫助大家更好理解國內(nèi)市場(chǎng)的設(shè)計(jì)特征。

1. 中英文字形排版差異

第一個(gè)差異，就是中英文的字體形態(tài)差異。中文文字是方塊化等寬的，而英文字母則是大小長短不一，詞組長度更長，節(jié)奏感更強(qiáng)。所以英文設(shè)計(jì)中，往往會(huì)將字體作為一部分融入到排版中，豐富視覺觀感。

而中文設(shè)計(jì)中文字的節(jié)奏感較弱，文本的主要作用基本就是傳遞信息，所以只用中文排版很難出現(xiàn)英文的相同效果，就會(huì)促使設(shè)計(jì)師添加更多的內(nèi)容，來豐富界面的效果。

2. 運(yùn)營需求的平面視覺

第二個(gè)差異，就是運(yùn)營設(shè)計(jì)上的差異。歐美產(chǎn)品中運(yùn)營活動(dòng)不是沒有，但是數(shù)量少，而且往往在設(shè)計(jì)上也做的很隨意，說好聽點(diǎn)叫簡(jiǎn)約，說難聽點(diǎn)就是敷衍。

而國內(nèi)運(yùn)營活動(dòng)數(shù)量多，且投入精力更大，運(yùn)營的設(shè)計(jì)是沒有限制的，可以用上廣告平面的所有視覺手段，不管是插畫還是 3D、AI、擬物、攝影。大團(tuán)隊(duì)往往會(huì)配置平面設(shè)計(jì)師完成這部分工作，小公司就要 UI 設(shè)計(jì)師自己負(fù)責(zé)，所以沒有固定的設(shè)計(jì)要求，水平之間差距也巨大。

運(yùn)營設(shè)計(jì)的差異，源自國內(nèi)廣告設(shè)計(jì)方向的特色，從早年追求隱喻、創(chuàng)意的合成設(shè)計(jì)，到現(xiàn)在追求視覺沖擊力的大標(biāo)題、大色塊設(shè)計(jì)。

而國內(nèi)運(yùn)營設(shè)計(jì)在今天絕不只出現(xiàn)在一般廣告位中，會(huì)見縫插針到所有元素中，比如頁面頂部、二樓、膠囊、圖標(biāo)區(qū)、瓷片區(qū)、底部導(dǎo)航等等。

3. 字段和信息數(shù)量差異

國內(nèi)有大量產(chǎn)品的功能和服務(wù)都更完善，這也就催生了更多的信息量和交互需求，單一頁面、組件的信息量、交互、狀態(tài)就遠(yuǎn)遠(yuǎn)比國外產(chǎn)品多。

這就導(dǎo)致我們?cè)谠O(shè)計(jì)時(shí)要考慮這些復(fù)雜的情況，需要設(shè)計(jì)師做具體的業(yè)務(wù)分析整理字段，還需要做大量的稿件做測(cè)試和評(píng)審。

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

所以國內(nèi)團(tuán)隊(duì)雖然會(huì)強(qiáng)調(diào)體驗(yàn)，但實(shí)際設(shè)計(jì)過程中必然業(yè)務(wù)優(yōu)先，體驗(yàn)更多是圍繞業(yè)務(wù)的優(yōu)化和改進(jìn)。所以作品集表現(xiàn)上業(yè)務(wù)的權(quán)重是非常高的，絕對(duì)不是學(xué)習(xí)國外的項(xiàng)目包裝邏輯堆砌體驗(yàn)和用研內(nèi)容。

4. 品牌視覺特征的差異

在國內(nèi)激烈的競(jìng)爭(zhēng)環(huán)境中，建立品牌化的視覺感知就是每個(gè)產(chǎn)品都要認(rèn)真對(duì)待的事情。但本身產(chǎn)品內(nèi)容、信息量就已經(jīng)很大了，要實(shí)現(xiàn)品牌化的視覺輸出就沒辦法走傳統(tǒng)品牌的“意識(shí)流”路線，使用簡(jiǎn)單的配色和大量的留白。

同時(shí)，UI 的組件樣式又高度統(tǒng)一，使用常規(guī)樣式完成的設(shè)計(jì)是很難塑造品牌化視覺的。所以最終的解決方案，就是給組件增加更多樣式細(xì)節(jié)，通過局部的創(chuàng)意來塑造視覺上的差異，同時(shí)再和其它應(yīng)用做出區(qū)分。

于是，主流產(chǎn)品就陷入這種樣式上的競(jìng)賽，非常高頻的更新組件和視覺的設(shè)計(jì)，希望做出和別人不同的設(shè)計(jì)同時(shí)又有自己的特點(diǎn)。

這種現(xiàn)狀不能說是消極的，因?yàn)樗_實(shí)推動(dòng)了整個(gè) UI 行業(yè)視覺的發(fā)展，但對(duì) UI 設(shè)計(jì)師的視覺素養(yǎng)要求也就更高。所以今天國內(nèi)的中高級(jí) UI 設(shè)計(jì)師，轉(zhuǎn)入國外 UI 市場(chǎng)以后都能實(shí)現(xiàn)降維打擊，就是因?yàn)槭袌?chǎng)的要求對(duì)自身的磨練遠(yuǎn)比外部市場(chǎng)高。

基于以上的差異，可以說在國內(nèi)做 UI 和和在國外做 UI 是兩種難度，要學(xué)習(xí)和訓(xùn)練的方式也完全不同。作為 UI 設(shè)計(jì)師要懂得理解背后的成因，并不會(huì)無腦迷信國外的設(shè)計(jì)要求和標(biāo)準(zhǔn)，才可以幫助我們更好融入真實(shí)的工作。

結(jié)尾

結(jié)尾再說點(diǎn)有趣的問題，從我們之前學(xué)員到國外工作的反饋來看，雖然國內(nèi)設(shè)計(jì)容易被嫌棄，但是從設(shè)計(jì)質(zhì)量和輸出上已經(jīng)遠(yuǎn)超歐美的平均水平。

而他們的設(shè)計(jì)師多數(shù)還在劃水搞一些無關(guān)痛癢的體驗(yàn)和用研時(shí)，我們?cè)诮鉀Q更復(fù)雜的商業(yè)問題，如果有機(jī)會(huì)，建議你們也可以去卷國外的 UI，會(huì)有你們想象不到的優(yōu)勢(shì)。

轉(zhuǎn)載：優(yōu)設(shè)

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.payeee.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

在互聯(lián)網(wǎng)產(chǎn)品日趨成熟的今天，你會(huì)發(fā)現(xiàn)所有的App越來越像，似乎是同一套模版設(shè)計(jì)出來的產(chǎn)品；而這種普適化的設(shè)計(jì)會(huì)導(dǎo)致同質(zhì)化嚴(yán)重，使得設(shè)計(jì)不精致，產(chǎn)品沒有氣質(zhì)和品牌感。

一個(gè)App設(shè)計(jì)是否精致，是否富有設(shè)計(jì)感，在于它的細(xì)節(jié)，這就意味著我們?cè)谶M(jìn)行設(shè)計(jì)的時(shí)候，要從細(xì)微之處著手，從多方面去鉆研如何創(chuàng)造出打動(dòng)人心的UI設(shè)計(jì)。

蘭亭妙微UI設(shè)計(jì)公司，總結(jié)了12個(gè)簡(jiǎn)單直觀的提升設(shè)計(jì)感的小細(xì)節(jié)，一起來學(xué)習(xí)。

一、使用顏色深淺構(gòu)建層次結(jié)構(gòu)

在對(duì)UI 文本進(jìn)行樣式控制的時(shí)候，最常見的錯(cuò)誤莫過于過度依賴字體大小差異來營造對(duì)比；單純使用字體大小對(duì)比，所營造的對(duì)比并不夠，嘗試結(jié)合色彩和字重來營造更好的對(duì)比效果。

每種顏色都有一個(gè)視覺權(quán)重，這有助于在內(nèi)容中建立層次結(jié)構(gòu)；通過使用顏色的深淺，為元素賦予不同的重要性。

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

• 主要內(nèi)容使用深灰色（諸如標(biāo)題，但是不要用純黑）；
• 次要內(nèi)容使用灰色（比如商品介紹）；
• 輔助性內(nèi)容采用淺灰色（比如發(fā)布日期）；

類似的，在UI設(shè)計(jì)的時(shí)候，通常兩種不同的字重足以營造出優(yōu)秀的層次感：

• 大多數(shù)的文本采用正常的字重（400到500，具體取決于字體）；
• 對(duì)于需要強(qiáng)調(diào)的文字采用較重的字重（600到700，具體取決于字體）；

▲主標(biāo)題字重為600，其他標(biāo)綠點(diǎn)的文字字重都為400

應(yīng)當(dāng)盡量不要讓正文部分字重低于400，因?yàn)檫@一部分字體本身尺寸已經(jīng)較小，低于400會(huì)使得可讀性不佳。

如果你依然需要降低字重，那么不妨讓字體色彩更淺一點(diǎn)，或者替換成其他識(shí)別度較強(qiáng)、字重相對(duì)較小的字體。

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

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

但是在彩色背景下，想要降低和背景色之間的對(duì)比，通常有兩種方法：

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

▲左圖設(shè)計(jì)師職位信息為白色文字降低不透明度，右圖為和背景同色相高明度的顏色

其次當(dāng)涉及長篇內(nèi)容時(shí)，大面積的深色粗體字會(huì)給人一種沉重感，而且很跳躍；通過選擇類似深灰色（#4F4F4F）這樣的顏色可以很容易地解決這個(gè)問題，使文字更容易被識(shí)別。

二、統(tǒng)一色調(diào)

選擇一種基礎(chǔ)色，再調(diào)整色調(diào)和顏色深淺來增加均衡；設(shè)計(jì)時(shí)避免用過多的顏色。如果項(xiàng)目允許，只需使用固定的色板，通過調(diào)整基礎(chǔ)色的飽和度和明度，利用這種簡(jiǎn)單的方式為設(shè)計(jì)增加一致性。

三、干凈的陰影

陰影是UI設(shè)計(jì)中最常見的視覺表現(xiàn)手法，它可以增加元素的深度，使其從背景中脫穎而出，引起用戶的注意力，同時(shí)也能增強(qiáng)畫面的視覺層次感。

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

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

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

在UI設(shè)計(jì)中，這種手法不宜過多使用，否則呈現(xiàn)出的各種色彩搭配會(huì)讓人眼花繚亂。

四、個(gè)性的圖標(biāo)設(shè)計(jì)

合格的設(shè)計(jì)師能夠繪制風(fēng)格統(tǒng)一的圖標(biāo)，而優(yōu)秀的設(shè)計(jì)師能夠創(chuàng)造風(fēng)格獨(dú)特的圖標(biāo)。

我們能否在追求大小一致，圓角一致，線寬一致和配色一致的同時(shí)，為它的視覺表現(xiàn)力加入更多的創(chuàng)意呢？例如下面這組圖標(biāo)設(shè)計(jì)，無論是在圖形上的創(chuàng)新，還是顏色搭配上都呈現(xiàn)出無與倫比的創(chuàng)意。

標(biāo)簽欄作為一個(gè)App的全局導(dǎo)航起著至關(guān)重要的作用，它的設(shè)計(jì)影響著整個(gè)產(chǎn)品的視覺風(fēng)格。

通常，大多數(shù)App都是使用iOS規(guī)范的設(shè)計(jì)樣式（默認(rèn)灰色，選中填充品牌色），這樣的設(shè)計(jì)太普通，太常見了；要想讓標(biāo)簽欄圖標(biāo)設(shè)計(jì)精致和富有個(gè)性，可以豐富每一個(gè)選中態(tài)圖標(biāo)的視覺表現(xiàn)，例如給圖標(biāo)加上背景和表情，即顯得生動(dòng)有趣，又增加了用戶的好感，給人留下深刻的印象。

3D立體圖標(biāo)設(shè)計(jì)是近幾年來的流行趨勢(shì)，看上去十分精致、華麗，但是看久了會(huì)讓人產(chǎn)生輕微的視覺疲勞，同時(shí)因其復(fù)雜的結(jié)構(gòu)會(huì)增加用戶的認(rèn)知成本，一般在外賣美食類應(yīng)用中比較常見。

五、Tab的設(shè)計(jì)感

Tab是App設(shè)計(jì)中最常見的控件之一，它源自Material Design的設(shè)計(jì)規(guī)范；現(xiàn)在很多iOS產(chǎn)品當(dāng)中也開始使用這種導(dǎo)航欄樣式來進(jìn)行設(shè)計(jì)，而原本屬于iOS規(guī)范當(dāng)中的分段選擇器變得不那么常見了。

在視覺表現(xiàn)形式上，Tab和標(biāo)簽欄同樣也分為選中態(tài)和未選態(tài)，它的設(shè)計(jì)較為簡(jiǎn)單，通常是使用一組文字標(biāo)簽，通過顏色或在標(biāo)簽下加上小長條來區(qū)分兩者的狀態(tài)；因?yàn)樗?jiǎn)單，卻越難設(shè)計(jì)出彩，要發(fā)揮極大的設(shè)計(jì)想象力，跳脫出設(shè)計(jì)規(guī)范的限制，才能找到完美的方案。

例如蝦米音樂的Tab選中態(tài)是一段音頻波線，再配合文字的大小對(duì)比，一個(gè)富有設(shè)計(jì)感又符合產(chǎn)品特征的Tabs就被創(chuàng)造出來了。

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

從品牌形象中提取具有獨(dú)特氣質(zhì)的視覺富豪作為Tab選中態(tài)的小長條，這樣就建立起視覺上的聯(lián)系，讓用戶產(chǎn)生由內(nèi)而外的一致感受；例如馬蜂窩品牌形象中的微笑符號(hào)和飛豬旅行品牌形象中的豬頭都被延伸到Tab的設(shè)計(jì)上，既讓界面視覺獨(dú)一無二，又進(jìn)一步強(qiáng)化了用戶對(duì)品牌形象的認(rèn)知。

六、無框設(shè)計(jì) 去繁從簡(jiǎn)

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

我們可以通過以下幾個(gè)方法來劃分元素的視覺層次，讓畫面變得干凈，整齊：

1）使用陰影

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

2）使用不同的背景色來區(qū)分

通常，相鄰的元素背景只需要有微妙的差別就能夠讓人對(duì)他們進(jìn)行區(qū)分；所以，你所需要做的就是在不同的區(qū)塊采用不同的背景色，并且嘗試刪除分割線，因?yàn)槟愀静恍枰?/p>

3）增加額外的留白

創(chuàng)建元素之間的分離效果，并不一定要通過線框來表現(xiàn)，只要增加留白，讓它們分隔開就行了，通過留白和間距來實(shí)現(xiàn)元素分組是UI設(shè)計(jì)中的常用手法。

七、統(tǒng)一設(shè)計(jì)元素

在App中的每一個(gè)界面都有許多元素，那些同類的元素應(yīng)保持統(tǒng)一的設(shè)計(jì)樣式。

通常個(gè)人中心的標(biāo)簽欄圖標(biāo)是一個(gè)人形剪影，它代表著用戶，因此可以在展示用戶頭像和用戶形象的界面中延續(xù)使用。

如果圖形擁有獨(dú)特的外觀，如橢圓矩形，也可以作為視覺符號(hào)的一種，延續(xù)到其他界面中，成為圖形或按鈕的外觀；這樣，整個(gè)界面就被統(tǒng)一的設(shè)計(jì)元素聯(lián)系起來了，給用戶始終如一的一致感。

八、符合產(chǎn)品氣質(zhì)的字體

選擇符合產(chǎn)品氣質(zhì)的字體，可以與產(chǎn)品的定位相吻合，傳遞給用戶正確的情感意識(shí)。

雖然默認(rèn)字體可以滿足大多數(shù)App 的設(shè)計(jì)需求，但會(huì)出現(xiàn)一個(gè)問題就是——系統(tǒng)字體的普適性并沒有什么特色，在一些特定的情境下就顯得收效甚微；例如在運(yùn)動(dòng)類App中更適合粗壯的斜體來傳遞力量、爆發(fā)力、速度的感覺，換成系統(tǒng)字體后，整體感覺在氣勢(shì)上就變?nèi)趿撕芏唷?/p>

九、第三方圖標(biāo)風(fēng)格統(tǒng)一

大多數(shù)App都支持三方登陸，他可以減輕用戶注冊(cè)的時(shí)間成本。

通常是在注冊(cè)登陸頁的底部展示第三方圖標(biāo)入口，這也是設(shè)計(jì)師最常忽略的內(nèi)容，往往是直接將第三方圖標(biāo)調(diào)整一致大小和擺放整齊位置，沒有針對(duì)它們?cè)僭O(shè)計(jì)；一個(gè)設(shè)計(jì)精致的App不應(yīng)漏過任何的細(xì)節(jié)，我們可以以自家App的圖標(biāo)風(fēng)格為依據(jù)，對(duì)第三方圖標(biāo)進(jìn)行優(yōu)化設(shè)計(jì)。

十、圖片中尋找色彩

App中優(yōu)美的圖文設(shè)計(jì)，能帶給用戶如沐春風(fēng)的視覺享受，它非常重要。我們經(jīng)?？吹轿淖织B加在圖片背景上的設(shè)計(jì)樣式；為了減少復(fù)雜圖片背景對(duì)文字的干擾，通常的做法是疊加半透明度的黑色蒙版，讓白色文字清晰可見，但這不是最優(yōu)的辦法。

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

十一、提高圖片質(zhì)量

圖片的質(zhì)量影響著整個(gè)App的格調(diào)和用戶的情緒，高品質(zhì)的圖片給人愉悅的視覺享受，產(chǎn)生美好的聯(lián)想；而低品質(zhì)的圖片會(huì)瞬間拉低App的質(zhì)感。

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

十二、卡片式設(shè)計(jì)

現(xiàn)在的UI界面設(shè)計(jì)中，卡片式設(shè)計(jì)已經(jīng)是一種非常常見的設(shè)計(jì)形式，它有利于信息分層和整合，劃分出更加清晰的組織結(jié)構(gòu)，實(shí)現(xiàn)復(fù)雜內(nèi)容的簡(jiǎn)化處理，提高空間利用率；同時(shí)卡片式設(shè)計(jì)通常很依賴視覺元素，很強(qiáng)的視覺元素正是卡片式設(shè)計(jì)的一種優(yōu)勢(shì)，也是提升設(shè)計(jì)品質(zhì)感的良方。

轉(zhuǎn)載：人人都是產(chǎn)品經(jīng)理

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.payeee.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

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

01 精準(zhǔn)錨定：明確情感與場(chǎng)景的設(shè)計(jì)方向

項(xiàng)目首先基于人口特征、營銷資源與業(yè)績(jī)需求，精準(zhǔn)圈定長沙、成都、西安、無錫、南昌五大目標(biāo)城市。這些城市的共性在于春節(jié)/中秋返鄉(xiāng)率超80%，鄉(xiāng)土情結(jié)與團(tuán)圓氛圍尤為濃郁。

執(zhí)行層面：項(xiàng)目聚焦6大城市的24個(gè)核心商圈，選擇電梯內(nèi)、戶外大屏、公交站亭三大高頻觸達(dá)渠道。

主視覺采用“品牌區(qū)+創(chuàng)意區(qū)”雙分區(qū)布局：左側(cè)傳遞“好崗離家近”的核心主張，右側(cè)則分別針對(duì)B端企業(yè)（展示招聘實(shí)力）與C端求職者（突出崗位優(yōu)勢(shì)），引導(dǎo)“求職者投遞-商家入駐”的雙向轉(zhuǎn)化。

02 AI賦能：效率與創(chuàng)意的雙重突破

AI設(shè)計(jì)的核心價(jià)值，在于讓“情感共鳴”與“高效落地”并行不悖。本次項(xiàng)目中，AI技術(shù)貫穿創(chuàng)意生成、視覺優(yōu)化全流程，既精準(zhǔn)傳遞“團(tuán)圓+留鄉(xiāng)”的情感內(nèi)核，又破解了多城市定制、短周期交付的效率難題，實(shí)現(xiàn)雙重突破。

設(shè)計(jì)提案方向：

1. 情感+場(chǎng)景化共鳴：讓設(shè)計(jì)喚醒本土情結(jié)

設(shè)計(jì)緊扣“中秋團(tuán)圓”與“留鄉(xiāng)就業(yè)”的雙重訴求，以主題文案將求職需求與家庭情感深度綁定，精準(zhǔn)觸動(dòng)目標(biāo)人群的“本土情結(jié)”。

創(chuàng)意構(gòu)思沿兩個(gè)方向展開：

「中秋+商圈實(shí)景」方向提案：

快速建立“本地招聘”的直觀認(rèn)知，通過融合城市地標(biāo)與品牌色，結(jié)合 “中秋團(tuán)圓” 節(jié)點(diǎn)，延續(xù) “好崗離家近” 的核心訴求，同時(shí)針對(duì)不同城市定制化文案（如西安的“照的見你的未來”、成都的“崗位和火鍋一樣沸騰”），既傳遞就業(yè)價(jià)值，又契合城市氣質(zhì)，激活留鄉(xiāng)就業(yè)的情感需求。，讓城市印記成為情感紐帶。

「中秋+地標(biāo)+職業(yè)人物」方向提案：

采用真實(shí)場(chǎng)景與AI生成插畫人物相結(jié)合的方式（如職場(chǎng)女性與城市景觀、特色元素的融合），畫面生動(dòng)富有層次，打破傳統(tǒng)招聘廣告的單調(diào)感。

最終方案：

2. AI提效：貫穿流程的設(shè)計(jì)革命

AI技術(shù)在此次項(xiàng)目中深度融入從創(chuàng)意到落地的全流程，實(shí)現(xiàn)“多快好省”的突破：

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

高效素材處理：

即夢(mèng)4.0：

字體設(shè)計(jì)：幾分鐘內(nèi)完成字體設(shè)計(jì)方案。

處理圖片：快速調(diào)整建筑角度、優(yōu)化圖片內(nèi)容，適配戶外大屏的傳播需求，大幅減少后期耗時(shí)。

即夢(mèng)3.0：

生成圖片：月亮的質(zhì)感與主文案的藝術(shù)化呈現(xiàn)，通過 AI 技術(shù)實(shí)現(xiàn)視覺吸引力，既保證節(jié)日氛圍的營造，又讓文案具備強(qiáng)記憶點(diǎn)。

卡通插畫：效果比4.0優(yōu)秀

在插畫生成上表現(xiàn)卓越，通過精準(zhǔn)指令，快速產(chǎn)出風(fēng)格統(tǒng)一的本地職業(yè)形象（如成都外賣小哥、西安青年群體），傳遞“本地工作的愉悅感”，效率遠(yuǎn)超人工。

關(guān)鍵詞參考：

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

“一個(gè)女孩面對(duì)手機(jī)視頻通話，身穿襯衫，坐姿端正，張口說話，居家環(huán)境，黑色單線描邊，扁平插畫，橙色系配色”

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

具體成效：

創(chuàng)意階段：半天生成4個(gè)完整方向，傳統(tǒng)方式需2-3天。

多城市適配：快速產(chǎn)出兼具系列感與地方特色的視覺方案。

修改優(yōu)化：響應(yīng)客戶反饋的速度提升70%以上。

3. 物料延展：保障多場(chǎng)景視覺統(tǒng)一

基于“一套核心視覺，多場(chǎng)景適配”原則，AI擴(kuò)圖、高清修復(fù)，協(xié)助快速延展生成線下物料、線上專場(chǎng)Banner、長圖海報(bào)等多尺寸物料，確保線上線下品牌形象統(tǒng)一，強(qiáng)化用戶認(rèn)知。

03 價(jià)值落地：三大邏輯驅(qū)動(dòng)品效合一

AI賦能的設(shè)計(jì)創(chuàng)新，本次設(shè)計(jì)通過情感、商業(yè)、品牌三大邏輯，實(shí)現(xiàn)“品效合一”核心目標(biāo)。讓設(shè)計(jì)不僅是視覺呈現(xiàn)，更實(shí)現(xiàn)了品牌價(jià)值與業(yè)務(wù)增長的雙重落地。

1.情感邏輯：激活本土情結(jié)，拉動(dòng)C端轉(zhuǎn)化。AI設(shè)計(jì)精準(zhǔn)觸達(dá)留鄉(xiāng)需求，讓“像鳥飛往自己的山”不再只是心理期許，而是有具體崗位支撐的現(xiàn)實(shí)可能。數(shù)據(jù)印證成效：長沙、成都、西安等地線上專場(chǎng)簡(jiǎn)歷投遞量增長40%，“本地崗位”搜索量上升62%，有效拉動(dòng)C端用戶參與度。

2.商業(yè)邏輯：精準(zhǔn)賦能B端，超額完成業(yè)績(jī)。對(duì)B端商家而言，精準(zhǔn)廣告投放是核心需求。通過“行業(yè)+地域”的定制化廣告設(shè)計(jì)，有效提升了商家投放意愿與合作轉(zhuǎn)化。

3.品牌邏輯：沉淀長期認(rèn)知資產(chǎn)。設(shè)計(jì)圍繞“貼近受眾、強(qiáng)化認(rèn)知、促進(jìn)轉(zhuǎn)化”原則，將“提供家鄉(xiāng)好工作”的營銷邏輯，拆解為“明月+地標(biāo)+文案+品牌信息”的直觀的視覺符號(hào)組合，降低用戶信息理解成本。通過品牌色、視覺等符號(hào)在多場(chǎng)景的重復(fù)曝光，持續(xù)強(qiáng)化“找本地好工作，就上58”的用戶心智，使品牌從工具平臺(tái)升級(jí)為“助力團(tuán)圓”的伙伴，構(gòu)筑獨(dú)特的品牌競(jìng)爭(zhēng)壁壘。

04 行業(yè)啟示：走向“策略+情感”的AI設(shè)計(jì)新范式

本次實(shí)踐為行業(yè)帶來核心啟示：AI是設(shè)計(jì)師的“超級(jí)助手”，其核心價(jià)值在于提升效率與精準(zhǔn)度。未來的品牌設(shè)計(jì)應(yīng)聚焦于 “策略為先，AI賦能，情感共鳴”的融合模式——以策略為導(dǎo)向，用AI提效，最終以情感打動(dòng)人心。

打動(dòng)人心的永遠(yuǎn)是對(duì)人性的洞察和情感的共鳴：

對(duì)招聘品牌推廣而言，這打破了“信息堆砌”的傳統(tǒng)廣告模式；對(duì)更廣的行業(yè)來說，則示范了“AI賦能設(shè)計(jì)，設(shè)計(jì)驅(qū)動(dòng)品效”的新路徑。技術(shù)終究是工具，而深度的策略思考與人文洞察，永遠(yuǎn)是設(shè)計(jì)師不可替代的核心價(jià)值。當(dāng)AI與品牌策略、情感共鳴深度結(jié)合，營銷才能實(shí)現(xiàn)真正的突破，為品牌創(chuàng)造可持續(xù)的長期價(jià)值。

05 寫在最后

58同城此次中秋品牌營銷項(xiàng)目，正是技術(shù)理性與創(chuàng)意感性完美融合的例證。用AI實(shí)現(xiàn)高效精準(zhǔn)的落地，用設(shè)計(jì)傳遞深刻的情感價(jià)值，最終成就了品牌聲量與業(yè)務(wù)增長的雙贏，也為行業(yè)提供了可復(fù)制的品效合一實(shí)踐范本。

轉(zhuǎn)載：人人都是產(chǎn)品經(jīng)理

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.payeee.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。