首页 > 教程 > 关键词  > 网页设计最新资讯  > 正文

网页设计中的对比原则与接近性原则

2010-03-30 11:21 · 稿源:站长之家Chinaz.com

一、 网页设计中的对比原则

一件网页设计作品由许多元素构成,它们的重要性各不相同,其中一些元素的重要性要高于其它元素。一些相互关联,而另一些则没有任何联系。棘手的是如何有效地和可视化地表达这些元素,这正是对比原则发挥作用之处。

对比产生在两个或多个元素之间,设计者可以利用对比对用户产生直接的视觉吸引。想象一下,如果页面上所有的元素都是同样的样式,那么整个页面将是无序的,页面结构也没有流动性和层级性。内容阅读起来将变得非常困难。这使得对比原则成为页面web设计中一个必要的方法。

这篇文章中我们将看看如何使用对比在颜色、大小和对齐方式三个方面创建一些不同之处。

颜色对比

许多人一想到对比便立刻想到颜色。尽管对比原则并不仅仅限于颜色对比,但它对于用户识别各种元素的确大有帮助。

现在几乎所有的页面一般都包括头部、内容区域和底部。这三部分是完全不同的,它们在视觉上应当区分明确,使用背景颜色产生对比是一个不错的方法。

站点Church Media Group就是一个非常好的例子。它的头部和底部均采用了深色背景,而内容区则采用白色背景。这使内容区域和其他部分截然分开,并且使其重要性更加突出。如果仔细观察,我们会发现在内容区还有另外一层的背景对比。内容区上半部分的特色产品区用了亮蓝色的背景,而它和内容区其他部分的对比则并不强烈,这就告诉我们这两部分是相互关联的。

Phil Renaud's portfolio 使用了一个独特的布局和色系。他使用了金黄色来使左侧的导航和其他部分的棕色产生对比。

文字也可以使用颜色产生对比。Billy Tamplin 在这方面有一个非常棒的作品,它分别给页面标题、副标题和段落文本使用不同的颜色。对于博客风格的布局,在文章标题和内容文本之间创建对比是非常重要的。它可以使用户在拖动滚动条时很容易地看到文章的起始部分。

大小对比

在Web设计中另一种创建对比的方法就是让元素的大小产生不同,是其中一些元素的尺寸比其它的大。

当你无法使用颜色对比时,可以考虑使用大小对比。Taxi在布局上做了很多而只使用了很少的颜色。所以为了在三个栏目之间创建出层次,设计者为中间一栏使用了比左右两栏大了很多的宽度,这使得用户很明显地认为中间一栏是整个页面最重要的部分。

正如可为文字标题应用颜色来创建对比一样,使用大小也可以。用Big headings为站点内容创建层次是一个很好的方法,Imaginaria Creative使用了大标题来吸引访问者的注意,并且吸引他们阅读下面字号稍小的一些段落。

对齐方式对比

好的对齐方式在高质量的web设计中发挥着很大的作用。当把东西对齐放置时,它们看起来会很舒服。但我认为这恰恰是用不同的对齐方式创建对比的困难之处,并且应谨慎使用。不过如果使用得当则能创建非常有效的分割效果。

LegiStyles在每个标题下面的内容块应用了很大的外边距,和大字号的标题一起创建了明显的对比。如果要采用这种方式,务必要使对比显得明显一些,否则就会看起来像是错误地进行了设计。

把大段的内容居中放置是排版布局中的禁忌,它使内容很难阅读。然而不要怕把居中的标题和左对齐的内容段落放在一起,因为这是应用对齐方式创建对比的另一种很好的方式。如果和衬线字体一起放置,可以使你的布局呈现一个非常经典的外观。

Simon Collison为每个内容块使用居中标题和左对齐的段落,标题的字号相对于段落字号不是很大,但这使两者截然分开。

A List Apart 是采用这种方式的另一个很好的例子。

Now Go and Be Different

学习在设计作品中创建合适的对比和掌握其他设计原则的一样的,都需要实践。花点时间来学习优秀的设计作品,并看看他们是如何运用对比原则的。记住对比是关于事物之间的区别的。如果两个元素在其性质上区别很大,那么一定要使其外观的区别也很明显。

