Skip to content

Nomenclature OS Platform

Jump to bottom
Hwee-Boon Yar edited this page Feb 21, 2019 · 2 revisions

The standard guides for both platforms:

  • iOS Human Interface Guidelines. Start with Bars in HIG
  • Material Design for Android. Start with bottom App bars at Material Design 
           Nav/Navigation bar                                                     
                                                                                  
                    │                                                             
                    │                                                             
                    └──────┐                                                      
 ┌─────────────────────────┼─────────┐       ┌───────────────────────────────────┐
 │                         ▼         │       │                                   │
 │               Title               │       │                                   │
 │                                   │       │                                   │
 ├───────────────────────────────────┤       │                                   │
 │                                   │       │                                   │
 │                                   │       │                                   │
 │                                   │       │                                   │
 │                                   │       │                                   │
 │                                   │       │                                   │
 │                                   │       │                                   │
 │                                   │       │                                   │
 │               iOS                 │       │              Android              │
 │                                   │       │                                   │
 │                                   │       │                                   │
 │                                   │       │                                   │
 │                                   │       │                                   │
 │                                   │       │                                   │
 │                                   │       │                                   │
 │                                   │       │                                   │
 │                                   │       │                                   │
 │                                   │       │                                   │
 │                                   │       │                                   │
 │                                   │       │                                   │
 ├────────┬────────┬────────┬────────┤       ├────────┬────────┬────────┬────────┤
 │        │        │        │        │       │        │        │        │        │
 │        │      ▲ │        │        │       │        │   ▲    │        │        │
 └────────┴──────┼─┴────────┴────────┘       └────────┴───┼────┴────────┴────────┘
                 │                                        │                       
                 │                                        │                       
                 │                                     Bottom                     
                                                   navigation bar                 
              Tab bar                                                             
                                                                                  
                                                                                  
                                                                                  
                                                                                  
                                                                                  
      Segmented control                                          Tabs             
                                                                                  
              │                                                    │              
              │                                                    │              
┌─────────────┼─────────────────────┐        ┌─────────────────────┼─────────────┐
│             │                     │        │ ────                │         o   │
│             │ Title               │        │ ────   Title        │         o   │
│             │                     │        │ ────                │         o   │
├─────────────┼─────────────────────┤        │                     │             │
│ .─┬──────┬──▼───┬──────┬──────┬─. │        │                     ▼             │
│(  │      │      │      │      │  )│        │  ALL    CURRENCY   ASSETS         │
│ `─┴──────┴──────┴──────┴──────┴─' │        ├───────────────────────────────────┤
│                                   │        │                                   │
│                                   │        │                                   │
│                                   │        │                                   │
│                                   │        │                                   │
│                                   │        │                                   │
│              iOS                  │        │             Android               │
│                                   │        │                                   │
│                                   │        │                                   │
│                                   │        │                                   │
│                                   │        │                                   │
│                                   │        │                                   │
│                                   │        │                                   │
│                                   │        │                                   │
│                                   │        │                                   │
│                                   │        │                                   │
│                                   │        │                                   │
│                                   │        │                                   │
│                                   │        │                                   │
│                                   │        │                                   │
└───────────────────────────────────┘        └───────────────────────────────────┘
                                                                                  
                                                                                  
                                                                                  
                                                                                  
                                                                                  
                                                              Top app bar         
                                                                                  
                                                                   │              
                                                                   │              
                                             ┌─────────────────────┼─────────────┐
                                             │ ────                │         o   │
                                             │ ────   Title        ▼         o   │
                                             │ ────                          o   │
                                             ├───────────────────────────────────┤
                                             │                                   │
                                             │                                   │
                                             │                                   │
                                             │                                   │
                                             │                                   │
                                             │            Android                │
                                             │                                   │
                                             │                                   │
                                             │                                   │
                                             │                                   │
                                             │                                   │
                                             │                                   │
                                             │                                   │
                                             │                                   │
                                             │                                   │
                                             │                                   │
                                             │                                   │
                                             │                                   │
                                             ├───────────────────────────────────┤
                                             │ ────                          o   │
                                             │ ────   Title                  o   │
                                             │ ────                ▲         o   │
                                             └─────────────────────┼─────────────┘
                                                                   │              
                                                                   │              
                                                                                  
                                                            Bottom app bar
Clone this wiki locally