最近，以 chatgpt 為代表的 AI 被吵的特別火爆，類(lèi)似“AI 是新一次工業(yè)革命”“AI 改變世界”的言論甚囂塵上，但是，大部分人只是嘗鮮用了幾次后，就不再使用了，對(duì) chatgpt 的感覺(jué)是：很厲害，但沒(méi)什么用。

我前段時(shí)間也有在玩 AI，個(gè)人的感覺(jué)，chatgpt 確實(shí)極大地提高了我們的生產(chǎn)力，例如，使用 chatgpt 進(jìn)行翻譯，目前 chatgpt 的翻譯比絕大部分的機(jī)翻都要好；還有我們可以用 chatgpt 來(lái)幫我們理解某個(gè)概念，幫我們制定健身計(jì)劃，某個(gè)學(xué)科的學(xué)習(xí)步驟等等。

而后來(lái)我想到，針對(duì)于設(shè)計(jì)師的工作場(chǎng)景是否可以使用 ChatGPT 來(lái)幫我們寫(xiě)設(shè)計(jì)系統(tǒng)文檔，設(shè)計(jì)系統(tǒng)和 ChatGPT 兩個(gè)生產(chǎn)力工具結(jié)合在一起，是否會(huì)迸發(fā)出不一樣的火花？

在文章開(kāi)始之前，我先提出三個(gè)問(wèn)題：

為了高效閱讀，大家可以帶著這三個(gè)問(wèn)題閱讀文章，在閱讀結(jié)束后，大家可以回頭想一想，這幾個(gè)問(wèn)題是否已經(jīng)有答案了。

一、設(shè)計(jì)系統(tǒng)文檔

1. 設(shè)計(jì)系統(tǒng)

在介紹設(shè)計(jì)系統(tǒng)文檔之前，我們先聊一下什么是設(shè)計(jì)系統(tǒng)。在設(shè)計(jì)系統(tǒng)的范疇內(nèi)，很多同學(xué)總是「設(shè)計(jì)系統(tǒng)」「設(shè)計(jì)規(guī)范」「組件庫(kù)」「設(shè)計(jì)語(yǔ)言」等概念傻傻分不清楚。

我們這里把范圍從小到大分別解釋一下，幫助大家厘清這些概念。

設(shè)計(jì)語(yǔ)言：包括字體、色彩、間距、圓角、布局等在內(nèi)的基礎(chǔ)視覺(jué)元素。

組件庫(kù)：一個(gè)由 UI 組件按照一定的結(jié)構(gòu)和順序組織起來(lái)的集合。這些 UI 組件可以是按鈕、文本框、下拉菜單等等，它們被設(shè)計(jì)成可以重復(fù)使用的模塊，可以在不同的應(yīng)用程序或頁(yè)面中使用。

設(shè)計(jì)原則：即整個(gè)設(shè)計(jì)規(guī)范所要遵循的全局規(guī)則，為設(shè)計(jì)提供方向指導(dǎo)。例如 ant design 的設(shè)計(jì)原則就是：自然，確定性，意義感，生長(zhǎng)性。

設(shè)計(jì)規(guī)范：設(shè)計(jì)語(yǔ)言、組件庫(kù)、設(shè)計(jì)原則組合起來(lái)稱(chēng)為設(shè)計(jì)規(guī)范。

設(shè)計(jì)系統(tǒng)文檔：對(duì)設(shè)計(jì)規(guī)范的解釋說(shuō)明，具體而言，這個(gè)文檔詳細(xì)解釋了某樣?xùn)|西為什么是這樣的，以及何時(shí)和如何使用它。

設(shè)計(jì)系統(tǒng)：設(shè)計(jì)規(guī)范和設(shè)計(jì)系統(tǒng)文檔合稱(chēng)為設(shè)計(jì)系統(tǒng)。

而當(dāng)我們捋清楚這些概念后，就會(huì)發(fā)現(xiàn)長(zhǎng)期以來(lái)我們對(duì)于設(shè)計(jì)系統(tǒng)的理解存在誤解。很多時(shí)候，我們所做的所謂設(shè)計(jì)系統(tǒng)實(shí)際上只能稱(chēng)為組件庫(kù)。

關(guān)于設(shè)計(jì)規(guī)范，由于不屬于本文重點(diǎn)，且較為基礎(chǔ)，故不在此贅述。

2. 設(shè)計(jì)系統(tǒng)文檔的價(jià)值

