Dashboard Design 必讀的六篇文章

YUFANG CHIU
6 min readSep 6, 2020

--

最近在研究儀表板的設計原則,於是順手將 dashboard 設計相關的資源放入此文,讓大家看完之後能快速上手,人人都成 dashboard 大神

10 Rules of Dashboard Design

列出設計 dashboard 時常見的誤區,並且有清楚的範例,閱讀完後能快速掌握 dashboard 原則以及資訊呈現方式、 layout 建議。針對各種圖表有詳盡解說,並根據情境做分類,能根據情境需求找到適合的圖表類別並了解呈現圖表時該注意的大小事

常見dashboard的layout
圖表目標與對應圖表類型

腾讯好文!如何设计内容精确、体验友好的Dashboard?(上篇)

就 dashboard 的場景、使用者、內容結構、功能做分析,設計初期釐清基本場景及內容結構時,這是一篇必讀文章

dashboard三大使用場景
內容設計思考細則

高手如何从零设计控制面板?别错过这个实战案例!

從基本邏輯、字體選擇、配色、 UI 、 layout 、最終呈現方式都有搭配實例解說。能了解 UI 設計師如何從零開始設計控制介面、保持 UI 元素的平衡。

配色教學
UI元素教學

超全面!一份详尽实用的信息可视化绘制指南

dashboard 設計時,資訊視覺化是主要重點之一,這篇對於常見圖表及使用原則使用場景、 do& don’t 有精簡說明

圖表呈現常見錯誤

6 steps to designing better dashboards

Application distilling 對於團隊合作很實用,可以快速匯集需求、展開可視化的討論, UX 設計師可以藉由這個工具有效率的帶領團隊、並審視使用情境是否合理

Application distilling:將需求與wireframe連結起來的流程

・Step1 — 找個白板,寫下 Features, Navigations, and Metrics 三個標題

・Step2 — 讓參加設計者寫下該應用程式在每個類別中會做的事,用 Features, Navigations, and Metrics 須完成的事各用三種不同顏色的便利貼寫,並貼在對應標題下面

・Step3 — 畫一個大的長方形在白板上,代表導覽列(上面或左邊)

・Step4–把 navigation 的便利貼貼在導覽列以及將 features 還有 metrics 放在主要的空間中(此步驟會來回很多次,設計師需思考每個貼在上面的便利貼代表的業務案例以去調整、去蕪存菁便利貼)

・Step5–重新修正便利貼,審視原本的元素為何,並確認資料的level,像是如果需要放日曆的話,default狀態應是日/週/月的層級,以及該功能需要做什麼下一步,像是檔案儲存的widget下一步應該執行複製/下載/分享/刪除

26 Steps of Product & Dashboard Design

列出設計師的工作方式,包含事前準備, 製作 low fidelity 的方式, 以及後續如何 delivery、test,還有 after design 後應該做的事,就算不是設計 dashboard,這篇也對設計師改善工作方式很有參考價值

Set up Project Folder and Start Collecting Moodboard
UI Overview - styleguide
設計時應思考 widget 中的可能狀態

以上就是這次的六篇推薦文章,希望大家無論是從基本知識、結構設計、 UI 呈現、資訊圖表、思考框架、工作方式上都有收穫!

如果覺得文章有收穫的話
請幫我拍拍手~
👏30:有幫助!
👏30+:希望看更多相關主題
謝謝🥰下次見~

--

--

YUFANG CHIU
YUFANG CHIU

Written by YUFANG CHIU

乙方 UX Designer 很多草稿 很少完稿

No responses yet