网页设计的平面构成

 

 


  什么东西都离不开基础,建房子需要地基,解方程式需要先学会乘法表,唱歌需要先会"哆、来、咪"。页面设计也同样需要基础,这个基础就是平面构成。 网页设计风格种多样,除去一些场景化设计和给力的素材支持,剩下的就全靠平面构成和排版了。刚开始接触网页设计的时候,常常会钻到某个局部中去,页面风格还没出现,就开始做字体细节,结果可想而知咯。经过一段时间的学习和实践,发现原来做网页跟绘画是一样,先把内容和想法都丢上去,排布出整体风格(这里就需要的是平面构成排版能力啦),然后再慢慢细化各部分内容。

  一、基础中的基础:点、线、面

  点构成线,线构成面,这些是平面构成中的基本要素,也是所有平面设计的基本要素。那么将这些基础中的基础运用在网页设计中,又是怎样的效果呢? 点、线、面这三个东西不单纯的指一个点、一根线、一个平面。我们要善于利用文字和图形的排布,为自己的网页增添效果。网页中的每一个文字,每一个点,每一个图形都是这个网页的组成元件,文字可组成图形,图形也可组成文字,这些都不是限定死的。


  像这样的构成图片,似乎早就被大家遗忘在大学和高中了吧,当我们被各种丰富多彩的页面瞭花了眼的时候,回头看看这些基础的平面构成图案,或许会有一些新的启发和想法


  点构成多用于细碎东西,整合排布和文字排版。集中而规律的排列,从整体上抓住人们的视觉


  用一条主线分割画面,线条经过的地方有相应的内容呼应。画面因为这条线而变得生动有趣,也因为它的分割功能,整合规划了不同的内容区域


  线构成多用于装饰与分割,同时也会有连贯的功能。线条对阅读顺序有着一定的引导作用。

  若点与线的构成大多为细节处理,那么面的构成则直接影响着网页整体风格和布局,与线搭配构成空间透视效果。

  不同的面形状,呈现出的视觉效果也不同


  二、各种形式在网页中的体现

  平面构成中的形式在网页中常见的有:渐变形式、发射形式、对比构成。而渐变亦有形状渐变,颜色渐变。 这些表现形式即丰富了画面,又能反应出网页的整体氛围

  网页设计并不是单纯的作图,还需要考虑到功能性和阅读性,因此颜色渐变成为网页中常用的表达方式,形状渐变却很少见


  用明度渐变的方式来表现地图背景,很好的展示了地图的样式,又没有因为色彩繁多复杂而看不清主体内容。


  发射形式不利于文字的阅读和整体排版,所以一般发射形式多用于背景图片,或者一些小部分细节处理上。

  强烈的色彩对比也会引起人们的视觉停留,这种对比方式一般多用于对立状态或者有着正反义词组的页面,也有时出现在Q版卡通页面中,对比色色彩鲜艳亮丽,反应出孩子的多彩世界。


  三、肌理效果

  肌理效果分为:视觉肌理、触觉肌理两种。介于我们使用的是网络媒体,无法做到触觉肌理,所以我们常用视觉肌理,从视觉上刺激读者的感觉,让他们从眼开始对某种肌理产生联想,联想到某个场景效果。 肌理效果强烈的页面更多用于游戏官网,主题性跟强,也多伴有游戏UI应用在页面中


  平面构成内容多且为一切设计的基础,这里仅仅给大家分享了一些在网页设计中常会用到,遇见的几个基础点。网络发展至今已经成为我们生活中不可缺少的一部分,我们从报纸、杂志到网站、网页、电子书,平面设计的东西从纸面到了屏幕,他们之间的差别在哪里,那些适合纸面的设计是否能完全用于现在的网页设计呢?我们现在的设计在原来设计基础上,又有了怎样的变化和发展?这些都是我们今后网页设计师们应当思考探索的。

时间: 2024-08-22 14:54:43

网页设计的平面构成的相关文章

网页设计和平面设计理念的六大区别

  1. 设计理念的不一样 平面设计的核心是品牌.它要以品牌为出发点去设计,要在视觉上100%体现品牌的魅力. 而网页设计的核心是用户.网站的目的是与用户100%沟通,是要实现某些特定的功能,这有点像电脑中的软件.那么网页设计其实是一种UI设计,也就是所谓的界面设计,要以用户的操作习惯为出发点去设计,换句话说也就是要设计得人性化,让用户使用得更方面,长时间盯着网页看也不觉得累.这也就是为什么众多门户要用白色做为页面主色调的原因,因为白色看久了不会造成眼睛疲劳,而鲜艳的颜色看久了会眼困! 2. 颜

网页设计技巧:网页的平面构成排版能力

文章描述:什么东西都离不开基础,建房子需要地基,解方程式需要先学会乘法表,唱歌需要先会"哆.来.咪".页面设计也同样需要基础,这个基础就是平面构成. 网页设计风格种多样,除去一些场景化设计和给力的素材支持,剩下的就全靠平面构成和排版了.刚开始接触网页设计的 什么东西都离不开基础,建房子需要地基,解方程式需要先学会乘法表,唱歌需要先会"哆.来.咪".页面设计也同样需要基础,这个基础就是平面构成. 网页设计风格种多样,除去一些场景化设计和给力的素材支持,剩下的就全靠平面

