网页版式设计的心得与方法

2016-02-17 03:33 7 1 收藏

下面请跟着图老师小编一起来了解下网页版式设计的心得与方法,精心挑选的内容希望大家喜欢,不要忘记点个赞哦!

【 tulaoshi.com - 平面设计 】

掌握必要的方法

设计的时候,如果设计者随意地进行处理而不考虑当中的原则方法及对象规律的话,那么很多时候都会出现一些不太好的结果。虽然感性是一种相当重要的因素,设计中一定要带有情感,但并不代表简单地依靠情感就能做出好的设计。相反,如果设计的时候能够考虑到各方面的因素并运用恰当的方法的话,那么作品将更加得体和出色。在网页设计中,版式设计占的比重非常大,可以说版式的好坏直接决定页面的成败,也可以说它是网页视觉识别的基础。那么在具体视觉设计的时候,版式上有哪些原则及方法的?

网页版式设计的心得与方法,PS教程,图老师教程网

网页版式设计的心得与方法,PS教程,图老师教程网

建立网格

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

网页版式设计的心得与方法,PS教程,图老师教程网

为设计对象建立一个合适的网格。排版网格是由一些垂直和水平的线构成的结构,可以用来帮助内容结构化,它能够让对象产生秩序感。有些人说网格太过于呆板,影响设计创意,我个人觉得可以把网格当做一个整体大的框架,也可以作为设计师组织文字、图片的支架,它相当于是设计的基础,没有好的基础怎么能够谈得上出色的设计呢?所以网格不仅不影响创意的发挥,反而能使设计师思路得到理性地梳理。网格地使用,能较好地解决设计师关于页面中各元素定位的问题,在这基础之下可以做科学的精准的版式的规划。同时使用网格也是一个令您的设计变得高效的方法之一,在把草图转化为设计稿的过程中,在版式方面主要的难点是如何精确地安排各个元素,如果这时候呢够选择合适的网格进行设计,那么这个起点的意义是不可小看的。

节奏韵律

网页版式设计的心得与方法,PS教程,图老师教程网

网页中版式的节奏感及韵律,来源于排版中的疏密的间隔安排,它就好比音乐作品里的节拍,也是组织内容的一个重要单元。当然在绘画作品中也是能体现的,只不过绘画作品和设计作品有些类似,都是通过疏密的控制让对象形成画面节奏的和谐感受。在网页中可以通过一系列的重复和固定的间隔来建立一种视觉和谐的美感,如在一些字体大小,行距、模块与模块间的距离等等的制定。

纵向的节奏在网页设计中是比较运用广泛且明显的,如大部分资讯型的站点。纵向节奏在这方面起到的优化网站的作用还是挺大的。什么是网页纵向节奏感?其实就是为网站设定一个纵向的单元高度,就好比我们的记事本那样,每一页都是布满了固定高度的线。如果文字正好处于单元高度上,那版面就能获得连贯的纵向平衡和节奏感。很显然,按纵向垂直节奏排列的设计更加容易扫描或阅读,因为它使内容的出现更加有规律。这个方法不仅适用在局部的文字内容区,对于整个页面的内容排布也是有用的,当然在包含复杂元素的页面中,如包含多种尺寸的图片、标题、文字格式的时候,就需要对单元高度的设定做更多的考虑。不过根据以往个人的设计经历,这种精准的节奏方法因受限于各种情况的影响而不总是可以完全实现,尤其是在设计复杂页面的时候。尽管如此,我个人认为这个方法还是值得设计师们去研究追求的。

体现层级

网页版式设计的心得与方法,PS教程,图老师教程网

实际上,任何一个版面或界面都存在着不同层级关系、不同组织结构的内容和元素,而且内容版面层级的设计规划和视觉层次的设计规划其实是一样的原理,视觉美术渲染有主次之分,那么版面内容的层级也一样具有主次之分的,进行排版设计的时候,设计师应该把这种客观存在的层级关系用编排的手段把它还原出来。做好版面层级区分的核心作用是,能够提升文本、图片等的元素的视觉线索从而获得更好的界面清晰度,简单地说就是使内容更容易阅读了。在设计中可以通过字体大小对比、文字效果、色块等的方法来处理分级效果。比如哪些字应该大一些,哪些字应该小一些;哪些色块要重一些,哪些浅一些

头疼的事情

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

网页版式设计的心得与方法,PS教程,图老师教程网

一个版面设计完成了,拿去填充内容后发现不好看了,严重时导致面目全非了,这是为什么?哦!那是因为编辑人员没有按设计师的版面设定去填充内容,这就破坏了页面的原有的规划了,难怪不好看了。所以,设计师还应尽量地与编辑人员进行沟通,并附带上设计说明书。因为不是每个编辑人员都对设计有所了解,有时他并不懂得你关注的问题,所以我们要严格把关,以免在作品出版后令你捶胸顿足。

小结

做好排版设计也不是一件困难的事情,我们可以通过字体、行距、色块、对齐和网格等等的方法来规划和控制,我个人觉得网站版面也是能与用户形成交流的,作为设计者,我们必须让这种交流保持顺畅和愉悦,这样用户才会去喜欢它。

讨论

来源:http://www.tulaoshi.com/n/20160217/1578109.html

延伸阅读
页面特性:产品页面简洁易用,专题页面绚丽视效印象深刻。 在页面设计当中,产品页面(如facebook 微博 twitter 微吧等)的设计。注重功能,交互,设计要考虑用户长时间的浏览体验。视觉上侧重间距,布局,按钮和logo,及icon样式。注重规范和视觉识别性。样式通常简洁易用,绚丽元素少,视觉上并不强调冲击力。 专题页面时效性有限(大多专题是...
标签: 设计 平面设计
简洁的设计既能传达出现代感,而且设计起来也毫不费力,何乐而不为?本文以五个实例,来探讨版面设计的一些技巧,包括简洁的手册设计、浓缩的版面设计、利用对比形成焦点、生动活泼的图表及醒目大方的封面。五种技巧拓宽你的设计视野,定会令你受益菲浅。 版面:个人关系 在下次你设计手册时,你可以尝试 面对面的设计风格!我们设计的重点不是...
晋小彦:时代在变规则也在变,网页设计师刚入行的时候都会被告知信息内容需要摆放在800或1000的宽度以内,但是今天不论在网络速度还是硬件、显示屏都有了不同程度的更。面对伴随而来的多终端显示。如何让我们的网页有一个良好的第一视觉?如何让各类的用户特别是宽屏的用户在自己的显示器上看到完整的视觉盛宴?而非仅停留于1000宽度的切糕网页。...
1. 如何理解响应式设计(RWD) zhongfan :学究一些,首先大家先了解一下响应,然后再讲一下设计,响应就是我发出的请求能得到什么样子的回复,比如我说 你好,你会很容易的给我回复你好,因为大家都是中国人,如果我说hello,我们这代人如果上过初中,他也会给我说Hello,但是如果 我给对你说Bonjour,那可能只有高配的人才可能知道了。这里面...
标签: Web开发
重复:在整个站点中重复实现某些页面设计风格。 重复的成分可能是某种字体、标题Logo、导航菜单、页面的空白边设置、贯穿页面的特定厚度的线条等。 颜色作为重复成分也很有用:为所有标题设置某种颜色,或者在标题背后使用精细的背景。 用对比来吸引读者的注意力。 通过对比来抓住读者的注意力,例如,你可以让标题在黑...

经验教程

878

收藏

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