中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

在To B產(chǎn)品的激烈競爭中，用戶體驗和效率是企業(yè)成功的關(guān)鍵。本文分享了設(shè)計師與前端工程師在協(xié)作過程中遇到的挑戰(zhàn)，分享了他們?nèi)绾瓮ㄟ^設(shè)計工程化來破解產(chǎn)品體驗與效率的難題，供大家參考。

在當(dāng)今競爭激烈的 ToB 市場中，產(chǎn)品的用戶體驗變得至關(guān)重要。這不僅直接影響客戶的滿意度，還關(guān)系到產(chǎn)品的市場競爭力。然而，像釘釘這樣的航母級產(chǎn)品，由于復(fù)雜的客戶需求、多樣的業(yè)務(wù)模塊和快速的交付節(jié)奏，傳統(tǒng)的瀑布式產(chǎn)設(shè)研協(xié)作方式已經(jīng)越來越難以滿足當(dāng)下的要求。

為了在確保用戶體驗一致性和高品質(zhì)的同時，還能保持產(chǎn)品交付的高效率，我們面臨的挑戰(zhàn)非常巨大。因此，提升產(chǎn)品、設(shè)計與研發(fā)團(tuán)隊的協(xié)同效能，成為了關(guān)鍵課題。在這一背景下，設(shè)計工程化作為應(yīng)對這些挑戰(zhàn)的重要工具，為設(shè)計師和開發(fā)團(tuán)隊提供了全新的解決方案。

作為一名體驗設(shè)計師，我們協(xié)作最多的，除了產(chǎn)品經(jīng)理，就是前端工程師。設(shè)計師與前端的協(xié)作是否順暢，直接影響著研發(fā)效率和用戶體驗的質(zhì)量?；仡櫼淮纬Ｒ?guī)的迭代交付，設(shè)計師和前端的協(xié)作通常經(jīng)歷以下幾個階段：

1. 設(shè)計師基于產(chǎn)品需求和設(shè)計規(guī)范，從用戶視角進(jìn)行界面設(shè)計。
2. 前端工程師根據(jù)設(shè)計稿，從開發(fā)的角度進(jìn)行解構(gòu)，使用熟悉的框架和組件構(gòu)建可用的產(chǎn)品。
3. 最后，設(shè)計師通過“像素眼”確保產(chǎn)品的設(shè)計還原度。

問題往往出現(xiàn)在第三步。許多設(shè)計師抱怨：設(shè)計還原太難了！這一步幾乎占據(jù)了設(shè)計師70%以上的時間和精力，但最終效果仍無法達(dá)到100%還原。有些設(shè)計師會較真，導(dǎo)致前端覺得他們吹毛求疵，甚至拖慢業(yè)務(wù)迭代節(jié)奏；而一旦設(shè)計師選擇“躺平”，這些細(xì)微的瑕疵會在多輪迭代中累積，最終導(dǎo)致體驗細(xì)節(jié)的全面崩潰。

01. 問題出在哪里？

首先，筆者認(rèn)為設(shè)計師和前端工程師的思維方式存在根本差異。設(shè)計師關(guān)注的是用戶的心智模型，而工程師考慮的是技術(shù)的實現(xiàn)邏輯。在這種差異的基礎(chǔ)上追求100%的還原，等于在不同的底層邏輯之上，強求表現(xiàn)層的統(tǒng)一，有點像東施效顰。

其次，設(shè)計稿本身的信息量往往不足。設(shè)計師通常只能提供部分關(guān)鍵幀，無法完整表達(dá)其設(shè)計意圖，而實際的用戶體驗是連續(xù)且多維的。比如：

• 多設(shè)備：一個App的界面需要適應(yīng)不同操作系統(tǒng)、Pad端、折疊屏等設(shè)備。
• 多環(huán)境：需要兼顧正常、弱網(wǎng)和無網(wǎng)等不同網(wǎng)絡(luò)環(huán)境。
• 多語言：全球化產(chǎn)品在不同語言環(huán)境下的呈現(xiàn)各有差異。
• 多主題：如今幾乎所有產(chǎn)品都支持暗黑模式，甚至還有換膚功能。
• 個性化/無障礙：例如，用戶使用大字體或是盲人等特殊需求。

