🔧 阿川の電商水電行
Shopify 顧問、維護與客製化
💡
小任務 / 單次支援方案
單次處理 Shopify 修正/微調
⭐️
維護方案
每月 Shopify 技術支援 + 小修改 + 諮詢
🚀
專案建置
Shopify 功能導入、培訓 + 分階段交付

這是由 Axero、Holistic Webdev:Office Space 贊助的「前端挑戰:Office 版」的投稿

我建造了什麼

我為虛構的「Acme」公司建立了這個響應式內網儀表板。我的核心理念是,儀表板應該是動態的;它不應該是一個枯燥的靜態頁面,使用者已經知道那裡面有什麼內容。

為了增添新鮮感,我加入了一個醒目的歡迎螢幕,上面有一張很酷的辦公室照片、當前天氣和時間。在螢幕下方,我建立了不同的新聞版塊,讓介面更加生動:包括公司高管的內部動態、學習公告,甚至還有來自外部來源的最新行業新聞

由於了解您的日程安排非常重要,因此我確保在儀表板上包含「我的日曆」我的任務部分。

示範

您可以存取此 GitHub Pages 部署以獲得全螢幕體驗:

{% cta https://k0msenapati.github.io/company-intranet/ %} 即時網站 {% endcta %}

⭐ GitHub 倉庫👇

{% 嵌入 https://github.com/k0msenapati/company-intranet %}

旅行

我先從側邊欄和頂部導覽列開始。最棘手的部分是讓它響應式。我很滿意將使用者的個人資料圖示從導覽列移到桌面視圖的側邊欄,感覺更簡潔。

對於主儀表板,我從不同的模板(例如 dribble、axero 等)中汲取靈感,最終確定了這個卡片式佈局。我一層一層地建置,首先找到一張很酷的辦公室照片作為背景。

建立資訊卡片是一件很有趣的事情。使用 Bootstrap 讓一切變得簡單多了。


感謝您的閱讀,期待很快能再次與您聯繫!

關注我以獲取更多類似內容!

Twitter | GitHub | YouTube

再見gif


原文出處:https://dev.to/k0msenapati/building-a-dashboard-people-actually-want-to-use-5al2


精選技術文章翻譯,幫助開發者持續吸收新知。

共有 0 則留言


精選技術文章翻譯,幫助開發者持續吸收新知。
🏆 本月排行榜
🥇
站長阿川
📝12   💬9   ❤️4
557
🥈
我愛JS
📝3   💬9   ❤️7
190
🥉
AppleLily
📝1   💬4   ❤️1
68
#4
💬1  
3
評分標準:發文×10 + 留言×3 + 獲讚×5 + 點讚×1 + 瀏覽數÷10
本數據每小時更新一次
🔧 阿川の電商水電行
Shopify 顧問、維護與客製化
💡
小任務 / 單次支援方案
單次處理 Shopify 修正/微調
⭐️
維護方案
每月 Shopify 技術支援 + 小修改 + 諮詢
🚀
專案建置
Shopify 功能導入、培訓 + 分階段交付