CMS 網頁設計：動態內容應用指南

用於動態內容驅動的在線媒體世界的 UI/UX 技術。

絕大多數 Web 應用程序和移動應用程序，尤其是在線媒體領域的應用程序，都由 WordPress、Drupal 等內容管理系統 (CMS) 提供支持。 這些系統的出現是為了滿足內容為王且動態不斷變化的互聯網時代的需求。

過去，大多數網站都是靜態的——不是為了無縫地發展和增長而構建的。 現在它們被認為是生命系統，並且有一種為它們設計的最佳方法。

以下是數字設計師的指南，他們希望將他們的曲目擴展到靜態網站和登錄頁面之外，並開始有效地為動態內容驅動的應用程序進行設計，例如新聞網站、博客，甚至是用戶定期發佈內容的社交網絡。 為了實現這種轉變，設計人員需要了解這些類型的應用程序通常是如何構建的，並在設計過程中採用“內容優先”的思維方式。

CMS 驅動的應用程序中的 CMS 網頁設計 IA 模式

設計人員應該對 CMS 驅動的應用程序中的常見信息架構模式有一個心智模型，尤其是在處理 UX（用戶體驗）並從頭開始設計時。 這些應用程序有幾種常見且不可或缺的頁麵類型，它們通常以可預測的方式連接在一起，其中“帖子”作為核心組件。 應用程序可以包含的帖子數量通常沒有理論上的限制。

首頁

這是正式的入口點，通常是主頁的同義詞。 這是非常常見的，尤其是當有很多內容要訪問時，因為它有助於突出或突出最重要的內容。 此頁面通常會顯示帖子的縮寫版本，而不會透露太多細節。

發布頁面

如果“帖子”是 CMS 驅動的應用程序的核心單元，那麼帖子頁面就是顯示帖子的所有公開詳細信息的地方。 它可能是應用程序中唯一真正關鍵的頁面，它可能是關於特定事件、人員、組、產品等的文章頁面或信息頁面。在一些較大的應用程序中，可能有多種類型的帖子和帖子指定的頁面。

列表/類別頁面

這種類型的頁面有助於讓用戶瀏覽所有可用的帖子，並按類別、屬性或其他條件過濾它們。 當要滾動的內容量很大時，排序選項也很常見。

搜索頁面

用於搜索的專用頁面對於較小的應用程序不是必需的，但總是很有幫助的。 有時，它可以與類別/列表頁面合併或集成。

用戶/作者簡介

此頁面專用於創建一個或多個帖子的每個作者或用戶。 它有時在小型新聞網站和單作者博客上被放棄，但對於大型多作者新聞網站、內容驅動的社交網絡和其他用戶生成的應用程序來說至關重要。 一種常見且有用的做法是在此頁面上包含所有用戶帖子的列表。

用戶主頁或儀表板

此頁面顯示與登錄用戶相關的信息（包括帖子），通常以個人新聞源或推薦內容、最近活動和狀態的形式。 用戶家對於門控應用程序和社交網絡應用程序是必不可少的，但對其他人來說是可選的或無關緊要的。

動態內容的內容驅動 UI 設計

內容先於設計。 沒有內容的設計不是設計，而是裝飾。 ——杰弗裡·澤德曼

當設計 CMS 驅動的應用程序的用戶界面時，重要的是要記住內容總是驅動設計，而不是相反。 近年來，越來越多的媒體公司採用了內容優先的方法，並取得了良好的效果。 考慮到這一點，以下是 UI 設計師在這些類型的項目中涉足時要牢記的建議列表。

在定義樣式之前考慮內容

在內容驅動的應用程序中，視覺風格應該支持整個內容。 儘管這些類型的應用程序的性質通常意味著內容將是可變的並且不完全可預測，但通常它會適合整體主題。 因此，在發展品牌美學時，實際內容可以成為靈感的重要來源。 同時，如果設計師過於依賴特定的內容並開發出過於有針對性的風格，這也可能是一種責任。

請務必了解誰將定期創建內容。

在 CMS 驅動的應用程序中，內容主要由內容創建者而非設計者決定。 因此，通常期望設計師將產品外觀的部分控制權交給定期發佈內容的人——即編輯、作者、管理員，甚至是通過公共表單輸入內容的隨機用戶。

根據商定的過程，設計師可以為選擇圖像、準備和裁剪圖像設置一些標準和指導方針，甚至在文本樣式上設置一些參數。 然而，總體而言，設計師有責任以這樣一種方式塑造應用程序的前端，即內容創建者的低水平工作（例如糟糕的照片或過長的標題）不會降低質量設計在很大程度上。

盡可能使用真實內容進行設計。

