美国有线新闻新网站设计解决方案 　　本文介绍了美国有线电视新闻的网站设计解决方案，对其信息进行了重大的修改和重新发布。 　　这个新的设计是美丽的，干净的，有组织的和结构化的。它使它有趣的扫描眼睛和找到点击另一页的目标。 　　以前的设计有些混乱，没有吸引力；内容就像强制的非结构化空间。这种新的布局非常不同，包括许多现代网站设计和可用性最佳实践和趋势。 　　因此，让我们更仔细地看一看，不仅是显著的改进，而且还有一些值得怀疑的设计和可用性决策。 　　网格布局的启示 　　我使用网格灵感这个短语，因为新设计似乎是基于网格的，但是是否有精确的元素对齐 　　粗略地看一下他们的主要样式表，他们似乎松散地基于他们的样式和网格蓝图CSS框架。 　　他们的CSS重置与蓝图框架和蓝图有许多相似之处，包括在顶部，因此它将是基于他们有限知识的逻辑评估蓝图。 　　在分析了它们的主屏幕截图之后，我得出结论，如果它们是基于网格、网格的新布局，那么细节将是：16个列，每个列有12个px的水箱50个px（列之间的空间），总宽度为980个px。 　　以下是我的网格估计的可视化表示，它是PS图像处理软件的一个模型： 　　CNN.com的老设计 　　新的布局允许所有页面元素在980px宽的容器和笨重的容器中查找以前的设计，具有横跨整个页面的固定宽度内容部分的流体宽度标题。 　　此外，旧的设计似乎不能确定圆角和正方形之间。新设计具有将正确的元素与精致的斜面效果分离的一致性，如下图所示。 　　斜角网 　　尽管格式类似于网格，但正如前面提到的，它不是严格的网格格式，并且下面的折叠部分在上述结构中是复杂的。 　　标题部分有了很大的改进。 　　新设计中最明显的改进之一是标题部分。 　　水平导航栏是现代、干净和清晰的。搜索框、注册和登录链接选项位于右上角，它们应该在那里。 　　此外，虽然它在现代设计中心网站上还不习惯于logo，但在这种情况下，它的作品，却创造了一种非常强烈、生动、不易忘记的品牌体验。 　　有效利用空间 　　在右侧页面上，以下本地广告单元（包括手风琴式内容切换）允许用户在涉及多个不同主题的相对较小区域中查看预览。 　　热门视频和故事 　　在以前的设计中，视频受到了相当大的关注，出现在正确的框架中。在新的设计中，视频是一个大类别的主要导航栏，与家庭链接具有几乎相同的视觉重要性。 　　CNN.com视频链接 　　视频故事选择整个网站，并明确常见的播放按钮链接，链接到照片显示的视频内容，如下图所示： 　　cnn.com视频按钮 　　另一个提供相同的重点，家庭和视频，如上图所示，是新闻脉冲部分，是新的，还是正在测试 　　本节显示新闻报道的流行程度（似乎可以计算没有评论的总页面视图），并允许读者按类别或报道类型筛选结果。 　　美国有线电视新闻网新闻 　　主页分类页面（美国、世界、政治等）通过主导航栏工作于同一主页。 　　事实上，如果你不知道你在哪一页，你会感觉到你的主页。美国分类显示： 　　每个部分都便于显示上述故事、最新新闻和其他相关项目。 　　黑白标题下的图片也可以出现在主页和文章页面上。它们引人注目，易于阅读，并且不使用太花哨的图形或字体样式。 　　功能强大的页面 　　文章页面，对于大多数部分，保持一个独特的品牌主页。文本显示良好的14px歌曲风格，可读性高行高。 　　虽然页面上的一些元素看起来有点小，但我个人最喜欢的方式是，文本的大小代表页面的大小，这样读者就可以集中精力阅读。 　　CNN.com文本 　　同时，在每一篇文章的左侧，都有一个故事集，它以几个符号列表点总结了当前的故事，这表明CNN的设计师了解用户的在线趋势，扫描冗长的材料。 　　信息过载 　　所有新设计的消极方面可能是第一个问题。很明显，主页上的链接和信息过载是结构化的和有组织的，如前面所讨论的。 　　主页大约有两个半长的窗帘，包括主导航栏中的一些重复项目，以及每个类别中的大约六个子链接。这些部分如下图所示： 　　CNN以下 　　由于CNN是世界上最受欢迎的网站（每月3800万独立访问者），这些部分在其他网站上会获得相当大的流量，但由于它们的外观，到目前为止，在折叠，因为有这么多的链接，相对访问这些链接的流量可能会非常低。 　　重要地段埋置 　　如上所述，以下许多信息都出现在主页上。显然，下面的页面中似乎完全隐藏了一些重要内容，下面有两个以上的全屏标题。 　　例如，一个热门话题出现在底部，在右侧，上面只有一些促销和广告。 　　CNN.com的热门话题 　　这似乎更有意义。本节将替换手风琴的内容开关，否则将包含在手风琴中。 　　广告和推广，下面的热门话题似乎比它们更重要。第三，虽然如此高流量的网站会在这些领域获得大量点击，但是点击率的比较部分可能与广告有很大的不同。 　　当然，CNN制作人知道什么是最重要的，也知道用户的习惯比其他人好，但是这些布局和可用性挑战有助于分析其他开发者面临的类似选择。 　　可用性的秘密 　　在新网站中，它可能不是最佳的可用性设计元素。 　　一个例子是右三角形，它出现在每个微站点链接上。乍一看，我不知道哪个三角形是。它们似乎是某种弹出的javascript滑块。 　　一些用户没有足够的关注它，甚至可能认为他们会生成下拉菜单箭头。 　　CNN.com微网站链接 　　有没有更好的方法来表示同一窗口中的微型网站链接我真的不知道。这可能足够像著名的维基百科图标，但在这种情况下，当前用户认为链接是在新窗口中打开的，这不是真的。 　　正如前面讨论过的，手风琴内容切换也存在一些可用性问题。首先，当禁用javascript时，手风琴是无用的，不显示任何内容。 　　您应该展开所有内容的默认显示，否则会显示其中一个项目。同时，标题为Accordion Festival的超链接应该链接到各自的部分，但没有。 　　手风琴内容的另一个问题是，它包含非常小的文本，而且并不总是清楚单击手风琴内部的内容是什么，这使得手风琴内容与其他内容之间的链接不那么明显。 　　在下图中，我画的红色箭头指向两个列表项。文本链接到这些列表项，但这不是明显的第一个外观。 　　CNN.com手风琴链接 　　有些部分仍然反映了旧的设计。 　　如果重新设计CNN的尺寸，在所有页面完全整合之前，某些部分仍然会反映旧的设计。 　　这通常是与旧内容，不经常，但在CNN的情况下，一些重要的部分仍然有旧皮肤。 　　两个例子是关于和联系网页 　　小字体 　　一个不符合现代网页设计趋势的特殊设计问题是使用小文本和小元素。 　　手风琴的内容在小字体前面讨论，文章和视频页面上也有共享工具栏，主页上有最新的消息部分，用于注册和登录的标题链接和文本链接，主页上有皱纹等。 　　与cnn.com分享 　　上面的共享工具栏，大字体，会更有效吗如下图所示，建议的部分是什么，还是其他较小的类型 　　CNN推荐 　　结论 　　新的CNN网站增加了一些这里没有讨论的功能，但更多的是关于他们的新闻服务和定制内容。下面的第一个链接包含来自CNN的视频，讨论一些新功能并提出它们。 　　我绝对相信新网站比旧网站提供了更美丽和有趣的用户体验。除了手风琴内容转换的弱点外，新设计的弱点真的那么重要吗 　　设计一个新的CNN似乎需要很多时间和计划。我认为网页设计师和那些对提高可用性感兴趣的人将认真考虑并尝试从中学习一些改变CNN的新网站。 　　Shepherd设计文章建议： 　　网站重新设计的准备和规划 　　网站设计的重要设计趋势 　　考虑您的网站设计用户体验