举报

  • 相关推荐
  • 苹果推出网页版App Store 浏览器即可使用

    苹果公司近日推出网页版App Store,用户无需依赖特定苹果设备,通过任意浏览器访问apps.apple.com即可浏览全平台应用。新版网页设计与原生App Store界面高度相似,功能丰富且交互流畅,取代了原先简单的登录页面。用户可通过左上角下拉菜单快速切换至iPhone、iPad等设备的专属应用页面,实现跨平台浏览。网页版完整移植了原生商店的“今日”标签页内容,包括编辑推荐、热门�

  • 参与开发iPhoneAir设计师离职 转投AI初创公司

    苹果设计师Abidur Chowdhury已离职,他曾参与iPhone Air开发并在宣传片中亮相。这款手机重165克、厚5.6毫米,配备6.5英寸屏幕与4800万像素单摄,采用独特Deco设计搭载A19Pro芯片。其离职引发业界关注,外界正观望苹果会否调整iPhone Air设计及该产品的市场表现。

  • 华为Mate 80 Pro Max外观公布:采用双圆环设计

    华为宣布将于11月25日举行Mate80系列、Mate X7及全场景新品发布会,主题为“实力破圈,开启新篇”。官方预热视频首次展示Mate80 Pro+Max真机外观,后置摄像头延续圆形对称设计,新增“双环”ID,疑似磁吸充电模块,为系列首创。该系列将提供四款机型,首发麒麟9030处理器,预装鸿蒙OS6系统,性能与流畅度大幅提升,引发广泛关注。

  • 华为Mate X7四配色官图发布:独一无二新设计 最强辨识度

    华为Mate X7今天正式公布,将在11月25日的发布会上与Mate 80系列同台发布。 华为官微公布了Mate X7的四配色真机图,展示了独一无二的全新设计,后摄Deco辨识度非常高,工艺似乎也有全新升级。 根据爆料,Mate X7内屏尺寸为7.95英寸,支持2K分辨率,配备UTG超薄柔性玻璃。 Mate X7典藏版外屏采用第二代玄武钢化昆仑玻璃,抗摔性能更出色,其他版本外屏为第二代昆仑玻璃。

  • 拆掉沟通的墙:绿岛风携手中山大学,打造行业“AI设计大脑”

    绿岛风与中山大学、国家超算广州中心合作研发AI智能设计系统,旨在解决传统“客户-销售-设计-销售-客户”沟通链条长、效率低的问题。该系统将企业数十年积累的设计方案与规范注入AI,实现销售与客户直接对话,实时生成专业解决方案,将数天流程压缩至几分钟。AI重塑的不是流程,而是沟通的确定性与效率,打造永不流失的企业智慧大脑,确保服务品质持续稳定进化。

  • 华为Mate 80/Pro/Pro Max/RS开启预约:全系直屏设计

    华为Mate80系列今日开启预约,四款机型亮相官网。全系延续星环设计语言,采用直边直屏方案,配备3D人脸识别技术。核心搭载新一代麒麟9030处理器,性能强劲。配色与存储选择丰富:Mate80提供四色及三种存储组合;Mate80 Pro增加16GB+1TB选项;Mate80 Pro+Max以四款独特配色亮相;顶配Mate80 RS大师版则带来三款高端配色及独家20GB定制内存方案,彰显技术实力。

  • 年轻人开始沉迷奶茶袋 有人赚近千元:联名、季节限定设计受追捧

    近日,一股收集奶茶袋的风潮在年轻人中悄然兴起,原本被随手丢弃的奶茶包装袋如今摇身一变,成为了二手市场上的“香饽饽”,甚至有人通过转卖这些袋子赚取了近千元的收入。 据调查,这股风潮的兴起源于奶茶袋的实用性和收藏价值。不少年轻人发现,奶茶袋不仅可以用作冰箱分格、野餐装备或收纳鞋包,还因其“限量”“联名”“绝版”等特性而具有了独特的收藏意

  • 女性人形机器人里藏真人?何小鹏回应:并亲自证清白

    小鹏汽车董事长何小鹏发布视频,回应网友对Iron机器人流畅步态真实性的质疑。视频中,团队通过一镜到底展示机器人行走,并解开上衣拉链展示内部机械结构,证明无人操控。何小鹏解释机器人模拟肌肉结构,头部为麦克风阵列,行走时伴有电机声。他透露团队七年研发成果,目前仍处科研阶段,计划明年4月实现软硬件量产。

  • 南京新街口万达美华酒店焕新启幕,以“时空穿梭”设计演绎金陵摩登风华

    南京新街口万达美华酒店以“时空穿梭”为主题,巧妙融合金陵古韵与现代摩登,打造兼具文化厚度与都市活力的旅居空间。酒店设计打破传统,采用金属、玻璃与暖木材质,营造轻盈通透的视觉体验;客房延续4S服务理念,配备智能控温、蓝牙音响等设施,满足商旅人士效率与舒适的双重需求。复合空间“万咖啡”以日夜模式运营,构建24小时不间断的社交场域。作为万达精选服务品牌,该项目通过设计力提升资产价值,展现品牌在高RevPAR与RGI市场的成熟表现。

  • 颜值派亦实力派:佳能 R50V 与竞品的设计美学及性能硬核对决

    在颜值即正义的时代,佳能R50V以极简设计打破传统相机造型局限,搭载专业视频性能,成为年轻创作者焦点。文章对比尼康Z fc、富士X-T30II、尼康Z30、松下GX9四款热门微单,指出R50V通过6K超采样4K视频、全像素双核自动对焦、专业Log格式与直播优化功能,实现颜值与性能的完美平衡。其轻量化镁合金机身、双色选择及竖拍适配设计,兼顾日常穿搭与专业创作需求,堪称8000元内性价比首选的全能型相机。

今日大家都在搜的词: