四眼天兔工作室 » 设计灵感

10个极具创意的用户交互界面及其制作方法

4EB Studio — Mon, 30 Mar 2009 05:53:40 +0000

用户体验在近几年得到了迅速的改善，主要体现在丰富的的用户交互界面上。AJAX, javascript以及CSS的广泛应用为用户提供了先进的，尖端的以及专业的动态交互界面解决方案。

之前已经有了很多文章来介绍一些令人惊叹的 javascript, Ajax和CSS技术以及哪里可以找到这些技术的使用方法。今天，我们将来看看10个极具创意且UI界面功能丰富的网站，以及如何使用文中提到的技术来制作类似的交互效果。

1. Alex Buga (滑移 ，可拖动的页脚 以及动态按钮)

在这个绝对难以置信的设计中你会看到:

1.1 一个具有美观的动态悬浮效果的菜单

制作方法 » 使用超级弹性特效制作极具视觉冲击的网页菜单

该教程讲解了如何使用几行Javascript代码以及MooTools库来设计一个令人振奋的弹性菜单。

查看演示

1.2 滑动的文章显示面板

制作方法 » 漂亮的动态周线表

该教程向你讲述了如何设计一款带美观的，带有每日注释的动态周记，你可以在你的网站中使用该方法进行自定义设置。

查看演示

1.3 可以拖动的页脚

制作方法 » 事件委派表中的拖拽以及调整大小

只有父元素在控制事件。在本例中将由编辑容器内的元素来控制事件。如果你向你的容其中添加动态的元素，你无需再附上任何事件。

查看演示

2. Ricoverdeo (幻灯效果)

一个非常简洁的滑动效果，并且使用了大量的插图作为辅助。

2.1 在悬浮元素上添加简单的滑动效果

制作方法 » Easy Slider 1.5 – 简单的制作图片与内容滑动的jQuery插件

Easy Slider (我对这款插件的叫法)可以使图片或者任何内容通过点击或自动在水平或垂直方向上滑动。主要特性包括：连续滑动，“go to first”和”go to last”按钮，隐藏控制工具，可选的控制按钮的代码标记，在同一页面上垂直滑动或出现多多种滑动。

查看演示

3. jasonreedwebdesign (滑动标签，折叠面板)

Jason Reed在他的个人作品集上使用了一款流行的折叠面板效果允许用户进行页面导航。他还在折叠面板内使用了一款非常漂亮的滑动标签来增强界面结构。

3.1 互动标签

制作方法 » 自动滑动标签

滑动标签是一个mootools插件，可以添加一些漂亮简洁的效果。它和Panic Software’s Coda网站上的滑动效果相似。另外，它还可以在固定的时间间隔内自动滑移。

查看演示

3.2 折叠面板

制作方法 » 垂直折叠面板

该款插件提供了一些简单的选项来改变折叠面板的外观和动作。

制作方法 » 使用 Mootools 制作折叠面板

4. Dragon Interactive (动态菜单)

我非常喜欢他那叹为观止的菜单，乍一看以为是一个flash，后来通过查看代码发现就是使用了简单的XHTML，CSS以及Javascript。

3.1 动态菜单

制作方法» 使用jQuery 制作动态菜单

查看演示

5. DesignShack (切换页面布局)

大多数CSS图库网站都会提供给用户改变页面布局的功能，从而使用户可以更加轻松，迅速的获取信息。 ƒ

5.1 转换页面外观

制作方法 » 使用CSS和jQuery显示转换钮

通过使用CSS和jQuery让用户切换页面布局。

查看演示

6. Profoto (面包屑Breadcrumbs)

Profoto有一个独特的面包屑(breadcrumb)菜单。点击面包屑链接的时候会在它的下方打开一个区域，给用户一些附加属性进行选择。

6.1 面包屑Breadcrumb

制作方法 » jBreadCrumb

jBreadCrumb是一款jQuery插件，可以通过更为灵活和聪明的方式来显示面包屑。

查看演示

7. Shelfari (混合按钮)

