网页设计的细节(17页).doc

-网页设计的细节优秀设计和卓越设计之间的区别是比较小的。一般人可能无法解释说明卓越的设计的具体差别，但他们可以找到自己喜欢的网页设计作品。通过对照一下几个 优秀作品，我总结了一下作为卓越设计的几个细节差别。现在这篇文章有点像是上一篇文章的延续。在上一篇文章里面我们重点讨论了对 比、重复、对齐、分割在网页中的应用。以下内容我以几个优秀的网页作品作为实例，来说明卓越设计一直遵循的原则！一、合理使用渐变渐变不要滥用，更不要把渐变弄的跟彩虹似的，否则你的网页作品看起来比较外行。总而言之，合理的使用渐变对于优秀网站设计是有帮助的。渐变、散景结合使用Newism网站色彩丰富，但微妙的渐变与背景在视觉上结合的很到位。如果你也有兴趣在photoshop里面做这个散景效果，可以去Abduzeedos tutorial网站上面学习一下。渐变、投影、纹理结合使用。OnWired网站应用了这些设计技巧，显而易见，他的设计作品效果是很棒的！自始自终OnWired网站设计在应用渐变、投影、质感这方面是恰到好处 的。我也特别喜欢设计师设计的这些。二、留白留白一词往往容易被误解从字面解释 的空白。网页设计较 为准确的描述则是网页各个板块元素之间的空间范围。进一步分析看看A List Apart是如何定义它 的。“留白”对于网页设计是很重要的，留白不至于让你页面元素都堆积在一起。对于年轻设计师来说留白可能是一个大问题，他们在做设计的时候将整个页面放的满满 的，没有给页面足够的“呼吸空间”。这对于他们来说可能不是什么问题，如果内容放不下的话，他们可以借助浏览器的滚条来扩大页面的空间。优秀的留白与巧妙的分割线Snook网站布局方面设 计的是比较合理、舒服的。同时注意一下，网站里面的虚线将各个板块区分开了，这样我们在浏览网站的时候就一目了然了。抽象图形沙发采用抽象、美观、简约的方法。通过使用无背景或杂乱的图像，给浏览者的空间 是流畅、舒服的。三、网格布局网页设计的网格布局最初的灵感是借鉴了报纸的排版。但是如果你仔细观察周围的事物都可以找到网格现象，从好的设计到生活中的交通网。960和蓝图可能是两个最流行的网格布局。我个人比较喜欢960网格布局，它简单、重点 突出。你可以用任意对齐方式来安排你网站的元素，对齐在设计一个复杂的页面时，能使你的网站看起来比较精致、井然有序，并且你在网页布局里 面添加任何模块内容时候都不用考虑其他的模块内容。综合使用网格布局Poccuo网站综合使用了网格布局，它 采用3列和5列相结合的布局方式。给人以视觉吸引力和视觉空间。博客采用列布局我比较喜欢Web Design Ledger首页最上面的展现方式，他把最新的公告内容放大同时放到页面最顶部，其他的以3列的方式排列。大量使用相等的列布局Ecoki漂亮的网页布局显而易见采用的是4列、2行布局，同时幻灯片、缩略图、最新的审 查也是采用相同的方式。四、改善字体应用字体应用困扰着大多数的设计师。如果要想提高你的设计水平，字体在其中扮演着重要的角色。不但在可读性方面也扮演着重要的角色，同时还可以增加设计作品的 氛围。用对比字体引起关注SimpleBits网站在应用各种对比 字体引导浏览者的注意力方面做的很棒。字体对比可以采取不同字体对比、各种颜色对比、字体大小对比等形式。不要认为字体就像标志这个网站看齐来就非常的漂亮、舒服，但你可以说出你的想法和感受来描述这个感觉。尤其在间距、字体选择等字体应用这方面做的挺完美的，我就被他的logo 字体应用迷住了。五、明确而有效的导航良好的导航对于网页设计来说很重要，如果浏览者不能快速、便捷的找到它，他们就很有可能去别的网站了。这是我们所不愿意看到的，同时我知道 MyInkBlog进行了一些改进，并将在以后重新设计中进行彻底的改进。博客导航下面显示分类导航在大多数情况下，博客导航放在页面的同时将分类作为第二导航放在页面的边栏。Tutorial9做 了一件了不起的事情，他把浏览者关心的photoshop资源以生动的方式展现出来了，并且在鼠标经过二级导航的时候有一个高亮效果。切换不同的图标效果图标切换效果在web2.0网页设计里面无论是否需要被大量、胡乱的应用，并且成为一种趋势。并不是所有的都是不好的，web2.0里用的不好的原因是过 度使用、业余使用造成的。在大多数情况下，适当的应用图标切换按钮是相当有效的。Carsonified网站在导航上就运用了单色、简洁的图标切换效果， 并且于他的网站整体感觉想吻合。六、使用漂亮实用的页脚一开始我们就将页脚作为次要的内容，在页脚里面放置一些没有多大用处的内容。在设计的时候仅仅花费一点点心思在它上面。现在页脚对于整体设计来说变的越来 越重要了，千万别错过好的页脚完成你设计。展示大量的信息和证书这个页脚主要展示了网站介绍和版权等必要的信息。Brian Hoff网站更是添加了一些个性、有趣的内容在里面。通过3列布局方式展示了作者的工作和建议性的内容。添加搜索功能Elliot Jay Stocks网 站在底部添加了一个特大的搜索框细节让网页设计与众不同细节使得这个世界从平凡变得不平凡一辆豪华汽车与传统汽车拥有同样数量的车轮、座位、门窗，但是使得它在竞争中脱颖而出的却是花费在细节上的时间。加热真皮座椅，一按即启动引擎，无钥车门开关，自动泊车系统，丰富的数字电台等等使得它成为一辆昂贵的新型车。同样的规则也适用于网页设计。愿意花费时间专注于细节的网页设计师能够获得拥有更多价值的设计。这里的关键词就是价值。我们无法保证建立网站所花费的时间和其结果所带来的价值之间有直接的关系，总有一些细节比其他更加重要，关键是要能够确定哪些细节更具有影响力。增加价值的细节这一类型的细节是我们愿意在审美层面之外花费额外时间以改进我们工作的细节。我们希望专注于可以深入改变用户体验的视觉调整，例如用户对该网站的主题和消息的体验或者他们如何畅游网站。一般的没有建站经验的网站访问者，无法指出某些细微差别来的用户体验改善，但是如果这些细节被移除，用户将在感知和可用性方面感觉到明显的差异。这些就是我们愿意花费时间的细节。那么一个设计细节到底如何为网站带来附加价值呢？诀窍就在于用户体验。网站设计师应该能够出色的理解负空间、对比度、形状、颜色和所有不同的视觉元素在用户使用和体验一个网站设计时所起的作用。真正令人惊讶的是设计者仅仅需要操纵几个像素就可以发生很大的差异，使之产生更大的影响。这些差异到底是什么？进一步观察我觉得Photoshop最令人舒服的是当我将图片放大到500%甚至更大时，它看上去就像在家一样舒服。我们来仔细研究一些相当成功的用细微细节引导用户体验方面图片吧。以Concentrate 网站为例，它看起来很适合我们初次集中精力来欣赏。从一个高层次的视角开始，我们可以看到Concentrate网站的使用了一个富有创意视觉技巧。除了这罐橙汁，我们看到一个橙色为主题的调色板和背景，很好的模拟了真实的橙子的果肉口感。进一步研究，我们发现它使用了CSS3为文本增加一些阴影来增加与背景的对比。为了真正的欣赏细节，我们需要在进一步的研究。像素级完善真正的细节应用在像素级。我们再来看Concentrate的快捷按钮周围，靠近网页布局顶端的部分。首先，按钮背后的阴影将页面上的这部分突出出来。该区域顶端和底部的两个简单的单像素线是一个简洁的设计方式，它使得这个区域在视觉效果上更明显的区别于页面上的其他元素。其中的一个单像素线条更引人注意，这是因为它使用了亮橙色。它为两者之间的阴影和背景提供了对比，但是真正起作用的却是第二个暗橙色的线条。两个线条相互配合起来封锁了这个顶部区域。差异当这个页面不再包括这些线条的设计的时候，差异就能最好的表现出来。下面，我将移去这些线条来向大家展示两个像素能够带来怎样的不同。微妙的阴影阴影效果对于网页设计者来说已经不陌生了。许多网站很早就开始使用它们并且经常模拟平面深度及二维介质。阴影和高亮可以微妙但强有力地改善我们网站的用户体验。我们在设计中采用CSS3，它可以带来的宏伟的差异让我们很容易为之兴奋不已。而对于我来说，真正值得兴奋是有多少细节工作可以从图片处理软件转移到我们网站的代码上去。还是来看这个Concentrate网站，它是一个很不错的例子，使用巧妙而有效地使用文字阴影效果使网站内容更容易阅读。这里以两种方式使用了CSS3的text-shadow属性。首先红色的标题在与背景颜色相近的情况下，被赋予淡淡的阴影以产生内嵌式的效果。基次在段落后面简单地给白色一点发射效果。差异比较上面的截图以及同样的页面在IE8（不支持text-shadow属性）下渲染的效果，我们就能发现它更难看得很多。值得指出的是这个网站卖的是Mac软件，所以自然地不那么重视IE用户的体验了。导航细微差别除了增强易读性和强调可能的网站操作，细节对网站导航也有很大的帮助。任何网页最重要的部分之一就是如何将用户导航到另一个页面。毕竟链接是起初使得网页之所以称之为网页的核心，所以为什么不多花一点点时间在适航性上呢？举个例子，我们来看 Lipperhey 站点。除了为导航的活动状态选择好的颜色以外，我们发现它的设计为网站的主导航栏添加了一些用趣的细节。Home按钮由于一些颜色变化之外的原因而很显眼。首先我们可以看到它从导航栏下沉了几个像素。其次，按钮背后被加上了阴影并且对透明度做了轻微的调整。这两个细节一起为这个链接赋予了附加维度的感觉，指示了它的重要性及激活状态。差异再看一下没有上面提到的细节的导航，我们发现很多令人兴奋的东西都没了并且我们的激活链接会有完全不同的样子和感觉。细节更进一步我们研究了一种运用CSS3的一些新功能来辅助我们设计的方法(text-shadow)。但CSS3的强大远不只是阴影。CSS3动画，表现为transform和transition的属性，给我们的细节工作增加了额外的工具。只要使用得当，CSS3动画为我们的网页元素添加高效的动画效果，而不需要借助Flash或JavaScript。在细节方面，动画允许我们在各种输入情况向用户提供流畅的反馈。例如为链接的hover状态或按钮点击添加过渡动画，可以告诉用户他们鼠标正悬停在（或触摸，对于触屏移动设备）一个活动的元素上面。与网站细节相伴的工作的美好在于通过进一步努力，我们仍然可以为我们的用户提供部分价值，而不需要疏远那些使用过时的浏览器的用户。关键之处在于我们要使用所有这些技术来为已经很可靠的网页设计增加价值，没有一个基本的可靠的设计而空谈学习这些技术就是本末倒置。网站还能在哪些细节方面改进来增加它的价值呢？你做过的项目还成功地使用过哪些类型的细节技术？网页设计中最常用到的设计细节前一段时间在企业管理界流行一句格言叫”细节决定成败”。企业管理当然不是我们这里要讨论的主题，但是，把这句话放在网页设计当中的确是颠扑不破的真理。我们的眼睛和感觉总是非常敏锐的，即使是完全不了解网页设计技术的人也能够从一堆拙劣的设计作品当中挑选出那一个优秀的设计作品。虽然他说不出来为什么这件东西比那些都好，但是直觉会告诉他他自己喜欢哪一个。如果别人向我们问起为什么这件作品要优于其它呢?我们的回答是”很大一部分原因是因为优秀的设计作品总是充满了丰富的细节。”在这篇文章里，我们就从技术的角度出发，以PremiumPixels上的Redux WordPress主题设计作品为例，来总结一下在网页设计中到底是哪些细节让优秀的作品脱颖而出。 互联网的一些事一、1像素的衬线 yixieshi在页面的顶端，你能看到一条1个像素比背景颜色略浅的水平线将纯色的背景和带有材质的背景分隔开，如下图： yixieshi而如果没有这条衬线会是怎样的一个效果，我们也来看看。 yixieshi实际上，网页设计中，使用到衬线的例子非常普遍。例如下面的这个例子中，你会在包围着”The Dorchester Hotel”文字的黑色边框的顶部向下1个像素发现一条灰色的衬线。 yixieshi 而在下面这个设计好的按钮中，绿色和黄色边框顶部向下1个像素也能看到一条颜色更浅的线条，而这条衬线制作的更为精细，因为它应用了蒙版，从顶部向下你会发现这条衬线渐渐隐去了。另外，在”Add To Cart”和”$9.99两个文字之间的分隔线实际上是两条线，左边颜色深一些，右边颜色浅一些，这样就能产生线条的凹陷效果。 yixieshi 之所以要使用衬线，是为了体现物体在2D效果上的立体感，而立体感的体现必须要有阴影和高光。阴影我们通常使用图层样式来实现，而高光效果的实现，最常用的技巧之一就是使用衬线了。上面的三个例子的衬线都在物体的顶部，说明光线是从上向下照射的，高光处于物体的顶部。而如果光下从下向上照射的话，高光就应该在底部了，那我们就应该将衬线放置于物体的下方。所以在衬线的使用上，我们始终要问自己这几个问题，”我在这里使用了衬线，那么光源在哪里?”"如果光源在这里的话，阴影应该出现在什么位置?”完成了这两个回答，设计出来的物体的立体感才能更加真实。 互联网的一些事二、细微的材质 互联网的一些事Redux主题真是解释背景材质的绝佳案例。因为在整个页面中，从上至下使用了三种不同的材质作为页面的背景。上面的深蓝色部分应用的是坑坑洼洼凹凸不平的材质，中间黑色部分应用的是纺织布的材质，而底部应用的是杂色的材质。当然，这三种材质都是非常细微的，但是效果确是非常出众的。实际上，过于醒目和复杂的背景材质不仅不能为设计增色，反而由于分散读者的注意力而是整个设计品质降低。所以最好的策略就是让你的背景材质保持细微而柔和。三、柔和的渐变 互联网的一些事 是不是下面图片上的文字框有一种鼓出来的感觉，对，那正是渐变带给我们的效果。试想一下，如果单单是白色的文字框放置于页面上，一定没有添加了渐变让我们感受到更多的趣味性。 yixieshi 另外，在页面的左右边缘部分也应到了从纯色背景到材质背景的渐变，这样会让深蓝色凹凸不平的背景材质出现的更加自然。在渐变的使用中需要注意的是，除某些特殊情况外，不要使用太过强的渐变，不论是色向上还是亮度上还是饱和度上都不可跨度太过强。因为这样强烈的过度根本不带真实感，给人一种很不舒适的感觉。 互联网的一些事四、微妙的阴影 yixieshi注意观察Redux暗色背景上的浅色文字，你会发现它们都被添加上了投影效果。现在我们可以使用CSS3中的text-shadow属性来完成文字的投影设计，代替了在Photoshop中完成此项工作。而且使用CSS3来给文字添加阴影自由度更高，在浏览器支持的情况下，你可以给任意文字添加你想要的阴影效果。当然IE8以下版本的浏览器是不支持此项属性的，这是我们在设计中需要注意的地方。另外，和前面提到的其它设计细节一样，阴影的效果也要足够柔和，不可过于强烈，不然很容易让整个设计看起来有一种脏脏的感觉，显得不够精致。 互联网的一些事-第 17 页网页制作Webjx文章简介：现在这篇文章有点像是上一篇文章的延续。在上一篇文章里面我们重点讨论了对 比、重复、对齐、分割在网页中的应用。以下内容我以几个优秀的网页作品作为实例，来说明卓越设计一直遵循的原则！