网页设计之版式的合理尺寸
![网页设计之版式的合理尺寸](https://img.360docs.net/img83/03yhdxyelgyy42j72bmf-31.webp)
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
网页设计之版式的合理尺寸
合格要求:
高价值点:
上课流程及参考方法: 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的产品特征更加直接明显;
特别提醒:本文版权归邵阳精英学校所有,北京朋友高尔夫提供下载,禁止转载!