anatomy of an app | interface skins
DESCRIPTION
Proscape apps are made up of slides, pages, and interface skins, and these slides can be enhanced with features like animation, video, and other interactive elements. To make the best decisions when designing apps, you need to understand how these elements can be used to create apps that look amazing and meet your business needs. To help you, we are dissecting apps into their components and sharing some great examples in a series of presentations on the anatomy of your apps. The topic of this presentation is interface skins. The interface skin is one of the ways you can design navigation in your app, allowing end users to access its content and features. It’s one of the most important parts of your app because an app that is hard to navigate is difficult to use. Since you want your app to be as intuitive as possible, you need to consider all of the possibilities when it comes to interface skins. You can use one or more skins, including different types of skins, in your app based on your specific business requirements. Check out the presentation for some great examplesTRANSCRIPT
![Page 1: Anatomy of an App | Interface Skins](https://reader033.vdocuments.site/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/1.jpg)
Anatomy of An App Navigation with Interface Skins
![Page 2: Anatomy of an App | Interface Skins](https://reader033.vdocuments.site/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/2.jpg)
Tab Strip Aid navigation with tabs that enable swiping through related slides
![Page 3: Anatomy of an App | Interface Skins](https://reader033.vdocuments.site/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/3.jpg)
Tab Strip
![Page 4: Anatomy of an App | Interface Skins](https://reader033.vdocuments.site/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/4.jpg)
Tab Strip
![Page 5: Anatomy of an App | Interface Skins](https://reader033.vdocuments.site/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/5.jpg)
Function Skin Access built-in functions such as MyApps, App Menu, Content Map, Customer, Library, Close, and Home
![Page 6: Anatomy of an App | Interface Skins](https://reader033.vdocuments.site/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/6.jpg)
Function Skin
![Page 7: Anatomy of an App | Interface Skins](https://reader033.vdocuments.site/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/7.jpg)
Function Skin
Close | Library | Home Customer | MyApps
![Page 8: Anatomy of an App | Interface Skins](https://reader033.vdocuments.site/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/8.jpg)
Categories & Tabs Skin Organize a large amount of content based on categories and topics to aid navigation throughout your app
![Page 9: Anatomy of an App | Interface Skins](https://reader033.vdocuments.site/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/9.jpg)
Tabs
Categories
![Page 10: Anatomy of an App | Interface Skins](https://reader033.vdocuments.site/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/10.jpg)
Tabs
Categories
![Page 11: Anatomy of an App | Interface Skins](https://reader033.vdocuments.site/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/11.jpg)
Graphic Skin Navigation buttons can be any shape and placed anywhere
![Page 12: Anatomy of an App | Interface Skins](https://reader033.vdocuments.site/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/12.jpg)
Graphic Skin
![Page 13: Anatomy of an App | Interface Skins](https://reader033.vdocuments.site/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/13.jpg)
Graphic Skin
![Page 14: Anatomy of an App | Interface Skins](https://reader033.vdocuments.site/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/14.jpg)
Segmented Skin Used when different segments of an app require different forms of navigation
![Page 15: Anatomy of an App | Interface Skins](https://reader033.vdocuments.site/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/15.jpg)
Segmented Skin
![Page 16: Anatomy of an App | Interface Skins](https://reader033.vdocuments.site/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/16.jpg)
Segmented Skin
![Page 17: Anatomy of an App | Interface Skins](https://reader033.vdocuments.site/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/17.jpg)
Hidden Skin Hide your skin buttons to create a clean and less distracting interface
![Page 18: Anatomy of an App | Interface Skins](https://reader033.vdocuments.site/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/18.jpg)
Hidden Skin (hidden)
![Page 19: Anatomy of an App | Interface Skins](https://reader033.vdocuments.site/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/19.jpg)
Hidden Skin (revealed)
![Page 20: Anatomy of an App | Interface Skins](https://reader033.vdocuments.site/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/20.jpg)
Hidden Skin (revealed)
![Page 21: Anatomy of an App | Interface Skins](https://reader033.vdocuments.site/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/21.jpg)
Environment Skin Build app navigation into the environment with skeuomorphic design (meaning that design mimics reality)
![Page 22: Anatomy of an App | Interface Skins](https://reader033.vdocuments.site/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/22.jpg)
Environment Skin
![Page 23: Anatomy of an App | Interface Skins](https://reader033.vdocuments.site/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/23.jpg)
Environment Skin
![Page 24: Anatomy of an App | Interface Skins](https://reader033.vdocuments.site/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/24.jpg)
Kinetic Skin Move skin around all four edges of the frame without disrupting the layout or the user experience
![Page 25: Anatomy of an App | Interface Skins](https://reader033.vdocuments.site/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/25.jpg)
Kinetic Skin
![Page 26: Anatomy of an App | Interface Skins](https://reader033.vdocuments.site/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/26.jpg)
Kinetic Skin
![Page 27: Anatomy of an App | Interface Skins](https://reader033.vdocuments.site/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/27.jpg)
Kinetic Skin
![Page 28: Anatomy of an App | Interface Skins](https://reader033.vdocuments.site/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/28.jpg)
Drop-Down Skin Create drop-down menu for navigating to different parts of app
![Page 29: Anatomy of an App | Interface Skins](https://reader033.vdocuments.site/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/29.jpg)
Drop-Down Skin
![Page 30: Anatomy of an App | Interface Skins](https://reader033.vdocuments.site/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/30.jpg)
Drop-Down Skin
![Page 31: Anatomy of an App | Interface Skins](https://reader033.vdocuments.site/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/31.jpg)
Drop-Down Skin