Kung nagbukas ka ng usapan nitong mga nakaraang araw, maaaring napansin mong may kakaiba.
Medyo tumahimik ang chat interface. Mas madaling basahin ang mga mensahe. Mas magaan ang pakiramdam ng mga control. Hindi na gaanong nakikipag-agawan ng pansin ang mga panel at dialog sa mismong usapan. Walang lumipat sa hindi pamilyar na lugar, pero nagsimulang maging mas payapa ang espasyo sa paligid ng mga karakter mo.
Sa chat kami nagsimula dahil dito ginugugol ng maraming tao ang pinakamahabang oras nila sa Reverie. Ito rin ang pinakamainam na lugar para subukin ang tanong sa likod ng redesign na ito: ano ang dapat na pakiramdam ng interface kapag kailangan itong manatiling komportable sa buong usapan, hindi lang gumawa ng malakas na unang impresyon?
Ang nakita mo roon ay hindi hiwalay na pagpapabago. Ito ang unang nakikitang bahagi ng bagong design system, at pinalawak na namin ngayon ang system na iyon sa buong produkto—mula sa pagtuklas at mga page ng karakter hanggang sa mga tool sa paggawa, stories, pagbabayad, mga reward, mga setting, at ang maliliit na utility screen sa pagitan ng mga ito.
Laging naging makulay ang personalidad ng Reverie.
Lumitaw ang personalidad na iyon kahit saan: matitingkad na border, kitang-kitang anino, patong-patong na card, makukulay na control, at mga surface na gustong magmukhang bagay sa halip na mga parihaba sa screen. Nagbigay ito ng init sa produkto at ginawa itong madaling makilala bilang amin.
Pero ang isang visual na wika ay maaaring tama para sa isang yugto ng produkto at maging masyadong mabigat para sa susunod.
Habang lumalaki ang Reverie, kinailangang suportahan ng interface ang higit pa sa pagtuklas. Mas matagal nang namamalagi ang mga tao sa loob ng mga usapan, namamahala ng mga karakter, nagsusulat ng mga kuwento, naghahambing ng mga plan, nagko-configure ng mga advanced na tool, at lumilipat-lipat sa mga workflow na lalong nagiging masalimuot. Ang parehong mga dekorasyong nagbigay ng karakter sa isang landing page ay puwedeng maging biswal na ingay kapag inulit sa bawat dialog, card, menu, at button.
Kaya hindi namin ni-redesign ang Reverie para gawin itong hindi gaanong natatangi. Ni-redesign namin ito para manggaling ang pagiging natatangi sa mismong karanasan.
Mas magaang interface, hindi mas malamig
Madaling maging kasingkahulugan ng "magaan" ang mga purong puting background, manipis na kulay-abong text, at mga component na halos walang presensya kaya parang hindi tapos ang lahat. Hindi kailanman iyon ang layunin.
Mas tahimik ang bagong system, pero mainit pa rin ito.
Inilayo namin ang canvas sa matingkad na puti at inilapit sa mga neutral na surface na may banayad na kulay. Mas madilim at bahagyang mas matibay ang text kung saan mahalaga ang tuloy-tuloy na pagbabasa. Mas pigil ang mga border, mas mababaw ang mga anino, at mas sinasadya ang paggamit ng kulay. Ang resulta ay mas kaunting biswal na bigat nang hindi nawawala ang pakiramdam na ang Reverie ay lugar na ginawa para sa mga kuwento at ugnayan.
Lalong mahalaga ang balanseng ito sa roleplay. Hindi settings dashboard ang isang usapan. Nagbabasa ang mga tao ng mahahabang mensahe, napapansin ang banayad na pagbabago sa tono, at madalas na nananatili sa iisang view nang matagal. Kailangang maging komportable ang typography at kulay ng background pagkalipas ng dalawampung minuto, hindi lang magmukhang malinis sa screenshot.
Typography na tumatagal sa mahabang pagbabasa
Isa sa pinakamahalagang pagbabago ang isa rin sa pinakamaliit ang ingay: pinatibay namin ang hierarchy ng type.
Nananatiling makulay ang malalaking heading, pero mas may biswal na kumpiyansa na ngayon ang body copy. Gumagamit ang mahahalagang label, navigation item, at aksyon ng mga weight na mas madaling sulyapan. Pangalawa pa rin ang pangalawang text, pero hindi na ito ganoon kalabo na parang trabaho na ang pagbasa rito.
Simple ang prinsipyo:
- Dapat payapa at matibay ang pakiramdam ng mahahabang text.
- Dapat makilala ang mga aksyon bago mo pa mabasa ang bawat label.
- Dapat umatras ang pansuportang impormasyon nang hindi nawawala.
- Dapat manatiling nababasa ang isang page sa iba't ibang display, theme, at liwanag ng paligid.
Hindi humihingi ng pansin ang mahusay na typography. Pinadadali nito ang pagpapanatili ng pansin.
Iisang wika ng component sa buong produkto
Hindi ito pagpapalit ng balat nang page-by-page. Binuo naming muli ang pinagsasaluhang wika ng component sa ilalim ng produkto.
Pareho na ngayon ang mga patakarang sinusunod ng mga button, card, dialog, menu, tab, form control, table, tooltip, toast, drawer, popover, at navigation element para sa:
- radius ng sulok
- contrast ng border
- kulay ng surface
- elevation
- indikasyon ng focus
- mga state kapag naka-hover at pinindot
- weight ng text
- spacing
- semantic na kulay
Mas mahalaga ang pagkakapare-parehong iyon kaysa sa anumang iisang biswal na pagpili. Kapag pareho ang hitsura at kilos ng parehong uri ng aksyon kahit saan, mas kaunting effort ang ginugugol ng mga user sa pag-unawa sa interface. Mapanganib ang pakiramdam ng mapanirang aksyon. Napili ang pakiramdam ng napiling opsyon. Hiwalay sa page sa ilalim ang pakiramdam ng lumulutang na surface. Madaling hanapin ang pangunahing aksyon nang hindi nag-aagawan ang bawat button na maging pangunahin.
Nagdagdag din kami ng mas malilinaw na semantic variant para sa mga aksyon tulad ng highlighted at successful na state. Bahagi na ang mga ito ng pinagsasaluhang system ngayon, sa halip na mga gradient o custom na kulay na paulit-ulit na ginagawa sa loob ng mga indibidwal na feature.
Ang mahirap na bahagi: Paghahanap sa mga eksepsiyon
Hindi awtomatikong naa-update ang bawat button kapag in-update ang button component.
Nag-iipon ang mga produkto ng mga lokal na desisyon sa paglipas ng panahon: pricing card na may sariling border, reward dialog na may custom na liwanag, share modal na may espesyal na background, nakatagong aksyon na gumagamit ng pribadong gradient, o feature card na gumagawa ng sariling hover behavior mula sa simula.
Sa mga eksepsiyong iyon karaniwang nagsisimulang maging hindi pare-pareho ang isang redesign.
Sinuri namin ang produkto lampas sa component library at ibinalik sa pinagsasaluhang wika ang mga custom na interface na sulit panatilihin. Kasama rito ang mga marketing experience, daloy ng pagbabayad, mga reward, mga achievement, mga card ng karakter at kuwento, mga share dialog, mga navigation control, mga empty state, mga banner, at mga utility screen na mas bihirang bisitahin.
Hindi lahat ng eksepsiyon ay inalis. May mga interface na nangangailangan ng mas matibay na pagkakakilanlan dahil nagpaparating ang mga ito ng pagdiriwang, pagmamadali, pagkabihira, o status. Ang pagkakaiba ay pinalalawak na ngayon ng mga sandaling iyon ang system sa halip na balewalain ito.
Mas kaunting dekorasyon, mas malinaw na interaksyon
Inaalis ng redesign ang maraming effect na mukhang interactive pero walang naidadagdag na kapaki-pakinabang na impormasyon.
Hindi na lumilitaw ang mabibigat na anino sa bawat card. Mas pigil ang galaw kapag naka-hover. Nakalaan ang mga gradient sa mga sandaling nakikinabang sa diin. Binibigyang-hugis ng mga border ang istruktura nang hindi ikinukulong ang bawat piraso ng content sa isa pang kahon.
Kasabay nito, mas malinaw na ang tunay na mga interaction state:
- Ipinapakita ng mga napiling opsyon ang kanilang state nang biswal at semantiko.
- Mas madaling sundan ang keyboard focus.
- Pare-pareho ang hover at focus treatment ng mga interactive na card.
- Ipinararating ng mga button ang hierarchy sa pamamagitan ng pinagsasaluhang mga variant.
- Inihihiwalay ng mga dialog at menu ang kanilang sarili sa background nang hindi nagmumukhang hiwalay sa produkto.
Nang bawasan namin ang dekorasyon, nagkaroon kami ng mas maraming puwang para pahusayin ang feedback. Mas kaunti ang galaw ng interface, pero mas marami itong sinasabi.
Bahagi ng visual system ang accessibility
Hindi kumpleto ang isang design system kung inilalarawan lang nito kung ano ang hitsura ng mga component kapag mouse ang gamit.
Habang nire-refactor, binalikan namin ang mga focus ring, kilos ng keyboard, semantics ng napiling state, contrast, at kilos ng interactive na card. Mas malinaw na ngayong ipinapakita ng ilang control ang pinindot o napiling state sa assistive technology. Naaabot at naa-activate na mula sa keyboard ang mga story item na kumikilos na parang link. Sinusunod ng focus treatment ang parehong biswal na lohika sa lahat ng pinagsasaluhang control.
Sinadyang banayad ang mga pagbabagong ito. Hindi dapat maramdaman ang accessibility na parang hiwalay na mode na ipinatong sa produkto. Dapat naroon na ito sa default na kilos.
Mas mahusay na pundasyon para sa susunod
Ang pinakamahalagang bunga ng gawaing ito ay hindi isang partikular na shade, radius, o anino. Ito ay ang pagkakaroon na ngayon ng produkto ng mas kaunting nagtatagisang sagot sa iisang tanong sa disenyo.
Kapag bumubuo kami ng bagong feature, hindi na namin kailangang magpasya mula sa simula kung ano ang dapat na pakiramdam ng isang dialog, paano dapat tumugon ang isang input, o paano dapat ipakita ang napiling card. Naibibigay na ng system ang mga sagot na iyon. Pinabibilis nito ang bagong gawain, pero mas mahalaga, ginagawa nitong mas predictable ang kalalabasang karanasan.
Hindi tungkol sa paggawang magkakamukha ng bawat screen ang pagkakapare-pareho. Tungkol ito sa pagbibigay sa mga tao ng matatag na hanay ng inaasahan para magbago ang content nang hindi nagiging hindi pamilyar ang interface.
Ang sana ay mapansin mo
Sa totoo lang, hindi gaano sa simula.
Dapat lang na mas madaling basahin ang Reverie, mas payapang i-navigate, at mas buo habang lumilipat ka mula sa pagtuklas papunta sa usapan, paggawa, at mga tool ng account. Dapat mas maagang mapansin ang mahahalagang aksyon. Dapat tumigil na sa pakikipag-agawan ng pansin ang mga pangalawang control. Dapat hindi na gaanong nakakapagod sa mata ang mas mahahabang session.
Makulay pa rin ang personalidad ng mga karakter. Ma-atmospera pa rin ang mga kuwento. Puwede pa ring maging matingkad ang mga sandaling karapat-dapat ipagdiwang.
Alam lang ng interface kung kailan magsasalita—at kung kailan mananahimik nang sapat para magkaroon ng halaga ang lahat ng iba pa.
Abot na ng bagong design system ang buong karanasan sa Reverie. Kung may pakiramdam na lalong gumanda—o parang wala pa rin sa lugar—gusto naming malaman ito sa aming Discord community.