Redizajniranje Adobe-ove vrste datoteke Icon System Language

U timu Adobe Design Brand stvaramo brendiranje za sve naše radne površine, mobilne uređaje i web proizvode. Element s markom može biti bilo što, od logotipa proizvoda s dva slova koji vidite na postolju do zaslona za prskanje i ikona unutar korisničkog iskustva samog proizvoda.

Često previdjena, ali vrlo vidljiva značajka je ikona vrste datoteke. Vrsta datoteke je naziv koji se daje određenoj vrsti datoteke koju aplikacija može stvoriti, kao što je .DOC za Word datoteku. Ikona vrste datoteke je ikona dodijeljena vrsti datoteke i ono što se prikazuje na zaslonu kad spremite ili otvorite stvarnu datoteku.

Najnovijim izdanjem Creative Clouda ove jeseni korisnici će vidjeti kako sve naše ikone vrste datoteka imaju novi, novi izgled! U ovom ću članku istražiti razmišljanje i postupak koji stoji iza našeg najnovijeg redizajna Adobeovog sustava ikona tipa datoteka i podijeliti uvide o izazovima s kojima se suočavamo s razvojem sustava robnih marki u ogromnoj obitelji proizvoda.

Identificiranje problema

Mnogi kupci možda ne shvaćaju da Adobe ima više od 100 proizvoda i usluga u tri oblaka: Creative Cloud, Document Cloud i Experience Cloud.

To znači da jedna mala promjena u dizajnerskom sustavu može stvoriti stotine promjena u cijeloj ploči.

Kada su u pitanju ikone vrste datoteka, ljudi često uzimaju u obzir samo primarne vrste datoteka kao što su:

  • .PSD za Photoshop,
  • .AI za Illustrator, ili
  • .INDD za InDesign

Međutim, većina naših proizvoda može uvoziti i izvoziti i razne sekundarne vrste datoteka (na primjer, sam Photoshop ima preko 120 različitih ikona tipa datoteka mapiranih u svom registru).

Da bismo optimizirali različite zahtjeve operativnog sustava, naše ikone vrste datoteka također je potrebno ručno snimiti u pikselu u 10 različitih veličina i zatim ih isporučiti kao skup rasterizovanih .PNG-ova koji se pakiraju u .ICNS (Mac) i .ICO (Windows) datoteka.

Kad uzimamo u obzir veličinu i formate za svaku ikonu datoteke, pregledavamo više od 7.000 sredstava za izmjenu i upravljanje sa svakim ciklusom izdanja.

Sa brzinom kojom raste linija proizvoda Cloud Cloud u posljednje četiri godine, postalo je jasno da količina napora potrebnog za stvaranje i održavanje ovih ikona vrste datoteka u postojećem radnom toku više nije skalabilna.

1. korak: Revizija i istraživanje

Prije nego što smo započeli redizajniranje sustava, morali smo istražiti što trenutno koristimo u svojim proizvodima. Kontaktirali smo svaki tim proizvoda koji nam je pomogao izvršiti reviziju svih ikona njihovih vrsta datoteka.

Nedosljednosti su bile posvuda i vjerojatno su bile rezultat dva faktora:

  1. Različiti timovi koji posjeduju svaku obitelj proizvoda i koji se više ne usklađuju s dizajnom i
  2. Kako se novi proizvodi i vrste datoteka pojavljuju na mreži, pojedine ikone stvaraju se kao jednokratni dizajni.

Pomoću podataka prikupljenih tijekom naše revizije izgradili smo ptičji pogled na postojeću arhitekturu datoteka.

Prvo smo organizirali ikone vrste datoteka prema obitelji proizvoda i križno ih usmjerili da vidimo koje su sekundarne vrste datoteka podijeljene između više aplikacija kako bismo mogli ukloniti duplikate ikona. Time smo uspjeli smanjiti broj sekundarnih vrsta datoteka na 65%.

Isječak stare arhitekture datoteka, koju organizira obitelj proizvoda.

