前端开发入门到精通的在线学习网站

网站首页 > 资源文章 正文

这次我们一起大气扁平化网站设计(干货图)

qiguaw 2024-09-07 17:35:36 资源文章 18 ℃ 0 评论

不得不说小编生活中,经常会做到的这一块,那我们就来聊聊,如何做出简洁大气的网站。

说道网站,就不得不说网站的栅格系统:

栅格系统的设计原理及应用

在网页设计中,我们把宽度为“W”的页面分割成n个网格单元“a”,每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如下:

W =(a×n)+(n-1)i

由于a+i=A,

可得:(A×n) - i = W

这就是栅格样式的基础计算方法,然而,网页设计中,栅格系统并不是最主要的,我们来看几个模板:

为什么第一个模板我要放这个?因为我接下来要说块!

设计步骤:

  1. 确定块分布及基础排版

  2. 对应栅格进行布局调整

  3. 根据公司需求分别对块进行填充

  4. 调整色调分布

块分布,我们来看看这个:

当然,大块里面可以适量再分,比如:

总结我们可以发现一个特点,那就是他们的块,都非常大!是的,就是大!

除了大,我们还要注意两点:

1.适当留白;大胆的留白会使页面有空间感,会给人留下一种透气的印象;不会因为页面内容密密麻麻而产生厌恶。

2.尽可能少的颜色。颜色太多控制不好就会容易失去整体平衡;在设计制作前确定一个主色系和辅助色系。可以发现上面列举的这几个网站用色都很简练,一个主色,一个辅助色,一个点缀色。展示信息为主,能给访问的用户带来一定的安全感和信任感。所以建议不要用比较花哨的元素色调和另类的设计风格。

今天只说这么多,订阅一下,下次继续。

又是分享时间!















本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表