Huis Persoonlijke financiën Gegevens Visualisatie: ontwerpen voor mobiele apparaten - dummies

Gegevens Visualisatie: ontwerpen voor mobiele apparaten - dummies

Inhoudsopgave:

Video: Week 1 2024

Video: Week 1 2024
Anonim

Tot een paar jaar geleden, toen een ontwerper een papieren advertentie of brochure maakte, kon precies plannen hoe het eruit zou zien nadat het werd afgedrukt. De ontwerper kende het formaat en hoe klanten het zouden zien. De populariteit van mobiele apparaten is echter toegenomen en ontwerpers hebben te maken gehad met twee nieuwe ontwerpproblemen:

  • Ontwerp van interfaces voor mobiele apparaten

  • Aanmaken van apps voor mobiele apparaten

Met de komst van internet gebruikten online ontwerpers de weinige webbrowsers die beschikbaar waren om te plannen hoe hun ontwerpen op het scherm zouden verschijnen. De beschikbare tools waren enigszins grof, maar het ontwerp was vrij eenvoudig. Als hij elke webbrowser testte, kon een ontwerper bepalen wat hij moest repareren, zodat het ontwerp er meteen goed uit zou zien.

Nu moeten ontwerpers ontwerpen voor een groot aantal mobiele apparaten, die elk hun eigen eigenzinnige behoeften hebben. Bijgevolg zijn de complexiteiten van het ontwerpen van visualisaties gegroeid.

Omarmen responsief ontwerp

Om het probleem van meerdere schermafmetingen en besturingssystemen aan te pakken, gebruiken ontwerpers het principe van responsief ontwerp (RD). RD verwijst naar een interface of indeling die zichzelf kan herconfigureren op basis van waar deze wordt bekeken. De term werd bedacht door Ethan Marcotte in een artikel uit 2010 dat de noodzaak erkent voor ontwerpers om het probleem van meerdere schermvereisten aan te pakken.

Een websiteontwerp dat responsief is, ziet er nog steeds goed uit, of je het nu bekijkt op je desktopcomputer of op je smartphone. De afgeronde randen en pictogrammen die op kleinere apparaten worden gebruikt, vallen automatisch op hun plaats.

In zijn artikel citeerde Marcotte de drie gebieden waar RD het meeste effect kan hebben in webdesign:

  • Vloeiende rasters: Het raster is het hulpmiddel dat ontwerpers gebruiken om hun ontwerpen te ontwerpen, ongeacht of die ontwerpen worden online of offline bekeken. In de volgende afbeelding is een rasterontwerp getransformeerd voor drie schermvormen.

    Rasterontwerp vertaald naar verschillende schermen.
  • Flexibele afbeeldingen: Wanneer u afbeeldingen in een blogbericht of op uw website hebt staan, moet u ervoor zorgen dat ze niet afgesneden of vervormd zijn. Het is belangrijk om ervoor te zorgen dat uw afbeeldingen zichzelf kunnen herformatteren.

  • Mediaquery's: Wanneer u een zoekterm opgeeft in een zoekmachine zoals Google of Bing, wilt u de resultaten op elk van uw schermen kunnen bekijken. Dit is een belangrijk principe van RD. De inhoud moet worden bekeken op elk mobiel apparaat dat een gebruiker kan hebben. Wat het bekijken op een verscheidenheid aan apparaten een uitdaging maakt, is dat de ontwerper niet weet wat het resultaat zal zijn.

Deze ideeën zijn ook van toepassing op gegevensvisualisaties. U wilt ervoor zorgen dat uw raster niet wordt vervormd wanneer de gegevens worden bekeken op een mobiel apparaat. De afbeeldingen moeten helder zijn en de beeldverhouding (lengte tot breedte) moet worden uitgelijnd, ongeacht het apparaat waarmee de gebruiker werkt.

App-ontwerpstandaarden volgen

Ontwerpers willen niet alleen dat een interface er goed uit ziet, maar ook dat ze allerlei trucjes doen. Als resultaat is app-ontwerp een discipline op zichzelf geworden.

U vraagt ​​zich misschien af ​​waarom u zich druk moet maken om het app-ontwerp. Iedereen die alles online moet visualiseren, is onderworpen aan dezelfde normen als elke app-ontwerper.

