网页设计布局方法,如何打造充满呼吸感的网页

2018-01-18  5980 分类:设计资讯

网页设计布局方法,如何打造充满呼吸感的网页


一个优秀的网页设计排版,它是构图、配色、字体、图片等等各方面互相配合的结果,其实设计是有规则可以遵循的,想要让自己的网页变得充满呼吸感,我们就需要遵循下面这些网页设计布局方法,相信会带给你不一样的感觉。


网页设计布局方法,如何打造充满呼吸感的网页.png


网页设计布局方法


没有边界


一段文字和一张图片,甚至一个图标……在你进行布局的时候,由于你的素材并不是立刻手到擒来,你的布局总是喜欢用一个个矩形来代表一段文字或一张图片,这本没有错,但这个做法也会让你陷入“框架陷阱”。


就像这样一个布局,只是画出了一个大致的框架图,也许你只是想说这只是框架,因为设计规划前期很多素材还并不完善。


边界所造成的局限就是你的思维,你将会习惯在这个框架内去思考解决方案,如果你想要躲过这个陷阱,就是学会越过框架去思考。就算你做好了框架,也要认识到这不过是一个前期的不确定方向的试探,你完全可以改变框架的构造。


创造焦点


这么说也许有点夸张,但任何一件好的平面作品,一定是有焦点的。就像我们谈到过,十字准星型的视觉结构习惯将焦点置于中心位置,要制造一个焦点的办法有很多,简言之,就是制造冲突。想象你在一个人群稀疏的大厅,突然有两个人高声争论什么,这时引起了几个人围观,这个情景就在原本安静的人流中制造了一个关注焦点。同样,在视觉领域也是如此,利用对比冲突应该是一种最有效的制造焦点的方式。


对于焦点的认识我们也不应局限于是一个“点”,它是一块正吸引你的视线所投射的区域。它还可以分为实焦点和虚焦点,实焦点是在虚焦点之上更为精准的投射存在。


除了色彩,其他任何属性都可以经由对比形成焦点,这时你要做的,就是注意焦点不应太多。也因此,除了焦点以外,设计中的其他元素都要保持一种相似性。


这里我们总结一下能用于进行对比属性,这些属性之间形成的对比越大,冲突越大。


空间:充满-空置、积极活跃-消极被动、前进-后退、近-远、二维-三维、封闭-开放

形式:简单-复杂、美-丑、抽象-具象、清晰-模糊、几何形式-有机形式、直线-曲线、对称-非对称、完整-破碎

结构:井井有条-混乱无序、排列成序-随意放置、衬线字体-无衬线字体、机械-手工

纹理:细-粗、平滑-粗糙、反光-哑光、滑-黏、锐-钝

位置:顶部-底部、高-低、右-左、上-下、前-后、有节奏-随意、单独-分组、接近-远离、中心-边缘、整齐排列-互不关联、内-外

方向:垂直-水平、垂直线-对角线、向前-向后、稳定-活动、内聚-分散、顺时针方向-逆时针方向、凹形-凸形、正体字-斜体字

尺寸:大-小、长-短、窄-宽、扩大-收缩、深-浅

颜色:黑色-彩色、亮-暗、暖色-冷色、明度-暗度、天然-人造、饱和(深色)-无色(素色)

密度:透明-晦暗、稠密-稀薄、液体-固体

重力:轻-重、稳定-不稳定


设计师在做设计时,其实并不会将这些规范提前设定在大脑中,而是经过经验的积累而形成一种潜在的直觉,这份清单的意义并不是需要你记下它,而是浏览完后,在设计的任何场合的提醒。比如一份作品完成后,可以看看究竟焦点是否足够吸引,哪些元素需要进一步调整。


保持比例


说起比例,难免和数学公式扯上关系。其实,简单一点来看,我们完全可以把比例看作一个视觉的原子单位,一切位置、大小的关系都以这个原子单位为标杆。


比例这件事,无论是一比三还是五比二,其中的道理都是从这个原子单位衍生过来的。在网页设计中,为了保持比例可以采用网格作为辅助线。在Photoshop中可以任意设置网格的大小,网格的大小最好能和你的文档成比例关系。比如你的新建文档宽度是1600px,那么网格可以设置为80px或者160px等。根据网格线进行大小尺寸和位置对齐,网格线越小,最终的结果也就越灵活。但也要注意网格如果太小其实就并没有发挥太大的作用。


比例会让你的网页设计形成某种看不见的稳定感,每个元素恰如其分的表现在所应该出现的位置,如果你选采用对称的布局,由于对称本身就具稳定性,因此,网格在非对称的布局中发挥作用更大。


魔幻几何


网页布局几乎都是由几何构成的,加之显示屏本身就是矩形,因此在布局时最常用到的也是矩形。


矩形


给人以稳重、踏实、秩序之感,因此,比较予人一种信赖。在网页设计中,不仅可以将图片设计为矩形,文字段落也可以为矩形。如下面的例子中左文右图的版式的图文分别都为矩形


三角


三角有一种稳定性,因为关于三角最多的联想是一座山或金字塔,这种结构本身就能抵抗外在环境的侵害。你的潜意识会把一个正三角看成一种庇护。三角形的力量上的稳健感觉常常用在建筑等有着人工痕迹的领域。



圆是完满,也象征着周而复始,可以说圆是很东方风格的符号元素。圆有一种柔性的豁达,因此它比起三角的尖锐来说力量感稍弱,而显得更为活泼。如果你的页面中充满圆点,无疑,这个页面势必让人联想到这是以儿童或少女为受众的网页。


灵动本身是一个极富感染力的词汇,也许源于此很多人以为这就需要煞费苦心,其实往往越用力越欲速而不达,只要明确了设计的目标,你就只需要跟随目标而进入过程。设计最好玩的是,永远没有标准答案。


猜你喜欢