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

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

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

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

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

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

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

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

改變一切的研究

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

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

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

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

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

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

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

來(lái)自工程師：

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

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

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

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

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

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

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

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

新的文檔架構(gòu)

組件標(biāo)題

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

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

視覺(jué)規(guī)格

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

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

情境指導(dǎo)

工藝技巧、行為文檔和使用指南以視覺(jué)方式與交互式示例一起呈現(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)記來(lái)表示與每條線(xiàn)的交互
5. 調(diào)整列大小功能已記錄為可在應(yīng)用程序上實(shí)時(shí)使用

注意事項(xiàng)

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

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

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

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

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

最終結(jié)果

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

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

結(jié)果

反饋具有變革性：

“終于有符合我語(yǔ)言的文檔了，”一位設(shè)計(jì)師分享道。 “我不用離開(kāi) 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)者并不抗拒文檔，他們抗拒的是那些無(wú)法滿(mǎn)足他們需求的文檔。

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

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

 

蘭亭妙微(www.li-bodun.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話(huà)：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。