沪江网校8周年Mini-site设计总结

2017年5月，沪江网校再次迎来属于自己的8周年活动。今年的主题是“探索学习新大陆”~而这一次设计师真的给大家造出了一座大陆——学习第八大陆！网页设计组部全体同仁也再次挑战自我，勇（花）于（式）创（作）新（死）。在此，选取8周年庆项目中个人负责的Mini-site的风格思考和设计过程给大家。

活动主题：沪江网校8周年 探索学习新大陆
活动时间：2017.5.8~5.31

【创意推导】

沪江网校8周年主题是“探索学习新大陆”，整体线上活动由“学习新大陆”minisite主会场作为楔子，搭配“课程学完 全额返还”主营销页面与各项目分会场搭配呈现。区别于以往的营销页面靠促销信息与产品吸引吸引用户点击进入下级页面，本次专题呈现只靠内容进行分流，通过脑暴，团队首先确定两点：

1 契合大陆主题，以往营销设计中作为主角的氛围类设计元素要减轻，转而需要通过具象的物品或者环境来体现语种或者项目特点。

2 大陆概念在视觉设计时，需要弱化以往专题的主题视觉元素（人物），而学习这一属性在缺少人物主体表现的时候，必须通过趣味性的其他元素作为填补。

根据以上两点，“大陆城市”、“趣味”成了这次设计的核心关键字。围绕这个里面，设计师开始了作为造陆工匠/城市规划师的工作：以学习居民作为服务对象，以大陆探险作为撬动点，将节日狂欢和浏览会场信息挂钩，用一个体现学习精神的游戏场景串联，展现沪江网校8周年信息。

【Minisite视觉总结】

设计师们在确定以上设计基调之后，就紧锣密鼓地开展主专题的制作！

【1】整理专题信息层级

minisite承担的主要目的是集合展示资讯、传播内容。专题共需露出24个信息点，进行梳理可以分为四大类，其中最主要突出“课程学完  全额返还”的营销信息，之后是各会场与活动的出口。在视觉单位上划分，按照重要层级将一级、二/三级、先行级分为三大层级呈现，限制于专题篇幅限制，大陆设置5个板块来罗列。

【2】确定专题呈现风格

在确定专题风格时，主要为解决三个问题点来考量：

1  制作周期：如此复杂的项目制作开发周期只有一个月（包含开发与测试时间）
2  修改频率：设计完毕后需要和业务方进行确认，业务变动风险高，需要快速响应
3  画面效果：在保证时间的前提下，尽最大程度完善细节、打磨设计品质

 

同种“城市”类型的活动比较知名的活动案例有淘宝双11天猫城以及一些手机游戏，在搜集了许多优秀案例进行脑暴后，发现主要趋向于两种类型并比较优缺点：

 

1  扁平-正视风格：制作比较简单，但是空间大小与位置感知不明确，在庞大的信息呈现上表现力较弱
2  三维-透视风格：耗时巨大，修改难度大，但是氛围感强烈、生动

 

很自然的，最后折中决定采用平面技法塑造3d立体视觉效果，也就是2.5D平行透视表现手法。

【3】风格定位

确定8周年活动风格基调，需要考量品牌调性、学习属性、业务导向三个维度。

1 品牌调性：沪江网校所带给用户亲和，向上的特征

2 学习属性：积极、专业、智能的学习平台

3 业务导向：凸显大促活动的热闹氛围

落地到本次8周年本身的调性——学习新大陆，结合适用于线上页面的2.5D视觉表现，得出了以下风格基调：奇幻学习大陆的节日盛宴，学习者们的狂欢大趴。

【4】风格解析

具体到学习新大陆的搭建，回归到视觉层次主要是搭建空间感，细节涉及到尺寸、方位、布局、元素；从视觉层面分析主要从造型、配色、氛围三方面拆解。

1 造型：用户能感知、具有语种或项目特色

2 配色：明快清新、国家代表色

3 氛围：趣味性、节日氛围、人群狂欢

【5】执行过程

考虑主专题巨大的设计工作量，所以在设计过程中必须采取分工协作的方式同时制作。考虑到每个设计师的制作方式不同，所以如何通过一种方式使得大家所负责的部分能够保持同一调性，就成了这次的设计的关键。

在实际方法中，全组设计师通过总分总的分工方式：

总：由主负责设计师进行整个大陆规划与建筑的草图绘制

分：分发给其他设计师同时绘制；同时段，主负责设计师完成余下部分，兵分两路

总：最后再回到主设计师进行统一的调整和优化（包括光影、位置、风格、色彩等）。

最终才保证一周的工作时间内完成如此工作量的设计工作（主负责设计师1名+建筑绘制部分：3名设计师+氛围位置部分：1名设计师）。

2.5D平行透视的大陆建筑搭建方式，遵循以下5大步骤：

1 确定3D角度 & 明暗关系

2 绘制最基础的单元建筑

3 布局主要元素

4 穿插次要元素

5 丰富氛围元素

【6】头图制作

5月庆祝网校8周年，同时沪江网校的代言人也千呼万唤使出来。但是由于代言人的拍摄素材定稿时间与设计工时两方面考量，本次主专题头图部分在制作顺序上与大陆的搭建进行了调换。

头图设计遵循三个原则：大陆环境延续 / 2.5D角度延续 / 代言人形象露出

最终，经过全组设计师的同甘共苦~~O(∩_∩)O~~终于完成了本次“探索学习新大陆”的主页面设计！

【项目分会场视觉延续】

此次分会场的设计较以往有很大不同，弃用了一直沿用的人物+项目素材的形式，而是沿用并放大主专题中出现的大陆建筑作为主体，在页面间的相互跳转与引流时极高地保持了风格的延续与统一。

相较于以往的专题呈现，形式上完美还原设计形式、在秩序与呈现上达到了高度的统一。

【图】分会场头图模板

【图】分会场头图集合

【项目总结】

设计师们本次“探索学习新大陆”项目上共同协作、大胆尝试新风格，突破一贯的风格限制，让用户感受全新的沪江网校8周年。总结本次所沉淀的经验，包括：

1 2.5D平行透视风格三大概念：透视空间、明暗关系、单元大小

在minisite与其下级分会场页面，通过统一视觉元素，保持整体视觉的统一性与延续性、保证信息传递的流畅性与一致感。

2 兵分两路、同时开工

由于制作时间紧张，所以由一名主设计师绘制草图与布局整体页面，同时段其他辅助设计师精细绘制，双方同步进行，极大提升效率；但是制作时考验设计师之间对于整体风格的把握与细节把控。

3 风格延续、适时变形

虽然设计上需要保持延续性与统一感，但在遇到不适合的情况下，从目的出发，考虑与使用场景、氛围匹配的视觉，结合当前视觉进行适当变形。

当然，在制作中受到时间与业务限制，设计上有许多提升空间，包括

1 跳脱常见设计元素（比如法国=铁塔、凯旋门），寻找更多元、有趣的项目或语种代表元素；

2 由于角度不是平视，导致字体信息变形，阅读上存在障碍，未来需要进一步提高信息的可阅读性;

3 虽然本次得到了前端小伙伴的大力支持，基本做到使专题动起来，但是由于一开始没有通盘考虑，所以动画的丰富度与连贯度还有很大提升空间