Portfolio dizaina sistēma

Dizaina sistēma nesākās kā atsevišķs UI komplekts. Tā izauga no aģentu izstrādes praktiskajām sekām: vietni varēja mainīt ātri, taču katrs straujš lokāls uzlabojums varēja arī mazināt produkta viengabalainību.

Aģents varēja uzlabot vienu kartīti, atrisināt vienu izkārtojumu vai pievienot vienu lapu, neizprotot citur jau pieņemtos lēmumus. Komponenti pakāpeniski ieguva pārklājošus pienākumus. Līdzīgas saskarnes sāka atšķirties. Īpašniekam nācās atkārtot vienu un to pašu labojumu, jo iepriekšējā izmaiņa bija salabojusi lapu, bet neko nebija iemācījusi sistēmai.

Portfolio dizaina sistēma kļuva par vietu, kur šie labojumi uzkrājas kā produkta atmiņa.

Katrs būtisks labojums pēc darbojošās saskarnes pārskatīšanas tiek izvērtēts kā iespējamas atkārtoti izmantojamas zināšanas un ievietots atbilstošajā līmenī.

Process sākas ar publicēto saskarni, nevis abstraktu maketu. Īpašnieks pārbauda, kā reāla lapa ir lasāma, kur kartīti kļūst grūti pārskatīt, kā galvene uzvedas mobilajā ierīcē, vai garas formas saturs nekļūst pārāk smags un vai projekta lapa sniedz MI aģentam pietiekamu kontekstu.

Vispirms konkrētā problēma tiek izlabota produktā. Pēc tam jānosaka, kāda veida lēmumu labojums pārstāv. Tas var palikt lokāls, kļūt par publisku parametru, pāriet uz vecākkomponentu, ieviest žetonu, mainīt lapas veidni vai kļūt par visas sistēmas noteikumu.

Ja atziņa var uzlabot turpmāko darbu, tā tiek paaugstināta līdz dizaina sistēmas līmenim. Nākamais aģents saņem ne tikai izlabotos pikseļus, bet arī lēmumu aiz tiem.

Vizuāls priekšskatījums var parādīt komponenta izskatu, bet nevar pilnībā izskaidrot tā robežas. Aģentiem jāzina arī tas, par ko komponents atbild, kas jānodrošina tā vecākam, kuri parametri ir publiski, kuri stāvokļi pastāv tikai dokumentācijai un kur kompozīcijai jābeidzas.

Tā radās Essence faili: īsi semantiski dokumenti, kas apraksta katras nozīmīgās sistēmas daļas mērķi, līgumu, atbildību, robežgadījumus un attiecības. Tie atrodas līdzās realizācijai un priekšskatījumiem kā rokasgrāmata cilvēkiem un aģentiem.

Page Template ir labs piemērs. Tas pārvalda kopīgo ietvaru: Header, maināmu saturu un Footer. Tam nav jāzina, vai saturs ir raksts, projekts vai sākumlapa. Article Page, Project Landing Page, Project Story Page un Home Page pārvalda attiecīgās satura struktūras.

Šī robeža izskatās neliela, taču neļauj kopīgam komponentam kļūt par neredzamu visa produkta kontrolieri. Dizaina sistēma reģistrē šādus lēmumus, jo strukturālu novirzi pamanīt ir grūtāk nekā nepareizu krāsu.

Sistēma dzīvo pakotnē @portfolio/design-system, un to izmanto pats publiskais Portfolio. Dokumentācija ir pieejama ceļā /design-system/, kur katram dokumentētajam elementam ir maršruts, reģistra ieraksts, priekšskatījums un Essence.

Tas padara dokumentāciju operacionālu, nevis dekoratīvu. Komponenti tiek pārbaudīti tajā pašā vidē, kurā tos izmanto. Priekšskatījuma vadīklas atklāj atbalstītos stāvokļus, bet reģistrs un Essence faili pirms izmaiņām sniedz aģentiem sistēmas karti.

Vēlāk dokumentācija tika sadalīta pa maršrutiem. Katrs maršruts ielādē tikai savu dokumentu un priekšskatījuma atkarības, savukārt navigācijas ietvars saglabājas starp lapām. Tādēļ katalogs darbojas kā produkta daļa, nevis liela iekšēja lapa blakus tam.