Zatim smo kategorizirali vrste datoteka prema funkcijama, poput "Slika", "Audio", "Kod" i "3D". Obično će ikona vrste datoteka sadržavati metaforu koja govori o njenoj glavnoj funkcionalnosti (na primjer, a. Vrsta datoteke HTML upotrijebit će metaforu zagrade za prenošenje da je njena funkcionalnost povezana s kodom ili kodiranjem).

Isječak stare arhitekture tipa datoteka organizirane po funkcionalnostima.

Primijetili smo da neke vrste datoteka koriste nekoliko verzija iste metafore, dok druge imaju prilagođene metafore koje se mogu zamijeniti općenitijom ikonom. Počeli smo stvarati široke skupine kišobrana vrsta datoteka kako bismo cijeloj obitelji dodijelili jednu metaforu. Na taj način uspjeli smo smanjiti broj metafora vrste datoteka u našoj knjižnici za više od polovice.

Kratki prikaz nekih starih sekundarnih metafora.

2. korak: skica i dizajn

Nakon što smo imali sveobuhvatan pregled starog sustava, počeli smo s uspostavljanjem osnovnih načela organizacije za novi:

  1. Samo bi primarne vrste datoteka ostvarile asocijaciju boja logotipa proizvoda. Na primjer, .PSD bi bio plav, a .AI narančasti.
  2. Napravite neutralnu paletu za sekundarne vrste datoteka koje podržavaju više aplikacija. Na primjer, Photoshop i Illustrator koristili bi istu ikonu tipa .PNG, umjesto da svaka ima svoju jedinstvenu verziju ikone putem asocijacije na marku boja.
  3. Napravite glavnu biblioteku metafora tipa datoteka kako bi ikone bile konzistentne i izbjegavale prilagođavanje sredstava za rubne slučajeve.
Raščlanjivanje sastavnica stare ikone vrste datoteke.

Počeli smo skicirati s tim novim okvirom na umu.

Snimci ranih skica procesa.

Jedan od glavnih pokretača iza redizajna bio je pojednostavljenje i uklanjanje što više elemenata s ikone vrste datoteke bez gubitka na značaju. Spustili smo oznaku i premjestili vrstu datoteke mime na dno ikone. Također smo uklonili uvijanje stranice kako bismo izravnali dizajn i stvorili moderniji vizualni jezik.

Evolucija ikone vrste datoteke Adobe

Drugi je važan pokretač bio usklađivanje s Spectrumom - Adobeovim novim jezikom dizajniranog sučelja - koji se trenutno pojavljuje u svim našim proizvodima. Prema ovom naumu, zaokružili smo kutove ikone vrste datoteka i započeli graditi knjižnicu koja je koristila postojeće metafore iz baze Spectrum ili stvorila nove koje su usklađene sa njihovim stilom ilustracije.

Kratki prikaz Adobe-ove baze podataka Spectrum Icon.

Na kraju smo u ikonu vrste datoteke uklopili svijetle obrise boje kako bismo se povezali s postojećim brendovima logotipa našeg proizvoda. Ova je promjena stvorila ne samo kohezivniji vizualni sustav, već je ikona postala bolja u tamnim sučeljima dok bi stare ikone nestale u pozadini.

Studija kontrasta boja na tamnom korisničkom sučelju.

Korak 3: Iterati i dovršiti

Nakon što smo se odlučili za smjer dizajna, testirali smo nove ikone vrste datoteka u kontekstu. Tijekom početne revizije istražili smo sva područja na kojima se ikone vrste datoteka pojavljuju u različitim operativnim sustavima i unutar naših vlastitih proizvoda. Također smo pogledali svaki kontekst u kojem su se ikone pojavljivale u različitim veličinama i rezolucijama.

I na Mac i Windows radnim ekranima morali smo uzeti u obzir da se ikone prikazuju u Listu u odnosu na Grid pri različitim faktorima razmjera (16px je najmanja veličina sve do 512px na najvećem). Pojavio se i problem svijetlog ili tamnog korisničkog sučelja, poput "Nedavnih stavki" ili "Spotlight Search" na radnoj površini Maca. Zatim smo pogledali gdje se ikone vrste datoteka prikazuju unutar naših vlastitih proizvoda, kao što su na ploči s alatima, dijaloškom okviru preglednika medija i pozdravnom zaslonu prilikom prvog pokretanja aplikacije.

