Paglabas ng mga System ng Disenyo

Paghahatid ng Hindi Nakakonekta na Mga Resulta sa Mga Adopter sa Lipas ng Panahon

# 1 ng 6 ng serye na naglalabas ng mga Disenyo ng Disenyo:
Mga output | Kagandahan | Mga Bersyon | Paghiwa | Depende | Proseso

Napagtanto ng mga kumpanya ang halaga ng isang sistema ng disenyo kapag ang pag-ampon ng mga produkto ay gumagamit ng isang sistema upang gawin at ipadala ang mga karanasan na ginagamit ng kanilang mga customer. Bilang isang bahagi ng kadena na halaga, ang sistema ay nagpapalabas ng mga tampok sa paglipas ng panahon. Inilalagay nito ang system sa mga kamay ng customer nito: ang mga nagdisenyo at inhinyero na gumagawa ng kanilang trabaho.

Malakas ang mga koponan ng system na nagpapalabas ng seryoso. Hindi nila nakikita ang kanilang mga sarili na naglalabas lamang ng mga sangkap ng code ng library. Sa halip, naghahatid sila ng maraming higit pang mga output: mga token ng disenyo, dokumentasyon, mga assets ng disenyo, at iba pang mga mapagkukunan.

Inilalarawan ng seryeng ito ang maraming mga aspeto ng paglabas ng mga sistema ng disenyo. Magsisimula ito sa pamamagitan ng pagtukoy ng maraming mga output ng isang sistema at kung saan naihatid ito. Ang kasunod na mga artikulo ay sumasakop sa mga paksa ng cadence, pag-update, pagsira ng mga pagbabago, dependencies, at isang hakbang na hakbang.

Ang mga kwentong ito ay sumasalamin sa natutunan ko sa paglabas ng mga system na nagtatrabaho sa mga koponan tulad ng Discovery Education, Morningstar, Target, at REI. Itinaas sila ng mga pananaw mula sa mga kasamahan sa Salesforce, Adobe, Atlassian, Shopify at Financial Times. Salamat sa mabait na pagbabahagi ng iyong oras at kasanayan!

Mga output: Ano ang Inilabas?

Ang mga programang disenyo ng system ay nagpapalabas ng maraming uri ng mga output, hindi lamang ang code. Bilang isang resulta, ang isang sistema ay dapat na magkakaiba at makipag-usap sa saklaw ng mga na-bersyon na mga output sa mga developer, designer, at iba pang mga customer.

Code, ang Pinagmulan ng Katotohanan

Karamihan sa mga sistema ay nag-aalok ng isang solong mapagkukunan ng katotohanan ng paglalagay ng patong na layer code bilang:

  • Component Library ng UI bilang HTML Markup at CSS. Madalas na tinutukoy bilang "ang CSS," ang pagkonsumo ng package na ito ay nakasalalay sa paggamit o pag-iipon ng CSS bilang isang pare-pareho na baseline ng visual na estilo na kasama ng muling paggamit ng mga snippet ng HTML.

at / o ...

  • Mga Komponaryo ng UI bilang Javascript: Maraming mga system ang bumalot ng HTML at CSS sa JavaScript upang palakasin ang logic, encapsulate style, at kadalian ang pagsasama at pagpapanatili nang direkta sa isang balangkas na pinili. Habang ang karamihan sa mga aklatan ay nagta-target ng isang tiyak na balangkas (React, Vue, Ember, Angular, ...), ang mga signal ng industriya ay nagmumungkahi ng isang paglipat sa paggawa ng mga bahagi ng web para sa lahat ng mga frameworks. Ang aking huling anim na pagsisikap ng system? Mamaya 2017: Vanilla HTML, Vanilla HTML. Maagang 2018: React, Vue. Mamaya 2018: Mga Web Components, Web Components.

Bilang karagdagan, ang iba pang kilalang mga output ay maaaring mailabas nang hiwalay:

  • Ang mga disenyo ng Token na nagtatatag ng isang estilo ng visual sa pamamagitan ng semantically makabuluhang mga pares ng halaga ng pag-aari. Ang mga token ay mga variable na magagamit sa maraming mga format para magamit sa buong platform (web, iOS, Android), preprocessors (Sass and LESS), at mga frameworks (tulad ng React). Ang ilang mga system ay pinamamahalaan ang mga token sa isang imbakan na hiwalay mula sa code ng sangkap ng UI. Bilang isang resulta, ang kanilang library - kasama ang iba pang mga pagpapatupad - ay maaaring depende sa token bilang isang pakete.
  • Mga Demo Apps / Site bilang isang kapaligiran na may mga halimbawa ng pahina na binuo gamit ang library ng sangkap. Ang demo din para sa mga tutorial at mabilis na prototyping, kasama ng mga taga-disenyo!
  • Ang mga sangkap ng cross-platform na angkop para sa iOS, Android, at Windows.

Mga Asset ng Disenyo