Shelfari具有一个非常有趣的混合按钮/向下滑移的菜单来显示对书籍的执行动作。如果你查看代码你会发现选择框那里并没有使用一个输入框，而仅仅使用了背景图片。

7.1 自定义表单元素

制作方法» Custom Form Elements

曾经总是在好奇如何可以按照自己的方式定义表单元素，如选择框，多选框以及选择区域。Custom Form Elements通过使用Javascript和CSS来提升基于网页的XHMTL表单的样式及可用性。

查看演示

8. CSS Ninjas (费用预估滑杆)

CSS Ninjas提供了一个非常有趣的费用预估滑杆允许客户估算服务费用。

8.1 滑杆

制作方法 » jQuery UI 1.7 Slider

该款插件的目的就是通过渐进增强来控制jQuery UI Slider插件。

查看演示

9. Facebook (表单自动完成)

Facebook的地址自动完成表单是表单自动完成的最好案例。

9.1 表单自动完成

制作方法 » FCBKcomplete v 1.09

一款有趣的facebook样式的动态输入框，可以自动完成或预载值。

查看演示

10. Design Flavr (Smooth Slideshow)

DesignFlavr, 一个非常有名的设计灵感资源网站，使用了一个淡入淡出的幻灯效果来展示他们的特色作品以及相应的作品描述。

10.1 Smooth Slide

制作方法 » s3Slider

s3Slider是一款免费的jQuery插件，可以实现交互渐变的幻灯效果。

查看演示

[原文链接]

网站面包屑(breadcrumb)设计实例解析

4EB Studio — Sun, 29 Mar 2009 09:22:51 +0000

在一个拥有很多页面的网站上，面包屑导航(breadcrumb navigation)可以大大提高用户导引的方式。换句话说，面包屑(breadcrumb)可以减少网站访问者找寻更深级别页面的步骤，并且改善了网站区块和页面的可访问性。而且面包屑(breadcrumb)还是一个有效的直观标识来告诉使用者他们当前的位置，是当前登录页面最好的上下文信息资源。

什么是面包屑(breadcrumb)?

“面包屑(breadcrumb)”是二级导航计划的一种形式，可以清楚的标明当前用户所在的网站或网络应用的位置。该术语源自《奇幻森林历险记》（Hansel and Gretel）这篇童话故事，两个小孩子通过丢面包屑来标记回家的踪迹。和童话故事中一样，面包屑(breadcrumb)在现实应用中可以提供给用户追踪原始登陆点的方式。

Delicious.com上的面包屑(breadcrumb)

通常你可以在一些内容量极大，并且使用分级结构的网站上看到面包屑(breadcrumb)。你也可以在一些具有多重步骤的应用程序上看到它们。面包屑(breadcrumb)的结构非常简单，水平排放了一些文本链接，并且用大于号隔开(>)；这个符号标明了当前页面与相邻页面之间的层级关系。

本文，我们将探讨面包屑(breadcrumb)在网站中的使用方法以及提供一些好的案例供参考。

什么时候需要使用面包屑(breadcrumb)?

大型网站或者具有层级结构页面的网站需要使用面包屑导航(breadcrumb navigation)。最好的例子就是一个电子商务网站，这种网站的产品都会根据逻辑分类进行归组。

对于一些仅有一级结构的网站你不需要使用面包屑(breadcrumb)。一个决定是否需要使用面包屑(breadcrumb)最好的办法就是建立一个网站地图或者用图表画出网站导航结构，并且分析一下使用面包屑(breadcrumb)是否可以改善用户在分类之间的导引动作。

面包屑导航（Breadcrumb navigation）只能作为一个网站附属的特性而不能代替主导航。它是一个方便的功能，一个二级导航计划可以让用户确认他的当前位置，并且是你的网站导航的另一种表现方式。

面包屑(breadcrumb)的形式

下面介三种主要的面包屑(breadcrumb)形式。

基于位置的(Location-based)

基于位置的面包屑(breadcrumb)可以告诉用户他们当前所在的网站层级。最具代表性的就是用在具有多级别（通常大于两级）的导航中。下面的示例 (SitePoint)中，每一个文本链接的层级都大于各自右侧的文本链接。

