Anatomy of an App | Interface Skins
-
Upload
proscape-technologies -
Category
Marketing
-
view
507 -
download
0
description
Transcript of Anatomy of an App | Interface Skins
![Page 1: Anatomy of an App | Interface Skins](https://reader033.fdocuments.us/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.fdocuments.us/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.fdocuments.us/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/3.jpg)
Tab Strip
![Page 4: Anatomy of an App | Interface Skins](https://reader033.fdocuments.us/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/4.jpg)
Tab Strip
![Page 5: Anatomy of an App | Interface Skins](https://reader033.fdocuments.us/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.fdocuments.us/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/6.jpg)
Function Skin
![Page 7: Anatomy of an App | Interface Skins](https://reader033.fdocuments.us/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.fdocuments.us/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.fdocuments.us/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/9.jpg)
Tabs
Categories
![Page 10: Anatomy of an App | Interface Skins](https://reader033.fdocuments.us/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/10.jpg)
Tabs
Categories
![Page 11: Anatomy of an App | Interface Skins](https://reader033.fdocuments.us/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.fdocuments.us/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/12.jpg)
Graphic Skin
![Page 13: Anatomy of an App | Interface Skins](https://reader033.fdocuments.us/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/13.jpg)
Graphic Skin
![Page 14: Anatomy of an App | Interface Skins](https://reader033.fdocuments.us/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.fdocuments.us/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/15.jpg)
Segmented Skin
![Page 16: Anatomy of an App | Interface Skins](https://reader033.fdocuments.us/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/16.jpg)
Segmented Skin
![Page 17: Anatomy of an App | Interface Skins](https://reader033.fdocuments.us/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.fdocuments.us/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/18.jpg)
Hidden Skin (hidden)
![Page 19: Anatomy of an App | Interface Skins](https://reader033.fdocuments.us/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/19.jpg)
Hidden Skin (revealed)
![Page 20: Anatomy of an App | Interface Skins](https://reader033.fdocuments.us/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/20.jpg)
Hidden Skin (revealed)
![Page 21: Anatomy of an App | Interface Skins](https://reader033.fdocuments.us/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.fdocuments.us/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/22.jpg)
Environment Skin
![Page 23: Anatomy of an App | Interface Skins](https://reader033.fdocuments.us/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/23.jpg)
Environment Skin
![Page 24: Anatomy of an App | Interface Skins](https://reader033.fdocuments.us/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.fdocuments.us/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/25.jpg)
Kinetic Skin
![Page 26: Anatomy of an App | Interface Skins](https://reader033.fdocuments.us/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/26.jpg)
Kinetic Skin
![Page 27: Anatomy of an App | Interface Skins](https://reader033.fdocuments.us/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/27.jpg)
Kinetic Skin
![Page 28: Anatomy of an App | Interface Skins](https://reader033.fdocuments.us/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.fdocuments.us/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/29.jpg)
Drop-Down Skin
![Page 30: Anatomy of an App | Interface Skins](https://reader033.fdocuments.us/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/30.jpg)
Drop-Down Skin
![Page 31: Anatomy of an App | Interface Skins](https://reader033.fdocuments.us/reader033/viewer/2022042813/54556c2aaf7959795d8b4795/html5/thumbnails/31.jpg)
Drop-Down Skin