Ti u xtemplates_ticonf_amsterdam_2014.key

Ti UX templates
!
www.uxmobilepatterns.com

!
https://github.com/jaraen/uxmobilepatterns
@jrayon @sonianoneka

Slides introduced at tiConf EU 2014
Amsterdam, 28/06/2014

!
What is Ti UX templates project?
!
!
1. a selection of
!
2. that we
CODE
!
3. to

!
STEPS: THE ANALYTIC PROCESS
!
1. we got a selection of
!
- analyzing most used Apps
- looking for best practices
- to select the most re-usable screens

!
!
2. we
!
- under user centered design principles (UCD)
- applying the Pareto Principle aka 20/80 rule
- both on the design of the project and the design of the
wireframes
- deﬁning re-usable components

!
!
3. asked designers to apply
DIFFERENT STYLES
!
- Customizable Alloy Themes
- Based both on basic “wireframe” style and pro designs
- Following style name conventions

!
!
4. developed
!
- With +20 reusable and customizable
- And several sample templates in one demo app.

!
!
5. and
!
- Wireframes: OmniGrafﬂe/PDF
- Designs: Illustrator/PDF
- Code: Alloy + Titanium 3.2
!
- Available in
- documentation at
!

!
RESULT: THE SINCRETIC VIEW
wireframes
+ +AT&T 11:56 AM
Back ActionTitle
Title title title title
10€
Saturday, 28th Jun 2014 at 2 pm
Tobacco Theater, Nes 75, Amsterdam
15 1470 km30 2027º
. . . . .
Text text text text text text text text text text
text text text text text text text text text text
text text text text text text text text textReserve
VIEWS
Massive AttackBack
T-Mobile 23:17 75%
SAT 14
Sonar Club 22:45 - 00:15
Massive Attack escoge Sónar para la presentación
de su nuevo espectáculo...
Massive Attack escoge Sónar para la presentación
de su nuevo espectáculo...
now playingnow playing
Girl I Love You
Heligoland 2010
5:27
Karmacoma
Protection 1994
5:16
Playlist See All
designs
STYLES
code
CONTROLLERS
& &

speech content for today:
!
1. patterns selection and wireframes
2. templates live demo
3. components library and
implementation
4. styles customization

1. ACTIVITY
2.CONTENT DETAIL
3. FORM + SIGN IN & SIGN UP
4. LIST
5. GALLERY
6. SEARCH
!
Keeping in mind ACTIONS&TOOLS over the content (behaviors,
share, geolocation, routing, reservations…) and GESTURES

content detail_metatemplate
iPhone 5
screen
15 470 km30 2027º
. . . . .
text text text text text text text text
Rating 9
Photos 20
Comments 10
nombre usuario 20 jun 2014
Text text text text text text text text text
text text text text text text text text text
nombre usuario 10 may 2014
Hotels 9
Restaurants 20
Write a comment
Twitter
Pinterest
Tumblr
Vine / Instagram
. . . .
Share
You can invite to your friends and share this content
Social content
Boundary area
main action
Secondary info
iPhone 5
screen
iPhone 5
screen
AT&T 11:56 AM
Back ActionTitle
10€
15 470 km30 2027º
. . . . .
Write a comment
Twitter Tumblr
ID data
Name + Photo
+ very few ID data:
+ more critical info or actions
Social content
Boundary area
main action
iPhone 5
screen
AT&T 11:56 AM
Back ActionTitle
10€
15 470 km30 2027º
. . . . .
Rating 9
Photos 20
Comments 10
Hotels 9
Restaurants 20
Atractions 10
Bedrooms 1
Bathrooms 20
Material 100% cotton
Services
See more
Map (same link on the top)
Pull to previous
(pull to next on the top)
Write a comment
Twitter
Pinterest
Tumblr
Vine / Instagram
. . . .
Share
ID data
Name + Photo
+ very few ID data:
+ more critical info or actions
Social content
Boundary area
main action
Secondary info
iPhone 5
screen
iPhone 5
screen

