网页设计理论:纹理

   纹理在网页设计中已经成为一个不可或缺的元素。它不仅仅是个趋势,更是个增加网页深度的快捷方法。设计师学会使用纹理,就能强化网页感染力,可谓是网页设计中必然要掌握的功法。而纹理本身就能通过引导用户的视线来展示网页的关键内容。

  然而,一直以来纹理似乎都被误解为“GRUNGE”风格设计,想了解GRUNGE可以去GRUNGE系列(一)——网页设计中的GRUNGE看看。在许多网页中我们可以看到,为了突出酷炫的效果时,被大量使用,甚至有滥用的嫌疑。滥用的结果就是它真正带来的好处被埋没。纹理的确可以增强网页的感染力,但是绝不是网页设计中的主角。

  纹理 VS 图案

  在深入了解纹理之前,让我们先把这一对容易混淆的概念区分一下。这两个词通常会被当作一组同义词。图案通常会由一些细小的重复性的元素组成,具有一定的视觉节奏感。而纹理相对图案由更大的元素组成,也不一定有重复性。如果用集合来表示这两个概念,那么,纹理和图案就会是两个圆,只有小部分交集,其余部分都是相对独立的。

  纹理的功能

  人们喜欢在网页中使用纹理,基于设计的理由绝不能仅仅因为“看起来很美”就这样去做,而应该基于满足某种功能,而纹理的使用目的大部分都会在于增强网页的层次和视觉深度。还是让我们来看看纹理具体有哪些功能吧。

  吸引用户点击操作

  图标、按钮、标题等元素都能运用上纹理。它能吸引用户对相应元素进行点击操作。这也许就是纹理运用盛行的原因。

  最低限度地使用纹理就是将纹理运用在元素上,以便让这些元素区别于网页中的其他元素。引导用户的视线进入我们预期的下一步。这种方式也可以重点突出网页中的品牌形象,例如在LOGO上使用纹理。

  这里对LOGO使用纹理有两种方式:第一是为你的LOGO使用纹理而搭配清晰背景,第二是保持清晰LOGO而运用纹理背景。如下面两个截图所示。


  增强信息的视觉展示规则

  纹理既然可以用以引导视线,就如同线条、方框和对比一样,它也可以被用以排版,将内容按照某种视觉规则进行展示。与此同时,纹理的效果要运用得当,与其他的视觉规则方式协调使用,最终输出效果将会非常理想。


  对于不同的内容选用不同的纹理,这也符合了对比法则。用户能根据不同的需求而进入下一步操作,而不至于在主页中层出不穷的信息中迷失了方向。


  同时,纹理要完美搭配网站中的风格和主题,例如手工的网站就搭配布纹,绘画的网站搭配纸纹。所有这些元素都可以通过某种逻辑法则去体现网站的内容,强化整体的信息展示。

  营造氛围和凸显个性

  现在,越来越多的客户喜欢自己的网站能用界面设计来传达自身更多的信息,他们希望网站凸显出自己的个性,发挥品牌效应。纹理也许能在某种程度上达到这一预期。


  上面这个网页可说是这方面的领衔之作。运用纹理去展示头像,每个元素都用纹理发挥,配合也非常协调。没有纹理,我想这个网页的设计也可能没有这样出色。

  确实,纹理为网页界面设计增加一种“捉摸不定”的感觉,它带来一种视觉上的新鲜感,同时,也为网页增加了怀旧的魅力。

  使用纹理的TIPS

  虽然纹理的使用带来很多好处,但与此同时,使用时也有很多需要注意的陷阱。

  保持易读性

  易读性是一个网页必须要维持的底线,就算是做得再漂亮的网页,如果易读性不佳,用户也不会继续使用下去。一定要避免就像如下图所示的这种情况。


  有节制的使用纹理

  在印刷品设计时,纹理效果通常都比较夸张。而在网页中,我们就需要有所节制,不要大面积的使用,以免干扰到用户对主要内容的注意力。


  练习就是升级

  在使用纹理时,多进行尝试。只有经过试用后,你才知道最终效果。把纹理放置于你不曾想到的地方,也许就会有不同的发现。

  有目的性地使用它

  在为实际项目进行设计前,你也需要大量的练习。通常,我们在习作时,往往会因为某个纹理好看就用上。这不利于设计的最终目的。如果你无法判断这个元素为何使用纹理的目的,那就放弃这样做。

  有目的性且意味着有重点,它的出现是为了烘托主题。如果过度使用造成抢镜的情况,那么也要放弃纹理。同时,我建议尽量使用比较弱的纹理图案,若隐若现,这样的效果会让纹理的优势发挥更好。

  为最终效果服务

  经验告诉我们,设计时玩纹理玩得过火是常有之事,而时刻记得最终我们要实现的效果就能克服这一点。比如,我们设计一个网页,运用上满意的弱纹理背景后,如果已经符合了最终效果,那就继续设计下一个元素。

  平时收集资源

  为了在设计时节省大量时间,相信我,在平时做好后备资源是最好的解决方式了。那种下载、收集资源的时间如果用于设计过程,恐怕会让你面临时限的压力。

  使用蒙版

  纹理可以结合蒙版一起使用,可以创作出更多的新奇效果。

  不要为了缩短加载时间而在纹理品质上打折扣

  有很多缩短页面加载时间的办法,因此,纹理还是要保持高保真。使用无缝的重复小图案作为纹理平铺开来是最佳的选择,这样就能避免了大的图片加载。

  使用纹理的理由

  当然,选用某个纹理,尽量选择和你整个设计存在某种内部联系的纹理。就好像我在该篇文章中的一个例子,钓鱼俱乐部的网站,那么他们就大量使用了船木作为背景纹理。