傳遞信息：文檔可以將設(shè)計(jì)系統(tǒng)的信息傳遞給其他團(tuán)隊(duì)成員，包括開(kāi)發(fā)人員、測(cè)試人員和其他設(shè)計(jì)師。這有助于確保所有人都了解設(shè)計(jì)系統(tǒng)的目的和功能。

統(tǒng)一視覺(jué)風(fēng)格：文檔可以確保設(shè)計(jì)系統(tǒng)的所有元素都符合同一視覺(jué)風(fēng)格。這有助于確保設(shè)計(jì)系統(tǒng)的一致性和可識(shí)別性。

提高效率：文檔可以為其他團(tuán)隊(duì)成員提供有關(guān)如何使用設(shè)計(jì)系統(tǒng)的詳細(xì)信息。這有助于減少溝通成本并提高效率。

管理變更：文檔可以幫助管理設(shè)計(jì)系統(tǒng)的變更。這有助于確保所有變更都得到記錄和審查，從而減少錯(cuò)誤和不一致性。

促進(jìn)協(xié)作：文檔可以促進(jìn)設(shè)計(jì)師之間的協(xié)作。借助一些在線(xiàn)文檔工具，設(shè)計(jì)師可以共享設(shè)計(jì)系統(tǒng)的信息和想法，從而提高設(shè)計(jì)系統(tǒng)的質(zhì)量和效率。

3. 怎么寫(xiě)設(shè)計(jì)系統(tǒng)文檔

①需要考慮的方面

目標(biāo)受眾：設(shè)計(jì)系統(tǒng)文檔的受眾包括設(shè)計(jì)師、開(kāi)發(fā)人員、產(chǎn)品經(jīng)理等，需要考慮不同受眾的需求和背景，選擇合適的語(yǔ)言和表達(dá)方式。

文檔結(jié)構(gòu)：設(shè)計(jì)系統(tǒng)文檔應(yīng)該具備清晰的結(jié)構(gòu)，包括導(dǎo)言、設(shè)計(jì)原則、組件庫(kù)、樣式指南、交互指南、設(shè)計(jì)模板等內(nèi)容。

圖片和示例：設(shè)計(jì)系統(tǒng)文檔需要配合圖片和示例來(lái)解釋設(shè)計(jì)原則和組件使用方法，以便于讀者理解和使用。

規(guī)范和標(biāo)準(zhǔn)：設(shè)計(jì)系統(tǒng)文檔應(yīng)該包含規(guī)范和標(biāo)準(zhǔn)，以確保組件的一致性和可復(fù)用性。

更新和維護(hù)：設(shè)計(jì)系統(tǒng)文檔需要定期更新和維護(hù)，以反映最新的設(shè)計(jì)趨勢(shì)和技術(shù)發(fā)展，并保證文檔的準(zhǔn)確性和完整性。

②設(shè)計(jì)系統(tǒng)文檔的組成部分

正如前文所言，文檔是任何規(guī)模設(shè)計(jì)系統(tǒng)的必備工具。它使每個(gè)人都可以快速有效地做出一致的決策。如果我們可以提供詳細(xì)的文檔來(lái)支持設(shè)計(jì)系統(tǒng)的各個(gè)方面，就會(huì)發(fā)現(xiàn)使用者很快就可以上手這套設(shè)計(jì)系統(tǒng)。

但是，為了充分發(fā)揮文檔的作用，設(shè)計(jì)系統(tǒng)絕不能簡(jiǎn)單地描述樣式或組件規(guī)格。以下是我們可以添加到文檔中的內(nèi)容列表：

基礎(chǔ)介紹

即對(duì)這個(gè)組件的基礎(chǔ)介紹，介紹這個(gè)組件的定義與功能

詳細(xì)內(nèi)容

對(duì)組件的詳細(xì)介紹，包括組件的元素構(gòu)成與不同規(guī)格，例如不同尺寸等，也就是我們 figma 里組件的變體。

如何使用

即這個(gè)組件的使用場(chǎng)景，何時(shí)使用，何時(shí)不使用

相關(guān)內(nèi)容

這里可以放一些相關(guān)組件，或者其他關(guān)于這個(gè)組件的更多介紹

FAQ

FAQ 是"常見(jiàn)問(wèn)題解答"的縮寫(xiě)，放一些針對(duì)這個(gè)組件常見(jiàn)的問(wèn)題和解答，以便用戶(hù)能夠快速找到答案并解決問(wèn)題。

更新時(shí)間

更新時(shí)間的作用是記錄這個(gè)組件及其對(duì)應(yīng)的設(shè)計(jì)系統(tǒng)文檔的最新更新時(shí)間。

