內容優先原型

內容是數字經濟的核心商品。 它是我們打造奢華體驗的黃金，是我們在忠誠度計劃和追加銷售中封裝的鑽石。 然而，作為設計師，我們經常在事後將其插入。 我們將我們的交互和視覺設計原型化到筋疲力盡，但接受“真實的文字”可以稍後再加入。 有一個更好的辦法。

我們創造的數字商品越來越多地在內容、功能、代碼和意圖的動態系統中運行。 我們的產品和服務漂移並溢出到合作夥伴網站、社交媒體源和無數電子聚合器中，所有這些都在尋求塑造訪問者的行為和理解。 系統建立在系統之上，而且，在短時間內，我們拼湊出一個巨大的，其廣度令人難以置信。

關於 SmashingMag 的進一步閱讀：

• 優化您的設計以進行快速原型測試
• 選擇正確的原型設計工具
• 響應式網頁設計中的內容原型
• 復活用戶界面原型

儘管我們過去很擅長找出簡單的系統（想想靜態網站和內部網），但事實證明，大型動態系統要復雜得多，而且可預測性也差得多。 隨著系統的增長，它們變得指數級地變得更加複雜，並且隨著它們的複雜性增加，它們的行為變得越來越非線性，並且對於我們這些可憐的猴子來說，難以預料。 在大型系統中，小數點後第 100 位的捨入誤差會從根本上改變結果（Mitchell 33）。 隨著互聯網接近一萬億個節點，這就是我們現在設計的世界。

然而，我們習慣的那些簡單系統可以為設計更複雜的空間提供關鍵。 正如係統理論家 John Gall 所說，“一個有效的複雜系統總是被發現是從一個有效的簡單系統演變而來的。” 在數字設計領域，如果我們確保我們最簡單的內容、結構和意義構建動態系統在基礎層面按預期工作，那麼我們就可以為更大、更複雜的系統奠定基礎，這些系統也能按預期工作。

作為設計師，我們可以保持複雜性的一種方法是在一開始就將我們的內容帶入原型製作過程。 內容優先的方法鼓勵我們更早地面對內容的限制和機會，並在做出重大設計決策之前與真正渴望內容的用戶對我們提出的解決方案進行功能測試。

在本文中，我將向您展示如何使用一組簡單的開源工具從第一天開始將真實的動態內容引入您的原型製作過程。 這種方法使您可以從項目一開始就關注用戶如何理解您的內容，然後在理解的基礎上構建結構、視覺和技術元素。

內容的白盒模型

系統研究人員用來理解動態系統行為的工具之一稱為“白盒”模型。 系統學者 Gerald Weinberg 寫道，雖然黑盒模型的行為是“完全隱藏的”，但白盒模型的行為是“完全揭示的”。 對於復雜的系統，這種透明度很重要：溫伯格進一步指出，“即使是最簡單的系統有時也會給構建者帶來驚喜”（172）。

內容優先原型的目標是為我們的內容、其內部結構及其支持信息架構創建一個白盒模型。 這將使我們能夠在設計過程的早期發現我們的最終用戶如何從我們的數字系統提供的結構化內容中構建意義。 通過花時間讓我們的內容系統的結構在其核心是正確的，我們為這些簡單的工作系統集成到更大、更複雜的工作系統奠定了基礎。

為了為數字內容創建一個白盒，我們需要考慮三件事：

• 內容本身，由不同粒度級別的內容包組成，具體取決於內容的類型和目的；
• 結構，無論是在本地頁面或屏幕級別，還是在全球網站或應用程序級別；
• 用戶參與我們的內容最終將被消費的環境和姿勢（台式機、平板電腦或手機）。

為了保持“完全可見”，該模型還需要在其功能上保持透明，以便設計團隊的成員能夠理解模型為何如此行事。 最後一點——透明度與用戶參與相結合——對於白盒模型至關重要：我們構建原型不僅僅是為了展示功能，而是根據單詞和我們使用的結構是由他們的目標受眾解釋的。

在為現有內容進行設計時，內容優先的原型製作方法很有用，但它也是讓編輯團隊參與內容創建過程的好方法。 在項目的早期將真實的文字、圖像和資產呈現在用戶面前，讓每個人都有時間進行微調、調整或調整，以實現項目的目標。 如果您的項目計劃是遵循稍後填寫的策略，那麼內容優先的原型設計讓您有機會在用戶面前獲得一些內容變化——然後在利益相關者面前獲得用戶的反應。

