Diverse servicii „Yandex“ de lucru cu culoare pentru a rezolva problema de interfață: selectarea blocuri de informații și obiect răspunsurile, managementul atenției, și crearea unei ierarhii vizuale.
În funcție de selectarea culorii sarcinii poate necesita calcule complexe. Dar se întâmplă ca să dobândească rezultatele dorite mult mai ușor.
Avem la aplicații de carduri promoționale Yandex Launcher: rating, descriere și butonul „Install“. Aceste recomandări contextuale - deschid aplicația pe partea de sus a listei sau într-un dosar de pe desktop.
punerea în aplicare inițială
Culoarea fundalului pentru card este selectat pe automat pe butonul icoana este translucid alb. Algoritmul a încercat să determine culoarea principală a icoanelor, examinând pixelii de nuanță. Acest lucru nu dă întotdeauna un rezultat frumos, el a avut deficiențe:
- determinarea incorectă a culorii;
- Culoare „murdar“ din cauza mediei;
- butoane dim plictisitor carte.
Ceea ce într-adevăr a vrut
Cardul trebuia să devină o adevărată extensie de icoane si culori - suculente și luminoase. Am vrut să creeze sentimentul că placa cu atenție făcută de mână, nu a alunecat ceva la întâmplare generat automat.
Frumos întotdeauna doresc să facă, dar resursele nu sunt nelimitate. Alocați comandă pentru a scrie bibliotecă minunat pentru a determina culorile nu sunt planificate. Așa că problema - forțe minime pentru a îmbunătăți algoritmul de determinare a culorilor, dau seama cum să picteze o carte frumoasă, nu inventarea la aceeași nava spatiala.
Noul algoritm pentru determinarea culorilor
Pasul 1: Ia pictograma. Aruncarea pixeli alb, negru și transparente.
Pasul 2: Reducerea imaginii obținute la o dimensiune de 2 × 2 pixeli (în antialiasing mut). Rezultatul este un icoane patru culori. În cazul în care imaginea originală uniformă, ei pot repeta - nu vă faceți griji.
Avem dezactivat anti-aliasing, astfel încât culorile nu se amesteca, nu devin „murdar“.
De fapt, se dovedește: pătrat este împărțit în patru părți, vom lua pixelul medie din rândul de sus al fiecărui trimestru. Punerea în aplicare este simplu: nici măcar nu au nevoie de un real imagini Downsample și să lucreze, în general, cu o grafică. Pixelii cu luarea poziția dorită a matrice unidimensională, rezultând după prima etapă.
Pasul 3. Aproape totul este gata. Rămâne destul de un pic: Ne culori preparate traduce în HSL. sortează după luminozitate (L). carte de vopsea.
- Context - cea mai ușoară culoare;
- Butonul - cel mai aproape de lumina;
- Textul - cel mai întunecat.
schema de culoare închisă (în cazul în care două sau mai multe culori închis):
- Context - cele mai închise culori;
- Butonul - cel mai aproape de întuneric;
- Text - cel mai usor.
Aplicarea de culoare, verificați contrastul: diferența Lightness între fundal și cu ≥ 20; între fundal și textul ≥ 60. Dacă nu, ajustați.
Și un pic carduri, de exemplu:
Am avut o carte frumoasă de această culoare icoane, fără impurități „murdare“. Prin utilizarea de mai multe culori de card are un aspect mult mai viu. Deosebit de mulțumit de faptul că placa omogena icoane fundal devine continuarea sa directă: granița dintre ele nu este vizibil.
Si cel mai important, la două zile după prima ofertă a unei noi de punere în aplicare a algoritmului a fost disponibil în dev-montaj. Testat în cadrul echipei instituit praguri pentru filtru în prima etapă, cu condiția cazuri speciale:
- pictograma de aceeași culoare - face fundalul un pic mai închisă, astfel încât să nu fuzionat;
- Pictograma și fundal - a se vedea pixelii de pe margini; Dacă toate la fel, am pus același fundal de card.
Algoritmul modificat a intrat în următoarea versiune. Mulțumiri speciale pentru dezvoltarea lider de echipa Yandex Lansatorul Dima Ovcharov - pentru interesul, dorința și răbdare. În cele din urmă - mai multe exemple.