要求設(shè)計師提供全維度、全鏈路的設(shè)計稿，不僅讓設(shè)計師“原地爆炸”，也讓迭代效率無法保障。

再者，分離的工作環(huán)境（不同源）使得設(shè)計師和工程師的信息傳遞主要依賴溝通，除了切圖等極少部分，其他都靠人際理解。而人際溝通往往低效且容易出錯。

最后，設(shè)計規(guī)范本身的實際約束力常常不如預(yù)期。一方面，業(yè)務(wù)迭代速度過快，規(guī)范和組件庫的更新難以跟上；另一方面，規(guī)范制定者很難覆蓋所有業(yè)務(wù)場景。結(jié)果，規(guī)范往往不夠用，設(shè)計師只能“打散組件”，最終導(dǎo)致重復(fù)造輪子的現(xiàn)象依然普遍。

讓我們來看看，設(shè)計工程化是如何解決上述問題的

02. 設(shè)計工程化

設(shè)計工程化的核心定義是：讓設(shè)計稿不僅僅作為下游理解的效果圖，而是成為產(chǎn)品工程（代碼）的一部分。它的實現(xiàn)依賴設(shè)計師和前端工程師的共同努力。

對于設(shè)計師而言，要做到“工程化設(shè)計”，即在設(shè)計時應(yīng)用工程思維，構(gòu)建符合實際開發(fā)邏輯的設(shè)計稿。而對于前端工程師，則需要能夠直接從設(shè)計稿中提取代碼邏輯和信息，實現(xiàn)高精度的還原，接近設(shè)計到代碼的直接轉(zhuǎn)換（準(zhǔn)D2C）。

這種高度協(xié)作依賴于一個共同的基礎(chǔ)：“同源的設(shè)計系統(tǒng)和前端系統(tǒng)”。這意味著設(shè)計和開發(fā)之間使用相同的規(guī)則和組件，從而在設(shè)計和實現(xiàn)之間建立無縫銜接，提升效率和一致性。

作為一名設(shè)計師，重點聊聊上圖左邊的「工程化設(shè)計」。設(shè)計是開發(fā)的上游，只有設(shè)計師先做到了，整體的工程化才得以可能。

1. 工程化設(shè)計的關(guān)鍵

要具備工程思維，首先要跳出「繪畫思維」，避免只把設(shè)計稿本身當(dāng)作作品來對待，而應(yīng)將其視為真實產(chǎn)品的組成部分。在真實的產(chǎn)品中，場景、數(shù)據(jù)、交互都是動態(tài)變化的，唯一不變的是各元素之間的關(guān)系。

因此，工程化設(shè)計的核心是描述這些關(guān)系。

設(shè)計師主要關(guān)注兩類關(guān)系：空間關(guān)系和邏輯關(guān)系

1）空間關(guān)系

指的是界面中各個元素之間的位置、大小、對齊等布局方式。通過在設(shè)計軟件中使用自動布局和約束系統(tǒng)，設(shè)計師可以定義容器和子元素的排列方式。當(dāng)界面元素發(fā)生變化時，系統(tǒng)會自動調(diào)整這些元素的大小、間距和位置，從而確保設(shè)計的適應(yīng)性和一致性。

以下是一個氣泡引導(dǎo)的案例，描述了自動布局如何定義元素的布局邏輯。

氣泡引導(dǎo)案例，描述了自動布局如何定義元素的布局邏輯

2）邏輯關(guān)系

它描述了界面元素如何由基本的樣式token構(gòu)成，并且這些基本元素如何組合成更復(fù)雜的組件。通過層層調(diào)用，建立起一個原子設(shè)計模型。

在這種模型中，每個元素都不是獨立的，而是與其他元素有著明確的依賴關(guān)系。元素的樣式、行為或功能是從其基礎(chǔ)組件中繼承來的。建立這些邏輯依賴關(guān)系后，所有元素都成為「有源」的，而非固定不變的。這意味著底層的變化，如樣式或功能的調(diào)整，會自動影響到所有依賴于這些底層元素的上層組件，從而保持設(shè)計的一致性和可維護(hù)性。