基于属性的(Attribute-based)

基于属性的面包屑(breadcrumb)路径显示了特定页面的属性。例如，在Newegg网站中，面包屑(breadcrumb)路径显示了特定页面上项目的属性。

该页面显示了所有具有制造者为“Lian Li”这个属性的计算机，同时他们还具有“MicroATX Mini Tower”这个表单元素。

基于路径的(Path-based)

基于路径的面包屑(breadcrumb)像用户提示了他们达到特定页面的步骤。这种形式的面包屑(breadcrumb)是动态的，因为它们显示的页面是用户在到达当前页面之前已经访问过的页面。

使用面包屑(breadcrumb)的好处

使用面包屑(breadcrumb)有以下几点好处：

为用户带来方便

使用面包屑(breadcrumb)主要是为用户提供站内导航的另一种方式。通过在多级结构的网站上为所有页面提供面包屑(breadcrumb)路径，用户可以更容易的定位到高级别的页面。

减少返回高级别页面的点击数量或动作

代替使用浏览器的返回按钮或者网站的主导航返回到高级别页面，用户现在可以通过面包屑(breadcrumb)使用更少的点击到达目的地。

通常不占用屏幕空间

因为通常都是使用水平方向且不进行格式化，面包屑(breadcrumb)路径不需要占用页面很多空间。这样的好处就是他们对于内容的加载没有任何负面影响，并且如果使用得得当的话将化解其他负载。

减少跳出率

面包屑(breadcrumb)路径对于吸引首次访问者进入当前加载页面以后继续查看网站其他内容是一个非常棒的方式。例如，当一个用户通过google搜索进入到一个页面，看到一个面包屑(breadcrumb)路径的时候可能会试图点击更高级别的页面来查看相关感兴趣的文章。这样依赖，就可以减少整个网站的跳出率。

使用面包屑(breadcrumb)的常见错误

使用面包屑(breadcrumb)是意见十分简单的事情，在决定是否需要使用他们之前仅仅需要考虑几点建议。下面让我们看看需要避免的一些错误使用情况。

在不要使用的时候而使用了面包屑(breadcrumb)

最易发生的错误就是面包屑(breadcrumb)对于网站没有任何益处的时候而使用了它。

在上面的例子中，Slicethepie为使用者提供了太多的导航选择。 (1) 主导航， (2) 面包屑(breadcrumb)路径以及 (3)二级导航的位置都十分接近。面包屑(breadcrumb)在这里并没有为用户提供什么方便之处，因为二级导航已经直接显示出了下级页面。而且，点击面包屑(breadcrumb)上的二级链接 (”Music”)将把你代回到一级标签 (”Listen”)，这将错误的向你提示第一个标签会比第二个标签(”Search” 和 “Artist hall of fame”)级别高。

将面包屑(breadcrumb)作为主导航

正如前所属，使用面包屑(breadcrumb)仅仅是一种可选的导航方案。

在上面的例子中，mefeedia并没有提供主要的查看视频的导航菜单。尽管这里在页脚部分有一个文字链接导航，但是在页面主体上并没有一个导航菜单，从而使得网站其他部分的定位非常困难。

假设你通过Google直接到达了视频页面，那么可供你使用的导航仅有面包屑(breadcrumb)。也就是说如果你已经浏览了网站的其他页面并且到达了一个没有主导航菜单的页面，那么你不得不使用浏览器的“返回”按钮访问主菜单。

当页面具有多种分类的时候使用面包屑(breadcrumb)

面包屑(breadcrumb)具有一个线性结构，因此当你的页面分类种类较多的时候使用它会比较困难。决定是否需要使用面包屑(breadcrumb)通常都很大的依赖于你的网站结构设计。当一个低级别的页面具有一个以上的父级分类，那么使用面包屑(breadcrumb)是无效的，不精确的，而且会让用户非常迷糊。

面包屑(breadcrumb)导航设计考虑因素

当设计面包屑(breadcrumb)导航计划的时候，需要在大脑中牢记几点。让我们一起来看看当你设计面包屑(breadcrumb)的时候可能会遇到的问题。

