Soli pa solim dizaina sistēmas izveides ceļvedis

Ievads

Šajā visur un visur pieejamo ierīču laikmetā visur pieejamība ir kļuvusi par normu. Tomēr ir arī labi zināms, ka konsekvence ir uzticamība. Lietotāji tagad ir zinošāki. Neatkarīgi no saskarnes, ātra un vienmērīga pieredze ir pamatprasība.

Turklāt laiks ir vērtība, ko nevarat atļauties izniekot. Ar to visu vajadzētu pietikt, lai mudinātu jūs darīt vairāk ar savu tīmekļa vietni vai saskarni. Tomēr mēģināt bez kļūdām būt konsekventam ar 50 dažādiem dizaina komponentiem ir liels izaicinājums.

"Design System" ir šeit, lai atvieglotu jūsu dzīvi.

Kas ir dizaina sistēma?

Dizaina sistēma ir plašs skaidri dokumentētu atkārtoti izmantojamu komponentu arhīvs, ko produktu komanda var izmantot, lai radītu digitālo pieredzi. Citiem vārdiem sakot, dizaina sistēmas uzskatiet par vienīgo patiesības avotu uzņēmumam attiecībā uz dizainu.

Dizaina sistēma ir vairāk nekā stila ceļveži vai paraugu bibliotēkas - tā pastāvīgi attīstās. Šo vadlīniju ekosistēmu, kas saistīta ar dažādām vienībām, tostarp UX dizainu, var izmantot kā jebkura projekta pamatelementu sistēmu, lai nodrošinātu, ka visi komponenti ir konsekventi un atbilst zīmolam.

Dizaina sistēma ir noderīga gan jaunuzņēmumiem, gan augošiem uzņēmumiem, gan uzņēmumiem, taču, izstrādājot produktu, tā kļūst par būtisku un neatņemamu līdzekli. Tā var arī pozitīvi ietekmēt uzņēmējdarbības mērķus, darba plūsmu, komandas darbu, lietotāju pieredzi un vispārējo zīmola pieredzi.

Kādas ir dizaina sistēmas priekšrocības?

Dažas no sistēmas projekta īstenošanas priekšrocībām ir šādas.

1. Palielina efektivitāti, vienlaikus samazinot laiku - Jebkuras projektēšanas sistēmas galvenā priekšrocība ir spēja ātri izveidot un atjaunot projektēšanas un izstrādes darbus. Komandas var izmantot iepriekš sagatavotus elementus, lai samazinātu nepieciešamību pastāvīgi izgudrot jaunu ratu un mazinātu nekonsekvences risku.
2. Uzlabo vizuālo konsekvenci starp lapām un kanāliem - organizācijas mēroga dizaina sistēmas trūkums var novest pie nekonsekventas vizualizācijas, sadrumstalotas lietotāja pieredzes vai izolētības no zīmola. Saskaņots standartu kopums arī palīdz pārvaldīt lielus pārveidojumus vai vizuālos zīmola maiņas mērogā.
3. Veicina vienotu valodu - kopīga dizaina valoda samazina iespēju, ka projektēšanas vai izstrādes laiks tiek izniekots nepareizas komunikācijas dēļ starp dažādām komandām un starp tām.
4. Ļauj labāk koncentrēties uz sarežģītākām problēmām - komandas var labāk atrisināt sarežģītākas problēmas, piemēram, informācijas prioritāšu noteikšanu, ceļojumu pārvaldību u. c., ja ir izveidotas vienkāršas un nepārprotamas UI sastāvdaļas.
5. kalpo kā uzziņu un izglītojošs rīks darbiniekiem, kas sniedz informāciju - Dizaina sistēma atvieglo darbā iekārtošanas procesu personāla izmaiņu gadījumā. Tā palīdz arī atvieglot jaunu individuālu darbinieku iesaisti UI UX dizaina vai satura radīšanā.
6. Veicina spēcīga un mūžīga zīmola veidošanu - Dizaina sistēmas mērķis ir komunicēt konkrētu identitāti un dizainu, kas ir pamatā produktiem, kurus tā pavada. Tas palīdz radīt iespaidīgus zīmolus un palīdz cilvēkiem atcerēties zīmola pieredzi. Tas liek cilvēkiem justies vairāk saistītiem ar zīmolu un vairāk tam uzticēties.

