交互设计自查表-网页版

设计绝不是简单的拼合,排列甚至编辑;设计是通过阐明,简化、明确、修饰,使之庄严,有说服性,甚至带一点趣味性,来赋予其价值及意义 ——保罗 兰德

_______________

框架
网页版的规范是和移动端的有一些差异的,很多的是平台本身所导致的。
1、 框架的页面自适应
浏览宽度<1280PX 1280-1440PX >1440PX
2、 页头
主页面页头、其他页面页头
3、 页脚
版权位置在页面底部,居中呈现,固定显示在页面下方 copyright的
4、 LOGO
LOGO和反白LOGO 浏览器页签logo
5、 错误提示页
404页面、即将上线、页面失效、服务下线、系统繁忙
6、 页面打开方式
当前页打开(单个服务刷新页面)、在新窗口中打开(两个服务两种内容的跳转)的场景总结
7、 页面滚动方式
系统滚动条滚动、指定区域滚动
8、 浏览器支持版本
指定浏览器支持的版本 IE9+ CHROME45+ FIREFOX
9、 字体 英文字体和用中文字体的指定
10、 文本颜色指定 标题/次级重要信息/置灰文字/链接文字
11、 颜色 背景色/线条色、图标颜色 告警颜色(紧急>重要>次要>提示>正常)

菜单导航
顶部菜单、手风琴菜单、面包屑(二级以上菜单)、操作步骤导航(不要超过4-5步)
表格
基础表格:ID类身份鉴别类的信息,不直接显示,鼠标浮动到对应字段后浮窗显示tips
表格搜索:搜索为空的情况
表格过滤:默认状态和
表格排序:默认排序和切换排序/核心字段的默认宽度
表格调整:列宽的调整、内容的显示/隐藏
表格单个操作:每一列按钮的数量/不同状态下按钮的置灰/下拉菜单的分组/可用按钮是否有说明为什么不可用。可用场景是什么
表格批量操作:批量操作时对于互斥的选项处理
表格加载:自适应时保证核心字段优先加载和展示
表格搜索刷新:过滤 搜索 分页 手动刷新 浏览器页面刷新
表格内容对齐:一般文字左对齐,数字右对齐
表格内容折叠/展开 :主要内容在列内显示 更多内容展开显示
分页样式:性能困难时分批次查询、每页显示多少条 之后分页

控件
图标(饼图 折线图)、按钮(默认、经过、点击、智慧、选中)、链接、选择组件(单选 多选 tab选)、时间日期选择器(参照机票定制网站/aribnb)
输入框(普通输入框、根据业务可以微调数字(微调幅度)、带搜索的输入框、特殊字段输入(IP地址、Mac地址)、有下拉框的搜索框)
表单:输入及时校验/有错误时定位
弹窗:
(表单样式和弹窗 可以写两篇文章)
TIPS提示/滑块

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

返回主页看更多
狠狠的抽打博主 支付宝 扫一扫