簡述：AI 并非接管用戶體驗(yàn)設(shè)計(jì)，而是徹底改變我們的工作方式。本文將分享 AI 工具如何改變我的工作流程，讓我的工作更高效、更敏銳，以及為什么擁抱 AI 是當(dāng)今設(shè)計(jì)師最明智的選擇。

說實(shí)話——人工智能一開始讓我很害怕

當(dāng)人工智能工具開始充斥我的設(shè)計(jì)信息時(shí)，我感到恐慌。

“這會(huì)讓我的工作變得無關(guān)緊要嗎？”

這是我腦海深處平靜的聲音。

但我的經(jīng)驗(yàn)是：人工智能并非用戶體驗(yàn)設(shè)計(jì)師的替代品——它只是對(duì)我們工具包的升級(jí)。我們并非與人工智能競爭——而是與它合作。

現(xiàn)在，我把人工智能視為我的頭腦風(fēng)暴伙伴、文案助理、設(shè)計(jì)陪練伙伴和時(shí)間節(jié)省者。這種思維轉(zhuǎn)變開辟了我從未意識(shí)到自己需要的創(chuàng)意空間。

人工智能之前：我的用戶體驗(yàn)流程是什么樣的

在我將人工智能引入其中之前，對(duì)我來說典型的用戶體驗(yàn)流程是這樣的：

• 手動(dòng)轉(zhuǎn)錄用戶訪談
• 用于親和力映射的便簽混亂
• 從零開始構(gòu)建用戶畫像
• 微文案的每一個(gè)字都是我自己寫的
• 多次反復(fù)的迭代和篩選
• 手動(dòng)可用性測(cè)試和數(shù)小時(shí)的分析

是的，這確實(shí)很周到。但通常進(jìn)展緩慢、重復(fù)性強(qiáng)，而且難以規(guī)模化。

進(jìn)入人工智能：改變我的工作流程的轉(zhuǎn)變

然后是人工智能。起初，它只是用于快速內(nèi)容的 ChatGPT。但很快，我發(fā)現(xiàn)自己將更多工具融入到我的工作流程中——這些工具不僅節(jié)省了時(shí)間，而且實(shí)際上改善了我的工作方式。

以下是人工智能如何融入我當(dāng)前的用戶體驗(yàn)階段：

研究與分析

• Notion AI：完美總結(jié)用戶訪談
• Dovetail AI：轉(zhuǎn)錄、標(biāo)記和分析研究模式
• ChatGPT：幫助生成假設(shè)或規(guī)劃關(guān)鍵主題

構(gòu)思與文案

• Magician（Figma 插件）：自動(dòng)生成 UI 組件 + 微文案
• ChatGPT / Claude：編寫入門流程、按鈕文本、錯(cuò)誤消息
• Jasper：針對(duì)不同用戶群體調(diào)整語氣

設(shè)計(jì)與原型制作

• Uizard：將手繪草圖轉(zhuǎn)換為可用的 UI
• Figma + AI 插件：加速重復(fù)性任務(wù)（例如，創(chuàng)建變體、自動(dòng)布局幫助）
• Galileo AI：將文本提示轉(zhuǎn)換為模型（有時(shí)非常好！）

測(cè)試與反饋

• UXtweak和Maze：通過熱圖提供人工智能用戶測(cè)試
• Lookback + AI：通過記錄分析用戶行為

突然之間，數(shù)小時(shí)的體力勞動(dòng)變成了幾分鐘的輔助創(chuàng)造力。

人工智能的優(yōu)勢(shì)（我并沒有抱怨）

以下是人工智能幫助我做得更好、更快、更少摩擦的事情：

• 加速重復(fù)性、低價(jià)值的任務(wù)
• 當(dāng)我陷入困境時(shí)，它能幫助我快速產(chǎn)生想法
• 以新視角增強(qiáng)頭腦風(fēng)暴
• 減少快節(jié)奏項(xiàng)目中的精神疲勞
• 讓我更專注于解決問題和講故事

人工智能仍然無法做到的事情

即使取得了所有進(jìn)展，仍有一些東西是人工智能無法（或許也不應(yīng)該）取代的：

