flutter / flutter/devtools

DevTools Treemap UX/UI Color Updates

Aperta
#2,139 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub
P3 polish screen: app size
Lingua principale
Dart
Stelle
1.7k
Fork
404
Merge medio
6g 17h
PR unite (30g)
18

Descrizione

General DevTools Treemap UX Color Updates
**Treemap Update:**
- [x] Use `#88b1de` as dominant color
- [ ] Use `#2c5daa` as alt dominant color (see gradient breakdown)
- [ ] Use `#f6937d` as dominant hotspot color
- [ ] Use `#009aca` as indicator color
##
**Gradient Breakdown:**

| Lighter | Darker | Opacity |
| :--- | :----: | ---: |
| `#88b1de` | `#2c5daa` | 100% |
| `#9aafd0` | `#5163a5` | 100% |
| `#aaacc3` | `#6c68a0` | 100% |
| `#b9a8b7` | `#836e9b` | 100% |
|`#c6a5ac` | `#9a7496` | 100% |
| `#d2a1a0` | `#c7838b` | 100% |
| `#e99889` | `#dd8b85` | 100% |
|`#f6937d` | `#f6937d` | 100% |

##

![maptree-gradient](https://user-images.githubusercontent.com/8105802/85960236-f52e4e00-b956-11ea-8920-69f44b206d58.png)

##
**_Values have been provided for the _base color_ + _opacity_ + _dominant color__**
The determined threshold will follow this pattern:
Extra Large: 100% opacity `#88b1de` and `#f6937d`
Large: 75% opacity
Medium: 50% opacity
Small: 25% opacity
##
**Dark Mode Updates**
- [ ] Text Color `#88b1de` on Treemap labels
- [ ] Extra Large: 100% opacity `#88b1de`
- [ ] Large: at 75% opacity on dark background will render as `#7392b4`
- [ ] Medium: at 50% opacity on dark background will render as `#5c7087`
- [ ] Small: at 25% opacity on dark background will render as `#454f5a`
##
![image](https://user-images.githubusercontent.com/8105802/85917390-a4134280-b80e-11ea-81c7-0ad0bed99f39.png)

##
**Dark Mode Hot Spot Updates**
- [ ] Text Color `#88b1de` on Treemap labels
- [ ] Extra Large: 100% opacity `#f6937d`
- [ ] Large: at 75% opacity on dark background will render as `#c4786a`
- [ ] Medium: at 50% opacity on dark background will render as `#926156`
- [ ] Small: at 25% opacity on dark background will render as `#614843`
##
![image](https://user-images.githubusercontent.com/8105802/85917508-62cf6280-b80f-11ea-8e16-0800365bfcd7.png)
##
**Dark Mode Gradients**
- [ ] Lighter Range: at 100% opacity `#88b1de` to `#f6937d`
- [ ] Darker Range: at 100% opacity `#2c5daa` to `#f6937d`
##
![image](https://user-images.githubusercontent.com/8105802/85960564-42abba80-b959-11ea-85b1-413efc744819.png)

##
**Light Mode Updates**
- [ ] Text Color `#2c5daa` on Treemap labels
- [ ] Extra Large: 100% opacity `#88b1de`
- [ ] Large: at 75% opacity on a light background will render as `#7e9dc0`
- [ ] Medium: at 50% opacity on a light background will render as `#bfd5ed`
- [ ] Small: at 25% opacity on a light background will render as `#e1eaf7`
##
![image](https://user-images.githubusercontent.com/8105802/85917576-1afd0b00-b810-11ea-867e-9c8fe0363ae3.png)

##
**Light Mode Hot Spot Updates**
- [ ] Text Color `#2c5daa` on Treemap labels
- [ ] Extra Large: 100% opacity `#f6937d`
- [ ] Large: 75% opacity on a light background will render as `#f3b098`
- [ ] Medium: 50% opacity on a light background will render as `#f7c9b8`
- [ ] Small: 25% opacity on a light background will render as `#fce2d7`
##
![image](https://user-images.githubusercontent.com/8105802/85917545-cfe2f800-b80f-11ea-8d14-e6000fd0097c.png)
##
**Light Mode Gradients**
- [ ] Lighter Range: at 100% opacity `#88b1de` to `#f6937d`
- [ ] Darker Range: at 100% opacity `#2c5daa` to `#f6937d`
![image](https://user-images.githubusercontent.com/8105802/85960445-5276cf00-b958-11ea-9d97-7a6f980ee296.png)
**Gradient Breakdown:**

| Lighter | Darker | 100% |
| :--- | :----: | ---: |
| `#88b1de` | `#2c5daa` | 100% |
| `#9aafd0` | `#5163a5` | 100% |
| `#aaacc3` | `#6c68a0` | 100% |
| `#b9a8b7` | `#836e9b` | 100% |
|`#c6a5ac` | `#9a7496` | 100% |
| `#d2a1a0` | `#c7838b` | 100% |
| `#e99889` | `#dd8b85` | 100% |
|`#f6937d` | `#f6937d` | 100% |

##
Below is a conceptual mock of rendering using opacity to show size. _**_Note:_ Color is not representative of actual intended size here; it is provided for maximum visibility to show intended color range.**_

![maptree-monocromatic-v3Artboard 1@3x](https://user-images.githubusercontent.com/8105802/85909269-da7c9d80-b7cd-11ea-990e-32fba7a4333b.png)
![maptree-dark-select1Artboard 1@3x](https://user-images.githubusercontent.com/8105802/85915779-46c3c500-b7ff-11ea-9569-8d72b6c9f3c5.png)
##
**Dark Mode Hot Spot Colors**
- Text Color `#88b1de` on Treemap labels
- Select: `#009aca` as indicator color
- Extra Large: 100% opacity `#f6937d`
- Large: `#f6937d` at 75% opacity on `#303030` background will render as `#c4786a`
- Medium: `#f6937d` at 50% opacity on `#303030` background will render as `#926156`
- Small: `#f6937d` at 25% opacity on `#303030` background will render as `#614843`

##
![maptree-v2-monocromaticArtboard 1@3x](https://user-images.githubusercontent.com/8105802/85915260-ba170800-b7fa-11ea-8fef-aa396d557933.png)

![maptree-dark-hotspotArtboard 1@3x](https://user-images.githubusercontent.com/8105802/85915998-239a1500-b801-11ea-8520-b2f130c41613.png)
![maptree-dark-selected-hotspotArtboard 1@3x](https://user-images.githubusercontent.com/8105802/85916033-84295200-b801-11ea-91a9-1884bd78d708.png)
![maptree-dark-selected-hotspot-wholeArtboard 1@3x](https://user-images.githubusercontent.com/8105802/85916090-26e1d080-b802-11ea-9ee7-0800b43b52c3.png)
![maptree-dark-selected-hotspot-whole-selectArtboard 1@3x](https://user-images.githubusercontent.com/8105802/85916110-44af3580-b802-11ea-82e0-4869677d273d.png)

##

![maptree-dark-gradient](https://user-images.githubusercontent.com/8105802/85963986-cae78b00-b96c-11ea-94bd-ffbc872f557f.png)
Alt range:
![color-range-tree-map-dark-mode-red-green](https://user-images.githubusercontent.com/8105802/85969758-654fca80-b97d-11ea-9ac7-195dd7abc67f.png)

##
**Light Mode**
##
![maptree-monocromatic-v1](https://user-images.githubusercontent.com/8105802/85907246-b3ba6900-b7c5-11ea-9948-8927b0d56348.png)
![maptree-v2s-monocromaticArtboard 1@3x](https://user-images.githubusercontent.com/8105802/85910520-35b18e80-b7d4-11ea-95b3-31a1f9702188.png)
##

**Light Mode Hot Spot Colors**
- Text Color `#2c5daa` on Treemap labels
- Select: `#009aca` as indicator color
- Extra Large: 100% opacity `#f6937d`
- Large: `#f6937d` at 75% opacity on `#ffffff` background will render as `#f3b098`
- Medium: `#f6937d` at 50% opacity on `#ffffff` background will render as `#f7c9b8`
- Small: `#f6937d` at 25% opacity on `#ffffff` background will render as `#fce2d7`
##
![maptree-monocromatic-v609Artboard 1@3x](https://user-images.githubusercontent.com/8105802/85913579-ddd25200-b7ea-11ea-95da-c575a82fe942.png)
![maptree-selectedArtboard 1@3x](https://user-images.githubusercontent.com/8105802/85914501-3f96ba00-b7f3-11ea-8702-8464bc28cc52.png)
![maptree-highlightedArtboard 1@3x](https://user-images.githubusercontent.com/8105802/85914568-f6933580-b7f3-11ea-9b1b-79c0b4647ae8.png)
![maptree-selected-hot](https://user-images.githubusercontent.com/8105802/85914629-a4064900-b7f4-11ea-919d-c06d5f8c8e85.png)

##
**Light Mode Gradient Colors**
![image](https://user-images.githubusercontent.com/8105802/85961570-2d865a00-b960-11ea-8abd-76e13c94a751.png)
![image](https://user-images.githubusercontent.com/8105802/85961780-9e7a4180-b961-11ea-8e5a-727e5c61484e.png)

`#88b1de`
`#2c5daa`
`#5163a5`
`#6c68a0`
`#836e9b`
`#9a7496`
`#c7838b`
`#dd8b85`
`#f6937d`
`#88b1de`
`#9aafd0`
`#aaacc3`
`#b9a8b7`
`#c6a5ac`
`#d2a1a0`
`#e99889`
`#f6937d`

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

L’issue fornisce specifiche dei colori e immagini mockup per le modalità chiara e scura di Treemap, ma non indica file, test o un punto di ingresso. Inizia individuando l’interfaccia utente di Treemap nel repository DevTools e confronta il rendering attuale con le palette elencate. Il lavoro è completato quando i colori richiesti per etichette, hotspot, gradienti, opacità e selezione sono implementati e verificati in entrambe le modalità.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
dart
Ambito
data-visualization, design, devtools
Tipo di issue
Funzionalità
Difficoltà
5/5
Tempo stimato
Più di una settimana
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
25/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.