Desmit soļu ceļvedis dizaina sistēmas izveidei

Mēs esam izstrādājuši desmit soļu procesu, lai palīdzētu jūsu uzņēmumam izveidot dizaina sistēmu.

1. Rūpīgi izanalizējiet esošo projektēšanas procesu.

Pirmais solis, lai izstrādātu stratēģiju un uzsāktu jebkuru procesu, ir saprast, kur šobrīd atrodaties. Jūsu organizācijas pašreizējā dizaina procesa pārskatīšana un analīze var palīdzēt labāk izprast jūsu zīmolam vispiemērotāko sistēmas dizainu. Uzdodiet sev šādus jautājumus:

• Kāda ir jūsu organizācijas pašreizējā dizaina pieeja?
• Kādus esošos rīkus jūsu organizācija izmanto?

Pārliecinieties, ka novērtējat produkta komandas izstrādes brieduma līmeni. Tas palīdzēs jums aptuveni noteikt laiku, kas nepieciešams jaunās sistēmas ieviešanai jūsu organizācijā.

2. Nosakiet sava zīmola alfabētu

Zīmola alfabēts veido zīmola identitāti, t.i., zīmola un produkta vērtības un zīmola valodu. Zīmola valodu veido formas, fonti, krāsas, animācijas, balss un tonis.

Dizaineri izmantos vizuālo valodu, ko nosaka zīmola alfabēts. Zīmola vadlīniju pārskatīšana un sarunas ar ieinteresētajām pusēm var palīdzēt jums izprast zīmola identitāti un valodu.

3. Veikt pašreizējā produkta AI auditu

Pašreizējā produkta UI audita veikšana palīdzēs jums atrisināt galveno produkta dizaina problēmu - dizaina dublēšanos. Audita mērķis ir sasniegt divus mērķus.

• Pievērsiet uzmanību tām produkta jomām, kurās ir būtiskas neatbilstības.
• Atpazīstiet visvairāk izmantotos un būtiskākos produkta elementus.

UI audits ir vairāku posmu process. Ļoti svarīgi ir identificēt un analizēt galvenās UI īpašības un to izmantošanu komponentēs. Varat izmantot pieejamos rīkus, lai noskaidrotu unikālo krāsu un burtu veidu skaitu jūsu stila lapās. Pēc tam varat turpināt sadalīt katru vietnes dizainu atsevišķos elementos.

4. Nosakiet savas sistēmas projektēšanas principus

Lai radītu izcilu lietotāja pieredzi, ir svarīgi izprast dizaina lēmumu iemeslus. Turklāt skaidrs mērķu kopums atvieglo dizaina principu definēšanu un koordināciju ar komandām.

Vēlaties izveidot dizaina sistēmas procesu? Sāciet ar šiem jautājumiem:

• Ko jūs radāt
• Kāpēc jūs to
• Kā jūs to veidosiet

Dizaina principiem ir jāatspoguļo jūsu zīmola vērtības un vīzija.

5. Komponentu bibliotēkas izveide

Tā ir pazīstama arī kā Modeļu bibliotēka, un tajā jāietver visi lietotāja saskarnes funkcionālie un dekoratīvie elementi. Izvērtējiet komponentus atbilstoši projektam, lietotāju vajadzībām un uzņēmējdarbības mērķiem un saglabājiet tos, kas jums ir nepieciešami.

6. Izstrādāt noteikumus

