• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Design mobilnych aplikacii
 

Design mobilnych aplikacii

on

  • 642 views

Súhrn tipov a myšlienok pre lepší návrh používateľských rozhraní mobilných telefónov a tabletov. ...

Súhrn tipov a myšlienok pre lepší návrh používateľských rozhraní mobilných telefónov a tabletov.

Informácie sú užitočné a určené nielen UI dizajnerom ale aj všetkým záujemcom o mobilné aplikácie a mobilný marketing - teda nielen tvorcom, ale aj zadávateľom.

Statistics

Views

Total Views
642
Views on SlideShare
642
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Design mobilnych aplikacii Design mobilnych aplikacii Presentation Transcript

    • About SCR groupSCR is a progressive and rapidly growing group of companies that started its operation in 2006. Provides comprehensive andintegrated solutions in design, online marketing and the most advanced technology symbiosis specializations of IT and market-ing segment.In a short time we have successfully fulfilled the requirements of clients not only in Slovak, Czech and Central European fieldbut also in USA, UK, Ireland and Saudi Arabia. Today company employs 40 people (plus 10 freelancers) that guarantees our cli-ents with reliable and stable partner.SCR graphics s.r.o. SCR interactive s.r.o. SCR technologies s.r.o.Creative graphic design studio focused Full-service digital agency focused on IT company focused on developing infor-on providing high-end design solutions providing high-end online solutions for mation systems, mobile technologies,in the field of graphic design, 3D design, integrating digital marketing strategies, web / intranet portals, providing Webmotion design and audio design. creativity, technology and media. hosting and system services under the SLA.www.scr-graphics.sk www.scr-interactive.sk www.scr-technologies.sk SCR Group is a certified quality management system ISO 9001
    • CLIENTS
    • Mobilný web Zlatý Bažant
    • iPhone aplikácia Bažant Kinematograf
    • iPad aplikácia Zlatý Bažant
    • iPhone aplikácia TA3
    • iPhone aplikácia SKGA
    • iPhone aplikácia Corgoň
    • iPad aplikácia Corgoň
    • iPad CRM aplikácia Red Bull
    • Mobilný web pelikan.sk
    • iPhone aplikácia “Moje O2“
    • iPhone aplikácia Rádia Expres
    • Poslanie grafickéhodizajnuNaplnenie hodnôt remesla napomáha naplneniukvalít dielaDizajn je obal funkcie.Obal nesmie funkciu potláčať, ale ju podporovať.Grafický dizajn obaľuje informáciu.Informáciu nesmie potláčať, ale ju podporovať.
    • charakter zariadeníDotykové mobilné zariadenia majú svoje špecifikápoužívania:• Tablet je niečo medzi smartfónom a laptopom• Po screene sa prvky častejšie posúvajú, menej sa kliká na odkazy• Primárne sú to zariadenia na prezeranie obsahu• Keď vytvárať obsah, tak multimédiá - foto / video / krátke texty. Toto je zároveň užívateľsky preferovaný content• Sú prepojené s webovým obsahom• Fungujú ako súčasť cloudu
    • WireframeNakreslite si svoju aplikáciu najprv do schémyTiež používaný pojem “skica”.Ide o návrh definujúci funkciu a obsah aplikácie pre lepšie pochopeniea efektívnejší návrh.Typy wireframov:• Textový (textový popis)• Stručný či blokový• Podrobný (img + real text)Následná grafika zachováva prvky v aplikácii, ale od WF sa môže líšiť veľkosťoua poňatím jednotlivých prvkov.
    • GUI kitPre nákres wireframu.
    • GUIGuide user interface - prvky skladačkyAk je konštrukcia webov Lego, tak návrhy mobilných aplikácií sú Duplo.Layout aplikácie je definovaný niekoľkými systémovo-funkčnými prvkami,ktoré sa na seba skladajú.Tieto prvky môžu byť systémové alebo brandované.// Aktuálne GUI pre jednotlivé OS sú free stiahnuteľné z webu. http://www.mobilexweb.com/blog/ui-guidelines-mobile-tablet-design
    • brandovaná skladačkaObrandované GUI - základný princípTento princíp využíva prvky GUI, ktoré sú obsiahnuté aj vo vývojovýchprostrediach.Tu sa dajú tieto prvky jednoduchým spôsobom štýlovať.Nakoľko je rozmer screenu malý, vzniklo niekoľko základných usporiadaní,ktoré sú odladené a užívateľsky akceptované (napríklad systém článkov a detailčlánku).
    • martin, pusti video!
    • OS Human InterfaceGuidelinesPredpísané alebo doporučené rozmeryVýrobcovia doporučujú pre jednotlivé prvky user interface rozmery, ktoré sú preich zariadenia “optimálne“.URL linky:• developer.apple.com/library/ios/#documentation/UserExperience/ Conceptual/MobileHIG• developer.android.com/design
    • simplify.simplify.simplify.Menej je niekedy viacAktuálny a správny trend online grafického dizajnu!Pre tento prístup je charakteristické:• Jednoduchá skladba layoutov• Silná kompozícia, grid• Vynechávanie “grafických barličiek“• “White space“ okolo prvkov• Dôraz na content
    • Fantasy Interactive (www.f-i.com)Ich prístup je ikonický
    • Pixel PerfectZameranie na perfektné spracovanie detailuToto platí pre technickú ako aj kreatívnu časť práce designéra.• Snažte sa mať všetky prvky kreslené ako vektorové• Všetky hrany prvkov sú zarovnávané na pixle (využívanie funkcie shape layer)• Prevod normal/retina display bude korektný vtedy, keď budú mať všetky prvky zarovnanie na párny pixel
    • brandZnačka je to, čo vám zostane, keď vám zhorítováreň. // David OgilvyBrand je niečo viac ako len kvalitné logo.Najlepšie značky útočia na všetky zmysly.Čím väčšia emočná väzba, tým väčšia zapamätateľnosť.Nebojte sa využitia krátkeho videa pri spúšťaní aplikácie, charakteristickej fareb-nej schémy, typografie, ...Nikdy to však nerobte na úkor použiteľnosti app.
    • Red BullZnačka ktorá tvorí obrovskémnožstvo contentu
    • štylizáciaVyužívanie podkladových plôch pre formulovanievizuálneho prejavuV zásade platí, že tmavé layouty sú vhodné na štýlovejšie prezentácie, svetlýpodklad na informačné riešenia.Svetlé layouty majú vyššiu čitateľnosť aj čítanosť.Je však možné tento princíp v jednej aplikácii vhodne striedať.
    • Rozdelenie contentuContent na bielom,galéria a menu na tmavom
    • FarbyJeden zo základných nástrojov grafického dizajnuVšeobecné pravidlá:• Zabezpečiť kontrast farieb• Primerané množstvo a tonalita farieb pre dosiahnutie optimálneho Look & Feel• Typ farieb - preferované sú pastelové, príjemné farby• Využívanie funkčných vlastností farieb - napr. buttony
    • typografiaDajte svojej aplikácii charakteristický vzhľadKvalitnou typografiou je možné dosiahnuť unikátny vzhľad aplikácie a pritomnepotlačiť jej funkčné vlastnosti, naopak ich podporiť.Je možné používať prakticky ľubovoľný font (tento je vložený do samotnejaplikácie).Všetka typografia by mala byť v správnej veľkosti, riadkovaní a farbe.
    • zobrazenie informácieKontextuálne menu, modálne pohľady(ale s rozumom)Redukujte a rozdeľujte obsah na rôzne pohľady tak, aby bol pre užívateľa podanýideálne.V prípade dynamického contentu dajte pozor na dostatok priestoru pre reálnycontent, ktorý bude naťahovaný!
    • Split view (vľavo).Dva panely vedľa seba alebo v okne.
    • Redukovaná informácia.A možnosti na doplnenie.
    • Dynamický contentUsporiadanie v gride
    • orientáciaDvojitá orientácia iPadu je naozaj pecka - pokiaľju viete využiť!Dodržte konzistentnosť zobrazenia obsahu na oboch rotáciách.Trik je v udržaní užívateľskej prívetivosti v každom pohľade.Prepínanie orientácie je možné v aplikácii zakázať a vytvárať tak jednostranneorientovaný layout aplikácie.Tip:Je možné použiť princíp, kedy je text orientovaný na výšku a multimédia k textuna šírku.
    • Rovnaký contentInak zobrazený horizontálne / vertikálne
    • Iná funkcionalitaPri hor. otočení sa zobrazuje iba content
    • Iná funkcionalitaVideo ako aj celá aplikácia sarozbehne až naležato
    • userinterface metaforyKožené tlačítka, stehy, zvyšky papiera, prepínačDajte pozor na to, aby ste sa neprepracovali ku gýču.Je to síce trendy, ale pokiaľ chcete hodnotný a trvácny design, nepoužívajte tietoprvky samoúčelne.Pre “sranda“ aplikácie a jednoúčelové aplikácie je to aplikovateľný princíp.Dajte pozor na použiteľnosť.
    • Freebies v praxiInterface vystavaný na základe prvkov,ktoré sú na webe dostupné na stiahnutie
    • Kreatívne spracovanieVizuálna stránka je taktiež originálna.
    • micrositeKomunikácia aplikácie aj mimo storuDajte si k aplikácii vypracovať aj jednoduchú stránku promujúcu Vašu aplikáciu.Pomôže Vám to pri komunikácii aplikácie.
    • Výstup grafikaOdovzdanie výstupu pre kóderaVýstup by mal obsahovať:• Návrh všetkých typov layoutov použitých v aplikácii• Ikonu aplikácie pre systém ale aj App Store / Android Market• Vrstvy psd a ich názvy sú logicky zoradené a pomenované• Jednotlivé layouty sú kompletné - pokiaľ sú nadefinované všetky stavy tlačítok, linky v textoch, flagy, ...
    • Rozkreslená aplikáciaAj časti layoutu ktoré sú nízko.Aj a(ikonu je potrebné nakresliť voveľkosti 512*512 px)
    • inšpiráciaPicasso vravel, že dobrí umelci kopírujú, tí najlepšíkradnúNekradnú však od ostatných z oboru, ale mezioborovo a zo zdanlivonesúvisiacich zdrojov. Design verzus príroda, film, hudba a pod.Jednotiacich prvkov pre vizuálne štýly je nespočetne.Inšpiratívne galérie:• thefwa.com/mobile• behance.net• dribbble.com• designspiration.net
    • úlohaNájdi v návrhu chybu!
    • Ďakujem za Vašu pozornosťmartin janek Art director / SCR