當(dāng)然，以上這些不是每個(gè)部分都有，可以根據(jù)實(shí)際情況進(jìn)行增刪。

③實(shí)例

當(dāng)然，從純粹的理論角度來(lái)看，很難想象設(shè)計(jì)系統(tǒng)文檔和設(shè)計(jì)規(guī)范是如何協(xié)同工作的，因?yàn)槿狈ι舷挛牡谋尘埃覀冞@里以顏色和按鈕為例，來(lái)分別演示一下設(shè)計(jì)語(yǔ)言和組件庫(kù)，這里先演示下在不用 ChatGPT 輔助的情況下如何寫(xiě)。

色彩

正如前文所述，設(shè)計(jì)系統(tǒng)的本質(zhì)是與其他設(shè)計(jì)師以及開(kāi)發(fā)人員更好地配合。在色彩的部分中，需要包括這些內(nèi)容：

基礎(chǔ)定義

色板

應(yīng)用指南-- token

使用注意事項(xiàng)

相關(guān)內(nèi)容

更新時(shí)間

接下來(lái)，我們看一下每個(gè)部分的內(nèi)容。

1）基礎(chǔ)定義

一個(gè)產(chǎn)品的顏色由主題色、中性色和輔助色構(gòu)成，而主題色、中性色和功能色會(huì)根據(jù)當(dāng)前界面的深淺模式而變動(dòng)。

主題色：它是在UI界面和組件中顯示最核心的顏色，展示界面的主要或重要的元素。

中性色：不用于強(qiáng)調(diào)功能也不用于強(qiáng)調(diào)功能性信息的顏色，例如背景色，明暗模式，文字，空間劃分等。常用色是黑白灰。

功能色：用于強(qiáng)調(diào)界面中的元素。輔助色僅作為強(qiáng)調(diào)和突出，應(yīng)慎重使用。輔助色也可以選擇主題色的深色和淺色變體來(lái)用于界面元素對(duì)比。如數(shù)據(jù)圖，插圖等。其中，最常用的輔助色是功能色。功能色有成功、出錯(cuò)、失敗、提醒、鏈接等。選取功能色時(shí)需符合用戶(hù)對(duì)顏色的基本認(rèn)知，例如看到綠色符號(hào)一般就知道操作成功，而并不需要讀完所有的文字。

色彩模型：在本系統(tǒng)中采用 HTC 色彩模型進(jìn)行設(shè)計(jì)，該模型更便于設(shè)計(jì)師在調(diào)整色彩時(shí)對(duì)于顏色有明確的心理預(yù)期，同時(shí)也方便團(tuán)隊(duì)間的溝通。

2）色板

3）使用指南

為了方便閱讀和使用，我們這里定義了色彩 token，分為全局 token，別名 token 以及組件 token，token 之間層層嵌套，方便調(diào)用和后期調(diào)整。

具體定義和嵌套形式如下圖：

4）注意事項(xiàng)

5）相關(guān)內(nèi)容

這里可以放一些相關(guān)的其他文檔的鏈接

HTC 模型簡(jiǎn)介及顏色推導(dǎo)（HTC 模型是谷歌提出的一個(gè)色彩模型，顏色的推導(dǎo)方式有很多種，例如透明疊色、等序差值等，筆者探索后使用 HTC 模型是目前的最優(yōu)方案，由于不是本文重點(diǎn)，故不在此贅述，大家感興趣的話(huà)，以后可以專(zhuān)門(mén)寫(xiě)一篇色彩指南））

6）更新時(shí)間

2023/05/27 05:14:13 AM

按鈕

1）基礎(chǔ)定義

按鈕可以讓用戶(hù)執(zhí)行某個(gè)操作或者跳轉(zhuǎn)到另一個(gè)頁(yè)面。它們有多種不同的樣式，以滿(mǎn)足不同的需求，并且可以用來(lái)引起用戶(hù)的注意，提示他們需要在哪里進(jìn)行操作以便在流程中繼續(xù)前進(jìn)。

解構(gòu)

2）屬性變體

尺寸：S，高度為 24px；M，高度為 32px；L，高度為 40px

類(lèi)型：主要按鈕；次要按鈕；文字按鈕

狀態(tài)：正常狀態(tài)；焦點(diǎn)狀態(tài)；懸停狀態(tài)；活動(dòng)狀態(tài)或按下?tīng)顟B(tài)；進(jìn)度/加載狀態(tài)；禁用狀態(tài)

3）使用指南

按鈕的樣式需要有可點(diǎn)擊的能供性；

用戶(hù)能從按鈕上清晰得預(yù)測(cè)出行為結(jié)果。

