作者主页:编程指南针
作者简介:Java领域优质创作者、CSDN博客专家 、掘金特邀作者、多年架构师设计经验、腾讯课堂常驻讲师
主要内容:Java项目、毕业设计、简历模板、学习资料、面试题库、技术互助
收藏点赞不迷路 关注作者有好处
文末获取源码
项目编号:BS-XX-174
一,项目简介
随着人类社会的发展,特别是中国加入WTO,竞争越来越激烈,各种企业都将面临巨大的挑战,只有企业的每个新员工都能快速的入职到企业中对应的最合适的工作岗位上时,企业才能在如今竞争压力的浪潮中处于不败之地。而且另一方面,在如今人才辈出、快速发展的时代,企业对新员工的质量以及数量的渴望越来越大,需要及时的去补充新鲜血液,掌握更多更好的技术型人才,达到新员工能快速入职工作,为企业快速带来利益的要求。所以,企业对于新员工的入职的效率越来越受到各个企业领导的重视。日前大多数中小企业的新员工入职管理,都是采用传统的人工入职管理模式,这对于规模较小的企业来说,是可以应付日常的新员工入职管理需求的。但是采用人工管理模式,难免会发生一些不应该发生的错误,比如:把新员工与入职的部门搞错、新入职的员工质量不过关、漏发一些新员工入职的通知,导致企业错失一些技术型人才等等问题。
另一方面,随着计算机技术的飞速发展,计算机在企业管理中应用的普及,利用计算机实现一个对新员工入职管理操作势在必行。因此,开发一套完善的基于中小型企业的新员工入职管理系统就成必不可少了。这个系统能把新员工入职流程管理、企业对相关部门的管理、部门对新入职员工的管理、部门对入职通知的管理等统一结合起来,提高企业对新员工入职管理的效率。使用本系统,不仅使公司更加方便的管理新员工入职到最合适的相关部门,也减少发生新员工重复入职,入职错误的概率,尽量避免不应该发生的事情。最终使企业的新员工入职工作更加系统化、规范化、白动化,从而达到提高企业新员工的入职效率,部门管理效率和给企业快速带来丰厚效益的目的。
下面是本系统设计的功能结构图:
企业新员工入职系统提供了角色管理、系统管理员功能、部门管理员功能、普通用户功能。角色管理包括系统管理员、部门管理员、新员工;系统管理员功能包括基础数据管理、部门管理、数据管理;部门管理员功能包括注册、登陆、定义部门入职流程、发布部门入职要求、收集入职材料、下发入职通知;普通用户功能包括注册、登陆、查看入职通知、提交入职材料、入职交接。
本系统初步分为两个部分,面向用户的前台系统,面向管理的后台管理系统。前台系统为用户提供了注册、登录、查看入职通知、提交入职材料、入职交接的服务,而后台管理系统为管理员提供了角色管理、系统管理员功能、部门管理员功能。分为以下几个功能模块:
(1)角色管理模块:该模块包括系统管理员、部门管理员、新员工三个功能,企业可以自定义员工的权限,便于企业对员工的管理。
(2)基础数据管理模块:该模块包括主页查看用户数量、招聘岗位数量、部门数量、查看公告信息、用户查看和修改个人信息、修改密码、退出功能,属于基本的数据管理操作。
(3)部门管理模块:该模块属于系统管理员功能,系统管理员可以对部门进行增删改查操作。
(4)数据管理模块:该模块属于系统管理员功能,系统管理员可以查看新员工入职的数量、所属部门,可以对新员工进行增删改查。
(5)登录注册模块:该模块用于用户的登录、注册,用户注册成功后便可以进行登录操作,用户登录成功后可以进行新员工入职材料的提交、入职通知的查看等等一些基本功能。
(6)定义部门入职流程模块:部门管理员可以自定义部门入职的流程,使部门入职管理更加层次化、鲜明化。
(7)发布部门入职要求模块:部门管理员可以发布部门的入职要求,其中包含所属部门以及该部门的一些相关的入职要求,方便企业更好的找到最合适该部门的技术型人才,也方便了新员工对于想要入职部门的要求的了解,能够准确快速的做出最好的入职选择。
(8)收集入职材料模块:部门管理员可以收集新员工提交的一些入职材料,以此来审核哪些新员工符合该部门的入职要求。
(9)下发入职通知模块:若该新员工提交的入职材料通过了审核,则由部门管理员下发入职通知,通知该新员工已经通过了该部门的入职审核,可以准备入职交接,进入该部门进行工作了。
(10)查看入职通知模块:普通员工可以通过查看邮箱中部门管理员下发的邮件来查看部门下发的入职通知,查看自己是否成功通过审核,并且进行入职交接。
(11)提交入职材料模块:普通员工可以输入自身的信息,比如电话、地址等,然后可以对自己想要入职的岗位进行提交入职材料,比如投递简历等,这样能够更好的让部门管理员认识你、了解你、赏识你,能够大大的提高你的审核通过率。然后点击提交按钮进行提交给部门管理员进行审核。
企业新员工入职系统服务于市场上的一些企业和公司,要尽可能的满足企业与公司对于新员工快速入职的要求,所以用户访问数据量一定会很大,而大量的访问数据就需要对系统的软件以及硬件有着比较高的要求,为了保证企业和公司能更快更好的找到合适自身的人才,企业新员工入职系统需要具备高稳定、高性能、高访问的特征。图4-1系统架构图:
图4-1 系统架构图
二,环境介绍
语言环境:Java: jdk1.8
数据库:Mysql: mysql5.7
应用服务器:Tomcat: tomcat8.5.31
开发工具:IDEA或eclipse
后台开发:Springboot+Mybatis
前台开发:Vue+ElementUI+Nodejs
MVC设计模式
三层架构
三,系统展示
角色管理
权限分配
基础数据管理
数据管理
制定岗位
部门管理
登陆注册
部门入职流程管理
入职要求管理
收集入职材料
四,核心代码展示
package com.imnu.springboot.controller;
import com.baomidou.mybatisplus.core.conditions.update.UpdateWrapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.imnu.springboot.entity.Department;
import com.imnu.springboot.entity.Requirement;
import com.imnu.springboot.entity.User;
import com.imnu.springboot.exception.ServiceException;
import com.imnu.springboot.mapper.RequirementMapper;
import com.imnu.springboot.service.IDepartmentService;
import com.imnu.springboot.service.IRequirementService;
import com.imnu.springboot.service.IUserService;
import com.imnu.springboot.utils.TokenUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.mail.SimpleMailMessage;
import org.springframework.mail.javamail.JavaMailSender;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.Date;
import java.util.List;
import java.util.Objects;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.imnu.springboot.common.Result;
import com.imnu.springboot.service.IResumeService;
import com.imnu.springboot.entity.Resume;
import org.springframework.web.bind.annotation.RestController;
/**
* <p>
* 前端控制器
* </p>
* @author
*/
@RestController
@RequestMapping("/resume")
public class ResumeController {
@Resource
private IResumeService resumeService;
@Resource
private IRequirementService requirementService;
@Resource
private IUserService userService;
@Resource
private IDepartmentService departmentService;
//从配置信息中拿去发送邮件人的信息
@Value("${spring.mail.username}")
private String from;
//映入发送邮件的类
@Autowired
JavaMailSender javaMailSender;
//新增或者更新
@PostMapping
public Result save(@RequestBody Resume resume) {
//获取用户名,邮箱号,部门id,岗位id
String nickname = TokenUtils.getCurrentUser().getNickname();
String email = TokenUtils.getCurrentUser().getEmail();
Integer id = resume.getId();
//根据岗位id查询岗位信息
QueryWrapper<Requirement> queryWrapper = new QueryWrapper<>();
queryWrapper.eq("id",id);
Requirement one = requirementService.getOne(queryWrapper);
String post = one.getPost();
Integer depId = one.getDepId();
//设置用户名,邮箱号,部门id,岗位信息
resume.setNickname(nickname);
resume.setEmail(email);
resume.setDepId(depId);
resume.setId(null);
resume.setPost(post);
resume.setState("待审核");
resumeService.save(resume);
return Result.success();
}
//审核通过更改状态
@PostMapping("/statePass")
public Result saveStatePass(@RequestBody Resume resume){
//获取申请岗位名称
String post = resume.getPost();
//获取岗位信息
QueryWrapper<Requirement> queryWrapper2 = new QueryWrapper<>();
queryWrapper2.eq("post",post);
queryWrapper2.isNull("u_id");
Requirement one2 = requirementService.getOne(queryWrapper2);
//根据用户名去修改用户身份
String nickname = resume.getNickname();
QueryWrapper<User> queryWrapper = new QueryWrapper<>();
queryWrapper.eq("nickname",nickname);
//获取用户信息
User one = userService.getOne(queryWrapper);
//修改用户身份
one.setRole("ROLE_DEP_USER");
userService.updateById(one);
//拿去部门id
Integer depId = resume.getDepId();
one.setDepId(depId);
//修改用户部门id
userService.updateById(one);
//拿去岗位信息
Integer id = one2.getId();
one.setPostId(id);
//修改用户岗位id
userService.updateById(one);
//拿去普通员工电话信息
String phone = resume.getPhone();
one.setPhone(phone);
//修改用户电话信息
userService.updateById(one);
//拿去普通员工地址信息
String address = resume.getAddress();
one.setAddress(address);
//修改用户岗位id
userService.updateById(one);
//拿去普通员工简历路径
String resume1 = resume.getResume();
one.setAvatarUrl(resume1);
//修改用户岗位id
userService.updateById(one);
//获取部门名
QueryWrapper<Department> queryWrapper1 = new QueryWrapper<>();
queryWrapper1.eq("id",depId);
Department one1 = departmentService.getOne(queryWrapper1);
String depName = one1.getDepName();
//发送邮件通知
String email = resume.getEmail();
//配置邮箱
SimpleMailMessage message = new SimpleMailMessage();
message.setFrom(from);
message.setTo(email);
Date now = new Date();
message.setSentDate(now);
message.setSubject("【欧世雄企业新员工入职系统】");
message.setText(nickname+"恭喜你,你已经成功被"+depName+"录取,请尽快前来报道!");
//进行邮件发送
javaMailSender.send(message);
resumeService.saveOrUpdate(resume);
return Result.success();
}
//删除
@DeleteMapping("/{id}")
public Result del(@PathVariable Integer id){
//邮件通知该员工已被开除
QueryWrapper<Resume> queryWrapper1 = new QueryWrapper<>();
queryWrapper1.eq("id",id);
Resume one1 = resumeService.getOne(queryWrapper1);
String email = one1.getEmail();
String nickname = one1.getNickname();
Integer depId = one1.getDepId();
QueryWrapper<Department> queryWrapper = new QueryWrapper<>();
queryWrapper.eq("id",depId);
Department one = departmentService.getOne(queryWrapper);
String depName = one.getDepName();
//通过邮件通知
SimpleMailMessage message = new SimpleMailMessage();
message.setFrom(from);
message.setTo(email);
Date now = new Date();
message.setSentDate(now);
message.setSubject("【欧世雄企业新员工入职系统】");
message.setText("您好"+nickname+",您未通过"+depName+"的考核,很抱歉未能成为我公司的正式员工");
javaMailSender.send(message);
//更改用户表信息
resumeService.removeById(id);
return Result.success();
}
//批量删除
@PostMapping("/del/batch")
public Result deleteBatch(@RequestBody List<Integer> ids){
return Result.success(resumeService.removeByIds(ids));
}
//查询全部
@GetMapping
public Result findAll(){
return Result.success(resumeService.list());
}
//根据id查询
@GetMapping("/{id}")
public Result findOne(@PathVariable Integer id){
return Result.success(resumeService.getById(id));
}
//分页查询
@GetMapping("/page")
public Result findPage(@RequestParam Integer pageNum,
@RequestParam Integer pageSize,
@RequestParam(defaultValue = "") String nickname){
QueryWrapper<Resume> queryWrapper = new QueryWrapper<>();
queryWrapper.orderByDesc("id");
if (!"".equals(nickname)){
queryWrapper.like("nickname",nickname);
}
Integer depId = Objects.requireNonNull(TokenUtils.getCurrentUser()).getDepId();
queryWrapper.eq("dep_id",depId);
return Result.success(resumeService.page(new Page<>(pageNum,pageSize),queryWrapper));
}
}
package com.imnu.springboot.controller;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import io.swagger.models.auth.In;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.List;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.imnu.springboot.common.Result;
import com.imnu.springboot.service.IRoleService;
import com.imnu.springboot.entity.Role;
import org.springframework.web.bind.annotation.RestController;
/**
* <p>
* 前端控制器
* </p>
*
* @author
*/
@RestController
@RequestMapping("/role")
public class RoleController {
@Resource
private IRoleService roleService;
//新增或者更新
@PostMapping
public Result save(@RequestBody Role role) {
return Result.success( roleService.saveOrUpdate(role));
}
//删除
@DeleteMapping("/{id}")
public Result delete(@PathVariable Integer id){
return Result.success(roleService.removeById(id));
}
//批量删除
@PostMapping("/del/batch")
public Result deleteBatch(@RequestBody List<Integer> ids){
return Result.success(roleService.removeByIds(ids));
}
//查询全部
@GetMapping
public Result findAll(){
return Result.success(roleService.list());
}
//根据id查询
@GetMapping("/{id}")
public Result findOne(@PathVariable Integer id){
return Result.success(roleService.getById(id));
}
//分页查询
@GetMapping("/page")
public Result findPage(@RequestParam Integer pageNum,
@RequestParam Integer pageSize,
@RequestParam(defaultValue = "") String name){
QueryWrapper< Role> queryWrapper = new QueryWrapper<>();
if (!"".equals(name)){
queryWrapper.like("name",name);
}
return Result.success(roleService.page(new Page<>(pageNum,pageSize),queryWrapper));
}
/**
* 绑定角色和菜单的关系
* @param roleId 角色id
* @param menuIds 菜单id数组
* @return
*/
@PostMapping("/roleMenu/{roleId}")
public Result roleMenu(@PathVariable Integer roleId, @RequestBody List<Integer> menuIds){
roleService.setRoleMenu(roleId,menuIds);
return Result.success();
}
@GetMapping("/roleMenu/{roleId}")
public Result getRoleMenu(@PathVariable Integer roleId){
return Result.success(roleService.getRoleMenu(roleId));
}
}
package com.imnu.springboot.controller;
import cn.hutool.core.collection.CollUtil;
import cn.hutool.core.util.StrUtil;
import cn.hutool.poi.excel.ExcelReader;
import cn.hutool.poi.excel.ExcelUtil;
import cn.hutool.poi.excel.ExcelWriter;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.imnu.springboot.common.Constants;
import com.imnu.springboot.common.Result;
import com.imnu.springboot.config.AuthAccess;
import com.imnu.springboot.controller.dto.UserDto;
import com.imnu.springboot.controller.dto.UserPasswordDto;
import com.imnu.springboot.entity.*;
import com.imnu.springboot.exception.ServiceException;
import com.imnu.springboot.mapper.DepartmentMapper;
import com.imnu.springboot.service.IRequirementService;
import com.imnu.springboot.service.impl.UserServiceImpl;
import com.imnu.springboot.service.impl.ValidationServiceImpl;
import com.imnu.springboot.utils.TokenUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.mail.SimpleMailMessage;
import org.springframework.mail.javamail.JavaMailSender;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.InputStream;
import java.net.URLEncoder;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
@RestController
@RequestMapping("/user")
public class UserController {
@Autowired
private UserServiceImpl userService;
@Autowired
private ValidationServiceImpl validationService;
@Autowired
private IRequirementService requirementService;
//从配置信息中拿去发送邮件人的信息
@Value("${spring.mail.username}")
private String from;
//映入发送邮件的类
@Autowired
JavaMailSender javaMailSender;
//账号密码登录
@PostMapping("/loginAccount")
public Result loginAccount(@RequestBody UserDto userDto){
String username = userDto.getUsername();
String password = userDto.getPassword();
if (StrUtil.isBlank(username) || StrUtil.isBlank(password)){ //检验用户名是否为空(用户名或密码为空)
return Result.error(Constants.CODE_400,"参数错误");
}
UserDto dto = userService.login(userDto);
return Result.success(dto);
}
//邮箱验证码登录
@PostMapping("/loginEmail")
public Result loginEmail(@RequestBody UserDto userDto){
String email = userDto.getEmail();
String code = userDto.getCode();
if (StrUtil.isBlank(email) || StrUtil.isBlank(code)){ //检验用户名是否为空(用户名或密码为空)
return Result.error(Constants.CODE_400,"参数错误");
}
UserDto dto = userService.loginEmail(userDto);
return Result.success(dto);
}
//邮箱获取验证码,获取登录和重密码的验证码
@AuthAccess
@GetMapping("/email/{email}/{type}")
public Result sendEmailCode(@PathVariable String email,@PathVariable Integer type){
if (StrUtil.isBlank(email)){
throw new ServiceException(Constants.CODE_400,"参数错误");
}
if (type==null){
throw new ServiceException(Constants.CODE_400,"参数错误");
}
userService.sendEmailCode(email,type);
return Result.success();
}
//重置密码
@AuthAccess
@PutMapping("/reset")
public Result reset(@RequestBody UserPasswordDto userPasswordDto){
if (StrUtil.isBlank(userPasswordDto.getEmail()) || StrUtil.isBlank(userPasswordDto.getCode())){
throw new ServiceException(Constants.CODE_500,"参数异常");
}
QueryWrapper<Validation> queryWrapper = new QueryWrapper<>();
queryWrapper.eq("email",userPasswordDto.getEmail());
queryWrapper.eq("code",userPasswordDto.getCode());
queryWrapper.ge("time",new Date());
Validation one = validationService.getOne(queryWrapper);
if (one ==null){
throw new ServiceException(Constants.CODE_500,"验证码过期,请重新获取验证码");
}
//如果验证通过的话
QueryWrapper<User> queryWrapper1 = new QueryWrapper<>();
queryWrapper1.eq("email",userPasswordDto.getEmail());
User user = userService.getOne(queryWrapper1);
//重置密码
user.setPassword("123");
userService.updateById(user);
return Result.success();
}
//修改密码
@PostMapping("/password")
public Result password(@RequestBody UserPasswordDto userPasswordDto){
userPasswordDto.setPassword(userPasswordDto.getPassword());
userPasswordDto.setNewPassword(userPasswordDto.getNewPassword());
userService.updatePassword(userPasswordDto);
return Result.success();
}
//注册
@PostMapping("/register")
public Result register(@RequestBody UserDto userDto){
String username = userDto.getUsername();
String password = userDto.getPassword();
if (StrUtil.isBlank(username) || StrUtil.isBlank(password)){ //检验前端用户输入的内容是否为空
return Result.error(Constants.CODE_400,"参数错误");
}
User register = userService.register(userDto);
return Result.success(register);
}
//查询所有数据
@GetMapping
public Result findAll(){
return Result.success(userService.list()) ;
}
//根据用户姓名查询用户内容
@GetMapping("/username/{username}")
public Result selectUsername(@PathVariable String username){
QueryWrapper<User> queryWrapper = new QueryWrapper<>();
queryWrapper.eq("username",username);
User one = userService.getOne(queryWrapper);
return Result.success(one);
}
//新增和修改
@PostMapping
public Result save(@RequestBody User user){
//新增或者更新
if (user.getId()==null){
user.setPassword("123456");
}
return Result.success(userService.saveOrUpdate(user));
}
//根据部门id去查询岗位信息
@PostMapping("/selectPost")
public Result selectPost(@RequestBody Requirement requirement){
Integer depId = requirement.getDepId();
QueryWrapper<Requirement> queryWrapper1 = new QueryWrapper<>();
queryWrapper1.eq("dep_id",depId);
List<Requirement> list = requirementService.list(queryWrapper1);
HashMap<String, Object> map = new HashMap<>();
map.put("list",list);
return Result.success(map);
}
//为用户增加岗位信息并且修改岗位表中的信息
@PostMapping("/userRequirement")
public Result saveUserRequirement(@RequestBody User user){
userService.saveOrUpdate(user);
//获取用户id
Integer id = user.getId();
//获取岗位id
Integer postId = user.getPostId();
//根据岗位id去查询岗位信息
QueryWrapper<Requirement> queryWrapper = new QueryWrapper<>();
queryWrapper.eq("id",postId);
Requirement one = requirementService.getOne(queryWrapper);
//修改岗位表中用户id
one.setUId(id);
one.setState(true);
requirementService.updateById(one);
return Result.success();
}
@PostMapping("/noticeByEmail")
public Result NoticeByEmail(@RequestBody User user){
//获取用户的用户名,密码和邮箱
String email = user.getEmail();
String password = user.getPassword();
String username = user.getUsername();
String nickname = user.getNickname();
//通过邮件通知
SimpleMailMessage message = new SimpleMailMessage();
message.setFrom(from);
message.setTo(email);
Date now = new Date();
message.setSentDate(now);
message.setSubject("【欧世雄企业新员工入职系统】");
message.setText("您好"+nickname+",请使用以下账户密码登录公司系统:\n"+
"账号:"+username+"\n密码:"+password+"\n登录地址:http://localhost:8080/login");
javaMailSender.send(message);
return Result.success();
}
//删除
@DeleteMapping("/{id}")
public Result delete(@PathVariable Integer id){
//更改用户表信息
userService.removeById(id);
return Result.success();
}
//批量删除
@PostMapping("/del/batch")
public Result deleteBatch(@RequestBody List<Integer> ids){
return Result.success(userService.removeByIds(ids));
}
//分页查询
@GetMapping("/page")
public Result findPage(@RequestParam Integer pageNum,
@RequestParam Integer pageSize,
@RequestParam(defaultValue = "") String username,
@RequestParam(defaultValue = "") String email,
@RequestParam(defaultValue = "") String address){
IPage<User> page = new Page<>(pageNum,pageSize);
QueryWrapper<User> queryWrapper = new QueryWrapper<>();
if (!"".equals(username)){
queryWrapper.like("username",username);
}
if (!"".equals(email)){
queryWrapper.like("email",email);
}
if (!"".equals(address)){
queryWrapper.like("address",address);
}
return Result.success( userService.page(page,queryWrapper));
}
/**
* 导出
*/
@GetMapping("/export")
public Result export (HttpServletResponse response) throws Exception {
//从数据库查询到所有的数据
List<User> list = userService.list();
//在内存操作,写出到浏览器
ExcelWriter writer = ExcelUtil.getWriter(true);
//自定义标题别名
writer.addHeaderAlias("username","用户名");
writer.addHeaderAlias("password","密码");
writer.addHeaderAlias("nickname","昵称");
writer.addHeaderAlias("email","邮箱");
writer.addHeaderAlias("phone","电话");
writer.addHeaderAlias("address","地址");
writer.addHeaderAlias("createTime","创建时间");
writer.addHeaderAlias("avatarUrl","头像");
//一次性的写出list内的对象到excel,使用默认样式,强制输出标题
writer.write(list,true);
//设置浏览器响应的格式
response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8");
String fileName = URLEncoder.encode("用户信息","UTF-8");
response.setHeader("Content-Disposition", "attachment;filename=" + fileName + ".xlsx");
ServletOutputStream outputStream = response.getOutputStream();
writer.flush(outputStream,true);
outputStream.close();
writer.close();
return Result.success();
}
}
五,项目总结
在进行用户界面设计时需要充分考虑布局的合理化问题,遵循用户从上而下,自左向右浏览、操作习惯,避免常用业务功能按键排列过于分散,以造成用户鼠标移动距离过长的弊端。多做“减法”运算,将不常用的功能区块隐藏,以保持界面的简洁,使用户专注于主要业务操作流程,有利于提高平台的易用性及可用性。
1) 保持菜单简洁性及分类的准确性,避免菜单深度超过3层。
2) 未完成功能必须隐藏处理,不要置于页面内容中,以免引起误会。
3) 所有文字内容排版避免贴边显示(页面边缘),尽量保持10-20像素的 间距并在垂直方向上居中对齐;各控件元素间也保持至少 10 像素以上 的间距,并确保控件元素不紧贴于页面边沿。
4) 字符型数据保持左对齐,数值型右对齐(方便阅读对比),并根据要求, 统一显示小数位位数。
5) 页面布局设计时应避免出现横向滚动条。
6) 在页面显眼位置应该出现面包屑导航栏,让用户知道当前所在页面的 位置,并明确导航结构。
7) 信息提示窗口应位于当前页面的居中位置,并适当弱化背景层以减少 信息干扰,让用户把注意力集中在当前的信息提示窗口。一般做法是在 信息提示窗口的背面加一个半透明颜色填充的遮罩层。