互域东莞网络公司,专业东莞网站设计,东莞网站建设行业里很有竞争力的团队之一。
CNN新闻的新网站设计解决方案接下来我们教你英国有线电视机新闻报道的新网站设计,我们一起来看看。
英国有线电视机新闻报道的新网站设计:
简介
网格布局激发我使用短语“网格灵感”,因为新设计似乎基于网格,但元素的精确对齐并不存在。粗略地看一下他们的主要样式表,他们似乎松散地基于他们的样式和网格Blueprint CSS框架。他们的CSS重置与蓝图框架有许多相似之处,“蓝图”包含在顶部,因此这将是基于其自身有限的知识逻辑的蓝图。在分析了他们的主屏幕捕获后,我得出结论,如果它们基于新布局上的网格,网格将详细说明:16列,每列12px接收器50px,(列之间的空间),共计宽度980px。下面是我的网格估计的直观表示,作为PS图像处理软件的嘲弄:
虽然页面上的元素没有按类排序和平衡,但它通常是网格布局的期望,在以前的设计中这种布局有了显着的改进,如下图所示:CNN.com的旧设计新版布局使所有页面元素都在一个980px宽的容器中,并且具有庞大的寻找以前的设计,流体宽的标题跨越整个页面内容的固定宽度部分。另外,在旧的设计中似乎没有确定圆角和方形之间,新设计的一致特征是方角和细微的斜角效果分开相应的元素,如下图所示。 CNN.com斜边虽然格式是网格状的,但如前所述,它没有严格的网格格式,并且以下部分折叠与上述结构混合在一起。标题部分得到了很大改进。标题部分是新设计中最明显的改进之一。水平导航栏现代,干净,清晰。搜索框,注册和登录链接选项位于右上角,它们应位于同一位置。而且,虽然在现代设计中心网站徽标中并不习惯,但在这种情况下,它可以工作。 它创造了一个非常有利,生动,品牌体验,不容易忘记。
有效利用页面右侧的空间,在原生广告单元下方,它们包括一个手风琴式的内容开关,允许用户查看预览,在相对较小的区域内,内容涉及多个不同的主题。
在流行的视频和故事设计中,在之前的设计中,视频具有强烈的焦点,出现在右侧的框中。在新设计中,视频是主导航栏的主要类别,具有与“家庭”链接几乎相同的视觉重要性。 CNN.com视频链接视频故事以整个网站为特色,并澄清了通常的“播放按钮”链接,链接到视频内容的照片显示,如下所示:CNN.com视频按钮提供了另一层次的关注,“家庭和如上所示,视频是“newspulse”部分,它是新的或仍处于测试阶段。此部分显示新闻故事的流行度(这似乎是总页面浏览量的计算,没有评论),并让读者过滤结果按类别或故事类型.CNN newspulse强大的分类页面主要类别页面(“美国”,“世界”,“政治”等),通过主导航栏,工作相同的主页。事实上,如果你不我不知道你在哪个页面,你会感觉到你的主页。“美国”类别:
方便的每个部分都显示了上述故事,最新消息以及此类相关项目。图片下方的黑白标题也可以在首页和文章页面上轻松阅读,而无需使用过于花哨的图形或字体样式。一个功能强大的文章页面文章页面,大部分都维护着一个独特的品牌主页。这篇文章非常好用14px Times New Roman展示,线条高度非常易读。虽然页面上的某些元素看起来有点小,但我个人喜欢它,文章正文的大小在页面上显示,让读者可以专注于它。同时,在每个故事的左侧,有一个“故事集”,总结了几个符号列表点的当前故事。这表明CNN设计师了解用户在线扫描冗长材料的趋势。信息过载新设计的所有消极方面可能是第一个问题,显然主页上的链接和信息过载,尽管是结构化和有组织的,如前所述。 的主页是大约两个半帘长,包括部分重复项在主导航栏,大约半打子链接在每个类别。这些路段出现以下图中显示的是:CNN.com以下由于美国有线电视新闻网是世界上最受欢迎的网站(3800万独立访客每月),这些部分将在其他网站,比较得到可观的流量但是,因为他们的出现,到目前为止,在折叠的,因为有这么多的环节,相对流量访问这些链接通过首页会可能很低。重要路段埋?正如上文所指出的,很多在首页出现以下信息。而且,明显,似乎有些重要的内容是完全埋在下面的网页,超过两全屏幕下面的标题。例如,一个题为“热门话题”出现在底部,在右侧,只是上面的一些促销和广告。CNN.com的热点话题它似乎更有意义,本节将取代手风琴内容交换机,否则被纳入手风琴。广告和促销,出现下面的“热门话题”也似乎比他们更重要的位置了。 再次,虽然这样一个高流量的网站会在这些方面获得很多的点击,点击率比较的部分和广告倍以上可能大大不同。当然,美国有线电视新闻网的生产商知道哪些内容是最重要的,他们了解用户的习惯比别人更好,但这些布局和可用性的挑战,有助于分析其他开发商面临相似的抉择。可用性的奥秘在新的网站,可能不是最优的可用性设计的几个要素。一个例子是向右的三角,出现在每个微网站链接。乍一看,我不知道那些三角形是。他们似乎是某种JavaScript滑块部分,会弹出。一些用户没有充分重视甚至可能认为他们向下产生下拉菜单箭头。CNN.com微网站链接有没有更好的方法来表示同一个窗口的微型网站的链接?我真的不知道。也许类似于著名的维基百科图标就足够了,但就目前的用户假设在新窗口中打开链接的问题,在这种情况下是不真实的。 手风琴内容交换机,前面所讨论的,也有一些可用性问题。首先,当禁用了JavaScript,手风琴是无用的和不显示任何内容。应扩大默认显示所有内容,否则显示的项目之一。同时,该超链接的标题为手风琴节还是应该链接到他们各自的部分,但是他们没有。与手风琴内容的另一个问题是,因为它包含的文本是非常小的,它并不总是很清楚什么是点击里面的手风琴。这使得链接不太明显的从其余的手风琴内容。在下图中,我画的红色箭头指向两个列表项。在这些列表项的文本链接,但这不是明显的第一眼。CNN.com手风琴链接部分路段仍然反映了旧的设计如将任何重新设计一个网站的美国有线电视新闻网的规模的情况下,部分路段仍将反映出古老的设计直到所有页面完全集成。 这通常是与旧的内容,不会去经常的情况,但在美国有线电视新闻网的情况下,一些重要的部分仍然有老皮。两个例子是关于和联系网页小字体一个特定的设计问题,不符合现代网页设计的趋势是使用小文字和小的元素。在手风琴内容字体小的前面讨论的。也有出现在文章和视频页面的“分享”工具栏,在首页的“最新消息”部分,“注册”和“登录”的标题链接和文本链接,主页上的褶皱,还有一些。CNN.com分享吧将上面的“分享”工具栏,与大字体,更有效?什么是“建议”部分,如下图所示,或其他部分较小的类型?CNN推荐结论新的CNN网站已经添加了一些这里不讨论功能,更多地涉及到他们的新闻服务和定制的内容。下面的第一个链接包含视频的美国有线电视新闻网,讨论一些新的功能,提出了。 我绝对认为新网站提出了比旧的更美丽和有趣的用户体验,除了在手
网站设计重要的设计趋势
考虑你的网站设计的用户体验
念完所述,朋友们应当清晰英国有线电视机新闻报道的新网站设计了吧,早已在上述文章为大伙儿作出了解读,坚信大伙儿在看了上文以后应该可以懂了吧。