Meer van dieselfde
As u nog nooit van 'n UI-patroon gehoor het nie, is dit 'n vinnige verduideliking: soos met die meeste dinge, veral tydens die ontwikkeling van sagteware, kan 'n groot aantal elemente dikwels saamgevoeg word, aangesien dit 'n herkenbare patroon vorm. 'N Voorbeeld vir sagteware is die definisie van argitektoniese patrone of patrone wat verband hou met 'n spesifieke programmeertaal.
Tog is daar ook algemene patrone by die ontwerp van UI. Kyk net vinnig na sommige programme op die toestel waarop u hierdie artikel lees, en sekere dinge herhaal uiteindelik:
- modale aansigte met 'n stoor, kanselleer en / of verwyder aksie
- gedeeltes van elemente wat teks bevat, byvoorbeeld lyste met 'n krapaksie vir elke lysitem
As u dus 'n stap verder dink, is daar hulpbronne wat u kan benut as u self 'n UI ontwerp? Miskien het 'n versameling patrone wat ander ontwerpers al herken en geformaliseer het? Wel, ek sou hierdie vraag nie vra as ek nie al die antwoord sou kry nie! Tyd vir hoofstuk twee!
Hoofstuk twee (die aangekondigde een)
Op soek na 'n formele definisie, het die Carbon Design-span van IBM 'n uitstekende: patrone is beste praktykoplossings vir hoe 'n gebruiker 'n doel bereik. Hulle toon herbruikbare kombinasies van komponente en templates wat algemene gebruikersdoelstellings met rye en vloei aanspreek.
Kom ons kyk na enkele voorbeelde. Die volgende inskrywings is afkomstig van die Carbon Design-webwerf van IBM sowel as die Google Material UI-patroonbladsy. Ek kon nie 'n webwerf vir Fluent Design van Microsoft vind nie, maar het hul beginblad nogtans in die addendum gekoppel.
Soek
Die soek na inhoud is die belangrikste boustene vir die meeste programme, daarom is dit 'n perfekte keuse om 'n UI-patroon daarvoor te definieer. Onafhanklik van die finale gebruik (of 'n wêreldwye soektog of 'n spesifieke soektog op 'n inhoudsbladsy), het die soek-UI te bied
- 'n teksinvoer
- 'n tekstuele plekhouer as daar nog geen insette beskikbaar is nie
- 'n ikoon wat duidelik die doel van die teksinvoer aandui, byvoorbeeld deur 'n vergrootglas te gebruik, sowel as 'n sneller vir 'n nuwe soektog
In sekere gevalle kan 'n wenk-etiket help om tussen verskillende inhoudstipes te onderskei of hulp te verleen met ongeldige invoer. Hoe meer voorwaardes 'n soektog moet hanteer, hoe beter kan 'n soektog aan hierdie vereiste aanpas deur eksplisiete filtermenu's by te voeg.
Dialoog
Een van die baie prominente UI-patrone. Dialogs stel 'n app in staat om inligting te wys sonder om die algehele konteks van 'n webwerf te verloor. Dit word bereik deur nie die hele venster te bedek nie, maar slegs 'n kleiner deel. Dialogs onderbreek die huidige werkvloei van die gebruiker en moet dus slegs as noodsaaklik beskou word as 'n stop in die werkstroom geldig is. Hulle moet slegs klein take hanteer en 'n duidelike fokus hê op wat om te bereik. Stel byvoorbeeld ongestoorde veranderinge terug of voer 'n belangrike aksie uit.
Leë state
Al klink dit aanvanklik vreemd, is leë toestande baie algemeen in programme. Dit is belangrik om aan die gebruiker te kommunikeer dat daar geen data beskikbaar is nie, en verduidelik ideaal waarom dit die geval is. Afhangend van die konteks, kan 'n wenk oor die oplossing van die leë toestand baie help om 'n goeie UX te skep. 'N Gebruiker het byvoorbeeld na iets gesoek, maar kon niks vind nie. Dit kan 'n gebruiksgeval wees, indien die voorstel van 'n ander soektog die gebruiker kan help om die taak te verrig. In elke geval moet elke siening wat 'n leë toestand verteenwoordig, kontekstueel wees. 'N Negatiewe voorbeeld sou iets wees soos' Dit het nie gewerk nie. Probeer later weer".
Moenie leë toestande as 'n nagedagte in u UI-ontwerpproses behandel nie. As dit korrek geïmplementeer word, laat dit gebruikers toe om die werkvloei glad te verloop. Leeg verklaar dat die slyp van die hele werkvloei tot stilstand eintlik 'n ergste scenario is, afgesien van app-ineenstortings.
Net 'n begin
Dit was 'n vinnige blik op sommige UI-patrone wat ek van IBM se Carbon Design sowel as Material UI se patroonbladsy gekies het. Deur UI-patrone ook op u app toe te pas, kan dit wrywing tussen die werkstroom van die gebruiker en die gebruikerskoppelvlak verminder om die taak te verrig. Die ontwerp van UI kan baie uitdagend wees, dus om op die skouers van reuse te staan deur uit bestaande UX-studies te leer, help baie om u gebruikers se persepsie van die gedrag van u app te verbeter.
