一、菜单menu

位置

首先菜单的位置需要根据使用产品的用户习惯来决定。最一开始我们的用户习惯使用某海外数据网站，跟behance和dribbble上面晒出来的结构不一样，菜单在顶部而不是左边，这就涉及到用户对菜单的操作频率高低和他们使用的设备平台是什么样的。其实我们针对的大多数用户都是喜欢移动办公，但是作为数据平台，放到移动端去使用效率会降低很多，所以小屏幕办公是一大特点，加之数据基本会在横向展示项目较多，这就决定使用上下结构进行设计，会给数据展示留足控件（其实也是boss喜欢，我能说？）毕竟老板也在这行呆了好多年……

上下布局

对菜单操作频繁，且需要多层级页面来回切换，适用于审核数据，可以选择固定二级菜单，而不是下拉式菜单。

左右布局

在我看来这个适合沉浸使用，用户对于数据需要深入研究，而不是频繁跨页面去审核。这样的话菜单干扰因素会少很多。当然你也可以放右边，毕竟有的用户喜欢自定义桌面菜单栏（比如：我），后期迭代开发可以加入自定义菜单位置。

布局

在多数据+图表展示的时候还需要考虑多屏幕尺寸的展示，下面栅格规范会讲到，所以可以考虑几种布局和布局的顺序，需要根据数据权重和展示内容来。

1440宽

1024宽

750宽

二、栅格规范grid

其中的像素规范是bootstrap里面的所规定的

三、头部信息样式 Headers

组成信息基本上是页面标题+面包屑，我在设计初期只把第三级页面加了面包屑，因为一二级菜单都是固定在顶部的，层级关系很明显。后期为了统一全站的样式，便从home/…/…开始这样往下排了，感觉是比较鸡肋的。至于面包屑的位置和标题的位置可以互换，逻辑层级关系有面包屑的帮助即可，但是如果只考虑在第三层页面加面包屑的话，面包屑的位置最好再页面的标题上方，这样可以让用户明显感知到当前所处的位置。放置的按钮一般是主功能类（提交、上传、下载等）也是要根据页面里面所有按钮的位置来决定你的按钮样式的（以后专门挑一篇文章来讲按钮样式吧）。

四、模块过渡效果 panel transition

大致分为几类：渐隐、放大、左滑、右滑、上滑、下滑。比较高级的动效都是在潜移默化地给用户视觉上的享受，而动作变化太大的动效反而会加重用户的视觉负担。

觉得有用请点赞吧~

 ↓