Karamihan sa mga koponan ay nililimitahan ang pag-unawa sa kung ano ang inilalabas nila sa simpleng "inilalabas namin ang code." Pagbukas ng mata para sa kanila na mapagtanto na naglalathala sila ng napakaraming iba pang mga tool na nagbabago sa paglipas ng panahon. Kasama nila ang:

  • Mga Toolkit ng Disenyo bilang mga file ng template at mga simbolo ng simbolo na inaalok sa disenyo ng software. Ngayon, halos palaging Sketch. Bukas, Figma, Invision Studio, at iba pang mga umuusbong na kakumpitensya?
  • Mga Font, Icon, at maging ang Mga Sets ng Larawan ni Origami dahil sa madalas na inaasahan na papel ng isang sistema sa pamamahagi at pag-bersyon ng mga naturang aklatan.
  • Iba pang mga Mapagkukunan ng Disenyo tulad ng paglalarawan at kulay swatch ASE / CLR file bilang isang springboard para sa mga gawaing sining na bespoke. Ang mga koleksyon na ito ay nagbabago nang dahan-dahan, hindi gaanong pormal, at sa pamamagitan ng mga kontribusyon ng mga miyembro ng komunidad na hindi isang bahagi ng isang pangkat ng pangunahing sistema. Gayunpaman, mula sa pananaw ng customer at komunikasyon ng system, bahagi ito ng system.

Site ng Dokumentasyon

Ang mga sistema ng disenyo ay nangangailangan ng isang bahay, isang lugar na alam ng lahat na maaari silang makahanap ng isang landas sa lahat na magkakaroon ng pinakabago at pinakadakila. Nakalagay sa isang hindi malilimutang URL, madalas itong itinayo kasama ang mga sangkap ng UI na tiyak sa misyon nito.

  • Inilarawan ng mga Site ng Dokumentasyon ang mga tampok (tulad ng isang pindutan), sa mga bagong gumagamit, at mga proseso ng pag-trigger tulad ng pagkuha ng tulong o pag-ambag. Ang mga koponan ay nagtatayo ng mga site nang mas madalas gamit ang isang static na site generator o mas madalas sa isang sistema ng pamamahala ng nilalaman.
  • Mga Bahagi ng Dokumentasyon - code-halimbawa-pares, do-dont, hex-code, component-explorer - nakasalalay sa mga sangkap ng library ng UI at nagsisilbi karaniwang lamang ang site ng doc. Ang nasabing mga sangkap ay maaaring mai-bersyon sa site ng dokumentasyon o bilang isang pangatlo, hiwalay na na-bersyon na library na nauugnay sa doc at mga sangkap ng UI na kanilang pinapahinga.

Mga patutunguhan: Saan Ito Pupunta?

Kapag namamahagi ng mga code at mga assets ng disenyo, mahalaga na mag-alok ng code sa mga kaugalian na madaling madamdamin ng iyong mga inhinyero. Nangangahulugan ito na ang ilang mga system ay dapat mag-alok ng pagpipilian sa maraming mga pagpipilian, habang ang iba ay maaaring umasa sa isang solong pagpipilian bilang pamantayan sa organisasyon.

Para sa Code

  • Pinakamahusay: Mga rehistro tulad ng npmjs (o isang panloob na katapat tulad ng Sonatype's nexus) na nagbibigay ng pag-access at pamamahala ng mga pinakawalan na mga package ng code. Pagkatapos ay ginagamit ng mga nag-develop ang mga tool tulad ng bower, npm, sinulid, webpack, at babel upang maisama at mai-upgrade ang maayos na code sa kanilang mga kapaligiran.
  • BETTER: Mga naka-host na assets sa CDN para sa mga direktang link sa istilo ng naka-bersyon at script pati na rin ang mga font at mga icon na mabagal ang pagbabago.
  • LANG LANG: Ang Pag-access sa Pag-access sa Github, Bitbucket o ang gusto upang clone, tinidor, o kung hindi man ay iipon, gamitin at marahil - sa huli - mag-ambag.
  • KUNG NECESSARY: Mga Pag-download ng Direct Code, kadalasan ng "ZIP file" ng pinagsama o hindi naka-file na mga ari-arian ng system mula sa site ng doc para sa lokal na paggamit at / o manu-manong pagsasama sa isang hiwalay na imbakan.

Ang Bootstrap at Material Design Lite ay mga halimbawa na ilalabas sa 2+ patutunguhan.

Para sa Mga Toolkit na Disenyo

  • Pinakamahusay: Lumikha ng Bago bilang naka-sync, naka-embed na landas sa menu ng tool ng disenyo upang lumikha ng isang bagong halimbawa mula sa isang template.
  • BETTER: Na-bersyon at ipinamamahagi gamit ang software na pamamahala ng pagdidisenyo ng software na may disenyo ng pahintulot tulad ng Abstract o Lingo.
  • MABUTI: Ang direktang pag-download ng toolkit mula sa isang site ng dokumentasyon, na may malinaw na bersyon na ipinahiwatig at nauugnay sa Pagsisimula na dokumento sa malapit.
  • LANG LANG: Ibinahagi ang pagmamaneho, sa pamamagitan ng mahusay na naisapubliko at posibleng pinasimple na panloob na URL (tulad ng http: //system.uitoolkit).
  • HINDI MABUTING MALINGIN: Inilibing sa ilang ika-apat na pahina ng antas sa isang bahagyang naayos na wiki site na maraming tao ang hindi mahahanap.

Susunod → # 2. Kagandahan