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

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

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

【 tulaoshi.com - 平面设计 】

掌握必要的方法

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

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

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

建立网格

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

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

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

节奏韵律

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

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

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

体现层级

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

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

头疼的事情

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

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

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

小结

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

讨论

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

延伸阅读
《FEZ》游戏心得与攻略提示 有种游戏是,你可能根本还不知道游戏在玩什么,只要单单看到他的一点点概念,就对其喜爱不已。大概就是...「电波瞬间对上了」的那种感觉吧(笑)。而对我来说,《FEZ》就是这样的一款游戏。我很喜欢P​​ixel Art或Voxel Art,点阵式的画面描绘对电玩游戏来说是一种无法被取代的强烈征符,《FEZ》这种乍看之...
1. 如何理解响应式设计(RWD) zhongfan :学究一些,首先大家先了解一下响应,然后再讲一下设计,响应就是我发出的请求能得到什么样子的回复,比如我说 你好,你会很容易的给我回复你好,因为大家都是中国人,如果我说hello,我们这代人如果上过初中,他也会给我说Hello,但是如果 我给对你说Bonjour,那可能只有高配的人才可能知道了。这里面...
标签: Web开发
重复:在整个站点中重复实现某些页面设计风格。 重复的成分可能是某种字体、标题Logo、导航菜单、页面的空白边设置、贯穿页面的特定厚度的线条等。 颜色作为重复成分也很有用:为所有标题设置某种颜色,或者在标题背后使用精细的背景。 用对比来吸引读者的注意力。 通过对比来抓住读者的注意力,例如,你可以让标题在黑...
当今,无论任何一款互联网产品,都需要搭载PC平台进行推广,Banner更是推广的一大利器,怎么将Banner设计好就成为一个需要探讨研究的课题。 Banner规格尺寸大小不一,文件大小也有一定的限制,这就使得在设计上增加了许多障碍,颜色不能太丰富,否则会在文件大小的限制下失真,软文不能太多,否则会没有重点,得不偿失,怎么在方寸间把握平衡...
关于Banner的设计,相信已经有很多人都看过这方面经验的分享了,我来公司也做过了一些Banner的设计,那在这其中通过不断的学习、实践积累了自己的一些小小经验和方法,下面给大家浅浅的分享下我总结的Banner设计经验。如有错误,尽管拍砖,小女子虚心请教学习。 Banner设计其实是我们接触互联网工作后,最常见一种工作。那么Banner到底...

经验教程

975

收藏

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