Kao što se može zamisliti, ovaj postupak brzo nas je odveo do zečje rupe svih opskurnih i zaboravljenih kutova našeg sustava u kojima žive ikone vrste datoteka. Ipak, bila je to vrijedna vježba. Moramo potpunije zamotati glavu oko zadatka.

Isječak iz različitih konteksta u kojem se pojavljuju ikone naše vrste datoteka.

Posljednji korak bio je pregled ikona vrste datoteka implementiranih u korisničko sučelje naših web i mobilnih usluga, poput Adobe Acrobat i Creative Cloud Libraries. Budući da su tim uslugama upravljali i različiti dizajnerski timovi, morali smo se s mnogo ljudi uskladiti oko našeg plana preuređenja sustava dizajniranja datoteka.

Ponosni smo na konačni rezultat, jer je novi jezik dizajna jasniji, dosljedniji i predstavlja sljedeću evoluciju Adobeovog vizualnog sustava robnih marki.
Adobe-ov novi sustav dizajniranja ikona vrste datoteka.

Korak 4: Dizajnirajte novi tijek rada

Stvorili smo novi tijek rada za proizvodnju koji je u Illustratoru koristio skriptne funkcije za sastavljanje i izvoz .PNG datoteka pritiskom na tipku. Ovaj novi predložak spasio nam je desetke sati mučno sporog i ručnog rada.

Trebao nam je i bolji način za sastavljanje ovih rasterizovanih .PNG datoteka u .ICNS (Mac) i .ICO (Windows) datoteke. U prošlosti smo koristili dodatak IconBuilder iz IconFactory-a sa našim vatrometima. Međutim, s novim tijekom rada željeli smo fleksibilnije rješenje koje će zadovoljiti naše potrebe: prvenstveno mogućnost povlačenja i ispuštanja bilo kojeg skupa .PNG datoteka i aplikacija automatski ispisuje i .ICO i .ICNS datoteke u odgovarajućim veličinama.

Nakon što smo potražili prevodilac treće strane, odlučili smo da je bolje surađivati ​​s našim inženjerima na stvaranju interne aplikacije prilagođene našim potrebama. Stvorili su nevjerojatan alat koji smo s ljubavlju zvali Captain Icon, a to je prevodilac koji smo koristili za pakiranje svih naših novih ikona datoteke. (Iako je Icon Captain još uvijek u internoj beta verziji, naši se inženjeri nadaju da će ga u skoroj budućnosti podijeliti na GitHub-u kako bi ga mogla koristiti naša zajednica programera!)

Adobeov interni .ICO i .ICNS prevodilac.

Korak 5: Provedba

Još smo u ovoj fazi i vjerojatno ćemo još dugo. Svaki put kada pošaljemo Creative Cloud izdanje, prolazimo kroz proces koji uključuje menadžere proizvoda i inženjere u mnogim timovima, osiguravajući da dizajn prolazi svuda.

Implementacija je često mučan proces komunikacije s timovima u stotinama niti e-pošte, instaliranje nekoliko verzija testne verzije za provjeru imovine, evidentiranje i rješavanje problema neizbježnih pogrešaka i upravljanje više rokova izdanja.

Naši proizvodi također su izgrađeni na različitim bazama kodova, što znači da timovi mogu različito implementirati istu imovinu i pronaći probleme jedinstvene za svaku platformu. Osiguravanje kvalitete i provođenje smjernica robnih marki vjerojatno su jedan od najmanje zabavnih zadataka našeg tima, ali važan su dio održavanja razvijajućeg sustava dizajna.

Adobeove nove ikone vrste datoteka žive u operativnom sustavu.

Male promjene mogu napraviti veliku razliku

U našem timu često koristimo metaforu bonsaj stabla kako bismo opisali posao koji radimo.

Razvijanje sustava dizajna robne marke koji sadrži stotine proizvoda oslanja se na milijun malih, inkrementalnih promjena na putu - usitnimo granu tu i tamo i vodimo stablo da raste u našem željenom smjeru s vremenom.

Iako je lako izgubiti se u pojedinostima, sve što naučimo u procesu vodi nas do sljedeće iteracije, a slijedeće nakon toga.