為響應式設計創建內容線框

當我在 2011 年到 2012 年期間學習響應式網頁設計課程時，我一直在線框圖的過程中磕磕絆絆。 我的學生傾向於將線框視為規劃過程中的最終遊戲。 他們不明白響應式設計關注的是用戶如何訪問內容。

當我在 2012 年的 Beyond the Desktop 會議上碰巧看到 Stephen Hay 的一段視頻時，你只能想像我的解脫。在那裡，在他關於響應式設計的演講中，他提出了內容線框的概念。 這對我來說是一個巨大的解脫。

關於 SmashingMag 的進一步閱讀：

• 懷疑論者的低保真原型指南
• 創建設計語言如何簡化您的 UX 設計
• 超越線框圖：真實的用戶體驗設計過程

我只知道在這個過程成為現實之前還有一個步驟，但我無法表達清楚。 在這篇文章中，我將描述我用來從內容到響應式線框的方法——以及如何做到這一點。

介紹內容線框

內容線框的概念很容易理解，因為它是最基本設計理念的一個分支：愛上用戶，而不是技術。

內容線框圖就是這樣做的。 它們屏蔽了一般的內容類別，並迫使你，正如斯蒂芬所說的那樣，從內容向外進行設計。

真的不復雜。 實際上，它涉及兩個步驟：

1. 創建內容清單，
2. 創建該列表的倖存者的視覺層次結構。

這樣做，您就有可能為您的客戶交付成果。 它傾向於將客戶的注意力從“事物”的去向轉向重要的事物：信息流。

不是火箭科學

對於我的學生和其他設計師來說，線框的關鍵問題是它們往往具有不必要的重要性。 這幾乎就像電視上的裝修節目結束了，當客戶走過家時，每個人都“哦”和“啊”。

不適合我。 我更喜歡廚房裝修的場景，承包商拿出一張紙和一支木工鉛筆，和客戶一起坐在廚房的桌子旁。 然後，他們畫了一個簡單的房間輪廓，然後說：“我們把這堵牆拔掉，在這裡放一個島，把櫃檯移到那邊怎麼樣？”

木匠正在製定他們對項目的“意圖”，而客戶則專注於項目的重要部分，而不是瓷磚、固定裝置、油漆和照明。

在他的《響應式設計工作流程》一書中，Hay 使用了“內容參考線框”一詞，因為“它描述了線框如何處理內容：它們只是引用它而不是描繪它。”

內容線框，就像我們承包商的草圖一樣，描繪了位置——牆壁、櫃檯、頁眉、頁腳——並建立了信息層次結構和流程。 因為這個過程是迭代的，所以從一個簡單的“如何……”而不是“這是如何……”開始對話，使其遠離火箭科學領域，並將其放在最初開始的地方：老式的盒子和箭頭。

一旦確定了這一點，我們就可以進入低保真和高保真線框開發過程。 讓我們看看內容線框如何通過解構一個簡單的頁面來聚焦對話。

手工解構

我定期訪問 Made by Hand。 顧名思義，該網站慶祝手工製作的工匠。 主頁上有一系列視頻，當您第一次訪問時，它似乎相當鮮明，幾乎沒有花哨。 這是有道理的，因為電影本身才是重要的，而不是任何其他內容。

可以理解，主頁的內容清單相當基本，包括：

• 標題和導航，
• 五個視頻（我們在這裡將其稱為主要視頻和視頻 1 到 4），
• 頁腳。

儘管如此，我們仍然可以看到一個明確的信息層次結構在起作用。 主要內容列表有點模糊，但一旦您了解其目的是展示一系列突出個別工匠的視頻，每個內容的優先級就會變得清晰：

• 主視頻，
• 視頻 1 到 4，
• 頁腳，
• 標題和導航。

看到堆棧底部的標題和導航可能會讓您感到奇怪。 但是，該頁面的全部目的是讓您觀看視頻，如果您喜歡它們，還可以訂閱新內容的定期通知。 標題和導航只是為了方便網站的導航。

在許多方面，古老的格言“內容為王”——通常歸因於比爾·蓋茨——推動了這個網站。 重點是視頻的集合，僅此而已。 這提出了一個重要的觀點：內容參考線框建立了內容優先級，而不是頁面流。

有了該列表，您就可以繼續實際創建內容參考線框。

創建內容參考線框