• 理解人類的情感、細(xì)微差別和未說出口的背景
• 做出符合道德的設(shè)計(jì)決策
• 用靈魂創(chuàng)造共情體驗(yàn)
• 解讀模棱兩可的反饋
• 向利益相關(guān)者展示設(shè)計(jì)決策

這是件好事。因?yàn)檫@些正是用戶體驗(yàn)的一部分，讓設(shè)計(jì)更具人性化。

我今天的工作流程：人機(jī)設(shè)計(jì)之舞

現(xiàn)在與人工智能合作感覺就像是一種創(chuàng)造性的伙伴關(guān)系——雙方都能帶來一些有價(jià)值的東西。

在研究過程中，我使用人工智能轉(zhuǎn)錄和標(biāo)記訪談內(nèi)容，但我也會(huì)介入解讀其中的情感細(xì)微差別并驗(yàn)證模式。在構(gòu)思階段，人工智能會(huì)生成流程或占位文案，然后我會(huì)將其精煉成符合用戶目標(biāo)的精美體驗(yàn)。在設(shè)計(jì)線框圖時(shí)，人工智能有助于加快布局建議的速度，但我也會(huì)運(yùn)用用戶體驗(yàn)啟發(fā)式方法、無障礙標(biāo)準(zhǔn)和敘事技巧。即使在測(cè)試階段，人工智能也會(huì)提供摘要和行為圖，但我仍然需要深入挖掘用戶行為背后的原因。

簡而言之，人工智能承擔(dān)了繁重的工作。我負(fù)責(zé)判斷、同理心和目標(biāo)。

設(shè)計(jì)師使用 AI 工具的技巧

如果您對(duì)人工智能感到好奇，但不知道從哪里開始，我推薦以下內(nèi)容：

• 從小事做起。使用人工智能進(jìn)行內(nèi)容生成、摘要或快速提示。
• 使用適合你當(dāng)前技術(shù)棧的工具。Figma、Notion 和 ChatGPT 都是不錯(cuò)的入門工具。
• 保持像設(shè)計(jì)師一樣思考。AI提供選項(xiàng)，但決策權(quán)仍在你手中。
• 保持好奇心。這個(gè)領(lǐng)域發(fā)展迅速。嘗試新工具，測(cè)試極限，經(jīng)常進(jìn)行實(shí)驗(yàn)。
• 不要把關(guān)。與你的團(tuán)隊(duì)分享有用的工具和提示。我們一起進(jìn)步。

最后的想法：人工智能不是敵人，而是進(jìn)化

人工智能不會(huì)取代用戶體驗(yàn)設(shè)計(jì)師。

但懂得如何使用人工智能的設(shè)計(jì)師可能會(huì)比不懂人工智能的設(shè)計(jì)師更成功。

用戶體驗(yàn)的未來以人為本，并由人工智能加速發(fā)展。人工智能幫助我們更快、更智能地行動(dòng)——但同理心、道德和創(chuàng)造力呢？這些仍然取決于我們。

讓人工智能處理自動(dòng)化，你來掌控直覺。

蘭亭妙微(www.devb.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。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

2025 年 6 月，法國設(shè)計(jì)師 Pierre Patrault 出品“lgm/”網(wǎng)頁設(shè)計(jì)項(xiàng)目。該作品以 Web UI/UX、品牌識(shí)別、落地頁面為設(shè)計(jì)主軸，旨在通過最簡結(jié)構(gòu)與視覺語言，打造清晰直觀的線上品牌窗口。

本項(xiàng)設(shè)計(jì)秉持“少即是多”的原則：簡潔的版式結(jié)構(gòu)、統(tǒng)一的視覺元素與留白設(shè)計(jì)，讓每一個(gè)視覺焦點(diǎn)都直指品牌核心；用戶在瀏覽中自然而然地獲得信息層級(jí)，引發(fā)情感共鳴。

項(xiàng)目由 Pierre Patrault 主導(dǎo)創(chuàng)意設(shè)計(jì)與用戶界面；Teddy Vermeulin 負(fù)責(zé)開發(fā)落地頁面，并與品牌與視頻代理 Advitam 合作完成整體傳播支持。三者協(xié)作默契，將創(chuàng)意、技術(shù)與品牌傳播融為一體。

“lgm/”的發(fā)布，不僅是一次視覺嘗試，更是一次品牌線上表達(dá)的新實(shí)踐：精準(zhǔn)、高效、富有引導(dǎo)性的設(shè)計(jì)語言，助力品牌與用戶間建立清晰、信任與溫度兼?zhèn)涞臄?shù)字連接。
創(chuàng)意理念
“基于簡潔現(xiàn)代的視覺語言，lgm/ 項(xiàng)目以極簡主義為核心，將品牌形象與用戶體驗(yàn)無縫融合，致力于在首屏即傳達(dá)品牌精髓，賦予每一次交互以直觀引導(dǎo)。”

