UCI联合创智品牌创意机构(深圳)
上市公司品牌战略 & 品牌设计

UCI联合创智品牌创意机构(深圳)
所在位置: 首页 > 新闻 > 深圳vi设计 > 网页设计中用到的对比原则

网页设计中用到的对比原则

2017-11-29
后面小编给大家分享了颜色比照和字体比照在网页当中的运用,明天跟大家分享的是网页当中跟布局严密相关的区块大小比照。
网页当中说到布局设计,不得不提栅格,栅格是网页设计当中的根底,它可以帮你确定网页的各个元素要怎样放置,让整个网页具有标准感和正式感,还具有一种构造清楚的设计感。

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


栅格怎样运用或是怎样来的,小编就不给大家多讲了,文章末尾小编会分享一个建站进程中常用到的前端框架和一个栅格零碎工具作爲福利送给大家。先仔细看完上面的内容吧!

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

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


Norgram数码设计这个网站在区块的宽度上做了设计,网站的区块高度都一样,所以大小的比照就表现在区块的宽度上。要晓得正常人的阅读顺序普通都是从左到右,所以网站的右边区块宽度是最大的,到最初的一个区块宽度是最小的了。这样的比照可以叫区块的宽度比照。
有宽度比照,就有高度比照,举例禅道项目管理软件官网的两头局部:


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

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

栅格零碎会让整个网页看起来比拟有规律,也比拟划一。在网页设计中要学会善用栅格零碎,可以灵敏变用各个区块,这样全体布局不会千篇一概又可以做到划一标准。

大家在设计网页前可以尝试一下在多做规划,比方区块的多少和内容的摆放。栅格零碎用起来才干随心所欲,布局也会更流利,没事的时分可以多画画网站的构造图,多想想怎样分栏的布局方式来规划内容。

这是比照准绳的最初一局部,内容不多,但是是最好了解的。所以小编也没有跟大家说太多实际性的东西,当然,作爲比照使用的最初一篇,小编也来给大家送个福利感激大家的支持。

福利后面小编也说了,分享的就是我常用的两个工具,希望也对大家有所协助。
小编常用的前端框架:zui前端框架。功用比拟多,也很完全,小编截图没有截全,感兴味的可以去官网看看,这个相对是前端设计师的福利呀。

第二个引荐的是栅格零碎的小工具:Gridpak,这个在建站的时分也可以起到一定的协助。

这品种似的栅格工具和前端框架市面上有很多,不论用哪一种,只需合适本人,用起来便捷便可以。
假如大家有更好我工具也欢送大家跟小编分享,毕竟互相学习才干共同提高!
声明:本文“ 网页设计中用到的对比原则 ”信息内容来源于网络,文章版权和文责属于原作者,不代表本站立场。如图文有侵权、虚假或错误信息,请您联系我们,我们将立即删除或更正。
做品牌直接找总监谈
总监一对一免费咨询与评估
点击咨询总监
相关案例
RELATED CASES
总监微信

总监微信咨询 舒先生

业务咨询 张小姐

业务咨询 付小姐