正在阅读：教育机构网站页面的设计思路及步骤详解教育机构网站页面的设计思路及步骤详解

　　作为一家教育机构，没有什么比利用学生与黑板的元素来设计网页横幅更适合了。黑板加上一些手写字体，便形成了一个简单但却极具吸引力的视觉焦点。本文通过一个实例来探讨设计一个黑板样式的网页横幅所涉及的各种挑战，也让我们再一次感受学校的岁月离我们又远了。

图1

　　Next Play咨询集团是一家主要面向公立学校进行学校课程以外的补充教育。公立学校一般的教育重点只是帮助学生如何应付各种各样的考试和测验，而Next Play则教导学生将一些理论知识应用到实际的生活中——让学生掌握求职的各种挑战、涉足社会时如何理财等等。真是一个朝阳行业。

　　你如何将这些想法通过网站向学生宣传？直接通过用黑板的形式表达出你的观点！观看的人一眼就知道你是一家关于教育的机构，你的宗旨是什么，你的服务对象是谁，都一目了然。而且黑板能够形成一个效果非常不错的视觉焦点。

　　让我们看看如何设计这样的网页。

图2

醒目、熟悉的元素，而且人物还与标志相配合：

　　就算你在上课时经常打瞌睡，但如果有人在黑板上写上一些东西，还是会吸引你的注意力的。这是一个人人都熟悉的视觉焦点，用在网页上同样能够发挥相同的效果。

从上面开始：

　　重点是这个黑板的宽度要与占据整个网页的宽度，以确保观看的人能够首先阅读黑板中的文字。手写字体能够立即融入故事的内容，并引导观看下方的正文。

图3

　　黑板样式的网页横幅是一个强有力的视觉元素，我们对黑板的视觉联系都非常熟悉，毕竟我们都曾经无数次看着它度过我们的青春。黑板本身就具有尺寸大、醒目（黑白强烈对比）的视觉特性，而且，它还放在最上面。在这个背景中，NEXT PLAY用文字及图片向观众作介绍。一个学生拿着粉笔明确无误地给人一种教室的感觉，而且上面这一句关于机构的“我们是谁”及“我们是做什么的”从下方正文中抽离出来被单独放在上面，可想而知，如果仅是出现在下方的正文中，它只会淹没在文字中。

主题延续：

　　这个黑板样式的横幅出现在每一个页面中，但每一页都有不同的学生及信息，而全部加起来，则传达了一种强有力的个性及共性。

图4

　　没有什么东西比人的脸部更能吸引别人的注意力。微笑的表情传达出一种友善、真诚、好感的信息。要确保在其中有不同的人物变化。

图5

如何制作这个横幅？

　　1、选择一张照片，单独将人物取出，去掉黑板的背景。

图6

　　2、烘托出人物：我们在这里将她放在右边(为此我们只能让她做一回左撇子了)，然后画一个矩形的“黑板”，其宽度与网页宽度一致，然后填充上非常深的灰色（约98%）。而在下方画一下高度很小的矩形作为导航栏，填充全黑色。

图7

　　3、逼真：一个干净的黑色区域当然就已经可以传达出一个黑板的感觉，但感觉并不是非常真实。你可以通过一些滤镜将黑色区域故意弄得有画痕的感觉（这里是采用www.misterretro.com网站Machine Wash中的“abrasive(研磨)”滤镜），当然，你也可以不用这样大张旗鼓，直接利用一个真实的黑板照片放上去也行。

图8

　　4、增加文字：在上面增加一行手写体字体就基本完成了。下方还有一行小文字，这一行文字设成灰色，因为它是辅助信息。将其中的公司名设为绿色，既增加吸引力，又平衡了整个设计。

图9

设计整个网页：

　　博客风格的三纵列结构是一种有效的信息组织方式。主要的信息占据左边宽的一列，而一些辅助信息则占据右边的两列。

　　结构：整个页面由六个区域构成，区域由大至小，其顺序是非常重要的。留意导航栏（模仿真实的文件索引卡片，见图10）、页脚及最下方的联系信息都是固定的，不随页面的不同而不同。

图9

图10

　　延续：我们已经将页面的主要元素及框架弄好，是时候增加细节了。我们要借用一下标志来帮助考虑细节的问题。因为标志比网页具有更持久的特性，我们要利用到标志的字体、颜色及其细节来设计网页的其余部分。

　　观察标志：标志上的一些特性会决定网站上的细节。首先第一步我们要来一次标志大检阅。特别留意字体、颜色、线条及形状。

图11

　　颜色：草绿色传达出一种活力、张扬、温暖及青春的气息。这些与我们的目标对象——学生的性格是符合的。选择这种颜色无疑是正确的，但如果太多了（左）则显得很不明智。因为NEXT PLAY与下方的咨询公司文字混为一体，分不清轻重，我们将下方的文字设为深色。

图12

　　角度产生动态：当将两个字母连接在一起时，你当然希望其边缘是具有相同的轮廓（左所示），但因为X和T具有不同的边缘，保留一个倾斜的间隙同样可以达到结合的目的。

图13

图14

　　字体：Futura粗黑字体具有典型的美式风格：清晰，粗壮，而且结构简单。线条笔直，圆角位近乎正圆弧线。用在标志及一些简短的标题上，可以将字母的间距缩小——字体越大，间距越小，字母间可以重叠及紧靠。

图15

　　形状随距离不同而变化：如果从远处看（下图灰色标志），Futura粗黑大写字母构成了一个简单的矩形，而且整体显得干净整洁。如果近看，我们可看到其负空间是一个充满活力的互动空间，也可以很容易辨认那些圆形轮廓。

图16

　　将我们观察所得的标志元素应用到整个网页上：

图17（+点击上图查看大图）

　　不要忘记还有页脚：一向谦卑的页脚往往放着一些非常重要的联系信息文字，而且也发挥着一个视觉支撑点的作用。不要轻视它。

图18

图19

　　你想发布一些电子通讯刊物来推广你的网站？采用同样的结构即可！

图20

　　同样的外观，只是变小一些：

　　同样的字体，同样的颜色，同样的那块黑板，同样的版式，只是小了一些（大约540到600个像素的宽度），不需要用到页脚。事实上，你用这个版式设计纸质平面单张又何尝不可？

　　本文所用颜色数值：

图21