网站版式设计.ppt

1、网站版式设计,一.网站的视觉路径,1.视觉路径一般是：从上到下，从左到右。 2.网站中方块： (1)方块感越强越能给用户方向感。 (2)方块越少越好。 (3)尽量用留白做视觉区分。,3.对齐和间距： (1)视觉设计最简单，也是最容易忽略的就是对齐。 (2)间距的一般规律：字距小于行距，行距小于段距，段距小于块距。,4.主次关系 ： 对用户引导的关键就在于怎么处理主次关系。说白了就是对比，从视觉的角度上看：形状的大小，颜色，摆放的位置都会影响信息的重要与否。比如yahoo中间新闻栏的设计，大图带大标题是第一要点，小图带字是第二要点，纯文本第三，节奏感、主次关系非常强。,5.常见问题： (1)视觉

2、设计师不懂代码，前端设计师在视觉方面又不专业。常常是实现出来的产品跟视觉设计出来的图片有所偏差。建议视觉设计师跟进调整。 (2)广告图片破坏视觉效果。如果网站足够牛的话，可以让广告方遵循视觉规范。如果不行的话，起码设计师还能决定广告的尺寸，位置等等。 新浪、腾讯、淘宝的首页改版。单纯从视觉设计的角度上看，腾讯非常清爽，很用心。,二.版式的基本类型：,1.骨骼型 ：网页版式的骨骼型是一种规范的、理性的分割方法，类似于报刊的版式。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。一般以竖向分栏为多。这种版式给人以和谐、理性的美。几种分栏方式结合使用，既理性、条理，又活泼而富有

3、弹性。,2.满版型 ：页面以图像充满整版。主要以图像为诉求点，也可将部分文字压置于图像之上。视觉传达效果直观而强烈。满版型给人以舒展、大方的感觉。随着宽带的普及，这种版式在网页设计中的运用越来越多。,3.分割型： 把整个页面分成上下或左右两部分，分别安排图片和文案。两个部分形成对比：有图片的部分感性而具活力，文案部分则理性而平静。可以调整图片和文案所占的面积，来调节对比的强弱。例如：如果图片所占比例过大，文案使用的字体过于纤细，字距、行距、段落的安排又很疏落，则造成视觉心理的不平衡，显得生硬。倘若通过文字或图片将分割线虚化处理，就会产生自然和谐的效果。,4.中轴型 ：沿浏览器窗口的中轴将图片或

4、文字作水平或垂直方向的排列。水平排列的页面给人稳定、平静、含蓄的感觉。垂直排列的页面给人以舒畅的感觉。,5.曲线型 ：图片、文字在页面上作曲线的分割或编排构成，产生韵律与节奏。,6.倾斜型： 页面主题形象或多幅图片、文字作倾斜编排，形成不稳定感或强烈的动感，引人注目,7.对称型： 对称的页面给人稳定、严谨、庄重、理性的感受。,8.焦点型 ：焦点型的网页版式通过对视线的诱导，使页面具有强烈的视觉效果。 （1）中心以对比强烈的图片或文字置于页面的视觉中心。 （2）向心视觉元素引导浏览者视线向页面中心聚拢，就形成了一个向心的版式。向心版式是集中的、稳定的，是一种传统的手法。 （3）离心视觉元素引导浏

5、览者视线向外辐射，则形成一个离心的网页版式。离心版式是外向的、活泼的，更具现代感，运用时应注意避免凌乱。,9.三角型 ：网页各视觉元素呈三角形排列。正三角形（金字塔型）最具稳定性，倒三角形则产生动感。侧三角形构成一种均衡版式，既安定又有动感。,10.自由型： 自由型的页面具有活泼、轻快的风格。,三.网站制作中的比例：,美的比例是网页设计成功的基础，好页面的首部、菜单、页面和底部的合理安排和选择，首先取决于良好的比例！ 公认为最美的比例是黄金比(黄金分割)1:1.618。 还有一种美的比例标准产生于德国，我们称之为德国标准比例。1:1.141。,四.网站设计风格 ：,风格是抽象的。是指站点的整体

