CMS Web设计（动态内容应用程序指南） _UX设计

本文概述

CMS驱动的应用程序中的CMS Web设计IA模式
内容驱动的动态内容UI设计
内容驱动设计的未来模式
CMS网页设计略有不同

用于动态内容驱动的在线媒体世界的UI / UX技术。
大多数Web应用程序和移动应用程序(尤其是在在线媒体空间中)都由诸如WordPress, Drupal等内容管理系统(CMS)支持。这些系统的出现是为了满足互联网时代的需求, 内容是动态的, 不断变化的, 并且是不断变化的。
过去, 大多数网站都是静态的, 并不是为了无缝发展和增长而构建的。现在, 它们被认为是生命系统, 并且有一种针对它们进行设计的最佳方法。
以下是数字设计师的指南, 他们希望将其功能扩展到静态网站和登录页面之外, 并开始为动态内容驱动的应用程序(例如新闻站点, 博客甚至用户定期发布内容的社交网络)进行有效设计。为了进行这种过渡, 设计人员将需要了解这些类型的应用程序的典型结构, 并在设计过程中采用” 内容优先” 的思维方式。
CMS驱动的应用程序中的CMS Web设计IA模式设计人员应该对CMS驱动的应用程序中的通用信息体系结构模式有一个心智模型, 尤其是在使用UX(用户体验)并从头开始设计时。这些应用程序共有几种页面类型, 这些页面类型是不可或缺的, 它们通常以可预测的方式连接在一起, 其中” 后” 作为核心组件。通常, 应用程序可以包含的帖子数量没有理论上的限制。

文章图片
首页
这是正式的入口点, 通常与主页同义。这是非常常见的, 尤其是在要访问的内容很多时, 因为它有助于突出显示或显示最重要的内容。此页面通常显示帖子的缩写版本, 而不会显示太多细节。
帖子页
如果” 帖子” 是CMS驱动的应用程序的核心单元, 则帖子页面将显示有关该帖子的所有公共详细信息。它可能是应用程序中唯一真正关键的页面, 它可以是文章页面或有关特定事件, 人员, 组, 产品等的信息页面。在某些大型应用程序中, 可能有多种类型的帖子和帖子指定的页面。
列表/类别页面
这种类型的页面有助于用户浏览所有可用帖子, 并按类别, 属性或其他条件对其进行过滤。当要滚动的内容量很大时, 排序选项也很常见。
搜索页面
专用的搜索页面对于较小的应用程序不是必不可少的, 但始终会有所帮助。有时, 它可以与类别/列表页面合并或集成。
用户/作者资料
此页面专用于创建一个或多个帖子的每个作者或用户。它有时在小型新闻网站和单作者博客上被遗弃, 但是对于大型多作者新闻网站, 内容驱动的社交网络以及其他用户生成的应用程序而言, 这至关重要。一种常见且有用的做法是在此页面上列出所有用户的帖子。
用户主页或仪表板
此页面显示与登录用户有关的信息(包括帖子), 通常为个人新闻或推荐内容, 近期活动和状态的形式。用户主目录对于门控应用程序和社交网络应用程序必不可少, 但对于其他应用程序则是可选的或无关紧要的。
内容驱动的动态内容UI设计

内容先于设计。没有内容的设计不是设计, 而是装饰。 –杰弗里·泽德曼(Jeffrey Zeldman)

当需要设计CMS驱动的应用程序的用户界面时, 请务必记住, 内容始终是设计的驱动力, 而不是相反。近年来, 越来越多的媒体公司采用了内容优先的方法, 并取得了可靠的结果。考虑到这一点, 这里列出了一些建议, 供UI设计人员在这些类型的项目中投入使用时要牢记。
在定义样式之前考虑内容
在内容驱动的应用程序中, 视觉样式应支持整个内容。尽管这些类型的应用程序的性质通常意味着内容将是可变的并且不是完全可预测的, 但通常情况下, 内容将适合整个主题。因此, 在发展品牌美学时, 实际内容可能会成为灵感的重要来源。同时, 如果设计师过于依附于特定的内容并形成过于针对性的风格, 这也可能是一种责任。

文章图片

