哈工大第6章网ppt课件.ppt

《哈工大第6章网ppt课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、本章主要内容6.1网页界面的构成、特性及形式6.2网页界面中文字的编排设计6.3网页界面中版式设计6.4网页界面色彩搭配6.5网页设计之“三”原则6.6网页界面设计中提高下载速度的考虑第6章网页用户界面设计7/31/20211哈工大软件学院6.3.1版面设计需要符合人的视觉习惯6.3.2避免使浏览者产生疲劳感6.3.3强化页面的主从关系6.3.4安排合理的视觉流程第6章网页用户界面设计6.3网页界面中版式设计版式设计的目的就是要合理布局和设计网页版面，高效地传递视觉信息，充分吸引浏览者。7/31/20212哈工大软件学院6.3.1版面设计需要符合人的视觉习惯第6章

2、网页用户界面设计6.3网页界面中版式设计规律1：人眼的视线沿着水平方向运动比沿着垂直方向运动快而且不易疲劳；规律2：视线的变化习惯于从左到右，从上到下和顺时针方向运动；规律3：当视线沿着既不水平也不垂直的斜线方向移动时，在水平方向上下约45°的范围内，视线从左到右移动；在垂直方向左右约45°范围内，视线从上到下移动。视线移动规律7/31/20213哈工大软件学院6.3.1版面设计需要符合人的视觉习惯第6章网页用户界面设计6.3网页界面中版式设计调查显示：上部比下部注目程度高；左侧比右侧注目程度高最佳视域：（1）左上部；（2）中上部视域部位给人的心理感受：上部

3、：轻快、上升、积极、愉悦下部：沉重、稳定、压抑、消沉左侧：轻松、舒展、自由、主动右侧：庄重、局限、拘谨、被动视域分布7/31/20214哈工大软件学院6.3.1版面设计需要符合人的视觉习惯第6章网页用户界面设计6.3网页界面中版式设计滚动图片最好从右向左线状布局应水平方向宽些导航栏最好放在左侧或上部要重点突出的内容最好放在左上部7/31/20215哈工大软件学院第6章网页用户界面设计7/31/20216哈工大软件学院第6章网页用户界面设计7/31/20217哈工大软件学院第6章网页用户界面设计7/31/20218哈工大软件学院第6章网页用户界面设计7/31/20219

4、哈工大软件学院6.3.2避免使浏览者产生疲劳感第6章网页用户界面设计6.3网页界面中版式设计1.固定页宽，一般不限定长度，但不宜过长一般应控制在1-3屏，最多不要超过5屏；多屏信息可以通过超链接的方法解决。2.对于文字，以下情况会产生疲劳(1)字号过小、行间距过密，不易辨认；(2)高亮度文字、背景极暗。3.挥之不去的跟踪动效，会令人生厌动效跟踪光标例文字不易辨认例7/31/202110哈工大软件学院6.3.3强化页面的主从关系第6章网页用户界面设计6.3网页界面中版式设计页面中的构成元素不能同等对待，必须以点带面，让焦点先抓住浏览者，引发继续浏览的愿望，然后再扩

5、展开来。强化页面的主从关系就是将主要对象与次要对象区分开来，重点突出。采取的方式有：（1）主从对象的大小对比（2）弱化主体对象周围的内容（3）主从对象的色彩对比（4）重复主体对象（5）加强主从对象在形态上的对比7/31/202111哈工大软件学院6.3.3强化页面的主从关系第6章网页用户界面设计6.3网页界面中版式设计1.主从对象的大小对比2.弱化主体对象周围的内容3.主从对象的色彩对比4.重复主体对象5.加强主从对象在形态上的对比7/31/202112哈工大软件学院第6章网页用户界面设计主角突出，但整体页面均衡7/31/202113哈工大软件学院第6章网页用户界面

6、设计放大的文字透视变形非常醒目，并与黑暗的背景形成对比7/31/202114哈工大软件学院6.3.3强化页面的主从关系第6章网页用户界面设计6.3网页界面中版式设计1.主从对象的大小对比2.弱化主体对象周围的内容3.主从对象的色彩对比4.重复主体对象5.加强主从对象在形态上的对比7/31/202115哈工大软件学院第6章网页用户界面设计7/31/202116哈工大软件学院6.3.3强化页面的主从关系第6章网页用户界面设计6.3网页界面中版式设计1.主从对象的大小对比2.弱化主体对象周围的内容3.主从对象的色彩对比4.重复主体对象5.加强主从对象在形态上的对比7/31/

7、202117哈工大软件学院第6章网页用户界面设计主图（桔红）与背景（绿）7/31/202118哈工大软件学院第6章网页用户界面设计产品以暗色调出现在亮色调中7/31/202119哈工大软件学院第6章网页用户界面设计主体为彩色7/31/202120哈工大软件学院6.3.3强化页面的主从关系第6章网页用户界面设计6.3网页界面中版式设计1.主从对象的大小对比2.弱化主体对象周围的内容3.主从对象的色彩对比4.重复主体对象5.加强主从对象在形态上的对比将要表达的主体对象以不同角度或大小重复出现，提高与视线的接触频率7/31/202121哈工大软件学院第