网页设计中等同和对比的实例 等同和对比在每个网站都可以看到,它们共存在网页设计中。你可以试想如果一个网站没有运用到对比,我们怎么可能在相同的背景色和字型字号中,认出哪里是内容、哪里是标题?就算是一行字或一个符号的不同,也能使它们的拥有对比的样式。 下面我列举的网页设计中的对比和等同的实例,通过这些实例,你能更好的掌握两者的关系,有助于日后你在设计时针对等同和对比的处理。 DAVID SIMON 第一个我要提及的网站是DAVID SIMON的网站,采用了不同背景色作为对比,很好的区分了网页中不同的组成部分。深色Logo在白色背景下也显得尤为突出。 图片与背景完美的对比,吸引眼球。显示文章发表时间的背景色,显示文章评论数量的背景色和大写字母以及页面菜单的背景色都和周围环境形成了对比,凸显着它们的重要性。 网站菜单中的链接都有相同的样式,会跳转到相对应的文章。这些都和其他下划线的链接不同。文章的标题和主体的字体不同,但从整个网站来看它们的对比是固定的。 主体内容中的链接很显眼,尽管设计师看起来试图让它不那么突出,以免打扰到阅读流。标题如果能再突出一点会更好,虽然现在已经有了比较清晰的对比。 MIKE KUS MIKE KUS的网站主页主要展示mike的不同作品项目。整个页面比较空,但请注意设计师是如何突出主要焦点的。文字与背景图的颜色相互对比,而画框又与背景的纹理相对比。 注意:在这篇文章写过后,mike的网站已经改了版,你可以看下图参考。
这些图画的唯一对比特点是色彩的不同,而其他信息都使用了相同的深灰。 同样的,请注意这些画是怎样被裱框起来的,这暗含着它们有着某种共性。在这里,它们都代表着项目。请注意它们的背景,都是相同的一片砖砌墙面。这很明确地表达了它们的角色。 在MIKE的“关于”页面,MIKE本人的照片占据了大半个屏幕,而这也与其他元素形成鲜明对比。左边那个蓝色的“get in touch”的按钮是页面中唯一彩色的元素。你也许不会联系MIKE,但如果你仅仅因为不知道怎么联系他而没有联系他,这个按钮将发挥极大的作用。同样的,在整个网站中其他所有按钮都应是蓝色。 ELECTRIC PULP ELECTRIC PULP网站的logo是一个红色的,具有现代设计风格的圆形。它很容易就与下面我们看到的网页其他元素都形成了对比。请注意在导航中,颜色是如何发挥作用来指示当前页面。 网站里所有的标题都是大号、加粗的大写字体。标题和主体内容之间的对比又具有一致性。在点击进入“NOTES”的一级页面,会看到轮播按钮的背景色与整个页面的背景色相对比。 页面中的所有的大部分按钮都是红色(这是一种被常用来装饰元素的颜色),当鼠标划过去会变为蓝色。然而,在“work”页面,第一个按钮刚刚与前面所述的相反,而是蓝色按钮,当鼠标滑过会变为红色。这是否是一个失误呢?还是设计者有意为之?尽管如此,我认为这个网站的对比原则运用得十分巧妙。 LOWDI 最后一个要提及的网站是LOWDI,下图是网站的首页,请注意设计师是如何使用颜色来表达对比和一致性的。
颜色能清楚地描画出不同部分。整个颜色的搭配明快。请注意这里显示价格的那块背景色是怎样凸显出来,而与此同时也提醒了下方的产品页面。