In zijn artikel 'De 6 eenvoudige regels voor het ontwerpen van een Killer iOS-app van Apple' beschrijft Pete Pachal wat hij moest doen om zijn nieuws-app Spun-gecertificeerd te krijgen voor de Apple App Store. (Bij dit schrijven is de app niet beschikbaar in de U. S. App Store.) Het team van Pachal moest vijf maanden met Apple samenwerken om alles te perfectioneren. In die tijd codificeerde Pachal zes regels voor zijn team, waarvan er vier van toepassing zijn op gegevens ten opzichte van ontwerp:

  • Eenvoud is kracht. Deze regel is waarschijnlijk de belangrijkste regel voor gegevensvisualisaties. Het doel is om nieuwe informatie uit te leggen of te onthullen die kan worden gebruikt om inzichten te ontwikkelen. Als u zich op te veel gegevenspunten concentreert, gaat het verhaal verloren. Als u een dashboard aan het maken bent, is deze regel vooral belangrijk omdat elk stuk gegevens het geheel moet ondersteunen.

  • Geef kwaliteit niet op voor de tijd. Deze regel is belangrijk voor gegevensvisualisatie. Als je een visualisatie klapt die moeilijk te ontcijferen is of gewoon slordig is, zal niemand hem willen gebruiken. Neem de tijd om iets geweldigs te ontwikkelen en blijf het na verloop van tijd verfijnen.

  • Beloon de gebruiker met elke aanraking. Elk menu-item moet iets nuttigs doen. De printlink zou bijvoorbeeld moeten werken. Elke klik zou ook informatie moeten geven.

  • Details zijn belangrijk. Voordat de gebruiker op een koppeling in een gegevensvisualisatie klikt, moet duidelijk zijn waar die link haar zal brengen of welk type gegevens ze zal zien.

Gegevens Visualisatie: ontwerpen voor mobiele apparaten - dummies

Bewerkers keuze

Setup Menu 3 op de Rebel T6i / 750D - dummies

Setup Menu 3 op de Rebel T6i / 750D - dummies

Er wachten nogal wat aanpassingsmogelijkheden op de Setup-menu van de Rebel T6i / 750D 3. Setup-menu 3, weergegeven in de volgende afbeelding, bevat de volgende aanpassingsmogelijkheden: Schermkleur: standaard bevat het scherm Opname-instellingen opnamegegevens in het wit op een eenvoudige zwarte achtergrond. Er worden grijstinten in grijstinten gebruikt en accenten worden meestal oranje gemarkeerd. ...

Bewerkers keuze

Tekst invoeren en in een PowerPoint-dia passen - dummies

Tekst invoeren en in een PowerPoint-dia passen - dummies

Tekst aan een inhoud toevoegen tijdelijke aanduiding in Microsoft PowerPoint, klik op het gebied Klik om tekst toe te voegen en typ wat u wilt. Als u een ander type inhoud wilt toevoegen, klikt u op het pictogram in de tijdelijke aanduiding voor het gewenste type. Als u meer tekst typt dan in dat tekstvak past (vooral gebruikelijk voor ...

Voor senioren: de Prullenbak van uw computer leegmaken - dummies

Voor senioren: de Prullenbak van uw computer leegmaken - dummies

De Prullenbak op uw computer bevat onlangs verwijderde items. Uw oude bestanden bevinden zich in de Prullenbak en u kunt ze ophalen totdat u deze leegt of totdat deze de maximale maximale grootte heeft bereikt, en Windows automatisch enkele bestanden dumpt. Nadat u de Prullenbak hebt leeggemaakt, zijn alle bestanden daarin niet beschikbaar voor ...

Hoe tekst in te voeren in een Microsoft Office-document - dummies

Hoe tekst in te voeren in een Microsoft Office-document - dummies

Nadat u een document hebt gemaakt, bent u klaar om te beginnen met typen. Tekst op de pagina plaatsen (of op het scherm) is een beetje anders in elk van de drie grote Microsoft Office-toepassingen: Word, Excel en PowerPoint. Woord: Het belangrijkste werkgebied van het programma is een lege lei waarop u rechtstreeks kunt typen. Klik gewoon in de ...

Bewerkers keuze

Animatie maken met de HTML5-canvastag - dummies

Animatie maken met de HTML5-canvastag - dummies

Hoewel de HTML5-canvastag misschien niet als vervanging voor Flash als mechanisme voor het implementeren van games en animaties in de browser, is het redelijk eenvoudig om animaties aan een canvasafbeelding toe te voegen. De sleutel is om de animatiefuncties te gebruiken die al in de browser zijn ingebouwd. Basisstructuur van de animatielus in HTML5-canvas Een animatie ...

Hoe externe stijlen maken in CSS3 - dummies

Hoe externe stijlen maken in CSS3 - dummies

De meeste ontwikkelaars gebruiken externe stijlen in CSS3 om te verkleinen de hoeveelheid werk die nodig is om een ​​site te onderhouden. Een. CSS-bestand bevat alle stijlen voor de site, wat betekent dat het veranderen van een stijl voor de hele site net zo eenvoudig is als het veranderen van dat ene bestand (in plaats van elke pagina). Omdat de wijziging plaatsvindt in slechts ...

Hoe u volledige interactieve CSS3-toepassingen maakt met YUI - dummies

Hoe u volledige interactieve CSS3-toepassingen maakt met YUI - dummies

De Yahoo! Gebruikersinterface (YUI) -bibliotheek (Yuilibrary) is een complete ontwikkeling - API verwant met jQuery en jQuery UI CSS3 gecombineerd in sommige opzichten en rijker dan deze bibliotheken in andere. Dit is een complexe API die is ontworpen om aan de behoeften van grotere applicaties te voldoen. Eigenlijk moet je echt de tutorials doorlopen, ...