网页设计之版式的合理尺寸

网页设计之版式的合理尺寸

合格要求：

高价值点：

上课流程及参考方法： 1. 根据内容合理规划页面尺寸 2. 首页各信息区域的大小规划合理 3.

页面结构清晰，要求不单调

北

京朋友高尔夫提供下载！

1、 掌握合理规划项目页面尺寸：越重点

信息越在版面上方；

2、 合理规划首页信息内容的面积大小：

根据具体需求规划大小；

3、

合理丰富页面版式结构

增加造型变化，适当增加装饰元素

1. 首页尺寸大小应用分析

2. 修改作业，讲解实例

3. 内容划分面积大小不合理分析讲解

4.

版式过于简单

问题一：页面尺寸设置不合理

一般页面尺寸大小

1、门户型网站：一般针对15和17寸显示器，有两种标志尺寸750和960像素（指宽度，一般高不考虑），比如以下新浪和大旗网；由于这类网站用户定位不一样，所以对尺寸（宽）的设计也不同；

国内新浪、搜狐等门户站是以新闻信息为主的资讯网站，面对用户广，基本包括所有能连接网络的地区和用户，包括潜在的用户；这类用户使用的显示器各不相同，目前相对发达的地区基本普及了17寸显示器；但是还有许多落后地区依然有使用15寸显示器的，这都是在这些门户网站考虑范围之内；

大旗网主要针对娱乐信息为主，目标用户相对层次更高些，这类用户17寸显示器普及率很高；

2、企业网站：页面高度更为敏感，同时也要考虑宽度；宽度一般考虑17寸显示器，也可考虑15寸显示器，这一点根据客户需求来定；但不应该在横向上出现滚动条；根据内容来确定高度，原则就是在越重要的信息，越要安排在重点位置；第一屏尽量要显示主要信息；

17寸显示器满屏 17寸显示器不满屏

3、形象页：一般指不包括栏目信息内容的首页；以动画为主；这时候尺寸一般要考虑大小；原则是不管是考虑17寸还是15寸显示器，都不应该有横向和竖向的滚动条；要求一屏显示；

不满屏形象页满屏形象页

实例1:

学生作业效果本身非常好，页面很漂亮；但是我们看看在浏览器中的效果，几乎只能看到一半，这样的效果没有设计效果好，用户还得下拉屏幕来看，特别是右边动画，下拉了就看不到上面，在上面又看不完下面，总是要缺一块，感觉很不好；在PS中就必须考虑好页面大小；要在17寸显示器完全显示尺寸一般不超过1003X613；如果要考虑15寸显示器一般是不超过778X440；

学生作业在IE中预览效果

修改后：主要内容完全显示，次要内容如版权之类信息可以在一屏以下

实例2:

页面大小没有考虑1024或者更多分辨率或者考虑了但是没有考虑周到；

问题：在17寸显示器下右边空白，感觉就是空白，没有任何联系，像被切除了一样，在目前17寸显示器比较普及的情况下，不处理好17显示器的页面效果，等于是你没有考虑这方面的用户群；

其它问题还有，banner造型、内容区造型和页面造型不协调；内容区划分不合理等，暂不做课题修改；最终效果为了配合修改的重点（内容区划分），还是做了调整，增加学生的视觉体会！

问题二：内容划分面积大小不合理

问题：内容区域信息区块安排不合理，会员登陆与新闻产品组合形成一个多边型，造型不美观也不能与画面协调；

其它问题还有，banner造型和页面造型不协调；右边内容色彩搭配不当等，暂不做课题修改；最终效果为了配合修改的重点（内容区划分），还是做了调整，增加学生的视觉体会！

修改：先不说会员登陆是否需要，只说又边内容的布局；内容区是给用户看信息的，需要一个工整的排版，用户才看得舒服，如果排版很乱或不合理，给用户造成很不好的感觉，试想，他下次还愿意看你的网站吗？用户的感受，这是作为设计师需要考虑的！

问题三：版式过于简单，显得单调

问题：版面过于单调，主次关系没有拉开；比如banner显得太单薄，没有力度；头部的两条弧线本来是很有张力的两条线，但是两条线形成的造型过窄，给人很压抑的感觉；圆形放在上面感觉也单薄；上面弧线与浏览器边界形成一个很大面积的空白，在第一屏来说显得太“浪费”，也不合适；

修改：加大头部面积，让banner的感觉舒展起来，让banner视野开阔，有延伸感；这样更加大气；结构上也有突破，人物的位置让整个banner活跃了很多；

或者直接使用产品与图片搭配组合成一个banner，使得banner的产品特征更加直接明显；

特别提醒：本文版权归邵阳精英学校所有，北京朋友高尔夫提供下载，禁止转载！