后台产品的变化相对较少, 是有迹可循的, 掌握一定的设计技巧有助于我们完善细节规范, 提高工作效率. 在此, 总结了后台产品设计四大要点, 希望能给后台设计经验不太丰富的同学提供一些参考.
页面布局
后台产品更侧重于功能与逻辑, 在页面布局上都大同小异. 我经常用到的两种布局:(1)左右结构, 分为 Logo, 登录账户, 侧面导航, 内容区四部分 (2) 上下结构, 分为 Logo, 顶部导航, 登录账户, 内容区四部分.
Logo: 可放置后台系统的名称或者图标, 可以作为回到系统主页的快速入口.
登录账户: 可放置当前登录人账户, 通过此入口可进入个人中心详情页面. 一般会有账户的退出和切换. 在登录账户前面, 可以添加全局性功能的入口, 如: 搜索, 消息中心等.
导航:(1)侧面导航, 多用于后台管理系统或内容太过庞杂的 web 端网站, 按照系统功能点划分一级导航, 二级导航等, 能容纳更多信息且更符合阅读习惯, 有更好的拓展性.(2)顶部导航, 多用来划分网站的主要板块, 常见于产品层级较少的网站或内容较规则的资讯类网站, 如腾讯新闻, 搜狐新闻等.
内容区: 正文内容区域, 展示我们信息和操作的主要区域.
首页设计
我所接触的后台产品绝大多数都是有首页的, 首页设计之前, 我们需要考虑首页内容是针对所有用户还是针对单一用户.
所有用户: 展示产品相关的各种统计图, 通知公告, 集成的功能入口等.
单一用户: 展示待办事项等只与当前登录用户相关的业务.
也遇到过首页中将两者结合起来的, 既放通知公告, 热点问题等针对所有用户的内容, 也放待办事项等针对单一用户的内容.
列表页设计
表格列表
1, 查询条件:
查询条件有哪些; 哪些必填(红色 * 标注, 在文字左侧); 排序; 是否支持模糊查询; 下拉框不存在默认值时, 默认为 "请选择"; 输入框不存在默认值时, 默认为 "请输入"; 查询条件右对齐, 输入框左对齐.
2, 查询结果:
(1)表头: 有哪些字段, 对每个字段的理解, 字段的数据值是什么样子的, 排序, 有单位的字段带单位, 如: 金额(元), 可添加浅色的背景色, 表头左侧添加一个[序号] 字段
(2)列表的初始状态:
不显示, 选择条件点击查询以后才显示
显示表头等查询结果框架, 选择条件点击查询以后才显示数据
进来就按照默认条件展示数据
(3)数据量有多少: 分页展示还是添加竖向滚动条展示; 添加竖向滚动条时, 是否需要固定表头或者只在显示数据的表格中添加竖向滚动条
(4)表格列数较多情况的几种处理方式: 添加横向滚动条; 允许用户对列自定; 固定某些列, 比如身份证号, 姓名
(5)列宽: 表头不能换行, 列宽至少大于表头
列内容固定时, 如手机号等, 列宽应大于该固定宽度
列内容不固定时, 应考虑大多数情况, 保证大多数数据完整显示
数据长度大于列宽时, 数据内容进行截断, 末尾加...... 鼠标移入时, 在上方显示 浮层显示完整内容, 当数据末尾具有有价值内容时可采用中间截断, 如邮箱 12345......@163.com; 或允许用户对列宽进行调整
(6)排序: 常用日期字段的升序, 降序来排序; 多列具有排序功能时, 确定好优先级
(7)对齐方式: 我公司使用文本居中对齐, 数值金额右对齐的方式
(8)详情入口: 一是以具有区别性的字段为链接(视觉上有所不同, 如字体调为蓝色); 二是在表格内单独设置[查看] 入口, 字段较多有横向滚动条时建议将入口放在表格左侧, 字段较少时可放在表格右侧. 前者节省空间, 后者存在感强, 需要根据具体场景来确定方案
(9)勾选:
全选可以进行批量选中, 在多页的情况下, 通常有两种需求, 其一是选中当前 页, 其二是选中全部.
跨页选择, 在第一页勾选几项后, 翻页再去勾选其他项时, 有两种情况: 其一 是翻页后不保留选中状态; 其二是保留选中状态, 但往往无法快速获 知已选项的 情况, 所以, 在切换到其他页面时, 需要再表格顶部显示已选项情况, 允许删除 其中某一项和清空所有.
(10)按钮: 在表格顶部放置按钮, 比如新增, 编辑, 删除等放在左侧还是右侧根据情况调整(我司右侧居多), 有些按钮时配合勾选进行操作的, 当没有勾选项时, 禁用该按钮或者给出弹框提示
(11)导出: 给开发一个 Excel 模板, 表名 + 筛选条件 + 时间 + 导出数据, 通常使用表名来确定文件名称, 另外需注意美观性
(12)未查询到结果时, 给予未查询到的相关提示, 如 "暂无查询结果"
卡片列表
卡片列表让页面更美观丰富, 视觉效果更好, 目前工作中使用并不多, 暂时不详细展开描述
添加页设计
1, 方式: 打开一个新的页面或弹框的页面.
2, 内容分类: 信息字段较多的时候, 最好能够结合字段信息做一个分类, 比如案件信息, 企业信息, 办理信息, 附件信息
3, 字段内容规范:
是否必填(必填项以红色号标识出来, 红色在文字左侧; 当必填项没有填写时, 可在光标移走时, 给出检验提示, 如字段文本框下标红或高亮警示)
是否有字符限制(字符格式, 字符长度), 如: 手机号, 身份证号等. 不符合格式的不允许写入, 超过长度的不再写入
是否有默认值, 如当前日期, 当前办理人等, 可直接写入且不允许修改
是否有单选, 如性别, 不需要文本框输入, 单选即可
4, 提示: 保存, 提交, 删除等按钮, 需要进行二次确认; 操作成功, 操作失败需给出提示.
5, 键盘支持: 支持 TAB 键移切换动光标焦点, 移动遵循从左上至右下的原则
结语
后台设计还有许多技巧, 我会在后续的文章继续分享一二
来源: https://www.cnblogs.com/dublogs/p/10620663.html