4）更新時(shí)間

2023/05/28 11:14:13 AM

在看了上面的兩個(gè)實(shí)例后，我們大概可以知道設(shè)計(jì)系統(tǒng)中的組件&樣式的設(shè)計(jì)系統(tǒng)文檔該如何寫(xiě)了

二、ChatGPT

盡管設(shè)計(jì)系統(tǒng)文檔對(duì)于設(shè)計(jì)人員和開(kāi)發(fā)人員之間的一致性和無(wú)縫協(xié)作至關(guān)重要，但是編寫(xiě)設(shè)計(jì)系統(tǒng)文檔是一件非常乏味的任務(wù)。然而現(xiàn)在有了 ChatGPT，可以非常輕松地輕松生成非常優(yōu)質(zhì)的設(shè)計(jì)系統(tǒng)文檔，進(jìn)而簡(jiǎn)化流程。

1. 編寫(xiě)有效的聊天提示

無(wú)論是問(wèn) ChatGPT 什么內(nèi)容，我們給出的提示的形式都是一致的，角色+內(nèi)容+補(bǔ)充提示。將這個(gè)模板代入到設(shè)計(jì)系統(tǒng)文檔中，就是這三個(gè)部分：

①賦予其設(shè)計(jì)師的角色

我們可以將 ChatGPT 設(shè)置成某種職業(yè)人士，通過(guò)這樣做，ChatGPT 給出的答案會(huì)更精準(zhǔn)。

我們可以用這樣的句式來(lái)發(fā)出指令：

假如你現(xiàn)在是一名 UI 設(shè)計(jì)師。

②敘述需要包含的內(nèi)容

這塊就需要我們?cè)谏衔目偨Y(jié)過(guò)的知識(shí)了，所有的設(shè)計(jì)系統(tǒng)文檔都必定包含且通用的內(nèi)容有，基礎(chǔ)介紹，詳細(xì)內(nèi)容，使用場(chǎng)景，相關(guān)內(nèi)容。

提示示例如下：

請(qǐng)為按鈕組件生成設(shè)計(jì)系統(tǒng)文檔。其中包括以下主題：基礎(chǔ)介紹，詳細(xì)內(nèi)容，使用場(chǎng)景，相關(guān)內(nèi)容。

③補(bǔ)充自己設(shè)計(jì)系統(tǒng)的特定信息

我們需要為 ChatGPT 提供一些我們?cè)O(shè)計(jì)系統(tǒng)的特定信息，以便生成適合我們的自定義文檔。

例如，按鈕的尺寸，顏色等。

下面是提示符的一個(gè)示例：

請(qǐng)注意：按鈕有三個(gè)尺寸，分別是 S(24px)，M(32px)，L(40px)

按鈕有四個(gè)狀態(tài)，分別是默認(rèn)，懸停，按下，禁用。

按鈕有兩種類(lèi)型，分別是主按鈕，次按鈕

以下是完整的提示示例：

假如你現(xiàn)在是一名 UI 設(shè)計(jì)師，請(qǐng)為按鈕組件生成設(shè)計(jì)系統(tǒng)文檔。其中包括以下主題：基礎(chǔ)介紹，詳細(xì)內(nèi)容，使用場(chǎng)景，相關(guān)內(nèi)容。請(qǐng)注意：按鈕有三個(gè)尺寸，分別是 S(24px)，M(32px)，L(40px) 按鈕有四個(gè)狀態(tài)，分別是默認(rèn)，懸停，按下，禁用。按鈕有兩種類(lèi)型，分別是主按鈕，次按鈕。

2. 按實(shí)際情況進(jìn)行微調(diào)

盡管 ChatGPT 可以快速生成文檔，但有時(shí)候它會(huì)寫(xiě)一些重復(fù)的車(chē)轱轆話(huà)或者生成不準(zhǔn)確的信息。所以，我們有必要對(duì)生成結(jié)果進(jìn)行檢查并調(diào)整。

作為一位用戶(hù)體驗(yàn)設(shè)計(jì)師，我越來(lái)越感受到設(shè)計(jì)系統(tǒng)對(duì)于提高用戶(hù)體驗(yàn)的重要性。最近，我開(kāi)始重讀 Adobe 的設(shè)計(jì)系統(tǒng)，并發(fā)現(xiàn)它是 B 端中最完善且專(zhuān)業(yè)的設(shè)計(jì)系統(tǒng)之一。因此，我會(huì)繼續(xù)深入閱讀，并將這些學(xué)習(xí)到的知識(shí)應(yīng)用到我的設(shè)計(jì)工作中。