“433”学生成长平台前端设计与开发

高天栋 王鹤颖 王葉萍 李时颖

摘 要：本文主要描述“433”学生成长平台”的前端设计与开发，重点探讨从需求分析到页面逻辑与网站业务逻辑的梳理，網站视觉表现，前端页面的设计和实现过程。

关键词：433;UI;设计;前端技术

一、引言

"433"学生成才工程是苏州经贸职业技术学院助力学生成长成才的系统工程。通过指导每位学生担任1任干部、参加1个社团、组织1次班级或学校活动、培养1项专业特长;为学生搭建锻炼的平台，全面提升个人素养;指导学生结对1名技能导师，明确1个技能培养方向，参加1次技能比赛，培育学生核心技能;指导学生加入1个创新创业团队，完成1次创新创业实践，取得1项创新创业成果，培育学生创新精神。

433”学生成长平台是服务于"433"学生成才工程的信息化平台。本文主要介绍该平台前端部分的设计与主要网页的主要部分实现过程。

二、需求分析

网站正式开发前，我们通过与学生工作各相关部门对接，明确需求，得到如图1-1的需求分析。通过需求分析，明确整个433成长成才信息平台的基本构成主要包括：形象展示页、注册登录页、网站首页、成才典型页，433心得体会页，433活动页，成才护航页。

三、视觉设计

网站功能结构明确后进行视觉设计，明确网站基本配色方案，logo，相关布局要素，制作相关素材，为前端开发提供基础物料。

由于网站主要服务于学生，主题风格设定为活力清新，最终将网站主题色设定为活力橙，色值为#f47b04。

Logo作为网站的主要视觉标识应该是网站主题形象的符号化凝练，由于“433”这个原创概念很好的概括了成才系统工程的特征，数字元素本身也是很好的视觉设计元素，logo设计提取“433“字样作为主要视觉元素，在整体扁平化的设计风格基础上，通过强调阴影和叠压效果增强其视觉表现力。tab标签等元素等均保持统一的视觉风格。

网站logo、主要tab标签、登录表单的设计如下图所示：

图2-1为logo设计，将“433”字样作为视觉元素，主题风格为扁平风格。通过强调阴影增强了视觉元素间的空间叠压关系，增强了视觉趣味。

图2-2为主要tab标签设计，设计沿用了主视觉元素增加标签的辨识度，同时增加主色调的明度在色彩上形成深浅两个视觉层次。

图2-3为登录表单设计，为增强网站整体视觉的统一性和视觉表现的趣味性。表单登录页面将logo作为图案进行运用。并将表单设计为卡片，用阴影进行凸显强调。

主导航设计

主导航为网站的访问提供了总入口。同时也是最重要的视觉元素之一。

图2-4为主导航设计。

主导航采用非常简洁的线性设计，导航条与logo一起组成了页面布局的top部分。导航的点击效果设计为带有立体感的凹陷效果，与网站logo强调阴影的处理协调统一。

四、前端静态开发概述

完成前一阶段的需求分析与网站功能设计、视觉设计部分的工作后，网站就进入了具体开发的阶段。由于前端静态开发与数据库，后台管理等网站部分的开发相对独立。本文主要探讨前端静态开发中的一些重要环节与技术要点。

1.网站页面主要布局

网站主要页面布局设计如图3-1所示。

网站首页是访问者获得主要信息和形成对网站整体印象的关键页面。首页的导航栏集成了网站所有功能的访问链接。考虑到新闻和活动是内容最丰富，更新动态最多的部分，所以作为首页的主展示区。其他功能都独立展示在其他页面。

首页的结构非常简单，主要结构构成如下：

<img src="../images/icon.png" width="150px"/>

<ul class="fix"><li class="nall"></li>……

<li><a href="https：//www.szjm.edu.cn/" target="_blank">学院首页</a></li></ul>

<form><input type="search"/></form>

