Pagbabago ng Visual Breaking sa Mga Disenyo ng Disenyo

Ginagalang namin ang mga API ng Code. Ngunit Ano ang Tungkol sa Kulay, Uri at Space?

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

Nagtatag ang mga sistema ng disenyo ng isang baseline visual style na isang mahalagang dependency. Ang mga pagpipilian na ito - kulay, palalimbagan, puwang at marami pa - ay matatag na tinukoy at inaasahan na stably, mahuhulaan na baguhin ang pagpapalabas sa pamamagitan ng pagpapalaya. Kapag nag-upgrade ang isang adopter, hindi dapat sirain ng isang sistema ng disenyo ang kanilang mga bagay sa hindi inaasahan.

Kaya, tanungin ang iyong sarili ...

Maaari bang mag-upgrade ang mag-upgrade sa isang menor de edad na pagpapakawala tiwala na ang kanilang UI ay hindi masira dahil sa mga pagbabago sa visual system?

Nag-aalok ang Semanting Bersyon (SemVer) ng malinaw na pamantayan upang makipag-usap ng pagbabago sa mga paglabas gamit ang mga pangunahing, menor de edad at mga pagtatalaga ng patch. Ang bawat sistema ng disenyo na nakatagpo ko ay gumagamit ng SemVer at pagbabago ng pagsubaybay sa interface ng application programming ng kanilang pakete, o API. Ito ay pamilyar na teritoryo para sa mga nag-develop ng coding ng JavaScript at markup ng HTML. Masira ang iyong API, at ang iyong susunod na bersyon ay dapat dagdagan ang bersyon sa isang susunod na pangunahing paglabas, tulad ng mula sa 1.4.0 hanggang 2.0.0.

Ang pagtukoy ng isang interface sa istilo ng visual na compositional visual ay nakakalimutan sa amin. Napakahirap na tukuyin ang malinaw, simpleng mga patakaran upang subaybayan ang mga pagbabago sa istilo. Ang mga gumagawa ng system ay nagpupumilit na maipaliwanag kung ano o bakit "Ang pagpapalit ng istilo na ito ay sumisira sa UI ng isang adopter" kumpara sa "Pagbabago ng istilo na iyon." Ilang mga koponan ng system ang nag-dokumento ng mga pamantayan. Tanong ko "Anong mga tukoy na uri ng visual na pagbabago ang nag-trigger ng isang pangunahing bersyon para sa iyo?" Ang kanilang tugon: \ (_) /.

Sa artikulong ito, iminumungkahi ko na hindi bababa sa Kulay, Palalimbagan, at pamantayan ng garantiya ng Space na bumubuo ng pagbabago ng paglabag. Mayroong iba pang mga pag-aari na dapat isaalang-alang. Ang isang disenyo ng sistema ay maaaring tukuyin, dokumento at ibigay ang mga pamantayang ito upang ang mga nag-adopt ay maaaring mag-upgrade ng pagpapakawala sa pamamagitan ng paglabas nang may kumpiyansa.

Kulay ng Paglabag

Karamihan sa mga pangkat ng system ay nakakaligtas sa pag-tune ng kulay ng background ng pangunahing pindutan. Marahil ang kanilang pagganyak ay upang mapagbuti ang kaibahan laban sa isang karaniwang puting label ng teksto. "Palaging dilimin ang teal ng kaunti," sabi nila. "Mapapabuti namin ang kaibahan ng naa-access na kulay ng kaibahan mula sa isang rating ng AA hanggang AAA."

Pagsasaayos ng kulay ng background ng isang pangunahing pindutan

Tiyak, ang pag-ampon ng mga koponan ay hindi dapat lumampas sa isang hanay ng kulay ng pangunahing pindutan. Ang paglampas sa isang pagpipilian ng system ay nakakubkob ng koneksyon sa isang system. Sa puntong iyon, ang isang ampon ay nasa kanilang sarili. Samakatuwid, ang pag-aayos ng lilim ng kulay ng background ng pangunahing pindutan ay ligtas at hindi isang sirang pagbabago.