儘管 Stephen Hay 非常支持使用 Coda 或 Adob​​e 的 Brackets 等代碼編輯器創建這些內容參考線框，但對於我們這些受過代碼挑戰的人來說，使用 UXPin 或 Adob​​e 的 Illustrator 等可視化編輯器或Macaw 或 Webflow 等響應式編輯器將是一個不錯的選擇。 每種都有其用途，儘管響應式編輯器的優勢在於為設計師提供了不止一個視角來看待他們的工作——特別是他們的工作如何響應不同的屏幕尺寸。 鑑於當今的屏幕種類繁多，這一點至關重要。

沒有一種最好的工具。 選擇最適合您的那個。 在本教程中，我們將介紹 Illustrator。 原因如下：

• 儘管 Illustrator 不是真正的響應式工具，但它的畫板使您能夠從移動優先的方法開始，並使用預設或可自定義的斷點快速構建到桌面版本。
• 其可定制的網格允許設計的一致性。
• 它允許您通過單擊和設置尺寸來為線框創建精確尺寸的框。
• 如果您更喜歡 Photoshop 製作更高保真度的模型，您可以從 Illustrator 複製並粘貼您的內容線框以奠定基礎。

注意：如果您更喜歡在響應式進行線框圖或原型設計時使用代碼，請隨時跳至底部的“後續步驟”部分以獲取其他有用的資源。

移動優先的內容線框方法

對於這個簡短的教程，我們將使用 Illustrator 作為移動優先方法的一部分，讓我們專注於最重要的內容。 我們將創建五個視口來為響應式內容線框奠定基礎。

1. 創建文件

在 Illustrator 中，創建五個具有以下寬度和高度（以像素為單位）的新文檔：

• 320 × 800
• 768 × 1200
• 992 × 1400
• 1224 × 1600
• 1440 × 1800

（根據您使用的 Illustrator 版本，您還可以在同一文檔中創建不同的畫板。）

2. 創建容器

在 320 像素寬的文檔中，製作七個用中性灰色填充的無襯裡框。

3. 創建標籤

在每個框上放置文本 — 按降序排列：頁眉、主視頻、視頻 02、視頻 03、視頻 04、視頻 05 和頁腳。 我使用白色文本與相對較暗的框形成對比。

4.調整盒子的大小

使主視頻框比其他框大一點，以表明其優先級。 如有必要，縮小頁眉和頁腳 -但保持全寬。

5.複製盒子

現在您有了它們的相對大小和標籤，將這些框複製到其他文檔或畫板上。

根據需要調整它們的大小，並記住這些框是近似的。 它們代表內容的存在，而不是內容的精確大小或間距。

下一步

創建內容參考線框並沒有什麼大的揭示或其他令人興奮的東西。

它們適合內容清單和低保真線框之間的工作流程。 這是因為他們的目的只是建立一個信息層次結構，如果涉及到客戶，讓他們更多地思考內容和信息流的概念，而不是實際的內容本身。

整個過程更像是“如何……”的對話，而不是“這是如何……”一旦每個人都同意，該項目的下一次迭代將涉及將實際的低保真內容倒入構成內容參考線框的框中。

正如我們所見，您可以通過將流行網站解構為其基本構建塊來練習內容線框圖。 從粗略的信息容器開始，添加真實內容，然後開始將它們雕刻成更最終的形式。 這樣做，您將能夠更好地圍繞用戶真正關心的內容進行設計：內容。

• UXPin 這個協作設計工具可用於佈置粗略的線框，然後添加交互以創建快速原型。
• “響應式設計工作流程”（幻燈片），Stephen Hay，Mobilism 2012 這些幻燈片簡明扼要地總結瞭如何高效地設計響應式佈局。 Hay 在審核內容、確定內容優先級、線框內容和使用開發框架方面提供了一些很好的建議。
• “內容參考線框 (PDF), Neil Hao 這是對基於代碼的內容線框方法的一個很好的概述，通過真實的設計場景進行了描述。
• “Mobile First”，設計機構 ZURB University ZURB 提供了這個有用的資源門戶，它為內容線框圖提供了上下文。
• “Dive Into Responsive Prototyping With Foundation”，Jonathan Smiley，A List Apart Smiley 的有用教程展示瞭如何在代碼中對響應式設計進行線框圖和原型製作。 雖然它並不完全是移動優先的，但 Smiley 很好地解釋瞭如何跨設備一致地顯示內容。
• “Design Last”，Rik Schennink，Smashing Magazine 這篇有趣的文章介紹瞭如何首先使用內容和 HTML 進行響應式設計。 這樣做，您將從一開始就將內容與結構配對。