AT&T 11:56 AM
Back ActionTitle
10€
15 1470 km30 2027º
. . . . .
text text text text text text text text textReserve
Back ActionTitle
See more
Rating 9
Comments 20
Photos 10
Hotels 9
Restaurants 20
AT&T 11:56 AM
Reserve
content detail_device view

AT&T 11:56 AM
Back Title
AT&T 11:56 AM
Back ActionTitle
10€
15 470 km30 2027º
. . . . .
Title title title title title
title title
Bed&Breakfast, Apartment
98% cotton, 2% elastane
Reserve
Info
a) Actio
Comme
b) Men
Section
Action Button (Play, Reserve, Buy,
Ask, Show prizes…)
AT&T 11:56 AM
Back ActionTitle
Song song song so
Band band band band Album album al
0sg
Playing from library
12sg
Title title title title title
title title
Bed&Breakfast, Apartment
98% cotton, 2% elastane
AT&T 11:56 AM
Back Title i
Proﬁle Add Photos Bloc
iPho
content detail_ﬁrst screen cases mix

AT&T 11:57 AM
AT&T 11:56 AM
Repeat
Title
Alert 15 min before
SETTINGS
Show as Busy
Repeat Never
Instructions
Release to close / update
Location
subsequential navigation
(navegación secuencial)
Public in Twitter
&DROPDOWN NAVIGATION
Public in Facebook
Add location
Never
Every Day
Every Week
Every Month
Every Year
...
Name of da
Notiﬁcations
All day
Starts
Ends
28/06/2014 14:00
15:00
Calendar or
picker.
Secuencial o
dropdown?
Add invitees
Mail
⃝
⃝
Google maps
Am
Amman
Amman, Jordan
Ampuriabrava
Girona, Spain
Amsterdam
North Holland, The Netherlands
Q W E R T Y U I O P
Single selection on new
window
DROPDOWN NAVIGATION
Tap any part of the raw to drop up
Write a comment
Add location
Keyboard
appears
or Google
Maps
f
Delete
Amsterdam 12 results
Keyboard
appears
AT&T 11:56 AM
Title
Add to favs Bloc Settings
Export Position Send
Delete Lock Note
Call Videocall
Import contactsAT&T 11:57 AM
Import contacts
AT&T 11:56 AM
Import contacts Cancel
Import from Contacts
Import from Facebook
Import from Mail
Import from Twitter
Import from LinkedIn
Main action
Invitees
iCloud ⃝
Message
AT&T 11:57 AM
Invitees
Favorites All your contacts
Search by name, nickname or mail
Name
Nickname
Name
Nickname
⃝
Or select:
Name
Nickname
Name
Nickname
⃝
Name
Nickname
Name
Nickname
Name
Nickname
⃝
Invite friends
AT&T 11:57 AM
Comment
Multiple
selection on
drop down
WQ E R T Y U I O P
SA D F G H J K L
Z X C V B N M
.@space123 return
Hi everyone! I’m just typing to show how
works this nice layout…
. . . . .
Name of the event event
event
Multiple selection on
new window (big
amount of data)
Release to go up
form_overview

AT&T 11:57 AM
AT&T 11:56 AM
Repeat
Title
SETTINGS
Show as Busy
Repeat Never
Instructions
Release to close / update
Location
ation
cial)
Name of da
All day
Starts
Ends
28/06/2014 14:00
15:00
Calendar or
picker.
Secuencial o
dropdown?
Am
Amman
Amman, Jordan
Ampuriabrava
Girona, Spain
Amsterdam
North Holland, The Netherlands
Q W E R T Y U I O P
Single selection on new
window
Add location
Keyboard
appears
or Google
Maps
Keyboard
appears
AT&T 11:56 AM
Title
Add to favs Bloc Settings
Export Position Send
Delete Lock Note
Call Videocall
Main action
Name of the event event
event
form_ﬁrst screen

