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

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

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

  一、柔和的渐变

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

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

  二、微妙的阴影

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

  三、1像素的衬线

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

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

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

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

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

  四、细微的材质

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

青岛网页设计中最常用到的设计细节相关标签:制作网页设计网页企业做网站网站制作
相关热点推荐
企业网站如何提高用户体
如何优化新设计的企业网
网络企业的信息化生存
企业网站建设的策略
如何使用百度工具追踪访
网站价值评估
浅谈网站策划运营的方方
用户是如何浏览你的网站
网站优化与网站设计制作
设计中的色彩:橙色
青岛网站建设不用怕,这
不对称网页设计页面处理
企业自助建站建议
WWW 与人际沟通和信
社会化网络用户界面(U
用户反馈对产品设计的帮
网页设计如何传达信息
提高在google中排
企业建站规划书的写作规
搜索引擎是如何判断新闻
使用预定义框架集为网页
面向未来的搜索引擎优化
网购商品质量堪忧,电商
网页设计师的素质
网站优化之整站优化的过
巧用分词做多关键字的网
网页设计制作规范
网站功能结构发展的几个
网站内容写作的指导方针
什么是网站运营如何来运
提高内容类网站的粘度要
为什么视觉设计师需要懂
学网站设计必看之设计常
提高网站排名稳定性最佳
HTML5响应式图片的
SEO工具:谷歌网站管
微信社交圈营销行为泛滥
怎样解决当前个人网址站
如何实施搜索引擎优化项
网站建设基础知识总结
奈薇建站网青岛网站建设公司/青岛网站制作公司,专业提供"气质"型网站建设及精美网站制作服务,同时欢迎各地网站建设公司、网站制作公司代理我们的奈薇建站系统共同发展

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