打造用户真正想用的仪表盘

公司内网仪表盘

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

这是由 Axero 和 Holistic Webdev 联合举办的前端挑战赛：办公空间版的参赛作品。

我建造的

我为虚构的“Acme”公司构建了这个响应式内网仪表盘。我的主要理念是仪表盘应该是动态的；它不应该是一个枯燥乏味的静态页面，让你一眼就能看出里面有什么。

为了营造新鲜感，我添加了一个醒目的欢迎页面，上面有一张很棒的办公室照片、当前天气和时间。在其下方，我创建了不同的新闻版块，让页面内容更加生动：公司和高管的内部动态、学习公告，甚至还有来自外部的最新行业新闻。

由于了解自己的日程安排非常重要，我特意在仪表盘上添加了“我的日历”和“我的任务”两个部分。

演示

您可以访问此 GitHub Pages 部署以获得全屏体验：
在线站点

⭐ GitHub 代码库 👇

旅行

我先从侧边栏和顶部导航栏入手。最棘手的部分是实现响应式设计。我很满意将用户个人资料图标从导航栏移到桌面视图侧边栏的效果，这样看起来更简洁。

主控制面板的设计灵感来源于不同的模板（例如 Dribbble、Axero 等），最终决定采用卡片式布局。我一层一层地搭建，首先找到了一张很棒的办公室照片作为背景。

制作信息卡片是件很有趣的事。使用 Bootstrap 让这一切变得轻松多了。

感谢阅读，期待很快能再次与您交流！

关注我，获取更多类似内容！

Twitter | GitHub | YouTube