#桌面 ## 待分类 ### 空态的新手引导类型 1. 原有基础上的改版，都是原有内容相关的引导 2. 完全系统的新手指引在 Dashboard 上。 ## Checklist - [ ] 确认使用者 - [ ] 他们对你的数据和可视化了解多少？ - [ ] 用户希望通过数据做出什么决定？ - [ ] 他们需要什么信息。 - [ ] 什么东西值得在仪表盘上占有一席之地？ - [ ] 什么数据需要视觉化？ - [ ] 这个仪表板需要迎合哪些角色/场景？ - [ ] 他们只是想查找值吗? 他们想要比较吗? 他们想要分析吗？ - [ ] 元数据是否干净 - [ ] 随着时间的推移，数据是否被跟踪？ - [ ] 我们有多少历史数据? (年、月等) - [ ] 主要的使用设备 - [ ] Web？Mobile？平板？ - [ ] 多久查看一次？在没有看板之前，他们是怎么做的？ - [ ] 他们有多少时间查看 Dashboard？ - [ ] 视觉设计 - [ ] 色彩相关 - [ ] 使用相同颜色的变化来表示强度水平 ![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20221218201943.png) - [ ] 有没有一个信息更丰富的空状态，你可以设计？ - [ ] 变化的增长百分比，无数据时应该显示 0.0%（参开的是 Stripe）![image.png](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20230215153035.png) - [ ] 合理的 Data ink Ratio (油墨比)，对非关键信息降噪。 - [ ] 不要使用过于精确的数字。过于精确的数字，会减慢我们理解的速度，有感触，优化以后其实更好理解。 ![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20221218172353.png) - [ ] 布局的一致性 - [ ] 在这里，一致性是关键。如果您的用户能够快速找到每个模块左上角的标题，或者总是在底部中间的图例，那么您将大大帮助他们。这将有助于减少视觉噪音时，他们扫描的网页。 - [ ] 不要使用 Bad visualizations ![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20221218175044.png) ## 交互 ### 图表的 Tooltips & hover states ![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/Legend-Hover.gif) ### 添加小组件 - [[Coding]] 也支持自定义工作台，不过看交互应该是模仿 [[jira]] 的 - [[jira]] 1. 编辑前![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20211212163802.png) 2. 开启编辑![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20211212163851.png) 3. 添加模块![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20211212163923.png) - [[Click up]] 体验也不错，可自定义 [[Widget]] 信息和尺寸，布局也可以自由拖拽。 1. 添加前 ![Pasted image 20211205111537](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/Pasted%20image%2020211205111537.png) 2. 选择 [[Widget]] 类型 ![Pasted image 20211205111632](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/Pasted%20image%2020211205111632.png) 3. 设置 [[Widget]] 细节 ![Pasted image 20211205111706](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/Pasted%20image%2020211205111706.png) 4. 调整布局和尺存 ![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20211205121500.png) ### 调整布局 #### [[ jira]] ![Pasted image 20211031112112](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/Pasted%20image%2020211031112112.png) ## 资源 - 我Figma的探索画布。 - [Tremor – The React library to build dashboards fast](https://www.tremor.so/) - 专注于 Dashboard 的 React 组件库，风格和 Tailwind 差不多 - 很漂亮，还看到有一些[厉害的人](https://cali.so/)在使用。 - ![image.png](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20230214140509.png) - [Royal Parvej on Behance](https://www.behance.net/royalparvej) Behance 上一个专门画 Dashboard 的老哥。![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/Royal%20Parvej%20on%20Behance.jpg) - [Dashboard Design Patterns](https://dashboarddesignpatterns.github.io/) #Patterns ![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20221120110827.png) - [Default dashboard - Jira (atlassian.net)](https://chibin.atlassian.net/secure/Dashboard.jspa?selectPageId=10000) jira 的感觉很强大 - [我的仪表盘 - TAPD平台](https://www.tapd.cn/my_dashboard) 感觉蛮符合我的直觉的，可以参考 ### 教程 - [Dashboard Design UX Patterns Best Practices - Pencil & Paper](https://pencilandpaper.io/articles/ux-pattern-analysis-data-dashboards/) - [[mia典型页面-工作台]]