网站界面设计技巧:如何让界面更有层次感

2018-12-03伟之琦建站

现在是靠脸吃饭的年代,同样,网站设计是一个企业的脸面,如果企业网页设计不够吸引人一样会失去用户对网站的期待,甚至产生厌恶感。所以,要想抓住用户的心,你就要好好掌握一些界面设计的技巧!

网站界面设计技巧:如何让界面更有层次感

网页设计技巧一:区分层次结构靠字体颜色,不靠大小

界面设计中,很多设计师都会过分依赖字体大小来控制层次结构。不要一味想着改变字号的大小来区分层次结构,其实通过改变字体颜色或字体粗细会令画面变得更加有质感,更生动。

如何通过字体颜色区分层次结构?

例如:

● 主要内容用深色,如文章标题等,但不要全黑色;

● 次要内容,如文章发表日期等,使用较深的灰色;

● 辅助性内容则可以采用浅灰色,如:页脚中的版权声明等。

说了字体颜色,我们有来看看字体粗细如何区分层次结构?

例如:

◆ 大多数文本的正常字重为400~500,具体取决于字体;

◆ 较粗字体即600或700,主要用于需要强调的问题。

注意:在UI设计上,字重不超过400的字体仅适合大标题,因为不利于在较小字号阅读。另外,如果你考虑使用较轻重量淡化某些文字,请选用较浅的颜色或较小的字体。

网页设计技巧二:不要在彩色背景使用灰色文字

想淡化浅灰色文本,这好似在彩色背景中并不是效果很明显。因为白色搭配灰色的对比度会降低,使文本更接近背景色,而且还有助于创建层次结构,而不是仅仅作为浅灰色出现。

在彩色背景中,如何增加内容层次结构?

1)减少白色文字的不透明度

降低白色文字的不透明度,可以让背景颜色慢慢渗透,且不会与背景冲突而减弱文字。

2)基于背景色的颜色

当页面背景是图像或图案时,或者减少不透明度却使文字变得过于枯燥或不适应时,选择与背景色调相同的颜色,调整饱和度和亮度,效果会更加合适。

网页设计技巧三:偏移阴影

不要使用较大的模糊和扩散值增加边框阴影,添加垂直偏移,会使边框看起来更自然,就像在现实世界中看到的从上方照射下来的光源。

网页设计技巧四:少使用边框

虽然使用边框能区分两个元素,但这并不是唯一的方法,使用太多的边框会让你的界面设计变得非常混乱,因此你可以大胆尝试一下:

① 使用盒子阴影

利用盒子阴影来区分两个元素的效果,并不会逊色于边框,而且不会像边框那样让人分心。

② 利用不同色背景颜色

稍微修改相邻元素的背景颜色,就可以对它们进行区分,但记住使用这种方法时,请尝试删除边框,因为你并不需要它。

③ 添加额外的间距

为两个元素添加一定的间距,是一种不引入任何新UI的情况下,区分元素组间的好方法。

网页设计技巧五:不要过度放大图标

虽然矢量图像在增加尺寸时不会降低图片质量,但如果将它们过分放大,就会显得非常不专业。

尝试将小图标放在另一个形状中,并为该形状提供背景颜色,这样既可以保持实际图标接近预期尺寸,同时还能填充更大的空间。当然如果你有多余的预算,还可以使用专门用于较大尺寸的高级图标集。

网页设计技巧六:强调边框

在界面的某些部分添加色彩鲜明的边框,可以使网站更具有设计感。如果你对色彩搭配的灵敏度不是很好,可以尝试从Dribbble的颜色搜索等受限调色板中进行选择,避免被传统颜色选择器的无穷可能性所淹没。

网页设计技巧七:并非所有按钮都要添加背景颜色

语义是按钮设计中重要的组成部分,但有一个更重要的维度是经常被设计师们忽略的,那就是层次结构。

如果你没有太多的界面设计经验,但依然想让自己的设计有足够的吸引力,最简单的方法就尝试以上的界面设计技巧。但如果你尝试了很多方法都无法解决界面设计问题,你就需要找专业的网页制作公司郑州伟之琦帮你进行定制的个性化设计。

  • 上一篇:伟之琦建站为大家解读搭建网站的基本流程
  • 下一篇:想让网页更加出彩?是打破常规还是循规蹈矩
  • 新闻中心
    网站改版不要盲目(网站改版:合…

    本文将探讨如何在网站改版过程中避免盲目行动,通过合理规划和有序实施来解决企业面临的问题和挑战。

    如何制作适应不同手机尺寸的网…

    同样的内容,要在大小迥异的手机屏幕上,都呈现出满意的效果,并不是一件容易的事。 于是,网页设计师不得不…

    使用者体验对网页设计影响比较…

    网页设计不只是单纯华丽的界面,使用者体验也很重要 网页设计不是单纯把界面设计的很华丽,代码写一写就可以…

    三种网页开发语言的不同之处

    一、网页开发大势所趋随着wifi的全面普及应用,现在的互联网已经可以称为移动互联网,大家不仅可以在电脑上…

    客户评价