Web前端页面设计
2.4 点，线，面的运用
先进开发思想和良好设计模式的前端模块化技术正逐渐成熟14。
根据网站前端模块化的不同开发思想，详细分析了目前常见的三种模块化开发策略，阐述了每种开发策略的具体实现方法，常见的框架与工具存在的问题及优缺点，并提出了完善前端模块化开发策略的一些方法。在网页设计中同样离不开平面设计中最基本的点，线，面的运用。
2.4.1 点的运用
在内容繁杂的网页上为了可以让浏览者更轻松的找到自己想要的信息，
点的引导作用必不可少 如图2-12所示：
图 2-12 点的应用
2.4.2 线的运用
线不但起到了页面的分割作用，很好的运用线条还使网页锦上添花如图
2-13：
21
Web前端页面设计
图 2-13 线的应用
2.5 网站结构布局及设计
2.5.1 网站首页结构
实际内容占据网页的大部分空间，为50%～80%，导航部分不超过20%。颜色的选择
以青白色为主，没有使用太多的颜色来修饰某个对象，此外，正文和背景色的对比度较大，一般字色为默认的黑色，并且用了不同的背景色条区分正文区与其他功能区。为了提高网页的可读性，标题区，标题行和正文区使用了不同大小的字体，正文使用的是静止的文字，且字体足够大，以便于阅读[15]。
数字媒体技术系网站主要用来进行教学信息的发布与显示。作为一个网站，应该由
一些相关及相对独立的模块整合而成。本网站系统主要包括以下几个主要页面及几个大的
22
Web前端页面设计
模块下又细分为几个的功能模块。
制作前台页面模块，包括主页及各个子页面，建立各个页面与数据库中相关数据链
接，实现前台通过调用数据库把后台数据在前台显示和更新。整体网站遵循数字媒体技术系院校类网站的设计思路，拥有完善的功能，风格要求简洁大方不单调。各个子页面都可正常返回主页以及正确连接到各个子页面。功能要求使用简单全面，容易操作。
由上面的分析，网站前端的结构设计成。如下图2-14所示：
图 2-14 网站整体结构图
2.5.2 主题鲜明，富有特色
在目标明确的基础上，完成网站的构思创意即总体设计方案。对网站的
整体风格和特色做出定位，规划网站的组织结构。 要做到主题鲜明突出，力求简洁，要点明确，以简单明确的语言和画面告诉大家本站点的主题，吸引对本站点有需求的人的视线，对无关的人员也能留下一定的印象。对于一些LOGO[16]标志应充分加以利用。调动一切手段充分表现网站的个性和情趣，突出个性，这样能够办才出网站的特色如图2-15所示：
图 2-15 网站标题LOGO
23
Web前端页面设计
2.5.3 版式编排布局合理性
图 2-16 网站版式排版图
网页设计作为一种视觉语言，当然要讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处，应充分加以利用和借鉴。
24
Web前端页面设计
站点设计简单有序，主次关系分明，将零乱页面的组织过程，混杂的内
容，依整体的布局的需要进行分组归纳，经过进行具有内在联系的组织排列，反复推敲文字，图形与空间的关系，使浏览者有一个流畅的视觉体验，如图3-16所示：
图中的A区域是数字媒体技术系网站的大logo以及网站名称，能展现网
站的主题。访问者第一眼就能看的出来网站的类别等。
B区域是网站的导航栏，导航的颜色基本上是青白色，能展现网站的大体 内容。导航栏 跟顶端logo的颜色基本上一直用户浏览网页时不会产生
视觉疲劳。导航栏中每个导航按钮的设计也是符合美观要求。大方，大气，自然是设计导航栏的重要基础。
C区域 是首页中的大图片，是浙江理工大学的全景图片，图片清晰拍摄
角度广，色彩调整完美。现在正流行全景图片大大小小网站上都会用到全景图片。使用全景图给人一种舒服的视觉感受。能够提升网站的美观程度。
D区域是教务信息区。 发表各种有关教务类的信息。区域 师资力量介绍，
介绍老师及附上图片。
E 区网站最新动态区域。 最近在系发生的最新鲜的新闻，消息等内容都
在这里按时间循序显示。
F区域 中间区域的图片，为什么在网页中间放置图片呢？
是因为我们考虑到如果一个网站文字内容区域特别多，总体结构看起来
很乱没有主次层次的体现。让读者看起来无从下手的感觉。而且文字内容太多容易引起用户的反感。插入中间的图片就好比中间挖了一条河一样既能解决网站过于枯燥，也提升网站的美观度。
H区域 成果展示。
J区域 底部logo 整个网站的底端。能起到调节整个网站的内容平衡。
让网站设计的更加完美。
25