青岛网站建设公司,青岛网站制作公司-奈薇建站网
建站咨询热线:0532-8878113113165158935 
知识普及 » 青岛网页设计中最常用到的设计细节

青岛网页设计中最常用到的设计细节

网站工程师 2019-07-24 11:35发表
阅读次数 1455
  前一段时间在企业管理界流行一句格言叫”细节决定成败”。企业管理当然不是我们这里要讨论的主题,但是,把这句话放在网页设计当中的确是颠扑不破的真理,这也许能给我们的青岛网页设计师们一些启示。我们的眼睛和感觉总是非常敏锐的,即使是完全不了解网页设计技术的人也能够从一堆拙劣的设计作品当中挑选出那一个优秀的设计作品。虽然他说不出来为什么这件东西比那些都好,但是直觉会告诉他他自己喜欢哪一个。如果别人向我们问起为什么这件作品要优于其它呢?我们的回答是”很大一部分原因是因为优秀的设计作品总是充满了丰富的细节。”在这篇文章里,我们就从技术的角度出发,以PremiumPixels上的ReduxWordPress主题设计作品为例,来总结一下在网页设计中到底是哪些细节让优秀的作品脱颖而出。

  一、柔和的渐变

  是不是下面图片上的文字框有一种鼓出来的感觉,对,那正是渐变带给我们的效果。试想一下,如果单单是白色的文字框放置于页面上,一定没有添加了渐变让我们感受到更多的趣味性。

  另外,在页面的左右边缘部分也应到了从纯色背景到材质背景的渐变,这样会让深蓝色凹凸不平的背景材质出现的更加自然。在渐变的使用中需要注意的是,除某些特殊情况外,不要使用太过强的渐变,不论是色向上还是亮度上还是饱和度上都不可跨度太过强。因为这样强烈的过度根本不带真实感,给人一种很不舒适的感觉。

  二、微妙的阴影

  注意观察Redux暗色背景上的浅色文字,你会发现它们都被添加上了投影效果。现在我们可以使用CSS3中的text-shadow属性来完成文字的投影设计,代替了在Photoshop中完成此项工作。而且使用CSS3来给文字添加阴影自由度更高,在浏览器支持的情况下,你可以给任意文字添加你想要的阴影效果。当然IE8以下版本的浏览器是不支持此项属性的,这是我们在设计中需要注意的地方。另外,和前面提到的其它设计细节一样,阴影的效果也要足够柔和,不可过于强烈,不然很容易让整个设计看起来有一种脏脏的感觉,显得不够精致。

  三、1像素的衬线

  在页面的顶端,你能看到一条1个像素比背景颜色略浅的水平线将纯色的背景和带有材质的背景分隔开,如下图:

  而如果没有这条衬线会是怎样的一个效果,我们也来看看。

  实际上,网页设计中,使用到衬线的例子非常普遍。例如下面的这个例子中,你会在包围着”TheDorchesterHotel”文字的黑色边框的顶部向下1个像素发现一条灰色的衬线。yixieshi

  而在下面这个设计好的按钮中,绿色和黄色边框顶部向下1个像素也能看到一条颜色更浅的线条,而这条衬线制作的更为精细,因为它应用了蒙版,从顶部向下你会发现这条衬线渐渐隐去了。另外,在”AddToCart”和”$9.99″两个文字之间的分隔线实际上是两条线,左边颜色深一些,右边颜色浅一些,这样就能产生线条的凹陷效果。

  之所以要使用衬线,是为了体现物体在2D效果上的立体感,而立体感的体现必须要有阴影和高光。阴影我们通常使用图层样式来实现,而高光效果的实现,最常用的技巧之一就是使用衬线了。上面的三个例子的衬线都在物体的顶部,说明光线是从上向下照射的,高光处于物体的顶部。而如果光下从下向上照射的话,高光就应该在底部了,那我们就应该将衬线放置于物体的下方。所以在衬线的使用上,我们始终要问自己这几个问题,”我在这里使用了衬线,那么光源在哪里?”"如果光源在这里的话,阴影应该出现在什么位置?”完成了这两个回答,设计出来的物体的立体感才能更加真实。

  四、细微的材质

  Redux主题真是解释背景材质的绝佳案例。因为在整个页面中,从上至下使用了三种不同的材质作为页面的背景。上面的深蓝色部分应用的是坑坑洼洼凹凸不平的材质,中间黑色部分应用的是纺织布的材质,而底部应用的是杂色的材质。当然,这三种材质都是非常细微的,但是效果确是非常出众的。实际上,过于醒目和复杂的背景材质不仅不能为设计增色,反而由于分散读者的注意力而是整个设计品质降低。所以最好的策略就是让你的背景材质保持细微而柔和。

青岛网页设计中最常用到的设计细节相关标签:网站注册制作网站网站建设公司开发网站
相关热点推荐
如何创建内容丰富的企业
2019年的网页设计流
网站建设经验谈
优化过程中如何快速收录
网站发布软文更容易被收
更新网站,提高网站权重
网上购物网站的用户体验
网站建设的误区
巧妙性设计之UI按钮设
如何做到网站的最佳优化
行业网站的设计心得
企业网站建设优化如何凸
企业网站应用
2009年4月2日,G
优质的内容才是提高网站
响应式网页你了解吗?
企业网站建设各阶段的注
H5和HTML5是一回
网站用户体验是网站发展
发布的高权重文章被转载
网站建设的基本原则
如何维护SEO效果
进一步掌握网页设计艺术
网页设计配色应用实例剖
网站建设中的12大误区
交互设计的8项黄金法则
谈谈什么是优秀的网站设
网页设计中的功能与美化
网站策划的具体内容
HTML中不同的权重标
青岛网站制作支持旧IE
一个好的网站应该同时具
系统化学习SEO技术的
百度每个月的收录时间分
关于网站排名的基本原则
微型博客,专业领域个人
化妆品的网站策划分析
制作网站应选择什么语言
网络三阶段是指的哪三阶
全新角度洞悉网站建设中
奈薇建站网青岛网站建设公司/青岛网站制作公司,专业提供"气质"型网站建设及精美网站制作服务,同时欢迎各地网站建设公司、网站制作公司代理我们的奈薇建站系统共同发展

热点地区:青岛网站建设价格 青岛即墨网站制作公司 开发区信息港 山东在线门户
  • 备案号
  • 鲁ICP备13010283号
建站咨询热线0532-88781131 15166683288 13963906391
版权所有© BangJianZhan.Com & Nev.Cn 青岛网站建设/网站制作公司
青岛雨后网络科技有限公司 - 青岛市市北区福州北路90号,景泰尚都6层
已经为您服务了
162个月 22