Gayunpaman, ang pagbabago ng mga kulay sa ibang lugar ay maaaring maglagay ng panganib sa panganib. Isaalang-alang ang mga sumusunod na senaryo.

Halimbawa: Teksto ng System sa Pasadyang Mga background

Isipin ang isang sistema ng maayos na pag-tune ng interactive na asul upang mapagbuti ang kaibahan ng kulay. Ang interactive-asul ng v1.4.0 ay naa-access sa isang puting background ngunit nabigo sa uling na uling.

Pag-check ng kaibahan ng kulay sa pamamagitan ng kontra-grid.eightshapes.com

Kaya, para sa v1.5.0, nababagay ng koponan ang interactive-asul sa isang mas magaan, mas puspos na tono na nagtrabaho sa kapwa puti at uling.

Pagsasaayos ng kulay ng teksto ng isang label na pindutan ng multo sa hindi mahuhulaang mga background

Gayunpaman, ginamit ng isang adopter ang pindutan ng Ghost na nakasalalay sa kulay na iyon sa isang kulay-abo na background. Matapos ang pagbabago ng system, hindi naa-access ang kulay ng teksto ng label. Sinira ng iyong system ang kanilang produkto.

Halimbawa: Mga background sa System na may Custom na Overlaid Text

Sa katulad na paraan, isipin ang isang sistema na nagpapagaan ang kulay ngbackback ng sangkap ng Card. Ang lugar ng nilalaman ng Card ay nagsasama ng isang "ligtas" na nilalaman-lalagyan na zone kung saan ipasok ng mga adopter ang anumang nilalaman at markup na gusto nila.

Pag-aayos ng kulay ng background ng isang Card na nagbibigay-daan sa nakapaloob na pasadyang nilalaman

Sa ligtas na zone na iyon, idinagdag ng isang ampon ang pangalawang teksto na, habang ang banayad na katamtaman na kulay-abo, ay pumasa sa isang pagsubok sa kaibahan ng kulay. Matapos ang pagbabago ng system, hindi na mai-access ang kaibahan ng kulay. Sinira ng iyong system ang kanilang produkto.

Isipin ang menor de edad na paglabas ng iyong system kasama ang mga pagsasaayos. Bumalik na katugma, sinabi mo? Walang panganib sa pag-upgrade, tiwala sila? Nope! Sinira ng iyong system ang kanilang produkto!

Samakatuwid, suriin ang nagbago na mga katangian ng kulay upang matukoy kung nagbago ang isang sistema, tulad ng:

  • Kulay ng teksto na maaaring lumitaw sa itaas ng kulay ng kulay, imahe, o iba pang texture ng isang tagapagamit.
  • kulay ng background na kung saan ang kulay ng teksto ng isang nagamit ay na-overlay.
  • kulay ng background, kulay ng hangganan, kulay ng teksto, kahon ng anino, o iba pang mga pag-aari na binubuo sa tabi, sa itaas, o sa ibaba ng gilid o nilalaman ng isang bahagi upang mabawasan ang kaibahan sa pagitan ng mga elemento.

Ang pag-access ay nagtulak sa mga halimbawang ito. Mayroon ding peligrosong peligro, sa mabuting balak na mga pagbabago sa system ay maaaring makagambala sa makulay na pagkakaisa na nakamit ng isang taga-disenyo ng produkto. Ang mga pakikipag-ugnay sa kulay ay dumami sa buong UI na hindi kontrolado ng isang taga-disenyo ng system o may kakayahang makita.

Takeaway: Simulan ang pagsira sa pagbabago ng pag-uusap na may pamantayan sa kulay. Madali itong maihatid ang peligro, masusukat na obhetibo, at nakatali ito sa pag-access na pumukaw ng mga hilig. Gamit ang ilang pamantayan, maaari kang magpatuloy sa iba pang mga alalahanin.

Pagbabago ng Tipograpiya (Sa Pag-wrap)

Ang palalimbagan ay isang pangunahing aspeto ng anumang estilo ng visual. Nais ng mga koponan na tama ito. At napakaraming mga pagdayal upang mai-tune: font-family, font-weight, font-size, text-transform, linya-taas, letra-spacing, at iba pa.

