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 网页设计中将变得更加重要。