iOS vs. Android App UI Design: The Complete Guide
페이지 정보
작성자 운영자 댓글 0건 조회 1,318회 작성일 20-01-28 15:28본문
Here are the most important differences that UX/UI designers need to take into account when “translating” an app from iOS to Android or vice versa:
| DESIGN ELEMENT | IOS | ANDROID |
|---|---|---|
| Minimum tap target size | 44x44 pt | 48x48 dp (What's a dp?) |
| Main app navigation | Bottom nav | Tabs at top of screen |
| Secondary app navigation | Bottom nav “More” OR on-page UI | Bottom nav OR "hamburger button" side menu |
| Primary button/action | Top nav, right side | Floating action button |
| Secondary actions | On-page UI | Top nav, right side |
| Single-choice lists | List with checkmark for selected item | Radio button list |
| Multiple-choice lists | List with switches OR list with checkmarks for selected items | Checkbox list OR list with switches |
| Confirm or allow undo of destructive actions | Modal dialog to confirm choice | Allow Undo via temporary on-screen notifications |
Oh, and before we really dive in, let’s answer one important question that will frame everything else here…
Do I have to make my Android and iOS apps different?
Long story short: no.
Apple and Google are both very smart companies with a zillion users each. They will make UX mistakes like anyone else, but in general, when they define a design language for the default way in which their system should work, they’re not going to be making incredibly glaring mistakes. So while I present two ways of doing everything below (the iOS way and the Android way), neither is wrong. If your users are able to confidently navigate and use the app you’re creating, then no one can tell you not to use tabs on iOS or modal views on Android.
This article is written in the spirit of learning to “think in iOS” or “think in Android” – and if your goal is to make an app for both platforms, but have each feel native to the system it’s on, then this guide will be a huge help.
With that being said, let’s dive in.
iOS vs. Android Navigation
Top-of-screen navigation
We’ll start from the top – literally. Each platform has different standards for what appears at the top of most screens.
On iOS, the (optional) left action is almost always some sort of “back” – whether to the previous screen sequentially (“Step 2” goes back to “Step “1), or the parent screen hierarchically (“Inbox” goes up to “Mailboxes”). Alternatively, a non-related destination can be linked here. The page title is virtually always present, and starts large, but shrinks with the header as the user scrolls. The optional right page action(s) can be displayed as a single text action or multiple icon actions.
On Android, the page title is left-aligned. There doesn’t need to be anything to the left of the page title, but (a) if the page is a top-level page and there’s a hamburger button in the app, it appears there, or (b) if this page follows another sequentially, you can optionally add a back button.
Resources: iOS navigation bars; Material Design top app bar
댓글목록
등록된 댓글이 없습니다.