时间: 2024-12-09 09:11:32

网页设计理论:纹理的相关文章

网页设计理论:漂亮而不空洞的极简网站设计

作为设计师,我们都知道,一个极简的设计可以实现漂亮的效果. 然而,很多设计师在实现上有些麻烦:要么是没有时间让使用如此少的元素制作的页面看起来漂亮,要么就是最终的结果只是看起来"不完美". 网上有很多关于极简主义设计的文章,而本文的目的是帮你实现一个漂亮而不空洞的极简网站设计 最重要的是,我们将展示一个小的极简网站设计画廊,这样你就可以分析为什么一些设计可以而其它的则不可以. 什么是极简主义设计 极简主义设计已经被描述为最基本的设计,剔除了多余的元素.色彩.形状和纹理. 它的目的是使内

网页设计理论:对比和等同

  等同和对比,联系与分别,归类和不归类等都是能将元素中相同或不同的元素加以区别的方式.基于它们所承载的信息,我们希望等同的元素能发生某种联系,用以表明它们在某一方面的相似性.我们同样也希望不同的元素加以区分,以显示它们分属不同的类别. 等同和对比是通过元素之间所呈现的关系表现出来的,如果两个元素有着某种联系,可以确定这两个元素必定有相同的特性.当然,两个不同元素也必定看上去不同. 基础特性 你是如何表达元素间的等同和对比性的?是的,从它们的基础特性中表现出来. 那么,什么是元素的基础特性呢?基

网页设计理论:细节让优秀的作品脱颖而出

文章简介:网页设计中最常用到的设计细节. 前一段时间在企业管理界流行一句格言叫"细节决定成败".企业管理当然不是我们这里要讨论的主题,但是,把这句话放在网页设计当中的确是颠扑不破的真理.我们的眼睛和感觉总是非常敏锐的,即使是完全不了解网页设计技术的人也能够从一堆拙劣的设计作品当中挑选出那一个优秀的设计作品.虽然他说不出来为什么这件东西比那些都好,但是直觉会告诉他他自己喜欢哪一个.如果别人向我们问起为什么这件作品要优于其它呢?我们的回答是"很大一部分原因是因为优秀的设计作品总是