內容優先的原型框架

考慮到上面描述的原則和目標，我整理了一個用於創建這種原型的入門框架。 本著系統思考本身的精神，這個工具依賴於簡單系統的鬆散耦合，每個系統都能很好地執行簡單的主要任務。

對於這個框架，我組裝了 Excel、Jekyll、ZURB Foundation 和 Browsersync，並用 Gulp 腳本將它們鏈接在一起。 我之所以選擇這些特定的應用程序和框架，是因為它們廣泛可用、開源（大部分）、擁有活躍的支持社區和優秀的文檔。

您可以從 GitHub 上的項目頁面下載下面討論的示例項目的副本和內容優先的原型設計框架入門工具包。 讓我們來看看這些部分是如何組合在一起的，以及它們各自的作用。

Excel

Excel（或任何保存為 XLSX 格式的電子表格程序）用於創建和編輯結構化內容和分類系統。 每次保存文檔時，內容集中的每個包（由電子表格中的一行表示）都會導出為 Jekyll 頁面和 JSON 文檔。 這允許您對內容執行頁面和全局操作，並使用單個“保存”命令將內容更改傳播到整個網站。

傑基爾

Jekyll 是一個開源靜態網站生成器，用於闡明內容包、頁面和類別之間的動態結構。 Jekyll 將您保存在電子表格中的內容表示為變量，並允許您對這些變量執行操作以創建結構。 Jekyll 還提供了“if/then”標籤用於應用條件邏輯和for循環和過濾內容集的 for 循環。

基礎

ZURB Foundation 是一個開源的移動優先前端框架，用於表達信息層次結構和構建響應行為。 Foundation 的網格、樣式定義和響應行為允許您通過將類應用於 HTML 元素來創建幾乎任何標準的 Web 佈局模式。

瀏覽器同步

最後，Browsersync 將您的原型提供給瀏覽器，並在您進行更改時更新 CSS 和頁面。 Browsersync 還允許您從連接到同一網絡的任何設備訪問原型。 這意味著當您在筆記本電腦上進行編輯時，您可以在手機和平板電腦上看到自動更新。

將這些工具鏈接在一起，您可以在類似於構成最終生產環境的動態系統的環境中構建原型，而不必遭受數據庫、雲服務和網絡延遲的影響，這些延遲會在您需要移動時減慢您的速度快速嘗試想法。

如果您因為涉及代碼而感到恐慌……

不要驚慌。 這些工具對設計師友好，並擁有出色的支持社區。 您無需成為前端開發人員即可將您的想法變為現實。 您確實需要了解 HTML 和 CSS 的基礎知識。 這些語言並不難——學習它們不會破壞你做好設計工作的能力。 用字體設計傳奇人物 Erik Spiekermann 的話來說，“你必須學習，如果不編碼，至少要欣賞代碼，理解代碼。 因為代碼就是一百年前的具體細節。” 開始的最好方法是潛入。

內容優先的原型設計示例：Green Lake 社區中心

為了更好地了解內容優先原型的實際應用情況，讓我們從現實世界中收集數字內容。

這是場景。 綠湖社區中心為綠湖社區的社區成員提供課程、計劃和活動。 不幸的是，它所有當前的課程、課程和活動信息只能通過 PDF 在線獲得，而 PDF 又只能從該中心的固定寬度桌面優化網站獲得。 看哪：

為了接觸越來越多地嘗試通過手機訪問課程、課程和活動信息的社區成員，該中心決定推出一個移動優先的課程網站。 這一舉措最終將成為全市範圍內的公園和娛樂響應網站的催化劑。

與任何其他設計項目一樣，我將從啟發式和競爭分析開始，並查看可用的流量和用戶數據。 如果利益相關者和最終用戶有空，我一定會與他們交談。 一旦我覺得我對網站的目的有了很好的了解，我就會在紙上探索一些基本的高級信息架構和用戶界面的想法。