6、形象给浏览者的综合感受。 举个例子：我们觉得网易是平易近人的，迪斯尼是生动活泼的，IBM是专业严肃的。这些都是网站给人们留下的不同感受。,1将你的标志logo，尽可能的放在每个页面上最突出的位置。 2突出你的标准色彩。 3总结一句能反映贵站精髓的宣传标语！ 4相同类型的图像采用相同效果，比如说标题字都采用阴影效果，那么在网站中出现的所有标题字的阴影效果的设置应该是完全一致的！,五.网页色彩的搭配 ：,1用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。 2用两种色彩。先选定一种色彩，然后选择它的对比色。 3用一个色系。简单的说就是用一个感觉的色彩

7、，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。,六.颜色误区 ：,1不要将所有颜色都用到，尽量控制在三五种色彩以内。 2背景和前文的对比尽量要大，(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。,七.视觉流程版式类型 ：,1.视觉运动规律 ： (1)一条垂直线在页面上，会引导视线作上下的视觉流动 。 (2)水平线会引导视线向左右的视觉流动 。 (3)斜线比垂直线、水平线有更强的视觉诉求力 。 (4)矩形的视线流动是向四方发射的 。,(5)圆形的视线流动是辐射状的 。 (6)三角形则随着顶角之方向使视线产生流动 。 (7)各种图形从大到小渐层排列时，视线会强烈地按照排列方向流动。,2.

8、视觉流程概念： 是视线在观赏物上的移动过程，是二维或三维空间中的运动。,3.视觉流程 ： (1)视觉流程的筹划 ： 视觉流程是网页版式设计的重要内容，可以说，视觉流程运用的好坏，是设计者技巧成熟与否的表现。 页面中不同的视域，注目程度不同，给人心理上的感受也不同。,如下: 上部给人轻快、漂浮、积极、高昂之感；下部给人压抑、沉重、限制、稳定的印象；左侧，感觉轻便、自由、舒展，富于活力；右侧，感觉局促却显得庄重。网页中最重要的信息，应安排在注目率最高的页面位置，这个位置便是页面的最佳视域。,页面的设计轻松而具均衡的形式感，把最佳视域留给了横贯页面的大标题,作为个性化的视觉元素，拼贴剪纸式的文字分别

9、占据了三个点，吸引视线在它们之间流动,浏览者的眼睛首先看到的是页面的左上角,(2)视觉流程类型： 分为直线视觉流程和曲线视觉流程两类。,视觉流程明确，形成清晰易读的页面设计,自由的视觉流程形成生动活泼的页面设计,(3)焦点视觉流程 ： 是指视觉心理的焦点。每个页面中都有一个视觉焦点，这是需要重点处理的对象。 焦点是否突出，和页面版式编排、图文的位置、色彩的运用有关，同时也与对“焦点”着力描写有关。在视觉心理作用下，焦点视觉流程的运用使主题更为鲜明、强烈。,按照主从关系的顺序，使放大的主题形象成为视觉焦点，以此来表达主题思想。,运用图片大小的对比引起视觉的流动,将文案作整体编排，突出主题形象。,

10、对主题图片的遮挡，引发浏览者一探究竟的兴趣,在主题形象四周增加空白量，使之成为视觉焦点。,留白使页面简约大方，更加突出了主题,通过在主体产品周围留白吸引视线,这是一个典型的运用焦点视觉流程的例子,页面中的方形图无疑首先吸引了浏览者的视线,具有独特个性风格的首页设计,视觉流程清晰,八.颜色应用,1.色彩的易见性 在白纸上黄字不醒目，而写黑字醒目明度对比强，易见度高；明度对比弱，易见度低。另外，光线弱。易见度低；光线过强，有眩目感，易见度也差；色彩面积大，易见度高；色彩面积小，易见度低。如果当两组光源与形相同时，形是否能看清楚，则取决于形色与背景色的明度，色相、纯度上的对比关系。其中明度对比最强的

11、对比作用最大，对比强的清楚，弱的模糊。,例如： 黑色底可见度强弱次序是 白黄黄橙黄绿橙。 白色底可见度强弱次序是 黑红紫紫红蓝 蓝色底可见度强弱次序是 白黄黄橙橙 黄色底可见度强弱次序是 黑红蓝蓝紫绿,2.色彩的对比种类 色彩对比：在一定条件下，人对同一色彩有不向的感受。色彩单一给人一种印象。在不同的环境下，多色彩给人另一种印象。色彩之间这种相互作用的关系称“色彩对比”。 明度对比、纯度对比、冷暖对比、面积对比,3.色彩的感情 色彩的冷暖 色彩的轻重 色彩的华丽咸与朴素感 色彩与四季 色彩与味觉 色彩与形状,4.联想: (1)具体的联想 红色：联想到火、血、太阳 橙色：可联想到灯光、柑桔、秋叶

12、 黄色：可联想光、柠檬、迎春花 绿色：可联想到草地、树叶、禾苗 蓝色：可联想到天空、水 紫色：可联想到丁香花、葡萄、茄子 黑色，可联想到夜晚、墨；炭、 白色：可联想到白云、白糖、面粉、雪 灰色：可联想到乌云、草木灰、树皮,(2)抽象的联想 红色：可联想到热情，危险、活力 橙色：可联想到温暖、欢喜、嫉妒 黄色：可联想到光明、希望、快活、平凡 绿色：可联想到和平、安全、生长、新鲜 蓝色：可联想到平静、悠久、理智、深远 紫色：可联想到优雅、高贵、重、神秘 黑色：可联想到严肃、刚健、恐怖、死亡 白色：可联想到纯洁、圣、清净、光明 灰色：可联想到平凡、失意、谦逊 这些色彩的联想多次反复，几乎固定了它们专

13、有的表情，于是该色就变成了该事物的象征。,5.色相的心理分析 (1)红色 红色的纯度高，注目性高，刺激作用大，人们称之为“火与血”的色彩，能增高血压加速血液循环，对于人的心理产生巨大的鼓舞作用。,(2)橙色 橙色的刺激作用虽然没有红色大，但它的视认性注目性也很高，即有红色的热情又有黄色的光明，活泼的性格，是人们普遍喜爱的色彩。,(3)黄色 黄色是最为光亮的色彩，在有彩色的纯色中明度最高，给人以光明、迅速、活泼、轻快的感觉。它的明视度很高，注目性高，比较温和。,(4)黄绿色 是黄色和绿色的中间色，由于在日常生活中黄绿色并不突出，所以易被人们所忽视，有很多色彩心理的研究把黄绿与绿色合并。,(5)绿

14、色 绿色的心理概念：绿色为植物的色彩，明视度不高，刺激性不大，对生理作用和心理作用都极为温和，因此入对绿色的嗜好范围很大，给人以宁静、休息、精神不易疲劳。,(6)蓝绿色 蓝绿色的明视度及注目性，基本与绿色相同，只是比绿色显得更冷静、凉湿，其它给人的心理感觉与绿色差不多。,(7)蓝色 蓝色的注目性和视认性都不太高，但在自然界如天空、海洋均为蓝色，所占面积相当大，蓝色给人冷静、智慧、深远的感觉。,(8)蓝紫色 蓝紫色与黄色的刺激相反，是明度很低的色彩，所以纯度效果显不出力量，注目性较差，明视度必须靠背景的衬托。给人以收缩、后退的膊觉。,(9)紫色 紫色因与夜空、阴影相联系，所以富有神秘感。紫色易引

15、起心理上的忧郁和不安，但紫色又给人以高贵、庄严之感，所以妇女对紫色的嗜好性很高。,(10)紫红色 紫红色指紫味的红色，视认性和注目性冷暖程度介于红色和紫色之间，此色的嗜好率很高。据说对忧郁症、低血压的人有治疗作用。,(11)白色 白色为不含纯度的色，除因明度高而感觉冷外基本为中性色，明视度及注目性都相当高，由于白色为全色相，能满足视觉的生理要求，与其它色彩混合均能取得很好的效果。,(12)黑色 黑色为全色相，也是没有纯度的色，与白色相比给人以暖的感觉，黑色在心理L是一个很特殊的色，它本身无刺激性，但是与其它色配合能增加刺激，黑色是消极色所以单独时嗜好率低，可是与其它色彩配合均能取得很好的效果。,(13)灰色 灰色为全色相，也是没有纯度的中性色，完全是一种被动性的色，由于视觉最适应看配色的总和为中性灰色，所以灰色是最为值得重视的色，它的视认性、注目性都很低。所以很少单独使用，但灰色很顺从，与其它色彩配合可取得很好的效果。,人物设定与场景,一.人物设定 以人物为主的动画形象设计 1.人物的基本比例 2.人体的基本结构 头颈肩腰腹臀四肢,3.人