网页设计理论:各种元素在页面的综合设计

网页设计中有导航条,链接,表单设计,字体行距,空白,表单聚焦,404错误页面等等元素.可以说每个页面都是由以上各种元素组成,因此对于研究网页用户体验来说,就是研究如何组合并设计这些东西. 如何提高网站产品的可用性? 优秀的产品可用性,一直是产品经理和用户体验设计师们追求的目标,今天我们来谈谈如何提高网站产品的可用性,给大家做做参考.不论是企业网站.个人博客,或者购物网站.游戏网站,我们都希望能吸引访问者并且给他们留下愉快的访问体验. 可用性 是用户体验的一种度量,它可以用访问者完成网站功能的方便

网页设计理论:网页设计风格

文:Jeffrey Zeldman 我的父亲是个业余画家,我的童年就是被他的那些美术书籍塑造的.跟很多小孩一样,我对「纯粹的再现」十分着迷.那些巨细无遗的版画--搏斗中的角斗士,风景如画的村庄,日出时的罗马废墟--每每让我瞠目结舌.口不能言.当时我对艺术的理解就是「画功好」.在那年幼而懵懂的日子里,细节越丰富.蚀刻的线条越密集.树叶越多,这艺术家就越棒.稍后我邂逅了漫画,再往后是美术馆.麦菲·派瑞(Maxfield Parrish)让我想嗑药,也让我明白自己永远当不了画家.保罗·克利(Paul

网页设计理论:IE6必须下地狱

仅仅六年之前,互联网还是一个独裁者的世界--Internet Explorer ()(主要是Internet Explorer 6)垄断着浏览器市场.没了Netscape的竞争,加上与Windows XP的绑定,微软获得了令人艳羡的市场份额--巅峰时期将近95%.时至今日,可供我们选择的浏览器种类也令当年的用户艳羡--Firefox (), Safari (), Opera (), Chrome (),以及Internet Explorer 8. 那么,为什么现在还有15%至25%的网页浏览量来

网页设计中纹理的运用技巧

  texture在设计中应用已经越发完善了.它将形成一种趋势,简单而有效的为web页面设计添加几分深度感. 充分发挥texture的威力是一份伟大的职责.它不仅能够很好增强web设计的表现效果,对于设计师来说还是一个质量上乘的好工具.它的美妙作用是可以引导浏览者的视线,强调关键元素的重要性. 然而,长期以往texture似乎总和"脏乱"或者"低劣"设计为伍,它的滥用处处可见,像乐队的website等,对于设计师来说,它遗留下来的滋味可不怎么样!. 也正是由于以前的

网页设计理论:注意力和流

我们创造了网站和软件用以向人们展示信息,信息可以是任何东西 :一个公司的产品清单,旅行度假的照片或者朋友们的即时信息,此时此刻,展现给你的信息比历史上任何时候都要多. 所有这些信息有许多积极的效果,但是也带来了挑战."信息的成本显而易见,它消耗了信息接收者的注意力...信息的富有带来了注意力的稀缺"(西蒙1971 年)当注意力成为一种稀缺资源,如何明智的投资它就变得非常重要,信息架构师和设计师在确保设计提供给用户的产品具有良好回报中扮演着关键的角色. 心理学家米哈里csikszentm

不要忽略了颜色的可用性(网页设计理论)

今早打开 腾讯ISD的博客 ,看到一篇新的文章,<迷你屋视觉规范简介>,赶紧看了来学习.不过给我抓到问题咯,臭鱼不介意我在这说下吧: 这套规范中的,按钮的第一级.第二级和文字中用于突出的第三种,红底白字和白底红字都不符合W3C的对比度规范.原本需要突出和强调的文字反而可能识别不易. 截图中使用对比度检查器,基于W3C的WCAG Guideline 1.4.4和1.4.2中有相应的规定,工具的下载和具体说明可见 油茶会的这篇. 这是一个很好用也很科学的工具,小兔把它放在Windows的快速启动栏