网页中用到的对比原则(三):区块对比

前面小编给大家分享了色彩对比字体对比在网页当中的运用,今天跟大家分享的是网页当中跟布局紧密相关的区块大小对比。

网页当中说到布局设计,不得不提栅格,栅格是网页设计当中的基础,它可以帮你确定网页的各个元素要怎么放置,让整个网页具有规范感和正式感,还具有一种结构分明的设计感。

其实早在很久之前,栅格早被应用在各个不同领域。比如我们的现在看到的图书和报纸。特别是报纸的应用,比较可以直观看出各个块之间的关系,这些块也就是网页当中的区块。

栅格怎么运用或是怎么来的,小编就不给大家多讲了,文章末尾小编会分享一个建站过程中常用到的前端框架和一个栅格系统工具作为福利送给大家。先认真看完下面的内容吧!

网站中,一个页面可以拆分成多个区块,而正是这些区块共同构成了这个页面的布局。这些区块有大有小,有高有低,形成了区块的大小对比。在平面当中,应该叫形状大小的对比。每个网站,都有主次部分,我们会把主要的部分放在显眼的位置,将次要的内容放置在一个小的不显眼的角落。在页面设计中另外一种对比方式就是不同的元素使用不同的尺寸。换句话说,就是让一部分内容比其他内容更大。在网站布局中就可以用删格大小来体现这个主次关系。

从上面的图可以看出,栅格/区块的大小影响着网站的布局,常用的网页当中大部分是12或24栅格。小编简单给大家举几个例子分析下:

Norgram数码设计这个网站在区块的宽度上做了设计,网站的区块高度都一样,所以大小的对比就体现在区块的宽度上。要知道正常人的阅读顺序一般都是从左到右,所以网站的左边区块宽度是最大的,到最后的一个区块宽度是最小的了。这样的对比可以叫区块的宽度对比

有宽度对比,就有高度对比,举例禅道项目管理软件官网的中间部分:

可以很明显的看出上面绿色区块的高度比较低,下面蓝色区块的高度比较高,两者形成的对比就是区块的高度对比。栅格布局是很灵活的,可以看到绿色区块的布局和蓝色区块布局就不一样,这样也形成了一定的对比。

大家也可以看看新浪的官网,也是用了栅格系统,花瓣的瀑布流也可以看出区块之间的大小关系。

栅格系统会让整个网页看起来比较有规律,也比较整齐。在网页设计中要学会善用栅格系统,可以灵活变用各个区块,这样整体布局不会千篇一律又可以做到整齐规范。

大家在设计网页前可以尝试一下在多做规划,比如区块的多少和内容的摆放。栅格系统用起来才能得心应手,布局也会更流畅,没事的时候可以多画画网站的结构图,多想想怎样分栏的布局方式来规划内容。

这是对比原则的最后一部分,内容不多,但是是最好理解的。所以小编也没有跟大家说太多理论性的东西,当然,作为对比应用的最后一篇,小编也来给大家送个福利感谢大家的支持。

福利前面小编也说了,分享的就是我常用的两个工具,希望也对大家有所帮助。

小编常用的前端框架:zui前端框架。功能比较多,也很齐全,小编截图没有截全,感兴趣的可以去官网看看,这个绝对是前端设计师的福利呀。

第二个推荐的是栅格系统的小工具:Gridpak,这个在建站的时候也可以起到一定的帮助。

这种类似的栅格工具和前端框架市面上有很多,不管用哪一种,只要适合自己,用起来便捷便可以。

如果大家有更好我工具也欢迎大家跟小编分享,毕竟相互学习才能共同进步!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,454评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,553评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,921评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,648评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,770评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,950评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,090评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,817评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,275评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,592评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,724评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,409评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,052评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,815评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,043评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,503评论 2 361
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,627评论 2 350

推荐阅读更多精彩内容