diff options
| author | Riku Isokoski <riksu9000@gmail.com> | 2021-11-06 13:04:37 (GMT) |
|---|---|---|
| committer | JF <JF002@users.noreply.github.com> | 2021-11-28 12:42:37 (GMT) |
| commit | 1d3098baa772176476febb05531a074c0d133b56 (patch) | |
| tree | e5ecfde03c0dc7692a2b6eb20c29f87588fb18cd | |
| parent | c3c5ab347308d820843d2076db5543ffa93934d1 (diff) | |
Update ui_guidelines
| -rw-r--r-- | README.md | 1 | ||||
| -rw-r--r-- | doc/ui_guidelines.md | 5 |
2 files changed, 2 insertions, 4 deletions
@@ -21,6 +21,7 @@ InfiniTime is an open-source firmware for the [Pinetime smartwatch](https://www. - [How to implement an application](doc/code/Apps.md) - [Generate the fonts and symbols](src/displayapp/fonts/README.md) - [Creating a stopwatch in Pinetime(article)](https://pankajraghav.com/2021/04/03/PINETIME-STOPCLOCK.html) + - [Tips on designing an app UI](doc/ui_guidelines.md) ### Build, flash and debug diff --git a/doc/ui_guidelines.md b/doc/ui_guidelines.md index c267b79..0cbd39f 100644 --- a/doc/ui_guidelines.md +++ b/doc/ui_guidelines.md @@ -4,13 +4,10 @@ - Buttons should generally be at least 50px high - Buttons should generally be on the bottom edge - Make interactable objects **big** -- Recommendations for inner padding, aka distance between buttons: - - When aligning 4 objects: 4px, e.g. Settings - - When aligning 3 objects: 6px, e.g. App list - - When aligning 2 objects: 10px, e.g. Quick settings - When using a page indicator, leave 8px for it on the right side - It is acceptable to leave 8px on the left side as well to center the content - Top bar takes at least 20px + padding - Top bar right icons move 8px to the left when using a page indicator +- A black background helps to hide the screen border, allowing the UI to look less cramped when utilizing the entire display area.  |