AT&T 11:57 AM
Repeat
Alert 15 min before
SETTINGS
Show as Busy
Repeat Never
Location
Public in Twitter
Public in Facebook
Add location
Never
Every Day
Every Week
Every Month
Every Year
...
Notiﬁcations
All day
Starts
Ends
28/06/2014 14:00
15:00
Calendar or
picker.
Secuencial o
dropdown?
Add invitees
Mail
⃝
⃝
Google
maps
Single
selection on
new window
DROPDOWN NAVIGATION
Tap any part of the raw to
drop up
Write a comment
f
Invitees
iCloud ⃝
Message
our contacts
or mail
⃝
⃝
⃝
AT&T 11:57 AM
Comment
Multiple
selection on
drop down
new window (big
amount of data)
form_secondary screens

Alert 15 min before
SETTINGS
Show as Busy
Repeat Never
Public in Twitter
Public in Facebook
Add location
Notiﬁcations
All day
Starts
Ends
28/06/2014 14:00
15:00
picker.
Secuencial o
dropdown?
Add invitees
Mail
⃝
⃝
Google
maps
Single
selection on
new window
DROPDOWN NAVIGATION
drop up
Write a comment
f
Invitees
iCloud ⃝
Message
AT&T 11:57 AM
Invitees
Favorites All your contacts
Name
Nickname
Name
Nickname
⃝
Or select:
Name
Nickname
Name
Nickname
⃝
Name
Nickname
Name
Nickname
Name
Nickname
⃝
Invite friends
Multiple
selection on
drop down
new window (big
amount of data)

Public in Twitter
Public in Facebook
Add location
Every Month
Every Year
...
Notiﬁcations
Add invitees
Mail
⃝
⃝
Google
maps
drop up
Write a comment
f
Delete
Import contactsAT&T 11:57 AM
Import contacts
AT&T 11:56 AM
Import contacts Cancel
Import from Contacts
Import from Facebook
Import from Mail
Import from Twitter
Import from LinkedIn
Invitees
iCloud ⃝
Message
Name
Nickname
Name
Nickname
⃝
Or select:
Name
Nickname
Name
Nickname
⃝
Name
Nickname
Name
Nickname
Name
Nickname
⃝
Invite friends
AT&T 11:57 AM
Comment
Multiple
selection on
drop down
WQ E R T Y U I O P
SA D F G H J K L
Z X C V B N M
.@space123 return
Hi everyone! I’m just typing to show how
works this nice layout…
. . . . .
new window (big
amount of data)
Release to go up

Or mailto window:
AT&T 11:56 AM
Singin Process
First Download
AT&T 11:56 AM
Video
txt txt txt txt txt txt txt txt txt txt txt txt
Continue
Highlight
s
Our Nice App Our Nice App
txt txt txt txt txt txt txt txt txt txt txt txt txt
txt txt txt txt txt txt txt txt txt txt
Sign in with Facebook
Sign in with Twitter
Sign in with Google+
Sign with us I Sign Up
Video
AT&T 11:56 AM
Our Nice App
modal window
transparent
email
password
forgot password?
AT&T 11:56 AM
Login
Sign Up
upload your photo
name
WQ E R T Y U I O P
SA D F G H J K L
Z X C V B N M
.@space123 GO
If tap modal window:
a! Choose photo
b! Take photo
If does not tap, modal window
to remember:
a! Skip photo
b! Set photo
It would be desirable to design
a different screen rather than a
standard window "as below!,
specially with alerts.
AT&T 11:56 AM
email
WQ E R T Y U I O P
SA D F G H J K L
Z X C V B N M
.@space123 GO
name@emailcom
AT&T 11:56 AM
email
WQ E R T Y U I O P
SA D F G H J K L
Z X C V B N M
.@space123 GO
name@emailco
OKCancel
Oops! the mail address is not correct!
O_o
AT&T 11:56 AM
password
Oops! you may have a password with
2 Uppercase, 23 lowercase and at
least 45 numbers with no meaning at
all. LOVE!
AT&T 11:56 AM
name
WQ E R T Y U I O P
SA D F G H J K L
Z X C V B N M
.@space123 GO
soni
scale and move
When
tap
keyboa
rd
appear
s
8
TUV
7
PQRS
9
WXYZ
5
JKL
6
MNO
4
GHI
3
DEF
2
ABC
1
0
chocolate123
AT&T 11:56 AM
skip
mobil number
Caiman Island (+134)
Would you like to close your existing
pages before turning on Private
Browsing?
Skip photo?
Skip Set photo
Picker with country
+ code "2
columns!, Or "from
Viber!:
AT&T 11:56 AM
DONE
mobil number
Spain (+34)
676 788 000
8
TUV
7
PQRS
9
WXYZ
5
JKL
6
MNO
4
GHI
3
DEF
2
ABC
1
0
AT&T 11:56 AM
welcome to
Our Nice App
Share
Upgrade
START!
(and find friends)
Update your profile
Video
lo más chulo es poner
sólo el start o el find
friends, pero depende de
cada app…
X
AT&T 11:56 AM
Our Nice App
email
password
forgot password?
X
WQ E R T Y U I O P
SA D F G H J K L
Z X C V B N M
.@space123 GO
sign up&in_overview