3. 設(shè)計(jì)與體驗(yàn)亮點(diǎn)

結(jié)構(gòu)清晰：落地頁布局明晰、信息層級(jí)分明，讓用戶輕松抓住核心內(nèi)容。

極致簡約：利用充足留白、統(tǒng)一調(diào)性、統(tǒng)一視覺元素，降低視覺干擾，提升品牌溝通效率。

交互細(xì)節(jié)（若有）：如鼠標(biāo)懸停動(dòng)畫、滾動(dòng)觸發(fā)效果等，可寫出“精致微互動(dòng)增強(qiáng)用戶參與感”。

蘭亭妙微(www.devb.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。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

每個(gè)設(shè)計(jì)師都有自己獨(dú)特的設(shè)計(jì)呈現(xiàn)方式。根據(jù)項(xiàng)目的不同，設(shè)計(jì)師會(huì)使用不同的方式展示他們的設(shè)計(jì)。Clickdummy 原型是展示屏幕流程最常用的方式，方便簡潔。通常情況下，設(shè)計(jì)師會(huì)以“編號(hào)+標(biāo)題”的格式為所有屏幕命名，并通過導(dǎo)出結(jié)果中 JPG 文件的順序來表達(dá)屏幕之間關(guān)系的邏輯。

我很高興能使用像 Invision App 這樣的工具來理清我的設(shè)計(jì)。然而，ClickDummy 原型在構(gòu)建大型復(fù)雜的軟件項(xiàng)目和功能性應(yīng)用程序時(shí)并不理想。有時(shí)，我們會(huì)將屏幕放在 Sketch 文件中的不同頁面中，以使結(jié)構(gòu)更清晰，但卻失去了整體的視覺效果。當(dāng)你向項(xiàng)目經(jīng)理、客戶和開發(fā)人員展示你的設(shè)計(jì)時(shí)，你會(huì)發(fā)現(xiàn)這個(gè)過程效率低下。

按 Enter 鍵或單擊即可查看完整尺寸的圖像

我們需要一個(gè)高效、流暢的流程來優(yōu)化演示和交接。我的經(jīng)驗(yàn)是線框圖和UI的流程。這是一種非常新穎的方式，但效果很好。

我們知道 Behance 和 Dribbble 上有很多精美的線框和 UI 流程。其實(shí)很多設(shè)計(jì)師也在做同樣的事情。我在上海MINGLabs工作的時(shí)候，我的法國設(shè)計(jì)師同事 Lucas 教給我一個(gè)方法，它不僅易于理解，而且美觀高效，可以作為交接的 UI 呈現(xiàn)流程。后來，這個(gè)方法在我的遠(yuǎn)程自由職業(yè)中得到了運(yùn)用，并不斷改進(jìn)。這對(duì)降低溝通成本非常有幫助。

為什么我更喜歡線框和 UI 設(shè)計(jì)流程？

1. 幫助設(shè)計(jì)師鞏固他們的想法
2. 顯示屏幕之間關(guān)系的邏輯
3. 使與客戶的溝通更加輕松，呈現(xiàn)的內(nèi)容更加清晰可見
4. 使與開發(fā)者的溝通更加便捷，降低溝通成本。
5. 有利于與其他設(shè)計(jì)師合作

按 Enter 鍵或單擊即可查看完整尺寸的圖像

我如何制作流程？

當(dāng)然，我的應(yīng)用和網(wǎng)站都是用 Sketch 設(shè)計(jì)的。我建議從第一個(gè)線框圖開始設(shè)計(jì)流程。之后再設(shè)計(jì)主頁和兩三個(gè)輔助頁面。

步驟1

您可以創(chuàng)建一個(gè)新的畫板。畫板大小要足夠大，能夠覆蓋所有屏幕。這樣做的目的是為了更容易添加線條和注釋，也方便在最后時(shí)刻導(dǎo)出完整流程圖的概覽。不過，現(xiàn)在沒必要添加屏幕數(shù)量。等您心中有了概覽之后，再添加也不遲。

按 Enter 鍵或單擊即可查看完整尺寸的圖像

步驟2

流程包括 5 個(gè)組件：

1. 屏幕
2. 畫面名稱，格式為“ 數(shù)字＋字母+標(biāo)題”或者“ 數(shù)字+標(biāo)題”
3. 動(dòng)作和位置（紅點(diǎn)）
4. 線
5. 筆記

按 Enter 鍵或單擊即可查看完整尺寸的圖像

步驟3

流程的結(jié)構(gòu)是從左到右組織的。頁面位置越靠右，層級(jí)就越低。我的習(xí)慣是把首頁之類的第一頁放在左側(cè)。設(shè)計(jì)流程如下：

按 Enter 鍵或單擊即可查看完整尺寸的圖像

按 Enter 鍵或單擊即可查看完整尺寸的圖像

問題

線框和 UI 流程改善了溝通。但它并不完美，實(shí)際上有時(shí)甚至有點(diǎn)令人毛骨悚然。

1. 每次增加屏幕，數(shù)字就會(huì)亂。我的命名方法可以避免這種混亂，但不是最佳方法。
2. 一旦移動(dòng)了屏幕，連接的線就必須重新繪制。
3. 導(dǎo)出的概覽 pdf 無法顯示每個(gè)屏幕的名稱。

蘭亭妙微(www.devb.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。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

基本原則
清晰、簡潔、一致、可操作暗示以及隱喻（可供性）、反饋、容錯(cuò)、高效、易記憶易學(xué)習(xí)。

1. 清晰
內(nèi)容、結(jié)構(gòu)、界面效果都是清晰可見的，加強(qiáng)情感的修飾，注意只使用文字與排版來表達(dá)頁面，以字體、字號(hào)、顏色、版式，精妙動(dòng)畫效果來增加界面的精致性與設(shè)計(jì)不夠。盡量避免平滑、陰影。
2. 簡潔
為了用戶聚焦，限制明確頁面唯一的或者最重要的目標(biāo)性，不讓用戶讓焦鈦的選擇感。
3.一致性
界面元素的標(biāo)準(zhǔn)控件化：問題使用系統(tǒng)交互元素，以及界面和用戶之間對(duì)話風(fēng)格的統(tǒng)一：標(biāo)準(zhǔn)文本風(fēng)格、口吻、語氣、統(tǒng)一話術(shù)。
4.可操作暗示隱以及喻意
讓用戶看到這個(gè)就是可以交互的，按鈕要像按鈕，與文本內(nèi)容以及其他界面元素有所區(qū)別。另外可增加操作引導(dǎo)，在操作時(shí)給予引導(dǎo)，而不是獨(dú)有的一股腦引發(fā)引導(dǎo)。隱喻本可以單獨(dú)做一個(gè)原則，但這里與可操作暗示大約類似，隱喻指的是虛擬界面可以做到讓用戶經(jīng)驗(yàn)類似的喻，確實(shí)是現(xiàn)實(shí)物理世界的隱喻還是虛擬數(shù)字世界。讓用戶無成本遷移感。5
. 反饋
任何操作都要給予可感知的操作反饋，當(dāng)點(diǎn)擊或者其他時(shí)，被操作交互的要素要給予短暫的強(qiáng)調(diào)，另外通過動(dòng)畫給予進(jìn)度提示，
6.容錯(cuò)與安全感
降低用戶犯錯(cuò)成本，做到高危操作可恢復(fù)。應(yīng)用應(yīng)該通過使用熟悉的、可預(yù)見的交互元素，確認(rèn)重要的操作、可回溯的取消手段等方式，來讓用戶覺得自己處于被保護(hù)的狀態(tài)中。此外還有防錯(cuò)原則，采用本質(zhì)的安全設(shè)計(jì)方式（固有）安全），比如表單未完成按鈕不可用...
7.高效
兩個(gè)方面，用戶高效使用的性以及高效開發(fā)的性，要關(guān)注網(wǎng)頁技術(shù)新功能，快速迭代那些優(yōu)秀且通用改裝的新功能。
8.易學(xué)習(xí)易記憶
這是最后一條，在做到前面的原則之后，這條應(yīng)該是取締的，但是由于技術(shù)性平臺(tái)的特殊性，涉及專業(yè)性技術(shù)術(shù)語等等的東西，所以對(duì)于一些非技術(shù)人員或者不太懂行的技術(shù)人員，需要提供提醒文檔嵌入，方便用戶學(xué)習(xí)。

蘭亭妙微(www.devb.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。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

1. 項(xiàng)目背景 & 設(shè)計(jì)目標(biāo)

• 項(xiàng)目名稱與內(nèi)容：這是為 ComplyControl——一個(gè)專注金融領(lǐng)域的前沿 AI 合規(guī)模塊（具備實(shí)時(shí)監(jiān)控、智能檢測(cè)與欺詐發(fā)現(xiàn)功能）的品牌形象與網(wǎng)站界面設(shè)計(jì)項(xiàng)目 Behance+1。

• 完成時(shí)間與平臺(tái)：發(fā)布于 2025 年 6 月 4 日，整合品牌設(shè)計(jì)、網(wǎng)站 UI/UX 及用戶界面，使用 Figma 與 Webflow 等工具進(jìn)行創(chuàng)作與實(shí)現(xiàn) Behance。

2. 品牌視覺識(shí)別（Brand Identity）

• 標(biāo)志設(shè)計(jì)：圖中展示了簡潔現(xiàn)代的標(biāo)志（logo），結(jié)構(gòu)緊湊且具識(shí)別度，呈現(xiàn)強(qiáng)烈的科技感與專業(yè)感 。

• 配色策略：項(xiàng)目運(yùn)用了對(duì)比鮮明的暖色（如橙紅）與冷色（藍(lán)色），輔以深色底調(diào)，強(qiáng)化視覺沖擊力，同時(shí)展現(xiàn)了兼具活力與穩(wěn)重的品牌氣質(zhì) 。

• 字體風(fēng)格：在字體展示中可見清晰可讀的無襯線體，搭配簡潔的數(shù)字表現(xiàn)，進(jìn)一步傳達(dá)專業(yè)且現(xiàn)代的品牌語言 。

3. 界面設(shè)計(jì)（UI/UX & Website）

• 移動(dòng)界面布局：圖中呈現(xiàn)了移動(dòng)設(shè)備上的 UI 布局，包括導(dǎo)航菜單與交互按鈕，采用扁平化設(shè)計(jì)，按鈕與圖標(biāo)配色清晰，對(duì)焦用戶操作體驗(yàn) 。

• 數(shù)據(jù)可視化：圖表或百分比數(shù)據(jù)顯示以清晰簡練的方式呈現(xiàn)關(guān)鍵指標(biāo)（如 95%、40% 等），輔助用戶快速理解核心內(nèi)容 。

• 整體風(fēng)格語言：整體風(fēng)格簡潔、科技感強(qiáng)烈，布局邏輯清晰，強(qiáng)調(diào)功能與信息可視化，有助于金融產(chǎn)品的信息傳遞與可信感建立。

4. 工具與創(chuàng)作流程

• 設(shè)計(jì)工具：項(xiàng)目中使用了 Figma 進(jìn)行界面與原型設(shè)計(jì)，利用 Webflow 實(shí)現(xiàn)響應(yīng)式網(wǎng)頁開發(fā)與交互效果。同時(shí)還運(yùn)用 After Effects、Photoshop 以豐富視覺表現(xiàn)與動(dòng)畫效果 。

• 多方協(xié)同：項(xiàng)目由 Embacy Design 領(lǐng)銜，聯(lián)合多位設(shè)計(jì)師及機(jī)構(gòu)參與，展現(xiàn)了團(tuán)隊(duì)協(xié)作的深度與創(chuàng)意整合能力 。

總體評(píng)價(jià)與亮點(diǎn)

蘭亭妙微(www.devb.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。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

當(dāng)美好的愿望遭遇現(xiàn)實(shí)

作為 Pennylane 的高級(jí)設(shè)計(jì)運(yùn)營專家，我以為我們已經(jīng)破解了設(shè)計(jì)文檔的密碼。我們基于 Notion 的系統(tǒng)全面、條理清晰，理論上堪稱完美。

按 Enter 鍵或單擊即可查看完整尺寸的圖像

在我的文章《設(shè)計(jì)文檔：一致性和協(xié)作性 UI 開發(fā)的關(guān)鍵支柱》中，我倡導(dǎo)基于 Notion 的方法作為設(shè)計(jì)系統(tǒng)文檔的黃金標(biāo)準(zhǔn)。回顧過去，那篇文章展現(xiàn)了我對(duì)文檔的熱情，但它也揭示了我對(duì)文檔實(shí)際使用人員應(yīng)該是什么樣子的盲點(diǎn)。

在我原本以為只是例行檢查設(shè)計(jì)和工程團(tuán)隊(duì)時(shí)，我突然意識(shí)到了這一點(diǎn)。結(jié)果，我聽到的不是成功的故事，而是令人不安的事實(shí)：我們精心制作的文檔，對(duì)于最需要它的人來說，基本上是隱形的。

一位前端工程師承認(rèn)： “我通常只是嘗試自己解決問題，這比在多個(gè)平臺(tái)上搜索要快得多。”

“當(dāng)我找到正確的文檔時(shí)，我可能已經(jīng)構(gòu)建了該組件的三個(gè)版本，”另一位用戶分享道。

這并不是我們團(tuán)隊(duì)能力的失敗，而是我們的方法未能適應(yīng)人們的實(shí)際工作方式。

改變一切的研究

之前，先簡單介紹一下背景。設(shè)計(jì)師為空狀態(tài)組件編寫的文檔是這樣的：

按 Enter 鍵或單擊即可查看完整尺寸的圖像

工程師需要的技術(shù)文檔是什么樣的：

按 Enter 鍵或單擊即可查看完整尺寸的圖像

我沒有為現(xiàn)有的文檔辯護(hù)，而是決定傾聽。幾周來，我對(duì)設(shè)計(jì)和工程領(lǐng)域的20名團(tuán)隊(duì)成員進(jìn)行了深入訪談。訪談結(jié)果清晰地展現(xiàn)了以下幾個(gè)摩擦點(diǎn)：

來自設(shè)計(jì)師：

• 在截止日期的壓力下，跨平臺(tái)維護(hù)文檔成為次要任務(wù)
• 后期反饋循環(huán)與工程團(tuán)隊(duì)產(chǎn)生了緊張關(guān)系
• 設(shè)計(jì)意圖與技術(shù)實(shí)現(xiàn)之間的差距似乎難以逾越

來自工程師：

• 文檔與編碼環(huán)境脫節(jié)
• Figma 設(shè)計(jì)與實(shí)現(xiàn)的組件之間的視覺不一致造成了混亂
• 大量的文字解釋無法與直接探索代碼的即時(shí)性相媲美
• 多個(gè)事實(shí)來源導(dǎo)致決策癱瘓

根本原因是，我們創(chuàng)建了一個(gè)滿足組織需求但忽略了用戶自然工作流程的文檔系統(tǒng)。

將文檔重新想象為一種生活工具

解決方案不是編寫更好的文檔，而是從根本上重新思考文檔是什么。

我們不需要要求團(tuán)隊(duì)適應(yīng)我們的系統(tǒng)，如果我們的系統(tǒng)適應(yīng)他們呢？

愿景：將文檔從靜態(tài)參考轉(zhuǎn)變?yōu)闆Q策制定過程中的動(dòng)態(tài)、視覺伴侶。

我們的新理念：展示，而不是講述

1. 我們注重視覺優(yōu)先的溝通，而非描述組件的外觀，而是結(jié)合上下文進(jìn)行展示。現(xiàn)在，每個(gè)組件都包含其默認(rèn)狀態(tài)、主要變體以及實(shí)際應(yīng)用，一目了然。
2. 工作流集成文檔現(xiàn)已集成到 Figma 中，這是我們?cè)O(shè)計(jì)師日常使用的工具。無需再切換上下文，也無需跨平臺(tái)搜索。
3. 信息披露采用漸進(jìn)式分層結(jié)構(gòu)：重要細(xì)節(jié)預(yù)先呈現(xiàn)，必要時(shí)提供更深入的背景信息。團(tuán)隊(duì)可以根據(jù)自身情況靈活參與。

新的文檔架構(gòu)

組件標(biāo)題

干凈、簡約、專注于基本要素、組件名稱、實(shí)時(shí)代碼的直接鏈接和完成狀態(tài)。

按 Enter 鍵或單擊即可查看完整尺寸的圖像

視覺規(guī)格

以最純凈的形式顯示的組件，其變體被清晰地標(biāo)記，并由復(fù)雜分子的分離資產(chǎn)層支持。

按 Enter 鍵或單擊即可查看完整尺寸的圖像

情境指導(dǎo)

工藝技巧、行為文檔和使用指南以視覺方式與交互式示例一起呈現(xiàn)。

按 Enter 鍵或單擊即可查看完整尺寸的圖像

按照這里顯示的順序我們有：

1. 內(nèi)容指南鏈接，由我們的 UXW 作家創(chuàng)建并托管在 Notion 上
2. 一些關(guān)于工藝技能的“技巧”，以促進(jìn)持續(xù)改進(jìn)并幫助團(tuán)隊(duì)采用先進(jìn)的技術(shù)
3. 對(duì)于具有水平滾動(dòng)模式的表格，我們有尺寸指南和通用行為。此元素也可以在創(chuàng)建表格時(shí)用作模板
4. 使用不同的顏色標(biāo)記來表示與每條線的交互
5. 調(diào)整列大小功能已記錄為可在應(yīng)用程序上實(shí)時(shí)使用

注意事項(xiàng)

一些多功能組件需要“注意事項(xiàng)”部分來說明使用它們的限制和最佳實(shí)踐。

按 Enter 鍵或單擊即可查看完整尺寸的圖像

應(yīng)用內(nèi)示例

模板展示實(shí)際用例中的組件，彌合孤立組件和完整用戶體驗(yàn)之間的差距。

按 Enter 鍵或單擊即可查看完整尺寸的圖像

最終結(jié)果

完整、全面的文檔，一目了然，沒有不必要的文本或過時(shí)的信息。

按 Enter 鍵或單擊即可查看完整尺寸的圖像

結(jié)果

反饋具有變革性：

“終于有符合我語言的文檔了，”一位設(shè)計(jì)師分享道。 “我不用離開 Figma 就能看到我需要的一切。”

一位前端工程師表示： “這些可視化示例讓我省去了與設(shè)計(jì)團(tuán)隊(duì)反復(fù)溝通的時(shí)間。我可以立即看到預(yù)期的行為。”

但真正的成功標(biāo)準(zhǔn)并非贊譽(yù)，而是使用率。我們的新文檔正在被積極地查閱、在設(shè)計(jì)評(píng)審中被引用，并在工程討論中被引用。它已經(jīng)成為我們工作流程中不可或缺的一部分，而非事后才想到的。

建立在成功的基礎(chǔ)上

這次旅程讓我明白，優(yōu)秀的文檔就是在人們所在的地方與他們會(huì)面并支持他們自然的工作方式。

我們的下一個(gè)挑戰(zhàn)是將這些相同的原則應(yīng)用到我們的 UI 工具包平臺(tái)，確保我們以工程為中心的工具像我們的設(shè)計(jì)文檔一樣直觀且工作流程集成。

教訓(xùn)

這次轉(zhuǎn)型最重要的啟示在于人性。我們的利益相關(guān)者并不抗拒文檔，他們抗拒的是那些無法滿足他們需求的文檔。

通過從同理心出發(fā)，進(jìn)行真正的研究，并圍繞實(shí)際工作流程而不是理論理想設(shè)計(jì)我們的文檔系統(tǒng)，我們創(chuàng)造了一些不僅僅存在的東西：它蓬勃發(fā)展。

對(duì)其他設(shè)計(jì)團(tuán)隊(duì)的啟示：你的文檔的好壞取決于它的采用程度。在寫下任何文字之前，先問問你的用戶他們真正需要什么。答案可能會(huì)讓你大吃一驚，并激發(fā)你徹底重新思考如何分享設(shè)計(jì)知識(shí)。

蘭亭妙微(www.devb.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。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。