Projektēšanas sistēmas nav veidotas tā, lai ierobežotu projektētājus ar konkrētu projektēšanas virzienu. Gluži pretēji, tām ir tikai jānodrošina dizaineriem un izstrādātājiem pamatstruktūra, kas paplašina radošo virzienu un dod iespēju inovācijām.

Tās ir divas pieejas Dizaina sistēmas noteikumiem, kā minēts Allas Holmatovas grāmatā:

• Stingri noteikumi - Dizaineri un izstrādātāji ievēro stingru procesu, lai ieviestu jaunus modeļus vai sastāvdaļas.
• Brīvs regulējums - šie noteikumi ļauj dizaineriem un izstrādātājiem radīt, neievērojot stingrus ierobežojumus, ja viņi uzskata, ka tas nodrošina labāku dizainu.

Tāpat kā daudzos citos dzīves aspektos, ir svarīgi atrast pareizo līdzsvaru starp šiem noteikumiem, lai produkts būtu konsekvents un vienlaikus radošs.

7. Izvēlieties savu pārvaldības modeli

Dinamiskām, pastāvīgi mainīgām projektēšanas sistēmām ir nepieciešams vienkāršs izmaiņu apstiprināšanas un ieviešanas process. Ir trīs pārvaldības modeļi:

• Solitārs modelis - indivīds vai indivīdu grupa tieši "pārvalda" projektēšanas sistēmas procesu.
• Centralizēts modelis - viena komanda ir atbildīga un vada sistēmas attīstību.
• Federatīvais modelis - sistēmas izstrādes procesu vada vairāki cilvēki no vairākām grupām.

Lai gan katram no šiem modeļiem ir savi plusi un mīnusi, jo īpaši vientuļnieka modelis var novest pie tā, ka viens atbildīgais cilvēks kļūst par daudzu uzdevumu izpildes sastrēgumu. Vislabāk ir izmantot dažādu modeļu kombināciju, kas atbilst jūsu vajadzībām.

8. Komponentu struktūras definēšana

Funkcionālo komponentu dublēšanās ir būtisks izaicinājums projektēšanas sistēmās. Tā rezultātā sistēma kļūst neelastīga un dizaineriem (un izstrādātājiem) ir jārada jauni elementi ikreiz, kad tiek izstrādāts jauns scenārijs.

Veiksmīgi izstrādāti sistēmu dizaini ir viegli atkārtoti lietojami un ļauj lietotājiem tos izmantot kā pamatu saviem produktiem. Tāpēc ir ieteicams izstrādāt elementus, kurus var atkārtoti izmantot dažādos saturos.

Atkārtoti lietojamu un mērogojamu komponentu kritēriji:

• Modulāra - neatkarīgas sastāvdaļas un savstarpēji nomaināmi elementi.
• Kompozīvisms - esošo komponentu sapludināšana, lai izveidotu jaunus komponentus.
• Pielāgojami - pielāgojami komponenti, kas darbojas dažādos kontekstos.

9. Pārliecinieties, ka visas komandas izmanto vienotu valodu

Projektēšanas sistēmas mērķis ir arī atvieglot vienotu komandas darbu. Tāpēc ir ļoti svarīgi integrēt sistēmu komandu darba plūsmā. Tā palielina produktivitāti, vienlaikus nodrošinot vērtību komandas locekļiem.

Labāka izpratne par to, kā dažādi cilvēki izmanto projektēšanas sistēmu sākotnējā integrācijas procesā, var palīdzēt attiecīgi mainīt sistēmu.

10. Regulāra izmaiņu nodošana

Projektēšanas sistēmas process attīstās līdz ar organizāciju un nevar būt statisks. Tāpēc pēc sistēmas ieviešanas organizācijā ir svarīgi paziņot par visām izmaiņām un pastāvīgi informēt organizāciju.

Īss un labi uzturēts izmaiņu saraksts var palīdzēt lietotājiem saprast dažādus atjauninājumus un to, kā tie ietekmēs viņu darbu.