AT&T 11:56 AM
Singin Process
First Download
AT&T 11:56 AM
Video
Continue
Highlights
Our Nice App Our Nice App
Video
sign up&in_ﬁrst download

Or mailto window:
AT&T 11:56 AM
Our Nice App
modal window
transparent
email
password
forgot password?
Login
X
AT&T 11:56 AM
Our Nice App
email
password
forgot password?
X
WQ E R T Y U I O P
SA D F G H J K L
Z X C V B N M
.@space123 GO
sign up&in_login

AT&T 11:56 AM
Sign Up
upload your photo
name
If tap modal window:
a! Choose photo
b! Take photo
If does not tap, modal window
to remember:
a! Skip photo
b! Set photo
It would be desirable to design
a different screen rather than a
standard window "as below!,
specially with alerts.
AT&T 11:56 AM
name
WQ E R T Y U I O P
SA D F G H J K L
Z X C V B N M
.@space123 GO
soni
scale and move
When tap
keyboard
appears
and the
content
moves upWould you like to close your existing
pages before turning on Private
Browsing?
Skip photo?
Skip Set photo
sign up&in_name and photo

AT&T 11:56 AM
email
WQ E R T Y U I O P
SA D F G H J K L
Z X C V B N M
.@space123 GO
name@emailcom
AT&T 11:56 AM
email
WQ E R T Y U I O P
SA D F G H J K L
Z X C V B N M
.@space123 GO
name@emailco
O_o
AT&T 11:56 AM
password
Oops! you may have a password with
2 Uppercase, 23 lowercase and at
least 45 numbers with no meaning at
all. LOVE!
8
TUV
7
PQRS
9
WXYZ
5
JKL
6
MNO
4
GHI
3
DEF
2
ABC
1
0
chocolate123
sign up&in_mail and password

AT&T 11:56 AM
skip
mobil number
Caiman Island (+134)
Picker with country +
code !2 columns"
Or new window with
scroll
AT&T 11:56 AM
DONE
mobil number
Spain (+34)
676 788 000
8
TUV
7
PQRS
9
WXYZ
5
JKL
6
MNO
4
GHI
3
DEF
2
ABC
1
0
AT&T 11:56 AM
welcome to
Our Nice App
Share
Upgrade
START!
(and find friends)
Update your profile
Video
find
friends
on
profile
sign up&in_phone number

3 keys
1. Meta structure
The Pareto Principle aka the 80–20 Rule or the Law of the Vital
Few and Trivial Many
from more to less important
!
!
2. Reusable Components
as alloy widgets that integrate with standard Titanium
components
!
!
3. Customizable Design
with examples included, using alloy themes

COMPONENTS LIBRARY

ALLOY CODE

