用于在线媒体动态内容驱动世界的UI/UX技术.

绝大多数的web应用和移动应用, 尤其是在网络媒体领域, 是由 内容管理系统(CMS) 比如WordPress、Drupal等. 这些系统的出现是为了满足互联网时代的需求，在这个时代，内容为王，动态变化不断，频繁.

在过去，大多数网站都是静态的——不能无缝地发展和增长. 现在它们被认为是有生命的系统，并且有一种最佳的设计方法.

下面是一个指南 数字设计师 希望扩大他们的剧目超越静态网站和登陆页面，并开始 设计 对于动态内容驱动的应用程序，如新闻网站， 博客，甚至是用户定期发布内容的社交网络. 为了实现这个转变, 设计师需要了解这些类型的应用程序的典型结构，并在设计过程中采用“内容优先”的思维方式.

CMS驱动应用程序中的CMS网页设计IA模式

设计师应该对共性有一个心理模型 信息架构 模式在cms驱动的应用程序中, 尤其是在UX(用户体验)和从头开始设计的时候. 这些应用程序中有几种常见且不可或缺的页面类型, 它们通常以一种可预测的方式连接在一起，其中“帖子”是核心组件. 一个应用程序可以包含的帖子数量通常没有理论上的限制.

首页

这是正式的入口点，通常是主页的同义词. 这是非常普遍的, 特别是当有很多内容需要访问时，因为这有助于突出或突出最重要的内容. 这个页面通常会显示帖子的缩略版本，而不会透露太多细节.

文章页面

如果“post”是cms驱动的应用程序的核心单元，那么post 页面 是否显示有关帖子的所有公开详细信息. 它可能是应用程序中唯一真正关键的页面, 它可以是一个关于某一特定事件的文章页面或信息页面, 人, 集团, 产品, 等. 在一些较大的应用程序中，可能会指定多种类型的帖子和帖子页面.

/类别列表页面

这种类型的页面有助于用户浏览所有可用的帖子, 然后按类别过滤, 属性, 或者其他标准. 当要滚动浏览的内容数量很大时，排序选项也很常见.

搜索页面

对于较小的应用程序来说，专用的搜索页面不是必需的，但总是很有帮助的. 有时，它可以与类别/列表页面合并或集成.

用户/作者简介

这个页面是专门为每个作者或用户创建一个或多个帖子. 小型新闻网站和单一作者的博客有时会放弃这种做法, 但是对于大型多作者新闻网站来说是至关重要的, 内容驱动的社交网络, 以及其他用户生成的应用程序. 一个常见且有用的做法是在该页面上包含所有用户帖子的列表.

用户主页或仪表板

此页面显示与登录用户相关的信息(包括帖子), 通常以个人新闻提要或推荐内容的形式出现, 最近的活动, 和状态. 用户家对于封闭式应用程序和社交网络应用程序至关重要, 但对其他人来说是可有可无或无关紧要的.

动态内容的内容驱动UI设计

内容优先于设计. 没有内容的设计不是设计，而是装饰. – Jeffrey Zeldman

是时候设计cms驱动的应用程序的用户界面了, 重要的是要记住，内容总是驱动设计, 而不是反过来. 近年来，越来越多的媒体公司采用了内容优先的方法，并取得了良好的效果. 考虑到这一点，这里有一些建议 UI设计人员 要记住，当他们在这些类型的项目中动手时.

在定义样式之前先考虑内容

在内容驱动的应用程序中，视觉样式应该支持整个内容. 尽管这些类型的应用程序的性质通常意味着内容将是可变的，而不是完全可预测的, 通常情况下，它将符合整体主题. 因此，在开发品牌美学时，实际内容可以成为灵感的重要来源. 同时, 如果设计师过于依赖于特定的内容，并开发出一种过于有针对性的风格，这也可能成为一种负担.

你是否知道谁将定期创建内容.

在cms驱动的应用程序中，内容主要由内容创建者决定，而不是设计人员. 因此, 人们通常期望设计师将产品外观的一些控制权交给定期发布内容的人——即编辑, 作者, 管理员, 甚至是通过公共表单输入内容的随机用户.

根据商定的流程， 设计师 是否可以为选择图像制定一些标准和指导方针, 准备和收割, 甚至在文本样式上设置了一些参数. 然而, 整体, 设计人员有责任塑造应用程序的前端，使内容创建者的工作不达标, 比如一张糟糕的照片或者很长的标题, 不会在很大程度上降低设计质量吗.

尽可能使用真实的内容进行设计.