因為內容的類型在 CMS 驅動的應用程序中變化很大，所以花時間查看大量樣本是有意義的。 理想情況下，在新聞網站或博客的情況下，設計師會在設計過程的一開始就與內容創建者合作，並要求故事示例、產品圖片、視頻或其他任何可以幫助使設計模型感覺真實的東西盡可能。

使用真實內容進行設計比使用庫存照片和虛擬文本更可取，甚至可以與線框圖或原型製作並行完成，因為它有助於限制可能發生的任何意外。

當設計師用精心預先選擇或經過照片處理的圖像和完美定制的標題填充設計時，看起來令人驚嘆的設計並不少見，然後在投入生產時看到它陷入低迷。

不要對風格過於具體。

在設置視覺風格時，不要只反映單一的情緒、流派、故事或主題來歸類內容。 相反，對於可能在內容中發揮作用的整個音調範圍，保持簡單和通用。

對於迎合小眾受眾的應用程序而言，有時可以接受非常具體的外觀和感覺，但在當今市場上往往會顯得過時且缺乏大眾吸引力。 此外，它可能會限制未來增長和擴展到新垂直領域的前景。

為了確保設計適用於廣泛的內容，通常最好通過模擬同一頁面的一個或兩個附加版本來測試它，這些版本具有明顯不同的主題，但仍在可發布的主題範圍內。

將每個頁面設計為不同內容的模板

將應用程序中的每種類型的頁面視為填充各種媒體項目（圖像、小部件、視頻、文本塊等）的模板或藍圖，並了解哪些項目會發生變化，哪些項目可以保持不變.

務必建立一套清晰的規則和一致性。

僅僅因為內容可能從一個頁面到另一個頁面變化很大，並不意味著不應該有一套一致的格式來呈現內容。

保持標題和圖像大小可預測並在頁面內從上到下觀察邏輯信息層次結構有很多好處，其中一個是它可以在整個應用程序中創造一種和諧感並保持用戶正確定位。

為了更輕鬆地實現這一點，請為界面的盡可能多的部分（包括標題、分隔線、按鈕、小部件和設計程序中的其他元素）開發一組模塊化、可重用的樣式組件。 以合理的方式重複使用這些組件，將變化保持在最低限度。 Toptal 設計師 Wojciech Dobry 的這篇文章提供了一個很好的指南，用於在 Sketch 中創建 UI 庫。

不要對帖子進行個性化的設計處理。

盡量避免在頁面的同一部分發布過多的樣式和格式差異。 這包括更改圖像尺寸、添加特殊的文本佈局或字體，或者使用定制的裝飾或圖形來填充單個圖像。 從開發人員或內容管理員的角度來看，這不僅會破壞視覺和諧，而且通常會浪費資源並拖累性能和維護。

不要假設內容總是適合指定區域。

由 CMS 驅動的應用程序的動態特性的必然結果之一是出現在給定顯示區域中的文本量的長度可能會有所不同。 通常，可以對 CMS 中的文本設置字符限制以保持合理，但設計人員絕不應盲目假設文本塊始終適合一定數量的行。

不僅單個字符的寬度會有所不同，而且通過執行非常低的字符限制來嚴重限製作家的創造力也是不習慣的。 這就是為什麼用上面討論的真實內容測試設計總是好的，並用不同的文本樣本審查每個區域。

為了確定最壞的情況，暫時插入一系列寬字母字符（例如，如果內容是英文，則為“w”），直到達到商定的字符限制。

讓內容脫穎而出

在內容驅動的應用程序中，內容應該始終保持在前面和中心位置，風格品牌元素通常應該後退。

務必使用乾淨、淺色、中性的背景顏色環繞動態內容。

通常優選白色或灰白色。 這允許許多不同類型的圖像（淺色和深色）彈出頁面而不會被遮蓋。

一定要使圖像大而有威嚴。

大圖像，尤其是照片，比其他任何東西都更能有效地吸引訪問者的注意力。

請保持標題和正文大而且可讀性強。

對於文本較多的頁面，請選擇清晰易讀的 Web 字體，並在所有設備（台式機、移動設備和平板電腦）上以大而舒適的尺寸部署它們。

不要過度設計。

通常，數字和印刷設計師喜歡在他們的設計中部署創意裝飾或自由發揮品牌元素。 一般來說，雖然某些視覺效果有時可以增強內容驅動的設計，但它們也很容易分散對內容的注意力，這是用戶訪問新聞網站或博客時真正感興趣的內容。

隨著圖像的變化，此類效果還可能使應用程序的外觀更難以預測。 通常最好檢查裝飾字體、粗體圖案、插圖、重疊圖像、半透明圖像和圖像周圍的花哨框架。 最後，與特色內容相比，保持徽標相對較小。

