您的位置: 首页 > 艺术设计 > 设计理论 > 安静的结构:控制页面的视觉"分贝"
让验证码友好一点 回到列表 让网站似个彬彬有礼的绅士
 安静的结构:控制页面的视觉"分贝"

作者:子条 时间: 2007-08-01 文档类型:翻译 来自:子条,设计中的战斗机

第 1 页 安静的结构:控制页面的视觉"分贝" [1]
第 2 页 安静的结构:控制页面的视觉"分贝" [2]
第 3 页 安静的结构:控制页面的视觉"分贝" [3]

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

安静的结构

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

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

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

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

两个页面的设计

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

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

焦点明确:导航/搜索。

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

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

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

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

出处:子条,设计中的战斗机
责任编辑:moby

上一页 下一页 安静的结构:控制页面的视觉"分贝" [2]

相关文章 更多相关链接
让网站似个彬彬有礼的绅士
支付宝互联网信任计划标识征集
《变形金刚》壁纸设计大赛
“最优秀网页设计奖”参评通知
PHPCMS2007 模板设计大赛
作者文章
情节设计中的叙事策略
产品设计中的一致性原则
热门搜索:CSS Fireworks 设计比赛 网页制作 Dreamweaver Studio8 Flash
站点最新 站点最新列表
跟我去香港:The third Day
单件模式结合命令链模式
快乐狗原创动漫大赛
元素层叠级别及z-index剖析
CSS 浏览器的等宽空格
电影变形金刚概念画欣赏
疯狂的程序员 第三十五回
疯狂的程序员 第三十四回
疯狂的程序员 第三十三回
运用ASDoc工具
栏目最新 栏目最新列表
成为一个顶级设计师的第二准则
一起回味经典老体育宣传画
你是真正的用户体验设计者吗? Ⅲ
菜菜贺年动画
网页效果图设计之色彩索引
Google的产品设计指导思想
Siggi Eggertsson 几何魅力
令人惊叹的"手绘"
再见吧,创意
创意的生产方式
 
>> 分页 首页 前页 后页 尾页 页次:1/31个记录/页 转到 页 共3个记录

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

本文总共有 9 条评论,现在显示最新的 5 条。评分:- llllllllllllllllllll + 评分人数: 3 ,平均分: 4.00


53ke Publish at 2007-8-20 9:31:00
没感觉有这么重要,以后可要注意一下了
cerbrus Publish at 2007-8-18 13:34:05 评分4
好文章
受益匪浅
视觉流动和色彩一样重要

lightoy Publish at 2007-8-10 13:40:29
噪音,安静,分贝。。。很喜欢这些词,非常形象。。。
seagull8111 Publish at 2007-8-7 11:46:59
好文章
deiphi Publish at 2007-8-6 9:45:03
受益匪浅

查看全部评论

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
大师之路--Photoshop 完全解析
《超越CSS》新书上市
Don't Make Me Think 第2版
HTML与CSS入门经典(第7版)
《FLASH MX2004网站开发精粹》
《CSS入门经典》
《设计师谈网页设计思维》
作品集 更多内容

图书管理系统 demo(hd_show) 大学时做的矢量图 凤竹集团 金色童年 练习 吴江网 华师大学习科学研究中心