文章图片
来自两个不同CMS驱动新闻网站的示例, 根据内容展示样式。
一定要了解谁将定期创建内容。
在CMS驱动的应用程序中, 内容主要由内容创建者而不是设计者确定。因此, 通常期望设计师将对产品外观的某些控制权放弃给定期发布内容的人, 即编辑者, 作者, 管理员, 甚至是通过公共形式输入内容的随机用户。
根据约定的过程, 设计人员可以设置一些标准和准则来选择图像, 准备和裁剪图像, 甚至在文本样式上添加一些参数。但是, 总的来说, 设计者有责任对应用程序的前端进行整形, 以使内容创建者的工作质量不佳(例如照片质量差或标题太长)不会降低质量。在很大程度上设计。
尽可能用真实的内容进行设计。
由于内容类型在CMS驱动的应用程序中可能有很大差异, 因此花时间查看大量内容是有意义的。理想情况下, 对于新闻网站或博客, 设计人员应在设计过程的一开始就与内容创建者合作, 并要求提供故事示例, 产品图片, 视频或其他任何可以使设计实体模型真实的东西。尽可能。
使用真实内容进行设计比使用图片和虚拟文字更可取, 甚至可以与线框图或原型制作同时进行, 因为这有助于限制可能出现的任何意外情况。
当设计师用精心选择的照片或经过精心挑选的图像以及经过精心剪裁的标题填充设计, 然后看到其进入生产低迷状态时, 其外观令人惊叹的情况并不少见。
不要对样式过分具体。
设置视觉样式时, 不要只反映一种情绪, 体裁, 故事或主题, 就可以使内容深刻。相反, 对于可能在内容中起作用的整个音调范围, 使其保持简单和通用。
有时, 针对特定受众的应用程序可以接受非常特殊的外观, 但是在当今市场上, 这种应用程序经常会过时且缺乏大众吸引力。此外, 它可能会限制未来增长和扩展到新的垂直市场的前景。
为了确保设计适用于广泛的内容, 通常最好通过模拟同一页面的一个或多个附加版本或两个版本, 但主题仍在可发布主题范围之内来对其进行测试。

文章图片
在这两种动态网站设计和品牌视觉风格的方法中, 左侧的方法无法说明所使用的全部内容。
将每个页面设计为用于内容变化的模板
将应用程序中的每种类型的页面视为要填充的各种媒体项目(图像, 小部件, 视频, 文本块等)的模板或蓝图, 并知道哪些项目可能会更改, 哪些项目可以保持固定。
必须建立一套清晰的规则和一致性。
内容在一页之间的差异可能很大, 这并不意味着就不应采用一致的格式来呈现内容。
保持页眉和图像大小可预测并在页面中从上到下观察逻辑信息层次结构具有许多好处, 其中之一是, 它可以在整个应用程序中营造和谐的感觉, 并使用户保持正确的定向。
为了更轻松地实现此目的, 请为界面的尽可能多的部分开发一套模块??化的, 可重复使用的样式组件, 包括设计程序中的标题, 分隔线, 按钮, 小部件和其他元素。在逻辑方案中重复使用这些组件, 以使变化最小。 srcmini设计师Wojciech Dobry的这篇文章为在Sketch中创建UI库提供了很好的指南。
不要对帖子进行个性化的设计处理。
尽量避免使页面同一部分中的帖子在样式和格式上有太多差异。这包括更改图像尺寸, 添加特殊的文本布局或字体, 或使用自定义的装饰物或图形填充单个图像。这不仅会破坏视觉上的和谐, 而且从开发人员或内容管理员的角度来看, 通常会浪费资源, 并会拖累性能和维护。

文章图片
在此CMS网站设计比较中, 左侧的设计设置了太多类型的帖子格式, 为各个故事量身定制了文本样式并造成了不一致。
不要以为内容将始终适合指定区域。
CMS驱动的应用程序的动态性质的必然结果之一是, 出现在给定显示区域中的文本量可以在长度上变化。通常, 可以在CMS中的文本上设置字符限制, 以使内容保持合理, 但是设计人员切勿盲目地认为文本块将始终适合一定数量的行。
不仅单个字符的宽度会变化, 而且也不习惯通过强制执行非常低的字符限制来严重限制作家的创造力。这就是为什么总是如上所述测试具有真实内容的设计并用不同的文本样本审核每个区域总是好的。
为确保最坏的情况, 请临时插入一系列宽字母字符(如果内容为英文, 则为” w” ), 直到达到约定的字符数限制。

文章图片
使用伪文本而不是真实的标题, 可使设计人员对潜在的内容溢出视而不见。这可以通过测试和调整大小来纠正。
允许内容突出
在内容驱动的应用程序中, 应始终将内容放在首位和居中, 并且通常应减少样式品牌元素。
务必用干净, 浅色, 中性的背景色包围动态内容。
通常优选白色或灰白色。这允许许多不同类型的图像(浅色和深色)从页面弹出而不会被遮盖。
一定要使图像大而有力。
大图像(尤其是照片)比其他任何东西都能更有效地吸引访问者的注意力。
请确保标题和正文保持较大且易于阅读。
对于文本繁多的页面, 请选择易读的Web字体, 然后以较大且舒适的尺寸将它们部署在所有设备(台式机, 移动设备和平板电脑)上。

文章图片
GQStyle杂志是优秀CMS网页设计的一个示例, 它通过在设计中部署大图像和纯净可读的文本, 同时还留有宽大的空白, 使内容始终集中在其文章列表中。
不要过度设计。
通常, 数字和印刷设计师喜欢部署创造性的装饰或在设计中自由使用品牌元素。通常, 虽然某些视觉效果有时可以增强内容驱动的设计, 但它们也很容易使内容分散注意力, 这是用户访问新闻站点或博客时真正感兴趣的。
随着图像的变化, 这种效果还会使应用程序的外观难以预测。通常最好的做法是检查装饰字体, 粗体图案, 插图, 重叠图像, 半透明图像以及图像周围的奇特框架。最后, 与特色内容相比, 将徽标保持相对较小。

