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

浏览数：21 / 时间：2015年06月09日

texture在界面设计中应用已经越发完善了。它将形成一种趋势，简单而有效的为web页面设计添加几分深度感。充分发挥texture的威力是一份伟大的职责。它不仅能够很好增强web设计的表现效果，对于设计师来说还是一个质量上乘的好工具。它的美妙作用是可以引导浏览者的视线，强调关键元素的重要性。

然而，长期以往texture似乎总和“脏乱”或者“低劣”UI设计为伍，它的滥用处处可见，像乐队的website等，对于设计师来说，它遗留下来的滋味可不怎么样！。也正是由于以前的滥用，texture的优势长期被人们所忽略。texture可以让web设计更具整体感，但是前提是不要让它满屏皆是。

Texture（纹理）VS. Patterns（图案）

在我们深入了解texture之前，先弄懂texture和pattern之间的区别。这两个词经常被误认为同义的。pattern通常是小的、重复的图片元素，而texture更趋向于大一点的不重复的图片。你可以想象两个集合，左边是pattern，右边是texture，这两个集合有一部分交集，也就是说在某些时候texture也是pattern。去tileabl这个网站逛一圈，也许你会有更清晰的印象。

Texture的功能

我们喜爱texture的理由可以有很多。设计时的选择不止是简单说“嗯，这样看起来还不错”，设计是出于一种目的，而每一个对texture选择应该权衡利弊。现在让我们浏览下使用texture到底有哪些好处呢？

获取目光焦点

texture可以让元素显著起来，譬如titles、headings、icons和buttons。它可以吸引眼球去传达一个动作指示或者告诉你这是主要的heading部分。这也许是最明确的一种方式去理解texture了。

最低限度的去使用texture，以便区分website中内容和其他部分。它引导着浏览者的目光直接锁向那些设计者有意安排的元素上。它可能是一种特别棒的方法让关键商标脱颖而出。

你可以用很多方法去吸引别人的注意力，然而这两种常用的简单的方法，你不妨尝试一下。一种是带有纹理的logo和干净的背景搭配，另外一种正好反过来，干净的logo和带有纹理的背景一起。

增强信息的筑造风格

texture习惯于指导浏览行为。而例如线条、色块和对比同样习惯用于将内容进行逻辑区分。有效的将texture结合其他方式会更具表现力。使用texture的最终目的不是放弃其他的筑造风格方式，而是要去加强它们的表现效果。

以上网站，个别的元素为了特殊的目的使用了texture。该网站把内容划分成几个逻辑区域，让用户清楚的看到从哪开始，到哪结束。通过texture使得用户能够清晰准确识别每个逻辑内容块，从而增强了页面的信息筑造风格。

并且，texture完美的配合了网站的风格和主题。所有元素犹如量身订做般合理的表现了主题，因此强调了整个website的全部信息。

建立一种氛围&个性化

越来越多的客户希望网站设计不止是友好的表现页面内容，他们更希望能看到一些个性独特，自己的标志更易被用户所识别的web设计。texture便可以通过很多方式实现这一目的。

上面这个网站设计便十分帮的表现了她的个人品牌。她使用了texture来更简洁的表现了头像部分，如果没有texture，该网站会显得平淡无味，而且缺乏个性。texture无形中使得web设计中多了很多超棒的因素，让website变得更具魅力。

提示和建议

从上面看来texture的确很不错，但是使用中你也会想到如何才能避免技术滥用和思维定式的陷阱呢。

保证易读性

千万不要为了使用texture而牺牲了易读性，这也是我们经常犯的一个错误。易读性对于一个网站来说具有最高级别的重要性。

别死马当活马医

在印刷里，texture很难会被过渡使用，当然有时也会因为流派不同而不同。然而在web领域，texture却很容易出现滥用的情况。

实践预示着提高

让你的界面设计不断的尝试新的想法，平时从来不会添加texture的地方你也可以尝试一把，说不准会有意想不到的效果。

如果它不出于任何目的，请删除

在用户网站上使用texture之前，请精炼好你的技术。必须反复的确认你使用texture出于某种有建设性的想法，如果你不能够使得texture有助你整体设计的提升，请放弃。

没有任何理由需要过渡使用texture。web的全部目的是为了传播信息，当然没有必要去让你的内容毫无可读性。所以，精炼和细微的纹理效果可以更好的帮助提高项目水平。

考虑你想达到什么样的效果

从我们的经验得知，肆无忌惮的使用texture是件多么容易的事。而在头脑里一直想着你希望最终达到什么样的效果可以有效的避免滥用情况的发生。如果你想要一个淡淡纹理效果的背景，那就马上做，之后就去执行下一步。否则的话，你可能再也不会完成它。

收集资源，这样你不必在用时才去搜索

你需要花大量的时间去搜寻和下载那些对你来说有用的资源，保存资源是一项伟大的辅助工作。请相信我们，没有什么比错过一个完美笔刷，再想用时已经找不到地址时更加令人沮丧了。我们的笔刷列表既长又多样化，长年累月的时间里，我们从类似deviantART和Brusheezy里收集各种各样的笔刷，然后自定义成为自己的。

学会蒙版技术

学习使用图层蒙版会为你在工作节省下大量的时间，同时也会成为你的利器之一。图层蒙版也是一个超棒的方式而不会破坏任何原图设计。网络上有大量关于蒙版的技术文章，这里有个快速搜索链接，如果你需要的话。

不要为了减少下载时间而牺牲质量

这里有很多有趣的办法可以在保持使用texture的同时也不牺牲下载时间。但是千万别一味的降低texture的质量，因为与其显示得专业，慢一点儿不别让网站刚刚面世就已经过时。平铺纹理图案是个比较好的办法去节省下载时间。

当然，我们还是希望能够设计出脑袋想要的效果来，但愿随着全球网络速度的提高，下载时间将会不再是你考虑的主要问题。尽管如此，还是让你的texture使用理由充足吧，一个网页设计如果使用过多的texture仍然会不可避免的下载缓慢。使用平铺的小图案作为背景吧，Tileables已经开始实践，你不妨跟他们学一学。另外我们还有CSS Sprites技术，或者使用雅虎的图片无损压缩Smush来减少图片的加载时间。

合理选择texture

最后，和保证可读性一样重要的是，为你的设计选择合理的texture。如果你是帮助一家家具店做页面设计，那种生锈效果的纹理显然非常不合适。texture是为了营造一种特性，而不是迷惑了来访者，无论不管这些texture看起来有多好看。实用性永远应该优先考虑。

如何 DIY texture

获取一个texture最常用的办法是自己去制作。而且我们强烈建议你这么做，因为这种方法不仅省时而且常常会意想不到的出彩。其实自己动手制作方法十分简单。

拍摄照片

最简单的办法就是抓起你的数码相机去拍你身边可见各种纹理，特别是那些你从来未曾考虑过会成为纹理的物件。比如，蛋糕的表面或者水池里的泡沫。如果你环顾四周，原来你不屑的那些东西也会是很棒的texture，像倒塌的建筑，水泥墙面，生锈的金属，树皮，风化的木质等。它们都是超级棒的样本。而一件普通的数码相机，或者带摄像头的手机就已完全够用。

在拍摄的时候，使用自动模式，关掉闪光灯，耐心的照出清晰满意的纹理效果，然后稍微进行下后期处理即可使用。我们人人都可以成为图片编辑。