Trīs piemēri, lai sāktu darbu

Atlassian projektēšanas sistēma

(https://atlassian.design/)

Slavenā Austrālijas uzņēmumu programmatūras uzņēmuma Atlassian Design System mērķis ir nodrošināt vienmērīgu sadarbību starp elastīgām, izkliedētām komandām visā pasaulē.

Trello un Jira, divi plaši izmantotie Atlassian sadarbības rīki, pilnībā atspoguļo uzņēmuma dizaina filozofiju. Šī filozofija ir saistīta ar digitālās pieredzes izmantošanu, lai palielinātu komandu un atsevišķu komandas locekļu produktivitāti un vispārējo potenciālu.

Atlassian Design System piedāvā elastīgas metodes un efektīvu katra projekta posma izsekošanu, sākot no produkta plānošanas līdz piegādei. Tas galu galā nodrošina labvēlīgus produktu radīšanas un piegādes rezultātus. Projektēšanas sistēma galvenokārt ietver:

1. Dizaina vadlīnijas
2. Zīmola standarti
3. Produkts
4. Ilustrācija
5. Prototipu veidošana
6. Mārketings
7. Personība

IBM projektēšanas sistēma

(https://carbondesignsystem.com/migrating/guide/design)

IBM ir lielisks piemērs lielam IT uzņēmumam, kas darbojas globāli un ievēro savu dizaina sistēmu.

To iespējas ietver visu, sākot no uzņēmējdarbības konsultācijām un finansēšanas līdz programmatūras izveidei, IT mitināšanai/pārvaldībai un risinājumiem, kas savieno programmatūru ar aparatūru.

IBM pamatprincips ir nepārtraukti virzīt progresu, neatkarīgi no tā, vai tā ir cilvēku sabiedrība vai zīmols, izmantojot zinātni, saprātu un intelektu.

IBM uzskata, ka labs dizains ir ne tikai nepieciešamība, bet arī pienākums pret lietotājiem. Lūk, dažas no viņu Carbon Design System izcilākajām funkcijām, kas nodrošina izstrādātājiem un dizaineriem, kuri strādā ar Adobe, Axure un Sketch, daudzus rīkus un resursus:

1. Datu vizualizācija
2. Modeļi
3. Sastāvdaļas
4. Vadlīnijas
5. Mācību pamācības

Uber dizaina sistēma

(https://baseweb.design/)

Mēs visi vismaz reizi esam izmantojuši Uber. Šis amerikāņu tehnoloģiju uzņēmums balstās uz pārvietošanos, tostarp pārtikas piegādi, braukšanu ar automašīnām, savstarpēju braucienu koplietošanu un mikromobilitāti, izmantojot skrejriteņus un elektriskos velosipēdus.

Lai šāda veida pakalpojums darbotos nevainojami, Uber ir nepieciešama efektīva sistēmas konstrukcija, kas nodrošina nevainojamu visu apakšzīmolu, iekšējo zīmolu, produktu un projektu darbību.

Uber Design System galvenie atribūti ir šādi:

1. Zīmolu arhitektūra
2. Sastāvs
3. Balss tonis
4. Kustība
5. Ilustrācija
6. Fotogrāfija
7. Ikonogrāfija
8. Krāsa
9. Logotips
10. Tipogrāfija

Norādes, kas jāzina pirms pirmās dizaina sistēmas izveides

1. Agrīna un skaidra saziņa ir jūsu jaunais labākais draugs

Iesaistīt iekšējos patērētājus uzreiz var būt sarežģīti. Patiesībā viņu atsauksmes var kavēt procesu, ja tās ir neskaidras, tiek sniegtas pārāk agri alfa vai beta versijas ciklā vai nav noderīgas.

Pastāstiet saviem klientiem, dizaina sistēmas lietotājiem, kas jums ir nepieciešams, lai nodrošinātu konstruktīvu atgriezenisko saiti. Ja esat agrīnā pirmsizlaides ciklā, esiet godīgi un skaidri norādiet, kādu tieši informāciju vēlaties saņemt. Tas norāda, ka jūs meklējat produkta būtiskākos trūkumus, nevis augstas precizitātes kritiku.

Esi uzmanīgs no pārdomām, kas vājina tavu prātu, bet nevilcinies pārlieku komunicēt.

2. Jūsu soļi nav vienīgā lieta, kas jums jāseko.

Būtisks trūkstošais prioritāšu noteikšanas elements bieži vien ir dizaina sistēmu izmantošanas izsekošana. Ir obligāti jāsaprot, kur sistēmu izmanto, kas, cik bieži un cik bieži to atjaunina.

Ieviešot ikdienas statistikas apkopošanu par to, kuras komandas izmantoja tieši kuras bibliotēkas versijas, var precīzi saprast, cik ātri tiek pieņemta, atjaunināta un samazināta bibliotēkas versija.

Kad esat identificējis komandas, kas reti atjaunina, varat noskaidrot problēmas, kas bloķē atjaunināšanu, un pēc tam tās novērst.

3. Atgriezeniskās saites mehānismi ir tikpat nenovērtēti kā Rhaeghal no GOT

Lai nodrošinātu, ka jūsu sistēma ir ne tikai vērtīga tās lietotājiem, bet arī kaut kas tāds, ko viņi jūtas piederīgi un ko viņi ir aktīvi veidojuši, ļoti svarīgi ir nodrošināt vienkāršus, bet vienkāršus veidus, kā lietotāji var sniegt atsauksmes (Slack, e-pasts u. c.) un dot savu ieguldījumu sistēmas attīstībā.

Vienmēr sniedziet norādījumus par to, kā un kur sniegt atgriezenisko saiti pēc iespējas vairāk vietās, un nekad neko neparedziet, jo īpaši to, ka lietotājs to atradīs vietā, kas, jūsuprāt, ir visredzamākā.

Dizaina sistēma ir ziemeļzvaigzne, kas nepieciešama jūsu organizācijai

Veiksmīga, labi izstrādāta dizaina sistēma kļūst par daļu no uzņēmuma mugurkaula, nodrošinot konsekventu un pastiprinātu pieredzi. Turklāt dizaineri un izstrādātāji iegūst iespēju labāk atspoguļot produkta mērķi, nevis sastingt, liekot kopā pamata blokus.

Jebkurš speciālists var būt jūsu partneris dizaina izstrādē, taču tikai dizaina speciālists var identificēt pašreizējās problēmas, izaicinājumus un vēlmes, lai izstrādātu dizaina sistēmu tieši jums. Tagad nav laika gaidīt. Izmantojot šo plašo rokasgrāmatu par to, kā izveidot dizaina sistēmu, jūs esat tikai iniciatīvas attālumā no pilnīgas ražošanas procesa pārveidošanas.

Atsauces

https://ionic.io/resources/articles/why-every-company-needs-a-design-system

https://www.baianat.com/books/merits-of-design-systems/design-systems-and-their-benefits

https://www.uxpin.com/create-design-system-guide/

https://builtin.com/design-ux/11-benefits-design-systems

https://elementor.com/blog/design-system/

https://www.nngroup.com/articles/design-systems-101/

https://www.uxpin.com/studio/blog/best-design-system-examples/#h-4-uber-design-system

https://www.eleken.co/blog-posts/7-design-systems-examples-for-your-inspiration

https://aufaitux.com/blog/best-design-systems/

https://www.copycat.dev/blog/design-system-examples/

https://builtin.com/design-ux/design-system

https://www.editorx.com/shaping-design/article/design-system-examples

https://medium.com/spotify-design/5-things-i-wish-id-known-before-starting-a-design-system-at-spotify-f8624abf1081