公众号招新总结

• UI设计

颜色：调性一致

人脑对于色彩的记忆度要高于形态，所以在界面设计中首先就是要运用好颜色，才能给用户带来流畅的体验。

团队的LOGO为蓝底白字，所以整体页面采用蓝色#1296db，仅以招新页面的表单来看，不需要辅助色更为正式，避免过于花哨。

格式：对齐底线

图标：风格统一

图标是设计中必不可少的基础元素，图标需先确保满足基础功能性和识别性。在满足以上两点之后，图标设计时还应融入设计特点，同时保持风格统一，营造良好的用户视觉感受。日常使用的图标类型有：线型、面型，线面结合型三种。我使用的是线型，因为它仅仅起到辅助文字说明和避免大段文字枯燥的作用，而不具备功能性需求（如点击选中或跳转）。一般来说，面型图标冲击力过强，容易吸引用户注意力，干扰用户选择。线型图标则完全弱化，仅装饰作用。线面结合型则可以通过面型点亮增强选中效果，如淘宝底部图标。推荐一个用起来比较全的图标库网站：

 http://www.iconfont.cn/

可以来这里找到适合你的设计需要的图标，微博登陆即可下载包括png/ai/svg格式各种颜色的图标。

• 自适应问题

目前常用的电脑端有  window、mac、Linux. 检测这三个我们可以这样做：

判断PC和移动端可以这样：

这样区分开PC和移动端后，就可以在if\else里面作页面自适应的调整，比如上传照片和上传成绩单模块，移动端如果同PC端一样会过于拥挤，可在else{}里面重新给它定义位置。

在js里面修改样式的方式可以考虑以下两种：

document.getElementById("major").style.width = "64%";
$("#content").addClass("box-shadow");    

•  表单验证

           表单验证帮助我们确保用户以正确格式填写表单数据，确保提交的数据能使我们的应用程序正常工作。分为客户端验证和服务器端验证。客户端验证发生在浏览器端，表单数据被提交之前，这种方式相较于服务器端校验来说，用户体验更好，它能实时的反馈用户的输入校验结果，这种类型的校验可以通过下面这些方式实现：

JavaScript 校验，这是可以完全自定义的实现方式；

HTML5 内置的校验，这不需要 JavaScript ，而且性能更好，但是不能自定义校验过程。

服务器端校验则是发生在浏览器提交数据并被服务器端程序接收之后 —— 通常服务器端校验都是发生在将数据写入数据库之前，如果数据有错误，则会直接从服务器端返回错误消息，并且告诉浏览器端发生错误的具体位置和原因，服务器校验不像浏览器端校验那样有好的用户体验，但是对于服务器端应用来说，它又是必须的 —— 这是你能保证数据正确性的最后一步了，在这之后，数据将被持久化至数据库。当今所有的服务端框架都提供了数据校验与清洗功能（让数据更安全）。

在真实的项目开发过程中，开发者一般都倾向于使用客户端校验与服务器端校验的组合校验方式以更好的保证数据的正确性与安全性。招新页面即采取了这种方式。

这里推荐一个详细介绍html5表单验证的网站：

https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms/Data_form_validation

       在自己实现简单的表单验证时，可以参考以下部分(综合利用正则表达式)：

• 善用插件

善用前人的优秀插件不仅能缩短你的开发时间，还能提升界面UI效果，何乐而不为呢！关键是善于选择符合需求的插件，必要是可以改写config文件来贴合个性化需求。这里推荐一个前端jquery插件库：http://www.jq22.com/jqueryUI-1-jq

关于前端部分如何快速上手，以招新页面使用的上传文件插件为例：Webuploader

在需要使用的html上引用：

在对应的js文件里初始化方法：

具体可阅读官方开发文档http://fex.baidu.com/webuploader/doc/index.html