新闻区和活动区主要使用自定义列表dl：

<p class="sec1">新闻</p>

<dl class="xin"><dd></dd><dt class="news"><a href="#">MORE>>

></a></dt>

<dt>信息技术学院举办“翰墨书华章 丹青颂党恩”书画比赛</dt>

<dt>“逐梦新时代 奋进新征程”……

</dt></dl><p class="sec2">最新活动</p><dl class="play"><dd><p class="move"></p></dd><dt>信息技术学院暑期志愿者招募……</dt></dl>

2.导航调的凹陷效果实现

导航条的凹陷效果主要采用的是hover伪类技术，设置方法如下：

.fix a：link，.fix a：visited{  color：#FFF; background-color：#F90; padding-top：6px; }

.fix a：hover{

color：#FFF; background-color：#F90; padding-top：6px;

box-shadow：0px 0px 20px 0px rgba（204，51，0，0.8） inset;

transition：box-shadow 1s linear; }

3.注册登录页面开发

注册登录页面的主体是一个表单，基于盒子模型设计在卡片效果的块状元素上层。表单样式主要设定卡片的阴影效果和表单组件的色彩与形状：

form{ width：300px; height：300px; background-color：#FFF;border：1px #FFF solid; border-radius：10px; color：#CCC;

input[class^="bt"]{ width：56px;height：36px; border：#FFF 1px solid; background-color：#F90; border-radius：10px;color：#00C; font：normal bolder 12px/18px "微软雅黑"; text-align：center;}

.zh{ background-color：rgba（255，153，0，0.2）; border：#FFF 1px solid; border-radius：5px; }

.mm{ background-color：rgba（255，153，0，0.2）;border：#FFF 1px solid; border-radius：5px; }

4.成才典型页面与翻转动画效果实现

成才典型頁面以翻转立方体的展示方式展示成才典型的个人形象与主要成果。增强了视觉趣味性。当鼠标点击图片时，图片会出现上下翻转，翻转效果使用了h5的动画技术。主要实现方法为将翻转前翻转后的图片设置在一个div标签中，通过hover伪类控制显示隐藏和移动参数，关键设置如下：

.no1{background-color：rgba（0，102，204，0.4）;transform：rotateX（90deg） translateZ（130px）;  }

.no2{transform：translateZ（130px） translateX（0px）;}

.pic li：hover{transform：rotateX（-90deg）;}

5.成才体会页面的设计与实现：

为了增强文字部分在视觉效果上的整体感，在文字背后增加了一个淡蓝的色块，在色系上也形成了良好的近互补关系，平衡了橙色的跳跃感。

个人图片展示鼠标放上去时才会显示清晰效果。增强了页面的统一感和访问的趣味性。主要实现方法是通过鼠标点击时更改图片不透明度的伪类设置实现该效果。

实现方法为：

dt.p1{background：url（../images/xz.jpg） no-repeat center;

background-size：cover;}

dt.p2{background：url（../images/xz2.jpg） no-repeat center;

background-size：contain;}

dt{ float：left;width：220px; height：220px; border-radius：50%;

background-color：#FC9; opacity：0.5; border：#F90 10px solid;

box-shadow：5px 5px 20px 0px #CCCCCC; margin-left：10px; margin-top：50px; }

dt：hover{opacity：0.8;}

五、结语

本文较为详细的描述了网站从需求到视觉到具体的前端页面的设计开发过程和一些重要的前端技术实现。笔者认为本项目具有一定的典型意义，可为同类项目提供一些参考与借鉴。

参考文献：

[1] 陈鹏， 程勇.WAMP项目开发实用案例[J].科学出版社，2017，（2）：33-48。

[2]曹刘阳.编写高质量代码：Web前端开发修炼之道[M].北京：机械工业出版社，2010.

[3]刘春华.基于HTML5的移动互联网应用发展趋势[J].移动通信，2013（09）：64-68.