应该用什么区分开链接项目？

通常被接受并且广泛认知的区分面包屑(breadcrumb)超级链接的符号就是大于号(>)。最具代表性的说，大于号用来表示层级结构，像这样的结构主分类>子分类。

Other symbols used are arrows pointing to the right, right angle quotation marks (») and slashes (/).

选择使用什么样子的分隔符依赖于整个网站的美观设计以及所使用的面包屑(breadcrumb)形式。比如，基于路径的面包屑(breadcrumb)就不需要在每个链接文本之间提供层级关系，使用大于号并不能精确的传递他们之间的关系。

面包屑(breadcrumb)应该多大？

你无需让面包屑(breadcrumb)占据网页的主导位置。一个面包屑(breadcrumb)仅仅扮演用户使用助手的功能。它的尺寸只需可以传到足够的信息给用户足以，因此可以很小，或者比主导航小一些。

上图像我们显示了一个非常好的原则就是面包屑(breadcrumb)不能作为用户到达页面的时候被第一眼吸引的东西。

面包屑(breadcrumb)应该放在什么位置？

面包屑(breadcrumb)通常显示也页面的上半部分，如果导航菜单使用的是水平方向的话就在主导航菜单下方即可。

面包屑(breadcrumb)展示

我们已经讨论过了面包屑(breadcrumb)的6W(who, what, when, where, why以及how)，下面来看看一些实例。以下部分你将看到一些非常棒的网站上使用面包屑(breadcrumb)的例子。

1. 经典的基于文本的面包屑(breadcrumb)

TypePad Design Assistant

NASA

Nestle 使用的面包屑(breadcrumb)文本是页面上最小的文本，有效的体现了面包屑(breadcrumb)的谦逊而不唐突。

Marchand de Trucs

Bridge 55

Overstock.com 在它基于属性的面包屑(breadcrumb)上使用了标准的大于号，并且为产品属性使用了选择框，这样用户就无需再对它们进行筛选。

2. 使用其他符号代替 “>”

TechRadar UK 和 BP 使用向右的三角。

PSDTUTS 和 Martique 使用了破折号。

Mouse to Minx 使用了向右的箭头来表示页面的层级关系。

Jakob Nielsen’s Alertbox 使用了右箭头。

Target 使用了半角冒号 (:) 。

3. 超越简单的文字链接

现在的面包屑(breadcrumb)设计趋势用简单的一句话来说就是“面包屑(breadcrumb)不一定是普通的”。在下面的示例中，你将看到一些与整个网站设计风格完美结合的漂亮的面包屑(breadcrumb)样式。

4. 多步过程的面包屑(breadcrumb)

Statement Tracker 使用了面包屑(breadcrumb)路径来标示帐号注册的步骤。

Flickr 使用面包屑(breadcrumb)来标示Flickr使用方法的单元数字。

5. 带有子导航的面包屑(breadcrumb)

下面将向你展示一些这样的面包屑(breadcrumb)样式，当用鼠标点击或者悬浮在链接上的时候会打开一个子导航面板列出一些附加属性或者位置。

MarketWatch

Profoto 具有一个独特的面包屑(breadcrumb)：点击面包屑(breadcrumb)上的链接将会在下方打开一个区块向用户显示附加的属性以供选择。

Cranfield University

Lonely Planet 同样具有一个fly-out样式的面包屑(breadcrumb)供你改变属性。

点击一个面包屑(breadcrumb)链接将会打开相应项目的页面，同时点击向下的那个按钮会打开附加的选项。

MSDN 的面包屑(breadcrumb)具有一个可以打开二级导航列表的滚动面板。

Wowhead 的面包屑(breadcrumb)具有一个多级别的二级导航

6. 具有交互功能的面包屑(breadcrumb)

Delicious 可以让你移除面包屑(breadcrumb)上面的项目来帮你快速定位书签。

7. 具有实验性的示例

Booreiland 使用了一个面包屑(breadcrumb)风格的导航计划作为主菜单，允许用户快速理解他们当前所浏览的内容。