因为在cms驱动的应用程序中，内容的类型变化很大, 花时间观察大量样本是有意义的. 在理想的情况下, 在新闻网站或博客的情况下, 设计师将在设计过程的一开始就与内容创作者合作，并要求提供故事示例, 产品图片, 视频, 或者其他任何可以帮助使设计模型感觉尽可能真实的东西.

使用真实内容设计比使用库存照片和虚拟文本更可取，甚至可以与线框图或原型设计并行进行, 因为它有助于限制任何可能发生的意外.

这并不罕见的设计看起来令人惊叹，当一个 设计师 填充它与精心预选或ps图像和完美剪裁的标题, 一旦投入生产，它就会陷入低迷.

不要在风格上过于具体.

设置视觉样式时, 不要把内容只反映一种情绪, 类型, 故事, 或主题. 而不是, 对于可能在内容中发挥作用的整个音调范围，保持简单和通用.

对于迎合小众用户的应用程序来说，非常特定的外观有时是可以接受的, 但在今天的市场上，它们往往会显得过时，缺乏大众吸引力. 此外，它可能会限制未来在新垂直领域的增长和扩张前景.

确保设计适用于广泛的内容, 通过模拟同一页面的一个或两个具有明显不同主题的额外版本来测试它通常是一个好主意，但仍然在可发布的主题范围内.

将每个页面设计为一个 Template 针对不同内容

将应用程序中的每种类型的页面视为各种媒体项(图像)的模板或蓝图, 小部件, 视频, 文本块, 等.)填写，并了解哪些项目会发生变化，哪些项目可以保持不变.

是否建立了一套清晰的规则和一致性.

仅仅因为内容可能在不同的页面之间变化很大，并不意味着不应该有一组一致的格式来显示内容.

保持标题和图像大小可预测，并遵循逻辑 信息层次结构 在页面中从上到下有很多好处, 一个是它在整个应用程序中创造了一种和谐的感觉，并使用户保持正确的导向.

为了更容易地做到这一点, 开发模块, 为尽可能多的接口部分提供可重用的样式组件集, 包括标题, 分规, 按钮, 小部件, 以及设计程序中的其他元素. 按照逻辑方案重复使用这些组件，尽量减少变化. 这 Toptal设计师Wojciech Dobry的文章 介绍了在Sk等h中创建UI库的一个很好的指南.

不要对帖子进行个性化的设计处理.

尽量避免在页面的同一部分中给帖子太多风格和格式上的差异. 这包括更改图像尺寸, 添加特殊的文本布局或字体, 或者用定制的装饰或图形来膨胀个人图像. 这不仅会破坏视觉上的和谐, 但是从开发人员或内容管理人员的角度来看，这通常是对资源的浪费，并且会拖累性能和维护.

不要认为内容总是适合指定的区域.

cms驱动的应用程序的动态性不可避免的结果之一是，在给定的显示区域中出现的文本数量可能在长度上变化. 通常，可以在CMS中的文本上设置字符限制以保持合理，但是 设计师 永远不要盲目地假设一个文本块总是适合一定数量的行.

不仅单个字符的宽度不同, 但是，通过强制执行非常低的字符限制来严格限制作家的创造力也是不习惯的. 这就是为什么用上面讨论的真实内容测试设计总是好的, 用不同的文本样本来检查每个区域.

为了确定最坏的情况, 临时插入一个宽字母序列(如“w”，如果内容是英文)，直到达到商定的字符限制.

让内容脱颖而出

在内容驱动的应用程序中, 内容应该始终放在最前面和中心位置, 而风格化的品牌元素应该逐渐消失.

是否要用干净、明亮、中性的背景色环绕动态内容.

白色或灰白色通常更可取. 这允许许多不同类型的图像, 光明与黑暗, 跳出页面而不被遮蔽.

是否要制作大而威严的图像.

大图片，尤其是照片，比其他任何东西都能更有效地抓住访问者的注意力.

标题和正文要大，可读性强吗.

对于文本较多的页面, 选择易读的网页字体, 并大规模部署它们, 适用于所有设备的舒适尺寸-桌面, 移动, 和平板电脑.

不要过多的.

经常, 数字和印刷设计师喜欢在他们的设计中使用创造性的装饰或自由地赋予品牌元素. 在一般情况下, 虽然某些视觉效果有时可以增强内容驱动的设计, 它们也很容易分散人们对内容的注意力, 当用户访问新闻网站或博客时，他们真正感兴趣的是什么.

这种效果还会使应用程序的外观随着图像的变化而变得难以预测. 通常最好的做法是对装饰性字体进行检查， 大胆的图案，插图，重叠图像，半透明图像，以及图像周围的花式框架. 最后，与特色内容相比，保持标志相对较小.