隨著初始設計方法開始形成，我可以使用內容優先的原型製作工作流程來獲取我的初始想法——更重要的是，這些想法旨在服務的內容——進入它們最終將被使用的上下文中——在這種情況下，瀏覽器。 讓我們詳細了解一下這個過程的樣子。

捕獲內容

在此示例中，您可以看到我在內容優先原型設計框架電子表格中捕獲的結構化內容是如何在我每次保存_data文件時自動寫入頁面模板的。 在這裡，我使用“目錄”表來構建內容。 “標題”、“描述”、“類別”和“標籤”變量已包含在頁面模板中，因此這些值會立即更新。 您可以根據需要向內容行添加任意數量的其他列 - 只需確保在模板中包含相應的變量（更多內容見下文）。

“目錄”和“提要”表也包含在入門工具包中，並針對其各自的內容類型包括不同的類別（列）。 每個工作表都將內容導出到其自己的文件夾（在這些情況下為“catalogue”、“directory”和“feed”）和其自己的 JSON 文件。 您可以根據需要添加任意數量的其他工作表——只需確保更新您的 Jekyll 配置文件，以便它知道將它們拉入（請參閱“Jekyll 數據頁面生成器”插件文檔以獲取完整詳細信息）。

添加更多內容包

當我添加內容包（電子表格中的行）時，新頁面會自動添加到原型中。 每行代表一個頁面，該行中的每一列代表 Jekyll 在構建頁面時填寫模板中的一個變量。 在這個例子中，來自“社區中心”目錄的內容是相當統一的，但是如果項目描述的長度變化很大，你可以很容易地看到（並體驗）這種變化將如何影響頁面的佈局。 也許您可能會決定以不同的方式對內容進行分塊或添加新元素，例如摘要或 slug。

該系統還可以讓您輕鬆地試驗標籤、類別和標籤。 通過更改“類別”列中的值，您可以測試不同的架構方法如何影響用戶輕鬆查找給定內容的能力。 例如，在此示例中，我創建了基於班級類型和參與者年齡組的組織系統。 這使我可以在原型成型時輕鬆地在菜單和主頁上測試不同的導航方法。

使用 HTML 添加結構和層次結構

一旦我對適當的內容感到滿意，我將開始將該內容包裝在標記中，以便其結構對用戶有意義。 將此處的變量視為文本，並像在“平面”HTML 文件中標記文本一樣標記它們。 這裡的結果應該看起來很可預測（這是一件好事）。

Jekyll 的模板系統將獲取您創建的頁面模板，並用包含標題和導航圖標的全局模板包裝它們。 這就是“layout: default”的含義：我們稱“default”模板為該模板的包裝器。 您可以將模板嵌套到任意深度，儘管通常不需要一層或兩層以上的模板。 為了容納重複的元素，例如頁面列表和全局鏈接，您還可以使用“包含”，它會在呈現網站時在模板中插入一段特定的代碼。 查看 Jekyll 的官方文檔，了解更多關於模板和包含的信息。

使用 Jekyll 標記添加邏輯

Jekyll 允許您通過包含特定於其模板系統的基本標籤來添加基本邏輯。 在這裡，我使用for標記循環瀏覽 Green Lake 社區中心的類列表（它是在我添加上面的多個內容包時創建的），並將列表中的每個社區中心類呈現為鏈接：

您還可以使用if語句來創建條件。 在這裡，我使用if語句來隱藏指向我當前所在的課程頁面的鏈接：

如果你的頭剛剛爆炸，請不要驚慌。 添加邏輯是一種高級功能。 如果您堅持使用內容變量和 HTML，您的原型就可以正常工作。 然而，Jekyll 的模板系統非常易於閱讀且易於上手。 查看其創建者關於基本作品如何工作的快速介紹。

使用 Foundation 的 CSS 添加樣式和響應行為

一旦 HTML 結構的初稿就位，我可以簡單地通過包含 CSS 類並保存文檔來為原型添加樣式。 ZURB Foundation 的前端框架已經鏈接在入門工具包中，為各種 Web 和原生應用程序模式提供樣式類。 在此處顯示的示例中，只需放入兩個不同的類，我就賦予了我的移動原型更“可點擊”的感覺，並引入了更清晰的視覺層次感。 這些更改會自動傳播到使用此模板的所有內容。