用户交互设计师，AEN UI的Aen Tan发明了一种称为 “Tabcrumbs”的设计方式，即一个将标签和面包屑(breadcrumb)组合在一起的导航计划。

关于本文作者

Jacob Gube

是一名网页开发和设计人员，也是 Six Revisions的一名作者。如果你想和他联系的话，可以加入他的Twitter。

[原文链接]

45款苹果设计风格的photoshop教程

4EB Studio — Thu, 26 Mar 2009 02:11:32 +0000

多年来，苹果产品对全球的设计师和图像艺术家们来说都有深远的影响。简洁而锐利的Aqua界面强烈影响着新产品的展现形式和设计风格。除了产品设计外，苹果公司的网站和出版物的外观与版面也使其变得与众不同。

没有其他任何一家公司可以呈现出如此艳丽和绚烂夺目的风格作为每一次突破性的革新来长时间的改变着我们的生活。苹果公司已经建立了一种十分有效的方式来传递它的信息给广大的观众，并且苹果外观与感知在其中起着主导作用。

本文我们展示一系列漂亮的苹果风格的Photoshop教程。我们收集这些作品不仅因为我们对苹果的忠诚热爱，还因为我们觉得你们会从中受益。

Mac Photoshop教程

MacBook Air
在这个具有20个步骤的教程中，你将学会如何创作一台MacBook Air.

创作一款矢量风格的MacBook草图
一篇很长的用photoshop制作MacBook Pro的教程，使用了图形和多种技巧。

创作一款光滑的黑色iMac
一款黑色的iMac会是什么样子的呢？作为一个photoshop设计师，你可以设计一下你心目中的样子。

创作苹果鼠标
用photoshop传作一款简洁而优雅的苹果鼠标。

iPhone

Apple iPhone设计
使用简单的几个步骤设计这款时髦的手机。

创作一款 Apple iPhone草图
拥有一部iPhone是非常时髦的。快用Photoshop装作一款属于你自己的iPhone吧。

iPhone风格Icon
Apple发布了一些建议来创作网络应用，现在就先来学学如何制作iPhone风格的icon吧。

如何创作iPod Touch
最简单的创作iPod Touch的方法。

创作iPod Touch
纯手工绘制而无需使用任何图片创作出来的iPod Touch。

iPhone教程
该教程详细讲述了如何创建图形，应用效果并且创作你自己风格的iPhone。

iPhone GUI PSD
一个非常全面的元素库文件，所有元素均可编辑。

iPhone设计资源
这里有一些资源可以帮助你进行iPhone设计项目。

60款非常漂亮的Apple Wallpapers
Showcase of 60 most beautiful Apple-related wallpapers, including the Apple logo, the Mac OS X, time machine, iPods and more.

视频教程

Mac广告

创作iPhone 广告

iPod风格笔刷

Grunge风格的iPod设计

I See iPod People 平面广告

设计一款Coldplay版的苹果素描

制作Apple风格的广告

制作你自己的iPod风格照片

Attack of the iPod People 广告风格设计

[原文链接]

25款极具创新意义的CSS特效

4EB Studio — Wed, 12 Nov 2008 09:18:17 +0000

CSS不仅仅只能处理一些中规中距的日常设计工作。本文将像你介绍25个非常有意思的，极具创新的，试验性的CSS技术。

需要说明的是，这些技术和实例不一定适合所有的浏览器，而且不一定符合设计和开发标准。其中一些技术还尚处探讨阶段。

透明CSS下拉菜单

该示例演示了如何设计一款先进的CSS透明下来菜单。该技术需要使用JavaScript技术实现IE6下PNG图片的透明效果。

返回图片地图

你将在该示例中看到一款用非常流行的方式设计的基于CSS的带有信息弹出框的图像地图。

CSS 3D迷宫

这是一款纯CSS设计的3D迷宫。如果你也想设计出这样的效果，那么你要做好充分的心里准备，因为你会为此付出很长的时间和耐心。

CSS滚动图像地图