不要在动态图像附近使用彩色背景.

大胆的, 现在流行鲜艳的颜色, 但通常最好避免使用大量的饱和色, 或者彩色背景, 围绕可能发生变化的图像，因为这会产生不可预测的结果, 包括色彩冲突和过度刺激, 从内容上分散注意力.

不要用深色背景覆盖整页文字.

研究表明，在内容较多的应用程序中，深色背景下的浅色文本比浅色背景下的深色文本对眼睛的压力更大. A 暗的背景 是否可以很好地用于页面的特殊部分或文本数量有限的幻灯片区域, 但不适合覆盖长文本块.

了解图像和其他媒体在后端如何工作

内容管理系统在处理媒体的方式上各不相同, 比如图像, 视频, 以及动画文件, 有时，开发人员会出于效率的考虑，故意对媒体设置约束.

例如, 在如何缩放和裁剪图像以及可以生成和显示的大小和裁剪的数量方面可能存在限制. 因此, 在进行设计之前，咨询应用程序开发人员或内容管理人员以确定什么是实际的(以及他们愿意投入额外的开发资源)是很重要的.

一定要找出支持哪些媒体格式.

通常情况下，应用程序会支持图像, 最好向内容经理咨询视频的类型, audio, 以及其他多媒体文件的存储和显示以及可视定制的程度.

例如, 它有助于找出是否将构建自定义视频播放器，或者是否在页面上嵌入YouTube或Vimeo视频是唯一的选择. 以YouTube为例, 视频如何嵌入有特定的标准和限制, 按比例缩小的, 和皮肤.

不要为图像指定许多不同的作物和大小.

虽然它在技术上通常是可行的，为一个图像创建许多单独的作物, 这样做通常会产生负面影响. 例如, 默认情况下, WordPress CMS会自动以单一比例生成上传图像的几种大小, 但只提供了一个单独裁剪的缩略图创建的选项.

裁剪每个图像到额外的比例不仅需要安装一个特殊的插件或预先开发一个专用的工具, 但也对编辑提出了额外的要求，因为它要求他们为上传的每张图片做额外的工作. 有时，这也使选择可行的图像更加困难，进一步减慢工作流程.

确定是否需要支持遗留内容.

重新设计遗留应用程序时, 有时可用的选项甚至比从头开始一个新应用程序时更少. 这是因为已有一个媒体存储库, 从开发的角度来看，将所有这些迁移到新的格式通常是一项昂贵或不切实际的操作.

为内容编辑器提供多种设置文本样式的方法

文本内容是cms驱动的应用程序的关键元素, 尤其是在新闻网站或博客上, 你会发现编辑或作家, 当他们自生自灭时, 寻找方法来设计文本的样式和格式，以强调某些要点, 拆分内容, 添加引用, 创建列表, 链接到其他内容, 并完成一些其他任务.

许多流行的CMS平台，如 WordPress 默认情况下提供文本格式化选项，但如果 设计师 未能计划如何根据其设计定制这些样式, 结果将是随机的, 平原, 或不受欢迎的.

是否为所有常见的文本格式化方式进行设计.

尤其是博客和新闻网站, 花时间为开发人员提供所有常见的文本格式化方式的样式规则是值得的，这些方式包括:粗体和斜体文本, 标题和副标题, 编号和项目符号列表, 您, 标题, 和超链接.

不要给内容创作者太多的风格控制.

敞开心扉通常不是个好主意 太 编辑有很大的设计控制权. 允许他们在页面中构建自己的布局或以多种方式为文本上色，这对某些人来说可能是令人生畏或耗时的，而且会产生难看的效果, 不一致的结果在别人手里.

内容驱动设计的未来模式

随着增强现实(AR)等新技术的出现，, 内容驱动设计的新范例已经开始出现. cms驱动的应用程序中 增强/混合现实空间, 哪些目前还处于起步阶段, 使用现实世界的对象和/或场景作为内容的关键部分.

特定移动用户的查看环境, 照明条件, 文本和插入的3D对象的物理接近度都会影响最终结果. 这极大地改变了内容管理的概念，并在设计过程中增加了一层不可预测性.

CMS网页设计有点不同

为cms驱动的应用程序设计意味着把内容放在第一位，样式放在第二位. 这也意味着在设计时要考虑并接受内容的可变性和不可预测性. 随着新兴技术改变内容本身的性质，适应无数潜在结果的能力将在CMS网页设计中变得更加重要.