原子設(shè)計模型的簡單示例

關(guān)于自動布局和組件系統(tǒng)如何使用，網(wǎng)上教程很多，在此不表。

當(dāng)設(shè)計師能夠準(zhǔn)確描述并構(gòu)建這些關(guān)系時，設(shè)計稿能夠成為產(chǎn)品工程的一部分，設(shè)計與開發(fā)的銜接將更加順暢。原因在于前端工程師使用類似的方式構(gòu)建頁面，即設(shè)計和前端實現(xiàn)的是“同源化”，意味著二者使用相同的原材料和邏輯進(jìn)行頁面構(gòu)建。

無論是 Figma 還是國內(nèi)的 Mastergo 等設(shè)計軟件，前端工程師都可以直接從這些工具中獲取可用的代碼，前提是設(shè)計稿的工程化做得足夠好。比如，對于使用自動布局的容器，前端工程師可以直接讀取到對應(yīng)的 CSS 代碼。

比如，在設(shè)計稿中使用的組件和組件屬性，前端工程師可以在開發(fā)中找到相同的組件及其 Props。這種一致性確保了設(shè)計與前端實現(xiàn)的無縫對接，提高了開發(fā)效率和一致性。

當(dāng)然，設(shè)計和前端的同源化依賴于設(shè)計系統(tǒng)和前端系統(tǒng)的有效對接，這是另一個重要的課題，以后有機會再聊。

2. 挑戰(zhàn)：是不是把前端的工作轉(zhuǎn)移到了設(shè)計師身上？

在推行工程化設(shè)計的過程中，確實會面臨一些挑戰(zhàn)。例如，工程化設(shè)計是否會增加設(shè)計師的壓力，或者是否會限制設(shè)計師的創(chuàng)作自由？

實際上，并不會。我們并不建議在設(shè)計完成后再進(jìn)行工程化改造，而是提倡從一開始就采用工程化手段進(jìn)行設(shè)計，這樣可以提高效率，避免后期的繁瑣調(diào)整。

如何通過工程化方法高效地構(gòu)建設(shè)計稿？通過在設(shè)計階段應(yīng)用工程化手段，可以讓設(shè)計師在設(shè)計時就考慮到工程實現(xiàn)的細(xì)節(jié)，從而實現(xiàn)更高效的工作流程。這樣，設(shè)計師可以專注于創(chuàng)意和用戶體驗的提升，而不是在后期做大量的調(diào)整和修正。

并且，養(yǎng)成工程化設(shè)計的習(xí)慣，對設(shè)計師本身有諸多好處：

a. 便于表達(dá)更多狀態(tài)

Before：要表達(dá)不同的狀態(tài)（如暗黑模式、多尺寸設(shè)備、多語言效果），往往需要重新繪制，過程繁瑣復(fù)雜

After：通過設(shè)計工程化描述關(guān)系，設(shè)計稿可以在不同狀態(tài)之間快速切換，節(jié)省大量時間和精力。

b. 簡化界面布局調(diào)整

Before：傳統(tǒng)布局方式下，元素的的尺寸、位置、對齊方式都是靜態(tài)的，當(dāng)界面內(nèi)容有增減時，所有相關(guān)元素都需要手動調(diào)整，非常低效。

After：使用自動布局后，元素的的尺寸、位置、對齊方式是受關(guān)系約束的，是動態(tài)的。當(dāng)界面內(nèi)容調(diào)整時，相關(guān)元素會自動調(diào)整，非常高效。

c. 減少犯錯的可能性

Before：元素的位置和對齊依賴設(shè)計師的像素眼，容易因不小心拖動而出現(xiàn)錯誤。

After：使用自動布局后，可以選擇規(guī)范中定義好的間距和邊距樣式，從而減少出錯的機會。

d. 快速響應(yīng)主題升級

Before：設(shè)計語言和組件的變更后，需要手動更新所有設(shè)計稿，工作量大且耗時。