Foundation 還可以輕鬆包含移動優先的響應行為並使用數十種預構建的佈局、容器和媒體組件。 因為它都是 CSS，所以您可以根據自己的喜好修改和微調所有內容。 對於這些示例，我已將 Foundation 的基本調色板修改為“單色線框”樣式，但您可以將 Foundation 調整為您喜歡的任何樣式。 通過瀏覽其文檔或教程或參加課程（順便說一下，這些課程非常好），了解有關使用 Foundation 的更多信息。

儘早獲得反饋並隨時修改

一旦內容到位，創建和測試結構的多個變體就很容易了。 標籤、類別、關鍵字和其他元數據可以直接在內容電子表格中更改。 同樣，頁面結構、流程和顯示的變化只是創建 Jekyll 模板的替代版本的問題。 當您點擊“保存”時，所有這些更改將立即在原型中級聯。

為了完成 Green Lake 社區中心原型的第一個版本，我創建了移動主頁的三個變體。 在這種情況下，我需要做的就是重新排列主頁模板中的元素並交換兩個導航元素的數據源（即全角按鈕和圖像圖塊）。

儘管我已經按順序介紹了所有這些步驟，但請記住，每次保存文檔時，Gulp（將我們所有簡單系統鏈接在一起的 JavaScript 任務運行程序）都會更新更改。 這意味著您可以隨時返回任何步驟，並根據用戶響應、利益相關者反饋或有關內容或上下文的新發現進行調整。

這種靈活性使您可以輕鬆地與用戶一起測試不同的屏幕層次結構和內容處理方式——並且它允許您在這些測試中使用真實的內容，即您的觀眾可以親身體驗（並做出反應）的內容。 因為原型的最終形式是 HTML、CSS 和 JavaScript，所以您可以使用您最熟悉的任何測試工具收集用戶反饋（我喜歡 UserTesting 和 Lookback）。

原型的 HTML、CSS 和 JavaScript 格式也意味著您的工作將更容易為並行和後續工作提供信息。 例如，如果您的最終產品將建立在現有的 CMS 平台上，那麼您能夠闡明的內容、結構和顯示要求將幫助您評估 CMS 選項。 同樣，您的原型可以作為設計決策的規範文檔，涉及前端開發人員的網格、層次結構、標題、鏈接行為和字體。

但是不要忘記，內容優先原型的目標不僅僅是在瀏覽器中進行設計：目標是使用瀏覽器和用戶的反饋來微調內容的組織，以便構建簡單的運作良好的結構。

此方法的優勢在於允許您快速修改您的類別、標籤和導航路徑創建的系統。 這提供了優於靜態內容建模的明顯優勢。 如果你發現你使用了很多額外的 CSS 來讓你的動態內容以你想要的方式工作，那麼回到源頭。 您可以對內容進行不同的分塊以使其更好地工作嗎？ 添加（或刪除）一組類或標籤？ 嘗試不同的變化，直到找到簡單、優雅的解決方案，讓其他一切看起來都到位。

超越網絡的系統思考

這裡顯示的基本示例說明了內容優先的原型設計方法如何幫助我們創建簡單的工作內容系統——這些系統反過來為更大、更複雜的工作系統奠定了基礎。 內容優先的原型設計幫助我們發現對內容模型、層次結構、類別和標籤進行細微調整的地方，可以為用戶的信息需求帶來更簡潔、更優雅的解決方案。

雖然這個工具是建立在網絡技術之上的，但我們構建內容以理解的方式超越了單個工具、技術和平台。 如果您的內容以最基本的形式呈現，去除了特定實現的要求和約束，對受眾有意義，並以簡單、優雅的方式實現了您的溝通目標，那麼您已經建立了一個超越單個技術實現的基礎。 您構建的內容不需要特定的平台或腳本就可以理解； 它是一個希望以某種方式被理解的內容集。

當我們將內容置於設計過程的核心時，我們開始解決的不是特定的實現，而是理解。 其他一切都是中間步驟。 通過認識到我們設計的最終平台是人類思維，我們可以識別出能夠引起理解的簡單結構，並可以在整個設計過程中加強這些結構。

參考文獻

• 複雜性，導遊，梅蘭妮米切爾（紐約：牛津，2009）
• 通用系統思維導論，Gerald Weinberg（紐約：Dorset House，1975 年）