该示例是用CSS设计一幅使用了热点技术的全景图片。点击图片的上的热点会在旁边的区域显示它的描述信息以及一幅可缩放的图片。

CSS装饰图库

Demo: CSS Decorative Gallery

Web Designer Wall 向我们展示了一款使用背景图像技术设计的图库效果。

CSS纸牌

Demo: Playing Cards

该示例使用特殊的HTML属性显示纸牌效果，并使用CSS对其进行样式和定位设置。

CSS版辛普森一家

在该示例中，Román Cortés使用HTML和CSS重新设计了辛普森一家。你可以点此查看动画效果。

CSS房屋造型

Demo: CSS House

Design Detector通过使用DIV和CSS设计了一款房屋造型。

使用CSS定位和透明效果设计“Secret Message”

Demo: Secret Message

该示例是由CSS-tricks 的Chris Coyier设计的使用滚动效果显示”Secret Message” 。

如何设计细边阴影效果

Demo: light-weight drop shadows

该示例使用PNG图片透明效果来制作DIV边框的阴影效果。在IE6浏览器下需要使用JavaScript技术支持。

多种位置的阴影造型

这是使用另一方式设计的页面元素阴影效果。

多种透明效果

在该示例中，CSS大师Eric Meyer展示了一些使用CSS设计的透明效果

DVD遥控器

Design Detector 使用HTML和CSS技术设计了一款遥控器效果。

划线效果

CSSplay 的Stu Nicholls使用CSS设计了一款铅笔画线的效果。将鼠标放在图片上面，铅笔将画出一条水平线。

CSS文字阴影

使用纯CSS技术设计文字阴影效果。该技术涉及了文字层叠技术。不过目前css3已经提供了文字阴影的属性。

基于CSS的flash链接效果

在该示例中，将鼠标停放在导航栏的一个标题上，箭头将从做至右滑动。

地图信息提示

该示例演示了CSS在一幅地图上的图像地图效果。

纯CSS信息提示效果

该技术实现了鼠标悬停时显示隐藏DIV块的效果。

CSS页脚固定效果

这是一个固定在页面底部的页脚效果，他可以忽略页面的高度。

等比变化的五星

使用CSS画出一个简单的五星形状。当用户调整浏览器字体大小的时候，五星图形将随之进行等比例变化。I

菜单描述

在这个使用css设计的菜单中，鼠标悬停时可以显示更多的菜单信息。

CSS渐变效果

Demo: CSS Gradients Demo

该示例演示了使用CSS样式和空DIV元素以及背景颜色模仿渐变效果。

等比例变化背景图片

Demo: Scaled Background Image

该示例演示了如何设计一个可按比例变化的背景图片。(改变你的浏览器大小试试看)。

CSS垂直柱壮图

该示例演示了使用CSS生成一个垂直的柱壮图。

CSS渐变文字效果

Demo: CSS Gradient Text Effect

该技术通过使用PNG图片为文字添加渐变效果。在IE6浏览器下需要使用JavaScript来支持透明效果。

35款超炫商业名片设计欣赏

4EB Studio — Thu, 14 Aug 2008 09:14:14 +0000

当我第一眼看到这些商业名片的设计的时候，真的令我很诧异且打开眼界，不知作为设计师的你是否会从中得到一些灵感和启发呢？

Eric Kass | design by funnel.tv

Heads Inc | design by headsinc.com

Melvin | design by www.jenimattson.com

Thielen Designs | design by thielendesigns.com

Diesel Design | design by dieseldesign.com

Promptt | design by promptt.com

National Greyhound Adoption Program | design by lauriedemartinodesign.com

Steven Belkowitz | design by lauriedemartinodesign.com

Kinos Aarau | design by heinz wild

Digitopolis

Actual Size | design by actualsizecreative.com

How’s my designing ?

Joe Duffy | design by duffy.com

Richard E. Smith

Vorderman Photography | design by oneluckyguitar.com

Manicurist Card

Sensus Design Factory

Front :

Back :

The Church

Ben Grosz | design by Ben Grosz

Cehovin Eduard

Mass Envelope Plus

