wireframe parts iphone interface design
DESCRIPTION
This is a collection of iPhone wireframe templates. This can be used to quickly construct various iPhone screens.TRANSCRIPT
![Page 1: Wireframe Parts Iphone Interface Design](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c76ed44a7959b6248b4591/html5/thumbnails/1.jpg)
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
![Page 2: Wireframe Parts Iphone Interface Design](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c76ed44a7959b6248b4591/html5/thumbnails/2.jpg)
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#
![Page 3: Wireframe Parts Iphone Interface Design](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c76ed44a7959b6248b4591/html5/thumbnails/3.jpg)
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
![Page 4: Wireframe Parts Iphone Interface Design](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c76ed44a7959b6248b4591/html5/thumbnails/4.jpg)
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.
![Page 5: Wireframe Parts Iphone Interface Design](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c76ed44a7959b6248b4591/html5/thumbnails/5.jpg)
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
![Page 6: Wireframe Parts Iphone Interface Design](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c76ed44a7959b6248b4591/html5/thumbnails/6.jpg)
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
![Page 7: Wireframe Parts Iphone Interface Design](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c76ed44a7959b6248b4591/html5/thumbnails/7.jpg)
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 >
![Page 8: Wireframe Parts Iphone Interface Design](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c76ed44a7959b6248b4591/html5/thumbnails/8.jpg)
Alert Message
• Avoid when possible• Place actionable text in the
buttons• Use helpful alerts Trouble
connecting to the server.
IgnoreTry again
![Page 9: Wireframe Parts Iphone Interface Design](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c76ed44a7959b6248b4591/html5/thumbnails/9.jpg)
Panel Message
• Use to confirm delete• Use to quickly present a
couple choices
Are you sure you want to delete?
Delete
Archive
Cancel
![Page 10: Wireframe Parts Iphone Interface Design](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c76ed44a7959b6248b4591/html5/thumbnails/10.jpg)
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
![Page 11: Wireframe Parts Iphone Interface Design](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c76ed44a7959b6248b4591/html5/thumbnails/11.jpg)
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
![Page 12: Wireframe Parts Iphone Interface Design](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c76ed44a7959b6248b4591/html5/thumbnails/12.jpg)
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 ≡
![Page 13: Wireframe Parts Iphone Interface Design](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c76ed44a7959b6248b4591/html5/thumbnails/13.jpg)
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 a
Yearly
Password
![Page 14: Wireframe Parts Iphone Interface Design](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c76ed44a7959b6248b4591/html5/thumbnails/14.jpg)
Normal
Number Pad
Choice OneChoice TwoChoice ThreeChoice FourChoice Five
Spinner
Landscape
![Page 15: Wireframe Parts Iphone Interface Design](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c76ed44a7959b6248b4591/html5/thumbnails/15.jpg)
Begin Mockups Here
• Use this space to describe the purpose of the page and any interaction notes
![Page 16: Wireframe Parts Iphone Interface Design](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c76ed44a7959b6248b4591/html5/thumbnails/16.jpg)
- description
![Page 17: Wireframe Parts Iphone Interface Design](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c76ed44a7959b6248b4591/html5/thumbnails/17.jpg)
We have a new template with additional of parts and additional examples of how to construct a user interface page. Learn more about our new library here:
http://bit.ly/iOSWireframe
We hope you found this template helpful.