安静的结构:控制页面的视觉“分贝”

日期：2007年8月1日作者：查看:[大字体中字体小字体]

CNN新闻网站前段时间改版了。非著名设计顾问 andy 通过对比 CNN.com 和 USAToday.com ，谈了些自己的想法，其中不乏一些好的见解。根据本人的理解，将其中一些有用的信息做了翻译并记录如下：

安静的结构

在设计以内容为主的新闻类网站时，应该运用干净的结构和清晰的元素组合。直观地呈现信息是一个在线新闻站点的根本需求，为满足这种需求甚至可以牺牲一些界面视觉。

外框、线条、颜色等都是结构的基本元素，将这些元素舒服的排列会给页面带来节奏感和连贯性。并大大地加强和突出内容，将内容清晰的呈现给用户。

CNN的改版设计就是如此，它的信息架构干净、清晰，我将它称之为安静的结构。当网站的内容为王，而你又想鼓励用户花时间将内容读入大脑而不只是盯着它的时候。安静的结构在这个时候可以帮助你。

创建一个安静的结构成本其实很低，并且有很多方法。这篇文章会涉及到其中一部分。我将展示如何将它们进行有效的结合，增强设计效果。

两个页面的设计

粗略看一看CNN.com的主页，再看看USA Today的主页。你会发现USA Today设计得也不是太差。通过比较，你就会发现USA Today在内容表达上其实存在着一些混乱。
为何会产生这种情况? 我们通过比较一些细节来分析。

首先，我们比较下两个站点的顶部设计。 CNN非常简单，并且只有一个目标: 导航/搜索。相反, USA Today的顶部稍显忙碌，它想要用户完成至少3种不相关的任务。通过顶部的设计，就初显两个站点截然不同的设计风格。

焦点明确：导航/搜索。

焦点分散，效率变低。
虽然能找到导航/搜索，但是评论内容、邀请成为会员、登录提示都以同等程度的重要性来展现。

但是页面是否干净和清楚，区别体现在整个版面上，顶部并不会破坏网页的完整性。因此要建立安静的结构，还需要从具体的版面上入手。

例如：USA Today不太注意图/文结合时的配对排列方式，一些是水平配对，一些是垂直配对。虽然这不能称之为一个问题，但是每一种排列方式都有适合它出现的位置。不搞清楚这个状况，会恶化版面，造成内容展示的损伤。具体到下面的图片：

通过比较可以得出，CNN在展示图/文配对上具有较高的一致性。这种一致性，在其内容和结构元素的展现方面也可看出。因为这种一致性的结合，CNN的表达较USA Today来说更为清楚。

下面的例子将图释如何进行图/文配对，解决阅读是否舒服、眼睛是否疲劳的问题。
先看下面第一张图。在第一张图的结构中，一对单独的图/文需要你上/下不停的移动你的双眼，造成视觉上的消耗。要想浏览整组信息，还需要左/右移动你的眼睛。而上下两组信息的并排加剧了这种消耗。

相反，下面第二张图的图/文配对结构允许你的眼睛停在一个平面上。几组新闻之间也不会冲突。（另：请注意两个例子在视觉复杂程度上的不同。）
[1] [2] 下一页
安静的结构:控制页面的视觉“分贝” 相关文章：
·究竟有多糟糕 2007年值得注意的安全事件
·平安夜美丽蜡烛的装置设计欣赏
·用十大安全策略加固无线局域网安全
·Photoshop字体安装使用方法和技巧
·2007的网络安全焦点之终端Web安全
·McAfee发布2008年十大安全威胁预测
·惠普82款笔记本存在严重网络安全漏洞
·IDC邮件安全网关解决方案提高带宽效率
·危机重重 2007年度网络安全分析报告
·Win2000下PHP服务器安装攻略
安静的结构:控制页面的视觉“分贝” 相关软件
·CEG西安站第三天决赛半决赛录象包
·《印第安纳琼斯的桌面冒险》试玩
·《生化危机4》完整字幕简易安装包
·《QQ游戏2007》beta1安装程序
·联众游戏 -《双扣》安装包
·《侠盗猎车手：圣安地列斯》35项属性修改器
·《合金战纪》绿色免安装版封测客户端
·《魔兽》地图：拯救尤迪安2.93单人完全版
·安意如作品合集
·《反恐精英CS1.6》完整安装版本

上一篇:企业网站优化，请远离“非正规”CMS

下一篇:Flash研究：基本的车运动的动画效果

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

安静的结构:控制页面的视觉“分贝”

精品推荐

热点TOP10

特别推荐