全国免费咨询热线:400-611-9921
 
网页设计的技巧:细节让网页设计与众不同

2015-09-06

785

细节使得这个世界从平凡变得不平凡。 一辆豪华汽车与传统汽车拥有同样数量的车轮、座位、门窗,但是使得它在竞争中脱颖而出的却是花费在细节上的时间。加热真皮座椅,一按即启动引擎,无钥车门开关,自动泊车系统,丰富的数字电台等等使得它成为一辆昂贵的新...

细节使得这个世界从平凡变得不平凡。

网页设计的技巧:细节让网页设计与众不同,互联网的一些事

  一辆豪华汽车与传统汽车拥有同样数量的车轮、座位、门窗,但是使得它在竞争中脱颖而出的却是花费在细节上的时间。加热真皮座椅,一按即启动引擎,无钥车门开关,自动泊车系统,丰富的数字电台等等使得它成为一辆昂贵的新型车。

  同样的规则也适用于网页设计。愿意花费时间专注于细节的网页设计师能够获得拥有更多价值的设计。这里的关键词就是价值。我们无法保证建立网站所花费的时间和其结果所带来的价值之间有直接的关系,总有一些细节比其他更加重要,关键是要能够确定哪些细节更具有影响力。

  增加价值的细节

  这一类型的细节是我们愿意在审美层面之外花费额外时间以改进我们工作的细节。我们希望专注于可以深入改变用户体验的视觉调整,例如用户对该网站的主题和消息的体验或者他们如何畅游网站。

  一般的没有建站经验的网站访问者,无法指出某些细微差别来的用户体验改善,但是如果这些细节被移除,用户将在感知和可用性方面感觉到明显的差异。这些就是我们愿意花费时间的细节。

  那么一个设计细节到底如何为网站带来附加价值呢?诀窍就在于用户体验。网站设计师应该能够出色的理解负空间、对比度、形状、颜色和所有不同的视觉元素在用户使用和体验一个网站设计时所起的作用。真正令人惊讶的是设计者仅仅需要操纵几个像素就可以发生很大的差异,使之产生更大的影响。

  这些差异到底是什么?

  进一步观察

  我觉得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状态或按钮点击添加过渡动画,可以告诉用户他们鼠标正悬停在(或触摸,对于触屏移动设备)一个活动的元素上面。

  与网站细节相伴的工作的美好在于通过进一步努力,我们仍然可以为我们的用户提供部分价值,而不需要疏远那些使用过时的浏览器的用户。关键之处在于我们要使用所有这些技术来为已经很可靠的网页设计增加价值,没有一个基本的可靠的设计而空谈学习这些技术就是本末倒置。


关注我们:在查找公众号中搜索:zomsky1688,或者扫描下方二维码快速关注。 

广州市纵天信息科技有限公司公众号 
关键词:广州网站建设,广州网站设计,网站建设,手机网站开发,品牌设计,用户体验

热门标签
营销型网站建设柏洪集团网站集团网站建设新元素网站教育网站德胜教育集团德国商会网站建设德国商会品牌网站建设福美控股赛立信网站建设智能家居网站运动网站建设贸易网站建设玩具网站建设化工网站建设日化网站建设家电网站建设音响网站建设物流网站建设旅游网站建设网站建酒店网站建母婴网站建设珠宝网站建设钟表网站建设培训网站建设教育网站建设建材网站建设装饰网站建设机械网站建设美妆网站建设展览网站建设皮具网站建设五金网站建设仪器网站建设照明网站建设水电网站建设咨询网站建设法律网站建设家具网站建设家居网站建设服装网站建设服务网站建设食品网站建设金融网站建设餐饮网站建设环保网站建设政府网站建设科技网站建设地产网站建设医药网站建设数码网站建设营销型网站广州网站制作广州网站建设公司建网站广州网站设计公司建站优必思官网英文版网站定制网站广州网站建设中服装网站设计服装网站制作防火板网站大数据网站科技网站制作三盟科技物联网网站人工智能网站防火板网站制作家居网站制作枕头网站电器网站制作电器网站家具网站家居网站斯帝罗兰网站建设公司​手机网站建设响应式网站企业官方网站网站策划官网改版企业网站建设网站制作网站设计建站公司网站建设公司企业网站网站建设费用网站建设广州企业网站建设企业建站官网建设公司网站制作拉链官网广州建站广州网站建设纵天科技
立即致电纵天品牌顾问:
400-611-9921
联系我们:

地址1:广州市天河区珠江新城邦华环球广场16F

地址2:杭州市滨江区滨安路1190号智汇中心B308

业务 QQ: 3561401262

E-mail: sales@zomsky.com

电话咨询 在线咨询 QQ咨询 官方微信
官方微信
TOP

立即与纵天项目顾问通话

400-611-9921

您也可以咨询我们的在线客服或预约资深顾问

信息保护中,请放心填写
关闭