文章图片
尽管许多平面设计师可能喜欢The Outline主页上采用的高度程式化的美学, 但它掩盖了内容。
请勿在动态图片附近使用彩色背景。
目前已经出现了粗体, 鲜艳的颜色, 但是通常最好避免在可能发生变化的图像周围应用大量的饱和色或彩色背景, 因为这会产生无法预测的结果, 包括颜色冲突和过度刺激, 从内容上分散注意力。

文章图片
请勿使用深色背景覆盖整页文字。
研究表明, 在内容丰富的应用程序中, 深色背景上的浅色文本比浅色背景上的深色文本对眼睛的压力更大。对于页面或幻灯片放映区域的特殊区域(文本数量有限), 较暗的背景可能效果很好, 但不适用于覆盖较长的文本块。
了解图像和其他媒体在后端的工作方式
内容管理系统在处理媒体(例如图像, 视频和动画文件)的方式上可能会有所不同, 有时开发人员会出于效率目的故意对媒体设置约束。
例如, 在图像的缩放和裁剪方式以及可以生成和显示的尺寸和裁剪的数量方面可能存在限制。因此, 在进行设计之前, 请务必与应用程序开发人员或内容经理进行协商, 以确定什么是实用的(以及他们愿意投入额外的开发资源的)。
请确定支持哪些媒体格式。
通常认为应用程序将支持图像, 但最好与内容管理员联系, 以了解可以存储和显示哪些类型的视频, 音频和其他多媒体文件, 以及可以在视觉上对其进行自定义的程度。
例如, 它有助于确定是否将构建自定义视频播放器, 或者将YouTube或Vimeo视频嵌入页面是唯一的选择。对于YouTube, 在视频的嵌入, 缩放和换肤方式方面存在特定的标准和限制。
不要为图像指定许多不同的裁剪和尺寸。
虽然为图像创建大量单独的作物在技术上通常是可行的, 但这样做通常会产生负面影响。例如, 默认情况下, WordPress CMS会自动以单个比率生成多种尺寸的上载图像, 但仅提供一个选项来创建一个单独裁剪的缩略图。
将每个图像裁剪成其他比例, 不仅需要安装特殊的插件或预先开发专用的工具, 而且对编辑人员提出了额外的要求, 因为要求他们对上传的每个图像进行额外的工作。有时, 这也使选择可行的图像变得更加困难, 从而进一步降低了工作流程。

文章图片
WordPress CMS中的默认裁剪系统。
请确定是否需要支持旧内容。
重新设计旧版应用程序时, 与从头开始启动新应用程序相比, 有时可用的选项更少。这是因为已经存在媒体的现有存储库, 并且从开发的角度来看, 将其全部迁移为新格式通常可能是昂贵的操作或不切实际的操作。
为内容编辑者提供多种样式的文本样式
文本内容是CMS驱动的应用程序的关键要素, 尤其是在新闻网站或博客中, 人们会发现编辑者或作家在放任自己的设备时, 会寻找样式化和格式化文本的方式来强调某些要点, 分解内容, 添加引号, 创建列表, 链接到其他内容以及完成许多其他任务。
默认情况下, 许多流行的CMS平台(例如WordPress)会提供文本格式设置选项, 但是如果设计人员无法计划如何根据自己的设计来定制这些样式, 那么结果将是随机的, 纯净的或不受欢迎的。
针对所有常见的文本格式化方式进行设计。
尤其是对于博客和新闻网站, 花时间为开发人员提供可用于格式化文本的所有常见方式的样式规则, 这包括：粗体和斜体文本, 标题和副标题, 带编号和项目符号的列表, 块引用, 标题和超链接。

文章图片
具有动态内容网站的超链接和块引用的样式的帖子页示例, 该样式具有和不具有样式。
不要给内容创作者过多的风格控制。
向编辑者开放太多设计控件通常不是一个好主意。允许他们以多种方式在页面或彩色文本中建立自己的布局之类的事情对于某些人而言可能是艰巨或耗时的, 并在其他人的手中产生难看, 不一致的结果。
内容驱动设计的未来模式随着诸如增强现实(AR)之类的新技术的出现, 用于内容驱动设计的新范例已经开始出现。当前处于起步阶段的增强/混合现实空间中由CMS驱动的应用程序将真实对象和/或场景用作内容的关键部分。
特定移动用户的观看环境, 照明条件以及相对于文本和插入的3D对象的物理距离都可能影响最终结果。这极大地改变了内容管理的概念, 并增加了设计过程中应考虑的额外不可预测性层。

文章图片
Quartz新闻应用程序的AR功能的两个屏幕显示了影响内容的不同用例。
CMS网页设计略有不同 【CMS Web设计（动态内容应用程序指南）】针对CMS驱动的应用程序进行设计意味着将内容放在首位, 将样式放在第二位。这也意味着计划并拥抱人们正在设计的内容中的可变性和不可预测性。随着新兴技术改变内容本身的性质, 适应各种潜在结果的能力在CMS网站设计中将变得更加关键。