Hindi lahat ng mga karanasan ay nakakasira sa panganib kung ang isang system ay nag-aayos ng palalimbagan. Para sa mga mabibigat na karanasan, ang nilalaman ng bawat elemento ay maaaring hindi mahulaan, ng iba't ibang haba, at idinisenyo upang balutin at tumugon sa mga pagbabago sa lapad ng viewport.

Para sa mas makapal na mga interface, dapat na tumpak ang typography. Gumagaling ang mga nagdidisenyo para sa maraming oras na tipograpikong pag-tune, pagsasaayos ng mga label upang magkasya sa mga compact na lugar. Kung nababagay mo ang typography ng system, ang kanilang mga elemento ay maaaring balot o i-crop sa hindi inaasahang paraan.

Halimbawa: Nakakatawa ang mga Wrapping Tab

Isipin ang iyong system ay nag-aayos ng tab labelfont-weight mula sa normal hanggang sa matapang.

Matapos ang isang menor de edad na pag-upgrade ng bersyon, hindi isasagot ang mga pambalot na mga tab. Hindi maganda.

Ang isang nag-upgrade ng nag-upgrade. Ang kanilang umiiral na mga hindi sumasagot na mga tab ay lumampas sa inilalaan na puwang, kaya balot nila. Malibog! Sinira ng iyong system ang kanilang produkto.

Halimbawa: Letter Spacing Mayhem

Ang mga alituntunin ng tatak ay nagbabago, nagbubunga ng bagong pamunuan ng pamunuan at istilo. Sa gayon, naaangkop ang iyong system sa pamamagitan ng pagdaragdag ng bawat liham ng heading.

Ina-upgrade ng isang tagapag-ayos ang kanilang siksik, solong pahina ng radiology app na isinalin sa 14 na wika, na binubuo ng maraming mga panel ng control, bawat chock na puno ng mga elemento ng form at heading. Nag-upgrade sila, at ang UI ay awash na may mga heading hindi nahuhulaan na natapos. Tumatawag sila ng isang pulong sa krisis. Inaanyayahan nila ang mga back-end data engineers, para sa kabutihan! Sinira ng iyong system ang kanilang produkto!

Ang pagsasaayos ng palalimbagan ng system ay maaaring mapanganib. Sa iyo, ito ay isang nakakapreskong ebolusyon ng typographic na walang tigil na naitatawid sa isang library. Sa kanila, ang teksto ay nagsisimula ng maling paraan. Sinisi ka nila. Siguro sinusunog ka nila sa # system-design Slack channel. Walang nangangailangan.

Takeaway: Bago ang 1.0.0, masikap na magtrabaho upang mag-eksperimento, magpino, at magtapos ng mga estilo ng uri na angkop sa sari-sari ng customer. Kapag pumasa ang 1.0.0, panatilihin ang isang matatag na base at isaalang-alang ang pagbabago na maingat. Isaalang-alang ang paglalaan ng mga mapanganib na paglilipat para sa susunod na pangunahing pagpapakawala. Hanggang sa pagkatapos, pagdaragdag ng mga nilalaman na nilalaman, tulad ng isang bahagi ng Long Form Text para sa pag-istil ng kopya ng artikulo.

Space Space at Sukat

Hindi bababa sa maaari mong makita ang kulay at palalimbagan. Space at laki? Ang mga iyon ay mas mahirap tukuyin bilang concretely reusable, huwag mag-monitor ng paglabag sa pagbabago.

Sa HTML, kapag binago mo ang mga katangian ng modelo ng kahon ng bahagi - padding, margin, lapad, taas, pagpapakita, box-sizing, posisyon, kaliwa, kanan, itaas, sa ilalim - panganib na nakakaapekto sa komposisyon ng layout na nag-aayos ng sangkap sa iba pang mga elemento ng pahina.

Halimbawa 1: Pag-alis ng Vertical Spacing

Nagpapasya ang iyong koponan ng system na alisin ang mga vertical na spacing na inilapat ang mga kontrol sa form sa form ng margin-ibaba. Nakakaapekto ito sa ,