Upload
scr
View
506
Download
4
Tags:
Embed Size (px)
DESCRIPTION
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.
Citation preview
About SCR gRoupSCR is a progressive and rapidly growing group of companies that started its operation in 2006. Provides comprehensive and integrated 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 field but 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.
Creative graphic design studio focused on providing high-end design solutions in the field of graphic design, 3D design, motion design and audio design.
www.scr-graphics.sk
SCR inteRACtive S.R.o.
Full-service digital agency focused on providing high-end online solutions for integrating digital marketing strategies, creativity, technology and media.
www.scr-interactive.sk
SCR teChnologieS S.R.o.
IT company focused on developing infor-mation systems, mobile technologies, web / intranet portals, providing Web hosting and system services under the SLA.
www.scr-technologies.sk
SCR GRoup iS a CeRtified quality manaGement SyStem iSo 9001
Poslanie grafického dizajnuNaplnenie hodnôt remesla napomáha naplneniu kvalít diela
Dizajn 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émy
Tiež používaný pojem “skica”.
Ide o návrh definujúci funkciu a obsah aplikácie pre lepšie pochopenie a 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ťou a poňatím jednotlivých prvkov.
guiGuide user interface - prvky skladačky
Ak 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íp
Tento princíp využíva prvky GUI, ktoré sú obsiahnuté aj vo vývojových prostrediach. 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).
os human interface guidelinesPredpísané alebo doporučené rozmery
Výrobcovia doporučujú pre jednotlivé prvky user interface rozmery, ktoré sú pre ich zariadenia “optimálne“.
URL linky:
• developer.apple.com/library/ios/#documentation/UserExperience/ Conceptual/MobileHIG
• developer.android.com/design
simPlify.simPlify.simPlify.Menej je niekedy viac
Aktuá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
Pixel PerfectZameranie na perfektné spracovanie detailu
Toto 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 ogilvy
Brand 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.
štylizáciaVyužívanie podkladových plôch pre formulovanie vizuálneho prejavu
V 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ť.
farbyJeden zo základných nástrojov grafického dizajnu
Vš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ľad
Kvalitnou typografiou je možné dosiahnuť unikátny vzhľad aplikácie a pritom nepotlačiť jej funkčné vlastnosti, naopak ich podporiť.
Je možné používať prakticky ľubovoľný font (tento je vložený do samotnej apliká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álny content, ktorý bude naťahovaný!
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 jednostranne orientovaný layout aplikácie.
Tip: Je možné použiť princíp, kedy je text orientovaný na výšku a multimédia k textu na šírku.
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 tieto prvky samoúčelne.
Pre “sranda“ aplikácie a jednoúčelové aplikácie je to aplikovateľný princíp.
Dajte pozor na použiteľnosť.
micrositeKomunikácia aplikácie aj mimo storu
Dajte 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ódera
Vý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ť vo veľ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 zdanlivo nesú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