主页 > 知识库 > 平面设计 > Photoshop >

网页设计与众不同通过细节的设计(2)

来源: 作者: 发表于:2012-10-16 09:25  点击:
差异 比较上面的截图以及同样的页面在IE8(不支持text-shadow属性)下渲染的效果,我们就能发现它更难看得很多。 值得指出的是这个网站卖的是Mac软件,所以自然地不那么重视IE用户的体验了。 导航细微差别 除了增强



  差异

  比较上面的截图以及同样的页面在IE8(不支持text-shadow属性)下渲染的效果,我们就能发现它更难看得很多。

  



  值得指出的是这个网站卖的是Mac软件,所以自然地不那么重视IE用户的体验了。

  导航细微差别

  除了增强易读性和强调可能的网站操作,细节对网站导航也有很大的帮助。任何网页最重要的部分之一就是如何将用户导航到另一个页面。毕竟链接是起初使得网页之所以称之为网页的核心,所以为什么不多花一点点时间在适航性上呢?举个例子,我们来看 Lipperhey 站点。

  



  除了为导航的活动状态选择好的颜色以外,我们发现它的设计为网站的主导航栏添加了一些用趣的细节。

  Home按钮由于一些颜色变化之外的原因而很显眼。首先我们可以看到它从导航栏下沉了几个像素。其次,按钮背后被加上了阴影并且对透明度做了轻微的调整。这两个细节一起为这个链接赋予了附加维度的感觉,指示了它的重要性及激活状态。

  



  差异

  再看一下没有上面提到的细节的导航,我们发现很多令人兴奋的东西都没了并且我们的激活链接会有完全不同的样子和感觉。

  



  细节更进一步

  我们研究了一种运用CSS3的一些新功能来辅助我们设计的方法(text-shadow)。但CSS3的强大远不只是阴影。CSS3动画,表现为transform和transition的属性,给我们的细节工作增加了额外的工具。

  只要使用得当,CSS3动画为我们的网页元素添加高效的动画效果,而不需要借助Flash或JavaScript。在细节方面,动画允许我们在各种输入情况向用户提供流畅的反馈。例如为链接的hover状态或按钮点击添加过渡动画,可以告诉用户他们鼠标正悬停在(或触摸,对于触屏移动设备)一个活动的元素上面。

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

  网站还能在哪些细节方面改进来增加它的价值呢?你做过的项目还成功地使用过哪些类型的细节技术?


有帮助
(7)
63.6%
没帮助
(4)
36.4%