4个非常实用的网页设计构图心得技巧

2016-02-16 21:01 89 1 收藏

给自己一点时间接受自己,爱自己,趁着下午茶的时间来学习图老师推荐的4个非常实用的网页设计构图心得技巧,过去的都会过去,迎接崭新的开始,释放更美好的自己。

【 tulaoshi.com - 平面设计 】

四个经典构图原则帮你入门版式设计,今天聊一聊常见的几类构图方式:对称平衡、不对称平衡、水平平衡以及垂直平衡,有分析有案例,强烈推荐学习,来感受下。

对称平衡

如果你想在你的网页看上去美观和优雅,那么你应该做一个网站对称。这种效果很容易通过将类似的对象上的中心轴线的任一侧来实现。这可以通过相同的尺寸,基于网格的文本段落,或具有匹配文本相片的图像进行说明。这里有一对遵循这一格式的网站设计实例。

Mount Barker High School

4个非常实用的网页设计构图心得技巧,PS教程,图老师教程网

Wonder Bread Ballon

4个非常实用的网页设计构图心得技巧,PS教程,图老师教程网

您可以轻松地在网上找到各地的许多中心的布局,实际上,对称性设计被认为是最赏心悦目的设计。这也是大多数人的典型思维模式。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/pmsj/)

当然,当你准备采用对称性设计的时候,更多的时候它并没有你想象中那么肤浅简单。考虑到这点,你不妨以平面配色方案开始。如果你是新手,可以尽量多运用白色,直到你有足够的能力创造你自己的设计。

毕竟这样的设计最赏心悦目,所以大多数人都喜欢干净简洁并且完美对称的网页。但是更多别出心裁的设计师会采用一些更加新颖的一些更复杂的设计布局。

不对称平衡

不对称平衡带来一种自由随意的感觉。尽管有时候看上去不是那么自然,但是它还是经常在网页设计中得到实用。你可以看到不对称平衡常常运用在一些大的高清图片作为页面背景,主体远离了中心轴线的情况,目的是为了把更醒目的标题留在中间。

Orangina European Site

4个非常实用的网页设计构图心得技巧,PS教程,图老师教程网

The Enterprise Foundation

4个非常实用的网页设计构图心得技巧,PS教程,图老师教程网

它的设计的主要目的是移位到左边或右边(或顶部或底部)。因此,如果您决定要用不对称功能,你应该准备好多次的试验,以避免混淆网站的访问者。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/pmsj/)

无论什么类型的对称,核心就是你要让整体平衡。

水平平衡

水平平衡是网页最经典的页面布局。大部分人都习惯从左向右阅读,所以左右布局也是最自然的一种布局方式。

这是最经典的一种布局设计,如果你的客户比较传统,那么你的设计也应该简单明了。这里有个案例。

Business Accessorie

4个非常实用的网页设计构图心得技巧,PS教程,图老师教程网

垂直平衡

垂直结构用于头部和底部的元素非常相似的情形。这样的布局往往运用于小图片的展示,比如下面的例子:

Portfolio by Ryan M. Stryker

4个非常实用的网页设计构图心得技巧,PS教程,图老师教程网

Paradox Labs

4个非常实用的网页设计构图心得技巧,PS教程,图老师教程网

结论

平衡是网页设计中最重要也是最容易忽略的东西。视觉上的平衡可以通过对界面元素的布局来调和,比如选择最合适的配合,元素的大小和位置。有的时候,也需要大胆创新,不要拘泥于传统。

来源:https://www.tulaoshi.com/n/20160216/1574284.html

延伸阅读
评价一个网站好坏有众多因素,视觉设计、品牌一致性、网站易用性等,都会影响到访客的情绪,而今天我们要介绍的这个,是不起眼的网站页脚,然而正是这个很多设计师都忽略的部分,在网站中却有着至关重要的功能担当。今天不仅聊它的作用,也分享几个页脚设计技巧。 重视网站的页脚设计 通常一接到任务,大多数设计师都会就把精力投身于网...
作为网页设计师,想要保证设计水准的前提下完成客户的年底上线心愿,你能想到的唯一办法就是昏天黑地的加班!这对设计师来说是一种很煎熬的折磨,今天我们在年末特别呈现网页设计的应急小方法,希望能把设计师从水生火热中解救出来。 虽然客户主观缩短了设计时间,但他们对网页的要求却不会因此降低一分一毫,要在短时间内设计出能让客户接受的...
10个提升照片构图的超实用技巧   1.奇数法则奇数法则是指,在一幅照片中保持主体个数为奇数。一幅照片的主体可以是一个物体或三个人的小团体。这个技巧会使照片更加引人注意,也更符合人眼的审美。 2.突出主体突出主体是一个简单的吸引人注意的方法。这种方法不适用于所有照片,但当想隐藏掉那些会分散观众注意力的物体时,这...
新手摄影实用构图技巧   如果你也和我一样喜欢拍照,不如先从构图用光技巧开始熟悉,同时搭配单反相机的使用小技巧,拍摄时才能更得心应手,多元化视角的照片也更加精彩。已入门机EOS 100D为例,分享几个自己常使用的构图技巧: 风景横构图法 因为人的双眼视角是水平的,很多物体也是在水平面上延伸的,因此横构图成...
标签: Web开发
一.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则请参看《css基本语法》。 二.明确定义单位,除非值为0 忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写;100,但是在CSS中,你必须给一个准确的单位,比如:" width:100em。只有两个例外情况可以不定义单位:行高和0值。除...

经验教程

844

收藏

69
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部