Innhold
- 01. Bruk fleksible høyder på elementer med tekst
- 02. La seksjonene krympe seg og vokse i høyden
- Inkluder overflødig data som er klippet på mindre versjoner
- Inkluder en minimumshøyde
- 03. Tegnbegrensninger, avkorting og overløp
- 04. Bruk universelle bilder for å forhindre at du oppretter flere eiendeler
- 05. Gi elementene fleksible bredder
- 06. La seksjoner forsvinne grasiøst
- 07. Velg skrifttyper med tegnsett som støttes
- 08. Test alle kombinasjoner når du arbeider med faste bredder
- 09. Bruk ikoner i stedet for tekst der det er mulig
- 10. Ikke ta med kopi i bilder
- Likte dette? Les disse!
Catering for internasjonale kunder kan øke antall variabler en designer må vurdere når de lager et brukervennlig grensesnitt betydelig. Ord og setninger kan endre lengden dramatisk, og innholdet kan ikke være aktuelt på enkelte steder. Hvis du ikke er smart om hvordan designene dine er strukturert, kan du finne typografien og utformingen din falle helt sammen på andre språk. Du må kanskje også opprette flere versjoner av de samme eiendelene. Design som ikke har tatt hensyn til lokalisering kan ta mye lengre tid å fullføre - spesielt hvis du trenger kroker for å endre mellomrom, skriftstørrelser og innhold for forskjellige territorier. Grensesnitt kan bryte eller se ryddige ut på forskjellige steder hvis du fokuserer oppmerksomheten din for mye på ett språk.
Disse tipsene skal bidra til å levere en ryddig opplevelse til internasjonale kunder uten å forringe kvaliteten i noen region, samtidig som de også forhindrer unødvendig arbeid som kan innta budsjettene dine. Tipsene er fokusert på design, men dekker også praktiske CSS-eksempler for utviklere å spille en like stor rolle. (Oversatt kopi leveres med tillatelse fra Google Translate til fordel for følgende eksempler, så unnskyld eventuelle kulturelle unøyaktigheter.)
01. Bruk fleksible høyder på elementer med tekst
Et vanlig problem er å holde elementene ryddige når teksten brytes på forskjellige linjer. I dette eksemplet kan du se raden med knapper ser fin og ryddig ut på engelsk. Hvert element har samme høyde, og kopien er på en linje. Herlig. Men her er et eksempel på et vanlig problem når oversatt kopi bare blir lagt til.
Ikke en så fin opplevelse for våre russiske venner. Forsikre deg om at teksten er riktig justert vertikalt og at elementhøyde er jevn. I dette tilfellet trenger knappene en dynamisk høyde som tilsvarer det høyeste elementet. Et godt juks i webdesign er å bruke CSS-egenskapsdisplayet: bordcelle. Søskenelementer vil oppføre seg som tabellceller, som automatisk jevner høydene og gir deg god kontroll over den vertikale justeringen av teksten.
02. La seksjonene krympe seg og vokse i høyden
Kopien i dette eksemplet passer fint over bakgrunnen i det dedikerte rommet. Varierende mengder tekst vil skyve høyden på seksjonen opp eller ned, slik at bakgrunnsgrafikken må justeres tilsvarende for å forhindre følgende problem.
Hvis bakgrunnen eksporteres i perfekt høyde for en versjon, er det ikke rom for utvidelse. Det er noen ting du kan gjøre for å sikre at denne delen er mer fleksibel.
Inkluder overflødig data som er klippet på mindre versjoner
Det gir kopierommet ditt å vokse. Du kan også falme bildet til en ensfarget eller gjentatt mønster for å sikre en uendelig lengde. Slik ser den tyske versjonen ut når den bruker de overflødige dataene.
Inkluder en minimumshøyde
Noen ganger inneholder tekstforfattere ikke nok tekst for en seksjon. Å inkludere en minimumshøyde kan forhindre at seksjoner blir så små at de ser ut av sted eller uklare som nedenfor.
03. Tegnbegrensninger, avkorting og overløp
Avhengig av hvordan oversettelsen din er organisert, kan det være mulig å sette tegnbegrensninger. Dette er nyttig for å forhindre at blokkene blir for høye i områder med begrenset plass. Noen ganger er dette ikke alltid praktisk, så det er tilrådelig å bruke en reserve, for eksempel å vise et lite område med kopi og gi muligheten til å avsløre hele teksten.
Dette er en flott teknikk for å sikre at tekstblokker aldri går over en viss størrelse. Det er også nyttig for å holde designene konsistente på tvers av lokaler der kopilengden varierer. Det brukes imidlertid best sparsomt for å forhindre at brukeren stadig må avsløre innhold. Husk å vurdere hva som skjer når kopien avsløres; elementene rundt skal strekke seg tilsvarende.
Hvis å avsløre skjult tekst ikke er et alternativ, er den siste utvei å avkutte kopi. Dette kan være relevant for elementer der det er plass og det ikke er plass til å avsløre mer. Uten avkorting er det vanligste problemet tekstblødning over grensene.
Avkorting kan hjelpe til med å rydde opp veldig trange områder. En hendig CSS-egenskap for dette er tekst-overflow: ellipsis, som automatisk avkorter tekst og legger til tre prikker ‘…’ hvis den ikke passer innenfor det definerte rommet.
04. Bruk universelle bilder for å forhindre at du oppretter flere eiendeler
Å lage varianter av bilder for internasjonale nettsteder er noen ganger uunngåelig. Selv om det kan være gunstig for en bruker å se områdespesifikke bilder i sitt sted, er det kanskje ikke nødvendig og kan øke arbeidsmengden betydelig, spesielt hvis endringer i bildet endres i fremtiden.
La oss late som du har å gjøre med en klient som markedsfører kuponger for hurtigmatbutikker. Et land kan være rettet mot McDonald's, et annet kan være rettet mot Burger King og så videre. I stedet for å vise de spesifikke logoene for hvert utsalg, som kan kreve at det genereres ett aktivum per territorium, er det mer effektivt å velge et generisk aktivum, for eksempel en silhuett av en burger.
Dette ville være universelt forstått og krever heller ikke oppdatering hvis utsalgssteder og logoer skulle endres over tid.
05. Gi elementene fleksible bredder
Knappene nedenfor representerer forskjellige innholdsfiltre. I dette eksemplet har regionen fire kategorier tilgjengelig for brukeren å velge mellom.
Bredden er jevn 25 prosent fordi den fungerer fint i dette tilfellet. Hvis kopien er lokalisert for en region som krever færre kategorier, vil den se ut slik:
Å fikse bredden utgjør ikke lengre kopier eller forskjellige kategorier. Du kan se hvordan det forbedres når elementene er fleksible og foreldreblokken fyller bredden på siden.
06. La seksjoner forsvinne grasiøst
Noen ganger vil innholdsblokker bare gjelde for bestemte lokaler. For eksempel, hvis et nettsted oppførte funksjoner for et mobiltelefonnettverk og en funksjon som 4G bare var relevant for bestemte land, er det best å utforme siden slik at seksjonen kan falle ut elegant uten å legge igjen noen merkbar tom plass.
Denne utformingen fungerer ikke hvis du fjerner 4G-delen. Wi-fi-blokken er ikke betydelig nok til å strekke seg for å passe til rommet, så den ender opp med å se strukket og tapt.
En løsning ville være å gjøre seksjoner stabile. Hvis seksjonene ble skilt fra hverandre og fått sine egne horisontale blokker, kunne de forsvinne elegant uten å påvirke noe rundt dem.
07. Velg skrifttyper med tegnsett som støttes
Når du har med visse land å gjøre, må du sørge for at den valgte skrifttypen har det aktuelle tegnsettet. Engelskspråklige land trenger vanligvis bare tegn som dekkes av det latinske tegnsettet, men andre kan trenge de som finnes i greske eller arabiske sett. Hvis skrifttypen din ikke inneholder tegnene som kreves for å støtte språket, vil brukerne bare se blanke tegn. Ikke-lisensierte skrifter passer vanligvis ikke til tegn utenfor det latinske settet, så vær sikker på at du velger skriftene dine med omhu. Å bruke systemfonter er en god måte å sikre at brukerne ikke støter på manglende eller blanke tegn, da disse skriftene vanligvis inneholder tegn for å støtte et bredere utvalg av språk. Hvis du designer for iOS, er iOS Fonts en god ressurs for valg av systemfont.
08. Test alle kombinasjoner når du arbeider med faste bredder
Hvis den tilgjengelige plassen er begrenset, kan du noen ganger ta en layoutbeslutning basert på det største potensielle resultatet. Hvis du kjenner alle mulige kombinasjoner av oversettelse, er det lurt å legge den lengste strengen i beholderen for å se om du sannsynligvis støter på problemer.
Hvis jeg bruker eksemplet ovenfor, må jeg sørge for at det ikke er noen sjanse for at det noen gang vil overlappe brukernavnet, hvis jeg vil forsikre meg om at svarlinken er i en posisjon som vil fungere i alle regioner. Jeg vet at den maksimale tegnbredden for et brukernavn er 15 tegn, og vi bruker ikke en skrift med fast bredde, så jeg tester det lengste tegnet (‘m’) sammen med den lengste oversettelsen for ‘svar’.
Når elementene legges side om side, kan jeg se at de gir en behagelig plass for meg å ta en beslutning.
09. Bruk ikoner i stedet for tekst der det er mulig
Når du arbeider med UI-elementer, er det vanlig å se knapper representert av allment anerkjente former. Her er et eksempel mediespiller som bruker tekstetiketter på knappene.
Det er fare her for lokal kopi for å strekke knappene utover mediaspillerens lengde. Det fine med å bruke et ikon i stedet for tekst er at det ikke krever lokalisering og alltid tar like mye plass.
10. Ikke ta med kopi i bilder
Hvis det er mulig, bør du ikke bruke tekst i eksporterte bilder og ressurser som krever lokalisering. Ikke bare må du generere et bildeelement for hvert territorium, men du må kanskje eksportere dem alle igjen hvis kopien endres. Det er mye mer effektivt å bruke dynamisk markering over toppen av bildene, slik at du bare trenger å generere ett bilde. Kopien kan da endres uten å måtte endre noen av eiendelene.
Lokalisering kan være vanskelig, men det kan også være givende når du vet at brukere av forskjellige kulturer og nasjonalitet deler en like opplevelse. Det kan være enkelt å fokusere på ett språk når du designer, og ofte ser du noen steder forsømt fordi det ikke ble gjort noe for å gi dem en fungerende løsning. Det trenger ikke være tilfelle hvis du husker lokalisering i hvert trinn. Hvis du bruker tiden på å gjøre design mer fleksibel i starten, sparer du tid på sikt, og forhindrer redesign av hele seksjoner eller brenner opp budsjetter ved å eksportere unødvendige eiendeler.
Når du har designet et produkt for å imøtekomme lokaliserte versjoner, er det verdt å teste det grundig for å forhindre overraskelser du ikke planla. Dine internasjonale brukere vil takke deg for det.
Joey har over et tiår med kommersiell erfaring innen webdesign og frontend-utvikling. Han begynte i Sony i 2012 som designer for PlayStation-nettsteder og apper.
Likte dette? Les disse!
- Hvordan lage en app
- Gratis programvare for grafisk design tilgjengelig for deg akkurat nå!
- Strålende Wordpress opplæringsvalg
- Lag et perfekt humørbrett med disse pro-tipsene