Marian Bantjes | design by bantjes.com

Coffee Industry

Design Your Life | design by design-your-life.org

Ed Fella

Space 150 | design by space150.com

Thomas Wood Products | design by johnstonduffy.com

Tania Hannaford

Kaypee Soh

Sack Wear | design by whois3.com

Austin Walsh | design by konnectdesign.com

B. Uhrig & Son

John Bragg | design by funnel.tv

30款令人兴奋的插画风格设计网站

4EB Studio — Wed, 30 Jul 2008 08:53:24 +0000

在noupe上看到了一篇介绍插画风格网页设计的文章，真的是令人兴奋不已。优秀的矢量绘图通常会给人们带来深刻的印象，如果你作为一个网页设计师，可以将矢量图运用的游刃有余的话，那么你的网站一定会深深印在读者的脑中。

下面就是30款令人振奋的矢量绘图网页，或许可以带给你一些启发。

1- Idiotic Adventures

2- Skaffs

3- Dean Oakley

4- Adit Shukla

5- Ewout van Lambalgen

6- Oypro

7- Artgeex

8- Daily Candy

9- Saizen Media

10- Meomi

11- Studioespace

12- SilverBackApp

13- Octwelve

14- Evolved

15- Rob Sheridan

16- Sir Patroclo

17- Banjax

18- VistaIcons

19- SR28

20- JustinBird

21- Dougdosberg

22- PixelCriminals

23- TakeABenyLinday

24- Enroutefilm

25- Mauricio

26- Krolikov

27- Audiomonster

28- StrawPollNow

29- Deadmetropolis

30- Yodiv

使用纹理和图案作为背景的网站赏析

4EB Studio — Thu, 10 Jul 2008 09:08:08 +0000

编译：四眼天兔工作室资料来源：SMASHING MAGAZINE

纹理和图案远比我们想像中用的更多。这是为什么呢？因为它们在设计中通常都是用来做背景，配合全局设计，替代标准的背景颜色以及创造更吸引人的氛围。但是，它们从未成为过真正的主角。事实上，木质纹理似乎成为目前的一种流行的设计素材。但是我们并不认为木质纹理是一个新趋势，毕竟它已经使用了很多年了。不管怎样，不可能什么设计都采用木质纹理。不过还是有很多其他的选择，如：织物图案、拼贴、地质、岩石、墙壁、砖块、编织、纸板、陶瓷、衰减、金属铁锈、老照片、塑料以及玻璃等。

在本文中，我们将向读者展示一些有用的纹理和图案网站。我们旨在告诉设计者们，除了木质纹理，还有很多更好的纹理可供设计之选。这些背景图片有些是照片，有些是用PS或者illustraror设计的插图。

拼贴,图案

如何创作一款拼贴图案？

事实上，这是一件比想像中容易的多的事情。例如，你可以登陆BgPatterns，一个免费的“拼贴背景设计”网站，它拥有很多的基本样式库，你可以在这里搜索、创建、评价以及分享各种图案。你可以从68款图像（卷曲、星星、花朵、心、符号、树木等）中挑选一款，然后为你的拼贴图案选择一个颜色，网站将自动为你生成你想要的样式。

你也可以应用一些效果（杂色、粗糙等），并且可以随心所欲的进行旋转。你可以轻松自由的创造你的拼贴图案，下载并且储存。

下面是一些已经用于一些网站的缩略图:

现代网站设计中的拼贴图案展示

The Paisley Farmhouse 使用了非常好看的复古包装纸样式作为背景图案

Renegade Latino 使用了黑色的拼贴图案作为背景。

t!agOliveira 使用了一个几乎看不出来的黑色图案作为背景。

Uniquexports 使用了拼贴背景的在线商店网站。

Noblanco 该网页将背景图案放在了左侧。

General Robots 使用了星星的拼贴背景。这还是一个在线商店。

Booreiland: 使用了经典的蓝色、粉色和黄色设计的网站。

Warfield.net 使用了经典的壁纸图案

Designbyfront: 使用了同样的壁纸图案，但是颜色不一样。