After：使用原子設(shè)計模型建立組件關(guān)系，設(shè)計稿可以一鍵同步更新，效率顯著提高。

將工程化思維貫穿整個設(shè)計過程，這一習(xí)慣的轉(zhuǎn)變雖然困難，但至關(guān)重要，否則工程化設(shè)計只會成為額外的負(fù)擔(dān)。而這一問題并不局限于設(shè)計師，我們在產(chǎn)研團(tuán)隊中也曾經(jīng)有類似的問題。比如，把“打磨體驗”當(dāng)作額外的工作，常常將體驗細(xì)節(jié)的優(yōu)化留到研發(fā)甚至測試完成之后，認(rèn)為只要在最后花點時間精雕細(xì)琢，就能掩蓋過程中的問題，最終呈現(xiàn)出完美的體驗。仿佛用戶體驗就像裝修的最后刷漆階段，簡單修飾便可掩蓋瑕疵。

然而，在實際工作中，受限于時間壓力，這個過程往往匆忙應(yīng)付，效果大打折扣。

我并不否認(rèn)最后的打磨是必要的，但用戶體驗的主干必然是工程化和流程化的產(chǎn)物。尤其是在面對大體量、長周期、持續(xù)迭代的產(chǎn)品時，極致體驗應(yīng)當(dāng)是一項系統(tǒng)化的工程，而不僅僅是最后的打磨。

03. 總結(jié)一下

回到最初的問題，我們的目標(biāo)是通過工程化設(shè)計解決設(shè)計師和工程師在協(xié)作中面臨的一些挑戰(zhàn)。

具體來看，解決方案如下：

1. 設(shè)計師和工程師思維結(jié)構(gòu)的差異: 設(shè)計師在設(shè)計過程中引入工程師的思維方式，利用工程化手段構(gòu)建設(shè)計稿。這樣，設(shè)計稿不僅符合設(shè)計原則，還具備工程實現(xiàn)的可操作性。完成。

2. 設(shè)計稿本身信息量不足：工程化設(shè)計通過詳細(xì)描述空間關(guān)系和邏輯關(guān)系，提供了更多前端開發(fā)所需的信息。同時，設(shè)計師可以在工程化設(shè)計稿上更輕松地表達(dá)各種狀態(tài)（如多尺寸設(shè)備、多語言等），設(shè)計系統(tǒng)和前端系統(tǒng)的打通也讓可復(fù)用的信息在組件層面得到提供，從而保持一致性并避免重復(fù)定義。解決。

3. 分離的作業(yè)環(huán)境（不同源）：通過在設(shè)計中實現(xiàn)布局邏輯、樣式邏輯和組件邏輯的同源，設(shè)計師和前端工程師可以在統(tǒng)一的環(huán)境中工作，提升協(xié)作效率。感謝 Figma 帶來的革命。

4. 設(shè)計規(guī)范的約束作用：將設(shè)計規(guī)范升級為設(shè)計系統(tǒng)，通過系統(tǒng)化的工具提升團(tuán)隊效率和質(zhì)量。脫離設(shè)計系統(tǒng)的工作將變得低效，從而增強了設(shè)計規(guī)范的約束力。提升了設(shè)計規(guī)范的約束作用。

設(shè)計工程化在 ToB 行業(yè)的應(yīng)用，帶來了前所未有的效率提升和質(zhì)量保證。

通過有效地將設(shè)計與前端開發(fā)的邏輯和標(biāo)準(zhǔn)對接，我們不僅為內(nèi)部團(tuán)隊提供了更高效的工作流程，也為客戶帶來了更加一致和可靠的產(chǎn)品體驗。隨著市場需求的不斷變化和技術(shù)的不斷進(jìn)步，設(shè)計工程化將成為企業(yè)應(yīng)對復(fù)雜業(yè)務(wù)場景和快速迭代的關(guān)鍵手段。

未來，我們期待這種方法能夠持續(xù)推動行業(yè)的創(chuàng)新發(fā)展，為客戶創(chuàng)造更大的價值。