不要在動態圖像附近使用彩色背景。

大膽，明亮的顏色現在已經出現，但通常最好避免在可能發生變化的圖像周圍應用大量飽和顏色或彩色背景，因為這會產生不可預測的結果，包括顏色衝突和過度刺激，分散內容。

不要使用深色背景來覆蓋整頁文本。

研究表明，在內容繁重的應用程序中，深色背景下的淺色文本比淺色背景上的深色文本對眼睛的壓力更大。 深色背景可能適用於頁面的特殊部分或文本數量有限的幻燈片區域，但不太適合覆蓋長文本塊。

了解圖像和其他媒體如何在後端工作

內容管理系統在處理媒體（例如圖像、視頻和動畫文件）的方式上可能會有所不同，有時開發人員會出於效率目的對媒體設置限制。

例如，圖像的縮放和裁剪方式以及可以生成和顯示的尺寸和裁剪的數量可能存在限制。 因此，在進行設計之前，與應用程序開發人員或內容管理員協商以確定什麼是實用的（以及他們願意將額外的開發資源投入什麼）是很重要的。

一定要找出支持的媒體格式。

雖然通常情況下應用程序支持圖像，但最好諮詢內容管理器，了解可以存儲和顯示哪些類型的視頻、音頻和其他多媒體文件，以及它們可以在多大程度上進行可視化定制。

例如，它有助於確定是否要構建自定義視頻播放器，或者在頁面上嵌入 YouTube 或 Vimeo 視頻是否是唯一的選擇。 就 YouTube 而言，視頻的嵌入、縮放和換膚方式有特定的標準和限制。

不要為圖像指定許多不同的裁剪和大小。

雖然為圖像創建大量單獨的裁剪通常在技術上是可行的，但這樣做通常會產生負面影響。 例如，默認情況下，WordPress CMS 會自動以單一比例自動生成多種尺寸的上傳圖像，但只提供一個選項來創建一個單獨裁剪的縮略圖。

將每張圖片裁剪成額外的比例不僅需要安裝一個特殊的插件或預先開發一個專用工具，而且還對編輯人員提出了額外的要求，因為這需要他們為上傳的每張圖片做額外的工作。 有時這也會使選擇可行的圖像變得更加困難，從而進一步減慢工作流程。

請確定是否需要支持遺留內容。

重新設計遺留應用程序時，有時可用的選項比從頭開始新應用程序時更少。 這是因為已經有一個現有的媒體存儲庫，從開發的角度來看，將其全部遷移為新格式通常是一項昂貴或不切實際的操作。

為內容編輯器提供多種設置文本樣式的方法

文本內容是 CMS 驅動的應用程序的關鍵元素，尤其是在新聞站點或博客中，編輯或作者會發現，當他們自行其是時，他們會尋找設置文本樣式和格式的方法來強調某些點，分解內容，添加引用，創建列表，鏈接到其他內容，並完成許多其他任務。

許多流行的 CMS 平台（如 WordPress）默認提供文本格式選項，但如果設計師未能計劃如何根據他們的設計自定義這些樣式，結果將是隨機的、簡單的或不受歡迎的。

為所有常見的文本格式化方式進行設計。

特別是對於博客和新聞網站，花時間為開發人員提供所有常見的文本格式化方式的樣式規則是值得的，包括：粗體和斜體文本、標題和副標題、編號和項目符號列表、塊引用、標題和超鏈接。

不要給內容創作者過多的風格控制。

向編輯人員開放過多的設計控制通常不是一個好主意。 允許他們在頁面內構建自己的佈局或以不止一種方式為文本著色等事情對某些人來說可能會令人生畏或耗時，並且在其他人手中會產生醜陋、不一致的結果。

內容驅動設計的未來模式

隨著增強現實 (AR) 等新技術的出現，內容驅動設計的新範式已經開始出現。 增強/混合現實空間中的 CMS 驅動的應用程序目前處於起步階段，它們使用真實世界的對象和/或場景作為內容的關鍵部分。

特定移動用戶的查看環境、照明條件以及與文本和插入的 3D 對象的物理接近度都會影響最終結果。 這顯著改變了內容管理的概念，並增加了額外的不可預測性，應在設計過程中加以考慮。

CMS 網頁設計有點不同

為 CMS 驅動的應用程序設計意味著將內容放在首位，樣式放在第二位。 這也意味著在設計內容中規劃和接受可變性和不可預測性。 隨著新興技術改變內容本身的性質，適應無數潛在結果的能力在 CMS 網頁設計中將變得更加重要。