Portfolio dizaina sistēma savieno trīs produktu zināšanu veidus.

Vizuālais slānis nosaka, kā vietne ir lasāma un uzvedas: tipogrāfiju, atstarpes, krāsu, mijiedarbības stāvokļus, responsīvos ierobežojumus, kartītes, navigāciju, garas formas saturu un kustību.

Inženierijas slānis nosaka, kā šī uzvedība tiek salikta: komponentus, parametrus, atbildības robežas, reģistrus, maršrutus, lapu veidnes un multivides ietvarus.

Aģentu slānis izskaidro, kā turpmākām izmaiņām jāsaglabā šie lēmumi. Essence faili, noteikumi, priekšskatījumi, attiecību kartes un Git pārvaldīts izmaiņu žurnāls ļauj aģentam izpētīt esošo sistēmu, nevis minēt to no ekrānattēla.

Vērtība rodas, uzturot šos slāņus savienotus. Vizuāls lēmums bez realizācijas atbildības kļūst trausls. Komponentu bez produkta nolūka var viegli izmantot nepareizi. Aģentu norādes bez darbojošās saskarnes kļūst par novecojušu dokumentāciju.

Pirmais laidiens izveidoja lokālu pakotni un darbojošos komponentu katalogu. Portfolio augot, dizaina sistēma uzņēma reālam saturam nepieciešamos paraugus: rakstu kartītes un izkārtojumus, projektu lapas, bagātinātu tekstu, saistīto saturu, responsīvu navigāciju, lapu veidnes un publiskos metadatus.

Vēlākie laidieni risināja īpašas aģentu vajadzības. Essence nodošana kļuva par komponentu darba daļu. Agent Ready Project Brief katrai projekta lapai pievienoja īsu konteksta bloku cilvēkiem un MI sistēmām. Publiskā taksonomija pārgāja no "use cases" uz "projects", un šīs izmaiņas tika izplatītas komponentos, maršrutos, dokumentācijā un saderības pāradresācijās, nevis palika par teksta labojumu.

Projektu vizuālie materiāli radīja vēl vienu atkārtoti izmantojamu slāni. Reāllaika SVG ainas paliek avots un rezerves variants, savukārt kopīgie multivides ietvari nodrošina responsīvus MP4 un WebM mobilajām ierīcēm, planšetēm, datoriem un īpaši platiem izkārtojumiem. Vienam projektam veidots vizuālais materiāls var paplašināt multivides sistēmu, neliekot katrai vecāksaskarnei apgūt projekta specifisko uzvedību.

Līdz versijai 0.22.0 sistēma aptvēra sākumlapu, projektu sākumlapas un stāstu lapas, projekta aktuālā stāvokļa attēlojumu, piezīmes, rakstu izkārtojumus, kartītes, bagātinātā teksta atveidi, navigācijas ietvaru, responsīvu uzvedību, dokumentācijas maršrutus un projektu animāciju multividi.

Šī ir darbojoša dizaina sistēma vienam publiskam produktam. Tai ir kopīga pakotne, Git pārvaldīta laidienu vēsture, reģistrā balstīta dokumentācija, dzīvi priekšskatījumi, semantiski Essence un tieši pierādījumi publicētajā saskarnē.

Tā vēl nav pārbaudīta kā universāla komponentu bibliotēka vai infrastruktūra vairākām neatkarīgām komandām. Produkta spriedums joprojām ienāk caur īpašnieka pārskatīšanu, un sistēmu turpina veidot šī Portfolio vajadzības.

Šī robeža ir apzināta. Sistēma nopelna abstrakciju ar atkārtotu lietojumu. Noteikums tiek paaugstināts tāpēc, ka darbojošajam produktam tas bija vajadzīgs vairāk nekā vienreiz, nevis tāpēc, ka iepriekš tika izdomāta pilnīga dizaina arhitektūra.

Aģentu darbplūsmā dizaina sistēma pārnes spriedumu uz priekšu. Tā neļauj nākamajai realizācijai sākties ar tukšu uzvedni un pārvērš atkārtotus cilvēka labojumus noturīgā produkta uzvedībā.