Storyboard prototyping
-
Upload
azukisoft-pte-ltd -
Category
Technology
-
view
298 -
download
0
Transcript of Storyboard prototyping
![Page 1: Storyboard prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062319/554d1dd6b4c905ab268b46fe/html5/thumbnails/1.jpg)
Prototyping with iOSStoryboard
![Page 2: Storyboard prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062319/554d1dd6b4c905ab268b46fe/html5/thumbnails/2.jpg)
IntroductionVery oftenWe are tasked to createiOS prototypesTo test look and feel
![Page 3: Storyboard prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062319/554d1dd6b4c905ab268b46fe/html5/thumbnails/3.jpg)
IntroductionSo we did quick and dirty work using PNGs given to us
![Page 4: Storyboard prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062319/554d1dd6b4c905ab268b46fe/html5/thumbnails/4.jpg)
Introduction With Photoshop
![Page 5: Storyboard prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062319/554d1dd6b4c905ab268b46fe/html5/thumbnails/5.jpg)
Introduction Balsamiq
![Page 6: Storyboard prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062319/554d1dd6b4c905ab268b46fe/html5/thumbnails/6.jpg)
Introduction Powerpoint
![Page 7: Storyboard prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062319/554d1dd6b4c905ab268b46fe/html5/thumbnails/7.jpg)
But there is a catchAll these tools do a pretty OK jobBut they do not capture the touchAnd feelOf the prototype on an actual device
Such as swipes on a device
![Page 8: Storyboard prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062319/554d1dd6b4c905ab268b46fe/html5/thumbnails/8.jpg)
StoryboardEnter StoryboardIt’s helps designers and developers
To create prototypesThat can be deployed on devices
![Page 9: Storyboard prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062319/554d1dd6b4c905ab268b46fe/html5/thumbnails/9.jpg)
StoryboardYou can create a quick prototypeUsing storyboardAnd deploy on a device for testing
![Page 10: Storyboard prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062319/554d1dd6b4c905ab268b46fe/html5/thumbnails/10.jpg)
![Page 11: Storyboard prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062319/554d1dd6b4c905ab268b46fe/html5/thumbnails/11.jpg)
StoryboardWith the layoutYou can sit down with the clientAnd create the app flowIn a visual mannerThat is easy to understand
![Page 12: Storyboard prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062319/554d1dd6b4c905ab268b46fe/html5/thumbnails/12.jpg)
StoryboardStoryboards are awesomeYou can take pngs of mockups from your
clientsPut it as a UIImagePaste it in your StoryboardDrag and drop a few buttonsLink them to your other screensAdd in some hard coded data
![Page 13: Storyboard prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062319/554d1dd6b4c905ab268b46fe/html5/thumbnails/13.jpg)
StoryboardVoila and your prototype is ready
![Page 14: Storyboard prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062319/554d1dd6b4c905ab268b46fe/html5/thumbnails/14.jpg)
Storyboard Is like Xib on steroids Without all the nasty side effects
![Page 15: Storyboard prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062319/554d1dd6b4c905ab268b46fe/html5/thumbnails/15.jpg)
StoryboardBest thing is that all these can be done relatively easily
Plus, most developers knows their way around XCode better than Photoshop
Prototypes get done fasterClients can test it on your device at home
![Page 16: Storyboard prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062319/554d1dd6b4c905ab268b46fe/html5/thumbnails/16.jpg)
StoryboardBest part is thatWith the storyboard prototypeYou can immediately put the logic into itOnce the client is happy with the prototypeSaves time and money
![Page 17: Storyboard prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062319/554d1dd6b4c905ab268b46fe/html5/thumbnails/17.jpg)
![Page 18: Storyboard prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062319/554d1dd6b4c905ab268b46fe/html5/thumbnails/18.jpg)
StoryboardThose areas marked in red in the previous slide are the icons indicating the transitionThey are known as SeguesPronounced as Segway
![Page 19: Storyboard prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062319/554d1dd6b4c905ab268b46fe/html5/thumbnails/19.jpg)
Things to rememberAlways remember to select the User Storyboards option when creating a new projectFile extension is .storyboard
![Page 20: Storyboard prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062319/554d1dd6b4c905ab268b46fe/html5/thumbnails/20.jpg)
![Page 21: Storyboard prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062319/554d1dd6b4c905ab268b46fe/html5/thumbnails/21.jpg)
NextRemember to set a storyboard to be the initial view controllerGo to View -> Utilities -> Show Attributes Inspector
![Page 22: Storyboard prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062319/554d1dd6b4c905ab268b46fe/html5/thumbnails/22.jpg)
![Page 23: Storyboard prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062319/554d1dd6b4c905ab268b46fe/html5/thumbnails/23.jpg)
LastAdd Navigation View to your initial view controllerSelect your initial viewGo to Editor -> Embed In -> Navigation Controller
![Page 24: Storyboard prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062319/554d1dd6b4c905ab268b46fe/html5/thumbnails/24.jpg)
![Page 25: Storyboard prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062319/554d1dd6b4c905ab268b46fe/html5/thumbnails/25.jpg)
Creating New StoryboardJust drag a new view controller to the storyboard screen
![Page 26: Storyboard prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062319/554d1dd6b4c905ab268b46fe/html5/thumbnails/26.jpg)
![Page 27: Storyboard prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062319/554d1dd6b4c905ab268b46fe/html5/thumbnails/27.jpg)
Link storyboard screens together part 1
Just select your buttonWhich will trigger the transitionThen right click and drag the Trigger Segues outletAnd pull it to the storyboard that you want to link
![Page 28: Storyboard prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062319/554d1dd6b4c905ab268b46fe/html5/thumbnails/28.jpg)
![Page 29: Storyboard prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062319/554d1dd6b4c905ab268b46fe/html5/thumbnails/29.jpg)
Link storyboard screens together part 2
Using codeYou need to give the segue an identifierThen write some code
![Page 30: Storyboard prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062319/554d1dd6b4c905ab268b46fe/html5/thumbnails/30.jpg)
![Page 31: Storyboard prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062319/554d1dd6b4c905ab268b46fe/html5/thumbnails/31.jpg)
The code to write[self performSegueWithIdentifier:@"SecondViewSegue" sender:self];