* I Ml 1 f»ižn imí-pratííhypíiynf ■ : ■ . ••_■ Ivrii:' - j .i J r- hidviJĽ.XAVim/ hiin:.'-'"■j-iili:HJ■■■Jťľťl.-.iH^i ■■ hl.^-.|vii í-/f hrTn^w^.Wm^».mŕffl^i«r^r-W.^f|aťKk<i j ." i j.iij ■ i .vlif ^iin^hií^Wfl- Pojdme na tú Uiítečné odkazy 2.3 -> 4.0+ Android < 3.0 OOfl -a [čij c ...thmwi......)!■■■_ŕih; urĽTiŕA^im.'V iritiív-IKL_ÍJiEGfJiiLj Android 2.3 smartLib** smartLibäs Android User Ex peří en ce ' dfívc ne pcvnč daný Htyl - raztrístĚnoat ■ HpouHta aplikací čemv dctáuttní vzhled ■ aplikace a dobrou iurkdonaJi touj atc vííuíItič-ncpritailivc ■ cdpuzeni r-ílrazníkú * dnes jasně de fin n vany styl lhŤŤp:/Aíeveloper.i:.ni:"i:h: ; ^r.i^Hi-sij^n/LTiLÍey.hřml) ■ lÍútili na kopÍTav:i.rií prvků defauttnícíi iiplikaci ■ pc-ívT, ne defaultni aplikace z nadstaveb (Senje, ToudlWifc.j ■ ne všechny nativní aplikace podle standardů (Plaví - prebirat prvky & rozvahou UIX, Ul, Usability: Designujeme na mobilní zařízení Jonáš Ševčík Osnova • Obecně o vývoji • co dělat, co nedělat • Android • vývoj • návrh • responsive design • tipy • iOS • návrh • design designing the U ^experience ■ PN ■ll>J-niib-Firtyitri>K''.^->.i>iiJ'i Co je dobré si uvědomit než začneme • jak může uživatel aplikaci používat? • může ovládat za chůze? • jak drží přístroj? • vidí na ovládací prvky? Kam rozmístit prvky Ul? Jakou volit velikost prvků Ul? i Using the finger tip shows users their target, but users have to reorient their finger. Using the finger pad comes natural, but doing so covers visibility of entire target Kam rozmístit prvky Ul? Jakou Jakou volit velikost prvků Ul? natural but doing so covers Using tne finger tip shows visibility of entire target. users their targel but users have to reorient their finger. Index finger and thumb overlap on to neighboring targets when they are grouped. User can accidentally trigger unintended actions. f 57 Pixel Touch Target Index finger fits snugly inside. Target edges give visual feedback. Finger pad is used instead of fingertip. 72 Pixel Touch Target Thumb fits snugly inside. Target edges give visual feedback. Thumb pad is used instead of thumb tip. Jak navrhovat? Náčrt lo- □ — fl — □ — D- o — □ — a — u — a □ — <",r*§í*'*I XMW I a □ — 6%r t/1,- i iS i P William R Stanek Microsoft Windows XP Prole... ' ix ■& & iz > Fl Radka Halodova Microsoft Excel 97 > Stephen G. Kochan Objective-C 2.0 > Christopher Paolini Eragon > 1 T° FHmijtrrl Klnn^kn. Krystal ŕlamnruhí © ★ Featured History Favorites recenny raie Neville Chamberlai n Jiří Ellinger «Kareiv; Koresponde Čapek Spisy* k< in i ši>omii ní i nee. Karel Čapek ® © ® SmartLib MU LATELY RATED Mýty a pohádky původních obyvatel Austrálie Stanislav Novotný ★★★★★ JavaScript Mark C Reynolds ★★★★★ CHEEVEfl BULLET PARK -2T 1)1 UM AlstrauE Bullet park John Cheever ★★★★★ Dějiny Austrálie Geoffrey Blainey, Zora Wolfová Užitečné odkazy • http://developer.android.com/design/index.html • http://go.microsoft.com/ ?linkid=9713252 • https://developer.apple.com/library/ios/#documentation/UserExperience/ Conceptual/MobileHIG/DesigningNativeApp/DesigningNativeApp.html Android User Experience • dříve ne pevně daný styl - roztříštěnost • spousta aplikací černý defaultní vzhled • aplikace s dobrou funkcionalitou, ale vizuálně nepřitažlivé • odpuzení zákazníků • dnes jasně definovaný styl (http://developer.androidxom/design/index.html) • důraz na kopírování prvků defaultních aplikací • pozor, ne defaultní aplikace z nadstaveb (Sense, TouchWiz„.) • ne všechny nativní aplikace podle standardů (Play) - přebírat prvky s rozvahou Android < 3.0 Searched books The Lives and Times of Alf and Mary Gibson Warren C. Gibson Billy Beaver and the Lazy Eyed Kitty Celeste Gibson & Matt Gibson Relationship of Remedies Miller Robert Gibson Gibson Girls Charles Dana Gibson "jQ Borne on the Carrying Stream *V Eberhard Bort, Sr. sLib Search books Scan codes Wish list Help Anrlrnirl O ^ Search books Scan codes Wish list Help s The Lives and Times of Alf and Maty Gibson Warren C. Gibson Billy Beaver and the Lazy Eyed Kitty Celeste Gibson & Matt Gibson Relationship of Remedies 0) REMEDIES .... _ r_, —body M|ller Robert Gibson Gibson Girls Charles Dana Gibson Borne on the Carrying Stream Eberhard Bort, Sr. Android 2.3 Wish list Preferences smartLib Search 0 Scan ★ Browse 0 Preferences smartLib1 Search Scan — — 0 - Preferences smartLib Search r - Scan ★ Browse 0 Preferences ooglecode.com/lig/ asset- Searched books list The Lives and Times of Mary Gibson Warren C. Gibson Billy Beaver and the Laz Kitty Celeste Gibson & Matt Gib: Relationship of Remedh Miller Robert Gibson Gibson Girls Charles Dana Gibson Borne on the Carrying 5 i Eberhard Bort, Sr. 2.3 -> 4.0+ index.html t/watch ? v-XwG HJJY BsOQ&play next= 1 &Iist-3676C3EE9&teature=results_main roiduipatterns.com/2012/1 [/modern- Browse books 1 Book I Top Last rated favourites Differential equations Latinsko-český slovníček 1 římského práva :(vybrané 1 pojmy a termíny) and mathematical biology Jones. D S. Sleeman. B. D 1 Skfejpek Michal ůůůírt a Java :servlety a stránky JSP _ Hall. Marty DirrEKIMLM I 1 1 1 BroLo 1 Geologické mapování na 1 části listu území M-33-107-A-1 a (Ivanovice na Hané) 1 Wolf Igor, Kryslek, Ivan 1 ***** Festschrift Harry mmm Rosenbusch :gewidmet von 1 seinen Schülern zum 70. 1 Geburtstag 24. Juni 1906 Description ISBN: 1564682864 Publisher Chapman s Hnil HsmartLibMU C\ Ö TOP LATELY RATED HISTORY mmwm Mýty a pohádky RS ^ původních obyvatel Austrálie IM **** lsi* JavaScript JavaScript Mark C Reynolds ***** Bullet park John Ch&čve' ***** Dějiny Austrálie Geoffrey Ulainey. Zora Wolfová [ U Book deta Dějiny Austrálie Geoffrey Blainey; Zora HIS <, rálÍe ..... ISBN 8071063347 Publisher Lidové noviny Published Date 1999 Language Page Count Ar smartLib Search Scan it Wish list 0 Preferences Browse books Book d Top Last rated Favourites Latinsko-český slovníček římského práva :(vybrané pojmy a termíny) Skřejpek, Michal ***** 3 Java :serviety a stránky JSP Hall, Marty nepoužívat px, ale dip (density independent pixel) • u fontů sp (scale-independent pixels) • poskytovat obrázky pro každé dpi • drawable/{ldpi|mdpi|hdpi|xhdpi} Deni 4 4 3:2S Figure 2. Example application without support for different densities, as shown on low, medium, and high density screens. Figure 3. Example application with good support for different densities (it's density independent), as shown on low, medium, and high density screens. Nine-patch *9.png Stretchable area RESPONSIVE DESIGN TED 2 tipy na závěr • neblokovat UI, práce na pozadí (background services) • používat analytics • na co se klika? • používají to lidi vůbec? atd.