Date post: | 18-Dec-2015 |
Category: |
Documents |
Upload: | horatio-evelyn-hawkins |
View: | 216 times |
Download: | 0 times |
Basic iPhone Wireframe
• This is a sample wireframe that shows how to use various parts to create a basic design
• Remember– Keep it simple
– Less is more
– Use the list design patterns
item 1 item 1 item 1 item 1 item 1
Title DoneBack
Al Smith >Ben Smith >Carl Smith >Dave Smith >Eric Smith >Fred Smith >Greg Smith >Hal Smith >Jane Smith >
ABCDEFGHIJKLMNOPQRSTUVWXYZ#
3
Basic List Search Pattern
• This shows a basic list search pattern
• Use this when you have a very large list that may need to be searched.
• I consider large to be over 100 items
• Use the ABC along the right if the list is alphabetical
item 1 item 1 item 1 item 1 item 1
Title DoneBack
Al Smith >Ben Smith >Carl Smith >Dave Smith >Eric Smith >Fred Smith >Greg Smith >Hal Smith >Jane Smith >
ABCDEFGHIJKLMNOPQRSTUVWXYZ#
Basic Table Pattern
• Tables are grouped into logical sections
• Each table cell is usually one of the following:– Text field
– Label with details arrow
– Label with status and arrow
– Label with toggle
• Use a short descriptive footer to provide additional help
Status >Good
Wi-Fi >Not Connected
Sound >
Location ON
Auto-lock >Never
Name Required
Advanced Configuration >
Password Required
Use text descriptions to make the application better
SettingsBack
item 1 item 1 item 1 item 1 item 1
Title DoneBack
Al Smith >
Ben Smith >
Carl Smith >
Dave Smith >
Eric Smith >
Fred Smith >
10:23pm
10:10pm
9:13pm
7:25pm
5:19pm
5:123pm
This is a short message that I'm writing to tell you that the thing you thought you did was…
I can't believe you didn't tell me you where going to be in town. I just talked to Peter and he…
Did you get my message about the meeting next Wednesday I think we should go as it couldi…
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sed quam. Vesti…
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sed quam. Vesti…
Multi-line List Pattern
• Use the multi-line pattern to give users a peek at what may be in the details page.
• This uses up more vertical space so don't use it if you expect a lot of scrolling.
• Email is a good example where you usually read from the top and decide if you want details.
item 1 item 1 item 1 item 1 item 1
Title +
Basic Edit PatternEdit
Al Smith >Ben Smith >Carl Smith >Dave Smith >Eric Smith >Fred Smith >Greg Smith >Hal Smith >Jane Smith >
item 1 item 1 item 1 item 1 item 1
Title +Done
- Al Smith Ben Smith Carl Smith Dave SmithEric Smith Fred SmithGreg SmithHal Smith Jane Smith
|
----
---
Delete
• The editing pattern allows you to add, edit and delete items from a list
• Consider supporting the swipe delete action
Web Page Pattern
Web Page Title
http://www.raizlabs.com
< > +
• If you open up a web-page or are doing mobile web-design you can use this to show how users may browse the web
• The address bar may be hidden after the page loads
Landscape Example
• For certain applications landscape may make sense• In this view the keyboard takes almost 50% of the space when
shown
Al Smith >Ben Smith >Carl Smith >Dave Smith >Eric Smith >
Alert Message
• Avoid when possible• Place actionable text in the
buttons• Use helpful alerts Trouble
connecting to the server.
IgnoreTry again
Panel Message
• Use to confirm delete• Use to quickly present a
couple choices
Are you sure you want to delete?
Delete
Archive
Cancel
Day MonthWeek
Back View Item Name
View List +Edit
Back Edit Item Edit
Back
Title
1 of 7 /\ \/Back
New ObjectCancel Save
Edit
Common Title bars
Back View Item NameAny title bar can have an optional description line
Basic Title
Al Smith >Ben Smith >Carl Smith >Dave Smith >Eric Smith >Fred Smith >Greg Smith >Hal Smith >Jane Smith >
Al Smith Ben Smith Carl Smith Dave Smith Eric Smith Fred Smith Greg Smith Hal Smith Jane Smith
>>>
>>
>>>>
Basic List Secondary Action
Alphabetical long lists
Al Smith >Ben Smith >Carl Smith >Dave Smith >Eric Smith >Fred Smith >Greg Smith >Hal Smith >Jane Smith >
ABCDEFGHIJKLMNOPQRSTUVWXYZ#
Al Smith >Ben Smith >Carl Smith >Dave Smith >Eric Smith >Fred Smith >Greg Smith >Hal Smith >Jane Smith >
ABCDEFGHIJKLMNOPQRSTUVWXYZ#
Searchable
Grouped List
Apples >Peach >Grapes >
Spinach >Lettuce >Potato >Zucchini >
Fruits
Vegetables
Al Smith >
Ben Smith >
Carl Smith >
Dave Smith >
Eric Smith >
Fred Smith >
10:23pm
10:10pm
9:13pm
7:25pm
5:19pm
5:123pm
This is a short message that I'm writing to tell you that the thing you thought you did was…
I can't believe you didn't tell me you where going to be in town. I just talked to Peter and he…
Did you get my message about the meeting next Wednesday I think we should go as it couldi…
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sed quam. Vesti…
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sed quam. Vesti…
Multi-line List
- Al Smith Ben Smith Carl Smith Dave SmithEric Smith Fred SmithGreg SmithHal Smith Jane Smith
|
----
---
Delete
List in editing ModeList that is sortable
Al Smith ≡Ben Smith ≡Carl Smith ≡Dave Smith ≡Eric Smith ≡Fred Smith ≡Greg Smith ≡Hal Smith ≡Jane Smith ≡
Text Editable
Status >Good
Wifi >Not Connected
Sound >
Wifi ON
Name Required
Password Required
Details Editable
Text message Add to favorites
Actionable in-place
Location Services OFF
Low High
Low HighMedium
Selected Table Cells
Daily
Weekly
Monthly
Yearly
Password