初學(xué)網(wǎng)頁設(shè)計，對設(shè)計規(guī)范有些迷茫，規(guī)范到底是怎樣的？

時間：2024-02-17 01:30:01 | 來源：網(wǎng)站運營

時間：2024-02-17 01:30:01 來源：網(wǎng)站運營

初學(xué)網(wǎng)頁設(shè)計，對設(shè)計規(guī)范有些迷茫，規(guī)范到底是怎樣的？：

近幾年設(shè)計系統(tǒng)越來越受到大家的關(guān)注，國內(nèi)有阿里集團的 Ant Design、Fusion Design，以及字節(jié)系的 Semi、Arco、騰訊的 TDesign；國外也有大家比較熟悉的 IBM Carbon Design、Salesforce Lightning Design，以及前段時間給大家介紹的 AWS CloudScape。

對于這些設(shè)計系統(tǒng)，大家時常會有一些不一樣的觀點。比如有的同學(xué)認(rèn)為 A 做得好，B 太過于簡單，全是底層能力沒啥用。

如何理解這些設(shè)計系統(tǒng)之間的差異，是我們學(xué)習(xí)過程中非常重要的一環(huán)。我們不能簡單的從內(nèi)容上去做比較，而是需要先從它們的定位出發(fā)。

我個人的觀點，是會將這些設(shè)計系統(tǒng)分為系統(tǒng)級→領(lǐng)域級→業(yè)務(wù)級三層，大家可以用下面這張圖看清楚它們的邏輯。

系統(tǒng)級：

當(dāng)下的數(shù)字產(chǎn)品大部分是基于操作系統(tǒng)和瀏覽器所構(gòu)建的，所以我們首先需要基于 OS 或瀏覽器級的設(shè)計系統(tǒng)開始工作。

這里最常見的是 Google 的 Material Design、Apple 的 Human Interface Guideline以及各種 Web 前端框架，比如 BootStrap。

配合硬件和軟件技術(shù)的發(fā)展，系統(tǒng)級的設(shè)計系統(tǒng)為我們提供豐富的交互形式以及設(shè)計指引。同時它們也對用戶的基礎(chǔ)認(rèn)知和使用習(xí)慣做出了定義和引導(dǎo)，確保了一個產(chǎn)品在基礎(chǔ)交互層面的體驗基準(zhǔn)線。

領(lǐng)域級：

業(yè)務(wù)級是整個設(shè)計系統(tǒng)層級中最上面一層，也是大家參與得最多的部分。它的定位很明確，就是基于行業(yè)的特性去給自己的業(yè)務(wù)構(gòu)建設(shè)計系統(tǒng)。IBM 的 Carbon Design、AWS 的 CloudScape Design 以及大家都在參與的都屬于這一類。

業(yè)務(wù)級的設(shè)計系統(tǒng)的目的是提供明確的約束和指引，能夠幫助業(yè)務(wù)快速的實現(xiàn)產(chǎn)品業(yè)務(wù)邏輯，避免不必要的浪費。同時也需要具備良好的業(yè)務(wù)抽象和擴展性，有非常好的運作機制，能夠提升整體業(yè)務(wù)生產(chǎn)鏈路的效率。

網(wǎng)絡(luò)上能找到的業(yè)務(wù)級設(shè)計系統(tǒng)很多，它們也是我們非常好的學(xué)習(xí)案例。正是因為它們面向的是解決業(yè)務(wù)問題，所以大家不能單純的看內(nèi)容，而是需要結(jié)合這個行業(yè)以及這個產(chǎn)品的特性、問題來進行分析。

很多人都覺得類似 IBM 的 Carbon Design 做的非常好，但雖然它是開源的設(shè)計系統(tǒng)，卻似乎很少看到使用的案例。其實這一類的設(shè)計系統(tǒng)大多都是在自己的業(yè)務(wù)中逐漸生長出來的，還是帶有比較強的業(yè)務(wù)屬性和品牌特性，真正在自己的業(yè)務(wù)中去使用未必合適。

這里我非常推薦大家去看一看 AWS 的 CloudScape，看看它是如何去做對設(shè)計的抽象和約束的。

從系統(tǒng)級設(shè)計系統(tǒng)到業(yè)務(wù)級的設(shè)計系統(tǒng)，其本質(zhì)就是一個從抽象到具象的過程，基于一些明確的共同認(rèn)知去建立業(yè)務(wù)中明確的設(shè)計約束，從而給產(chǎn)品設(shè)計研發(fā)提供準(zhǔn)確有效的指引。

以上內(nèi)容源于「設(shè)計有得聊」會員專欄內(nèi)容，加入會員了解更多關(guān)于設(shè)計系統(tǒng)、架構(gòu)型設(shè)計師的相關(guān)內(nèi)容，及已更新的 120 多篇專欄文章。