Franky: a detail view template (1/2)
ti.ux.title
ti.ux.image
ti.ux.iconlabel
ti.ux.scrollableview
ti.ux.alignview
ti.ux.iconvalue
ti.ux.expandabletext
· cache remote images
· loading indicator
· zoom in full screen
· supports retina images
· parallax FX
· supports Font Awesome icons
· supports Font Awesome icons
· Distribute horizontal elements
· Customizable pagingControl
· Expand text on touch for full reading

Franky: a detail view template (2/2)
ti.ux.rowitem
· title, subtitle and count elements
ti.ux.rowitem
· customizable hasChild property
ti.ux.alignview

Settings: A form template
ti.ux.forms.row.switch
· switch button with icon and label
· Font Awesome support
ti.ux.forms.row.text
· Support several input types:
· text, email, url, number, password, text area
· Each type customizes its keyboard and validation method
·Textarea opens a new window on focus
ti.ux.forms.row.timepicker
· Shows/hide a date/time picker

Settings: A form template
ti.ux.forms.row.optionspicker
· pick one element in 3 diﬀerent styles
· optionsDialog, popup or modal window
· Font Awesome support
More Form widgets coming:
· Location selector
· Multiple selector (in line and in a popup/window)
· Picture/Media picker
OptionsPickerdialogandpopupscreenshots

Sign up: A form assistant step-by-step
ti.ux.forms.scrollableform
Create forms by a JSON object
ti.ux.forms.text
· several types supported:Automates steps creation
Callbacks for cancel, success and
fieldValidated events
· Create your own validation methods with
asynchronous response (i.e. validate if a username
already exists in your server)
Synchronous and async validation
· Includes most popular validators
or add your own validate method
· text
· password
· email
· phone
· number
· Keyboard and validation method customized on
each type
· Properties supported: title, tipText, hintText,
mandatory, autofocus and errorMessage
· url

Sign Up - Alloy Controller Javascript Code

Screen size is optimized for
iPhone, although structure and
contents are valid for both
Wireframes Code
Templates work on both platf,
although android is limited in
some behaviors.
!
Most Widgets works on both
platforms, with some limitations
on android. The aim is to give full
support.

Alloy Themes
/*ti.ux.pagingcontrol*/
!
".view-pagingcontrol":{
height:"10",
// backgroundColor:"#fff",
zIndex: "999",
width: Ti.UI.SIZE
},
".view-pagingcontrol-dot":{
height:4,
width:4,
borderRadius:2
},
".view-pagingcontrol-dot-active":{
backgroundColor:"#000"
}
".view-pagingcontrol-dot-inactive":{
backgroundColor:"#999"
}
• All widget styles are defined in app.tss theme file
• FontFamily are defined in config.json, for easy
customization and used as  
 
Alloy.CFG.fontNormal fontBold 
• All widget styles follow the same name
convention: 
 
TiComponent-[parentcomponent]-[widget]-name-status
!
• Templates styles could be defined in your app.tss
file, in controller style file or even in your xml file
• For reusable views, use theme styles

sign up&in_login
BY NIGHT
BY NIGHT
Welcome!
First, you need to sing with us to access
to our great stuff we made for you.
Sing In Sing Up
Maiberreando|
email
password
BY NIGHT
Welcome!
First, you need to sing with us to access
to our great stuff we made for you.
Sing In Sing Up

WHAT’S NEXT?

Improve performance

Full support android

Code all wireframes

New templates (lists, gallery…)

WEB

GITHUB

!
www.uxmobilepatterns.com

!
https://github.com/jaraen/uxmobilepatterns

CODE BY
Javier Rayón
@jrayon
WIREFRAMES BY
Sonia Villanueva
@sonianoneka
http://uxmobilepatterns.com

Ti u xtemplates_ticonf_amsterdam_2014.key

Recomendados

Recomendados

Mais conteúdo relacionado

Último

Último (20)

Destaque

Destaque (20)

Ti u xtemplates_ticonf_amsterdam_2014.key