商学院官网的课程页，第一屏该先给定位还是先给结构？

做课程页的时候，最容易犯的一个错是把第一屏当成介绍栏。课程讲什么、几门课、多长时间、学费多少，一条条排得很整齐，看上去信息充分，读完却不知道这门课跟自己有没有关系。读者在第一屏找不到自己，就退回去了。

中欧国际工商学院的官网升级里，十余门课程各有独立的 VI 色彩，也各有各的招生对象。有人刚工作五年，有人已经带团队十年，有人来自海外，需要跨区域的课程与校区信息。同一屏要接住这几类人，取舍就必须提前做完。

COMMA咖墨在这个项目中承担品牌梳理、信息架构、视觉规范、交互逻辑到前端落地。下面从页面层的几处取舍讲起，说明这套规范最后是怎么落在一屏上的。

一屏能放的东西有上限。上限不是分辨率，是注意力：放三样，读者能读完；放六样，只记住最上面那样。

所以课程页的第一屏必须先做一个决定：这一屏用来确认资格，还是用来展示内容。中欧国际工商学院的十余门课最终都选了前者——课程页首先不是一份课程介绍，它首先是一次资格确认。案例页把这一转向写成「从品牌展示转向围绕招生转化组织入口」，落到页面上就是资格信息先出现，这也是这次官网改版升级最先落下的一处判断。

定位信息通常只有两三行：面向什么阶段的管理者、需要几年工作经验、用什么语言授课、在哪个校区。这几行决定读不读下去。设计上有个细节反复被验证：这几行放在标题下方紧邻的位置，比放在右侧信息卡里有效得多。

结构信息适合放第二屏。课程模块、学制安排、师资构成，这些是读者确认资格之后才关心的问题，放早了没有用。官网信息架构的顺序，就藏在这两屏之间。

项目统一的五件事是色彩、字体、版式、层级、空间节奏。听起来抽象，落到一屏上都是具体的：

只出现在两处，一是课程识别色，二是交互状态色。识别色不做大面积铺底，只做标记——标题前的一条色块、导航里的一个点。

分三级，标题、正文、注释各一级，各级的字号与行高是固定值，不随页面内容浮动。十余门课共用同一套字阶，页面之间才会读起来像一家。

给的是栅格与间距，不是具体布局。骨架管到这里就够了，再往下管，课程页就会失去各自的表达空间。

由字号、色重、留白共同决定，三者只允许同时调，不允许单独调。单独调字号会破掉节奏，单独调留白会破掉密度。

是最容易被忽略的一件。首屏与第二屏之间的留白、段落之间的距离、图片与文字的边距，这些数值统一之后，页面才会有呼吸感，而这种呼吸感是跨页面传递的。

这是整个项目里最省事的一条分工。如果色彩还能改排版，那么每加一门课就多一套规则；规则一多，官网就从系统退回成拼贴。反过来，色彩只负责一件事——看到这个颜色，知道这是哪门课——排版就稳了。

案例页的原则表述是「多元统一、秩序井然、质感上乘」。三个词对应三层：多元统一是色彩层，秩序井然是版式层，质感上乘是细节层。品牌视觉一致性真正难的地方，是让这三层各管各的，不要互相越界。

越界的典型症状是：某门课觉得自己的色彩不够突出，要求标题放大两号；另一门课跟进；半年之后，十个课程页有十套字阶。这不是设计能力问题，是规则没有分层，也是商学院官网设计里最常见的返工原因。学院按项目分工，每门课一套视觉；只要这一套分工还在，课程页的取舍必然在每开一门新课时重来。

课程页上的图大致分三类：氛围图、证明图、说明图。氛围图承担第一印象，取景要统一，色调要能对上骨架，不能每门课各拍一种情绪。说明图是结构、流程、数据关系，它必须和版式同一套栅格，否则页面会显得有两套秩序。

这也是 COMMA咖墨在这套规范里反复强调的一条：统一的是取景规则，不是画面本身。品牌官网设计里的图片规范，落到最后都是这一句。

课程页的视觉密度，很多人会往「丰富」的方向加：加边框、加卡片、加图标、加动效。加完之后画面确实满了，但读的人反而找不到起点。

真正有效的做法是反过来的：先把一屏要做的事定成一件，其余全部下移。中欧国际工商学院的课程页，第一屏只留三样：标题、定位、一个入口。用户决策路径的第一段有多短，这一屏就该有多克制。留白不是没做完，是把注意力留给了那件事。商学院官网设计最容易做反的一处就在这里：把结构当诚意，把定位当广告。企业官网设计里同样的误判年年重演。

顺序上还有一层：先立骨架，再让课程色填进来。倒过来做，等于让十个色彩先各自提要求，骨架永远立不起来。

COMMA咖墨在项目里先把五件规范写完，才让课程色进场。

从页面层往上看，这套取舍回答的其实是官网信息架构的问题：先给资格，再给结构，最后给行动。顺序对了，风格才有地方落。

网站内容策划在这里的作用是提前把口径定死，否则每门课都会在文案里重新定义一次自己。

课程只有两三门、且共用一套视觉时，第一屏给定位还是给结构，差别不大，不必为此重做规范。课程之间的受众完全不重叠时，第一屏可以各按各的逻辑排，共用一套槽位反而限制表达。

还有两种情况值得先解决别的：品牌本身还没有稳定规范，先补规范；官网主要服务校友与内部信息发布，先修内容维护流程。