浅析平面与网页设计的差异性

这段时间,一直在做印像派的商品设计,如照片书.台历之类.从网页产品设计转行过来的我,时常在想,平面设计和网页都是设计,但区别又是那么大,那不就与大自然中的猫和老虎一样嘛,它们都属于猫科动物,但又不是同一种生物,有着很大的差别. 现在就让我们来分析一下同样作为视觉传达设计,她们之间的差异性. 1.视觉元素 在色彩方面平面设计与网页设计使用的色彩模式完全不同,平面设计因为后期的实现依赖于印刷,所以采用CMYK的色彩模式,而网页根据其显像方式使用RGB的色彩模式.平面设计时的色彩运用注重视觉的冲击力及

平面构成的运用:网页设计中的“点、线、面

怎样的网页设计才称得上是优秀? 想必很多人都和我有同样的疑问.个人认为所谓优秀的网页设计就是能以合理的功能布局.赏心悦目的颜色(图片)搭配传递出设计想法的网页设计.这其中包含了排版布局.色彩搭配.素材的选用等等诸多方面--当我们重新审视自己与别人作品之间的不同时往往会发现同样的颜色(图片.布局)会有不同的效果.这是为什么?颜色区域的面积大小?图片的使用形状?其实这些就是我今天要和诸位探讨的内容--网页设计中的"点.线.面"--平面构成在网页设计中的运用. 点.线.面?平面构成?网页设计

最佳平面网页设计案例赏析

由微软为Windows 8 设计命名的Metro设计风格,带领着一个新的设计趋势,与此同时,谷歌也是平面彩色设计的先驱.尽管流行的平面网页设计观点中,"酷"的趋势正在增长,阴影效果,颜色渐变,圆角等等,但只有真正的设计师们才能驾驭良好的设计,仅仅是使用平面颜色和线条.另一方面,也存在的另一种意见,认为常规的客户不会对平坦的色彩设计感到满意,渐变和阴影之类的东西是完全必要的. 在这一次的创意网站分享中,我们收集了一些仅仅是使用纯色来构建的平面网页设计,希望你会喜欢! Wistia 图01

网页设计中的平面构成

什么东西都离不开基础,建房子需要地基,解方程式需要先学会乘法表,唱歌需要先会"哆.来.咪".页面设计也同样需要基础,这个基础就是平面构成. 网页设计风格种多样,除去一些场景化设计和给力的素材支持,剩下的就全靠平面构成和排版了.刚开始接触网页设计的时候,常常会钻到某个局部中去,页面风格还没出现,就开始做字体细节,结果可想而知咯.经过一段时间的学习和实践,发现原来做网页跟绘画是一样,先把内容和想法都丢上去,排布出整体风格(这里就需要的是平面构成排版能力啦),然后再慢慢细化各部分内容. 一.

浅析·平面与网页设计的差异性

这段时间,一直在做印像派的商品设计,如照片书.台历之类.从网页产品设计转行过来的我,时常在想,平面设计和网页都是设计,但区别又是那么大,那不就与大自然中的猫和老虎一样嘛,它们都属于猫科动物,但又不是同一种生物,有着很大的差别. 现在就让我们来分析一下同样作为视觉传达设计,她们之间的差异性. 1.视觉元素 在色彩方面平面设计与网页设计使用的色彩模式完全不同,平面设计因为后期的实现依赖于印刷,所以采用CMYK的色彩模式,而网页根据其显像方式使用RGB的色彩模式.平面设计时的色彩运用注重视觉的冲击力及

《众妙之门——网页设计专业之道》——1.5 平面主义

1.5 平面主义 在过去的几年里,我们注意到网页设计中文本加载方向的一个缓慢的转变.不仅设计获得了层次感和真实感,连导航也发生了改变.一些设计师用传统的垂直滚动和滑动导航,既可以水平滚动又可以垂直滚动,甚至是纯水平滚动.这就是所谓的"平面主义".由于鼠标设计的是垂直滚动,因此采用水平滚动条的网站更难以浏览.但是随着多点触碰设备的出现,让我们可以重新考虑这种设计的可用性.毕竟在这种设备上,用户是垂直浏览还是水平浏览真的无关紧要,并且一些插件(如Scrollable和jScrollHori

网页设计色彩及网站配色

一个网站,给用户留下第一印象的既不是网站丰富的内容,也不是网站合理的版面布局,而是网站的色彩.色彩对人的视觉效果非常明显,一个网站设计成功与否,在某种程度上取决于设计者对色彩的运用和搭配.因为网页设计属于一种平面效果设计,在排除立体图形.动画效果之外,在平面图上,色彩的冲击力是最强的,它很容易给用户留下深刻的印象.因此,在设计网页时,我们必须要高度重视色彩的搭配. 一.色彩的基础知识 色彩五颜六色.千变万化,我们平时所看到的白色光,经过分析在色带上可以看到,它事实上包括红.橙.黄.绿.青.蓝.紫